/* ═══════════════════════════════════════════════════════════════════════
   ENTORNO DE ESTUDIO — capa "viva" (oct-2026, miciudadania2026)
   ───────────────────────────────────────────────────────────────────────
   Se carga la ÚLTIMA en las nueve pantallas del producto. Sustituye a la
   capa "institucional" anterior (todo cuadrado, en monoespaciada y con
   !important), que se leía fría y de formulario antiguo.

   Qué cambia: esquinas suaves, un color propio por sección, fotos reales
   en las cabeceras, íconos de trazo fino, movimiento al aparecer y al
   tocar, barras y cifras que se animan.
   Qué NO cambia: el contenido, la lógica ni los datos. Sólo estructura y
   presentación.

   Tipografía: las fuentes que el proyecto ya autohospeda (Public Sans e
   IBM Plex Mono). Sin CDN externos: un CDN de fuentes recibe la IP de
   cada visitante y welcome.css se comprometió a no hacerlo.

   Para deshacer: quitar el <link> de esta hoja y el <script> de
   js/estudio-ui.js; todo vuelve a como estaba.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --azul-900:#0a1b30;
  --azul-800:#112b47;
  --azul-700:#1d3f63;
  --vino:#7c1c2c;
  --vino-oscuro:#5e1421;

  --azul:        var(--azul-900);
  --navy:        var(--azul-900);
  --navy-soft:   #e9eef5;
  --rojo:        var(--vino);
  --rojo-soft:   transparent;
  --accion:      var(--vino);
  --accion-oscuro:var(--vino-oscuro);
  --pagina:      #f4f6fa;
  --card:        #ffffff;
  --borde:       rgba(10,27,48,.12);
  --gris-borde:  rgba(10,27,48,.24);
  --texto:       #0a1b30;
  --texto-suave: #55637a;
  --azul-claro:  #eef2f7;
  --radio:       16px;

  --r-card:   18px;
  --r-ctl:    12px;
  --sombra-1: 0 1px 2px rgba(10,27,48,.06), 0 4px 14px rgba(10,27,48,.06);
  --sombra-2: 0 2px 4px rgba(10,27,48,.08), 0 14px 32px rgba(10,27,48,.12);
  --ease:     cubic-bezier(.2,.7,.2,1);

  --ancho-tarjeta: 720px;
  --acento:       var(--azul-700);
  --acento-suave: #e3ebf5;
}

/* Un color por sección: lo hereda el filo de la tarjeta, las opciones, los
   botones secundarios y los íconos. Los valores base viven en welcome.css. */
