/* ==========================================================================
   Tonantzin Rueda · Portafolio
   ========================================================================== */

:root {
  /* Paleta */
  --fondo: #F6F3EE;
  --tinta: #1E0A0E;
  --tinta-suave: #5E4A4C;
  --butaca: #5C0B16;
  --butaca-profunda: #46070F;
  --crema: #FFF4E2;
  --crema-suave: #E3C9BC;
  --pop: #FF7A00;
  --pop-claro: #FF9A3D;
  /* Naranja para texto sobre crema: el --pop no alcanza el contraste mínimo ahí */
  --pop-texto: #A94600;
  --pelicula: #17100F;

  /* Tipografía */
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Espaciado */
  --pad: clamp(16px, 3.4vw, 52px);
  --seccion: clamp(88px, 14vh, 168px);
  --radio: 10px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Salas: cada página define su luz */
.room-light {
  --bg: var(--fondo);
  --fg: var(--tinta);
  --fg-soft: var(--tinta-suave);
  --line: rgba(30, 10, 14, .16);
  --grain-op: .05;
  --acento: var(--pop-texto);
  --foco: var(--tinta);
}
.room-dark {
  --bg: var(--butaca);
  --fg: var(--crema);
  --fg-soft: var(--crema-suave);
  --line: rgba(255, 244, 226, .2);
  --grain-op: .09;
  --acento: var(--pop);
  --foco: var(--pop);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background-image: var(--grano);
  opacity: var(--grain-op);
  mix-blend-mode: multiply;
}
.room-dark::after { mix-blend-mode: overlay; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--pop); color: var(--tinta); }
:focus-visible { outline: 2.5px solid var(--foco, var(--pop)); outline-offset: 3px; border-radius: 4px; }
/* Zonas oscuras dentro de páginas claras: el foco y el acento vuelven al naranja o al crema */
.creditos-banda, .ventana, .visor { --acento: var(--pop); --foco: var(--pop); }
.tunel, body.page-home:not(.is-llegada) .site-header:not(.is-open) { --foco: var(--crema); }
/* Al llegar al reel el fondo del pasillo ya es crema */
.tunel.is-llegada { --foco: var(--tinta); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--pad); top: -60px; z-index: 300;
  background: var(--pop); color: var(--tinta); padding: 10px 16px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Tipografía -------------------------------------------------------------- */
.mega {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.045em;
  line-height: .8;
}
.titulo-seccion {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .9;
  font-size: clamp(34px, 5.4vw, 80px);
}
.voz {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}
.etiqueta {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.3;
}
.lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.5;
  max-width: 34em;
}

/* Botones y chips ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--pop { background: var(--pop); border-color: var(--pop); color: var(--tinta); }
.btn--pop:hover { background: var(--pop-claro); border-color: var(--pop-claro); color: var(--tinta); }
.btn__play {
  width: 0; height: 0;
  border-left: 10px solid currentColor;
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
}
.btn__arrow { font-size: 1.1em; line-height: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.chips__sep { width: 18px; }
.chip {
  padding: 9px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background-color .2s, border-color .2s, color .2s;
}
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--pop); border-color: var(--pop); color: var(--tinta); }

.link-flecha {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(var(--pop), var(--pop)) 0 100% / 0 2px no-repeat;
  padding-bottom: 4px;
  transition: background-size .35s var(--ease);
}
.link-flecha:hover { background-size: 100% 2px; }

/* Header ------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 26px var(--pad);
}
.page-home .site-header { position: absolute; inset: 0 0 auto; }
.brand {
  max-width: 25em;
  font-size: 15.5px;
  line-height: 1.55;
  text-decoration: none;
}
.brand strong { font-weight: 700; letter-spacing: -.01em; }
.brand__frase { display: none; }
.nav-wrap { display: flex; align-items: center; gap: clamp(20px, 3.4vw, 56px); }
.nav ul { display: flex; gap: clamp(20px, 3.4vw, 56px); }
.nav a {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 0;
  background: linear-gradient(var(--pop), var(--pop)) 0 100% / 0 2px no-repeat;
  transition: background-size .3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 2px; }
.lang {
  min-width: 44px;
  padding: 7px 12px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1;
}
.lang:hover { background: var(--fg); color: var(--bg); }
.menu-btn {
  display: none;
  padding: 7px 14px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 860px) {
  .menu-btn { display: inline-block; }
  .nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: flex-end;
    padding: 120px var(--pad) 48px;
    background: var(--butaca);
    color: var(--crema);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  .nav ul { flex-direction: column; gap: 4px; }
  .nav a {
    font-weight: 800;
    font-size: clamp(44px, 13vw, 84px);
    letter-spacing: -.04em;
    line-height: 1;
  }
  .site-header.is-open { color: var(--crema); }
  .site-header.is-open .nav { opacity: 1; visibility: visible; }
  .site-header.is-open .brand__frase { visibility: hidden; }
  .page-home .brand { max-width: 15em; font-size: 14px; }
}
@media (max-width: 560px) {
  .page-home .brand__frase { display: none; }
}

/* Medios: portada, póster de ejemplo, insignias ----------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--b, #2a1216);
  aspect-ratio: var(--ar, 9 / 16);
  isolation: isolate;
}
.media img, .media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ph {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 30% 22%, color-mix(in srgb, var(--a) 85%, white) 0%, transparent 62%),
    radial-gradient(80% 70% at 80% 95%, var(--b) 0%, transparent 70%),
    linear-gradient(165deg, var(--a) 0%, var(--b) 100%);
}
.ph::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grano);
  opacity: .32;
  mix-blend-mode: overlay;
}
.ph__titulo {
  position: absolute;
  left: 8%; right: 8%; bottom: 7%;
  z-index: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 21px);
  line-height: 1.2;
  color: var(--crema);
  text-shadow: 0 1px 14px rgba(30, 10, 14, .35);
}
.insignias {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.insignia {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(30, 10, 14, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--crema);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .05em;
  line-height: 1;
}
.insignia--ia { background: var(--pop); color: var(--tinta); }

/* Ficha de proyecto -------------------------------------------------------- */
.card { display: block; text-decoration: none; }
.card .media img, .card .ph { transition: transform .8s var(--ease); }
.card:hover .media img, .card:hover .ph { transform: scale(1.035); }
.card__info { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.card__titulo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.25;
}
.card__meta { color: var(--fg-soft); font-size: 13.5px; margin-top: 3px; }
.card__dur { flex: none; color: var(--fg-soft); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 3px; }

