/* ============================================================ FULLSCREEN.CSS — framework scroll-story (secciones 100vh, snap duro, escalado por zoom, header que se funde, dot-nav, cue de scroll). Lo usan las páginas fullscreen (home, servicios, segunda-opinión, instituciones, conócenos). El estilo POR-SECCIÓN vive inline en cada página. Requiere io.css cargado ANTES. Pareja JS: assets/js/fullscreen.js Marca las secciones oscuras con
para que el header y el dot-nav se inviertan sobre ellas. ============================================================ */ /* ===== Snap SUAVE por proximidad (scroll libre + guía a la parada) ===== `proximity`: el usuario controla el scroll en todo momento (teclado, buscar-en- página, barra, inercia nativa); SOLO al detenerse CERCA de una sección-MOMENTO (.fs) el navegador lo asienta suave en ella. No es scroll-jacking — la guía es al final del gesto, no fuerza una sección por gesto (eso era `mandatory`, retirado). El contenido (.flow/.pin/.hscroll) fluye en altura natural. */ html{scroll-snap-type:y proximity;scroll-padding-top:0;scroll-behavior:smooth;} :root{--snaph:100vh;} .fs{min-height:var(--snaph);padding-top:var(--header-h);box-sizing:border-box; display:flex;flex-direction:column;justify-content:center; scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;} .fs__in{width:100%;padding-block:clamp(3.2rem,5vh,6.4rem);} /* footer alcanzable bajo snap duro: punto de snap propio al final */ #site-footer{scroll-snap-align:end;} /* ===== Primitivas del modelo híbrido (conviven con .fs) ===== .flow = contenido continuo: altura natural + padding generoso (el aire), NO atrapa (sin snap-align). Para secciones densas/largas. .pin = proceso pegajoso: la sección no atrapa; la columna sticky la define cada página (no usar overflow:hidden en .pin ni en sus ancestros). .hscroll = carrusel horizontal con snap-x. */ .flow,.pin{position:relative;box-sizing:border-box;padding-block:clamp(5.6rem,9vh,12rem);} .flow .fs__in,.pin .fs__in{width:100%;padding-block:0;} .hscroll{display:flex;gap:var(--sp-5);overflow-x:auto;scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;padding-bottom:var(--sp-3);} .hscroll > *{scroll-snap-align:start;flex:0 0 auto;} /* ⚠️ Centrado cross-browser: NO usar scroll-padding-top junto al padding-top del .fs — se duplica el offset del header y Safari deja el contenido pesado abajo (Chrome no descansa sobre scroll-padding, Safari sí). El header se compensa SOLO con el padding-top interno del .fs (box-sizing border-box). */ /* ===== --snaph = 100vh real ===== Antes el sitio usaba body{zoom} y el vh se inflaba, así que --snaph compensaba con 100vh/zoom. Ahora el escalado es por font-size raíz (rem) en io.css → el vh NO se infla, así que --snaph queda en 100vh limpio en todas las resoluciones (el token base :root{--snaph:100vh} de arriba ya aplica; sin overrides). */ /* ===== Viewports CORTOS (laptops 13", alto ≲82rem) ===== Compacta el ritmo vertical para que las secciones densas entren sin scroll interno. Media query por ALTO → no afecta pantallas altas (p.ej. 1440p del usuario). Palancas globales; cada página añade ajustes puntuales a sus secciones más densas (servicios #s2, instituciones #s2). */ @media (max-height:820px){ :root{--head-gap:clamp(1.6rem,3vh,3rem);} .fs__in{padding-block:clamp(1.2rem,2vh,2.2rem);} .section__head > * + *{margin-top:var(--sp-4);} .section__head .lead{margin-top:var(--sp-4);} } /* ===== Reveal de entrada por sección (scroll-based, zoom-safe; lo activa fullscreen.js marcando .is-in en la sección al entrar al viewport). Progresivo: el estado oculto SOLO existe bajo .fs-reveal (clase que añade el JS en ), así que si el JS no corre todo queda visible. Stagger leve entre los bloques directos de la sección. ===== */ /* (1) BLOQUES de la sección (eyebrow, título, lede, párrafos, contenedores) entran con fade + leve subida (settle), escalonados. */ .fs-reveal .fs__in > *{opacity:0;transform:translateY(2.6rem); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);} .fs-reveal :is(.fs,.flow,.pin).is-in .fs__in > *{opacity:1;transform:none;} .fs-reveal :is(.fs,.flow,.pin).is-in .fs__in > *:nth-child(2){transition-delay:.07s;} .fs-reveal :is(.fs,.flow,.pin).is-in .fs__in > *:nth-child(3){transition-delay:.14s;} .fs-reveal :is(.fs,.flow,.pin).is-in .fs__in > *:nth-child(4){transition-delay:.21s;} .fs-reveal :is(.fs,.flow,.pin).is-in .fs__in > *:nth-child(n+5){transition-delay:.28s;} /* (2) CUADRÍCULAS de tarjetas/fotos (hijas DIRECTAS de la sección): el contenedor aparece de inmediato y sus tarjetas/tiles entran EN CASCADA (no en bloque) — así las fotos y los elementos "caen" uno por uno. Scope estrecho (hijo directo) para no chocar con anidamientos. */ .fs-reveal :is(.fs,.flow,.pin).is-in .fs__in > :is(.grid,.svcb-tiles){transition:none;opacity:1;transform:none;} .fs-reveal .fs__in > :is(.grid,.svcb-tiles) > *{opacity:0;transform:translateY(2.6rem); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);} .fs-reveal :is(.fs,.flow,.pin).is-in .fs__in > :is(.grid,.svcb-tiles) > *{opacity:1;transform:none;} .fs-reveal :is(.fs,.flow,.pin).is-in .fs__in > :is(.grid,.svcb-tiles) > *:nth-child(2){transition-delay:.10s;} .fs-reveal :is(.fs,.flow,.pin).is-in .fs__in > :is(.grid,.svcb-tiles) > *:nth-child(3){transition-delay:.20s;} .fs-reveal :is(.fs,.flow,.pin).is-in .fs__in > :is(.grid,.svcb-tiles) > *:nth-child(n+4){transition-delay:.30s;} /* reduced-motion: io.css ya apaga animaciones; aquí además el scroll suave y se GARANTIZA que ningún reveal deje contenido oculto (sin transición, opacity:0 se quedaría fijo). Cubre bloques y cascada de cuadrículas. */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .fs-reveal .fs__in > *, .fs-reveal .fs__in > :is(.grid,.svcb-tiles) > *{opacity:1!important;transform:none!important;transition:none!important;} } /* ===== Entrada del HERO (reutilizable por atributo) ===== La primera sección ya está en pantalla al cargar, así que NO se anima de forma fiable por scroll/IntersectionObserver (en refresh tibio el IO cruza el 0→1 sin un paint intermedio y no transiciona). Solución: animación CSS declarativa, que el navegador corre en CADA carga (fría o refresh). Marca el contenedor del copy del hero con data-hero-in; sus líneas (hijos directos) entran escalonadas. El contenedor se fuerza visible (no espera .is-in). */ .fs-reveal .fs__in > [data-hero-in]{opacity:1;transform:none;} .fs-reveal [data-hero-in] > *{opacity:0;animation:heroIn .7s cubic-bezier(.22,.61,.36,1) forwards;} .fs-reveal [data-hero-in] > *:nth-child(1){animation-delay:.05s;} .fs-reveal [data-hero-in] > *:nth-child(2){animation-delay:.14s;} .fs-reveal [data-hero-in] > *:nth-child(3){animation-delay:.23s;} .fs-reveal [data-hero-in] > *:nth-child(4){animation-delay:.32s;} .fs-reveal [data-hero-in] > *:nth-child(5){animation-delay:.41s;} .fs-reveal [data-hero-in] > *:nth-child(n+6){animation-delay:.50s;} @keyframes heroIn{from{opacity:0;transform:translateY(2.6rem);}to{opacity:1;transform:none;}} @media(prefers-reduced-motion:reduce){.fs-reveal [data-hero-in] > *{opacity:1;animation:none;}} /* ===== Header que se FUNDE sobre secciones oscuras (data-dark) ===== Todo transiciona vía .site-header (io.css): el blur va a 0rem (no `none`, para que ANIME). El logo lo maneja el crossfade de los dos (io.css): el blanco (icono cyan + wordmark blanco) se funde por opacidad sobre el navy. */ .site-header.over-dark{background:transparent;-webkit-backdrop-filter:blur(0rem);backdrop-filter:blur(0rem);border-bottom-color:transparent;} .site-header.over-dark .nav__link{color:rgba(255,255,255,.78);} .site-header.over-dark .nav__link:hover,.site-header.over-dark .nav__link.is-active{color:#fff;} .site-header.over-dark .burger span,.site-header.over-dark .burger span::before,.site-header.over-dark .burger span::after{background:#fff;} /* ===== Nav de puntos (derecha) ===== */ .fs-dots{position:fixed;right:clamp(1.4rem,2vw,3rem);top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:1.4rem;} .fs-dots a{width:1.1rem;height:1.1rem;border-radius:50%;border:0.15rem solid var(--slate-soft);opacity:.5;transition:all .2s;position:relative;} .fs-dots a.is-active{opacity:1;background:var(--cyan);border-color:var(--cyan);transform:scale(1.18);} .fs-dots.on-dark a{border-color:rgba(255,255,255,.55);} .fs-dots.on-dark a.is-active{background:var(--cyan);border-color:var(--cyan);} @media(max-width:760px){.fs-dots{display:none;}} /* ===== Cue de scroll (señala que hay más abajo) ===== */ .scroll-cue{position:absolute;left:50%;bottom:clamp(1.6rem,2.4vh,2.8rem);transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:0.5rem;color:var(--slate-soft); font-family:var(--font-mono);font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;z-index:4;} .scroll-cue svg{width:1.8rem;height:1.8rem;animation:cue-bounce 1.8s ease-in-out infinite;} @keyframes cue-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(0.5rem);}}