/* ─── SERVICES ───────────────────────────────────────────── */

.services-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  grid-column: 1 / -1;
  padding: 32px 48px 0;
}
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--b0);
  scroll-margin-top: 80px;
}
.svc {
  padding: 64px 48px;
  border-right: 1px solid var(--b0);
}
.svc:last-child { border-right: none; }
.svc-num {
  display: block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.svc-name {
  font-family: var(--f-mono);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--fg);
  margin-bottom: 20px;
}
.svc-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.85;
  text-wrap: pretty;
  margin-bottom: 24px;
}
.svc-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-items li {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 16px;
  position: relative;
}
.svc-items li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* ─── CONTACT ────────────────────────────────────────────── */
.contact {
  padding: 88px 56px;
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  align-items: center;
  gap: 60px;
  border-bottom: 1px solid var(--b0);
}
.contact-kicker {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.contact-heading {
  font-family: var(--f-disp);
  font-style: italic;
  font-size: clamp(52px, 6.5vw, 108px);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--fg);
}
.contact-hook {
  font-family: var(--f-disp);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 38px);
  color: var(--fg);
  line-height: 1.15;
  margin-bottom: 12px;
}
.contact-lead {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 44ch;
  text-wrap: pretty;
  margin-bottom: 36px;
}
.contact-email {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--fg);
  border-bottom: 1px solid var(--b2);
  padding-bottom: 3px;
  margin-bottom: 28px;
  transition: color .2s, border-color .2s;
}
.contact-email:hover { color: var(--accent); border-color: var(--accent); }
.btn {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 14px 30px;
  border: 1.5px solid var(--b2);
  color: var(--fg);
  background: none;
  transition: background .2s, color .2s;
  cursor: pointer;
  /* reset para <button> — evita appearance del SO */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  line-height: normal;
}
.btn:hover { background: var(--fg); color: var(--bg); }

/* ─── ABOUT HERO ─────────────────────────────────────────── */
.about-hero {
  position: relative;
  padding: 160px 56px 100px;
  border-bottom: 1px solid var(--b0);
  display: flex;
  align-items: center;
  min-height: 100vh;
  /* Recorta el sobrante izquierdo del video (caja con ratio fijo mas ancha que
     el hueco en viewports estrechos) y el overscan del zoom del efecto
     'expand'; la mascara ya funde esos bordes, asi que el recorte es invisible
     y evita scroll horizontal. */
  overflow: hidden;
}
.about-hero-text {
  position: relative;
  z-index: 1;
  flex: 0 1 55%;
}
.about-hero-visual {
  position: absolute;
  top: 0;
  right: 0;
  /* Caja con el MISMO ratio que el video (1920x1088 = 1.765): asi "cover"
     muestra el frame ENTERO, sin franjas de letterbox ni recorte, y como el
     ratio de la caja es constante, la mascara funde sus bordes igual en cada
     viewport (sin costura).
     Llena SIEMPRE el alto del hero (height:100%) y el ancho sale por
     aspect-ratio -> nunca se encoge a una tira en viewports altos. En anchos
     normales la caja cabe holgada (panel derecho); en viewports muy ESTRECHOS/
     altos seria mas ancha que la pantalla, asi que max-width:100% la acota al
     ancho del viewport (limite horizontal): ahi degrada a full-bleed acotado
     (rompe el ratio y 'cover' recorta), pero sin desbordar ni scroll. Decision
     de diseno: se prioriza ver el frame entero en desktop normal frente al caso
     de ventana muy estrecha. No se usa transform para posicionar: el efecto
     'expand' ocupa el transform con scale. */
  height: 100%;
  width: auto;
  aspect-ratio: 1920 / 1088;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 72% 50% at 60% 50%, #000 34%, transparent 96%);
  mask-image: radial-gradient(ellipse 72% 50% at 60% 50%, #000 34%, transparent 96%);
}
.about-hero-visual video {
  display: block;
  width: 100%;
  height: 100%;
  /* La caja ya tiene el ratio del video, asi que "cover" lo llena exactamente
     (sin recorte perceptible ni letterbox). Sin object-position ni translate:
     cualquier desplazamiento dejaria un hueco transparente en el borde opuesto. */
  object-fit: cover;
}
.about-kicker {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.about-title {
  font-family: var(--f-disp);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 6.5vw, 96px);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--fg);
  margin-bottom: 48px;
}
.about-label {
  display: inline-block;
  font-family: var(--f-disp);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: rgba(237,233,220,.72);
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--b2);
}
.about-intro {
  font-size: 16px;
  color: rgba(237,233,220,.68);
  line-height: 1.8;
  text-wrap: pretty;
  max-width: 52ch;
  padding-top: 24px;
}
.about-intro strong {
  color: var(--fg);
  font-weight: 400;
}