/* Sello ------------------------------------------------------------------- */
.sello {
  width: 92px;
  height: 92px;
  transform: rotate(12deg);
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.sello path:first-child { fill: var(--pop); stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; }
.sello path:last-child { fill: var(--tinta); }

/* ==========================================================================
   INICIO
   ========================================================================== */
/* Pasillo: la sección es alta y su escena se queda fija mientras haces scroll.
   JS pone en la escena --q (0 tinto → 1 blanco), --r (tamaño del reel) y --p (avance). */
.hero { position: relative; }
.tunel { height: 280svh; }
.tunel__escena {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%,
      var(--fondo) calc(var(--luz, 0) * 100%),
      color-mix(in srgb, var(--pop-claro) 30%, transparent) calc(var(--luz, 0) * 100% + 4% + var(--luz, 0) * 10%),
      transparent calc(var(--luz, 0) * 100% + 16% + var(--luz, 0) * 26%)),
    var(--butaca);
  color: color-mix(in srgb, var(--tinta) calc(var(--q, 0) * 100%), var(--crema));
}
/* Grano de película que se mueve; se apaga cuando la luz cubre la pantalla */
.tunel__escena::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 5;
  background-image: var(--grano);
  opacity: calc(.16 * (1 - var(--q, 0)));
  mix-blend-mode: overlay;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .tunel__escena::before { animation: grano .5s steps(5) infinite; }
}
@keyframes grano {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, -5%); }
  80% { transform: translate(7%, 6%); }
  100% { transform: translate(0, 0); }
}

/* Header de Inicio: fijo; en el pasillo solo se ve el botón de idioma.
   Al llegar al reel aparecen la marca y el menú sobre fondo blanco. */
.page-home .site-header { position: fixed; transition: background-color .4s var(--ease), color .4s var(--ease); }
.page-home .site-header:not(.is-open) { color: var(--crema); }
.page-home .brand, .page-home .nav, .page-home .menu-btn { transition: opacity .4s var(--ease), visibility .4s; }
body.page-home:not(.is-llegada) .site-header:not(.is-open) :is(.brand, .nav, .menu-btn) { opacity: 0; visibility: hidden; }
body.page-home.is-llegada .site-header:not(.is-open) { background: var(--fondo); color: var(--tinta); }
/* En celular, "Menú" va antes del idioma para que EN siempre quede en la esquina */
.page-home .menu-btn { order: -1; }

/* Título del pasillo */
.tunel__titulo {
  position: absolute;
  left: 50%;
  top: clamp(96px, 15svh, 170px);
  z-index: 4;
  width: min(92vw, 760px);
  transform: translateX(-50%);
  text-align: center;
  opacity: calc(1 - var(--p, 0) * 7);
  text-shadow: 0 2px 24px rgba(18, 4, 6, .45);
}
.tunel__nombre {
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 54px);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
}
.tunel__frase {
  margin-top: 18px;
  font-size: clamp(17px, 1.75vw, 27px);
  line-height: 1.45;
}

.tunel__pasillo {
  position: absolute;
  inset: 0;
  perspective-origin: 50% 46%;
  pointer-events: none;
}
.tunel__card {
  position: absolute;
  left: 50%;
  top: 46%;
  width: var(--cw, 240px);
  height: var(--ch, 320px);
  margin: calc(var(--ch, 320px) / -2) 0 0 calc(var(--cw, 240px) / -2);
  border-radius: 6px;
  overflow: hidden;
  background: var(--butaca-profunda);
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.tunel__card img, .tunel__card video {
  width: 100%; height: 100%;
  object-fit: cover;
}

.tunel__pista {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4svh, 40px);
  transform: translateX(-50%);
  z-index: 4;
  opacity: calc(1 - var(--p, 0) * 8);
  white-space: nowrap;
}
.tunel__pista::after {
  content: "";
  display: block;
  width: 1.5px;
  height: 26px;
  margin: 10px auto 0;
  background: currentColor;
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .tunel__pista::after { animation: pista 1.8s var(--ease) infinite; }
}
@keyframes pista {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero__nombre {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(18px, 3vh, 40px);
  z-index: 1;
  font-size: clamp(64px, 14.6vw, 290px);
}
.hero__nombre span { display: block; overflow: hidden; padding-bottom: .02em; }
.hero__nombre span:last-child { text-align: right; }
.hero__nombre i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease);
}
.hero__nombre span:last-child i { transition-delay: .12s; }
.is-llegada .hero__nombre i { transform: none; }

.hero__meta {
  position: absolute;
  right: var(--pad);
  bottom: clamp(20px, 4svh, 40px);
  z-index: 4;
  text-align: right;
  opacity: calc(1 - var(--p, 0) * 4);
}
.hero__copy {
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 38px);
  letter-spacing: -.03em;
  line-height: 1;
}
.hero__reloj { margin-top: 12px; font-size: 13px; opacity: .78; }
.hero__reloj b { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 6px; }

