/* ========================================================================== MESURA · web publica · registro "Aire" -------------------------------------------------------------------------- Era taller/pruebas/diseno/sistema-d.css. Promocionado el 24/09/2026: Rodrigo eligio la toma D el 23/09 y pidio cerrar las pruebas. Las cinco paginas de marca/web/ cuelgan de esta hoja. LOS TOKENS NO SE FUNDEN CON LOS DEL CRM, Y ES A PROPOSITO. ventas/crm/estilo.css tiene su propio :root. Comparados el 24/09/2026: identicos ... --tinta #1a1d1f · --texto #45484a · --suave #68696d --fondo/--banda/--tarjeta #fbfaf8 · --filo rgba(26,29,31,.10) --acento #b4462a · --curva cubic-bezier(.16,1,.3,1) distintos ... --radio 18px aqui / 16px en el CRM --radio-corto 14px aqui / 12px en el CRM --marca-suave .05 aqui / .06 en el CRM --marca-hover .04 aqui / .045 en el CRM --sombra 12px 32px aqui / 10px 28px en el CRM solo el CRM . --filo-suave, --dato, --dato-flojo, --fondo-velo y el modo oscuro entero. Una pagina publica no tiene modo oscuro. Fundirlas en un fichero cambiaria el aspecto de una de las dos. Son dos superficies distintas -un sitio que se lee una vez y una herramienta que se usa a diario- con el mismo registro, no la misma hoja. Si cambias un color de la lista de "identicos", cambialo tambien en ventas/crm/estilo.css. Contrastes calculados, no estimados: tinta #1a1d1f sobre #fbfaf8 .... 16.24:1 texto #45484a sobre #fbfaf8 ..... 8.83:1 suave #68696d sobre #fbfaf8 ..... 5.26:1 acento #b4462a sobre #fbfaf8 ..... 5.23:1 OJO: #6e6e73, el gris secundario real de Apple, FALLA sobre la banda (4.46:1). Por eso el suave es #68696d y no ese. ========================================================================== */ @font-face{ font-family:Archivo; font-style:normal; font-weight:100 900; /* el rango real del fichero; 400-600 hacia sintetizar */ font-display:swap; src:url(fuentes/archivo.woff2) format("woff2"); } /* 12/10/2026 · ASPECTO NUEVO (taller/pruebas/web-nueva/reglas.mjs, TOKENS). Fondo #f7f7f7, tinta #111, bajadas en #6b6b6b, boton terracota en pastilla, titular de hasta 72 px con peso 700 y -.04em, y barra oscura, flotante y en pildora. Contrastes: tinta #111 sobre #f7f7f7 ........ 17.5:1 suave #6b6b6b sobre #f7f7f7 ..... 4.97:1 (sobre la tarjeta blanca, 5.33:1) 20/10: acento #c6450a (antes #cb3a06, mas rojizo): blanco encima 4.9:1, sobre #f7f7f7 4.60:1, hover #a93a07. Los 4.73 / 5.06 / 6.80 de abajo son del #cb3a06 anterior. blanco sobre acento #cb3a06 ..... 5.06:1 (12/10, S2: antes #b4462a, mas tenue; acento como texto sobre #f7f7f7 ..... 4.73:1; hover #a83005 con blanco ........... 6.80:1) enlaces de la barra sobre #111 .. 9.9:1 o mas No hay modo oscuro: la web publica no lo tiene. 20/10/2026 · cambio 16: el color vuelve, pero el naranja (--acento) ya no es un tono de tarjeta: es solo de lo que se pulsa (botones, enlaces, foco). El montaje pasa a --granate (#a3243b, 18:39). 12/10/2026 · V-3 · TRES TONOS CON SIGNIFICADO, los mismos en toda la web: verde = la media hora (lo que no cuesta nada) ..... #1f7a4a azul = la demo y el precio ....................... #2a62b0 granate = el montaje y lo que viene despues ....... #a3243b (antes terracota, malva y ocre; el 20/10 18:39 pasó a granate) Solo en el circulo del icono (fondo al 10-11 %), la etiqueta pequena de la tarjeta, el numero del paso y las marcas ✓. Nunca en titulares, bandas ni texto corrido. El boton sigue siendo la unica pieza rellena de color. Se aplica con .tono-verde / .tono-azul / .tono-acento en la tarjeta. Contrastes como texto, sobre #f7f7f7 / sobre blanco: verde #1f7a4a 4.97 / 5.33 · azul #2a62b0 5.65 / 6.05 · terracota #cb3a06 4.73 / 5.06 12/10/2026 · AA-2 · UN TONO POR MOMENTO. Una lista de un solo momento del cliente va TODA en el mismo tono: no se reparte un color por elemento solo para variar. Las cinco fases de «Se monta contigo, paso a paso» (Firma, Ordenar, Montar y probar, Entrega, Despues) son el montaje, asi que van las cinco en .tono-acento (antes Firma iba en azul y se leia raro). Peso del circulo medido (tinte sobre blanco / sobre #f7f7f7, diferencia de claridad L* con el fondo): verde .11 6.06 / 5.74 · azul .11 6.13 / 5.89 · terracota .10 5.92 / 5.61. Ya pesa lo mismo, asi que --acento-suave no se sube (subirlo a .14 daria 8.29 y lo haria destacar). Trazo sobre su tinte, 3:1 o mas: terracota 4.36 / 4.09 · verde 4.57 / 4.29 · azul 5.18 / 4.85. */ :root{ --tinta:#111111; --texto:#3b3b3b; --suave:#6b6b6b; /* El fondo es #f7f7f7 y las tarjetas suben a blanco para separarse de el; --banda sigue valiendo lo mismo que --fondo (una sola superficie de pagina). */ --fondo:#f7f7f7; --banda:#f7f7f7; --tarjeta:#ffffff; /* Tinte minimo para marcas FUNCIONALES, no para superficies de pagina: carriles de barra, hover de fila y relleno de campo. Sin esto una barra al 30% es un rectangulo suelto y un campo no parece un campo. */ --marca-suave:rgba(17,17,17,.05); --marca-hover:rgba(17,17,17,.04); --filo:rgba(17,17,17,.10); --acento:#c6450a; --acento-suave:rgba(198,69,10,.10); --verde:#1f7a4a; --verde-suave:rgba(31,122,74,.11); /* 20/10 (cambio 16): el color vuelve, sin naranja. Naranja = se pulsa; verde, azul y granate = estado y etiqueta. */ --azul:#2a62b0; --azul-suave:rgba(42,98,176,.11); /* 20/10 (18:39, ajuste 2): el ocre sale; el montaje va en granate. #a3243b tira a rojo-azulado y no se confunde con el naranja de los botones (#c6450a). Como texto: 7.31 sobre blanco · 6.82 sobre #f7f7f7 · 6.29 sobre su tinte al 9 % (sobre #f7f7f7, 5.89). */ --granate:#a3243b; --granate-suave:rgba(163,36,59,.09); --nav:64px; --curva:cubic-bezier(.16,1,.3,1); --sombra:0 1px 1px rgba(17,17,17,.05),0 2px 6px rgba(17,17,17,.06),0 12px 32px rgba(17,17,17,.08); --sombra-alta:0 1px 1px rgba(17,17,17,.06),0 4px 12px rgba(17,17,17,.09),0 22px 52px rgba(17,17,17,.13); --radio:18px; --radio-corto:14px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0;background:var(--fondo);color:var(--tinta); font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-size:17px;line-height:1.55; } /* Superficies del navegador: seleccion, caret y barra salen del sistema. Es lo mas barato que separa una pagina construida de una ensamblada. */ ::selection{background:var(--tinta);color:var(--fondo)} :root{accent-color:var(--tinta);caret-color:var(--acento);scrollbar-color:#c4c4c4 var(--fondo)} :focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:6px} img,svg{display:block;max-width:100%} .env{max-width:1060px;margin:0 auto;padding:0 32px} .estrecho{max-width:760px} /* ─────────── tipografia ─────────── */ h1,h2,h3{margin:0} .display,h1.titular{font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-.04em; line-height:1.02;text-wrap:balance} .titular{font-size:clamp(30px,4.4vw,50px);font-weight:700;letter-spacing:-.035em; line-height:1.08;text-wrap:balance} /* Titular compacto (20/10): un escalon por debajo de .display. Es el de todas las paginas que no son la portada; .display a secas (hasta 72-92 px) queda para la portada. */ .display.compacto{font-size:clamp(32px,4.6vw,58px);letter-spacing:-.037em;line-height:1.05} /* Peso 700 en todo h2. Ninguna pagina lo fija ya a 600 (quitado el 12/10 en A3). */ h2,main h2{font-weight:700} /* Titulo de una tarjeta o de un bloque pequeño: h2 con peso 700 */ .h-tarjeta{font-size:clamp(22px,2.6vw,26px);font-weight:700;letter-spacing:-.025em; line-height:1.15;text-wrap:balance;margin:0 0 10px} .subtitular{font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.02em; line-height:1.2;text-wrap:balance} .entrada{font-size:21px;line-height:1.5;color:var(--suave);text-wrap:pretty;margin:0} .bajada{font-size:19px;line-height:1.55;color:var(--suave);text-wrap:pretty;margin:0} .cuerpo{font-size:17px;line-height:1.55;color:var(--texto);text-wrap:pretty;margin:0} .menor{font-size:15px;line-height:1.5;color:var(--suave);text-wrap:pretty;margin:0} .cuerpo b,.bajada b,.entrada b,.menor b{color:var(--tinta);font-weight:600} .cifra{font-variant-numeric:tabular-nums} /* ─────────── superficies y ritmo ─────────── */ /* 96 px hasta el 05/10/2026: dos secciones seguidas dejaban 192 px de hueco. */ /* 56 px en ordenador desde el 20/10 (cambio 15): dos secciones seguidas dejan 112 px, el aire de Apple. En móvil mandan los 48 px del bloque de 760 px. */ .banda,.claro{padding:56px 0} .tarjeta{background:var(--tarjeta);border-radius:var(--radio);padding:28px 30px; box-shadow:var(--sombra)} .pastilla{background:var(--tarjeta);border-radius:999px;padding:9px 20px;font-size:14px; color:var(--texto);box-shadow:var(--sombra);display:inline-block} .pastilla b{color:var(--tinta);font-weight:600} /* ─────────── controles ─────────── */ .btn{ appearance:none;display:inline-flex;align-items:center;justify-content:center; font:inherit;font-size:16px;font-weight:600;letter-spacing:-.005em;line-height:1.2; min-height:52px;padding:0 28px;max-width:100%; border-radius:999px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap; background:var(--acento);color:#fff; box-shadow:0 1px 1px rgba(17,17,17,.12),0 6px 14px -6px rgba(17,17,17,.28); transition:transform .3s var(--curva),background .3s var(--curva),box-shadow .3s var(--curva); } .btn:hover{background:#a93a07;box-shadow:0 1px 1px rgba(17,17,17,.14),0 8px 18px -6px rgba(17,17,17,.32)} .btn:active{transform:scale(.97)} .btn.fino{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--filo)} .btn.fino:hover{background:var(--marca-hover);color:var(--tinta)} /* Sobre la tinta: misma pastilla y mismo tamano, en claro y sin sombra (en oscuro no se ve). */ .btn.inv{background:var(--fondo);color:var(--tinta);box-shadow:none} .btn.inv:hover{background:var(--acento);color:#fff;box-shadow:none} /* ─────────── tarjetas con siguiente paso (S5, 12/10/2026) ─────────── Una tarjeta con siguiente paso lleva .conboton y, abajo, un boton de borde fino con «›». Al pasar el raton la tarjeta sube 2 px y la sombra crece (200 ms) y la flecha se mueve 3 px. Con movimiento reducido solo cambia la sombra. */ .tarjeta.paso,.rejilla.num > li{position:relative} /* Circulo de icono y tono de la tarjeta (20/10, cambio 16). El tono lo dice todo: la misma etiqueta lleva siempre el mismo color. Nunca naranja: el naranja es de lo que se pulsa. verde = lo que no cuesta o ya tienes (la media hora, «Si un día lo dejas», «Va incluido») azul = lo de hoy y lo que se mira antes de decidir (la demo y el precio) granate = el montaje (lo que lleva siempre, los 14 días) Contraste como texto, sobre blanco / sobre #f7f7f7 / sobre su tinte: verde 5.33 / 4.97 / 4.29 · azul 6.05 / 5.65 / 4.85 · granate 7.31 / 6.82 / 6.29. */ .ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%; background:var(--tono-suave,var(--marca-suave));color:var(--tono,var(--tinta)); flex:none;position:absolute;top:22px;right:22px} /* Iconos al estilo de los símbolos de Apple (18:39): todos en una rejilla de 24, trazo de 1.6 y puntas redondas, 24 px (el dibujo ocupa unos 18) dentro de un círculo de 40 con el tinte al 9-11 %. */ .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .tono-verde{--tono:var(--verde);--tono-suave:var(--verde-suave)} .tono-azul{--tono:var(--azul);--tono-suave:var(--azul-suave)} .tono-granate{--tono:var(--granate);--tono-suave:var(--granate-suave)} .tono-verde .et,.tono-azul .et,.tono-granate .et{color:var(--tono)} .conboton{display:flex;flex-direction:column; transition:box-shadow .2s var(--curva),transform .2s var(--curva)} .sig-fila{margin-top:auto;padding-top:22px} .btn.sig{min-height:44px;padding:10px 20px;font-size:15px;gap:8px; white-space:normal;text-align:center;line-height:1.3;max-width:100%; box-shadow:inset 0 0 0 1px rgba(17,17,17,.22)} .btn.sig:hover{box-shadow:inset 0 0 0 1px var(--tinta)} .sig .flecha{display:inline-block;font-size:1.25em;line-height:1;margin-top:-.08em} @media (hover:hover){ .conboton:hover{box-shadow:var(--sombra-alta)} } @media (prefers-reduced-motion:no-preference){ .sig .flecha{transition:transform .2s var(--curva)} .sig:hover .flecha,.sig:focus-visible .flecha{transform:translateX(3px)} } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .conboton:hover{transform:translateY(-2px)} } /* ─────────── barra oscura, flotante y en pildora ─────────── .nav es solo el carril pegajoso (transparente, no atrapa clics); la pildora es .nav .env: #111, centrada, con 12 px de margen arriba. */ .nav{ position:sticky;top:0;z-index:40;padding:12px 16px 0; background:none;pointer-events:none; } .nav .env{ pointer-events:auto;display:flex;align-items:center;gap:20px; width:100%;max-width:920px;min-height:56px;margin:0 auto;padding:8px 8px 8px 28px; background:#111111;border-radius:999px; box-shadow:0 1px 2px rgba(17,17,17,.18),0 8px 24px rgba(17,17,17,.14); transition:box-shadow .4s var(--curva); } .nav[data-bajado="si"] .env{box-shadow:0 1px 2px rgba(17,17,17,.24),0 14px 34px rgba(17,17,17,.22)} .marca{display:flex;align-items:baseline;gap:.271em;font-size:17px;color:#f7f7f7; text-decoration:none;white-space:nowrap} .marca svg{height:.6875em;width:.715em} .marca span{font-weight:600;letter-spacing:.16em;line-height:1} .menu{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto;font-size:15px;font-weight:500; color:rgba(247,247,247,.74)} .menu a{color:inherit;text-decoration:none;transition:color .25s var(--curva)} .menu a:hover{color:#fff} .menu a.aqui{color:#fff;font-weight:600} .cta-nav{min-height:40px;padding:0 18px;font-size:14px;flex:0 0 auto} .solo-movil{display:none} .cta-reserva{flex:0 0 auto} /* ─────────── portada: cabecera de context-con y captura de Plausible ─────────── Arriba, todo centrado: titular, bajada, boton terracota y la garantia en gris y pequeño. Debajo, el video grande en un marco con borde fino y radio, como la captura del panel de Plausible. */ .portada{display:flex;flex-direction:column;align-items:center;text-align:center; padding-top:72px;padding-bottom:72px} .portada .display{max-width:16ch} .portada .entrada{margin-top:26px;max-width:44ch} .portada .acciones{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px} .portada .acciones .menor{font-size:14px} .portada .acciones .menor a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px} /* Bajo el titular, la escena de las tareas (V-4): sin caja ni marco, sobre el fondo, y el borde de abajo se funde con él, como los avisos de «Así empieza cada mañana». tareas.js las marca una detrás de otra; sin JavaScript o con movimiento reducido salen las cuatro marcadas. */ .marco-portada{width:100%;max-width:620px;margin:56px auto 0} /* Z-3: entre la última tarea y el titular de debajo quedaban 142 px (390) y 190 px (1280). Los 46 px del fundido de .tareas se quedan; la portada ya no suma el suyo y la banda siguiente baja a 44, así que el hueco sale en 90 px a los dos anchos. */ .portada:not(.corta){padding-bottom:0} .portada:not(.corta) + .claro{padding-top:44px} :is(.tareas,.cuentas){margin:0 -12px;padding:10px 12px 46px;text-align:left; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 84px),transparent 100%); mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 84px),transparent 100%)} :is(.tareas,.cuentas) .filas{display:flex;flex-direction:column;gap:12px} .tarea{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;row-gap:5px;align-items:center} /* La tarjeta blanca es solo de la cabecera; las filas de «Es tuyo» son planas (más abajo). */ .tareas .tarea{padding:16px 18px;border-radius:20px;background:var(--tarjeta);border:1px solid var(--filo); box-shadow:0 1px 2px rgba(17,17,17,.04),0 6px 16px rgba(17,17,17,.05)} .tarea .caja{grid-row:1;width:28px;height:28px;border-radius:9px;display:flex;align-items:center; justify-content:center;background:var(--verde);border:2px solid var(--verde);color:#fff} .tarea .caja svg{width:16px;height:16px;display:block} .tarea .caja path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .tarea .t{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--suave)} .tarea .hora{grid-column:2;font-size:13px;font-weight:600;line-height:1;color:var(--verde); background:var(--verde-suave);padding:5px 10px;border-radius:999px;justify-self:start; font-variant-numeric:tabular-nums;white-space:nowrap} /* tareas.js pone .viva y quita .hecha de todas: así empiezan sin marcar y se van marcando. */ :is(.tareas,.cuentas).viva .tarea:not(.hecha) .caja{background:var(--tarjeta);border-color:rgba(17,17,17,.28)} :is(.tareas,.cuentas).viva .tarea:not(.hecha) .caja svg{opacity:0} :is(.tareas,.cuentas).viva .tarea:not(.hecha) .t{color:var(--tinta)} :is(.tareas,.cuentas).viva .tarea:not(.hecha) .hora{opacity:0;transform:translateY(4px)} :is(.tareas,.cuentas).anda .tarea .caja{transition:background-color .25s ease,border-color .25s ease} :is(.tareas,.cuentas).anda .tarea .caja svg{transition:opacity .2s ease .08s} :is(.tareas,.cuentas).anda .tarea .caja path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--curva) .1s} :is(.tareas,.cuentas).anda .tarea:not(.hecha) .caja path{stroke-dashoffset:1} :is(.tareas,.cuentas).anda .tarea .t{transition:color .5s ease .15s} :is(.tareas,.cuentas).anda .tarea .hora{transition:opacity .4s ease .3s,transform .5s var(--curva) .3s} :is(.tareas,.cuentas).anda .tarea.hecha .caja{animation:caja-pop .45s var(--curva)} @keyframes caja-pop{0%{transform:scale(.88)}45%{transform:scale(1.1)}100%{transform:scale(1)}} @media (min-width:761px){ .tarea{grid-template-columns:28px minmax(0,1fr) auto;column-gap:16px} .tareas .tarea{padding:19px 22px} .tarea .t{font-size:18px} .tarea .hora{grid-column:3;grid-row:1;font-size:14px;padding:6px 12px} } /* «Es tuyo» (AA-1): bajo el titular, lo que pasa cuando nos vamos. Arriba, las piezas en tus cuentas, cada una «a tu nombre»; el acceso de Mesura pasa de activo a retirado (algo normal, sin rojo); debajo, las tareas siguen marcándose solas. Mismo registro que .tareas: sin caja, sobre el fondo, y el borde de abajo se funde. cuentas.js lo mueve; sin él, con movimiento reducido o sin JavaScript sale el final: acceso retirado y tareas marcadas. Las tareas comparten reglas con .tareas (:is() más arriba). */ .cuentas .rotulo{margin:0 0 6px;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:.01em;color:var(--suave)} .cuentas .rotulo + .piezas + .rotulo,.cuentas .piezas + .rotulo{margin-top:26px} .piezas{margin:0;padding:0;list-style:none} .pieza{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:center; padding:11px 0;border-bottom:1px solid var(--filo)} .pieza:last-child{border-bottom:0} .pieza .ico-l{grid-row:1 / span 2;width:36px;height:36px;border-radius:50%;display:flex;align-items:center; justify-content:center;background:rgba(17,17,17,.05);color:var(--tinta)} .pieza .ico-l svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.75; stroke-linecap:round;stroke-linejoin:round} .pieza .n{grid-column:2;font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--tinta)} .pieza .de{grid-column:2;font-size:15px;line-height:1.3;color:var(--suave)} /* El acceso de Mesura: dos rótulos apilados en la misma casilla; cambia cuál se ve. */ .estado{display:grid;font-size:13px;font-weight:600;line-height:1;white-space:nowrap; font-variant-numeric:tabular-nums} .estado > span{grid-area:1/1;padding:5px 10px;border-radius:999px;text-align:center} .estado .on{color:var(--verde);background:var(--verde-suave)} .estado .off{color:var(--suave);background:rgba(17,17,17,.06);opacity:0} .acceso.retirado .estado .on{opacity:0} .acceso.retirado .estado .off{opacity:1} .acceso.retirado .n{color:var(--suave);text-decoration:line-through;text-decoration-color:rgba(17,17,17,.5)} .acceso.retirado .ico-l{color:var(--suave)} .acceso .estado{grid-column:2;grid-row:2;justify-self:start;margin-top:4px} .cuentas.anda .acceso .n{transition:color .5s ease} .cuentas.anda .acceso .ico-l{transition:color .5s ease} .cuentas.anda .acceso .estado span{transition:opacity .4s ease} /* Las tareas de la escena, como filas planas del mismo registro que .pieza: sin tarjeta ni sombra, una línea fina entre una y otra. El ✓ sigue en verde y la hora, en su chip. */ .cuentas .filas{margin-top:2px;gap:0} .cuentas .tarea{grid-template-columns:36px minmax(0,1fr);padding:11px 0;border-bottom:1px solid var(--filo)} .cuentas .tarea:last-child{border-bottom:0} .cuentas .tarea .caja{justify-self:center} /* AC-1: las tareas de la escena miden lo que las piezas (17 px) a todos los anchos. Y el fundido del borde de abajo se queda dentro del relleno: antes cubría 84 px y se comía la última fila (quedaba lavada); ahora son 20 px de relleno con 20 px de fundido y la fila queda entera. Con el relleno de 46 px de antes sobraban 142 px (390) bajo la última tarea. */ .cuentas .tarea .t{font-size:17px} /* AC-1: destinos de los botones de la portada; la barra fija mide 68 px y no tapa el título. */ #fases,#presupuesto,#algo-falla{scroll-margin-top:96px} .cuentas{padding-bottom:20px; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 20px),transparent 100%); mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 20px),transparent 100%)} /* En el móvil la escena acaba apilada sobre el siguiente bloque: sin relleno ni fundido, el aire que queda es el de entre bloques (96 px; antes 142). */ @media (max-width:760px){.cuentas{padding-bottom:0;-webkit-mask-image:none;mask-image:none}} @media (min-width:761px){ .estado{font-size:14px} .estado > span{padding:6px 12px} .cuentas .tarea{grid-template-columns:36px minmax(0,1fr) auto;padding:13px 0} .pieza{grid-template-columns:36px minmax(0,1fr) auto;padding:13px 0} .pieza .ico-l{grid-row:1} .pieza .de{grid-column:3;grid-row:1;font-size:15px} .acceso .estado{grid-column:3;grid-row:1;margin-top:0} } /* Titulares y bajadas centrados de las bandas con tarjetas */ .centro{margin-left:auto;margin-right:auto;text-align:center;max-width:20ch} .bajada.centro{max-width:44ch} .bajada.centro,.portada .entrada{text-wrap:balance} /* Las citas, en tarjetas: tres en fila a escritorio, una debajo de otra en el movil */ .citas{list-style:none;margin:40px 0 0;padding:0;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .citas li{background:var(--tarjeta);border-radius:var(--radio);padding:28px 30px; box-shadow:var(--sombra);font-size:18px;line-height:1.5;color:var(--tinta); letter-spacing:-.01em;text-wrap:pretty} /* Cabecera de las otras paginas: la misma .portada, sin imagen debajo (menos aire abajo) */ .portada.corta{padding-bottom:24px} .portada .display.ancho{max-width:22ch} .portada .entrada.ancha{max-width:52ch} /* Rejilla de tarjetas: tres en fila a escritorio, una debajo de otra en el movil. .par = dos columnas; .cinco = cinco tarjetas (tres arriba, dos abajo, mas anchas); .num = numera las tarjetas (1, 2, 3...) con un contador. */ .rejilla{list-style:none;margin:40px 0 0;padding:0;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .rejilla.par{grid-template-columns:repeat(2,minmax(0,1fr))} .rejilla.cinco{grid-template-columns:repeat(6,minmax(0,1fr))} .rejilla.cinco > *{grid-column:span 2} .rejilla.cinco > :nth-child(n+4){grid-column:span 3} .rejilla.num{counter-reset:paso} .rejilla > li,.rejilla > .tarjeta{background:var(--tarjeta);border-radius:var(--radio);padding:28px 30px; box-shadow:var(--sombra);font-size:16px;line-height:1.5;color:var(--texto); text-wrap:pretty;margin:0} .rejilla > li b,.rejilla > li > strong:first-child{display:block;font-size:19px;font-weight:600; letter-spacing:-.015em;line-height:1.3;color:var(--tinta);margin-bottom:8px} .rejilla.num > li::before{counter-increment:paso;content:counter(paso,decimal-leading-zero);display:block; font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--tono,var(--tinta)); font-variant-numeric:tabular-nums;margin-bottom:14px} .rejilla.ancha{margin-top:32px} .rejilla > .toda{grid-column:1/-1} /* Banda con el texto a la derecha y el video a la izquierda (se alterna con .con-clip) */ .con-clip.invertido{grid-template-columns:minmax(0,500px) minmax(0,1fr)} .con-clip.invertido > figure{order:-1} /* ─────────── bloque de tinta a sangre, una vez por pagina ─────────── */ .tinta{background:var(--tinta);color:var(--fondo);padding:96px 0} .tinta .titular,.tinta .display{color:var(--fondo)} .tinta .cuerpo,.tinta .bajada,.tinta .entrada{color:rgba(247,247,247,.76)} /* ─────────── pie ─────────── */ .pie{padding:40px 0 72px;border-top:1px solid var(--filo);font-size:14px;color:var(--suave)} .pie a{color:inherit} /* El «·» entre enlaces del pie va en CSS: en el móvil los enlaces se apilan y no queda ninguno colgado. */ .pie .env > div > * + *::before{content:"·";display:inline-block;margin:0 8px;text-decoration:none} @media (max-width:760px){ .pie .env > div{display:flex;flex-wrap:wrap;gap:0 18px} .pie .env > div > * + *::before{content:none} } .pie .env{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:baseline} /* ─────────── el unico momento de movimiento ─────────── */ /* 20/10 (18:39, ajuste 3): .sube ya NO esconde nada. Antes cada banda salia con opacity:0 hasta que un IntersectionObserver (rootMargin -8 %) la marcaba: las ultimas bandas de la pagina, que nunca llegan a esa franja, se quedaban invisibles (huecos de 250 px entre la ultima tarjeta y el cierre negro) y un buscador o una captura sin scroll veian la pagina vacia. Todo se ve en reposo; la clase queda en el HTML sin efecto. El movimiento de entrada de la cabecera (mas abajo) no depende del scroll. */ .sube{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important;animation-duration:.01ms !important} } /* ─────────── entrada de pagina (como context-con.com) ─────────── aire.js parte el h1 de la cabecera en palabras (.pal) y marca la cabecera con .entra: cada palabra sube y aparece, escalonada (--i, --paso), y detras entran la bajada, el boton y la frase pequena (--j). Todo termina en menos de 700 ms: no se hace esperar para leer. Lo que esconde esta regla solo lo esconde si hay JavaScript y no se pide menos movimiento; si el script no llega a correr, la animacion de rescate lo enseña a los 1,5 s. */ @keyframes pal-sube{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}} @keyframes bloque-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes entra-rescate{to{opacity:1}} @media (scripting:enabled) and (prefers-reduced-motion:no-preference){ :is(.portada,.hero) > h1, :is(.portada,.hero) > h1 ~ *{opacity:0;animation:entra-rescate 1ms 1.5s forwards} :is(.portada,.hero).entra > h1{opacity:1;animation:none} :is(.portada,.hero).entra > h1 .pal{display:inline-block; animation:pal-sube 420ms var(--curva) calc(var(--i,0) * var(--paso,40ms)) both} :is(.portada,.hero).entra > h1 ~ *{opacity:1; animation:bloque-sube 420ms var(--curva) calc(120ms + var(--j,0) * 80ms) both} /* Paso entre paginas: un fundido corto donde el navegador lo soporte */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s} } @media print{ :is(.portada,.hero) > h1,:is(.portada,.hero) > h1 ~ *{opacity:1 !important;animation:none !important} } /* ─────────── movil y tablet: todo a la izquierda (T-3b) ─────────── Hasta 1023 px solo el titular, la bajada y el boton de la portada de index siguen centrados. De 1024 px para arriba lo dice el bloque de escritorio. Va antes del de 760 px, que le quita el tope de ancho. */ @media (max-width:1023px){ .portada.corta{align-items:flex-start;text-align:left} .portada.corta .acciones{align-items:flex-start} .centro{margin-left:0;margin-right:0;text-align:left;max-width:24ch} .bajada.centro{max-width:50ch} .bajada.centro,.portada .entrada{text-wrap:pretty} .portada:not(.corta) .entrada{text-wrap:balance} } /* ─────────── el aviso del móvil (20/10/2026) ─────────── «Dos reservas se cruzan»: la prueba de lo que llega a primera hora. Lo usan el hero de Pisos (bajo el botón) y el de la portada (a la derecha del texto a 1024 px o más; debajo, en móvil). */ .prueba{margin:0} .prueba .menor{margin-top:14px} /* Rehecha el 20/10 (18:39, ajuste 7) como una notificación reciente de iOS: icono pequeño y redondeado a la izquierda, nombre de la app y la hora en gris, título en seminegrita y una o dos líneas. Fondo claro translúcido con desenfoque donde el navegador lo soporte (si no, blanco liso), esquinas de 22 px y sombra suave, sin borde. Es mucho más baja que la tarjeta de antes (de unos 150 px a unos 85). */ .aviso-card{display:flex;align-items:flex-start;gap:12px;max-width:400px;padding:12px 14px;border-radius:22px; background:#fff;color:var(--texto); box-shadow:0 1px 2px rgba(17,17,17,.04),0 8px 24px rgba(17,17,17,.07)} @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .aviso-card{background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px)} } .aviso-card p{margin:0} .aviso-cuerpo{flex:1;min-width:0} .aviso-cab{display:flex;align-items:baseline;gap:8px} .aviso-marca{display:flex;flex:none;width:38px;height:38px;border-radius:9px;background:var(--tinta);color:var(--fondo); align-items:center;justify-content:center} .aviso-marca svg{width:19px;height:19px} .aviso-de{font-size:13px;font-weight:500;line-height:1.3;color:var(--suave)} .aviso-hora{margin-left:auto;font-size:13px;line-height:1.3;color:var(--suave);font-variant-numeric:tabular-nums} .aviso-titulo{font-size:16px;font-weight:600;letter-spacing:-.012em;line-height:1.3;color:var(--tinta)} .aviso-linea{font-size:15px;line-height:1.35;margin-top:1px !important;color:var(--tinta);opacity:.86; font-variant-numeric:tabular-nums} /* La lista de la limpieza usa la misma tarjeta, en bloque y con su título dentro de la cabecera. */ .aviso-card.lista{display:block;padding:14px 18px 4px} .aviso-card.lista .aviso-cab{margin-bottom:4px} .portada .prueba{width:100%;max-width:400px;margin-top:40px;text-align:left} @media (max-width:760px){ .portada .prueba{margin-top:24px} .prueba .menor{margin-top:10px} .aviso-card{max-width:none} } /* ─────────── tablet, de 761 a 1023 px (U-1) ─────────── Tres tarjetas en fila a 900 px partían los botones y la etiqueta del paso: dos columnas, y la tarjeta que se queda sola en la ultima fila se centra con el ancho de una columna (AC-1). «Tu equipo sigue» usa dos columnas como los bloques de debajo. Hasta 760 px sigue mandando el bloque de movil. */ @media (min-width:761px) and (max-width:1023px){ .medicion .tres{grid-template-columns:repeat(2,minmax(0,1fr))} .medicion .tres > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc((100% - 18px)/2)} .rejilla.cinco{grid-template-columns:repeat(2,minmax(0,1fr))} .rejilla.cinco > *,.rejilla.cinco > :nth-child(n+4){grid-column:auto} .rejilla.cinco > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc((100% - 18px)/2)} .paso .et{white-space:nowrap} } /* ─────────── movil ─────────── */ @media (max-width:760px){ :root{--nav:56px} body{font-size:16px} .env{padding:0 22px} .banda,.claro{padding:48px 0} .tinta{padding:60px 0} .entrada{font-size:18px} .bajada{font-size:17px} .tarjeta{padding:24px 22px;border-radius:var(--radio-corto)} /* Marca y cuatro enlaces no caben en una fila a 390px: «Contacto» saltaba a una segunda linea. El logo ya lleva a la portada, asi que «Inicio» sobra aqui. */ .nav{padding:10px 12px 0} .nav .env{gap:12px;padding:6px 18px 6px 20px} .marca{font-size:15px} .menu{gap:12px;font-size:14px;flex-wrap:nowrap} .menu a[href$="index.html"],.menu a[href="/"]{display:none} /* «Pisos turísticos» no cabe con los otros tres a 390 px: en el móvil se queda en «Pisos». */ .menu .menu-largo{display:none} /* En movil el CTA de la barra estorba: el titular ya lleva el suyo y abajo esta el bloque de cierre. */ .cta-nav{display:none} /* Ajuste 21:46-3: en el móvil la barra sí lleva el botón de reservar, compacto y en naranja, en todas las páginas (.cta-reserva). Donde el botón de la barra ya era «Reservar…», se acorta; donde era «Calcula…», entra uno aparte (.solo-movil). «Contacto» sale del menú: el botón lleva al mismo sitio. */ .cta-nav.cta-reserva,.solo-movil{display:inline-flex} .cta-largo{display:none} .cta-reserva{min-height:44px;padding:0 16px;font-size:15px} .nav .env{padding-right:6px;gap:10px} .menu a[href$="contacto.html"]{display:none} /* Dianas tocables de 44 px (X-2): la pildora sigue midiendo 56 px (44 + sus 6 de relleno por arriba y por abajo), asi que no cambia como se ve. */ .nav .marca,.menu a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px} .pie a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px} .pie{padding:16px 0 20px} .pie .env{align-items:center;gap:0 20px} .portada{padding-top:36px;padding-bottom:48px} .portada .display{max-width:none} .portada .acciones{width:100%;align-items:center} .btn{padding:0 24px} .marco-portada{margin-top:32px} .tarea .t{font-size:16px} .citas{grid-template-columns:1fr;gap:14px;margin-top:28px} .citas li{padding:22px;font-size:17px} .portada.corta{padding-bottom:12px} /* El alineado a la izquierda esta en el bloque de hasta 1023 px (mas arriba); aqui solo el ancho. */ .centro{max-width:none} .bajada.centro{max-width:none} .rejilla,.rejilla.par,.rejilla.cinco{grid-template-columns:1fr;gap:14px;margin-top:28px} .rejilla.cinco > *,.rejilla.cinco > :nth-child(n+4){grid-column:auto} .rejilla > li,.rejilla > .tarjeta{padding:22px} .con-clip.invertido{grid-template-columns:minmax(0,1fr)} .con-clip.invertido > figure{order:0} } /* ─────────── escritorio: usar el ancho (S3, 12/10/2026) ─────────── Todo aqui dentro es de 1024 px para arriba: en el movil no cambia nada. Los titulares y las bajadas dejan de centrarse en una columna de 400 px y se alinean a la izquierda; la portada pone el titular en dos lineas y el video a 880 px; las bandas con video y los bloques de dos ideas usan dos columnas. El texto corrido no pasa de 70ch. */ @media (min-width:1024px){ .env{max-width:1184px} /* 20/10 (ajuste E): 44-60 px era un titular de portada puesto a un h2; 34-42 px es el de sección. */ .titular{font-size:clamp(34px,3.4vw,42px)} .centro{margin-left:0;margin-right:0;text-align:left;max-width:24ch} .bajada.centro{max-width:50ch} .bajada.centro,.portada .entrada{text-wrap:pretty} /* Portada en ordenador (20/10, cambio 4b): centrada como antes del cambio 4. El aviso del móvil solo se ve por debajo de 1024 px; en Pisos sigue donde estaba. */ .portada:not(.corta) .display{max-width:none;font-size:clamp(52px,6.9vw,88px)} .portada:not(.corta) .entrada{max-width:56ch} .portada:not(.corta) .botones{justify-content:center} .portada:not(.corta) > .prueba{display:none} .marco-portada{max-width:640px;margin:56px auto 0} /* Las otras cabeceras: el mismo titular grande, a la izquierda y de borde a borde */ .portada.corta{align-items:flex-start;text-align:left;padding-top:72px;padding-bottom:40px} .portada.corta .display,.portada.corta .display.ancho{max-width:none;font-size:clamp(48px,5.6vw,76px)} .portada.corta .display.compacto{font-size:clamp(40px,4.6vw,58px)} .portada.corta .entrada.ancha{max-width:62ch;text-wrap:pretty} /* Ajuste A (20/10): la cabecera que lleva el aviso (Pisos) en dos columnas. A la izquierda el titular, la bajada, el botón y la oferta; a la derecha el aviso, alineado arriba con el titular. */ .portada.corta:has(> .prueba){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px); column-gap:72px;align-items:start} /* Ajuste 21:46-1: titular a todo el ancho en dos líneas, bajada y botón debajo; luego una fila con la oferta a la izquierda y el aviso a la derecha. .acciones se disuelve para que el botón y la oferta sean celdas de la rejilla. */ .portada.corta:has(> .prueba) > .display, .portada.corta:has(> .prueba) > .entrada{grid-column:1 / -1} .portada.corta:has(> .prueba) > .acciones{display:contents} .portada.corta:has(> .prueba) .botones{grid-column:1 / -1} .portada.corta:has(> .prueba) .garantia{grid-column:1;grid-row:4;margin-top:36px;align-self:stretch;max-width:none} .portada.corta:has(> .prueba) > .prueba{grid-column:2;grid-row:4;margin-top:36px} .portada.corta:has(> .prueba) .display.compacto{font-size:clamp(40px,4.6vw,58px)} /* Bandas de texto y video: el video a 560 px, el texto con el resto */ .env.con-clip{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:80px} .env.con-clip.invertido{grid-template-columns:minmax(0,560px) minmax(0,1fr)} .env.con-clip .bajada{max-width:48ch !important} .env.con-clip .corta{max-width:none} /* Cada servicio: el titular, su entradilla debajo (ajuste E, 20/10: ya no flota a la derecha) y las tarjetas */ .serv{display:grid;grid-template-columns:minmax(0,1fr);text-align:left} .serv > .rejilla,.serv > .franja{grid-column:1/-1} .serv .titular.centro{max-width:26ch} .serv .bajada.centro{max-width:56ch} } /* ─────────── ventana de la demo (S9, 12/10/2026) ─────────── La crea reservar.js al llegar la reserva (o con contacto.html#probar-demo). Es una tarjeta blanca de radio 18 con la sombra alta, sobre un fondo oscuro suave. Cuatro campos, un boton de acento y otro de borde fino. Los campos van a 16 px para que el iPhone no haga zoom. */ .demo{width:calc(100% - 32px);max-width:520px;max-height:calc(100dvh - 32px);overflow:auto; margin:auto;padding:30px 30px 26px;border:0;border-radius:var(--radio); background:var(--tarjeta);color:var(--texto);box-shadow:var(--sombra-alta)} .demo::backdrop{background:rgba(17,17,17,.5)} body:has(dialog.demo[open]){overflow:hidden} .demo .h-tarjeta{margin-bottom:8px;color:var(--tinta)} .demo-campos{display:grid;gap:14px;margin-top:22px} .demo-campo{display:grid;gap:6px;font-size:15px;font-weight:600;color:var(--tinta)} .demo-campo small{font-size:inherit;font-weight:400;color:var(--suave)} .demo-campo input{appearance:none;width:100%;min-height:48px;padding:0 16px;font:inherit; font-size:16px;font-weight:400;color:var(--tinta);background:var(--fondo); border:1px solid transparent;border-radius:var(--radio-corto); transition:border-color .25s var(--curva),background .25s var(--curva)} .demo-campo input::placeholder{color:var(--suave)} .demo-campo input:focus{outline:0;background:#fff;border-color:var(--acento)} .demo-campo input:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:var(--radio-corto)} .demo-error{margin:14px 0 0;font-size:15px;color:#a83005} .demo-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .demo-priv{margin-top:18px;font-size:13px} .demo-priv a{color:inherit} .demo-fin .cuerpo{margin-bottom:0} @keyframes demo-entra{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} @keyframes demo-fondo{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:no-preference){ .demo[open]{animation:demo-entra .32s var(--curva)} .demo[open]::backdrop{animation:demo-fondo .25s ease-out} } @media (max-width:760px){ .demo{padding:24px 22px 22px;border-radius:var(--radio-corto)} .demo-botones{flex-direction:column} .demo-botones .btn{width:100%} } @media print{ .demo{display:none} } /* Por debajo de 360px ni sin «Inicio» caben: el menu baja a su propia linea. */ @media (max-width:359px){ .nav .env{flex-wrap:wrap;row-gap:4px;border-radius:28px;padding:10px 16px} .menu{margin-left:0} } /* ─────────── pulido de movil (trozo 3 de web-convertir, 20/10/2026) ─────────── Va al final y con «body» delante para ganar a los