/* ENARMAD 2027 · estilos de la landing (inicio, términos, privacidad y soporte).
   Un solo archivo: la base y las secciones, sin reglas de versiones anteriores. */

/* ENARMAD 2027 · Landing
   Mismo lenguaje visual que la plataforma (kit/colores.css): azul de marca #002672,
   verde solo para GPC.AI, letra Inter, superficies planas sin degradados. */
@font-face {
  font-family: "Inter";
  src: url("assets/fuentes/Inter-Variable.woff2") format("woff2"),
       url("assets/fuentes/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --azul: #002672;
  --azul-medio: #0E468F;
  --foco: #3C6DEA;
  --tinta: #161D2D;
  --suave: #3F4859;
  --tenue: #6B7280;
  --apagado: #9AA1AD;
  --linea: #E2E8F0;
  --lienzo: #F4F7FC;
  --superficie: #EDF1F8;
  --activo: #E8EEF8;
  --blanco: #FFFFFF;

  --radio: 12px;
  --radio-sm: 8px;
  --sombra: 0 1px 2px rgba(22, 29, 45, .04), 0 1px 1px rgba(22, 29, 45, .02);
  --ancho: 1200px;
  --gutter: 24px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--blanco);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
.contenedor { width: min(100% - var(--gutter) * 2, var(--ancho)); margin-inline: auto; }
.saltar {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--azul); color: #fff; padding: 10px 14px; border-radius: var(--radio-sm);
  text-decoration: none; font-weight: 600;
}
.saltar:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Tipos ---------- */
.ceja {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: 12px;
}
.titulo {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.08; letter-spacing: -.025em; font-weight: 700;
  color: var(--tinta);
}
.titulo em { font-style: normal; color: var(--azul); }
.entrada { margin-top: 16px; font-size: 18px; color: var(--suave); max-width: 560px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: 10px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.boton-primario { background: var(--azul); color: #fff; }
.boton-primario:hover { background: var(--azul-medio); }
.boton-claro { background: #fff; color: var(--azul); }
.boton-claro:hover { background: var(--activo); }
.boton-linea-clara { color: #fff; border-color: rgba(255, 255, 255, .35); }
.boton-linea-clara:hover { border-color: #fff; }
.boton-chico { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: var(--radio-sm); }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea);
}
.barra .contenedor { display: flex; align-items: center; gap: 32px; height: 68px; }
.barra-logo img { height: 26px; width: auto; }

/* Logo nuevo (con la estrella de GPC.AI): su caja es más alta, así que va a 33 px para que «Enarmad» mida lo mismo. */
.barra-logo img.logo-gpcai { height: 33px; }
.barra-nav { display: flex; gap: 4px; margin-left: auto; }
.barra-nav a {
  padding: 8px 12px; border-radius: var(--radio-sm);
  font-size: 14px; font-weight: 500; color: var(--suave); text-decoration: none;
}
.barra-nav a:hover { background: var(--lienzo); color: var(--tinta); }
.barra-nav .barra-nav-entrar { display: none; }
.barra-acciones { display: flex; align-items: center; gap: 8px; }
.barra-entrar { font-size: 14px; font-weight: 600; color: var(--azul); text-decoration: none; padding: 8px 12px; }
.barra-entrar:hover { text-decoration: underline; }
.barra-menu {
  display: none; width: 44px; height: 44px; place-items: center;
  border: 1px solid var(--linea); border-radius: 10px; background: #fff; color: var(--tinta); cursor: pointer;
}
.barra-menu svg { width: 20px; height: 20px; }

/* ---------- Portada: misma escala y calma que la plataforma ---------- */
.portada { background: var(--lienzo); padding: 72px 0 88px; overflow: hidden; border-bottom: 1px solid var(--linea); }
.portada-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 64px; align-items: center; }
.portada-texto { display: flex; flex-direction: column; gap: 22px; max-width: 600px; }
.portada-texto .ceja { margin-bottom: -6px; }
.portada h1 { font-size: clamp(38px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.03em; font-weight: 700; }
.portada .entrada { margin-top: 0; font-size: 18px; max-width: 540px; }

/* Cifras en una sola fila, separadas por líneas finas */
.incluye-lista { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; }
.incluye-lista li { display: flex; flex-direction: column; gap: 2px; padding: 0 22px; border-left: 1px solid var(--linea); }
.incluye-lista li:first-child { padding-left: 0; border-left: 0; }
.incluye-lista b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--azul); }
.incluye-lista b.verde { color: #0F7A45; }
.incluye-lista span { font-size: 13px; color: var(--tenue); }

/* Collage proporcional: siempre cabe en su columna */
.collage { position: relative; width: 100%; aspect-ratio: 500 / 560; }
.collage > div { position: absolute; }
.collage-gpcai { left: 0; bottom: 0; width: 54%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); box-shadow: 0 20px 40px -24px rgba(0, 38, 114, .35); }
.collage-gpcai-marca { display: flex; align-items: center; font-weight: 700; }
.collage-gpcai b { line-height: 1.25; }
.collage-chips { display: flex; flex-wrap: wrap; }
.collage-chips span { border-radius: 999px; background: var(--superficie); color: var(--suave); }
.collage-gpcai small { font-weight: 600; color: #0F7A45; }

/* ---------- Secciones ---------- */
.seccion { padding: 112px 0; }
.seccion-lienzo { background: var(--lienzo); border-block: 1px solid var(--linea); }
.encabezado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; align-items: end; margin-bottom: 48px; }
.encabezado .entrada { margin-top: 0; font-size: 17px; }
.tarjeta {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* ---------- Flashcards (visor como el de la plataforma) ---------- */
.visor { display: flex; overflow: hidden; border: 1px solid var(--linea); border-radius: 16px; background: #EEF2F8; }
.visor-escenario { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.visor-lienzo { flex: 1; display: grid; place-items: center; padding: 32px 32px 8px; min-height: 560px; }
.visor-hoja {
  width: min(100%, 560px); height: auto; border-radius: 4px; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 26, 80, .08), 0 28px 60px -32px rgba(0, 26, 80, .45);
}
.visor-lienzo.ampliada { display: block; overflow: auto; max-height: 640px; padding: 24px; }
.visor-lienzo.ampliada .visor-hoja { width: 200%; max-width: none; }
.visor-controles { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 24px 18px; }
.visor-nav {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px;
  border: 1.5px solid var(--azul); border-radius: 999px; background: #fff; color: var(--azul);
  font-style: normal; font-weight: 600; font-size: 14px; line-height: 1; font-family: inherit; letter-spacing: inherit; cursor: pointer; transition: background-color .15s, color .15s;
}
.visor-nav:first-child { padding-left: 10px; }
.visor-nav:last-child { padding-right: 10px; }
.visor-nav svg { width: 18px; height: 18px; }
.visor-nav:hover { background: var(--azul); color: #fff; }
.visor-cuenta { min-width: 64px; white-space: nowrap; text-align: center; font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.visor-cuenta b { color: var(--tinta); }
.visor-panel { flex: 0 0 200px; display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--linea); }
.visor-lista { position: relative; list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 520px; scrollbar-width: thin; }
.visor-lista li { padding: 6px; border-radius: 10px; }
.visor-lista li:has([aria-current="true"]) { background: #F1F5FB; }
.visor-mini { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.visor-mini img { width: 100%; aspect-ratio: 155 / 109; object-fit: cover; border-radius: 6px; border: 1.5px solid var(--linea); background: #F7F9FC; }
.visor-mini[aria-current="true"] img { border-color: var(--azul); }
.visor-num {
  position: absolute; left: 6px; top: 6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px;
  background: var(--azul); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ---------- Complementarias: .cx-carta-tipo de la plataforma ---------- */
.cartas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.carta-tipo { position: relative; height: 300px; border-radius: 16px; overflow: hidden; background: #0E2A63; color: #fff; }
.carta-tipo > img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.carta-tipo:hover > img { transform: scale(1.03); }
.carta-banda { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px 20px 16px; background: rgba(0, 38, 114, .88); }
.carta-tipo:hover .carta-banda { background: rgba(0, 38, 114, .94); }
.carta-banda small { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.carta-banda h3 { font-weight: 700; letter-spacing: -.01em; }
.carta-banda p { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .85); }

/* ---------- Exámenes: banda azul a todo lo ancho ---------- */
.banda { background: var(--azul); color: #fff; padding: 104px 0; }
.banda h2 { margin-top: 20px; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.03; letter-spacing: -.035em; font-weight: 800; }

/* ---------- GPC.AI ---------- */
.gpcai { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; max-width: 560px; }
.chip {
  padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--superficie); font-size: 14px; font-weight: 500; color: var(--suave);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.chip:hover, .chip:focus-visible, .chip.activo { background: var(--azul); color: #fff; transform: translateY(-1px); }
.gpcai-buscador { transition: border-color .25s ease, box-shadow .25s ease, color .25s ease; }
.gpcai-buscador.escribiendo { border-color: var(--azul); box-shadow: 0 0 0 3px var(--activo); color: var(--tinta); }
.gpcai-buscador.escribiendo svg { color: var(--azul); }
.gpcai-buscador-texto { min-height: 1.5em; }
.gpcai-buscador.escribiendo .gpcai-buscador-texto::after {
  content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.15em;
  background: var(--azul); animation: cursor-parpadeo 1s steps(1) infinite;
}
@keyframes cursor-parpadeo { 50% { opacity: 0; } }
.gpcai-buscador {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 20px 20px; padding: 14px 14px 14px 20px;
  border: 1px solid var(--linea); border-radius: 999px; color: var(--apagado); font-size: 15px;
}
.gpcai-buscador svg { width: 18px; height: 18px; flex: none; }

/* ---------- Temario: cuatro ramas y las 28 áreas en un desplegable ---------- */
/* ---------- Temario: áreas como en «Áreas de estudio» ---------- */
/* ---------- Videoclases ---------- */
/* ---------- Tu plan ---------- */
/* ---------- Inscripción (como la pantalla de la plataforma) ---------- */
/* ---------- Preguntas ---------- */
.preguntas { margin-inline: auto; }
#preguntas .encabezado { flex-direction: column; gap: 12px; }
#preguntas .encabezado .entrada { max-width: none; }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas details:last-child { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; width: 20px; height: 20px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%23002672' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat;
  transition: transform .2s;
}
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 40px 22px 0; color: var(--suave); }

/* ---------- Cierre y pie ---------- */
.cierre { text-align: center; padding: 112px 0; }
.cierre .titulo { max-width: 720px; margin-inline: auto; }
.cierre .portada-acciones { justify-content: center; }
.pie { border-top: 1px solid var(--linea); padding: 40px 0; background: var(--lienzo); }
.pie .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.pie img { height: 22px; width: auto; }
.pie img.logo-gpcai { height: 28px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 20px; }
.pie a { font-size: 14px; color: var(--suave); text-decoration: none; }
.pie a:hover { color: var(--azul); text-decoration: underline; }
.pie p { width: 100%; font-size: 13px; color: var(--tenue); }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  .portada-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; }
}
@media (max-width: 1099px) {
  .portada-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; }
  .portada h1 { font-size: 40px; }
}
@media (max-width: 959px) {
  .portada-rejilla { grid-template-columns: 1fr; }
  .portada-texto { max-width: 680px; }
}
@media (max-width: 1080px) {
  .barra-menu { display: grid; }
  .barra-entrar { display: none; }
  .barra-acciones { margin-left: auto; }
  .barra-nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px; margin: 0;
    flex-direction: column; gap: 2px; padding: 12px var(--gutter) 20px;
    background: #fff; border-bottom: 1px solid var(--linea); box-shadow: 0 16px 30px -20px rgba(22, 29, 45, .25);
  }
  .barra-nav.abierto { display: flex; }
  .barra-nav a { padding: 12px; font-size: 16px; }
  .barra-nav .barra-nav-entrar { display: block; color: var(--azul); font-weight: 600; }
}
@media (max-width: 900px) {
  .seccion, .banda { padding: 80px 0; }
  .portada-rejilla, .encabezado, .gpcai { grid-template-columns: 1fr; }
  .encabezado { gap: 16px; }
  .collage { display: none; }
  .cartas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .portada { padding: 40px 0 56px; }
  .incluye-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .incluye-lista li { padding: 0 0 0 14px; }
  .incluye-lista li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cartas { grid-template-columns: 1fr; }
  .carta-tipo { height: 240px; }
  .visor { flex-direction: column; }
  .visor-lienzo { min-height: 0; padding: 16px 16px 4px; }
  .visor-controles { gap: 6px; padding: 8px 10px 12px; }
  .visor-nav { padding: 0 10px; font-size: 13px; }
  .visor-cuenta { min-width: 0; }
  .visor-panel { flex: none; border-left: 0; border-top: 1px solid var(--linea); }
  .visor-lista { flex-direction: row; overflow-x: auto; max-height: none; padding: 8px 12px; }
  .visor-lista li { flex: none; width: 84px; padding: 4px; }
  .boton { width: 100%; }
  .barra .boton { width: auto; }
}

/* ---------- Orientador del tema (recreación de la pantalla de la plataforma) ---------- */
/* ---------- GPC.AI: respuesta con citas, como en la plataforma ---------- */
.gpcai-respuesta small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gpcai-respuesta small { color: #0F7A45; }
.gpcai-respuesta ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--tinta); }
.gpcai-respuesta i {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; vertical-align: 1px; box-sizing: border-box; letter-spacing: 0;
  border-radius: 50%; background: #E7F5EE; border: 1px solid #A7E3C4; color: #0F7A45; font-style: normal; font-weight: 700; font-size: 10px; line-height: 1; font-family: inherit;
}

/* Portada del tema (orientador y resumen): la foto del tema detrás del azul, como en la plataforma */
/* Resumen del tema: mismo diseño que /resumen de la plataforma */
.cita {
  position: relative; margin: 0 0 0 -2px; padding: 0 2px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-style: normal; font-weight: 500; font-size: 11px; line-height: 1; font-family: inherit; color: var(--azul-medio); vertical-align: super;
}
.cita:hover, .cita:focus-visible { background: var(--activo); box-shadow: 0 0 0 4px var(--activo); outline: none; }

/* ---------- Animaciones ----------
   Todo se activa con la clase .anim que pone el <head>; sin JavaScript o con
   «movimiento reducido» la página se ve completa y quieta. Son finitas: nada se repite. */
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes desplegar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Portada: entra en cascada al cargar */
.anim .portada-texto > * { animation: subir .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.anim .portada-texto > :nth-child(2) { animation-delay: .08s; }
.anim .portada-texto > :nth-child(3) { animation-delay: .16s; }
.anim .portada-texto > :nth-child(4) { animation-delay: .24s; }
.anim .incluye-lista li { animation: subir .6s cubic-bezier(.2, .7, .2, 1) backwards; }
.anim .incluye-lista li:nth-child(1) { animation-delay: .3s; }
.anim .incluye-lista li:nth-child(2) { animation-delay: .38s; }
.anim .incluye-lista li:nth-child(3) { animation-delay: .46s; }
.anim .incluye-lista li:nth-child(4) { animation-delay: .54s; }

/* Resto de la página: aparece al entrar en pantalla (main.js agrega .visible; la lista es la misma que en main.js) */
.anim :is(.encabezado, .visor, .cartas > *, .gpcai > *, .preguntas details, .cierre .contenedor > *,
  .visor-lista li, .chips .chip, .reproductor-lista, .ex-cabeza > *, .ex-tira,
  .pie .contenedor > *, .legal-portada .contenedor > *, .legal-indice, .legal-texto section) {
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--retraso, 0s);
}
.anim .visible { opacity: 1 !important; transform: none !important; }

/* Microinteracciones */
.visor-hoja { transition: opacity .25s ease; }
.visor-hoja.cambiando { opacity: 0; }
.barra-nav.abierto { animation: desplegar .25s ease both; }
.barra { transition: box-shadow .25s ease; }
.barra.con-sombra { box-shadow: 0 8px 24px -18px rgba(22, 29, 45, .35); }

/* Barra superior al cargar */
.anim .barra { animation: desplegar .5s cubic-bezier(.2, .7, .2, 1) backwards; }

/* Las 28 áreas aparecen en cascada al abrir el desplegable */
/* Respuesta de cada pregunta al abrirse */
.anim .preguntas details[open] p { animation: desplegar .3s ease backwards; }

/* Barra de avance de «Tu plan» se llena al aparecer */
/* El buscador de GPC.AI aparece al final */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Páginas legales (términos y aviso de privacidad) ---------- */
.legal-portada { background: var(--lienzo); border-bottom: 1px solid var(--linea); padding: 56px 0 48px; }
.legal-portada h1 { font-size: clamp(36px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; }
.legal-portada .entrada { margin-top: 12px; }
.legal-fecha { margin-top: 16px; font-size: 14px; color: var(--tenue); }
.legal-cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding: 56px 0 96px; }
.legal-indice { position: sticky; top: 92px; align-self: start; }
.legal-indice small { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tenue); }
.legal-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-indice a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 14px; color: var(--suave); text-decoration: none; }
.legal-indice a:hover { background: var(--lienzo); color: var(--azul); }
.legal-texto { max-width: 760px; }
.legal-texto section { scroll-margin-top: 92px; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--linea); }
.legal-texto section:last-child { border-bottom: 0; }
.legal-texto h2 { font-size: 22px; font-weight: 700; color: var(--azul); margin-bottom: 14px; }
.legal-texto h3 { font-size: 16px; font-weight: 650; margin: 20px 0 8px; }
.legal-texto p, .legal-texto li { font-size: 16px; color: var(--suave); }
.legal-texto p + p { margin-top: 12px; }
.legal-texto ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.legal-texto strong { color: var(--tinta); }
.legal-texto a { color: var(--azul); }
.legal-tabla { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; }
.legal-tabla th, .legal-tabla td { text-align: left; vertical-align: top; padding: 12px 14px; border-top: 1px solid var(--linea); }
.legal-tabla th { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); background: var(--lienzo); border-top: 0; }
.legal-tabla td:first-child { font-weight: 600; color: var(--tinta); }
.legal-tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: 12px; }
.legal-tabla-caja .legal-tabla { margin-top: 0; }
@media (max-width: 900px) {
  .legal-cuerpo { grid-template-columns: 1fr; gap: 32px; }
  .legal-indice { position: static; }
  .legal-indice ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .legal-indice ol { grid-template-columns: 1fr; }
}

