/* ============================================================
   GUSTAVO CHOURIO — Portfolio
   Dark · Minimal · Typography-driven
   ============================================================ */

:root {
  /* Palette */
  --bg: #0a0a0a;
  --bg-2: #101010;
  --bg-3: #161616;
  --ink: #f2efe9;
  --ink-dim: #b5b0a6;
  --muted: #6f6b63;
  --line: rgba(242, 239, 233, 0.12);

  /* Project accents */
  --brand: #ffffff;       /* acento de marca — monocromo blanco (sin azul ni amarillo) */
  --gold: #c9a24b;        /* dorado — SOLO para el caso Anuel AA (LLNM) */
  --green: #43e06e;       /* Trap Island — verde neón del press kit */
  --red: #e04141;         /* SOBR3NATURAL — rojo L3TRA */
  --teal: #57c7bb;        /* categoría Identidad */
  --violet: #a58bfa;      /* categoría Video IA */
  --magenta: #ef6fae;     /* SUPER-ARTE */
  --coral: #f7845e;       /* Come Back */
  --amber: #caa04a;       /* Natti Natasha — No Quiero Saber (títulos) */
  --jhayco: #d94a4a;      /* Jhayco — Ropa Interior (propuesta) */
  --vrais: #ef2b4f;       /* Les Vrais — Champagne (identidad, carmesí de marca) */
  --beginnings: #a12b28;  /* The Beginnings — Anuel x SpiffTV (rojo oxblood vintage) */
  --flowmania: #e2a828;   /* Flowmania — SpiffTV (dorado WWE) */
  --yetsi: #79b8dd;       /* Yetsi — Sunset (identidad de artista, chrome azul Y2K) */
  --cartas: #e01f2d;      /* Cartas Coleccionables — Anuel (rojo Real Hasta La Muerte) */
  --platino: #bfc4cc;     /* Disco Multiplatino — Anuel (platino/plata) */
  --rickross: #d9a441;    /* Rick Ross — el oro del trono y la iconografía MMG */
  --chynonacho: #b3242b;  /* Chyno & Nacho — el rojo del fondo de "Is Back" */
  --nenstv: #35c5d8;      /* Nens TV — el turquesa del logo y del Caribe */

  /* Type */
  --font-display: 'Clash Display', 'Arial Narrow', sans-serif;
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-serif: 'Zodiak', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Scale */
  --site-max: 1760px;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --nav-h: 100px;
  --player-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Sin selección ni copia de texto (global) + sin cursor de texto ---------- */
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Excepción: los campos del formulario deben poder escribirse/seleccionarse */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: auto;
}
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--brand); color: #0a0a0a; }

/* Scrollbar minimalista */
html { scrollbar-width: thin; scrollbar-color: rgba(242,239,233,0.22) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(242, 239, 233, 0.18);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(242, 239, 233, 0.32); }

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -4%); }
  60% { transform: translate(-3%, -2%); }
  80% { transform: translate(4%, 2%); }
}

/* ---------- Typography helpers ---------- */
.label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.015em;
}

/* Split-line reveal */
.reveal-lines .line {
  display: block;
  overflow: hidden;
  /* Aire para las tildes de las mayúsculas (Á, Ó, Ñ…): con line-height 0.92
     sobresalen del line-box y el overflow:hidden las recortaba. */
  padding-top: 0.18em;
  margin-top: -0.18em;
}
.reveal-lines .line > span {
  display: block;
  transform: translateY(130%);
}
.no-js .reveal-lines .line > span,
.reduced-motion .reveal-lines .line > span { transform: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  z-index: 900;
}
/* Velo negro degradado: oscurece el borde superior para que el logo y el menú
   no choquen con lo que pasa por detrás; se desvanece suavemente hacia abajo
   (no es una barra sólida ni glass). */
.nav::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 118%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 34%, rgba(0,0,0,0.28) 68%, rgba(0,0,0,0) 100%);
  z-index: -1;
  pointer-events: none;
}
.nav a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  padding: 0.5rem 0;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.2rem;
  width: 100%; height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* El PNG del logo tiene ~9.9% de margen transparente a la izquierda; lo compensamos
   para que el glifo visible quede alineado con el borde del contenido (título). */
.nav__brand img { height: 88px; width: auto; transform: translateX(-9.9%); }
.nav__brand::after { display: none; }
.nav__right { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); }
.nav__burger { display: none; }  /* solo visible en móvil (ver @media 700px) */

/* ---------- Reproductor de música (persistente, todo el site) ---------- */
.gc-player {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: auto;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: var(--player-h);
  padding: 0 var(--gutter);
  background: rgba(14, 14, 14, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(242, 239, 233, 0.12);
  color: var(--ink);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
}
/* Contenedor del cover: recorta el destello que barre por encima */
.gc-player__coverwrap {
  position: relative;
  width: 50px; height: 50px; flex: 0 0 50px;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(242, 239, 233, 0.16);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.3, 1), border-color 0.3s;
}
.gc-player__cover {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Destello diagonal que barre el cover cada pocos segundos → señala que es clicable */
.gc-player__coverwrap::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 60%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-260%) rotate(18deg);
  animation: gcCoverSheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gcCoverSheen {
  0%   { transform: translateX(-260%) rotate(18deg); }
  16%  { transform: translateX(360%) rotate(18deg); }
  100% { transform: translateX(360%) rotate(18deg); }
}
.gc-player__coverwrap:hover { transform: scale(1.08); border-color: rgba(242, 239, 233, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .gc-player__coverwrap::after { animation: none; opacity: 0; }
}
.gc-player__info { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; width: clamp(150px, 24vw, 320px); }
.gc-player__song { font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-player__album { font-size: 0.68rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-player__artist { font-size: 0.66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tiempo en vivo: transcurrido / duración total */
.gc-player__time {
  display: inline-flex; align-items: center; gap: 5px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-dim);
  white-space: nowrap; flex: 0 0 auto;
}
.gc-player__time .gc-player__cur { color: var(--ink); }
.gc-player__time .gc-player__sep { opacity: 0.5; }
/* progreso: línea fina full-width en el borde superior de la barra */
.gc-player__progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; margin: 0; background: rgba(242, 239, 233, 0.15); cursor: pointer; }
.gc-player__played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink); }
/* controles centrados en la barra */
.gc-player__ctrls { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; }
/* Volumen empujado a la derecha, pero con aire antes del tiempo (queda un poco a la izquierda del final) */
.gc-player__vol { margin-left: auto; margin-right: clamp(1.4rem, 3.5vw, 2.6rem); display: flex; align-items: center; gap: 6px; }
.gc-player__btn { color: var(--ink); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; transition: background 0.2s; }
.gc-player__btn svg { width: 20px; height: 20px; }
.gc-player__btn--play svg { width: 24px; height: 24px; }
.gc-player__btn:hover { background: rgba(242, 239, 233, 0.14); }
.gc-player__volslider {
  -webkit-appearance: none; appearance: none;
  width: 96px; height: 4px; border-radius: 4px;
  background: rgba(242, 239, 233, 0.22);
  outline: none; cursor: pointer;
}
.gc-player__volslider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink); border: none; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.gc-player__volslider::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink); border: none; cursor: pointer;
}
.gc-player__volslider::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(242, 239, 233, 0.22); }
.gc-player__volslider::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ink); }
/* ---------- Botón "subir al inicio" (aparece al bajar) ---------- */
.gc-totop {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--player-h) + clamp(0.9rem, 2vw, 1.5rem));
  z-index: 940;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(14, 14, 14, 0.86);
  border: 1px solid rgba(242, 239, 233, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background 0.2s;
}
.gc-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.gc-totop:hover { background: var(--ink); color: #0a0a0a; }
.gc-totop svg { width: 20px; height: 20px; }

@media (max-width: 700px) {
  .gc-player { gap: 0.35rem; }
  .gc-player__ctrls { position: static; transform: none; margin-left: auto; gap: 2px; }
  /* Control de volumen en móvil: se muestra el BOTÓN de silencio (funciona en iOS
     y Android). El deslizador queda fuera: no cabe en la barra y además en iOS el
     volumen por JS no tiene efecto — ahí lo gobiernan los botones físicos. */
  .gc-player__vol { display: flex; margin-left: 0; margin-right: 0; }
  .gc-player__volslider { display: none; }
  /* Botones y tiempo más compactos para que el botón de volumen no le robe
     espacio al título de la canción (se quedaba en 30px, ilegible). */
  .gc-player__btn { width: 34px; height: 34px; }
  .gc-player__btn svg { width: 18px; height: 18px; }
  .gc-player__btn--play svg { width: 21px; height: 21px; }
  .gc-player__time { font-size: 0.66rem; gap: 3px; }
  .gc-player__info { width: clamp(90px, 42vw, 200px); }
  .gc-totop { width: 42px; height: 42px; }
}
/* Espacio inferior: la barra fija del reproductor no tapa el contenido/footer */
body { padding-bottom: var(--player-h); }

/* Lightbox de carátula (clic en el cover) */
.gc-lightbox {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gc-lightbox.is-open { opacity: 1; visibility: visible; }
.gc-lightbox__inner { position: relative; perspective: 1800px; }
.gc-flip {
  position: relative;
  width: min(88vw, 80vh, 1500px); aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.gc-flip.is-flipped { transform: rotateY(180deg); }
.gc-flip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
}
.gc-flip__back { transform: rotateY(180deg); }
.gc-flip__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-lightbox__flip {
  position: absolute; bottom: -58px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 30px;
  background: rgba(242, 239, 233, 0.1); border: 1px solid rgba(242, 239, 233, 0.25);
  color: var(--ink); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.gc-lightbox__flip svg { width: 16px; height: 16px; }
.gc-lightbox__flip:hover { background: rgba(242, 239, 233, 0.2); }
.gc-lightbox__flip[hidden] { display: none; }
.gc-lightbox__close {
  position: absolute; top: clamp(16px, 3vh, 30px); right: clamp(16px, 3vw, 30px);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s;
  z-index: 2;
}
.gc-lightbox__close:hover { transform: scale(1.07); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader img {
  width: min(364px, 65vw);
  opacity: 0;
}
/* Intro en vídeo (logo animado). Va recortado con el mismo encuadre que el PNG,
   así comparte medida. 'screen' hace que el negro del vídeo desaparezca sobre
   el fondo #0a0a0a: sin ese blend se vería el rectángulo del vídeo. */
.preloader__video {
  width: min(364px, 65vw);
  height: auto;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ---------- Transición SPA: fantasma que se disuelve (sin negro) ----------
   Capa fija con el clon del <main> anterior; queda POR DEBAJO del nav (900) y
   del reproductor (950) para que esos no parpadeen, y se desvanece revelando
   la página nueva que ya está montada debajo. */
.spa-ghost {
  position: fixed;
  inset: 0;
  z-index: 500;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
  opacity: 1;
  transform: translateY(0);
  will-change: transform;
  /* Barrido (wipe): la captura de la página saliente se desliza hacia arriba y
     revela la página nueva ya montada debajo. Es OPACO en todo momento → nunca
     se superponen las dos páginas (sin "doble exposición"), sin negro, sin salto. */
  transition: transform 0.62s cubic-bezier(0.76, 0, 0.24, 1);
}
.spa-ghost--out { transform: translateY(-100%); }
.spa-ghost__content { position: absolute; top: 0; left: 0; width: 100%; }
.spa-ghost > main { position: absolute; top: 0; left: 0; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .spa-ghost { transition: none; opacity: 0; }
}

/* ---------- Page fade ---------- */
.page-fade {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 2500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.page-fade.active { opacity: 1; pointer-events: all; }
/* (Se eliminó el cobertor negro de entrada `html.pf-in .page-fade{opacity:1}`:
   el usuario NO quiere ningún fundido desde negro al cargar/navegar. Las páginas
   aparecen directo con su contenido.) */

/* ---------- Language toggle ---------- */
.lang-toggle {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 2rem;
  padding: 0.4rem 0.9rem;
  transition: background 0.3s, color 0.3s;
}
.lang-toggle:hover {
  background: #fff;
  color: #000;
}

/* ---------- Promo pop-up (Replika Studio) — banner glass centrado ---------- */
.promo-pop {
  position: fixed;
  left: 50%;
  bottom: calc(var(--player-h) + clamp(0.9rem, 2vw, 1.5rem));
  width: min(720px, calc(100vw - 2rem));
  z-index: 1500;
  transform: translate(-50%, calc(100% + 2.5rem));
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.promo-pop.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.promo-pop__inner {
  display: block;
  position: relative;
  flex: 1;
  min-width: 0;
}
.promo-pop__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.promo-pop__media img,
.promo-pop__media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.promo-pop__media img { animation: kenburns 14s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.15) translate(2.5%, -2.5%); }
}
.promo-pop__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.85), rgba(8, 8, 8, 0.45) 55%, rgba(8, 8, 8, 0.7));
}
.promo-pop__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding: 1.5rem 3.2rem 1.5rem 1.7rem;
  min-height: 150px;
}
.promo-pop__logo {
  flex-shrink: 0;
  height: clamp(20px, 2.2vw, 26px);
  width: auto;
  display: block;
}
.promo-pop__body p {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.promo-pop__cta { flex-shrink: 0; white-space: nowrap; }
.promo-pop__cta {
  display: inline-block;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 0.25rem;
  transition: border-color 0.3s;
}
.promo-pop__inner:hover .promo-pop__cta { border-color: #fff; }
.promo-pop__inner:hover .promo-pop__media img { animation-play-state: paused; }
.promo-pop__close {
  position: absolute;
  top: 0.65rem; right: 0.65rem;
  width: 30px; height: 30px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1;
  color: #fff;
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(6px);
  z-index: 2;
  transition: background 0.3s;
}
.promo-pop__close:hover { background: rgba(8, 8, 10, 0.85); }
.reduced-motion .promo-pop { transition: opacity 0.3s; }
.reduced-motion .promo-pop.is-visible { transform: translate(-50%, 0); }
.reduced-motion .promo-pop__media img { animation: none; }
@media (max-width: 600px) {
  .promo-pop__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 1.1rem 2.6rem 1.2rem 1.2rem;
    min-height: 0;
  }
  .promo-pop__body p { font-size: 0.75rem; }
}

/* ---------- Botón flotante de volver (páginas de proyecto) ---------- */
.back-fab {
  position: fixed;
  top: calc(var(--nav-h) + 1.1rem);
  left: var(--gutter);
  z-index: 890;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.2rem;
  border-radius: 3rem;
  background: rgba(8, 8, 8, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s;
}
.back-fab:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); }
.back-fab svg { width: 15px; height: 15px; }

/* ---------- Categorías: 4 tarjetas iguales tipo PÓSTER (página de trabajo) ----------
   Formato retrato a todo el alto, imagen con zoom en hover. Encabezado compacto
   + tarjetas + "Ver todo" en UNA pantalla sin scroll. */
.cat-select {
  padding: 0 var(--gutter) clamp(2rem, 5vh, 3.5rem);
  max-width: var(--site-max);
  margin: 0 auto;
}
.cat-select > .label { display: block; margin-bottom: 1.2rem; }
.cat-banners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.7rem, 1.4vw, 1.15rem);
}
.cat-banner {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(300px, 54vh, 560px);
  overflow: hidden;
  border-radius: 4px;
  text-align: left;
}
.cat-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.3, 1);
}
.cat-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.12) 30%, rgba(6, 6, 6, 0.8) 100%);
  transition: background 0.4s;
}
.cat-banner:hover img { transform: scale(1.07); }
.cat-banner__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2vw, 1.8rem);
}
.cat-banner__content i {
  font-style: normal;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
}
.cat-banner__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.5vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.3s;
}
.cat-banner:hover .cat-banner__title { color: #fff; } /* sin color de acento: siempre blanco */
.cat-banner__cta {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
  transition: color 0.3s, border-color 0.3s;
}
.cat-banner:hover .cat-banner__cta { color: #fff; border-color: #fff; }
.cat-select .cat-all {
  display: inline-block;
  margin-top: clamp(1.2rem, 3vh, 2rem);
  background: none;
}

/* Encabezado compacto (work): título en una línea para no empujar las tarjetas.
   Doble clase para ganarle a las reglas genéricas de .page-head (definidas después). */
.page-head.page-head--compact {
  padding: calc(var(--nav-h) + clamp(1.8rem, 4.5vh, 3rem)) var(--gutter) clamp(1.4rem, 3.5vh, 2.4rem);
}
.page-head.page-head--compact h1 { font-size: clamp(2rem, 5.5vw, 5rem); }
.page-head.page-head--compact .label { margin-bottom: 1rem; }

/* Tablet y móvil: 2 columnas (en tablet, 4 pósters quedaban muy angostos) */
@media (max-width: 900px) {
  .cat-banners { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  /* En móvil los pósters son más compactos */
  .cat-banner { height: clamp(180px, 30vh, 260px); }
}

/* Estado vacío: categoría sin proyectos aún (pantalla completa, centrado) */
.slides-empty {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
  padding: var(--gutter);
}
.slides-empty[hidden] { display: none; }
.slides-empty .label { color: var(--muted); }
.slides-empty p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  color: var(--ink-dim);
  max-width: 20ch;
}

/* Vista de casos dentro de una categoría */
.work-grid-wrap.grid-hidden { display: none; }
.work-grid-wrap:not(.grid-hidden) { animation: gridIn 0.7s ease both; }
@keyframes gridIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 2.2rem;
}
.grid-head__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  text-transform: uppercase;
  color: var(--ink);
}
.grid-head .link-arrow { background: none; }