/* ─── ABOUT TIMELINE ──────────────────────────────────────── */
.about-timeline {
  padding: 88px 0;
  border-bottom: 1px solid var(--b0);
}

/* Aviso "en construcción" mientras el timeline está oculto */
.timeline-wip {
  text-align: center;
  padding: 0 24px;
}
.timeline-wip-kicker {
  display: block;
  margin-bottom: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.timeline-wip p {
  font-family: var(--f-disp);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--fg);
}

/* Apertura y cierre: frases centradas fuera de la línea */
.timeline-opening,
.timeline-closing {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  font-family: var(--f-disp);
  font-style: italic;
  color: var(--fg);
}

.timeline-opening {
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.25;
  letter-spacing: -.015em;
}

.timeline-closing {
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.35;
  letter-spacing: -.01em;
}

/* Track: línea central + hitos en zigzag, uno por fila */
.timeline-track {
  position: relative;
  margin: 72px 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--b0);
  transform: translateX(-0.5px);
}

.timeline-item {
  position: relative;
  width: 50%;
  font-size: 15px;
  color: rgba(237,233,220,.65);
  line-height: 1.8;
  text-wrap: pretty;
}

.timeline-item--left {
  margin-right: auto;
  padding-left: 56px;
  padding-right: 52px;
}

.timeline-item--right {
  margin-left: auto;
  padding-left: 52px;
  padding-right: 56px;
}

/* Punto: hijo del hito, alineado con la línea central y la primera línea de texto */
.timeline-dot {
  position: absolute;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--b0);
  transition: background-color .4s ease, box-shadow .4s ease;
  z-index: 1;
}

.timeline-item--left .timeline-dot {
  right: 0;
  transform: translateX(50%);
}

.timeline-item--right .timeline-dot {
  left: 0;
  transform: translateX(-50%);
}

.timeline-dot--active {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* Contenedor generico de video de fondo de un chapter del timeline — el
   motor scroll-chapters.js inyecta el <video> dentro en desktop/mobile;
   en reduced-motion se queda pausado en su poster. */
.chapter-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: .22;
  pointer-events: none;
}
.chapter-visual--radial {
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at center, #000 45%, transparent 92%);
  mask-image: radial-gradient(ellipse 70% 75% at center, #000 45%, transparent 92%);
}
.chapter-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop con animacion: el video de fondo del chapter pasa a pantalla
   completa mientras el chapter esta pineado. No se puede usar position:fixed
   porque GSAP aplica un transform al elemento pineado (crea un bloque
   contenedor que atraparia el fixed en la caja del item); en su lugar se
   posiciona absoluto con unidades de viewport (100vw x 120vh, con overscan
   vertical para tolerar el offset del pin) anclado al borde del item segun
   el lado del zigzag, de modo que cubra el viewport dentro del contexto
   transformado. La opacidad la controla el efecto 'expand' (0 fuera del
   chapter, sube durante su reproduccion): arranca en 0 aqui para que solo el
   chapter activo muestre su video. Fuera de este contexto (mobile o
   reduced-motion, sin pin ni efecto) se mantiene la regla base de arriba:
   video in-flow como fondo de su bloque de texto. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .scroll-chapters-fx .chapter-visual {
    inset: auto;
    top: -10vh;
    width: 100vw;
    height: 120vh;
    opacity: 0;
  }
  .scroll-chapters-fx .timeline-item--left .chapter-visual { left: 0; }
  .scroll-chapters-fx .timeline-item--right .chapter-visual { right: 0; }
  .scroll-chapters-fx .timeline-opening .chapter-visual,
  .scroll-chapters-fx .timeline-closing .chapter-visual { left: 50%; margin-left: -50vw; }

  /* Durante el pin el bloque queda anclado al top del viewport (bajo el nav).
     Se empuja el texto hacia el centro de la pantalla ("a mitad de pantalla")
     con un offset relativo, que desplaza solo visualmente sin alterar el flujo
     (asi el zigzag compacto se conserva y el texto, invisible fuera del pin
     via el efecto depth, no arrastra el layout). La sombra da legibilidad
     sobre el video de fondo a pantalla completa. */
  .scroll-chapters-fx .timeline-opening p,
  .scroll-chapters-fx .timeline-closing p,
  .scroll-chapters-fx .timeline-item p {
    top: 50vh;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .78);
  }

  /* Punto de la linea en la ruta fx: anclado al centro del viewport (top:50vh,
     misma altura que el texto), coloreado con el acento y con glow proporcional
     a --lit (0..1, que fija el efecto 'dot-travel'). El efecto controla el
     transform (viaje vertical) y la opacidad; aqui van el estado base 'before'
     (abajo, invisible) y el look. transition:none evita que el box-shadow
     laguee al recalcularse cada frame durante el scrub. */
  .scroll-chapters-fx .timeline-item .timeline-dot {
    top: 50vh;
    opacity: 0;
    background: var(--accent);
    box-shadow: 0 0 calc(16px * var(--lit, 0)) var(--accent);
    transform: translateY(40vh) scale(.6);
    transition: none;
  }
  .scroll-chapters-fx .timeline-item--left .timeline-dot { right: -4.5px; left: auto; }
  .scroll-chapters-fx .timeline-item--right .timeline-dot { left: -4.5px; right: auto; }
}

