/* ==========================================================================
   PEAK® — pages.css
   Componentes de página. Todo plano, radio cero, jerarquía por escala.
   El acento (#A6D1FF) aparece una sola vez por pantalla.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PORTADA
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* El poster es la primera capa y el respaldo si el video no arranca. */
.hero__poster { z-index: 0; }
.hero__video { z-index: 1; }
[data-video-wrap].is-poster-only .hero__video { opacity: 0; }
/* Cae la exposición para que la tinta blanca siempre gane. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgb(10 10 10 / 0.96) 0%, rgb(10 10 10 / 0.82) 18%,
      rgb(10 10 10 / 0.42) 40%, rgb(10 10 10 / 0.18) 62%,
      rgb(10 10 10 / 0.55) 100%),
    linear-gradient(to right, rgb(10 10 10 / 0.62) 0%, rgb(10 10 10 / 0.1) 58%, transparent 100%);
}

.hero__top {
  position: relative;
  z-index: 1;
  align-self: start;
  padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--s-6);
}

.hero__body {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter) clamp(28px, 6vh, 64px);
  display: grid;
  gap: var(--s-6);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 100;
  line-height: 0.88;
  letter-spacing: -0.035em;
  max-width: 20ch;
}
/* Una sola palabra en cursiva: el gesto editorial del sistema. */
.hero__title em {
  font-style: italic;
  font-weight: 100;
}

.hero__foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-8);
  border-top: 1px solid var(--hairline-strong);
  padding-top: var(--s-4);
}

.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--paper-70);
}
.hero__cue .bar {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--signal), transparent);
  animation: cue 2.4s var(--ease-in-out) infinite;
  transform-origin: top center;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.25); opacity: 0.4; }
  45%      { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 640px) {
  .hero__foot { flex-direction: column; align-items: start; gap: var(--s-5); }
  .hero__title { max-width: none; }
}

@media (max-width: 560px) {
  .hero__top > *:last-child,
  .phead__top > *:last-child { display: none; }
}

/* --------------------------------------------------------------------------
   2. SECCIONES
   -------------------------------------------------------------------------- */

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: clamp(48px, 7vh, 96px); }
.section--flush { padding-block: 0; }

/* Encabezado de sección: rótulo mono + regla, como una pizarra de rodaje. */
.shead {
  display: grid;
  gap: var(--s-5);
  padding-inline: var(--gutter);
  margin-bottom: clamp(32px, 5vh, 64px);
}
.shead__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-6);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--s-4);
}
.shead__title {
  font-size: var(--fs-display);
  font-weight: 100;
  line-height: 0.92;
  max-width: 24ch;
}

/* --------------------------------------------------------------------------
   3. MARQUESINA DE SERVICIOS
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  padding-block: clamp(16px, 2.6vh, 30px);
  user-select: none;
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding-inline: clamp(12px, 2vw, 32px);
  font-size: clamp(1.75rem, 4.2vw, 4rem);
  font-weight: 100;
  line-height: 1;
  letter-spacing: var(--tr-display);
  white-space: nowrap;
  color: var(--paper);
}
.marquee__sep {
  height: clamp(12px, 1.4vw, 22px);
  color: var(--signal);
  flex: 0 0 auto;
}
.marquee__sep svg { height: 100%; }

/* --------------------------------------------------------------------------
   4. ÍNDICE DE PROYECTOS  ·  filas de filete, previsualización flotante
   El movimiento de portafolio propio del sitio: la obra aparece
   siguiendo el cursor, no ocupando la página.
   -------------------------------------------------------------------------- */

.index { position: relative; }

