/* ---------- tokens ---------- */
:root{
  --bg: #faf6f1;
  --ink: #2b2420;
  --ink-soft: #6b5f55;
  --accent: #b5502f;
  --accent-hover: #954025;
  --accent-tint: #f3e4dc;
  --line: #e7ddd2;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --pad-inline: clamp(20px, 6vw, 72px);
  --dur: 700ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
/* Sin scroll-behavior:smooth: Lenis (js/main.js) es quien maneja el scroll
   suave. Tenerlos los dos a la vez los hace pelear entre sí y el scroll
   real se rompe (por eso animation-timeline: scroll()/view() quedaba mal). */

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus{ left: var(--pad-inline); top: 12px; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 240ms var(--ease), background 240ms var(--ease), border-color 240ms var(--ease), color 240ms var(--ease);
  white-space: nowrap;
}
.btn--primary{
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover{ transform: translateY(-2px); background: var(--accent-hover); }

.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover{ border-color: var(--ink); transform: translateY(-2px); }

.btn--pill{
  background: var(--ink);
  color: var(--bg);
  font-size: 0.85rem;
  padding: 11px 22px;
}
.btn--pill:hover{ background: var(--accent); }

/* ---------- nav ----------
   Mobile: sticky normal, ocupa su lugar (la foto no es full-bleed ahí).
   Desde 860px: fixed y transparente, flota sobre la foto a pantalla completa
   y pasa a sólido apenas se scrollea más allá (ver .nav.is-solid). */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--pad-inline);
  background: transparent;
  transition: background 320ms var(--ease), padding 320ms var(--ease), box-shadow 320ms var(--ease);
}
@media (min-width: 860px){
  .nav{
    position: fixed;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 24px var(--pad-inline);
  }
}

.nav__brand{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.15;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 320ms var(--ease);
  justify-self: start;
}
.nav__brand-dot{ color: var(--accent); }

/* En mobile parte en dos líneas (Valentina / Parra Lobo); en desktop,
   una sola línea como antes. */
@media (min-width: 860px){
  .nav__brand-break{ display: none; }
}

.nav__links{
  display: none;
}
@media (min-width: 860px){
  .nav__links{
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 40px);
    justify-self: center;
  }
  .nav__links a{
    position: relative;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    padding-bottom: 3px;
  }
  .nav__links a::after{
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--accent);
    transition: right 240ms var(--ease);
  }
  .nav__links a:hover::after{ right: 0; }
}

.nav .contact-menu{ justify-self: end; }

.nav .btn--pill{
  background: var(--ink);
  color: var(--bg);
}
.nav .btn--pill:hover{ background: var(--accent); }

