/* ========================================================================== Layout base ========================================================================== */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad-y); } .section--tight { padding-block: calc(var(--section-pad-y) * 0.6); } .grid { display: grid; gap: var(--gutter); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .bg-blue { background: var(--color-blue); color: var(--color-white); } .bg-red { background: var(--color-red); color: var(--color-white); } .bg-green { background: var(--color-green); color: var(--color-white); } .bg-black { background: var(--color-black); color: var(--color-white); } .bg-white { background: var(--color-white); color: var(--color-black); } /* ---- Header / Nav ---- Arranca "grande" (es visualmente la fila superior del bloque azul del Hero) y se va compactando de forma continua A MEDIDA que se hace scroll (no de golpe a un umbral fijo): initHeaderScrollState() en main.js calcula, cuadro a cuadro, un progreso 0→1 según cuánto se ha scrolleado y fija height/padding-bottom/logo-height por inline style en ese punto exacto del recorrido — el logo "avanza hacia arriba" al mismo ritmo que el dedo/rueda del mouse, no salta a su estado final. Por eso NO hay transition en height/padding-bottom aquí: con valores que ya cambian en cada frame de scroll, una transition CSS solo generaría un "arrastre" (el header persiguiendo, con retraso, la posición real del scroll) en vez de seguirlo 1:1. position: fixed (no sticky) a propósito: el header cambia de alto al compactarse, y si fuera sticky ese cambio de alto reacomodaba el resto del documento (el Hero se corría), dejando ver de golpe parte del texto del Hero por debajo de la barra compacta. Con fixed, el header sale del flujo del documento y su tamaño nunca mueve nada; el espacio que "debería" ocupar en el flujo lo reserva .header-spacer (mismo alto grande, fijo, no anima), así el Hero siempre arranca en la misma posición sin importar el estado del header. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; /* flex-end SIEMPRE (grande y compacto): si esto cambia entre estados, el logo "salta" en el instante del toggle porque align-items no se puede animar — eso era el parpadeo. Solo padding-bottom/height, que sí son animables, cambian entre estados. */ align-items: flex-end; justify-content: space-between; height: var(--header-h-large); padding: 0 var(--gutter) var(--logo-title-gap); background: var(--color-blue); color: var(--color-black); transition: opacity 0.3s var(--ease); } /* ---- Barra superior: se oculta sola, aparece con el cursor ---- Visible en la carga (así el Hero se ve completo al entrar); recién se empieza a esconder la primera vez que el cursor se aleja de la franja superior de la pantalla. Vuelve a aparecer apenas el cursor sube a esa zona de nuevo, y se queda visible mientras el menú fullscreen esté abierto. Ver initNavAutoHide() en main.js — agrega/quita esta clase en . Afecta tanto el header (logo) como el punto (que también hace de trigger del menú), para que se oculten y aparezcan juntos como una sola barra. */ body.nav-hidden .site-header, body.nav-hidden .dot-dock { opacity: 0; pointer-events: none; } /* Fallback sin JS (o antes del primer cálculo): mismo destino final que antes. En cuanto corre initHeaderScrollState(), el inline style que pone en cada frame de scroll manda (gana por especificidad). */ .site-header.is-scrolled { height: var(--header-h-compact); padding-bottom: 0.75rem; } /* Reserva el espacio que el header ocuparía en el flujo (siempre a su alto GRANDE, constante) para que el resto de la página no se mueva cuando el header se compacta. Mismo azul para que sea invisible. */ .header-spacer { height: var(--header-h-large); background: var(--color-blue); flex: none; } .site-header__logo-img { height: var(--logo-h-large); width: auto; display: block; /* Sin transition: la altura la fija initHeaderScrollState() en cada frame de scroll (mismo motivo que en .site-header, arriba). */ } .site-header.is-scrolled .site-header__logo-img { height: var(--logo-h-compact); } .site-nav { position: fixed; inset: 0; z-index: 200; background: var(--color-black); color: var(--color-white); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: var(--gutter); transform: translateY(-100%); transition: transform var(--dur) var(--ease); /* Red de seguridad: 6 links a tamaño grande (clamp hasta 3rem) más los gaps pueden sumar más alto que una pantalla corta (celular en horizontal, ventana de escritorio bajita). overflow-y:auto no cambia nada donde ya entran todos (el contenido nunca llega a medir más que el 100% del alto), pero si algún día no entran, se puede scrollear en vez de recortarse fuera de la pantalla sin forma de llegar a ellos. */ overflow-y: auto; } .site-nav.is-open { transform: translateY(0); } .site-nav a { font-family: var(--font-display); font-size: clamp(1.75rem, 6vw, 3rem); font-weight: 400; /* Helvetica Neue Regular: mayúscula + tamaño grande, no un corte Black */ text-transform: uppercase; } .site-nav__close { position: absolute; top: 1.25rem; right: var(--gutter); width: 14px; height: 14px; border-radius: 50%; background: var(--color-white); } /* ---- Stacking sections ---- Patrón reutilizable: cada sección "apilable" se pega arriba (sticky) y, por orden de aparición en el DOM + z-index creciente, la siguiente sección se desliza hacia arriba y cubre a la anterior al hacer scroll. El header (z-index:1000) siempre queda por encima de todas. Aplicar .stack-section + --stack-index a cada sección que deba participar. OJO: .stack-section NO trae alto propio a propósito — la usan tanto módulos de pantalla completa (.screen, 100vh) como .hero__media, que es sticky pero mide 50vh. El alto lo define cada caso puntual. */ .stack-section { position: sticky; top: 0; z-index: calc(1 + var(--stack-index, 0)); } /* ---- Módulo de una sola pantalla ---- Desde "Qué resolvemos" en adelante, cada sección/módulo mide exactamente lo mismo que el Hero (100vh): "encaja" en la pantalla sin scroll interno. Se combina con .stack-section para que se apile igual que ya hace Qué resolvemos sobre el Hero. overflow:hidden por ahora — si el contenido de algún módulo no cabe todavía en 100vh, se ajusta módulo por módulo. */ .screen { height: 100vh; overflow: hidden; } /* ---- Skip link ---- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-white); color: var(--color-black); padding: 0.75rem 1rem; z-index: 999; } .skip-link:focus { left: var(--gutter); top: var(--gutter); } /* ---- Footer ---- Alto y en el azul de marca — pedido explícito ("footer alto azul"). min-height + flex/justify-content:center reparte el aire arriba/abajo del contenido en vez de depender solo de padding, así se ve realmente "alto" y no solo con más márgen. */ .site-footer { background: var(--color-blue); color: var(--color-white); min-height: 60vh; display: flex; align-items: center; padding-block: clamp(4rem, 10vw, 7rem); } /* "Hablemos" — antes vivía al final del módulo de equipo; se mudó acá arriba de todo como cierre del sitio. Mismo verde de marca que el resto de las palabras grandes, sobre el azul del footer. */ .site-footer__cta { font-family: var(--font-display); font-weight: 400; /* Helvetica Neue Regular: mayúscula + tamaño grande, no un corte Black */ color: var(--color-green); text-transform: uppercase; font-size: clamp(2.5rem, 6vw, 5rem); margin-bottom: clamp(3rem, 8vh, 5rem); } .site-footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; } .site-footer__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.7); margin-top: 3rem; }