/* MUNdi · hoja de estilos
   Sistema: pantallas oscuras a sangre con fotografía; filas alineadas a la izquierda
   como en una plataforma de vídeo; crema y bandas de color de marca con pincelada.
   Colores de marca tomados de los logotipos: azul #1F3A5F, terracota #C75B3D,
   salvia #5F7063 y crema #EFECE9. Cada categoría aporta su propio color (--c). */

@font-face { font-family: 'Mun 22'; src: url('../fonts/mun22-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mun 22'; src: url('../fonts/mun22-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Rotis Sans'; src: url('../fonts/rotis-sans-light.woff2') format('woff2'); font-weight: 300; font-display: swap; }

:root {
  /* Color de marca */
  --crema: #efece9;
  --crema-oscura: #ddd7cf;
  --tinta: #1d1d1b;
  --tinta-suave: #5a5650;
  --negro: #0b0b0b;
  --azul: #1f3a5f;
  --terracota: #c75b3d;
  --salvia: #5f7063;
  --blanco: #ffffff;
  --velo: rgba(255, 255, 255, 0.14);
  --velo-fuerte: rgba(255, 255, 255, 0.26);

  /* Tipografía */
  --f-display: 'Mun 22', 'Helvetica Neue', Arial, sans-serif;
  --f-texto: 'Rotis Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Medidas: margen lateral único para toda la web, alineado a la izquierda */
  --margen: clamp(20px, 6vw, 120px);
  /* Texto de las piezas (tarjetas y óvalos), el mismo en todas */
  --t-pieza: clamp(18px, 1.45vw, 23px);
  --t-pieza-texto: clamp(15px, 1.15vw, 17px);
  --radio: 14px;
  --alto-cabecera: 76px;
  --ovalo: 7 / 10; /* proporción del óvalo de la marca */
  --t-rapida: 180ms;
  --t-media: 420ms;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; border-radius: 4px; }
body.sin-scroll { overflow: hidden; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--blanco); color: var(--tinta); padding: 10px 16px; border-radius: 8px; font-family: var(--f-display); }
.saltar:focus { top: 16px; }

.envoltura { width: 100%; padding-inline: var(--margen); }
#principal:focus { outline: none; }

/* ——— Texto ——— */

.eyebrow { margin: 0; font-family: var(--f-display); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; }

.titulo-grande {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(40px, 6.2vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.titulo-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.1;
}
.titulo-fila img { width: 30px; height: 30px; }

.lema { margin: 0; font-family: var(--f-display); font-style: italic; font-size: clamp(17px, 1.6vw, 22px); opacity: 0.92; }
.entradilla { margin: 0; max-width: 56ch; font-size: clamp(16px, 1.25vw, 19px); }

.pastilla {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 11px 4px;
  border-radius: 999px;
  background: var(--c, var(--azul));
  color: var(--blanco);
  font-family: var(--f-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: rgba(11, 11, 11, 0.62);
  backdrop-filter: blur(6px);
  color: var(--blanco);
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip svg { width: 12px; height: 12px; }

.datos { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 14px; opacity: 0.82; font-variant-numeric: tabular-nums; }
.datos li + li::before { content: '•'; margin-inline: 10px; opacity: 0.6; }

/* ——— Botones ——— */

.botones { display: flex; flex-wrap: wrap; gap: 12px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 10px;
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-rapida), background-color var(--t-rapida), filter var(--t-rapida);
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(1px); }
.boton svg { width: 18px; height: 18px; }
.boton--claro { background: var(--blanco); color: var(--negro); }
.boton--claro svg { fill: currentColor; stroke: none; }
.boton--claro:hover { background: var(--crema); }
.boton--velado { background: var(--velo); color: var(--blanco); backdrop-filter: blur(10px); }
.boton--velado:hover { background: var(--velo-fuerte); }
.boton--velado[aria-pressed='true'] svg { fill: currentColor; }
.boton--color { background: var(--c, var(--terracota)); color: var(--blanco); }
.boton--color svg { fill: currentColor; stroke: none; }
.boton--color:hover { filter: brightness(1.1); }
.boton--borde { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.boton--ancho { width: 100%; }

/* ——— Pinceladas de marca: forma de pincel teñida con el color de cada sección ——— */

.pincel {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: var(--c, var(--terracota));
  -webkit-mask: url('../img/marca/pincelada-2.webp') center / contain no-repeat;
  mask: url('../img/marca/pincelada-2.webp') center / contain no-repeat;
}
.pincel--portada { top: 13%; right: -3%; width: min(32vw, 520px); aspect-ratio: 1600 / 713; }
.pincel--seccion {
  right: -6%;
  bottom: -10%;
  width: min(60vw, 900px);
  aspect-ratio: 1600 / 713;
  -webkit-mask-image: url('../img/marca/pincelada-1.webp');
  mask-image: url('../img/marca/pincelada-1.webp');
}

/* ——— Bienvenida ——— */

.bienvenida {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--negro);
  animation: bienvenida-sale 600ms var(--curva) 1.7s both;
  cursor: pointer;
}
.bienvenida img { width: min(260px, 60vw); height: auto; animation: bienvenida-logo 1.8s var(--curva) both; }
@keyframes bienvenida-logo { 0% { opacity: 0; transform: scale(0.92); filter: blur(8px); } 35% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 1; transform: scale(1.04); } }
@keyframes bienvenida-sale { to { opacity: 0; visibility: hidden; } }

/* ——— Cabecera y menú ——— */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--blanco);
  background: linear-gradient(rgba(11, 11, 11, 0.8), rgba(11, 11, 11, 0));
  transition: background-color var(--t-media);
}
/* Sin backdrop-filter: crearía un contexto que recortaría el menú móvil fijo. */
.cabecera.solida { background-color: rgba(11, 11, 11, 0.96); }
body.modo-cine .cabecera, body.modo-cine .pie { display: none; }
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  height: var(--alto-cabecera);
  padding-inline: var(--margen);
}
.cabecera__logo { display: flex; align-items: center; flex: none; }
/* El punto de la «i» deja aire arriba en el logo: se sube un 16 % para que
   las letras MUN queden a la altura del texto del menú. */
