/* Rediseño v6 de DoblajeVideojuegos. Colores ámbar de la marca sobre la estructura oscura del v2 de DeVuego. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/Baloo2.woff2) format('woff2');
}
@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/Signika.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/Signika-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --acento: #F2A93B;
  --acento-marca: #E29938;
  --texto: #F3E4CF;
  --texto-2: #CDB595;
  --texto-3: #A28B6D;
  --fondo: #140C04;
  --fondo-medio: #2E1B07;
  --fondo-brillo: #4A2A02;
  --panel: #21150A;
  --campo: #1A1006;
  --linea: rgba(var(--ambar-rgb), .3);
  --linea-suave: rgba(var(--ambar-rgb), .14);
  --borde: rgba(var(--ambar-rgb), .22);
  --titular: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --titulo: #fff;
  --sobre-acento: #140C04;
  --acento-texto: #F2A93B;
  --acento-hover: #ffc266;
  --relleno: #2E1B07;
  --barra: rgba(20, 12, 4, .65);
  --foco: #fff;
  --ambar-rgb: 226, 153, 56;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--texto);
  font-family: 'Signika', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--fondo) radial-gradient(ellipse 120% 800px at 50% 0, var(--fondo-brillo) 0%, var(--fondo-medio) 45%, var(--fondo) 100%) no-repeat;
}
img { max-width: 100%; }
a { color: var(--acento-texto); }
a:hover { color: var(--titulo); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; font-family: var(--titular); font-weight: 700; color: var(--titulo); }
h1 { font-size: clamp(42px, 5.8vw, 76px); line-height: 1.04; }
h2 { font-size: 32px; line-height: 1.1; }
h3 { font-size: 25px; line-height: 1.15; }
p { margin: 0; }

.aviso-v6 { padding: 6px 16px; text-align: center; font-size: 13px; color: var(--sobre-acento); background: var(--acento); }

.caja {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 40px) 32px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.ficha { gap: 30px; }

/* ===== Cabecera ===== */
.cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.logo { display: block; line-height: 0; margin-right: auto; }
.logo img { height: 80px; width: auto; }
.menu {
  flex: 1 1 620px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--barra);
  border: 1px solid rgba(var(--ambar-rgb), .18);
  border-radius: 12px;
}
.menu a {
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--texto);
}
.menu a:hover { background: rgba(var(--ambar-rgb), .15); color: var(--titulo); }
.menu a.activa { font-weight: 600; color: var(--sobre-acento); background: var(--acento); }
.menu a.secundaria { color: var(--texto-2); }
.menu .aparte { margin-left: auto; }
.abrir-menu { display: none; }
@media (max-width: 760px) {
  .logo img { height: 66px; }
  .abrir-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 10px;
    background: var(--barra);
    border: 1px solid var(--linea);
    cursor: pointer;
  }
  .abrir-menu i { font-size: 20px; color: var(--texto); }
  .menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .menu.abierto { display: flex; }
  .menu a { padding: 12px 14px; }
  .menu .aparte { margin-left: 0; }
}

/* ===== Portada: pregunta y buscador ===== */
.inicio { display: flex; flex-wrap: wrap; align-items: center; gap: 36px 56px; }
.inicio-texto { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.buscador {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 8px 16px;
  background: var(--campo);
  border: 2px solid var(--acento);
  border-radius: 16px;
}
.buscador label {
  position: absolute;
  top: -14px;
  left: 14px;
  padding: 2px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sobre-acento);
  background: var(--acento);
}
.buscador input {
  flex: 1;
  min-width: 0;
  height: 44px;
  background: none;
  border: none;
  outline: none;
  color: var(--titulo);
  font-family: inherit;
  font-size: 17px;
}
.buscador input::placeholder, .filtro::placeholder { color: var(--texto-3); }
.boton-solido {
  flex-shrink: 0;
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 10px;
  color: var(--sobre-acento);
  background: var(--acento);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.boton-solido:hover { background: var(--acento-hover); }
.sugerencias { font-size: 15px; color: var(--texto-2); }

/* ===== Una voz, muchos personajes ===== */
.voces { flex: 1 1 480px; min-width: 0; padding: 22px; background: var(--panel); border: 1px solid var(--borde); border-radius: 22px; }
.voz-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; }
.voz-datos { flex: 1 1 180px; min-width: 0; font-size: 14px; color: var(--texto-2); }
.voz-nombre { display: block; font-family: var(--titular); font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--titulo); text-decoration: none; }
.boton-borde {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--texto);
  background: none;
  border: 1px solid rgba(var(--ambar-rgb), .5);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton-borde:hover { color: var(--titulo); border-color: var(--acento); background: rgba(var(--ambar-rgb), .1); }

.avatar { display: block; flex: 0 0 auto; width: 88px; height: 88px; object-fit: cover; border-radius: 50%; }
.avatar-vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--titular);
  font-size: 28px;
  font-weight: 700;
  color: var(--acento-texto);
  background: var(--relleno);
  border: 1px solid var(--borde);
}
.avatar-medio { width: 72px; height: 72px; font-size: 24px; }
.avatar-grande { width: 170px; height: 170px; font-size: 56px; }

.bocadillos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 10px; padding-bottom: 8px; }
.bocadillo {
  position: relative;
  display: inline-block;
  padding: 9px 14px;
  border-radius: 14px;
  background: var(--relleno);
  border: 1.5px solid rgba(var(--ambar-rgb), .55);
  line-height: 1.2;
  text-decoration: none;
  transform: rotate(var(--giro, 0deg));
  transition: transform .15s ease;
}
.bocadillo::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -8px;
  width: 13px;
  height: 13px;
  background: inherit;
  border-right: inherit;
  border-bottom: inherit;
  transform: rotate(45deg) skew(12deg, 12deg);
}
a.bocadillo:hover { transform: rotate(0deg) scale(1.04); }
.bocadillo strong { display: block; font-size: 15px; font-weight: 700; color: var(--titulo); }
.bocadillo span { display: block; margin-top: 2px; font-size: 12px; color: var(--texto-2); }
.bocadillo.principal { background: var(--acento); border-color: var(--acento); }
.bocadillo.principal strong { font-size: 18px; color: var(--sobre-acento); }
.bocadillo.principal span { color: var(--sobre-acento); }

/* ===== Cifras en recuadros ===== */
.recuadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px; }
.recuadro { display: block; padding: 14px 16px; text-decoration: none; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; }
.recuadro:hover { border-color: var(--acento); background: var(--relleno); }
.recuadro strong { display: block; font-family: var(--titular); font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--acento-texto); }
.recuadro span { font-size: 14px; font-weight: 500; color: var(--texto); }

/* ===== Cinta ===== */
.cinta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 22px 26px; background: var(--panel); border: 1px solid var(--borde); border-radius: 22px; }
.casete { flex: 0 0 auto; width: 210px; height: auto; transform: rotate(-2.5deg); }
.casete text { font-family: var(--titular); font-weight: 700; }
.bobina { transform-box: fill-box; transform-origin: center; }
.girando .bobina { animation: giro 2.4s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.cinta-texto { flex: 0 1 310px; min-width: 0; }
.cinta-texto h2 { font-size: 32px; line-height: 1.08; }
.cinta-credito { margin-top: 4px; color: var(--texto-2); }
.play-cinta { width: 58px; height: 58px; }
.onda { flex: 1 1 240px; min-width: 0; height: 58px; display: flex; align-items: center; gap: 3px; }
.onda span { flex: 1 1 0; min-width: 0; border-radius: 2px; background: rgba(var(--ambar-rgb), .32); }
.onda span.oida { background: var(--acento); }
.otra-muestra { margin-left: auto; }

.play {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--acento);
  cursor: pointer;
}
.play:hover { background: var(--acento-hover); }
.play i { font-size: 15px; color: var(--sobre-acento); }
.icono-pausa { display: none; }
.sonando .icono-play, .girando .play-cinta .icono-play { display: none; }
.sonando .icono-pausa, .girando .play-cinta .icono-pausa { display: block; }
.play-pequeno { width: 32px; height: 32px; background: none; border: 1px solid rgba(var(--ambar-rgb), .6); }
.play-pequeno i { font-size: 11px; color: var(--acento-texto); }
.play-pequeno:hover, .play-pequeno.sonando { background: var(--acento); }
.play-pequeno:hover i, .play-pequeno.sonando i { color: var(--sobre-acento); }

