/* ═══════════════════════════════════════════════════════════════════ ezzygrillz · estilos.css PASO 1 — paleta, tipografía, marcos de imagen y layout base. Todavía SIN animaciones: no hay transitions, keyframes ni transforms de scroll. Los tokens de movimiento ya están definidos abajo para que el paso 8 no tenga que tocar nada de esto. ═══════════════════════════════════════════════════════════════════ */ /* ── 0. FUENTES (auto-hospedadas y subseteadas) ───────────────────── Van en /fuentes, no en el CDN de Google: se ahorra el DNS + TLS a un tercero, que en 4G es medio segundo. Cada familia está cortada en latin y latin-ext. Un visitante que lee español baja solo latin: 74 KB en total. El archivo latin-ext existe por si algún día entra un carácter fuera del rango, y el navegador lo pide solo en ese caso. Archivo además está instanciado a los ejes que el sitio usa de verdad — peso 400–800 y ancho 75–100 — en vez de los 100–900 / 62–125 completos. Eso solo bajó de 87 KB a 49 KB. Licencias en la carpeta. Si más adelante hace falta otro peso o un ancho más angosto, hay que volver a generar el subset: fuera de esos rangos la fuente no varía. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; src: url('fuentes/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; src: url('fuentes/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── 1. TOKENS ──────────────────────────────────────────────────── */ :root { /* Paleta — negro frío con tinte verde-azulado. Del guion, sección 4. */ --negro: #0B0E0D; /* el negro de la marca. NO se toca. */ /* ── EL FONDO QUE RESPIRA ────────────────────────────────────────── `--negro` es el color DE LA MARCA. `--fondo` es de qué color está la página EN ESTE MOMENTO. Son dos cosas distintas y por eso tienen dos nombres: el token de marca sigue siendo el mismo de siempre y es el valor de referencia, el respaldo y el punto de partida. El JS escribe UNA sola propiedad —`--fondo-rgb`, los tres canales como números sueltos— en el ``. Todo lo demás sale de acá: el color sólido para las seis superficies, y los tres números para las viñetas, que necesitan alfa y por eso no pueden usar el color ya armado. ⚠️ EL RESPALDO DEL `var()` ES EL NEGRO DE MARCA, y eso es lo que hace que sin JavaScript —y con `prefers-reduced-motion`, donde el JS no escribe nada— el sitio sea exactamente el de siempre, plano y en #0B0E0D. No hay una segunda rama que mantener. Las paradas y el porqué de cada valor están en el JS, junto al mecanismo que las interpola. */ --fondo-rgb: 11, 14, 13; --fondo: rgb(var(--fondo-rgb)); /* Ya no se usa como fondo en ninguna parte: el sitio es un solo negro continuo de arriba a abajo. Se deja definido por si vuelve a hacer falta una superficie elevada, pero volver a aplicarlo a una sección rompe la continuidad. */ --acero: #151C1A; /* ── LA LÍNEA ──────────────────────────────────────────────────── ⚠️ SUBIÓ DE #26302D A #526961, Y NO ES UN CAMBIO DE GUSTO. La norma pide 3:1 para bordes y separadores que comunican estructura —WCAG 1.4.11, contraste de elementos no textuales— y #26302D daba 1,43:1 contra el negro de marca. Estaba a menos de la mitad del mínimo. 📌 EL NÚMERO NO SE ELIGIÓ CONTRA EL NEGRO DE MARCA, sino contra el PUNTO MÁS CLARO DE LA RAMPA DEL FONDO, que es el peor caso: cuanto más claro el fondo, menor el contraste de una línea clara. Medido recorriendo la página, el fondo va de rgb(6,8,7) en el hero a rgb(18,21,20) en materiales. Contra ese extremo: #26302D (antes) 1.35:1 ✗ #51675F (mínimo) 3.02:1 ✓ ← justo, dos centésimas de margen #526961 (éste) 3.11:1 ✓ Se eligió el segundo escalón y no el primero por dos centésimas de aire: con 3.02 cualquier redondeo del navegador deja la línea abajo del mínimo. 📌 Y ES EL MISMO VECTOR DE CROMATICIDAD DE LA MARCA, ×7.48. El negro es rgb(11,14,13); esto es rgb(82,105,97), que es (11,14,13) × 7.48 redondeado. La línea no cambia de familia de color, sólo de luminancia — la misma construcción con la que está armada la rampa del fondo. El #26302D viejo también estaba sobre ese vector, ×3.45. 📌 Lo que esto arregla de paso: el subrayado de `.enlace`. Es la única señal de que «Ver cómo funciona» en el FAQ es un enlace —el texto va del mismo color que el párrafo—, y a 1,42:1 prácticamente no se veía. Ahora cumple el 3:1 que pide 1.4.1 para una señal no textual. */ --linea: #526961; /* bordes, divisores */ --humo: #6E7A76; /* gris de marca */ --hueso: #E8E6DF; /* texto principal y botones */ /* --humo da 4.36:1 sobre negro: pasa AA solo en texto grande. Para texto chico se usa esta versión un punto más clara (5.1:1). El gris del guion se mantiene intacto para líneas y marcas. */ --humo-txt: #7A8682; /* REGLA DURA: el oro y el cromo solo existen dentro de las fotos. Ningún degradé, borde, sombra ni botón dorado en CSS. Nunca. */ /* Tipografía */ --f-titular: 'Archivo', 'Helvetica Neue', 'Arial Narrow', sans-serif; --f-cuerpo: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Escala de contraste extremo: titulares enormes, mono muy chica. Nada de tamaños intermedios tibios. */ --fs-xxl: clamp(2.75rem, 9vw, 4.5rem); /* hero, ancho completo */ --fs-hero: clamp(2.75rem, 6vw, 5.5rem); /* hero partido en dos */ --fs-xl: clamp(2.75rem, 9vw, 7rem); /* titulares de sección */ --fs-l: clamp(2rem, 5vw, 3.25rem); /* titulares secundarios */ --fs-cuerpo: 1.0625rem; /* 17px */ --fs-bajada: clamp(1.0625rem, 2vw, 1.25rem); /* Subtítulo: vive ENTRE el titular de su sección y el texto que encabeza, y esa es toda su definición. En escritorio queda en 32 px entre los 52 del titular y los 20 del cuerpo; en móvil, en 26 px entre 44 y 17. Los dos saltos son de ~1.6, así que ninguno de los tres niveles se confunde con el de al lado. */ --fs-sub: clamp(1.625rem, 2.4vw, 2rem); /* 26 → 32px */ /* La pregunta del acordeón. Es su propio escalón y no reusa ninguno de los de arriba, por una razón medida: tiene que quedar POR DEBAJO del titular de sección y POR ENCIMA de su propia respuesta, y ningún token existente cumple las dos. · con --fs-sub (26→32) competía con el titular de sección · con --fs-bajada (17→20) empataba con la respuesta en móvil, que es exactamente el error que el paso 33 documentó al revés Queda en 20 → 24px: arriba de los 17 de la respuesta en cualquier ancho, y abajo de los 32→52 del titular. Ver el paso 33. */ --fs-pregunta: clamp(1.25rem, 1.7vw, 1.5rem); /* 20 → 24px */ --fs-mono: 0.6875rem; /* 11px */ --fs-mono-l: 0.75rem; /* 12px */ --tracking-titular: -0.03em; --tracking-mono: 0.09em; /* Espaciado */ --e-1: 0.5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2.5rem; --e-5: 4rem; --e-6: 6rem; --e-7: clamp(5rem, 12vh, 9rem); /* aire entre escenas */ --ancho-max: 76rem; --ancho-texto: 34rem; --margen: clamp(1.25rem, 5vw, 4rem); /* Alto de la cabecera fija. Lo usan el scroll-margin de las anclas y el top de las secciones fijas. Si cambia el padding de la cabecera, hay que actualizar esto. */ --alto-cabecera: 7rem; /* Movimiento — definido ahora, usado recién en el paso 8. */ --dur-corta: 400ms; --dur-larga: 800ms; --ease: cubic-bezier(.2, .7, .2, 1); /* ── LA CASCADA DEL TITULAR DEL HERO ─────────────────────────────── Los dos números salen de una cuenta, no de una preferencia. El titular tarda HOY 930 ms en terminar de aparecer: 130 de retardo (`data-retardo="1"`) más los 800 de la transición del bloque. La cascada no puede tardar más que eso, así que el presupuesto es: 130 + (26 − 1) × desfase + duración ≤ 930 «Los grillz de los artistas» son 26 caracteres contando espacios. Con 20 y 300 la cuenta da 930 CLAVADO: el titular termina de aparecer en el mismo milisegundo que antes. Por qué esos dos y no otro par que también cierre: · 16 / 400 → el frente cruza en 400 ms y hay 25 letras animándose a la vez sobre 26. Eso vuelve a ser un bloque, o sea el parpadeo que había que evitar. · 22 / 250 → el frente cruza en 550 ms con 11 letras a la vez. Es la cascada más marcada, pero 250 ms por letra queda lejos de la banda de 400–800 ms del guion. · 20 / 300 → el frente cruza en 500 ms con 15 letras a la vez. Se lee como una onda que viaja de izquierda a derecha y las letras se superponen de sobra: nunca parece una máquina de escribir. 📌 Sobre la banda de 400–800 ms de la sección 4 del guion: lo que dura 800 ms es EL TITULAR, igual que antes. Los 300 ms son de una letra, que no es un elemento de la interfaz sino una parte de él. 📌 EL TITULAR SIGUE SIENDO «Los grillz de los artistas» y estos números siguen valiendo tal cual: 26 posiciones, 130 + 25×20 + 300 = 930 ms. Hubo un momento en que el titular se cambió por «Piezas hechas a la medida de tu dentadura.» —42 posiciones, 1250 ms medidos en el navegador— y esta nota quedó escrita para ese caso. Se revirtió: aquel texto era la bajada, no el titular. Queda anotado por si alguna vez vuelve a evaluarse un titular más largo, porque el número importa: Con 42 posiciones, volver a 930 ms exigiría bajar el desfase a 12,2 ms —menos de un cuadro a 60 Hz—, las letras caerían de a dos y de a tres en el mismo cuadro y la onda se leería como un bloque otra vez. O sea que un titular más largo no se paga acortando el desfase: se paga aceptando que la cascada dure más. */ --dur-letra: 300ms; --desfase-letra: 20ms; --rev-letra-y: 0.75rem; /* ── LA RESPUESTA AL MOUSE ───────────────────────────────────────── Cuánto se corre cada capa del hero cuando el cursor llega a un borde de la pantalla. Los dos números están topados por la garantía del paso 25, no elegidos a ojo: Las dos capas se mueven en la MISMA dirección, así que lo que le come holgura al texto no es el recorrido de la foto sino la DIFERENCIA entre las dos: 6 − 2.5 = 3.5 px en el peor caso, con el cursor pegado al borde izquierdo. Medido, la holgura mínima pasa de 36.1 a 32.6 px en 2560 × 1440 con el bucle en su punto máximo. Sigue siendo un hueco y nunca hay choque. Y contra el margen del lettering ni se acerca: en escritorio hay 13.2% de aire alrededor de las letras —190 px en una ventana de 1440— y el bucle al máximo deja 154. Seis píxeles no lo tocan. La viñeta NO lleva ninguno de estos números, y es la misma decisión de siempre: está anclada a la pantalla, no a la foto, y que la foto se desplace por debajo de una viñeta quieta ES la tercera velocidad. */ --raton-foto: 6px; --raton-texto: 2.5px; /* El peso. La foto es la capa del fondo y tarda más en llegar que el texto: no es un adorno, es lo que hace que se lean como dos planos a distinta profundidad. Las dos duraciones caen dentro de la banda de 400–800 ms del guion. */ --dur-raton-foto: 600ms; --dur-raton-texto: 450ms; } /* ── 2. RESET ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } /* ── 3. BASE ────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { background: var(--fondo); color: var(--hueso); font-family: var(--f-cuerpo); font-size: var(--fs-cuerpo); font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--hueso); color: var(--negro); } /* ── 4. TIPOGRAFÍA ──────────────────────────────────────────────── */ /* Titular: Archivo 800, ancho condensado, tracking muy cerrado. La gótica del logo NUNCA se reproduce como fuente web: es imagen. */ .titular { font-family: var(--f-titular); font-weight: 800; font-stretch: 82%; /* eje wdth de Archivo */ font-variation-settings: 'wdth' 82; /* respaldo explícito */ font-size: var(--fs-xl); line-height: 0.9; letter-spacing: var(--tracking-titular); text-transform: uppercase; text-wrap: balance; } .titular--hero { font-size: var(--fs-xxl); } .titular--medio { font-size: var(--fs-l); } /* ── EL TAMAÑO DE LOS TITULARES DE SECCIÓN ─────────────────────────── PREGUNTAS y ¿EMPEZAMOS? iban en `--fs-xl` —hasta 112px— mientras que EL PROCESO y MATERIALES, que son sus pares, van en `--fs-l`: sus reglas de modo fijo (`.es-secuencia`, `.es-fija`) ya los bajaban. O sea que dos secciones del mismo nivel se veían al doble que las otras dos, y ¿EMPEZAMOS? competía de tamaño con el titular del hero, que es el mensaje principal del sitio. Ahora los cuatro miden lo mismo, y EL TALLER LLEGA A TI ya estaba en ese tamaño por su `titular--medio`. Un solo nivel para todos los titulares de sección: 32px en móvil, 52px en escritorio. 📌 Queda una diferencia conocida: sin JavaScript o con movimiento reducido, EL PROCESO y MATERIALES vuelven a `--fs-xl` porque las reglas que los bajan cuelgan de las clases de modo. Es de antes de este cambio y no se tocó acá para no mover esos dos modos sin pedirlo. */ /* ⚠️ SIN `>` EN EL ÚLTIMO TRAMO, Y SE DEJA ASÍ AUNQUE HOY NO HAGA FALTA. Esto decía `.cierre > .cierre__caja > .titular`, hijo directo. Al probar el video de TikTok al costado hubo que envolver el texto en un div para poder hacer dos columnas, el titular dejó de ser hijo directo, la regla dejó de casar y ¿EMPEZAMOS? volvió solo a `--fs-xl` —hasta 112 px— y se montó encima de lo que tenía al lado. En el código no se veía nada raro; apareció en la captura. El envoltorio ya no está, así que el `>` volvería a funcionar. Se deja el descendiente suelto igual: lo que importa es que el titular esté DENTRO de la caja de la sección, no a qué profundidad, y así el próximo envoltorio no vuelve a romperlo. */ .preguntas > .preguntas__caja .titular, .cierre > .cierre__caja .titular { font-size: var(--fs-l); } /* ── SUBTÍTULOS ────────────────────────────────────────────────────── Los nombres de paso y de material son el nivel del medio: encabezan un texto y dependen del titular de su sección. Tienen que leerse más chicos que el titular y más grandes que el texto que encabezan. Las dos cosas, no una. Dos errores previos, los dos anotados porque se corrigieron uno con el otro: 1. Llevaban `.titular titular--medio` y en escritorio medían 60 px contra los 52 px del titular de su propia sección. El subordinado era más grande que el que manda. 2. Al corregirlo los mandé a rótulo mono de 12 px — y ahí quedaron más chicos que su propio párrafo, que en escritorio mide 20 px. Un encabezado más chico que lo que encabeza no es jerarquía, es otro error del mismo tipo, en el otro sentido. Ahora el tamaño sale de sus dos vecinos, no de una preferencia: titular 52 · SUBTÍTULO 32 · cuerpo 20 (escritorio) titular 44 · SUBTÍTULO 26 · cuerpo 17 (móvil) Y el tamaño no trabaja solo. Contra el titular hay otras dos diferencias, para que no se lea como un titular chico sino como otro nivel: peso 600 contra 800, y ancho normal contra el 82% condensado que es la firma de los titulares. La jerarquía no se resuelve con color: sigue en hueso, 15.53:1. */ .paso__titulo, .material__nombre { font-family: var(--f-titular); font-size: var(--fs-sub); font-weight: 600; font-stretch: 100%; font-variation-settings: 'wdth' 100; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; color: var(--hueso); } .cuerpo { max-width: var(--ancho-texto); } .cuerpo--ancho { max-width: 44rem; } .bajada { font-size: var(--fs-bajada); line-height: 1.45; max-width: var(--ancho-texto); color: var(--hueso); } /* Mono: fichas técnicas, números, etiquetas, pasos, FAQ. */ .mono { font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 400; letter-spacing: var(--tracking-mono); text-transform: uppercase; line-height: 1.6; } .mono--l { font-size: var(--fs-mono-l); } .mono--m { font-weight: 500; } .mono--nn { text-transform: none; letter-spacing: 0.04em; } .etiqueta { color: var(--humo-txt); } .secundario { color: var(--humo-txt); } /* Número de paso: 01–04. El orden es información, por eso se ve. */ .numero { font-family: var(--f-mono); font-size: var(--fs-mono-l); font-weight: 500; letter-spacing: 0.12em; color: var(--humo-txt); } /* ── 5. BOTONES ─────────────────────────────────────────────────── */ /* Principal: bloque hueso sólido sobre negro. Máximo contraste, cero decoración. Sin degradés, sin bordes de color, sin sombra. */ .boton { display: inline-block; padding: 1.05rem 2rem; background: var(--hueso); color: var(--negro); font-family: var(--f-mono); font-size: var(--fs-mono-l); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--hueso); border-radius: 0; } .boton--secundario { background: transparent; color: var(--hueso); border-color: var(--linea); } /* Versión de barra: mismo bloque hueso, menos alto. */ .boton--compacto { padding: 0.6rem 1.05rem; font-size: var(--fs-mono); letter-spacing: 0.1em; } /* ── 6. MARCOS DE IMAGEN ────────────────────────────────────────── */ /* Proporción fija + object-fit: cover. Así una foto nueva de otra proporción entra sin romper el diseño. Cambiar una imagen = soltar el archivo con el mismo nombre en /img. Cero cambios de código. */ .marco { position: relative; overflow: hidden; /* Negro, no acero: es lo que se ve mientras la foto baja, y con acero aparecía un rectángulo más claro por un instante en cada `lazy`. */ background: var(--fondo); aspect-ratio: var(--proporcion, 3 / 4); } .marco > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, center); } .marco--1x1 { --proporcion: 1 / 1; } .marco--4x5 { --proporcion: 4 / 5; } .marco--3x4 { --proporcion: 3 / 4; } .marco--9x16 { --proporcion: 9 / 16; } .marco--16x9 { --proporcion: 16 / 9; } .marco--alto { --proporcion: 2 / 3; } /* Regla de calidad, no negociable: las capturas de redes nunca van a pantalla completa. Van chicas o desenfocadas al fondo. */ .marco--captura { max-width: 22rem; } .marco--fondo { filter: blur(14px) saturate(0.7); opacity: 0.4; } /* Grano encima, para que una captura de baja resolución no se lea como imagen estirada. Es textura, no animación. */ .marco--grano::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.28; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)' opacity='0.55'/%3E%3C/svg%3E"); } .pie-foto { margin-top: var(--e-1); color: var(--humo-txt); } /* ── 7. LAYOUT ──────────────────────────────────────────────────── */ .contenedor { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--margen); } .escena { padding: var(--e-7) var(--margen); border-top: 1px solid var(--linea); } /* .escena--acero se eliminó: no la usaba ningún elemento del HTML y era la única otra puerta por la que podía volver a entrar un fondo distinto. */ .escena--silencio { padding-block: calc(var(--e-7) * 1.8); } /* escena 06 */ /* ── 7b. CABECERA FIJA Y NAV ───────────────────────────────────────── Acompaña el scroll. Lo que lo justifica no son los cuatro links: es que el botón de agendar quede siempre a un toque de distancia. */ .cabecera { position: sticky; top: 0; z-index: 20; /* ⚠️ La cabecera TIENE que seguir al fondo. Pegada en `--negro` fijo se convertía en una banda más oscura cruzando el sitio de punta a punta, a la vista todo el tiempo. Es la superficie donde más se notaba. */ background: var(--fondo); border-bottom: 1px solid var(--linea); } .cabecera__caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem var(--e-3); width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding: 0.7rem var(--margen); } .cabecera__marca { display: block; } .logo { width: clamp(100px, 14vw, 140px); height: auto; } /* En móvil la nav baja a una segunda fila y el botón queda arriba a la derecha, al alcance del pulgar. */ .nav { order: 3; flex-basis: 100%; } /* Inicio · Proceso · Materiales · Contacto. Sin "Menu", sin "Nosotros". */ .nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; /* El mínimo está calculado para que las cuatro entradas entren en una sola fila hasta en 320px. Si se agranda, la cabecera fija pasa a tres filas y se come un quinto de la pantalla. */ gap: clamp(0.55rem, 2.6vw, 2rem); } .nav a { color: var(--hueso); text-decoration: none; padding-block: 0.25rem; } .nav a:hover, .nav a:focus-visible { color: var(--humo-txt); } @media (min-width: 800px) { .cabecera__marca { order: 1; } .nav { order: 2; flex-basis: auto; margin-inline: auto; } .cabecera__cita { order: 3; } } /* Las anclas no pueden quedar tapadas por la cabecera fija. */ :target, [id] { scroll-margin-top: calc(var(--alto-cabecera) + var(--e-2)); } /* ── 7b-bis. EL RIEL HORIZONTAL · SOLO ESCRITORIO ──────────────────── Hero, proceso y materiales, uno al lado del otro. El scroll vertical mueve la pantalla de costado entre los tres. ⚠️ NACE INERTE. Los tres envoltorios son `display: contents` mientras no esté `.es-riel`, así que no existen para el layout y el documento es el mismo de antes. Sin JavaScript, con `prefers-reduced-motion` y bajo 800 px nunca llega la clase: ahí el sitio es vertical, igual que siempre. Es la misma regla que ya cumplen `.es-secuencia` y `.es-fija`. LOS DOS MOVIMIENTOS HORIZONTALES NO CONVIVEN. El riel avanza por tramos de REPOSO y de TRANSICIÓN. Durante el reposo del proceso, `--x` del riel es una constante literal: lo único que se mueve en pantalla es la fila de fotos adentro de su ventana, con el titular, el índice y el texto clavados. Cuando el riel se mueve, se mueve todo. El ojo los distingue por el marco, no por la dirección. Entre el final de un reposo y el arranque de la transición va un RESPIRO sin nada, que es el mismo papel que cumple `M_SALIDA` en materiales: sin él, los dos movimientos se encadenan y se leen como uno solo que se agrandó. */ .riel, .riel__fijo, .riel__vagon { display: contents; } /* La pista. Solo existe para dar scroll: su alto es lo que se recorre. Los dos números los congela el JS en píxeles la primera vez que mide, con el mismo criterio de las otras dos escenas — solo se vuelve a medir si cambia el ancho o si el alto cambia más de un 20%. */ .riel.es-riel { display: block; position: relative; height: calc(var(--alto-panel, calc(100svh - var(--alto-cabecera))) + var(--recorrido, 300vh)); } /* El panel. Recorta y nada más: NO es un contenedor de scroll y el JS no le escribe `scrollLeft`, igual que el carril del proceso. */ .riel.es-riel .riel__fijo { display: block; position: sticky; top: var(--alto-cabecera); height: var(--alto-panel, calc(100svh - var(--alto-cabecera))); overflow: hidden; } /* La fila de paneles. Un `transform` compuesto por la GPU, que es lo que se comporta igual en todos los navegadores. */ .riel.es-riel .riel__vagon { display: flex; align-items: stretch; height: 100%; width: max-content; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; } /* El ancho lo escribe el JS en píxeles y NO va en `100vw`: `vw` incluye la barra de scroll, así que con `100vw` cada panel quedaba ~15 px más ancho que la ventana y el error se acumulaba panel a panel. */ .riel.es-riel .riel__vagon > section { flex: 0 0 var(--ancho-panel, 100vw); width: var(--ancho-panel, 100vw); height: 100%; min-height: 0; overflow: hidden; /* El retroceso: el panel que sale se achica y se apaga un punto mientras se va, y el que entra hace lo contrario. Es el mismo lenguaje de la pila de cartas de materiales, y es lo que hace que la transición se lea como pasar de página y no como más paneo. En reposo vale exactamente 1 y 1: la composición aprobada queda intacta, sin un píxel de escala de por medio. */ transform: scale(var(--s, 1)); opacity: var(--o, 1); will-change: transform, opacity; } /* ── las tres secciones adentro del panel ──────────────────────────── Cada una pasa de medir lo que mide a medir exactamente el panel. */ /* El hero deja de dimensionarse por el ancho de la foto y se ajusta al panel. `object-fit: contain` es lo que sostiene la garantía del paso 25: la foto entra ENTERA —no se recorta de costado, que es la regla dura— y lo que sobra queda en negro, que es el fondo de la propia foto y del sitio, así que no se ve dónde termina. ⚠️ Y la garantía se sostiene sola, no por casualidad. Con la foto centrada y ajustada por alto, la pieza arranca en (P − F)/2 + 0.45·F = P/2 − 0.05·F, y como F ≤ P eso nunca es menor que 0.45·P. O sea: dentro del riel la pieza empieza IGUAL O MÁS A LA DERECHA que en el sitio vertical, nunca más a la izquierda. El tope del texto en 40vw no hay que tocarlo. Verificado en navegador. */ .riel.es-riel .hero { height: 100%; padding-bottom: 0; } .riel.es-riel .hero__foto { height: 100%; } /* ⚠️ EL DEL MEDIO. Sin esta línea el `height: 100%` de la imagen no resuelve contra nada: su contenedor directo no es `.hero__foto` sino el ``, que va con alto automático. La imagen caía a `height: auto`, medía 864 px de alto en un panel de 788 y el panel le recortaba 76 px POR ABAJO — justo donde está la pieza. Medido en navegador; la cuenta sobre el CSS no lo veía. */ .riel.es-riel .hero__foto picture { display: block; height: 100%; } .riel.es-riel .hero__foto img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center; } /* Proceso y materiales pierden su pista y su `sticky` propios: ya están adentro de un panel fijo. El avance se lo pasa el reposo del riel en vez de salir de `getBoundingClientRect()`. Son las mismas funciones puras del scroll; lo único que cambia es quién calcula la entrada. */ .riel.es-riel .proceso.es-secuencia .proceso__pista, .riel.es-riel .materiales.es-fija .materiales__pista { position: static; height: 100%; } .riel.es-riel .proceso.es-secuencia .proceso__fijo, .riel.es-riel .materiales.es-fija .materiales__fijo { position: static; height: 100%; } .riel.es-riel .proceso.es-secuencia, .riel.es-riel .materiales.es-fija { position: relative; height: 100%; } /* ── EL PANEL DEL KIT ──────────────────────────────────────────────── Es el único panel del riel sin mecanismo interno: cuatro líneas de texto en una pantalla entera. En el flujo vertical el bloque arranca arriba y está bien, porque abajo sigue la sección siguiente; dentro de un panel de alto fijo eso lo deja colgando del borde superior con 600 px de negro abajo, que se lee como que falta algo. Se centra en vertical y NADA MÁS: el margen izquierdo, el ancho del texto y los tamaños son los mismos que en móvil. No se agranda ni se centra en horizontal — arranca en la misma vertical que todas las demás secciones del sitio. */ .riel.es-riel .kit { height: 100%; display: grid; align-content: center; padding-block: 0; } /* ⚠️ EL PIE DE MATERIALES NO PUEDE COSTARLE ALTO A LA CARTA. Fuera de la pista sumaba 87 px al alto de la sección, y adentro de un panel de alto fijo esos 87 px salen de la carta: 58 px de ancho menos, que es exactamente lo que los pasos 42 a 45 pelearon por conseguir. Se apoya en la esquina inferior izquierda del panel, que es espacio muerto medido —la columna de la ficha tiene el titular arriba, la ficha al centro y nada abajo—. La carta vive pegada al borde derecho, así que no se tocan. */ .riel.es-riel .materiales.es-fija .materiales__pie { position: absolute; /* Los mismos tres valores que usa `.materiales__fijo` para alinearse: así el botón arranca en la misma vertical que el titular y que la ficha, y no en el borde de la sección. Es la corrección del paso 45, aplicada acá también. */ left: var(--margen); right: var(--margen); margin-inline: auto; max-width: var(--ancho-max); bottom: var(--e-2); z-index: 2; margin-top: 0; } /* ── 7c. HERO (escena 02) ─────────────────────────────────────────── Foto arriba a sangre completa, sin nada encima, y el bloque de texto debajo. Misma lógica en móvil y en escritorio. La foto ya dice el nombre de la marca en cromo: ponerle un titular encima era taparla. En escritorio el texto caía justo sobre las letras y la línea de QUITO · ECUADOR quedaba ilegible sobre el metal. Va con width:100% y alto automático, nunca con object-fit: cover. Cover la recortaría por los costados en cualquier pantalla más angosta que su proporción y se comería la última Z. Como el fondo de la foto es negro puro, la banda se funde con el fondo de la página: no se ve dónde termina la imagen y dónde empieza el sitio. */ .hero { position: relative; padding-bottom: var(--e-5); } .hero__foto { position: relative; overflow: hidden; /* ⚠️ `--bucle-max` VIVE ACÁ Y NO EN LA IMAGEN. La capa del brillo tiene que respirar exactamente igual que la foto o la máscara se despega del molde, y una hermana no hereda una variable declarada en la otra. Desde el contenedor la leen las dos y no pueden desincronizarse. `isolation` acota el `mix-blend-mode` del brillo a lo que hay adentro de este marco: sin eso, el modo de fusión buscaría el fondo de la página y el brillo se vería sobre el negro. */ --bucle-max: 1.026; isolation: isolate; } .hero__foto img { width: 100%; height: auto; /* Zoom lento en bucle. Se anima la propiedad `scale`, NO `transform`: el parallax en capas ya escribe `transform` sobre esta misma imagen y una animación de transform lo pisaría mientras corre. Son propiedades distintas y el navegador las compone, así que conviven. La amplitud NO está elegida a ojo. Ampliar recorta por los costados, que es la regla dura del hero, así que se midió cuánto margen tiene el lettering: 13.2% en hero.webp pero solo 3.1% en hero-movil.webp. Manda el móvil. A 1.018 se come 0.9% por lado y quedan 2.2% de aire: las letras no se tocan en ningún tamaño de pantalla. 16s y `alternate`. La primera versión iba a 28s con amplitud 1.018 y medida daba 2.8 niveles de cambio de luz: no se registraba como nada. Ver el paso 19 del registro. */ animation: respiro-hero 16s ease-in-out infinite alternate; } @keyframes respiro-hero { from { scale: 1; } to { scale: var(--bucle-max); } } @media (min-width: 800px) { /* En escritorio hay 13.2% de margen: se puede respirar bastante más. A 1.05 se come 2.5% por lado y quedan 10.7% de aire. */ .hero__foto { --bucle-max: 1.05; } } /* ── EL BRILLO QUE RECORRE LA PIEZA ────────────────────────────────── Un reflejo angosto que cruza la pieza muy despacio, en bucle. No es un degradé sobre el rectángulo de la foto: está recortado por la silueta real del molde. LA MÁSCARA ES EL PROPIO ARCHIVO. `hero.webp` tiene canal alfa de verdad —medido: 68.04% transparente, 31.38% opaco y 0.58% de borde antialiasado—, así que el recorte de la pieza ya existe y no hace falta inventar nada. Se usa esa misma transparencia como máscara. ⚠️ ES EL MISMO ARCHIVO QUE LA IMAGEN, PERO ESO SOLO ES GRATIS SI EL SERVIDOR MANDA `Cache-Control`. Medido con `transferSize`: con una cabecera de caché larga el pedido de la máscara vale 0 bytes —sale de caché—; sin ninguna cabecera, el navegador vuelve a bajar los 87 KB enteros. Es un pedido diferido y de baja prioridad, así que no compite con el LCP, pero conviene que el sitio publique un `_headers` con caché larga para /img/. POR QUÉ DOS CAPAS. La de afuera lleva la máscara y se queda quieta respecto de la foto; la de adentro es sólo el degradé y es la que se mueve. Lo que se desplaza pasa por debajo de un recorte que no se desplaza, así que el brillo no puede pintar fuera del contorno ni en el cuadro negro que sobra a los costados: ahí la máscara vale cero. ⚠️ LOS CUATRO CANALES, Y NINGUNO SE PISA. Sobre la imagen ya escriben tres cosas distintas, y la capa de afuera tiene que copiar las tres o la máscara se despega del molde en cuanto la foto se mueve un píxel: transform → parallax de scroll y salida del riel (--cap-x, --cap) scale → el bucle lento de zoom (--bucle-max) translate → la respuesta al mouse (--rx, --ry) El barrido necesitaba un cuarto canal libre, y por eso vive en la capa de ADENTRO, que no copia nada: ahí `transform` está entero disponible. Es el mismo argumento que ya resolvió el zoom contra el parallax. `mix-blend-mode: color-dodge` y no una capa translúcida: el dodge amplifica lo que ya está iluminado y deja lo oscuro donde está, que es como se comporta un reflejo especular de verdad. Sobre el cromo levanta fuerte y en las sombras entre los dientes no hace nada. Sin color: es `--hueso`, el mismo del texto. */ .hero__brillo { position: absolute; inset: 0; /* Sin `z-index`: el orden natural de pintado ya lo deja encima de la foto —que es estática— y debajo de la viñeta, que viene después. */ pointer-events: none; overflow: hidden; -webkit-mask-image: url('img/hero.webp'); mask-image: url('img/hero.webp'); /* `contain` + `center` reproduce exactamente el `object-fit: contain` de la imagen dentro del riel, y en el flujo vertical la caja de este elemento y la de la foto comparten centro y alto, así que también coinciden. Verificado en los dos modos. */ -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mix-blend-mode: color-dodge; /* El espejo de los tres canales de la imagen. */ transform: translate3d(var(--cap-x, 0px), var(--cap, 0px), 0) scale(var(--aleja, 1)); animation: respiro-hero 16s ease-in-out infinite alternate; will-change: transform; } /* En teléfono la foto es otro archivo, así que la máscara también. */ @media (max-width: 799px) { .hero__brillo { -webkit-mask-image: url('img/hero-movil.webp'); mask-image: url('img/hero-movil.webp'); } } /* La luz. Angosta a propósito, y el ancho salió de mirarla: la primera versión tenía la banda al 7% del eje del degradé —unos 98 px sobre una pieza de 710— y eso es el 14% de la pieza: se leía como un velo pasando por encima de la foto, no como un reflejo. Al 2.4% son 38 px, o sea el 5% de la pieza, que ya es un punto de luz. El ángulo la inclina para que cruce el lettering en diagonal y no como una persiana. */ /* ⚠️ EL ANCHO ES EXACTAMENTE EL DEL PADRE, y esto no es un detalle. Con la capa más ancha que el padre, el `translateX(±100%)` se mide sobre SU ancho, así que la banda recorría ±60% del padre y se daba vuelta antes de llegar al otro lado: medido, entraba, llegaba a la mitad y se iba por donde había venido. Con el mismo ancho, el centro de la banda va de −50% a +150% y cruza la pieza entera. El −20% de arriba y abajo es para que la diagonal cubra las esquinas. */ .hero__brillo-luz { position: absolute; inset: -20% 0; background: linear-gradient(100deg, rgba(232, 230, 223, 0) 47.4%, rgba(232, 230, 223, 0.42) 50%, rgba(232, 230, 223, 0) 52.6%); /* El cuarto canal: acá `transform` no lo usa nadie más. */ transform: translate3d(-100%, 0, 0); animation: brillo-hero 15s cubic-bezier(.5, .1, .5, .9) infinite; will-change: transform; } /* 70% del ciclo es el viaje y el 30% restante es la espera. Sin la espera el brillo se lee como un barrido continuo de banner; con ella pasa cada tanto, que es lo que hace una pieza girando bajo una luz. Son 10.5 s de recorrido, de los cuales unos 5.2 s la banda está sobre la pieza, y 4.5 s de nada. */ @keyframes brillo-hero { 0% { transform: translate3d(-100%, 0, 0); } 70% { transform: translate3d( 100%, 0, 0); } 100% { transform: translate3d( 100%, 0, 0); } } /* Viñeta, mismo criterio que el resto: oscurece el perímetro y asienta la foto en el negro de la página. El centro queda limpio, que es donde está el cromo. */ .hero__vineta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(118% 82% at 50% 48%, rgba(var(--fondo-rgb, 11, 14, 13), 0) 42%, rgba(var(--fondo-rgb, 11, 14, 13), 0.25) 72%, rgba(var(--fondo-rgb, 11, 14, 13), 0.78) 100%); } .hero__contenido { position: relative; width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding: var(--e-4) var(--margen) 0; } /* ── señal de scroll ───────────────────────────────────────────────── Una línea fina y una punta, en el gris de la paleta. Dibujada con bordes: no hay SVG, no hay imagen, no hay pedido nuevo. Se apaga apenas la persona empieza a bajar — el JS le pone .se-fue desde el mismo requestAnimationFrame que ya existe. Una vez que cumplió su función, estorba. */ .hero__senal { position: absolute; /* Sube al aire negro que hay entre la banda de foto y la etiqueta. Sobre la foto no se leía: el gris de la paleta contra el yeso claro daba 1.34:1 medido. Sobre el negro de la página da 4.3:1. Absoluta, así no ocupa alto: puesta en el flujo empujaba el titular fuera del pliegue. */ /* Anclada ABAJO y a la izquierda, alineada con el texto. Antes iba al tope del bloque de contenido y centrada, que funcionaba cuando el texto venía después de la foto. Con la composición superpuesta ese punto pasó a estar ARRIBA de la pieza —y centrado, en escritorio caía justo encima del molde—. Al pie del hero cumple su función y queda sobre negro en los dos tamaños. */ bottom: var(--e-1); left: var(--margen); display: grid; justify-items: center; gap: 0.3rem; pointer-events: none; opacity: 1; transition: opacity var(--dur-corta) var(--ease); } .hero__senal.se-fue { opacity: 0; } .hero__senal-linea { width: 1px; height: 1.25rem; background: linear-gradient(to bottom, rgba(110, 122, 118, 0) 0%, var(--humo) 100%); } /* La punta es un cuadrado al que se le dejan dos bordes y se gira 45°. Es la flecha más liviana que existe: cero bytes de imagen. */ .hero__senal-punta { width: 0.5rem; height: 0.5rem; border-right: 1px solid var(--humo); border-bottom: 1px solid var(--humo); rotate: 45deg; animation: senal-baja 3.2s var(--ease) infinite; } /* Deriva mínima, 3px. No parpadea ni rebota: solo insinúa la dirección. */ @keyframes senal-baja { 0%, 100% { translate: 0 0; opacity: 0.75; } 50% { translate: 0 3px; opacity: 1; } } /* ── LA PLACA QUE CUBRE LA FOTO · SOLO MÓVIL ───────────────────────── La foto se queda quieta y el bloque de texto sube por encima sobre una placa negra sólida, tapándola de abajo hacia arriba. Cuando la cubrió del todo, la sección se libera y el scroll sigue normal. Es `position: sticky` y nada más: cero JavaScript, cero peso, y —lo que importa para la restricción— **cero alto agregado**. Sticky no ocupa espacio de layout, así que todas las posiciones del documento quedan exactamente donde estaban y el botón de AGENDAR CITA llega en el mismo punto del scroll que antes. ⚠️ NO SE USA NINGUNA UNIDAD DE VIEWPORT acá. El `top` va en rem y los altos son los naturales del contenido. Por eso el gesto no salta cuando aparece o desaparece la barra del navegador en el teléfono, que es justamente lo que rompe este tipo de efecto cuando se arma con vh. ⚠️ SOLO MÓVIL, y no por preferencia. Para que la placa cubra la foto del todo, el recorrido con la foto fija tiene que ser al menos igual al alto de la foto. En móvil hay 455 px disponibles contra 311 necesarios: entra con 144 de sobra. En escritorio hay 416 contra 634: faltan 218 px, y estirarlo estaba prohibido. Escritorio queda como estaba. */ /* ── COMPOSICIÓN SUPERPUESTA · MÓVIL ───────────────────────────────── Acá no hay ancho para poner el texto al costado de la pieza —serían 150 px de columna—, así que la superposición es vertical: la pieza arriba y el texto apoyado sobre el negro que queda debajo, dentro del mismo cuadro. ⚠️ LA GARANTÍA es la misma idea que en escritorio, en el otro eje. La pieza termina en el 85.1% del alto de la foto, y la foto mide 0.8 veces el ancho de la ventana: o sea que la pieza termina en el 68.1% del ancho. El texto arranca ahí más un margen. Las dos medidas dependen del mismo ancho, así que la separación no cambia con el tamaño de pantalla ni con la barra del navegador. */ @media (max-width: 799px) { .hero { /* Dos bandas, y las dos por ANCHO. Nunca por alto: una consulta de alto haría saltar toda la composición cuando aparece o desaparece la barra del navegador, que es justo lo que no puede pasar. Las pantallas angostas son las que menos alto tienen en proporción al texto, así que ahí la pieza cede. Manda el botón: si hay que elegir entre tamaño de pieza y que AGENDAR CITA entre en la primera pantalla, entra el botón. */ --pieza: 68; display: grid; /* El relleno de abajo pasa a la placa: si queda en la sección, entre el final del texto y el final del hero aparece una franja transparente y la foto se ve por ese hueco. Mismo alto total. */ padding-bottom: 0; } .hero__foto, .hero__contenido { grid-area: 1 / 1; } /* align-self: start en la foto, si no el grid la estira al alto de la celda —que la marca el texto— y el sticky se comporta raro. */ .hero__foto { align-self: start; } /* --pieza es el ancho de la foto como porcentaje de la pantalla, y es la ÚNICA perilla de esta composición: de ahí sale el tamaño del molde y también dónde arranca el texto. Bajarla achica la pieza y sube el texto, las dos cosas a la vez y sin desincronizarse. El 0.661 no es un número elegido: el marco mide 1500/1400 = 1.0714 veces su ancho, y el molde termina en el 61.7% del alto del marco. 1.0714 × 0.617 = 0.661. Cambiando el archivo hay que recalcularlo. */ .hero__foto img { max-width: calc(var(--pieza) * 1%); margin-inline: auto; } .hero__contenido { align-self: start; padding-top: calc(var(--pieza) * 0.661vw + var(--e-3)); } .hero__foto { position: sticky; top: var(--alto-cabecera); z-index: 0; } /* La placa. Opaca y del negro del sitio, para que el texto NUNCA quede leyéndose sobre el yeso: viaja sobre el fondo, no sobre la imagen. ⚠️ background-clip: content-box. Sin eso el fondo pinta TODA la caja, relleno superior incluido — y como ese relleno es el que baja el texto por debajo de la pieza, la placa tapaba la foto entera desde el primer cuadro. Recortado al contenido, el negro arranca justo donde arranca el texto y la pieza se ve. */ .hero__contenido { z-index: 1; background: var(--fondo); background-clip: content-box; padding-bottom: var(--e-5); } } /* Desde 375 px de ancho ya sobra alto para una pieza más grande. */ @media (min-width: 375px) and (max-width: 799px) { .hero { --pieza: 86; } } .hero__etiqueta { color: var(--humo-txt); } .hero .titular { margin-top: var(--e-2); font-size: var(--fs-hero); } .hero .bajada { margin-top: var(--e-3); } .hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); } /* ── COMPOSICIÓN SUPERPUESTA · ESCRITORIO ──────────────────────────── El texto deja de estar debajo de la foto y comparte la misma pantalla: la pieza a la derecha, el texto sobre el negro de la izquierda. ⚠️ LA GARANTÍA DE QUE EL TEXTO NUNCA PISA LA PIEZA es geométrica, no visual. `hero.webp` está construido con la pieza empezando en el 45% del ancho de la imagen, y la imagen se muestra a ancho completo sin recorte. El texto está topado en el 38% del ancho del contenedor, que siempre es igual o menor que el ancho de la ventana. Las dos medidas son fracciones del mismo ancho, así que la separación se mantiene sola en cualquier tamaño de pantalla: no hay un punto de quiebre donde se toquen. Ninguna cama, veladura ni caja detrás del texto. El texto va sobre el negro del sitio y punto: si no entra, se mueve o se achica. */ @media (min-width: 800px) { .hero { display: grid; padding-bottom: 0; } /* Los dos en la MISMA celda: una sola composición, no dos bloques. */ .hero__foto, .hero__contenido { grid-area: 1 / 1; } /* Sin recorte: la proporción del archivo (2400x1080) es exactamente la de la caja, así que la pieza entra entera y no la corta el contenedor como pasaba con el tope de alto anterior. */ .hero__foto img { max-height: none; object-fit: initial; } .hero__contenido { align-self: center; padding-block: var(--e-4); position: relative; z-index: 1; } /* El tope se calcula contra la VENTANA, no contra el contenedor, y esa es la corrección que hace que la garantía se sostenga en pantallas anchas. Con un 38% del contenedor, a 2560 px la holgura caía a 3 px: el contenedor está topado en 76rem y centrado, así que su borde izquierdo se corre a la derecha mientras la pieza sigue arrancando en el 45% de la ventana. Acotando el borde derecho del texto al 40% del ancho de ventana —descontando el desplazamiento del contenedor— la holgura se mantiene arriba de 40 px de 800 a 2560. */ .hero__contenido > *, .hero .bajada { max-width: calc(40vw - max(var(--margen), (100vw - var(--ancho-max)) / 2 + var(--margen))); } } /* ── 7d. ESCENA 04 · EL PROCESO ────────────────────────────────────── Por defecto —móvil, sin JS, o con prefers-reduced-motion— los cuatro pasos se leen uno abajo del otro, cada uno con su foto. El modo secuencia lo enciende el JS agregando .es-secuencia, y solo en escritorio. El marcado es el mismo en los dos casos. */ .proceso { padding: var(--e-7) var(--margen); border-top: 1px solid var(--linea); } /* La costura hero → proceso. Hasta el paso 27 entre estas dos secciones vivía el zoom, que era un panel a sangre y sin relleno: la sección siguiente podía abrir con todo su aire porque venía de una imagen a pantalla completa. Sacado el zoom, el relleno de arriba del proceso quedó pegado al relleno de abajo del hero y los dos se sumaron. Medido, en móvil daba 121–127 px entre la señal de scroll y EL PROCESO, contra 49–72 px en escritorio: el teléfono, que es donde menos alto sobra, era el que más negro vacío tenía. Se leía como un hueco, no como una separación. El selector dice la condición exacta: esto vale cuando el proceso viene inmediatamente después del hero, que es el caso que se rompió. Si mañana vuelve a haber una escena en el medio, el proceso recupera solo su aire completo sin tocar nada. Vale en todos los anchos. En escritorio con el modo secuencia encendido no cambia nada —`.proceso.es-secuencia` ya pone padding-block: 0 y gana por orden—, pero sí arregla los dos casos en los que ese modo no se enciende: sin JavaScript y con movimiento reducido, donde la costura medía 140 px. */ .hero + .proceso { padding-top: var(--e-4); } .proceso__intro { margin-bottom: var(--e-5); } .proceso__pista { width: 100%; max-width: var(--ancho-max); margin-inline: auto; } .proceso__rail { display: none; } .proceso__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-6); } .paso { display: grid; gap: var(--e-3); align-content: start; } .paso__texto { display: grid; gap: var(--e-1); max-width: 30rem; } .paso__titulo { margin-block: var(--e-1) var(--e-1); } .paso .cuerpo { color: var(--hueso); } /* ── EL CARRIL DE FOTOS ────────────────────────────────────────────── Cada paso tiene su fila de fotos. En modo secuencia esa fila cruza de lado siguiendo el scroll; sin secuencia —sin JS, con movimiento reducido— es una grilla quieta, en orden. Altura uniforme, ancho natural. Las fotos no comparten proporción: la principal es 2/3 y las de apoyo 3/4. Recortarlas todas a la misma forma les comía los bordes, así que en vez de igualar la forma se iguala el ALTO y cada una se queda con el ancho que le toca. El carril mide más o menos según lo que lleve, y de eso se encarga el recorrido. */ .paso__carril { min-width: 0; } .paso__vagon { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); } .paso__toma { min-width: 0; } .paso__toma img { width: 100%; height: 100%; object-fit: cover; } /* Mientras la foto todavía no se pidió, su lleva `data-src` y no se muestra: adentro solo tiene un píxel transparente. El JS le borra el atributo al ponerle el `src` de verdad, y ahí aparece. Sin JavaScript el atributo no se borra nunca, así que este queda escondido para siempre y lo que se ve es la copia del