.nav.is-solid{
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  padding-top: 16px;
  padding-bottom: 16px;
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- cover: la foto + el texto en el espacio vacío junto a ella ---------- */
.cover{
  position: relative;
}

.cover__media{
  position: relative;
  overflow: hidden;
}
.cover__img{
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 30% 18%;
  display: block;
  /* Sin transform fijo: se ve a su tamaño real y nítida en reposo.
     El paralaje (GSAP) anima scale/y solo mientras se scrollea, arrancando
     siempre en 1 — así la primera impresión es la imagen a máxima nitidez. */
  will-change: transform;
}

.cover__text{
  padding: 28px var(--pad-inline) 8px;
}

.cover__title{
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.3rem, 7.2vw, 3rem);
  line-height: 1.07;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cover__title em{
  font-style: normal;
  color: var(--accent);
}
.reveal-line{ display: block; }

.cover__subhead{
  margin: 0 0 26px;
  max-width: 38ch;
  font-size: clamp(0.98rem, 1.3vw, 1.05rem);
  font-weight: 500;
  /* Más oscuro que --ink-soft y con un empuje de sombra clara: sobre la
     foto (no sobre el fondo del sitio) el gris tenue no se leía bien. */
  color: var(--ink);
}

.cover__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

/* Mobile: la foto (assets/valentina-hero-mobile, 1080x1920 — literalmente
   la proporción de una pantalla de celular) pasa a ocupar toda la pantalla,
   como en desktop. Título, bajada y botones van superpuestos en el espacio
   vacío que ya trae arriba a la izquierda; el degradé abajo es solo para
   que las últimas líneas de texto no compitan con tu cara. */
@media (max-width: 859px){
  .cover{ height: 100svh; overflow: hidden; }
  .cover__media{ position: absolute; inset: 0; }
  .cover__img{
    height: 100%;
    object-position: 82% 100%;
  }

  /* El texto se centra verticalmente dentro de la franja vacía de arriba
     (no de toda la pantalla: ahí abajo ya empieza tu cara) — así respira
     con aire arriba y abajo en vez de quedar pegado contra el nav. */
  .cover__text{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--pad-inline);
  }
  .cover__title{ font-size: clamp(2.3rem, 10vw, 2.85rem); margin-bottom: 22px; }
  .cover__subhead{ max-width: 30ch; margin-bottom: 32px; }
  .cover__actions{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.scroll-cue{
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 1.05rem;
  cursor: pointer;
  animation: bob 1.8s ease-in-out infinite;
}
.scroll-cue:hover{ border-color: var(--ink); color: var(--ink); }
@media (prefers-reduced-motion: reduce){
  .scroll-cue{ animation: none; }
}
@keyframes bob{
  0%, 100%{ transform: translate(-50%, 0); }
  50%{ transform: translate(-50%, 6px); }
}

.cover__social{
  display: none;
}
@media (min-width: 860px){
  .cover__social{
    position: absolute;
    right: var(--pad-inline);
    bottom: 32px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .cover__social a{
    display: inline-flex;
    color: #fff;
    opacity: 0.85;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  }
  .cover__social a:hover{ opacity: 1; transform: translateY(-2px); }
  .cover__social svg{
    width: 19px;
    height: 19px;
    fill: currentColor;
  }
}

/* Desde tablet/desktop: la foto pasa a pantalla completa y el texto se
   posiciona sobre la franja vacía a su izquierda (medida sobre la foto:
   vos ocupás del 32% al 72% del ancho). */
@media (min-width: 860px){
  /* El overflow:hidden va en .cover__media (recién ahí hace falta, para
     el paralaje de la foto) y no en .cover: si lo dejamos en la sección
     entera, corta el panel del "Charlemos" del hero apenas se abre. */
  .cover{ height: 100svh; }
  .cover__media{ position: absolute; inset: 0; overflow: hidden; }
  .cover__img{ height: 100%; }

  .cover__text{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-52%);
    width: min(38%, 560px);
    padding: 0 0 0 var(--pad-inline);
    z-index: 2;
  }
  .cover__title{ font-size: clamp(2.6rem, 4vw, 3.6rem); }
  .scroll-cue{ bottom: 32px; }
}

/* ---------- contact-menu: el botón "Charlemos" abre opciones reales
   en vez de mandar directo a un solo lado (nav, hero y footer usan el
   mismo componente) ---------- */
.contact-menu{
  position: relative;
  display: inline-block;
}
.contact-menu__trigger{
  cursor: pointer;
}
.contact-menu__chevron{
  display: inline-block;
  font-size: 0.7em;
  margin-left: 2px;
  transition: transform 200ms var(--ease);
}
.contact-menu.is-open .contact-menu__chevron{ transform: rotate(180deg); }

.contact-menu__panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: max(260px, 100%);
  min-width: 280px;
  padding: 14px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 50px -20px rgba(20, 15, 10, 0.35);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.contact-menu.is-open .contact-menu__panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.contact-menu--up .contact-menu__panel{
  top: auto;
  bottom: calc(100% + 10px);
}
.contact-menu--up.is-open .contact-menu__panel{ transform: translateY(0); }
.contact-menu--up .contact-menu__panel{ transform: translateY(6px); }

/* El del hero cuelga de un botón pegado a la izquierda: si el panel abre
   hacia la derecha del botón (por default) en vez de hacia la izquierda,
   se sale de la pantalla por el otro lado. */
.contact-menu--left .contact-menu__panel{ right: auto; left: 0; }

.contact-menu__item{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 160ms var(--ease);
}
.contact-menu__item:hover{ background: var(--accent-tint); }
.contact-menu__value{
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.contact-menu__divider{
  margin: 8px 4px;
  border-top: 1px solid var(--line);
}
.contact-menu__note{
  margin: 4px 10px 6px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.link-arrow{
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 240ms var(--ease);
}
.link-arrow:hover{ border-color: var(--ink); }
.link-arrow span{ display: inline-block; transition: transform 240ms var(--ease); }
.link-arrow:hover span{ transform: translateX(3px); }

/* ---------- story: "Quién soy", storytelling puro (no vende) ---------- */
.story{
  max-width: 640px;
  margin: 0 auto;
  padding: 96px var(--pad-inline) 40px;
}
@media (min-width: 860px){
  .story{ padding-top: 140px; }
}

.story__heading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  margin: 0 0 44px;
  text-align: center;
}
.story__bio{
  max-width: 42ch;
  margin: -24px auto 44px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: center;
}

.story__beat{
  margin: 0 0 56px;
}
.story__beat p{
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink);
}
.story__beat:first-of-type p::first-letter{
  font-family: var(--font-display);
  font-size: 2.6em;
  font-weight: 600;
  float: left;
  line-height: 0.85;
  padding: 0.03em 0.08em 0 0;
  color: var(--accent);
}

.story__photo{
  margin: 0 0 56px;
  overflow: hidden;
  border-radius: 16px;
}
.story__photo img{
  width: 100%;
  height: auto;
  filter: grayscale(1);
  transform-origin: center;
}

/* ---------- talks: continuación editorial del relato ---------- */
.talks{
  padding: 92px var(--pad-inline) 0;
}
.talks__intro{
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 64px;
  text-align: center;
}
.talks__intro h2{
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.talks__intro p{
  max-width: 48ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}
.talks__list{
  max-width: 980px;
  margin: 0 auto;
}
.talk-entry{
  display: grid;
  gap: 28px;
  padding: 0 0 72px;
  margin: 0 0 72px;
  border-bottom: 1px solid var(--line);
}
.talk-entry__image{
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--accent-tint);
}
.talk-entry:nth-child(2) .talk-entry__image,
.talk-entry:nth-child(4) .talk-entry__image{ aspect-ratio: 3 / 4; }
.talk-entry__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.02);
  transition: transform 700ms var(--ease), filter 400ms var(--ease);
}
.talk-entry:hover .talk-entry__image img{
  transform: scale(1.035);
  filter: saturate(1) contrast(1.03);
}
.talk-entry__body{ align-self: center; }
.talk-entry time{
  display: block;
  margin: 0 0 13px;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.talk-entry h3{
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
}
.talk-entry__body p{
  max-width: 42ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.talks__outro{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 128px;
  text-align: center;
}
.talks__outro p{
  max-width: 23ch;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 6vw, 3.8rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.035em;
}
.talks__outro > span{
  margin: 0 0 30px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}

@media (min-width: 860px){
  .talks{ padding-top: 140px; }
  .talks__intro{
    padding-bottom: 104px;
  }
  .talk-entry{
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
    gap: clamp(48px, 8vw, 112px);
    align-items: center;
    padding-bottom: 112px;
    margin-bottom: 112px;
  }
  .talk-entry--reverse{ grid-template-columns: minmax(250px, .85fr) minmax(0, 1.15fr); }
  .talk-entry--reverse .talk-entry__image{ order: 2; }
  .talk-entry:nth-child(2) .talk-entry__image,
  .talk-entry:nth-child(4) .talk-entry__image{
    width: min(100%, 390px);
  }
  .talk-entry--reverse .talk-entry__image{ justify-self: end; }
  .talk-entry h3{ font-size: clamp(2.35rem, 3.8vw, 3.6rem); }
  .talks__outro{
    max-width: 820px;
    padding-bottom: 150px;
  }
}

/* ---------- thinking: ideas en secuencia, sin convertirlas en "pilares" ---------- */
.thinking{
  padding: 18px var(--pad-inline) 0;
}
.thinking__intro{
  max-width: 640px;
  margin: 0 auto;
  padding: 84px 0 58px;
  text-align: center;
}
.thinking__intro h2{
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.thinking__intro p{
  max-width: 46ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}
.thinking__list{
  max-width: 980px;
  margin: 0 auto;
}
.thought{
  display: grid;
  gap: 26px;
  padding: 58px 0;
  border-top: 1px solid var(--line);
}
.thought:last-child{ border-bottom: 1px solid var(--line); }
.thought__idea{
  position: relative;
  isolation: isolate;
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 7vw, 4.7rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.04em;
}
.thought__quote{
  position: absolute;
  z-index: -1;
  left: -.18em;
  top: -.43em;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 2.45em;
  font-weight: 400;
  line-height: 1;
  opacity: .2;
}
.thought__quote--close{
  left: auto;
  right: -.14em;
  top: auto;
  bottom: -.54em;
}
.thought p{
  max-width: 43ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.68;
}
@media (min-width: 860px){
  .thinking{ padding-top: 52px; }
  .thinking__intro{ padding-top: 112px; padding-bottom: 92px; }
  .thought{
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    gap: clamp(48px, 10vw, 150px);
    align-items: center;
    min-height: 50svh;
    padding: 76px 0;
  }
  .thought--reverse{ grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); }
  .thought--reverse .thought__idea{ order: 2; justify-self: end; }
  .thought--reverse p{ order: 1; }
}

/* ---------- punto de partida: elegir dónde llevar la conversación ---------- */
.starting{
  display: grid;
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 132px var(--pad-inline);
}
.starting__intro{ max-width: 650px; }
.starting h2{
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.35rem, 5.5vw, 4.6rem);
  line-height: .96;
  letter-spacing: -.04em;
}
.starting__intro p{
  max-width: 42ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.68;
}
.starting__routes{
  display: grid;
  gap: 0;
  max-width: 820px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.starting__routes li{
  position: relative;
  display: grid;
  gap: 12px;
  padding: 27px 0 29px;
  border-top: 1px solid var(--line);
}
.starting__routes li:last-child{ border-bottom: 1px solid var(--line); }
.starting__routes li::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--accent);
}
.starting__routes span{
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
}
.starting__routes p{
  max-width: 43ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}