/* ===== Bocadillos: las ondas de sonido del logo salen de la esquina ===== */
.bocadillo { --onda: #F2A93B; --onda-tam: 20px; }
html[data-tema="claro"] .bocadillo { --onda: #D97F0E; }
.bocadillo::before {
  content: "";
  position: absolute;
  top: calc(var(--onda-tam) * -.6);
  right: calc(var(--onda-tam) * -.55);
  width: var(--onda-tam);
  height: var(--onda-tam);
  background: var(--onda);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 10a5 5 0 0 1 5 5'/%3E%3Cpath d='M5 3a12 12 0 0 1 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 10a5 5 0 0 1 5 5'/%3E%3Cpath d='M5 3a12 12 0 0 1 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bocadillo-mini { --onda-tam: 14px; }
.bocadillo-titular { --onda-tam: 34px; }

/* ===== Dos columnas ===== */
.columnas { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.columna-ancha { flex: 3 1 560px; min-width: 0; }
.columna-estrecha { flex: 2 1 360px; min-width: 0; }
.titulo-seccion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 14px; }
.ver-todo { margin-left: auto; font-size: 14px; white-space: nowrap; }

/* ===== Portadas de juego ===== */
.portadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 20px; }
.juego { display: block; text-decoration: none; }
.juego img, .juego-sin-portada {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-bottom: 12px;
  border-radius: 6px;
  background: var(--campo);
  transform: rotate(var(--giro, 0deg));
  transition: transform .15s ease;
}
.juego:hover img, .juego:hover .juego-sin-portada { transform: none; }
.juego strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--titulo); }
.juego span.juego-meta { display: block; margin-top: 2px; font-size: 13px; color: var(--texto-2); }
.juego:hover strong { color: var(--acento-texto); }
/* DLC de una ficha de juego: portadas más pequeñas, 5 o 6 por fila en escritorio */
.portadas-dlc { grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 16px; }
.portadas-dlc .juego strong { font-size: 13.5px; }
.portadas-dlc .juego span.juego-meta { font-size: 12px; }
@media (max-width: 600px) { .portadas-dlc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }

/* ===== Listas ===== */
.lista { border-top: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.fila-ultimo {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 10px 6px;
  text-decoration: none;
  border-bottom: 1px solid var(--linea-suave);
}
.fila-ultimo:hover, .fila:hover { background: rgba(var(--ambar-rgb), .07); }
.fecha { font-size: 13px; color: var(--texto-3); }
.fila-titulo { display: block; font-weight: 600; line-height: 1.3; color: var(--titulo); }
.fila-sub { display: block; font-size: 13px; color: var(--texto-2); }
.nombre { text-decoration: none; font-weight: 500; }
.nombre:hover { text-decoration: underline; }

.pie-portada { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 26px; border-top: 1px solid var(--linea); }
.pie-portada h2 { margin-bottom: 8px; font-size: 26px; }
.enlaces-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 24px; }
.enlaces-rejilla a { display: flex; align-items: center; min-height: 40px; font-weight: 500; text-decoration: none; }
.nota { margin-bottom: 12px; font-size: 14px; color: var(--texto-2); }
.botones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Fichas ===== */
.migas { font-size: 13px; color: var(--texto-3); }
.migas a { color: var(--texto-2); text-decoration: none; }
.migas a:hover { color: var(--titulo); text-decoration: underline; }
.ficha-cabecera { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 6px; }
.ficha-portada { flex: 0 0 auto; display: block; width: 176px; height: auto; align-self: flex-start; border-radius: 6px; transform: rotate(-1.5deg); }
.ficha-datos { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ficha-linea { font-size: 16px; }
.ficha-sub { font-size: 14px; color: var(--texto-2); }
.ficha-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--texto-3); }
.pegi { padding: 2px 8px; border-radius: 6px; font-weight: 700; color: #241505; background: #E8D6BC; }
.ficha-cifras { flex: 0 1 300px; align-self: flex-end; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.cifra strong { display: block; font-family: var(--titular); font-size: 36px; font-weight: 700; line-height: 1.05; color: var(--acento-texto); }
.cifra span { font-size: 13px; }

.protagonistas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 18px; }
.protagonista { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; }
.protagonista-cuerpo { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.protagonista-datos { flex: 1; min-width: 0; font-size: 13px; color: var(--texto-2); }
.protagonista-nombre { display: block; font-family: var(--titular); font-size: 23px; font-weight: 700; line-height: 1.15; color: var(--titulo); text-decoration: none; }
.protagonista-nombre:hover { color: var(--acento-texto); }

.fichas-columnas { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.fichas-principal { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.fichas-lateral { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }

.tabla-scroll { overflow-x: auto; }
.tabla { min-width: 520px; }
.fila, .fila-encabezado { display: grid; gap: 16px; align-items: center; padding: 4px 6px; }
.reparto .fila, .reparto .fila-encabezado { grid-template-columns: 32px minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 1fr); }
.reparto.sin-audio .fila, .reparto.sin-audio .fila-encabezado { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 1fr); }
.fila { min-height: 48px; border-bottom: 1px solid var(--linea-suave); }
.fila-encabezado { padding-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); border-bottom: 1px solid var(--linea); }
.personaje {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--titulo);
  background: var(--relleno);
  border: 1px solid rgba(var(--ambar-rgb), .45);
  text-decoration: none;
}
.personaje::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: inherit;
  border-right: inherit;
  border-top: inherit;
  transform: rotate(45deg);
}
a.personaje:hover { border-color: var(--acento); color: var(--acento-texto); }
/* Las ondas del logo salen de la punta, hacia la voz */
.personaje { margin-right: 19px; --onda: #F2A93B; }
html[data-tema="claro"] .personaje { --onda: #D97F0E; }
.personaje::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 12px;
  height: 18px;
  margin: -9px 0 0 7px;
  background: var(--onda);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 6a4.5 4.5 0 0 1 0 6'/%3E%3Cpath d='M6 3a9 9 0 0 1 0 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 6a4.5 4.5 0 0 1 0 6'/%3E%3Cpath d='M6 3a9 9 0 0 1 0 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.voz-original { font-size: 14px; color: var(--texto-2); text-decoration: none; }
a.voz-original:hover { color: var(--titulo); text-decoration: underline; }

.desplegar { margin-top: 12px; }
.desplegar > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  border: 1px solid rgba(var(--ambar-rgb), .45);
  cursor: pointer;
  list-style: none;
}
.desplegar > summary::-webkit-details-marker { display: none; }
.desplegar > summary:hover { color: var(--titulo); border-color: var(--acento); }
.desplegar[open] > summary { display: none; }

.texto-lista { font-size: 14px; line-height: 1.7; color: var(--texto-2); }
.texto-lista a { color: inherit; text-decoration: none; }
.texto-lista a:hover { color: var(--titulo); text-decoration: underline; }

.bloque-lateral { display: flex; flex-direction: column; gap: 10px; }
.bloque-lateral h2 { padding-bottom: 6px; font-size: 26px; border-bottom: 1px solid var(--linea); }
.dato-titulo { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.bloque-lateral a { text-decoration: none; }
.bloque-lateral a:hover { text-decoration: underline; }
.info-libre { color: var(--texto); }
.info-libre a { word-break: break-word; }

.lista-contenidos a { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 9px 4px; text-decoration: none; color: var(--texto); font-size: 14px; line-height: 1.3; }
.lista-contenidos a:hover { background: rgba(var(--ambar-rgb), .07); color: var(--titulo); }

.premio { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; line-height: 1.35; }
.premio-ano { font-weight: 600; color: var(--acento-texto); }
.premio strong { display: block; color: var(--titulo); }
.premio span span { display: block; font-size: 14px; color: var(--texto-2); }

/* ===== Ficha de actor ===== */
.actor-cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 32px; padding-top: 6px; }
.actor-datos { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.actor-enlaces { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; font-weight: 500; }
.actor-enlaces a { text-decoration: none; }
.actor-enlaces a:hover { text-decoration: underline; }
.panel-voz { padding: 22px 24px 28px; background: var(--panel); border: 1px solid var(--borde); border-radius: 22px; }
.panel-voz h2 { margin-bottom: 18px; }
.panel-voz .bocadillos { gap: 18px 12px; }
.filtro {
  margin-left: auto;
  flex: 0 1 280px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  color: var(--titulo);
  font-family: inherit;
  font-size: 14px;
  background: var(--campo);
  border: 1px solid rgba(var(--ambar-rgb), .35);
  border-radius: 10px;
}
.doblajes .fila, .doblajes .fila-encabezado { grid-template-columns: 54px minmax(0, 1.25fr) minmax(0, 1fr) 32px; gap: 12px; }
.doblajes .fila { align-items: center; }
.ano-grupo { font-size: 14px; font-weight: 600; color: var(--texto-3); }
.ano-grupo.nuevo { color: var(--acento-texto); }
.doblaje-juego { font-weight: 600; line-height: 1.3; color: var(--titulo); text-decoration: none; }
.doblaje-juego:hover { color: var(--acento-texto); }
.doblaje-personaje { font-size: 14px; line-height: 1.3; color: var(--texto-2); text-decoration: none; }
.doblaje-personaje:hover { color: var(--titulo); text-decoration: underline; }
.vacio { padding: 16px 6px; color: var(--texto-2); }

.corregir { font-size: 14px; }

/* ===== Listado de juegos ===== */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.listado-cabecera { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.titulo-listado { font-size: clamp(38px, 5vw, 64px); }
.portadas-azar { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.portadas-mosaico { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 26px 20px; }

.filtros-bloque { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; }
.filtros-plegable > summary { display: none; }
.filtros-cuerpo { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 760px) {
  .filtros-plegable > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--titular);
    font-size: 20px;
    font-weight: 700;
    color: var(--titulo);
    cursor: pointer;
  }
  .filtros-plegable[open] > summary { margin-bottom: 8px; }
}
.letras { display: flex; flex-wrap: wrap; gap: 3px; }
.letra { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 36px; padding: 0 6px; border-radius: 8px; font-family: var(--titular); font-size: 17px; font-weight: 700; line-height: 1; color: var(--texto); text-decoration: none; }
a.letra:hover { color: var(--titulo); background: rgba(var(--ambar-rgb), .18); }
.letra.activa { color: var(--sobre-acento); background: var(--acento); }
.letra-vacia { color: rgba(162, 139, 109, .45); }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.campo { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.campo-busqueda { flex: 2 1 220px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo input, .campo select {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  color: var(--titulo);
  font-family: inherit;
  font-size: 15px;
  background: var(--campo);
  border: 1px solid rgba(var(--ambar-rgb), .35);
  border-radius: 10px;
}
.campo input::placeholder { color: var(--texto-3); }
.campo select option { color: var(--titulo); background: var(--campo); }
.filtros-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.activos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.activo { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 10px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--sobre-acento); background: var(--acento); text-decoration: none; }
.activo:hover { color: var(--sobre-acento); background: var(--acento-hover); }
.limpiar { font-size: 14px; }
.vistas { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--barra); }
.vistas a { padding: 5px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--texto); text-decoration: none; }
.vistas a:hover { color: var(--titulo); background: rgba(var(--ambar-rgb), .15); }
.vistas a.activa { font-weight: 600; color: var(--sobre-acento); background: var(--acento); }

.lista-juegos { border-top: 1px solid var(--linea); }
.fila-juego {
  display: grid;
  grid-template-columns: 46px minmax(0, 1.5fr) minmax(0, 1.6fr) minmax(0, .8fr) 48px 86px;
  gap: 16px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid var(--linea-suave);
}
article.fila-juego:hover { background: rgba(var(--ambar-rgb), .07); }
.fila-juego-cabecera { padding: 2px 6px 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); border-bottom-color: var(--linea); }
.fila-juego-portada { display: block; width: 46px; height: 62px; border-radius: 4px; overflow: hidden; background: var(--campo); }
.fila-juego-portada img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fila-juego-prota { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; }
.fila-juego-prota .nombre { padding-left: 2px; }
.fila-juego-ano { font-variant-numeric: tabular-nums; color: var(--texto-2); }
.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.paginacion-estado { color: var(--texto-2); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .fila-juego-cabecera { display: none; }
  .fila-juego { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 3px 12px; align-items: start; padding: 10px 2px; }
  .fila-juego-portada { grid-column: 1; grid-row: 1 / span 3; }
  .fila-juego-titulo { grid-column: 2; grid-row: 1; }
  .fila-juego-ano { grid-column: 3; grid-row: 1; font-size: 13px; }
  .fila-juego-prota { grid-column: 2 / -1; grid-row: 2; margin-top: 4px; }
  .fila-juego-estudio { grid-column: 2; grid-row: 3; }
  .fila-juego-cuenta { grid-column: 3; grid-row: 3; text-align: right; }
  .fila-juego-cuenta br { display: none; }
  .fila-juego-cuenta .cuenta-separa { display: inline; }
  .fila-juego-cuenta { white-space: nowrap; }
  .filtros-bloque { padding: 14px; }
  .filtros .campo { flex-basis: 45%; }
  .filtros .campo-busqueda { flex-basis: 100%; }
  .filtros .boton-solido { flex: 1 1 100%; }
  .letra { min-width: 30px; height: 34px; }
}

