/* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ re-hero.css · REDISEÑO DEL HERO (c01) 17-ago-2026 ║ ║ ║ ║ CRITERIO — la primera pantalla tiene UN trabajo: que en 2 segundos se ║ ║ entienda la promesa y se vea dónde tocar. Todo lo que no sirva a eso ║ ║ baja de jerarquía. No cambio ni una palabra del HTML: sólo peso, aire, ║ ║ contraste y orden. ║ ║ ║ ║ LO QUE MEDÍ ANTES DE ESCRIBIR (localhost:8737, 1280×800 y 375×812): ║ ║ 1) El arco crema .c01-arc--tl (top:-205 left:-192 Ø563 borde 70px ║ ║ opacity:.94) PASA POR DETRÁS del titular: el h1 arranca en (95,155) ║ ║ y ese punto cae dentro de la banda del anillo. Texto blanco de 76,8px ║ ║ sobre crema #f4efe6 = ilegible en el arranque de "Tu página". En 375 ║ ║ el mismo anillo cruza el eyebrow (texto gris al 74% sobre crema). ║ ║ ESE es el bug del hero, no el "básico". ║ ║ 2) El CTA real (#c01-submit) es blanco #fff SOBRE la tarjeta blanca ║ ║ #fff: el objeto más saturado de la pantalla era la barra azul de la ║ ║ ventana, no el botón. En móvil además nacía en y=1193 con fold 812: ║ ║ 381px por debajo del pliegue. Nadie "no ve" el CTA: no existe. ║ ║ 3) Sopa de píldoras: eyebrow + precio + botón fantasma + 3 badges = 6 ║ ║ objetos con la misma forma y peso debajo del h1. Con 6 iguales no hay ║ ║ jerarquía, y el .c01-nav2 (76px de alto, 100% de ancho en móvil) era ║ ║ el objeto MÁS parecido a un botón primario… y navega a otra sección. ║ ║ 4) Salto tipográfico 76,8px → 15,52px sin escalón intermedio. Ese salto ║ ║ es lo que se lee como "plantilla", no el titular. ║ ║ 5) Móvil: 3 badges apilados = 125px de fold gastados en 74 caracteres. ║ ║ ║ ║ CÓMO SE ENLAZA: DESPUÉS de escala.css (es el último de la lista), ║ ║ con bump de cache-bust. Aun así casi todo va prefijado con #c01-hero ║ ║ para ganar por especificidad y no depender del orden de carga: varias ║ ║ sesiones editan esta carpeta y el orden se mueve. ║ ║ ║ ║ LO QUE NO TOCO Y POR QUÉ (verificado leyendo el DOM en vivo): ║ ║ · .c01-precio y .c01-stk → sections.js les hace .from() con ║ ║ clearProps:'opacity' SOLAMENTE, así que GSAP DEJA el transform inline ║ ║ (leí style="transform: rotate(6.0001deg)" en el corazón). Cualquier ║ ║ transform mío en esos dos sería ignorado. Sólo les cambio caja y color. ║ ║ · .c01-formwrap → GSAP le escribe translate/rotate/scale + transform ║ ║ (flotación yoyo). Ahí no hay transform CSS posible: por eso la tarjeta ║ ║ NO lleva inclinación propia (ver HTML SUGERIDO 3). ║ ║ · .c01-window → tiene data-tilt; core.js le escribe transform inline en ║ ║ pointermove. Nada de transform mío tampoco. ║ ║ · .c01-arc → GSAP les escribe transform (parallax + scrub). Muevo top/ ║ ║ left/opacity, jamás transform. ║ ║ · No duplico animación de entrada en eyebrow/líneas/sub/nav2/badges/ ║ ║ window: esos 8 selectores ya los anima la timeline de sections.js. ║ ║ Mi capa de entrada usa SÓLO pseudo-elementos y el submit, que la ║ ║ timeline no toca. Cero pelea de estilos inline. ║ ║ · t03 / t04b / f01 / f02: ni un selector. Todo aquí vive bajo #c01-hero. ║ ║ ║ ║ REGLAS: espaciado sólo con --s1..--s8 · sin mix-blend-mode · sin ║ ║ will-change · sin blur nuevo (los anillos de foco y el "latido" usan ║ ║ spread sin blur; el ambiente es un gradiente, no un filtro) · estados ║ ║ finales explícitos, nunca una variable dentro de un transform · ║ ║ disparo por scroll/carga y toque, nunca sólo :hover · reduced-motion. ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════════════ 1 · ESCENARIO — que el titular gane el contraste siempre ═══════════════════════════════════════════════════════════════════════════ */ /* El aire de arriba sube: 83,2px medidos son "cabeza pegada al nav". Con la nav fija de 64px, --s3 en móvil (78px) y --s6 en desktop (104px) es lo que separa un póster de una landing apretada. El de abajo baja a --s6 porque debajo viene la cinta azul c02 y no necesita respiro grande. */ #c01-hero{ padding-top:calc(var(--nav-h) + var(--s3)); padding-bottom:var(--s6); } /* El contenido por encima del lienzo global (piezas flotantes fijas, z-index:1). Medí una pieza azul del lienzo justo detrás de "y deja" en el sub: empatan en z-index 1 y el orden de pintado quedaba a merced del DOM. Con 2 no empata. */ #c01-hero .c01-grid{ z-index:2 } /* AMANECER — la única cosa "cara" que puedo poner sin retrasar la lectura: un lavado azul detrás del titular y otro tenue detrás de la tarjeta. Es un gradiente (pinta una vez), NO un filtro: no hay blur ni capa a pantalla completa. Va en el pseudo del propio hero, que se pinta ANTES que los arcos (mismo z-index, primero en el árbol de caja) → el anillo crema sigue delante. */ #c01-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(64% 30% at 24% 300px, rgba(36,64,255,.18), rgba(36,64,255,0) 70%), radial-gradient(60% 34% at 76% 78%, rgba(109,134,255,.10), rgba(109,134,255,0) 72%); } /* EL ARCO CREMA SE APARTA DEL TEXTO. Geometría, no gusto: el h1 arranca en x≈95 y≈152. Para que la banda del anillo (R=22vw, grosor 5,5vw) no lo toque, el centro tiene que subir más rápido de lo que crece el radio → el offset vertical va a -30/-32vw en vez de -16vw. Con -32vw a 1280px la distancia centro→titular queda en 305px contra un radio exterior de 281px: 24px de aire real. ⚠ CHOCA CON EL DNA (imagen 2: "dona gigante recortada arriba-izquierda"): la dona pasa de protagonista a barrido diagonal en la esquina. Es el precio de que el titular sea legible; la alternativa que descarté era llevarla detrás de la tarjeta (top-right), y ahí competía con el brillo azul del arco inferior y ensuciaba justo el lado del CTA. Si el cliente quiere la dona grande de vuelta, se sube el opacity a .35: a ese valor el blanco sobre crema mide 7:1 y el azul del "7 días" 2,2:1 — o sea, el número se pierde. Preferí mover la forma antes que apagarla. */ #c01-hero .c01-arc--tl{ top:-190px; left:-150px; /* móvil: centro en (0,-40), R=150 → despeja el h1 */ opacity:.86; /* .94 daba glare de anillo junto a texto blanco */ } @media(min-width:760px){ #c01-hero .c01-arc--tl{ top:-30vw; left:-24vw } } @media(min-width:1080px){ #c01-hero .c01-arc--tl{ top:min(-32vw,-330px); left:min(-24vw,-250px) } } /* .c01-arc--br (azul, abajo-derecha) se queda EXACTO como está: cae detrás de la tarjeta opaca y su glow es justamente lo que hace rico el lado del CTA. */ /* ═══════════════════════════════════════════════════════════════════════════ 2 · REJILLA — el formulario sube de peso, el titular baja un punto ═══════════════════════════════════════════════════════════════════════════ */ /* 380px de columna para el formulario contra 638px de texto es lo que hacía que el titular "compitiera": ganaba por tamaño. Subo la tarjeta a 400 y bajo el titular de 76,8 a 72px. No es achicar el h1 por achicarlo — es que a 72px con la columna en 620px "lista en 7 días." sigue entrando en una línea, y el objeto de conversión gana 20px de presencia. */ @media(min-width:1080px){ #c01-hero{ padding-top:calc(var(--nav-h) + var(--s6)) } #c01-hero .c01-grid{ grid-template-columns:minmax(0,1fr) 400px; gap:var(--s7); align-items:center; } #c01-hero::before{ background: radial-gradient(52% 62% at 22% 46%, rgba(36,64,255,.18), rgba(36,64,255,0) 70%), radial-gradient(44% 52% at 82% 72%, rgba(109,134,255,.11), rgba(109,134,255,0) 72%); } } /* ═══════════════════════════════════════════════════════════════════════════ 3 · JERARQUÍA TIPOGRÁFICA — cuatro escalones, no dos ═══════════════════════════════════════════════════════════════════════════ */ /* EYEBROW · el fondo pasa de --glass-bg (rgba(16,16,22,.62), translúcido) a tinta OPACA. Es la corrección directa de lo medido: el anillo crema pasa por detrás de esta píldora y con fondo translúcido el texto quedaba gris sobre crema. Opaca, el anillo pasa por atrás y se lee como capa intencional. También adelgaza: 53px de alto en móvil → 44px. */ #c01-hero .c01-eyebrow{ gap:var(--s2); padding:var(--s1) var(--s3); margin-bottom:var(--s3); background:#0b0b10; border:1px solid rgba(244,239,230,.16); font-family:var(--f-text); font-size:.78rem; line-height:1.45; font-weight:500; color:rgba(244,239,230,.8); max-width:100%; } /* TITULAR EN DOS TIEMPOS · el h1 son dos frases con dos trabajos distintos: la promesa (7 días) y el quite de riesgo (el saldo). Que midan igual obliga a leer las cuatro líneas para entender. Con la segunda al .84em el ojo aterriza en la promesa y el resto se lee después — y el bloque baja de 313 a ~243px, que es aire que le regalo al formulario. El tracking cerrado (-.028em) es lo que separa un display bien compuesto de uno por defecto: a 72px, -.015em se ve suelto. */ #c01-hero .c01-t{ font-size:clamp(2.3rem,9.2vw,3.05rem); line-height:.98; letter-spacing:-.028em; text-wrap:balance; } @media(min-width:760px){ #c01-hero .c01-t{ font-size:clamp(3.1rem,6.4vw,4rem) } } @media(min-width:1080px){ #c01-hero .c01-t{ font-size:clamp(3.6rem,5.9vw,4.5rem) } } #c01-hero .c01-line{ display:block } #c01-hero .c01-line + .c01-line{ font-size:.84em; letter-spacing:-.02em; margin-top:var(--s1); color:rgba(255,255,255,.92); /* medio punto menos de blanco = segundo plano */ } /* El número es el argumento: se ilumina en vez de agrandarse. El text-shadow va sobre dos palabras (no sobre un bloque a ancho completo) y es estático: se pinta una vez, no entra en el peor fotograma del scroll. */ #c01-hero .c01-t em{ color:var(--azul-glow); text-shadow:0 0 22px rgba(109,134,255,.3); } /* El garabato sube a --azul-glow: #2440ff sobre #060608 es azul sobre negro, se hunde. Con #6d86ff el círculo y el "7 días" quedan del mismo tono y el titular se lee como una sola idea marcada a mano. Sólo color y grosor: el trazo lo dibuja core.js con strokeDashoffset y eso no se toca. */ #c01-hero .scribble-path{ stroke:var(--azul-glow); stroke-width:5 } /* LEAD · el escalón que faltaba. 15,52px debajo de 72px es el salto que se ve barato. A ~17,4px con interlínea 1.55 y blanco al 82% (era --muted, .78) esto se lee como bajada de titular, no como pie de foto. Cuesta ~23px de alto en desktop: bien gastados. */ #c01-hero .c01-sub{ margin-top:var(--s4); max-width:52ch; font-size:clamp(1rem,1.15vw,1.09rem); line-height:1.55; color:rgba(244,239,230,.82); } /* PRECIO · se queda píldora crema rotada con sombra dura (es ADN puro y es la única "plata" del hero), sólo gana cuerpo. NO le toco el transform: GSAP le deja el rotate inline y mi valor sería ignorado. */ #c01-hero .c01-precio{ margin-top:var(--s4); padding:var(--s2) var(--s4); font-size:1.04rem; box-shadow:4px 4px 0 var(--azul); } /* ENLACE SECUNDARIO · deja de ser botón. Medía 76px de alto y 100% de ancho en móvil: era el objeto con más forma de botón primario en pantalla, y navega a #f01-como. Convertido en enlace de texto subrayado desaparece de la disputa y el submit se queda solo. Mantiene 44px de alto táctil. */ #c01-hero .c01-band{ margin-top:var(--s4); gap:var(--s3) } #c01-hero .c01-nav2{ display:inline-flex; align-items:center; gap:var(--s2); min-height:44px; padding:0; border:0; background:none; border-radius:0; box-shadow:none; font-family:var(--f-text); font-weight:600; font-size:.88rem; color:rgba(244,239,230,.72); text-decoration:underline; text-decoration-color:rgba(244,239,230,.3); text-decoration-thickness:1px; text-underline-offset:5px; white-space:normal; text-align:left; } #c01-hero .c01-nav2:active{ transform:none; color:#fff } @media(hover:hover){ #c01-hero .c01-nav2:hover{ transform:none; color:#fff; text-decoration-color:var(--azul-glow); } } /* BADGES → FICHA TÉCNICA · tres píldoras iguales se leen como botones falsos y en móvil se apilan en 125px. Sin caja, con el ✓ azul y una línea fina arriba, pasan a ser lo que son: especificaciones. Móvil 125px → ~44px; desktop una sola línea de 36px. ⚠ CHOCA con "píldoras = energía" del DNA: acepto perder energía AQUÍ porque el hero ya tiene 3 objetos con forma de píldora (eyebrow, precio, submit) y la energía de las píldoras rotadas está viva en el resto de la página. Para revertir: se borra este bloque y vuelven las píldoras de sections.css. */ #c01-hero .c01-badges{ position:relative; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s5); padding-top:var(--s4); } #c01-hero .c01-badges::before{ content:""; position:absolute; top:0; left:0; width:min(100%,320px); height:1px; background:rgba(244,239,230,.22); transform:scaleX(1); /* estado final explícito: sin JS ya está */ transform-origin:left center; } #c01-hero .c01-badge{ padding:0; gap:var(--s2); border:0; background:none; border-radius:0; font-family:var(--f-text); font-size:.78rem; font-weight:500; letter-spacing:.01em; color:var(--faint); } #c01-hero .c01-badge b{ color:var(--azul-glow); font-size:.95em } /* ═══════════════════════════════════════════════════════════════════════════ 4 · LA TARJETA-FORMULARIO — el objeto que tiene que ganar ═══════════════════════════════════════════════════════════════════════════ */ /* Sombra dura azul OPACA y más larga (era rgba .9 a 8px). Sin blur: es la sombra de sticker del DNA, y sin blur no cuesta pintado en el scroll. */ #c01-hero .window-card.c01-window{ border-width:2px; border-radius:18px; box-shadow:8px 8px 0 var(--azul); } @media(min-width:1080px){ #c01-hero .window-card.c01-window{ box-shadow:10px 10px 0 var(--azul) } } /* Filo de luz en la barra azul: material, no color plano. Un inset de 1px. */ #c01-hero .c01-window .window-bar{ box-shadow:inset 0 1px 0 rgba(255,255,255,.28); } #c01-hero .c01-window .window-body{ padding:var(--s4) } @media(min-width:1080px){ #c01-hero .c01-window .window-body{ padding:var(--s5) } } #c01-hero .c01-form-titulo{ font-size:1.32rem; line-height:1.15; letter-spacing:-.02em; } #c01-hero .c01-form-sub{ margin:var(--s2) 0 var(--s4); font-size:.86rem; line-height:1.5; color:rgba(26,26,34,.62); } /* Campos: 56px de alto (= alto del botón, la columna se ve construida y no improvisada) y 1,02rem de tipo — por encima de 16px, que es el umbral bajo el cual iOS hace zoom al enfocar y descuadra el hero entero. */ #c01-hero .c01-window .form-field{ margin-bottom:var(--s3) } #c01-hero .c01-window .form-field input{ min-height:var(--s7); padding:var(--s3) var(--s4); background:#fbf8f2; border:1.5px solid rgba(9,9,14,.24); border-radius:12px; font-size:1.02rem; } #c01-hero .c01-window .form-field input::placeholder{ color:rgba(26,26,34,.5) } /* Foco visible de verdad: anillo de 4px con spread, sin blur. */ #c01-hero .c01-window .form-field input:focus{ background:#fff; border-color:var(--azul); box-shadow:0 0 0 4px rgba(36,64,255,.2); } /* EL CTA · de blanco sobre blanco a AZUL. Medido: #fff sobre #fff dejaba el botón como un rectángulo con borde, más débil que la barra de la ventana. ⚠ CHOCA con CONVENTIONS.md ("pill blanca = CTA de conversión"): esa regla nace de las gráficas donde la píldora blanca va sobre NEGRO. Dentro de una tarjeta blanca la traducción fiel de la misma idea — máximo contraste contra su propio fondo — es el azul de marca. Es el único objeto saturado del hero. */ #c01-hero .c01-submit{ width:100%; min-height:var(--s7); margin-top:var(--s2); background:var(--azul); color:#fff; border:2px solid #09090e; box-shadow:5px 5px 0 #09090e; font-size:1.04rem; letter-spacing:.005em; } /* Feedback de TOQUE (no de hover): se hunde en la página. Móvil primero. */ #c01-hero .c01-submit:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 #09090e; } @media(hover:hover){ #c01-hero .c01-submit:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 #09090e; } } #c01-hero .c01-ok{ margin-top:var(--s3); font-size:.88rem } /* ═══════════════════════════════════════════════════════════════════════════ 5 · MÓVIL — el CTA entra en la primera pantalla ═══════════════════════════════════════════════════════════════════════════ */ /* EL CAMBIO GRANDE. Medido en 375×812: la tarjeta nacía en y=803 (fold 812) y el botón en y=1193. Ni con todos los recortes de arriba (≈187px) el botón sube al fold. Con display:contents los hijos de .c01-copy pasan a ser ítems de la misma rejilla y puedo reordenarlos: promesa → precio → FORMULARIO → detalle → prueba. La tarjeta arranca en ~y=350 y el botón queda dentro del fold en iPhone. Es el orden del funnel de el cliente (promesa, plata, acción) y deja el detalle largo para quien sigue bajando. Por qué display:contents y no un cambio de HTML: .c01-copy no tiene ni una regla propia en sections.css (lo verifiqué), así que no se pierde nada al disolver la caja, y no toco el DOM ni la timeline (que apunta por selector). ⚠ COSTO HONESTO: el orden visual deja de coincidir con el orden del DOM. El lector de pantalla y el tabulador siguen el DOM (…sub, enlace, ficha, form), así que un usuario de teclado llega al enlace secundario antes que al formulario. Lo asumo por el fold, no por descuido; se revierte borrando este bloque. Si molesta, la solución limpia es HTML SUGERIDO 1. El row-gap se anula porque con 7 ítems un gap de rejilla multiplicaría el alto: el ritmo lo llevan los márgenes de cada pieza, en escala. */ @media(max-width:1079.98px){ #c01-hero .c01-copy{ display:contents } #c01-hero .c01-grid{ row-gap:0; justify-items:start } #c01-hero .c01-eyebrow{ order:1 } #c01-hero .c01-t{ order:2; justify-self:stretch; margin-top:var(--s3) } #c01-hero .c01-precio{ order:3 } #c01-hero .c01-formwrap{ order:4; justify-self:stretch; margin-top:var(--s5) } #c01-hero .c01-sub{ order:5; justify-self:stretch; margin-top:var(--s6) } #c01-hero .c01-band{ order:6; margin-top:var(--s3) } #c01-hero .c01-badges{ order:7; justify-self:stretch; margin-top:var(--s4) } } /* Recorte fino del fold en teléfono: cada píxel de aquí es un píxel que sube el botón. Nada de esconder texto — sólo cuerpo, interlínea y márgenes. */ @media(max-width:760px){ #c01-hero .c01-eyebrow{ font-size:.74rem } #c01-hero .c01-sub{ font-size:.97rem; line-height:1.5; max-width:44ch } #c01-hero .c01-nav2{ width:auto; font-size:.86rem } #c01-hero .c01-badges{ gap:var(--s2) var(--s4) } #c01-hero .c01-form-sub{ font-size:.83rem; margin-bottom:var(--s3) } #c01-hero .c01-window .form-field{ margin-bottom:var(--s2) } } /* ═══════════════════════════════════════════════════════════════════════════ 6 · ENTRADA — tres gestos que no retrasan la lectura ═══════════════════════════════════════════════════════════════════════════ */ /* La timeline de sections.js ya dura ~2,6s y no la puedo tocar desde CSS. Así que no agrego ni un milisegundo antes del texto: mis tres gestos son ambientales y CONCURRENTES, y ninguno oculta contenido. Regla de oro de este bloque: el estado base ES el estado final. Las animaciones sólo existen dentro de .c01-in y de no-preference; si el JS nunca llega o el usuario pide menos movimiento, todo está ya en su sitio. Valores finales explícitos (opacity:1 / scaleX(1)), nunca una variable dentro de un transform: el navegador no la reevalúa. */ @keyframes reAmanecer{ from{ opacity:0 } to{ opacity:1 } } @keyframes reLinea{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } } @keyframes reLatido{ 0% { box-shadow:5px 5px 0 #09090e, 0 0 0 0 rgba(36,64,255,.5) } 70% { box-shadow:5px 5px 0 #09090e, 0 0 0 18px rgba(36,64,255,0) } 100%{ box-shadow:5px 5px 0 #09090e, 0 0 0 0 rgba(36,64,255,0) } } @media(prefers-reduced-motion:no-preference){ /* 1 · el lavado azul sube mientras se leen las primeras palabras: opacidad pura, una capa, sin transform ni blur. */ #c01-hero.c01-in::before{ animation:reAmanecer 1.5s cubic-bezier(.22,.7,.25,1) .1s both; } /* 2 · la línea de la ficha se dibuja al final de la coreografía (los badges terminan cerca de 2,0s): cierra la composición en vez de competir. */ #c01-hero.c01-in .c01-badges::before{ animation:reLinea .8s cubic-bezier(.22,.7,.25,1) 2.05s both; } /* 3 · el CTA late 3 veces cuando ya todo está quieto (~2,6s). Anillo con spread y SIN blur, área chica, sin fill-mode: al terminar vuelve a su sombra dura. Se ve en teléfono sin tocar nada (no depende de :hover), y no queda un latido eterno chupando batería. */ #c01-hero.c01-in .c01-submit{ animation:reLatido 1.6s ease-out 2.6s 3; } } /* ═══════════════════════════════════════════════════════════════════════════ HTML SUGERIDO (no lo apliqué: el ámbito era sólo CSS) ═══════════════════════════════════════════════════════════════════════════ 1) CTA primario propio en la columna de texto, para no depender del reordenamiento con display:contents (y devolver el orden de tabulación al orden visual). Dentro de .cta-band, ANTES del enlace secundario: Cotizar gratis por WhatsApp Estilo: mismo azul y misma sombra dura que .c01-submit; en desktop se oculta (display:none) porque ahí el formulario ya está a la vista y la regla de auditoría dice que el secundario NAVEGA, no duplica. 2) Partir el lead en dos para tener jerarquía real sin esconder texto:

Nuestro equipo diseña tu página, escribe los textos y deja los pedidos llegando directo a tu WhatsApp. Abonas la mitad para partir — y el resto solo cuando la ves terminada y dices «así la quiero».

Con .re-lead a 1.12rem/blanco 92% y el resto al 78% se lee en dos tiempos. 3) Una cáscara alrededor de la ventana para poder inclinarla:
… .c01-window …
Hoy no hay ningún elemento libre: GSAP escribe transform en .c01-formwrap (flotación) y core.js en .c01-window (data-tilt). Con .re-formshell se puede dar el rotate(-1.2deg) del ADN de póster sin pelear con ninguno. 4) Una línea de reaseguro debajo del botón (texto nuevo: lo decide el cliente), del tipo "Sin compromiso · respondemos hoy". Es el hueco que le falta al formulario para cerrar la objeción justo en el clic:

…

/* .8rem, tinta al 55%, centrado */ VERIFICAR: http://localhost:8737/tu-plantilla-v2/ (medir de nuevo en 375×812 y 1280×800; y ScrollTrigger.refresh() antes de medir tras resize). */