.cabecera__logo img { width: 118px; height: auto; translate: 0 -16%; }
.cabecera__acciones { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.icono-boton {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--blanco);
  cursor: pointer;
  transition: background-color var(--t-rapida);
}
.icono-boton:hover { background: var(--velo); }
.icono-boton svg { width: 22px; height: 22px; }
.menu-movil { display: none; }

.boton-acceso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-left: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--velo-fuerte);
  font-family: var(--f-display);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-rapida);
}
.boton-acceso:hover { background: var(--velo); }
.boton-acceso svg { width: 18px; height: 18px; }
.boton-acceso--usuario { padding: 0; box-shadow: none; }
.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--terracota);
  color: var(--blanco);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.avatar--grande { width: 88px; height: 88px; font-size: 32px; }

.menu__lista { display: flex; align-items: center; gap: clamp(4px, 1.1vw, 18px); margin: 0; padding: 0; list-style: none; }
.menu__lista > li { position: relative; }
.menu__enlace {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--f-display);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.menu__enlace svg { width: 16px; height: 16px; transition: transform var(--t-rapida); }
.menu__enlace:hover, .menu__enlace.activo { border-bottom-color: var(--terracota); }
.menu__enlace[aria-expanded='true'] svg { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: -12px;
  display: none;
  min-width: 260px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 12px;
  background: rgba(17, 17, 17, 0.98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.menu__grupo > button[aria-expanded='true'] + .submenu { display: block; animation: aparecer-menu 200ms var(--curva); }
@keyframes aparecer-menu { from { opacity: 0; transform: translateY(-6px); } }
.submenu a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; font-family: var(--f-display); font-size: 15px; text-decoration: none; }
.submenu a:hover { background: var(--velo); }
.submenu__punto { width: 10px; aspect-ratio: var(--ovalo); border-radius: 50%; background: var(--c); flex: none; }

/* ——— Portada cinematográfica ——— */

.portada {
  position: relative;
  display: grid;
  height: 100svh;
  min-height: 620px;
  max-height: 1100px;
  background: var(--negro);
  color: var(--blanco);
  overflow: hidden;
  isolation: isolate;
}
.portada__diapo {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms var(--curva), visibility 0s 900ms;
}
.portada__diapo.activa { opacity: 1; visibility: visible; transition: opacity 900ms var(--curva); z-index: 1; }
.portada__diapo.saliendo { visibility: visible; }
.portada__imagen { position: absolute; inset: 0; overflow: hidden; background: color-mix(in srgb, var(--c) 30%, var(--negro)); transform: translateY(var(--paralaje, 0)); }
.portada__fondo, .ficha__fondo, .cabecera-seccion__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 700ms var(--curva); }
.portada__diapo.activa .portada__fondo { animation: acercar 12s ease-out both; }
@keyframes acercar { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.portada__diapo::after, .ficha::after, .cabecera-seccion::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11, 11, 11, 0.92) 0%, rgba(11, 11, 11, 0.6) 38%, rgba(11, 11, 11, 0) 72%),
    linear-gradient(0deg, rgba(11, 11, 11, 1) 0%, rgba(11, 11, 11, 0) 38%),
    linear-gradient(180deg, rgba(11, 11, 11, 0.55) 0%, rgba(11, 11, 11, 0) 22%);
}
.portada .pincel--portada { z-index: 1; opacity: 0; transform: translateX(8%) rotate(-4deg); transition: opacity 900ms var(--curva), transform 1400ms var(--curva); }
.portada__diapo.activa .pincel--portada { opacity: 0.8; transform: none; transition-delay: 300ms; }

.portada__texto, .ficha__texto, .cabecera-seccion__texto {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 14px;
  padding-block: calc(var(--alto-cabecera) + 60px) clamp(180px, 25vh, 270px);
  opacity: calc(1 - var(--desvanecer, 0) * 0.9);
}
.portada__texto > *, .ficha__texto > *, .cabecera-seccion__texto > * { max-width: 640px; }
.portada__titulo {
  margin: 0;
  max-width: 860px !important;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(44px, 6.4vw, 108px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.portada__autor { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 1.5vw, 22px); }
.portada__resumen { margin: 0 0 8px; font-size: clamp(16px, 1.25vw, 19px); max-width: 50ch; }
.portada__texto .progreso, .ficha__texto .progreso { position: static; display: block; width: min(100%, 360px); height: 4px; margin-top: 4px; border-radius: 4px; overflow: hidden; }

/* Entrada escalonada del texto de cada diapositiva */
.con-animaciones .portada__diapo .entra { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--curva), transform 900ms var(--curva); }
.con-animaciones .portada__diapo.activa .entra { opacity: 1; transform: none; }
.portada__diapo.activa .entra:nth-child(1) { transition-delay: 250ms; }
.portada__diapo.activa .entra:nth-child(2) { transition-delay: 340ms; }
.portada__diapo.activa .entra:nth-child(3) { transition-delay: 430ms; }
.portada__diapo.activa .entra:nth-child(4) { transition-delay: 500ms; }
.portada__diapo.activa .entra:nth-child(5) { transition-delay: 570ms; }
.portada__diapo.activa .entra:nth-child(6) { transition-delay: 640ms; }
.portada__diapo.activa .entra:nth-child(7) { transition-delay: 700ms; }

/* Grano de película muy sutil */
.grano {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 1.2s steps(6) infinite;
}
@keyframes grano { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(-1%, 1%); } }