/* ---------- Secciones de la landing ----------
   Replican las pantallas actuales de la plataforma (auditoría del 19-oct-2026): Orientador, Resumen con índice,
   exámenes, revisión de una pregunta, Complementarias, GPC.AI y el temario con sus áreas. */
.ceja-verde { color: #047857; }

/* Íconos de trazo de la plataforma (24×24, 1.6) */
.or-ico svg, .ex-ico svg, .gp-buscador svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Orientador (/orientador) ---------- */
.or-pantalla { overflow: hidden; border: 1px solid var(--linea); border-radius: 18px; background: #fff; box-shadow: 0 40px 80px -56px rgba(0, 26, 80, .45); }
.or-portada { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--azul); color: #fff; }
.or-portada img { position: absolute; inset: 0 0 0 auto; width: 70%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.or-portada > div { position: relative; display: flex; flex-direction: column; gap: 4px; }
.or-portada small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.or-portada small svg { width: 15px; height: 15px; }
.or-portada b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.or-portada span { font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.or-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 24px; background: var(--lienzo); }
.or-principal h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; font-size: 19px; font-weight: 700; color: var(--azul); }
.or-principal h3 small { font-size: 13px; font-weight: 400; color: var(--tenue); }
.or-objetivos { border: 1px solid var(--linea); border-radius: 14px; background: #fff; overflow: hidden; }
.or-objetivos > div { padding: 14px 18px; }
.or-objetivos > div + div { border-top: 1px solid var(--linea); }
.or-objetivos b { display: block; font-size: 13.5px; font-weight: 650; }
.or-objetivos ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; color: var(--suave); }
.or-objetivos li::marker { color: var(--apagado); }
.or-evidencia { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 14px; background: #fff; overflow: hidden; }
.or-evidencia li { display: flex; align-items: center; }
.or-evidencia li + li { border-top: 1px solid var(--linea); }
.or-evidencia img { flex: none; object-fit: cover; border-radius: 3px; border: 1px solid var(--linea); }
.or-evidencia div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.or-evidencia strong { font-size: 13.5px; }
.or-evidencia strong em { margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: var(--activo); color: var(--azul); font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.or-evidencia span { font-size: 12px; color: var(--tenue); }
.or-evidencia p { display: flex; gap: 6px; }
.or-lado { display: flex; flex-direction: column; gap: 14px; }
.or-tarjeta { padding: 16px 18px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
.or-tit { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 14.5px; font-weight: 700; color: var(--azul); }
.or-tit small { font-size: 12px; font-weight: 500; color: var(--tenue); }
.or-cifra { font-size: 13px; color: var(--suave); }
.or-cifra strong { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--azul); margin-right: 4px; }
.or-barra { display: block; height: 6px; margin: 8px 0 10px; border-radius: 999px; background: var(--activo); overflow: hidden; }
.or-barra i { display: block; width: 82%; height: 100%; border-radius: inherit; background: var(--azul); }
.or-cifra-chica { font-size: 12.5px; color: var(--suave); }
.or-cifra-chica strong { font-size: 15px; color: var(--azul); margin-right: 3px; }

/* seis cuadritos por año, llenos según los turnos en que apareció */
.or-material ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.or-material li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.or-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--activo); color: var(--azul); }
.or-ico svg { width: 17px; height: 17px; }
.or-material span:not(.or-ico) { flex: 1; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.or-material small { font-size: 12px; color: var(--tenue); }
.or-material li > i { width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1.5px solid #B9C3D2; }

/* ---------- Resumen (/resumen, diseño nuevo) ---------- */
.rs-pantalla { border: 1px solid var(--linea); border-radius: 18px; background: var(--lienzo); box-shadow: 0 40px 80px -56px rgba(0, 26, 80, .45); }
.rs-portada { position: relative; display: flex; align-items: center; margin: 16px 16px 0; overflow: hidden; border-radius: 14px; background: var(--azul); color: #fff; }
.rs-portada img { position: absolute; inset: 0 0 0 auto; width: 64%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.rs-portada > div { position: relative; display: flex; flex-direction: column; gap: 6px; }
.rs-portada small { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.rs-portada b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.rs-portada span { font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.rs-cuerpo { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 0 16px 0 24px; }

/* El índice cambia el apartado que se muestra (uno a la vez, sin scroll propio) */
.rs-indice { align-self: start; display: flex; flex-direction: column; margin-top: 28px; border-left: 1px solid var(--linea); }
.rs-indice small { margin: 0 0 10px 16px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.rs-indice a { cursor: pointer; margin-left: -1px; padding: 5px 0 5px 16px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 20px; color: var(--suave); text-decoration: none; }
.rs-indice a:hover { color: var(--azul); }
.rs-indice a.is-actual { border-left-color: var(--azul); color: var(--azul); font-weight: 600; }
.rs-hoja { padding: 14px 8px 28px 0; }
.rs-seccion[hidden] { display: none; }
.rs-seccion { position: relative; margin-top: 14px; padding: 22px 26px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; scroll-margin-top: 96px; }
.rs-seccion h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; font-size: 19px; line-height: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--azul); }
.rs-clave { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--activo); color: var(--azul-medio); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.rs-seccion h4 { margin: 18px 0 8px; font-size: 15px; font-weight: 700; color: var(--azul); }
.rs-seccion h3 + h4 { margin-top: 0; }
.rs-seccion p, .rs-seccion li, .rs-seccion td { font-size: 15px; line-height: 24.75px; color: var(--tinta); }
.rs-seccion b { font-weight: 600; color: var(--azul-medio); }
.rs-seccion sup { line-height: 0; }
.rs-puntos { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.rs-tabla { width: 100%; margin: 18px 0 6px; border-collapse: collapse; }
.rs-tabla caption { margin-bottom: 10px; text-align: left; font-size: 15px; font-weight: 700; color: var(--azul); }
.rs-tabla th { padding: 0 12px 8px 0; border-bottom: 1px solid var(--linea); text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--tenue); }
.rs-tabla td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linea); vertical-align: top; font-size: 14px !important; line-height: 22px !important; }
.rs-tabla td:first-child { width: 38%; color: var(--azul); }
.rs-tabla-metodo td:first-child { font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-medio); }

/* Ventana de la cita: el fragmento con la portada y la página de la guía */
.rs-ventana {
  position: fixed; inset: 0; margin: auto; width: min(880px, 100vw - 32px); height: fit-content; max-height: calc(100dvh - 48px);
  padding: 0; border: 1px solid var(--linea); border-radius: 12px; background: #fff; overflow: auto;
  box-shadow: 0 30px 80px -20px rgba(22, 29, 45, .45);
}
.rs-ventana::backdrop { background: rgba(22, 29, 45, .55); }
.rs-fragmento { width: 100%; height: auto; padding: 44px 16px 8px; }
.rs-ventana-pie { display: flex; align-items: center; gap: 12px; padding: 12px 18px 16px; border-top: 1px solid var(--linea); }
.rs-ventana-pie img { width: 34px; height: 44px; flex: none; object-fit: cover; border: 1px solid var(--linea); border-radius: 3px; }
.rs-ventana-pie span { display: flex; flex-direction: column; gap: 2px; }
.rs-ventana-pie strong { font-size: 14px; }
.rs-ventana-pie small { font-size: 12.5px; color: var(--tenue); }
.rs-cerrar {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--activo); color: var(--azul-medio); font-style: normal; font-weight: 400; font-size: 20px; line-height: 1; font-family: inherit; cursor: pointer;
}

/* ---------- Exámenes: lista «Elige tu examen» dentro de la banda ---------- */
.ex-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--activo); color: var(--azul); }
.ex-ico svg { width: 18px; height: 18px; }

/* ---------- Revisión dentro de la banda del Simulador ---------- */
.banda-revision { margin-top: 88px; scroll-margin-top: 80px; }

/* Misma rejilla que la banda de arriba: el texto empieza donde empieza «Elige tu examen». */
.banda .rv { color: var(--tinta); border-color: transparent; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .45); }