/* Demo reel: aparece al centro cuando la luz ya cubrió la pantalla */
.hero__reel-wrap {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(52vw, 900px);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.reel {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 30px 60px -30px rgba(18, 4, 6, .6);
  opacity: 0;
  scale: .94;
  filter: blur(12px);
  transition: opacity 1s var(--ease), scale 1.4s var(--ease), filter 1s var(--ease);
}
.is-llegada .reel { opacity: 1; scale: 1; filter: none; }
.reel__media {
  position: absolute;
  inset: 0;
  background: var(--b, var(--butaca));
  transition: filter .4s var(--ease);
}
.reel__media img, .reel__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.reel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(30, 10, 14, .38), transparent 32%);
  pointer-events: none;
}
.reel:hover .reel__media { filter: brightness(1.07); }
.reel__label {
  position: absolute;
  left: 16px; right: 16px; top: 14px;
  z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--crema);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero__acciones {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 7;
  transform: translate(-50%, 50%);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.is-llegada .hero__acciones, .hero__acciones:focus-within { opacity: 1; visibility: visible; }

@media (max-width: 860px) {
  .hero__copy { font-size: 20px; }
  .hero__reloj { margin-top: 6px; }
  .hero__nombre { font-size: clamp(52px, 15.6vw, 150px); }
  .hero__reel-wrap { width: min(78vw, 640px); }
}
@media (max-width: 700px) {
  .tunel { height: 230svh; }
}
@media (max-width: 560px) {
  .hero__reel-wrap { top: 44%; width: calc(100vw - var(--pad) * 2); }
  .hero__acciones .btn { padding: 13px 20px; font-size: 13px; }
  .hero__meta { display: none; }
}

/* Sin movimiento: no hay pasillo, se muestra el reel directo */
.is-quieta.tunel { height: auto; }
.is-quieta .tunel__escena { position: relative; height: 100svh; }
.is-quieta .tunel__pasillo, .is-quieta .tunel__pista { display: none; }

/* Sin loop, la portada se acerca muy despacio */
@media (prefers-reduced-motion: no-preference) {
  .reel__media--fija img { animation: acerca 18s ease-in-out infinite alternate; }
}
@keyframes acerca {
  from { scale: 1.02; }
  to { scale: 1.12; }
}

/* Cursor ------------------------------------------------------------------ */
.cursor { position: fixed; left: 0; top: 0; z-index: 210; pointer-events: none; }
.cursor span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--pop);
  color: var(--tinta);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .08em;
  line-height: 1;
  transform: scale(0);
  transition: transform .35s var(--ease);
}
.cursor.is-on span { transform: scale(1); }
.has-cursor .reel, .has-cursor .fila .card, .has-cursor .work-grid .card { cursor: none; }

/* Intro ------------------------------------------------------------------- */
.palabra { opacity: .15; transition: opacity .35s var(--ease); }
.palabra.is-on { opacity: 1; }
.home-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--pad);
  padding: calc(var(--seccion) + 20px) var(--pad) var(--seccion);
}
.home-intro .lead {
  grid-column: 2 / span 7;
  font-size: clamp(24px, 2.7vw, 40px);
  line-height: 1.38;
  max-width: 24em;
}
.home-intro__accion { grid-column: 9 / span 4; align-self: end; }
@media (max-width: 860px) {
  .home-intro .lead, .home-intro__accion { grid-column: 1 / -1; }
}

/* Fila de reels ------------------------------------------------------------- */
.fila { padding-bottom: var(--seccion); }
.fila__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 0 var(--pad) 32px;
}
.fila__track {
  display: flex;
  gap: clamp(12px, 1.4vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  padding: 0 var(--pad) 12px;
  scrollbar-width: none;
}
.fila__track::-webkit-scrollbar { display: none; }
.fila__track .card {
  flex: none;
  scroll-snap-align: start;
  position: relative;
  transform-origin: 50% 40%;
  transition: transform .5s var(--ease), opacity .4s var(--ease), filter .4s var(--ease);
}
/* La última tarjeta se alinea al borde derecho para poder llegar hasta el final */
.fila__track .card:last-child { scroll-snap-align: end; }
/* Flechas para recorrer la fila; se centran sobre los videos */
.fila__marco { position: relative; }
.fila__flecha {
  position: absolute;
  top: calc(22px + clamp(340px, 33vw, 500px) / 2);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pop);
  color: var(--tinta);
  font-size: 22px;
  font-weight: 700;
  transform: translateY(-50%);
  box-shadow: 0 12px 30px -12px rgba(30, 10, 14, .5);
  transition: transform .3s var(--ease), background-color .2s;
}
.fila__flecha--der { right: calc(var(--pad) - 8px); }
.fila__flecha--izq { left: calc(var(--pad) - 8px); }
.fila__flecha:hover { background: var(--pop-claro); transform: translateY(-50%) scale(1.08); }
@media (max-width: 700px) {
  .fila__flecha { width: 44px; height: 44px; font-size: 18px; }
}
/* La tarjeta activa crece y las demás se atenúan; la fila deja aire para que no se corte */
.fila__track { padding-top: 22px; padding-bottom: 20px; }
.fila__track .card.is-activa { transform: scale(1.06); z-index: 2; }
.fila__track:has(.card.is-activa) .card:not(.is-activa) { opacity: .5; filter: saturate(.6); }
.media__preview {
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.card.is-sonando .media__preview { opacity: 1; }
.fila__track .media { height: clamp(340px, 33vw, 500px); width: auto; }
.fila__track .card--h .card__info { max-width: none; }
.fila__track .card__info { max-width: calc(clamp(340px, 33vw, 500px) * 9 / 16); }

/* Puertas ------------------------------------------------------------------ */
.puertas { padding: 0 var(--pad) var(--seccion); }
.puerta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 32px;
  padding: clamp(22px, 3vw, 40px) clamp(0px, 1vw, 16px);
  border-top: 1.5px solid var(--tinta);
  text-decoration: none;
  transition: background-color .3s var(--ease), padding .4s var(--ease), color .3s;
}
.puerta:last-child { border-bottom: 1.5px solid var(--tinta); }
.puerta__nombre { font-size: clamp(44px, 8.6vw, 150px); line-height: .85; }
.puerta__detalle { text-align: right; padding-bottom: .4em; }
.puerta__desc { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.3; }
.puerta__count { margin-top: 6px; color: var(--fg-soft); }
.puerta:hover { background: var(--pop); padding-inline: clamp(12px, 2vw, 32px); }
.puerta:hover .puerta__count { color: var(--tinta); }
@media (max-width: 640px) {
  .puerta { grid-template-columns: 1fr; }
  .puerta__detalle { text-align: left; padding-bottom: 0; }
}

