/* ══════════════════════════════════════════════════════════════════════
   CIUDADANÍA FÁCIL — SISTEMA INSTITUCIONAL
   ──────────────────────────────────────────────────────────────────────
   Referencias: Harvard Law School y Cravath (revisadas el 5-oct-2026).
   La lección de las dos: la autoridad NO viene del color de acento.
   Viene de un solo tono en muchos valores, serif grande, etiquetas
   diminutas en versalitas espaciadas, reglas finas y mucho aire.

   De ahí las reglas de esta hoja:
     · Un solo tono —azul marino— del papel a la noche.
     · Un solo acento —vino— y se usa poquísimo: etiquetas y acción.
     · NADA de oro. En un sitio de inmigración el oro disfraza de
       gobierno, y eso es justo lo que no queremos.
     · Reglas en vez de tarjetas. Sombras, ninguna.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Tipografía AUTOHOSPEDADA ───────────────────────────────────────────
   Antes pedía Fraunces, Instrument Sans y Martian Mono a Google Fonts. Un CDN
   de fuentes recibe la IP de cada visitante y welcome.css prometió no usarlos.
   Ahora las tres familias salen de /fonts/ (Fraunces e Instrument Sans, licencia
   SIL OFL; subconjunto latino, que cubre el español). Martian Mono se sustituye
   por IBM Plex Mono, que el proyecto ya autohospedaba. */
@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"); }
@font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/instrument-sans-var.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/plex-mono-400.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/plex-mono-500.woff2") format("woff2"); }



:root{
  /* UN SOLO TONO, MUCHOS VALORES — la escala del azul marino.
     El 900 sale del Old Glory Blue oficial (#041E42) llevado a noche. */
  --azul-900: #0a1b30;   /* noche: fondo de los bloques hondos */
  --azul-800: #112b47;
  --azul-700: #1d3f63;
  --azul-600: #35587e;
  --azul-400: #7d93af;
  --azul-200: #c3cedd;
  --azul-100: #e3e9f1;

  --papel:    #ffffff;
  --papel-2:  #f7f8fa;   /* secciones alternas, apenas perceptible */

  /* EL ÚNICO ACENTO. Toga, encuadernación jurídica, carmesí.
     Se usa en: etiquetas de sección, reglas de énfasis y el botón. */
  --vino:     #7c1c2c;
  /* El acento para fondo oscuro. #9b2438 daba 2.23:1 sobre el azul 900:
     ilegible y por debajo del 4.5:1 que pide la WCAG para texto chico.
     Un vino sólo llega a ese contraste si se aclara hasta rosa apagado;
     mismo tono (350°), menos saturación. Medido: 5.04:1. */
  --vino-vivo:#c9707f;

  /* Papel y tinta por omisión: la página va clara */
  --fondo:   var(--papel);
  --tinta:   var(--azul-900);
  --tinta-2: #55637a;
  --linea:   rgba(10,27,48,.14);
  --linea-2: rgba(10,27,48,.28);
  --acento:  var(--vino);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto:   "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dato:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ancho:  1120px;
  --estrecho: 760px;
  --riel:   84px;
}

/* Los bloques hondos invierten papel y tinta. Mismo tono, otro valor. */
.hondo{
  --fondo:   var(--azul-900);
  --tinta:   #eef2f7;
  --tinta-2: var(--azul-200);
  --linea:   rgba(238,242,247,.18);
  --linea-2: rgba(238,242,247,.36);
  --acento:  var(--vino-vivo);
  background:var(--fondo); color:var(--tinta);
}
/* Alterna clarísima, para separar sin romper el tono */
.tenue{ --fondo:var(--papel-2); background:var(--fondo); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ─── Riel de progreso ──────────────────────────────────────────────── */
.riel{ position:fixed; inset:0 auto 0 0; width:var(--riel); display:none; z-index:40; pointer-events:none; }
.riel__linea{ position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); background:var(--linea); }
.riel__avance{ position:absolute; left:50%; top:0; width:1px; height:0; transform:translateX(-50%); background:var(--acento); transition:height .12s linear; }
.riel__etapa{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  font-family:var(--dato); font-size:9px; letter-spacing:.16em;
  color:var(--tinta-2); background:var(--fondo); padding:8px 0;
  writing-mode:vertical-rl; text-transform:uppercase;
}
@media (min-width:1120px){ .riel{ display:block; } body{ padding-left:var(--riel); } }

/* ─── Barra ─────────────────────────────────────────────────────────── */
.barra{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 24px; background:var(--azul-900); color:#eef2f7;
  border-bottom:1px solid rgba(238,242,247,.14);
}
.barra__marca{
  display:flex; align-items:center; gap:11px;
  font-family:var(--display); font-weight:500; font-size:1.08rem;
  letter-spacing:.01em; text-decoration:none; color:inherit;
}
.barra__marca img{ width:28px; height:28px; border-radius:50%; }
.barra__enlaces{ display:none; gap:30px; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-family:var(--dato); }
.barra__enlaces a{ text-decoration:none; color:var(--azul-200); }
.barra__enlaces a:hover{ color:#fff; }
@media (min-width:980px){ .barra__enlaces{ display:flex; } }

/* ─── Botones ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; border:1px solid transparent; border-radius:0;
  font-family:var(--dato); font-size:.78rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--principal{ background:var(--vino); color:#fff; }
.btn--principal:hover{ background:#651623; }
.btn--linea{ border-color:var(--linea-2); color:var(--tinta); background:transparent; }
.btn--linea:hover{ border-color:var(--tinta); }
.btn--pequeno{ padding:11px 18px; font-size:.68rem; }

/* ─── Tipografía ────────────────────────────────────────────────────── */
.display{
  font-family:var(--display); font-weight:400;
  letter-spacing:-.012em; line-height:1.1; margin:0;
}
h1.display{ font-size:clamp(2.6rem,5.8vw,4.5rem); line-height:1.05; }
h2.display{ font-size:clamp(1.9rem,3.5vw,2.8rem); }
h3{ font-family:var(--display); font-weight:500; font-size:1.18rem; margin:0 0 8px; letter-spacing:-.005em; }

/* La etiqueta diminuta en versalitas: la única decoración del sistema */
.etiqueta{
  font-family:var(--dato); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--acento);
  margin:0 0 20px; display:block;
}
.etiqueta--centro{ text-align:center; }

