/* =========================================================
   GALLO — Estudio de diseño gráfico
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
blockquote { quotes: none; }

/* ---------- Tokens ---------- */
:root {
  --bg: #0a0908;
  --bg-soft: #131210;
  --ink: #f6f2ea;
  --ink-dim: rgba(246, 242, 234, .64);
  --ink-faint: rgba(246, 242, 234, .36);
  --line: rgba(246, 242, 234, .14);
  --accent: #ff4d23;
  --accent-2: #ffb27a;
  --accent-glow: rgba(255, 77, 35, .45);

  /* El header flota sobre un fondo oscuro fijo (transparente o
     rgba(10,9,8,.82) al hacer scroll) — su texto NO debe animarse
     con la transición de tema, así que usa su propia copia fija. */
  --header-ink: #f6f2ea;
  --header-ink-dim: rgba(246, 242, 234, .64);
  --header-ink-faint: rgba(246, 242, 234, .36);
  --header-line: rgba(246, 242, 234, .14);

  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

  --container: 1360px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

html { background: var(--bg); scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Transición de tema — animada por scroll ----------
   Las variables --bg, --ink, etc. se interpolan cuadro a cuadro
   desde js/main.js conforme "Sobre nosotros" entra en pantalla;
   aquí solo se resuelve el detalle binario (íconos invertidos). */
body.theme-light .about__rooster,
body.theme-light .site-footer__mark {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 999;
  background: var(--accent); color: #0a0908; padding: .75rem 1.25rem;
  font-weight: 700; border-radius: .25rem;
}
.skip-link:focus { top: 1rem; }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-size: clamp(.72rem, .6rem + .3vw, .85rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.eyebrow--light { color: rgba(255,255,255,.78); }

.section-title {
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
  max-width: 20ch;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  /* Centrado sin transform: un transform en este contenedor cambiaría
     el "containing block" del overlay fullscreen del menú móvil
     (que usa position:fixed) y lo encerraría aquí en vez del viewport. */
  position: fixed; top: clamp(.9rem, 2vw, 1.4rem); left: 0; right: 0;
  width: max-content; margin: 0 auto; z-index: 100;
  display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, .9rem);
  max-width: calc(100vw - 2rem);
  padding: 6px clamp(1rem, 2vw, 1.2rem);
  background: rgba(10, 9, 8, .6);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--header-line);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.site-header.is-hidden {
  /* transform aquí es seguro y más eficiente (se anima en el compositor,
     sin layout thrash) porque en desktop .main-nav es position:relative,
     no fixed — no hay ningún containing block que romper. En móvil
     .main-nav SÍ es position:fixed (overlay fullscreen del menú), así que
     ese breakpoint anula esto con margin-top; ver el override abajo. */
  opacity: 0; pointer-events: none;
  transform: translateY(-16px);
}

.brand {
  display: flex; align-items: center; gap: .5rem;
  padding-right: clamp(.6rem, 1.4vw, .9rem);
  border-right: 1px solid var(--header-line);
}
.brand__mark { width: 34px; height: auto; filter: invert(1) brightness(2); }
.brand__word {
  font-weight: 800; font-size: 1rem; letter-spacing: .02em;
  color: var(--header-ink);
}
.brand__dot { color: var(--accent); }

.main-nav { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-indicator {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: var(--accent); border-radius: 999px;
  opacity: 0; pointer-events: none; z-index: 1;
  transition: left .45s var(--ease), width .45s var(--ease), opacity .25s var(--ease);
}
.nav-indicator.is-ready { opacity: 1; }
.main-nav a {
  position: relative; z-index: 2;
  font-size: .78rem; font-weight: 500; color: var(--header-ink-dim);
  padding: .55rem .85rem; border-radius: 999px;
  transition: color .25s var(--ease);
}
.main-nav a:hover,
.main-nav a.is-active { color: var(--header-ink); }
.main-nav__cta {
  border: 1px solid var(--accent); background: var(--accent); border-radius: 999px;
  padding: .55rem 1.1rem !important;
  color: #0a0908 !important; font-weight: 700 !important;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.main-nav__cta:hover {
  background: #ff6c47; border-color: #ff6c47;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px var(--accent-glow);
}

.header-controls { display: flex; align-items: center; gap: .6rem; }

.lang-toggle {
  display: flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  color: var(--header-ink-faint);
  padding: 0 .3rem;
}
.lang-toggle span[data-lang-option] { transition: color .25s var(--ease); }
.lang-toggle__sep { color: var(--header-ink-faint); }
html[lang="es"] .lang-toggle__es,
html[lang="en"] .lang-toggle__en { color: var(--header-ink); }

.menu-toggle {
  display: none; flex-direction: column; gap: 5px; width: 22px;
}
.menu-toggle span { display: block; height: 1.5px; width: 100%; background: var(--header-ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; height: 100svh; min-height: 560px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,.25) 30%, rgba(10,9,8,.55) 72%, rgba(10,9,8,.95) 100%);
}

.hero__content {
  position: relative; width: 100%;
  padding: 0 var(--pad) clamp(6rem, 16vw, 11rem);
}
.hero__title {
  display: flex; flex-direction: column;
  font-size: clamp(2.6rem, 1.6rem + 6.2vw, 7.2rem);
  font-weight: 800; letter-spacing: -.03em; line-height: .98;
  text-wrap: balance;
}
.hero__title span { display: block; }
.hero__title span.is-typing::after {
  content: "";
  display: inline-block;
  width: .06em; height: .82em;
  margin-left: .04em;
  background: var(--accent);
  vertical-align: -0.08em;
  animation: caret-blink .9s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.hero__sub {
  margin-top: 1.1rem;
  font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  color: var(--accent); font-weight: 400;
  font-style: italic;
}

.hero__scroll-cue {
  position: absolute; right: var(--pad); bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: .6rem;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
}
.hero__scroll-cue i {
  width: 1px; height: 28px; background: var(--ink-faint); position: relative; overflow: hidden;
}
.hero__scroll-cue i::after {
  content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
  background: var(--accent); animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue {
  0% { top: -100%; } 50% { top: 0; } 100% { top: 100%; }
}

/* =========================================================
   STATEMENT — pinned scroll section (pain points)
   ========================================================= */
.statement { position: relative; height: 400vh; background: var(--bg); }
.statement__sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; padding: 0 var(--pad);
}
.statement__track { position: relative; width: 100%; max-width: 1100px; height: clamp(6rem, 20vw, 10rem); }
.statement__line {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: clamp(2rem, 1.1rem + 5.4vw, 5.6rem);
  font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; line-height: 1;
  opacity: 0; transform: translateY(28px) scale(.96);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.statement__line.is-active {
  opacity: 1; transform: translateY(0) scale(1);
}

.statement__progress {
  position: absolute; bottom: clamp(2rem, 6vw, 4rem);
  display: flex; gap: .5rem; width: min(90%, 480px);
}
.segment {
  flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden;
}
.segment i {
  position: absolute; inset: 0; width: 0%; background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* =========================================================
   PAUSA — un gusto personal (tráiler embebido de YouTube)
   ========================================================= */
.pause {
  position: relative; height: 100svh; min-height: 480px;
  overflow: hidden; background: #000;
}
.pause__media { position: absolute; inset: 0; overflow: hidden; }
.pause__iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;       /* cubre según el ancho (16:9) */
  min-height: 100svh; min-width: 177.78svh; /* cubre según el alto (16:9) */
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.pause__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,.35) 0%, rgba(10,9,8,.2) 45%, rgba(10,9,8,.78) 100%);
}
.pause__content {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--pad);
}
.pause__title {
  font-size: clamp(2.2rem, 1.3rem + 4.5vw, 5rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.02;
  color: #f6f2ea;
}
.pause__subtitle {
  margin-top: .75rem;
  font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  font-style: italic; color: #ffb27a;
}
.pause__credit {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: 1.56rem; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(246, 242, 234, .5);
}

/* =========================================================
   PORTFOLIO — carrusel horizontal navegado con scroll
   ========================================================= */
.portfolio { padding: clamp(1.25rem, 3vw, 2.5rem) 0; }

.portfolio__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding: 0 var(--pad); margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.portfolio__head .eyebrow { margin-bottom: 0; }

.portfolio__hint {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .08em;
  transition: opacity .5s var(--ease);
}
.portfolio__hint.is-dismissed { opacity: 0; }
.portfolio__hint-arrow {
  display: inline-block; color: var(--accent);
  animation: hint-nudge 1.6s ease-in-out infinite;
}
@keyframes hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

.portfolio__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--pad) 1.75rem;
  cursor: grab; user-select: none;
}
.portfolio__viewport::-webkit-scrollbar { display: none; }
.portfolio__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.portfolio__progress {
  margin: 0 var(--pad); height: 2px; background: var(--line);
  position: relative; overflow: hidden;
}
.portfolio__progress i {
  position: absolute; inset: 0; width: 0%; background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.portfolio__track { display: flex; gap: clamp(1rem, 2.5vw, 1.75rem); width: max-content; }

.portfolio__card {
  flex: 0 0 auto; scroll-snap-align: start;
  width: clamp(230px, 32vw, 420px); aspect-ratio: 3 / 4;
  overflow: hidden; background: var(--bg-soft);
  border-radius: 14px;
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.portfolio__card.is-visible { opacity: 1; transform: translateY(0); }
.portfolio__card img,
.portfolio__card video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
  pointer-events: none; -webkit-user-drag: none;
}
.portfolio__card:hover img,
.portfolio__card:hover video { transform: scale(1.045); }

/* =========================================================
   TOOLS — marquee
   ========================================================= */
.tools { padding: clamp(4rem, 10vw, 7rem) 0; text-align: center; }
.tools .eyebrow { padding: 0 var(--pad); }
.marquee {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}
.marquee__track {
  display: inline-flex; align-items: center; gap: 1.5rem;
  animation: marquee 26s linear infinite;
  will-change: transform;
}
.marquee__track span {
  font-size: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  font-weight: 700; letter-spacing: -.01em;
  padding: 0 .75rem;
}
.marquee__track i {
  font-style: normal; color: var(--accent); font-size: 1.4rem;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* =========================================================
   PROCESS
   ========================================================= */
.process { padding: clamp(5rem, 12vw, 9rem) var(--pad); max-width: var(--container); margin: 0 auto; }
.process__intro { max-width: 46rem; margin-bottom: clamp(3rem, 8vw, 5rem); }
.process__lede { margin-top: 1.25rem; color: var(--ink-dim); font-size: 1.05rem; max-width: 38rem; }

.process__list { display: flex; flex-direction: column; }
.process__item {
  display: grid; grid-template-columns: clamp(4rem, 10vw, 8rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.process__item:last-child { border-bottom: 1px solid var(--line); }
.process__number {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.process__body h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 700; letter-spacing: -.01em; margin-bottom: .6rem;
}
.process__body p { color: var(--ink-dim); max-width: 42rem; font-size: 1.02rem; }

.process__outro {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-size: clamp(1.2rem, .9rem + 1.2vw, 1.7rem);
  font-style: italic; color: var(--ink-dim); max-width: 40rem;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about {
  position: relative;
  padding: clamp(5rem, 14vw, 10rem) var(--pad) clamp(2rem, 5vw, 3rem);
  overflow: hidden;
}
.about__rooster {
  position: absolute; top: 50%; right: clamp(-10rem, -4vw, -2rem); transform: translateY(-50%);
  width: clamp(22rem, 44vw, 40rem); opacity: .06;
  filter: invert(1);
  pointer-events: none;
}
.about__inner { position: relative; max-width: var(--container); margin: 0 auto; }
.about__cities {
  max-width: 48rem; color: var(--ink-dim); font-size: 1.08rem; line-height: 1.65;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials { padding: clamp(2rem, 5vw, 3rem) var(--pad) clamp(2rem, 5vw, 3rem); max-width: var(--container); margin: 0 auto; }
.testimonials .eyebrow { text-align: center; }
.testimonials__list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.testimonial {
  border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.75rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between;
  background: var(--bg-soft);
}
.testimonial p { font-size: 1.05rem; line-height: 1.55; }
.testimonial cite {
  font-style: normal; font-weight: 700; color: var(--accent-2);
  font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad) clamp(6rem, 16vw, 11rem);
  text-align: center; max-width: 60rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.contact__title {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12;
}
.contact__options {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem;
}
.contact__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 11rem; padding: .9rem 2rem;
  border: 2px solid var(--accent); border-radius: 999px;
  font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  color: var(--ink);
  transition: background-color .3s var(--ease), color .3s var(--ease),
              transform .25s var(--ease), box-shadow .3s var(--ease);
}
.contact__btn:hover {
  background: var(--accent); color: #0a0908;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--accent-glow);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad) clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--ink-faint);
}
.site-footer a { color: var(--ink-dim); transition: color .3s var(--ease); }
.site-footer a:hover { color: var(--accent); }

.site-footer__top {
  display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 4rem);
  justify-content: space-between;
  padding-bottom: clamp(2rem, 5vw, 3rem);
}
.site-footer__brand { flex: 0 0 auto; }
.site-footer__mark { width: 88px; height: auto; filter: invert(1) brightness(2); opacity: .7; }

.site-footer__col { display: flex; flex-direction: column; gap: .35rem; min-width: 12rem; }
.site-footer__label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); margin-bottom: .25rem;
}
.site-footer__col p, .site-footer__col a { font-size: .92rem; color: var(--ink-dim); line-height: 1.5; }
.site-footer__note { font-size: .78rem; color: var(--ink-faint); margin-top: .2rem; max-width: 22rem; }
.site-footer__col a { display: inline-block; width: fit-content; }

.site-footer__bottom {
  padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line);
}

/* =========================================================
   REVEAL (generic IO fade-up)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  /* backdrop-filter (igual que transform) convierte a .site-header en el
     "containing block" de sus descendientes position:fixed — eso encerraría
     el overlay fullscreen del menú dentro del pill en vez del viewport.
     En móvil usamos un fondo sólido y quitamos el filtro para evitarlo. */
  .site-header {
    background: rgba(10, 9, 8, .94);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  /* Aquí .main-nav SÍ es position:fixed (ver abajo), así que el transform
     de .site-header.is-hidden volvería a atraparlo dentro del pill en vez
     del viewport. margin-top logra el mismo movimiento sin ese problema
     (a costa de un reflow menor, aceptable: es un solo elemento fixed). */
  .site-header.is-hidden {
    transform: none;
    margin-top: -16px;
  }
  .main-nav {
    position: fixed; inset: 0; z-index: 90;
    background: var(--bg);
    flex-direction: column; justify-content: center; align-items: center; gap: 2rem;
    transform: translateX(100%); transition: transform .45s var(--ease);
  }
  .main-nav.is-open { transform: translateX(0); }
  .nav-indicator { display: none; }
  /* El menú a pantalla completa sí toma el fondo animado (var(--bg)),
     así que aquí su texto debe volver a seguir el tema en vivo,
     no la copia fija que usa la barra superior. */
  .main-nav a { font-size: 1.4rem; color: var(--ink-dim); padding: 0; }
  .main-nav a:hover { color: var(--ink); }
  /* El botón Contacto se queda relleno de acento con texto oscuro
     fijo (igual que en la barra superior) — no sigue el tema animado. */
  .menu-toggle { display: flex; position: relative; z-index: 95; }
  .main-nav.is-open ~ .header-controls .menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .main-nav.is-open ~ .header-controls .menu-toggle span:nth-child(2) { opacity: 0; }
  .main-nav.is-open ~ .header-controls .menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .testimonials__list { grid-template-columns: 1fr; }
  .process__item { grid-template-columns: 1fr; gap: .5rem; }
}

@media (max-width: 560px) {
  .brand__word { display: none; }
  .about__rooster { opacity: .05; right: -8rem; }
}