body.sec-comandos { --acento:var(--color-comandos); --acento-suave:#e3eaf3; --foto:url("../images/portada/celebracion-5-movil.webp");       --pos:50% 22%; }
body.sec-n400     { --acento:var(--color-n400);     --acento-suave:#ece8f8; --foto:url("../images/portada/celebracion-muchacha-movil.webp"); --pos:50% 30%; }
body.sec-civismo  { --acento:var(--color-civismo);  --acento-suave:#e1eef9; --foto:url("../images/portada/capitolio-escaleras-movil.webp");  --pos:50% 55%; }
body.sec-lectura  { --acento:var(--color-lectura);  --acento-suave:#e1f1e8; --foto:url("../images/portada/celebracion-6-movil.webp");       --pos:50% 28%; }
body.sec-examen   { --acento:var(--color-examen);   --acento-suave:#fbeedd; --foto:url("../images/portada/celebracion-4-movil.webp");       --pos:50% 35%; }
body.sec-oath     { --acento:var(--color-oath);     --acento-suave:#f6edd3; --foto:url("../images/portada/celebracion-3-movil.webp");       --pos:50% 30%; }
body.sec-progreso { --acento:var(--color-progreso); --acento-suave:#e4ebf1; --foto:url("../images/portada/celebracion-2-movil.webp");       --pos:50% 30%; }
body.sec-panel    { --foto:url("../images/portada/celebracion-1-movil.webp");        --pos:50% 30%; }
body.sec-bienvenida{ --foto:url("../images/portada/celebracion-familia-movil.webp"); --pos:50% 35%; }
@media (min-width:760px){
  body.sec-comandos  { --foto:url("../images/portada/celebracion-5.webp"); }
  body.sec-n400      { --foto:url("../images/portada/celebracion-muchacha.webp"); }
  body.sec-civismo   { --foto:url("../images/portada/capitolio-escaleras.webp"); }
  body.sec-lectura   { --foto:url("../images/portada/celebracion-6.webp"); }
  body.sec-examen    { --foto:url("../images/portada/celebracion-4.webp"); }
  body.sec-oath      { --foto:url("../images/portada/celebracion-3.webp"); }
  body.sec-progreso  { --foto:url("../images/portada/celebracion-2.webp"); }
  body.sec-panel     { --foto:url("../images/portada/celebracion-1.webp"); }
  body.sec-bienvenida{ --foto:url("../images/portada/celebracion-familia.webp"); }
}

button, input, textarea, select{ font-family:inherit; }
body{ background:var(--pagina); color:var(--texto); }
::selection{ background:var(--acento); color:#fff; }
:focus-visible{ outline:3px solid var(--acento); outline-offset:2px; }

/* ─── Cabecera con foto ─────────────────────────────────────────────── */
body .cabecera{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:190px; text-align:left;
  padding:72px clamp(20px,5vw,44px) 28px;
  background:var(--azul-900) var(--foto, none) var(--pos, 50% 30%) / cover no-repeat;
  border-bottom:0; border-radius:0 0 28px 28px; color:#fff;
  box-shadow:inset 0 -5px 0 var(--acento);
}
/* Capa de color lisa sobre la foto, para que el texto se lea. */
body .cabecera::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(8,22,40,.64); }
body .cabecera::after{
  content:"Imagen ilustrativa";
  position:absolute; right:18px; bottom:12px;
  font:400 .56rem/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
body .cabecera h1{
  font-size:clamp(1.5rem,3.4vw,2.1rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.12; max-width:24ch; margin:0 0 8px; padding:0;
  text-shadow:0 1px 14px rgba(0,0,0,.35);
}
body .cabecera p{
  font:500 .78rem/1.4 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.1em; text-transform:uppercase; opacity:.88; margin:0; max-width:46ch;
}
body.sec-panel .cabecera, body.sec-bienvenida .cabecera{ min-height:240px; }

body .btn-inicio{
  position:absolute; top:14px; left:14px; z-index:2;
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.18); color:#fff;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
body .btn-inicio:hover{ background:rgba(255,255,255,.32); transform:scale(1.06); }

/* ─── Contenedores y barra superior ─────────────────────────────────── */
body .contenedor{ max-width:var(--ancho-tarjeta); }
.barra-superior{ max-width:var(--ancho-tarjeta); margin:18px auto 0; padding:0 4px; }
.volver{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font:700 .92rem 'Public Sans',system-ui,sans-serif; letter-spacing:0; text-transform:none;
  color:var(--acento); text-decoration:none; background:none; border:0; cursor:pointer;
  transition:transform .2s var(--ease);
}
.volver:hover{ transform:translateX(-3px); }

.contador{
  display:flex; align-items:center; gap:14px;
  max-width:var(--ancho-tarjeta); margin:14px auto 10px; text-align:left;
  font:500 .78rem 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.1em; text-transform:uppercase; color:var(--texto-suave);
}
.contador::after{ content:""; flex:1; height:4px; border-radius:4px; background:var(--borde); }

/* ─── Selección de nivel ────────────────────────────────────────────── */
#seleccion-nivel{ max-width:var(--ancho-tarjeta); }
.seleccion-titulo{
  font-size:clamp(1.35rem,2.8vw,1.8rem); font-weight:800; letter-spacing:-.015em;
  color:var(--texto); text-align:left; margin:10px 0 18px;
}
.niveles{ border:0; display:grid; gap:12px; }
body .nivel-btn{
  border:1px solid var(--borde); border-left:6px solid var(--acento);
  border-radius:var(--r-card); background:var(--card); box-shadow:var(--sombra-1);
  padding:20px 22px; margin:0; min-height:72px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
body .nivel-btn:hover{ transform:translateY(-3px); box-shadow:var(--sombra-2); background:var(--card); padding-left:22px; }
body .nivel-btn:active{ transform:scale(.985); }
.nivel-nombre{ font-size:1.2rem; font-weight:800; }
.nivel-conteo{
  font:700 .8rem 'Public Sans',sans-serif; letter-spacing:0;
  background:var(--acento-suave); color:var(--acento); border-radius:999px; padding:6px 14px;
}

/* ─── La tarjeta de estudio ─────────────────────────────────────────── */
body .flashcard{ border:0; border-radius:var(--r-card); background:transparent; box-shadow:none; margin:0 0 22px; }
body .cara{
  border-radius:var(--r-card); color:var(--texto); margin:0;
  border:1px solid var(--borde); border-top:5px solid var(--acento);
  background:var(--card); box-shadow:var(--sombra-2);
}
.cara-cuerpo{ padding:24px 24px 26px; }
@media (max-width:520px){ .cara-cuerpo{ padding:20px 18px 22px; } }

.pastilla{ border-radius:999px; font:700 .72rem 'Public Sans',sans-serif; letter-spacing:.03em; padding:5px 12px; text-transform:none; }
.pastilla.categoria{ background:var(--acento-suave); color:var(--acento); border:0; }
.pastilla.dificultad{ background:#f7e9ec; color:var(--vino); border:0; }
.num-pregunta{
  font:500 .78rem 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-suave); margin:14px 0 6px;
}
body .pregunta-en{ font-size:clamp(1.35rem,3vw,1.75rem); font-weight:800; letter-spacing:-.015em; line-height:1.25; }

/* ─── Audio ─────────────────────────────────────────────────────────── */
body .btn-bocina{
  background:var(--acento); color:#fff; border:0; border-radius:var(--r-ctl);
  font:700 .95rem 'Public Sans',sans-serif; letter-spacing:0; text-transform:none;
  padding:12px 20px; min-height:48px; gap:10px; cursor:pointer;
  box-shadow:0 8px 18px -8px var(--acento);
  transition:transform .2s var(--ease), filter .2s;
}
body .btn-bocina:hover{ transform:translateY(-2px); filter:brightness(1.1); }
body .btn-bocina:active{ transform:scale(.97); }
body .btn-bocina.reproduciendo{ background:var(--vino); animation:latido 1.4s ease-in-out infinite; }
@keyframes latido{ 50%{ box-shadow:0 0 0 8px rgba(124,28,44,.16); } }

body .velocidad{ border:1px solid var(--gris-borde); border-radius:var(--r-ctl); overflow:hidden; background:#fff; }
body .velocidad button{
  border-radius:0; background:transparent; color:var(--texto-suave);
  font:700 .85rem 'Public Sans',sans-serif; letter-spacing:0; padding:10px 14px; min-height:46px; cursor:pointer;
  transition:background .2s, color .2s;
}
body .velocidad button:hover{ background:var(--acento-suave); color:var(--acento); }
body .velocidad button.activa{ background:var(--azul-900); color:#fff; }
body .btn-silenciar{
  border-radius:var(--r-ctl); background:#fff; border:1px solid var(--gris-borde); color:var(--texto-suave);
  transition:background .2s, color .2s;
}
body .btn-silenciar:hover{ background:var(--acento-suave); color:var(--acento); }

@media (max-width:560px){
  .fila-audio{ gap:8px; }
  .fila-audio .btn-bocina{ flex:1 1 auto; justify-content:center; order:1; }
  .fila-audio .btn-silenciar{ order:2; flex:0 0 auto; }
  .fila-audio .velocidad{ order:3; flex:1 1 100%; }
  .fila-audio .velocidad button{ flex:1; }
}

body .btn-espanol{
  border:0; border-radius:0; background:none; color:var(--acento);
  font:700 .9rem 'Public Sans',sans-serif; letter-spacing:0; text-transform:none;
  padding:8px 0; margin:12px 0 0; cursor:pointer;
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px;
}
.traduccion{ background:var(--acento-suave); border-radius:var(--r-ctl); padding:14px 16px; margin-top:10px; }

/* ─── Las respuestas ────────────────────────────────────────────────── */
.opciones{ counter-reset:op; margin:22px 0 0; border:0; display:grid; gap:10px; }
.opcion{
  counter-increment:op;
  display:flex; align-items:stretch; margin:0; gap:0;
  border:1.5px solid var(--borde); border-radius:14px; background:#fff; overflow:hidden;
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.opcion::before{
  content:counter(op, upper-alpha);
  flex:none; width:48px; display:flex; align-items:center; justify-content:center;
  font:800 .95rem 'Public Sans',sans-serif; color:var(--acento);
  background:var(--acento-suave); border:0;
  transition:background .2s, color .2s;
}
.opcion:hover{ border-color:var(--acento); background:#fff; transform:translateX(3px); box-shadow:var(--sombra-1); }
.opcion:hover::before{ background:var(--acento); color:#fff; border:0; }
.opcion:active{ transform:scale(.99); }
body .opcion .elegir{
  flex:1; text-align:left; border:0; border-radius:0; background:transparent;
  padding:17px 14px; font:600 1.02rem/1.35 'Public Sans',sans-serif; color:var(--texto); cursor:pointer;
}
body .opcion .audio-resp{
  width:48px; border:0; border-radius:0; background:transparent; color:var(--texto-suave);
  opacity:.75; cursor:pointer; transition:opacity .2s, color .2s;
}
.opcion:hover .audio-resp, body .opcion .audio-resp:hover{ opacity:1; color:var(--acento); }

/* ─── Cara de atrás ─────────────────────────────────────────────────── */
body .resultado{
  display:flex; align-items:center; gap:10px;
  font:800 1.05rem 'Public Sans',sans-serif; letter-spacing:.01em; text-transform:none; text-align:left;
  padding:14px 16px; margin:14px 0 18px; border:0; border-radius:var(--r-ctl);
  animation:aparece .45s var(--ease) both;
}
body .resultado::before{
  content:""; flex:none; width:22px; height:22px;
  background-color:currentColor;
  -webkit-mask:var(--ico) center/20px no-repeat; mask:var(--ico) center/20px no-repeat;
}
body .resultado.ok{
  background:#e4f3ea; color:#17653a;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
body .resultado.mal{
  background:#f9e8eb; color:var(--vino);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.elegiste{ font-size:.95rem; color:var(--texto-suave); margin:0 0 14px; }
body .bloque-correcta{ border:0; border-left:4px solid var(--acento); padding:4px 0 4px 16px; margin:0 0 18px; background:transparent; border-radius:0; }
body .bloque-correcta .etq{ font:500 .72rem 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-suave); }
body .bloque-correcta .txt{ font-size:clamp(1.25rem,2.6vw,1.55rem); font-weight:800; line-height:1.25; margin-top:4px; }
.explicacion{ font-size:1.02rem; line-height:1.7; }
.tambien{ font-size:.92rem; color:var(--texto-suave); background:var(--acento-suave); border:0; border-radius:var(--r-ctl); padding:12px 14px; }
.estado-memoria{ font:500 .8rem 'IBM Plex Mono',ui-monospace,monospace; color:var(--texto-suave); }

@keyframes aparece{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }

/* ─── Botones ───────────────────────────────────────────────────────── */
body .btn-siguiente, body .nav button, body .boton-principal, body .btn-accion, body .btn-principal-card,
body .btn-examen-principal, body .btn-repaso, body .btn-ver-es, body .ver-instrucciones{
  border-radius:var(--r-ctl);
  font:700 .98rem 'Public Sans',sans-serif; letter-spacing:0; text-transform:none;
  padding:15px 26px; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s, color .2s;
}
body .btn-siguiente, body .nav button.principal, body .btn-examen-principal, body .btn-repaso, body .btn-accion, body .boton-principal, body .btn-principal-card{
  background:var(--vino); color:#fff; border:0; box-shadow:0 10px 22px -10px rgba(124,28,44,.7);
}
body .btn-siguiente:hover, body .nav button.principal:hover, body .btn-examen-principal:hover, body .btn-repaso:hover{
  transform:translateY(-2px); background:var(--vino-oscuro); box-shadow:0 14px 26px -10px rgba(124,28,44,.75);
}
body .btn-siguiente:active, body .nav button.principal:active, body .btn-examen-principal:active{ transform:scale(.97); }
.nav{ max-width:var(--ancho-tarjeta); }
body .nav button{ background:#fff; color:var(--texto); border:1.5px solid var(--gris-borde); box-shadow:none; }
body .nav button:hover:not(:disabled){ border-color:var(--acento); color:var(--acento); transform:translateY(-1px); }
body .nav button.principal{ border:0; background:var(--vino); color:#fff; box-shadow:0 10px 22px -10px rgba(124,28,44,.7); }
body .nav button:disabled{ opacity:.4; cursor:not-allowed; }

/* ─── PANEL: las ocho secciones como tarjetas con ícono ─────────────── */
body .secciones{ display:grid; gap:14px; margin:26px 0 12px; border:0; grid-template-columns:1fr; }
@media (min-width:760px){
  body .secciones{ grid-template-columns:1fr 1fr; }
  body.sec-panel .contenedor{ max-width:980px; }
}
body .tarjeta{
  position:relative; display:flex; align-items:center; gap:16px;
  min-height:96px; padding:18px 18px 18px 20px; margin:0;
  background:var(--card); border:1px solid var(--borde); border-left:6px solid var(--acento);
  border-radius:var(--r-card); box-shadow:var(--sombra-1);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
body .tarjeta:hover, body .tarjeta:active{ transform:translateY(-4px); box-shadow:var(--sombra-2); background:var(--card); padding-left:20px; }
body .tarjeta.t-oficial { --acento:var(--color-comandos); --acento-suave:#e3eaf3; border-left-color:var(--color-comandos); }
body .tarjeta.t-n400    { --acento:var(--color-n400);     --acento-suave:#ece8f8; border-left-color:var(--color-n400); }
body .tarjeta.t-civismo { --acento:var(--color-civismo);  --acento-suave:#e1eef9; border-left-color:var(--color-civismo); }
body .tarjeta.t-lectura { --acento:var(--color-lectura);  --acento-suave:#e1f1e8; border-left-color:var(--color-lectura); }
body .tarjeta.t-examen  { --acento:var(--color-examen);   --acento-suave:#fbeedd; border-left-color:var(--color-examen); }
body .tarjeta.t-oath    { --acento:var(--color-oath);     --acento-suave:#f6edd3; border-left-color:var(--color-oath); }
body .tarjeta.t-progreso{ --acento:var(--color-progreso); --acento-suave:#e4ebf1; border-left-color:var(--color-progreso); }
body .tarjeta.tarjeta .icono{
  flex:0 0 56px; width:56px; height:56px; border-radius:16px; border:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--acento-suave); color:var(--acento);
  transition:transform .3s var(--ease), background .3s, color .3s;
}
body .tarjeta.tarjeta:hover .icono{ background:var(--acento); color:#fff; transform:rotate(-6deg) scale(1.06); }
body .tarjeta .icono svg{ width:28px; height:28px; }
body .tarjeta .texto h3{ line-height:1.25; font-size:1.08rem; font-weight:800; letter-spacing:-.01em; color:var(--texto); margin:0 0 4px; }
body .tarjeta .texto p{ font-size:.9rem; line-height:1.4; color:var(--texto-suave); margin:0; }
body .tarjeta .flecha{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--acento-suave); color:var(--acento); font-size:1.2rem; line-height:1;
  transition:transform .28s var(--ease), background .28s, color .28s;
}
body .tarjeta:hover .flecha{ transform:translateX(4px); background:var(--acento); color:#fff; }
@media (max-width:520px){
  body .tarjeta{ gap:12px; padding:16px 12px 16px 16px; min-height:88px; }
  body .tarjeta.tarjeta .icono{ flex-basis:48px; width:48px; height:48px; border-radius:14px; }
  body .tarjeta .icono svg{ width:24px; height:24px; }
  body .tarjeta .flecha{ width:28px; height:28px; font-size:1rem; }
}
#saludo{ font:700 1rem 'Public Sans',sans-serif; opacity:.95; margin:0 0 4px; }

/* ─── Las demás secciones: tarjetas, cajas y etiquetas ──────────────── */
body .p9-card, body .examen-card, body .intro-examen, body .resumen, body .clausula, body .repaso-wrap,
body .prog-card, body .panel-instrucciones{
  border-radius:var(--r-card); box-shadow:var(--sombra-1);
  border:1px solid var(--borde); border-top:5px solid var(--acento); background:var(--card);
}
body .p9-stem, body .p9-es, body .oficial-box, body .examen-instr, body .intro-nota, body .resumen-aviso,
body .resumen-lectura, body .resumen-escritura, body .oath-intro, body .oath-modificaciones,
body .oath-disclaimer, body .prog-nota-sesion, body .prog-frase, body .lectura-reporte{
  border-radius:var(--r-ctl); background:var(--acento-suave); border:0;
  border-left:4px solid var(--acento); padding:14px 16px;
}
body .resumen-escritura.ok, body .resumen-lectura.bien{ background:#e4f3ea; border-left-color:#17653a; }
body .resumen-escritura.mal{ background:#f9e8eb; border-left-color:var(--vino); }
body .btn-reporte-si, body .btn-reporte-no{
  border-radius:var(--r-ctl); border:1.5px solid var(--gris-borde); background:#fff; color:var(--texto);
  font:700 .95rem 'Public Sans',sans-serif; padding:14px 18px; cursor:pointer;
  transition:transform .2s var(--ease), border-color .2s, background .2s;
}
body .btn-reporte-si:hover{ background:#e4f3ea; border-color:#17653a; transform:translateY(-2px); }
body .btn-reporte-no:hover{ background:#fbeedd; border-color:var(--color-examen); transform:translateY(-2px); }
body .examen-respuesta, body .respuesta-escritura{
  border-radius:var(--r-ctl); border:1.5px solid var(--gris-borde); padding:14px 16px; background:#fff; font-size:1.05rem;
  transition:border-color .2s, box-shadow .2s;
}
body .examen-respuesta:focus, body .respuesta-escritura:focus{ border-color:var(--acento); box-shadow:0 0 0 4px var(--acento-suave); outline:0; }

body .p9-label, body .le-titulo, body .intro-titulo, body .resumen-titulo, body .resumen-lbl,
body .prog-titulo, body .examen-progreso, body .sesion-conteo, body .repro-conteo, body .prog-cat-label{
  font:600 .76rem 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-suave);
}
body .oracion-grande, body .examen-lectura-oracion, body .clausula-en, body .examen-pregunta, body .p9-en{
  font-size:clamp(1.3rem,2.8vw,1.7rem); font-weight:800; line-height:1.28; letter-spacing:-.015em; color:var(--texto);
}

/* Modo Examen: cronómetro con barra de tiempo (la rellena estudio-ui.js) */
body .examen-barra{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:0; padding-bottom:14px; margin-bottom:16px; background:transparent; }
body .examen-barra::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; border-radius:6px; background:var(--borde); }
body .examen-barra::after{
  content:""; position:absolute; left:0; bottom:0; height:6px; border-radius:6px; z-index:1;
  width:calc(var(--pct, 100) * 1%); background:var(--acento); transition:width 1s linear, background .4s;
}
body .examen-timer{
  border-radius:var(--r-ctl); background:#fff; border:1.5px solid var(--gris-borde);
  font:500 1.5rem 'IBM Plex Mono',ui-monospace,monospace; padding:6px 16px; color:var(--texto);
}
body .examen-timer.urgente{ color:var(--vino); border-color:var(--vino); animation:pulso 1s ease-in-out infinite; }
body .examen-barra:has(.urgente)::after{ background:var(--vino); }
@keyframes pulso{ 50%{ background:#f9e8eb; } }

body .prog-general, body .prog-hist{ border:0; box-shadow:none; background:transparent; border-radius:0; padding-left:0; padding-right:0; }
body .oath-disclaimer, body .oath-disclaimer *{ font-family:'Public Sans',system-ui,sans-serif; font-size:.98rem; line-height:1.55; }

/* Progreso: barras redondeadas que crecen, cifras con peso */
body .prog-barra{ height:12px; border-radius:12px; background:var(--navy-soft); overflow:hidden; }
body .prog-barra > span{ display:block; height:100%; border-radius:12px; background:var(--acento); transform-origin:left; animation:crece 1s var(--ease) both; }
@keyframes crece{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
body .prog-pct, body .resumen-num{ font:800 3rem 'Public Sans',sans-serif; letter-spacing:-.03em; color:var(--acento); border-radius:0; }
body .prog-chip{ border-radius:999px; font:700 .78rem 'Public Sans',sans-serif; padding:5px 12px; background:var(--acento-suave); color:var(--acento); border:0; }
body .prog-chip.ok{ background:#e4f3ea; color:#17653a; }
body .prog-chip.mal{ background:#f9e8eb; color:var(--vino); }
body .prog-cat-num{ font:600 .9rem 'IBM Plex Mono',monospace; border-radius:0; }

body .clausula-num{ border-radius:50%; background:var(--acento); color:#fff; border:0; font:800 .9rem 'Public Sans',sans-serif; }

/* ─── Bienvenida y barra de marca ───────────────────────────────────── */
body .site-logo-bar{ background:var(--azul-900); border-bottom:0; }
body .site-logo, body .site-logo-txt{ color:#eef2f7; }
body .site-logo-bar-inner{ max-width:var(--ancho-tarjeta); }
.marca-sitio{ flex:none; opacity:.92; }
body .cabecera-bienvenida{ background:var(--azul-900) var(--foto) var(--pos) / cover no-repeat; }
body .ba-card, body .bienvenida-audio{ border-radius:var(--r-card); box-shadow:var(--sombra-1); background:#fff; }
body .ba-aviso{ background:#f9e8eb; border:0; border-left:4px solid var(--vino); border-radius:var(--r-ctl); padding:14px 16px; }
body .ba-escuchar{
  border-radius:var(--r-ctl); background:var(--vino); color:#fff; border:0;
  font:700 .98rem 'Public Sans',sans-serif; letter-spacing:0; text-transform:none; padding:14px 22px;
  box-shadow:0 10px 22px -10px rgba(124,28,44,.7); cursor:pointer;
  transition:transform .2s var(--ease), background .2s;
}
body .ba-escuchar:hover{ transform:translateY(-2px); background:var(--vino-oscuro); }
body .ba-ico{ border-radius:16px; }

/* ─── Movimiento al aparecer (lo activa estudio-ui.js) ──────────────── */
.js .rev{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:var(--d,0ms); }
.js .rev.in{ opacity:1; transform:none; }
.js body .cabecera h1, .js body .cabecera p{ animation:aparece .7s var(--ease) both; }
.js body .cabecera p{ animation-delay:.1s; }
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .js .rev{ opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PANEL — menú agrupado (oct-2026)
   Resumen de la sesión arriba, cuatro grupos numerados, una tarjeta
   destacada con foto para Civismo y tarjetas sobrias: baldosa gris azulada
   que se llena de azul marino al pasar, y el color de la sección sólo en el
   filo y en la letra.
   ═══════════════════════════════════════════════════════════════════════ */
body.sec-panel .contenedor{ max-width:1000px; }
body.sec-panel .cabecera{ min-height:290px; padding-bottom:66px; }
body.sec-panel .cabecera::after{ bottom:48px; }

.panel-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  background:#fff; border:1px solid var(--borde); border-radius:var(--r-card);
  box-shadow:var(--sombra-2); margin:-40px 0 6px; position:relative; z-index:3; overflow:hidden;
}
.stat{ display:flex; flex-direction:column; gap:6px; padding:18px 22px; border-right:1px solid var(--borde); min-width:0; }
.stat:last-child{ border-right:0; }
.stat-etq{ font:600 .68rem 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-suave); }
.stat-val{ display:flex; align-items:baseline; gap:6px; font:800 2.2rem/1 'Public Sans',sans-serif; letter-spacing:-.03em; color:var(--azul-900); }
.stat-val small{ font:500 .85rem 'IBM Plex Mono',monospace; letter-spacing:0; color:var(--texto-suave); }
.stat-barra{ height:6px; border-radius:6px; background:var(--navy-soft); overflow:hidden; }
.stat-barra span{ display:block; height:100%; border-radius:6px; background:var(--vino); transition:width 1.1s var(--ease); }
.stat-nota{ font-size:.78rem; color:var(--texto-suave); }
@media (max-width:560px){
  .panel-stats{ margin-top:-30px; }
  .stat{ padding:14px 12px; gap:5px; }
  .stat-val{ font-size:1.55rem; }
  .stat-etq{ font-size:.56rem; letter-spacing:.08em; }
  .stat-nota{ font-size:.68rem; }
}

.grupo{ margin:34px 0 0; }
.grupo-t{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font:700 .78rem 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--azul-900);
}
.grupo-t span{ color:var(--vino); }
.grupo-t::after{ content:""; flex:1; height:1px; background:var(--gris-borde); }

/* Banda de bienvenida */
.bienvenida-banda{
  display:flex; align-items:center; gap:16px; padding:18px 20px;
  background:var(--azul-900); color:#fff; text-decoration:none; border-radius:var(--r-card);
  box-shadow:var(--sombra-1); transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.bienvenida-banda:hover{ transform:translateY(-3px); box-shadow:var(--sombra-2); }
.bienvenida-banda .icono{
  flex:0 0 52px; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#fff;
}
.bienvenida-banda .icono svg{ width:26px; height:26px; }
.bienvenida-banda .texto{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.bienvenida-banda strong{ font-size:1.05rem; font-weight:800; }
.bienvenida-banda em{ font-style:normal; font-size:.9rem; opacity:.8; line-height:1.4; }
.boton-mini{
  flex:none; display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:var(--r-ctl);
  font:700 .9rem 'Public Sans',sans-serif; border:1.5px solid rgba(255,255,255,.55); color:#fff;
  transition:background .2s, border-color .2s;
}
.bienvenida-banda:hover .boton-mini{ background:#fff; color:var(--azul-900); border-color:#fff; }
@media (max-width:560px){ .bienvenida-banda{ flex-wrap:wrap; } .bienvenida-banda .boton-mini{ width:100%; justify-content:center; } }

/* Tarjetas sobrias del panel */
body.sec-panel .secciones{ gap:12px; margin:0; }
@media (min-width:760px){ body.sec-panel .secciones{ grid-template-columns:1fr 1fr; } }
body.sec-panel .tarjeta{
  border-left-width:4px; border-radius:14px; min-height:92px; padding:16px 18px 16px 16px;
}
body.sec-panel .tarjeta .num{
  position:absolute; top:10px; right:14px;
  font:600 .68rem 'IBM Plex Mono',monospace; letter-spacing:.1em; color:var(--acento); opacity:.7;
}
body.sec-panel .tarjeta.tarjeta .icono{
  flex-basis:52px; width:52px; height:52px; border-radius:14px;
  background:var(--navy-soft); color:var(--azul-900); border:1px solid var(--borde);
}
body.sec-panel .tarjeta.tarjeta:hover .icono{ background:var(--azul-900); color:#fff; border-color:var(--azul-900); transform:none; }
body.sec-panel .tarjeta .texto h3{ font-size:1.05rem; }
body.sec-panel .tarjeta .flecha{ background:transparent; color:var(--acento); font-size:1.35rem; width:30px; }
body.sec-panel .tarjeta:hover .flecha{ background:transparent; color:var(--vino); transform:translateX(5px); }
@media (max-width:520px){
  body.sec-panel .tarjeta.tarjeta .icono{ flex-basis:46px; width:46px; height:46px; }
}

/* Tarjeta destacada con foto */
.destacada{
  position:relative; display:block; isolation:isolate; overflow:hidden; margin:0 0 12px;
  border-radius:20px; color:#fff; text-decoration:none; box-shadow:var(--sombra-2);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.destacada:hover{ transform:translateY(-4px); box-shadow:0 4px 8px rgba(10,27,48,.12), 0 22px 44px rgba(10,27,48,.2); }
.destacada-foto{
  position:absolute; inset:0; z-index:-2;
  background:var(--azul-900) url("../images/portada/capitolio-escaleras-movil.webp") 50% 55% / cover no-repeat;
  transition:transform 1s var(--ease);
}
@media (min-width:760px){ .destacada-foto{ background-image:url("../images/portada/capitolio-escaleras.webp"); } }
.destacada::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(8,22,40,.6); }
.destacada:hover .destacada-foto{ transform:scale(1.06); }
.destacada-cuerpo{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:30px 28px; min-height:250px; justify-content:flex-end; max-width:620px; }
.destacada-etq{ font:600 .7rem 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:#ecd9a8; }
.destacada h3{ margin:0; font-size:clamp(1.5rem,3.2vw,2.1rem); font-weight:800; letter-spacing:-.02em; line-height:1.12; color:#fff; }
.destacada p{ margin:0; opacity:.9; line-height:1.5; max-width:46ch; }
.destacada-meta{ font:500 .8rem 'IBM Plex Mono',monospace; letter-spacing:.04em; opacity:.9; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.destacada-meta b{ font-weight:700; }
.destacada-meta i{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; }
.boton-mini.vino{ background:var(--vino); border-color:var(--vino); margin-top:6px; box-shadow:0 12px 24px -10px rgba(124,28,44,.9); }
.boton-mini.vino em{ font-style:normal; transition:transform .25s var(--ease); }
.destacada:hover .boton-mini.vino{ background:var(--vino-oscuro); border-color:var(--vino-oscuro); color:#fff; }
.destacada:hover .boton-mini.vino em{ transform:translateX(5px); }


/* ═══ DOCK de navegación (pantallas de estudio) ══════════════════════════
   Barra flotante con los accesos a las secciones; al pasar el cursor, los
   íconos se agrandan según la cercanía (la escala la calcula estudio-ui.js).
   Se inyecta por JS: si el script no carga, la página funciona igual. */
body.con-dock{ padding-bottom:104px; }
.dock{
  position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:70;
  display:flex; align-items:flex-end; gap:6px; padding:8px 10px;
  background:rgba(10,27,48,.96); border:1px solid rgba(238,242,247,.2); border-radius:22px;
  box-shadow:0 22px 44px -14px rgba(0,0,0,.6);
  animation:dock-entra .6s var(--ease) .3s both;
}
@keyframes dock-entra{ from{ transform:translate(-50%,140%); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } }
.dock[hidden], .dock.oculto{ display:none; }
.dock a{
  position:relative; display:flex; align-items:center; justify-content:center; flex:none;
  width:46px; height:46px; border-radius:14px; color:#c9d4e6; background:rgba(255,255,255,.06); text-decoration:none;
  transform:scale(var(--s,1)); transform-origin:50% 100%; transition:transform .12s ease-out, background .2s, color .2s;
}
.dock a svg{ width:24px; height:24px; }
.dock a:hover, .dock a:focus-visible{ background:rgba(255,255,255,.16); color:#fff; }
.dock a[aria-current="page"]{ background:var(--acento, #7c1c2c); color:#fff; }
.dock a[aria-current="page"]::after{ content:""; position:absolute; bottom:-6px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#fff; }
.dock a::before{
  content:attr(data-label); position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(4px);
  padding:6px 10px; border-radius:8px; background:#fff; color:var(--azul-900); font:600 .78rem 'Public Sans',sans-serif; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
}
.dock a:hover::before, .dock a:focus-visible::before{ opacity:1; transform:translateX(-50%); }
@media (max-width:520px){
  .dock{ gap:3px; padding:7px 8px; border-radius:20px; }
  .dock a{ width:40px; height:40px; border-radius:12px; }
  .dock a svg{ width:22px; height:22px; }
  .dock a::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .dock{ animation:none; } .dock a{ transition:none; transform:none !important; } }


/* Miniatura por tema en la tarjeta de pregunta (la pone tema-imagen.js) */
.tema-img{ float:right; width:96px; height:96px; object-fit:cover; border-radius:18px; margin:2px 0 10px 16px;
  box-shadow:0 10px 22px -10px rgba(10,27,48,.45); border:3px solid #fff; background:var(--azul-claro); }
.cara-frente .fila-audio{ clear:both; }
@media (max-width:520px){ .tema-img{ width:72px; height:72px; border-radius:14px; margin-left:12px; } }


/* Botón de sonidos de acierto/error: icono + etiqueta, para que se entienda qué hace */
body .btn-silenciar{ width:auto; height:auto; min-height:46px; padding:0 14px; gap:8px; display:inline-flex; align-items:center; font:600 .85rem 'Public Sans',sans-serif; }
body .btn-silenciar .sil-txt{ white-space:nowrap; }
body .btn-silenciar[aria-pressed="true"]{ color:var(--vino); border-color:var(--vino); background:#f9e8eb; }


/* Civismo: Escuchar + velocidad, pequeños y al pie de la tarjeta (bajo las respuestas) */
body.sec-civismo .opciones{ clear:both; }
body.sec-civismo .cara-frente .fila-audio{
  clear:both; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px;
  margin:20px 0 0; padding-top:14px; border-top:1px solid var(--borde);
}
body.sec-civismo .fila-audio .btn-bocina{
  flex:0 0 auto; order:0; padding:6px 14px; min-height:36px; font-size:.82rem; gap:7px; box-shadow:none; border-radius:10px;
}
body.sec-civismo .fila-audio .btn-bocina svg{ width:15px; height:15px; }
body.sec-civismo .fila-audio .velocidad{ flex:0 0 auto; order:0; border-radius:10px; }
body.sec-civismo .fila-audio .velocidad button{ flex:0 0 auto; padding:5px 10px; min-height:34px; font-size:.76rem; }


/* ═══════════════════════════════════════════════════════════════════════
   SISTEMA SOBRIO v3 (oct-2026) — sustituye el aspecto de "colores por sección"
   ───────────────────────────────────────────────────────────────────────
   Una sola paleta (azul marino, papel crema, un acento vino), serif en los
   titulares, y las ilustraciones en grabado como protagonistas. La identidad
   de cada sección la da su ilustración, no un color distinto.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:300 700; font-display:swap; src:url("../fonts/fraunces-var.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:italic; font-weight:300 600; font-display:swap; src:url("../fonts/fraunces-italic-400.woff2") format("woff2"); }

:root{
  --papel:#f6f2e9; --papel-2:#efe8d9; --tarjeta:#fffdf9;
  --tinta:#14253d; --tinta-2:#55637a;
  --linea:rgba(20,37,61,.13); --linea-fuerte:rgba(20,37,61,.3);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
}
body[class*="sec-"]{
  --acento:#1d3f63; --acento-suave:#e9e3d5;
  --pagina:var(--papel); --texto:var(--tinta); --texto-suave:var(--tinta-2); --borde:var(--linea); --gris-borde:var(--linea-fuerte);
}
body.sec-panel{ --cab:url("../images/cabeceras/panel.webp"); }
body.sec-bienvenida{ --cab:url("../images/cabeceras/bienvenida.webp"); }
body.sec-civismo{ --cab:url("../images/cabeceras/civismo.webp"); }
body.sec-comandos{ --cab:url("../images/cabeceras/comandos.webp"); }
body.sec-n400{ --cab:url("../images/cabeceras/n400.webp"); }
body.sec-lectura{ --cab:url("../images/cabeceras/lectura.webp"); }
body.sec-examen{ --cab:url("../images/cabeceras/examen.webp"); }
body.sec-oath{ --cab:url("../images/cabeceras/oath.webp"); }
body.sec-progreso{ --cab:url("../images/cabeceras/progreso.webp"); }
body[class*="sec-"]{ background:var(--papel); color:var(--tinta); }

/* ─── Cabecera: papel crema con la ilustración a la derecha ─────────────── */
body .cabecera{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(200px,24vw,262px);
  padding:78px max(24px,calc((100% - 1040px)/2)) 34px;
  padding-right:calc(max(24px,(100% - 1040px)/2) + min(46%,500px));
  background:var(--papel-2); color:var(--tinta);
  border-radius:0; box-shadow:none; border-bottom:1px solid var(--linea);
}
body .cabecera::before{
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:auto; right:max(12px,calc((100% - 1040px)/2)); width:min(48%,520px); inset-inline-start:auto;
  background:var(--cab) right center/contain no-repeat; mix-blend-mode:multiply;
}
body .cabecera::after{ content:none; }
body .cabecera h1{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.1; letter-spacing:-.015em;
  color:var(--tinta); text-shadow:none; max-width:20ch; margin:0 0 10px;
}
body .cabecera p{
  font:400 1rem/1.5 "Public Sans",system-ui,sans-serif; letter-spacing:0; text-transform:none; color:var(--tinta-2); opacity:1; max-width:44ch;
}
body.sec-panel .cabecera, body.sec-bienvenida .cabecera{ min-height:clamp(220px,28vw,300px); padding-bottom:40px; }
body .btn-inicio{ background:transparent; border:1.5px solid var(--linea-fuerte); color:var(--tinta); }
body .btn-inicio:hover{ background:var(--tinta); color:#fff; border-color:var(--tinta); }
#saludo{ font:600 .95rem "Public Sans",sans-serif; color:var(--tinta-2); letter-spacing:0; margin:0 0 8px; }
#btn-salir{ color:var(--tinta) !important; border-color:var(--linea-fuerte) !important; background:transparent !important; }
#btn-salir:hover{ background:var(--tinta) !important; color:#fff !important; }
@media (max-width:720px){
  body .cabecera{ padding:70px 20px 8px; min-height:0; }
  body .cabecera::before{ position:relative; inset:auto; order:3; width:100%; height:150px; margin-top:14px; background-position:center; }
  body.sec-panel .cabecera, body.sec-bienvenida .cabecera{ padding-bottom:8px; }
}

/* ─── Tarjetas de estudio: papel, filo de tinta, serif ──────────────────── */
body .flashcard{ border:0; background:transparent; box-shadow:none; }
body .cara, body .p9-card, body .examen-card, body .intro-examen, body .resumen, body .prog-card, body .clausula, body .repaso-wrap, body .panel-instrucciones{
  background:var(--tarjeta); border:1px solid var(--linea); border-top:3px solid var(--tinta); border-radius:14px;
  box-shadow:0 1px 2px rgba(20,37,61,.05), 0 20px 44px -26px rgba(20,37,61,.28);
}
body .pastilla, body .pastilla.categoria{ background:var(--papel-2); color:var(--tinta-2); border:1px solid var(--linea); font-weight:600; }
body .pastilla.dificultad{ background:transparent; color:#7c1c2c; border:1px solid rgba(124,28,44,.35); }
body .pregunta-en, body .oracion-grande, body .orden-en, body .p9-en, body .examen-pregunta, body .examen-lectura-oracion, body .clausula-en{
  font-family:var(--serif); font-weight:600; letter-spacing:-.01em; color:var(--tinta);
}
body .num-pregunta, body .p9-label{ color:var(--tinta-2); }
body .opcion{ background:var(--tarjeta); border:1.5px solid var(--linea); }
body .opcion::before{ background:var(--papel-2); color:var(--tinta); }
body .opcion:hover{ border-color:var(--tinta); background:#fff; }
body .opcion:hover::before{ background:var(--tinta); color:#fff; }
body .opcion .elegir{ color:var(--tinta); }
body .bloque-correcta{ border-left-color:var(--tinta); }
body .bloque-correcta .txt{ font-family:var(--serif); font-weight:600; }
body .tambien, body .traduccion, body .p9-es, body .p9-stem{ background:var(--papel-2); border:0; border-left:3px solid var(--linea-fuerte); color:var(--tinta); }
body .btn-espanol, body .btn-ver-es{ color:var(--tinta); border-color:var(--linea-fuerte); }

/* Escuchar: botón de contorno (el relleno de color queda para la acción principal) */
body .btn-bocina{ background:transparent; color:var(--tinta); border:1.5px solid var(--linea-fuerte); box-shadow:none; }
body .btn-bocina:hover{ background:var(--papel-2); filter:none; }
body .btn-bocina.reproduciendo{ background:#7c1c2c; color:#fff; border-color:#7c1c2c; }
body .velocidad{ background:var(--tarjeta); }
body .velocidad button.activa{ background:var(--tinta); }
body .btn-siguiente, body .btn-examen-principal, body .btn-repaso, body .btn-principal-card, body .nav button.principal{ background:#7c1c2c; border:0; color:#fff; }
body .nav button{ background:var(--tarjeta); color:var(--tinta); border-color:var(--linea-fuerte); }
body .nav button.principal:hover:not(:disabled){ background:#5e1421; color:#fff; border-color:transparent; }
body .contador::after, body .prog-barra{ background:var(--papel-2); }
body .prog-barra > span{ background:var(--tinta); }
body .examen-barra::after{ background:var(--tinta); }
body .contador{ color:var(--tinta-2); }
body .nivel-btn{ border-left:5px solid var(--tinta); background:var(--tarjeta); }
body .nivel-conteo{ background:var(--papel-2); color:var(--tinta-2); }
body .seleccion-titulo{ font-family:var(--serif); font-weight:600; }
body .volver{ color:var(--tinta); }

/* Dock sobrio */
.dock{ background:rgba(20,37,61,.97); }
.dock a[aria-current="page"]{ background:#f6f2e9; color:var(--tinta); }
.dock a[aria-current="page"]::after{ background:#f6f2e9; }

/* ─── Panel: tarjetas con ilustración, sin letras ni colores sueltos ────── */
body.sec-panel .contenedor{ max-width:1040px; }
.bienvenida-fila{
  display:flex; align-items:center; gap:16px; padding:14px 18px; margin:26px 0 8px;
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:14px; text-decoration:none; color:var(--tinta);
  transition:border-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.bienvenida-fila:hover{ border-color:var(--tinta); transform:translateY(-2px); box-shadow:0 14px 28px -20px rgba(20,37,61,.4); }
.bf-ico{ flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--papel-2); color:var(--tinta); }
.bf-ico svg{ width:22px; height:22px; }
.bf-txt{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.bf-txt strong{ font-size:1rem; font-weight:700; }
.bf-txt em{ font-style:normal; font-size:.9rem; color:var(--tinta-2); line-height:1.4; }
.bf-btn{ flex:none; padding:9px 16px; border:1.5px solid var(--linea-fuerte); border-radius:10px; font-weight:700; font-size:.9rem; }
.bienvenida-fila:hover .bf-btn{ background:var(--tinta); color:#fff; border-color:var(--tinta); }
@media (max-width:560px){ .bienvenida-fila{ flex-wrap:wrap; } .bf-btn{ width:100%; text-align:center; } }

.panel-t{ font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-.015em; color:var(--tinta); margin:30px 0 4px; }
.panel-sub{ margin:0 0 22px; color:var(--tinta-2); }
.cartas{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.carta{
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:var(--tinta);
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:16px;
  box-shadow:0 1px 2px rgba(20,37,61,.05); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.carta:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -24px rgba(20,37,61,.38); border-color:var(--linea-fuerte); }
.carta-img{ display:block; background:var(--papel-2); aspect-ratio:3/2; overflow:hidden; }
.carta-img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform .8s var(--ease); }
.carta:hover .carta-img img{ transform:scale(1.05); }
.carta-cuerpo{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1; }
.carta-cuerpo h3{ margin:0; font-family:var(--serif); font-weight:600; font-size:1.25rem; line-height:1.2; letter-spacing:-.01em; }
.carta-cuerpo p{ margin:0; color:var(--tinta-2); font-size:.95rem; line-height:1.5; }
.carta-ir{ margin-top:auto; padding-top:8px; font-weight:700; font-size:.9rem; color:#7c1c2c; }
.carta-ir i{ font-style:normal; display:inline-block; transition:transform .25s var(--ease); }
.carta:hover .carta-ir i{ transform:translateX(5px); }
.carta-ancha{ grid-column:span 2; }
.carta-ancha .carta-img{ aspect-ratio:2.6/1; }
.carta-prog{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.carta-prog-barra{ height:6px; border-radius:6px; background:var(--papel-2); overflow:hidden; }
.carta-prog-barra span{ display:block; height:100%; border-radius:6px; background:var(--tinta); transition:width 1s var(--ease); }
.carta-prog-txt{ font-size:.85rem; color:var(--tinta-2); }
.carta-prog-txt b{ color:var(--tinta); }
@media (max-width:860px){ .cartas{ grid-template-columns:1fr 1fr; } .carta-ancha{ grid-column:span 2; } }
@media (max-width:560px){ .cartas{ grid-template-columns:1fr; } .carta-ancha{ grid-column:auto; } .carta-ancha .carta-img{ aspect-ratio:3/2; } }

/* ─── Ilustraciones dentro de las pantallas de estudio ───────────────────── */
.tema-img{ border:3px solid #fff; background:var(--papel-2); mix-blend-mode:normal; }
body .cara .orden-icono{ width:auto; height:auto; background:transparent; border:0; border-radius:0; margin:4px auto 12px; display:flex; justify-content:center; }
.orden-icono img{ display:block; width:168px; height:168px; border-radius:18px; object-fit:cover; border:3px solid #fff; box-shadow:0 14px 28px -16px rgba(20,37,61,.5); background:var(--papel-2); }
@media (max-width:520px){ .orden-icono img{ width:132px; height:132px; } }

/* El papel de las ilustraciones es #f6edda: la cabecera usa el mismo tono y el borde de la imagen desaparece */
body .cabecera{ background:#f6edda; }
body .cabecera::before{ mix-blend-mode:normal; }
#btn-salir{ background:rgba(246,237,218,.9) !important; }

/* Etiquetas neutras (las hojas viejas las pintaban de azul/morado según la sección) */
body .cabecera-tarjeta .pastilla.categoria, body .pastilla.categoria{ background:#efe8d9 !important; color:#3d4a60 !important; border:1px solid rgba(20,37,61,.13) !important; }
body .cabecera-tarjeta .pastilla.dificultad, body .pastilla.dificultad{ background:transparent !important; color:#7c1c2c !important; border:1px solid rgba(124,28,44,.35) !important; }