@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700;800;900&family=Instrument+Serif:ital@1&display=swap");
/* correccion.css — la corrección común de los cinco juegos (js/correccion.js).
   Colores con significado, iguales en todos los juegos:
     ROJO  = lo que has marcado · VERDE = la correcta
     AZUL  = «Por qué» (la explicación verificada)
     ÁMBAR = «Cómo acordarte» · ORO = el botón
   Solo se anima opacity/transform (la mecha del botón es un scaleX). */
.corr {
  --corr-rojo: #ff6b6b; --corr-rojo-f: rgba(255, 90, 90, .13); --corr-rojo-b: rgba(255, 107, 107, .55);
  --corr-verde: #5ef08f; --corr-verde-f: rgba(74, 222, 128, .12); --corr-verde-b: rgba(94, 240, 143, .55);
  --corr-azul: #8ab4ff; --corr-azul-f: rgba(59, 130, 246, .12); --corr-azul-b: #3B82F6;
  --corr-ambar: #ffc34d; --corr-ambar-f: rgba(255, 149, 0, .12); --corr-ambar-b: #FF9500;
  --corr-texto: #F2F2F7; --corr-apagado: #b9b4ab;
  --corr-fs: 1em;
  display: flex; flex-direction: column; gap: .55em; width: 100%; box-sizing: border-box;
  font-family: 'DM Sans', system-ui, sans-serif; color: var(--corr-texto); text-align: left;
  font-size: var(--corr-fs); line-height: 1.34;
}
.corr * { box-sizing: border-box; }
.corr p { margin: 0; }