/* ============================================================
   HOME
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 7rem;
  position: relative;
  overflow: hidden;
}
.hero > .hero__head { position: relative; z-index: 1; align-self: flex-start; width: max-content; max-width: 100%; }

/* Slideshow de fondo a pantalla completa */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Primera imagen como fondo CSS: el home muestra la foto de inmediato (sin
     pantalla negra) mientras el JS monta el slideshow encima. */
  background: center / cover no-repeat url("../assets/img/bg/1-1920.webp");
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* oscurece los lados (donde va el título y el párrafo) dejando el centro con la cara despejada */
    linear-gradient(90deg, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.12) 34%, rgba(8, 8, 8, 0.12) 66%, rgba(8, 8, 8, 0.82) 100%),
    linear-gradient(rgba(6, 6, 6, 0.35), rgba(6, 6, 6, 0.3) 55%, var(--bg)),
    rgba(6, 6, 6, 0.18);
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  opacity: 0;
  transition: opacity 1.5s ease;
  will-change: transform, opacity;
}
@media (max-width: 700px) {
  /* Recortes verticales ya centrados en la cara → object-position center */
  .hero__slide { object-position: center center; }
}
.hero__slide.is-active {
  opacity: 1;
  animation: heroZoom 9s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
.reduced-motion .hero__slide.is-active { animation: none; }
/* Etiquetas centradas bajo el título (respecto a su ancho) */
.hero__kicker {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
  display: flex;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}
.hero__kicker .label {
  color: var(--ink);
  position: relative;
  padding: 0 clamp(1rem, 2.4vw, 2rem);
}
/* línea vertical simétrica entre etiquetas */
.hero__kicker .label + .label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.05em;
  background: rgba(242, 239, 233, 0.4);
}
.hero__title {
  font-size: clamp(2.2rem, 7.65vw, 8rem);
  color: var(--ink);
  text-align: left;
}
.hero__title .copy {
  display: inline-block;
  font-size: 0.16em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: top;
  margin-left: 0.5em;
  transform: translateY(0.35em);
  color: var(--ink-dim);
}
/* Párrafo — a la derecha (hasta el botón de idioma), centrado y centrado vertical */
.hero__aside {
  position: absolute;
  right: var(--gutter);
  top: 0;
  bottom: 0;
  width: min(46ch, 46vw);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 1;
  pointer-events: none;
}
.hero__aside p {
  max-width: 46ch;
  text-align: left;
  color: var(--ink-dim);
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.6;
  pointer-events: auto;
}

/* Explora — justificado abajo, centrado */
.hero__meta {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 3rem);
  transform: translateX(-50%);
  z-index: 1;
}
@media (max-width: 900px) {
  .hero > .hero__head { width: 100%; }
  .hero__kicker {
    position: static;
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
    margin-top: 1.6rem;
  }
  .hero__aside {
    position: static;
    width: 100%;
    display: block;
    margin-top: 2rem;
  }
  .hero__aside p { text-align: left; max-width: 46ch; }
  .hero__meta {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 2.5rem;
  }
}
/* ===== HERO MÓVIL (≤700px): texto anclado al FONDO para no tapar la cara =====
   La foto queda despejada arriba; el degradado oscurece solo la parte baja donde
   va el texto. (No afecta desktop ni tablet.) */
@media (max-width: 700px) {
  .hero {
    justify-content: flex-end;
    align-items: center;      /* centrar horizontalmente todo el contenido */
    text-align: center;
    /* Máxima separación posible del reproductor SIN que el texto suba hasta el
       rostro: entre la barbilla (70%) y la barra hay ~181px y el bloque ocupa ~158. */
    padding-bottom: clamp(5.5rem, 11.2vh, 7rem);
  }
  /* Fondo CSS de respaldo también en versión vertical (evita ver la landscape al cargar).
     Sin escalar: el vertical encaja exacto en altura y se muestra completo. */
  .hero__bg { background-image: url("../assets/img/bg/1-mobile.webp?v=2"); }
  .hero__bg::after {
    background:
      linear-gradient(to bottom,
        rgba(6, 6, 6, 0.10) 0%,
        rgba(6, 6, 6, 0.26) 40%,
        rgba(6, 6, 6, 0.80) 74%,
        var(--bg) 100%);
  }
  /* El bloque se ajusta al ANCHO DEL TÍTULO para que los 3 roles ocupen exactamente
     ese mismo ancho debajo (cada uno toma un tercio → los separadores caen justo
     en los tercios). Especificidad .hero > … para ganarle a la regla de ≤900px. */
  .hero > .hero__head { width: fit-content; margin-left: auto; margin-right: auto; }
  .hero__title { text-align: center; font-size: 2.96rem; line-height: 1.02; }
  /* Los 3 roles reparten el ancho del título en TERCIOS EXACTOS (min-width:0 evita
     que el más largo se ensanche): así los separadores caen justo en 1/3 y 2/3,
     centrados entre los textos, en vez de pegarse a una etiqueta. */
  .hero__kicker {
    margin-top: 0.55rem;
    width: 100%;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .hero__kicker .label {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 0.4rem;
    letter-spacing: 0.02em;
    padding: 0;
  }
  .hero__aside { margin-top: 0.55rem; }
  .hero__aside p {
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  /* El indicador "Explora" se omite en vertical: ocupaba ~50px y era justo lo que
     empujaba el texto sobre el rostro (en la foto 2 la barbilla llega al 70%).
     En móvil el gesto de scroll es evidente, así que no se pierde nada. */
  .hero__meta { display: none; }
}
.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.hero__scroll:hover { color: var(--ink); }
.hero__scroll .scroll-circle {
  width: 52px; height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--ink);
  animation: bounceDown 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transition: border-color 0.3s, background 0.3s;
}
.hero__scroll:hover .scroll-circle {
  border-color: var(--brand);
  background: rgba(69, 196, 222, 0.1);
}
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}
.reduced-motion .hero__scroll .scroll-circle { animation: none; }

/* ---------- Project slides ---------- */
.slides { position: relative; }

.slide {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.slide__bg {
  position: absolute; inset: -12% 0;
  z-index: 0;
}
.slide__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Zoom extra para que no se lean los títulos impresos en las carátulas.
     Propiedad `scale` (no transform): el parallax GSAP usa transform y no debe pisarla. */
  scale: 1.45;
}
.slide__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(6, 6, 6, 0.62);
}
.slide__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 var(--gutter);
  max-width: var(--site-max);
}
.slide__tags {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1.4rem;
}
.slide__tags span {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent, var(--ink));
}
.slide__title {
  font-size: clamp(2.6rem, 9.5vw, 10rem);
  color: var(--accent, var(--ink));
}
.slide__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.4rem;
  transition: border-color 0.3s, color 0.3s;
}
.slide__link:hover { color: var(--accent, var(--ink)); border-color: var(--accent, var(--ink)); }
.slide__soon {
  display: inline-block;
  margin-top: 2rem;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.slide__index {
  position: absolute;
  top: calc(var(--nav-h) + 1rem);
  left: var(--gutter);
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* Placeholder slides: outlined type on dark */
.slide--soon { background: var(--bg); }
.slide--soon:nth-child(odd) { background: var(--bg-2); }
.slide--soon .slide__title {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}
.slide--soon:hover .slide__title {
  color: var(--accent);
  -webkit-text-stroke: 0;
  transition: color 0.5s;
}

/* Trabajos ocultos hasta elegir categoría */
.slides--hidden { display: none; }
/* Los slides aparecen SIN fundido a/desde negro: elegir categoría o volver a
   categorías es un corte directo (el usuario NO quiere ningún fade negro entre
   secciones). Antes usaban un keyframe opacity 0→1 que revelaba el fondo negro. */
.cat-reveal { animation: none; }

/* Botón flotante volver a categorías */
.back-fab--cats { display: inline-flex; }
.back-fab--cats[hidden] { display: none; }

/* ============================================================
   SOBRE MÍ · pantallas negras (home)
   ============================================================ */
.intro-screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  background: var(--bg);
  overflow: hidden;
}
.intro-screen--alt { background: var(--bg-2); }
.intro-screen__inner {
  max-width: var(--site-max);
  margin: 0 auto;
  width: 100%;
}
.intro-screen .label { display: block; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.intro-screen--center .intro-screen__inner { text-align: center; }
.intro-screen--center .label { text-align: center; }
.intro-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
  word-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
}
.intro-statement em { font-style: normal; }
/* Revelado dinámico palabra por palabra (máscara) */
.intro-statement .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.14;
}
.intro-statement .w > span {
  display: inline-block;
  will-change: transform;
  /* mayoría (~70%) — sólidas */
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  -webkit-text-stroke: 0;
}
/* palabras marcadas <em> (conectoras: para, del, a la, y, con) — CONTORNO hueco:
   relleno transparente + trazo blanco. Contrastan con las palabras sólidas. */
.intro-statement .w--em > span {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.2px var(--ink);
}
.no-js .intro-statement .w > span,
.reduced-motion .intro-statement .w > span { transform: none !important; }
.intro-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.9vw, 1.7rem);
  color: var(--ink-dim);
  max-width: 42ch;
  line-height: 1.5;
}

/* Trayectoria · texto izq + foto anclada al borde inferior (con parallax) */
.trayec-section { position: relative; padding-bottom: 0; overflow: hidden; background: var(--bg); }
.trayec-section .intro-screen__inner { position: relative; z-index: 2; }
/* Columna de texto: ancho calibrado para 5 líneas justificadas en desktop ancho.
   El tope 44vw evita que el texto invada la foto en pantallas medianas. */
.trayec__text { max-width: min(67ch, 44vw); text-align: center; }
.trayec-section .intro-lead {
  max-width: min(67ch, 44vw);
  color: var(--ink);
  text-align: center;
}

/* Fondo: slideshow de imágenes con zoom suave tipo Netflix (Ken Burns).
   Las imágenes son cinemascope (1920x872) con franjas negras; el zoom base
   las recorta para que no se vean. */
