/* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button { font: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ===== Tokens ===== */ :root { --light: #e4ddd4; --dark: #282828; --white: #ffffff; --font: "Helvetica Neue", Helvetica, Arial, sans-serif; --nav-h: 84px; --nav-h-scrolled: 60px; --container: 1200px; --gap: clamp(1.5rem, 4vw, 4rem); } body { font-family: var(--font); color: var(--dark); background: var(--light); line-height: 1.5; -webkit-font-smoothing: antialiased; } .kicker { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; margin-bottom: 1rem; } /* ===== Navbar ===== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--white); color: #111; height: var(--nav-h); transition: height 0.25s ease, box-shadow 0.25s ease; } .navbar--scrolled { height: var(--nav-h-scrolled); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); } .navbar__inner { max-width: var(--container); height: 100%; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .navbar__brand { display: flex; align-items: center; gap: 10px; } /* Lockup único (slow travel + sello Midas) en reemplazo de los dos logos sueltos. portada-wen.png trae bastante más aire vertical que el lockup anterior: el wordmark ocupa el 67% del alto del archivo contra el 90% del que reemplaza (el sello circular es el elemento más alto, no el texto). Por eso la altura va compensada ×1.33 — si no, "slow travel" se leería un tercio más chico que antes — y sobre eso, un +15% pedido a mano (27→31 / 32→37). width:auto conserva la proporción del PNG. En pantallas angostas (~375px o menos) el flex ya no tiene lugar para el logo al lado del botón y comprime la caja: object-fit:contain hace que el dibujo se achique proporcionalmente dentro de esa caja en vez de salir achatado. */ .navbar__logo { height: 31px; width: auto; object-fit: contain; } @media (min-width: 768px) { .navbar__logo { height: 37px; } } .navbar__home-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--white); color: #111; font-size: 0.78rem; letter-spacing: 0.06em; border: 1px solid rgba(0, 0, 0, 0.12); padding: 0.7rem 1.1rem; white-space: nowrap; transition: background 0.2s ease; } .navbar__home-btn:hover { background: var(--light); } /* ===== Hero ===== */ .hero { position: relative; height: 100vh; height: 100dvh; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 18, 0) 0%, rgba(20, 20, 18, 0.35) 100%); } .hero__content { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.25rem clamp(3rem, 8vh, 6rem); color: var(--white); } .hero__title { font-weight: 300; font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1.08; letter-spacing: -0.02em; } .hero__title-line { display: block; } /* Estado inicial de la animación de entrada, aplicado desde el primer pintado (clase agregada por un script inline en ) para que no haya un flash de la página ya visible antes de que GSAP la oculte. */ .intro-pending .hero__bg { opacity: 0; transform: scale(1.08); } .intro-pending .hero__title-line { opacity: 0; transform: translateY(24px); } .intro-pending .hero__microcta { opacity: 0; transform: translateY(16px); } .intro-pending #navbar { opacity: 0; transform: translateY(-20px); } .hero__microcta { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 2rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); opacity: 0.9; transition: opacity 0.2s ease; } .hero__microcta:hover { opacity: 1; } /* La imagen reemplaza al texto del micro-CTA. El alto se ata al font-size del enlace para que la mayúscula del PNG mida los mismos 9px que la del texto anterior: la mayúscula ocupa 39px de los 68px de lienzo, y la del texto es 0.75em, así que 0.75 × 68/39 = 1.308em. width:auto conserva la proporción. */ .hero__microcta-img { height: 1.308em; width: auto; display: block; } .hero__microcta-line { width: 1px; height: 28px; background: var(--light); opacity: 0.7; } /* ===== Concepto ===== */ .concepto { background: var(--dark); color: var(--white); padding: clamp(4rem, 12vh, 8rem) 1.25rem; } .concepto__inner { max-width: var(--container); margin: 0 auto; display: grid; gap: 2.5rem; } /* El kicker se saca del flujo (position:absolute) para que no empuje el título hacia abajo: así la primera línea de .concepto__title arranca a la misma altura que la primera línea de .concepto__copy, con el kicker flotando por encima. */ .concepto__heading { position: relative; } .concepto .kicker { position: absolute; top: -2rem; left: 0; margin-bottom: 0; font-size: 0.825rem; } .concepto__title { font-weight: 300; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.25; letter-spacing: -0.02em; } .concepto__copy { display: grid; gap: 1.25rem; font-size: 1.15rem; opacity: 0.85; max-width: 42em; } @media (min-width: 768px) { .concepto__inner { grid-template-columns: 1fr 1fr; gap: var(--gap); } } /* ===== Reveal por capas (concepto → inspirados → ma) ===== .concepto se pinea arriba con ScrollTrigger y queda por encima (z-index 2), así nunca se tapa. .reveal__flow arranca subido la altura de .inspirados: inspirados queda escondida DETRÁS de concepto y ma justo debajo, visible. Al scrollear, el flow baja hasta su lugar: inspirados emerge y ma se corre. overflow:hidden recorta lo que asoma por arriba cuando inspirados es más alta que concepto. Fondo blanco = el de .ma, para que no se note ningún corte al final del recorrido. */ .reveal { position: relative; overflow: hidden; background: var(--white); } .concepto { position: relative; z-index: 2; } .reveal__flow { position: relative; z-index: 1; will-change: transform; } /* ===== Inspirados ===== */ .inspirados { background: #444444; color: var(--white); padding: clamp(3rem, 9vh, 6rem) 1.25rem; } .inspirados__inner { max-width: var(--container); margin: 0 auto; } .inspirados__title { font-weight: 300; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.25; letter-spacing: -0.02em; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); /* Correccion optica del aire superior. Con paddings iguales el bloque se leia corrido hacia abajo: por encima de la mayuscula el titulo arrastra su leading + el hueco hasta la ascendente (~0.37em), mientras que abajo el ultimo renglon solo deja ~5.5px de descendente sin usar. Se descuenta la diferencia. Va en em (no en px) porque el titulo escala con el viewport y su aire escala con el, mientras que el texto de la lista es de tamanio fijo: un valor fijo aca solo acertaria en un ancho de pantalla. */ margin-top: calc(5.5px - 0.37em); } .inspirados__list { display: grid; gap: 0.9rem; } .inspirados__col { display: grid; gap: 0.9rem; align-content: start; } .inspirados__item { font-size: 1.265rem; line-height: 1.44; opacity: 0.85; padding-left: 1.25rem; position: relative; } .inspirados__item::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; background: currentColor; opacity: 0.7; } @media (min-width: 768px) { .inspirados__list { grid-template-columns: 1fr 1fr; gap: 1rem var(--gap); } } /* Sin efecto: las tres secciones en flujo normal, apiladas y legibles. Cubre exactamente el complemento de la condición que activa el reveal en main.js — red de seguridad para que nunca quede un transform colgado. */ @media (prefers-reduced-motion: reduce), (max-width: 767px), (max-height: 719px) { .reveal { overflow: visible; } .reveal__flow { transform: none !important; will-change: auto; } } /* ===== Ma ===== */ .ma { background: var(--white); color: var(--dark); padding: clamp(4rem, 12vh, 8rem) 1.25rem; } .ma__inner { max-width: var(--container); margin: 0 auto; } /* Los dos bloques de texto, apilados. Antes este gap vivía en .ma__inner; se mudó acá para que .ma__inner pueda ser la grilla texto | video. */ .ma__text { display: grid; gap: clamp(3.5rem, 8vh, 5.5rem); } /* En mobile la columna de video no existe: no hay ancho sobrante y evita bajar un archivo pesado en datos móviles. */ .ma__media { display: none; } @media (min-width: 768px) { /* La columna de texto conserva su ancho cómodo de lectura y el video ocupa la franja que antes quedaba vacía a la derecha. */ .ma__inner { display: grid; grid-template-columns: minmax(0, 1fr) clamp(14rem, 24%, 20rem); gap: var(--gap); align-items: stretch; } /* La columna se estira del título de Ma hasta el final del último párrafo. Nada de position:sticky acá: .reveal tiene overflow:hidden y eso lo anula (el sticky se engancharía a .reveal, que no scrollea por dentro). Igual no hace falta — la sección entra entera en pantalla, así que el video ya se ve quieto junto al texto, y al ir en flujo normal acompaña sin pelearse el desplazamiento que le aplica el efecto de capas de arriba. */ .ma__media { display: block; position: relative; } .ma__media-inner { height: 100%; overflow: hidden; background: var(--dark); } .ma__video { width: 100%; height: 100%; object-fit: cover; display: block; } } .ma__copy { display: grid; gap: 0; } .ma__copy p { font-size: 1.15rem; line-height: 1.5; opacity: 0.85; } /* Bloque 1 — introducción */ .ma__block--intro { display: grid; gap: 1.75rem; max-width: 900px; } .ma__title { font-weight: 300; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.2; letter-spacing: -0.02em; } .ma__title strong { font-weight: 700; } /* Bloque 2 — nuestra interpretación */ .ma__block--interpretacion { max-width: 900px; } .ma__subtitle { font-weight: 500; font-size: clamp(1.4rem, 3vw, 2.375rem); letter-spacing: -0.02em; margin-bottom: 1.25rem; } /* ===== Experiencias ===== Sin min-height:100vh a proposito: forzar la seccion a llenar la pantalla dejaba un colchon de aire suelto abajo (o arriba, segun el alineado) cada vez que las fotos no llegaban a cubrir el viewport completo. Con solo el padding, el alto sale del contenido — igual que en el resto de las secciones — y el espacio hacia el bloque siguiente queda fijo y predecible. */ .experiencias { background: var(--dark); color: var(--white); padding: clamp(2rem, 6vh, 4rem) 1.25rem; } .experiencias__inner { max-width: var(--container); margin: 0 auto; width: 100%; } .experiencias__title { font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: clamp(1.25rem, 3vh, 2rem); letter-spacing: -0.02em; } .experiencias__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .experiencias__grid { grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2.5rem); } } /* La tarjeta entera es un al itinerario: en mobile el overlay "Ver más" no se ve (no hay hover), así que el área clickeable tiene que ser toda. */ .exp-card { display: block; } .exp-card__media { position: relative; overflow: hidden; background: #1c1c1c; aspect-ratio: 4 / 5; } /* En 2 columnas, altura fija relativa al viewport en vez de aspect-ratio: así 2 filas + títulos + heading entran en una pantalla sin importar el ancho del contenedor. */ @media (min-width: 768px) { .exp-card__media { aspect-ratio: auto; height: clamp(160px, 26vh, 320px); } } .exp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .exp-card__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20, 20, 18, 0); opacity: 0; transition: opacity 0.35s ease, background 0.35s ease; } .exp-card__cta { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--light); padding: 0.6rem 1.25rem; transform: translateY(8px); transition: transform 0.35s ease; } .exp-card:hover .exp-card__media img { transform: scale(1.06); } .exp-card:hover .exp-card__overlay { opacity: 1; background: rgba(20, 20, 18, 0.45); } .exp-card:hover .exp-card__cta { transform: translateY(0); } .exp-card__title { font-weight: 500; font-size: 1.26rem; margin-top: 1.1rem; letter-spacing: -0.02em; } .exp-card__desc { font-size: 1.15rem; opacity: 0.7; margin-top: 0.21rem; } @media (prefers-reduced-motion: reduce) { .exp-card__media img, .exp-card__overlay, .exp-card__cta { transition: none; } } /* ===== CTA final ===== */ .cta-final { background: var(--dark); color: var(--white); padding: clamp(5rem, 16vh, 9rem) 1.25rem; padding-top: clamp(2.5rem, 8vh, 4.5rem); } .cta-final__inner { max-width: 640px; margin: 0 auto; text-align: center; } .cta-final__title { font-weight: 300; font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2rem; } /* width:fit-content hace que el contenedor mida lo que el botón más ancho, y align-items:stretch estira al resto hasta ese mismo ancho: los dos cuadros quedan iguales sin fijar una medida a mano. */ .cta-final__actions { display: flex; flex-direction: column; align-items: stretch; width: fit-content; margin: 0 auto; gap: 1rem; } .cta-final__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--light); padding: 0.9rem 1.75rem; transition: background 0.2s ease, color 0.2s ease; } .cta-final__btn:hover { background: var(--light); color: var(--dark); } /* ===== Footer ===== */ .footer { background: var(--dark); color: var(--white); padding: clamp(3rem, 8vh, 4rem) 1.25rem 2rem; } /* Dos columnas (Legales y Contacto) centradas como bloque: las pistas se dimensionan por su contenido y justify-content las agrupa en el medio. */ .footer__inner { max-width: var(--container); margin: 0 auto; display: grid; justify-content: center; text-align: center; gap: 2.5rem; } .footer__heading { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.75rem; } /* align-content:start evita que las filas de la columna más corta se estiren para igualar la altura de la otra, que desalineaba los links entre sí. */ .footer__col { display: grid; align-content: start; gap: 0.5rem; font-size: 0.88rem; opacity: 0.85; } @media (min-width: 768px) { .footer__inner { grid-template-columns: repeat(2, auto); gap: 2.5rem 5rem; } }