/* cabecera: título del tono + chapita «Santi · cuñao» */
.corr-cab { display: flex; align-items: center; justify-content: space-between; gap: .6em; flex-wrap: wrap; }
.corr-titulo { font: 800 1.28em/1.1 'Syne', 'DM Sans', sans-serif; letter-spacing: .01em; color: #fff; }
.corr--claro .corr-titulo { color: #cfe0ff; }
.corr--cunao .corr-titulo { color: #ffd98a; }
.corr--borde .corr-titulo { color: #ff9f8a; }
.corr-tono {
  flex: none; font: 800 max(10px, .62em)/1 "DM Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: #1a1005; padding: .45em .8em; border-radius: 999px;
  background: linear-gradient(180deg, #fff0c0, #f3d27a 45%, #d4a843);
}
.corr-entrada { color: var(--corr-apagado); font-weight: 600; font-size: .92em; margin-top: -.2em !important; }

/* lo marcado / lo correcto */
.corr-resp { display: flex; flex-direction: column; gap: .4em; }
.corr-fila { border-radius: 10px; padding: .45em .65em .5em; border: 1.5px solid; }
.corr-fila.corr-mal { background: var(--corr-rojo-f); border-color: var(--corr-rojo-b); }
.corr-fila.corr-bien { background: var(--corr-verde-f); border-color: var(--corr-verde-b); box-shadow: 0 0 14px rgba(74, 222, 128, .18); }
.corr-etq { display: block; font: 800 max(10px, .66em)/1.2 'DM Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .25em; }
.corr-mal .corr-etq { color: var(--corr-rojo); }
.corr-bien .corr-etq { color: var(--corr-verde); }
.corr-linea { display: flex; align-items: flex-start; gap: .5em; }
.corr-letra {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.55em; height: 1.55em; border-radius: 50%; font: 900 .9em/1 'DM Sans', system-ui, sans-serif; /* la letra suelta de Syne no se lee */
}
.corr-mal .corr-letra { color: #2a0303; background: radial-gradient(circle at 36% 28%, #ffe3e3, #ff7a7a 45%, #cc2f2f); }
.corr-bien .corr-letra { color: #03210e; background: radial-gradient(circle at 36% 28%, #eaffef, #6ff09b 45%, #22a653); }
.corr-txt { font-weight: 700; font-size: .98em; }
.corr-mal .corr-txt { color: #ffd4d4; text-decoration: line-through; text-decoration-color: rgba(255, 107, 107, .75); text-decoration-thickness: 1.5px; }
.corr-bien .corr-txt { color: #e6ffee; }

/* chips (Duelo: solo letras · Pass or Smash: verdadera/falsa) */
.corr-letras, .corr-vf-fila { display: flex; flex-direction: row; flex-wrap: wrap; gap: .45em; justify-content: center; }
.corr-chip {
  display: inline-flex; align-items: center; gap: .45em; padding: .32em .75em .32em .8em; border-radius: 999px;
  font: 900 .86em/1 'Syne', 'DM Sans', sans-serif; letter-spacing: .04em; border: 1.5px solid;
}
.corr-chip small { font: 800 max(10px, .72em)/1 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.corr-chip.corr-mal { color: var(--corr-rojo); background: var(--corr-rojo-f); border-color: var(--corr-rojo-b); }
.corr-chip.corr-bien { color: var(--corr-verde); background: var(--corr-verde-f); border-color: var(--corr-verde-b); }
.corr-chip .corr-letra { width: 1.5em; height: 1.5em; font-size: .92em; }
.corr-afirma p { font-weight: 700; color: #fff; }
.corr-afirma .corr-etq { color: var(--corr-apagado); }

/* por qué / cómo acordarte */
.corr-bloque { border-radius: 0 10px 10px 0; padding: .45em .7em .5em; border-left: 3px solid; }
.corr-h { display: block; font: 800 max(10px, .66em)/1.2 'DM Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .2em; }
.corr-porque { background: var(--corr-azul-f); border-color: var(--corr-azul-b); }
.corr-porque .corr-h { color: var(--corr-azul); }
.corr-porque p { font-weight: 600; font-size: 1em; color: #fff; }
.corr-acuerdate { background: var(--corr-ambar-f); border-color: var(--corr-ambar-b); }
.corr-acuerdate .corr-h { color: var(--corr-ambar); }
.corr-acuerdate p { font-weight: 800; color: #ffe2a8; font-size: .95em; }

.corr-cierre { font: italic 400 1.02em/1.25 'Instrument Serif', Georgia, serif; color: #e8e2d6; }

/* botón oro con la mecha del tiempo de lectura */
.corr-btn {
  position: relative; overflow: hidden; flex: none; align-self: stretch;
  min-height: 46px; margin-top: .1em; padding: .7em 1.2em; border: 0; border-radius: 999px; cursor: pointer;
  font: 900 .9em/1 'DM Sans', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #1a1005;
  background: linear-gradient(180deg, #fff0c0, #f3d27a 38%, #d4a843);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 16px rgba(243, 210, 122, .4);
}
.corr-btn span { position: relative; z-index: 1; }
.corr-mecha {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 0;
  background: rgba(26, 16, 5, .55); transform-origin: left center; transform: scaleX(1);
}
.corr-btn:active { transform: scale(.98); }

/* ── variante LOSA (Duelo): centrada, dentro de la losa negra ── */
.corr--losa { align-items: stretch; text-align: center; gap: .42em; }
.corr--losa .corr-cab { justify-content: center; }
.corr--losa .corr-titulo { font-size: 1.12em; }
.corr--losa .corr-bloque { text-align: left; }
.corr--losa .corr-btn { align-self: center; min-height: 40px; padding: .62em 1.8em; }
.corr--losa .corr-cierre { text-align: center; font-size: .98em; }

/* ── variante ESTÁTICO (revisión del Boss): sin botón ni reloj ── */
.corr--estatico { gap: .5em; }
.corr--estatico .corr-titulo { font-size: 1.05em; }

/* ── variante CARTEL (Cazador): lo pinta su propio cartel ── */
.corr--cartel { gap: .45em; }

/* cara de Santi junto al título (Survival) */
.corr-av {
  flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; margin-right: -.1em;
  background: #1b1712 center / cover no-repeat; border: 2px solid #d4a843;
}
.corr-cab:has(.corr-av) { justify-content: flex-start; }
.corr-cab:has(.corr-av) .corr-tono { margin-left: auto; }

/* ── Cazador (games/cazador/explica.js): su cartel de madera y oro, con las
   piezas del tono. «Por qué» va en el bloque azul y «Cómo acordarte» en el de
   oro, como en el resto de juegos. ── */
.cz-ap .cz-ap-entrada {
  margin: calc(-4px * var(--cz-k, 1)) 0 calc(8px * var(--cz-k, 1)); text-align: center;
  font: 600 calc(15px * var(--cz-k, 1))/1.3 var(--cz-fb, 'DM Sans', sans-serif); color: rgba(255, 247, 230, .78);
}
.cz-ap .cz-ap-norma-2 { margin-top: .45em !important; padding-top: .45em; border-top: 1px solid rgba(91, 157, 255, .3); }
.cz-ap .cz-ap-cierre {
  margin: calc(9px * var(--cz-k, 1)) 0 0; text-align: center;
  font: italic 400 calc(15px * var(--cz-k, 1))/1.2 'Instrument Serif', Georgia, serif; color: #f3e6c8;
}

/* ── Boss (revisión final): la línea del tono, una vez arriba ── */
.rev-tono { margin: 2px 0 4px; text-align: center; font: 600 15px/1.4 'DM Sans', system-ui, sans-serif; color: #d9d3c7; } /* texto de lectura: 15 px móvil, 18 tablet */
@media (min-width: 700px) { .rev-tono { font-size: max(15px, calc(18px / var(--bk, 1))); } } /* la revisión va dentro del zoom del Boss (--bk) */
.rev-tono b { font-family: 'Syne', 'DM Sans', sans-serif; font-weight: 800; }
.rev-tono.corr--claro b { color: #cfe0ff; }
.rev-tono.corr--cunao b { color: #ffd98a; }
.rev-tono.corr--borde b { color: #ff9f8a; }
.rev-card .corr--estatico { margin-top: 8px; font-size: 15px; }
@media (min-width: 700px) { .rev-card .corr--estatico { font-size: max(15px, calc(18px / var(--bk, 1))); } }

/* ── Pass or Smash: dentro de la carta roja las fichas van macizas, que el rojo
   sobre rojo no se lee ── */
#fail .truth-card .corr-chip { background: rgba(8, 5, 6, .82); }
#fail .truth-card .corr-entrada { color: #f1e4dc; }
#fail .truth-card .corr-afirma .corr-etq { color: #f1d9cf; }
#fail .truth-card .corr-porque { background: rgba(6, 10, 24, .72); }
#fail .truth-card .corr-acuerdate { background: rgba(24, 14, 2, .72); }
#fail .entendido .corr-mecha { height: 5px; }

/* ═════════════════════════════════════════════════════════════════════════
   LAS TRES VARIANTES (29-sep) · ?correccion=1|2|3 · Supervivencia y Duelo
   Mismo código de color en las tres: ROJO lo tuyo (pequeño, tachado), VERDE
   la buena (lo que hay que recordar: más grande), BLANCO el porqué, ORO la
   regla/chapa y el botón «Seguir». Una sola voz grande por pantalla.
   ═════════════════════════════════════════════════════════════════════════ */
.corr--v1, .corr--v2, .corr--v3 { gap: .62em; line-height: 1.38; }
.corr .corr-aviso {
  display: block; font: 800 max(12px, .7em)/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: #ff8a8a;
}
.corr-sim { flex: none; width: 1.15em; height: 1.15em; }
.corr-mal .corr-sim, .corr-vs-mal .corr-sim { color: var(--corr-rojo); }
.corr-bien .corr-sim, .corr-vs-bien .corr-sim { color: var(--corr-verde); }
.corr mark.corr-cifra {
  background: rgba(255, 210, 77, .16); color: #ffe08a; font-weight: 900; padding: 0 .22em; border-radius: .3em;
  box-shadow: inset 0 -2px 0 rgba(255, 210, 77, .55); white-space: nowrap;
}
.corr-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35em; }
.corr-btn .corr-flecha { position: relative; z-index: 1; width: 1.05em; height: 1.05em; }
.corr-espera .corr-mecha { display: none; }
/* el botón invita: respira un halo (opacity), nada de animar box-shadow */
.corr-espera .corr-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 14px 2px rgba(255, 255, 255, .75); opacity: 0; animation: corrLate 1.8s ease-in-out .9s infinite;
}
@keyframes corrLate { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .corr-espera .corr-btn::after { animation: none; opacity: 0; } }

/* ── 1 · FICHA ── */
.corr--v1 .corr-cab { flex-wrap: nowrap; justify-content: flex-start; gap: .6em; }
.corr--v1 .corr-cab-t { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.corr--v1 .corr-titulo { font-size: 1.3em; }
.corr--v1 .corr-resp { gap: .38em; }
.corr--v1 .corr-fila { display: flex; align-items: center; gap: .55em; padding: .42em .6em; border-radius: 12px; }
.corr--v1 .corr-fila-t { flex: 1; min-width: 0; }
.corr--v1 .corr-fila .corr-etq { margin-bottom: .1em; }
.corr--v1 .corr-fila .corr-letra { margin-left: auto; }
.corr--v1 .corr-fila.corr-mal { background: rgba(255, 90, 90, .07); border-color: rgba(255, 107, 107, .35); }
.corr--v1 .corr-fila.corr-mal .corr-txt { font-size: .9em; font-weight: 600; color: #f0b8b8; }
.corr--v1 .corr-fila.corr-bien { padding: .55em .65em; border-width: 2px; }
.corr--v1 .corr-fila.corr-bien .corr-txt { font-size: 1.08em; font-weight: 800; color: #eafff0; }
.corr--v1 .corr-porque { background: none; border-left: 3px solid var(--corr-azul-b); border-radius: 0; padding: .05em .1em .05em .65em; }
.corr--v1 .corr-porque .corr-h, .corr--v1 .corr-regla .corr-h {
  display: block; font: 800 max(10px, .66em)/1.2 'DM Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .2em;
}
.corr--v1 .corr-porque .corr-h { color: var(--corr-azul); }
.corr--v1 .corr-porque p { font-weight: 600; font-size: 1.02em; color: #fff; }
.corr-regla {
  display: flex; align-items: flex-start; gap: .5em; padding: .5em .7em; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 196, 77, .16), rgba(255, 149, 0, .08)); border: 1.5px solid rgba(255, 196, 77, .5);
}
.corr-regla .corr-ico-s { flex: none; width: 1.35em; height: 1.35em; color: #ffd24d; margin-top: .1em; }
.corr-regla p { font-weight: 800; color: #ffe6b0; }
.corr--v1 .corr-regla .corr-h { color: var(--corr-ambar); }

/* ── 2 · TARJETA ── */
.corr--v2 .corr-kicker { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; }
.corr--v2 .corr-titulo { font-size: 1.1em; }
.corr-tarjeta {
  display: flex; align-items: center; gap: .8em; padding: .7em .8em; border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ic) 20%, #0d0c10), #0d0c10 70%);
  border: 1.5px solid color-mix(in srgb, var(--ic) 60%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--ic) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.corr-tema {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
  min-width: 4.4em; padding: .45em .3em; border-radius: 12px; color: var(--ic);
  background: color-mix(in srgb, var(--ic) 14%, rgba(0, 0, 0, .4)); border: 1px solid color-mix(in srgb, var(--ic) 45%, transparent);
}
.corr-tema .corr-ico { width: 2.1em; height: 2.1em; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ic) 60%, transparent)); }
.corr-tema small {
  font: 800 max(10px, .58em)/1.1 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: center;
  color: color-mix(in srgb, var(--ic) 70%, #fff); max-width: 6.5em;
}
.corr-cifra-g { font: 900 1.12em/1 'DM Sans', system-ui, sans-serif; color: #fff; white-space: nowrap; }
.corr-idea { font: 800 1.16em/1.3 'DM Sans', system-ui, sans-serif; color: #fff; }
.corr-vs { display: flex; flex-direction: column; gap: .3em; }
.corr-vs > span { display: flex; align-items: flex-start; gap: .45em; font-weight: 700; }
.corr-vs .corr-sim { margin-top: .12em; }
.corr-vs-mal { font-size: .88em; color: #f0b8b8; }
.corr-vs-mal s { text-decoration-color: rgba(255, 107, 107, .8); text-decoration-thickness: 1.5px; }
.corr-vs-bien { color: #bff5d0; font-size: 1em; }
.corr-vs b { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 900; }
.corr-resto { font-weight: 500; font-size: .95em; color: #e4dfd6; }

/* ── 3 · SANTI ── */
/* 29-sep (noche) · Nico: «el comentario de Santi sale como aplastado». Lo
   aplastaba el ajuste de cada juego: para caber sin scroll bajaba la letra a
   11-13 px (el Duelo, también en tablet, con la losa estirada a lo ancho y
   una línea de 6 cm) y el Survival la dejaba en 15 px fijos en tablet; la
   cara bajaba con ella a 34 px y el título en Syne, ancho y bajo, remataba el
   efecto. Ahora la letra de la variante 3 tiene SUELO: 15 px en móvil y 18 px
   en tablet (19 en las grandes). Si no cabe, el juego ya encoge la foto (el
   Survival) o sube la losa sobre ella (el Duelo): cede la foto, no el texto.
   Sin alturas fijas: el bocadillo mide lo que su texto. */
.corr.corr--v3 { --corr-suelo: 15px; font-size: max(var(--corr-suelo), var(--corr-fs)); }
/* En tablet el Survival y el Boss agrandan su columna con `zoom` (--sk / --bk,
   css/survival-tablet.css y boss-tablet.css): el suelo se divide por ese
   factor para que en pantalla salgan 18-19 px de verdad, no 18 × zoom. */
@media (min-width: 700px) { .corr.corr--v3 { --corr-suelo: max(15px, calc(18px / (var(--sk, 1) * var(--bk, 1)))); } }
@media (min-width: 1000px) and (min-height: 1200px) { .corr.corr--v3 { --corr-suelo: max(15px, calc(19px / (var(--sk, 1) * var(--bk, 1)))); } }
.corr--v3 .corr-kicker { text-align: center; }
.corr-habla { display: flex; align-items: flex-start; gap: .65em; }
.corr-cara {
  flex: none; width: 3.2em; height: auto; aspect-ratio: 1; min-width: 46px; border-radius: 50%; margin-top: .1em;
  background: #1b1712 center / cover no-repeat; border: 2.5px solid #d4a843; box-shadow: 0 0 14px rgba(212, 168, 67, .45);
}
.corr-bocadillo {
  position: relative; flex: 1 1 auto; min-width: 0; height: auto; min-height: 0; max-height: none; overflow: visible;
  padding: .7em .95em .8em; border-radius: 4px 18px 18px 18px;
  background: #f6f1e7; color: #1c1712; text-align: left; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  overflow-wrap: break-word;
}
.corr-bocadillo::before {
  content: ""; position: absolute; left: -.55em; top: 1em; border: .4em solid transparent;
  border-right: .6em solid #f6f1e7; border-left: 0;
}
/* el título, en DM Sans: la Syne ancha y baja era lo que se leía «aplastado» */
.corr--v3 .corr-titulo {
  display: block; font: 800 1.08em/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: 0;
  color: #1c1712 !important; margin-bottom: .3em;
}
.corr--v3 .corr-voz { font-size: 1em; line-height: 1.45; }
/* «Seguir» siempre a la vista: si una explicación larguísima no cabe ni con la
   foto al mínimo, el hueco del juego hace scroll y el botón se queda pegado a
   su borde de abajo en vez de irse con el texto */
.corr--v3 .corr-btn { position: sticky; bottom: .3em; z-index: 2; }
/* móvil bajo (360×800 y parecidos): la misma letra, menos aire alrededor,
   para que «Seguir» quepa sin scroll con una línea larga */
@media (max-width: 699px) and (max-height: 860px) {
  .corr.corr--v3 { gap: .45em; }
  .corr--v3 .corr-bocadillo { padding: .55em .8em .65em; }
  .corr--v3 .corr-titulo { margin-bottom: .15em; }
  .corr--v3 .corr-voz { line-height: 1.4; }
  .corr--v3 .corr-btn { min-height: 44px; padding-top: .6em; padding-bottom: .6em; margin-top: 0; }
}
.corr-dice { font-weight: 700; color: #2a231b; }
.corr-dice .corr-x { color: #b3261e; text-decoration-color: rgba(179, 38, 30, .7); font-weight: 700; }
.corr-dice .corr-y { color: #0f7a3e; font-weight: 900; }
.corr-voz { margin-top: .4em !important; font-weight: 600; color: #2a231b; }
.corr--v3 mark.corr-cifra { background: #ffe08a; color: #3a2400; box-shadow: none; }
.corr-chapa {
  display: flex; align-items: center; gap: .55em; align-self: center; max-width: 100%;
  padding: .45em .95em .45em .6em; border-radius: 999px; color: #1a1005;
  background: linear-gradient(180deg, #fff0c0, #f3d27a 45%, #d4a843);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 0 16px rgba(243, 210, 122, .35);
}
.corr-chapa .corr-ico-s { flex: none; width: 1.45em; height: 1.45em; color: #7a4d00; fill: rgba(255, 255, 255, .35); }
.corr-chapa p { font-weight: 800; line-height: 1.25; }
.corr-chapa .corr-h { display: block; font: 900 max(10px, .6em)/1.1 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b4300; }
.corr-chapa mark.corr-cifra { background: rgba(255, 255, 255, .5); color: #3a2400; box-shadow: none; }
.corr-chapa .corr-cifra-g { color: #1a1005; font-size: 1.2em; }

/* ── en la LOSA del Duelo: centrado, compacto; las letras ya se ven debajo ── */
.corr--losa.corr--v1, .corr--losa.corr--v2, .corr--losa.corr--v3 { gap: .45em; text-align: left; flex: none; } /* sin encogerse: así la losa mide lo que ocupa y la letra se ajusta */
.corr--losa .corr-btn { align-self: center; min-height: 40px; padding: .6em 1.7em; margin-top: .05em; }
.corr--losa.corr--v1 .corr-cab { justify-content: center; }
.corr--losa.corr--v1 .corr-cab-t { align-items: center; text-align: center; }
.corr--losa.corr--v1 .corr-titulo { font-size: 1.12em; }
.corr--losa .corr-letras { justify-content: center; }
.corr--losa .corr-chip { gap: .35em; }
.corr--losa.corr--v2 .corr-kicker { justify-content: center; }
.corr--losa .corr-vs { flex-direction: row; justify-content: center; gap: .9em; }
.corr--losa .corr-tarjeta { padding: .5em .65em; gap: .6em; }
.corr--losa .corr-tema { min-width: 3.6em; padding: .35em .25em; }
.corr--losa .corr-tema .corr-ico { width: 1.7em; height: 1.7em; }
.corr--losa .corr-idea { font-size: 1.05em; }
.corr--losa .corr-cara { width: 3em; }
.corr--losa .corr-bocadillo { padding: .6em .85em .7em; }

/* ── El «Recuerda» de Santi (29-sep, tarde) ──────────────────────────────────
   Ni «has dicho» ni «la buena»: eso ya está pintado en las opciones. Santi dice
   UNA cosa, con su entrada («Recuerda:», «Ojo, trampa:») en el color del tipo:
   trampa = coral · excepción = violeta · cifra = oro · señal = naranja ·
   regla/concepto = azul. */
.corr [data-tipo] { --tipo: #8ab4ff; --tipo-f: rgba(59, 130, 246, .13); }
.corr [data-tipo="trampa"] { --tipo: #ff8a7a; --tipo-f: rgba(255, 107, 90, .13); }
.corr [data-tipo="excepcion"] { --tipo: #c9a6ff; --tipo-f: rgba(160, 110, 255, .14); }
.corr [data-tipo="cifra"] { --tipo: #ffd24d; --tipo-f: rgba(255, 196, 77, .13); }
.corr [data-tipo="senal"] { --tipo: #ffae3d; --tipo-f: rgba(255, 149, 0, .13); }
.corr-recuerda { font-weight: 700; color: #fff; }
.corr-entra { color: var(--tipo); font-weight: 900; letter-spacing: .01em; }
.corr-ficha {
  display: flex; align-items: flex-start; gap: .6em; padding: .7em .8em; border-radius: 14px;
  background: linear-gradient(180deg, var(--tipo-f), rgba(0, 0, 0, .15)); border: 1.5px solid color-mix(in srgb, var(--tipo) 55%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--tipo) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.corr-ficha .corr-ico-s { flex: none; width: 1.5em; height: 1.5em; color: var(--tipo); margin-top: .05em; }
.corr-ficha .corr-recuerda { font-size: 1.08em; line-height: 1.38; }
.corr-idea.corr-recuerda { font-weight: 800; }
.corr--v3 .corr-recuerda { color: #2a231b; font-weight: 700; margin-top: .1em !important; }
.corr--v3 .corr-entra { color: #9a3412; }
.corr--v3 [data-tipo="trampa"] .corr-entra, .corr--v3 .corr-recuerda[data-tipo="trampa"] .corr-entra { color: #b3261e; }
.corr--v3 .corr-recuerda[data-tipo="excepcion"] .corr-entra { color: #6d28d9; }
.corr--v3 .corr-recuerda[data-tipo="regla"] .corr-entra, .corr--v3 .corr-recuerda[data-tipo="concepto"] .corr-entra { color: #1d4ed8; }
.corr--losa .corr-ficha { text-align: left; }