:root {
  --bg: #0a0a0b;
  --fg: #f4f2ee;
  --dim: #8a8885;
  --line: #232224;
  --red: #e0261c;
  --pad: clamp(20px, 5vw, 72px);
  --display: 'Anton', Impact, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Playhead */
.playhead { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 30; }
.playhead span { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(0); }

/* Header */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 6px var(--pad);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(var(--bg), transparent);
  transition: background-color .3s;
}
.stuck .top { background: rgba(10, 10, 11, .92); }
.brand { font-weight: 600; }
.timecode { color: var(--red); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.top nav { display: flex; gap: 24px; }
.top a { white-space: nowrap; }
.top nav a { color: var(--dim); transition: color .2s; padding-block: 12px; }
.brand { padding-block: 12px; }
.top nav a:hover { color: var(--fg); }

/* Barra de marcas: aparece al bajar y lleva a cada proyecto */
.brandbar {
  position: fixed; inset: 54px 0 auto 0; z-index: 19;
  background: rgba(10, 10, 11, .92); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.stuck .brandbar { opacity: 1; visibility: visible; transform: none; }
.brandbar .brands {
  margin: 0; padding: 0 var(--pad); height: 58px;
  flex-wrap: nowrap; gap: 0 clamp(22px, 3vw, 44px);
  overflow-x: auto; scrollbar-width: none;
}
.brandbar .brands::-webkit-scrollbar { display: none; }
.brandbar li { flex: none; }
.brandbar .brands a { opacity: .5; padding-block: 10px; }
.brandbar .brands a:hover, .brandbar .brands a.active { opacity: 1; transform: none; }
.brandbar .brands img { height: calc(24px * var(--s, 1)); }
.brandbar .brands span { font-size: 17px; }

/* Shared */
section { padding: clamp(72px, 12vh, 140px) var(--pad); }
.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin-bottom: 20px; }
.eyebrow b { color: var(--red); font-weight: 600; }
h1, h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .95; letter-spacing: .01em; }
h2 { font-size: clamp(40px, 6vw, 84px); margin-bottom: 28px; }
.lead { color: #c9c6c1; max-width: 56ch; font-size: clamp(15px, 1.25vw, 18px); }
.lead strong { color: var(--fg); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; font-size: 12px; color: #c9c6c1; }

/* Hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-block: 88px 48px;
  --p: 0; /* avance del scroll sobre la portada, de 0 a 1 (lo pone main.js) */
}
/* Foto de fondo en tres capas: nítida, difuminada (solo donde va el texto) y sombra.
   Al bajar, la capa nítida también se difumina. */
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg i { position: absolute; inset: 0; }
.hero-bg .sharp, .hero-bg .soft { background: url(img/hero.jpg?v=20261005111240) 50% 60% / cover no-repeat; }
.hero-bg .sharp { inset: -24px; filter: blur(calc(var(--p) * 18px)) brightness(calc(.95 - var(--p) * .35)); }
.hero-bg .soft {
  inset: -24px; filter: blur(14px) brightness(.6);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 58%);
}
.hero-bg .shade {
  background:
    linear-gradient(90deg, rgba(10, 10, 11, .78) 0%, rgba(10, 10, 11, .5) 38%, transparent 60%),
    linear-gradient(0deg, var(--bg) 0%, transparent 22%),
    linear-gradient(180deg, rgba(10, 10, 11, .55) 0%, transparent 16%),
    radial-gradient(50% 45% at 15% 10%, rgba(224, 38, 28, .3), transparent 70%);
}
/* El contenido se queda en la mitad izquierda para no tapar la foto. */
.hero > :not(.hero-bg) { max-width: min(50vw, 760px); }
.hero h1 { font-size: clamp(56px, 8.8vw, 156px); white-space: nowrap; margin-bottom: 28px; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border: 1px solid #3a393b; border-radius: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
}
.btn:hover { border-color: var(--fg); }
.btn.primary { background: var(--red); border-color: var(--red); }
.btn.primary:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.tri { border-left: 9px solid currentColor; border-block: 6px solid transparent; }
.brands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(28px, 4vw, 56px); margin-top: clamp(32px, 6vh, 72px); }
.brands a { display: block; padding-block: 12px; opacity: .75; transition: opacity .2s, transform .2s; }
.brands a:hover { opacity: 1; transform: translateY(-2px); }
.brands img { display: block; height: calc(clamp(38px, 4.2vw, 52px) * var(--s, 1)); width: auto; filter: brightness(0) invert(1); }
.brands img.keep { filter: none; }
.brands img.crop { aspect-ratio: 5.6; object-fit: cover; } /* icono cuadrado con el logotipo en una franja central */
.brands span { font-family: var(--display); font-size: clamp(26px, 3vw, 38px); line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: #fff; }

/* Work */
.work { padding-inline: clamp(12px, 2.5vw, 40px); }
.work > .eyebrow { padding-inline: 4px; }
.project { scroll-margin-top: 128px; padding-bottom: clamp(72px, 12vh, 140px); }
.project .eyebrow { margin-bottom: 14px; padding-inline: 4px; }
/* El video ocupa todo el ancho, pero nunca más alto que lo que queda bajo las barras fijas. */
.player { position: relative; aspect-ratio: var(--ratio); width: 100%; max-width: calc((100svh - 170px) * (var(--ratio))); margin-inline: auto; background: #000; overflow: hidden; }
.player button { display: block; width: 100%; height: 100%; }
.player img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease, opacity .3s; }
.player button:hover img { transform: scale(1.015); opacity: .85; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player.playing button { display: none; }
.play {
  position: absolute; inset: 0; margin: auto; width: clamp(64px, 8vw, 104px); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%; background: var(--red); transition: transform .25s;
}
.play .tri { border-left-width: 20px; border-block-width: 13px; margin-left: 6px; }
.player button:hover .play { transform: scale(1.08); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px, 1vw, 14px); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.gallery figcaption { margin-top: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.info { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 80px); margin-top: clamp(20px, 3vw, 36px); padding-inline: 4px; }
.info h2 { font-size: clamp(36px, 5.5vw, 84px); margin-bottom: 12px; }
.role { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.info .chips { margin-top: 20px; }

/* Botón de sonido: acompaña el scroll mientras hay un video reproduciéndose */
.sound {
  position: fixed; right: 16px; bottom: 16px; z-index: 25;
  display: none; align-items: center; gap: 10px;
  padding: 13px 18px; border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
.sound.on { display: inline-flex; }
.sound svg { width: 18px; height: 18px; flex: none; }
.sound .waves { display: none; }
.sound.unmuted .waves { display: inline; }
.sound.unmuted .cross { display: none; }
.sound.unmuted { background: var(--red); color: #fff; }

/* About */
.about { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 96px); border-top: 1px solid var(--line); }
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.services div { border-top: 1px solid #3a393b; padding-top: 14px; }
.services h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.services p, .facts p { font-size: 14px; color: #a9a6a2; }
.facts p { margin-bottom: 14px; }
.facts p strong { color: var(--fg); font-weight: 600; }
.facts .eyebrow { margin: 28px 0 12px; }
.facts .eyebrow:first-child { margin-top: 0; }

/* Contact */
.contact { border-top: 1px solid var(--line); }
.mail {
  display: inline-block; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 6.4vw, 104px); line-height: 1; transition: color .2s;
}
.mail:hover { color: var(--red); }
.foot { display: flex; justify-content: space-between; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.foot a { padding-block: 12px; margin-block: -12px; }
.foot a:hover { color: var(--fg); }

/* Móvil */
@media (max-width: 820px) {
  .top nav { gap: 16px; }
  .timecode { display: none; }
  .about, .info { grid-template-columns: 1fr; }
  .work { padding-inline: 0; }
  .work > .eyebrow, .project .eyebrow, .info { padding-inline: var(--pad); }
  .gallery { grid-template-columns: repeat(2, 1fr); padding-inline: 6px; }
  .services { grid-template-columns: 1fr; gap: 18px; }
  .foot { flex-direction: column; gap: 10px; }
}
/* Portada en teléfono: título arriba sobre zona difuminada y tú nítido debajo, de cuerpo entero.
   La foto se coloca según dónde termina el título (no según el alto de la pantalla),
   para que la cabeza siempre quede por debajo del texto y fuera del desenfoque. */
@media (max-width: 700px) {
  .hero {
    justify-content: flex-start; padding-block: 96px 40px;
    --fs: min(18.5vw, 88px);
    --top: calc(140px + 2.85 * var(--fs));  /* donde termina el título */
    --photo: max(calc(2 * (100vh - var(--top) - 70px)), 170vw); /* alto de la foto */
    --head: calc(.42 * var(--photo));       /* dónde empieza la cabeza dentro de la foto */
  }
  @supports (height: 1svh) { .hero { --photo: max(calc(2 * (100svh - var(--top) - 70px)), 170vw); } }
  .hero > :not(.hero-bg) { max-width: none; }
  .hero h1 { font-size: var(--fs); margin-bottom: calc(.58 * var(--photo)); }
  .hero-bg { top: calc(var(--top) + 70px - var(--head)); bottom: auto; height: var(--photo); overflow: hidden; }
  .hero-bg .sharp, .hero-bg .soft { inset: 0; background-position: 85% 50%; }
  .hero-bg .soft {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--head) - 75px), transparent calc(var(--head) - 12px));
    mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--head) - 75px), transparent calc(var(--head) - 12px));
  }
  .hero-bg .shade {
    inset: -2px;
    background:
      linear-gradient(180deg, var(--bg) 0, var(--bg) 4px, rgba(10, 10, 11, .55) calc(var(--head) - 130px), rgba(10, 10, 11, .45) calc(var(--head) - 75px), transparent calc(var(--head) - 12px)),
      linear-gradient(0deg, var(--bg) 0%, transparent 12%);
  }
}
@media (max-width: 420px) {
  .brand { font-size: 11px; }
  .top nav a:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .hero { --p: 0 !important; }
}

@media (max-width: 360px) {
  .top { font-size: 10px; gap: 12px; }
  .top nav { gap: 12px; }
}