/* ==================================================================
 * Portada v3 · propuesta sobre portada.css (06-11-2026)
 *
 * Solo agrega y corrige. Quitar este archivo devuelve el diseño anterior.
 * Modo oscuro al final: <html data-tema="oscuro">.
 * ================================================================== */

html { scroll-padding-top: 96px; }


/* ---------------- Marca más visible ---------------- */
.portada-v2 .p-nav { height: 84px; }
.portada-v2 .p-nav .marca-portada { align-items: center; gap: 10px; font-size: 36px; text-decoration: none; }
.portada-v2 .p-nav .marca-portada img { width: 46px; height: 46px; }
.marca-pais {
  margin-left: 2px; padding: 5px 8px; border-radius: 8px; background: var(--p-azul); color: #fff;
  font: 800 12px/1 Manrope, system-ui, sans-serif; letter-spacing: .14em;
}
.portada-v2 .p-pie .marca-pais { background: #2f43c4; }

.v3-tema {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; cursor: pointer;
  background: var(--p-blanco); border: 1px solid var(--p-linea);
}
.v3-tema img { display: block; width: 24px; height: 24px; }
.v3-luna { display: none !important; }
html[data-tema="oscuro"] .v3-sol { display: none !important; }
html[data-tema="oscuro"] .v3-luna { display: block !important; }

@media (max-width: 900px) {
  .portada-v2 .p-nav { gap: 8px; }
  .v3-tema { order: 1; margin-left: auto; }
  .portada-v2 .menu-button { order: 2; margin-left: 0; }
}
@media (max-width: 560px) {
  .portada-v2 .p-nav { height: 66px; }
  .portada-v2 .p-nav .marca-portada { gap: 7px; font-size: 27px; }
  .portada-v2 .p-nav .marca-portada img { width: 34px; height: 34px; }
  .marca-pais { padding: 4px 5px; border-radius: 6px; font-size: 9.5px; letter-spacing: .1em; }
  .v3-tema { width: 40px; height: 40px; }
}

/* ---------------- Portada ---------------- */
.p-hero.v3-hero {
  --v3-corte: clamp(34px, 5vw, 76px);
  padding: clamp(36px, 5.4vw, 76px) 0 calc(var(--v3-corte) + clamp(34px, 4vw, 56px));
  color: #fff;
  background:
    radial-gradient(circle at 80% 14%, rgba(255, 209, 102, .24), transparent 36%),
    radial-gradient(circle at 8% 92%, rgba(136, 156, 255, .5), transparent 44%),
    linear-gradient(135deg, #1a2785 0%, #2f43c4 48%, #536dfe 100%);
}
.p-hero.v3-hero::before {
  opacity: .9;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1.2px, transparent 1.2px);
}
.p-hero.v3-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--v3-corte);
  background: var(--v3-sigue, #fff); clip-path: ellipse(72% 100% at 50% 100%);
}
.v3-hero .p-examenes-chips li { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff; }
.portada-v2 .v3-hero h1 { color: #fff; font-size: clamp(42px, 5.4vw, 76px); line-height: 1.01; letter-spacing: -.05em; }
.v3-resalte { color: #ffd166; }
.v3-hero .p-hero-sub { color: #e6eaff; font-size: clamp(18px, 1.65vw, 21px); }
.v3-hero .p-hero-confianza { color: #e6eaff; }
.v3-hero .p-hero-confianza i { color: #7ff0bf; }
.v3-hero .p-hero-cuenta { color: #d7ddff; }
.v3-hero .p-hero-cuenta a { color: #fff; }
.v3-boton-sol { background: #ffc83d; color: #171b44 !important; box-shadow: 0 4px 0 #cf970f, 0 16px 30px rgba(10, 16, 70, .32); }
.v3-boton-sol:hover { background: #ffd35e; }
.v3-boton-sol:active { box-shadow: 0 1px 0 #cf970f; }
.portada-v2 .v3-hero :focus-visible, .portada-v2 .v3-colegios :focus-visible { outline-color: #ffd166; }

.v3-visual { position: relative; display: block; min-height: clamp(470px, 45vw, 610px); padding: 0; }
.v3-visual::before { display: none; }
.v3-navegador {
  position: absolute; top: 3%; right: -5%; width: 92%; overflow: hidden; border-radius: 16px;
  background: #f5f7fc; box-shadow: 0 30px 60px rgba(8, 12, 60, .4);
}
.v3-navegador-barra { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #e9ecf8; }
.v3-navegador-barra i { width: 10px; height: 10px; border-radius: 50%; background: #c6cbe0; }
.v3-navegador-barra span { margin-left: 10px; padding: 2px 12px; border-radius: 99px; background: #fff; color: #5d6272; font: 700 12px/1.4 Manrope, sans-serif; }
.v3-navegador img { display: block; width: 100%; height: auto; }
.v3-visual .p-telefono-hero { position: absolute; left: 0; bottom: 34px; width: min(244px, 44%); transform: rotate(-3deg); box-shadow: 0 30px 60px rgba(8, 12, 60, .5); }
.v3-visual .p-hero-biko { right: -3%; bottom: 30px; width: min(230px, 40%); }
.v3-visual .p-flota-racha { top: auto; bottom: 46%; left: 34%; }
.v3-visual .p-flota-correcto { bottom: 62px; left: 37%; }
.v3-visual .p-nota-captura { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; color: #d7ddff; }

/* Entrada suave de la portada */
@keyframes v3-sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .v3-entra { animation: v3-sube .6s ease both; }
.js .v3-entra-2 { animation-delay: .12s; }

@media (max-width: 860px) {
  .v3-visual { min-height: 0; margin-top: 14px; padding-bottom: 32px; }
  .v3-navegador { display: none; }
  .v3-visual .p-telefono-hero { position: relative; left: auto; bottom: auto; width: min(250px, 64%); margin-inline: auto; transform: rotate(-2deg); }
  .v3-visual .p-hero-biko { right: 0; bottom: 48px; width: min(150px, 36%); }
  .v3-visual .p-flota-racha { top: 10%; bottom: auto; left: 0; }
  .v3-visual .p-flota-correcto { bottom: 96px; left: 0; }
}

/* ---------------- Tarjeta de grupos: ilustración sin recortes ---------------- */
.p-motiva-arte { display: block; width: 100%; max-width: 300px; height: auto; margin-top: auto; padding-top: 12px; object-fit: contain; }
.p-motivacion-grid { align-items: stretch; }

/* ---------------- Tu grupo y tu profesor ---------------- */
.v3-grupo { background: linear-gradient(180deg, var(--p-papel), var(--p-lila)); }
.v3-grupo-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(28px, 5vw, 68px); }
.portada-v2 .v3-grupo h2 { margin: 0; font-size: clamp(32px, 4vw, 50px); line-height: 1.04; letter-spacing: -.045em; }
.v3-grupo-texto > p:not(.eyebrow):not(.v3-nota) { margin: 16px 0 10px; color: var(--p-suave); font-size: clamp(17px, 1.5vw, 19px); }
.v3-nota { margin: 16px 0 0; padding: 12px 14px; border-left: 4px solid var(--p-azul); border-radius: 0 12px 12px 0; background: var(--p-blanco); color: var(--p-suave); font-size: 14.5px; line-height: 1.5; }
.v3-escena {
  display: grid; gap: 16px; padding: clamp(18px, 3vw, 32px); border-radius: 30px;
  background: linear-gradient(155deg, var(--p-blanco) 40%, #fff3d9); border: 1px solid #dfe3f6; box-shadow: 0 24px 50px rgba(42, 55, 109, .12);
}
.v3-escena-gente { display: block; width: 100%; height: auto; }
.v3-actividades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.v3-actividades li { display: grid; align-content: start; gap: 6px; padding: 12px; border-radius: 16px; background: var(--p-blanco); border: 1px solid var(--p-linea); }
.v3-actividades img { width: 40px; height: 40px; }
.v3-actividades b, .v3-actividades small { display: block; }
.v3-actividades b { color: var(--p-tinta); font-size: 15px; line-height: 1.25; }
.v3-actividades small { color: var(--p-suave); font-size: 13px; line-height: 1.35; }
@media (max-width: 860px) { .v3-grupo-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .v3-actividades { grid-template-columns: minmax(0, 1fr); }
  .v3-actividades li { grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; }
}

/* ---------------- Colegios y academias ---------------- */
.v3-colegios { background: var(--p-papel); }
.v3-colegios-panel {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
  gap: clamp(20px, 4vw, 48px); padding: clamp(26px, 4.4vw, 56px); border-radius: 32px; color: #fff;
  background: radial-gradient(circle at 92% 8%, rgba(255, 209, 102, .3), transparent 34%), linear-gradient(140deg, #0f2a6b, #173a9c 60%, #1f4fd1);
  box-shadow: 0 30px 60px rgba(15, 42, 107, .25);
}
.v3-colegios .eyebrow { color: #ffd166; }
.portada-v2 .v3-colegios h2 { margin: 0; color: #fff; font-size: clamp(30px, 3.7vw, 46px); line-height: 1.06; letter-spacing: -.04em; }
.v3-colegios-texto > p:not(.eyebrow) { margin: 14px 0 22px; color: #dfe6ff; font-size: clamp(17px, 1.5vw, 19px); }
.v3-colegios-pasos { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.v3-colegios-pasos li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; color: #e6ebff; font-size: 15px; }
.v3-colegios-pasos b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 255, 255, .16); color: #ffd166; }
.v3-colegios-arte { position: relative; display: grid; gap: 14px; }
.v3-colegios-gente { display: block; width: 100%; height: auto; padding: clamp(10px, 2vw, 18px); border-radius: 24px; background: #fff; }
.v3-identidad { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); }
.v3-identidad-escudo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #ffd166; color: #0f2a6b; }
.v3-identidad b, .v3-identidad small { display: block; }
.v3-identidad small { color: #dfe6ff; font-size: 13px; }
@media (max-width: 860px) {
  .v3-colegios-panel { grid-template-columns: minmax(0, 1fr); }
  .v3-colegios-texto .p-boton { width: 100%; }
}
@media (max-width: 560px) {
  /* Sin la flecha, el botón entra en una sola línea. */
  .v3-colegios-texto .p-boton span { display: none; }
  .v3-colegios-texto .p-boton { padding-inline: 12px; }
}


/* ---------------- Descarga ---------------- */
.v3-descarga { background: var(--p-blanco); border-top: 1px solid var(--p-linea); }
.v3-descarga-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.v3-opcion { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--p-papel); box-shadow: none; }
.portada-v2 .v3-opcion h3 { margin: 0; font-size: 21px; letter-spacing: -.025em; }
.v3-opcion p { margin: 0 0 8px; color: var(--p-suave); font-size: 15.5px; }
.v3-opcion .p-boton { margin-top: auto; width: 100%; }
.v3-opcion details { margin-top: 6px; color: var(--p-suave); font-size: 14.5px; }
.v3-opcion summary { cursor: pointer; color: var(--p-azul-osc); font-weight: 800; }
.v3-opcion ol { margin: 8px 0 0; padding-left: 20px; }
@media (max-width: 860px) { .v3-descarga-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Movimiento ---------------- */
@media (prefers-reduced-motion: reduce) {
  .js .v3-entra { animation: none; }
}

/* ==================================================================
 * Modo oscuro
 * ================================================================== */
html[data-tema="oscuro"] { color-scheme: dark; }
html[data-tema="oscuro"] body.portada-v2 {
  --p-tinta: #f3f5ff;
  --p-texto: #d7dbea;
  --p-suave: #a9afc4;
  --p-papel: #0d1124;
  --p-blanco: #161b33;
  --p-linea: #2b3253;
  --p-lila: #222a52;
  --p-azul-osc: #a9b6ff;
  --p-sombra: 0 14px 34px rgba(0, 0, 0, .35);
  --ink: #f3f5ff;
  --muted: #a9afc4;
  --line: #2b3253;
  background: var(--p-papel);
}
html[data-tema="oscuro"] .portada-v2 .eyebrow { color: #a9b6ff; }
html[data-tema="oscuro"] .v3-colegios .eyebrow { color: #ffd166; }
html[data-tema="oscuro"] .p-barra { background: rgba(13, 17, 36, .88); }
html[data-tema="oscuro"] .portada-v2 .p-nav nav a { color: #c7cce0; }
html[data-tema="oscuro"] .portada-v2 .p-nav nav a:hover { color: #fff; }
html[data-tema="oscuro"] .p-hero.v3-hero {
  --v3-sigue: var(--p-blanco);
  background:
    radial-gradient(circle at 80% 14%, rgba(255, 209, 102, .16), transparent 36%),
    radial-gradient(circle at 8% 92%, rgba(83, 109, 254, .34), transparent 44%),
    linear-gradient(135deg, #0a0e2a 0%, #141c52 55%, #24308c 100%);
}
html[data-tema="oscuro"] .p-flota { background: var(--p-blanco); }
html[data-tema="oscuro"] .p-flota-check { background: #173a2c; color: #7ff0bf; }
html[data-tema="oscuro"] .p-telefono { border-color: #05060c; box-shadow: 0 0 0 1px #343c63, 0 30px 60px rgba(0, 0, 0, .5); }
html[data-tema="oscuro"] .p-telefono::before { background: #05060c; }
html[data-tema="oscuro"] .p-examenes, html[data-tema="oscuro"] .p-precios, html[data-tema="oscuro"] .p-faq { background: var(--p-blanco); }
html[data-tema="oscuro"] .p-examen { background: linear-gradient(160deg, #1b2140, #161b33); border-color: var(--p-linea); }
html[data-tema="oscuro"] .p-examen span { color: #a9b6ff; }
html[data-tema="oscuro"] .p-pasos-lista li, html[data-tema="oscuro"] .p-tarjeta, html[data-tema="oscuro"] .p-demo { background: var(--p-blanco); border-color: var(--p-linea); }
html[data-tema="oscuro"] .p-boton-secundario { background: transparent; color: #c9d2ff !important; box-shadow: inset 0 0 0 2px #434c7d, 0 4px 0 #2b3253; }
html[data-tema="oscuro"] .p-enlace, html[data-tema="oscuro"] .p-confianza a, html[data-tema="oscuro"] .p-faq-lista a { color: #a9b6ff !important; }
html[data-tema="oscuro"] .p-etiqueta { color: #c9d2ff; }
html[data-tema="oscuro"] .p-motiva-ancha { background: linear-gradient(135deg, var(--p-blanco), #2a2230); }
html[data-tema="oscuro"] .p-motiva-ancha .p-etiqueta { background: #4a3417; color: #ffd9a8; }
html[data-tema="oscuro"] .p-motiva-biko { background: linear-gradient(135deg, var(--p-blanco), #1e2550); }
/* Las ilustraciones tienen contorno oscuro: sobre papel claro se leen mejor. */
html[data-tema="oscuro"] .p-motiva-arte, html[data-tema="oscuro"] .v3-escena-gente { padding: 10px; border-radius: 18px; background: #f4f5fb; }
html[data-tema="oscuro"] .p-incluye { background: linear-gradient(180deg, var(--p-papel), #151a38 30%, #151a38 70%, var(--p-papel)); }
html[data-tema="oscuro"] .p-vitrina-tabs button:hover { background: rgba(255, 255, 255, .06); }
html[data-tema="oscuro"] .p-vitrina-tabs button[aria-selected="true"] { background: var(--p-blanco); border-color: #434c7d; }
html[data-tema="oscuro"] .p-vitrina-panel { background: var(--p-blanco); border-color: var(--p-linea); }
html[data-tema="oscuro"] .p-lista-check li::before, html[data-tema="oscuro"] .p-vitrina-texto li::before { background: #173a2c; color: #7ff0bf; }
html[data-tema="oscuro"] .p-pro .p-lista-check li::before { background: rgba(242, 193, 78, .2); color: #f2c14e; }
html[data-tema="oscuro"] .v3-grupo { background: linear-gradient(180deg, var(--p-papel), #151a38); }
html[data-tema="oscuro"] .v3-escena { background: linear-gradient(155deg, var(--p-blanco) 40%, #2a2230); border-color: var(--p-linea); }
html[data-tema="oscuro"] .v3-colegios-panel { box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }

/* Demo de la pregunta */
html[data-tema="oscuro"] .demo-ejercicio { background: #101530; border-color: var(--p-linea); color: var(--p-texto); }
html[data-tema="oscuro"] .demo-lectura { background: #1b2140; color: var(--p-texto); }
html[data-tema="oscuro"] .demo-cursos button { background: #1b2140; border-color: var(--p-linea); color: var(--p-tinta); }
html[data-tema="oscuro"] .demo-cursos small { color: var(--p-suave); }
html[data-tema="oscuro"] .demo-opciones button { background: #1b2140; border-color: var(--p-linea); color: var(--p-tinta); }
html[data-tema="oscuro"] .demo-opciones button span { background: #2b3253; color: var(--p-tinta); }
html[data-tema="oscuro"] .demo-opciones button:hover, html[data-tema="oscuro"] .demo-opciones button[aria-pressed="true"] { background: #222a52; border-color: #a9b6ff; }
html[data-tema="oscuro"] .demo-opciones button[data-estado="error"] { background: #3a2318; border-color: #be7454; }
html[data-tema="oscuro"] .demo-opciones button[data-estado="correcta"] { background: #173a2c; border-color: #469676; }
html[data-tema="oscuro"] .demo-respuesta[data-estado] { background: #3a2c12; color: #ffe2a3; }
html[data-tema="oscuro"] .demo-respuesta[data-estado="correcta"] { background: #173a2c; color: #bff2d9; }
html[data-tema="oscuro"] .demo-ejercicio .button.secondary { background: transparent; color: #c9d2ff; border: 2px solid #434c7d; }
html[data-tema="oscuro"] .demo-error { border-color: var(--p-linea); }
html[data-tema="oscuro"] .demo-error summary { color: #a9b6ff; }

/* Planes actuales: el bloque generado, sin tocar su contenido */
html[data-tema="oscuro"] .p-chip-lanzamiento { background: #3a2c12; color: #ffe2a3; }
html[data-tema="oscuro"] .p-cual p { background: var(--p-papel); }
html[data-tema="oscuro"] .portada-v2 .p-precios .plan-card { background: #1b2140; border-color: var(--p-linea); color: var(--p-texto); }
html[data-tema="oscuro"] .portada-v2 .p-precios .plan-destacado { border-color: var(--p-azul); }
html[data-tema="oscuro"] .portada-v2 .p-precios .plan-pro { background: linear-gradient(180deg, #2a2230, #1b2140 45%); border-color: #8a6d2a; }
html[data-tema="oscuro"] .portada-v2 .p-precios .plan-pro .plan-tag { background: #4a3a14; color: #ffe2a3; }
html[data-tema="oscuro"] .portada-v2 .p-precios .plan-beneficios li::before { background: #173a2c; }
html[data-tema="oscuro"] .portada-v2 .p-precios .plan-cupos-info { color: #d9c48a !important; }
html[data-tema="oscuro"] .plan-card .plan-beneficios li, html[data-tema="oscuro"] .plan-nota, html[data-tema="oscuro"] .plan-price small { color: var(--p-suave); }
html[data-tema="oscuro"] .plan-price .por-dia { color: #7ff0bf; }
html[data-tema="oscuro"] .comparativa { background: #1b2140; border-color: var(--p-linea); }
html[data-tema="oscuro"] .comparativa summary { color: var(--p-tinta); }
html[data-tema="oscuro"] .comparativa-tabla th, html[data-tema="oscuro"] .comparativa-tabla td { border-top-color: var(--p-linea); color: var(--p-texto); }
html[data-tema="oscuro"] .comparativa-tabla thead th { background: var(--p-lila); color: var(--p-tinta); }
html[data-tema="oscuro"] .clase-pro { background: #1b2140; border-color: #8a6d2a; }
html[data-tema="oscuro"] .clase-pro-head .eyebrow { color: #ffe2a3; }
html[data-tema="oscuro"] .clase-pro-pasos li { background: var(--p-blanco); border-color: var(--p-linea); }
html[data-tema="oscuro"] .clase-pro-pasos li > b { background: #4a3a14; color: #ffe2a3; }
html[data-tema="oscuro"] .garantia-bloque { background: #12261f; }
html[data-tema="oscuro"] .garantia-bloque > b { color: #7ff0bf; }
html[data-tema="oscuro"] .garantia-bloque p { color: #bcd9cd; }
html[data-tema="oscuro"] .faq-pro summary { color: var(--p-tinta); }
html[data-tema="oscuro"] .p-precios-confianza { color: var(--p-suave); }


/* Detalles */
html[data-tema="oscuro"] .p-faq-lista summary::after { color: #c9d2ff; }
html[data-tema="oscuro"] .p-android-meta { color: var(--p-suave); }
@media (max-width: 760px) {
  html[data-tema="oscuro"] .p-cta-movil { background: rgba(13, 17, 36, .94); }
}
@media (max-width: 900px) {
  html[data-tema="oscuro"] .portada-v2 .p-nav nav { background: var(--p-blanco); }
}