/* ---------- Revisión de una pregunta (.bx-revision de la plataforma) ---------- */
.rv {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start;
  padding: 24px; border: 1px solid var(--linea); border-radius: 20px; background: #fff;
  box-shadow: 0 40px 80px -56px rgba(0, 26, 80, .4);
}

/* Columna izquierda: el caso y, debajo, la cita de la guía */
.rv-lado { flex-direction: column; gap: 14px; }
.rv-caso { padding: 18px 20px; border: 1px solid #EBF0F7; border-radius: 14px; background: #F7F9FC; }
.rv-etiqueta { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); }
.rv-area { display: block; margin-top: 12px; font-size: 12.5px; color: var(--tenue); }
.rv-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rv-cabeza .rv-etiqueta { margin: 0; }
.rv-marcador { font-size: 13px; color: var(--tenue); white-space: nowrap; }
.rv-marcador b { font-weight: 650; color: #B91C1C; }
.rv-enunciado { margin: 8px 0 14px; font-size: 17.5px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; }
.rv-incisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rv-incisos li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid #EEF2F7; border-radius: 12px; font-size: 14.5px; line-height: 1.45; color: var(--suave); }
.rv-incisos li > div { flex: 1; min-width: 0; padding-top: 3px; }
.rv-incisos li > div > p:first-child { font-weight: 500; }
.rv-letra { width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--linea); background: #fff; font-size: 12.5px; font-weight: 700; color: var(--apagado); }
.rv-incisos small { flex: none; margin-top: 6px; padding-left: 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rv-incisos li.is-correcta { border-color: #BFE6CC; background: #F0FBF4; color: var(--tinta); }
.rv-incisos li.is-correcta .rv-letra { background: #16A34A; border-color: #16A34A; color: #fff; }
.rv-incisos li.is-correcta small { color: #15803D; }
.rv-incisos li.is-tuya { border-color: #F6CDCD; background: #FFF6F6; color: var(--tinta); }
.rv-incisos li.is-tuya .rv-letra { border-color: #DC2626; color: #DC2626; }
.rv-incisos li.is-tuya small { color: #B91C1C; }
.rv-porque { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--tenue); }
.rv-porque b { font-weight: 650; color: var(--suave); }
.rv-porque.is-si b { color: #15803D; }
.rv-incisos li.is-tuya .rv-porque b { color: #B91C1C; }
.rv-incisos li.is-correcta .rv-porque, .rv-incisos li.is-tuya .rv-porque { color: var(--suave); }
.rv-cita .rv-etiqueta { margin-bottom: 8px; }
.rv-chunk { position: relative; margin: 0; padding: 14px 16px 12px 19px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; overflow: hidden; }
.rv-chunk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--azul-medio); }
.rv-chunk > header { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.rv-chunk-tipo { padding: 3px 9px; border-radius: 999px; background: var(--activo); color: var(--azul); font-size: 12px; font-weight: 600; line-height: 16px; }
.rv-chunk-grado { font-size: 12.5px; font-weight: 600; color: var(--azul-medio); }
.rv-num { width: 22px; height: 22px; margin-left: auto; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--azul); color: var(--azul); font-size: 11.5px; font-weight: 700; }
.rv-chunk > img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: contain; object-position: left top; border: 1px solid var(--linea); border-radius: 8px; background: #F7F7F7; }
.rv-chunk figcaption { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--tenue); }
.rv-chunk figcaption img { width: 30px; height: 39px; flex: none; object-fit: cover; border: 1px solid var(--linea); border-radius: 3px; }
.rv-chunk figcaption b { display: block; font-weight: 600; color: var(--suave); }

/* ---------- Complementarias: rejilla 2×2 con degradado azul ---------- */
.cartas-plataforma .carta-tipo { height: 300px; border-radius: 16px; }
.cartas-plataforma .carta-banda { padding: 64px 22px 18px; background: linear-gradient(180deg, rgba(0, 38, 114, 0) 0%, rgba(0, 38, 114, .78) 42%, rgba(0, 32, 98, .96) 100%); }
.cartas-plataforma .carta-tipo:hover .carta-banda { background: linear-gradient(180deg, rgba(0, 38, 114, 0) 0%, rgba(0, 38, 114, .84) 40%, rgba(0, 32, 98, .98) 100%); }

/* ---------- GPC.AI (/gpcai): blanco, el verde solo en la marca ---------- */
.gp-pantalla { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linea); border-radius: 18px; background: #fff; box-shadow: 0 40px 80px -56px rgba(0, 26, 80, .4); }
.gp-barra { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 16px 0 22px; border-bottom: 1px solid var(--linea); }
.gp-marca { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--tinta); }
.gp-marca svg { width: 18px; height: 18px; color: #10B981; }
.gp-sub { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--tenue); }
.gp-vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px 32px; text-align: center; }
.gp-icono { position: relative; width: 64px; height: 64px; margin-bottom: 6px; }
.gp-estrella { position: absolute; right: -6px; top: -6px; }
.gp-vacio h3 { font-size: 24px; font-weight: 650; letter-spacing: -.035em; }
.gp-vacio p { max-width: 300px; font-size: 14px; color: var(--tenue); }
.gp-pastilla { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 11px; border-radius: 999px; background: #ECFDF5; color: #047857; font-size: 12.5px; font-weight: 600; }
.gp-pastilla svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gp-chips { max-width: 520px; margin-top: 18px; }
.gp-chips .chip { padding: 8px 13px; font-size: 13px; }
.gp-chips .chip:hover, .gp-chips .chip:focus-visible, .gp-chips .chip.activo { background: var(--tinta); color: #fff; }
.gp-pie { padding: 0 18px 18px; }
.gp-pie .gpcai-buscador { margin: 0; padding: 14px 16px 14px 20px; border: 1.5px solid #E4E4E7; border-radius: 27px; box-shadow: 0 3px 12px rgba(15, 23, 42, .07); color: #A1A1AA; }
.gp-pie .gpcai-buscador.escribiendo { border-color: #10B981; box-shadow: 0 0 0 3px #ECFDF5; color: var(--tinta); }
.gp-pie .gpcai-buscador.escribiendo .gpcai-buscador-texto::after { background: #10B981; }
.gp-pie .gpcai-buscador svg { width: 19px; height: 19px; color: #A1A1AA; stroke-width: 2.4; }
.gp-ejemplo { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.gp-ejemplo .ceja { margin-bottom: -2px; }
.gp-pregunta { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--superficie); font-size: 14px; font-weight: 600; }
.gp-respuesta ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; }
.gp-chunk { margin-top: 2px; }
.gp-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--linea); }
.gp-cifras div { display: flex; flex-direction: column; }
.gp-cifras dt { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #047857; }
.gp-cifras dd { margin: 0; font-size: 12px; line-height: 1.35; color: var(--tenue); }

/* Guía fijada desde la Biblioteca («Preguntar»): pastilla verde sobre el buscador */
.gp-fija { display: flex; margin: 0 0 8px 4px; }
.gp-fija[hidden], .gp-chips[hidden] { display: none; }
.gp-fija-pastilla { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 0 4px 0 11px; border: 1px solid #BBF0D9; border-radius: 999px; background: #F0FDF7; color: #065F46; font-size: 13px; font-weight: 600; }
.gp-fija-pastilla > svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #10B981; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gp-fija-pastilla > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gp-fija-pastilla small { margin-right: 2px; font-size: 12.5px; font-weight: 450; color: #3F8F6E; }
.gp-fija-x { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #3F8F6E; cursor: pointer; }
.gp-fija-x:hover { background: #D7F5E7; color: #065F46; }
.gp-fija-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ---------- Biblioteca (/catalogo-gpc): lista, visor del PDF y «Preguntar» ---------- */
.bb { display: grid; grid-template-columns: minmax(0, 1fr) 380px; overflow: hidden; border: 1px solid var(--linea); border-radius: 18px; background: #fff; box-shadow: 0 40px 80px -56px rgba(0, 26, 80, .4); }
.bb-catalogo { min-width: 0; padding: 22px 24px 18px; }
.bb-cabeza { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.bb-cabeza b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.bb-cabeza small { font-size: 13px; color: var(--tenue); }
.bb-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.bb-tabs { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--superficie); }
.bb-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--tenue); cursor: pointer; }
.bb-tabs button:hover { color: var(--azul); }
.bb-tabs button.is-activa { background: #fff; color: var(--azul); box-shadow: 0 1px 2px rgba(22, 29, 45, .08); }
.bb-tabs i, .bb-nov i { font-style: normal; font-size: 11.5px; color: var(--apagado); }
.bb-buscar, .bb-select, .bb-nov { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 10px; font-size: 13px; color: var(--apagado); }
.bb-buscar { flex: 1 1 210px; min-width: 0; }
.bb-buscar svg { flex: none; }
.bb-buscar span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bb-select { color: var(--suave); }
.bb-nov { border-radius: 12px; background: #fff; font-family: inherit; font-weight: 500; color: var(--suave); cursor: pointer; }
.bb-nov:hover { border-color: #C9D5E6; }
.bb-nov.is-activa { border-color: var(--azul); background: var(--activo); color: var(--azul); }
[data-bb-lista][hidden] { display: none; }
.bb-tag { margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--superficie); color: var(--tenue); font-style: normal; font-size: 10.5px; font-weight: 600; vertical-align: 2px; white-space: nowrap; }
.bb-tag.is-nuevo { background: #ECFDF5; color: #047857; }
.bb-buscar svg, .bb-select svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bb-letra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 12px; border-radius: 8px; background: var(--superficie); font-size: 16px; font-weight: 700; color: var(--azul); }
.bb-letra small { font-size: 12px; font-weight: 400; color: var(--tenue); }
.bb-lista { list-style: none; margin: 4px 0 0; padding: 0; }
.bb-lista li { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 0; border-bottom: 1px solid #EEF2F7; border-radius: 10px; }
.bb-lista li.is-abierta { background: var(--lienzo); }
.bb-principal { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 8px; border: 0; background: none; text-align: left; cursor: pointer; }
.bb-principal img { width: 44px; height: 57px; flex: none; object-fit: cover; border: 1px solid var(--linea); border-radius: 6px; background: var(--lienzo); }
.bb-principal span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-principal strong { font-size: 15px; font-weight: 500; line-height: 1.35; }
.bb-principal small { font-size: 12.5px; color: #5F6B7A; }
.bb-principal:hover strong { color: var(--azul); }
.bb-acciones { flex: none; display: flex; gap: 2px; }
.bb-doc, .bb-preguntar { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.bb-doc { color: var(--azul); }
.bb-preguntar { color: #047857; }
.bb-preguntar svg { width: 13px; height: 13px; }
.bb-doc:hover { background: var(--activo); }
.bb-preguntar:hover { background: #ECFDF5; }
.bb-visor { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--linea); background: #fff; }
.bb-visor-barra { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 10px 18px; }
.bb-visor-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bb-visor-titulo strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 650; }
.bb-visor-titulo small { font: 500 12px/1.2 ui-monospace, Menlo, monospace; color: var(--tenue); }
.bb-visor-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px; border-block: 1px solid var(--linea); font-size: 12.5px; color: var(--suave); }
.bb-seg[hidden] { display: none; }
.bb-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--superficie); }
.bb-seg span { padding: 4px 9px; border-radius: 6px; color: var(--tenue); }
.bb-seg span.is-activa { background: #fff; color: var(--azul); font-weight: 600; box-shadow: 0 1px 2px rgba(22, 29, 45, .08); }
.bb-pag b { font-weight: 600; color: var(--tinta); }
.bb-hoja { flex: 1; display: grid; place-items: center; padding: 22px; background: #D9DBE0; }
.bb-hoja img { width: min(100%, 290px); height: auto; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); transition: opacity .2s ease; }

/* ---------- Videoclases: reproductor y lista ---------- */
.reproductor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.reproductor-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0B1530; }
.reproductor-video img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.reproductor-video img.cambiando { opacity: 0; }
.reproductor-video time {
  position: absolute; right: 14px; bottom: 14px; padding: 4px 9px; border-radius: 6px;
  background: rgba(22, 29, 45, .85); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.reproductor-lista { padding: 10px; }
.reproductor-lista > small { display: block; padding: 8px 10px 6px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.reproductor-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.reproductor-lista button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 12px;
  background: none; text-align: left; cursor: pointer; transition: background-color .15s ease;
}
.reproductor-lista button:hover { background: var(--lienzo); }
.reproductor-lista button[aria-pressed="true"] { background: var(--activo); }
.reproductor-lista img { width: 104px; height: 58px; flex: none; object-fit: cover; border-radius: 8px; border: 1px solid var(--linea); }
.reproductor-lista span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reproductor-lista b { font-size: 14px; line-height: 1.3; }
.reproductor-lista span small { font-size: 12px; color: var(--tenue); }

/* ---------- Temario: como Áreas de estudio (/areas) y el detalle de cada área ---------- */
.tm { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.tm-tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; margin-bottom: -10px; padding: 3px; border-radius: 12px; background: var(--superficie); }
.tm-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: none; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--tenue); white-space: nowrap; cursor: pointer; }
.tm-tabs button:hover { color: var(--azul); }
.tm-tabs button.is-activa { background: #fff; color: var(--azul); box-shadow: 0 1px 2px rgba(22, 29, 45, .08); }
.tm-tabs i { font-style: normal; font-size: 11.5px; color: var(--apagado); }
.tm-izq, .tm-detalle { min-width: 0; }
.tm-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tm-areas[hidden] { display: none; }
.tm-area { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 80px; padding: 12px 16px 12px 12px; border: 1px solid #EBEFF5; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); font-family: inherit; text-align: left; color: var(--tinta); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tm-area:hover { border-color: #C6D4EA; transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(0, 38, 114, .35); }
.tm-area[aria-pressed="true"] { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul), 0 10px 22px -16px rgba(0, 38, 114, .35); }
.tm-area img { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: contain; background: #F3F6FB; }
.tm-area-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tm-area-texto strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.25; }
.tm-area-texto small { font-size: 12.5px; color: #5F6B7A; }
.tm-portada { position: relative; display: flex; min-height: 150px; overflow: hidden; border-radius: 14px; background: var(--superficie); }
.tm-portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 38, 114, .9) 0%, rgba(0, 38, 114, .74) 40%, rgba(0, 38, 114, .3) 70%, rgba(0, 38, 114, .05) 100%); }
.tm-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-portada-texto { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 86%; padding: 20px 24px; }
.tm-tronco { font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.tm-portada h3 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; color: #fff; }
.tm-datos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.tm-datos li { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 20, 70, .32); font-size: 12.5px; font-weight: 500; line-height: 1; color: rgba(255, 255, 255, .86); white-space: nowrap; }
.tm-datos b { font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; }
.tm-temas { margin-top: 14px; overflow: hidden; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
.tm-lista { list-style: none; margin: 0; padding: 0; }
.tm-lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 52px; padding: 8px 16px 8px 14px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--tinta); }
.tm-lista li + li { border-top: 1px solid var(--linea); }
.tm-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #F4F7FC; font-size: 12.5px; font-weight: 600; color: var(--tenue); font-variant-numeric: tabular-nums; }
.tm-mas { margin: 0; padding: 12px 16px 12px 56px; border-top: 1px solid var(--linea); background: var(--lienzo); font-size: 13px; color: var(--tenue); }
.tm-mas[hidden] { display: none; }

/* ---------- Preguntas en tarjetas ---------- */
.preguntas-tarjetas { display: grid; gap: 10px; }
.preguntas-tarjetas details,
.preguntas-tarjetas details:last-child { border: 1px solid var(--linea); border-radius: 14px; background: #fff; padding: 0 22px; }
.preguntas-tarjetas summary { padding: 18px 0; font-size: 16px; }
.preguntas-tarjetas details p { padding: 0 32px 18px 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .reproductor { grid-template-columns: minmax(0, 1fr) 300px; }
  .or-rejilla { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 900px) {
  .or-rejilla, .reproductor, .rv, .bb { grid-template-columns: 1fr; }
  .bb-visor { border-left: 0; border-top: 1px solid var(--linea); }
  .bb-hoja { padding: 18px; }
  .bb-hoja img { width: min(100%, 240px); }
  .rv { gap: 20px; padding: 20px; }
  .rs-cuerpo { grid-template-columns: 1fr; gap: 0; height: auto; padding: 0 12px; }
  .rs-indice { flex-direction: row; overflow-x: auto; margin: 16px -12px 0; padding: 0 12px; border-left: 0; border-bottom: 1px solid var(--linea); background: var(--lienzo); scrollbar-width: none; }
  .rs-indice::-webkit-scrollbar { display: none; }
  .rs-indice small { display: none; }
  .rs-indice a { flex: none; margin: 0 0 -1px; padding: 8px 12px; border-left: 0; border-bottom: 2px solid transparent; }
  .rs-indice a.is-actual { border-bottom-color: var(--azul); }
  .rs-hoja { min-height: 0; padding-right: 0; }
  .tm { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tm-tabs { margin-bottom: -4px; }
}
@media (max-width: 640px) {
  .or-rejilla { padding: 14px; }
  .or-portada { min-height: 140px; }
  .or-portada > div { padding: 18px 20px; }
  .or-portada b, .rs-portada b { font-size: 21px; }
  .or-portada img, .rs-portada img { width: 100%; opacity: .35; }
  .or-evidencia p { display: none; }
  .rs-portada { margin: 10px 10px 0; min-height: 124px; }
  .rs-portada > div { padding: 18px 20px; }
  .rs-seccion { padding: 18px 16px; }
  .rs-tabla td:first-child { width: 42%; }
  .rv { padding: 14px; border-radius: 16px; }
  .rv-caso { padding: 16px; }
  .rv-enunciado { font-size: 16.5px; }
  .rv-incisos li { padding: 10px; gap: 10px; font-size: 14px; }
  .rv-incisos small { display: none; }
  .gp-sub { display: none; }
  .bb-catalogo { padding: 16px 12px 12px; }
  .bb-filtros .bb-select { display: none; }
  .bb-lista li { flex-wrap: wrap; gap: 0; padding: 4px 4px 8px; }
  .bb-principal { flex-basis: 100%; padding: 8px 6px 4px; }
  .bb-acciones { margin-left: 64px; }
  .gp-barra { padding: 0 12px 0 16px; }
  .gp-vacio { padding: 36px 16px 24px; }
  .gp-cifras dt { font-size: 18px; }
  .preguntas-tarjetas details, .preguntas-tarjetas details:last-child { padding: 0 16px; }
  .preguntas-tarjetas details p { padding-right: 0; }
  .tm-tabs { flex-wrap: nowrap; width: auto; overflow-x: auto; scrollbar-width: none; }
  .tm-tabs::-webkit-scrollbar, .tm-areas::-webkit-scrollbar { display: none; }
  .tm-areas { display: flex; gap: 10px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .tm-areas li { flex: 0 0 150px; scroll-snap-align: start; }
  .tm-area { flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; min-height: 0; padding: 12px; }
  .tm-area:hover { transform: none; }
  .tm-area img { width: 44px; height: 44px; border-radius: 10px; }
  .tm-area-texto strong { font-size: 14px; hyphens: auto; }
  .tm-portada-texto { width: 100%; padding: 18px 20px; }
  .tm-portada::after { background: linear-gradient(90deg, rgba(0, 38, 114, .9) 0%, rgba(0, 38, 114, .72) 60%, rgba(0, 38, 114, .4) 100%); }
  .tm-portada h3 { font-size: 21px; }
  .tm-lista li { min-height: 46px; padding: 8px 12px; gap: 12px; font-size: 14px; }
  .tm-mas { padding-left: 52px; }
}


/* ---------- Portada: seis cifras en dos renglones de tres ---------- */
.incluye-lista.cifras-ocho { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 0; }
.incluye-lista.cifras-ocho li { padding: 0 0 0 18px; }
.incluye-lista.cifras-ocho li:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.anim .incluye-lista li:nth-child(5) { animation-delay: .62s; }
.anim .incluye-lista li:nth-child(6) { animation-delay: .7s; }
.anim .incluye-lista li:nth-child(7) { animation-delay: .78s; }
.anim .incluye-lista li:nth-child(8) { animation-delay: .86s; }
@media (max-width: 640px) {
  .incluye-lista.cifras-ocho { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incluye-lista.cifras-ocho li, .incluye-lista.cifras-ocho li:nth-child(4n + 1) { padding: 0 0 0 14px; border-left: 1px solid var(--linea); }
  .incluye-lista.cifras-ocho li:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* El acceso al Orientador del visor es solo de muestra: no lleva a otra parte. */
/* ---------- Cierre en azul, para que no se pegue con Preguntas ni con el pie ---------- */
.cierre { background: var(--azul); color: #fff; }
.cierre .titulo { color: #fff; }
.cierre .titulo em { color: #BECFEA; }
.cierre .portada-acciones { margin-top: 28px; }

/* Títulos y textos repartidos en líneas parejas, sin una palabra suelta al final. */
.titulo { text-wrap: balance; }
.entrada { text-wrap: balance; }

/* ---------- Portada: la laptop con el Inicio y el celular con una flashcard ocupan el lugar de la flashcard sola ---------- */
.collage-laptop { left: 6%; top: 5.4%; width: 90%; }
.collage-laptop-tapa { position: relative; padding: 2.2% 2.2% 3.1%; background: #12151B; box-shadow: inset 0 0 0 1.5px #2B2F37; }
.collage-laptop-tapa::before { content: ""; position: absolute; top: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #2E333C; }
.collage-laptop-tapa img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.collage-laptop-base { position: relative; width: 108.9%; margin-left: -4.45%; background: #D6DAE1; box-shadow: 0 22px 36px -14px rgba(0, 26, 80, .35); }
.collage-laptop-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 18%; transform: translateX(-50%); background: #BCC2CC; }
.collage-celular { left: 70%; top: 7.5%; width: 30%; padding: 1%; background: #12151B; box-shadow: inset 0 0 0 1.5px #2B2F37, 0 24px 48px -16px rgba(0, 26, 80, .5); }
.collage-celular img { display: block; width: 100%; height: auto; aspect-ratio: 312 / 675; }

/* ---------- Portada en tablet y celular: la laptop y el celular ya no desaparecen (van sin las tarjetas, después del texto) ---------- */
@media (max-width: 959px) {
  .portada-rejilla { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .portada-texto { display: contents; }
  .portada-texto > .ceja { order: 1; }
  .portada h1 { order: 2; }
  .portada .entrada { order: 3; }
  .collage { display: block; order: 4; width: min(100%, 520px); margin: 4px auto; aspect-ratio: 520 / 340; }
  .portada .incluye-lista { order: 5; }
  .collage-gpcai { display: none; }
  .collage-laptop { left: 0; top: 0; width: 86%; }
  .collage-celular { left: auto; right: 0; top: 14%; width: 26%; }
  .collage-celular img { border-radius: 16px; }
}

/* ---------- Portada: el collage se reduce parejo, como una sola imagen (en pantallas medianas las tarjetas ya no tapan la laptop ni el celular).
   Medidas en cqw sobre el diseño de 500 px: 1cqw = 5 px a tamaño completo. ---------- */
.collage { container-type: inline-size; }
.collage > div { border-radius: 3.2cqw; }
.collage-laptop { border-radius: 0; }
.collage-laptop-tapa { border-radius: 3.2cqw 3.2cqw 1.2cqw 1.2cqw; }
.collage-laptop-tapa img { border-radius: .6cqw; }
.collage-laptop-base { height: 2cqw; border-radius: 0 0 2cqw 2cqw; }
.collage-laptop-base::before { height: .8cqw; border-radius: 0 0 1.2cqw 1.2cqw; }
.collage-celular { border-radius: 5.2cqw; }
.collage-celular img { border-radius: 4.2cqw; }
.collage-gpcai { padding: 3.2cqw 3.6cqw; gap: 1.6cqw; }
.collage-gpcai-marca { gap: 1.6cqw; font-size: 2.8cqw; }
.collage-gpcai-marca img { width: 4cqw; height: 4cqw; }
.collage-gpcai b { font-size: 3.2cqw; }
.collage-chips { gap: 1.2cqw; }
.collage-chips span { padding: 1cqw 2cqw; font-size: 2.4cqw; }
.collage-gpcai small { font-size: 2.3cqw; }
@media (max-width: 959px) {
  .collage-celular { border-radius: 5.2cqw; }
}

/* ---------- Portada en 3D: primero el texto, luego la laptop entra girando, sube el celular y llega GPC.AI.
   Al bajar, cada capa sube a su ritmo: --p va de 0 a 1 mientras la portada sale de la pantalla (main.js, solo en escritorio).
   Con «movimiento reducido» no hay entrada ni movimiento: la portada se ve quieta. ---------- */
.collage-orbita { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.collage-orbita-1 { left: -24cqw; top: 22cqw; width: 156cqw; height: 88cqw; border: 1px solid rgba(49, 95, 207, .09); transform: rotate(-25deg); }
.collage-orbita-2 { left: -10cqw; top: 0; width: 132cqw; height: 132cqw; border: 1px solid rgba(49, 95, 207, .05); }
.collage-laptop { transform-origin: 55% 60%; transform: perspective(1300px) translate(0px, calc(var(--p, 0) * -13cqw)) rotateY(calc(-10deg + var(--p, 0) * 10deg)) rotateX(3deg) rotateZ(calc(-2deg + var(--p, 0) * 3deg)); }
.collage-celular { transform: translate(0px, calc(var(--p, 0) * -22cqw)) rotate(calc(5deg + var(--p, 0) * 6deg)); }
.collage-gpcai { transform: translate(0px, calc(var(--p, 0) * -6cqw)) rotate(calc(-3deg + var(--p, 0) * 4deg)); }
@media (min-width: 960px) {
  /* Sin la tarjeta del simulador, la laptop y el celular bajan para ocupar su lugar. */
  .collage-laptop { top: 17.1%; }
  .collage-celular { top: 26.8%; }
}
@media (max-width: 959px) {
  .collage-orbita { display: none; }
}
@keyframes portada-laptop { from { opacity: 0; transform: perspective(1300px) translate(0px, 14cqw) rotateY(-25deg) rotateX(3deg) rotateZ(0deg); } }
@keyframes portada-celular { from { opacity: 0; transform: translate(0px, 14cqw) rotate(0deg); } }
@keyframes portada-gpcai { from { opacity: 0; transform: translate(-12cqw, 8cqw) rotate(0deg); } }
@keyframes portada-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.4cqw; } }
.anim .collage-laptop { animation: portada-laptop 1.1s .25s cubic-bezier(.215, .61, .355, 1) backwards; }
.anim .collage-celular { animation: portada-celular 1s .55s cubic-bezier(.215, .61, .355, 1) backwards, portada-flota 7s 1.6s ease-in-out infinite; }
.anim .collage-gpcai { animation: portada-gpcai 1s .7s cubic-bezier(.215, .61, .355, 1) backwards; }

/* ---------- Cierre de escritorio: flashcards de la plataforma a los lados del texto, inclinadas y cortadas en las orillas ---------- */
.cierre { position: relative; overflow: hidden; }
.cierre .contenedor { position: relative; z-index: 1; }
.cierre .titulo { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.03em; }
.cierre-cartas { display: none; }
@media (min-width: 960px) {
  .cierre { display: flex; align-items: center; min-height: 660px; padding: 96px 0; box-sizing: border-box; }
  .cierre .contenedor { width: 100%; }
  .cierre::before, .cierre::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; }
  .cierre::before { width: 760px; height: 760px; margin: -380px 0 0 -380px; border: 1px solid rgba(255, 255, 255, .07); }
  .cierre::after { width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border: 1px solid rgba(255, 255, 255, .05); }
  .cierre-cartas { display: block; position: absolute; top: 0; bottom: 0; width: 440px; }
  .cierre-cartas-izq { right: calc(50% + 350px); }
  .cierre-cartas-der { left: calc(50% + 350px); }
  .cierre-carta { position: absolute; box-sizing: border-box; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
  .cierre-carta img { display: block; width: 100%; height: 100%; border-radius: 8px; }
  .cierre-carta-ultra i { position: absolute; left: 16px; top: 16px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 6px; background: var(--azul); font-size: 12px; font-weight: 700; font-style: normal; line-height: 22px; text-align: center; color: #fff; }
  .cierre-cartas-izq .cierre-carta:nth-child(1) { left: 0; top: 52px; width: 270px; height: 270px; transform: rotate(-13deg); }
  .cierre-cartas-izq .cierre-carta:nth-child(2) { left: 50px; top: 400px; width: 260px; height: 260px; transform: rotate(9deg); }
  .cierre-cartas-izq .cierre-carta:nth-child(3) { left: 190px; top: 150px; width: 250px; height: 250px; transform: rotate(-3deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
  .cierre-cartas-der .cierre-carta:nth-child(1) { left: 160px; top: 40px; width: 270px; height: 270px; transform: rotate(12deg); }
  .cierre-cartas-der .cierre-carta:nth-child(2) { left: 80px; top: 420px; width: 320px; height: 246px; transform: rotate(-7deg); }
  .cierre-cartas-der .cierre-carta:nth-child(3) { left: 0; top: 170px; width: 250px; height: 250px; transform: rotate(4deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
  .cierre-cartas-der .cierre-carta-ultra:nth-child(3) { left: -20px; top: 190px; width: 300px; height: 230px; }
}

/* ---------- Visor: la muestra trae tarjetas de varios temas, así que el tema va arriba de la tarjeta y la lista se agrupa por tema ---------- */
.visor-tema { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px; margin: 0; padding: 20px 24px 0; text-align: center; }
.visor-tema b { font-size: 15px; font-weight: 700; color: var(--azul); }
.visor-tema + .visor-lienzo { padding-top: 14px; }
.visor-lista li.visor-grupo { padding: 14px 6px 2px; border-radius: 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--tinta); }
.visor-lista li.visor-grupo:first-child { padding-top: 4px; }
.visor-grupo small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--tenue); }
@media (max-width: 640px) {
  .visor-tema { padding: 14px 16px 0; }
  .visor-tema b { font-size: 14px; }
  .visor-tema + .visor-lienzo { padding-top: 10px; }
  .visor-lista li.visor-grupo { display: none; }
}

/* ---------- Orientador, Resumen y revisión compactos: son ejemplos concretos, no la pantalla completa ---------- */
.or-portada { min-height: 132px; }
.or-portada > div { padding: 20px 28px; }
.or-principal h3 + * { margin-bottom: 20px; }
.or-principal > :last-child { margin-bottom: 0; }
.or-evidencia li { gap: 12px; padding: 9px 14px; }
.or-evidencia img { width: 30px; height: 39px; }
.rs-portada { min-height: 120px; }
.rs-portada > div { padding: 20px 28px; }

/* En escritorio, la hoja mide lo del apartado más alto (Diagnóstico), para que no brinque al cambiar de apartado. */
@media (min-width: 901px) {
  .rs-indice { margin-top: 24px; }
  .rs-hoja { min-height: 332px; }
}
.rs-hoja { min-height: 0; padding-bottom: 22px; }

/* «Lo que dice la guía» como cita de texto (blockquote de la plataforma, con borde azul de 3 px) */
/* La revisión: en escritorio, columna del caso más ancha para que el caso y la cita no se alarguen */
@media (min-width: 901px) {
  .rv-caso { padding: 16px 18px; }
  .rv-incisos li { padding-top: 8px; padding-bottom: 8px; }
}
.rv-caso p { font-size: 14.5px; line-height: 1.55; }

/* La etiqueta de «5 minutos» se oculta cuando la videoclase no la tiene */
/* Evidencia del Orientador: GER y GRR abren el PDF de la guía */
.or-evidencia p a { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--linea); font-size: 11.5px; font-weight: 700; color: var(--azul); text-decoration: none; }
.or-evidencia p a:hover { border-color: #C9D5E6; background: var(--activo); }

/* ---------- Flashcards: aviso discreto de la 7.ª edición, bajo el título, con un punto que late ---------- */
/* Aviso de la 7.ª edición: borde azul con degradado que gira, destello que la cruza y sello con un punto que late */
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.edicion-aviso { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 5px 16px 5px 5px; border: 1.5px solid transparent; border-radius: 999px;
  background: linear-gradient(#F3F7FD, #F3F7FD) padding-box, conic-gradient(from var(--giro), #BFD2EE 0deg, #0880D7 70deg, #0E468F 125deg, #BFD2EE 190deg 360deg) border-box;
  box-shadow: 0 10px 28px -16px rgba(8, 128, 215, .6); font-size: 14.5px; line-height: 1.35; color: var(--tinta); }
.edicion-aviso > span:last-child { text-wrap: balance; }
.encabezado > .edicion-aviso { justify-self: start; margin-top: 0; padding: 8px 18px 8px 8px; border-radius: 20px; }

/* a la derecha del título, en lugar del texto de entrada */
/* si el aviso baja a dos renglones, que queden parejos */
.edicion-aviso b { font-weight: 700; color: var(--azul); background: linear-gradient(90deg, var(--azul), #0880D7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.edicion-aviso::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .8) 50%, transparent 62%); transform: translateX(-110%); pointer-events: none; }
.edicion-sello { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 10px 5px 9px; border-radius: 999px; background: linear-gradient(135deg, var(--azul), #0E468F 55%, #0880D7); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.edicion-sello i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #fff; }
.anim .edicion-aviso { animation: aviso-giro 5s linear infinite; }
.anim .edicion-aviso::after { animation: aviso-destello 5s 1.2s ease-in-out infinite; }
.anim .edicion-sello i { animation: aviso-punto 2.2s ease-out infinite; }
@keyframes aviso-giro { to { --giro: 360deg; } }
@keyframes aviso-destello { 0% { transform: translateX(-110%); } 28%, 100% { transform: translateX(110%); } }
@keyframes aviso-punto { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70%, 100% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } }

/* Miniaturas del visor */
.visor-mini img { object-position: 50% 45%; }

/* el centro de la tarjeta distingue mejor las de un mismo tema */
/* «Lo que dice la guía» con la captura del algoritmo: se ve completa, sin el tope de 200 px de los fragmentos */
.rv-algoritmo > img { max-height: none; object-fit: contain; background: #fff; }

/* Cierre: el lema de ENARMAD, en cursiva, sobre el título */
.cierre .lema { margin: 0 0 16px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; font-style: italic; font-weight: 500; letter-spacing: -.01em; color: rgba(255, 255, 255, .78); }
.cierre .lema em { font-weight: 600; color: #fff; }

/* Portada: el aviso de la app renovada, al inicio del texto */
.portada .entrada strong { font-weight: 600; color: var(--azul); }

/* Revisión sin huecos: a la izquierda el caso y debajo la pregunta; a la derecha, a todo lo alto, lo que dice la guía.
   En celular va en una columna: caso, pregunta y guía. */
.rv-lado { display: contents; }
.rv-caso { order: 1; }
.rv-pregunta { order: 2; }
.rv-cita { order: 3; }
@media (min-width: 901px) {
  .rv { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-areas: "caso guia" "pregunta guia"; gap: 18px 28px; align-items: start; }
  .rv-caso { grid-area: caso; }
  .rv-pregunta { grid-area: pregunta; }
  .rv-cita { grid-area: guia; }
}
@media (min-width: 901px) {
  /* La tarjeta de la guía llega hasta abajo, a la par de la pregunta */
  .rv-cita { align-self: stretch; display: flex; flex-direction: column; }
  .rv-cita .rv-chunk { flex: 1; display: flex; flex-direction: column; }
  .rv-algoritmo > img { flex: 1; min-height: 0; height: auto; object-fit: contain; object-position: center; }
}

/* ---------- Exámenes: la cifra arriba y los tres exámenes en una sola tira (el Simulador resaltado) ---------- */
.ex-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: end; }
.ex-cabeza p { font-size: 18px; color: rgba(255, 255, 255, .86); max-width: 520px; }
.ex-tira { list-style: none; margin: 32px 0 0; padding: 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; background: rgba(255, 255, 255, .06); }
.ex-tira li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: #fff; }
.ex-tira li.destacado { background: #fff; color: var(--tinta); }
.ex-tira .ex-ico { width: 34px; height: 34px; background: rgba(255, 255, 255, .12); color: #fff; }
.ex-tira li.destacado .ex-ico { background: var(--activo); color: var(--azul); }
.ex-tira strong { display: block; font-size: 15px; }
.ex-tira small { display: block; margin-top: 1px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.ex-tira li.destacado small { color: var(--tenue); }
@media (max-width: 959px) {
  .ex-cabeza { grid-template-columns: 1fr; row-gap: 16px; }
  .ex-tira { grid-template-columns: 1fr; margin-top: 28px; }
}

/* Revisión: el título en una sola línea, a todo lo ancho */
/* Portada: el nombre del curso, todo en azul */
.portada h1 { color: var(--azul); }

/* Exámenes sin ceja: el título arriba */
.ex-cabeza h2 { margin-top: 0; }

/* Exámenes: poco aire entre la tira de exámenes y la revisión */
.banda .banda-revision { margin-top: 44px; }

/* Visor en abanico (main.js arma las cartas): la elegida al frente y dos vecinas de cada lado detrás */
.visor-lienzo.abanico { --carta: min(500px, 72vw); position: relative; display: block; flex: none; min-height: 0; height: calc(var(--carta) + 56px); padding: 0; overflow: hidden; }
.visor-carta { --escala: .78; --y: 5%; position: absolute; top: 50%; left: 50%; width: var(--carta); margin: 0; padding: 6px; border: 1px solid #DCE5F3; border-radius: 12px; background: #fff; box-shadow: 0 5px 12px rgba(0, 38, 114, .04), 0 22px 48px -14px rgba(0, 38, 114, .19); transform: translate(-50%, -50%) translate(calc(var(--lado) * 12%), var(--y)) rotate(calc(var(--lado) * 6deg)) scale(var(--escala)); transform-origin: 50% 90%; cursor: pointer; }
.visor-carta img { display: block; width: 100%; height: auto; border-radius: 7px; background: #F7F9FC; }
.visor-carta:not(.es-actual):hover { --y: 3%; }
.visor-carta.es-actual { --escala: 1; --y: -1%; cursor: default; box-shadow: 0 8px 20px rgba(0, 38, 114, .05), 0 32px 64px -18px rgba(0, 38, 114, .22); }
.visor-carta.es-lejana { --escala: .6; opacity: 0; pointer-events: none; }
.anim .visor-carta { transition: transform .68s cubic-bezier(.22, .8, .2, 1), opacity .4s ease, box-shadow .36s ease; }

/* Al entrar en pantalla, las cartas salen del montón y se abren en abanico */
.anim .visor:not(.visible) .visor-carta { transform: translate(-50%, -50%) scale(.78); }

/* Exámenes: la frase de la cabecera, más grande que un párrafo */
.ex-cabeza .ex-lema em { font-style: normal; color: #BECFEA; }

/* ---------- Medidas parejas en todas las secciones (19-oct-2026) ----------
   Mismo título (48 px), misma entrada (17 px), mismo encabezado (título a la izquierda y texto al lado) y mismo aire. */
.carta-banda h3 { font-size: 19px; }
#examenes .ex-cabeza h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; }
.ex-cabeza .ex-lema { font-size: 17px; line-height: 1.55; font-weight: 400; letter-spacing: normal; color: rgba(255, 255, 255, .86); }
#preguntas .encabezado { display: grid; align-items: end; text-align: left; }
.preguntas { max-width: none; }
.preguntas details p { max-width: 760px; }
@media (min-width: 901px) {
  .banda { padding: 112px 0; }
  .ex-cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 48px; }
  .ex-tira { margin-top: 48px; }
  #preguntas .encabezado { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; }
}
@media (max-width: 900px) {
  #preguntas .encabezado { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Celular: versión compacta (19-oct-2026) ----------
   Tira fija con todas las secciones, menos aire y carruseles que se deslizan de lado en lugar de alargar la página. */
.secciones { display: none; }
.or-bloque { display: contents; }
@media (max-width: 900px) {
  .secciones { display: flex; gap: 6px; overflow-x: auto; padding: 0 var(--gutter) 10px; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
  .secciones::-webkit-scrollbar { display: none; }
  .secciones a { flex: none; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--suave); text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; }
  .secciones a.es-actual { border-color: var(--azul); background: var(--azul); color: #fff; }
}
@media (max-width: 600px) {
  .barra .contenedor { height: 56px; }
  .seccion, .banda { padding: 48px 0; }
  .encabezado { gap: 10px; margin-bottom: 24px; }
  .encabezado .entrada, .ex-cabeza .ex-lema { font-size: 15.5px; }
  .ex-cabeza { row-gap: 10px; }
  .ex-tira { margin-top: 24px; }
  .or-rejilla, .rv, .cartas-plataforma { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; align-items: flex-start; }
  .or-rejilla::-webkit-scrollbar, .rv::-webkit-scrollbar, .cartas-plataforma::-webkit-scrollbar { display: none; }
  .or-rejilla, .rv { scroll-padding-inline: 14px; }
  .or-principal, .or-lado { display: contents; }
  .or-bloque, .or-lado > .or-tarjeta { flex: 0 0 86%; scroll-snap-align: start; }
  .or-bloque { display: block; padding: 16px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
  .or-principal .or-bloque > h3 + * { margin-bottom: 0; }
  .rv-caso, .rv-pregunta, .rv-cita { flex: 0 0 88%; scroll-snap-align: start; }
  .cartas-plataforma { margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); }
  .cartas-plataforma .carta-tipo { flex: 0 0 82%; scroll-snap-align: start; }
  .bb-lista { max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .gp-chips { display: none; }
}

/* Celular: solo títulos; las explicaciones se quedan en escritorio */
@media (max-width: 600px) {
  .encabezado > .entrada:not(.entrada-fija), .portada .entrada-extra { display: none; }
  .or-principal h3 small { display: none; }
  .cartas-plataforma .carta-banda p { display: none; }
  .cartas-plataforma .carta-tipo { height: 220px; }
  .rv-incisos li:not(.is-tuya):not(.is-correcta) .rv-porque { display: none; }
  .gp-vacio > p, .gp-pastilla { display: none; }
  .bb-buscar, .bb-nov { display: none; }
}

/* Celular: botones del cierre uno debajo del otro, con aire entre ellos */
@media (max-width: 600px) {
  .cierre { padding: 64px 0; }
  .cierre .portada-acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
  .cierre .portada-acciones .boton { width: 100%; height: auto; min-height: 52px; font-size: 16px; }
  .cierre .portada-acciones .boton-linea-clara { min-height: 48px; border-color: rgba(255, 255, 255, .5); }
}

/* ===== PROPUESTA 19-oct (copia aparte, no publicada) ===== */
/* Portada: una pantalla real, derecha, y una respuesta real de GPC.AI con su recorte */
.vitrina { position: relative; width: 640px; margin: 24px -140px 0 0; padding-bottom: 64px; }
.vitrina-ventana { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--linea); box-shadow: 0 30px 60px -28px rgba(0, 38, 114, .4); }
.vitrina-barra { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.vitrina-barra i { width: 10px; height: 10px; border-radius: 50%; background: #CBD3E1; }
.vitrina-barra span { margin-left: 12px; padding: 3px 12px; border-radius: 999px; background: #fff; font-size: 12px; color: var(--tenue); }
.vitrina-ventana > img { display: block; width: 100%; height: auto; }
.vitrina-cita { position: absolute; left: -64px; bottom: 0; width: 430px; margin: 0; padding: 16px 18px 14px 21px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(0, 38, 114, .38); overflow: hidden; }
.vitrina-cita::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #10B981; }
.vitrina-cita-marca { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #0F7A45; }
.vitrina-cita p { margin: 8px 0 10px; font-size: 14.5px; line-height: 1.45; color: var(--tinta); }
.vitrina-cita p i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #10B981; font-size: 10.5px; font-style: normal; color: #0F7A45; }
.vitrina-cita-recorte { display: block; width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 8px; }
.vitrina-cita figcaption { margin-top: 8px; font-size: 12px; color: var(--tenue); }

/* GPC.AI: el ejemplo de respuesta más ancho, para que el recorte de la guía se lea */
@media (min-width: 901px) { .gpcai { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.gp-chunk > img { max-height: none; }

/* Biblioteca: una hoja interior de la guía, no la portada con logos */
.bb-hoja img { width: min(100%, 360px); }
@media (max-width: 1499px) { .vitrina { width: 100%; margin: 0; } .vitrina-cita { left: -24px; width: 72%; } }
@media (max-width: 959px) { .vitrina { order: 4; width: min(100%, 560px); margin: 4px auto; padding-bottom: 0; } .vitrina-cita { display: none; } }

/* Barra superior un poco más baja (19-oct) */
.barra .contenedor { height: 60px; }
.barra-logo img.logo-gpcai { height: 30px; }
.barra-nav { top: 60px; }

/* Celular (19-oct): barra más compacta, la plataforma en celular en la portada, GPC.AI con la respuesta primero y la cita en texto */
.vitrina-ventana picture { display: block; }
.vitrina-ventana picture img { display: block; width: 100%; height: auto; }
.gp-chunk-texto { display: none; }
@media (max-width: 900px) {
  .barra .contenedor { height: 54px; }
  .barra-logo img.logo-gpcai { height: 26px; }
  .barra-nav { top: 54px; }
  .barra .boton-chico { padding: 8px 14px; font-size: 13.5px; }
  .barra-menu { width: 40px; height: 40px; }
  .secciones { padding-bottom: 8px; }
  .secciones a { padding: 5px 11px; font-size: 12.5px; }
  .gp-ejemplo { order: -1; }
}
@media (max-width: 640px) {
  .vitrina { width: 230px; margin: 8px auto 4px; }
  .vitrina-ventana { border-radius: 28px; border: 6px solid #0B1220; }
  .vitrina-barra { display: none; }
  .gp-chunk > img { display: none; }
  .gp-chunk-texto { display: block; margin: 0; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px; background: #F7F7F7; font-size: 13.5px; line-height: 1.5; color: var(--tinta); }
}

/* Celular (19-oct, Edwin): sin la pantalla de la plataforma en la portada y sin la fila de chips; el menú ☰ lleva a las secciones */
@media (max-width: 640px) {
  .vitrina { display: none; }
  .secciones { display: none !important; }
  .portada { padding: 36px 0 44px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .secciones { display: none !important; }
}

/* ===== Exámenes sin fondo azul (19-oct): fondo claro y el Simulador en azul ===== */
#examenes.banda { background: #fff; color: var(--tinta); }
#examenes .ex-lema { color: var(--suave); }
#examenes .ex-lema em { color: var(--azul); }
#examenes .ex-tira { border-color: var(--linea); background: #fff; }
#examenes .ex-tira li { color: var(--tinta); }
#examenes .ex-tira li small { color: var(--tenue); }
#examenes .ex-tira .ex-ico { background: var(--activo); color: var(--azul); }
#examenes .ex-tira li.destacado { background: var(--azul); color: #fff; }
#examenes .ex-tira li.destacado small { color: rgba(255,255,255,.75); }
#examenes .ex-tira li.destacado .ex-ico { background: rgba(255,255,255,.14); color: #fff; }
#examenes .rv { border-color: var(--linea); box-shadow: 0 30px 60px -36px rgba(0, 38, 114, .35); }

/* ===== Celular diseñado para celular (19-oct) ===== */
.portada-cel-acciones { display: none; }
@media (max-width: 640px) {
  /* Portada: título, frase, dos botones y cuatro cifras */
  .portada-cel-acciones { display: flex; flex-direction: column; gap: 10px; order: 4; }
  .portada-cel-acciones .boton { width: 100%; min-height: 50px; justify-content: center; font-size: 16px; }
  .portada-cel-acciones .boton-linea-clara { border-color: rgba(255,255,255,.45); color: #fff; }
  .incluye-lista.cifras-ocho { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
  .incluye-lista.cifras-ocho li:nth-child(2), .incluye-lista.cifras-ocho li:nth-child(5), .incluye-lista.cifras-ocho li:nth-child(6), .incluye-lista.cifras-ocho li:nth-child(7) { display: none; }
  .incluye-lista.cifras-ocho li { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.16); }
  .incluye-lista.cifras-ocho li:nth-child(1), .incluye-lista.cifras-ocho li:nth-child(4) { padding-left: 0; border-left: 0; }

  /* Temario: solo los primeros 4 temas del área */
  .tm-lista li:nth-child(n+5) { display: none; }

  /* Orientador: un bloque debajo del otro, sin carrusel; la columna de evidencias se queda en escritorio */
  .or-rejilla { display: block; overflow: visible; }
  .or-lado { display: none; }
  .or-bloque { margin-bottom: 12px; }

  /* Exámenes: caso y pregunta uno debajo del otro; el algoritmo se queda en escritorio */
  .rv { display: block; overflow: visible; }
  .rv-lado { display: block; }
  .rv-cita { display: none; }
  .rv-caso { margin-bottom: 12px; }

  /* Biblioteca: la lista, sin el visor (en celular la hoja no se lee) */
  .bb-visor { display: none; }
  .bb-lista { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .bb-lista > li:nth-child(n+4) { display: none; }

  /* GPC.AI: solo la respuesta con su cita */
  .gp-pantalla { display: none; }

  /* Complementarias: cuatro tarjetas una debajo de otra, completas */
  .cartas-plataforma { display: grid; grid-template-columns: 1fr; gap: 12px; overflow: visible; margin-inline: 0; padding: 0; }
  .cartas-plataforma .carta-tipo { height: 190px; }
}

/* ===== Portada: animaciones de la pantalla real (19-oct) =====
   Entra subiendo y se endereza; la cita de GPC.AI se desliza y flota; al bajar, cada pieza sube a distinto ritmo (--p de vitrina.js). */
@keyframes vitrina-entra { from { opacity: 0; transform: perspective(1400px) translateY(60px) rotateY(-14deg) rotateX(6deg); } }
@keyframes vitrina-cita-entra { from { opacity: 0; transform: translate(-60px, 30px) rotate(-4deg); } }
@keyframes vitrina-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.vitrina-ventana { transform: perspective(1400px) translateY(calc(var(--p, 0) * -60px)) rotateY(calc(-4deg + var(--p, 0) * 4deg)); transform-origin: 40% 60%; }
.vitrina-cita { transform: translateY(calc(var(--p, 0) * -130px)) rotate(calc(-1.5deg + var(--p, 0) * 1.5deg)); }
.anim .vitrina-ventana { animation: vitrina-entra 1.1s .2s cubic-bezier(.215, .61, .355, 1) backwards; }
.anim .vitrina-cita { animation: vitrina-cita-entra .9s .75s cubic-bezier(.215, .61, .355, 1) backwards, vitrina-flota 6s 1.8s ease-in-out infinite; }
.anim .portada-cel-acciones { animation: subir .6s .25s cubic-bezier(.2, .7, .2, 1) backwards; }
@media (max-width: 959px) { .vitrina-ventana, .vitrina-cita { transform: none; } }
@media (prefers-reduced-motion: reduce) { .vitrina-ventana, .vitrina-cita { animation: none !important; transform: none; } }

/* Contrastes (19-oct): letras pequeñas grises un tono más oscuras para que pasen 4.5:1 */
.bb-letra small, .reproductor-video time { color: var(--suave); }
.rv-incisos li:not(.is-tuya):not(.is-correcta) .rv-letra { color: var(--tenue); border-color: #C9D0DB; }

/* ===== Preventa PREVENTA27 (prototipo 20-oct) ===== */
.pv-franja { background: #E8EEF8; color: var(--azul); font-size: 14px; border-bottom: 1px solid #D5DEEC; }
.pv-franja .contenedor { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding-block: 6px; }
.pv-franja p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.pv-franja b { font-weight: 800; }
.pv-franja s, .pv-precio s { color: var(--tenue); font-weight: 500; }
.pv-sello { padding: 3px 10px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pv-codigo { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border: 1.5px dashed var(--azul); border-radius: 8px; background: #fff; color: var(--azul); font: 800 13.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .04em; cursor: pointer; }
.pv-codigo i { padding: 3px 8px; border-radius: 5px; background: var(--azul); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
.pv-codigo:hover i { background: var(--azul-medio); }
.pv-codigo.copiado { border-style: solid; }
.pv-codigo.copiado i { background: #16A34A; }
.pv-precio { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin: 28px auto 0; padding: 18px 26px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(255,255,255,.07); }
.pv-precio-ceja { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.pv-precio-cifra { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.pv-precio-cifra s { color: rgba(255,255,255,.55); font-size: 20px; }
.pv-precio-cifra b { font-size: 44px; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1; }
.pv-precio-cifra small { font-size: 15px; color: rgba(255,255,255,.75); }
.pv-precio-como { margin: 0; font-size: 14px; color: rgba(255,255,255,.82); }
.pv-precio .pv-codigo { background: #fff; border-color: #fff; vertical-align: middle; }
.cierre .contenedor { display: flex; flex-direction: column; align-items: center; }
.portada-cel-acciones s { opacity: .55; font-weight: 500; margin-right: 2px; }
@media (max-width: 640px) {
  .pv-franja { font-size: 13px; }
  .pv-franja .contenedor { gap: 8px; }
  .pv-largo, .pv-franja s { display: none; }
  .pv-precio { width: 100%; padding: 16px; }
  .pv-precio-cifra b { font-size: 38px; }
}
.pv-hasta-corto { display: none; }
@media (max-width: 640px) {
  .pv-sello, .pv-hasta { display: none; }
  .pv-hasta-corto { display: inline; }
  .pv-franja .contenedor { min-height: 40px; padding-block: 5px; }
  .pv-franja p { flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
  .pv-codigo { font-size: 12.5px; padding: 2px 3px 2px 8px; }
  .cierre .contenedor { align-items: stretch; }
  .pv-precio-como { display: flex; flex-direction: column; align-items: center; gap: 6px; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .pv-largo, .pv-hasta { display: none; }
  .pv-hasta-corto { display: inline; }
  .pv-franja p { flex-wrap: nowrap; white-space: nowrap; }
}