.trayec__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.trayec__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Oscurece más el lado izquierdo (donde va el texto) y funde el borde inferior con el fondo */
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.93) 0%, rgba(8, 8, 8, 0.6) 40%, rgba(8, 8, 8, 0.32) 68%, rgba(8, 8, 8, 0.5) 100%),
    linear-gradient(rgba(8, 8, 8, 0.4), rgba(8, 8, 8, 0.35) 55%, var(--bg));
}
.trayec__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease;
  will-change: transform, opacity;
}
.trayec__slide.is-active {
  opacity: 1;
  animation: trayecZoom 9s ease-out forwards;
}
@keyframes trayecZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}
.reduced-motion .trayec__slide.is-active { animation: none; transform: scale(1.06); }
.trayec__photo {
  position: absolute;
  right: clamp(0px, 3vw, 70px);
  bottom: -50px;
  height: calc(90% + 50px);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.trayec__photo img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: bottom;
}
@media (max-width: 900px) {
  /* Móvil: la foto va A SANGRE (borde a borde, anulando el gutter de la sección)
     y su base se funde en el fondo con una máscara. Antes quedaba centrada y
     pequeña, flotando con mucho negro alrededor. */
  .trayec-section { padding-bottom: 0; }
  .trayec__text { max-width: 100%; }
  .trayec-section .intro-lead { text-align: center; }
  .trayec__photo {
    position: static;
    height: auto;
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    margin: clamp(2rem, 7vw, 3.5rem) calc(var(--gutter) * -1) 0;
    transform: none !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }
  .trayec__photo img { height: auto; width: 100%; display: block; }
}
.intro-collab-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.2vw, 3.6rem);
  line-height: 1.15;
  text-transform: none;
  max-width: 22ch;
}
.intro-stats {
  max-width: var(--site-max);
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--line);
  padding-top: clamp(2rem, 5vh, 3rem);
}
.intro-stats > div { display: flex; flex-direction: column; gap: 0.7rem; }
.intro-stats .stats__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1;
  color: var(--ink);
}
.intro-screen .marquee { margin-top: clamp(3rem, 8vh, 5rem); }

/* Mapa mundial · presencia global */
.world-screen { align-items: center; text-align: center; }
.world-head { text-align: center; }
.world-head .label { display: block; }
.world-head .intro-collab-title { margin: 0 auto; }
.world-map {
  width: 100%;
  max-width: 1100px;
  margin: clamp(1rem, 3vh, 2rem) auto 0;
}
.globe {
  position: relative;
  width: 100%;
  height: clamp(320px, 56vh, 620px);
}
.globe canvas { display: block; width: 100% !important; height: 100% !important; }
/* Etiqueta (línea guía + nombre) del país enfocado */
.globe-anno {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 3;
  opacity: 0; transition: opacity 0.35s ease;
}
.globe-anno.is-on { opacity: 1; }
.globe-anno line { stroke: rgba(242, 239, 233, 0.7); stroke-width: 1; }
.globe-anno circle { fill: #fff; }
.globe-anno text {
  fill: #f2efe9; font-family: var(--font-display); font-weight: 500;
  font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
}
.globe__fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* Móvil: contenedor cuadrado. Con un lienzo alto y angosto el globo quedaba
   pequeño y con mucho aire arriba/abajo; en cuadrado llena el espacio. */
@media (max-width: 900px) {
  .globe { height: auto; aspect-ratio: 1 / 1; }
}
.world-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  max-width: 900px;
  margin: clamp(1.5rem, 3.5vh, 2.5rem) auto 0;
}
.world-legend li {
  position: relative;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-left: 1rem;
  transition: color 0.3s;
}
.world-legend li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
}
.world-legend:hover li { color: var(--muted); }
.world-legend li:hover { color: #fff; }

/* Pantallas de collage (artistas / sellos): centradas, label arriba */
.collab-screen { align-items: center; text-align: center; }
.collab-screen > .label { display: block; }

/* Artistas · collage tipográfico simétrico (una pantalla) */
.artist-collage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.1em 0.55em;
  max-width: min(92vw, 1050px);
  margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
}
.artist-collage span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.5vw, 2.4rem);
  line-height: 1.12;
  text-transform: uppercase;
  color: #fff;
  transition: opacity 0.35s ease;
}
.artist-collage:hover span { opacity: 0.25; }
.artist-collage span:hover { opacity: 1; }

/* Sellos · grilla de logos (placeholder — reemplazar los <span> por <img> de los logos oficiales en blanco) */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  width: 100%;
  max-width: var(--site-max);
  margin: clamp(2rem, 5vh, 3rem) auto 0;
}
.logo-cell {
  background: var(--bg-2);
  min-height: clamp(88px, 13vh, 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: background 0.3s;
}
.logo-cell:hover { background: var(--bg-3); }
.logo-cell span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.82rem, 1.05vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  text-align: center;
  line-height: 1.15;
}
/* Logos reales: PNG en blanco con alfa, todos en el mismo lienzo (954×325) →
   con ancho uniforme quedan del mismo tamaño óptico. filter fuerza blanco puro.
   Layout LIMPIO: sin cuadrícula, flex-wrap centrado (la última fila se centra
   sola = diagramación dinámica), hover con escala. Sin sombras ni destellos. */
.logo-grid--img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(2.5rem, 4vw, 4.5rem) clamp(2.5rem, 5vw, 6rem);
  background: none;
  border: none;
  max-width: 1640px;   /* permite 4 logos por fila en pantallas grandes (16 → 4×4) */
}
.logo-grid--img .logo-cell {
  flex: 0 0 auto;
  width: clamp(204px, 23.4vw, 319px);   /* +20% adicional (base original 205px → 319px) */
  min-height: 0;
  padding: 0;
  background: none;
}
.logo-grid--img .logo-cell:hover { background: none; }
.logo-grid--img .logo-cell img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* blanco puro, sin glow */
  opacity: 0.78;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.4s ease;
  transform-origin: center;
  will-change: transform;
}
.logo-grid--img .logo-cell:hover img {
  opacity: 1;
  transform: scale(1.14);
}
@media (max-width: 900px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  /* Móvil: rejilla FIJA de 3 por fila (antes flex-wrap dejaba 1 por fila). */
  .logo-grid--img {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.6rem, 6vw, 2.6rem) clamp(0.9rem, 3.5vw, 1.6rem);
  }
  .logo-grid--img .logo-cell { width: auto; }
}

/* Reveal escalonado (data-stagger) */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
}
.no-js [data-stagger] > *,
.reduced-motion [data-stagger] > * { opacity: 1; transform: none; }

/* ============================================================
   CATEGORÍAS (home) — label fuera de las imágenes
   ============================================================ */
.cat-section {
  padding-top: clamp(3rem, 8vh, 5rem);
}
.cat-section__label {
  display: block;
  text-align: center;
  color: var(--ink-dim);
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.cat-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  min-height: 82svh;
}
.cat-panel {
  position: relative;
  overflow: hidden;
  min-height: 50svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(1.6rem, 3.5vw, 3.4rem);
  text-align: center;
  background: var(--bg);
}
.cat-panel img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.4;
  transform: scale(1.02);
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.5s;
}
.cat-panel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(rgba(8,8,8,0.4), rgba(8,8,8,0.82));
  transition: background 0.4s;
}
.cat-panel:hover img { transform: scale(1.09); opacity: 0.6; }
.cat-panel:hover::after { background: linear-gradient(rgba(8,8,8,0.25), rgba(8,8,8,0.65)); }
.cat-panel__num { display: none; }
.cat-panel__title {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.35s;
}
.cat-panel:hover .cat-panel__title { color: #fff; }
.cat-panel__cta {
  position: relative; z-index: 1;
  margin-top: 0.3rem;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s, transform 0.35s;
}
.cat-panel:hover .cat-panel__cta { opacity: 1; transform: translateY(0); }
@media (max-width: 700px) {
  .cat-split { grid-template-columns: 1fr; grid-template-rows: none; }
  .cat-panel { min-height: 42svh; }
  .intro-stats { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- Statement ---------- */
.statement {
  padding: clamp(7rem, 16vh, 12rem) var(--gutter);
  max-width: var(--site-max);
  margin: 0 auto;
}
.statement h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.2vw, 3.6rem);
  line-height: 1.15;
  text-transform: none;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
.statement h2 em {
  font-style: normal;
  color: var(--brand);
}
.statement .statement__link {
  display: inline-block;
  margin-top: 3rem;
}
.link-arrow {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 0.4rem;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
}
.link-arrow:hover::after {
  transform: scaleX(0.3);
  transform-origin: left;
}

/* ---------- Stats ---------- */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stats__item {
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--gutter);
  text-align: center;
}
.stats__item + .stats__item { border-left: 1px solid var(--line); }
.stats__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  line-height: 1;
  color: var(--ink);
}
.stats__item .label { margin-top: 0.9rem; display: block; }

/* ---------- Marquee ---------- */
.marquee-section {
  padding: clamp(6rem, 14vh, 10rem) 0;
  overflow: hidden;
}
.marquee-section .label { display: block; text-align: center; margin-bottom: 3rem; }
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4.5vw, 4rem);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 1.5rem;
  transition: color 0.3s;
}
.marquee__track span:hover { color: var(--ink); }
.marquee__track i {
  font-style: normal;
  color: var(--brand);
  font-size: clamp(0.9rem, 2vw, 1.6rem);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.reduced-motion .marquee__track { animation: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: clamp(6rem, 15vh, 11rem) var(--gutter) 7rem;
  border-top: 1px solid var(--line);
  position: relative;
}
/* El pie va centrado en todas las páginas: kicker, llamada, redes y meta.
   El centrado se limita a .footer porque .contact-meta / .footer__socials
   también viven en otras páginas; Contacto los centra en su propio bloque. */
.footer__inner { max-width: var(--site-max); margin: 0 auto; text-align: center; }
.footer .footer__socials { justify-content: center; }
.footer .contact-meta { justify-content: center; }
.footer .footer__blurb { margin-inline: auto; }
.footer .label { display: block; margin-bottom: 2rem; }
.footer__cta {
  /* El mínimo estaba en 2.6rem: en un móvil de 375px, "próximo proyecto" se
     salía 28px del contenedor y provocaba scroll horizontal en TODAS las
     páginas. Con 1.9rem la línea más larga entra con holgura. */
  font-size: clamp(1.9rem, 8.2vw, 9rem);
  color: var(--ink);
  display: inline-block;
}
.footer__cta:hover em { color: var(--brand); }
.footer__cta em { font-style: normal; transition: color 0.4s; }
.footer__row {
  margin-top: clamp(3rem, 8vh, 6rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer__email {
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.3rem;
  transition: color 0.3s, border-color 0.3s;
}
.footer__email:hover { color: var(--brand); border-color: var(--brand); }
.contact-page .footer__email:hover,
.contact-page .footer__socials a:hover { color: #fff; border-color: #fff; }
.contact-page ::selection { color: #0a0a0a; background: #f2efe9; }
.footer__meta {
  display: flex;
  gap: 2.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Bloque de contacto del footer (about) — igual que la página de Contacto */
.footer__title {
  font-size: clamp(2.6rem, 8.5vw, 8rem);
  line-height: 0.98;
  color: var(--ink);
  margin: 0 0 1.8rem;
}
.footer__blurb {
  color: var(--ink-dim);
  font-size: clamp(0.98rem, 1.3vw, 1.15rem);
  max-width: 44ch;
  margin: 0;
}
/* Redes del footer: íconos circulares EXACTAMENTE como la página de Contacto */
.footer__socials {
  display: flex;
  gap: 1rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}
.footer__socials a {
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.35s;
}
.footer__socials a svg { width: 30px; height: 30px; display: block; }
.footer__socials a:hover {
  background: var(--ink);
  color: #0a0a0a;
  border-color: var(--ink);
  transform: translateY(-5px);
}

/* ============================================================
   WORK PAGE
   ============================================================ */
.page-head {
  padding: calc(var(--nav-h) + clamp(4rem, 10vh, 8rem)) var(--gutter) clamp(3rem, 7vh, 5rem);
  max-width: var(--site-max);
  margin: 0 auto;
}
.page-head h1 {
  font-size: clamp(3rem, 10vw, 10.5rem);
}
/* "Sobre mí": cada línea completa en un solo renglón (VISIÓN, PLANIFICACIÓN /
   DISEÑO Y EJECUCIÓN). Tamaño ajustado a la línea más larga para que no corte. */
.page-head h1.ph-fit { font-size: clamp(1.3rem, 6.8vw, 8rem); }
.page-head h1.ph-fit .line > span { white-space: nowrap; }
.page-head .label { display: block; margin-bottom: 1.5rem; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.8rem;
  padding: 0 var(--gutter) 3rem;
  max-width: var(--site-max);
  margin: 0 auto;
}
.filters button {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  color: var(--muted);
  transition: color 0.3s;
  text-transform: uppercase;
}
.filters button:hover, .filters button.active { color: var(--ink); }

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.work-card {
  position: relative;
  background: var(--bg);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
}
.work-card__media {
  position: absolute; inset: 0;
}
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.3, 1);
}
.work-card:hover .work-card__media img { transform: scale(1.06); }
.work-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(transparent 55%, rgba(5,5,5,0.75));
}
.work-card--soon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
}
.work-card--soon .work-card__soon-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent, var(--muted));
  text-align: center;
  padding: 0 1.5rem;
  line-height: 1;
  transition: color 0.4s;
}
.work-card--soon:hover .work-card__soon-title { color: var(--accent); }
.work-card__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  z-index: 1;
}
.work-card__num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--muted);
}
.work-card__name {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  flex: 1;
}
.work-card__cta {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.work-card--soon .work-card__cta { color: var(--muted); }

/* ============================================================
   PROJECT PAGE
   ============================================================ */
.project-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--nav-h) + clamp(4rem, 10vh, 7rem)) var(--gutter) clamp(3rem, 8vh, 6rem);
  text-align: center;
}
/* Fondo de portada oscurecido: da continuidad desde el slide (con imagen) hacia
   el proyecto — evita el salto a NEGRO en la transición. Funde a --bg abajo. */
.project-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.project-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.85;
  transform: scale(1.06);
}
.project-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 8, 8, 0.32) 0%, rgba(8, 8, 8, 0.52) 62%, var(--bg) 100%);
}
.project-hero .slide__tags { margin-bottom: 1.8rem; }
.project-hero h1 {
  font-size: clamp(2.8rem, 10.5vw, 11.5rem);
  color: var(--accent, var(--ink));
  max-width: var(--site-max);
  margin: 0 auto;
}

/* El cuerpo del proyecto es UNA columna centrada. Dentro de ella, la primera
   fila se parte en texto (izquierda) + portada (derecha), y de ahí para abajo
   cada pieza ocupa el ancho completo del bloque, alineada a los mismos bordes.
   Antes la rejilla ocupaba todo el ancho de la ventana: en pantallas grandes
   el texto quedaba pegado al borde izquierdo y las imágenes al derecho, con un
   hueco muerto en medio. */