/* ==========================================================================
   FOOTER · créditos finales
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--butaca);
  color: var(--crema);
  --fg: var(--crema);
  --bg: var(--butaca);
  --fg-soft: var(--crema-suave);
  --line: rgba(255, 244, 226, .2);
  padding: var(--seccion) var(--pad) 28px;
}
.room-dark .site-footer { border-top: 1.5px solid var(--line); }
.footer__top { text-align: center; padding-bottom: var(--seccion); }
.footer__cta { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.6vw, 36px); }
.footer__llamado {
  display: inline-block;
  margin-top: 18px;
  font-weight: 700;
  font-size: clamp(28px, 6.4vw, 104px);
  letter-spacing: -.04em;
  line-height: 1.05;
  text-decoration: underline;
  text-decoration-color: var(--pop);
  text-decoration-thickness: .07em;
  text-underline-offset: .14em;
  overflow-wrap: anywhere;
  transition: color .25s;
}
.footer__llamado:hover { color: var(--acento); }
.footer__flecha { display: inline-block; transition: transform .35s var(--ease); }
.footer__llamado:hover .footer__flecha { transform: translateX(.15em); }
.page-contacto .footer__top { display: none; }

.creditos { display: grid; gap: 18px; max-width: 880px; margin: 0 auto; }
.creditos__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: baseline;
}
.creditos__rol { text-align: right; color: var(--fg-soft); }
.creditos__valor { font-family: var(--serif); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.4; text-decoration: none; }
a.creditos__valor:hover { text-decoration: underline; text-decoration-color: var(--pop); text-underline-offset: 4px; }
.creditos__sub { display: block; margin-top: 2px; font-family: var(--sans); font-size: 13px; color: var(--fg-soft); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: var(--seccion);
  padding-top: 22px;
  border-top: 1.5px solid var(--line);
  font-size: 13px;
  color: var(--fg-soft);
}
.footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom a:hover { color: var(--acento); }
/* Enlaces del footer: al menos 24 px de alto para tocarlos con el dedo */
.site-footer .creditos__valor, .footer__bottom a { display: inline-block; min-height: 24px; padding-block: 3px; }

/* ==========================================================================
   TRABAJO
   ========================================================================== */
.work-hero {
  position: relative;
  height: clamp(440px, 78svh, 820px);
  overflow: hidden;
}
.work-hero__tira {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56%;
  display: flex;
  justify-content: center;
  gap: 0;
}
.work-hero__tira > * { flex: none; height: 100%; }
.work-hero__tira .media { height: 100%; border-radius: 0; }
.franjas {
  width: clamp(36px, 5vw, 80px);
  background: repeating-linear-gradient(180deg, var(--pop) 0 18%, transparent 18% 33%);
  background-position: 0 30%;
}
.work-hero h1 {
  position: absolute;
  left: 0; right: 0;
  bottom: 30%;
  z-index: 2;
  text-align: center;
  font-size: clamp(64px, 18.5vw, 340px);
  color: var(--crema);
  text-shadow: 0 6px 40px rgba(70, 7, 15, .35);
}

.work-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px var(--pad);
  align-items: end;
  padding: clamp(56px, 9vh, 104px) var(--pad) clamp(28px, 4vh, 44px);
}
.work-intro__resumen { color: var(--fg-soft); text-align: right; }
@media (max-width: 960px) {
  .work-intro { grid-template-columns: 1fr; }
  .work-intro__resumen { text-align: left; }
}

