/* ==================================================================
 * Portada v4 sobre portada-v3.css
 * Quitar este archivo devuelve el diseño publicado.
 * ================================================================== */

/* ---------------- Barra integrada con la portada ---------------- */
.p-barra { background: transparent; border-bottom-color: transparent; backdrop-filter: none; transition: background .25s ease, box-shadow .25s ease; }
.p-barra.con-sombra { box-shadow: none; }
.p-barra.v4-solida { background: rgba(22, 30, 112, .94); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(10, 16, 70, .25); }
html[data-tema="oscuro"] .p-barra { background: transparent; }
html[data-tema="oscuro"] .p-barra.v4-solida { background: rgba(13, 17, 36, .94); }
.portada-v2 .p-hero.v3-hero { margin-top: -84px; padding-top: calc(84px + clamp(26px, 4vw, 56px)); overflow: hidden; }

.portada-v2 .p-nav .marca-portada { color: #fff; font-size: clamp(32px, 3.3vw, 44px); }
.v4-marca { color: #fff; letter-spacing: -.045em; }
.portada-v2 .marca-portada .v4-marca span { color: #ffc83d; }
.portada-v2 .p-nav .marca-portada img { background: #fff; border-radius: 12px; padding: 3px; }
.portada-v2 .p-nav .marca-pais { background: rgba(255, 255, 255, .18); color: #fff; }
.portada-v2 .p-pie .marca-portada .v4-marca, .portada-v2 .p-pie .marca-nombre { color: inherit; }
.portada-v2 .menu-button { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); }
.portada-v2 .menu-button .p-menu-icono, .portada-v2 .menu-button .p-menu-icono::before, .portada-v2 .menu-button .p-menu-icono::after { background: #fff; }
.p-barra .v3-tema { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); }
.p-barra .nav-cta { background: #ffc83d !important; color: #171b44 !important; box-shadow: 0 3px 0 #cf970f; }
@media (min-width: 901px) {
  .portada-v2 .p-nav nav a { color: #eef1ff; }
  .portada-v2 .p-nav nav a:hover { color: #fff; }
  .portada-v2 .p-nav nav a.p-nav-entrar { color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent; }
}
@media (max-width: 560px) {
  .portada-v2 .p-hero.v3-hero { margin-top: -66px; padding-top: calc(66px + 24px); }
  .portada-v2 .p-nav .marca-portada { font-size: 30px; }
}
/* En celular chico, la palabra «ingresa.» manda: la etiqueta PERÚ no debe apretar los botones. */
@media (max-width: 430px) { .p-barra .marca-pais { display: none; } }
@media (max-width: 350px) { .portada-v2 .p-nav .marca-portada { font-size: 25px; } .portada-v2 .p-nav .marca-portada img { width: 28px; height: 28px; } }

/* ---------------- Portada: misma imagen, mejor luz y composición ---------------- */
.v4-marca-fondo {
  position: absolute; left: -2vw; bottom: 4%; font: 700 clamp(120px, 27vw, 430px)/.8 'Space Grotesk', sans-serif; letter-spacing: -.06em;
  color: rgba(255, 255, 255, .055); white-space: nowrap; pointer-events: none; user-select: none; animation: v4Respira 12s ease-in-out infinite;
}
@keyframes v4Respira { 50% { transform: translateX(14px); } }
.v3-hero .p-hero-grid { position: relative; z-index: 1; }
.v4-luz { position: absolute; left: 50%; top: 46%; width: 118%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 209, 102, .34), rgba(136, 156, 255, .16) 42%, transparent 66%); animation: v4Luz 7s ease-in-out infinite; }
@keyframes v4Luz { 50% { opacity: .72; scale: 1.05; } }
.v3-visual { --px: 0; --py: 0; }
.v3-visual .v3-navegador { transform: translate(calc(var(--px) * -12px), calc(var(--py) * -10px)); transition: transform .35s ease-out; box-shadow: 0 40px 80px rgba(8, 12, 60, .5); }
.v3-visual .p-telefono-hero { transform: rotate(-3deg) translate(calc(var(--px) * 16px), calc(var(--py) * 12px)); transition: transform .35s ease-out; z-index: 2; }
.v3-visual .p-hero-biko { z-index: 3; animation: v4Flota 5s ease-in-out infinite; filter: drop-shadow(0 16px 18px rgba(8, 12, 60, .35)); }
.v3-visual .p-flota { z-index: 4; animation: v4Flota 6s ease-in-out infinite; }
.v3-visual .p-flota-correcto { animation-delay: -2s; }
@keyframes v4Flota { 50% { translate: 0 -9px; } }
@media (max-width: 860px) { .v3-visual .p-telefono-hero { transform: rotate(-2deg); } }

/* ---------------- Pruébalo ahora: una franja, no un bloque ---------------- */
.portada-v2 .v4-demo { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); align-items: center; gap: 12px 20px; padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 26px); border-radius: 22px; }
.portada-v2 .v4-demo .demo-ancla { position: absolute; }
.portada-v2 .v4-demo .demo-intro { margin: 0; display: block; }
.portada-v2 .v4-demo .demo-intro img, .portada-v2 .v4-demo .demo-intro p:not(.eyebrow) { display: none; }
.portada-v2 .v4-demo .eyebrow { margin: 0 0 2px; }
.portada-v2 .v4-demo .demo-intro h2 { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.1; letter-spacing: -.03em; }
.portada-v2 .v4-demo .demo-cursos { gap: 8px; }
.portada-v2 .v4-demo .demo-cursos button { min-height: 58px; padding: 8px 12px; border-radius: 14px; }
.portada-v2 .v4-demo .demo-cursos strong { font-size: 15px; }
.portada-v2 .v4-demo .demo-cursos small { display: none; }
.portada-v2 .v4-demo .demo-ejercicio, .portada-v2 .v4-demo .demo-nota, .portada-v2 .v4-demo noscript { grid-column: 1 / -1; }
.portada-v2 .v4-demo .demo-nota { margin: 0; font-size: 13px; }
@media (max-width: 760px) {
  .portada-v2 .v4-demo { grid-template-columns: minmax(0, 1fr); }
  .portada-v2 .v4-demo .demo-cursos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portada-v2 .v4-demo .demo-cursos button { display: grid; justify-items: center; text-align: center; padding: 8px 4px; }
  .portada-v2 .v4-demo .demo-cursos button > span:last-child { display: none; }
  .portada-v2 .v4-demo .demo-cursos strong { font-size: 13px; }
}

/* ---------------- Todo en un solo lugar ---------------- */
.v4-beneficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.v4-beneficio { position: relative; display: grid; align-content: start; gap: 8px; padding: 18px; border-radius: 24px; background: var(--p-blanco); border: 1px solid var(--p-linea); color: inherit; text-decoration: none; box-shadow: 0 12px 28px rgba(42, 55, 109, .07); transition: transform .22s cubic-bezier(.3, 1.4, .6, 1), box-shadow .22s ease; }
.v4-beneficio:hover { transform: translateY(-4px); box-shadow: 0 20px 38px rgba(42, 55, 109, .14); }
.v4-beneficio img:not(.v4-mosaico img) { width: 72px; height: 72px; object-fit: contain; }
.v4-beneficio h3 { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.12; letter-spacing: -.025em; color: var(--p-tinta); }
.v4-beneficio p { margin: 0; color: var(--p-suave); font-size: 15.5px; line-height: 1.42; }
.v4-etiqueta { justify-self: start; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--p-azul-osc, #2f43c4); background: var(--p-lila); }
.v4-etiqueta.v4-oro, .v4-oro { color: #8a5a00 !important; background: transparent !important; border: 1.5px solid rgba(200, 146, 10, .6); letter-spacing: .06em; }
html[data-tema="oscuro"] .v4-etiqueta.v4-oro, html[data-tema="oscuro"] .v4-oro { color: #f3ce5e !important; }
/* Materias ocupa dos columnas y dos filas: así las seis tarjetas llenan la grilla sin huecos. */
.v4-beneficio-materias { grid-column: span 2; grid-row: span 2; align-content: space-between; }
.v4-mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.v4-mosaico img { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 860px) {
  .v4-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4-beneficio-materias { grid-row: auto; }
  .v4-beneficio:last-child { grid-column: span 2; }
}
@media (max-width: 520px) {
  .v4-beneficios { grid-template-columns: minmax(0, 1fr); }
  .v4-beneficio-materias, .v4-beneficio:last-child { grid-column: auto; }
  .v4-beneficio:not(.v4-beneficio-materias) { grid-template-columns: 62px minmax(0, 1fr); column-gap: 12px; }
  .v4-beneficio:not(.v4-beneficio-materias) .v4-etiqueta { grid-column: 1 / -1; }
  .v4-beneficio:not(.v4-beneficio-materias) img { grid-row: span 2; width: 58px; height: 58px; }
}
.v4-mundos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 8px; scroll-snap-type: x proximity; }
.v4-mundos figure { margin: 0; scroll-snap-align: start; overflow: hidden; border-radius: 16px; background: var(--p-blanco); border: 1px solid var(--p-linea); }
.v4-mundos img { display: block; width: 100%; height: auto; }
.v4-mundos figcaption { padding: 8px 10px; font-size: 14px; font-weight: 800; color: var(--p-tinta); }
.v4-vitrina-titulo { margin: 16px 0 10px; font-weight: 800; color: var(--p-tinta); font-size: 17px; }

/* ---------------- Un reto ---------------- */
.v4-reto { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 230px); align-items: center; gap: clamp(14px, 3vw, 34px); padding: clamp(16px, 3vw, 34px); border-radius: 32px; color: #fff; overflow: hidden; background: radial-gradient(circle at 16% 10%, rgba(255, 209, 102, .22), transparent 40%), linear-gradient(135deg, #1a2785, #2f43c4 60%, #536dfe); box-shadow: 0 26px 54px rgba(26, 39, 133, .3); }
.v4-reto-camino { position: relative; min-width: 0; aspect-ratio: 640 / 300; }
.v4-reto-camino svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v4-ruta-fondo, .v4-ruta-avance { fill: none; stroke-linecap: round; stroke-width: 15; }
.v4-ruta-fondo { stroke: rgba(255, 255, 255, .2); stroke-dasharray: 1 26; }
.v4-ruta-avance { stroke: #ffc83d; stroke-width: 11; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.2s cubic-bezier(.4, 0, .3, 1); }
.v4-visto .v4-ruta-avance { stroke-dashoffset: 470; }
.v4-nivel { position: absolute; display: grid; place-items: center; width: clamp(34px, 5vw, 56px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; font: 700 clamp(15px, 2vw, 22px)/1 'Space Grotesk', sans-serif; background: rgba(255, 255, 255, .22); color: #fff; border: 3px solid rgba(255, 255, 255, .5); }
.v4-nivel.hecho { background: #2bb673; border-color: #fff; }
.v4-nivel.actual { background: #ffc83d; color: #171b44; border-color: #fff; animation: v4Pulso 1.8s ease-in-out infinite; }
.v4-nivel.meta { background: #fff; color: #cf970f; border-color: #ffc83d; }
@keyframes v4Pulso { 50% { scale: 1.13; box-shadow: 0 0 0 10px rgba(255, 200, 61, .25); } }
.v4-reto-biko { position: absolute; left: 44%; top: 2%; width: 33%; height: auto; filter: drop-shadow(0 12px 14px rgba(8, 12, 60, .35)); animation: v4Flota 5s ease-in-out infinite; }
.v4-globo { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 14px; background: #fff; color: #171b44; box-shadow: 0 10px 22px rgba(8, 12, 60, .25); animation: v4Flota 6s ease-in-out infinite; }
.v4-globo img { width: 30px; height: 30px; }
.v4-globo b, .v4-globo small { display: block; }
.v4-globo b { font-size: 13.5px; line-height: 1.1; }
.v4-globo small { font-size: 11.5px; color: #5d6272; }
.v4-globo-a { left: 0; top: 4%; }
.v4-globo-b { right: 2%; bottom: 0; animation-delay: -2.5s; }
.v4-reto-telefono { width: 100%; margin: 0; transform: rotate(2deg); }
.v4-reto-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.v4-reto-tarjeta { padding: 16px; border-radius: 20px; background: var(--p-blanco); border: 1px solid var(--p-linea); transition: transform .22s cubic-bezier(.3, 1.4, .6, 1); }
.v4-reto-tarjeta:hover { transform: translateY(-3px) rotate(-.6deg); }
.v4-reto-tarjeta img { display: block; height: 64px; width: auto; margin-bottom: 6px; }
.v4-reto-tarjeta h3 { margin: 0 0 3px; font-size: 19px; color: var(--p-tinta); letter-spacing: -.02em; }
.v4-reto-tarjeta p { margin: 0; color: var(--p-suave); font-size: 14.5px; line-height: 1.38; }
@media (max-width: 860px) {
  .v4-reto { grid-template-columns: minmax(0, 1fr); }
  .v4-reto-telefono { display: none; }
  .v4-reto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .v4-globo small { display: none; } .v4-globo img { width: 24px; height: 24px; } .v4-globo { padding: 5px 8px; } }

/* ---------------- Tu grupo ---------------- */
.portada-v2 .v3-escena { padding: clamp(12px, 2vw, 20px); gap: 12px; }
.v4-salon { display: block; width: 100%; height: auto; border-radius: 20px; }
html[data-tema="oscuro"] .v3-escena-gente.v4-salon { padding: 0; background: transparent; }

/* ---------------- Colegios: una sola invitación ---------------- */
.v4-colegios .v3-colegios-arte { align-self: center; }
.v4-colegios .v3-colegios-gente { padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .v4-marca-fondo, .v4-luz, .v3-visual .p-hero-biko, .v3-visual .p-flota, .v4-nivel.actual, .v4-reto-biko, .v4-globo { animation: none; }
  .v3-visual .v3-navegador, .v3-visual .p-telefono-hero, .v4-beneficio, .v4-reto-tarjeta { transition: none; }
  .v4-ruta-avance { transition: none; }
}