.project-body {
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: clamp(1rem, 2vw, 2rem);
  width: min(1280px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 0 clamp(4rem, 10vh, 8rem);
  align-items: start;
}
/* La columna de información NO se fija. Con el cuerpo a una sola columna
   centrada, las piezas a partir de la segunda ocupan el ancho completo y pasan
   por debajo de la columna: si esta se quedaba pegada arriba (sticky), acababa
   solapada por las imágenes y parecía que algo se había quedado congelado.
   Además, al fluir con el scroll se lee entera, que era el otro problema: fija
   y más alta que la ventana, su final no se veía hasta el final de la página. */
.project-side {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 0;
}
.project-side .block h3 {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, var(--muted));
  margin-bottom: 0.7rem;
}
.project-side .block p {
  font-size: 0.95rem;
  color: var(--ink-dim);
}
.project-side table { width: 100%; border-collapse: collapse; }
.project-side th, .project-side td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.project-side th {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  width: 38%;
  padding-right: 1rem;
}
.project-side td { color: var(--ink-dim); font-weight: 500; }

/* ============================================================
   LOGROS — sala de trofeos (logros.html)
   Cinco bloques: resumen, placa de platino, medallero, ranking de
   temas y vitrina de proyectos. Todo lo que se anima entra al
   aparecer en pantalla; con prefers-reduced-motion queda fijo.
   ============================================================ */
.awards { --awards-max: var(--site-max); }
/* Encabezado de Logros centrado, igual que Sobre mí y Proyectos. Va por
   .awards (la clase del <main>) para no arrastrar el de Proyectos, que
   comparte .page-head--compact. */
.awards .page-head { text-align: center; }
.awards-lead {
  max-width: 52ch;
  margin-top: 1.2rem;
  margin-inline: auto;
  color: var(--ink-dim);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
}

/* Encabezado de cada bloque: título corto + subtítulo en una línea */
.block-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  gap: 0.9rem 1.4rem;
  flex-wrap: wrap;
  max-width: var(--awards-max);
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 5rem) var(--gutter) clamp(1.1rem, 2.5vh, 1.6rem);
  border-bottom: 1px solid var(--line);
}
.block-head__t {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink);
}
.block-head__s {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- 1 · Resumen: las cuatro cifras de carrera ---------- */
.sumgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
  max-width: var(--awards-max);
  margin: clamp(1rem, 3vh, 2rem) auto 0;
  padding: 0 var(--gutter);
}
.sumcard {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(242, 239, 233, 0.045), transparent 70%);
  transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sumcard:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  transform: translateY(-3px);
}
/* Filete de acento arriba, crece al pasar el cursor */
.sumcard::before {
  content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 34%;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sumcard:hover::before { width: 100%; }
.sumcard__label {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
}
.sumcard__n {
  display: block; margin: 0.9rem 0 0.5rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 0.9;
  letter-spacing: -0.03em; color: var(--accent, var(--ink));
  font-variant-numeric: tabular-nums;              /* el conteo no baila */
}
.sumcard__foot {
  margin-top: auto; font-size: 0.76rem; color: var(--muted); line-height: 1.45;
}
@media (max-width: 980px) { .sumgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sumgrid { grid-template-columns: 1fr; } }

/* ---------- 2 · Muro de placas ----------
   Cada certificación se presenta como el objeto físico que es: marco
   metálico, passepartout, sombra proyectada y reflejo de cristal. El pie va
   debajo del cuadro, como la cartela de una galería. */
.wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;                         /* cartelas de distinto largo,
                                                  cuadros igual de altos */
  gap: clamp(1.6rem, 3vw, 2.8rem) clamp(1.2rem, 2.4vw, 2.2rem);
  max-width: var(--awards-max);
  margin-inline: auto;
  padding: clamp(2rem, 4vh, 3rem) var(--gutter) 0;
}
@media (max-width: 1100px) { .wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .wall { grid-template-columns: 1fr; } }

.plaque {
  display: flex; flex-direction: column; gap: 0.9rem;
  margin: 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.plaque.is-in { opacity: 1; transform: none; }
.plaque__frame {
  /* El marco: filo metálico por fuera, madera negra dentro */
  display: block; width: 100%;
  padding: clamp(7px, 0.9vw, 12px);
  border-radius: 3px;
  background:
    linear-gradient(145deg, #4a4d52 0%, #16181b 22%, #2c2f34 50%, #101215 78%, #3f4247 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.12) inset,
    0 26px 50px -16px rgba(0, 0, 0, 0.9),
    0 8px 20px rgba(0, 0, 0, 0.55);
  cursor: zoom-in;
  position: relative;
  /* Vuelta más rápida que la ida (0.3s frente a 0.55s): al saltar de una placa
     a la vecina, la anterior se baja y apaga antes de que la nueva termine de
     levantarse, así nunca se leen dos destacadas a la vez. */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Solo el cuadro bajo el cursor reacciona. El foco de teclado se marca con un
   aro aparte: si compartiera el efecto, la placa que abrió el visor se quedaba
   iluminada al cerrarlo y parecían dos encendidas a la vez. */
/* La sombra crece hacia abajo, no a lo ancho: con 80px de difuminado invadía
   la placa vecina y ensuciaba la lectura de cuál está activa. */
.plaque__frame:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.2) inset,
    0 34px 46px -22px rgba(0, 0, 0, 0.95),
    0 10px 22px rgba(0, 0, 0, 0.55);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.55s ease;
}
.plaque__frame:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
/* Passepartout: el borde que separa el arte del marco.
   overflow: hidden recorta el barrido de luz — sin él, al desplazarse se veía
   el canto del degradado como un corte diagonal sobre el cuadro. */
.plaque__mat {
  display: block; position: relative;
  padding: clamp(5px, 0.7vw, 9px);
  background: linear-gradient(160deg, #1c1e21, #0c0d0f);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.plaque__mat img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}
/* Sin capa de reflejo sobre el arte: cubría el cuadro entero y se leía como un
   "encendido" de fondo, difícil de atribuir a una sola placa. El único brillo
   es ahora el barrido de abajo, que cruza y se va. */
/* Barrido de luz: una banda inclinada que cruza el cuadro al pasar el cursor.
   Vive dentro del recorte del passepartout, así que entra y sale limpia. */
.plaque__glass {
  position: absolute; top: -15%; bottom: -15%; left: -75%;
  width: 45%; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 100%);
  transform: skewX(-14deg);
  /* SIN transición en reposo, a propósito: si la transición vive aquí, al
     retirar el cursor el barrido vuelve ANIMADO y cruza el cuadro otra vez
     durante 0.85s. Al pasar de una placa a la vecina, la que dejas seguía
     brillando de vuelta mientras la nueva brillaba de ida — dos encendidas a
     la vez. Así vuelve de golpe a -75%, fuera del recorte, sin verse. */
  transition: none;
}
.plaque__frame:hover .plaque__glass {
  left: 130%;
  transition: left 0.85s cubic-bezier(0.35, 0, 0.2, 1);
}
/* Lupa: aparece al pasar el cursor para anunciar que se amplía */
.plaque__zoom {
  position: absolute; right: clamp(10px, 1.2vw, 16px); bottom: clamp(10px, 1.2vw, 16px);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, 0.72); color: var(--ink);
  border: 1px solid rgba(242, 239, 233, 0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.plaque__zoom svg { width: 16px; height: 16px; }
.plaque__frame:hover .plaque__zoom,
.plaque__frame:focus-visible .plaque__zoom { opacity: 1; transform: none; }
/* La chapa se ilumina solo con el cursor sobre SU placa */

/* Cartela: como la de una galería — el galardón en una chapa, y debajo la obra
   y su autor. Los tres bloques separados para que se lean de un vistazo. */
.plaque__cap {
  --tono: #c2c7cf;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; text-align: center; padding: 0.35rem 0.4rem 0;
}
.plaque__cap--plat { --tono: #7fb6ff; }
.plaque__cap--oro  { --tono: #e6b53c; }
/* Chapa del galardón: el sello dentro de una píldora del tono del nivel, para
   que se lea como una etiqueta y no como una línea de texto más. */
.plaque__cert {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.72rem 0.3rem 0.34rem;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--tono) 34%, transparent);
  background: color-mix(in srgb, var(--tono) 9%, transparent);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tono);
  transition: border-color 0.35s ease, background 0.35s ease;
}
.plaque:hover .plaque__cert {
  border-color: color-mix(in srgb, var(--tono) 55%, transparent);
  background: color-mix(in srgb, var(--tono) 15%, transparent);
}
.plaque__sym {
  width: 28px; height: auto; flex-shrink: 0;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--tono) 45%, transparent));
}
.plaque__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.45vw, 1.28rem); line-height: 1.06;
  letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--ink);
  text-decoration: none; transition: color 0.3s ease;
  text-wrap: balance;                 /* reparte el título en líneas parejas */
  margin-top: 0.1rem;
}
a.plaque__title:hover { color: var(--tono); }
.plaque__artist {
  font-size: 0.78rem; color: var(--ink-dim); line-height: 1.35;
  text-wrap: balance;
}

/* Visor de la placa a tamaño completo */
.plaque-view {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vh, 2.5rem);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}
.plaque-view.is-open { opacity: 1; visibility: visible; }
.plaque-view img {
  max-width: min(96vw, 780px); max-height: 92vh;
  width: auto; height: auto; display: block;
  border-radius: 3px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85);
  transform: scale(0.96);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.plaque-view.is-open img { transform: none; }
.plaque-view__close {
  position: absolute; top: clamp(16px, 3vh, 30px); right: clamp(16px, 3vw, 30px);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s;
}
.plaque-view__close:hover { transform: scale(1.07); }

/* ---------- 3 · Medallero ----------
   Cinco fichas sueltas alineadas al grid de la página. Antes era una tabla a
   sangre que se salía del margen; ahora cada nivel es una tarjeta propia. */
.medals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  max-width: var(--awards-max);
  margin-inline: auto;
  padding: clamp(1.4rem, 3vh, 2rem) var(--gutter) 0;
}
.medal {
  --tono: #9aa1ab;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.7rem;
  padding: clamp(1.6rem, 3vw, 2.6rem) 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(242, 239, 233, 0.035), transparent 70%);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.35s ease, background 0.35s ease;
}
.medal.is-in { opacity: 1; transform: none; }
.medal:hover {
  border-color: color-mix(in srgb, var(--tono) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 10%, transparent), transparent 70%);
}
.medal--plat   { --tono: #7fb6ff; }
.medal--oro    { --tono: #e6b53c; }
.medal--plata  { --tono: #c2c7cf; }
.medal--bronce { --tono: #d4703a; }
.medal--hierro { --tono: #8b9099; }
/* El sello manda en la ficha: es lo primero que se lee. No gira al pasar el
   cursor — es un objeto acuñado, no un adorno; solo se acerca. */
.medal__coin {
  width: clamp(76px, 8vw, 124px); height: auto; display: block;
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--tono) 40%, transparent));
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}
.medal:hover .medal__coin {
  transform: translateY(-5px) scale(1.05);
  filter: drop-shadow(0 16px 34px color-mix(in srgb, var(--tono) 58%, transparent));
}
.medal__n {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.medal__label {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tono);
}
/* Son CINCO niveles: en 2 o 3 columnas sobraría una celda, así que en
   pantallas medianas se reparten con flex y la última fila queda centrada. */
@media (max-width: 860px) {
  .medals { display: flex; flex-wrap: wrap; justify-content: center; }
  .medal { flex: 1 1 28%; min-width: 132px; }
}

/* ---------- 4 · Temas certificados ----------
   Rejilla de fichas iguales. Con barras proporcionales, todo lo que no era el
   n.º 1 parecía insignificante; aquí cada tema se lee por sí mismo. */
.charts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  grid-auto-rows: 1fr;                         /* todas las fichas iguales */
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
  max-width: var(--awards-max);
  margin-inline: auto;
  padding: clamp(1.6rem, 3.5vh, 2.4rem) var(--gutter) 0;
}

/* Enlace al perfil completo. Botón ancho: cierra la sección y separa la
   rejilla del filete del bloque siguiente, que quedaba pegado. */
/* Mismo aire arriba y abajo: el botón queda centrado entre la rejilla y el
   filete del bloque de fuentes. */
.charts-cta {
  max-width: var(--awards-max);
  margin-inline: auto;
  padding-block: clamp(2.2rem, 5vh, 3.2rem);
  padding-inline: var(--gutter);
  display: flex; justify-content: center;
}
.bigbtn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  padding: 0.72rem 0.72rem 0.72rem clamp(1.6rem, 3.5vw, 2.8rem);
  border: 1px solid rgba(242, 239, 233, 0.22);
  border-radius: 999px;                        /* píldora completa */
  background: linear-gradient(180deg, rgba(242, 239, 233, 0.07), rgba(242, 239, 233, 0.02));
  color: var(--ink);
  font-size: clamp(0.76rem, 1vw, 0.9rem);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: border-color 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease;
}
/* El relleno claro entra desde el centro en lugar de aparecer de golpe */
.bigbtn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--ink);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bigbtn > * { position: relative; z-index: 1; transition: color 0.35s ease; }
/* La flecha vive en su propia moneda, al estilo de los botones del sitio */
.bigbtn__ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: clamp(38px, 4vw, 46px); aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(242, 239, 233, 0.1);
  transition: background 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bigbtn__ic svg { width: 17px; height: 17px; }
.bigbtn:hover,
.bigbtn:focus-visible {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}
.bigbtn:hover::before,
.bigbtn:focus-visible::before { transform: scaleX(1); }
.bigbtn:hover > *,
.bigbtn:focus-visible > * { color: #0a0a0a; }
.bigbtn:hover .bigbtn__ic,
.bigbtn:focus-visible .bigbtn__ic {
  background: rgba(10, 10, 10, 0.12);
  transform: translate(3px, -3px);
}
.trk {
  --tono: #c2c7cf;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'art body' 'foot foot';
  align-items: start;
  gap: 0.9rem;
  padding: clamp(0.9rem, 1.6vw, 1.2rem);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(242, 239, 233, 0.03), transparent 70%);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.35s ease;
}
.trk.is-in { opacity: 1; transform: none; }
.trk--plat { --tono: #7fb6ff; }
.trk--oro  { --tono: #e6b53c; }
.trk:hover { border-color: color-mix(in srgb, var(--tono) 50%, transparent); }
.trk__art {
  grid-area: art;
  display: block; width: clamp(54px, 5vw, 68px); aspect-ratio: 1;
  border-radius: 6px; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-2);
}
.trk__art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.9);
  transition: filter 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.trk:hover .trk__art img { filter: none; transform: scale(1.06); }