.bajada{ font-size:clamp(1.05rem,1.4vw,1.18rem); color:var(--tinta-2); max-width:60ch; margin:22px 0 0; }
.dato{ font-family:var(--dato); font-variant-numeric:tabular-nums; }
.regla{ border:0; border-top:1px solid var(--linea); margin:0; }

/* ─── Rejilla ───────────────────────────────────────────────────────── */
.seccion{ padding:clamp(72px,10vw,150px) 24px; background:var(--fondo); color:var(--tinta); }
.wrap{ max-width:var(--ancho); margin:0 auto; }
.wrap--estrecho{ max-width:var(--estrecho); margin:0 auto; }
.cabeza{ max-width:64ch; margin-bottom:clamp(44px,6vw,76px); }
.cabeza--centro{ margin-left:auto; margin-right:auto; text-align:center; }

/* ─── Reveal ────────────────────────────────────────────────────────── */
.sube{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.sube.visible{ opacity:1; transform:none; }
.sube--b{ transition-delay:.09s; }
.sube--c{ transition-delay:.18s; }
@media (prefers-reduced-motion:reduce){ .sube{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ─── LOGOTIPO: una palabra, sin emblema ────────────────────────────
   Decidido contra el escudo a propósito. El de Harvard funciona porque
   es su escudo real de hace cuatro siglos; aquí un sello inventaría una
   autoridad que no tenemos, y en un sitio de inmigración eso es el
   riesgo equivocado. Cravath, el bufete más serio que miramos, no tiene
   emblema: tiene una palabra. Va compuesta en tipografía, no generada,
   porque así es nítida a cualquier tamaño y pesa cero. */
.logo{
  font-family:var(--display); font-weight:400; font-size:1.16rem;
  letter-spacing:.005em; text-decoration:none; color:inherit;
  display:inline-block; line-height:1;
}
.logo em{ font-style:italic; font-weight:400; color:#d97c8c; }
/* La marca: arquitectura civica a linea, sin el disco que la encerraba.
   Va en blanco porque la barra es azul 900; el svg usa currentColor. */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo__marca{ width:30px; height:30px; flex:none; opacity:.92; }
.logo--grande{ font-size:clamp(1.3rem,2.2vw,1.65rem); }

/* ─── Portada fotográfica (tratamiento Harvard) ─────────────────────── */
.portada{
  position:relative; isolation:isolate;
  min-height:clamp(560px,82vh,780px);
  display:flex; align-items:center;
  padding-top:clamp(80px,10vw,130px); padding-bottom:clamp(56px,7vw,96px);
  background:var(--azul-900); color:#fff;
  --tinta:#fff; --tinta-2:rgba(255,255,255,.82); --acento:#e8b9c2; --linea:rgba(255,255,255,.28);
}
.portada__foto{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.portada__foto img,
.portada__video{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }

/* Ya no hay foto de respaldo: el video va en todas las pantallas. El
   póster (un fotograma suyo) es lo que se ve mientras carga. */
.portada__video{ display:block; }
/* En vertical el recorte centrado se come a la persona de las escaleras,
   que es el sujeto de la foto. Se corre hacia ella. */
/* En vertical, cubrir una pantalla alta con una foto apaisada obliga a un
   acercamiento muy fuerte y la figura se come el encuadre. Se baja la
   altura del héroe para que la escena respire. */
@media (max-width:700px){
  .portada__foto img{ object-position:center 42%; }
}
/* El velo: sin él el titular blanco no se lee sobre el cielo claro. */
.portada__velo{
  position:absolute; inset:0; z-index:-1;
  /* El punto medio era .52. Medido contra el video: donde el cielo sale
     quemado (blanco puro) detras del texto, el blanco sobre ese velo daba
     3.57:1, por debajo del 4.5:1 que necesita el texto chico. El minimo
     calculado es .593; se deja .62 con algo de margen. La imagen se sigue
     viendo: sobre un pixel de brillo medio el contraste sube a 7:1. */
  background:
    linear-gradient(180deg, rgba(10,27,48,.80) 0%, rgba(10,27,48,.62) 38%, rgba(10,27,48,.88) 100%),
    linear-gradient(90deg, rgba(10,27,48,.4) 0%, rgba(10,27,48,0) 60%);
}
.portada__centro{ max-width:900px; margin:0 auto; text-align:center; }
.portada__credito{
  position:absolute; right:18px; bottom:14px; z-index:1;
  font-family:var(--dato); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.portada .btn--linea{ border-color:rgba(255,255,255,.5); color:#fff; }
.portada .btn--linea:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

/* El ascenso. Una foto no puede hacer caminar a nadie: lo que se mueve
   es la cámara. Sube y se acerca, de modo que las escaleras bajan por el
   encuadre y la figura parece ganar altura. Va y vuelve sin fin (20s por
   tramo) para que el movimiento no se acabe mientras se lee. */
@keyframes asciende{
  from{ transform:scale(1.03) translateY(1.4%); }
  to  { transform:scale(1.12) translateY(-2.6%); }
}
.portada__foto img{ animation:asciende 20s ease-in-out infinite alternate; will-change:transform; }
@media (prefers-reduced-motion:reduce){ .portada__foto img{ animation:none; } }

/* Tira de cifras: reglas, no cajas */
.cifras{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(48px,6vw,80px); border-top:1px solid var(--linea); }
.cifra{ padding:28px 14px 0; text-align:center; }
.cifra + .cifra{ border-left:1px solid var(--linea); }
.cifra__n{ font-family:var(--dato); font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:500; display:block; line-height:1; }
.cifra__t{ font-size:.76rem; color:var(--tinta-2); margin-top:12px; display:block; line-height:1.5; }
/* En teléfono tres columnas parten los números en dos líneas ("12 /
   20"). Se apilan, y la regla pasa de vertical a horizontal. */
@media (max-width:560px){
  .cifras{ grid-template-columns:1fr; }
  .cifra{ padding:20px 0; }
  .cifra + .cifra{ border-left:0; border-top:1px solid var(--linea); }
  .cifra__t{ margin-top:8px; }
}

/* ─── Sumario: el índice del documento ──────────────────────────────── */
.sumario{ border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.sumario a{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:baseline;
  padding:17px 0; border-bottom:1px solid var(--linea); text-decoration:none;
  transition:padding-left .2s ease;
}
.sumario a:last-child{ border-bottom:0; }
.sumario a:hover{ padding-left:10px; }
.sumario .n{ font-family:var(--dato); font-size:.72rem; color:var(--acento); letter-spacing:.08em; }
.sumario .t{ font-family:var(--display); font-size:1.08rem; }
.sumario .f{ font-family:var(--dato); font-size:.7rem; color:var(--tinta-2); letter-spacing:.08em; }

/* ─── Partes numeradas ──────────────────────────────────────────────── */
.parte{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(30px,4vw,48px); }
.parte__n{ font-family:var(--dato); font-size:.72rem; letter-spacing:.2em; color:var(--acento); }
.parte__l{ flex:1; height:1px; background:var(--linea); }

/* ─── Etapas ────────────────────────────────────────────────────────── */
.etapas{ border-top:1px solid var(--linea); }
.etapa{ display:grid; gap:6px 32px; padding:30px 0; border-bottom:1px solid var(--linea); grid-template-columns:auto 1fr; }
@media (min-width:800px){ .etapa{ grid-template-columns:64px 1.1fr 1.4fr; align-items:start; } }
.etapa__n{ font-family:var(--dato); font-size:.78rem; color:var(--tinta-2); padding-top:5px; letter-spacing:.06em; }
.etapa__t{ font-family:var(--display); font-weight:500; font-size:1.22rem; }
.etapa__d{ color:var(--tinta-2); font-size:.96rem; grid-column:1/-1; margin:0; }
@media (min-width:800px){ .etapa__d{ grid-column:3; } }
.marca{
  display:inline-block; font-family:var(--dato); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acento); border:1px solid currentColor;
  padding:3px 7px; margin-left:12px; vertical-align:3px;
}

/* ─── Columnas de texto (reglas, no tarjetas) ───────────────────────── */
.columnas{ display:grid; gap:0; border-top:1px solid var(--linea); }
@media (min-width:820px){ .columnas--3{ grid-template-columns:repeat(3,1fr); } }
.columna{ padding:30px 0; border-bottom:1px solid var(--linea); }
@media (min-width:820px){
  .columna{ padding:34px 32px 34px 0; border-bottom:0; }
  .columna + .columna{ border-left:1px solid var(--linea); padding-left:32px; }
}
.columna p{ color:var(--tinta-2); margin:0; font-size:.95rem; }

/* ─── Lista numerada de contenido ───────────────────────────────────── */
.incluye{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linea); }
.incluye li{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding:22px 0; border-bottom:1px solid var(--linea); align-items:baseline; }
.incluye .n{ font-family:var(--dato); font-size:.72rem; color:var(--tinta-2); letter-spacing:.08em; }
.incluye strong{ font-family:var(--display); font-weight:500; font-size:1.06rem; display:block; margin-bottom:4px; }
.incluye span.d{ color:var(--tinta-2); font-size:.93rem; }

/* Bloque a dos columnas: argumento a la izquierda, lista a la derecha */
@media (min-width:900px){
  .columnas-aviso{ grid-template-columns:1fr 1fr; align-items:start; }
}

/* ─── Lista con regla lateral ───────────────────────────────────────── */
.lista{ list-style:none; margin:0; padding:0; }
.lista li{ padding:16px 0 16px 26px; border-bottom:1px solid var(--linea); position:relative; color:var(--tinta-2); font-size:.97rem; }
.lista li::before{ content:""; position:absolute; left:0; top:26px; width:12px; height:1px; background:var(--acento); }

/* ─── Precio ────────────────────────────────────────────────────────── */
.precio{ display:grid; gap:clamp(32px,5vw,64px); align-items:start; }
@media (min-width:900px){ .precio{ grid-template-columns:1fr 1fr; } }
.precio__caja{ border-top:2px solid var(--acento); padding-top:30px; }
.precio__n{ font-family:var(--dato); font-size:clamp(2.8rem,6vw,4rem); font-weight:500; line-height:1; letter-spacing:-.02em; display:block; }
.precio__p{ font-family:var(--dato); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); margin:16px 0 0; }

/* ─── Preguntas ─────────────────────────────────────────────────────── */
.preguntas{ border-top:1px solid var(--linea); }
.pregunta{ border-bottom:1px solid var(--linea); padding:28px 0; }
.pregunta p{ color:var(--tinta-2); margin:0; font-size:.96rem; max-width:70ch; }

/* ─── Fuentes: la sección que construye confianza de verdad ─────────── */
.fuentes{ font-size:.9rem; }
.fuentes dt{ font-family:var(--dato); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); padding-top:20px; border-top:1px solid var(--linea); }
.fuentes dd{ margin:8px 0 22px; color:var(--tinta); }

/* ─── Pie ───────────────────────────────────────────────────────────── */
.pie{ padding:64px 24px 48px; background:var(--azul-900); color:var(--azul-200); font-size:.88rem; }
.pie a{ color:#eef2f7; text-decoration:none; }
.pie a:hover{ text-decoration:underline; }
.pie__nav{ display:flex; flex-wrap:wrap; gap:16px 30px; margin-bottom:28px; font-family:var(--dato); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; }
/* ─── Largo de línea y áreas táctiles ────────────────────────────────
   Medido con el ancho real del carácter: el texto corrido llegaba a 72-73
   caracteres por renglón, dentro de lo cómodo. El tope de 68 es sólo un
   seguro para pantallas anchas, no arregla nada que estuviera roto.

   Lo que sí estaba mal eran los enlaces: 20px de alto, menos de los 44px
   que hacen falta para tocarlos con el pulgar, y este sitio se usa sobre
   todo desde el teléfono. */
.etapa__d, .columna p, .incluye span.d{ max-width:68ch; }
.pie__nav{ gap:4px 30px !important; }
.pie__nav a, .barra__enlaces a, .barra .logo, .barra .btn--pequeno{
  display:inline-flex; align-items:center; min-height:44px;
}

.pie__legal{ border-top:1px solid rgba(238,242,247,.16); padding-top:24px; margin:0; max-width:76ch; line-height:1.7; }

/* ─── El quiz heredado, vestido de institucional ─────────────────────
   quiz-landing.js construye el DOM y civismo.css lo pinta. Esa hoja la
   COMPARTE el modo de estudio, así que no se toca: todo lo de aquí va
   acotado a .lp-quiz-civismo, que sólo existe en esta portada. */
.lp-quiz-civismo{ max-width:760px; margin:0 auto; }

/* Contador: deja de ser un texto suelto y pasa a ser etiqueta de dato */
.lp-quiz-civismo .contador{
  font-family:var(--dato); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tinta-2); font-weight:400;
  margin-bottom:18px; text-align:left;
}

/* La tarjeta: fuera esquinas redondas, sombra y el filo azul grueso */
.lp-quiz-civismo .flashcard,
.lp-quiz-civismo .cara{
  border-radius:0 !important; box-shadow:none !important;
  border:1px solid var(--linea) !important; border-left-width:1px !important;
  background:var(--papel) !important;
}
.lp-quiz-civismo .cara-cuerpo{ padding:clamp(22px,3vw,34px) !important; }

/* Las pastillas pasan a ser marcas cuadradas de versalitas */
.lp-quiz-civismo .pastilla{
  border-radius:0 !important; background:transparent !important;
  border:1px solid var(--linea-2) !important;
  font-family:var(--dato) !important; font-size:9px !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  padding:4px 9px !important; color:var(--tinta-2) !important; font-weight:400 !important;
}
.lp-quiz-civismo .pastilla.dificultad{ color:var(--acento) !important; border-color:currentColor !important; }

/* El número de pregunta se achica: el contador ya lo dice */
.lp-quiz-civismo .num-pregunta{
  font-family:var(--dato) !important; font-size:10px !important;
  letter-spacing:.18em !important; text-transform:uppercase !important;
  color:var(--tinta-2) !important; font-weight:400 !important; margin:18px 0 10px !important;
}

/* La pregunta es lo único grande de la tarjeta, y va en serif */
.lp-quiz-civismo .pregunta-en{
  font-family:var(--display) !important; font-weight:400 !important;
  font-size:clamp(1.3rem,2.6vw,1.72rem) !important; line-height:1.22 !important;
  letter-spacing:-.01em !important; color:var(--tinta) !important; margin:0 0 22px !important;
}

/* Controles de audio: rectos, en mono */
.lp-quiz-civismo .btn-bocina{
  border-radius:0 !important; background:var(--azul-900) !important; color:#fff !important;
  font-family:var(--dato) !important; font-size:.68rem !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  padding:11px 18px !important; border:1px solid var(--azul-900) !important;
}
.lp-quiz-civismo .velocidad{ border-radius:0 !important; border:1px solid var(--linea-2) !important; overflow:hidden; }
.lp-quiz-civismo .velocidad button{
  border-radius:0 !important; font-family:var(--dato) !important;
  font-size:.66rem !important; letter-spacing:.06em !important; padding:11px 13px !important;
  color:var(--tinta-2) !important; background:transparent !important;
}
.lp-quiz-civismo .velocidad button.activa{ background:var(--azul-900) !important; color:#fff !important; }
.lp-quiz-civismo .btn-silenciar{
  border-radius:0 !important; border:1px solid var(--linea-2) !important;
  color:var(--tinta-2) !important; background:transparent !important;
}

/* "Ver en español" deja de ser botón y pasa a ser un enlace con regla */
.lp-quiz-civismo .btn-espanol{
  border-radius:0 !important; border:0 !important; border-bottom:1px solid var(--acento) !important;
  background:transparent !important; color:var(--acento) !important;
  font-family:var(--dato) !important; font-size:.66rem !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  padding:0 0 4px !important; margin:16px 0 0 !important;
}

/* Las respuestas: filas separadas por reglas, no cajas grises redondas */
.lp-quiz-civismo .opciones{ margin-top:26px !important; border-top:1px solid var(--linea); }
.lp-quiz-civismo .opcion{
  gap:10px !important; border-bottom:1px solid var(--linea) !important;
  padding:0 !important; background:transparent !important; border-radius:0 !important;
}
.lp-quiz-civismo .opcion .elegir{
  border-radius:0 !important; background:transparent !important;
  border:0 !important; text-align:left !important;
  padding:17px 8px 17px 0 !important; font-weight:500 !important;
  font-family:var(--texto) !important; font-size:1rem !important; color:var(--tinta) !important;
  transition:padding-left .18s ease, color .18s ease;
}
.lp-quiz-civismo .opcion .elegir:hover{ padding-left:10px !important; color:var(--acento) !important; }
.lp-quiz-civismo .audio-resp{
  border-radius:0 !important; background:transparent !important;
  border:1px solid var(--linea) !important; color:var(--tinta-2) !important;
}

/* El contador lleva su propia regla: lo ata a la retícula de la página
   igual que las cabeceras de Parte I–VII, en vez de flotar suelto. */
.lp-quiz-civismo .contador{
  display:flex; align-items:center; gap:16px;
  margin-bottom:14px !important;
}
.lp-quiz-civismo .contador::after{
  content:""; flex:1; height:1px; background:var(--linea);
}

/* Filo superior grueso: la tarjeta se lee como pieza de documento, no
   como caja flotante. Es el mismo recurso que usan las cabeceras de
   sección. */
.lp-quiz-civismo .cara{ border-top:2px solid var(--azul-900) !important; }

/* --- Las respuestas ---------------------------------------------------
   Antes eran tres renglones de texto separados por una línea: nada decía
   que fueran elegibles. Se les pone letra A/B/C en mono —la misma familia
   que los números romanos de las partes— para que se lean como opciones
   de un formulario y no como una lista cualquiera. */
.lp-quiz-civismo .opciones{ counter-reset:op; }
.lp-quiz-civismo .opcion{
  counter-increment:op;
  align-items:stretch !important;
  transition:background .18s ease;
}
.lp-quiz-civismo .opcion::before{
  content:counter(op, upper-alpha);
  flex:none; width:38px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--dato); font-size:.72rem; color:var(--tinta-2);
  border-right:1px solid var(--linea);
  transition:background .18s ease, color .18s ease;
}
.lp-quiz-civismo .opcion:hover{ background:var(--papel-2) !important; }
.lp-quiz-civismo .opcion:hover::before{ background:var(--acento); color:#fff; border-right-color:var(--acento); }
.lp-quiz-civismo .opcion .elegir{ padding-left:14px !important; flex:1; }
.lp-quiz-civismo .opcion .elegir:hover{ padding-left:14px !important; }

/* La bocina de cada respuesta estaba tan marcada como la respuesta misma.
   Se apaga hasta que el cursor entra en la fila. */
.lp-quiz-civismo .audio-resp{
  border:0 !important; opacity:.3;
  transition:opacity .18s ease, color .18s ease;
}
.lp-quiz-civismo .opcion:hover .audio-resp{ opacity:1; }
.lp-quiz-civismo .audio-resp:hover{ color:var(--acento) !important; opacity:1; }

/* --- La cara de atrás --------------------------------------------------
   Es la que más tiempo mira quien estudia y era la que seguía vestida con
   la hoja vieja: rótulo de color, caja redondeada y gris. */
.lp-quiz-civismo .resultado{
  border-radius:0 !important; background:transparent !important;
  padding:0 0 14px !important; margin:0 0 18px !important;
  border-bottom:1px solid var(--linea) !important;
  font-family:var(--dato) !important; font-weight:400 !important;
  font-size:.74rem !important; letter-spacing:.16em !important;
  text-transform:uppercase !important; text-align:left !important;
}
.lp-quiz-civismo .resultado.ok{ color:var(--azul-700) !important; }
.lp-quiz-civismo .resultado.mal{ color:var(--acento) !important; }
.lp-quiz-civismo .elegiste{
  font-size:.92rem !important; color:var(--tinta-2) !important; margin:0 0 16px !important;
}

/* El bloque de la respuesta correcta es el ancla visual de la cara */
.lp-quiz-civismo .bloque-correcta{
  border-radius:0 !important; background:transparent !important;
  border:0 !important; border-top:2px solid var(--azul-900) !important;
  padding:14px 0 0 !important; margin:0 0 18px !important;
}
.lp-quiz-civismo .bloque-correcta .etq{
  font-family:var(--dato) !important; font-size:10px !important;
  letter-spacing:.18em !important; text-transform:uppercase !important;
  color:var(--tinta-2) !important; font-weight:400 !important;
}
.lp-quiz-civismo .bloque-correcta .txt{
  font-family:var(--display) !important; font-weight:400 !important;
  font-size:clamp(1.2rem,2.4vw,1.55rem) !important; line-height:1.3 !important;
  color:var(--tinta) !important; margin-top:6px !important;
}
.lp-quiz-civismo .explicacion{
  font-size:1rem !important; line-height:1.68 !important;
  color:var(--tinta) !important; margin:0 0 12px !important;
}
.lp-quiz-civismo .tambien{
  font-size:.9rem !important; color:var(--tinta-2) !important;
  border-left:2px solid var(--linea-2); padding-left:12px; margin:0 !important;
}
.lp-quiz-civismo .btn-siguiente{
  border-radius:0 !important; background:var(--vino) !important;
  border:1px solid var(--vino) !important; color:#fff !important;
  font-family:var(--dato) !important; font-size:.7rem !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  padding:15px 26px !important; margin-top:24px !important; width:auto !important;
}

/* --- La pantalla de resultado ------------------------------------------ */
.lq-resultado{
  background:var(--papel); border:1px solid var(--linea);
  border-top:2px solid var(--azul-900);
  padding:clamp(30px,4vw,48px) !important; text-align:center;
}
.lq-res-resp{
  font-family:var(--dato); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tinta-2); margin:0 0 10px !important;
}
.lq-res-num{
  font-family:var(--display) !important; font-weight:400 !important;
  font-size:clamp(1.7rem,4vw,2.5rem) !important; line-height:1.15 !important;
  color:var(--tinta) !important; margin:0 0 10px !important;
}
.lq-res-msg{ color:var(--tinta-2) !important; font-size:1rem !important; margin:0 0 26px !important; }
.lq-res-cta{
  display:inline-block; border-radius:0 !important;
  background:var(--vino) !important; color:#fff !important; text-decoration:none;
  font-family:var(--dato) !important; font-size:.72rem !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  padding:16px 30px !important;
}
.lq-reintentar{
  display:block; margin:18px auto 0; background:none !important; border:0 !important;
  color:var(--tinta-2) !important; cursor:pointer;
  font-family:var(--dato) !important; font-size:.68rem !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  border-bottom:1px solid var(--linea-2) !important; padding:0 0 3px !important;
}
.lq-reintentar:hover{ color:var(--acento) !important; border-bottom-color:var(--acento) !important; }

@media (max-width:520px){
  .lp-quiz-civismo .opcion::before{ width:30px; font-size:.66rem; }
  .lp-quiz-civismo .nav{ display:grid !important; grid-template-columns:1fr 1fr; }
}

/* Navegación inferior: los mismos botones que el resto de la página */
.lp-quiz-civismo .nav{ margin-top:24px !important; gap:12px !important; }
.lp-quiz-civismo .nav button{
  border-radius:0 !important; font-family:var(--dato) !important;
  font-size:.7rem !important; letter-spacing:.12em !important; text-transform:uppercase !important;
  padding:15px 24px !important; border:1px solid var(--linea-2) !important;
  background:transparent !important; color:var(--tinta) !important;
}
.lp-quiz-civismo .nav button.principal{
  background:var(--vino) !important; border-color:var(--vino) !important; color:#fff !important;
}



/* ─── Video "Lo que cambia cuando eres ciudadano" (dentro de la Parte III, que es oscura) ─── */
.vvideo{ margin-top:clamp(56px,7vw,96px); }
.vvideo__cab{ max-width:64ch; margin:0 auto 28px; text-align:center; }
.vvideo__cab .etiqueta{ color:var(--vino-vivo); background:transparent; border:0; }
.vvideo__cab .display{ color:#fff; font-size:clamp(1.5rem,2.8vw,2.1rem); margin-top:8px; }
.vvideo__marco{ max-width:960px; margin:0 auto; border:1px solid rgba(238,242,247,.18); border-top:4px solid var(--vino-vivo); box-shadow:0 40px 80px -40px rgba(0,0,0,.8); background:#000; }
.vvideo__marco video{ display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; }
.vvideo__ctl{ max-width:960px; margin:18px auto 0; display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:center; }
.vvideo__ctl > div{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.vvideo__ctl span{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#9fb0cc; margin-right:6px; font-family:var(--dato, ui-monospace, monospace); }
.vvideo__ctl button{ background:transparent; border:1px solid rgba(238,242,247,.4); color:#eef2f7; padding:10px 16px; min-height:44px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:0; font-family:var(--dato, ui-monospace, monospace); }
.vvideo__ctl button:hover{ border-color:#fff; }
.vvideo__ctl button.on{ background:var(--vino-vivo); border-color:var(--vino-vivo); color:#0a1b30; }
.vvideo__nota{ text-align:center; margin:20px auto 0; max-width:62ch; font-size:.82rem; line-height:1.55; color:#8fa2c6; }
@media (max-width:700px){ .vvideo__ctl span{ flex:0 0 100%; text-align:center; margin:0 0 2px; } .vvideo__ctl{ gap:12px; } }

/* Teléfono: el video es vertical (9:16), a lo ancho de la pantalla y sin pasar de la altura útil */
@media (max-width:700px){
  .vvideo__marco{ max-width:min(100%, 420px); }
  .vvideo__marco video{ aspect-ratio:9/16; max-height:78vh; width:100%; margin:0 auto; object-fit:contain; }
  .vvideo__cab .display{ font-size:1.45rem; }
  .vvideo__nota{ font-size:.78rem; }
}

/* ─── Venta: filas de botones, barra de compra fija en móvil ─── */
.cta-fila{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(36px,5vw,56px); }
.comprar-fijo{ display:none; }
@media (max-width:700px){
  .comprar-fijo{
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(10,27,48,.96);
    border-top:1px solid rgba(238,242,247,.18); transform:translateY(110%); transition:transform .3s ease;
  }
  .comprar-fijo.on{ transform:none; }
  .comprar-fijo .btn{ flex:1; justify-content:center; min-height:48px; padding-left:12px; padding-right:12px; }
  .comprar-fijo .btn--linea{ flex:0 0 auto; border-color:rgba(238,242,247,.4); color:#eef2f7; }
  body{ padding-bottom:70px; }
}


/* ═══ PULIDO PROFESIONAL (oct-2026) ═════════════════════════════════════ */
body{ font-size:18px; line-height:1.65; }
.display{ text-wrap:balance; }
.bajada{ text-wrap:pretty; }

/* Botones: sans en frase, no versalitas; el peso lo da el color, no el tracking */
.btn{
  font-family:var(--texto); font-size:.98rem; font-weight:600; letter-spacing:.005em; text-transform:none;
  padding:17px 30px; border-radius:3px; min-height:52px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn--principal{ box-shadow:0 10px 24px -14px rgba(124,28,44,.9); }
.btn--principal:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -14px rgba(124,28,44,.9); }
.btn--linea:hover{ transform:translateY(-1px); }
.btn--pequeno{ padding:11px 18px; font-size:.9rem; min-height:44px; }
.btn:focus-visible, .barra a:focus-visible, .barra button:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* Barra */
.barra{ padding:0 clamp(18px,3vw,40px); min-height:72px; gap:clamp(16px,3vw,40px); }
.barra .logo{ flex:none; }
.barra__enlaces{ display:none; gap:clamp(18px,2.2vw,34px); font-family:var(--texto); font-size:.95rem; font-weight:500; letter-spacing:0; text-transform:none; margin-left:auto; }
.barra__enlaces a{ position:relative; padding:26px 0; color:var(--azul-200); text-decoration:none; transition:color .2s; }
.barra__enlaces a::after{ content:""; position:absolute; left:0; right:0; bottom:18px; height:2px; background:var(--vino-vivo); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
.barra__enlaces a:hover, .barra__enlaces a[aria-current="true"]{ color:#fff; }
.barra__enlaces a:hover::after, .barra__enlaces a[aria-current="true"]::after{ transform:scaleX(1); }
.barra__acciones{ display:flex; align-items:center; gap:clamp(12px,2vw,24px); margin-left:auto; }
@media (min-width:980px){ .barra__enlaces{ display:flex; } .barra__acciones{ margin-left:0; } }
.barra__entrar{ color:var(--azul-200); text-decoration:none; font-weight:500; font-size:.95rem; padding:10px 4px; }
.barra__entrar:hover{ color:#fff; }
.barra__cta{ display:none; }
@media (min-width:700px){ .barra__cta{ display:inline-flex; } }

/* Menú móvil */
.barra__menu{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; padding:0 12px; background:transparent; border:1px solid rgba(238,242,247,.35); border-radius:3px; cursor:pointer; }
.barra__menu span{ display:block; height:2px; background:#eef2f7; transition:transform .25s ease, opacity .2s ease; }
.barra__menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.barra__menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.barra__menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:980px){ .barra__menu{ display:none; } }
.menu-movil{ position:absolute; left:0; right:0; top:100%; background:var(--azul-900); border-bottom:1px solid rgba(238,242,247,.18); box-shadow:0 30px 50px -20px rgba(0,0,0,.6); padding:8px clamp(18px,3vw,40px) 22px; display:flex; flex-direction:column; }
.menu-movil[hidden]{ display:none; }
.menu-movil a{ color:#eef2f7; text-decoration:none; font-size:1.05rem; font-weight:500; padding:15px 2px; border-bottom:1px solid rgba(238,242,247,.12); }
.menu-movil a.btn{ margin-top:18px; border-bottom:0; justify-content:center; padding:16px; color:#fff; }
body.menu-abierto{ overflow:hidden; }

/* Etiquetas y detalles */
.etiqueta{ font-size:.74rem; letter-spacing:.16em; }
.cifra__n{ letter-spacing:-.01em; }
.portada__nota{ font-size:.92rem; letter-spacing:0; }

.barra__enlaces a, .barra__entrar, .barra__cta{ white-space:nowrap; }
.barra__cta{ flex:none; }

.barra .barra__cta{ display:none; }
@media (min-width:700px){ .barra .barra__cta{ display:inline-flex; } }
.barra{ overflow:visible; }

/* Legibilidad del titular y la bajada sobre la foto */
.portada__velo{ background:rgba(8,22,40,.62) !important; }
.portada .bajada{ color:#eef2f7; text-shadow:0 1px 14px rgba(0,0,0,.45); }
.portada .portada__nota{ color:#dbe4f1; text-shadow:0 1px 10px rgba(0,0,0,.45); }

/* Subtítulos del video: caja propia bajo el marco (no se dibujan encima de la imagen) */
.vvideo__sub{ max-width:960px; min-height:3.4em; margin:14px auto 0; padding:10px 18px; text-align:center; font-size:1.05rem; line-height:1.45; color:#eef2f7; background:rgba(238,242,247,.07); border-left:3px solid var(--vino-vivo); text-wrap:balance; display:flex; align-items:center; justify-content:center; }
.vvideo__sub:empty{ opacity:.55; }
.vvideo__sub.apagado{ display:none; }
.vvideo video::cue{ font-size:0; background:transparent; }   /* por si el navegador dibuja alguno */
@media (max-width:700px){ .vvideo__sub{ max-width:min(100%,420px); font-size:1rem; padding:9px 14px; min-height:3.6em; } }

/* Controles del video: discretos (ESP / ENG / OFF), una sola fila, sin competir con el video */
.vvideo__ctl{ margin-top:10px; gap:8px 22px; }
.vvideo__ctl > div{ gap:5px; flex-wrap:nowrap; }
.vvideo__ctl span{ flex:0 0 auto !important; margin:0 4px 0 0 !important; font-size:.58rem; letter-spacing:.14em; opacity:.8; }
.vvideo__ctl button{ min-height:32px; min-width:0; padding:6px 11px; font-size:.64rem; letter-spacing:.1em; border-color:rgba(238,242,247,.28); color:#c9d4e6; }
.vvideo__ctl button:hover{ color:#fff; }
.vvideo__ctl button.on{ color:#0a1b30; }
@media (max-width:700px){ .vvideo__ctl{ gap:8px 16px; } .vvideo__ctl button{ padding:6px 10px; min-width:0; min-height:32px; } .vvideo__ctl span{ flex:0 0 auto !important; text-align:left; } }


/* ═══ Ideas de interfaz inspiradas en bibliotecas de componentes (reescritas en CSS simple) ═══ */

/* "Qué incluye": de lista a tarjetas que se levantan y se llenan al pasar */
.incluye{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; border-top:0; }
.incluye li{
  position:relative; display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:26px 26px 28px; border:1px solid var(--linea); border-bottom:1px solid var(--linea); background:var(--fondo);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease, background .3s ease; overflow:hidden;
}
.incluye li::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--vino); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.incluye li:hover, .incluye li:focus-within{ transform:translateY(-6px); border-color:var(--linea-2); box-shadow:0 22px 40px -22px rgba(10,27,48,.35); background:#fff; }
.incluye li:hover::after{ transform:scaleX(1); }
.incluye .n{ font-size:.8rem; color:var(--vino); font-weight:500; }
.incluye strong{ font-size:1.22rem; line-height:1.2; margin-bottom:6px; }
.incluye span.d{ font-size:.97rem; line-height:1.55; }
@media (prefers-reduced-motion:reduce){ .incluye li, .incluye li::after{ transition:none; } .incluye li:hover{ transform:none; } }

/* Barra de compra del teléfono como "isla" flotante */
@media (max-width:700px){
  .comprar-fijo{
    left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); padding:8px; border-radius:999px;
    border:1px solid rgba(238,242,247,.22); background:rgba(10,27,48,.96); box-shadow:0 18px 40px -12px rgba(0,0,0,.65);
    transform:translateY(160%) scale(.92); opacity:0; transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  }
  .comprar-fijo.on{ transform:none; opacity:1; }
  .comprar-fijo .btn{ border-radius:999px; min-height:46px; }
  .comprar-fijo .btn--linea{ padding-left:20px; padding-right:20px; }
  body{ padding-bottom:84px; }
}


/* ═══ MINI-EXAMEN DE LA PORTADA, versión viva (oct-2026) ═══════════════════
   Mismo contenido; tarjeta suave, respuestas como filas con letra, imagen por tema. */
.lp-quiz-civismo{ max-width:820px; }
.lp-quiz-civismo .flashcard{ border:0 !important; background:transparent !important; border-radius:20px !important; }
.lp-quiz-civismo .cara{
  border-radius:20px !important; background:#fff !important;
  border:1px solid var(--linea) !important; border-top:5px solid var(--vino) !important;
  box-shadow:0 2px 4px rgba(10,27,48,.06), 0 24px 48px -24px rgba(10,27,48,.3) !important;
}
.lp-quiz-civismo .contador{ font-size:.74rem !important; letter-spacing:.14em !important; }
.lp-quiz-civismo .contador::after{ height:5px !important; border-radius:5px; background:var(--linea) !important; }
.lp-quiz-civismo .num-pregunta{ display:none !important; }   /* "Pregunta 2" chocaba con "1 de 10" */
.lp-quiz-civismo .cabecera-tarjeta{ margin-bottom:14px; }
.lp-quiz-civismo .pastilla{
  border-radius:999px !important; border:0 !important; background:var(--azul-100) !important; color:var(--azul-700) !important;
  font-family:var(--texto) !important; font-size:.74rem !important; font-weight:600 !important; letter-spacing:.02em !important; text-transform:none !important; padding:5px 12px !important;
}
.lp-quiz-civismo .pastilla.dificultad{ background:#f7e9ec !important; color:var(--vino) !important; }
.lp-quiz-civismo .pregunta-en{ font-weight:500 !important; font-size:clamp(1.35rem,2.8vw,1.85rem) !important; margin:0 0 20px !important; }
.lp-quiz-civismo .btn-bocina{
  border-radius:12px !important; background:var(--azul-800) !important; border-color:var(--azul-800) !important;
  font-family:var(--texto) !important; font-size:.95rem !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important;
  padding:12px 20px !important; box-shadow:0 10px 22px -12px rgba(10,27,48,.8); transition:transform .2s ease, background .2s;
}
.lp-quiz-civismo .btn-bocina:hover{ transform:translateY(-2px); background:var(--azul-700) !important; }
.lp-quiz-civismo .velocidad{ border-radius:12px !important; }
.lp-quiz-civismo .velocidad button{ font-family:var(--texto) !important; font-size:.85rem !important; font-weight:600 !important; letter-spacing:0 !important; padding:11px 14px !important; }
.lp-quiz-civismo .btn-silenciar{ border-radius:12px !important; }
.lp-quiz-civismo .btn-espanol{
  font-family:var(--texto) !important; font-size:.92rem !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important;
  border-bottom-width:2px !important; margin:14px 0 0 !important;
}
.lp-quiz-civismo .opciones{ border-top:0 !important; display:grid; gap:10px; margin-top:22px !important; }
.lp-quiz-civismo .opcion{
  border:1.5px solid var(--linea-2) !important; border-radius:14px !important; background:#fff !important; overflow:hidden; gap:0 !important;
  transition:transform .2s ease, border-color .2s, box-shadow .2s;
}
.lp-quiz-civismo .opcion::before{
  width:48px !important; border-right:0 !important; background:var(--azul-100); color:var(--vino) !important;
  font-family:var(--texto) !important; font-size:.95rem !important; font-weight:800;
}
.lp-quiz-civismo .opcion:hover{ background:#fff !important; border-color:var(--vino) !important; transform:translateX(3px); box-shadow:0 12px 24px -14px rgba(10,27,48,.4); }
.lp-quiz-civismo .opcion:hover::before{ background:var(--vino) !important; color:#fff !important; }
.lp-quiz-civismo .opcion .elegir{ padding:17px 14px !important; font-weight:600 !important; }
.lp-quiz-civismo .opcion .elegir:hover{ color:var(--tinta) !important; padding-left:14px !important; }
.lp-quiz-civismo .audio-resp{ opacity:.7; width:48px; }
.lp-quiz-civismo .resultado{
  display:flex !important; align-items:center; gap:10px; border:0 !important; border-radius:12px !important;
  padding:14px 16px !important; margin:6px 0 18px !important;
  font-family:var(--texto) !important; font-weight:800 !important; font-size:1.05rem !important; letter-spacing:0 !important; text-transform:none !important;
}
.lp-quiz-civismo .resultado.ok{ background:#e4f3ea !important; color:#17653a !important; }
.lp-quiz-civismo .resultado.mal{ background:#f9e8eb !important; color:var(--vino) !important; }
.lp-quiz-civismo .bloque-correcta{ border-top:0 !important; border-left:4px solid var(--vino) !important; padding:4px 0 4px 16px !important; }
.lp-quiz-civismo .bloque-correcta .txt{ font-weight:500 !important; }
.lp-quiz-civismo .tambien{ background:var(--papel-2); border-left:0 !important; border-radius:12px; padding:12px 14px !important; }
.lp-quiz-civismo .btn-siguiente, .lp-quiz-civismo .nav button{
  border-radius:12px !important; font-family:var(--texto) !important; font-size:.98rem !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important;
}
.lp-quiz-civismo .btn-siguiente{ box-shadow:0 12px 24px -12px rgba(124,28,44,.8); }
.lq-resultado{ border-radius:20px; border-top:5px solid var(--vino) !important; box-shadow:0 24px 48px -24px rgba(10,27,48,.3); }
.lq-res-cta{ border-radius:12px !important; font-family:var(--texto) !important; font-size:1rem !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; }
.lq-reintentar{ font-family:var(--texto) !important; font-size:.9rem !important; letter-spacing:0 !important; text-transform:none !important; }

/* Miniatura por tema (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-100); }
.lp-quiz-civismo .cara-frente .fila-audio{ clear:both; }
@media (max-width:520px){ .tema-img{ width:72px; height:72px; border-radius:14px; margin-left:12px; } }

/* Landing: botón de sonidos con etiqueta y "Escuchar" con estado visible mientras suena */
.lp-quiz-civismo .btn-silenciar{
  width:auto !important; height:auto !important; min-height:46px; padding:0 14px !important; gap:8px; display:inline-flex !important; align-items:center;
  font-family:var(--texto) !important; font-size:.85rem !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important;
}
.lp-quiz-civismo .btn-silenciar .sil-txt{ white-space:nowrap; }
.lp-quiz-civismo .btn-silenciar[aria-pressed="true"]{ color:var(--vino) !important; border-color:var(--vino) !important; background:#f9e8eb !important; }
.lp-quiz-civismo .btn-bocina.reproduciendo{ background:var(--vino) !important; border-color:var(--vino) !important; animation:latido-q 1.3s ease-in-out infinite; }
@keyframes latido-q{ 50%{ box-shadow:0 0 0 8px rgba(124,28,44,.16); } }

/* Teléfono: Escuchar + Sonidos en la primera línea, velocidad completa debajo */
@media (max-width:560px){
  .lp-quiz-civismo .fila-audio{ gap:8px; }
  .lp-quiz-civismo .fila-audio .btn-bocina{ flex:1 1 auto; justify-content:center; order:1; }
  .lp-quiz-civismo .fila-audio .btn-silenciar{ order:2; flex:0 0 auto; }
  .lp-quiz-civismo .fila-audio .velocidad{ order:3; flex:1 1 100%; }
  .lp-quiz-civismo .fila-audio .velocidad button{ flex:1; }
}


/* Mini-examen: Escuchar + velocidad, pequeños y al pie de la tarjeta (bajo las respuestas) */
.lp-quiz-civismo .opciones{ clear:both; }
.lp-quiz-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 !important; padding-top:14px; border-top:1px solid var(--linea);
}
.lp-quiz-civismo .fila-audio .btn-bocina{
  flex:0 0 auto !important; order:0 !important; padding:6px 14px !important; min-height:36px !important; font-size:.82rem !important;
  gap:7px; box-shadow:none !important; border-radius:10px !important; justify-content:center;
}
.lp-quiz-civismo .fila-audio .btn-bocina svg{ width:15px; height:15px; }
.lp-quiz-civismo .fila-audio .velocidad{ flex:0 0 auto !important; order:0 !important; border-radius:10px !important; }
.lp-quiz-civismo .fila-audio .velocidad button{ flex:0 0 auto !important; padding:5px 10px !important; min-height:34px; font-size:.76rem !important; }