.index__row {
  position: relative;
  display: grid;
  grid-template-columns: 5ch minmax(0, 1fr) minmax(0, 0.9fr) 6ch;
  align-items: center;
  gap: var(--s-4);
  padding: clamp(18px, 2.6vh, 30px) var(--gutter);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.index__row:first-child { border-top: 1px solid var(--hairline); }

/* Barrido diagonal en hover: la misma inclinación del brandmark. */
.index__row::before {
  content: '';
  position: absolute;
  inset: -1px -20% -1px -1px;
  background: var(--surface-1);
  transform: translateX(-102%) skewX(-8deg);
  transition: transform 0.62s var(--ease-peak);
  z-index: 0;
}
.index__row:hover::before,
.index__row:focus-within::before { transform: translateX(0) skewX(0deg); }

.index__row > * { position: relative; z-index: 1; }

.index__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.index__num { color: var(--paper-48); transition: color 0.4s var(--ease-out); }
.index__row:hover .index__num { color: var(--signal); }

.index__client {
  font-size: var(--fs-title);
  font-weight: 100;
  line-height: 1;
  letter-spacing: var(--tr-display);
  transition: transform 0.62s var(--ease-peak);
}
.index__row:hover .index__client { transform: translateX(clamp(8px, 1.4vw, 20px)); }

.index__cat { color: var(--paper-52); }
.index__year { color: var(--paper-52); text-align: right; }

@media (max-width: 860px) {
  .index__row {
    grid-template-columns: 4ch minmax(0, 1fr) 6ch;
    row-gap: var(--s-2);
  }
  .index__cat { grid-column: 2 / 4; }
}

/* Previsualización que sigue al puntero. */
.peek {
  position: fixed;
  top: 0; left: 0;
  z-index: 20;
  width: clamp(240px, 26vw, 400px);
  aspect-ratio: 16 / 9;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background: var(--surface-1);
  will-change: transform;
}
.peek video, .peek img {
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (hover: none), (max-width: 860px) { .peek { display: none; } }

/* --------------------------------------------------------------------------
   5. PANELES DE PROYECTO  ·  la obra a pantalla completa
   -------------------------------------------------------------------------- */

.work { display: grid; }

.work__panel {
  position: relative;
  min-height: 88svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.work__media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
}
.work__media video, .work__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.work__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(10 10 10 / 0.9) 0%, rgb(10 10 10 / 0.15) 55%, rgb(10 10 10 / 0.35) 100%);
}

.work__meta {
  position: relative;
  z-index: 1;
  padding: var(--s-12) var(--gutter) clamp(28px, 5vh, 56px);
  display: grid;
  gap: var(--s-5);
  width: 100%;
}

.work__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-6);
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: var(--s-4);
}

.work__client {
  font-size: var(--fs-display);
  font-weight: 100;
  line-height: 0.94;
  letter-spacing: var(--tr-display);
}

.work__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-12);
  align-items: start;
  justify-content: space-between;
}
.work__blurb { max-width: 38ch; }

.work__credits {
  display: grid;
  gap: var(--s-2);
  min-width: 220px;
}
.work__credits li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--s-2);
  color: var(--paper-52);
}
.work__credits li b { font-weight: 400; color: var(--paper); }

/* Botón de sonido: el único control que ofrecemos sobre la obra. */
.work__sound {
  position: absolute;
  /* Por debajo de la barra de navegación, para que nunca compitan. */
  top: calc(var(--nav-h) + var(--s-4));
  right: var(--gutter);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--hairline-strong);
  padding: var(--s-2) var(--s-3);
  color: var(--paper-70);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.work__sound:hover { color: var(--paper); border-color: var(--paper); }
.work__sound.is-on { color: var(--signal); border-color: var(--signal); }

@media (max-width: 860px) {
  .work__panel { min-height: 70svh; }
  .work__row { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   6. DECLARACIÓN / MANIFIESTO
   -------------------------------------------------------------------------- */

.statement {
  padding-inline: var(--gutter);
}
.statement__text {
  font-size: var(--fs-display);
  font-weight: 100;
  line-height: 1.02;
  letter-spacing: var(--tr-display);
  max-width: 30ch;
}
.statement__text em { font-style: italic; }

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--hairline);
  margin-inline: var(--gutter);
  border: 1px solid var(--hairline);
}
.principle {
  background: var(--surface-0);
  padding: clamp(20px, 3vw, 40px);
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.principle__num { color: var(--signal); }
.principle__head {
  font-size: var(--fs-title);
  font-weight: 100;
  line-height: 1;
  letter-spacing: var(--tr-display);
}
.principle__body { color: var(--paper-70); font-size: var(--fs-small); line-height: 1.6; }

/* Capacidades: dos columnas de filetes. */
.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0 var(--s-12);
  padding-inline: var(--gutter);
}
.caps li {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--s-4);
}
.caps li span:first-child { color: var(--paper-48); flex: 0 0 auto; }
.caps li span:last-child { font-size: var(--fs-body); font-weight: 300; }