.trk__ph {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  color: color-mix(in srgb, var(--tono) 70%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tono) 16%, transparent), transparent 70%);
}
.trk__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; }
.trk__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.08;
  text-transform: uppercase; color: var(--ink);
}
.trk__artists { font-size: 0.76rem; color: var(--ink-dim); line-height: 1.35; }
.trk__role {
  margin-top: 0.15rem;
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
/* Pie de la ficha: los streams y la certificación, separados por un filete */
.trk__foot {
  grid-area: foot;
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  margin-top: 0.9rem; padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}
.trk__m {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
/* La certificación pesa tanto como la cifra de streams: va al mismo cuerpo
   visual, con el sello grande al lado. */
.trk__cert {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tono); white-space: nowrap;
}
.trk__sym {
  width: 26px; height: auto; flex-shrink: 0;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--tono) 45%, transparent));
}

/* La nota de fuentes va justo debajo del filete del último tema: sin este
   respiro superior el texto quedaba pegado a la línea. */
/* Respaldo de los datos. No es letra pequeña legal: es la prueba de que todas
   las cifras de arriba son comprobables, así que se lee sin esfuerzo. */
.awards-src {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.2rem, 2.5vw, 1.9rem);
  max-width: var(--awards-max);
  margin-inline: auto;
  padding: clamp(4rem, 9vh, 6.5rem) var(--gutter) clamp(5rem, 12vh, 9rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
/* El check de verificado lleva su propio color, así que la chapa va neutra:
   dos azules compitiendo apagarían el sello. */
.awards-src__label {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 1.15rem 0.5rem 0.75rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(242, 239, 233, 0.045);
  color: var(--ink);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.awards-src__label img {
  width: 26px; height: 26px; display: block; flex-shrink: 0;
  filter: drop-shadow(0 2px 7px rgba(29, 155, 240, 0.45));
}
/* Las fuentes, como sellos en fila: se leen de un vistazo y no compiten con el
   resto de la página. En pantallas estrechas se reparten en varias líneas. */
.awards-srcs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.55rem 0.6rem;
}
.awards-srcs li {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(242, 239, 233, 0.035);
  font-size: clamp(0.76rem, 1vw, 0.88rem);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.awards-note {
  max-width: 68ch; margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-dim);
  text-wrap: pretty;
}
/* Las precisiones técnicas: necesarias para no inducir a error, pero en menor
   jerarquía para que no le quiten fuerza al mensaje de arriba. */
.awards-fine {
  max-width: 78ch; margin: -0.3rem 0 0;
  font-size: 0.78rem; line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .medal, .trk, .plaque {
    opacity: 1; transform: none; transition: none;
  }
}

/* Enlace de prensa: tarjeta BLANCA — el logotipo de Rolling Stone es rojo con
   contorno negro y necesita fondo claro para leerse bien. Va a un sitio
   externo, así que la flecha diagonal lo anuncia. */
.press-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Red de seguridad para pantallas de 320px: el logo y el CTA no caben en una
     sola línea y el botón sacaba 30px de scroll horizontal. Al envolver, el
     CTA baja a su propia línea en vez de desbordar. */
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  background: #fff;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.press-link:hover,
.press-link:focus-visible {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.press-link__logo {
  display: block;
  width: 180px;
  max-width: 58%;
  height: auto;
  flex-shrink: 0;
}
.press-link__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b6b;
  transition: color 0.3s ease;
}
.press-link:hover .press-link__cta { color: #0a0a0a; }
.press-link__cta svg { width: 13px; height: 13px; }

/* La galería deja de ser una columna propia: con display:contents sus piezas
   pasan a ser celdas de la rejilla de .project-body. Así la primera acompaña
   al texto y el resto ocupa el ancho completo del bloque centrado.
   La separación entre piezas la da ahora el row-gap de .project-body. */
.project-gallery { display: contents; }
.project-gallery > * { grid-column: 1 / -1; }
.project-gallery > *:first-child { grid-column: 2; }
/* La portada cuadrada se limita al alto de la ventana, así que suele ser más
   estrecha que su celda: pegada al borde derecho cierra el bloque en la misma
   línea que las piezas de abajo, en vez de dejar un escalón. */
.project-gallery > .album-flip:first-child { margin-left: auto; margin-right: 0; }
.project-gallery figure {
  overflow: hidden;
  background: var(--bg-2);
}
.project-gallery img { width: 100%; height: auto; }
.project-gallery video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
/* Video con botón de play central; los controles nativos aparecen solo al reproducir */
.project-gallery .video-wrap { position: relative; overflow: hidden; }
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(64px, 7vw, 92px);
  height: clamp(64px, 7vw, 92px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.3, 1), background 0.35s, opacity 0.35s;
}
.video-play svg { width: 34%; height: 34%; margin-left: 8%; }
.video-play:hover { transform: scale(1.09); background: rgba(0, 0, 0, 0.58); }
.video-wrap.is-playing .video-play { opacity: 0; pointer-events: none; transform: scale(0.85); }

/* Portada oficial con giro 3D (frente ↔ tracklist) */
.album-flip {
  perspective: 1800px;
  /* La portada cuadrada completa (más el hint) debe caber en una pantalla:
     limitar el lado del cuadrado al alto libre del viewport. */
  width: min(100%, calc(100vh - var(--nav-h) - 10rem));
  margin: 0 auto;
}
.album-flip__card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.3, 0.8, 0.25, 1);
}
.album-flip.is-flipped .album-flip__card { transform: rotateY(180deg); }
.album-flip__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg-2);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.album-flip__face img { width: 100%; height: 100%; object-fit: cover; }
.album-flip__face--back { transform: rotateY(180deg); }
.album-flip__hint {
  display: block;
  margin-top: 0.9rem;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.album-flip:hover .album-flip__hint { color: var(--accent, var(--ink-dim)); }

/* Carátulas alternativas — ediciones especiales */
.alt-covers { display: flex; flex-direction: column; gap: 1.2rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.alt-covers__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}
.alt-covers__head h3 {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, var(--muted));
}
.alt-covers__head span {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.alt-covers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
.alt-covers__grid figure { cursor: zoom-in; }
.alt-covers__grid figure img { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.alt-covers__grid figure:hover img { transform: scale(1.04); }

/* ---------- Visor de carátulas alternativas ----------
   Abre la carátula a tamaño grande, gira a la contraportada (el tracklist del
   álbum, único para todas las ediciones), pasa a la siguiente y se cierra sin
   perder el sitio en la página. Misma familia visual que el visor de videos. */
.alt-stage {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; transition: opacity 0.32s ease;
}
.alt-stage[hidden] { display: none; }
.alt-stage.is-open { opacity: 1; }
.alt-stage__scrim {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(6, 6, 6, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.alt-stage__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(0.9rem, 2vw, 1.35rem);
  /* ancho explícito: sin él, el contenedor se ajusta al texto del pie y el
     'min(..., 100%)' de la carátula resolvía contra ese ancho diminuto */
  width: 100%;
}
/* el alto manda: la carátula cuadrada más el pie deben caber en la ventana */
.alt-stage__frame {
  perspective: 1800px;
  width: min(72vh, 100%, 860px);
}
.alt-stage__card {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  transform-style: preserve-3d; cursor: pointer;
  transition: transform 0.9s cubic-bezier(0.3, 0.8, 0.25, 1);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.alt-stage__card.is-flipped { transform: rotateY(180deg); }
.alt-stage__face {
  position: absolute; inset: 0; overflow: hidden; background: var(--bg-2);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.alt-stage__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alt-stage__face--back { transform: rotateY(180deg); }
.alt-stage__foot {
  display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.6rem);
  flex-wrap: wrap; justify-content: center;
  font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.alt-stage__count { color: var(--ink-dim); }
.alt-stage__hint { color: var(--muted); }
.alt-stage__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); z-index: 4;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(242, 239, 233, 0.3); background: rgba(10, 10, 10, 0.5); color: var(--ink);
  font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.alt-stage__close:hover { background: var(--ink); color: #0a0a0a; transform: scale(1.05); }
.alt-stage__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(242, 239, 233, 0.28); background: rgba(10, 10, 10, 0.45); color: var(--ink);
  font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, color 0.3s;
}
.alt-stage__nav:hover { background: var(--ink); color: #0a0a0a; }
.alt-stage__nav--prev { left: clamp(0.5rem, 2vw, 1.6rem); }
.alt-stage__nav--next { right: clamp(0.5rem, 2vw, 1.6rem); }
@media (max-width: 700px) {
  .alt-stage__frame { width: min(62vh, 100%); }
  .alt-stage__nav { width: 46px; height: 46px; }
}

.next-project {
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  text-align: center;
}
.next-project .label { display: block; margin-bottom: 1.6rem; }
.next-project a.display, .next-project span.display {
  /* El mínimo era 2.2rem: en 320px la palabra "Coleccionables" no cabía en el
     ancho útil y sacaba 23px de scroll horizontal. */
  font-size: clamp(1.75rem, 7vw, 7rem);
  display: inline-block;
  max-width: 100%;
}
.next-project .soon-note {
  display: block;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.next-project .back { display: inline-block; margin-top: 3.5rem; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-intro {
  padding: 0 var(--gutter) clamp(4rem, 10vh, 8rem);
  max-width: var(--site-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 5vw, 6rem);
}
.about-intro__text p {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--ink-dim);
  max-width: 58ch;
}
.about-intro__text p + p { margin-top: 1.6rem; }
.about-intro__text p strong { color: var(--ink); font-weight: 600; }
/* Columna derecha: foto (fondo gris) encima de los datos, mismo ancho */
.about-side {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.about-photo {
  position: relative;
  width: 100%;
  /* Móvil: CUADRADO (el recorte 4/5 partía el lettering del banner).
     A partir de 901px se sustituye por la proporción real del banner 2400x1100. */
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #3b3a37 0%, #26251f 100%);
  border-radius: 5px;
  overflow: hidden;
}
.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
  display: block;
}
.about-facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
  height: max-content;
}

/* "Sobre mí" · intro como rectángulo: las dos columnas se alinean arriba y
   abajo. El texto se estrecha (más alto) para que la foto, que llena su
   columna por flex, quede casi cuadrada mostrando el rostro completo. */
@media (min-width: 901px) {
  /* Texto pegado a la foto: la columna de texto mide lo que mide el texto
     y la foto ocupa el resto — sin ese hueco muerto en el medio. */
  .about-page .about-intro {
    align-items: stretch;
    grid-template-columns: minmax(0, 620px) 1fr;
    gap: clamp(2rem, 3.5vw, 4.5rem);
  }
  .about-page .about-intro__text p { max-width: none; }
  .about-page .about-side { height: 100%; }
  /* La caja usa la MISMA proporción que la foto exportada (2400×1100):
     la composición retrato + wordmark se ve completa en cualquier ancho. */
  .about-page .about-photo { flex: none; min-height: 0; aspect-ratio: 2400 / 1100; }
  .about-page .about-photo img { object-position: center; }
  .about-page .about-facts div { padding: 0.7rem 0; }
}

/* Skills · barras */
/* ===== Programas / software — grilla de logos ===== */
.programs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* filas centradas (la última ya no queda a la izquierda) */
  align-items: flex-start;
  gap: clamp(2.6rem, 4.5vw, 4rem) clamp(2.4rem, 4.5vw, 4.2rem);
  max-width: 1050px;
  margin: 0 auto;
}
.program {
  flex: 0 0 auto;
  width: clamp(112px, 12vw, 146px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.program__logo {
  height: 76px;
  display: grid;
  place-items: center;
}
.program__logo img {
  max-height: 76px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.program:hover .program__logo img { transform: scale(1.09); }
/* Íconos/marcas (letras Adobe, "AI") pesan más a la misma altura que los
   wordmarks → se muestran más pequeños para equilibrar el conjunto. */
.program--mark .program__logo { height: 52px; }
.program--mark .program__logo img { max-height: 52px; }
.program__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(0.82rem, 1.05vw, 0.98rem);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-dim); text-align: center;
  transition: color 0.35s ease;
}
.program:hover .program__name { color: var(--ink); }
@media (max-width: 640px) {
  .program__logo { height: 62px; }
  .program__logo img { max-height: 62px; }
  .program--mark .program__logo { height: 44px; }
  .program--mark .program__logo img { max-height: 44px; }
}
.about-facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.about-facts dt { color: var(--muted); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; padding-top: 0.2rem; }
.about-facts dd { color: var(--ink-dim); text-align: right; font-weight: 500; }

.section-rule {
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
}
.section-rule__inner { max-width: var(--site-max); margin: 0 auto; }
.section-rule .label { display: block; margin-bottom: 3rem; }

/* "Sobre mí" lleva centrados el encabezado de la página y el kicker de cada
   sección. Se acota a .about-page porque .page-head y .section-rule también se
   usan en Proyectos, Logros y la portada. Replika queda fuera: su bloque es
   título con logotipo + párrafo largo, y se lee mejor alineado. */
.about-page .page-head { text-align: center; }
.about-page .section-rule:not(.replika) > .section-rule__inner > .label {
  text-align: center;
}

/* Proyectos, igual: encabezado de página y el kicker de la selección de
   categorías. Va por .work-page (la clase del <main>) y no por
   .page-head--compact, que también usa Logros. */
.work-page .page-head,
.work-page .cat-select > .label { text-align: center; }

.collab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.2rem;
}
.collab-list li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 3.2rem);
  text-transform: uppercase;
  color: #fff;
  line-height: 1.25;
  transition: opacity 0.3s;
}
.collab-list:hover li { opacity: 0.32; }
.collab-list li:hover { opacity: 1; }
/* Variante centrada (home) — mismo estilo de lista pero label + nombres al centro */
.collab-center { text-align: center; }
.collab-center .collab-list { justify-content: center; }
/* ===== Ajustes MÓVIL (≤700px) — Trayectoria y Colaboraciones ===== */
@media (max-width: 700px) {
  /* ESPACIADO ENTRE SECCIONES: en móvil cada sección se forzaba a una pantalla
     completa (min-height:100svh) con 101px de padding arriba y abajo. Con contenido
     corto quedaban cientos de píxeles vacíos. Ahora la altura la marca el contenido
     y el aire se reduce, manteniendo respiro pero sin huecos muertos. */
  /* Aire vertical único de toda la home en móvil (separación simétrica) */
  :root { --sec-gap: clamp(4rem, 10vh, 5.75rem); }

  /* Ritmo ÚNICO para todas las secciones: el mismo aire arriba y abajo, así la
     separación entre cualquier par de secciones es idéntica (simétrica). */
  .intro-screen {
    min-height: 0;
    padding-top: var(--sec-gap);
    padding-bottom: var(--sec-gap);
  }

  /* Trayectoria CON el slideshow cinematográfico de fondo también en móvil.
     El velo de desktop oscurece el lado IZQUIERDO (allí va el texto); aquí el texto
     va abajo, así que se sustituye por un velo VERTICAL. Llega a NEGRO SÓLIDO antes
     de donde la foto se funde, para que el fondo no asome tras el degradado. */
  .trayec__bg::after {
    background: linear-gradient(to bottom,
      rgba(8, 8, 8, 0.40) 0%,
      rgba(8, 8, 8, 0.48) 26%,
      rgba(6, 6, 6, 0.88) 44%,
      var(--bg) 56%);
  }
  /* ORDEN EN MÓVIL: primero la FOTO y el texto DEBAJO, ya pasados los brazos. */
  .trayec-section {
    /* mismo padding que el resto → la foto ya no toca la sección de arriba */
    padding-top: var(--sec-gap);
    padding-bottom: var(--sec-gap);
    justify-content: flex-start;
  }
  .trayec-section .intro-lead {
    text-align: center;
    max-width: 100%;
    font-size: 0.875rem;
    line-height: 1.55;
  }
  .trayec__photo {
    order: -1;              /* ← la foto va ARRIBA del texto */
    flex: 0 0 auto;
    position: relative;
    /* Alto mayor: las manos terminan al ~78% del recorte, así queda margen POR DEBAJO
       de ellas para que el degradado no se coma la mano. */
    height: clamp(380px, 58vh, 510px);
    width: calc(100% + var(--gutter) * 2);
    margin: 0 calc(var(--gutter) * -1) clamp(1.2rem, 4vw, 1.8rem);
    /* SIN máscara: volvía la foto transparente y dejaba ver el fondo detrás del
       degradado (parecía un fallo). Ahora se funde con una capa OPACA encima. */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .trayec__photo::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 26%;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 0%, var(--bg) 72%);
    pointer-events: none;
  }
  /* "Explora por categoría" no es .intro-screen: se iguala al mismo ritmo */
  .cat-section { padding-top: var(--sec-gap); }
  .trayec__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;   /* ancla la cabeza arriba al recortar */
  }
  /* Colaboraciones: lista compacta, centrada y SIN hover pegado (en touch se quedaba
     un nombre resaltado en blanco y el resto atenuado). */
  .collab-list { gap: 0.2rem 1rem; justify-content: center; }
  .collab-list li { font-size: 1.2rem; line-height: 1.4; }
  .collab-list:hover li,
  .collab-list li:hover { opacity: 1; }
}