/* Barra de filtros: se queda fija arriba mientras recorres las secciones */
.work-filtros {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px var(--pad);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.chip__n { margin-left: 4px; opacity: .6; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__n { opacity: .75; }
@media (max-width: 700px) {
  /* En celular los filtros se deslizan de lado en una sola línea */
  .work-filtros .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
  .work-filtros .chips::-webkit-scrollbar { display: none; }
  .work-filtros .chip { flex: none; }
}

.work-grid { padding: clamp(36px, 6vh, 64px) var(--pad) var(--seccion); }
.work-seccion + .work-seccion { margin-top: clamp(72px, 12vh, 140px); }
.work-seccion { animation: seccion-in .6s var(--ease) both; }
.work-seccion:nth-child(2) { animation-delay: .06s; }
.work-seccion:nth-child(3) { animation-delay: .12s; }
@keyframes seccion-in { from { opacity: 0; transform: translateY(18px); } }
.work-seccion__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.work-seccion__n { color: var(--acento); font-size: 14px; font-variant-numeric: tabular-nums; }
.work-seccion__nota { flex-basis: 100%; color: var(--fg-soft); font-size: 13.5px; }

/* Mosaico: columnas donde verticales y horizontales se acomodan sin huecos */
.work-seccion__grid {
  columns: 4;
  column-gap: clamp(14px, 2vw, 28px);
}
.work-seccion__grid--h { columns: 3; }
.work-seccion__grid .card {
  position: relative;
  break-inside: avoid;
  margin-bottom: clamp(28px, 4vh, 44px);
  transform-origin: 50% 40%;
  transition: transform .5s var(--ease), opacity .4s var(--ease), filter .4s var(--ease);
}
/* Virales: una fila ordenada por vistas */
.work-seccion--virales .work-seccion__grid {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.work-seccion--virales .card { margin-bottom: 0; }
@media (max-width: 1100px) {
  .work-seccion__grid { columns: 3; }
  .work-seccion__grid--h { columns: 2; }
  .work-seccion--virales .work-seccion__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .work-seccion__grid { columns: 2; column-gap: 12px; }
  .work-seccion__grid--h { columns: 1; }
  .work-seccion__grid .card { margin-bottom: 24px; }
  .work-seccion--virales .work-seccion__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
}
/* Igual que en el inicio: la activa crece y reproduce, las demás de su sección se atenúan */
.work-seccion__grid .card.is-activa { transform: scale(1.035); z-index: 2; }
.work-seccion__grid:has(.card.is-activa) .card:not(.is-activa) { opacity: .5; filter: saturate(.6); }
.work-vacio { padding: 40px 0; }
.work-vacio p { margin-bottom: 18px; }

/* Franja de números en las tarjetas virales */
.card__metricas {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 72px 12px 12px;
  /* Degradado alto y oscuro: tapa los subtítulos quemados del video para que los números se lean */
  background: linear-gradient(transparent, rgba(23, 6, 10, .78) 45%, rgba(23, 6, 10, .94));
  color: var(--crema);
  pointer-events: none;
}
.card__vistas { font-size: 13px; letter-spacing: .02em; }
.card__vistas b { font-size: clamp(20px, 1.9vw, 28px); font-weight: 800; letter-spacing: -.02em; margin-right: 2px; }
.card__resto {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 11.5px;
  line-height: 1.4;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease);
}
.card.is-activa .card__resto, .card:focus-visible .card__resto { max-height: 4em; opacity: .9; margin-top: 4px; }

/* Números completos en la ventana y en la página del proyecto */
.metricas { margin-top: 28px; }
.metricas__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metricas__lista dt { color: var(--fg-soft); margin-bottom: 4px; font-size: 11px; }
.metricas__lista dd { font-weight: 800; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ventana .metricas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.metricas__lista div:first-child dd { color: var(--acento); }
.metricas__nota { margin-top: 10px; color: var(--fg-soft); font-size: 12.5px; }
@media (max-width: 420px) { .metricas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ventana del proyecto ----------------------------------------------------- */
.ventana {
  width: 100vw; height: 100svh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: var(--crema);
  overflow: hidden;
  --fg: var(--crema);
  --fg-soft: var(--crema-suave);
  --line: rgba(255, 244, 226, .2);
}
.ventana[open] { display: grid; place-items: center; }
.ventana::backdrop {
  background: rgba(23, 6, 10, .8);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  animation: ventana-fondo .45s var(--ease);
}
.ventana.is-saliendo::backdrop { opacity: 0; transition: opacity .4s var(--ease); }
@keyframes ventana-fondo { from { opacity: 0; } }
.ventana__caja {
  display: grid;
  grid-template-columns: auto minmax(0, 420px);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: calc(100vw - var(--pad) * 2 - 120px);
  max-height: 100svh;
  padding: 72px 0 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.ventana__caja::-webkit-scrollbar { display: none; }
.ventana__asa { display: none; }
.ventana__media {
  position: relative;
  height: min(82svh, 880px);
  aspect-ratio: var(--ar, 9 / 16);
  max-width: 100%;
  border-radius: var(--radio);
  overflow: hidden;
  background: #000;
  transform-origin: 0 0;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .7);
}
.ventana--h .ventana__caja { grid-template-columns: minmax(0, 1fr); max-width: min(1100px, calc(100vw - var(--pad) * 2 - 120px)); align-items: start; }
.ventana--h .ventana__media { height: auto; width: 100%; }
.ventana--h .ventana__info { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-auto-flow: dense; gap: 0 clamp(24px, 4vw, 56px); align-items: start; }
.ventana--h .ventana__info > :not(.ventana__ficha, .metricas, .nota-ia, .ventana__acciones) { grid-column: 1; }
.ventana--h .ventana__info > :is(.ventana__ficha, .metricas, .nota-ia, .ventana__acciones) { grid-column: 2; }
.ventana--h .ventana__info > :is(.metricas, .ventana__ficha):first-of-type { margin-top: 0; }
.ventana__media > video, .ventana__media > .player { position: absolute; inset: 0; width: 100%; height: 100%; }
.ventana__media > video { object-fit: contain; background: #000; }
.ventana__media .player { aspect-ratio: auto; }
.ventana__info { min-width: 0; }
.ventana.is-entrando .ventana__info { animation: ventana-info .6s var(--ease) .18s both; }
@keyframes ventana-info { from { opacity: 0; transform: translateY(14px); } }
.ventana.is-saliendo .ventana__info, .ventana.is-saliendo .ventana__flecha, .ventana.is-saliendo .ventana__cerrar { opacity: 0; transition: opacity .2s; }
.ventana__sobre { color: var(--acento); }
.ventana__titulo {
  margin-top: 12px;
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .95;
  font-size: clamp(32px, 3.6vw, 56px);
  overflow-wrap: anywhere;
}
.ventana__cliente { margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: 18px; }
.ventana__sinopsis { margin-top: 20px; font-size: 15.5px; line-height: 1.6; color: var(--crema-suave); }
.ventana__ficha { margin-top: 28px; padding-top: 22px; }
.ventana .nota-ia { margin-top: 22px; }
.ventana__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.ventana__cerrar {
  position: fixed; top: 18px; right: var(--pad); z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 16px;
  border: 1.5px solid var(--crema); border-radius: 999px; background: rgba(23, 6, 10, .3);
  color: var(--crema);
  font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
}
.ventana__cerrar span:last-child { font-size: 20px; line-height: .6; font-weight: 400; }
.ventana__cerrar:hover { background: var(--crema); color: var(--tinta); }
.ventana__flecha {
  position: fixed; top: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--pop); color: var(--tinta);
  font-size: 20px; font-weight: 700;
  transform: translateY(-50%);
  transition: transform .3s var(--ease), background-color .2s;
}
.ventana__flecha:hover { background: var(--pop-claro); transform: translateY(-50%) scale(1.08); }
.ventana__flecha--izq { left: var(--pad); }
.ventana__flecha--der { right: var(--pad); }
.ventana-abierta { overflow: hidden; }

@media (max-width: 860px) {
  /* Celular: hoja que se puede arrastrar hacia abajo para cerrar */
  .ventana[open] { place-items: end center; }
  .ventana::backdrop { opacity: var(--arrastre, 1); }
  .ventana__caja,
  .ventana--h .ventana__caja {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    width: 100%;
    max-width: none;
    max-height: calc(100svh - 64px);
    padding: 14px var(--pad) 48px;
    align-items: start;
    background: var(--butaca);
    border-radius: 20px 20px 0 0;
  }
  .ventana__asa { display: block; justify-self: center; width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 244, 226, .35); }
  .ventana__media { height: auto; width: min(100%, 52svh * 9 / 16); justify-self: center; }
  .ventana--h .ventana__media { width: 100%; }
  .ventana--h .ventana__info { display: block; }
  .ventana--h .ventana__ficha { margin-top: 28px; }
  .ventana__cerrar { top: 14px; }
  /* Las flechas van arriba, junto a Cerrar, para no tapar el texto */
  .ventana__flecha { top: 12px; transform: none; width: 40px; height: 40px; font-size: 17px; }
  .ventana__flecha:hover { transform: scale(1.05); }
  .ventana__flecha--izq { left: var(--pad); }
  .ventana__flecha--der { left: calc(var(--pad) + 50px); right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .work-seccion, .ventana::backdrop, .ventana.is-entrando .ventana__info { animation: none; }
}

/* ==========================================================================
   PROYECTO
   ========================================================================== */
.proyecto { padding: clamp(24px, 5vh, 56px) var(--pad) var(--seccion); }
.proyecto__volver { margin-bottom: clamp(28px, 5vh, 56px); }
.proyecto__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: start;
}
.proyecto--h .proyecto__layout { grid-template-columns: 1fr; }
.proyecto--v .player { height: min(82svh, 860px); max-width: 100%; margin-left: auto; }
.proyecto--h .player { width: 100%; }
.proyecto__texto { padding-top: 8px; }
.proyecto--h .proyecto__texto {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 32px clamp(32px, 6vw, 110px);
}
.proyecto__titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 84px);
  line-height: 1.04;
  letter-spacing: -.02em;
}
.proyecto__sinopsis { margin-top: 24px; font-size: 17px; line-height: 1.75; max-width: 36em; color: var(--fg); }
.ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1.5px solid var(--line);
}
.ficha dt { color: var(--fg-soft); margin-bottom: 4px; }
.ficha dd { font-size: 16px; line-height: 1.4; }
.nota-ia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 28px;
  font-size: 15px;
}
.proyecto__creditos { margin-top: 44px; }
.proyecto__creditos h2 { margin-bottom: 18px; color: var(--fg-soft); }
.proyecto__creditos .creditos { margin: 0; }
.proyecto--h .proyecto__creditos { margin-top: 0; }
@media (max-width: 860px) {
  .proyecto__layout, .proyecto--h .proyecto__texto { grid-template-columns: 1fr; }
  .proyecto--v .player { height: auto; width: min(100%, 420px); margin: 0 auto; }
}