.portada__flecha {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 11, 11, 0.4);
  color: var(--blanco);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--t-media), background-color var(--t-rapida);
  right: max(12px, calc(var(--margen) / 3));
}
.portada__flecha--atras { right: auto; left: max(12px, calc(var(--margen) / 3)); }
.portada__flecha--atras svg { transform: rotate(180deg); }
.portada:hover .portada__flecha, .portada__flecha:focus-visible { opacity: 1; }
.portada__flecha:hover { background: rgba(11, 11, 11, 0.7); }

/* Indicador: óvalos de marca con el color de cada categoría.
   El activo se alarga y se rellena mientras corre el tiempo de la diapositiva. */
/* Pie de la portada: indicador a la izquierda, «A continuación» a la derecha */
.portada__pie { position: absolute; inset: auto 0 clamp(36px, 6vh, 64px); z-index: 4; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.portada__mando { display: flex; align-items: center; gap: 18px; }
.portada__siguiente {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 340px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blanco);
  text-align: left;
  cursor: pointer;
}
.portada__siguiente-ovalo { flex: none; width: 58px; aspect-ratio: var(--ovalo); border-radius: 50%; overflow: hidden; outline: 2px solid var(--c); outline-offset: 3px; background: color-mix(in srgb, var(--c) 40%, var(--negro)); }
.portada__siguiente-ovalo img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--curva); }
.portada__siguiente:hover .portada__siguiente-ovalo img { transform: scale(1.1); }
.portada__siguiente-texto { display: grid; gap: 4px; min-width: 0; }
.portada__siguiente-texto strong { font-family: var(--f-display); font-weight: 400; font-size: 17px; line-height: 1.15; }
.indicador { display: flex; align-items: center; gap: 10px; }
.indicador__ovalo {
  position: relative;
  width: 14px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  overflow: hidden;
  cursor: pointer;
  transition: width 500ms var(--curva), border-radius 500ms var(--curva), background-color var(--t-media);
}
.indicador__ovalo:hover { background: var(--c); }
.indicador__ovalo[aria-selected='true'] { width: 64px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); box-shadow: none; }
.indicador__ovalo span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c); }
.indicador__ovalo[aria-selected='true'] span { animation: llenar var(--duracion-diapo, 8s) linear forwards; }
.portada.detenida .indicador__ovalo[aria-selected='true'] span { animation-play-state: paused; }
.portada.en-pausa .indicador__ovalo[aria-selected='true'] span { animation: none; width: 100%; }
@keyframes llenar { to { width: 100%; } }
.pausa { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--velo); cursor: pointer; }
.pausa svg { width: 16px; height: 16px; }
.pausa .i-play { display: none; fill: currentColor; stroke: none; }
.portada.en-pausa .pausa .i-play { display: block; }
.portada.en-pausa .pausa .i-pausa { display: none; }

/* ——— Apariciones al bajar ——— */

.con-animaciones .aparece { opacity: 0; transform: translateY(36px); transition: opacity 800ms var(--curva), transform 900ms var(--curva); }
.con-animaciones .aparece.visible { opacity: 1; transform: none; }

/* ——— Filas ——— */

.fila { position: relative; padding-block: clamp(36px, 4.5vw, 64px); overflow: hidden; isolation: isolate; }
.fila--crema { background: var(--crema); color: var(--tinta); }
.portada + .fila--crema { padding-top: clamp(40px, 5vw, 72px); }
.fila--crema + .fila--crema { padding-top: 0; }

/* Bandas de color de marca con la pincelada en crema, apartada del título. */
.fila--terracota, .fila--salvia, .fila--azul, .fila--color { color: var(--blanco); }
.fila--terracota { --banda: var(--terracota); --pincel-forma: url('../img/marca/pincelada-2.webp'); }
.fila--salvia { --banda: var(--salvia); --pincel-forma: url('../img/marca/pincelada-1.webp'); }
.fila--azul { --banda: var(--azul); --pincel-forma: url('../img/marca/pincelada-3.webp'); }
.fila--color { --banda: var(--c); --pincel-forma: url('../img/marca/pincelada-1.webp'); }
.fila--terracota, .fila--salvia, .fila--azul, .fila--color { background: var(--banda); }
.fila--terracota::before, .fila--salvia::before, .fila--azul::before, .fila--color::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -10%;
  right: -6%;
  width: min(1100px, 80vw);
  height: 120%;
  background: var(--crema);
  opacity: 0.9;
  -webkit-mask: var(--pincel-forma) right center / contain no-repeat;
  mask: var(--pincel-forma) right center / contain no-repeat;
}

.fila__cabeza { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.fila__flechas { display: flex; gap: 8px; margin-left: auto; }
.flecha {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--t-rapida), background-color var(--t-rapida);
}
.fila--color .flecha, .fila--terracota .flecha, .fila--salvia .flecha, .fila--azul .flecha { background: rgba(11, 11, 11, 0.18); }
.flecha:hover:not(:disabled) { opacity: 1; background: rgba(127, 127, 127, 0.2); }
.flecha:disabled { opacity: 0.25; cursor: default; }
.flecha--atras svg { transform: rotate(180deg); }
.sin-desplazamiento .fila__flechas { display: none; }

.fila__pista {
  --hueco: clamp(12px, 1.3vw, 20px);
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  gap: var(--hueco);
  margin: 0;
  /* Aire arriba para que el contorno de color del hover no se corte */
  padding: 16px var(--margen) 18px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  scrollbar-width: none;
}
.fila__pista::-webkit-scrollbar { display: none; }
.fila--tarjetas .fila__pista { grid-auto-columns: clamp(280px, 26vw, 440px); }
.fila--ranking .fila__pista { grid-auto-columns: clamp(320px, 29vw, 490px); }
.fila--ovalos .fila__pista { grid-auto-columns: clamp(200px, 18vw, 290px); }
.fila__pista > li { scroll-snap-align: start; }