/* El texto de cada bloque del timeline queda encima de su .chapter-visual */
.timeline-opening,
.timeline-closing {
  position: relative;
  z-index: 1;
}
.timeline-item {
  z-index: 1;
}
.timeline-opening p,
.timeline-closing p,
.timeline-item p {
  position: relative;
  z-index: 1;
}

/* Reveal simple para el camino mobile del motor (sin pin/scrub/profundidad) */
.chapter-reveal-mobile {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.chapter-reveal-mobile.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .about-timeline {
    padding: 64px 0;
  }

  .timeline-opening {
    font-size: clamp(20px, 5.5vw, 28px);
  }

  .timeline-closing {
    font-size: clamp(16px, 4.5vw, 24px);
  }

  .timeline-track {
    margin: 48px 0;
    gap: 40px;
  }

  .timeline-line {
    left: 32px;
    transform: none;
  }

  .timeline-item,
  .timeline-item--left,
  .timeline-item--right {
    width: 100%;
    margin: 0;
    padding-left: 56px;
    padding-right: 24px;
  }

  .timeline-item--left .timeline-dot,
  .timeline-item--right .timeline-dot {
    left: 32px;
    right: auto;
    transform: translateX(-50%);
  }
}

/* ─── CAPS BAR ───────────────────────────────────────────── */
.caps-bar {
  padding: 56px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--b0);
}
.caps-label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 8px;
}
.cap-pill {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--b1);
  color: var(--muted);
  padding: 5px 12px;
}