/* ===== Listado de actores ===== */
.voces-azar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 18px 12px; }
.voz-azar { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--titulo); text-decoration: none; }
.voz-azar:hover { color: var(--acento-texto); }
.fila-actor {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.6fr) 96px;
  gap: 16px;
  align-items: center;
  padding: 10px 6px;
  border-bottom: 1px solid var(--linea-suave);
}
article.fila-actor:hover { background: rgba(var(--ambar-rgb), .07); }
.fila-actor-foto { display: block; line-height: 0; text-decoration: none; }
.fila-actor-foto .avatar-vacio { line-height: 1; }
.avatar-fila { width: 56px; height: 56px; font-size: 19px; }
.fila-actor-personajes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 8px; padding-bottom: 6px; }
.bocadillo-mini { padding: 5px 10px; border-radius: 10px; }
.bocadillo-mini::after { left: 12px; bottom: -6px; width: 9px; height: 9px; }
.bocadillo-mini strong { font-size: 13px; font-weight: 600; }
.fila-actor-cuenta { text-align: right; }
@media (max-width: 760px) {
  .fila-actor.fila-juego-cabecera { display: none; }
  .fila-actor { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; padding: 12px 2px; }
  .fila-actor-foto { grid-column: 1; grid-row: 1 / span 2; }
  .fila-actor-nombre { grid-column: 2; grid-row: 1; }
  .fila-actor-cuenta { grid-column: 3; grid-row: 1; font-size: 12px; }
  .fila-actor-personajes { grid-column: 2 / -1; grid-row: 2; }
}

/* ===== Buscador ===== */
.cabecera.con-busqueda .menu { flex: 1 1 auto; order: 2; }
.busqueda-cabecera { order: 3; position: relative; flex: 0 1 300px; display: flex; align-items: center; padding: 2px 2px 2px 12px; background: var(--campo); border: 1px solid rgba(var(--ambar-rgb), .5); border-radius: 12px; }
.busqueda-cabecera input { flex: 1; min-width: 0; height: 40px; background: none; border: none; outline: none; color: var(--titulo); font-family: inherit; font-size: 15px; }
.busqueda-cabecera input::placeholder { color: var(--texto-3); }
.busqueda-cabecera button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 9px; background: var(--acento); cursor: pointer; }
.busqueda-cabecera button i { font-size: 16px; color: var(--sobre-acento); }
.busqueda-cabecera:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
input[type="search"]::-webkit-search-cancel-button { filter: invert(1) sepia(1) saturate(3) hue-rotate(-10deg); }