/* Tarjeta 16:9: al pasar el ratón el título sube y aparece el resumen */
.tarjeta { position: relative; }
.tarjeta__enlace {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: var(--radio);
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 35%, var(--negro));
  color: var(--blanco);
  text-decoration: none;
  transition: transform 500ms var(--curva), box-shadow 300ms var(--curva);
}
.tarjeta__enlace img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--curva), filter 500ms, opacity 600ms var(--curva); }
.tarjeta__enlace::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 11, 11, 0.9) 0%, rgba(11, 11, 11, 0.15) 58%, rgba(11, 11, 11, 0.3) 100%);
  transition: background-color 500ms;
}
.tarjeta__arriba { position: absolute; inset: 12px 12px auto; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; transition: opacity 300ms var(--curva), transform 400ms var(--curva); }
/* Al desplegarse el texto, la etiqueta y la duración se apartan para no chocar con el título */
.tarjeta__enlace:hover .tarjeta__arriba, .tarjeta__enlace:focus-visible .tarjeta__arriba { opacity: 0; transform: translateY(-8px); }
/* Bloque que se despliega al pasar el ratón: su altura pasa de 0 a la natural
   y empuja el título hacia arriba, tenga una línea o dos. */
.desplegable { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--curva); }
.desplegable > span { display: grid; gap: 4px; min-height: 0; overflow: hidden; opacity: 0; transition: opacity 350ms var(--curva); }
.tarjeta__enlace:hover .desplegable, .tarjeta__enlace:focus-visible .desplegable,
.ovalo__enlace:hover .desplegable, .ovalo__enlace:focus-visible .desplegable { grid-template-rows: 1fr; }
.tarjeta__enlace:hover .desplegable > span, .tarjeta__enlace:focus-visible .desplegable > span,
.ovalo__enlace:hover .desplegable > span, .ovalo__enlace:focus-visible .desplegable > span { opacity: 1; transition-delay: 120ms; }

.tarjeta__info { position: absolute; inset: auto 16px 16px; z-index: 2; display: grid; gap: 6px; max-height: calc(100% - 28px); }
.tarjeta__titulo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__titulo { font-family: var(--f-display); font-size: var(--t-pieza); line-height: 1.12; text-wrap: pretty; }
.tarjeta__resumen { font-size: var(--t-pieza-texto); line-height: 1.35; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__meta { font-size: 14px; opacity: 0.75; letter-spacing: 0.02em; }
/* Sin sombras: al pasar el ratón, solo un contorno en el color de la categoría */
.tarjeta__enlace:hover, .tarjeta__enlace:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--c); }
.tarjeta__enlace:hover img, .tarjeta__enlace:focus-visible img { transform: scale(1.06); filter: brightness(0.7); }

.tarjeta__quitar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 11, 11, 0.75);
  color: var(--blanco);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-rapida);
}
.tarjeta__quitar svg { width: 16px; height: 16px; }
.tarjeta:hover .tarjeta__quitar, .tarjeta__quitar:focus-visible { opacity: 1; }
.tarjeta:has(.tarjeta__quitar) .tarjeta__arriba .chip { margin-right: 36px; }

