/* ══════════════════════════════════════════════════════════════════════════════ ABOUT US — «WHAT THE FROG?!» ══════════════════════════════════════════════════════════════════════════════ Dos capas del MISMO contenido: 1 · EL VIAJE (.ab-track) — el staging inmersivo 3D de Rally Maya. Sólo se enciende si about.js añade `.ab-3d` al ; sin JS o con "reducir movimiento" ni siquiera ocupa sitio. 2 · LA LISTA (.ab-linea) — la línea de tiempo de siempre. Es la que leen Google, los lectores de pantalla y quien navega sin JS. Cuando el viaje está encendido, la lista NO se borra con display:none (eso la escondería también de un lector de pantalla): se saca de la vista con la técnica de recorte, así el contenido sigue existiendo para quien lo necesita. Las fotos son las mismas URLs en las dos capas → el navegador las descarga una sola vez. ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════ 1 · EL VIAJE EN EL TIEMPO ══════════════ */ .ab-track{display:none} /* apagado por defecto: sin JS no existe */ .ab-3d .ab-track{ display:block; position:relative; /* 1 pantalla para la portada + 2 por hito. --ab-hitos lo pone el PHP. */ height:calc(100svh + var(--ab-hitos,9) * 200svh); background:var(--azul); } /* con el viaje encendido, la lista sigue en el DOM pero fuera de la vista */ .ab-3d .ab-linea{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0; } /* ── LÍNEA DE AVANCE ────────────────────────────────────────────────────── ⚠️ 2026-07-29 · Primero se puso FIJA al borde de la ventana y quedaba pegada al header. Carlos: *"aparece en el header, ahí no debe ir; encima de la foto y el banner"*. Ahora vive DENTRO del escenario: absoluta sobre el bloque de contenido, con el mismo ancho que él y separada del header. Se pinta con `scaleX` —no con `width`— para que el navegador la anime en la GPU y no recalcule el layout en cada scroll. */ .ab-prog{ display:none; position:absolute; top:112px; z-index:8; left:50%; transform:translateX(-50%); width:min(1000px, calc(100% - 2 * clamp(24px,6vw,80px))); /* el ancho del bloque */ height:4px; border-radius:2px; background:rgba(255,255,255,.16); overflow:hidden; pointer-events:none; } .ab-3d .ab-prog{display:block} .ab-prog__barra{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--amarillo) 0%,#ffd469 100%); border-radius:2px; will-change:transform; } .ab-stage{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--azul); background-image:url("../img/welcome-pattern.png"); background-size:420px auto; background-blend-mode:soft-light; perspective:1400px; perspective-origin:50% 50%; } /* ── PORTADA: se te viene encima ─────────────────────────────────────────── */ .ab-portada{ position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-inline:24px; will-change:transform,filter,opacity; } .ab-portada__1{ font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; font-size:clamp(26px,4.4vw,52px); letter-spacing:.08em; color:#fff; margin:0; } .ab-portada__2{ font-family:"Boris Black","Oswald",sans-serif; text-transform:uppercase; font-size:clamp(54px,11vw,140px); line-height:.9; color:var(--amarillo); text-shadow:5px 5px 0 rgba(var(--sombra-navy-rgb),.55); margin:.06em 0 .28em; } .ab-portada__sub{ color:#fff; font-size:clamp(15px,1.7vw,19px); line-height:1.5; max-width:46ch; margin:0; text-wrap:pretty; opacity:.92; } .ab-scroll{ position:absolute; bottom:calc(96px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:11px; letter-spacing:.24em; color:rgba(255,255,255,.72); margin:0; display:flex; flex-direction:column; align-items:center; gap:6px; } .ab-scroll__f{animation:ab-baja 1.8s ease-in-out infinite; font-size:15px} @keyframes ab-baja{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}} /* ── CADA HITO ───────────────────────────────────────────────────────────── */ /* ⚠️ 2026-07-29 · Carlos: "se ve todo a un lado, hay que centrarlo". El slot ocupa la pantalla entera y el texto tiene un ancho máximo de lectura (46ch): con `flex:1 1 auto` el par foto+texto se quedaba pegado a la izquierda y sobraba un hueco muerto a la derecha. Ahora el PAR se centra como bloque (`justify-content:center`) y el texto no crece más de lo que necesita. */ .ab-slot{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; gap:clamp(24px,4vw,64px); padding-inline:clamp(24px,6vw,80px); opacity:0; pointer-events:none; will-change:transform,opacity,filter; } .ab-slot--izq{flex-direction:row} .ab-slot--der{flex-direction:row-reverse} .ab-slot__foto{ margin:0; flex:0 0 auto; width:min(460px,42vw); border-radius:18px; overflow:hidden; border:4px solid #fff; aspect-ratio:450/356; box-shadow:0 26px 60px rgba(2,15,32,.55); } .ab-slot__foto img{width:100%; height:100%; object-fit:cover; display:block} .ab-slot__info{flex:0 1 46ch; will-change:opacity,filter} .ab-slot--der .ab-slot__info{text-align:right} .ab-slot__n{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--rojo); color:#fff; box-shadow:0 4px 0 var(--rojo-osc); font-family:"Oswald",sans-serif; font-size:21px; font-weight:600; margin-bottom:14px; } .ab-slot__t{ font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:clamp(24px,3.4vw,44px); line-height:1.04; font-weight:600; color:#fff; margin:0 0 14px; text-shadow:var(--sombra-txt); } .ab-slot__p{ font-size:clamp(15px,1.5vw,18px); line-height:1.62; color:rgba(255,255,255,.92); margin:0; text-wrap:pretty; } /* ══════════════ 2 · LA LISTA (siempre legible) ══════════════ */ .ab-linea{padding-block:clamp(44px,6vw,84px); background:var(--crema)} .ab-h1{margin:0 0 12px; line-height:.94; display:flex; flex-direction:column; align-items:center; text-align:center} .ab-h1__1{ font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; font-size:clamp(26px,4vw,48px); letter-spacing:.07em; color:var(--azul); } .ab-h1__2{ font-family:"Boris Black","Oswald",sans-serif; text-transform:uppercase; font-size:clamp(46px,8vw,104px); color:var(--rojo); text-shadow:3px 3px 0 rgba(var(--sombra-navy-rgb),.28); } .ab-bajada{ text-align:center; color:var(--azul); font-size:clamp(15px,1.7vw,19px); line-height:1.5; margin:0 auto clamp(32px,4vw,58px); max-width:52ch; text-wrap:pretty; } .ab-hitos{list-style:none; margin:0 auto; padding:0; max-width:1020px; position:relative} .ab-hitos::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:4px; margin-left:-2px; border-radius:2px; background:repeating-linear-gradient(180deg,var(--rojo) 0 14px,transparent 14px 26px); opacity:.55; } .ab-hito{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; margin-bottom:clamp(34px,4.5vw,64px); } .ab-hito:last-child{margin-bottom:0} .ab-hito:nth-child(even) .ab-hito__foto{order:2} .ab-hito:nth-child(even) .ab-hito__texto{order:1; text-align:right} .ab-hito:nth-child(even) .ab-hito__t::after{margin-left:auto} .ab-hito__foto{ margin:0; border-radius:18px; overflow:hidden; aspect-ratio:450/356; box-shadow:0 16px 38px rgba(var(--sombra-navy-rgb),.24); border:4px solid #fff; } .ab-hito__foto img{width:100%; height:100%; object-fit:cover; display:block} .ab-hito__n{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:var(--rojo); color:#fff; box-shadow:0 4px 0 var(--rojo-osc); font-family:"Oswald",sans-serif; font-size:22px; font-weight:600; margin-bottom:12px; } .ab-hito__t{ font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:clamp(22px,3vw,34px); line-height:1.05; font-weight:600; color:var(--azul); margin:0 0 14px; } .ab-hito__t::after{ content:""; display:block; width:56px; height:4px; border-radius:2px; background:var(--amarillo); margin-top:12px; } .ab-hito__p{font-size:17px; line-height:1.62; color:var(--azul); margin:0; text-wrap:pretty} /* ══════════════ CIERRE ══════════════ */ .ab-cta{padding-block:clamp(48px,6vw,78px); background:#fff; text-align:center} .ab-cta h2{ font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:clamp(24px,3.2vw,38px); font-weight:600; color:var(--azul); margin:0 0 12px; } .ab-cta p{font-size:16px; line-height:1.55; color:var(--azul); margin:0 auto 24px; max-width:56ch} .ab-cta__btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap} /* ⛔ quien pide menos movimiento no entra en el túnel: se queda con la lista */ @media (prefers-reduced-motion: reduce){ .ab-track{display:none !important} .ab-linea{position:static !important; width:auto !important; height:auto !important; clip:auto !important; clip-path:none !important; white-space:normal !important; margin:0 !important; overflow:visible !important} .ab-scroll__f{animation:none} } /* ══════════════════════════════════════════════════════════════════════════════ 📱 NORMA MÓVIL — aire 24 · 15px · 1.55. Al final: gana por cascada. El viaje SÍ va en móvil, pero con su propio rango: la foto arriba y el texto debajo (de lado no cabe), y el recorrido se acorta para que no se haga eterno. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width:900px){ /* 1 pantalla de portada + 1,6 por hito: bajar 9 hitos a 2 pantallas cansa */ .ab-3d .ab-track{height:calc(100svh + var(--ab-hitos,9) * 160svh)} .ab-slot{ flex-direction:column !important; /* también los pares */ justify-content:center; gap:20px; padding-inline:var(--m-aire); text-align:center; } .ab-slot__foto{width:min(360px,80vw)} /* ⚠️ en columna, el `flex:1 1 auto` de escritorio estira la caja del texto hasta el fondo de la pantalla y el conjunto queda pegado arriba. En móvil el texto ocupa sólo lo suyo y el slot se centra de verdad. */ .ab-slot__info,.ab-slot--der .ab-slot__info{text-align:center; max-width:100%; flex:0 0 auto} .ab-slot__t{font-size:22px; margin-bottom:10px} .ab-slot__p{font-size:var(--m-fs); line-height:var(--m-lh)} .ab-slot__n{width:38px; height:38px; font-size:18px; margin-bottom:10px} .ab-prog{top:88px; width:calc(100% - 2 * var(--m-aire))} .ab-portada__sub{font-size:var(--m-fs); line-height:var(--m-lh)} .ab-scroll{bottom:calc(104px + env(safe-area-inset-bottom))} /* encima de la barra flotante */ /* la lista, cuando toca verla */ .ab-bajada{font-size:var(--m-fs); line-height:var(--m-lh)} .ab-hitos::before{left:13px; margin-left:0; width:3px} .ab-hito{grid-template-columns:1fr; gap:14px; padding-left:44px; margin-bottom:32px} .ab-hito:nth-child(even) .ab-hito__foto{order:1} .ab-hito:nth-child(even) .ab-hito__texto{order:2; text-align:left} .ab-hito:nth-child(even) .ab-hito__t::after{margin-left:0} .ab-hito__n{position:absolute; left:-44px; top:0; width:38px; height:38px; font-size:18px; margin:0; border:3px solid var(--crema)} .ab-hito__t{font-size:21px; margin-bottom:10px} .ab-hito__t::after{width:44px; height:3px; margin-top:10px} .ab-hito__p{font-size:var(--m-fs); line-height:var(--m-lh); text-align:justify; text-align-last:left} .ab-hito__foto{border-width:3px; border-radius:14px} .ab-cta p{font-size:var(--m-fs); line-height:var(--m-lh)} .ab-cta__btns .btn{width:100%; max-width:320px} }