.sugerencias-caja { position: absolute; z-index: 30; left: -2px; right: -2px; top: calc(100% + 6px); max-height: 420px; overflow-y: auto; padding: 4px; background: var(--panel); border: 1px solid rgba(var(--ambar-rgb), .55); border-radius: 12px; box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .8); }
.sugerencias-caja a { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 9px 10px; border-radius: 8px; color: var(--texto); text-decoration: none; }
.sugerencias-caja a:hover, .sugerencias-caja a.marcada { color: var(--titulo); background: rgba(var(--ambar-rgb), .16); }
.sugerencia-tipo { font-size: 12px; font-weight: 600; color: var(--acento-texto); }
.sugerencia-texto { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.sugerencia-detalle { font-size: 13px; color: var(--texto-2); text-align: right; }

.salto { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 11px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); text-decoration: none; }
.salto:hover { color: var(--titulo); border-color: var(--acento); }
.salto strong { color: var(--acento-texto); font-weight: 700; }
main section[id] { scroll-margin-top: 16px; }
.portadas-busqueda { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
.voz-azar small { display: block; margin-top: 2px; font-weight: 400; }
.fila-personaje { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 32px; gap: 12px; align-items: center; min-height: 48px; padding: 6px; border-bottom: 1px solid var(--linea-suave); }
.fila-personaje:hover { background: rgba(var(--ambar-rgb), .07); }
.fila-personaje-voz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.contenidos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 24px; }
@media (max-width: 760px) {
  .busqueda-cabecera { order: 3; flex-basis: 100%; }
  .abrir-menu { order: 2; }
  .menu { order: 4; }
  .fila-personaje { grid-template-columns: minmax(0, 1fr) 32px; gap: 3px 10px; }
  .fila-personaje-voz { grid-column: 1; }
  .fila-personaje .doblaje-personaje { grid-column: 1; grid-row: 2; font-size: 13px; }
  .fila-personaje > span:last-child { grid-column: 2; grid-row: 1 / span 2; }
  .sugerencias-caja a { grid-template-columns: 62px minmax(0, 1fr); }
  .sugerencia-detalle { grid-column: 2; text-align: left; }
}

/* ===== Pie ===== */
.pie { padding-top: 16px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--texto-2); display: flex; flex-direction: column; gap: 8px; }
.pie a { color: var(--texto-2); }
.pie a:hover { color: var(--titulo); }
.pie-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.pie-redes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pie-red { color: var(--texto-3); }

@media (max-width: 600px) {
  .caja { gap: 32px; }
  .casete { width: 150px; }
  .voces, .panel-voz, .cinta { padding: 16px; border-radius: 18px; }
  .ficha-portada { width: 120px; }
  .avatar-grande { width: 120px; height: 120px; font-size: 40px; }
  .filtro { margin-left: 0; flex: 1 1 100%; }
  .pie-redes { margin-left: 0; }

  /* Menos bocadillos y listas sin scroll lateral: los datos secundarios bajan a una segunda línea */
  .voz .bocadillo:nth-child(n+6), .panel-voz .bocadillo:nth-child(n+7) { display: none; }
  .tabla, .doblajes .tabla { min-width: 0 !important; }
  .reparto .fila, .reparto .fila-encabezado { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); row-gap: 2px; gap: 2px 10px; padding: 8px 2px; }
  .reparto.sin-audio .fila, .reparto.sin-audio .fila-encabezado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reparto .fila-encabezado > span:last-child { display: none; }
  .reparto .fila > span:last-child { grid-column: -2 / -1; font-size: 13px; }
  .doblajes .fila-encabezado { display: none; }
  .doblajes .fila { grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 2px 8px; padding: 9px 2px; }
  .doblajes .fila > .ano-grupo { grid-column: 1; grid-row: 1; }
  .doblajes .fila > .doblaje-juego { grid-column: 2; grid-row: 1; }
  .doblajes .fila > .doblaje-personaje { grid-column: 2; grid-row: 2; }
  .doblajes .fila > span:last-child { grid-column: 3; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .girando .bobina { animation: none; }
  * { transition: none !important; }
}

/* ===== Ficha de doblaje ===== */
.doblaje-cabecera { display: flex; flex-wrap: wrap; gap: 24px 32px; padding-top: 6px; }
.doblaje-portada { flex: 0 0 auto; display: block; align-self: flex-start; }
.doblaje-datos { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.doblaje-bocadillo { padding: 6px 0 12px; }
.bocadillo-titular { display: inline-block; max-width: 100%; padding: 12px 24px; border-radius: 22px; font-size: clamp(34px, 5vw, 60px); line-height: 1.08; color: var(--sobre-acento); overflow-wrap: anywhere; }
.bocadillo-titular::after { left: 34px; bottom: -13px; width: 24px; height: 24px; }
.doblaje-voz { display: flex; align-items: center; gap: 14px; }
.doblaje-voz .ficha-sub { display: block; }
.doblaje-frase { max-width: 640px; font-size: 16px; color: var(--texto-2); }
.doblaje-imagen { flex: 0 0 auto; align-self: flex-start; width: 145px; height: auto; border-radius: 8px; transform: rotate(1.5deg); }
.fila-personaje.fila-personaje-simple { grid-template-columns: minmax(0, 1fr); }
.fila-personaje.fila-personaje-simple > .fila-personaje-voz { grid-column: 1; grid-row: auto; }
.avatar-mini { width: 40px; height: 40px; font-size: 14px; }
.fila-otra-voz { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--linea-suave); }
.fila-otra-voz:hover { background: rgba(var(--ambar-rgb), .07); }
.fichas-principal .panel-voz { padding-bottom: 24px; }
.muestra .cinta-texto h2 { font-size: 32px; }
@media (max-width: 760px) {
  .doblaje-imagen { width: 96px; }
  .fila-otra-voz { grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; }
  .fila-personaje.fila-personaje-simple { grid-template-columns: minmax(0, 1fr); }
  .fila-personaje.fila-personaje-simple > .fila-personaje-voz { grid-column: 1; grid-row: auto; }
  .fila-otra-voz .avatar { grid-row: 1 / span 2; }
  .fila-otra-voz .doblaje-personaje { grid-column: 2; }
}

/* ===== Tema claro "capuchino": beige liso y marrón café como color de acción ===== */
html[data-tema="claro"] {
  --titulo: #2E1F14;
  --texto: #33241A;
  --texto-2: #533F30;
  --texto-3: #5A4636;
  --fondo: #E7D8C6;
  --fondo-medio: #E7D8C6;
  --fondo-brillo: #E7D8C6;
  /* El panel se separa del fondo 1,09:1, lo mismo que en el tema oscuro */
  --panel: #EEE2D2;
  --campo: #FDF9F4;
  --relleno: #F6EDE1;
  --barra: #EEE2D2;
  --acento: #6B4226;
  --acento-marca: #6B4226;
  --sobre-acento: #FDF7EF;
  --acento-texto: #6B4226;
  --acento-hover: #54321B;
  --foco: #54321B;
  --ambar-rgb: 107, 66, 38;
  color-scheme: light;
}
html[data-tema="claro"] .sugerencias-caja { box-shadow: 0 6px 18px -12px rgba(84, 48, 0, .45); }
html[data-tema="claro"] .juego img,
html[data-tema="claro"] .ficha-portada { box-shadow: 0 8px 18px -10px rgba(84, 48, 0, .55); }
html[data-tema="claro"] input[type="search"]::-webkit-search-cancel-button { filter: none; }
html[data-tema="claro"] .boton-borde:hover { color: var(--titulo); }

/* Aviso superior de la vista previa */
.aviso-v6 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; }
.aviso-v6 a { font-weight: 700; color: var(--sobre-acento); }
.aviso-v6 a:hover { color: var(--sobre-acento); text-decoration-thickness: 2px; }

/* Lo que depende del tema se decide en CSS, porque el tema automático lo aplica el navegador */
html[data-tema="oscuro"] .si-claro, html[data-tema="claro"] .si-oscuro { display: none !important; }