/* Ranking de «Lo más visto»: número grande perfilado al estilo de las plataformas */
.tarjeta--ranking { display: grid; grid-template-columns: auto 1fr; align-items: end; }
.ranking__numero {
  margin-right: -0.12em;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(96px, 10vw, 170px);
  line-height: 0.78;
  color: var(--banda, var(--negro));
  -webkit-text-stroke: 3px var(--blanco);
  paint-order: stroke fill;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* Barra de progreso de «Seguir viendo», en el color de la categoría */
.progreso { position: absolute; inset: auto 0 0; z-index: 3; height: 5px; background: rgba(255, 255, 255, 0.28); }
.progreso > span { display: block; height: 100%; background: var(--c, var(--terracota)); }

/* Óvalo con la proporción de la marca (7:10) */
.ovalo__enlace { position: relative; display: grid; gap: 10px; color: inherit; text-decoration: none; }
.ovalo__marco {
  position: relative;
  display: block;
  aspect-ratio: var(--ovalo);
  max-width: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 35%, var(--negro));
  color: var(--blanco);
  outline: 3px solid transparent;
  outline-offset: 4px;
  transition: outline-color var(--t-rapida);
}
.ovalo__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--curva), filter 500ms, opacity 600ms var(--curva); }
.ovalo__marco::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(11, 11, 11, 0.5), rgba(11, 11, 11, 0.15) 75%); }
.ovalo__pastilla { position: absolute; inset: 9% 0 auto; z-index: 2; display: flex; justify-content: center; transition: opacity 300ms var(--curva), transform 400ms var(--curva); }
.ovalo__enlace:hover .ovalo__pastilla, .ovalo__enlace:focus-visible .ovalo__pastilla { opacity: 0; transform: translateY(-8px); }
.ovalo__info {
  position: absolute;
  inset: 50% 8% auto;
  z-index: 2;
  display: grid;
  gap: 8px;
  text-align: center;
  transform: translateY(-50%);
}
/* text-wrap: pretty evita cortes raros como «Constelaciones / de / lo intangible» */
.ovalo__titulo { font-family: var(--f-display); font-size: var(--t-pieza); line-height: 1.12; text-wrap: pretty; overflow-wrap: break-word; hyphens: manual; }
.ovalo__resumen { font-size: var(--t-pieza-texto); line-height: 1.35; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ovalo__duracion { position: absolute; left: 50%; bottom: 8%; z-index: 2; transform: translateX(-50%); }
.ovalo__enlace:hover .ovalo__marco, .ovalo__enlace:focus-visible .ovalo__marco { outline-color: var(--c); }
.ovalo__enlace:hover img, .ovalo__enlace:focus-visible img { transform: scale(1.06); filter: brightness(0.55); }
.ovalo__enlace .progreso { position: static; height: 4px; width: 56%; justify-self: center; border-radius: 4px; overflow: hidden; background: rgba(29, 29, 27, 0.15); }

/* ——— Explora el MUN, separado por grupos ——— */

/* Banda azul de marca con la pincelada al fondo */
.explora { position: relative; padding-block: clamp(56px, 7vw, 110px); overflow: hidden; isolation: isolate; background: var(--azul); color: var(--blanco); }
.explora::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -15%;
  right: -12%;
  width: min(1200px, 85vw);
  height: 130%;
  background: var(--crema);
  opacity: 0.07;
  -webkit-mask: url('../img/marca/pincelada-1.webp') right center / contain no-repeat;
  mask: url('../img/marca/pincelada-1.webp') right center / contain no-repeat;
}
.explora > .envoltura { display: grid; gap: clamp(28px, 3vw, 44px); }
.explora__cabeza { display: grid; justify-items: center; gap: 12px; text-align: center; }
.explora__cabeza .titulo-fila { justify-content: center; font-size: clamp(28px, 3vw, 44px); }
.explora__cabeza .titulo-fila img { width: 38px; height: 38px; }
.explora__entradilla { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.3vw, 20px); text-wrap: balance; opacity: 0.85; }
.explora__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 20px; }
.explora__grupo { grid-column: span min(var(--n), 4); display: grid; gap: 16px; align-content: start; }
.explora__nombre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.1;
}
.explora__ovalo { flex: none; width: 13px; aspect-ratio: var(--ovalo); border-radius: 50%; background: var(--c, var(--terracota)); }
.explora__lista { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.disciplina {
  position: relative;
  display: grid;
  align-content: end;
  gap: 4px;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  padding: 18px;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--c);
  color: var(--blanco);
  text-decoration: none;
  isolation: isolate;
  transition: transform 500ms var(--curva), box-shadow 300ms var(--curva);
}
.disciplina img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: 0.6; transition: transform 900ms var(--curva), opacity 500ms, mix-blend-mode 0s; }
.disciplina img.cargando { opacity: 0; }
.disciplina::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--c) 92%, black) 0%, transparent 70%); }
.disciplina__pincel {
  position: absolute;
  z-index: -1;
  right: -18%;
  top: -10%;
  width: 90%;
  aspect-ratio: 1600 / 713;
  background: var(--crema);
  opacity: 0;
  transform: translateX(10%) rotate(-6deg);
  -webkit-mask: url('../img/marca/pincelada-1.webp') center / contain no-repeat;
  mask: url('../img/marca/pincelada-1.webp') center / contain no-repeat;
  transition: opacity 500ms var(--curva), transform 700ms var(--curva);
}
.disciplina:hover, .disciplina:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--crema); }
.disciplina:hover img, .disciplina:focus-visible img { transform: scale(1.06); opacity: 0.85; mix-blend-mode: normal; }
.disciplina:hover .disciplina__pincel, .disciplina:focus-visible .disciplina__pincel { opacity: 0.35; transform: none; }
.disciplina__cuenta { position: absolute; top: 14px; left: 18px; font-family: var(--f-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.disciplina__nombre { font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.05; }
.disciplina__lema { font-size: 14px; line-height: 1.35; opacity: 0.92; }

/* ——— Categoría: telón de entrada y cabecera ——— */

/* Telón de categoría: la animación del logo de MUNdi sobre un fondo oscuro teñido
   con el color de la categoría (así se leen todos los colores del logo), el nombre
   de la categoría debajo y, al terminar, se abre con un óvalo de la marca (7:10). */
@property --iris { syntax: '<length>'; inherits: false; initial-value: 0px; }
.telon {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background:
    /* Borde del óvalo en el color de la categoría, justo por fuera del hueco. */
    radial-gradient(calc(var(--iris) * 0.7) var(--iris) at 50% 50%, transparent 99%, var(--c) 100%, var(--c) 103%, transparent 104%),
    radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--c) 34%, var(--negro)), color-mix(in srgb, var(--c) 12%, var(--negro)) 75%);
  cursor: pointer;
  -webkit-mask: radial-gradient(calc(var(--iris) * 0.7) var(--iris) at 50% 50%, transparent 98%, #000 100%);
  mask: radial-gradient(calc(var(--iris) * 0.7) var(--iris) at 50% 50%, transparent 98%, #000 100%);
}
/* El óvalo se abre en el centro, se queda un instante a la vista y luego crece hasta descubrir la página. */
.telon.abriendo { pointer-events: none; animation: telon-iris 1200ms both; }
@keyframes telon-iris {
  0% { --iris: 0px; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  35% { --iris: 22vmin; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  92% { opacity: 1; }
  to { --iris: 150vmax; opacity: 0; }
}
.telon__escena { display: grid; justify-items: center; gap: clamp(8px, 2vh, 20px); }
.telon__logo { width: min(64vw, 600px); aspect-ratio: 920 / 480; }
.telon__categoria { font-size: clamp(12px, 1.1vw, 15px); padding: 7px 16px 6px; animation: subir-texto 400ms var(--curva) both; }

.cabecera-seccion, .ficha {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 82svh, 900px);
  background: color-mix(in srgb, var(--c) 30%, var(--negro));
  color: var(--blanco);
  overflow: hidden;
  isolation: isolate;
}
.cabecera-seccion::after {
  background:
    linear-gradient(90deg, rgba(11, 11, 11, 0.94) 0%, rgba(11, 11, 11, 0.6) 42%, rgba(11, 11, 11, 0.05) 80%),
    linear-gradient(0deg, color-mix(in srgb, var(--c) 70%, transparent) 0%, transparent 40%);
}
.cabecera-seccion .pincel--seccion { z-index: 1; opacity: 0.9; }
.ficha .pincel--portada { opacity: 0.8; }
.cabecera-seccion__texto, .ficha__texto { padding-bottom: clamp(56px, 9vh, 96px); }
.ficha__quedan { margin: 0; font-size: 14px; opacity: 0.8; }

/* Entrada de la cabecera de categoría y de la ficha */
.con-animaciones .entrada .cabecera-seccion__fondo, .con-animaciones .entrada .ficha__fondo { animation: acercar 2.4s var(--curva) both; }
.con-animaciones .entrada .entra { animation: subir-texto 900ms var(--curva) both; }
.con-animaciones .entrada .pincel { animation: pincel-entra 1400ms var(--curva) both; }
/* En las categorías el texto espera al telón: entra cuando empieza a abrirse el óvalo. */
.con-animaciones .cabecera-seccion.entrada:not(.revelada) .entra,
.con-animaciones .cabecera-seccion.entrada:not(.revelada) .pincel { animation-play-state: paused; }
.con-animaciones .cabecera-seccion.entrada .entra { animation-delay: calc(250ms + var(--i, 0) * 90ms); }
.con-animaciones .cabecera-seccion.entrada .pincel { animation-delay: 300ms; }
.con-animaciones .ficha.entrada .entra { animation-delay: calc(150ms + var(--i, 0) * 80ms); }
.entrada .entra:nth-child(2) { --i: 1; }
.entrada .entra:nth-child(3) { --i: 2; }
.entrada .entra:nth-child(4) { --i: 3; }
.entrada .entra:nth-child(5) { --i: 4; }
.entrada .entra:nth-child(6) { --i: 5; }
.entrada .entra:nth-child(7) { --i: 6; }
.entrada .entra:nth-child(8) { --i: 7; }
@keyframes subir-texto { from { opacity: 0; transform: translateY(28px); } }
@keyframes pincel-entra { from { opacity: 0; transform: translateX(12%) rotate(-8deg); clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

.destacado { padding-block: clamp(40px, 5vw, 72px); }
.destacado__tarjeta {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  max-width: 1280px;
  color: var(--tinta);
  text-decoration: none;
}
.destacado__imagen { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: calc(var(--radio) * 1.4); overflow: hidden; background: color-mix(in srgb, var(--c) 35%, var(--negro)); transition: box-shadow 300ms var(--curva); }
.destacado__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--curva), opacity 600ms var(--curva); }
.destacado__tarjeta:hover .destacado__imagen { box-shadow: 0 0 0 3px var(--c); }
.destacado__tarjeta:hover .destacado__imagen img { transform: scale(1.04); }
.destacado__texto { display: grid; justify-items: start; gap: 10px; }
.destacado__etiqueta { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.destacado__titulo { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 50px); line-height: 0.98; text-wrap: balance; }
.destacado__autor { font-family: var(--f-display); font-size: 18px; }
.destacado__texto .datos { color: var(--tinta-suave); opacity: 1; }
.destacado__resumen { margin-bottom: 8px; font-size: 17px; max-width: 46ch; }

.bloque { position: relative; padding-block: clamp(48px, 6vw, 96px); overflow: hidden; isolation: isolate; }
.bloque--color { background: color-mix(in srgb, var(--c) 82%, black); color: var(--blanco); }
.bloque--color::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -20%;
  right: -10%;
  width: min(1100px, 80vw);
  height: 140%;
  background: var(--blanco);
  opacity: 0.08;
  -webkit-mask: url('../img/marca/pincelada-3.webp') right center / contain no-repeat;
  mask: url('../img/marca/pincelada-3.webp') right center / contain no-repeat;
}
.bloque .titulo-fila { margin-bottom: 26px; }

.otras { display: grid; gap: 22px; padding-block: clamp(48px, 6vw, 96px); }
.otras .explora__lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.otras .disciplina:hover, .otras .disciplina:focus-visible { box-shadow: 0 0 0 3px var(--c); }

/* Imágenes que aún se están descargando: se ve el color de su categoría y luego entran con un fundido */
img.cargando { opacity: 0; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }

.vacio { display: flex; align-items: center; gap: 16px; padding: 28px; border-radius: var(--radio); background: rgba(11, 11, 11, 0.3); color: var(--blanco); }
.vacio p { margin: 0; }

.sobre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: clamp(28px, 5vw, 96px); padding-block: clamp(48px, 6vw, 88px) 24px; }
.sobre__texto { display: grid; gap: 14px; align-content: start; }
.sobre__texto p { margin: 0; max-width: 65ch; font-size: 18px; }
.sobre__ficha { display: grid; margin: 0; align-content: start; border-top: 1px solid var(--crema-oscura); }
.sobre__ficha div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--crema-oscura); }
.sobre__ficha dt { font-family: var(--f-display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); padding-top: 3px; }
.sobre__ficha dd { margin: 0; }