/* ===== "Qué hago" — índice interactivo de servicios (rediseño) ===== */
.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 1.5vw, 1.4rem);
}
.services__item {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 3.2vw, 3.1rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(158deg, rgba(242,239,233,0.022), rgba(242,239,233,0) 58%);
  transition: border-color 0.45s ease, transform 0.5s cubic-bezier(0.2,0.8,0.2,1), background 0.45s ease;
}
/* Barra superior que se dibuja al pasar el mouse */
.services__item::after {
  content: '';
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.2,0.8,0.2,1);
}
.services__item:hover {
  border-color: rgba(242,239,233,0.28);
  transform: translateY(-5px);
  background: linear-gradient(158deg, rgba(242,239,233,0.055), rgba(242,239,233,0) 60%);
}
.services__item:hover::after { transform: scaleX(1); }
.services__item h3 {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: 0.7rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.85rem);
  text-transform: uppercase; letter-spacing: 0.01em;
  margin-bottom: 1.4rem;
}
.services__item h3 span {
  color: var(--ink-dim); font-size: 0.6em; font-weight: 500;
  letter-spacing: 0.16em; transition: color 0.4s ease;
}
.services__item:hover h3 span { color: var(--brand); }
.services__item ul { position: relative; z-index: 1; }
.services__item ul li {
  position: relative;
  color: var(--ink-dim);
  font-size: 0.95rem;
  padding: 0.62rem 0 0.62rem 0;
  border-top: 1px solid var(--line);
  transition: color 0.35s ease, padding-left 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
/* Marcador (línea) que crece a la izquierda de cada ítem al pasar el mouse */
.services__item ul li::before {
  content: '';
  position: absolute; left: 0; top: 50%; width: 0; height: 1px;
  background: var(--brand); transform: translateY(-50%);
  transition: width 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.services__item ul li:hover {
  color: var(--ink);
  padding-left: 1.7rem;
}
.services__item ul li:hover::before { width: 1.05rem; }

.replika {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-2);
}
/* Fondo: los 3 banners de Replika en crossfade continuo */
.replika__bg { position: absolute; inset: 0; z-index: -1; }
.replika__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: replikaBg 21s infinite;
}
.replika__bg img:nth-child(1) { animation-delay: 0s; }
.replika__bg img:nth-child(2) { animation-delay: 7s; }
.replika__bg img:nth-child(3) { animation-delay: 14s; }
@keyframes replikaBg {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  34%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Overlay: oscuro sobre el texto (izq) y más transparente a la derecha
   para que la imagen de IA se vea; + degradado vertical al fondo del sitio */
.replika__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.86) 0%, rgba(8,8,8,0.48) 40%, rgba(8,8,8,0.1) 100%),
    linear-gradient(rgba(8,8,8,0.08), rgba(8,8,8,0.42));
}
@media (prefers-reduced-motion: reduce) {
  .replika__bg img { animation: none; }
  .replika__bg img:nth-child(1) { opacity: 1; }
}
.replika h2 {
  font-size: clamp(2.4rem, 7vw, 6.5rem);
  margin-bottom: 2rem;
}
/* "Construyendo" (más pequeño) + el logotipo de Replika (protagonista) */
.replika__title {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.06em 0.5em;
}
.replika__title span { font-size: 0.5em; }   /* "Construyendo" 50% más pequeño */
.replika__logo {
  height: 0.92em; width: auto;
  transform: translateY(0.02em);   /* centra ópticamente el wordmark */
}
/* En desktop el logotipo ES el título, así que "lo nuevo" y el logo del banner
   no se muestran */
.replika__new { display: none; }
.replika__bg .replika__banner-logo { display: none; }
.replika p {
  color: var(--ink-dim);
  max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

/* MÓVIL: el banner es panorámico (1280x380 → 3.37:1). Usado como fondo con
   object-fit:cover dentro de un bloque alto y estrecho quedaba recortadísimo (solo
   se veía una franja). Aquí deja de ser fondo y pasa a ser una IMAGEN EN FLUJO
   arriba, completa y sin recorte, con el texto DEBAJO sobre fondo sólido. */
@media (max-width: 700px) {
  .replika { padding-top: 0; padding-bottom: clamp(3.5rem, 9vh, 5rem); }
  .replika__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    width: calc(100% + var(--gutter) * 2);
    margin: 0 calc(var(--gutter) * -1) clamp(1.8rem, 6vw, 2.6rem);
    /* mismo aspecto que el archivo → cover no recorta nada */
    aspect-ratio: 1280 / 380;
  }
  .replika__bg::after {
    /* sin velo lateral (tapaba la imagen): solo un fundido inferior que la liga
       con el texto que viene debajo */
    background: linear-gradient(to bottom, rgba(8, 8, 8, 0) 62%, rgba(8, 8, 8, 0.55) 100%);
  }
  /* "CONSTRUYENDO LO NUEVO" como UNA sola frase continua: se deja el flujo de texto
     normal (no flex) para que quede un espacio natural entre palabras, y los dos
     tramos comparten el mismo tamaño. */
  .replika h2 { font-size: 1.3rem; margin-bottom: 1.2rem; }
  .replika__title { display: block; gap: 0; }
  .replika__title span { font-size: 1em; }
  .replika p { font-size: 0.9rem; line-height: 1.6; }
  /* El título dice "CONSTRUYENDO LO NUEVO" y el logotipo se traslada al banner.
     El logo del banner es un elemento propio DENTRO de .replika__bg: colocarlo con
     position:absolute desde dentro del <h2> fallaba, porque GSAP aplica transform
     al título y eso lo convierte en el marco de referencia del hijo absoluto. */
  .replika__new { display: inline; }
  .replika__title .replika__logo { display: none; }
  .replika__bg .replika__banner-logo {
    display: block;
    position: absolute;
    /* Centrado en el ESPACIO LIBRE izquierdo del banner (el sujeto ocupa la mitad
       derecha): su centro cae al 22% del ancho, tanto vertical como horizontalmente. */
    top: 50%;
    bottom: auto;
    left: 22%;
    right: auto;
    width: auto;
    height: clamp(29px, 8.45vw, 39px);   /* +30% sobre el tamaño anterior */
    object-fit: contain;
    opacity: 1;
    animation: none;              /* no hereda el crossfade de los banners */
    transform: translate(-50%, -50%);
    z-index: 2;
  }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-main {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 3.5rem) var(--gutter) 6rem;
  max-width: var(--site-max);
  margin: 0 auto;
  width: 100%;
}
.contact-main h1,
.contact-main .contact-left > h2 {
  font-size: clamp(2.7rem, 6.2vw, 6.2rem);
}
.contact-main .label { display: block; margin-bottom: 1.5rem; font-size: 0.82rem; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}
.contact-left p.blurb {
  margin-top: 1.8rem;
  color: var(--ink-dim);
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  max-width: 44ch;
}
.contact-socials {
  display: flex;
  gap: 1rem;
  margin-top: 2.8rem;
  flex-wrap: wrap;
}
.contact-socials a {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.35s;
}
.contact-socials a svg { width: 34px; height: 34px; display: block; }
.contact-socials a:hover {
  background: var(--ink);
  color: #0a0a0a;
  border-color: var(--ink);
  transform: translateY(-5px);
}
.contact-meta {
  margin-top: 2.6rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* .contact-meta también vive en el footer y en el home: el tamaño mayor se
   limita a la página de Contacto. */
.contact-main .contact-meta { font-size: 0.82rem; }

/* --- Formulario --- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 0.4rem;
}
.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.contact-form label {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-form input,
.contact-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.2rem;
  padding: 0.65rem 0 0.8rem;
  outline: none;
  transition: border-color 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus { border-bottom-color: var(--ink); }
/* Autocompletado del navegador: Chrome pinta el campo de azul claro con texto
   negro e ignora background/color. Solo se puede tapar con un box-shadow
   interior del color del fondo y forzando el color del texto aparte. */
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus,
.contact-form input:-webkit-autofill:active,
.contact-form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--bg) inset;
  box-shadow: 0 0 0 100px var(--bg) inset;
  caret-color: var(--ink);
  /* El retardo enorme impide que Chrome reponga su fondo tras el autorrelleno. */
  transition: background-color 9999s ease-in-out 0s;
}
.contact-form textarea { resize: vertical; min-height: 138px; line-height: 1.6; }
.btn-submit {
  align-self: flex-start;
  margin-top: 0.4rem;
  border: 1px solid var(--ink);
  border-radius: 3rem;
  padding: 1.15rem 2.7rem;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.35s, color 0.35s;
}
.btn-submit:hover { background: var(--ink); color: #0a0a0a; }
.btn-submit[disabled] { opacity: 0.55; cursor: progress; }
/* Respuesta del envío. Vacío no ocupa sitio, así que no deja un hueco muerto
   bajo el botón mientras nadie ha enviado nada. */
.form-note {
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.form-note:empty { display: none; }
.form-note--ok { color: var(--ink); }
.form-note--error { color: #ff6b6b; }

/* Contacto se centra SOLO cuando .contact-grid cae a una columna (≤1024px):
   ahí el centrado se lee bien. En escritorio, con el texto a la izquierda y el
   formulario a la derecha, cada columna conserva su alineación original.
   Las cajas con max-width (el blurb) necesitan margin auto además del
   text-align, o el texto queda centrado dentro de una caja descentrada. */
@media (max-width: 1024px) {
  .contact-main { text-align: center; }
  .contact-left p.blurb { margin-inline: auto; }
  .contact-socials { justify-content: center; }
  .contact-main .contact-meta { justify-content: center; }
  /* El formulario NO se centra: un formulario se lee y se rellena mejor con
     etiqueta y texto alineados a la izquierda, como en cualquier sitio. Solo
     se centra el bloque editorial de arriba. */
  .contact-main .contact-form { text-align: left; }
  /* Botón a todo el ancho en móvil: más fácil de pulsar y cierra la columna. */
  .btn-submit { align-self: stretch; text-align: center; }
}

/* ============================================================
   404 — Página no encontrada
   ============================================================ */
.nf {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 3rem) var(--gutter) 4rem;
  max-width: var(--site-max);
  margin: 0 auto;
}
.nf .label { display: block; margin-bottom: 1.2rem; }
/* El número es decoración, no texto que se lea: va detrás y muy tenue, con el
   título encima. Por eso está marcado aria-hidden en el HTML. */
.nf__num {
  font-size: clamp(9rem, 34vw, 26rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 22%, transparent);
  margin-bottom: -0.12em;
  user-select: none;
  pointer-events: none;
}
.nf__title {
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  color: var(--ink);
  margin-bottom: 1.2rem;
  text-wrap: balance;
}
.nf__lead {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--ink-dim);
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.nf__acts { margin-top: clamp(2.2rem, 5vh, 3.2rem); }
.nf__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2rem;
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  padding-top: clamp(1.6rem, 4vh, 2.4rem);
  border-top: 1px solid var(--line);
  width: min(100%, 42rem);
}
.nf__links a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
}
.nf__links a:hover { color: var(--ink); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .project-body { grid-template-columns: 1fr; }
  /* en una sola columna no existe la columna 2: la portada vuelve a la fila */
  .project-gallery > *:first-child { grid-column: 1 / -1; }
  .project-gallery > .album-flip:first-child { margin-inline: auto; }
  .about-intro { grid-template-columns: 1fr; }
  .about-facts { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :root { --nav-h: 72px; }
  .work-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stats__item + .stats__item { border-left: 0; border-top: 1px solid var(--line); }
  .services { grid-template-columns: 1fr; }
  .nav { padding: 0 0.9rem; }
  .nav__brand { flex-shrink: 0; margin-right: 0.5rem; }
  .nav__brand img { height: 44px; }
  /* ---- Menú hamburguesa (móvil): libera el espacio del nav ---- */
  .nav__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 1660;
  }
  .nav__burger span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  /* Panel de menú a pantalla completa */
  .nav__right {
    position: fixed;
    inset: 0;
    z-index: 1640;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.2rem;
    padding: 0;
    background: rgba(10, 10, 10, 0.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  }
  .nav--open .nav__right { opacity: 1; visibility: visible; transform: none; }
  .nav--open { mix-blend-mode: normal; }  /* para que el panel opaco se vea bien */
  .nav__right a { font-size: 1.6rem; letter-spacing: 0.02em; }
  .nav__right .lang-toggle { font-size: 0.95rem; padding: 0.5rem 1.15rem; margin-top: 0.6rem; }
  /* Burger → X al abrir */
  .nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav--open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Compacto para compartir fila con los filtros de la página de videos.
     El padding vertical y el tamaño coinciden con .videos-sort button → misma altura. */
  .back-fab {
    top: calc(var(--nav-h) + 0.8rem);
    padding: 0.45rem 0.7rem;
    gap: 0.35rem;
    font-size: 0.55rem;
    letter-spacing: 0.12em;
  }
  .back-fab svg { width: 13px; height: 13px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   COVERS PAGE — Muro cinético a pantalla completa
   Concepto: al entrar se ve DIRECTO (sin pantalla previa) una
   pared de covers en filas que se deslizan solas en direcciones
   alternas. Hover = la fila se pausa y el cover hace zoom.
   Clic = visor a pantalla completa. Barra flotante con filtros.
   ============================================================ */
.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;
}
.covers-screen {
  position: relative;
  height: 100svh;
  overflow: hidden;          /* recorta las cintas por los lados */
  background: var(--bg);
}
/* La página de covers es UNA pantalla exacta: sin el padding-bottom global
   del body (espacio del reproductor) que aquí solo creaba 72px de scroll muerto */
body:has(.covers-screen) { padding-bottom: 0; }
.covers-strips {
  position: absolute;
  /* Tres zonas que NO se pisan: banda del nav arriba, muro de covers,
     y abajo una franja propia para la barra de filtros (--bar-space, medida
     por covers.js) + el reproductor. Así el zoom nunca tapa la barra. */
  top: var(--nav-h);
  left: 0; right: 0;
  bottom: calc(var(--player-h) + var(--bar-space, 4.6rem));
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 0;
}
.strip {
  position: relative;
  flex: 1;
  min-height: 0;
}
/* La fila con hover solo debe superar a las OTRAS filas (el zoom crece
   sobre ellas); la barra de filtros tiene su franja propia y ya no chocan */
.strip:hover { z-index: 5; }
.strip__track {
  display: flex;
  gap: 5px;
  height: 100%;
  width: max-content;
  animation: stripScroll var(--dur, 80s) linear infinite;
  will-change: transform;
}
.strip--rev .strip__track { animation-direction: reverse; }
@keyframes stripScroll { to { transform: translateX(-50%); } }
.strip:hover .strip__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
}

.strip-tile {
  position: relative;
  height: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  padding: 0;
  text-align: left;
}
/* Contenedor interno: cover + info escalan JUNTOS (si el zoom fuera solo
   en la <img>, la franja de título quedaba anclada al tile sin escalar y
   aparecía descuadrada en medio del cover ampliado). */
.strip-tile__in {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1), box-shadow 0.4s, filter 0.35s;
}
.strip-tile picture, .strip-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover: el cover crece por encima de la pared; su fila se atenúa */
@media (pointer: fine) {
  .strip-tile:hover { z-index: 6; }
  .strip-tile:hover .strip-tile__in {
    transform: scale(1.22);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(242, 239, 233, 0.14);
  }
  .strip:hover .strip-tile:not(:hover) .strip-tile__in { filter: brightness(0.45) saturate(0.65); }
}