.siguiente {
  display: block;
  padding: clamp(40px, 7vh, 80px) var(--pad);
  border-top: 1.5px solid var(--line);
  text-decoration: none;
}
.siguiente__nombre {
  display: block;
  margin-top: 14px;
  font-size: clamp(40px, 8.4vw, 150px);
  line-height: .9;
  transition: color .25s;
}
.siguiente:hover .siguiente__nombre { color: var(--acento); }

/* Reproductor con portada (facade) ----------------------------------------- */
.player {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  background: #000;
  aspect-ratio: var(--ar, 9 / 16);
}
.player > .media { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player--instagram { background: #fff; aspect-ratio: 9 / 18; }
.player__play {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  border: 0; background: rgba(30, 10, 14, .08);
  transition: background-color .3s;
}
.player__play:hover { background: rgba(30, 10, 14, .2); }
.player__circulo {
  display: grid; place-items: center;
  width: clamp(64px, 7vw, 92px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pop);
  color: var(--tinta);
  transition: transform .35s var(--ease);
}
.player__play:hover .player__circulo { transform: scale(1.08); }
.player__circulo .btn__play { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; margin-left: 5px; }
.player__externo {
  position: absolute; left: 50%; bottom: 24px; z-index: 3;
  transform: translateX(-50%);
  white-space: nowrap;
}
.slate {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; gap: 10px;
  padding: 10%;
  text-align: center;
  background: rgba(23, 16, 15, .62);
  color: var(--crema);
}
.slate strong { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 28px); }
.slate span { font-size: 14px; color: var(--crema-suave); max-width: 26em; }

/* Modo cine ---------------------------------------------------------------- */
.cine {
  width: 100vw; height: 100svh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(23, 6, 10, .96);
  color: var(--crema);
}
.cine::backdrop { background: transparent; }
.cine[open] { display: grid; place-items: center; animation: cine-in .35s var(--ease); }
@keyframes cine-in { from { opacity: 0; } }
.cine__frame { position: relative; }
.cine__frame--v { height: min(86svh, 920px); aspect-ratio: 9 / 16; max-width: 92vw; }
.cine__frame--h { width: min(92vw, calc(86svh * 16 / 9)); aspect-ratio: 16 / 9; }
.cine__frame .player { width: 100%; height: 100%; aspect-ratio: auto; }
.cine__cerrar {
  position: absolute; top: 18px; right: var(--pad); z-index: 2;
  padding: 9px 16px;
  border: 1.5px solid var(--crema); border-radius: 999px; background: transparent;
  color: var(--crema);
  font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
}
.cine__cerrar:hover { background: var(--crema); color: var(--tinta); }

/* ==========================================================================
   FOTOGRAFÍA
   ========================================================================== */
.photo-head { padding: clamp(32px, 7vh, 80px) var(--pad) 0; }
.photo-head h1 { font-size: clamp(44px, 13vw, 240px); }
.photo-head .lead { margin: clamp(20px, 3vh, 36px) 0 clamp(28px, 4vh, 44px); }

/* Historia de la serie elegida */
.foto-intro { padding: clamp(28px, 5vh, 56px) var(--pad) clamp(24px, 4vh, 44px); }
.foto-intro__general { color: var(--fg-soft); font-size: 15px; }
.foto-intro__caja { max-width: 46em; animation: seccion-in .55s var(--ease) both; }
.foto-intro__lugar { color: var(--acento); }
.foto-intro__titulo {
  margin-top: 10px;
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .95;
  font-size: clamp(34px, 5vw, 72px);
}
.foto-intro__texto { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; }

/* Mosaico: cada foto en su proporción real */
.foto-mosaico {
  columns: 4;
  column-gap: clamp(10px, 1.4vw, 20px);
  padding: 0 var(--pad) var(--seccion);
  animation: seccion-in .6s var(--ease) both;
}
.foto-mosaico button {
  display: block;
  width: 100%;
  margin-bottom: clamp(10px, 1.4vw, 20px);
  padding: 0;
  border: 0;
  background: none;
  break-inside: avoid;
  cursor: zoom-in;
}
.foto-mosaico .media { border-radius: 6px; }
.foto-mosaico .media img { transition: transform .8s var(--ease), filter .4s var(--ease); }
.foto-mosaico button:hover .media img { transform: scale(1.035); filter: brightness(1.06); }
@media (max-width: 1100px) { .foto-mosaico { columns: 3; } }
@media (max-width: 700px) { .foto-mosaico { columns: 2; } }

/* Visor de fotos: mismo fondo desenfocado y botones que la ventana de Trabajo */
.visor {
  width: 100vw; height: 100svh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: var(--crema);
  overflow: hidden;
}
.visor::backdrop {
  background: rgba(23, 6, 10, .86);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  opacity: var(--arrastre, 1);
  animation: ventana-fondo .45s var(--ease);
}
.visor.is-saliendo::backdrop { opacity: 0; transition: opacity .4s var(--ease); }
.visor[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.visor__figura { display: grid; place-items: center; min-height: 0; padding: 72px 96px 12px; touch-action: pan-y; }
.visor__figura img { max-width: 100%; max-height: calc(100svh - 170px); object-fit: contain; border-radius: 4px; transform-origin: 0 0; box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .7); }
.visor__pie {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 18px;
  padding: 14px var(--pad) 26px;
  text-align: center;
}
.visor.is-entrando .visor__pie { animation: ventana-info .5s var(--ease) .2s both; }
.visor.is-saliendo .visor__pie, .visor.is-saliendo .ventana__flecha, .visor.is-saliendo .ventana__cerrar { opacity: 0; transition: opacity .2s; }
.visor__alt { font-family: var(--serif); font-style: italic; font-size: 18px; }
.visor__meta { font-size: 13px; color: var(--crema-suave); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .visor__figura { padding: 64px 10px 8px; }
  .visor__figura img { max-height: calc(100svh - 160px); }
  .visor .ventana__flecha { top: 12px; transform: none; width: 40px; height: 40px; font-size: 17px; }
  .visor .ventana__flecha:hover { transform: scale(1.05); }
  .visor .ventana__flecha--der { left: calc(var(--pad) + 50px); right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .foto-intro__caja, .foto-mosaico, .visor::backdrop, .visor.is-entrando .visor__pie { animation: none; }
}

/* ==========================================================================
   SOBRE MÍ
   ========================================================================== */
.about-head { padding: clamp(32px, 7vh, 80px) var(--pad) 0; }
.about-head h1 { font-size: clamp(72px, 16vw, 290px); }
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
  padding: clamp(56px, 10vh, 120px) var(--pad) var(--seccion);
}
.retrato { position: relative; max-width: 440px; justify-self: center; width: 100%; margin: 0; }
.retrato .media {
  border-radius: 4px;
  transform: rotate(-2.5deg);
  box-shadow: 0 30px 50px -28px rgba(30, 10, 14, .6);
}
.retrato .media img { object-position: 50% 70%; }
/* Etiqueta tipo claqueta debajo de la foto */
.retrato__claqueta {
  display: inline-flex;
  margin-top: 22px;
  padding: 7px 12px;
  border-radius: 4px;
  background: var(--tinta);
  color: var(--crema);
  transform: rotate(-2.5deg);
  transform-origin: left center;
}
/* "Escena 01", "Escena 02"…: la etiqueta de rodaje sobre cada sección */
.escena { display: flex; align-items: center; gap: 10px; color: var(--acento); margin-bottom: 18px; }
.escena::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.creditos-banda .escena { justify-content: center; }

/* Cifras para reclutadores */
.cifras { padding: 0 var(--pad) var(--seccion); }
.cifras__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1.5px solid var(--tinta);
  border-bottom: 1.5px solid var(--line);
}
.cifra { padding: clamp(22px, 4vh, 40px) clamp(12px, 2vw, 28px); }
.cifra + .cifra { border-left: 1.5px solid var(--line); }
.cifra dt { font-weight: 800; font-size: clamp(44px, 6vw, 92px); letter-spacing: -.045em; line-height: .9; color: var(--acento); font-variant-numeric: tabular-nums; }
.cifra dd { margin-top: 10px; max-width: 14em; color: var(--fg-soft); font-size: 15px; line-height: 1.4; }
@media (max-width: 860px) {
  .cifras__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra:nth-child(3) { border-left: 0; }
  .cifra:nth-child(n + 3) { border-top: 1.5px solid var(--line); }
}
.about-intro h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.08; letter-spacing: -.02em; }
.historia { margin-top: 28px; display: grid; gap: 18px; max-width: 34em; }
.historia p { font-family: var(--serif); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.8; }
.disponible { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 15px; }
.disponible::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pop); box-shadow: 0 0 0 4px rgba(255, 122, 0, .2); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 860px) {
  .about-intro { grid-template-columns: 1fr; }
  .retrato { max-width: 320px; }
}