.pagina-simple { display: grid; justify-items: start; gap: 18px; min-height: 70vh; align-content: start; padding-top: calc(var(--alto-cabecera) + clamp(48px, 7vw, 110px)); padding-bottom: 80px; }
.pagina-simple .rejilla, .pagina-simple .vacio { width: 100%; margin-top: 18px; }
.pagina-simple .vacio { background: var(--azul); }
body:not([data-vista='inicio']):not([data-vista='categoria']):not([data-vista='ver']) .cabecera { background-color: rgba(11, 11, 11, 0.96); }

/* ——— Acceso ——— */

.acceso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; background: var(--crema); }
.acceso__marca { position: relative; display: grid; place-items: end start; padding: var(--margen); overflow: hidden; background: var(--azul); }
.acceso__marca img { position: relative; z-index: 1; width: min(240px, 50%); height: auto; }
.acceso__pincel {
  position: absolute;
  inset: 10% -20% auto auto;
  width: 120%;
  aspect-ratio: 1600 / 713;
  background: var(--terracota);
  opacity: 0.9;
  -webkit-mask: url('../img/marca/pincelada-2.webp') center / contain no-repeat;
  mask: url('../img/marca/pincelada-2.webp') center / contain no-repeat;
  animation: pincel-entra 1400ms var(--curva) both;
}
.acceso__formulario { display: grid; align-content: center; justify-items: start; gap: 18px; padding: calc(var(--alto-cabecera) + 40px) var(--margen) 64px; max-width: 620px; }
.acceso__formulario .titulo-grande { font-size: clamp(38px, 4.6vw, 68px); }
.acceso .acceso__panel { display: grid; justify-items: start; gap: 18px; padding-top: calc(var(--alto-cabecera) + 80px); padding-bottom: 80px; }
.acceso:has(.acceso__panel) { grid-template-columns: 1fr; min-height: 80vh; }