/* Bloque aparte, centrado y apilado (título, bajada, casilla, botón) —
   no metido en la columna angosta de .starting, para que respire y
   aproveche todo el ancho de la sección. */
.newsletter{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 56px auto 0;
  padding: 48px 0 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.newsletter__copy{ display: contents; }
.newsletter h3{
  max-width: 22ch;
  margin: 0 0 13px;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.newsletter p{
  max-width: 40ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}
.newsletter .newsletter__soon{
  margin-top: 18px;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Formulario propio (no el iframe genérico de Substack): el submit
   postea directo a la API de suscripción de Substack contra un iframe
   oculto, así el look es 100% del sitio y no hay redirect. */
.newsletter__form{
  width: 100%;
  max-width: 340px;
  margin-top: 26px;
}
.newsletter__subscribe{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newsletter__input{
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: center;
}
.newsletter__input::placeholder{ color: var(--ink-soft); }
.newsletter__input:focus{
  outline: none;
  border-color: var(--accent);
}
.newsletter__subscribe .btn{ width: 100%; }
.newsletter__note{
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}
.newsletter__success{
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}
.newsletter__frame{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- escala: un solo momento de scroll, de lo individual a lo colectivo ---------- */
.shift{
  position: relative;
  overflow: clip;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.shift__stage{
  display: grid;
  min-height: 100svh;
}
.shift__portrait{
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
}
.shift__portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  filter: grayscale(1) contrast(1.04);
}
.shift__brand-layer{ display: none; }
.shift__steps{
  display: grid;
  align-content: center;
  gap: 72px;
  padding: 88px var(--pad-inline) 112px;
}
.shift__step{ max-width: 650px; }
.shift__step h2{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.04em;
}
.shift__mark{
  margin: 0 0 -28px -.08em;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(7rem, 12vw, 12rem);
  line-height: 1;
  opacity: .24;
}
.shift__step--final p{
  max-width: 38ch;
  margin: 28px 0 32px;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}
@media (min-width: 860px){
  .starting{
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    align-items: center;
    gap: clamp(72px, 12vw, 172px);
    padding-top: 180px;
    padding-bottom: 180px;
  }
  .starting__routes{ margin: 0; }
  .starting__routes li{ padding: 32px 0 34px; }
  .shift__stage{
    display: block;
    position: relative;
    min-height: 100svh;
    background: #4b4643;
  }
  .shift__stage::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(16, 13, 11, 0) 30%, rgba(16, 13, 11, .15) 58%, rgba(16, 13, 11, .42) 100%);
  }
  .shift__portrait{
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    min-height: 100%;
    z-index: 0;
  }
  .shift__portrait img{
    object-fit: cover;
    object-position: center;
  }
  .shift__brand-layer{
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .shift__brand-layer img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .shift__steps{
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    color: #fff;
  }
  .shift__step h2{
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,.28);
    font-size: clamp(2rem, 3.4vw, 3.45rem);
  }
  .shift.has-scroll-sequence .shift__step--first{ position: relative; }
  .shift.has-scroll-sequence .shift__step--first .shift__mark{
    position: absolute;
    left: -.36em;
    top: -.58em;
    margin: 0;
    color: var(--accent);
    font-size: clamp(6.5rem, 9vw, 10rem);
    opacity: .68;
  }
  .shift__step--final p{ color: rgba(255,255,255,.84); }
  .shift__step--final .btn{
    background: var(--accent);
    color: #fff;
  }
  .shift__step--final .btn:hover{ background: var(--accent-hover); }
  .shift.has-scroll-sequence .shift__steps{
    position: relative;
    display: grid;
    min-height: 100svh;
  }
  .shift.has-scroll-sequence .shift__step{
    grid-area: 1 / 1;
    align-self: center;
    max-width: min(30vw, 500px);
    opacity: 0;
    pointer-events: none;
  }
  .shift.has-scroll-sequence .shift__step--left{
    justify-self: start;
    margin-left: clamp(36px, 7vw, 130px);
  }
  .shift.has-scroll-sequence .shift__step--right{
    justify-self: end;
    margin-right: clamp(36px, 7vw, 130px);
  }
  .shift.has-scroll-sequence .shift__step--first{ opacity: 1; }
  .shift.has-scroll-sequence .shift__step--final .btn{ pointer-events: auto; }
  .shift.has-scroll-sequence .shift__step--final{ pointer-events: auto; }
  .shift.has-scroll-sequence{ min-height: 400svh; }
  .shift.has-scroll-sequence .shift__stage{ position: sticky; top: 0; }
  .shift.has-scroll-sequence .shift__portrait img{ will-change: transform; }
  .shift.has-scroll-sequence .shift__brand-layer{ will-change: transform, opacity; }
  .shift.has-scroll-sequence .shift__step{ will-change: transform, opacity, filter; }
}
@media (max-width: 859px){
  .shift.has-scroll-sequence{
    min-height: 400svh;
    background: #4b4643;
  }
  .shift.has-scroll-sequence .shift__stage{
    position: sticky;
    top: 0;
    display: block;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }
  .shift.has-scroll-sequence .shift__portrait,
  .shift.has-scroll-sequence .shift__brand-layer{
    position: absolute;
    inset: 0;
    display: block;
    aspect-ratio: auto;
    min-height: 100%;
    overflow: hidden;
  }
  .shift.has-scroll-sequence .shift__portrait{ z-index: 0; }
  .shift.has-scroll-sequence .shift__brand-layer{
    z-index: 1;
    opacity: 0;
    pointer-events: none;
  }
  .shift.has-scroll-sequence .shift__portrait img,
  .shift.has-scroll-sequence .shift__brand-layer img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% center;
  }
  .shift.has-scroll-sequence .shift__stage::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* Oscuro solo abajo, donde vive el texto: la cara queda despejada
       casi todo el frame en vez de competir con las letras encima. */
    background: linear-gradient(
      180deg,
      rgba(16, 13, 11, 0) 0%,
      rgba(16, 13, 11, .05) 42%,
      rgba(16, 13, 11, .55) 70%,
      rgba(16, 13, 11, .9) 100%
    );
  }
  .shift.has-scroll-sequence .shift__steps{
    position: relative;
    z-index: 3;
    display: grid;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    color: #fff;
  }
  .shift.has-scroll-sequence .shift__step{
    grid-area: 1 / 1;
    align-self: end;
    width: min(72vw, 22rem);
    margin: 0;
    padding: 0 0 clamp(40px, 8vh, 76px);
    border: 0;
    opacity: 0;
    pointer-events: none;
  }
  .shift.has-scroll-sequence .shift__step--left{
    justify-self: start;
    margin-left: max(24px, 7vw);
  }
  .shift.has-scroll-sequence .shift__step--right{
    justify-self: start;
    margin-left: max(24px, 7vw);
    margin-right: 0;
  }
  .shift.has-scroll-sequence .shift__step--first{ opacity: 1; }
  .shift.has-scroll-sequence .shift__step h2{
    color: #fff;
    font-size: clamp(2.1rem, 9vw, 3.25rem);
    text-shadow: 0 2px 20px rgba(0,0,0,.28);
  }
  .shift.has-scroll-sequence .shift__step--first .shift__mark{
    margin: 0 0 -18px -.08em;
    color: var(--accent);
    opacity: .78;
  }
  .shift.has-scroll-sequence .shift__step--final p{
    margin: 18px 0 24px;
    color: rgba(255,255,255,.86);
  }
  .shift.has-scroll-sequence .shift__step--final .btn{
    background: var(--accent);
    color: #fff;
    pointer-events: auto;
  }
  .shift.has-scroll-sequence .shift__step--final{ pointer-events: auto; }
  .shift.has-scroll-sequence .shift__portrait img,
  .shift.has-scroll-sequence .shift__brand-layer,
  .shift.has-scroll-sequence .shift__step{ will-change: transform, opacity, filter; }
  .shift:not(.has-scroll-sequence) .shift__steps{
    gap: 0;
    padding-top: 58px;
    padding-bottom: 72px;
  }
  .shift:not(.has-scroll-sequence) .shift__step{
    padding: 0 0 52px;
    margin: 0 0 52px;
    border-bottom: 1px solid var(--line);
  }
  .shift:not(.has-scroll-sequence) .shift__step:last-child{
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
  .shift:not(.has-scroll-sequence) .shift__mark{ margin-bottom: -14px; }
}

/* ---------- footer: cierra en oscuro, hace de bookend con el hero ---------- */
.site-footer{
  background: var(--ink);
  color: var(--bg);
  padding: 96px var(--pad-inline) 28px;
}

.site-footer__top{
  max-width: 780px;
  margin: 0 auto 80px;
  text-align: center;
}
.site-footer__eyebrow{
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-footer__cta{
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--bg);
}

.site-footer__grid{
  display: grid;
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 0 32px;
  border-top: 1px solid rgba(250, 246, 241, 0.14);
}
.site-footer__name{
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
}
.site-footer__role{
  margin: 0;
  color: rgba(250, 246, 241, 0.6);
  font-size: 0.92rem;
}

.site-footer__links{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__links a{
  color: rgba(250, 246, 241, 0.78);
  text-decoration: none;
  font-size: 0.95rem;
  width: fit-content;
  transition: color 200ms var(--ease);
}
.site-footer__links a:hover{ color: var(--bg); }

.site-footer__social{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.site-footer__social a{
  display: inline-flex;
  color: rgba(250, 246, 241, 0.78);
  transition: color 200ms var(--ease), transform 200ms var(--ease);
}
.site-footer__social a:hover{ color: var(--bg); transform: translateY(-2px); }
.site-footer__social svg{
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.site-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(250, 246, 241, 0.14);
  color: rgba(250, 246, 241, 0.5);
  font-size: 0.82rem;
}
.site-footer__bottom p{ margin: 0; }
.site-footer__bottom a{
  color: rgba(250, 246, 241, 0.7);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.site-footer__bottom a:hover{ color: var(--accent); }

@media (min-width: 860px){
  .site-footer{ padding: 130px var(--pad-inline) 24px; }
  .site-footer__grid{
    grid-template-columns: 1.2fr auto auto;
    align-items: start;
    gap: 64px;
  }
  .site-footer__social{ justify-self: end; }
}

/* ---------- scroll reveal ----------
   Método principal: CSS scroll-driven animations (animation-timeline: view()),
   sin JS, en los navegadores que lo soportan.
   Fallback: IntersectionObserver (js/main.js agrega .js-reveal al <html>
   solo si el navegador no soporta animation-timeline). */
@keyframes reveal-in{
  from{ opacity: 0; transform: translateY(40px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes image-unveil{
  from{ clip-path: inset(0 0 100% 0); transform: scale(1.04); }
  to{ clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes thought-focus{
  from{ opacity: .24; transform: translateY(20px); filter: blur(2px); }
  to{ opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes story-settle{
  from{ transform: scale(1.055); }
  to{ transform: scale(1); }
}
@keyframes chain-arrive{
  from{ opacity: .18; transform: translateX(-12px); filter: blur(2px); }
  to{ opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes route-focus{
  from{ opacity: .38; transform: translateX(-14px); filter: blur(2px); }
  to{ opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes route-line{
  from{ width: 0; }
  to{ width: 100%; }
}

/* El modo fijo del "shift" (desktop) mueve .shift__portrait y cada
   .shift__step directamente con GSAP (opacity/transform por scroll
   scrubbed). Si el reveal genérico de acá abajo también les tocara esas
   mismas propiedades, se pelean entre sí. Se neutraliza solo en ese modo;
   en mobile (sin has-scroll-sequence) el reveal genérico sigue de pie. */
.shift.has-scroll-sequence [data-reveal]{
  animation: none !important;
  transition: none !important;
}

@supports (animation-timeline: view()){
  [data-reveal]{
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
  [data-image-reveal]{
    animation: image-unveil linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }
  [data-thought]{
    animation: thought-focus linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 50%;
  }
  [data-chain]{
    animation: chain-arrive linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 52%;
  }
  [data-route]{
    animation: route-focus linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 48%;
  }
  [data-route]::after{
    animation: route-line linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 48%;
  }
  [data-story-image] img{
    animation: story-settle linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 55%;
  }
}

/* El texto sobre la foto de portada es un caso especial: tiene que verse
   al cargar la página, no recién cuando el visitante decide scrollear
   (esperar al scroll lo hacía sentir "tarde"). Así que en vez de atarlo a
   un timeline de scroll, es una animación normal por tiempo, escalonada,
   que arranca sola apenas carga. */
.cover [data-reveal]{
  animation: reveal-in 700ms var(--ease) both;
  animation-timeline: auto;
}
.cover__title .reveal-line:nth-child(1){ animation-delay: 120ms; }
.cover__title .reveal-line:nth-child(2){ animation-delay: 260ms; }
.cover__subhead[data-reveal]{ animation-delay: 400ms; }
.cover__actions[data-reveal]{ animation-delay: 540ms; }

/* La foto del cover se despliega igual que las demás fotos del sitio
   (mismo wipe que .story__photo, etc.), pero por tiempo al cargar en vez
   de por scroll — es lo primero que ves, no algo que hay que descubrir
   scrolleando. El zoom de asentamiento lo hace GSAP en main.js. */
@keyframes cover-image-unveil{
  from{ clip-path: inset(0 0 100% 0); }
  to{ clip-path: inset(0 0 0% 0); }
}
.cover [data-image-reveal]{
  animation: cover-image-unveil 1100ms var(--ease) both;
  animation-timeline: auto;
}

html.js-reveal [data-reveal]{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
html.js-reveal [data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-image-reveal]{
    animation: none !important;
    clip-path: none;
    transform: none;
  }
  [data-thought]{
    animation: none !important;
    filter: none;
    transform: none;
  }
  [data-chain]{
    animation: none !important;
    filter: none;
    transform: none;
  }
  [data-route]{
    animation: none !important;
    filter: none;
    transform: none;
  }
  [data-route]::after{ animation: none !important; width: 0; }
  [data-story-image] img{ animation: none !important; transform: none; }
}