.principios, .servicios { padding: 0 var(--pad) var(--seccion); }
.principios__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 3vw, 48px);
  margin-top: clamp(32px, 5vh, 56px);
}
.principio { padding-top: 22px; border-top: 1.5px solid var(--tinta); }
.principio h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.25; }
.principio p { margin-top: 12px; color: var(--fg-soft); max-width: 28em; }
@media (max-width: 860px) { .principios__grid { grid-template-columns: 1fr; } }

.servicios__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(32px, 5vh, 56px);
  border-top: 1.5px solid var(--tinta);
}
.servicios__lista li {
  padding: 18px 0;
  border-bottom: 1.5px solid var(--line);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 30px);
  letter-spacing: -.02em;
  line-height: 1.2;
}
@media (max-width: 640px) { .servicios__lista { grid-template-columns: 1fr; } }

.creditos-banda {
  position: relative;
  background: var(--butaca);
  color: var(--crema);
  --fg: var(--crema);
  --bg: var(--butaca);
  --fg-soft: var(--crema-suave);
  --line: rgba(255, 244, 226, .2);
  padding: var(--seccion) var(--pad) 0;
  text-align: center;
}
.creditos-banda h2 { font-size: clamp(72px, 15vw, 260px); }
.creditos-banda .lead { margin: 22px auto 0; }
.creditos-banda .creditos { margin-top: clamp(48px, 8vh, 88px); gap: 26px; text-align: left; }
.creditos-banda .creditos__rol { font-family: var(--serif); font-size: clamp(16px, 1.35vw, 20px); color: var(--crema); text-transform: none; letter-spacing: 0; }
.creditos-banda .creditos__valor { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--crema); }
.creditos__logro { display: block; margin-top: 5px; max-width: 30em; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--crema-suave); }
@media (max-width: 640px) {
  /* En celular cada trabajo va en una columna: empresa y fechas, luego puesto y logro */
  .creditos-banda .creditos { gap: 30px; }
  .creditos-banda .creditos__fila { grid-template-columns: 1fr; gap: 8px; }
  .creditos-banda .creditos__rol { text-align: left; }
  .creditos-banda .creditos__sub { display: block; margin-top: 2px; }
}
.creditos-banda .creditos__sub { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.creditos-extra { margin-top: clamp(56px, 9vh, 96px); }
.creditos-extra h3 { color: var(--fg-soft); margin-bottom: 14px; }
.herramientas { display: grid; gap: 18px; }
.herramientas__nombre { margin-bottom: 6px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--pop-claro); }
.creditos-extra--dos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 80px); max-width: 1000px; margin-inline: auto; text-align: left; }
.lista-simple { display: grid; gap: 10px; }
.lista-simple li { font-size: 15px; line-height: 1.45; }
@media (max-width: 760px) { .creditos-extra--dos { grid-template-columns: 1fr; } }
.lista-linea { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; max-width: 900px; margin: 0 auto; }
.lista-linea--serif li { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.4vw, 21px); }
.creditos-banda .acciones { justify-content: center; margin-top: clamp(56px, 9vh, 96px); }
.creditos-banda .btn--pop { padding: 18px 30px; font-size: 15px; }
.cv-nota { display: block; margin-top: 10px; font-size: 13px; color: var(--fg-soft); }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-head { padding: clamp(32px, 7vh, 80px) var(--pad) 0; }
.contact-head h1 { font-size: clamp(76px, 18vw, 330px); }
.contacto {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(48px, 7vw, 120px);
  padding: clamp(48px, 8vh, 96px) var(--pad) var(--seccion);
}
.contacto__email {
  display: inline-block;
  margin-top: 36px;
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 54px);
  letter-spacing: -.035em;
  line-height: 1.1;
  text-decoration: underline;
  text-decoration-color: var(--pop);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
  overflow-wrap: anywhere;
}
.contacto__email:hover { color: var(--acento); }
.contacto__copiar { margin-top: 18px; }
.contacto .disponible { margin-top: 32px; }
.redes { margin-top: 48px; }
.redes h2 { color: var(--fg-soft); margin-bottom: 8px; }
.redes a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1.5px solid var(--line);
  text-decoration: none;
  transition: padding .3s var(--ease), color .2s;
}
.redes a:hover { padding-inline: 8px; color: var(--acento); }
.redes strong { font-weight: 600; font-size: 18px; }
.redes span { color: var(--fg-soft); font-size: 14px; }