.pestanas { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--crema-oscura); }
.pestanas a { padding: 10px 18px; border-radius: 9px; font-family: var(--f-display); font-size: 15px; text-decoration: none; color: var(--tinta-suave); }
.pestanas a[aria-selected='true'] { background: var(--blanco); color: var(--tinta); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }

.formulario { display: grid; gap: 16px; width: 100%; }
.campo { display: grid; gap: 6px; }
.campo label { font-family: var(--f-display); font-size: 14px; }
.campo input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--crema-oscura);
  border-radius: 10px;
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
  font-size: 16px;
  color-scheme: light;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.campo input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 22%, transparent); }
.campo__ayuda { margin: 0; font-size: 13px; color: var(--tinta-suave); }
.campo__enlace { justify-self: end; font-size: 14px; color: var(--azul); }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.casilla input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--azul); flex: none; }
.formulario__error { margin: 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--terracota) 14%, white); color: #8a2e17; font-size: 14px; }
.acceso__nota { margin: 0; padding: 12px 14px; border-left: 3px solid var(--salvia); background: color-mix(in srgb, var(--salvia) 10%, transparent); font-size: 13.5px; color: var(--tinta-suave); }
.acceso__omitir { font-family: var(--f-display); font-size: 14px; color: var(--tinta-suave); }

.volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 8px 14px 8px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--crema-oscura);
  color: var(--tinta);
  font-family: var(--f-display);
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--t-rapida);
}
.volver:hover { background: color-mix(in srgb, var(--crema-oscura) 70%, var(--tinta)); color: var(--blanco); }
.volver svg { width: 18px; height: 18px; }

.acceso__proximamente { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 12px; background: var(--azul); color: var(--blanco); }
.acceso__proximamente p { margin: 0; font-size: 15px; line-height: 1.45; }
.formulario fieldset { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.formulario--cerrado fieldset { opacity: 0.55; }
.formulario--cerrado input, .formulario--cerrado button { cursor: not-allowed; }
.formulario--cerrado .boton:hover { transform: none; filter: none; }

/* ——— Reproductor ——— */

body.modo-cine { background: var(--negro); }

.cine { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100dvh; background: var(--negro); color: var(--blanco); }
.cine__barra { display: flex; align-items: center; gap: 18px; padding: 14px var(--margen); }
.cine__volver { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--velo); }
.cine__volver:hover { background: var(--velo-fuerte); }
.cine__barra img { width: 90px; height: auto; }
.cine__titulo { margin: 0 0 0 auto; text-align: right; font-size: 14px; opacity: 0.85; min-width: 0; }
.cine__titulo span { display: block; font-family: var(--f-display); font-size: 16px; }
.cine__pantalla {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, calc((100dvh - 90px) * 16 / 9));
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: #000;
}
.cine__video, .cine__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cine__cargando { display: grid; place-items: center; height: 100%; margin: 0; padding: 24px; text-align: center; opacity: 0.7; }
.cine__intro { position: absolute; inset: 0; z-index: 5; background: #000; transition: opacity 400ms ease; }
.cine__intro.saliendo { opacity: 0; }
.cine__intro video { width: 100%; height: 100%; object-fit: contain; }
.cine__saltar { position: absolute; right: 20px; bottom: 20px; min-height: 40px; padding: 10px 18px; font-size: 13px; letter-spacing: 0.06em; }
.cine__sonido { position: absolute; left: 20px; bottom: 20px; z-index: 6; min-height: 40px; padding: 10px 18px; font-size: 13px; }
.cine__reanudar {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 14px 12px 20px;
  border-radius: 14px;
  background: rgba(30, 30, 30, 0.92);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  animation: subir 320ms ease both;
}
.cine__reanudar p { margin: 0; }
.cine__reanudar .boton { min-height: 40px; padding: 10px 16px; font-size: 13px; }
@keyframes subir { from { opacity: 0; transform: translate(-50%, 12px); } }
.cine__siguiente {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 16px;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(11, 11, 11, 0.86);
  backdrop-filter: blur(8px);
}
.siguiente__tarjeta { display: flex; align-items: center; gap: 18px; color: inherit; text-decoration: none; max-width: 640px; }
.siguiente__tarjeta img { width: clamp(140px, 22vw, 260px); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.siguiente__tarjeta span { display: grid; gap: 6px; min-width: 0; }
.siguiente__tarjeta strong { font-family: var(--f-display); font-size: clamp(20px, 2.2vw, 30px); line-height: 1.05; }

/* ——— Búsqueda ——— */

.busqueda { position: fixed; inset: 0; z-index: 80; overflow-y: auto; background: rgba(11, 11, 11, 0.95); backdrop-filter: blur(10px); color: var(--blanco); animation: aparecer-menu 220ms var(--curva); }
.busqueda__panel { padding: 28px var(--margen) 64px; }
.busqueda__campo { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--velo-fuerte); }
.busqueda__campo:focus-within { border-bottom-color: var(--terracota); }
.busqueda__campo svg { width: 26px; height: 26px; opacity: 0.7; }
.busqueda__campo input { flex: 1; min-width: 0; border: 0; background: none; color: inherit; font-family: var(--f-display); font-size: clamp(22px, 3vw, 40px); outline: none; }
.busqueda__campo input::placeholder { color: rgba(255, 255, 255, 0.45); }
.busqueda__campo input::-webkit-search-cancel-button { display: none; }
.busqueda__cerrar { padding: 10px 14px; border: 1px solid var(--velo-fuerte); border-radius: 999px; background: none; cursor: pointer; font-family: var(--f-display); font-size: 14px; }
.busqueda__resultados { display: grid; gap: 18px; padding-top: 24px; }
.busqueda__ayuda { margin: 0; opacity: 0.7; }

/* ——— Pie y avisos ——— */

.pie { background: var(--negro); color: var(--blanco); }
.pie__franja { display: grid; grid-template-columns: 2fr 1fr 1fr; height: 10px; }
.pie__franja span:nth-child(1) { background: var(--azul); }
.pie__franja span:nth-child(2) { background: var(--terracota); }
.pie__franja span:nth-child(3) { background: var(--salvia); }
.pie__contenido { display: grid; justify-items: center; gap: 10px; padding: 56px var(--margen) 44px; text-align: center; }
.pie__contenido img { width: 140px; height: auto; margin-bottom: 8px; }
.pie__contenido p { margin: 0; opacity: 0.85; }
.pie__legal { font-size: 13px; opacity: 0.55 !important; }

.aviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--f-display);
  font-size: 14px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
  animation: subir 260ms ease both;
}