/* Info sobre el cover ampliado (dentro del contenedor escalado) */
.strip-tile__info {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 1.8rem 0.7rem 0.55rem;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0));
  opacity: 0;
  transition: opacity 0.3s 0.1s;
  pointer-events: none;
}
.strip-tile:hover .strip-tile__info { opacity: 1; }
.strip-tile__info b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
}
.strip-tile__info em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
@media (pointer: coarse) {
  .strip-tile__info { display: none; }   /* en touch: tocar abre el visor */
}

/* Barra flotante: título + contador + filtros (glass, sobre el reproductor) */
.covers-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--player-h) + 1.1rem);
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  max-width: calc(100vw - 2rem);
  padding: 0.55rem 1.1rem;
  background: rgba(12, 12, 12, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(242, 239, 233, 0.14);
  border-radius: 100px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.covers-bar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.covers-counter {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.covers-counter b { color: var(--ink); font-family: var(--font-display); font-size: 0.85rem; }
.covers-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.covers-chip {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.42rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 100px;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.covers-chip:hover { color: var(--ink); border-color: rgba(242, 239, 233, 0.3); }
.covers-chip.is-active { color: #0a0a0a; background: var(--ink); }

/* MÓVIL: en una sola fila no cabe todo, así que el contenido se envolvía y el
   border-radius de 100px convertía la píldora en un ÓVALO. Aquí pasa a ser una
   tarjeta rectangular a lo ancho, con título/contador arriba y los filtros debajo. */
@media (max-width: 700px) {
  .covers-bar {
    left: var(--gutter);
    right: var(--gutter);
    transform: none;
    max-width: none;
    /* Fila 1: título + contador juntos. Fila 2: las categorías. */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.55rem 0.5rem;
    padding: 0.8rem 0.7rem 0.9rem;
    border-radius: 18px;
  }
  /* base 100% → obliga a las opciones a bajar a su propia línea */
  .covers-bar .covers-filters { flex: 0 0 100%; }
  .covers-bar__title { font-size: 0.82rem; }
  .covers-counter { font-size: 0.56rem; letter-spacing: 0.13em; }
  /* Ajustado para que las 5 categorías entren en UNA sola fila (antes "Ediciones"
     caía sola en una segunda línea y quedaba descompensado). */
  .covers-filters { width: 100%; flex-wrap: nowrap; gap: 0.2rem; }
  .covers-chip {
    font-size: 0.52rem;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
  }
}

/* Estado vacío de un filtro (p. ej. Sencillos sin covers aún) */
.covers-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}
.covers-empty p { color: var(--ink-dim); margin-top: 0.8rem; }
.covers-empty[hidden] { display: none; }

/* ---------- Visor a pantalla completa ---------- */
html.covers-lock, html.covers-lock body { overflow: hidden; }
.cover-stage {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.38s ease;
}
/* CRÍTICO: display:flex pisa el display:none del atributo [hidden] del UA;
   sin esta regla el visor invisible cubre la página y bloquea TODOS los clics. */
.cover-stage[hidden] { display: none; }
.cover-stage.is-open { opacity: 1; }
.cover-stage__bg {
  position: absolute;
  inset: -6%;
  background-color: #050505;
  background-size: cover;
  background-position: center;
  filter: blur(48px) brightness(0.32) saturate(1.15);
  transform: scale(1.06);
}
.cover-stage__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(5,5,5,0) 0%, rgba(5,5,5,0.55) 100%);
}
.cover-stage__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 4rem);
  padding: 0 clamp(3.4rem, 7vw, 6rem);
  max-width: 1400px;
  pointer-events: none;              /* el fondo recibe el clic de cierre */
}
.cover-stage__inner > * { pointer-events: auto; }
.cover-stage__art {
  position: relative;
  width: min(58vmin, 620px);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  perspective: 1200px;                /* perspectiva para la carta (hija), no para el botón */
  transform: rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
  transform-style: flat;              /* el botón NO comparte el plano 3D de la carta:
                                         así el canto de la carta al girar no se proyecta
                                         como una línea sobre el botón "Ver portada" */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.3, 1);
  will-change: transform;
}
/* Carta con dos caras: portada / contraportada (tracklist) */
.cover-stage__card {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.3, 0.8, 0.25, 1);
}
.cover-stage__art.is-flipped .cover-stage__card { transform: rotateY(180deg); }
.cover-stage__card .cover-stage__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 5px;
  background: var(--bg-2);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(242, 239, 233, 0.1);
}
.cover-stage__card .cover-stage__face--back { transform: rotateY(180deg); }
.cover-stage__face img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Botón Voltear (solo álbumes con contraportada) — FUERA del cover,
   centrado debajo de la carátula; no gira con la carta */
.cover-stage__flip {
  position: absolute;
  left: 50%;
  top: calc(100% + 1.1rem);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: 100px;
  border: 1px solid rgba(242, 239, 233, 0.3);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.3s, border-color 0.3s;
}
.cover-stage__flip:hover { background: rgba(242, 239, 233, 0.16); border-color: rgba(242, 239, 233, 0.55); }
.cover-stage__flip svg { width: 14px; height: 14px; }
.cover-stage__flip[hidden] { display: none; }

/* Animación al cambiar de cover dentro del visor */
@keyframes coverSwap {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* La animación va en la CARTA (no en las caras: un transform animado en la
   cara trasera pisaría su rotateY(180) y se vería el tracklist al revés) */
.cover-stage__art.is-swap .cover-stage__card { animation: coverSwap 0.45s cubic-bezier(0.25, 1, 0.3, 1); }
.cover-stage__meta.is-swap > * { animation: coverSwap 0.5s cubic-bezier(0.25, 1, 0.3, 1) backwards; }
.cover-stage__meta.is-swap > *:nth-child(2) { animation-delay: 0.05s; }
.cover-stage__meta.is-swap > *:nth-child(3) { animation-delay: 0.1s; }
.cover-stage__meta.is-swap > *:nth-child(4) { animation-delay: 0.15s; }
.cover-stage__meta.is-swap > *:nth-child(5) { animation-delay: 0.2s; }

.cover-stage__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 34ch;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.22s, transform 0.5s cubic-bezier(0.25, 1, 0.3, 1) 0.22s;
}
.cover-stage.is-open .cover-stage__meta { opacity: 1; transform: none; }
.cover-stage__chip {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, var(--ink));
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 0.35rem 0.85rem;
}
.cover-stage__meta h2 {
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  line-height: 0.95;
}
.cover-stage__meta p { color: var(--ink-dim); font-size: 0.95rem; }
.cover-stage__link {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--accent, var(--ink));
  padding-bottom: 0.25rem;
  margin-top: 0.4rem;
  transition: color 0.3s;
}
.cover-stage__link:hover { color: var(--accent, var(--ink)); }

.cover-stage__close {
  position: absolute;
  top: clamp(0.9rem, 3vh, 2rem);
  right: clamp(0.9rem, 3vw, 2rem);
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(242, 239, 233, 0.25);
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 1rem;
  transition: transform 0.3s, background 0.3s;
}
.cover-stage__close:hover { transform: rotate(90deg); background: rgba(242, 239, 233, 0.14); }
.cover-stage__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(242, 239, 233, 0.25);
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 1.15rem;
  transition: background 0.3s, border-color 0.3s;
}
.cover-stage__nav:hover { background: rgba(242, 239, 233, 0.14); border-color: rgba(242, 239, 233, 0.5); }
.cover-stage__nav--prev { left: clamp(0.7rem, 2.5vw, 2rem); }
.cover-stage__nav--next { right: clamp(0.7rem, 2.5vw, 2rem); }

@media (max-width: 900px) {
  .cover-stage__inner {
    flex-direction: column;
    text-align: center;
    gap: 1.4rem;
    padding: 0 1.2rem;
  }
  .cover-stage__art { width: min(78vw, 62vh); }
  /* En columna (móvil/tablet) el botón Voltear cuelga bajo el cover:
     reservar ese espacio para que no pise la ficha de título */
  .cover-stage__art:has(.cover-stage__flip:not([hidden])) { margin-bottom: 2.9rem; }
  .cover-stage__meta { align-items: center; max-width: 90vw; }
  .cover-stage__nav { top: auto; bottom: clamp(0.8rem, 4vh, 2rem); transform: none; }
}
@media (max-width: 700px) {
  .covers-bar {
    bottom: calc(var(--player-h) + 0.8rem);
    padding: 0.5rem 0.9rem;
    gap: 0.4rem 0.9rem;
  }
  .covers-bar__title { font-size: 0.8rem; }
}

/* ============================================================
   VIDEOS IA — galería + visor (interfaz propia)
   ============================================================ */
.page-head__lead {
  color: var(--ink-dim);
  max-width: 62ch;
  margin: 1.4rem auto 0;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}
.page-head--compact .page-head__lead { margin-left: 0; }
/* Encabezado con el total de reproducciones. El padding-top libra el nav fijo,
   el botón flotante "Volver" y la barra de orden. */
.videos-head {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(4.2rem, 8vh, 5.6rem)) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
}
/* Titular centrado en DOS líneas: el dato arriba y el contexto abajo. Cada
   línea es un bloque propio, así el corte es siempre el mismo en cualquier
   idioma. Todo en Light para que el número (en Bold) sea lo único que pese.
   En escritorio videos-ia.js escala el cuerpo hasta que la línea más larga
   ocupa el 70% de la rejilla, centrada. */