.form { display: grid; gap: 26px; align-content: start; }
.campo { display: grid; gap: 6px; }
.campo label { color: var(--fg-soft); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: 400 17px/1.5 var(--sans);
  transition: border-color .2s;
}
.campo select {
  appearance: none;
  -webkit-appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFF4E2' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.campo select option { color: var(--tinta); }
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--pop); }
.form .btn { justify-self: start; margin-top: 8px; }
.form__estado { min-height: 1.6em; font-size: 15px; }
.form__aviso { margin-top: 14px; font-size: 13px; color: var(--fg-soft); }
.form__aviso a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form__aviso a:hover { color: var(--fg); }

/* Aviso de privacidad */
.aviso { padding: clamp(32px, 7vh, 80px) var(--pad) var(--seccion); }
.aviso h1 { font-size: clamp(44px, 9vw, 150px); }
.aviso__texto { display: grid; gap: 34px; max-width: 46em; margin-top: clamp(40px, 7vh, 80px); }
.aviso__bloque h2 { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.aviso__bloque p { margin-top: 10px; font-family: var(--serif); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.75; }
.oculto { display: none; }
@media (max-width: 860px) { .contacto { grid-template-columns: 1fr; } }

/* ==========================================================================
   404
   ========================================================================== */
.p404 {
  min-height: 72svh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 28px;
  padding: var(--seccion) var(--pad);
}
.p404 h1 {
  font-size: clamp(60px, 12vw, 210px);
  text-decoration: line-through;
  text-decoration-color: var(--pop);
  text-decoration-thickness: .09em;
}

/* ==========================================================================
   Transiciones entre páginas y movimiento reducido
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .25s ease both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Ajustes ------------------------------------------------------------------ */
/* Los correos largos se parten en lugar de ensanchar la página en celular */
.contacto__email, .creditos__valor { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.puerta__desc, .puerta__count { display: block; }
.page-sobre .site-footer { border-top: 1.5px solid rgba(255, 244, 226, .2); }
@media (max-width: 700px) {
  .work-hero { height: 58svh; min-height: 400px; }
  .work-hero__tira { height: 62%; justify-content: flex-start; }
  .work-hero h1 { bottom: 34%; }
}
[data-fit] { white-space: nowrap; }
.work-hero h1[data-fit] { padding-inline: var(--pad); }
.p404 { grid-template-columns: minmax(0, 1fr); }
.p404 h1 { justify-self: stretch; min-width: 0; }