/* ——— Pantallas táctiles: sin hover, la información se muestra completa ——— */

@media (hover: none) {
  .desplegable { display: none; }
  .tarjeta__quitar { opacity: 1; }
  .portada__flecha { display: none; }
}

/* ——— Tableta ——— */

@media (max-width: 1180px) {
  .menu-movil { display: grid; }
  .menu {
    position: fixed;
    inset: var(--alto-cabecera) 0 0;
    display: none;
    overflow-y: auto;
    padding: 12px var(--margen) 40px;
    background: var(--negro);
  }
  body.menu-abierto { overflow: hidden; }
  body.menu-abierto .menu { display: block; }
  body.menu-abierto .cabecera { background-color: var(--negro); }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lista > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .menu__enlace { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 20px; border-bottom: 0; }
  .menu__enlace.activo { color: var(--terracota); }
  .submenu { position: static; display: block; min-width: 0; padding: 0 0 12px; background: none; box-shadow: none; }
  .menu__grupo > button svg { display: none; }
  .menu__grupo > button { pointer-events: none; opacity: 0.6; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; padding-bottom: 4px; }
  .submenu a { padding: 10px 0; font-size: 18px; }
  .explora__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explora__grupo { grid-column: span min(var(--n), 2); }
  .explora__lista { grid-template-columns: repeat(min(var(--n), 2), minmax(0, 1fr)); }
  .explora__grupo[style*='--n:4'] .explora__lista, .explora__grupo[style*='--n:3'] .explora__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ——— Móvil ——— */

@media (max-width: 760px) {
  :root { --alto-cabecera: 64px; }
  .boton-acceso span { display: none; }
  .boton-acceso { padding: 8px; margin-left: 0; box-shadow: none; }
  .portada { min-height: 640px; max-height: none; }
  .portada__diapo::after, .ficha::after, .cabecera-seccion::after {
    background: linear-gradient(0deg, rgba(11, 11, 11, 1) 0%, rgba(11, 11, 11, 0.78) 45%, rgba(11, 11, 11, 0.15) 100%);
  }
  .pincel--portada { width: 70vw; top: 12%; }
  .portada__texto { padding-bottom: 120px; }
  .portada__pie { bottom: 32px; align-items: center; }
  .portada__siguiente-texto { display: none; }
  .portada__siguiente-ovalo { width: 40px; }
  .destacado__tarjeta { grid-template-columns: minmax(0, 1fr); }
  .cabecera__logo img { width: 96px; }
  .indicador { gap: 7px; }
  .indicador__ovalo { width: 11px; height: 16px; }
  .indicador__ovalo[aria-selected='true'] { width: 40px; }
  .portada__resumen { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .botones .boton { flex: 1 1 auto; }
  .fila__flechas { display: none; }
  .fila--tarjetas .fila__pista { grid-auto-columns: 78vw; }
  .fila--ranking .fila__pista { grid-auto-columns: 84vw; }
  .fila--ovalos .fila__pista { grid-auto-columns: 40vw; }
  .ranking__numero { font-size: 88px; -webkit-text-stroke-width: 2px; }
  .fila--terracota::before, .fila--salvia::before, .fila--azul::before, .fila--color::before { width: 140vw; right: -40vw; opacity: 0.55; }
  .explora__rejilla { grid-template-columns: minmax(0, 1fr); }
  .explora__grupo { grid-column: auto; }
  .explora__lista { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .disciplina { aspect-ratio: 1; padding: 14px; }
  .disciplina__lema { display: none; }
  .sobre { grid-template-columns: minmax(0, 1fr); }
  .acceso { grid-template-columns: 1fr; }
  .acceso__marca { min-height: 220px; padding-top: var(--alto-cabecera); }
  .acceso__formulario { padding-top: 36px; }
  .cine__titulo { display: none; }
  .cine__pantalla { width: 100%; }
  .cine__saltar { right: 10px; bottom: 10px; }
  .cine__sonido { left: 10px; bottom: 10px; }
  .siguiente__tarjeta { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .grano { display: none; }
  .telon { display: none; }
}