/* Cifras. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--s-8);
  padding-inline: var(--gutter);
}
.stat { display: grid; gap: var(--s-2); border-top: 1px solid var(--hairline-strong); padding-top: var(--s-4); }
.stat__value {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 100;
  line-height: 0.9;
  letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums;
}

/* Retrato / equipo. */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s-8);
  padding-inline: var(--gutter);
}
.person { display: grid; gap: var(--s-3); }
.person__name { font-size: var(--fs-title); font-weight: 100; letter-spacing: var(--tr-display); line-height: 1; }
.person__role { color: var(--paper-52); }
.person__link { color: var(--paper-70); transition: color 0.3s var(--ease-out); }
.person__link:hover { color: var(--signal); }

/* --------------------------------------------------------------------------
   7. LLAMADO A CONTACTO  ·  el enlace es la interfaz
   -------------------------------------------------------------------------- */

.cta {
  padding: clamp(56px, 8vh, 104px) var(--gutter) var(--section-gap);
  display: grid;
  gap: clamp(24px, 4vh, 48px);
}

.cta__mail {
  position: relative;
  display: block;
  font-size: clamp(2rem, 8.5vw, 8.5rem);
  font-weight: 100;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--paper);
  overflow: hidden;
  padding-block: 0.1em 0.16em;
  word-break: break-word;
}
/* Al pasar el puntero, el acento entra en diagonal y la tinta se invierte. */
.cta__mail::before {
  content: '';
  position: absolute;
  inset: 0 -14% 0 0;
  background: var(--signal);
  transform: translateX(-104%) skewX(-8deg);
  transition: transform 0.72s var(--ease-peak);
  z-index: 0;
}
.cta__mail span { position: relative; z-index: 1; transition: color 0.4s var(--ease-out) 0.16s; }
.cta__mail:hover::before { transform: translateX(0) skewX(0); }
.cta__mail:hover span { color: var(--ink); }

.cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--s-6) var(--s-12);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
}
.cta__cell { display: grid; gap: var(--s-2); align-content: start; }
.cta__cell a { color: var(--paper); transition: color 0.3s var(--ease-out); }
.cta__cell a:hover { color: var(--signal); }

/* --------------------------------------------------------------------------
   8. PORTADA DE PÁGINA INTERIOR  ·  cabecera sobria para páginas sin video
   -------------------------------------------------------------------------- */

.phead {
  padding: calc(var(--nav-h) + clamp(56px, 14vh, 150px)) var(--gutter) clamp(40px, 8vh, 90px);
  display: grid;
  gap: var(--s-8);
  border-bottom: 1px solid var(--hairline);
}
.phead__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-6);
}
.phead__title {
  font-size: var(--fs-hero);
  font-weight: 100;
  line-height: 0.88;
  letter-spacing: -0.035em;
}
.phead__title em { font-style: italic; }

/* Cifra grande de fondo, como el número de rollo de una lata de película. */
.phead__ghost {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(24px, 5vh, 56px);
  font-family: var(--font-mono);
  font-size: clamp(5rem, 16vw, 15rem);
  line-height: 0.74;
  color: var(--paper);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   9. BANDA DE IMAGEN A SANGRE
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  height: clamp(320px, 62svh, 720px);
  overflow: hidden;
}
.band img, .band video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgb(10 10 10 / 0.95) 0%, rgb(10 10 10 / 0.7) 12%,
    rgb(10 10 10 / 0.2) 34%, transparent 62%);
}
.band__caption {
  position: absolute;
  bottom: var(--s-6);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  color: var(--paper-70);
}