/* El ámbar de la marca, reservado para lo que es voz: bocadillos principales, casete, reproducir y onda */
html[data-tema="claro"] .bocadillo.principal { background: #F2A93B; border-color: #F2A93B; }
html[data-tema="claro"] .bocadillo.principal strong,
html[data-tema="claro"] .bocadillo.principal span,
html[data-tema="claro"] .bocadillo-titular { color: #2E1F14; }
html[data-tema="claro"] .play { background: #F2A93B; }
html[data-tema="claro"] .play:hover { background: #E9A02F; }
html[data-tema="claro"] .play i { color: #2E1F14; }
html[data-tema="claro"] .play-pequeno { background: none; }
html[data-tema="claro"] .play-pequeno i { color: #6B4226; }
html[data-tema="claro"] .play-pequeno:hover, html[data-tema="claro"] .play-pequeno.sonando { background: #F2A93B; }
html[data-tema="claro"] .play-pequeno:hover i, html[data-tema="claro"] .play-pequeno.sonando i { color: #2E1F14; }
html[data-tema="claro"] .onda span.oida { background: #E08A1E; }

/* ===== Listados y fichas de personal, estudios y empresas ===== */
.fila-texto-juegos { font-size: 14px; line-height: 1.4; color: var(--texto-2); }
.fila-texto-juegos a { color: inherit; text-decoration: none; }
.fila-texto-juegos a:hover { color: var(--titulo); text-decoration: underline; }
.rejilla-entidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.entidad { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; color: var(--texto); text-decoration: none; }
.entidad:hover { color: var(--texto); border-color: var(--acento-texto); }
.entidad-datos { min-width: 0; }
.entidad-datos strong { display: block; font-weight: 600; line-height: 1.25; color: var(--titulo); }
.logo-entidad { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 72px; height: 54px; padding: 4px; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid var(--linea-suave); }
.logo-entidad img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-vacio { font-family: var(--titular); font-size: 20px; font-weight: 700; color: var(--acento-texto); background: var(--relleno); }
.logo-grande { width: 170px; height: 120px; padding: 10px; font-size: 40px; }
.titulo-contenido { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; }
.columna-listas { display: flex; flex-direction: column; gap: 30px; }

/* Portada: las listas se reparten la altura de las portadas para terminar a la vez */
@media (min-width: 1040px) {
  .columnas-portada { flex-wrap: nowrap; align-items: stretch; }
  .columnas-portada .portadas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .columnas-portada .columna-listas section { flex: 1 1 0; display: flex; flex-direction: column; }
  .columnas-portada .lista { flex: 1; display: flex; flex-direction: column; }
  .columnas-portada .fila-ultimo { flex: 1 1 0; align-content: center; padding-top: 7px; padding-bottom: 7px; }
}
/* Una columna: sin la altura de las portadas al lado, basta con lo de siempre */
@media (max-width: 1039px) {
  .columnas-portada .fila-ultimo:nth-child(n+7) { display: none; }
  .columnas-portada .portadas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .columnas-portada .portadas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .columnas-portada .portadas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .columnas-portada .juego:nth-child(n+9) { display: none; }
}
.texto-pagina { max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--texto); }
.texto-pagina p { margin: 0 0 1.05em; }
.texto-pagina h2 { margin: 1.5em 0 .45em; font-size: 28px; line-height: 1.15; }
.texto-pagina a { word-break: break-word; }
.marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 30px 20px; margin-top: 8px; }
.marca { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.marca h2 { margin-top: 6px; font-size: 19px; line-height: 1.2; }
.marca p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.marca-muestra { display: flex; align-items: center; justify-content: center; height: 170px; padding: 16px; border: 1px solid var(--borde); border-radius: 12px; }
.marca-muestra img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Fondos fijos: enseñan el logo sobre el fondo para el que está pensado, sea cual sea el tema */
.marca-beige { background: #E7D8C6; }
.marca-oscura { background: #1C1108; }
.marca-cafe { background: #6B4226; }
.marca-blanca { background: #FFFFFF; }
.marca-descargas { display: flex; gap: 6px 16px; margin-top: 2px; font-size: 14px; font-weight: 600; }
.marca-descargas a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }

/* ===== Formularios y seguimiento ===== */
.formulario { max-width: 760px; }
.formulario .campo { flex: none; }
.formulario-doble { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.formulario .campo-corto { max-width: 340px; }
.formulario textarea { box-sizing: border-box; width: 100%; padding: 11px 13px; font: inherit; font-size: 16px; line-height: 1.5; color: var(--titulo); background: var(--campo); border: 1px solid var(--linea); border-radius: 10px; resize: vertical; }
.formulario .boton-solido { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; }
.formulario-ficha { align-self: flex-start; max-width: 100%; }
.casilla { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--texto); cursor: pointer; }
.casilla input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acento); }
.aviso-formulario { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; font-size: 15px; line-height: 1.45; color: var(--texto); background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; }
.aviso-formulario > i { flex: none; margin-top: 3px; }
.aviso-mal { border-color: var(--acento-texto); border-width: 2px; }
.hitos { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0; padding: 0; list-style: none; }
.hitos::before { content: ""; position: absolute; top: 14px; bottom: 26px; left: 19px; width: 2px; background: var(--linea); }
.hito { position: relative; display: flex; gap: 14px; }
.hito-icono { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 16px; background: var(--fondo); border: 2px solid var(--linea); border-radius: 50%; }
.hito-cuerpo { flex: 1 1 auto; min-width: 0; padding: 12px 16px; font-size: 15px; line-height: 1.5; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; overflow-wrap: anywhere; }
.hito-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 3px; }
.hito-cabeza strong { font-family: var(--titular); font-size: 18px; color: var(--titulo); }
.hito-cabeza span { font-size: 13px; color: var(--texto-2); }
.hito-usuario .hito-cuerpo { background: var(--relleno); }
.hito-fin .hito-icono { background: #F2A93B; border-color: #F2A93B; --fa-primary-color: #2E1F14; --fa-secondary-color: #2E1F14; --fa-secondary-opacity: .4; }
.video-marco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fila-premio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; padding: 10px 6px; border-bottom: 1px solid var(--linea-suave); line-height: 1.35; }
.fila-premio strong { font-weight: 600; color: var(--titulo); }
.columna-mitad { flex: 1 1 420px; min-width: 0; }
.columna-completa { flex: 1 1 100%; min-width: 0; }
.fila-ultimo-ancha { grid-template-columns: 92px minmax(0, 1fr) auto; }
.fila-simple { display: block; }
.activos .salto[aria-current] { border-color: var(--acento-texto); }
@media (max-width: 760px) {
  .fila-texto-juegos { grid-column: 2 / -1; grid-row: 2; }
  .fila-premio { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .logo-grande { width: 120px; height: 86px; font-size: 28px; }
}

/* ===== Iconos Font Awesome: duotono con el marrón (o el ámbar en oscuro) y el ámbar de la marca ===== */
.fa-duotone { --fa-primary-color: var(--acento-texto); --fa-secondary-color: #F2A93B; --fa-secondary-opacity: .85; }
html[data-tema="oscuro"] .fa-duotone { --fa-secondary-opacity: .45; }
h1 > i, h2 > i, h3 > i { margin-right: 4px; font-size: .85em; }
.boton-borde i, .activo i { margin-right: 2px; }
.bloque-lateral a i, .actor-enlaces a i { width: 1.2em; text-align: center; }
.aviso-v6 a i { margin-right: 2px; font-size: .9em; }
.recuadro > i { display: block; margin-bottom: 8px; font-size: 22px; }

/* ===== Menú con desplegables ===== */
.menu a i, .menu summary > i:first-child { width: 1.25em; text-align: center; }
.menu a.activa, .menu summary.activa { font-weight: 600; color: var(--sobre-acento); background: var(--acento); }
.menu a.activa .fa-duotone, .menu summary.activa .fa-duotone { --fa-primary-color: var(--sobre-acento); --fa-secondary-color: #F2A93B; --fa-secondary-opacity: 1; }
html[data-tema="oscuro"] .menu a.activa .fa-duotone, html[data-tema="oscuro"] .menu summary.activa .fa-duotone { --fa-secondary-color: var(--sobre-acento); --fa-secondary-opacity: .45; }
.cuenta-separa { display: none; }
.menu-grupo { position: relative; }
.menu-grupo > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.menu-grupo > summary::-webkit-details-marker { display: none; }
.menu-grupo > summary:hover { background: rgba(var(--ambar-rgb), .15); color: var(--titulo); }
.menu-grupo > summary.activa:hover { color: var(--sobre-acento); background: var(--acento-hover); }
.menu-flecha { font-size: 10px; transition: transform .15s ease; }
.menu-grupo[open] .menu-flecha { transform: rotate(180deg); }
.menu-panel {
  position: absolute;
  z-index: 25;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .6);
}
.menu .menu-panel a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; white-space: nowrap; }
.menu .menu-panel a.actual { font-weight: 600; background: rgba(var(--ambar-rgb), .14); }
.menu > a { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 760px) {
  .menu > a, .menu-grupo > summary { padding: 12px 14px; }
  .menu-panel { position: static; min-width: 0; margin: 2px 0 4px 14px; padding: 2px; background: none; border: none; box-shadow: none; }
}

/* ===== Pie ===== */
.pie-columnas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px 40px; padding: 28px; background: var(--panel); border: 1px solid var(--borde); border-radius: 22px; }
.pie-columna { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pie-columna h2 { margin-bottom: 10px; font-size: 22px; }
.pie-columna > p { margin-bottom: 12px; font-size: 14px; color: var(--texto-2); }
.pie-columna a:not(.boton-borde) { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 14px; color: var(--texto); text-decoration: none; }
.pie-columna a:not(.boton-borde):hover { color: var(--titulo); text-decoration: underline; }
.pie-columna a i { width: 1.25em; text-align: center; }
.pie-enlaces-doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 18px; width: 100%; }
.pie .pie-redes { margin: 14px 0 0; display: flex; gap: 6px; }
.pie-columna .pie-redes a { justify-content: center; width: 44px; height: 44px; font-size: 19px; color: var(--acento-texto); background: var(--relleno); border-radius: 10px; }
.pie-columna .pie-redes a:hover { color: var(--sobre-acento); background: var(--acento); text-decoration: none; }
.pie-legal { display: flex; flex-direction: column; gap: 4px; padding: 14px 6px 0; font-size: 13px; color: var(--texto-2); }
.pie-legal a { color: inherit; }
/* Campo contra el spam: fuera de la vista y del tabulador */
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pie-firma { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding: 18px 6px 4px; }
.pie-autoria { display: flex; align-items: center; gap: 14px; min-width: 0; line-height: 1.45; }
.pie-autoria img { flex: none; width: 52px; height: 52px; }
.pie-nombre { font-family: var(--titular); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--titulo); }
.pie a.pie-autor { font-weight: 600; color: var(--acento-texto); text-underline-offset: 2px; }
.pie a.pie-autor:hover { color: var(--titulo); }
.pie-otras { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
.pie-otras h2 { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--titulo); }
.pie-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pie a.pie-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 13px 4px 11px; font-size: 13.5px; font-weight: 500; color: var(--texto); text-decoration: none; background: var(--panel); border: 1px solid var(--borde); border-radius: 999px; }
.pie-chip i { color: var(--acento-texto); }
.pie a.pie-chip:hover { color: var(--titulo); border-color: var(--acento-texto); }
@media (max-width: 900px) {
  .pie-columnas { grid-template-columns: minmax(0, 1fr); padding: 20px; }
}
@media (max-width: 1100px) {
  .pie-firma { flex-direction: column; align-items: flex-start; }
  .pie-otras { align-items: flex-start; }
  .pie-chips { justify-content: flex-start; }
}

/* ===== Estadísticas: colores validados contra el panel de cada tema ===== */
:root { --serie-1: #9A470B; --serie-2: #CC7E0F; --serie-3: #00A296; --serie-neutra: #8A7558; --serie-unica: #E69A26; --sobre-serie: #140C04; }
html[data-tema="claro"] { --serie-1: #94500F; --serie-2: #D97F0E; --serie-3: #008F8C; --serie-neutra: #8C7A68; --serie-unica: #D97F0E; }
.serie-1 { --serie: var(--serie-1); }
.serie-2 { --serie: var(--serie-2); }
.serie-3 { --serie: var(--serie-3); }
.serie-neutra { --serie: var(--serie-neutra); }
.grafica-panel { padding: 22px 24px; background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; }
.est-frase { margin-bottom: 18px; font-size: 15px; color: var(--texto-2); }
.est-frase strong { color: var(--titulo); }
.grafica { padding: 22px 0 28px 46px; }
.grafica-lienzo { position: relative; height: 320px; }
.rejilla { position: absolute; left: 0; right: 0; height: 1px; background: var(--linea-suave); }
.rejilla span { position: absolute; right: 100%; top: -8px; margin-right: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto-2); white-space: nowrap; }
.grafica-columnas { position: absolute; inset: 0; display: flex; gap: 2px; }
.grafica-columnas.sin-hueco { gap: 0; }
.columna { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; border-radius: 4px 4px 0 0; color: inherit; text-decoration: none; }
.columna:hover, .columna:focus-visible { background: rgba(var(--ambar-rgb), .13); }
.barra { position: relative; display: block; width: 100%; max-width: 24px; background: var(--serie-unica); border-radius: 4px 4px 0 0; }
.columna:hover .barra, .columna:focus-visible .barra { background: var(--acento-texto); opacity: 1; }
.columna.en-curso .barra { opacity: .5; }
.valor-tope { position: absolute; left: 50%; bottom: 100%; margin-bottom: 3px; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--titulo); white-space: nowrap; }
.eje-ano { position: absolute; top: 100%; left: 50%; margin-top: 7px; transform: translateX(-50%); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.banda.en-curso { background: rgba(var(--ambar-rgb), .13); }
.banda:hover::after, .banda:focus-visible::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--texto-2); }
.grafica-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.grafica-lineas polyline { fill: none; stroke: var(--serie); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.punto-final { position: absolute; width: 10px; height: 10px; margin: 0 0 -5px -5px; background: var(--serie); border-radius: 50%; box-shadow: 0 0 0 2px var(--panel); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 14px; color: var(--texto); }
.leyenda li { display: flex; align-items: center; gap: 7px; }
.muestra-linea { display: inline-block; width: 18px; height: 3px; background: var(--serie); border-radius: 2px; }
.grafica-nota { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; font-size: 13px; color: var(--texto-2); }
.ver-tabla { margin-top: 14px; }
.ver-tabla summary { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; font-size: 14px; font-weight: 500; color: var(--texto); cursor: pointer; }
.tabla-datos-marco { max-height: 420px; margin-top: 8px; overflow: auto; border: 1px solid var(--linea-suave); border-radius: 10px; }
.tabla-datos { width: 100%; font-size: 14px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla-datos th, .tabla-datos td { padding: 8px 14px; text-align: right; border-bottom: 1px solid var(--linea-suave); }
.tabla-datos th:first-child { text-align: left; }
.tabla-datos thead th { position: sticky; top: 0; font-weight: 600; color: var(--titulo); background: var(--panel); }
.tabla-datos tbody th { font-weight: 500; color: var(--texto); }
.partes { display: flex; gap: 2px; height: 28px; }
.parte { display: flex; align-items: center; flex: 1 1 0; min-width: 3px; padding: 0 9px; overflow: hidden; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--sobre-serie); background: var(--serie); border-radius: 4px; }
.parte.serie-1 { color: #FFF; }
.partes-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; margin-top: 18px; }
.parte-cifra { display: flex; flex-direction: column; gap: 2px; }
.parte-nombre { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--texto); }
.muestra-color { display: inline-block; flex: none; width: 11px; height: 11px; background: var(--serie); border-radius: 3px; }
.parte-cifra strong { font-family: var(--titular); font-size: 34px; font-weight: 700; line-height: 1.15; color: var(--titulo); }
.ranking { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ranking li { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--linea-suave); }
.ranking li:last-child { border-bottom: none; }
.ranking-puesto { flex: 0 0 28px; font-family: var(--titular); font-size: 20px; font-weight: 700; text-align: right; color: var(--acento-texto); }
.ranking .avatar { flex: none; }
.ranking-cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ranking-barra { display: block; height: 8px; background: var(--linea-suave); border-radius: 4px; }
.ranking-barra span { display: block; height: 100%; background: var(--serie-unica); border-radius: 4px; }
.ranking-valor { flex: 0 0 auto; min-width: 86px; font-size: 13px; text-align: right; color: var(--texto-2); }
.ranking-valor strong { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--titulo); }
.ranking-valor small { display: block; font-size: 12px; }
.est-grupo { margin: 18px 0 10px; font-size: 18px; }
.est-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; }
.est-tarjeta { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; color: inherit; text-decoration: none; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; }
.est-tarjeta > i { flex: none; margin-top: 2px; font-size: 20px; }
.est-tarjeta strong { display: block; font-size: 15px; font-weight: 600; color: var(--titulo); }
.est-tarjeta small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.est-tarjeta:hover { border-color: var(--acento-texto); }
.est-tarjeta.actual { border-color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--acento-texto); }
.globo-grafica { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 1px; max-width: 240px; padding: 8px 12px; font-size: 13px; line-height: 1.35; color: #2E1F14; background: #F2A93B; border-radius: 12px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55); pointer-events: none; }
.globo-grafica[hidden] { display: none; }
.globo-grafica strong { font-family: var(--titular); font-size: 15px; }
.globo-grafica::after { content: ""; position: absolute; top: 100%; left: var(--cola, 50%); width: 12px; height: 8px; margin-left: -6px; background: #F2A93B; clip-path: polygon(0 0, 100% 0, 50% 100%); }
@media (max-width: 760px) {
  .grafica-panel { padding: 16px; }
  .grafica { padding-left: 38px; }
  .grafica-lienzo { height: 260px; }
  .grafica-columnas { gap: 1px; }
  .eje-ano:not(.eje-decena) { display: none; }
  .ranking li { gap: 9px; }
  .ranking-puesto { flex-basis: 22px; font-size: 17px; }
  .ranking .avatar { display: none; }
  .ranking-valor { min-width: 70px; }
}

/* ===== Ficha de juego: cabecera con franja de datos ===== */
.juego-cabecera { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 6px; }
.juego-cabecera .ficha-portada { width: 190px; }
.juego-cabecera-cuerpo { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.juego-franja { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 4px; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; }
.juego-datos { flex: 1 1 340px; display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 0; padding: 14px 20px; }
.juego-datos dt { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); }
.juego-datos dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.juego-datos dd a { color: var(--titulo); text-decoration: none; }
.juego-datos dd a:hover { color: var(--acento-texto); text-decoration: underline; }
.juego-cifras { display: flex; border-left: 1px solid var(--linea-suave); }
.juego-cifra { display: flex; flex-direction: column; justify-content: center; min-width: 104px; padding: 10px 20px; text-decoration: none; color: var(--texto); }
.juego-cifra + .juego-cifra { border-left: 1px solid var(--linea-suave); }
.juego-cifra strong { font-family: var(--titular); font-size: 32px; font-weight: 700; line-height: 1.05; color: var(--acento-texto); }
.juego-cifra span { font-size: 13px; }
.juego-cifra:hover { background: rgba(var(--ambar-rgb), .12); }
.juego-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-plataforma { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 12px; font-size: 13.5px; font-weight: 500; color: var(--texto); text-decoration: none; background: var(--panel); border: 1px solid var(--borde); border-radius: 999px; }
.chip-plataforma i { color: var(--acento-texto); }
.chip-plataforma:hover { border-color: var(--acento-texto); color: var(--titulo); }
.chip-fecha { margin-left: 2px; padding-left: 9px; border-left: 1px solid var(--borde); font-weight: 400; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.juego-etiquetas .pegi { min-height: 34px; display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 13px; }
.juego-actualizada { margin-left: 4px; font-size: 13px; color: var(--texto-3); }

/* Reparto en panel, con la foto de cada voz */
.panel-reparto { display: flex; flex-direction: column; gap: 24px; padding: 22px 24px; background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; }
.panel-reparto section { scroll-margin-top: 20px; }
.panel-reparto .fila { min-height: 58px; }
.panel-reparto .fila:hover { background: rgba(var(--ambar-rgb), .07); }
.voz-reparto { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--titulo); text-decoration: none; }
.voz-reparto:hover span { color: var(--acento-texto); text-decoration: underline; }
.etiqueta-vo { display: none; font-size: 13px; color: var(--texto-2); }
.panel-reparto .texto-lista { color: var(--texto); }
.panel-reparto .texto-lista a { font-weight: 500; }

/* Lateral en tarjetas */
.panel-lateral { gap: 16px; padding: 20px; background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; }
.panel-lateral h2 { font-size: 23px; }
.grupo-equipo { display: flex; flex-direction: column; gap: 8px; }
.grupo-equipo .dato-titulo { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--titulo); }
.grupo-equipo .dato-titulo i { width: 1.25em; text-align: center; }
.chips-personas { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-persona { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; max-width: 100%; padding: 3px 12px 3px 3px; font-size: 13.5px; font-weight: 500; line-height: 1.2; color: var(--texto); background: var(--relleno); border-radius: 999px; }
.bloque-lateral a.chip-persona:hover { color: var(--titulo); text-decoration: none; box-shadow: inset 0 0 0 1px var(--acento-texto); }
.avatar-chip { width: 30px; height: 30px; font-size: 11px; }
.estudio-tarjeta { display: flex; align-items: center; gap: 12px; padding: 6px; color: inherit; border-radius: 12px; }
.bloque-lateral a.estudio-tarjeta:hover { text-decoration: none; background: rgba(var(--ambar-rgb), .1); }
.estudio-tarjeta strong { display: block; font-size: 15px; font-weight: 600; color: var(--titulo); }
.estudio-tarjeta small { display: block; font-size: 13px; color: var(--texto-2); }
.logo-chico { width: 62px; height: 46px; font-size: 16px; }

@media (max-width: 760px) {
  .juego-cabecera { gap: 18px; }
  .juego-cabecera .ficha-portada { width: 130px; }
  .juego-cifras { flex: 1 1 100%; border-left: none; border-top: 1px solid var(--linea-suave); }
  .juego-cifra { flex: 1 1 0; padding: 10px 20px; }
  .panel-reparto { padding: 16px; }
  .panel-reparto .tabla { min-width: 0; }
  .panel-reparto .fila-encabezado { display: none; }
  .panel-reparto .fila, .panel-reparto.reparto .fila { gap: 6px 10px; padding: 12px 2px; }
  .reparto .fila { grid-template-columns: 32px minmax(0, 1fr); }
  .reparto.sin-audio .fila { grid-template-columns: minmax(0, 1fr); }
  .reparto:not(.sin-audio) .fila > :first-child { grid-row: 1 / span 3; align-self: start; }
  .reparto:not(.sin-audio) .fila > :not(:first-child) { grid-column: 2; }
  .reparto .fila > span:empty { display: none; }
  .etiqueta-vo { display: inline; }
}

/* ===== Resto de fichas: portadas pequeñas y misma cabecera que la ficha de juego ===== */
.portadita { flex: none; display: block; width: 38px; height: 52px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .45); }
.portadita-vacia { background: var(--relleno); box-shadow: inset 0 0 0 1px var(--linea-suave); }
.con-portadita { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.doblaje-juego.con-portadita:hover span { color: var(--acento-texto); text-decoration: underline; }
.juego-cabecera > .avatar-grande, .juego-cabecera > .logo-grande { align-self: flex-start; }
.juego-datos dd { color: var(--titulo); }
.chip-plataforma i { width: 1.1em; text-align: center; }
.panel-reparto.fichas-principal { box-sizing: border-box; }
.panel-reparto .titulo-seccion { margin-bottom: 0; }
.fichas-lateral:empty { display: none; }
.fila-premio { align-items: center; }
.fila-personaje-voz { min-width: 0; }
.fila-personaje-voz .personaje, .fila-personaje-voz .voz-reparto { max-width: 100%; }
/* Donde sigue el nombre de la voz, el hueco de la fila ya deja sitio a las ondas */
.fila-personaje-voz .personaje, .fila-juego-prota .personaje { margin-right: 13px; max-width: calc(100% - 32px); }
.personaje { max-width: calc(100% - 19px); }
.panel-reparto .fila-personaje { min-height: 62px; }
.fila-personaje-voz .voz-reparto { font-size: 14px; }
.panel-lateral .estudio-tarjeta { padding: 4px; }
/* Dónde jugarlo hoy (datos de ludoteca.dev) */
.tiendas-lista { display: flex; flex-direction: column; gap: 2px; }
.tienda { display: flex; align-items: center; gap: 12px; padding: 4px; color: inherit; border-radius: 12px; }
.bloque-lateral a.tienda:hover { text-decoration: none; background: rgba(var(--ambar-rgb), .1); }
.tienda-icono { display: grid; flex: none; place-items: center; width: 38px; height: 38px; background: var(--marca); border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.tienda-icono img { width: 20px; height: 20px; }
.tienda strong { display: block; font-size: 15px; font-weight: 600; color: var(--titulo); }
.tienda small { display: block; font-size: 13px; color: var(--texto-2); }
.tienda small.voces-no { color: var(--acento-texto); }
.tienda small i { margin-right: 3px; }
.tiendas-duracion { display: flex; gap: 8px; align-items: baseline; margin: 0; padding-top: 12px; font-size: 14px; border-top: 1px solid var(--linea); }
.tiendas-duracion i { width: 1.25em; color: var(--titulo); text-align: center; }
.tiendas-fuente { margin: -4px 0 0; font-size: 12px; color: var(--texto-2); }
.tiendas-fuente a { color: inherit; text-decoration: underline; }
.premio-ganador { display: flex; align-items: center; gap: 12px; min-width: 0; }
.panel-reparto .fila-otra-voz { min-height: 62px; }
.panel-reparto .fila-otra-voz:last-child, .panel-reparto .fila-personaje:last-child, .panel-reparto .fila-premio:last-child { border-bottom: none; }
@media (max-width: 760px) {
  .juego-cabecera > .avatar-grande { width: 120px; height: 120px; font-size: 40px; }
  .doblajes .fila { position: relative; grid-template-columns: minmax(0, 1fr); padding-right: 40px; }
  .doblajes .ano-grupo:not(.nuevo) { display: none; }
  .doblajes .fila > .ano-grupo, .doblajes .fila > .doblaje-juego, .doblajes .fila > div { grid-column: 1; grid-row: auto; }
  .doblajes .fila > span:last-child { position: absolute; right: 2px; top: 50%; margin-top: -16px; }
  .panel-reparto .fila-personaje:not(.fila-personaje-simple) { grid-template-columns: minmax(0, 1fr) 32px; }
  .panel-reparto .fila-personaje:not(.fila-personaje-simple) > .fila-personaje-voz, .panel-reparto .fila-personaje > .con-portadita { grid-column: 1; }
  .panel-reparto .fila-personaje:not(.fila-personaje-simple) > span:last-child { grid-column: 2; grid-row: 1 / span 2; }
  .panel-reparto .fila-personaje-simple > span:last-child { grid-column: 1; grid-row: auto; }
  .panel-reparto .fila-otra-voz { grid-template-columns: 40px minmax(0, 1fr); }
  .panel-reparto .fila-otra-voz > .con-portadita { grid-column: 1 / -1; }
}

/* Secciones de voces al aire: sin tarjeta, para no encajonarlo todo */
html[data-tema] .panel-voz, .fichas-principal .panel-voz { padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; }
html[data-tema="claro"] .panel-voz .bocadillo:not(.principal) { background: var(--relleno); }
html[data-tema] .protagonista { padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; }
.protagonistas { gap: 22px 28px; }
.desplegar-doblajes > summary { margin-top: 2px; }
.panel-reparto > section > .titulo-seccion { margin-bottom: 14px; }

/* ===== Publicación: PEGI, compartir, ficha de personaje y cookies ===== */
.pegi-iconos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pegi-iconos img { display: block; width: auto; height: 34px; border-radius: 4px; }
.enlace-personaje { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 6px; vertical-align: middle; text-decoration: none; border-radius: 8px; }
.enlace-personaje:hover { background: rgba(var(--ambar-rgb), .14); }
.compartir { display: flex; flex-direction: column; gap: 8px; }
.compartir .dato-titulo { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--titulo); }
.pie-redes-compartir { display: flex; flex-wrap: wrap; gap: 6px; }
.pie-redes-compartir a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 18px; color: var(--acento-texto); text-decoration: none; background: var(--relleno); border-radius: 10px; }
.pie-redes-compartir a:hover { color: var(--sobre-acento); background: var(--acento); }
.enlace-boton { padding: 0; font: inherit; color: inherit; text-decoration: underline; background: none; border: 0; cursor: pointer; }
.caja-cookies { position: fixed; z-index: 70; right: 16px; bottom: 16px; left: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; max-width: 760px; margin: 0 auto; padding: 14px 18px; font-size: 14px; line-height: 1.45; color: var(--texto); background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6); }
.caja-cookies[hidden] { display: none; }
.caja-cookies p { flex: 1 1 300px; margin: 0; }
.caja-cookies .boton-solido { border: 0; cursor: pointer; }

/* ===== Menu: letra de los titulares y cambio de tema ===== */
.menu a, .menu-grupo > summary { font-family: var(--titular); font-size: 16px; font-weight: 600; line-height: 1.25; }
.tema-cambio { display: inline-flex; flex: none; gap: 2px; margin-left: auto; padding: 2px; background: rgba(var(--ambar-rgb), .12); border-radius: 10px; }
.menu .tema-cambio a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; font-size: 15px; color: var(--texto); border-radius: 8px; }
.menu .tema-cambio a i { width: auto; }
.menu .tema-cambio a:hover { color: var(--titulo); background: rgba(var(--ambar-rgb), .18); }
html[data-tema="claro"] .menu .tema-cambio a[data-tema-opcion="claro"],
html[data-tema="oscuro"] .menu .tema-cambio a[data-tema-opcion="oscuro"] { color: var(--sobre-acento); background: var(--acento); }
@media (max-width: 760px) {
  .tema-cambio { align-self: flex-start; margin: 6px 0 2px 14px; }
  .menu .tema-cambio a { width: 44px; height: 44px; font-size: 18px; }
}

/* ===== Página 404: la cinta enredada ===== */
.averia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 24px 56px; padding: 12px 0 8px; }
.averia-dibujo { position: relative; padding-top: 20px; }
.casete-enredado { display: block; width: 100%; height: auto; overflow: visible; }
.casete-enredado text { font-family: var(--titular); font-weight: 700; }
.enredo { --cinta: #9A6420; --cinta-brillo: #E7BB7D; }
html[data-tema="claro"] .enredo { --cinta: #543000; --cinta-brillo: #A8763A; }
.enredo-cinta, .enredo-brillo { stroke-dasharray: 1; animation: cinta-sale 1.9s cubic-bezier(.3, .1, .3, 1) both; }
.enredo-cinta { stroke: var(--cinta); }
.enredo-brillo { stroke: var(--cinta-brillo); }
@keyframes cinta-sale { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.casete-enredado .bobina { animation: giro .9s linear 2; }
.averia-bocadillo { position: absolute; z-index: 1; top: 0; right: 0; margin: 0; --giro: 3deg; }
.averia-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.averia-codigo { font-family: var(--titular); font-size: 20px; font-weight: 700; color: var(--acento-texto); }
.averia-texto h1 { font-size: clamp(40px, 5vw, 66px); }
.averia-explica { max-width: 44ch; font-size: 17px; color: var(--texto); }
.rebobinar { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 15px; text-decoration: none; }
.rebobinar:hover { color: var(--sobre-acento); }
.busqueda-404 { display: flex; align-items: center; width: min(100%, 420px); padding: 2px 2px 2px 12px; background: var(--campo); border: 1px solid rgba(var(--ambar-rgb), .5); border-radius: 12px; }
.busqueda-404 input { flex: 1; min-width: 0; height: 40px; background: none; border: none; outline: none; color: var(--titulo); font-family: inherit; font-size: 15px; }
.busqueda-404 input::placeholder { color: var(--texto-3); }
.busqueda-404 button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 9px; background: var(--acento); cursor: pointer; }
.busqueda-404 button i { font-size: 16px; color: var(--sobre-acento); }
.busqueda-404:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
/* Al rebobinar, la cinta vuelve a entrar y las bobinas giran al revés */
.rebobinando .enredo-cinta, .rebobinando .enredo-brillo { animation: cinta-entra .75s cubic-bezier(.6, 0, .8, .4) both; }
.rebobinando .casete-enredado .bobina { animation: giro-atras .35s linear infinite; }
@keyframes cinta-entra { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1; } }
@keyframes giro-atras { to { transform: rotate(-360deg); } }
.pagina-404 { display: flex; flex-direction: column; gap: 44px; }
@media (min-width: 761px) {
  .pagina-404 .portadas-azar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .averia-dibujo { padding-top: 44px; }
}
@media (max-width: 820px) {
  .averia { grid-template-columns: minmax(0, 1fr); }
  .averia-dibujo { width: min(100%, 460px); margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .enredo-cinta, .enredo-brillo, .casete-enredado .bobina { animation: none; }
}

/* ===== Buscador de la cabecera en anchos intermedios: solo la lupa ===== */
@media (min-width: 761px) and (max-width: 1239px) {
  .cabecera { position: relative; }
  .cabecera.con-busqueda { flex-wrap: nowrap; }
  .busqueda-cabecera { flex: none; padding: 0; background: none; border: none; }
  .busqueda-cabecera input { display: none; }
  .busqueda-cabecera button { width: 44px; height: 44px; border-radius: 10px; }
  .busqueda-cabecera.abierta { position: absolute; z-index: 30; top: 50%; right: 0; width: min(400px, 100%); padding: 2px 2px 2px 12px; background: var(--campo); border: 1px solid rgba(var(--ambar-rgb), .5); border-radius: 12px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); transform: translateY(-50%); }
  .busqueda-cabecera.abierta input { display: block; }
  .busqueda-cabecera.abierta button { width: 40px; height: 40px; border-radius: 9px; }
}
/* Sin sitio para todo en una fila: logo y lupa arriba, y el menú debajo */
@media (min-width: 761px) and (max-width: 979px) {
  .cabecera.con-busqueda { flex-wrap: wrap; }
  .cabecera.con-busqueda .menu { flex: 1 1 100%; order: 4; }
  .busqueda-cabecera.abierta { top: 18px; transform: none; }
}