.videos-head__stat {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(0.95rem, 2.5vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.002em;
  text-transform: uppercase;
  color: var(--ink-dim);
  align-self: stretch;
}
.videos-head__line { display: block; }
.videos-head__n {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.videos-grid {
  display: grid;
  /* min(320px, 100%) evita que la columna mínima desborde en móviles: sin el
     min(), en 375px la pista se quedaba en 356px y sacaba 1px de scroll. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 2.4vw, 2.2rem);
  max-width: var(--site-max);
  margin: 0 auto;
  padding: clamp(2.4rem, 5vh, 3.6rem) var(--gutter) clamp(5rem, 12vh, 9rem);
}
.video-card {
  display: flex; flex-direction: column; gap: 0.95rem;
  background: none; border: 0; padding: 0; margin: 0;
  text-align: left; color: inherit; cursor: pointer; font: inherit;
}
.video-card__thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.video-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.82);
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}
.video-card:hover .video-card__thumb img,
.video-card:focus-visible .video-card__thumb img { transform: scale(1.06); filter: brightness(0.6); }
/* El play va en la esquina inferior derecha, no centrado: así no tapa el arte
   del frame (que casi siempre tiene al artista al medio). Queda en diagonal
   con el tag, que está arriba a la izquierda con el mismo margen. */
.video-card__play {
  position: absolute; right: 0.7rem; bottom: 0.7rem;
  width: 46px; height: 46px;
  display: grid; place-items: center; pointer-events: none;
}
.video-card__play::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: scale(0.86); opacity: 0.85;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}
.video-card:hover .video-card__play::before,
.video-card:focus-visible .video-card__play::before { transform: scale(1); opacity: 1; }
.video-card__play svg { position: relative; width: 19px; height: 19px; color: #0a0a0a; margin-left: 2px; }
.video-card__tag {
  position: absolute; top: 0.7rem; left: 0.7rem;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.32rem 0.6rem; border-radius: 4px; color: var(--ink);
  background: rgba(10, 10, 10, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Fan art: mismo chip pero en secundario (texto atenuado + filete), para que
   se distinga de un encargo oficial sin gritarlo. */
.video-card__tag--fan {
  color: var(--ink-dim);
  box-shadow: inset 0 0 0 1px rgba(242, 239, 233, 0.22);
}
.video-card__meta { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }
.video-card__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem;
  text-transform: uppercase; color: var(--ink); line-height: 1.08;
  transition: color 0.3s;
}
.video-card:hover .video-card__title { color: #fff; }
.video-card__artist {
  font-style: normal; color: var(--ink-dim); font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.video-card__stats {
  display: block; margin-top: 0.35rem;
  color: var(--muted); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
}
.video-card__stats b { color: var(--ink-dim); font-weight: 700; }

/* Visor */
html.videos-lock { overflow: hidden; }
.video-stage {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; transition: opacity 0.32s ease;
}
.video-stage[hidden] { display: none; }
.video-stage.is-open { opacity: 1; }
.video-stage__scrim {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(6, 6, 6, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.video-stage__inner { position: relative; z-index: 2; width: min(1180px, 100%); }
.video-stage__frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: 10px; overflow: hidden; background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
  transform: translateY(16px) scale(0.98); opacity: 0;
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.42s ease;
}
.video-stage.is-open .video-stage__frame { transform: none; opacity: 1; }
.video-stage__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Info del video: barra horizontal — título/artista izq · datos der */
.video-stage__meta {
  margin-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.video-stage__metaL { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.video-stage__index { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; }
.video-stage__tag {
  color: var(--ink-dim); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.video-stage__title {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  text-transform: uppercase; color: var(--ink); line-height: 1;
}
.video-stage__artist { color: var(--ink-dim); font-size: 1rem; }
/* Stats con protagonismo: número grande + etiqueta */
.video-stage__stats { display: flex; gap: clamp(2rem, 5vw, 4.5rem); flex-shrink: 0; }
.vstat { display: flex; flex-direction: column; gap: 0.35rem; }
.vstat__num {
  font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem); color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vstat__label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.video-stage__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); z-index: 4;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(242, 239, 233, 0.3); background: rgba(10, 10, 10, 0.5); color: var(--ink);
  font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.video-stage__close:hover { background: var(--ink); color: #0a0a0a; transform: scale(1.05); }
.video-stage__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(242, 239, 233, 0.28); background: rgba(10, 10, 10, 0.45); color: var(--ink);
  font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, color 0.3s;
}
.video-stage__nav:hover { background: var(--ink); color: #0a0a0a; }
.video-stage__nav--prev { left: clamp(0.5rem, 2vw, 1.6rem); }
.video-stage__nav--next { right: clamp(0.5rem, 2vw, 1.6rem); }
@media (max-width: 700px) {
  /* minmax(0, 1fr) y no 1fr: con 1fr la columna crece hasta el min-content de
     la tarjeta (356px) y saca la rejilla del viewport. */
  .videos-grid { grid-template-columns: minmax(0, 1fr); }
  .video-stage__nav { display: none; }
}

/* Barra de orden de Videos IA — a la altura del "Volver", a la derecha */
.videos-sort {
  position: fixed;
  top: calc(var(--nav-h) + 1.1rem);
  right: var(--gutter);
  z-index: 890;
  display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end;
}
.videos-sort button {
  padding: 0.6rem 1rem; border-radius: 3rem; cursor: pointer;
  background: rgba(8, 8, 8, 0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15); color: var(--ink-dim);
  font-family: var(--font-body); font-weight: 700; font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.videos-sort button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.videos-sort button.is-active { background: var(--ink); color: #0a0a0a; border-color: var(--ink); }
@media (max-width: 640px) {
  /* "Volver" y los filtros comparten UNA sola fila, al mismo nivel. Antes no cabían
     (370px en 350 útiles) y se solapaban; ahora ambos van compactos y con el mismo
     padding vertical y tamaño de letra, así quedan a la misma altura. */
  .videos-sort { top: calc(var(--nav-h) + 0.8rem); gap: 0.2rem; }
  .videos-sort button { padding: 0.45rem 0.5rem; font-size: 0.55rem; letter-spacing: 0.04em; }
  /* La cabecera ya despeja el nav y los controles fijos con su propio
     padding-top, así que aquí el grid solo necesita aire respecto de ella:
     reservar otra vez la altura del nav dejaba 146px de hueco vacío. */
  .videos-grid { padding-top: clamp(1.8rem, 4vh, 2.8rem); }
}
/* Red de seguridad: en pantallas muy estrechas los 4 botones ya no caben en una
   fila, así que los filtros bajan a la suya en vez de solaparse con "Volver". */
@media (max-width: 361px) {
  .videos-sort { top: calc(var(--nav-h) + 3.9rem); }
  /* Con los filtros en su propia fila, quien tiene que bajar es la cabecera
     (es lo primero que aparece), no el grid. */
  .videos-head { padding-top: calc(var(--nav-h) + 8.2rem); }
}

/* ============================================================
   Bloque de contexto (Covers y Videos IA)
   Estas dos páginas montan su contenido con JS: sin este texto Google leía
   menos de 50 palabras y no podía saber de qué trataban. Va discreto, después
   del contenido principal, para no competir con la pieza visual.
   ============================================================ */
.page-note {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 8vh, 5.5rem) var(--gutter);
  background: var(--bg);
}
.page-note__inner {
  max-width: 64ch;
  margin: 0 auto;
  text-align: center;
}
.page-note h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
.page-note p {
  color: var(--ink-dim);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  text-wrap: pretty;
}
.page-note p + p { margin-top: 1rem; }

/* ============================================================
   Video dentro de la galería de proyecto
   preload="none" en el HTML: el archivo solo se descarga si el visitante
   pulsa play, así un trailer pesado no penaliza la carga de la página.
   ============================================================ */
.project-gallery video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border-radius: 2px;
}
/* Los reels son verticales: a pantalla completa quedarían gigantes, así que
   se limitan en alto y se centran. */
.project-gallery figure.is-vertical video {
  max-height: 82vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.project-gallery figure.is-vertical { text-align: center; }

/* ============================================================
   Video integrado en la ficha de proyecto
   Los controles nativos del navegador rompían la estética: aquí el video se
   presenta con su fotograma y un botón propio; los controles solo aparecen
   cuando el visitante decide reproducir.
   ============================================================ */
.pvideo {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
  background: #000;
  cursor: pointer;
}
.pvideo video {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
/* Los reels son verticales: se limitan en alto para que no ocupen la pantalla
   entera, y el bloque se ciñe al ancho real del video (sin franjas laterales). */
.pvideo--v { max-width: min(420px, 82vw); margin-inline: auto; }  /* ya no se usa: los reels van en rejilla */

.pvideo__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.05) 45%);
  cursor: pointer;
  transition: opacity 0.35s ease;
}
.pvideo__play span {
  width: clamp(56px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(242, 239, 233, 0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.pvideo__play svg { width: 40%; height: 40%; margin-left: 8%; }
.pvideo:hover .pvideo__play span {
  background: var(--ink); color: #0a0a0a; border-color: var(--ink);
  transform: scale(1.06);
}
.pvideo.is-playing .pvideo__play { opacity: 0; pointer-events: none; }

/* Ficha de marca: sustituye a la captura de pantalla de Instagram que había
   como lámina. Misma información, pero compuesta con la tipografía del sitio
   y en texto real (se lee en cualquier pantalla y Google la indexa). */
.brandcard {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  align-items: center;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  padding: clamp(2rem, 5vw, 3.4rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--nenstv) 14%, transparent), transparent 62%),
    var(--bg-2, #101012);
}
.brandcard__logo { width: clamp(84px, 12vw, 132px); height: auto; display: block; }
.brandcard__txt p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  line-height: 1.28;
  color: var(--ink);
  text-wrap: pretty;
}
.brandcard__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.2rem;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  padding-top: clamp(1rem, 2.5vw, 1.4rem);
  border-top: 1px solid var(--line);
}
.brandcard__datos div { display: flex; flex-direction: column; gap: 0.15rem; }
.brandcard__datos b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--nenstv);
  line-height: 1;
}
.brandcard__datos span {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 640px) {
  .brandcard { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .brandcard__datos { justify-content: center; }
}

/* Rejilla de reels: cuatro piezas verticales juntas en vez de una debajo de
   otra a pantalla completa, que dejaba enormes franjas negras a los lados y
   obligaba a bajar mucho para verlos. */
.reelgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.reelgrid__item { min-width: 0; }
.reelgrid .pvideo { aspect-ratio: 4 / 5; }
.reelgrid .pvideo video { width: 100%; height: 100%; object-fit: cover; }
/* El botón de play se achica: en una celda pequeña, el tamaño normal lo tapa todo */
.reelgrid .pvideo__play span { width: clamp(38px, 4vw, 52px); }
@media (max-width: 720px) {
  .reelgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Segunda línea de la ficha de marca: más pequeña, para que la explicación del
   símbolo mande y el resto quede como apunte. */
.brandcard__sub {
  margin-top: 0.9rem;
  font-family: var(--font-body) !important;
  font-size: clamp(0.9rem, 1.4vw, 1rem) !important;
  line-height: 1.55 !important;
  color: var(--ink-dim) !important;
}

/* Lámina blanca: el video de construcción del logo está grabado sobre blanco.
   Con el fondo oscuro del sitio quedaban dos franjas negras a los lados; al
   pintar el bloque de blanco el video se funde con él y las franjas
   desaparecen sin recortar nada. Además hace de respiro luminoso en una
   página oscura. */
.pvideo--blanco {
  background: #fff;
  display: grid;
  place-items: center;
  /* Margen mínimo: la pieza es la animación, no el blanco que la rodea. */
  padding: clamp(0.8rem, 2vw, 1.6rem) 0;
  border-radius: 3px;
}
.pvideo--blanco video {
  /* aspect-ratio explícito: con preload="none" el navegador no conoce las
     medidas reales del archivo y le asignaba 16:9, que descuadraba la pieza.
     El fondo blanco evita que asome el negro del reproductor por detrás.
     El ancho sube hasta 680px: antes se quedaba en 380 y la animación se veía
     diminuta en medio de un mar de blanco. */
  aspect-ratio: 720 / 900;
  width: min(94%, 620px);
  /* Sin max-height a propósito: al combinarlo con un ancho fijo, el navegador
     recortaba el alto y el elemento perdía su proporción (salía 1.11 en vez de
     0.80). Mandando solo el ancho, la altura la calcula el aspect-ratio y la
     pieza sale siempre completa. */
  height: auto;
  object-fit: contain;
  background: #fff;
}
/* Sobre blanco, el degradado oscuro del botón sobraría: el play se dibuja en
   el turquesa de la marca. */
.pvideo--blanco .pvideo__play { background: none; }
.pvideo--blanco .pvideo__play span {
  background: rgba(255, 255, 255, 0.72);
  border-color: color-mix(in srgb, var(--nenstv) 55%, transparent);
  color: var(--nenstv);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.pvideo--blanco:hover .pvideo__play span {
  background: var(--nenstv); color: #fff; border-color: var(--nenstv);
}

/* Animación en bucle (el símbolo de Nens TV).
   Se reproduce sola y se repite, sin controles: sustituye a un GIF con mucha
   mejor calidad y una fracción del peso. El fondo blanco es el del propio
   video, así no aparecen franjas a los lados. */
.loopvideo {
  background: #fff;
  display: grid;
  place-items: center;
  padding: clamp(0.8rem, 2vw, 1.6rem) 0;
  border-radius: 3px;
}
.loopvideo video {
  aspect-ratio: 720 / 900;
  width: min(94%, 620px);
  height: auto;
  object-fit: contain;
  background: #fff;
  pointer-events: none;   /* nada que pulsar: no es un reproductor */
}
/* Quien pide menos movimiento no debería recibir un bucle infinito: se
   detiene desde JS y queda el fotograma final del logotipo. */
@media (prefers-reduced-motion: reduce) {
  .loopvideo video { animation: none; }
}

/* Dos piezas emparejadas dentro de la galería (misma proporción, se leen como
   una sola idea). En móvil se apilan: al lado se verían demasiado pequeñas. */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  align-items: start;
}
.duo__item { min-width: 0; }
.duo img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; }
}