/* ─── CREDITS ────────────────────────────────────────────── */
.credits {
  padding: 88px 56px;
  border-bottom: 1px solid var(--b0);
}
.credits-kicker {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 48px;
}
.credits-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.credits-track {
  display: flex;
  width: max-content;
  animation: credits-scroll 36s linear infinite;
}
.credits-marquee:hover .credits-track {
  animation-play-state: paused;
}
.credits-group {
  display: flex;
  align-items: center;
  gap: clamp(48px, 8vw, 112px);
  padding-right: clamp(48px, 8vw, 112px);
}
.credits-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .3s ease, opacity .3s ease;
}
.credits-logo:hover,
.credits-logo:focus-visible {
  filter: grayscale(0);
  opacity: 1;
}
.credits-logo img {
  height: 40px;
  width: auto;
  display: block;
}
.credits-logo-name {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
@keyframes credits-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 6)); }
}
@media (prefers-reduced-motion: reduce) {
  .credits-track { animation: none; }
  .credits-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .credits-group[aria-hidden="true"] { display: none; }
}
@media (max-width: 768px) {
  .credits {
    padding: 64px 24px;
  }
  .credits-logo img { height: 32px; }
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer {
  padding: 32px 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.footer-wm {
  font-family: var(--f-disp);
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  display: flex;
  align-items: center;
}
.footer-wm svg { display: block; }
.footer-right {
  display: flex;
  align-items: center;
  gap: 36px;
}
.footer-right a,
.footer-copy {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}
.footer-right a:hover { color: var(--fg); }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav { padding: 18px 24px; }
  .nav > nav { display: none; }
  .nav-user { border: none; border-radius: 0; }
  .nav-actions { margin-left: auto; }
  .nav-hamburger { display: flex; margin-left: 8px; }
  .nav-store { border: none; padding: 4px; }
  .nav-store-label { display: none; }

  .hero-foot { padding: 0 16px 32px; gap: 12px; }
  .hero-kicker-top { top: 82px; }
  /* H1 en stack vertical centrado abajo — igual que desktop pero adaptado.
     Cada .hero-word es un mover GSAP independiente (x/y). */
  .hero-layer--text {
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px 10vh;
  }
  .hero-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: clamp(32px, 8.5vw, 48px);
    line-height: .95;
  }
  .hero-word { display: block; writing-mode: initial; }
  /* Caps: una sola fila horizontal, pills compactas */
  .hero-caps { flex-wrap: nowrap; gap: 5px; }
  .hero-caps .cap { white-space: nowrap; font-size: 8px; letter-spacing: .1em; padding: 4px 7px; }

  .splash-overlay {
    padding: 32px 24px;
    gap: 32px;
  }
  .splash-overlay .stmt-attr__name {
    font-size: 13px;
  }

  .work { padding: 102px 24px; }
  .reel-grid { grid-template-columns: 1fr; gap: 2px; }

  .services { grid-template-columns: 1fr; }
  .svc {
    padding: 48px 24px;
    border-right: none;
    border-bottom: 1px solid var(--b0);
  }
  .svc:last-child { border-bottom: none; }

  .contact {
    grid-template-columns: 1fr;
    padding: 64px 24px;
    gap: 40px;
  }

  .about-hero {
    flex-direction: column;
    padding: 73px 0px 0px;
    min-height: auto;
  }
  .about-hero-text {
    flex: none;
    width: 100%;
    order: 1;
    position: relative;
    z-index: 2;
    padding: 24px 24px 48px;
    margin-top: -90px;
  }
  .about-hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: 54vh;
    /* Resetea la caja aspect-ratio del desktop: en mobile es una banda fija */
    aspect-ratio: auto;
    max-height: none;
    margin-block: 0;
    order: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent);
    mask-image: linear-gradient(to bottom, #000 85%, transparent);
  }
  .about-hero-visual video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: none;
  }
  .about-intro { max-width: 100%; }

  .caps-bar { padding: 40px 24px; }

  .footer {
    padding: 28px 24px;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .footer-right { flex-direction: column; gap: 12px; }
}

@media (max-width: 480px) {
  .nav-links { gap: 16px; }
  .nav-link__label { font-size: 9px; letter-spacing: .18em; }
  .hero-display { font-size: 26px; padding-bottom: 10%; }
  .work-header { flex-direction: column; gap: 8px; align-items: flex-start; }
  .contact-heading { font-size: clamp(40px, 11vw, 64px); }
  .about-title { font-size: clamp(56px, 14vw, 96px); }
}

/* ─── BTN text-swap: Contacto → Iniciar proyecto en hover ───── */
.btn.contact-trigger {
  position: relative;
  overflow: hidden;
}
/* Reserva el ancho del texto más largo sin valores hardcoded */
.btn.contact-trigger::before {
  content: 'Iniciar proyecto';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.btn.contact-trigger .btn-label,
.btn.contact-trigger .btn-label-alt {
  display: block;
  transition: opacity .18s, transform .18s;
  white-space: nowrap;
}
.btn.contact-trigger .btn-label-alt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.btn.contact-trigger:hover .btn-label {
  opacity: 0;
  transform: translateY(-6px);
}
.btn.contact-trigger:hover .btn-label-alt {
  opacity: 1;
  transform: translateY(0);
}

/* ─── CTA de contacto: botón + círculo ───────────────────────── */
.contact-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}
.contact-section-circle {
  --progress-circle-size: 32px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* ─── CONTACT TRIGGER (botón sin estilo, sustituye mailto:) ─── */
/* :not(.btn) — evita pisar border/color del componente .btn */
.contact-trigger:not(.btn) {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s;
}
.contact-trigger:not(.btn):hover { color: var(--fg); }
/* Variante inline en bio-meta-row */
.contact-trigger--link {
  font-size: 12px;
  letter-spacing: .1em;
  border-bottom: 1px solid rgba(237,233,220,.3);
  padding-bottom: 1px;
}