/* ===== Oxford Centre — estilos compartidos de subpáginas =====
   ÍNDICE
   01 Tokens ........ :root único (colores, tipografía, curva de movimiento)
   02 Base .......... reset, body, imágenes, enlaces
   03 Plantilla ..... componentes compartidos (incluye el ticket de reserva) + capa por página (body.pg-*)
   04 Páginas ....... 04.1 Pagos/Examen · 04.2 Presencial · 04.3 Niños · 04.4 Online · 04.5 Inicio (home) · 04.6 Nosotros (siempre al final)

   GUÍA RÁPIDA
   · Color, fuente o curva nueva → en 01, nunca suelta dentro de un componente.
   · Algo que se repite en varias páginas → en 03 (plantilla), y la variación por página en body.pg-*.
   · Una página nueva → su propia sección 04.x ANTES de Nosotros, con todo escopeado con :where(.pg-x).
   · Comentarios con código se conservan: sirven de respaldo de decisiones.
   ===================================================== */

/* ╔══════════════════════════════════════════════════════════════╗
   ║ 01  TOKENS                                                   ║
   ╚══════════════════════════════════════════════════════════════╝
   :root único: aquí se cambian colores, tipografías y curvas para todo el sitio. */

:root{
  /* Marca */
  --oxford:#002147; --oxford-deep:#001330; --violet:#6C4CF1; --violet-deep:#4F2EDC; --violet-tint:#efeaff; --red:#E8442E;
  --lime:#D4FF3D;         /* acento lima: botón del header y detalles sobre fondo oscuro */
  --lilac:#B9A6FF;        /* violeta claro para texto sobre fondo oscuro */
  /* Superficies y líneas */
  --bg:#ffffff;           /* fondo de página, secciones y tarjetas (todo menos header y footer) */
  --white:#FDFDFB; --off:#F5F4FE; --line:#E3E1F0;
  /* Texto */
  --ink:#1A1F2C; --ink-soft:#5A6072;
  /* Acentos de título */
  --title-accent:#e63160; /* <span class="vio"> dentro de los títulos */
  --title-line:#1474b9;   /* subrayado bajo los títulos de sección */
  /* Forma */
  --r:22px;
  /* Tipografía */
  --disp:'Bricolage Grotesque',sans-serif; --body:'Instrument Sans',sans-serif; --mono:'Montserrat','Instrument Sans',sans-serif;
  /* Movimiento: una sola curva para todo el sitio */
  --ease:cubic-bezier(.22,.9,.35,1);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ 02  BASE                                                     ║
   ╚══════════════════════════════════════════════════════════════╝
   Reset y reglas globales (body, imágenes, enlaces). */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--body); color:var(--ink); background:var(--bg); line-height:1.6; }
img{ max-width:100%; display:block; }
a{ color:var(--violet-deep); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║ 03  PLANTILLA COMPARTIDA                                     ║
   ╚══════════════════════════════════════════════════════════════╝
   Header, hero, botones, formularios, cards, footer… y la capa por página (body.pg-*). */

/* ===== Header ===== */
.site-header{ position:sticky; top:0; z-index:800; }
/* Pantallas grandes: header y topbar crecen por pasos (igual que el contenido de cada página) para llenar el monitor en vez de quedarse pequeños. */
@media(min-width:1600px){ .site-header{ zoom:1.08; } }
@media(min-width:1920px){ .site-header{ zoom:1.16; } }
@media(min-width:2240px){ .site-header{ zoom:1.26; } }
@media(min-width:2560px){ .site-header{ zoom:1.37; } }
@media(min-width:3200px){ .site-header{ zoom:1.55; } }
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 5vw;
  background: rgba(253,253,251,.94);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--oxford);
  position: relative;
  z-index: 800;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .35s var(--ease);
  flex-shrink: 0;
}
.brand-mark img{ width:40px; height:40px; object-fit:contain; }
.brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.06); }
.brand-name b{ display:block; font-family:var(--disp); font-weight:700; font-size:19px; color:var(--oxford); line-height:1.1; }
.brand-name .tagline{ display:block; font-size:11px; font-weight:500; color:var(--ink-soft); }
.nav ul{ display:flex; align-items:center; gap:22px; list-style:none; }
.nav ul a{ text-decoration:none; color:var(--ink); font-size:14.5px; font-weight:600; }
.nav ul a:hover{ color:var(--violet-deep); }
.nav ul a.active{ color:var(--violet-deep); }
.cta-nav{
  background: var(--lime) !important;
  color: var(--oxford-deep) !important;
  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--oxford);
  font-weight: 800 !important;
  transition: transform .2s var(--ease);
  display: inline-block;
}
.cta-nav:hover{ transform:translate(-2px,-2px); }
.nav-burger{ display:none; background:none; border:2px solid var(--oxford); border-radius:10px; padding:8px 14px; font-family:var(--mono); font-size:12px; font-weight:600; cursor:pointer; color:var(--oxford); }
.topbar{
  background: var(--oxford-deep);
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 9px 5vw;
  gap: 6px;
  font-family: var(--mono);
  letter-spacing: .01em;
}
.topbar b{ color:#fff; font-weight:600; }
.topbar a{ color:var(--lilac); text-decoration:none; font-weight:600; }
.topbar a:hover{ text-decoration:underline; }
.topbar .promo{ color:rgba(255,255,255,.9); font-size:13px; text-align:center; }
.topbar .promo b{ color:var(--lilac); }
.topbar .topbar-contact{ font-size:12px; color:rgba(255,255,255,.82); }
@media(min-width:641px){
  .topbar .topbar-contact{ position:absolute; right:5vw; top:50%; transform:translateY(-50%); }
}
.mobile-menu{ display:none; background:var(--white); border-bottom:2px solid var(--oxford); padding:10px 0 18px; }
/* Sticky: queda pegado justo debajo del header (top = alto del header; el menú está fuera de él en el HTML) */
.mobile-menu{ position:sticky; top:92px; z-index:790; }
@media(max-width:640px){ .mobile-menu{ top:106px; } }
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:block; padding:10px 5vw; text-decoration:none; color:var(--ink); font-weight:600; font-size:15px; }
@media(max-width:960px){
  .nav ul{ display:none; }
  .nav-burger{ display:block; }
}
@media(max-width:640px){
  .topbar{ flex-direction:column; text-align:center; font-size:11px; padding:8px 4vw; gap:4px; }
  .topbar .promo{ font-size:11.5px; }
  .topbar .topbar-contact{ font-size:10px; }
}
/* ===== Page hero ===== */
.page-hero{
  /*background:var(--off);*/
  padding: 40px 5vw 68px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(rgba(0,33,71,.07) 1.1px, transparent 1.1px);
  /*background-size:22px 22px;*/
}
.page-hero .crumb{
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet-deep);
  background: var(--violet-tint);
  border: 1.5px solid var(--violet);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 22px;
}
.page-hero h1{
  font-family: var(--disp);
  font-size: clamp(70px,5vw,56px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--oxford);
  line-height: 1.08;
  max-width: 820px;
  margin: 0 auto 18px;
}
.page-hero h1 .vio{ color:var(--violet); }
.page-hero .intro{ font-size:17px; color:var(--ink-soft); max-width:640px; margin:0 auto; }
.page-hero .hero-cta{ margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* ===== Hero con cotizador ===== */
/* Las páginas de programa abren con titular + formulario. El plan de la pestaña
   va fijo: se lee del atributo data-plan del <form>. Las cifras van debajo. */
.page-hero.hero-split{ text-align:left; padding:60px 5vw 62px; }
.hero-split-wrap{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.04fr);
  gap: 52px;
  align-items: center;
}
.hero-copy h1{ max-width:none; margin:0 0 16px; }
.hero-copy .intro{ margin:0; max-width:none; }
.hero-copy .hero-plan{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.hero-copy .hero-plan b{ color:var(--oxford); }
.hero-copy .hero-cta{ justify-content:flex-start; margin-top:22px; }
.hero-form{
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  box-shadow: 8px 8px 0 var(--violet);
  padding: 26px 26px 22px;
  max-width: 460px;
  width: 100%;
  justify-self: end;
  text-align: center;
}
.hero-form .hf-title{
  font-family: var(--disp);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--oxford);
  line-height: 1.15;
  margin: 0 0 6px;
}
.hero-form .hf-title .vio{ color:var(--violet); }
.hero-form .hf-sub{ font-size:13px; color:var(--ink-soft); margin:0 0 18px; line-height:1.45; }
.hero-split .stats-bar{ margin-top:50px; }
@media(max-width:960px){
  .page-hero.hero-split{ text-align:center; padding:48px 5vw 52px; }
  .hero-split-wrap{ grid-template-columns:1fr; gap:32px; }
  .hero-copy .hero-cta{ justify-content:center; }
  .hero-form{ justify-self:center; box-shadow:6px 6px 0 var(--violet); }
}
/* etiqueta solo para lectores de pantalla: el texto guía va dentro del campo */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.quote-tag{
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--violet-deep);
  background: var(--violet-tint);
  border: 1.5px solid var(--violet);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 14px;
}
.qf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left; }
.qf-field.qf-full{ grid-column:1 / -1; }
.qf-field input, .qf-field select{
  width: 100%;
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.qf-field select{
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23002147' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.qf-field select:invalid{ color:var(--ink-soft); }
.qf-field input::placeholder{ color:var(--ink-soft); opacity:.85; }
.qf-field input:focus, .qf-field select:focus{
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(108,76,241,.14);
}
.qf-field input.invalid, .qf-field select.invalid{ border-color:var(--red); background-color:#fff6f5; }
.quote-form .consent{
  display: flex;
  gap: 9px;
  align-items: flex-start;
  text-align: left;
  margin: 14px 0 12px;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  cursor: pointer;
}
.quote-form .consent input{ margin-top:3px; width:16px; height:16px; accent-color:var(--violet); flex-shrink:0; cursor:pointer; }
.quote-form .consent a{ color:var(--violet-deep); font-weight:600; }
.quote-form .consent em{ color:var(--red); font-style:normal; }
.quote-form .consent.invalid, .quote-form .consent.invalid a{ color:var(--red); }
.quote-form .btn{ width:100%; justify-content:center; border:none; cursor:pointer; font-family:var(--body); padding:14px 22px; }
.qf-nota{ text-align:center; margin-top:10px; font-size:11.5px; color:var(--ink-soft); }
@media(max-width:560px){
  .qf-grid{ grid-template-columns:1fr; }
}
/* ===== Buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  padding: 15px 26px;
  border-radius: 14px;
  transition: transform .22s var(--ease), box-shadow .22s;
}
.btn-main{ background:var(--violet); color:#fff; box-shadow:4px 4px 0 var(--oxford); }
.btn-main:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--oxford); }
.btn-line{ border:2.5px solid var(--oxford); color:var(--oxford); background:transparent; }
.btn-line:hover{ background:var(--oxford); color:#fff; }
/* ===== Formulario de inscripción / cotización ===== */
.plan-form{
  max-width: 760px;
  margin: 52px auto 0;
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  padding: 36px 34px 32px;
  box-shadow: 8px 8px 0 var(--violet);
}
.pf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:640px){
  .pf-grid{ grid-template-columns:1fr; }
}
.pf-field.pf-full{ grid-column:1 / -1; }
.pf-field label{
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pf-field input, .pf-field select, .pf-field textarea{
  width: 100%;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .2s, box-shadow .2s;
}
.pf-field textarea{ resize:vertical; }
.pf-field input:focus, .pf-field select:focus, .pf-field textarea:focus{
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(108,76,241,.14);
}
.pf-field input.invalid, .pf-field select.invalid, .pf-field textarea.invalid{
  border-color: var(--red);
  background: #fff6f5;
}
.plan-form .consent{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0 20px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
.plan-form .consent input{ margin-top:3px; width:16px; height:16px; accent-color:var(--violet); flex-shrink:0; cursor:pointer; }
.plan-form .consent a{ color:var(--violet-deep); font-weight:600; }
.plan-form .consent em{ color:var(--red); font-style:normal; }
.plan-form .consent.invalid, .plan-form .consent.invalid a{ color:var(--red); }
.plan-form .btn-cta{ width:100%; justify-content:center; }
.pf-nota{ text-align:center; margin-top:14px; font-size:12.5px; color:var(--ink-soft); }
.form-ok{
  display: none;
  margin-top: 16px;
  text-align: center;
  background: #eaf6ef;
  border: 2px solid #177a4c;
  color: #115c38;
  border-radius: 12px;
  padding: 14px;
  font-weight: 600;
  font-size: 14px;
}
/* ===== Pagos en línea ===== */
.pago-wrap{
  display: grid;
  grid-template-columns: 2.0fr 1.9fr 1.9fr;
  gap: 24px;
  max-width: 1300px;
  margin: 52px auto 0;
  align-items: start;
}
@media(max-width:900px){
  .pago-wrap{ grid-template-columns:1fr; }
}
.pago-portal, .pago-qr{
  background: #fff;
  border-radius: var(--r);
  padding: 30px 28px;
  box-shadow: 6px 6px 20px rgba(0,33,71,.10);
}
.pago-qr{ box-shadow:6px 6px 20px rgba(108,76,241,.25); border-color:var(--violet); }
.pago-portal h3, .pago-qr h3{
  font-family: var(--disp);
  font-size: 21px;
  font-weight: 800;
  color: var(--oxford);
  margin: 10px 0 10px;
  letter-spacing: -.01em;
}
.pago-portal p, .pago-qr p{ font-size:15px; color:var(--ink-soft); line-height:1.6; }
.pago-pasos{ list-style:none; margin:18px 0 22px; counter-reset:paso; }
.pago-pasos li{
  counter-increment: paso;
  position: relative;
  padding: 11px 0 11px 38px;
  border-top: 1.5px solid var(--line);
  font-size: 14.5px;
  color: var(--ink);
}
.pago-pasos li::before{
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 11px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--violet-deep);
}
.pago-nota{ margin-top:16px; font-size:13.5px; }
.pago-nota a{ color:var(--violet-deep); font-weight:600; }
.qr-slot{
  aspect-ratio: 1/1;
  max-width: 260px;
  margin: 18px auto;
  border-radius: 16px;
  background: var(--violet-tint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  padding: 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--violet-deep);
}
.qr-slot small{ font-family:var(--body); font-size:11.5px; font-weight:500; opacity:.75; }
.qr-slot img{ width:100%; height:100%; object-fit:contain; }
.pago-apps-txt{ text-align:center; font-size:13.5px; font-weight:600; color:var(--oxford) !important; margin-bottom:12px; }
.pago-apps{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.pago-apps li{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--off);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
}
.pago-aviso{
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #feeceb;
  border: 1.5px solid var(--red);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
}
.pago-aviso b{ color:var(--red); }
.pago-aviso a{ color:var(--red); font-weight:700; }
/* ===== Descripción "¿para qué sirve?" en las fichas de examen ===== */
.ex-for{
  background: var(--off);
  border-left: 3px solid var(--violet);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  margin: 4px 0 6px;
  font-size: 14.5px;
  line-height: 1.55;
}
.ex-for b{ color:var(--oxford); }
/* ===== CTA en línea (reservar cupo) ===== */
.cta-inline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding: 26px 32px;
  border-radius: var(--r);
  background: var(--oxford);
  border: 2.5px solid var(--oxford);
  box-shadow: 7px 7px 0 var(--violet);
}
.cta-inline-txt b{
  display: block;
  font-family: var(--disp);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.cta-inline-txt span{
  display: block;
  margin-top: 5px;
  font-size: 14.5px;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
}
/* Botón de acción destacado: el único en lima dentro de las páginas de programa */
.btn-cta{
  background: var(--lime);
  color: var(--oxford-deep);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  flex-shrink: 0;
  white-space: nowrap;
}
.hero-cta .btn-cta{ border-radius:999px; box-shadow:none; }
.btn-cta:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(0,33,71,.16); }
@media(max-width:700px){
  .cta-inline{ flex-direction:column; align-items:flex-start; gap:18px; padding:24px; }
  .btn-cta{ width:100%; justify-content:center; }
}
/* ===== Sections ===== */
section{ padding:84px 5vw; position:relative; }
.sec-title{
  font-family: var(--disp);
  font-size: clamp(27px,3.4vw,40px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--oxford);
  line-height: 1.12;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.sec-title .vio{ color:var(--violet); }
.sec-intro{ margin:16px auto 0; color:var(--ink-soft); font-size:16.5px; max-width:560px; text-align:center; }
.alt{ background:var(--off); }
/* ===== Barra de cifras del hero ===== */
.stats-bar{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  max-width: 940px;
  margin: 38px auto 0;
}
.stat-box{
  background: #fff;
  border: 2px solid var(--oxford);
  border-radius: 16px;
  padding: 20px 16px 17px;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(0,33,71,.10);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s;
}
.stat-box:hover{
  transform: translateY(-5px);
  border-color: var(--violet);
  box-shadow: 5px 8px 0 rgba(108,76,241,.28);
}
.stat-num{
  display: block;
  font-family: var(--disp);
  font-size: clamp(30px,3.6vw,42px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--violet);
  line-height: 1;
}
.stat-num.stat-stars{ font-size:24px; letter-spacing:1px; color:#F5A623; }
.stat-lbl{
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
}
@media(max-width:820px){
  .stats-bar{ grid-template-columns:1fr 1fr; }
}
@media(max-width:420px){
  .stat-box{ padding:16px 12px 14px; }
  .stat-lbl{ font-size:11.5px; }
}
/* ===== Prueba en el hero (dato duro) ===== */
.hero-proof{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: 18px;
  padding: 16px 26px;
  box-shadow: 5px 5px 0 var(--violet);
  text-align: left;
  max-width: 560px;
}
.hero-proof .proof-num{
  font-family: var(--disp);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--violet);
  line-height: 1;
  flex-shrink: 0;
}
.hero-proof .proof-txt{ font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.hero-proof .proof-txt b{ color:var(--oxford); }
@media(max-width:560px){
  .hero-proof{ gap:14px; padding:14px 18px; }
  .hero-proof .proof-num{ font-size:36px; }
  .hero-proof .proof-txt{ font-size:13px; }
}
/* ===== Oportunidades (texto + imagen) ===== */
.op-wrap{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.op-text p{ margin-top:18px; font-size:16.5px; color:var(--ink-soft); line-height:1.65; }
.op-text p b{ color:var(--oxford); }
.op-list{ list-style:none; margin-top:26px; }
.op-list li{
  font-size: 15px;
  color: var(--ink-soft);
  padding: 11px 0 11px 30px;
  border-top: 1.5px solid var(--line);
  position: relative;
}
.op-list li::before{
  content: "→";
  position: absolute;
  left: 0;
  color: var(--violet);
  font-weight: 800;
}
.op-list li b{ color:var(--oxford); }
.op-img{
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--violet);
  aspect-ratio: 4/5;
  background: var(--off);
}
.op-img img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:900px){
  .op-wrap{ grid-template-columns:1fr; gap:34px; }
  .op-img{ aspect-ratio:16/10; max-height:380px; }
}
/* ===== Lista "todo lo que incluye" ===== */
.incluye-grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 0 44px;
  max-width: 980px;
  margin: 52px auto 0;
  border-bottom: 1.5px solid var(--line);
}
.inc-item{
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 4px;
  border-top: 1.5px solid var(--line);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.45;
}
.inc-check{
  color: var(--violet-deep);
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.inc-foot{
  text-align: center;
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.inc-foot b{ color:var(--oxford); }
@media(max-width:760px){
  .incluye-grid{ grid-template-columns:1fr; gap:0; }
}
/* ===== "Todo lo que incluye" en tarjetas apiladas =====
   La columna izquierda queda fija mientras por la derecha van llegando las
   tarjetas, que se apilan una sobre otra dejando ver el borde de la anterior.
   Todo el efecto es CSS (position:sticky); no hay JavaScript de por medio, así
   que el scroll queda a cargo del navegador y no se entrecorta. */
.inc-stack-wrap{
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 60px;
  align-items: start;
  margin-top: 48px;
}
.inc-stack-intro{ position:sticky; top:120px; }
.inc-stack-intro .sec-title,
.inc-stack-intro .sec-intro{ text-align:left; margin-left:0; }
.inc-stack-contador{
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet-deep);
}
/* Cada tarjeta se queda pegada un poco más abajo que la anterior: eso es lo
   que produce el apilado con el borde asomando. */
.inc-stack{ display:flex; flex-direction:column; gap:26px; }
.inc-card{
  position: sticky;
  top: calc(120px + var(--i, 0) * 18px);
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  padding: 30px 32px 32px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
}
/* Un acento distinto por tarjeta para que se distingan al apilarse */
.inc-card{ border-color:var(--acento, var(--oxford)); }
.inc-card:nth-child(6n+1){ --acento:var(--violet); }
.inc-card:nth-child(6n+2){ --acento:#177a4c; }
.inc-card:nth-child(6n+3){ --acento:#b45a12; }
.inc-card:nth-child(6n+4){ --acento:var(--red); }
.inc-card:nth-child(6n+5){ --acento:#1c6ea4; }
.inc-card:nth-child(6n+6){ --acento:var(--oxford); }
.inc-card .inc-num{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--acento);
  margin-bottom: 10px;
}
.inc-card h3{
  font-family: var(--disp);
  font-size: 23px;
  font-weight: 800;
  color: var(--oxford);
  letter-spacing: -.01em;
  margin-bottom: 18px;
  line-height: 1.2;
}
.inc-card ul{ list-style:none; margin:0; padding:0; }
.inc-card ul li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1.5px solid var(--line);
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.45;
}
.inc-card ul li::before{
  content: "✓";
  color: var(--acento);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}
@media(max-width:900px){
  /* En pantallas pequeñas no se apila: las tarjetas se leen una tras otra */
  .inc-stack-wrap{ grid-template-columns:1fr; gap:34px; }
  .inc-stack-intro{ position:static; }
  .inc-stack-intro .sec-title,
  .inc-stack-intro .sec-intro{ text-align:center; margin-left:auto; margin-right:auto; }
  .inc-card{ position:static; min-height:0; }
}
@media(prefers-reduced-motion:reduce){
  .inc-stack-intro, .inc-card{ position:static; }
}
/* ===== Las 4 habilidades ===== */
.hab-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; }
@media(max-width:900px){
  .hab-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:520px){
  .hab-grid{ grid-template-columns:1fr; }
}
.hab-card{
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 26px 22px;
  transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.hab-card:hover{ border-color:var(--violet); transform:translateY(-5px); }
.hab-ico{
  display: block;
  font-family: var(--disp);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--violet);
  margin-bottom: 16px;
  transition: color .28s;
}
.hab-card:hover .hab-ico{ color:var(--violet); }
.hab-card h3{ font-family:var(--disp); font-size:19px; font-weight:800; color:var(--oxford); margin-bottom:7px; }
.hab-card p{ font-size:14px; color:var(--ink-soft); line-height:1.55; }
/* ===== Escalera MCER ===== */
.mcer-title{
  font-family: var(--disp);
  font-size: clamp(22px,2.8vw,30px);
  font-weight: 800;
  color: var(--oxford);
  text-align: center;
  margin-top: 76px;
  letter-spacing: -.02em;
}
.mcer-title .vio{ color:var(--violet); }
.mcer-sub{
  text-align: center;
  margin: 14px auto 0;
  max-width: 600px;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.mcer-ladder{ list-style:none; max-width:900px; margin:44px auto 0; counter-reset:none; }
.mcer-step{
  display: grid;
  grid-template-columns: 76px 168px 1fr;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border-left: 3px solid var(--line);
  position: relative;
  transition: border-color .28s var(--ease), background .28s;
}
.mcer-step:hover{ border-left-color:var(--violet); background:rgba(108,76,241,.045); }
.mcer-lvl{
  font-family: var(--disp);
  font-size: 28px;
  font-weight: 800;
  color: var(--oxford);
  letter-spacing: -.02em;
  line-height: 1;
}
.mcer-name{
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-deep);
}
.mcer-desc{ font-size:15px; color:var(--ink-soft); line-height:1.5; }
.mcer-step.is-mark{ border-left-color:var(--violet); background:var(--violet-tint); border-radius:0 14px 14px 0; }
.mcer-step.is-mark .mcer-lvl{ color:var(--violet-deep); }
/* Punto de partida: se subraya el nivel en vez de rellenar el fondo */
.mcer-step.is-start{ border-left-color:var(--oxford); }
.mcer-step.is-start .mcer-lvl{
  color: var(--oxford);
  box-shadow: inset 0 -8px 0 rgba(108,76,241,.28);
  padding: 0 3px;
}
.mcer-flag{
  grid-column: 2 / -1;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--red);
  margin-top: 6px;
}
.mcer-flag.start{ color:var(--oxford); opacity:.75; }
@media(max-width:720px){
  .mcer-step{ grid-template-columns:60px 1fr; gap:8px 16px; padding:16px 14px; }
  .mcer-name{ align-self:end; }
  .mcer-desc{ grid-column:2 / -1; font-size:14px; }
  .mcer-flag{ grid-column:2 / -1; }
}
/* ===== Herramientas de estudio / certificaciones (imagen + texto) ===== */
.tool-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
@media(max-width:900px){
  .tool-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
  .tool-grid{ grid-template-columns:1fr; }
}
.tool-card{
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(0,33,71,.10);
  transition: transform .3s var(--ease), box-shadow .3s;
  display: flex;
  flex-direction: column;
}
.tool-card:hover{ transform:translateY(-6px); box-shadow:8px 10px 0 rgba(108,76,241,.3); }
.tool-card .tool-img{
  min-height: 190px;
  border: 0;
  border-bottom: 2.5px solid var(--oxford);
  border-radius: 0;
  aspect-ratio: 16/10;
}
.tool-card .tool-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.tool-card figcaption{ padding:22px 24px 26px; }
.tool-card h3{ font-family:var(--disp); font-size:19px; font-weight:800; color:var(--oxford); margin-bottom:7px; }
.tool-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; }
/* ===== Fila de fotos verticales (sin texto: la info va dentro de la imagen) ===== */
.photo-row{
  display: grid;
  grid-template-columns: 1.42fr 1fr 1fr;
  gap: 22px;
  max-width: 1120px;
  margin: 52px auto 0;
  align-items: start;
}
.photo-slot{
  aspect-ratio: 3/4;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--off);
  box-shadow: 6px 6px 0 rgba(0,33,71,.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.photo-slot:hover{ transform:translateY(-7px); box-shadow:8px 12px 0 rgba(108,76,241,.3); }
.photo-slot.is-lg{ box-shadow:8px 8px 0 var(--violet); }
.photo-slot small{ font-family:var(--body); font-size:11.5px; font-weight:500; opacity:.7; }
.photo-slot img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Cuando el espacio ya tiene la foto real, se quita el relleno del marcador */
.photo-slot.has-img{ padding:0; gap:0; }
@media(max-width:820px){
  .photo-row{ grid-template-columns:1fr 1fr; }
  .photo-row .is-lg{ grid-column:1 / -1; aspect-ratio:16/10; }
}
@media(max-width:520px){
  .photo-row{ grid-template-columns:1fr; }
  .photo-row .is-lg{ aspect-ratio:3/4; }
}
/* Una sola tarjeta: centrada y con ancho contenido */
.tool-grid.tool-solo{ grid-template-columns:minmax(0,520px); justify-content:center; }
.tool-solo .tool-img small{
  display: block;
  margin-top: 6px;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 500;
  opacity: .7;
}
/* Variante destacada: una tarjeta grande al lado y dos pequeñas apiladas */
.tool-grid.tool-feature{ grid-template-columns:1.32fr 1fr; grid-auto-rows:minmax(0,1fr); }
.tool-feature .tool-lg{ grid-row:span 2; }
.tool-feature .tool-lg .tool-img{ aspect-ratio:auto; flex:1; min-height:300px; }
.tool-feature .tool-lg figcaption{ padding:26px 30px 30px; }
.tool-feature .tool-lg .mono-tag{ margin-bottom:10px; }
.tool-feature .tool-lg h3{ font-size:25px; margin-bottom:9px; }
.tool-feature .tool-lg p{ font-size:15.5px; }
/* Las pequeñas van con la imagen al lado para caber sin estirarse */
.tool-feature .tool-sm{ flex-direction:row; align-items:stretch; }
.tool-feature .tool-sm .tool-img{
  aspect-ratio: auto;
  width: 40%;
  min-height: 0;
  flex-shrink: 0;
  border-bottom: 0;
  border-right: 2.5px solid var(--oxford);
  font-size: 11px;
}
.tool-feature .tool-sm figcaption{ padding:20px 22px; align-self:center; }
.tool-feature .tool-sm h3{ font-size:17.5px; }
.tool-feature .tool-sm p{ font-size:13.5px; }
@media(max-width:900px){
  .tool-grid.tool-feature{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .tool-feature .tool-lg{ grid-row:auto; }
  .tool-feature .tool-lg .tool-img{ aspect-ratio:16/10; min-height:0; }
}
@media(max-width:560px){
  .tool-feature .tool-sm{ flex-direction:column; }
  .tool-feature .tool-sm .tool-img{
    width: 100%;
    aspect-ratio: 16/10;
    border-right: 0;
    border-bottom: 2.5px solid var(--oxford);
  }
}
/* Tarjeta destacada suave (curso VIP) */
.card.featured-soft{ border-color:var(--violet); box-shadow:6px 6px 0 rgba(108,76,241,.25); }
.card.featured-soft .mono-tag{ color:var(--violet-deep); }
/* ===== Badge de Google ===== */
.g-badge{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 34px auto 0;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 14px 24px;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(0,33,71,.1);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.g-badge:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--violet); }
.g-badge .g-logo{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:-.02em; }
.g-badge .g-logo .b{ color:#4285F4; }
.g-badge .g-logo .r{ color:#EA4335; }
.g-badge .g-logo .y{ color:#FBBC05; }
.g-badge .g-logo .g{ color:#34A853; }
.g-badge .g-div{ width:1.5px; align-self:stretch; background:var(--line); }
.g-badge .g-score{ font-family:var(--disp); font-weight:800; font-size:20px; color:var(--oxford); line-height:1; }
.g-badge .g-stars{ color:#F5A623; font-size:14px; letter-spacing:2px; display:block; }
.g-badge .g-text{ font-size:12.5px; color:var(--ink-soft); font-weight:600; display:block; }
/* ===== Video testimonios (YouTube) ===== */
.test-video{
  position: relative;
  border: 2px solid var(--oxford);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--oxford-deep);
  margin-bottom: 18px;
  cursor: pointer;
}
.test-video img.yt-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.test-video iframe{ width:100%; height:100%; display:block; border:0; }
.test-video .yt-play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0,19,48,.15), rgba(0,19,48,.55));
  transition: background .25s var(--ease);
}
.test-video:hover .yt-play{ background:linear-gradient(180deg, rgba(0,19,48,.05), rgba(0,19,48,.45)); }
.test-video .yt-play svg{ width:58px; height:41px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)); transition:transform .25s var(--ease); }
.test-video:hover .yt-play svg{ transform:scale(1.12); }
/* ===== Etiqueta de nivel junto al nombre del curso ===== */
.lvl-chip{
  display: inline-block;
  vertical-align: middle;
  margin-left: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--off);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1;
}
.lvl-chip.is-a1{ color:var(--violet-deep); background:var(--violet-tint); border-color:var(--violet); }
/* ===== Subtítulos dentro de "Cursos disponibles" ===== */
.cursos-sub{
  font-family: var(--disp);
  font-size: clamp(19px,2.3vw,25px);
  font-weight: 800;
  color: var(--oxford);
  letter-spacing: -.02em;
  text-align: center;
  margin: 56px auto 0;
  max-width: 760px;
}
.cursos-sub .mono-tag{
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet-deep);
}
.cursos-nota{
  text-align: center;
  margin: 12px auto 0;
  max-width: 640px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.cursos-nota b{ color:var(--oxford); }
.cursos-sub + .cursos-nota + .grid{ margin-top:34px; }
/* ===== Citas de padres y estudiantes ===== */
.parent-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
@media(max-width:860px){
  .parent-quotes{ grid-template-columns:1fr; }
}
.pq{
  background: #fff;
  border: 2px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.pq:hover{ border-color:var(--violet); transform:translateY(-4px); }
.pq p{ font-size:15px; color:var(--ink); line-height:1.6; font-style:italic; }
.pq cite{
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--violet-deep);
  font-style: normal;
}
/* ===== Cita de autoridad ===== */
.quote-sec{ background:var(--oxford); }
.quote-box{ max-width:820px; margin:0 auto; text-align:center; }
.quote-box p{
  font-family: var(--disp);
  font-size: clamp(20px,2.6vw,29px);
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.quote-by{ margin-top:26px; }
.quote-by b{ display:block; color:#fff; font-size:15px; font-weight:800; }
.quote-by span{ display:block; margin-top:4px; font-family:var(--mono); font-size:11.5px; color:var(--lilac); letter-spacing:.06em; }
/* ===== FAQ ===== */
.faq-list{ max-width:820px; margin:52px auto 0; border-bottom:1.5px solid var(--line); }
.faq-item{ border-top:1.5px solid var(--line); }
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 4px;
  position: relative;
  font-family: var(--disp);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--oxford);
  line-height: 1.35;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--violet-deep); }
.faq-item summary::after{
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--disp);
  font-size: 26px;
  font-weight: 400;
  color: var(--violet);
  transition: transform .28s var(--ease);
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item p{
  padding: 0 40px 22px 4px;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.faq-item p b{ color:var(--oxford); }
/* ===== Cards genéricas ===== */
.grid{ display:grid; gap:22px; margin-top:52px; }
.grid.c2{ grid-template-columns:repeat(2,1fr); }
.grid.c3{ grid-template-columns:repeat(3,1fr); }
.grid.c4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1080px){
  .grid.c4{ grid-template-columns:repeat(2,1fr); }
  .grid.c3{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:680px){
  .grid.c2,.grid.c3,.grid.c4{ grid-template-columns:1fr; }
}
.card{
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  padding: 30px 26px;
  box-shadow: 6px 6px 0 rgba(0,33,71,.10);
  transition: transform .3s var(--ease), box-shadow .3s;
  display: flex;
  flex-direction: column;
}
.card:hover{ transform:translateY(-6px) rotate(-.4deg); box-shadow:8px 10px 0 rgba(108,76,241,.3); }
.card h3{ font-family:var(--disp); font-size:20px; font-weight:800; color:var(--oxford); margin-bottom:8px; }
.card .mono-tag{
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-deep);
  margin-bottom: 12px;
}
.card p{ font-size:14.5px; color:var(--ink-soft); }
.card ul{ list-style:none; margin-top:12px; }
.card ul li{ font-size:14px; padding:8px 0 8px 26px; border-top:1px solid var(--line); position:relative; font-weight:500; }
.card ul li::before{ content:"✓"; position:absolute; left:2px; color:var(--violet-deep); font-weight:800; }
/* Botón de acción al pie de una tarjeta: se pega abajo aunque los textos
   tengan distinta longitud, para que los tres queden a la misma altura. */
.card-foot{ margin-top:auto; padding-top:20px; }
.card-foot .btn{ width:100%; justify-content:center; font-size:14.5px; padding:14px 18px; }
/* ===== Misión y visión ===== */
.mv-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:48px; }
@media(max-width:860px){
  .mv-grid{ grid-template-columns:1fr; }
}
.mv-card{
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  padding: 34px 32px;
  box-shadow: 6px 6px 0 rgba(0,33,71,.10);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mv-card:hover{ transform:translateY(-6px); box-shadow:8px 10px 0 rgba(108,76,241,.3); }
/* La visión va en oscuro: es la promesa a futuro y conviene que resalte. */
.mv-card.is-vision{ background:var(--oxford); border-color:var(--oxford); box-shadow:6px 6px 0 var(--violet); }
.mv-card.is-vision:hover{ box-shadow:8px 10px 0 var(--violet); }
.mv-tag{
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet-deep);
  background: var(--violet-tint);
  border-radius: 999px;
  padding: 6px 14px;
}
.mv-card.is-vision .mv-tag{ color:#fff; background:rgba(255,255,255,.12); }
.mv-card h3{
  font-family: var(--disp);
  font-size: clamp(22px,2.4vw,27px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--oxford);
  margin: 16px 0 14px;
}
.mv-card.is-vision h3{ color:#fff; }
.mv-card p{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); }
.mv-card.is-vision p{ color:rgba(255,255,255,.78); }
.mv-card p b{ color:var(--oxford); font-weight:700; }
.mv-card.is-vision p b{ color:#fff; }
/* ===== Principios y valores ===== */
.principios-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:48px; }
@media(max-width:860px){
  .principios-grid{ grid-template-columns:1fr; }
}
.principios-col{
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  padding: 0 0 26px;
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(0,33,71,.10);
}
.principios-head{
  background: var(--oxford);
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.principios-col.is-valores .principios-head{ background:var(--violet-deep); }
.principios-list{ list-style:none; margin:0; padding:26px 28px 0; }
.principios-list li{
  position: relative;
  padding: 0 0 20px 38px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.principios-list li:last-child{ padding-bottom:0; }
.principios-list li b{ color:var(--oxford); font-weight:700; }
.principios-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--oxford);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.principios-col.is-valores .principios-list li::before{ background:var(--violet); }
/* ===== Certificaciones, afiliaciones y patrocinios ===== */
.logo-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 18px;
  margin-top: 26px;
}
.logo-slot{
  border: 2px dashed var(--violet);
  border-radius: 16px;
  background: var(--violet-tint);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--violet-deep);
  line-height: 1.5;
}
.logo-slot small{ font-family:var(--body); font-size:11px; font-weight:500; color:var(--ink-soft); }
.patrocinio-main{
  background: var(--oxford);
  border-radius: var(--r);
  color: #fff;
  padding: 34px 32px;
  box-shadow: 6px 6px 0 var(--violet);
  text-align: center;
  margin-top: 44px;
}
.patrocinio-main .mv-tag{ color:#fff; background:rgba(255,255,255,.12); }
.patrocinio-main h3{
  font-family: var(--disp);
  font-size: clamp(23px,2.6vw,30px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 14px 0 10px;
  color: #fff;
}
.patrocinio-main p{ color:rgba(255,255,255,.78); font-size:15.5px; max-width:620px; margin:0 auto; }
/* ===== Bloque narrativo (página Nosotros) ===== */
.narrativa{ max-width:760px; margin:44px auto 0; }
.narrativa p{ font-size:17px; line-height:1.75; color:var(--ink-soft); margin-bottom:18px; }
.narrativa p b{ color:var(--oxford); font-weight:700; }
.narrativa .destaque{
  font-family: var(--disp);
  font-size: clamp(20px,2.3vw,25px);
  font-weight: 800;
  line-height: 1.28;
  color: var(--oxford);
  border-left: 4px solid var(--violet);
  padding-left: 20px;
  margin: 30px 0;
}
/* ===== Aliados institucionales ===== */
.aliados{ max-width:900px; margin:44px auto 0; border-top:2.5px solid var(--oxford); }
.aliado{
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.aliado b{ font-family:var(--disp); font-size:18px; font-weight:800; color:var(--oxford); }
.aliado span{ font-size:15px; color:var(--ink-soft); }
@media(max-width:640px){
  .aliado{ grid-template-columns:1fr; gap:4px; }
}
/* ===== Sellos de calidad auditados ===== */
.sellos{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:40px; }
.sello{
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: 14px;
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--oxford);
  box-shadow: 3px 3px 0 rgba(0,33,71,.12);
}
.sello small{ display:block; font-family:var(--body); font-size:11.5px; font-weight:500; color:var(--ink-soft); margin-top:3px; }
.sello.is-oxford{ background:var(--oxford); color:#fff; box-shadow:3px 3px 0 var(--violet); }
.sello.is-oxford small{ color:rgba(255,255,255,.72); }
.sellos-nota{ text-align:center; margin-top:24px; font-size:14.5px; font-weight:600; color:var(--ink-soft); }
/* ===== Artículo del blog ===== */
.post-meta{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.post-meta span{ background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:6px 14px; }
.post-figure{
  max-width: 900px;
  margin: 0 auto;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--violet);
  background: #fff;
}
.post-figure img{ width:100%; height:auto; display:block; }
.post-figure figcaption{
  padding: 14px 20px;
  font-size: 13px;
  color: var(--ink-soft);
  border-top: 2px solid var(--line);
  text-align: center;
}
.post-body{ max-width:740px; margin:0 auto; }
.post-body p{ font-size:17px; line-height:1.8; color:var(--ink-soft); margin-bottom:22px; }
.post-body p b, .post-body strong{ color:var(--oxford); font-weight:700; }
.post-body p.lead{ font-size:19px; color:var(--ink); }
.post-body h2{
  font-family: var(--disp);
  font-size: clamp(21px,2.5vw,27px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--oxford);
  line-height: 1.22;
  margin: 48px 0 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.post-body h2 .num{
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--violet);
  color: #fff;
  font-family: var(--mono);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.post-body h3{
  font-family: var(--disp);
  font-size: 19px;
  font-weight: 800;
  color: var(--oxford);
  margin: 32px 0 12px;
}
.post-body ul{ list-style:none; margin:0 0 22px; }
.post-body ul li{
  position: relative;
  padding: 0 0 12px 26px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.post-body ul li::before{ content:"→"; position:absolute; left:0; color:var(--violet-deep); font-weight:800; }
/* Ejemplo de error, consecuencia y forma correcta */
.post-caso{
  background: var(--off);
  border: 2px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 0 14px 14px 0;
  padding: 8px 24px 10px;
  margin: 0 0 26px;
}
.caso-fila{ font-size:16px !important; line-height:1.65 !important; margin:14px 0 !important; }
.caso-et{
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 11px;
  margin-right: 9px;
  background: var(--violet-tint);
  color: var(--violet-deep);
}
.caso-et.is-mal{ background:#fdecea; color:#a8301c; }
.caso-et.is-bien{ background:#eaf6ef; color:#115c38; }
.post-cierre{
  background: var(--oxford);
  color: #fff;
  border-radius: var(--r);
  padding: 34px 32px;
  box-shadow: 6px 6px 0 var(--violet);
  margin-top: 46px;
}
.post-cierre h3{ font-family:var(--disp); font-size:24px; font-weight:800; color:#fff; margin-bottom:12px; }
.post-cierre p{ color:rgba(255,255,255,.78); font-size:16px; margin-bottom:18px; }
.post-cierre ul li{ color:rgba(255,255,255,.78); }
.post-cierre ul li::before{ color:var(--lilac); }
.post-cierre .btn{ margin-top:6px; }
/* Tarjeta destacada del listado del blog */
.post-destacado{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: 0;
  overflow: hidden;
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  box-shadow: 8px 8px 0 var(--violet);
  margin-top: 48px;
}
.post-destacado img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-destacado .pd-txt{ padding:34px 32px; display:flex; flex-direction:column; }
.post-destacado h3{
  font-family: var(--disp);
  font-size: clamp(21px,2.4vw,26px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--oxford);
  line-height: 1.2;
  margin: 12px 0 12px;
}
.post-destacado p{ font-size:15.5px; color:var(--ink-soft); }
@media(max-width:820px){
  .post-destacado{ grid-template-columns:1fr; }
}
/* ===== Placeholder (espacios por alimentar) ===== */
.placeholder{
  border: 2px dashed var(--violet);
  border-radius: var(--r);
  background: var(--violet-tint);
  padding: 34px 28px;
  text-align: center;
  color: var(--violet-deep);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.6;
}
.placeholder small{ display:block; margin-top:6px; color:var(--ink-soft); font-family:var(--body); font-size:12.5px; font-weight:500; }
.ph-img{
  border: 2px dashed var(--line);
  border-radius: var(--r);
  background: var(--off);
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}
/* ===== CTA band ===== */
.cta-band{
  background: var(--oxford);
  border-radius: var(--r);
  margin: 0 5vw 84px;
  padding: 56px 6vw;
  text-align: center;
  color: #fff;
}
.cta-band h3{ font-family:var(--disp); font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-.01em; margin-bottom:10px; }
.cta-band p{ color:rgba(255,255,255,.72); max-width:560px; margin:0 auto 28px; font-size:15.5px; }
/* ===== Footer ===== */
footer{ background:var(--oxford-deep); color:rgba(255,255,255,.72); padding:64px 5vw 34px; font-size:14px; }
.foot-grid{
  display: grid;
  grid-template-columns: 1.5fr repeat(6,minmax(0,1fr));
  gap: 26px 24px;
  max-width: 1360px;
  margin: 0 auto;
}
@media(max-width:1200px){
  .foot-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px; }
}
@media(max-width:760px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
  .foot-grid{ grid-template-columns:1fr; }
}
.foot-brand p{ margin-top:16px; font-size:13.5px; line-height:1.6; max-width:280px; }
/* Marca del pie: sobre fondo oscuro, sin enlace y con colores claros (antes: estilos inline en cada página) */
.brand--static{ pointer-events:none; }
.foot-brand .brand-name b{ color:#fff; }
.foot-brand .brand-name .tagline{ color:var(--lilac); }
footer h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lilac); margin-bottom:16px; font-weight:600; }
footer ul{ list-style:none; }
footer ul li{ margin-bottom:10px; }
footer ul a{ color:rgba(255,255,255,.72); text-decoration:none; }
footer ul a:hover{ color:#fff; text-decoration:underline; }
.follow-strip{ text-align:center; padding:38px 0 8px; }
.follow-title{
  font-family: var(--disp);
  font-size: 23px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.follow-icons{ display:flex; gap:30px; justify-content:center; align-items:center; }
.follow-icons a{ display:inline-flex; transition:transform .22s var(--ease); }
.follow-icons a:hover{ transform:translateY(-4px) scale(1.1); }
.follow-icons svg{ width:30px; height:30px; }
.foot-social{ display:flex; gap:10px; margin-top:18px; }
.foot-social a{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  transition: background .2s, border-color .2s;
}
.foot-social a:hover{ background:var(--violet); border-color:var(--violet); }
.foot-bottom{
  max-width: 1200px;
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
}
/* ============================================================
   CAPA DE PERSONALIZACIÓN POR PÁGINA
   Cada subpágina declara su clase en <body> (pg-presencial, pg-online,
   pg-ninos, pg-empresas, pg-especiales, pg-examenes, pg-pagos,
   pg-blog, pg-nosotros, pg-legal). La paleta de marca no cambia:
   solo varían los acentos, la textura del hero y los micro-detalles,
   para que cada página tenga personalidad propia.
   ============================================================ */
body{ --acc:var(--violet); --acc-sh:rgba(108,76,241,.3); }
body.pg-ninos{ --acc:var(--red); --acc-sh:rgba(232,68,46,.26); }
body.pg-examenes{ --acc:var(--red); --acc-sh:rgba(232,68,46,.26); }
body.pg-empresas{ --acc:var(--lime); --acc-sh:var(--lime); }
body.pg-pagos{ --acc:var(--lime); --acc-sh:rgba(108,76,241,.3); }
body.pg-especiales{ --acc:var(--oxford); --acc-sh:rgba(0,33,71,.22); }
/* Subrayado de acento bajo los títulos de sección */
.sec-title::after{
  content: "";
  display: block;
  width: 58px;
  height: 5px;
  border-radius: 99px;
  background: var(--acc);
  margin: 16px auto 0;
}
body.pg-empresas .sec-title::after, body.pg-pagos .sec-title::after{
  border: 1.5px solid var(--oxford);
  height: 7px;
}
.op-text .sec-title::after{ margin-left:0; }
body.pg-legal .sec-title::after{ display:none; }
/* Sombras de hover teñidas con el acento de cada página */
.card:hover, .tool-card:hover, .photo-slot:hover, .mv-card:hover{ box-shadow:8px 10px 0 var(--acc-sh); }
.stat-box:hover{ border-color:var(--acc); box-shadow:5px 8px 0 var(--acc-sh); }
/* ===== Sticker del hero (texto propio de cada página) ===== */
.page-hero::after{
  position: absolute;
  top: 22px;
  right: 5vw;
  z-index: 2;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 9px 16px;
  border-radius: 999px;
  transform: rotate(2.5deg);
  /* border:2px solid var(--oxford); background:#fff; color:var(--oxford); */
  box-shadow: 3px 3px 0 var(--acc-sh);
}
body.pg-presencial .page-hero::after{ content:"📍 Ibagué · Girardot"; }
body.pg-ninos .page-hero::after{ content:"★ Desde los 4 años"; transform:rotate(-3deg); border-color:var(--red); color:var(--red); }
body.pg-especiales .page-hero::after{ content:"ESP · Inglés a tu medida"; }
body.pg-examenes .page-hero::after{ content:"✓ Test Centre autorizado"; }
/* body.pg-pagos .page-hero::after{ content:"$ Sin matrícula de inscripción"; background:#D4FF3D; border-color:var(--oxford-deep); color:var(--oxford-deep); } */
body.pg-online .page-hero::after{
  content: "● Clases en vivo";
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  animation: livePulse 1.9s ease-in-out infinite;
}
body.pg-empresas .page-hero::after{ content:"B2B · Equipos bilingües"; background:var(--lime); border-color:var(--oxford-deep); color:var(--oxford-deep); box-shadow:3px 3px 0 rgba(0,0,0,.35); }
@keyframes livePulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(232,68,46,.45); }
  50%{ box-shadow:0 0 0 10px rgba(232,68,46,0); }
}
@media(max-width:760px){
  .page-hero::after{ display:none; }
}
/* ===== Texturas de hero propias de cada página ===== */
/* Presencial: puntos + manchas suaves violeta y roja */
body.pg-presencial .page-hero{
  background-image: radial-gradient(460px 320px at 6% 18%, rgba(108,76,241,.10), transparent 70%),
    radial-gradient(420px 300px at 94% 82%, rgba(232,68,46,.07), transparent 70%),
    radial-gradient(rgba(0,33,71,.07) 1.1px, transparent 1.1px);
  background-size: auto, auto, 22px 22px;
}
/* Online: retícula de pantalla + brillo violeta */
body.pg-online .page-hero{
  background-image: radial-gradient(520px 340px at 88% 8%, rgba(108,76,241,.14), transparent 70%),
    linear-gradient(rgba(0,33,71,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,33,71,.055) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
}
/* Niños: confeti multicolor de la propia paleta */
body.pg-ninos .page-hero{
  background-image: radial-gradient(circle 4px at 22px 32px, rgba(232,68,46,.32) 99%, transparent 100%),
    radial-gradient(circle 3px at 76px 86px, rgba(108,76,241,.32) 99%, transparent 100%),
    radial-gradient(circle 5px at 128px 44px, rgba(212,255,61,.9) 99%, transparent 100%),
    radial-gradient(circle 3px at 168px 118px, rgba(0,33,71,.22) 99%, transparent 100%);
  background-size: 200px 150px;
}
body.pg-ninos .page-hero h1 .vio{
  text-decoration: underline wavy rgba(232,68,46,.55);
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}
body.pg-ninos .card:hover{ transform:translateY(-6px) rotate(.9deg) scale(1.01); }
body.pg-ninos .hab-card:nth-child(odd) .hab-ico{ -webkit-text-stroke-color:var(--red); }
body.pg-ninos .hab-card:nth-child(odd):hover .hab-ico{ color:var(--red); }
/* Empresas: hero oscuro corporativo con retícula fina y acento lima */
body.pg-empresas .page-hero{
  background: var(--oxford-deep);
  background-image: radial-gradient(640px 380px at 82% 0%, rgba(108,76,241,.28), transparent 70%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
}
body.pg-empresas .page-hero h1{ color:#fff; }
body.pg-empresas .page-hero h1 .vio{ color:var(--lilac); }
body.pg-empresas .page-hero .intro{ color:rgba(255,255,255,.78); }
body.pg-empresas .hero-plan{ color:rgba(255,255,255,.62); border-top-color:rgba(255,255,255,.16); }
body.pg-empresas .hero-plan b{ color:var(--lime); }
body.pg-empresas .page-hero .crumb{ background:rgba(255,255,255,.08); color:var(--lilac); }
body.pg-empresas .page-hero .btn-line{ border-color:#fff; color:#fff; }
body.pg-empresas .page-hero .btn-line:hover{ background:#fff; color:var(--oxford); }
body.pg-empresas .hero-form{ box-shadow:8px 8px 0 var(--lime); }
body.pg-empresas .page-hero .stat-box{ box-shadow:4px 4px 0 rgba(0,0,0,.35); }
/* Especializado: franjas diagonales técnicas */
body.pg-especiales .page-hero{
  background-image: repeating-linear-gradient(-45deg, rgba(108,76,241,.06) 0 12px, transparent 12px 26px),
    radial-gradient(rgba(0,33,71,.05) 1.1px, transparent 1.1px);
  background-size: auto, 22px 22px;
}
body.pg-especiales .card .mono-tag{ color:var(--red); }
/* Exámenes: hoja de examen rayada con línea de margen roja */
body.pg-examenes .page-hero{
  background-image: linear-gradient(90deg, transparent calc(7% - 1px), rgba(232,68,46,.20) calc(7% - 1px), rgba(232,68,46,.20) calc(7% + 1px), transparent calc(7% + 1px)),
    repeating-linear-gradient(transparent 0 34px, rgba(0,33,71,.07) 34px 35px);
  background-size: auto, auto;
}
body.pg-examenes .page-hero .crumb{ background:#fdecea; color:#a8301c; border-color:var(--red); }
/* Pagos: destello lima + violeta suave */
/* body.pg-pagos .page-hero{ 
  background-image:
    radial-gradient(480px 320px at 92% 10%, rgba(212,255,61,.5), transparent 70%),
    radial-gradient(420px 300px at 4% 88%, rgba(108,76,241,.10), transparent 70%),
    radial-gradient(rgba(0,33,71,.06) 1.1px, transparent 1.1px);
  background-size:auto, auto, 22px 22px;
}*/
/* body.pg-pagos .page-hero .crumb{ background:#D4FF3D; color:var(--oxford-deep); border-color:var(--oxford); } */
/* Blog: comillas editoriales gigantes */
body.pg-blog .page-hero::before{
  content: "“";
  position: absolute;
  top: -48px;
  left: 3vw;
  font-family: var(--disp);
  font-size: 340px;
  line-height: 1;
  font-weight: 800;
  color: rgba(108,76,241,.09);
  pointer-events: none;
}
/* Nosotros: el año de fundación como marca de agua */
body.pg-nosotros .page-hero::before{
  content: "2006";
  position: absolute;
  right: -1vw;
  bottom: -42px;
  font-family: var(--disp);
  font-size: clamp(120px,20vw,240px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(108,76,241,.16);
  pointer-events: none;
}
/* Legal: sobrio y documental, sin textura */
body.pg-legal .page-hero{ background-image:none; border-bottom:2px solid var(--oxford); }
/* ===== Botón "motion": el círculo se expande y se traga el botón =====
   Adaptación en CSS puro del efecto MotionButton (React): al pasar el
   mouse, el círculo crece hasta llenar la pastilla, la flecha se desliza
   y el texto cambia de color. Sin dependencias. */
.btn-motion{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  border-radius: 999px;
  background: var(--violet);
  /*border:2.5px solid var(--oxford); box-shadow:4px 4px 0 rgba(0,33,71,.16);*/
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn-motion:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(0,33,71,.16); }
.btn-motion .circle{
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 46px;
  border-radius: 999px;
  background: var(--white);
  transition: width .55s var(--ease);
}
.btn-motion:hover .circle{ width:calc(100% - 12px); }
.btn-motion .icon{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--violet);
  transition: transform .55s var(--ease);
}
.btn-motion:hover .icon{ transform:translateY(-50%) translateX(7px); }
.btn-motion .icon svg{ width:22px; height:22px; }
.btn-motion .label{
  position: relative;
  z-index: 1;
  margin: 0 24px 0 64px;
  padding: 12px 0;
  font-weight: 800;
  font-size: 15px;
  color: var(--white);
  white-space: nowrap;
  transition: color .45s var(--ease);
}
.btn-motion:hover .label{ color:var(--violet); }
/* Variante lima: para los cierres de página sobre fondo azul oscuro */
.btn-motion.is-lime .circle{ background:var(--lime); }
.btn-motion.is-lime .icon{ color:var(--oxford-deep); }
.btn-motion.is-lime:hover .label{ color:var(--oxford-deep); }
@media(max-width:480px){
  .btn-motion .label{ font-size:14px; margin:0 18px 0 58px; }
}
/* ===== Interacción: aparición al hacer scroll ===== */
.rv{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--rvd,0ms);
  will-change: opacity,transform;
}
.rv.in{ opacity:1; transform:translateY(0); }
/* ===== Barra de progreso de lectura ===== */
.scroll-progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 1200;
  background: linear-gradient(90deg, var(--violet), var(--lime));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
/* ===== FAQ: la respuesta entra con suavidad ===== */
@keyframes faqIn { from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.faq-item[open] p{ animation:faqIn .38s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; }
  .page-hero::after{ animation:none; }
}
/* ===== Accesibilidad ===== */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--oxford);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 0 0 12px 0;
  text-decoration: none;
}
.skip-link:focus{ left:0; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Revelado suave al hacer scroll (.revelar) — lo activa el JS de cada página ── */
.revelar-activo .revelar {
  transition: opacity .7s var(--ease) var(--retraso,0ms),
    translate .7s var(--ease) var(--retraso,0ms),
    scale .7s var(--ease) var(--retraso,0ms),
    transform .3s ease,
    box-shadow .3s ease,
    background-size .35s ease,
    color .35s ease;
}
@keyframes flotar { 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }
/* Estado inicial genérico (lo marca assets/smooth.js): sube desde abajo; los medios y tarjetas entran con zoom suave */
.revelar-activo .revelar:not(.revelar-visible){ opacity:0; translate:0 26px; }
.revelar-activo .revelar[data-revelar="zoom"]:not(.revelar-visible){ translate:none; scale:.94; }

/* ===== Ticket "Reservar cupo" (compartido: Niños y Online) ===== */
/* ----- CTA en línea: ticket troquelado "Reservar cupo" -----
   Tarjeta blanca con línea perforada; el talón (color por página con --ticket-acento) se "rasga" al hacer clic y luego baja al
   formulario (#cotizar). Las medidas del talón viven en variables para que muescas y línea coincidan. */
:where(.pg-ninos, .pg-online) .cta-inline {
  --ticket-talon: 300px;
  --ticket-acento: #fb55c6;
  --ticket-acento-hover: #e63fb3;
  --ticket-tinta: #0f172a;
  --ticket-texto: #475569;
  --ticket-borde: #e2e8f0;
  --ticket-corte: #cbd5e1;
  display: block;
  position: relative;
  padding: 0;
  background: #fff;
  border: 1px solid var(--ticket-borde);
  border-radius: 1.75rem;
  box-shadow: 0 20px 35px -10px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.02);
  /* ancho del talón (escritorio) */
  /* display:block fija el layout aunque una hoja externa (site.css) defina .cta-inline como flex */
}
/* Marca de agua: el mismo logo del header, tenue, a la derecha de la zona de texto */
:where(.pg-ninos, .pg-online) .cta-inline::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 50%;
  right: calc(var(--ticket-talon) + clamp(16px,3vw,48px));
  transform: translateY(-50%);
  height: 80%;
  max-height: 200px;
  aspect-ratio: 240 / 236;
  background: url("../logo-oxford-centre-azul.webp") center / contain no-repeat;
  opacity: .1;
  /* nunca más alta que la tarjeta */
}
:where(.pg-ninos, .pg-online) .cta-inline__cuerpo { position:relative; z-index:10; display:flex; align-items:stretch; width:100%; }
/* Muescas circulares del troquelado: centradas sobre la línea perforada (borde izquierdo del talón) */
:where(.pg-ninos, .pg-online) .cta-inline__muesca {
  position: absolute;
  right: calc(var(--ticket-talon) - 14px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  z-index: 20;
}
:where(.pg-ninos, .pg-online) .cta-inline__muesca--sup { top:-14px; border-bottom:1px solid var(--ticket-borde); }
:where(.pg-ninos, .pg-online) .cta-inline__muesca--inf { bottom:-14px; border-top:1px solid var(--ticket-borde); }
:where(.pg-ninos, .pg-online) .cta-inline-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px,2.5vw,32px) clamp(24px,3vw,40px);
}
:where(.pg-ninos, .pg-online) .cta-inline-txt b {
  font-size: clamp(24px,2.2vw,30px);
  color: var(--ticket-tinta);
  letter-spacing: -.02em;
  line-height: 1.2;
}
:where(.pg-ninos, .pg-online) .cta-inline-txt span {
  margin-top: 12px;
  font-size: clamp(14.5px,1.1vw,16px);
  color: var(--ticket-texto);
  line-height: 1.6;
}
/* Línea perforada entre texto y talón */
:where(.pg-ninos, .pg-online) .cta-inline__corte { position:relative; margin:18px 0; border-right:1px dashed var(--ticket-corte); }
:where(.pg-ninos, .pg-online) .cta-inline__corte-activo {
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  z-index: 30;
  background: linear-gradient(to bottom,var(--ticket-acento),#10b981,transparent);
  animation: ticket-corte .35s ease-in-out forwards;
}
:where(.pg-ninos, .pg-online) .cta-inline__talon {
  position: relative;
  flex: 0 0 var(--ticket-talon);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* El talón ocupa todo el alto y llega al borde derecho de la tarjeta (esquinas redondeadas a la derecha) */
:where(.pg-ninos, .pg-online) .cta-inline__boton {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(20px,2vw,24px);
  border-radius: 0 1.75rem 1.75rem 0;
  text-decoration: none;
  cursor: pointer;
  background: var(--ticket-acento);
  color: #fff;
  border: 0;
  text-align: center;
  transition: background-color .2s ease, transform .15s ease;
}
:where(.pg-ninos, .pg-online) .cta-inline__boton:hover { background:var(--ticket-acento-hover); }
:where(.pg-ninos, .pg-online) .cta-inline__boton:active { transform:scale(.98); }
:where(.pg-ninos, .pg-online) .cta-inline__boton:focus-visible { outline:3px solid var(--oxford); outline-offset:-6px; }
:where(.pg-ninos, .pg-online) .cta-inline__pista {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
:where(.pg-ninos, .pg-online) .cta-inline__pista svg { width:14px; height:14px; transition:transform .2s ease; }
:where(.pg-ninos, .pg-online) .cta-inline__boton:hover .cta-inline__pista svg { transform:rotate(12deg); }
:where(.pg-ninos, .pg-online) .cta-inline__accion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-family: var(--disp);
  font-size: clamp(17px,1.4vw,19px);
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
}
:where(.pg-ninos, .pg-online) .cta-inline__accion svg { width:16px; height:16px; transition:transform .2s ease; }
:where(.pg-ninos, .pg-online) .cta-inline__boton:hover .cta-inline__accion svg { transform:translateX(4px); }
:where(.pg-ninos, .pg-online) .cta-inline__nota { font-size:11px; font-weight:700; letter-spacing:.03em; color:#fff; text-align:center; }
/* Estado tras rasgar */
:where(.pg-ninos, .pg-online) .cta-inline__boton.is-rasgado { animation:ticket-rasgar .65s cubic-bezier(.4,0,.2,1) forwards; pointer-events:none; }
:where(.pg-ninos, .pg-online) .cta-inline__confirmacion {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
  font-family: var(--disp);
  font-size: 14px;
  font-weight: 700;
  color: var(--ticket-tinta);
}
:where(.pg-ninos, .pg-online) .cta-inline__confirmacion.is-visible { display:flex; }
:where(.pg-ninos, .pg-online) .cta-inline__check {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ticket-tinta);
  color: var(--ticket-acento);
  animation: ticket-salto 1s infinite;
}
:where(.pg-ninos, .pg-online) .cta-inline__check svg { width:20px; height:20px; }
:where(.pg-ninos, .pg-online) .ticket-particula {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2000;
  background: var(--ticket-acento);
  animation: ticket-particula .45s ease-out forwards;
}
/* Móvil / tablet: el talón pasa abajo y la línea perforada se vuelve horizontal */
@media(max-width:1024px){
  :where(.pg-ninos, .pg-online) .cta-inline::before { top:20px; right:20px; transform:none; height:90px; max-height:none; }
  :where(.pg-ninos, .pg-online) .cta-inline__cuerpo { flex-direction:column; }
  :where(.pg-ninos, .pg-online) .cta-inline__muesca { display:none; }
  :where(.pg-ninos, .pg-online) .cta-inline__corte { margin:0 18px; border-right:0; border-bottom:1px dashed var(--ticket-corte); }
  :where(.pg-ninos, .pg-online) .cta-inline__corte-activo { display:none; }
  :where(.pg-ninos, .pg-online) .cta-inline__talon { flex-basis:auto; }
  :where(.pg-ninos, .pg-online) .cta-inline__boton { border-radius:0 0 1.75rem 1.75rem; }
}
@media(prefers-reduced-motion:reduce){
  :where(.pg-ninos, .pg-online) .cta-inline__boton, :where(.pg-ninos, .pg-online) .cta-inline__pista svg, :where(.pg-ninos, .pg-online) .cta-inline__accion svg { transition:none; }
  :where(.pg-ninos, .pg-online) .cta-inline__boton.is-rasgado, :where(.pg-ninos, .pg-online) .cta-inline__check { animation:none; }
}
@keyframes ticket-rasgar {
  0%{ transform:scale(1) rotate(0); opacity:1; }
  30%{ transform:translate(15px,10px) rotate(4deg) scale(.98); opacity:.9; }
  100%{ transform:translate(180px,60px) rotate(20deg) scale(.85); opacity:0; }
}
@keyframes ticket-corte {
  0%{ height:0; opacity:1; }
  80%{ opacity:1; }
  100%{ height:100%; opacity:0; }
}
@keyframes ticket-particula {
  0%{ transform:scale(0); opacity:1; }
  100%{ transform:scale(2.2); opacity:0; }
}
@keyframes ticket-salto {
  0%,100%{ transform:translateY(-20%); }
  50%{ transform:none; }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ 04  PÁGINAS                                                  ║
   ╚══════════════════════════════════════════════════════════════╝
   Cada página va aislada con :where(.pg-…): no suma especificidad y no se filtra a las demás. Nuevas páginas: antes de NOSOTROS (que siempre va al final). */

/* ╔══════════════════════════════════════════════════════════════╗
   ║ 04.1  PAGOS Y LANDING DE EXAMEN                                ║
   ╚══════════════════════════════════════════════════════════════╝
   #pagos-en-linea-card · #header-pagos · .finance-* · .ef-course-landing */

/* ---------------------para card ne modalidad pagos------------------- */
#pagos-en-linea-card .mod-card.featured.no-img{
  padding-top: 52px;
}
#pagos-en-linea-card .mod-card.featured{
  background: var(--oxford);
  border-color: var(--oxford);
  box-shadow: 8px 10px 20px var(--violet);
}
#pagos-en-linea-card .mod-card.featured .fav{
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FF7A3D, var(--red));
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -6px rgba(232,68,46,.7);
  animation: favGlow 2.2s ease-in-out infinite;
  z-index: 3;
}
.pago-qr .fav{
  transform: translateX(25%) translateY(-150%) rotate(-2deg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FF7A3D, var(--red));
  color: #fff;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -6px rgba(232,68,46,.7);
  animation: favGlow 2.2s ease-in-out infinite;
  z-index: 3;
}
#pagos-en-linea-card .mod-card{
  position: relative;
  background: #fff;
  border-radius: var(--r);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
  box-shadow: 6px 6px 10px 5px rgba(0,33,71,.10);
}
#pagos-en-linea-card .mod-card .tag{
  font-family: var(--mono);
}
#pagos-en-linea-card .mod-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 22px;
  margin-top: 76px;
  align-items: start;
}
#pagos-en-linea-card .mod-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.mod-grid.mod-grid-sub{
  grid-template-columns: repeat(2, minmax(0,420px));
  justify-content: center;
  margin-top: 22px;
}
#pagos-en-linea-card .mod-card:hover{ transform:translateY(-8px) rotate(-.4deg); box-shadow:8px 12px 20px rgba(108,76,241,.3); }
#pagos-en-linea-card .mod-card .tag{
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 6px 22px 0;
  border: 1.5px solid;
}
#pagos-en-linea-card .mod-card h3{ color:var(--oxford); }
#pagos-en-linea-card .mod-card .place{
  font-family: var(--mono);
  color: var(--violet-deep);
}
#pagos-en-linea-card .mod-card p{ font-size:16.5px; color:var(--ink-soft); margin-bottom:0; flex:1; }
#pagos-en-linea-card .mod-card p b{ color:var(--oxford); }
#pagos-en-linea-card .mod-card.featured p b{ color:#fff; }
#pagos-en-linea-card .mod-card ul{ list-style:none; margin-bottom:26px; }
#pagos-en-linea-card .mod-card ul li{
  font-size: 14px;
  padding: 9px 0 9px 28px;
  border-top: 1px solid var(--line);
  position: relative;
  font-weight: 500;
}
#pagos-en-linea-card .mod-card ul li::before{
  content: "✓";
  position: absolute;
  left: 2px;
  color: var(--violet-deep);
  font-weight: 800;
}
#pagos-en-linea-card .mod-card.featured{
  background: var(--oxford);
  border-color: var(--oxford);
  transform: translateY(-8px) rotate(.5deg);
  box-shadow: 8px 10px 10px var(--violet);
}
#pagos-en-linea-card .mod-card.featured:hover{ transform:translateY(-14px) rotate(0); box-shadow:8px 16px 20px var(--violet); }
#pagos-en-linea-card .mod-card.featured h3{ color:#fff; }
#pagos-en-linea-card .mod-card.featured p{ color:rgba(255,255,255,.72); }
#pagos-en-linea-card .mod-card.featured .place{ color:var(--lilac); }
#pagos-en-linea-card .mod-card.featured ul li{ color:#fff; border-color:rgba(255,255,255,.16); }
#pagos-en-linea-card .mod-card.featured ul li::before{ color:var(--lilac); }
#pagos-en-linea-card .tag-ib{ background:#eaf6ef; color:#177a4c; border-color:#177a4c; }
#pagos-en-linea-card .tag-gi{ background:#fff3ea; color:#b45a12; border-color:#b45a12; }
#pagos-en-linea-card .tag-on{ background:var(--violet); color:#fff; border-color:var(--violet); }
#pagos-en-linea-card .tag-kids{ background:#feeceb; color:var(--red); border-color:var(--red); }
#pagos-en-linea-card .mod-card h3{ font-size:21px; font-weight:800; color:var(--oxford); margin-bottom:4px; letter-spacing:-.01em; line-height:1.15; }
#pagos-en-linea-card .mod-card .place{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--violet-deep);
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: .04em;
}
#pagos-en-linea-card .mod-card.featured .mod-cta{ background:#fff; color:var(--oxford); box-shadow:3px 3px 0 var(--violet); }
#pagos-en-linea-card .mod-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--violet);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 14.5px;
  padding: 13px 20px;
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--oxford);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
#pagos-en-linea-card .mod-cta:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--oxford); }
#pagos-en-linea-card .mod-cta .arr{ transition:transform .22s var(--ease); }
#pagos-en-linea-card .mod-cta:hover .arr{ transform:translateX(4px); }
#pagos-en-linea-card .plan-price{
  margin: 2px 0 14px;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  font-weight: 600;
}
#pagos-en-linea-card .plan-price b{
  font-family: var(--disp);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--lime);
  margin: 0 4px;
}
@media(max-width:1180px){
  #pagos-en-linea-card .mod-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:720px){
  #pagos-en-linea-card .mod-grid{ grid-template-columns:1fr; }
}
@media(max-width:1180px){
  #pagos-en-linea-card .mod-card.featured{ transform:none; }
  #pagos-en-linea-card .mod-card.featured:hover{ transform:translateY(-8px); }
}
@media (max-width: 980px){
  #pagos-en-linea-card .mod-grid,
  #pagos-en-linea-card .mod-grid.cols-3{
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 48px;
  }
  #pagos-en-linea-card .mod-card{
    padding: 28px 22px 24px;
  }
  #pagos-en-linea-card .mod-card.featured.no-img{
    padding-top: 56px;
    /* un poco más de aire para el badge "El más pedido" */
  }
  #pagos-en-linea-card .mod-card.featured{
    transform: none;
    /* quita el giro y el translateY en mobile */
  }
  #pagos-en-linea-card .mod-card:hover,
  #pagos-en-linea-card .mod-card.featured:hover{
    transform: translateY(-4px);
  }
  /* Precio más legible en móvil */
  #pagos-en-linea-card .plan-price b{
    font-size: 28px;
  }
  #pagos-en-linea-card .mod-card h3{
    font-size: 22px;
  }
}
@media (max-width: 480px){
  #pagos-en-linea-card .mod-card{
    padding: 24px 18px 20px;
  }
  #pagos-en-linea-card .mod-card.featured .fav{
    font-size: 9.5px;
    padding: 7px 14px;
  }
  #pagos-en-linea-card .plan-price b{
    font-size: 26px;
  }
}
#header-pagos .col-left{ text-align:left; }
#header-pagos .col-left h1{ max-width:none; }
#header-pagos .col-left .intro{ max-width:none; }
#header-pagos .col-left .hero-cta{ justify-content:left; }
#header-pagos .row{
  display: flex;
}
#header-pagos .row > div{
  width: 50%;
  align-content: center;
}
@media(max-width:800px){
  #header-pagos .row{ display:block; }
  #header-pagos .row > div{ width:100%; }
}
#header-pagos .line-red{
  color: var(--red);
  font-size: xx-large;
  font-weight: bold;
  letter-spacing: -4px;
}
.finance-strip{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-top: 44px;
}
.finance-item{
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--violet-tint);
  border: 2px solid var(--violet);
  border-radius: 16px;
  padding: 15px 0px;
}
.finance-ico{
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--oxford);
  color: #fff;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.finance-item b{ display:block; font-size:15px; color:var(--oxford); font-weight:800; }
.finance-item span{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:900px){
  .finance-strip{ grid-template-columns:1fr; }
}
/* PRESENCIAL */
/* Bloque 1 */
.ef-course-landing{
  color-scheme: light;
  --ef-ink: #202431;
  --ef-muted: #626979;
  --ef-purple: #5130d8;
  --ef-purple-dark: #4324c8;
  --ef-purple-soft: #f1edff;
  --ef-shadow: 0 8px 20px rgba(25, 27, 38, 0.13);
  --ef-font-heading: "Bricolage Grotesque", sans-serif;
  --ef-font-body: "Instrument Sans", sans-serif;
  --ef-font-detail: "Montserrat", sans-serif;
  min-height: 100vh;
  background: #fff;
  color: var(--ef-ink);
  font-family: var(--ef-font-body);
  line-height: 1.55;
}
.ef-course-landing *, .ef-course-landing *::before, .ef-course-landing *::after{
  box-sizing: border-box;
}
.ef-course-landing button, .ef-course-landing input, .ef-course-landing select{
  font: inherit;
}
.ef-course-landing a{
  color: inherit;
  text-decoration: none;
}
.ef-course-landing .ef-page-hero{
  padding: 32px 24px 20px;
}
.ef-course-landing .ef-hero-layout{
  width: min(1440px, 100%);
  min-height: 420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(310px, 1.08fr) minmax(300px, 1.25fr) minmax(250px, 0.86fr);
  align-items: center;
  gap: clamp(16px, 2vw, 36px);
}
.ef-course-landing .ef-hero-copy{
  position: relative;
  z-index: 1;
  padding: 12px 0 22px;
}
.ef-course-landing h1{
  max-width: 500px;
  margin: 0;
  font-family: var(--ef-font-heading);
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.97;
  text-wrap: balance;
}
.ef-course-landing h1 span, .ef-course-landing .ef-quote-form h2 span{
  color: var(--ef-purple);
}
.ef-course-landing .ef-title-underline{
  width: 140px;
  height: 6px;
  margin: 25px 0 27px;
  border-radius: 9px;
  background: #ec513e;
}
.ef-course-landing .ef-intro{
  max-width: 435px;
  margin: 0 0 17px;
  color: var(--ef-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}
.ef-course-landing .ef-hero-plan{
  max-width: 440px;
  margin: 0;
  font-family: var(--ef-font-detail);
  color: #767b88;
  font-size: 0.8rem;
  line-height: 1.55;
}
.ef-course-landing .ef-hero-plan b{
  color: var(--ef-ink);
}
.ef-course-landing .ef-hero-cta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 23px;
}
.ef-course-landing .ef-btn-motion, .ef-course-landing .ef-btn-line{
  min-height: 50px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ef-font-detail);
  font-size: 0.8rem;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ef-course-landing .ef-btn-motion{
  position: relative;
  gap: 9px;
  padding: 5px 18px 5px 6px;
  border: 2px solid var(--ef-purple);
  color: var(--ef-purple);
  background: #fff;
  box-shadow: 0 7px 16px rgba(81, 48, 216, 0.12);
}
.ef-course-landing .ef-btn-motion:hover, .ef-course-landing .ef-btn-motion:focus-visible{
  color: #fff;
  background: var(--ef-purple);
  box-shadow: 0 7px 16px rgba(81, 48, 216, 0.19);
}
.ef-course-landing .ef-btn-motion .ef-circle{
  background: var(--ef-purple);
  color: #fff;
  transition: background-color 160ms ease, color 160ms ease;
}
.ef-course-landing .ef-btn-motion:hover .ef-circle, .ef-course-landing .ef-btn-motion:focus-visible .ef-circle{
  background: #fff;
  color: var(--ef-ink);
}
.ef-course-landing .ef-btn-motion:hover, .ef-course-landing .ef-btn-line:hover, .ef-course-landing .ef-btn-submit:hover{
  transform: translateY(-2px);
}
.ef-course-landing .ef-circle{
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: white;
  color: var(--ef-ink);
}
.ef-course-landing .ef-circle svg{
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ef-course-landing .ef-btn-line{
  min-width: 174px;
  padding: 0 20px;
  border: 2px solid var(--ef-ink);
  color: var(--ef-ink);
  background: #fff;
}
.ef-course-landing .ef-btn-line:hover, .ef-course-landing .ef-btn-line:focus-visible{
  border-color: var(--ef-ink);
  color: #fff;
  background: var(--ef-ink);
}
.ef-course-landing .ef-hero-art{
  position: relative;
  align-self: stretch;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ef-course-landing .ef-hero-art img{
  position: relative;
  z-index: 1;
  width: 105%;
  max-width: 640px;
  max-height: 460px;
  object-fit: contain;
  filter: drop-shadow(0 13px 10px rgba(37, 35, 58, 0.07));
}
.ef-course-landing .ef-art-halo{
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  top: 12%;
  left: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, #f7f4ff 0%, rgba(255, 255, 255, 0) 70%);
}
.ef-course-landing .ef-art-spark{
  position: absolute;
  z-index: 2;
  color: #efab2f;
  font-size: 1.5rem;
}
.ef-course-landing .ef-spark-one{
  top: 18%;
  left: 13%;
}
.ef-course-landing .ef-spark-two{
  right: 9%;
  bottom: 20%;
  color: #714ee8;
  font-size: 1.2rem;
}
.ef-course-landing .ef-quote-form{
  position: relative;
  width: 100%;
  max-width: 380px;
  justify-self: end;
  padding: 26px 22px 19px;
  border: 1px solid #ffff;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 5px 12px rgba(28, 30, 39, 0.17);
  transform: translate3d(var(--ef-move-x, 0px), var(--ef-move-y, 0px), 0);
  transition: transform 120ms ease-out, box-shadow 180ms ease;
}
.ef-course-landing .ef-quote-form:hover{
  box-shadow: 0 10px 22px rgba(28, 30, 39, 0.19);
}
.ef-course-landing .ef-location-badge{
  position: absolute;
  top: -13px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid #e9e6f2;
  border-radius: 18px;
  background: white;
  box-shadow: 0 3px 8px rgba(25, 27, 38, 0.12);
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
}
.ef-course-landing .ef-location-badge span{
  font-size: 0.85rem;
}
.ef-course-landing .ef-quote-tag{
  display: inline-block;
  padding: 5px 10px;
  border-radius: 18px;
  background: var(--ef-purple-soft);
  color: var(--ef-purple);
  font-family: var(--ef-font-detail);
  font-size: 0.66rem;
  font-weight: 800;
}
.ef-course-landing .ef-quote-form h2{
  margin: 13px 0 6px;
  font-family: var(--ef-font-heading);
  font-size: 1.44rem;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.ef-course-landing .ef-form-intro{
  margin: 0 0 15px;
  color: var(--ef-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}
.ef-course-landing .ef-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ef-course-landing .ef-field{
  min-width: 0;
}
.ef-course-landing .ef-field-full{
  grid-column: 1 / -1;
}
.ef-course-landing .ef-field label{
  display: block;
  margin: 0 0 4px 2px;
  color: #444957;
  font-family: var(--ef-font-detail);
  font-size: 0.63rem;
  font-weight: 700;
}
.ef-course-landing .ef-field label span{
  color: #8a8e99;
  font-weight: 500;
}
.ef-course-landing .ef-field input, .ef-course-landing .ef-field select{
  width: 100%;
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid #e5e5eb;
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--ef-ink);
  font-size: 0.68rem;
}
.ef-course-landing .ef-field input::placeholder{
  color: #a0a3ad;
}
.ef-course-landing .ef-field input:focus, .ef-course-landing .ef-field select:focus{
  border-color: var(--ef-purple);
  box-shadow: 0 0 0 3px rgba(81, 48, 216, 0.1);
}
.ef-course-landing .ef-consent{
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 1px;
  color: #777c88;
  font-family: var(--ef-font-detail);
  font-size: 0.62rem;
  line-height: 1.45;
}
.ef-course-landing .ef-consent input{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--ef-purple);
}
.ef-course-landing .ef-consent a{
  color: var(--ef-purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ef-course-landing .ef-btn-submit{
  width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  background: var(--ef-purple);
  color: white;
  cursor: pointer;
  font-family: var(--ef-font-detail);
  font-size: 0.76rem;
  font-weight: 800;
  transition: transform 160ms ease, background 160ms ease;
}
.ef-course-landing .ef-btn-submit:hover{
  background: var(--ef-purple-dark);
}
.ef-course-landing .ef-btn-submit span{
  font-size: 1rem;
}
.ef-course-landing .ef-form-note{
  margin: 9px 0 0;
  color: #898d97;
  font-family: var(--ef-font-detail);
  text-align: center;
  font-size: 0.59rem;
}
.ef-course-landing .ef-benefits{
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
}
.ef-course-landing .ef-benefit-card{
  width: 100%;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  border: 1px solid #ececf0;
  border-radius: 21px;
  background: #fff;
  box-shadow: var(--ef-shadow);
  text-align: center;
}
.ef-course-landing .ef-benefit-card strong{
  color: var(--ef-purple);
  font-family: var(--ef-font-heading);
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.ef-course-landing .ef-benefit-card span{
  margin-top: 7px;
  color: var(--ef-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.ef-course-landing .ef-rating-card strong{
  color: #efa927;
  font-size: clamp(1.65rem, 3.2vw, 2.8rem);
  letter-spacing: 0.02em;
}
.ef-course-landing .ef-privacy-anchor{
  position: absolute;
}
@media (min-width: 1500px){
  .ef-course-landing .ef-page-hero{
    padding-top: clamp(36px, 2.75vw, 48px);
  }
  .ef-course-landing .ef-hero-layout{
    min-height: clamp(470px, 30vw, 540px);
  }
}
@media (max-width: 1050px){
  .ef-course-landing .ef-hero-layout{
    grid-template-columns: minmax(280px, 1fr) minmax(250px, 0.9fr);
    gap: 18px;
  }
  .ef-course-landing .ef-hero-art{
    grid-column: 2;
    grid-row: 1;
  }
  .ef-course-landing .ef-hero-art img{
    width: 108%;
  }
  .ef-course-landing .ef-quote-form{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 620px;
    margin: 14px 0 24px;
  }
  .ef-course-landing .ef-form-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ef-course-landing .ef-benefits{
    margin-top: 0;
    gap: 14px;
  }
}
@media (max-width: 640px){
  .ef-course-landing .ef-page-hero{
    padding: 28px 18px 12px;
  }
  .ef-course-landing .ef-hero-layout{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .ef-course-landing .ef-hero-copy{
    padding: 0;
  }
  .ef-course-landing h1{
    max-width: 480px;
    font-size: clamp(2.55rem, 11vw, 3.35rem);
  }
  .ef-course-landing .ef-title-underline{
    width: 110px;
    height: 5px;
    margin: 19px 0;
  }
  .ef-course-landing .ef-intro{
    font-size: 0.9rem;
  }
  .ef-course-landing .ef-hero-plan{
    font-size: 0.73rem;
  }
  .ef-course-landing .ef-hero-cta{
    gap: 9px;
    margin-top: 18px;
  }
  .ef-course-landing .ef-btn-motion, .ef-course-landing .ef-btn-line{
    min-height: 47px;
    font-size: 0.73rem;
  }
  .ef-course-landing .ef-btn-line{
    min-width: 0;
    padding: 0 15px;
  }
  .ef-course-landing .ef-hero-art{
    min-height: 250px;
    max-height: 320px;
    margin: -3px -12px 0;
  }
  .ef-course-landing .ef-hero-art img{
    width: min(104%, 400px);
    max-height: 300px;
  }
  .ef-course-landing .ef-quote-form{
    max-width: none;
    margin: 12px 0 22px;
    padding: 25px 18px 18px;
    border-radius: 23px;
  }
  .ef-course-landing .ef-location-badge{
    right: 9px;
  }
  .ef-course-landing .ef-benefits{
    width: calc(100% - 36px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
  }
  .ef-course-landing .ef-benefit-card{
    min-height: 118px;
    border-radius: 17px;
  }
  .ef-course-landing .ef-benefit-card span{
    max-width: 150px;
    font-size: 0.7rem;
  }
}
@media (max-width: 380px){
  .ef-course-landing .ef-hero-cta{
    align-items: stretch;
    flex-direction: column;
  }
  .ef-course-landing .ef-btn-motion, .ef-course-landing .ef-btn-line{
    width: 100%;
  }
  .ef-course-landing .ef-form-grid{
    grid-template-columns: 1fr;
  }
  .ef-course-landing .ef-field-full{
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce){
  .ef-course-landing *, .ef-course-landing *::before, .ef-course-landing *::after{
    transition-duration: 0.01ms !important;
  }
}
@media (max-width: 1024px){
  .ef-course-landing .ef-page-hero,
  .ef-course-landing .ef-hero-layout,
  .ef-course-landing .ef-hero-copy,
  .ef-course-landing .ef-hero-art,
  .ef-course-landing .ef-quote-form{
    min-width: 0;
  }
  .ef-course-landing .ef-hero-layout{
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .ef-course-landing .ef-hero-copy,
  .ef-course-landing .ef-hero-art,
  .ef-course-landing .ef-quote-form{
    grid-column: 1;
    grid-row: auto;
  }
  .ef-course-landing h1{
    max-width: 760px;
    font-size: clamp(2.35rem, 5.5vw, 3.8rem);
    line-height: 1.04;
    overflow-wrap: anywhere;
  }
  .ef-course-landing h1 span{
    color: var(--ef-purple);
  }
  .ef-course-landing .ef-title-underline{
    width: clamp(76px, 12vw, 120px);
    margin: 20px 0 22px;
  }
  .ef-course-landing .ef-intro,
  .ef-course-landing .ef-hero-plan{
    max-width: 680px;
    overflow-wrap: anywhere;
  }
  .ef-course-landing .ef-hero-art{
    min-height: 280px;
  }
  .ef-course-landing .ef-hero-art img{
    width: min(100%, 560px);
    max-height: 380px;
  }
  .ef-course-landing .ef-quote-form{
    width: min(100%, 680px);
    max-width: 680px;
    justify-self: center;
    margin: 10px 0 24px;
    transform: none;
  }
  .ef-course-landing .ef-location-badge{
    right: 12px;
    max-width: calc(100% - 24px);
    white-space: normal;
  }
}
@media (max-width: 768px){
  .ef-course-landing .ef-page-hero{
    padding: 26px 18px 14px;
  }
  .ef-course-landing .ef-hero-layout{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ef-course-landing .ef-hero-copy{
    padding: 0;
  }
  .ef-course-landing h1{
    font-size: clamp(2.15rem, 8vw, 3.25rem);
    line-height: 1.06;
  }
  .ef-course-landing .ef-title-underline{
    width: 88px;
    height: 5px;
    margin: 17px 0 19px;
  }
  .ef-course-landing .ef-intro{
    font-size: 0.92rem;
  }
  .ef-course-landing .ef-hero-cta{
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .ef-course-landing .ef-btn-motion,
  .ef-course-landing .ef-btn-line{
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }
  .ef-course-landing .ef-hero-art{
    min-height: 220px;
    max-height: 300px;
    margin: 0;
  }
  .ef-course-landing .ef-hero-art img{
    width: min(100%, 420px);
    max-height: 290px;
  }
  .ef-course-landing .ef-quote-form{
    width: 100%;
    margin: 12px 0 22px;
    padding: 25px 18px 18px;
  }
  .ef-course-landing .ef-form-grid,
  .ef-course-landing .ef-field{
    min-width: 0;
  }
  .ef-course-landing .ef-field input,
  .ef-course-landing .ef-field select{
    min-width: 0;
  }
  .ef-course-landing .ef-consent,
  .ef-course-landing .ef-consent span{
    min-width: 0;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 480px){
  .ef-course-landing .ef-page-hero{
    padding-right: 14px;
    padding-left: 14px;
  }
  .ef-course-landing .ef-form-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .ef-course-landing .ef-field-full{
    grid-column: auto;
  }
  .ef-course-landing .ef-quote-form{
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ 04.2  PRESENCIAL                                               ║
   ╚══════════════════════════════════════════════════════════════╝
   body.pg-presencial */
/* ── Base de la página ── */
/* Variables y reglas globales de Presencial (antes repetidas en cada bloque; gana el último valor definido, igual que antes). */
:where(.pg-presencial){
  --body-font: "Instrument Sans", Arial, sans-serif;
  --heading-font: "Bricolage Grotesque", "Arial Black", sans-serif;
  --background: #ffffff;
  --navy: #062448;
  --lime: #d8f83f;
  --bg: #f2f3f5;
  --card-bg: rgba(255,255,255,0.42);
  --panel: #f6f6f7;
  --ink: var(--oxford-deep);
  --muted: #4d5567;
  --violet: var(--violet-deep);
  --violet-strong: var(--violet-deep);
  --blue: var(--oxford-deep);
  --blue-strong: var(--oxford-deep);
  --red: #d6383d;
  --red-strong: #c32733;
  --purple: #4e46d5;
  --purple-strong: #3f3ca6;
  --cert-opt: var(--violet-deep);
  --cert-ielts: var(--oxford-deep);
  --cert-aptis: #BE1622;
  --shadow: 0 18px 30px rgba(19, 26, 40, 0.06);
  --mono: "Montserrat", sans-serif;
  --pres-violeta: #6c4cf1;
  --pres-naranja: #ff7a3d;
  --pres-lima: #d4ff3d;
  --pres-rojo: #e8442e;
  --pres-tinta: #1a1f2c;
  --pres-mono: "Montserrat", "Instrument Sans", sans-serif;
  color-scheme: light;
  font-family: var(--body-font);
  color: #202532;
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(.pg-presencial) *,
:where(.pg-presencial) *::before,
:where(.pg-presencial) *::after{
  box-sizing: border-box;
}
body.pg-presencial{
  min-width: 320px;
  display: flow-root;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  font-family: "Instrument Sans", sans-serif;
  color: var(--ink);
}
/* ── Mapa de oportunidades ── */
:where(.pg-presencial) .mapa-oportunidades{
  color-scheme: light;
  font-family: var(--body);
  color: var(--pres-tinta);
  background: #fff;
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(.pg-presencial) .mapa-oportunidades{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: center;
  gap: clamp(32px, 3.5vw, 56px);
  width: 100%;
  min-height: min(100vh, 780px);
  min-height: min(100svh, 780px);
  margin: 0;
  padding: clamp(30px, 3vw, 48px) max(24px, calc((100% - 1480px) / 2));
}
:where(.pg-presencial) .mapa-oportunidades__texto{
  position: relative;
  z-index: 1;
}
:where(.pg-presencial) .mapa-oportunidades h2{
  margin: 0;
  color: var(--oxford);
  font-family: var(--disp);
  font-size: clamp(36px, 3.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
:where(.pg-presencial) .mapa-oportunidades h2 span{
  display: block;
  color: var(--pres-violeta);
}
:where(.pg-presencial) .mapa-oportunidades__subrayado{
  width: 73px;
  height: 6px;
  margin: clamp(22px, 2vw, 30px) 0 clamp(30px, 3vw, 42px);
  border-radius: 999px;
  background: var(--pres-naranja);
}
:where(.pg-presencial) .mapa-oportunidades__intro,
:where(.pg-presencial) .mapa-oportunidades__descripcion-curso{
  color: var(--ink-soft);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
}
:where(.pg-presencial) .mapa-oportunidades__intro{
  margin: 0 0 20px;
}
:where(.pg-presencial) .mapa-oportunidades__descripcion-curso{
  margin: 0 0 28px;
}
:where(.pg-presencial) .mapa-oportunidades__descripcion-curso strong{
  color: var(--pres-tinta);
  font-weight: 700;
}
:where(.pg-presencial) .mapa-oportunidades__beneficios{
  margin: 0;
  padding: 0 10px 0 0;
  list-style: none;
  background: #fff;
}
:where(.pg-presencial) .mapa-oportunidades__beneficios li{
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
:where(.pg-presencial) .mapa-oportunidades__flecha{
  flex: 0 0 14px;
  color: var(--pres-violeta);
  font-size: 17px;
  line-height: 1;
}
:where(.pg-presencial) .mapa-oportunidades__beneficios p{
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.5;
}
:where(.pg-presencial) .mapa-oportunidades__beneficios strong{
  color: var(--oxford);
  font-weight: 700;
}
:where(.pg-presencial) .mapa-oportunidades__imagen{
  display: flex;
  height: clamp(460px, 38vw, 620px);
  align-items: center;
  justify-content: center;
  overflow: visible;
}
:where(.pg-presencial) .mapa-oportunidades__imagen img{
  display: block;
  width: min(100%, 620px);
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 900px){
  :where(.pg-presencial) .mapa-oportunidades{
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding: 36px max(24px, calc((100% - 720px) / 2)) 24px;
  }
  :where(.pg-presencial) .mapa-oportunidades h2{
    font-size: clamp(36px, 5vw, 48px);
  }
  :where(.pg-presencial) .mapa-oportunidades__subrayado{
    margin: 18px 0 27px;
  }
  :where(.pg-presencial) .mapa-oportunidades__imagen{
    height: clamp(360px, 55vw, 500px);
    grid-row: 1;
  }
  :where(.pg-presencial) .mapa-oportunidades__imagen img{
    width: min(100%, 500px);
  }
}
@media (max-width: 760px){
  :where(.pg-presencial) .mapa-oportunidades{
    gap: 10px;
    padding: 32px max(20px, calc((100% - 560px) / 2)) 20px;
  }
  :where(.pg-presencial) .mapa-oportunidades h2{
    font-size: clamp(34px, 8vw, 44px);
  }
  :where(.pg-presencial) .mapa-oportunidades__imagen{
    height: min(110vw, 480px);
  }
  :where(.pg-presencial) .mapa-oportunidades__imagen img{
    width: min(100%, 430px);
  }
}
@media (max-width: 420px){
  :where(.pg-presencial) .mapa-oportunidades{
    padding-top: 26px;
  }
  :where(.pg-presencial) .mapa-oportunidades__imagen{
    height: 340px;
  }
  :where(.pg-presencial) .mapa-oportunidades__intro,
:where(.pg-presencial) .mapa-oportunidades__descripcion-curso{
    font-size: 15px;
  }
  :where(.pg-presencial) .mapa-oportunidades__beneficios p{
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce){
  :where(.pg-presencial) .mapa-oportunidades *,
:where(.pg-presencial) .mapa-oportunidades *::before,
:where(.pg-presencial) .mapa-oportunidades *::after{
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
/* ── Pilares del idioma ── */
:where(.pg-presencial) .pilares-idioma{
  width: 100%;
  margin: 0;
  padding: 31px max(24px, calc((100% - 1280px) / 2)) 42px;
  color: var(--pres-tinta);
  background: #fff;
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(.pg-presencial) .pilares-idioma__intro{
  margin: 0 auto 34px;
  text-align: center;
}
:where(.pg-presencial) .pilares-idioma__titulo{
  margin: 0;
  color: var(--oxford);
  font-family: var(--disp);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
:where(.pg-presencial) .pilares-idioma__titulo span{
  color: var(--pres-violeta);
}
:where(.pg-presencial) .pilares-idioma__subrayado{
  width: 73px;
  height: 6px;
  margin: 23px auto 29px;
  border-radius: 999px;
  background: var(--pres-naranja);
}
:where(.pg-presencial) .pilares-idioma__entradilla{
  margin: 0;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.6;
}
:where(.pg-presencial) .pilares-idioma__rejilla{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 32px;
}
:where(.pg-presencial) .pilares-idioma__tarjeta{
  min-width: 0;
  min-height: 210px;
  padding: 19px 23px 17px;
  border: 0;
  border-radius: var(--r);
  background: #fff;
  color: var(--pres-tinta);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.35);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), background-color 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}
:where(.pg-presencial) .pilares-idioma__tarjeta:hover{
  border-color: var(--oxford);
  background: var(--oxford);
  color: #fff;
  transform: translateY(-6px) scale(1.025);
  box-shadow: 6px 6px 0 #eab0b7;
}
:where(.pg-presencial) .pilares-idioma__cabecera-tarjeta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
:where(.pg-presencial) .pilares-idioma__numero{
  margin: 0 0 8px;
  color: var(--violet-deep);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}
:where(.pg-presencial) .pilares-idioma__titulo-tarjeta{
  margin: 0;
  color: var(--oxford);
  font-family: var(--disp);
  font-size: clamp(19px, 2.15vw, 25px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
:where(.pg-presencial) .pilares-idioma__imagen{
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  border-radius: 9px;
  object-fit: contain;
}
:where(.pg-presencial) .pilares-idioma__descripcion{
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}
:where(.pg-presencial) .pilares-idioma__tarjeta:hover .pilares-idioma__numero{
  color: var(--pres-naranja);
}
:where(.pg-presencial) .pilares-idioma__tarjeta:hover .pilares-idioma__titulo-tarjeta,
:where(.pg-presencial) .pilares-idioma__tarjeta:hover .pilares-idioma__descripcion{
  color: #fff;
}
@media (max-width: 900px){
  :where(.pg-presencial) .pilares-idioma__rejilla{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  :where(.pg-presencial) .pilares-idioma__tarjeta{
    min-height: 210px;
  }
  :where(.pg-presencial) .pilares-idioma__titulo-tarjeta{
    font-size: clamp(19px, 3.2vw, 25px);
  }
}
@media (max-width: 580px){
  :where(.pg-presencial) .pilares-idioma{
    width: 100%;
    padding: 35px max(20px, calc((100% - 560px) / 2)) 30px;
  }
  :where(.pg-presencial) .pilares-idioma__intro{
    margin-bottom: 28px;
  }
  :where(.pg-presencial) .pilares-idioma__titulo{
    max-width: 390px;
    margin: 0 auto;
    font-size: clamp(34px, 9vw, 42px);
  }
  :where(.pg-presencial) .pilares-idioma__subrayado{
    margin: 18px auto 20px;
  }
  :where(.pg-presencial) .pilares-idioma__entradilla{
    max-width: 340px;
    margin: 0 auto;
    font-size: 15px;
  }
  :where(.pg-presencial) .pilares-idioma__rejilla{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  :where(.pg-presencial) .pilares-idioma__tarjeta{
    min-height: 0;
    padding: 20px 21px 18px;
  }
  :where(.pg-presencial) .pilares-idioma__titulo-tarjeta{
    font-size: clamp(22px, 7vw, 27px);
  }
  :where(.pg-presencial) .pilares-idioma__imagen{
    flex-basis: 88px;
    width: 88px;
    height: 88px;
  }
  :where(.pg-presencial) .pilares-idioma__descripcion{
    font-size: 15px;
    line-height: 1.6;
  }
}
@media (prefers-reduced-motion: reduce){
  :where(.pg-presencial) .pilares-idioma *,
:where(.pg-presencial) .pilares-idioma *::before,
:where(.pg-presencial) .pilares-idioma *::after{
    transition-duration: 0.01ms !important;
  }
}
/* ── Habilidades de inglés ── */
:where(.pg-presencial) .habilidades-ingles{
  width: 100%;
  padding: 56px 3.1% 54px;
  color: var(--pres-tinta);
  background: #fff;
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
:where(.pg-presencial) .habilidades-ingles__encabezado{
  margin: 0 auto 56px;
  text-align: center;
}
:where(.pg-presencial) .habilidades-ingles__titulo{
  margin: 0;
  color: var(--oxford);
  font-family: var(--disp);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
:where(.pg-presencial) .habilidades-ingles__destacado{
  color: var(--pres-violeta);
}
:where(.pg-presencial) .habilidades-ingles__linea{
  display: block;
  width: 124px;
  height: 7px;
  margin: 18px auto 19px;
  border-radius: 999px;
  background: var(--pres-naranja);
}
:where(.pg-presencial) .habilidades-ingles__introduccion{
  margin: 0;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.6;
}
:where(.pg-presencial) .habilidades-ingles__lista{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
}
:where(.pg-presencial) .habilidades-ingles__tarjeta{
  position: relative;
  min-height: 172px;
  padding: 50px 16px 20px;
  border: none;
  border-radius: var(--r);
  background: #fff;
  box-shadow: 2px 2px 0 rgba(239, 176, 185, 0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
:where(.pg-presencial) .habilidades-ingles__tarjeta:hover{
  transform: translateY(-6px) scale(1.025);
  box-shadow: 8px 8px 0 #efb0b9;
}
:where(.pg-presencial) .habilidades-ingles__numero{
  position: absolute;
  top: 5px;
  left: 15px;
  color: var(--violet-tint);
  font-family: var(--pres-mono);
  font-size: 86px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  user-select: none;
}
:where(.pg-presencial) .habilidades-ingles__icono{
  position: absolute;
  top: 13px;
  right: 18px;
  width: 112px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
:where(.pg-presencial) .habilidades-ingles__nombre{
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: var(--violet-deep);
  font-family: var(--disp);
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
:where(.pg-presencial) .habilidades-ingles__descripcion{
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 900px){
  :where(.pg-presencial) .habilidades-ingles{
    padding-right: 5%;
    padding-left: 5%;
  }
  :where(.pg-presencial) .habilidades-ingles__lista{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  :where(.pg-presencial) .habilidades-ingles__tarjeta{
    min-height: 178px;
  }
  :where(.pg-presencial) .habilidades-ingles__nombre{
    font-size: 25px;
  }
  :where(.pg-presencial) .habilidades-ingles__salto{
    display: none;
  }
}
@media (max-width: 540px){
  :where(.pg-presencial) .habilidades-ingles{
    padding: 42px 20px;
  }
  :where(.pg-presencial) .habilidades-ingles__encabezado{
    margin-bottom: 36px;
  }
  :where(.pg-presencial) .habilidades-ingles__titulo{
    font-size: clamp(34px, 9vw, 42px);
  }
  :where(.pg-presencial) .habilidades-ingles__linea{
    margin-top: 14px;
    margin-bottom: 15px;
  }
  :where(.pg-presencial) .habilidades-ingles__introduccion{
    font-size: 16px;
  }
  :where(.pg-presencial) .habilidades-ingles__salto{
    display: none;
  }
  :where(.pg-presencial) .habilidades-ingles__lista{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  :where(.pg-presencial) .habilidades-ingles__tarjeta{
    min-height: 170px;
    padding-right: 18px;
    padding-left: 18px;
  }
  :where(.pg-presencial) .habilidades-ingles__nombre{
    font-size: 25px;
  }
}
@media (prefers-reduced-motion: reduce){
  :where(.pg-presencial) .habilidades-ingles *,
:where(.pg-presencial) .habilidades-ingles *::before,
:where(.pg-presencial) .habilidades-ingles *::after{
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ── Escalera de niveles (MCER) ── */
:where(.pg-presencial) .ruta-mcer{
  width: 100%;
  margin: 0;
  padding: 34px max(24px, calc((100% - 1060px) / 2)) 26px;
  background: #fff;
}
:where(.pg-presencial) .ruta-mcer__encabezado{
  text-align: center;
}
:where(.pg-presencial) .ruta-mcer__encabezado h2{
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
:where(.pg-presencial) .ruta-mcer__encabezado h2 span{
  color: #5032d5;
}
:where(.pg-presencial) .ruta-mcer__subrayado{
  width: 102px;
  height: 6px;
  margin: 15px auto 16px;
  border-radius: 999px;
  background: #ed4938;
}
:where(.pg-presencial) .ruta-mcer__encabezado p{
  margin: 0;
  color: #5d6270;
  font-size: 12.5px;
  line-height: 1.7;
}
:where(.pg-presencial) .ruta-mcer__recorrido{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1.25fr);
  align-items: center;
  column-gap: 17px;
  margin-top: 31px;
}
:where(.pg-presencial) .ruta-mcer__mascota{
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
:where(.pg-presencial) .ruta-mcer__mascota img{
  display: block;
  width: min(100%, 430px);
  height: auto;
  object-fit: contain;
}
:where(.pg-presencial) .ruta-mcer__linea-tiempo{
  position: relative;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  align-self: stretch;
  min-height: 540px;
}
:where(.pg-presencial) .ruta-mcer__linea{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  transform-origin: center;
  border-radius: 4px;
  background: #06244a;
  animation: unfold-timeline 520ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
:where(.pg-presencial) .ruta-mcer__nodo{
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: 25px;
  height: 25px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #123db2;
  box-shadow: 0 0 0 1px #929ac2;
  transform-origin: center;
  animation: unfold-page 520ms cubic-bezier(0.2, 0.75, 0.25, 1) backwards;
}
:where(.pg-presencial) .ruta-mcer__nodo--a1,
:where(.pg-presencial) .ruta-mcer__nodo--c1{
  animation-delay: 360ms;
}
:where(.pg-presencial) .ruta-mcer__nodo--a2,
:where(.pg-presencial) .ruta-mcer__nodo--b2{
  animation-delay: 180ms;
}
:where(.pg-presencial) .ruta-mcer__nodo--a1,
:where(.pg-presencial) .ruta-mcer__nodo--c1{
  background: #071f43;
}
:where(.pg-presencial) .ruta-mcer__nodo--b1{
  position: relative;
  width: 26px;
  height: 26px;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: 0 0 0 4px #b51f30;
}
:where(.pg-presencial) .ruta-mcer__nodo--b1::after{
  position: absolute;
  top: 7px;
  left: 30px;
  width: 27px;
  height: 4px;
  background: #b51f30;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  animation: unfold-connector 320ms ease-out 180ms both;
}
:where(.pg-presencial) .ruta-mcer__nodo--b1{
  animation-name: unfold-center;
  animation-delay: 0ms;
}
:where(.pg-presencial) .ruta-mcer__niveles{
  display: grid;
  grid-template-rows: repeat(5, minmax(94px, auto));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(.pg-presencial) .ruta-mcer__nivel{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid #e8e8e8;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 2px 5px rgb(0 0 0 / 23%);
  transform: perspective(700px) rotateX(0);
  transform-style: preserve-3d;
  transition: transform 220ms ease, box-shadow 220ms ease;
  animation: unfold-page 520ms cubic-bezier(0.2, 0.75, 0.25, 1) backwards;
}
:where(.pg-presencial) .ruta-mcer__nivel:first-child,
:where(.pg-presencial) .ruta-mcer__nivel:nth-child(2){
  transform-origin: bottom center;
}
:where(.pg-presencial) .ruta-mcer__nivel:nth-child(4),
:where(.pg-presencial) .ruta-mcer__nivel:last-child{
  transform-origin: top center;
}
:where(.pg-presencial) .ruta-mcer__nivel:first-child,
:where(.pg-presencial) .ruta-mcer__nivel:last-child{
  animation-delay: 360ms;
}
:where(.pg-presencial) .ruta-mcer__nivel:nth-child(2),
:where(.pg-presencial) .ruta-mcer__nivel:nth-child(4){
  animation-delay: 180ms;
}
:where(.pg-presencial) .ruta-mcer__nivel--actual{
  animation-name: unfold-center;
  animation-delay: 0ms;
}
@media (hover: hover){
  :where(.pg-presencial) .ruta-mcer__nivel:hover{
    z-index: 2;
    box-shadow: 4px 5px 0 rgb(181 31 48 / 35%), 0 8px 16px rgb(0 0 0 / 28%);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  :where(.pg-presencial) .ruta-mcer__nivel:hover{
    transform: perspective(700px) translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce){
  :where(.pg-presencial) .ruta-mcer__nivel{
    animation: none;
    transition: none;
    transform: none;
  }
  :where(.pg-presencial) .ruta-mcer__linea,
:where(.pg-presencial) .ruta-mcer__nodo,
:where(.pg-presencial) .ruta-mcer__nodo--b1::after{
    animation: none;
    transform: none;
  }
  :where(.pg-presencial) .ruta-mcer__linea{
    transform: translateX(-50%);
  }
}
:where(.pg-presencial) .ruta-mcer__codigo{
  display: grid;
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  place-items: center;
  border-radius: 9px;
  background: #c5c9f5;
  color: #202532;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.5px;
}
:where(.pg-presencial) .ruta-mcer__texto{
  min-width: 0;
}
:where(.pg-presencial) .ruta-mcer__nivel h3{
  margin: 0 0 2px;
  color: #5134cf;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-transform: none;
}
:where(.pg-presencial) .ruta-mcer__nivel p{
  margin: 0;
  color: #5d6270;
  font-size: 12px;
  line-height: 1.35;
  font-family: var(--body-font);
}
:where(.pg-presencial) .ruta-mcer__insignia{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ed4938;
  color: #fff;
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
:where(.pg-presencial) .ruta-mcer__insignia::before{
  content: "\2605";
  font-size: 10px;
}
:where(.pg-presencial) .ruta-mcer__nivel--actual{
  border-color: #06244a;
  background: #06244a;
}
:where(.pg-presencial) .ruta-mcer__nivel--actual .ruta-mcer__codigo{
  background: #5231df;
  color: #fff;
}
:where(.pg-presencial) .ruta-mcer__nivel--actual h3,
:where(.pg-presencial) .ruta-mcer__nivel--actual p{
  color: #fff;
}
@media (max-width: 760px){
  :where(.pg-presencial) .ruta-mcer{
    width: 100%;
    padding: 28px max(18px, calc((100% - 560px) / 2)) 26px;
  }
  :where(.pg-presencial) .ruta-mcer__encabezado h2{
    font-size: clamp(1.65rem, 6vw, 2rem);
    letter-spacing: -0.8px;
  }
  :where(.pg-presencial) .ruta-mcer__encabezado p br{
    display: none;
  }
  :where(.pg-presencial) .ruta-mcer__recorrido{
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 13px;
    margin-top: 26px;
  }
  :where(.pg-presencial) .ruta-mcer__mascota{
    display: none;
  }
  :where(.pg-presencial) .ruta-mcer__linea-tiempo{
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    height: 100%;
  }
  :where(.pg-presencial) .ruta-mcer__linea{
    top: 20px;
    bottom: 20px;
  }
  :where(.pg-presencial) .ruta-mcer__nodo{
    width: 21px;
    height: 21px;
  }
  :where(.pg-presencial) .ruta-mcer__nodo--b1{
    width: 22px;
    height: 22px;
  }
  :where(.pg-presencial) .ruta-mcer__nodo--b1::after{
    display: none;
  }
  :where(.pg-presencial) .ruta-mcer__niveles{
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: repeat(5, minmax(88px, auto));
    gap: 13px;
  }
  :where(.pg-presencial) .ruta-mcer__nivel{
    border-radius: 15px;
    padding: 9px;
  }
  :where(.pg-presencial) .ruta-mcer__codigo{
    flex-basis: 60px;
    width: 60px;
    height: 60px;
    font-size: 34px;
  }
}
/* ── Vista TPI ── */
:where(.pg-presencial) .incluye-programa{
  --incluye-bg: #ffffff;
  --incluye-text: #1e2436;
  --incluye-muted: #5d6375;
  --incluye-purple: #7f43ff;
  --incluye-white: #ffffff;
  --incluye-line: rgba(119, 129, 172, 0.4);
  --incluye-shadow: 0 18px 28px rgba(20, 35, 58, 0.12);
  width: 100%;
  margin: 0;
  background: var(--incluye-bg);
  color: var(--incluye-text);
  font-family: var(--body);
  max-width: none;
  padding: 44px max(28px, calc((100% - 1360px) / 2)) 60px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: flex-start;
  gap: 38px;
}
:where(.pg-presencial) .incluye-programa button{
  font: inherit;
}
:where(.pg-presencial) .incluye-programa img{
  max-width: 100%;
  display: block;
}
:where(.pg-presencial) .incluye-programa__intro{
  padding-top: 12px;
  position: sticky;
  top: 36px;
}
:where(.pg-presencial) .incluye-programa__titulo{
  max-width: 430px;
  margin: 42px 0 0;
  font-size: clamp(2.5rem, 3.3vw, 4.2rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  font-family: var(--disp);
  font-weight: 800;
  color: var(--incluye-text);
}
:where(.pg-presencial) .incluye-programa__titulo span{
  display: block;
  color: var(--incluye-purple);
}
:where(.pg-presencial) .incluye-programa__linea{
  width: 130px;
  height: 6px;
  margin-top: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f85752 0%, #f85752 100%);
}
:where(.pg-presencial) .incluye-programa__resumen{
  max-width: 410px;
  margin: 20px 0 0;
  color: var(--incluye-muted);
  font-size: clamp(1rem, 1.2vw, 1.3rem);
  line-height: 1.45;
}
:where(.pg-presencial) .incluye-programa__sello{
  display: inline-block;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: var(--incluye-text);
}
:where(.pg-presencial) .incluye-programa__nota{
  max-width: 480px;
  margin: 20px 0 0;
  color: var(--incluye-muted);
  font-size: 0.96rem;
  line-height: 1.55;
}
:where(.pg-presencial) .incluye-programa__nota strong{
  color: var(--incluye-text);
  font-weight: 800;
}
:where(.pg-presencial) .incluye-programa__escena{
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 360px;
  margin-top: 12px;
}
:where(.pg-presencial) .incluye-programa__estudiante{
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 330px;
  transform: translateX(-50%);
  z-index: 2;
  filter: drop-shadow(0 24px 26px rgba(33, 46, 69, 0.12));
}
:where(.pg-presencial) .incluye-programa__decor{
  position: absolute;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 16px 18px rgba(35, 44, 60, 0.12));
}
:where(.pg-presencial) .incluye-programa__decor--one{
  width: 110px;
  left: 8px;
  top: 46px;
}
:where(.pg-presencial) .incluye-programa__decor--two{
  width: 90px;
  left: 160px;
  top: 8px;
}
:where(.pg-presencial) .incluye-programa__decor--three{
  width: 110px;
  right: 26px;
  bottom: 24px;
}
:where(.pg-presencial) .incluye-programa__tarjetas{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
  width: min(100%, 760px);
  margin: 0 auto;
}
:where(.pg-presencial) .incluye-programa__tarjetas::after{
  content: "";
  flex: 0 0 auto;
  height: max(60vh, 520px);
}
:where(.pg-presencial) .incluye-programa__tarjeta{
  --incluye-stack-index: 0;
  position: sticky;
  top: calc(50vh - 230px + var(--incluye-stack-index) * 12px);
  z-index: var(--incluye-stack-index);
  width: min(100%, 720px);
  flex: 0 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(147, 145, 162, 0.28);
  background: var(--incluye-bg);
  box-shadow: var(--incluye-shadow);
  overflow: hidden;
  transition: transform 0.3s ease, background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
:where(.pg-presencial) .incluye-programa__tarjeta:nth-child(1){
  --incluye-stack-index: 0;
}
:where(.pg-presencial) .incluye-programa__tarjeta:nth-child(2){
  --incluye-stack-index: 1;
}
:where(.pg-presencial) .incluye-programa__tarjeta:nth-child(3){
  --incluye-stack-index: 2;
}
:where(.pg-presencial) .incluye-programa__tarjeta:nth-child(4){
  --incluye-stack-index: 3;
}
:where(.pg-presencial) .incluye-programa__tarjeta:nth-child(5){
  --incluye-stack-index: 4;
}
:where(.pg-presencial) .incluye-programa__tarjeta:nth-child(6){
  --incluye-stack-index: 5;
}
:where(.pg-presencial) .incluye-programa__tarjeta:hover{
  transform: translateY(-4px) scale(1.01);
  background: var(--oxford);
  border-color: var(--oxford);
  box-shadow: 0 22px 36px rgba(0, 33, 71, 0.24);
}
:where(.pg-presencial) .incluye-programa__cabecera-tarjeta{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 8px;
}
:where(.pg-presencial) .incluye-programa__numero{
  min-width: 74px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
  padding: 7px 0;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.08em;
  background: linear-gradient(180deg, #f1ebff 0%, #e4e6ff 100%);
  color: var(--incluye-purple);
  border: 1px solid rgba(120, 90, 213, 0.12);
}
:where(.pg-presencial) .incluye-programa__tarjeta:hover .incluye-programa__numero{
  background: linear-gradient(180deg, #7d69ee 0%, #6348e8 100%);
  color: var(--incluye-white);
  box-shadow: inset 0 -8px 10px rgba(66, 57, 167, 0.2);
}
:where(.pg-presencial) .incluye-programa__numero span{
  font-family: var(--mono);
  font-size: 1.15rem;
  opacity: 0.95;
}
:where(.pg-presencial) .incluye-programa__titulo-tarjeta{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
:where(.pg-presencial) .incluye-programa__icono{
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 14px;
  filter: drop-shadow(0 10px 12px rgba(54, 62, 86, 0.14));
}
:where(.pg-presencial) .incluye-programa__titulo-tarjeta h3{
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  line-height: 1.08;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: var(--incluye-text);
}
:where(.pg-presencial) .incluye-programa__tarjeta:hover .incluye-programa__titulo-tarjeta h3{
  color: var(--incluye-white);
}
:where(.pg-presencial) .incluye-programa__boton{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(149, 152, 170, 0.45);
  background: rgba(255, 255, 255, 0.2);
  color: var(--incluye-text);
  font-family: var(--mono);
  font-size: 2rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
:where(.pg-presencial) .incluye-programa__tarjeta ul{
  list-style: none;
  margin: 0;
  padding: 0 18px 0 16px;
}
:where(.pg-presencial) .incluye-programa__tarjeta li{
  position: relative;
  padding: 12px 0 10px 28px;
  border-top: 1px solid var(--incluye-line);
  color: var(--incluye-muted);
  font-size: 0.95rem;
  line-height: 1.38;
}
:where(.pg-presencial) .incluye-programa__tarjeta:hover li{
  color: rgba(255, 255, 255, 0.82);
}
:where(.pg-presencial) .incluye-programa__tarjeta li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 14px;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 0.95rem;
  font-weight: 900;
  color: #1c66d1;
}
:where(.pg-presencial) .incluye-programa__tarjeta:hover li::before{
  color: var(--incluye-white);
}
:where(.pg-presencial) .incluye-programa__tarjeta:hover .incluye-programa__boton{
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: var(--incluye-white);
}
@media (max-width: 1100px){
  :where(.pg-presencial) .incluye-programa{
    grid-template-columns: 1fr;
  }
  :where(.pg-presencial) .incluye-programa__intro{
    order: 2;
    position: static;
  }
  :where(.pg-presencial) .incluye-programa__tarjetas{
    order: 1;
    width: 100%;
  }
  :where(.pg-presencial) .incluye-programa__tarjetas::after{
    display: none;
  }
  :where(.pg-presencial) .incluye-programa__tarjeta{
    position: relative;
    top: auto;
    width: 100%;
  }
}
@media (max-width: 720px){
  :where(.pg-presencial) .incluye-programa{
    padding: 30px 18px 42px;
  }
  :where(.pg-presencial) .incluye-programa__intro{
    order: 1;
  }
  :where(.pg-presencial) .incluye-programa__tarjetas{
    order: 2;
    align-items: stretch;
  }
  :where(.pg-presencial) .incluye-programa__titulo{
    max-width: 100%;
    font-size: 2.8rem;
  }
  :where(.pg-presencial) .incluye-programa__cabecera-tarjeta{
    flex-wrap: wrap;
    gap: 12px;
  }
  :where(.pg-presencial) .incluye-programa__numero{
    min-width: 84px;
    font-size: 1.9rem;
  }
  :where(.pg-presencial) .incluye-programa__titulo-tarjeta{
    flex: 1 1 100%;
    order: 3;
    width: 100%;
  }
  :where(.pg-presencial) .incluye-programa__tarjeta li{
    font-size: 1rem;
  }
  :where(.pg-presencial) .incluye-programa__estudiante{
    width: 275px;
  }
}
/* ── Cursos regular y VIP ── */
:where(.pg-presencial) button{
  font: inherit;
}
:where(.pg-presencial) .horarios{
  width: 100%;
  margin: 0;
  padding: 31px max(36px, calc((100% - 1270px) / 2)) 30px;
  background: #fff;
}
:where(.pg-presencial) .horarios__encabezado{
  text-align: center;
}
:where(.pg-presencial) .horarios__encabezado h2{
  margin: 0;
  color: #20232a;
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  line-height: 1.07;
  letter-spacing: 0;
  font-weight: 800;
}
:where(.pg-presencial) .horarios__destacado{
  background: linear-gradient(90deg, #313c9a 0%, #5632dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:where(.pg-presencial) .horarios__subrayado{
  width: 124px;
  height: 7px;
  margin: 17px auto 0;
  border-radius: 8px;
  background: var(--red);
}
:where(.pg-presencial) .horarios__subtitulo{
  margin: 19px auto 70px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
:where(.pg-presencial) .horarios__tarjetas{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;
  align-items: stretch;
}
:where(.pg-presencial) .horarios__tarjeta{
  position: relative;
  min-width: 0;
  min-height: 356px;
  border-radius: 20px;
  isolation: isolate;
  transition: box-shadow 350ms ease;
}
:where(.pg-presencial) .horarios__tarjeta::before{
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--navy);
  clip-path: circle(0% at var(--wave-x, 50%) var(--wave-y, 50%));
  content: "";
  pointer-events: none;
  transition: clip-path 1050ms cubic-bezier(0.22, 0.9, 0.35, 1);
}
:where(.pg-presencial) .horarios__tarjeta.horarios__tarjeta--regular,
:where(.pg-presencial) .horarios__tarjeta.horarios__tarjeta--vip{
  border: none;
}
:where(.pg-presencial) .horarios__tarjeta--regular{
  padding: 56px 31px 21px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(20, 24, 32, 0.12);
}
:where(.pg-presencial) .horarios .horarios__tarjeta--regular .horarios__etiqueta,
:where(.pg-presencial) .horarios__tarjeta--regular .horarios__lista li,
:where(.pg-presencial) .horarios__tarjeta--regular .horarios__lista li::before,
:where(.pg-presencial) .horarios__tarjeta--vip h3,
:where(.pg-presencial) .horarios__tarjeta--vip p,
:where(.pg-presencial) .horarios__tarjeta--vip .horarios__beneficios li,
:where(.pg-presencial) .horarios__tarjeta--vip .horarios__beneficios li::before{
  transition: color 400ms cubic-bezier(0.22, 0.9, 0.35, 1);
}
:where(.pg-presencial) .horarios__tarjeta--regular .horarios__lista li,
:where(.pg-presencial) .horarios__tarjeta--vip .horarios__beneficios li{
  transition: color 400ms cubic-bezier(0.22, 0.9, 0.35, 1), border-color 400ms cubic-bezier(0.22, 0.9, 0.35, 1);
}
:where(.pg-presencial) .horarios__tarjeta--vip{
  padding: 56px 35px 23px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(20, 24, 32, 0.12);
}
:where(.pg-presencial) .horarios__tarjeta--regular:hover,
:where(.pg-presencial) .horarios__tarjeta--vip:hover{
  box-shadow: 0 18px 32px rgba(86, 50, 220, 0.18);
}
:where(.pg-presencial) .horarios__tarjeta--regular:hover::before,
:where(.pg-presencial) .horarios__tarjeta--vip:hover::before{
  clip-path: circle(150% at var(--wave-x, 50%) var(--wave-y, 50%));
}
:where(.pg-presencial) .horarios__tarjeta--regular > :not(.horarios__icono),
:where(.pg-presencial) .horarios__tarjeta--vip > :not(.horarios__icono){
  position: relative;
  z-index: 1;
}
:where(.pg-presencial) .horarios .horarios__tarjeta--regular:hover .horarios__etiqueta,
:where(.pg-presencial) .horarios__tarjeta--regular:hover .horarios__lista li,
:where(.pg-presencial) .horarios__tarjeta--vip:hover h3,
:where(.pg-presencial) .horarios__tarjeta--vip:hover p,
:where(.pg-presencial) .horarios__tarjeta--vip:hover .horarios__beneficios li{
  color: #fff;
}
:where(.pg-presencial) .horarios__tarjeta--regular:hover .horarios__lista li,
:where(.pg-presencial) .horarios__tarjeta--vip:hover .horarios__beneficios li{
  border-color: var(--red);
}
:where(.pg-presencial) .horarios__tarjeta--regular:hover .horarios__lista li::before,
:where(.pg-presencial) .horarios__tarjeta--vip:hover .horarios__beneficios li::before{
  color: var(--red);
}
:where(.pg-presencial) .horarios__icono{
  position: absolute;
  z-index: 1;
  width: 126px;
  height: 126px;
  object-fit: contain;
  pointer-events: none;
}
:where(.pg-presencial) .horarios__icono--calendario{
  top: -77px;
  left: 28px;
}
:where(.pg-presencial) .horarios__icono--reloj{
  top: -77px;
  right: 39px;
}
:where(.pg-presencial) .horarios__etiqueta{
  color: var(--purple);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}
:where(.pg-presencial) .horarios__lista,
:where(.pg-presencial) .horarios__beneficios{
  list-style: none;
  padding: 0;
}
:where(.pg-presencial) .horarios__lista{
  margin: 86px 0 0;
}
:where(.pg-presencial) .horarios__lista li,
:where(.pg-presencial) .horarios__beneficios li{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 37px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}
:where(.pg-presencial) .horarios__lista li{
  padding: 7px 0 7px 13px;
  border-top: 2px solid var(--purple);
}
:where(.pg-presencial) .horarios__lista li::before,
:where(.pg-presencial) .horarios__beneficios li::before{
  content: "\2713";
  flex: 0 0 auto;
  margin-right: 4px;
  font-weight: 700;
}
:where(.pg-presencial) .horarios__lista li::before{
  position: absolute;
  left: 0;
  color: var(--purple);
}
:where(.pg-presencial) .horarios__boton,
:where(.pg-presencial) .horarios__boton-vip{
  display: block;
  height: 50px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
:where(.pg-presencial) .horarios__boton{
  width: 181px;
  margin-top: 10px;
  border: 2px solid #252a33;
  background: #fff;
  color: #20232a;
}
:where(.pg-presencial) .horarios__etiqueta-vip{
  color: var(--red);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
}
:where(.pg-presencial) .horarios__etiqueta{
  font-family: "Montserrat", sans-serif;
}
:where(.pg-presencial) .horarios .horarios__tarjeta--vip h3{
  margin: 5px 0 7px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 700;
}
:where(.pg-presencial) .horarios__tarjeta--vip p{
  max-width: 510px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
:where(.pg-presencial) .horarios__beneficios{
  max-width: 405px;
  margin: 16px 0 0;
}
:where(.pg-presencial) .horarios__beneficios li{
  min-height: 38px;
  padding: 7px 0;
  color: var(--ink);
  border-bottom: 2px solid var(--purple);
}
:where(.pg-presencial) .horarios__beneficios li:first-child{
  border-top: 2px solid var(--purple);
}
:where(.pg-presencial) .horarios__beneficios li::before{
  color: var(--purple);
}
:where(.pg-presencial) .horarios__boton-vip{
  width: 180px;
  margin-top: 4px;
  border: 2px solid #252a33;
  background: #fff;
  color: #20232a;
}
:where(.pg-presencial) .horarios__boton:hover,
:where(.pg-presencial) .horarios__boton-vip:hover,
:where(.pg-presencial) .horarios__boton:focus-visible,
:where(.pg-presencial) .horarios__boton-vip:focus-visible{
  border-color: var(--lime);
  background: var(--lime);
  color: #15200a;
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce){
  :where(.pg-presencial) .horarios .horarios__tarjeta,
:where(.pg-presencial) .horarios__tarjeta::before,
:where(.pg-presencial) .horarios__tarjeta--regular .horarios__etiqueta,
:where(.pg-presencial) .horarios__tarjeta--regular .horarios__lista li,
:where(.pg-presencial) .horarios__tarjeta--regular .horarios__lista li::before,
:where(.pg-presencial) .horarios__tarjeta--vip h3,
:where(.pg-presencial) .horarios__tarjeta--vip p,
:where(.pg-presencial) .horarios__tarjeta--vip .horarios__beneficios li,
:where(.pg-presencial) .horarios__tarjeta--vip .horarios__beneficios li::before{
    transition-duration: 0.01ms;
  }
}
@media (max-width: 900px){
  :where(.pg-presencial) .horarios{
    width: 100%;
    padding-right: max(20px, calc((100% - 700px) / 2));
    padding-left: max(20px, calc((100% - 700px) / 2));
  }
  :where(.pg-presencial) .horarios__tarjetas{
    grid-template-columns: 1fr;
    gap: 42px;
  }
}
@media (max-width: 560px){
  :where(.pg-presencial) .horarios{
    width: 100%;
    padding: 26px 16px 30px;
  }
  :where(.pg-presencial) .horarios__encabezado h2{
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }
  :where(.pg-presencial) .horarios__subrayado{
    width: 100px;
    height: 5px;
    margin-top: 13px;
  }
  :where(.pg-presencial) .horarios__subtitulo{
    margin: 17px auto 65px;
    font-size: 14px;
  }
  :where(.pg-presencial) .horarios__tarjeta{
    min-height: 0;
    border-radius: 18px;
  }
  :where(.pg-presencial) .horarios__tarjeta--regular{
    padding: 45px 21px 22px;
  }
  :where(.pg-presencial) .horarios__tarjeta--vip{
    padding: 48px 22px 24px;
  }
  :where(.pg-presencial) .horarios__icono--calendario{
    left: 8px;
    width: 108px;
    height: 108px;
  }
  :where(.pg-presencial) .horarios__icono--reloj{
    right: 4px;
    width: 108px;
    height: 108px;
  }
  :where(.pg-presencial) .horarios__lista{
    margin-top: 66px;
  }
  :where(.pg-presencial) .horarios .horarios__tarjeta--vip h3{
    max-width: 290px;
  }
  :where(.pg-presencial) .horarios__tarjeta--vip p{
    max-width: 100%;
  }
}
/* Sombra de las tarjetas de horarios: en capas para que se despeguen del fondo blanco (la plana de .card casi no se veía) */
:where(.pg-presencial) .horarios .horarios__tarjeta {
  box-shadow:
    0 24px 48px -16px rgba(0, 33, 71, 0.32),
    0 8px 18px rgba(0, 33, 71, 0.12),
    0 0 0 1px rgba(0, 33, 71, 0.08);
}
:where(.pg-presencial) .horarios .horarios__tarjeta:hover {
  box-shadow:
    0 30px 56px -16px rgba(86, 50, 220, 0.38),
    0 10px 22px rgba(0, 33, 71, 0.14),
    0 0 0 1px rgba(86, 50, 220, 0.2);
}
/* ── Nuestras sedes ── */
:where(.pg-presencial) .nuestras-sedes{
  --nuestras-sedes-navy: #06264b;
  --nuestras-sedes-purple: #4c2bdc;
  --nuestras-sedes-orange: #ec4938;
  --nuestras-sedes-lime: #caff31;
  --nuestras-sedes-ink: #191d27;
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 780px);
  width: 100%;
  margin: 0;
  padding: 58px 9%;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(115deg, #fff 0%, #fff 56%, #f6f3ff 100%);
  color: var(--nuestras-sedes-ink);
  font-family: "Instrument Sans", sans-serif;
}
:where(.pg-presencial) .nuestras-sedes__contenido{
  position: relative;
  z-index: 2;
  width: 55%;
  max-width: 720px;
  flex: 0 1 720px;
  transform: translateX(-80px);
}
:where(.pg-presencial) .nuestras-sedes__encabezado{
  position: relative;
  z-index: 2;
}
:where(.pg-presencial) .nuestras-sedes__titulo{
  margin: 0;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.88;
}
:where(.pg-presencial) .nuestras-sedes__titulo span{
  color: var(--nuestras-sedes-purple);
}
:where(.pg-presencial) .nuestras-sedes__subrayado{
  width: 74px;
  height: 4px;
  margin-top: 20px;
  border-radius: 999px;
  background: var(--nuestras-sedes-orange);
}
:where(.pg-presencial) .nuestras-sedes__tarjetas{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
  transform: translateY(68px);
}
:where(.pg-presencial) .nuestras-sedes__tarjeta{
  position: relative;
  isolation: isolate;
  padding: 24px 24px 22px;
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 10px 24px rgb(6 38 75 / 16%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
:where(.pg-presencial) .nuestras-sedes__tarjeta::before,
:where(.pg-presencial) .nuestras-sedes__tarjeta::after{
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 32px;
  height: 58px;
  content: "";
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, #caff31 0 2px, transparent 2.5px) 2px 8px / 8px 10px, radial-gradient(circle, #ff5948 0 2px, transparent 2.5px) 10px 2px / 10px 12px, radial-gradient(circle, #fff 0 1.5px, transparent 2px) 20px 12px / 9px 11px, radial-gradient(circle, #ffc83d 0 2px, transparent 2.5px) 5px 28px / 10px 12px, radial-gradient(circle, #caff31 0 1.5px, transparent 2px) 19px 34px / 9px 10px, radial-gradient(circle, #fff 0 2px, transparent 2.5px) 8px 46px / 10px 10px;
  background-repeat: no-repeat;
}
:where(.pg-presencial) .nuestras-sedes__tarjeta::before{
  left: -8px;
}
:where(.pg-presencial) .nuestras-sedes__tarjeta::after{
  right: -8px;
  filter: hue-rotate(35deg);
}
:where(.pg-presencial) .nuestras-sedes__tarjeta:hover,
:where(.pg-presencial) .nuestras-sedes__tarjeta:focus-within{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgb(6 38 75 / 22%);
}
:where(.pg-presencial) .nuestras-sedes__tarjeta:hover::before,
:where(.pg-presencial) .nuestras-sedes__tarjeta:focus-within::before{
  animation: sedes-confetti-left 650ms ease-out both;
}
:where(.pg-presencial) .nuestras-sedes__tarjeta:hover::after,
:where(.pg-presencial) .nuestras-sedes__tarjeta:focus-within::after{
  animation: sedes-confetti-right 650ms ease-out both;
}
:where(.pg-presencial) .nuestras-sedes__tarjeta--azul{
  background: var(--nuestras-sedes-navy);
}
:where(.pg-presencial) .nuestras-sedes__tarjeta--morado{
  background: var(--nuestras-sedes-purple);
}
:where(.pg-presencial) .nuestras-sedes__zona{
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:where(.pg-presencial) .nuestras-sedes__titulo-tarjeta{
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.05;
}
:where(.pg-presencial) .nuestras-sedes__descripcion{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
:where(.pg-presencial) .nuestras-sedes__enlace{
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--nuestras-sedes-lime);
  color: #101719;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}
:where(.pg-presencial) .nuestras-sedes__tarjeta--morado .nuestras-sedes__enlace{
  background: var(--nuestras-sedes-orange);
  color: #fff;
}
:where(.pg-presencial) .nuestras-sedes__enlace:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
}
:where(.pg-presencial) .nuestras-sedes__enlace:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 4px;
}
:where(.pg-presencial) .nuestras-sedes__foto{
  position: absolute;
  z-index: 1;
  right: 3%;
  bottom: 0;
  display: flex;
  width: 40%;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
:where(.pg-presencial) .nuestras-sedes__foto img{
  display: block;
  width: 90%;
  max-width: 594px;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
@media (min-width: 1200px){
  :where(.pg-presencial) .nuestras-sedes{
    min-height: min(100svh, 780px);
  }
  :where(.pg-presencial) .nuestras-sedes__contenido{
    width: 58%;
  }
  :where(.pg-presencial) .nuestras-sedes__tarjetas{
    max-width: 720px;
  }
}
@media (max-width: 850px){
  :where(.pg-presencial) .nuestras-sedes{
    min-height: 0;
    padding: 46px 6%;
  }
  :where(.pg-presencial) .nuestras-sedes__contenido{
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
    transform: translateX(-40px);
  }
  :where(.pg-presencial) .nuestras-sedes__titulo{
    font-size: clamp(3.5rem, 9vw, 5rem);
  }
  :where(.pg-presencial) .nuestras-sedes__tarjetas{
    max-width: 680px;
    gap: 16px;
    margin-top: 24px;
    transform: translateY(40px);
  }
  :where(.pg-presencial) .nuestras-sedes__tarjeta{
    padding: 22px;
  }
  :where(.pg-presencial) .nuestras-sedes__foto{
    right: -4%;
    width: 46%;
    opacity: 0.22;
  }
}
@media (max-width: 600px){
  :where(.pg-presencial) .nuestras-sedes{
    display: block;
    padding: 38px 20px 0;
    overflow: hidden;
  }
  :where(.pg-presencial) .nuestras-sedes__contenido{
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    transform: none;
  }
  :where(.pg-presencial) .nuestras-sedes__titulo{
    font-size: clamp(3.4rem, 16vw, 4.8rem);
  }
  :where(.pg-presencial) .nuestras-sedes__subrayado{
    margin-top: 18px;
  }
  :where(.pg-presencial) .nuestras-sedes__tarjetas{
    position: relative;
    z-index: 2;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
    transform: none;
  }
  :where(.pg-presencial) .nuestras-sedes__tarjeta{
    padding: 21px;
    border-radius: 19px;
  }
  :where(.pg-presencial) .nuestras-sedes__titulo-tarjeta{
    font-size: 1.55rem;
  }
  :where(.pg-presencial) .nuestras-sedes__descripcion{
    max-width: 420px;
  }
  :where(.pg-presencial) .nuestras-sedes__foto{
    position: relative;
    right: auto;
    bottom: auto;
    width: 112%;
    height: auto;
    margin: -10px -6% 0;
  }
  :where(.pg-presencial) .nuestras-sedes__foto img{
    width: 90%;
    max-height: none;
  }
}
@media (prefers-reduced-motion: reduce){
  :where(.pg-presencial) .nuestras-sedes *,
:where(.pg-presencial) .nuestras-sedes *::before,
:where(.pg-presencial) .nuestras-sedes *::after{
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
/* ── Certificaciones ── */
:where(.pg-presencial) h1,
:where(.pg-presencial) h2,
:where(.pg-presencial) h3,
:where(.pg-presencial) h4,
:where(.pg-presencial) h5,
:where(.pg-presencial) h6{
  font-family: var(--disp);
}
:where(.pg-presencial) .certificaciones{
  width: 100%;
  margin: 0;
  padding: 24px max(15px, calc((100% - 1280px) / 2)) 40px;
  background: #fff;
}
:where(.pg-presencial) .certificaciones .sec-title{
  max-width: 1000px;
  margin: 0 auto 28px;
  padding: 0 12px;
  text-align: center;
  font-weight: 900;
  font-size: clamp(1.9rem, 3.7vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #1c2436;
}
:where(.pg-presencial) .certificaciones .sec-title .vio{
  color: var(--violet);
}
:where(.pg-presencial) .cert-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 28px 16px;
}
:where(.pg-presencial) .cert-card{
  position: relative;
  width: 100%;
  min-height: 168px;
  background: var(--card-bg);
  border: 1px solid rgba(32, 38, 52, 0.08);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 0 0 14px;
  display: flex;
  flex-direction: column;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  will-change: transform;
}
:where(.pg-presencial) .cert-card:hover,
:where(.pg-presencial) .cert-card:focus-within{
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(78, 70, 213, 0.24);
  box-shadow: 0 22px 36px rgba(19, 26, 40, 0.16);
}
:where(.pg-presencial) .cert-aptis{
  transform: translateY(-12px);
}
:where(.pg-presencial) .cert-ielts{
  background: #f8f8f9;
}
:where(.pg-presencial) .cert-aptis{
  background: #f8f8f9;
}
:where(.pg-presencial) .cert-toefl{
  background: #f8f8f9;
}
:where(.pg-presencial) .cert-ote{
  background: #f8f8f9;
}
:where(.pg-presencial) .cert-oopt{
  background: #f8f8f9;
}
:where(.pg-presencial) .cert-card .cert-card__banda{
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 14px 14px 0 0;
  padding: 8px 16px;
}
:where(.pg-presencial) .cert-card .cert-card__banda img{
  display: block;
  max-height: 48px;
  width: auto;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.12));
}
:where(.pg-presencial) .cert-ielts .cert-card__banda{
  background: var(--cert-ielts);
}
:where(.pg-presencial) .cert-aptis .cert-card__banda{
  background: var(--cert-aptis);
}
:where(.pg-presencial) .cert-toefl .cert-card__banda{
  background: var(--cert-ielts);
}
:where(.pg-presencial) .cert-ote .cert-card__banda{
  background: var(--cert-opt);
}
:where(.pg-presencial) .cert-oopt .cert-card__banda{
  background: var(--cert-opt);
}
:where(.pg-presencial) .cert-card .cert-card__emisor{
  padding: 12px 18px 0;
  font-weight: 900;
  color: var(--ink);
  font-size: 0.62rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-family: var(--mono);
}
:where(.pg-presencial) .cert-card .cert-card__emisor .cert-card__sede{
  font-weight: 700;
  color: var(--muted);
}
:where(.pg-presencial) .cert-card p{
  margin: 10px 18px 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(28, 36, 54, 0.78);
}
:where(.pg-presencial) .cert-card a{
  margin: auto 18px 0;
  padding-top: 12px;
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--violet);
  text-decoration: none;
  width: fit-content;
  transition: opacity 0.2s ease;
  font-family: var(--mono);
}
:where(.pg-presencial) .cert-card a:hover{
  opacity: 0.8;
}
:where(.pg-presencial) .certificaciones__mascota{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
:where(.pg-presencial) .certificaciones__mascota img{
  height: 280px;
  display: block;
  width: auto;
  max-height: 190px;
  filter: drop-shadow(0 20px 25px rgba(31, 38, 58, 0.08));
}
@media (max-width: 980px){
  :where(.pg-presencial) .cert-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :where(.pg-presencial) .cert-grid > .certificaciones__mascota{
    display: none;
  }
  :where(.pg-presencial) .cert-aptis{
    transform: none;
  }
}
@media (max-width: 700px){
  :where(.pg-presencial) .certificaciones{
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
  }
  :where(.pg-presencial) .cert-grid{
    grid-template-columns: 1fr;
  }
  :where(.pg-presencial) .cert-card{
    min-height: 168px;
  }
}
@media (prefers-reduced-motion: reduce){
  :where(.pg-presencial) .cert-card{
    transition: none;
  }
}
/* ── Testimonios en video ── */
:where(.pg-presencial) .grid{
  display: grid;
  gap: 22px;
  margin-top: 52px;
}
:where(.pg-presencial) .grid.c3{
  grid-template-columns: repeat(3, 1fr);
}
:where(.pg-presencial) .grid.testimonios__rejilla{
  margin-top: 40px;
}
@media (max-width: 1080px){
  :where(.pg-presencial) .grid.c3{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px){
  :where(.pg-presencial) .grid.c3{
    grid-template-columns: 1fr;
  }
}
:where(.pg-presencial) .card{
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  padding: 30px 26px;
  box-shadow: 6px 6px 0 rgba(0, 33, 71, .10);
  transition: transform .3s var(--ease), box-shadow .3s;
  display: flex;
  flex-direction: column;
}
:where(.pg-presencial) .card h3{
  font-family: var(--disp);
  font-size: 20px;
  font-weight: 800;
  color: var(--oxford);
  margin-bottom: 8px;
}
:where(.pg-presencial) .card p{
  font-size: 14.5px;
  color: var(--ink-soft);
}
:where(.pg-presencial) .card .mono-tag{
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-deep);
  margin-bottom: 12px;
}
:where(.pg-presencial) .test-video{
  position: relative;
  border: 2px solid var(--oxford);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--oxford-deep);
  margin-bottom: 18px;
  cursor: pointer;
}
:where(.pg-presencial) .test-video img.yt-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.5);
  display: block;
}
:where(.pg-presencial) #testimonios .test-video iframe{
  display: none !important;
}
:where(.pg-presencial) .test-video .yt-play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
:where(.pg-presencial) .test-video .yt-play svg{
  width: 58px;
  height: 41px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45));
  transition: transform .25s var(--ease);
}
:where(.pg-presencial) .test-video:hover .yt-play svg{
  transform: scale(1.12);
}
:where(.pg-presencial) #testimonios .card{
  position: relative;
}
:where(.pg-presencial) #testimonios{
  background: #fff;
}
:where(.pg-presencial) #testimonios .card .pin{
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red, #E8442E);
  border: 3px solid #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .18);
}
:where(.pg-presencial) #testimonios .test-video .vid-tag{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red, #E8442E);
  color: #fff;
  font-family: var(--mono, 'Montserrat', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
:where(.pg-presencial) #testimonios .test-video .vid-tag i{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: tv-pulse 2s infinite;
}
:where(.pg-presencial) #testimonios .grid{
  perspective: 1300px;
}
:where(.pg-presencial) #testimonios .grid > .card:nth-child(1){
  transform: rotate(-1deg);
}
:where(.pg-presencial) #testimonios .grid > .card:nth-child(2){
  transform: rotate(.8deg) translateY(14px);
}
:where(.pg-presencial) #testimonios .grid > .card:nth-child(3){
  transform: rotate(-.6deg);
}
:where(.pg-presencial) #testimonios .grid > .card:hover{
  transform: rotate(0) translateY(-6px);
}
@media (max-width: 680px){
  :where(.pg-presencial) #testimonios .grid > .card:nth-child(n){
    transform: none;
  }
}
:where(.pg-presencial) #testimonios .revelar-testimonio{
  opacity: 0;
  translate: 0 44px;
  scale: .95;
  transition: opacity .8s var(--ease, cubic-bezier(.22, .9, .35, 1)), translate .9s var(--ease, cubic-bezier(.22, .9, .35, 1)), scale .9s var(--ease, cubic-bezier(.22, .9, .35, 1)), transform .3s var(--ease, cubic-bezier(.22, .9, .35, 1)), box-shadow .3s var(--ease, cubic-bezier(.22, .9, .35, 1));
}
:where(.pg-presencial) #testimonios .revelar-testimonio.in{
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
:where(.pg-presencial) #testimonios .sec-title.revelar-testimonio{
  filter: blur(6px);
  transition-property: opacity, translate, scale, filter;
}
:where(.pg-presencial) #testimonios .sec-title.revelar-testimonio.in{
  filter: none;
}
:where(.pg-presencial) #testimonios .g-badge{
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 44px auto 0;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--white, #fff);
  border: 2px solid var(--oxford, var(--oxford));
  border-radius: 999px;
  padding: 12px 24px;
  box-shadow: 5px 5px 0 var(--violet, #6C4CF1);
  text-decoration: none;
  transition: transform .18s var(--ease, cubic-bezier(.22, .9, .35, 1)), box-shadow .18s var(--ease, cubic-bezier(.22, .9, .35, 1));
}
:where(.pg-presencial) #testimonios .g-badge:hover{
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--violet, #6C4CF1);
}
:where(.pg-presencial) #testimonios .g-badge .g-logo{
  font-family: var(--disp, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
}
:where(.pg-presencial) #testimonios .g-badge .g-score{
  font-family: var(--disp, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 32px;
  color: var(--oxford, var(--oxford));
  line-height: 1;
}
:where(.pg-presencial) #testimonios .g-badge > span:last-child{
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
:where(.pg-presencial) #testimonios .g-badge .g-stars{
  display: block;
  color: #F5A623;
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
}
:where(.pg-presencial) #testimonios .g-badge .g-text{
  display: block;
  font-size: 14.5px;
  color: var(--ink-soft, var(--ink-soft));
  font-weight: 600;
  line-height: 1.3;
}
@media (max-width: 520px){
  :where(.pg-presencial) #testimonios .g-badge{
    gap: 12px;
    padding: 12px 18px;
    border-radius: 24px;
  }
  :where(.pg-presencial) #testimonios .g-badge .g-text{
    font-size: 12.5px;
  }
}
:where(.pg-presencial) .yt-popup{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 19, 48, .82);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
}
:where(.pg-presencial) .yt-popup.open{
  display: flex;
}
:where(.pg-presencial) .yt-popup-box{
  position: relative;
  aspect-ratio: 9 / 16;
  height: auto;
  width: min(86vw, calc(min(82vh, 850px) * 9 / 16));
  background: #000;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
:where(.pg-presencial) .yt-popup-box iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 6px;
}
:where(.pg-presencial) #yt-close{
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 5;
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
:where(.pg-presencial) #yt-close:hover{
  background: var(--red, #E8442E);
  color: #fff;
}
body.pg-presencial.yt-lock{
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce){
  :where(.pg-presencial) #testimonios .revelar-testimonio{
    opacity: 1;
    translate: none;
    scale: none;
    filter: none;
    transition: none;
  }
  :where(.pg-presencial) #testimonios .vid-tag i{
    animation: none;
  }
}
/* ── Preguntas frecuentes ── */
:where(.pg-presencial) #faq{
  background-color: #fff;
}
/* ── Formulario de inscripción ── */
:where(.pg-presencial) #inscripcion{
  background-color: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2rem;
  font-family: "Instrument Sans", sans-serif;
  color: #1a1f2c;
}
:where(.pg-presencial) #inscripcion .sec-title{
  color: var(--oxford);
}
:where(.pg-presencial) #inscripcion .sec-title .vio{
  color: #5a3ac4;
}
:where(.pg-presencial) #inscripcion .sec-intro{
  color: #1a1f2c;
  margin-bottom: 1.5rem;
}
:where(.pg-presencial) #inscripcion input,
:where(.pg-presencial) #inscripcion select,
:where(.pg-presencial) #inscripcion textarea{
  font-family: "Instrument Sans", sans-serif;
}
:where(.pg-presencial) .plan-form .pf-field label{
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1a1f2c;
}
:where(.pg-presencial) .plan-form input,
:where(.pg-presencial) .plan-form select,
:where(.pg-presencial) .plan-form textarea{
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #1a1f2c;
  border-radius: 8px;
  background-color: #ffffff;
  color: #1f2937;
  font-size: 1rem;
  box-sizing: border-box;
}
:where(.pg-presencial) .plan-form input:focus,
:where(.pg-presencial) .plan-form select:focus,
:where(.pg-presencial) .plan-form textarea:focus{
  outline: none;
  border-color: #f3fff7;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
:where(.pg-presencial) .plan-form .consent{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  color: #1a1f2c;
}
:where(.pg-presencial) .plan-form .pf-nota{
  font-size: 0.85rem;
  color: #1a1f2c;
  margin-top: 0.5rem;
}
:where(.pg-presencial) .plan-form .btn-cta{
  background-color: #16a34a;
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s;
}
:where(.pg-presencial) .plan-form .btn-cta:hover{
  background-color: #f1fff6;
}
:where(.pg-presencial) .plan-form .form-ok{
  display: none;
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: #dcfce7;
  color: #f2f8f4;
  border-radius: 8px;
  border: 1px solid #ffffff;
}
/* FIN-PRESENCIAL */
/* ── Keyframes de Presencial ── */
@keyframes unfold-timeline {
  from {
    transform: translateX(-50%) scaleY(0);
  }
  to {
    transform: translateX(-50%) scaleY(1);
  }
}
@keyframes unfold-connector {
  to {
    transform: scaleX(1);
  }
}
@keyframes unfold-page {
  from {
    opacity: 0;
    transform: perspective(700px) rotateX(75deg) scaleY(0.35);
  }
  to {
    opacity: 1;
    transform: perspective(700px) rotateX(0) scaleY(1);
  }
}
@keyframes unfold-center {
  from {
    opacity: 0;
    transform: perspective(700px) scaleY(0.25) scaleX(0.85);
  }
  to {
    opacity: 1;
    transform: perspective(700px) scaleY(1) scaleX(1);
  }
}
@keyframes sedes-confetti-left {
  0% {
    opacity: 0;
    transform: translate(0, -50%) scale(0.45) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-28px, -58%) scale(1) rotate(-28deg);
  }
}
@keyframes sedes-confetti-right {
  0% {
    opacity: 0;
    transform: translate(0, -50%) scale(0.45) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(28px, -58%) scale(1) rotate(28deg);
  }
}
@keyframes tv-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba #ffffff;
  }
  55% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }
}
/* ╔══════════════════════════════════════════════════════════════╗
   ║ 04.3  NIÑOS                                                    ║
   ╚══════════════════════════════════════════════════════════════╝
   body.pg-ninos */

@keyframes faqIn {
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
@keyframes mcer-draw-line {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes mcer-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mcer-card-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tv-pulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); }
  55%{ box-shadow:0 0 0 6px rgba(255,255,255,0); }
}
/* ============================== 1 · BASE ============================== */
/* body unificado: estaba 3 veces; el valor final de cada propiedad se conserva */
/* ============================ 2 · GLOBAL ============================ */
/* ----- Header ----- */
:where(.pg-ninos) .brand-mark img { width:35px; height:35px; }
/* Punto rojo del logo (solo existía en Niños; el header debe ser igual en todas las páginas):
.brand-mark::after{
  content:""; position:absolute; width:12px; height:12px; border-radius:50%;
  background:var(--red); top:-4px; right:-4px; border:2.5px solid var(--white);
} */
@media(max-width:960px){
  :where(.pg-ninos) .nav ul { display:none; }
  :where(.pg-ninos) .nav-burger { display:block; }
}
@media(max-width:640px){
  :where(.pg-ninos) .topbar { font-size:11px; padding:8px 4vw; gap:4px; }
  :where(.pg-ninos) .topbar .promo { font-size:11.5px; }
  :where(.pg-ninos) .topbar .topbar-contact { font-size:10px; }
}
/* ----- Page hero (base) ----- */
:where(.pg-ninos) .page-hero {
  background: var(--off);
  padding: 84px 5vw 68px;
  background-size: 22px 22px;
}
:where(.pg-ninos) .page-hero h1 {
  font-size: clamp(34px,5vw,56px);
}
/* ----- Hero con cotizador ----- */
@media(max-width:960px){
  :where(.pg-ninos) .page-hero.hero-split { text-align:center; padding:48px 5vw 52px; }
  :where(.pg-ninos) .hero-split-wrap { grid-template-columns:1fr; gap:32px; }
  :where(.pg-ninos) .hero-copy .hero-cta { justify-content:center; }
  :where(.pg-ninos) .hero-form { justify-self:center; box-shadow:6px 6px 0 var(--violet); }
}
@media(max-width:560px){
  :where(.pg-ninos) .qf-grid { grid-template-columns:1fr; }
}
/* ----- Botones ----- */
/* ----- Formulario de inscripción / cotización ----- */
@media(max-width:640px){
  :where(.pg-ninos) .pf-grid { grid-template-columns:1fr; }
}
/* Botón lima "btn-cta" (lo usa el formulario de inscripción) */
:where(.pg-ninos) .btn-cta {
  border: 2.5px solid var(--oxford-deep);
}
:where(.pg-ninos) .btn-cta:hover { box-shadow:6px 6px 0 rgba(0,0,0,.35); }
/* ----- Secciones ----- */
/* ----- Barra de cifras (base) ----- */
@media(max-width:820px){
  :where(.pg-ninos) .stats-bar { grid-template-columns:1fr 1fr; }
}
@media(max-width:420px){
  :where(.pg-ninos) .stat-box { padding:16px 12px 14px; }
  :where(.pg-ninos) .stat-lbl { font-size:11.5px; }
}
/* ----- Oportunidades (base) ----- */
@media(max-width:900px){
  :where(.pg-ninos) .op-wrap { grid-template-columns:1fr; gap:34px; }
  :where(.pg-ninos) .op-img { aspect-ratio:16/10; }
}
/* ----- "Todo lo que incluye" (base; lo redefine el bloque .inc-section) ----- */
/* ----- Cards genéricas ----- */
@media(max-width:1080px){
  :where(.pg-ninos) .grid.c4 { grid-template-columns:repeat(2,1fr); }
  :where(.pg-ninos) .grid.c3 { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:680px){
  :where(.pg-ninos) .grid.c2, :where(.pg-ninos) .grid.c3, :where(.pg-ninos) .grid.c4 { grid-template-columns:1fr; }
}
/* ----- Cita, FAQ ----- */
/* ----- CTA band, footer ----- */
@media(max-width:1200px){
  :where(.pg-ninos) .foot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px; }
}
@media(max-width:760px){
  :where(.pg-ninos) .foot-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
  :where(.pg-ninos) .foot-grid { grid-template-columns:1fr; }
}
/* ====================== 3 · PERSONALIZACIÓN NIÑOS ====================== */
/* Sticker del hero: en Niños lo anula "#cotizar.page-hero::after" (sección 4) */
:where(.pg-ninos) .page-hero::after {
  border: 2px solid var(--oxford);
  background: #fff;
  color: var(--oxford);
}
/* Botón "motion" (global) */
:where(.pg-ninos) .btn-motion {
  background: #fff;
  border: 2.5px solid var(--oxford);
  box-shadow: 4px 4px 0 rgba(0,33,71,.16);
}
:where(.pg-ninos) .btn-motion .circle {
  background: var(--violet);
}
:where(.pg-ninos) .btn-motion .icon {
  color: #fff;
}
:where(.pg-ninos) .btn-motion .label {
  color: var(--oxford);
}
:where(.pg-ninos) .btn-motion:hover .label { color:#fff; }
@media(max-width:480px){
  :where(.pg-ninos) .btn-motion .label { font-size:14px; margin:0 18px 0 58px; }
}
/* Utilidades que usa enhance.js */
/* ================================ 4 · HERO ================================ */
/* Arte central (planeta + niños + ABC) */
/* Formulario */
/* Cifras */
/* Responsive del hero */
/* =========================== 5 · SECCIONES PROPIAS =========================== */
/* ----- El inglés que aprende tu hijo hoy ----- */
/* ----- Programa infantil (pilares) ----- */
:where(.pg-ninos) #pilar-1-cabecera, :where(.pg-ninos) #pilar-6-cabecera { background-color:#00c9d4; color:#fff; }
:where(.pg-ninos) #pilar-2-cabecera, :where(.pg-ninos) #pilar-4-cabecera { background-color:#e91e8c; color:#fff; }
:where(.pg-ninos) #pilar-3-cabecera, :where(.pg-ninos) #pilar-5-cabecera { background-color:#f5c400; color:#111; }
/* ----- Las 4 habilidades ----- */
/* CAMBIO: antes top:10px; right:10px → más hacia la esquina */
/* CAMBIO: mismo desplazamiento proporcional */
/* ----- MCER ----- */
/* ----- Todo lo que incluye (.inc-section) ----- */
:where(.pg-ninos) .inc-section .inc-card li::before { flex-shrink:0; margin-top:1px; }
/* ----- Edades, horarios y modalidades (antes en un <style> suelto dentro del body) ----- */
:where(.pg-ninos) .edades-seccion,
:where(.pg-ninos) .edades-seccion *,
:where(.pg-ninos) .edades-seccion *::before,
:where(.pg-ninos) .edades-seccion *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:where(.pg-ninos) .edades-seccion {
  font-family: var(--body);
  line-height: 1.3;
  background: #ffffff;
  color: #1a1a2e;
  position: relative;
  margin: 0 auto;
  padding: 27px 0 20px;
  overflow: visible;
}
:where(.pg-ninos) .edades-fondo-appa {
  position: absolute;
  top: -20px;
  left: -183px;
  width: 400px;
  opacity: .58;
  pointer-events: none;
  z-index: 0;
  transform: scaleX(-1);
}
:where(.pg-ninos) .edades-encabezado { position:relative; z-index:1; text-align:center; margin-bottom:92px; }
:where(.pg-ninos) .edades-titulo { font-size:40px; font-weight:800; color:#1a1a2e; line-height:1.2; }
:where(.pg-ninos) .edades-texto-resaltado { color:#7c3aed; }
:where(.pg-ninos) .edades-divisor { width:125px; height:7px; background:#e53935; border-radius:3px; margin:17px auto 20px; }
:where(.pg-ninos) .edades-subtitulo { font-size:.96rem; color:#555; max-width:100%; margin:0 auto; line-height:1.4; }
:where(.pg-ninos) .edades-tarjetas {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-auto-rows: minmax(320px,auto);
  align-items: stretch;
  gap: 46px;
}
:where(.pg-ninos) .edades-recorridos-decorativos {
  position: absolute;
  top: 0;
  left: -96px;
  width: calc(100% + 192px);
  height: 320px;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}
:where(.pg-ninos) .edades-recorridos-decorativos path {
  fill: none;
  stroke: #5940a6;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 15 13;
}
:where(.pg-ninos) .edades-tarjeta-contenedor { position:relative; z-index:1; padding-top:0; display:flex; flex-direction:column; }
:where(.pg-ninos) .edades-tarjeta-contenedor .edades-tarjeta { flex:1; }
:where(.pg-ninos) .edades-icono-flotante { position:absolute; z-index:10; filter:drop-shadow(0 10px 18px rgba(0,0,0,.13)); }
:where(.pg-ninos) .edades-icono-mochila { top:-145px; left:125px; width:180px; }
:where(.pg-ninos) .edades-icono-cohete { top:-118px; right:100px; width:155px; }
:where(.pg-ninos) .edades-icono-estrella { top:-66px; right:54px; width:50px; z-index:11; filter:drop-shadow(0 4px 8px rgba(0,0,0,.1)); }
/* Colores iguales a los de MCER: regulares = azul, VIP = morado (borde 3px + fondo) */
:where(.pg-ninos) .edades-tarjeta {
  --edades-acento: #4dcbe9;
  background: #cdeef8;
  border: 3px solid var(--edades-acento);
  border-radius: 28px;
  padding: 39px 19px 20px;
  height: auto;
  min-height: 320px;
  box-shadow: 0 7px 7px rgba(0,0,0,.3);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
:where(.pg-ninos) .edades-tarjeta-contenedor:hover .edades-tarjeta,
:where(.pg-ninos) .edades-tarjeta-contenedor:focus-within .edades-tarjeta {
  transform: translateY(-7px);
  box-shadow: 0 14px 22px rgba(0,0,0,.22);
}
:where(.pg-ninos) .edades-tarjeta-vip { --edades-acento:#8b68ef; background:#e3dcfb; }
:where(.pg-ninos) .edades-etiqueta-tarjeta {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: #5940a6;
  margin-bottom: 7px;
}
:where(.pg-ninos) .edades-titulo-tarjeta { font-size:1.2rem; font-weight:800; color:#1a1a2e; margin-bottom:6px; line-height:1.2; }
:where(.pg-ninos) .edades-descripcion-tarjeta { font-size:.82rem; color:#666; line-height:1.4; margin-bottom:17px; }
:where(.pg-ninos) .edades-lista { list-style:none; margin-top:3px; width:80%; }
:where(.pg-ninos) .edades-lista li {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .82rem;
  font-weight: 600;
  color: #1a1a2e;
  padding: 8px 0;
  border-top: 1px solid var(--edades-acento);
}
:where(.pg-ninos) .edades-lista-check { color:var(--edades-acento); font-weight:900; font-size:1rem; flex-shrink:0; }
:where(.pg-ninos) .edades-boton-vip {
  display: inline-block;
  margin-top: 4px;
  padding: 12.5px 38px;
  background: #5030cf;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 24px;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background .2s ease, transform .15s ease;
}
:where(.pg-ninos) .edades-boton-vip:hover { background:#4324b8; transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){
  :where(.pg-ninos) .edades-tarjeta { transition:none; }
}
@media (max-width:1345px){
  :where(.pg-ninos) .edades-recorridos-decorativos { display:none; }
}
@media (max-width:960px){
  :where(.pg-ninos) .edades-seccion { width:calc(100% - 40px); padding-top:30px; }
  :where(.pg-ninos) .edades-encabezado { margin-bottom:58px; }
  :where(.pg-ninos) .edades-titulo { font-size:clamp(1.8rem,8vw,2.5rem); }
  :where(.pg-ninos) .edades-subtitulo { max-width:480px; }
  :where(.pg-ninos) .edades-tarjetas { grid-template-columns:1fr; grid-auto-rows:auto; gap:60px; max-width:620px; margin:0 auto; }
  :where(.pg-ninos) .edades-fondo-appa { width:180px; left:-90px; top:0; opacity:.48; }
  :where(.pg-ninos) .edades-tarjeta { height:auto; min-height:320px; padding:39px 19px 18px; }
  :where(.pg-ninos) .edades-tarjeta-contenedor { padding-top:70px; }
  :where(.pg-ninos) .edades-lista { width:100%; }
  :where(.pg-ninos) .edades-boton-vip { min-height:44px; }
  :where(.pg-ninos) .edades-icono-mochila { width:115px; left:24px; top:-42px; }
  :where(.pg-ninos) .edades-icono-cohete { width:115px; right:16px; top:-42px; }
  :where(.pg-ninos) .edades-icono-estrella { width:34px; right:-4px; top:-15px; }
}
/* CTA "Reservar cupo": ya no vive dentro de una <section>; la 1.ª regla lo centra con margen lateral
   si va suelto tras .edades-seccion; la 2.ª aplica si se envuelve en <section class="cta-reserva"> */
:where(.pg-ninos) .edades-seccion + .cta-inline { width:min(1154px,100% - 10vw); margin:34px auto 84px; }
/* ----- Testimonios + reseñas ----- */
/* scale(1.5): la portada 16:9 de YouTube trae barras negras a los lados del video vertical;
   al ampliarla desde el centro se recortan y el video llena la tarjeta. */
/* Modal de video */
/* ============================ 6 · ACCESIBILIDAD ============================ */
@media (prefers-reduced-motion:reduce){
  :where(.pg-ninos) .page-hero::after { animation:none; }
  :where(.pg-ninos) *,
:where(.pg-ninos) *::before,
:where(.pg-ninos) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* HERO */
:where(.pg-ninos) #cotizar {
  --ink: #1c1f2b;
  --muted: #5b5e6a;
  --violet: #4f2fd8;
  --violet-dark: #1b1440;
  --btn-violet: #6C4CF1;
  --acc: #E8442E;
  --acc-sh: rgba(232,68,46,.26);
  --red: #e84c36;
  --display: 'Bricolage Grotesque',sans-serif;
  display: block;
  position: relative;
  margin: 0;
  border: 0;
  background: #fff;
  overflow: visible;
  overflow-x: clip;
  padding: 0 24px 48px;
  font-family: var(--body);
  color: var(--ink);
  text-align: left;
}
:where(.pg-ninos) #cotizar, :where(.pg-ninos) #cotizar *, :where(.pg-ninos) #cotizar *::before, :where(.pg-ninos) #cotizar *::after { box-sizing:border-box; }
:where(.pg-ninos) #cotizar .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* ---------- Layout ---------- */
:where(.pg-ninos) #cotizar .hero-split-wrap {
  position: relative;
  max-width: 1170px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) 350px;
  column-gap: 0;
  align-items: start;
}
/* ---------- Columna de texto ---------- */
:where(.pg-ninos) #cotizar .hero-copy { position:relative; z-index:2; padding-top:33px; min-width:0; }
:where(.pg-ninos) #cotizar .hero-copy h1 {
  margin: 0;
  padding: 0;
  color: var(--ink);
  text-align: left;
  text-transform: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -.04em;
  max-width: 330px;
  text-wrap: balance;
}
:where(.pg-ninos) #cotizar .hero-copy h1 .vio {
  display: block;
  width: max-content;
  margin-top: 0;
  color: var(--violet);
  font-size: 76px;
  line-height: 76px;
  letter-spacing: -.045em;
  text-decoration: underline wavy var(--red);
  text-decoration-thickness: 4px;
  text-underline-offset: 9px;
  text-decoration-skip-ink: none;
}
:where(.pg-ninos) #cotizar .hero-copy .intro {
  position: relative;
  max-width: 232px;
  margin: 34px 0 0;
  padding: 0 0 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
}
:where(.pg-ninos) #cotizar .hero-copy .intro::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 318px;
  height: 1px;
  background: #565a66;
}
:where(.pg-ninos) #cotizar .hero-plan {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  color: #3a3d48;
  font-size: 15px;
  line-height: 26px;
  white-space: nowrap;
}
:where(.pg-ninos) #cotizar .hero-plan b { color:var(--ink); font-weight:700; }
:where(.pg-ninos) #cotizar .hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
/* ---------- Botones del hero (independientes de site.css) ----------
   Réplica exacta de .btn-motion y .btn-line del CSS global, para que el hero
   siga igual aunque site.css se elimine o cambie más adelante. */
:where(.pg-ninos) #cotizar .btn-motion {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--oxford);
  box-shadow: 4px 4px 0 rgba(0,33,71,.16);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.6;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
:where(.pg-ninos) #cotizar .btn-motion:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(0,33,71,.16); }
:where(.pg-ninos) #cotizar .btn-motion .circle {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 46px;
  border-radius: 999px;
  background: var(--btn-violet);
  transition: width .55s var(--ease);
}
:where(.pg-ninos) #cotizar .btn-motion:hover .circle { width:calc(100% - 12px); }
:where(.pg-ninos) #cotizar .btn-motion .icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: #fff;
  transition: transform .55s var(--ease);
}
:where(.pg-ninos) #cotizar .btn-motion:hover .icon { transform:translateY(-50%) translateX(7px); }
:where(.pg-ninos) #cotizar .btn-motion .icon svg { width:22px; height:22px; }
:where(.pg-ninos) #cotizar .btn-motion .label {
  position: relative;
  z-index: 1;
  margin: 0 24px 0 64px;
  padding: 12px 0;
  font-weight: 800;
  font-size: 15px;
  color: var(--oxford);
  white-space: nowrap;
  transition: color .45s var(--ease);
}
:where(.pg-ninos) #cotizar .btn-motion:hover .label { color:#fff; }
:where(.pg-ninos) #cotizar .hero-cta .btn-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 26px;
  border: 2.5px solid var(--oxford);
  border-radius: 14px;
  background: transparent;
  color: var(--oxford);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
:where(.pg-ninos) #cotizar .hero-cta .btn-line:hover { background:var(--oxford); color:#fff; }
@media(max-width:480px){
  :where(.pg-ninos) #cotizar .btn-motion .label { font-size:14px; margin:0 18px 0 58px; }
}
/* ---------- Arte central (planeta + niños + ABC) ---------- */
:where(.pg-ninos) #cotizar .hero-art {
  position: absolute;
  z-index: 1;
  left: 290px;
  top: 0;
  width: calc(100% - 648px);
  max-width: 490px;
  height: auto;
  pointer-events: none;
}
/* Da la altura al contenedor según su ancho (proporción 490 x 440) */
:where(.pg-ninos) #cotizar .hero-art::before { content:""; display:block; padding-top:89.8%; }
:where(.pg-ninos) #cotizar .hero-art img { position:absolute; display:block; max-width:none; height:auto; user-select:none; }
/* HERO_kids.webp ya incluye el planeta: ocupa todo el ancho del arte.
   El ABC se ancla a la esquina inferior derecha del contenedor, así no depende
   de las proporciones de la otra imagen y siempre queda visible encima. */
:where(.pg-ninos) #cotizar .hero-art .art-kids { left:0; top:4.5%; width:96%; z-index:1; }
:where(.pg-ninos) #cotizar .hero-art .art-abc {
  right: 1%;
  bottom: 0;
  left: auto;
  top: auto;
  width: 36.7%;
  z-index: 2;
}
/* ---------- Tarjeta del formulario (independiente de site.css) ----------
   Réplica del estilo global. La inclinación 3D al mover el mouse la aplica
   el script del final del bloque (o enhance.js) sobre la clase .hero-form. */
:where(.pg-ninos) #cotizar .quote-form {
  position: relative;
  z-index: 3;
  width: 350px;
  justify-self: end;
  margin: 42px 8px 0 0;
  padding: 26px 26px 22px;
  background: #fff;
  text-align: center;
  border: 2.5px solid var(--oxford);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--btn-violet);
}
:where(.pg-ninos) #cotizar .hero-mascot {
  position: absolute;
  z-index: 4;
  left: -22px;
  top: -31px;
  width: 84px;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* Sticker "Desde los 4 años" (propio; se anula el ::after del global) */
:where(.pg-ninos) #cotizar.page-hero::after { content:none; display:none; }
:where(.pg-ninos) #cotizar .hero-sticker {
  position: absolute;
  z-index: 4;
  top: -31px;
  padding: 9px 16px;
  background: #fff;
  border: 2px solid var(--acc);
  border-radius: 999px;
  transform: rotate(-3deg);
  color: var(--acc);
  font-family: 'Montserrat','Instrument Sans',sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--acc-sh);
  pointer-events: none;
}
:where(.pg-ninos) #cotizar .quote-tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  font-family: 'Montserrat','Instrument Sans',sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--violet-deep);
  background: var(--violet-tint);
  border: 1.5px solid var(--btn-violet);
  border-radius: 999px;
}
:where(.pg-ninos) #cotizar .hf-title {
  margin: 0 0 6px;
  padding: 0;
  color: var(--oxford);
  text-align: center;
  text-transform: none;
  font: 800 24px/1.15 var(--display);
  letter-spacing: -.02em;
}
:where(.pg-ninos) #cotizar .hf-title .vio {
  display: inline;
  color: var(--btn-violet);
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
}
:where(.pg-ninos) #cotizar .hf-sub { margin:0 0 18px; color:var(--ink-soft); font-size:13px; line-height:1.45; text-align:center; }
:where(.pg-ninos) #cotizar .qf-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left; }
:where(.pg-ninos) #cotizar .qf-field { min-width:0; }
:where(.pg-ninos) #cotizar .qf-full { grid-column:1 / -1; }
:where(.pg-ninos) #cotizar .qf-field input,
:where(.pg-ninos) #cotizar .qf-field select {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  background: var(--white);
  color: #1A1F2C;
  border: 2px solid var(--line);
  border-radius: 12px;
  font: 400 14px/1.4 var(--body);
  transition: border-color .2s, box-shadow .2s;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
}
:where(.pg-ninos) #cotizar .qf-field select {
  padding-right: 36px;
  cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23002147' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
}
:where(.pg-ninos) #cotizar .qf-field select:invalid { color:var(--ink-soft); }
:where(.pg-ninos) #cotizar .qf-field input::placeholder { color:var(--ink-soft); opacity:.85; }
:where(.pg-ninos) #cotizar .qf-field input:focus,
:where(.pg-ninos) #cotizar .qf-field select:focus {
  border-color: var(--btn-violet);
  box-shadow: 0 0 0 3px rgba(108,76,241,.14);
}
:where(.pg-ninos) #cotizar .qf-field input.invalid,
:where(.pg-ninos) #cotizar .qf-field select.invalid {
  border-color: var(--acc);
  background-color: #fff6f5;
}
:where(.pg-ninos) #cotizar .consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  text-align: left;
  margin: 14px 0 12px;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  cursor: pointer;
}
:where(.pg-ninos) #cotizar .consent input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--btn-violet);
  cursor: pointer;
}
:where(.pg-ninos) #cotizar .consent a { color:var(--violet-deep); font-weight:600; }
:where(.pg-ninos) #cotizar .consent.invalid, :where(.pg-ninos) #cotizar .consent.invalid a { color:var(--acc); }
:where(.pg-ninos) #cotizar .quote-form .btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 14px 22px;
  border: none;
  border-radius: 14px;
  background: var(--btn-violet);
  color: #fff;
  cursor: pointer;
  font: 800 15px/1.6 var(--body);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 4px 4px 0 var(--oxford);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
:where(.pg-ninos) #cotizar .quote-form .btn-main:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--oxford); }
:where(.pg-ninos) #cotizar .qf-nota { margin:10px 0 0; color:var(--ink-soft); font-size:11.5px; text-align:center; }
:where(.pg-ninos) #cotizar .form-ok {
  display: none;
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  background: #eaf6ef;
  border: 2px solid #177a4c;
  color: #115c38;
  font-size: 14px;
  font-weight: 600;
}
/* ---------- Barra de cifras (independiente de site.css) ----------
   Réplica del estilo global: tarjetas blancas con borde azul y sombra dura.
   Al pasar el mouse suben 5px y el borde y la sombra se tiñen de rojo. */
:where(.pg-ninos) #cotizar .stats-bar { max-width:940px; margin:50px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
:where(.pg-ninos) #cotizar .stat-box {
  display: block;
  padding: 20px 16px 17px;
  text-align: center;
  background: #fff;
  border: 2px solid var(--oxford);
  border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(0,33,71,.10);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s;
}
:where(.pg-ninos) #cotizar .stat-box:hover { transform:translateY(-5px); border-color:var(--acc); box-shadow:5px 8px 0 var(--acc-sh); }
:where(.pg-ninos) #cotizar .stat-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(30px,3.6vw,42px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--btn-violet);
  line-height: 1;
}
:where(.pg-ninos) #cotizar .stat-num.stat-stars { font-size:24px; letter-spacing:1px; color:#F5A623; }
:where(.pg-ninos) #cotizar .stat-lbl {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
}
/* ---------- Responsive ---------- */
/* Tablet y celular: una sola columna con el orden
   título → descripción → imagen → plan → botones → formulario */
@media(max-width:1000px){
  :where(.pg-ninos) #cotizar { padding:0 5vw 40px; }
  :where(.pg-ninos) #cotizar .hero-split-wrap { grid-template-columns:minmax(0,1fr); padding-top:28px; }
  :where(.pg-ninos) #cotizar .hero-copy { display:contents; }
  :where(.pg-ninos) #cotizar .hero-copy h1 { order:1; max-width:none; text-wrap:balance; }
  :where(.pg-ninos) #cotizar .hero-copy .intro { order:2; margin-top:22px; max-width:480px; }
  :where(.pg-ninos) #cotizar .hero-copy .intro::after { width:min(318px,100%); }
  :where(.pg-ninos) #cotizar .hero-art {
    order: 3;
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    width: min(100%,460px);
    max-width: none;
    margin: 20px auto 0;
  }
  :where(.pg-ninos) #cotizar .hero-plan { order:4; white-space:normal; margin-top:20px; font-size:14px; line-height:1.55; }
  :where(.pg-ninos) #cotizar .hero-cta { order:5; margin-top:20px; }
  :where(.pg-ninos) #cotizar .quote-form { order:6; justify-self:center; width:100%; max-width:420px; margin:52px auto 0; }
  :where(.pg-ninos) #cotizar .stats-bar { margin-top:44px; }
}
@media(max-width:560px){
  :where(.pg-ninos) #cotizar .hero-split-wrap { padding-top:22px; }
  :where(.pg-ninos) #cotizar .hero-copy h1 { font-size:clamp(40px,12.5vw,52px); line-height:1.08; }
  :where(.pg-ninos) #cotizar .hero-copy h1 .vio { font-size:clamp(54px,17vw,72px); line-height:1.05; text-underline-offset:7px; }
  :where(.pg-ninos) #cotizar .hero-copy .intro { max-width:none; font-size:15px; line-height:1.65; margin-top:20px; }
  :where(.pg-ninos) #cotizar .hero-copy .intro::after { width:100%; }
  /* el arte se abre a todo el ancho de la pantalla para que se aprecie más */
  :where(.pg-ninos) #cotizar .hero-art { width:min(100vw,480px); justify-self:center; margin:10px 0 0; }
  :where(.pg-ninos) #cotizar .hero-plan { font-size:13.5px; }
  /* botones a todo el ancho, fáciles de tocar */
  :where(.pg-ninos) #cotizar .hero-cta { flex-direction:column; align-items:stretch; gap:12px; }
  :where(.pg-ninos) #cotizar .btn-motion .label { flex:1; text-align:center; margin:0 18px 0 58px; }
  :where(.pg-ninos) #cotizar .hero-cta .btn-line { justify-content:center; padding:16px 22px; }
  /* formulario */
  :where(.pg-ninos) #cotizar .quote-form {
    padding: 24px 18px 20px;
    margin-top: 48px;
    border-radius: 20px;
    box-shadow: 6px 6px 0 var(--btn-violet);
  }
  :where(.pg-ninos) #cotizar .hero-mascot { left:-8px; top:-30px; width:66px; }
  :where(.pg-ninos) #cotizar .hero-sticker { right:-4px; top:-24px; padding:7px 12px; font-size:10px; }
  :where(.pg-ninos) #cotizar .quote-tag { font-size:10.5px; padding:6px 12px; }
  :where(.pg-ninos) #cotizar .hf-title { font-size:22px; }
  :where(.pg-ninos) #cotizar .qf-grid { grid-template-columns:1fr; }
  /* 16px evita que iOS haga zoom al tocar un campo */
  :where(.pg-ninos) #cotizar .qf-field input, :where(.pg-ninos) #cotizar .qf-field select { font-size:16px; padding:13px 14px; }
  :where(.pg-ninos) #cotizar .quote-form .btn-main { padding:16px 22px; }
}
@media(max-width:820px){
  :where(.pg-ninos) #cotizar .stats-bar { grid-template-columns:1fr 1fr; }
}
@media(max-width:420px){
  :where(.pg-ninos) #cotizar .stat-box { padding:16px 12px 14px; }
  :where(.pg-ninos) #cotizar .stat-lbl { font-size:11.5px; }
}
/* EL INGLES QUE APRENDE TU HIJO HOY */
:where(.pg-ninos) section.oportunidades {
  --display: 'Bricolage Grotesque',sans-serif;
  display: block;
  position: relative;
  margin: 0;
  border: 0;
  background: none;
  padding: 84px 5vw;
  font-family: var(--body);
  color: var(--ink);
  text-align: left;
}
:where(.pg-ninos) section.oportunidades,
:where(.pg-ninos) section.oportunidades *,
:where(.pg-ninos) section.oportunidades *::before,
:where(.pg-ninos) section.oportunidades *::after {
  box-sizing: border-box;
}
:where(.pg-ninos) section.oportunidades .op-wrap {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 56px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
/* ---------- Texto ---------- */
:where(.pg-ninos) section.oportunidades .op-text { min-width:0; }
:where(.pg-ninos) section.oportunidades .op-text .sec-title {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  text-transform: none;
  font-family: var(--display);
  font-size: clamp(27px,3.4vw,40px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--oxford);
}
:where(.pg-ninos) section.oportunidades .op-text .sec-title .vio { display:block; color:var(--violet); }
:where(.pg-ninos) section.oportunidades .op-text .sec-title::before { content:none; }
:where(.pg-ninos) section.oportunidades .op-text .sec-title::after {
  content: "";
  display: block;
  width: 58px;
  height: 5px;
  margin: 16px 0 0;
  border-radius: 99px;
  background: var(--red);
}
:where(.pg-ninos) section.oportunidades .op-text p {
  margin: 18px 0 0;
  padding: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-align: left;
}
:where(.pg-ninos) section.oportunidades .op-text p b { color:var(--oxford); font-weight:700; }
:where(.pg-ninos) section.oportunidades .op-list { list-style:none; margin:26px 0 0; padding:0; }
:where(.pg-ninos) section.oportunidades .op-list li {
  position: relative;
  margin: 0;
  padding: 11px 0 11px 30px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-top: 1.5px solid var(--line);
  background: none;
  list-style: none;
}
:where(.pg-ninos) section.oportunidades .op-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 11px;
  color: var(--violet);
  font-weight: 800;
}
:where(.pg-ninos) section.oportunidades .op-list li b { color:var(--oxford); }
/* ---------- Imagen: sin marco, sin fondo, sin sombra ---------- */
:where(.pg-ninos) section.oportunidades .op-img {
  width: 100%;
  max-width: 560px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  aspect-ratio: auto;
  overflow: visible;
}
:where(.pg-ninos) section.oportunidades .op-img img { display:block; width:100%; height:auto; max-width:100%; object-fit:contain; }
/* ---------- Responsive ---------- */
@media(max-width:900px){
  :where(.pg-ninos) section.oportunidades { padding:56px 6vw; }
  :where(.pg-ninos) section.oportunidades .op-wrap { grid-template-columns:minmax(0,1fr); gap:30px; }
  :where(.pg-ninos) section.oportunidades .op-img { max-width:440px; margin:0 auto; max-height:none; }
}
@media(max-width:560px){
  :where(.pg-ninos) section.oportunidades { padding:44px 5vw; }
  :where(.pg-ninos) section.oportunidades .op-text p { font-size:15.5px; }
  :where(.pg-ninos) section.oportunidades .op-list li { font-size:14.5px; }
  :where(.pg-ninos) section.oportunidades .op-img { max-width:360px; }
}
/* SECCIÓN PRINCIPAL*/
:where(.pg-ninos) #programa-infantil { max-width:1100px; margin:0 auto; padding:60px 30px 70px; text-align:center; }
:where(.pg-ninos) #titulo-principal { font-size:2.2rem; font-weight:800; color:#111; margin-bottom:14px; line-height:1.2; }
:where(.pg-ninos) #titulo-destacado { color:#7c3aed; }
:where(.pg-ninos) #linea-divisoria {
  width: 54px;
  height: 4px;
  background: linear-gradient(90deg, #e53e3e, #f97316);
  margin: 0 auto 18px;
  border-radius: 2px;
}
:where(.pg-ninos) #subtitulo { font-size:0.9rem; color:#666; margin-bottom:48px; }
/* GRILLA DE PILARES*/
:where(.pg-ninos) #grilla-pilares { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
/*  ESTILOS BASE COMPARTIDOS */
:where(.pg-ninos) #pilar-1,
:where(.pg-ninos) #pilar-2,
:where(.pg-ninos) #pilar-3,
:where(.pg-ninos) #pilar-4,
:where(.pg-ninos) #pilar-5,
:where(.pg-ninos) #pilar-6 {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
  text-align: left;
  display: flex;
  flex-direction: column;
}
:where(.pg-ninos) #pilar-1-cuerpo,
:where(.pg-ninos) #pilar-2-cuerpo,
:where(.pg-ninos) #pilar-3-cuerpo,
:where(.pg-ninos) #pilar-4-cuerpo,
:where(.pg-ninos) #pilar-5-cuerpo,
:where(.pg-ninos) #pilar-6-cuerpo {
  padding: 20px 24px 28px;
  position: relative;
  overflow: hidden;
  flex: 1;
  isolation: isolate;
}
:where(.pg-ninos) #pilar-1-cuerpo h2,
:where(.pg-ninos) #pilar-2-cuerpo h2,
:where(.pg-ninos) #pilar-3-cuerpo h2,
:where(.pg-ninos) #pilar-4-cuerpo h2,
:where(.pg-ninos) #pilar-5-cuerpo h2,
:where(.pg-ninos) #pilar-6-cuerpo h2 {
  font-size: 1rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 10px;
  line-height: 1.35;
}
:where(.pg-ninos) #pilar-1-cuerpo p,
:where(.pg-ninos) #pilar-2-cuerpo p,
:where(.pg-ninos) #pilar-3-cuerpo p,
:where(.pg-ninos) #pilar-4-cuerpo p,
:where(.pg-ninos) #pilar-5-cuerpo p,
:where(.pg-ninos) #pilar-6-cuerpo p {
  font-size: 0.82rem;
  color: #444;
  line-height: 1.72;
  text-align: justify;
}
/* Iconos marca de agua */
:where(.pg-ninos) #pilar-1-icono,
:where(.pg-ninos) #pilar-2-icono,
:where(.pg-ninos) #pilar-3-icono,
:where(.pg-ninos) #pilar-4-icono,
:where(.pg-ninos) #pilar-5-icono,
:where(.pg-ninos) #pilar-6-icono {
  position: absolute;
  bottom: -15px;
  right: -10px;
  width: 160px;
  height: 160px;
  object-fit: contain;
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
/*  CABECERAS INDIVIDUALES */
:where(.pg-ninos) #pilar-1-cabecera,
:where(.pg-ninos) #pilar-2-cabecera,
:where(.pg-ninos) #pilar-3-cabecera,
:where(.pg-ninos) #pilar-4-cabecera,
:where(.pg-ninos) #pilar-5-cabecera,
:where(.pg-ninos) #pilar-6-cabecera {
  display: block;
  width: 100%;
  padding: 11px 22px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* Pilar 1 — cian */
:where(.pg-ninos) #pilar-1-cabecera { background-color:#00c9d4; color:#fff; }
/* Pilar 2 — rosa */
:where(.pg-ninos) #pilar-2-cabecera { background-color:#e91e8c; color:#fff; }
/* Pilar 3 — amarillo */
:where(.pg-ninos) #pilar-3-cabecera { background-color:#f5c400; color:#111; }
/* Pilar 4 — rosa */
:where(.pg-ninos) #pilar-4-cabecera { background-color:#e91e8c; color:#fff; }
/* Pilar 5 — amarillo */
:where(.pg-ninos) #pilar-5-cabecera { background-color:#f5c400; color:#111; }
/* Pilar 6 — cian */
:where(.pg-ninos) #pilar-6-cabecera { background-color:#00c9d4; color:#fff; }
/* RESPONSIVE */
@media (max-width: 840px){
  :where(.pg-ninos) #grilla-pilares { grid-template-columns:repeat(2, 1fr); }
  :where(.pg-ninos) #titulo-principal { font-size:1.7rem; }
}
@media (max-width: 520px){
  :where(.pg-ninos) #grilla-pilares { grid-template-columns:1fr; }
  :where(.pg-ninos) #titulo-principal { font-size:1.35rem; }
  :where(.pg-ninos) #programa-infantil { padding:40px 18px 50px; }
}
/* fin2 */
/* inicio4 */
body.pg-ninos { color:#222222; overflow:visible; }
/* 
   CONTENEDOR PRINCIPAL
 */
:where(.pg-ninos) .habilidades-contenedor {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 70px 40px;
  overflow-x: clip;
  overflow-y: visible;
  /* overflow: visible;  ← pisaba el recorte de la regla anterior y el planeta (right:-140px) generaba scroll horizontal */
}
/* 
   ELEMENTOS DECORATIVOS
*/
:where(.pg-ninos) .habilidades-deco-planeta {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 340px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}
:where(.pg-ninos) .habilidades-deco-planeta img { width:100%; height:auto; }
/* Esfera rosa */
:where(.pg-ninos) .habilidades-deco-esfera-rosa {
  position: absolute;
  top: 160px;
  left: 55px;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}
:where(.pg-ninos) .habilidades-deco-esfera-rosa img { width:100%; height:auto; }
:where(.pg-ninos) .habilidades-deco-esfera-azul {
  position: absolute;
  bottom: 30px;
  left: 20px;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
:where(.pg-ninos) .habilidades-deco-esfera-azul img { width:100%; height:auto; }
:where(.pg-ninos) .habilidades-deco-estrella {
  position: absolute;
  bottom: 35px;
  right: 90px;
  width: 55px;
  z-index: 2;
  pointer-events: none;
  transform: rotate(10deg);
}
:where(.pg-ninos) .habilidades-deco-estrella img { width:100%; height:auto; }
/* 
   SECCIÓN PRINCIPAL
  */
:where(.pg-ninos) .habilidades-seccion { position:relative; max-width:1100px; width:100%; text-align:center; z-index:5; }
/* 
   ENCABEZADO
 */
:where(.pg-ninos) .habilidades-encabezado { margin-bottom:48px; }
:where(.pg-ninos) .habilidades-titulo { font-size:2.4rem; font-weight:800; color:#1a1a1a; letter-spacing:-0.5px; line-height:1.2; }
:where(.pg-ninos) .habilidades-titulo-destacado { color:#4a2fb7; }
:where(.pg-ninos) .habilidades-linea-roja {
  width: 52px;
  height: 4px;
  background-color: #ff3b2f;
  border-radius: 4px;
  margin: 14px auto 20px auto;
}
:where(.pg-ninos) .habilidades-subtitulo { font-size:0.9rem; color:#555555; max-width:680px; margin:0 auto; line-height:1.65; }
/* 
   GRID DE TARJETAS
 */
:where(.pg-ninos) .habilidades-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 70px;
  /* espacio para los iconos que sobresalen */
}
:where(.pg-ninos) .habilidad-tarjeta {
  border-radius: 22px;
  padding: 90px 22px 26px 22px;
  text-align: left;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: visible;
}
:where(.pg-ninos) .habilidad-tarjeta:hover { transform:translateY(-5px); box-shadow:0 12px 30px rgba(0, 0, 0, 0.1); }
/* Icono  */
:where(.pg-ninos) .habilidad-icono {
  position: absolute;
  top: -45px;
  left: 18px;
  width: 105px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
:where(.pg-ninos) .habilidad-icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(2px 8px 14px rgba(0, 0, 0, 0.22));
}
:where(.pg-ninos) .habilidad-tarjeta h3 { font-size:1.3rem; font-weight:700; color:#111111; margin-bottom:8px; }
:where(.pg-ninos) .habilidad-tarjeta p { font-size:0.82rem; color:#555555; line-height:1.55; }
/* 
   COLORES POR HABILIDAD
 */
:where(.pg-ninos) .habilidad-escuchar { background-color:#cdeef8; border:3px solid #4dcbe9; }
:where(.pg-ninos) .habilidad-hablar { background-color:#e3dcfb; border:3px solid #8b68ef; }
:where(.pg-ninos) .habilidad-leer { background-color:#fdf0c3; border:3px solid #fdc83e; }
:where(.pg-ninos) .habilidad-escribir { background-color:#fddaf0; border:3px solid #fb55c6; }
/*
 RESPONSIVO
 */
@media (max-width: 1024px){
  :where(.pg-ninos) .habilidades-grid { grid-template-columns:repeat(2, 1fr); }
  :where(.pg-ninos) .habilidades-deco-planeta { width:220px; right:10px; top:10px; }
}
@media (max-width: 768px){
  :where(.pg-ninos) .habilidades-titulo { font-size:1.8rem; }
  :where(.pg-ninos) .habilidades-deco-planeta,
:where(.pg-ninos) .habilidades-deco-esfera-rosa,
:where(.pg-ninos) .habilidades-deco-esfera-azul,
:where(.pg-ninos) .habilidades-deco-estrella {
    display: none;
  }
}
@media (max-width: 520px){
  :where(.pg-ninos) .habilidades-grid { grid-template-columns:1fr; }
  :where(.pg-ninos) .habilidades-contenedor { padding:50px 20px; }
}
/* ----- MCER ----- */
:where(.pg-ninos) .mcer-block, :where(.pg-ninos) .mcer-block *, :where(.pg-ninos) .mcer-block *::before, :where(.pg-ninos) .mcer-block *::after { box-sizing:border-box; }
:where(.pg-ninos) .mcer-block :is(h3, h4, p, ul, ol, li) { margin:0; }
:where(.pg-ninos) .mcer-block {
  --mcer-ink: #1b1b2f;
  --mcer-violet: #5b2fd4;
  --mcer-muted: #5c5c70;
  --mcer-red: #e2472f;
  --mcer-rail: 56px;
  --mcer-shift: 22px;
  --mcer-card-h: 88px;
  --mcer-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --mcer-font-ui: 'Montserrat', system-ui, sans-serif;
  --mcer-font-body: var(--body);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) 24px;
  color: var(--mcer-ink);
  font-family: var(--mcer-font-body);
}
/* ---------- Título y descripción ---------- */
:where(.pg-ninos) .mcer-head { text-align:center; }
:where(.pg-ninos) .mcer-heading {
  font-family: var(--mcer-font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
:where(.pg-ninos) .mcer-accent { color:var(--mcer-violet); }
:where(.pg-ninos) .mcer-head::after {
  content: "";
  display: block;
  width: 120px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 99px;
  background: var(--mcer-red);
}
:where(.pg-ninos) .mcer-lead {
  max-width: 760px;
  margin: 28px auto 0;
  text-align: center;
  color: var(--mcer-muted);
  font-size: clamp(0.85rem, 1.4vw, 0.95rem);
  line-height: 1.7;
}
/* ---------- Layout principal ---------- */
:where(.pg-ninos) .mcer-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  margin-top: 48px;
}
:where(.pg-ninos) .mcer-mascot img { display:block; width:100%; max-width:380px; height:auto; margin-inline:auto; }
/* ---------- Línea + niveles ---------- */
:where(.pg-ninos) .mcer-rail { position:relative; }
:where(.pg-ninos) .mcer-line {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--mcer-rail);
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--mcer-violet);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 10 13;
}
:where(.pg-ninos) .mcer-levels { display:flex; flex-direction:column; gap:18px; }
:where(.pg-ninos) .mcer-level {
  --mcer-offset: 0px;
  display: grid;
  grid-template-columns: var(--mcer-rail) minmax(0, 1fr);
  align-items: center;
}
:where(.pg-ninos) .mcer-level:nth-child(even) { --mcer-offset:var(--mcer-shift); }
:where(.pg-ninos) .mcer-level--1, :where(.pg-ninos) .mcer-level--5 { --mcer-bg:#e3dcfb; --mcer-accent:#8b68ef; }
:where(.pg-ninos) .mcer-level--2 { --mcer-bg:#cdeef8; --mcer-accent:#4dcbe9; }
:where(.pg-ninos) .mcer-level--3 { --mcer-bg:#fdf0c3; --mcer-accent:#fdc83e; }
:where(.pg-ninos) .mcer-level--4 { --mcer-bg:#fddaf0; --mcer-accent:#fb55c6; }
:where(.pg-ninos) .mcer-node { position:relative; z-index:1; height:18px; }
:where(.pg-ninos) .mcer-node::before, :where(.pg-ninos) .mcer-node::after { content:""; position:absolute; top:50%; background:var(--mcer-accent); }
:where(.pg-ninos) .mcer-node::before {
  left: calc(50% + var(--mcer-dx, 0px));
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px #fff;
}
:where(.pg-ninos) .mcer-node::after {
  left: calc(50% + var(--mcer-dx, 0px));
  right: calc(-1 * var(--mcer-offset));
  height: 4px;
  border-radius: 99px;
  transform: translateY(-50%);
}
:where(.pg-ninos) .mcer-level--1 .mcer-node::before {
  --mcer-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 12 L60.6 37.4 L88 39.6 L67.1 57.6 L73.5 84.4 L50 70 L26.5 84.4 L32.9 57.6 L12 39.6 L39.4 37.4 Z' fill='black' stroke='black' stroke-width='14' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 38px;
  height: 38px;
  border-radius: 0;
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(-14deg);
  -webkit-mask: var(--mcer-star) center / contain no-repeat;
  mask: var(--mcer-star) center / contain no-repeat;
}
:where(.pg-ninos) .mcer-level--5 .mcer-node::before { width:22px; height:22px; }
/* ---------- Card ---------- */
:where(.pg-ninos) .mcer-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--mcer-card-h);
  padding: 14px 22px 14px 18px;
  margin-left: var(--mcer-offset);
  margin-right: calc(var(--mcer-shift) - var(--mcer-offset));
  background: var(--mcer-bg);
  border: 3px solid var(--mcer-accent);
  border-radius: 16px;
}
:where(.pg-ninos) .mcer-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 12px;
  background: var(--mcer-accent);
  color: #fff;
  font: 800 1.9rem/1 var(--mcer-font-ui);
}
:where(.pg-ninos) .mcer-card h4 { font:800 1.15rem/1.2 var(--mcer-font-ui); text-transform:uppercase; color:var(--mcer-violet); }
:where(.pg-ninos) .mcer-card p { margin-top:2px; font-size:0.9rem; line-height:1.4; color:var(--mcer-muted); }
:where(.pg-ninos) .mcer-card p.mcer-highlight { margin-top:4px; font-weight:700; color:var(--mcer-ink); }
:where(.pg-ninos) .mcer-card p.mcer-highlight::before { content:"➜"; margin-right:6px; color:var(--mcer-violet); }
/* ---------- Animación ---------- */
@media (prefers-reduced-motion: no-preference){
  :where(.pg-ninos) .mcer-wrap:not(.mcer-in-view) :is(.mcer-line, .mcer-node, .mcer-card) { opacity:0; }
  :where(.pg-ninos) .mcer-in-view .mcer-line { animation:mcer-draw-line 1.2s linear 0.2s both; }
  :where(.pg-ninos) .mcer-in-view .mcer-node { animation:mcer-fade-in 0.4s ease-out both; animation-delay:calc(var(--i) * 0.3s + 0.2s); }
  :where(.pg-ninos) .mcer-in-view .mcer-card { animation:mcer-card-in 0.5s ease-out both; animation-delay:calc(var(--i) * 0.3s + 0.25s); }
}
/* ---------- Responsive ---------- */
@media (max-width: 900px){
  :where(.pg-ninos) .mcer-wrap { grid-template-columns:1fr; margin-top:32px; }
  :where(.pg-ninos) .mcer-mascot img { max-width:260px; }
}
@media (max-width: 620px){
  :where(.pg-ninos) .mcer-block { --mcer-rail:36px; --mcer-shift:14px; }
  :where(.pg-ninos) .mcer-rail { width:fit-content; max-width:100%; margin-inline:auto; }
  :where(.pg-ninos) .mcer-levels { gap:26px; }
  :where(.pg-ninos) .mcer-level { grid-template-columns:var(--mcer-rail) auto; align-items:start; }
  :where(.pg-ninos) .mcer-card {
    flex-direction: column;
    align-items: flex-start;
    width: 190px;
    min-height: 230px;
    gap: 10px;
    padding: 20px 18px;
  }
  :where(.pg-ninos) .mcer-badge { width:50px; height:50px; border-radius:10px; font-size:1.3rem; }
  :where(.pg-ninos) .mcer-card h4 { font-size:0.98rem; }
  :where(.pg-ninos) .mcer-card p { font-size:0.8rem; }
  :where(.pg-ninos) .mcer-level--1 .mcer-node::before { width:30px; height:30px; }
}
/* Todo va bajo .inc-section y con clases propias (inc-*), sin depender de
   .sec-title / .sec-intro / .vio / section / h3 / ul / li de site.css */
:where(.pg-ninos) .inc-section {
  --ink: #20232d;
  --muted: #656974;
  --violet: #6337d5;
  --orange: #e84c36;
  --display: 'Bricolage Grotesque',sans-serif;
  --inc-lado: clamp(62px,4.4vw,88px);
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  background: none;
  border: 0;
  padding: 72px 4vw;
  font-family: var(--body);
  color: var(--ink);
  text-align: left;
  /* lado de la numeración y del icono: crece en pantallas grandes */
}
:where(.pg-ninos) .inc-section, :where(.pg-ninos) .inc-section *, :where(.pg-ninos) .inc-section *::before, :where(.pg-ninos) .inc-section *::after { box-sizing:border-box; }
:where(.pg-ninos) .inc-stack-wrap {
  max-width: clamp(1260px,84vw,1900px);
  margin: 0 auto;
  grid-template-columns: minmax(0,.78fr) minmax(0,1fr);
  gap: clamp(52px,8vw,112px);
}
:where(.pg-ninos) .inc-stack-intro { position:sticky; }
:where(.pg-ninos) .inc-section .inc-title {
  max-width: clamp(470px,36vw,660px);
  margin: 0;
  padding: 0;
  color: var(--ink);
  text-align: left;
  font-family: var(--display);
  font-size: clamp(36px,3.2vw,60px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-transform: none;
}
:where(.pg-ninos) .inc-section .inc-title .inc-vio { color:var(--violet); }
:where(.pg-ninos) .inc-section .inc-title::before { content:none; }
:where(.pg-ninos) .inc-section .inc-title::after {
  content: "";
  display: block;
  width: clamp(72px,5vw,104px);
  height: 7px;
  margin: 15px auto 0;
  border-radius: 99px;
  background: var(--orange);
}
:where(.pg-ninos) .inc-section .inc-intro {
  max-width: clamp(455px,32vw,620px);
  margin: 22px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: clamp(14px,1vw,18px);
  line-height: 1.75;
  text-align: left;
}
:where(.pg-ninos) .inc-section .inc-stack-contador {
  margin: 24px 0 0;
  padding: 0;
  color: #5035a9;
  font-size: clamp(15px,1.05vw,19px);
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
}
:where(.pg-ninos) .inc-section .inc-foot {
  max-width: clamp(510px,35vw,680px);
  margin: 21px 0 0;
  padding: 0;
  color: #51545d;
  font-size: clamp(14px,1vw,18px);
  line-height: 1.7;
  text-align: left;
}
:where(.pg-ninos) .inc-foot b { color:#252832; font-weight:800; }
:where(.pg-ninos) .inc-image-placeholder {
  width: min(100%,clamp(420px,32vw,680px));
  height: auto;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* max-height: la columna es sticky; así la imagen nunca supera lo que cabe en pantalla */
:where(.pg-ninos) .inc-image-placeholder img { width:100%; height:auto; max-width:100%; max-height:min(42vh,620px); object-fit:contain; }
:where(.pg-ninos) .inc-image-placeholder img:not([src]), :where(.pg-ninos) .inc-icon:not([src]) { visibility:hidden; }
@media(min-width:901px) and (max-height:780px){
  :where(.pg-ninos) .inc-image-placeholder img { max-height:60vh; }
}
:where(.pg-ninos) .inc-stack { padding-top:8px; }
/* Tramo extra de scroll: las cards ya acumuladas quedan quietas antes de soltarse */
:where(.pg-ninos) .inc-stack::after { content:""; display:block; height:40vh; }
:where(.pg-ninos) .inc-card {
  --card-line: #8d70dc;
  --card-bg: #e9e1ff;
  --card-icon: #8d70dc;
  position: sticky;
  top: calc(120px + var(--i,0) * 18px);
  z-index: var(--i,0);
  display: grid;
  grid-template-columns: var(--inc-lado) var(--inc-lado) minmax(0,1fr);
  gap: 16px;
  align-items: start;
  min-height: clamp(160px,10vw,215px);
  padding: 20px 26px 18px 14px;
  margin: 0;
  border: 3px solid var(--card-line);
  border-radius: 21px;
  background: var(--card-bg);
  box-shadow: none;
  overflow: visible;
  text-align: left;
}
:where(.pg-ninos) .inc-card:nth-child(6n+1) { --card-line:#55c3d6; --card-bg:#ddf7fa; --card-icon:#55c3d6; }
:where(.pg-ninos) .inc-card:nth-child(6n+2) { --card-line:#8d70dc; --card-bg:#e9e1ff; --card-icon:#8d70dc; }
:where(.pg-ninos) .inc-card:nth-child(6n+3) { --card-line:#efcf4b; --card-bg:#fff4ce; --card-icon:#efcf4b; }
:where(.pg-ninos) .inc-card:nth-child(6n+4) { --card-line:#dc4bc4; --card-bg:#fbdcf4; --card-icon:#dc4bc4; }
:where(.pg-ninos) .inc-card:nth-child(6n+5) { --card-line:#8d70dc; --card-bg:#e6deff; --card-icon:#8d70dc; }
:where(.pg-ninos) .inc-card:nth-child(6n+6) { --card-line:#55c3d6; --card-bg:#ddf7fa; --card-icon:#55c3d6; }
:where(.pg-ninos) .inc-card .inc-num {
  width: var(--inc-lado);
  min-height: var(--inc-lado);
  padding: 7px 4px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--card-line);
  color: #fff;
  font-family: var(--display);
  font-size: calc(var(--inc-lado) * .5);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
}
:where(.pg-ninos) .inc-num small {
  margin-top: 5px;
  font-family: var(--body);
  font-size: calc(var(--inc-lado) * .18);
  font-weight: 700;
  letter-spacing: 0;
}
:where(.pg-ninos) .inc-card .inc-icon { width:var(--inc-lado); height:var(--inc-lado); object-fit:contain; }
:where(.pg-ninos) .inc-card-content { min-width:0; }
:where(.pg-ninos) .inc-card-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
:where(.pg-ninos) .inc-section .inc-card h3 {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(25px,1.9vw,36px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-transform: none;
  text-align: left;
}
:where(.pg-ninos) .inc-section .inc-card h3::before, :where(.pg-ninos) .inc-section .inc-card h3::after { content:none; }
:where(.pg-ninos) .inc-toggle {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--card-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  border-radius: 50%;
  color: var(--card-line);
  text-align: center;
  transition: transform .28s ease,background-color .28s ease,color .28s ease;
}
:where(.pg-ninos) .inc-toggle::before,
:where(.pg-ninos) .inc-toggle::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 15px/1 var(--body);
  transition: opacity .2s ease,transform .25s ease;
}
:where(.pg-ninos) .inc-toggle::before { content:"+"; opacity:1; }
:where(.pg-ninos) .inc-toggle::after { content:"−"; opacity:0; transform:scale(.65); }
:where(.pg-ninos) .inc-toggle.is-open::before, :where(.pg-ninos) .inc-toggle.is-covered::before { opacity:0; transform:scale(.65); }
:where(.pg-ninos) .inc-toggle.is-open::after, :where(.pg-ninos) .inc-toggle.is-covered::after { opacity:1; transform:scale(1); }
:where(.pg-ninos) .inc-toggle.is-covered { background:var(--card-line); color:#fff; }
:where(.pg-ninos) .inc-section .inc-card ul { list-style:none; margin:14px 0 0; padding:0; }
:where(.pg-ninos) .inc-section .inc-card li {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  padding: 9px 0;
  margin: 0;
  border: 0;
  border-top: 1.5px solid var(--card-line);
  background: none;
  color: #5b5c63;
  font-size: clamp(14px,1vw,17px);
  line-height: 1.45;
  text-align: left;
  list-style: none;
}
:where(.pg-ninos) .inc-section .inc-card li::before {
  content: "✓";
  color: var(--card-line);
  font-weight: 800;
  position: static;
  background: none;
}
:where(.pg-ninos) .inc-section .inc-card li::after { content:none; }
@media(max-width:900px){
  :where(.pg-ninos) .inc-section { padding:52px 6vw; }
  :where(.pg-ninos) .inc-stack-wrap { grid-template-columns:1fr; gap:38px; }
  :where(.pg-ninos) .inc-stack-intro { position:static; }
  :where(.pg-ninos) .inc-section .inc-title { max-width:600px; }
  :where(.pg-ninos) .inc-section .inc-intro, :where(.pg-ninos) .inc-section .inc-foot { max-width:600px; }
  :where(.pg-ninos) .inc-image-placeholder { margin:18px 0 0; }
  :where(.pg-ninos) .inc-card { position:static; }
  :where(.pg-ninos) .inc-stack::after { display:none; }
}
@media(max-width:560px){
  :where(.pg-ninos) .inc-section { padding:40px 5vw; }
  :where(.pg-ninos) .inc-section .inc-title { font-size:36px; }
  :where(.pg-ninos) .inc-stack { gap:14px; }
  :where(.pg-ninos) .inc-card { grid-template-columns:56px 52px minmax(0,1fr); gap:10px; padding:17px 13px; min-height:0; }
  :where(.pg-ninos) .inc-card .inc-num { width:56px; min-height:56px; font-size:29px; }
  :where(.pg-ninos) .inc-num small { font-size:11px; }
  :where(.pg-ninos) .inc-card .inc-icon { width:52px; height:52px; }
  :where(.pg-ninos) .inc-section .inc-card h3 { font-size:21px; }
  :where(.pg-ninos) .inc-section .inc-card ul { margin-top:13px; }
  :where(.pg-ninos) .inc-section .inc-card li { font-size:12px; }
  :where(.pg-ninos) .inc-toggle { width:19px; height:19px; flex-basis:19px; font-size:16px; line-height:17px; }
}
/* TESTIMONIOS */
/* ============ TESTIMONIOS + RESEÑAS ============ */
/* ---- Miniatura de video dentro de .card ---- */
:where(.pg-ninos) .test-video {
  border: 2px solid var(--oxford,var(--oxford));
  background: var(--oxford-deep,var(--oxford-deep));
}
/* scale(1.5): la portada 16:9 de YouTube trae barras negras a los lados del video vertical;
   al ampliarla desde el centro se recortan y el video llena la tarjeta. */
:where(.pg-ninos) .test-video img.yt-thumb {
  object-position: center;
  transform: scale(1.5);
}
:where(.pg-ninos) .test-video iframe { display:none !important; }
/* las tarjetas nunca reproducen */
:where(.pg-ninos) .test-video .yt-play {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  transition: background .25s var(--ease,cubic-bezier(.22,.9,.35,1));
}
:where(.pg-ninos) .test-video .yt-play svg {
  transition: transform .25s var(--ease,cubic-bezier(.22,.9,.35,1));
}
:where(.pg-ninos) #testimonios { overflow-x:clip; }
/* ---- Chincheta ---- */
:where(.pg-ninos) #testimonios .card { position:relative; }
:where(.pg-ninos) #testimonios .card .pin {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red,#E8442E);
  border: 3px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.18);
}
/* ---- Etiqueta "Video" con punto que pulsa ---- */
:where(.pg-ninos) #testimonios .test-video .vid-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red,#E8442E);
  color: #fff;
  font-family: var(--mono,'Montserrat',sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
:where(.pg-ninos) #testimonios .test-video .vid-tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: tv-pulse 2s infinite;
}
/* ---- Inclinación de reposo + se endereza al hover ---- */
:where(.pg-ninos) #testimonios .grid { perspective:1300px; }
:where(.pg-ninos) #testimonios .grid > .card:nth-child(1) { transform:rotate(-1deg); }
:where(.pg-ninos) #testimonios .grid > .card:nth-child(2) { transform:rotate(.8deg) translateY(14px); }
:where(.pg-ninos) #testimonios .grid > .card:nth-child(3) { transform:rotate(-.6deg); }
:where(.pg-ninos) #testimonios .grid > .card:hover { transform:rotate(0) translateY(-6px); }
@media(max-width:680px){
  :where(.pg-ninos) #testimonios .grid > .card:nth-child(n) { transform:none; }
}
/* ---- Entrada al hacer scroll (translate/scale individuales para no
        pisar la inclinación ni el hover) ---- */
:where(.pg-ninos) #testimonios .revelar-testimonio {
  opacity: 0;
  translate: 0 44px;
  scale: .95;
  transition: opacity .8s var(--ease,cubic-bezier(.22,.9,.35,1)),
             translate .9s var(--ease,cubic-bezier(.22,.9,.35,1)),
             scale .9s var(--ease,cubic-bezier(.22,.9,.35,1)),
             transform .3s var(--ease,cubic-bezier(.22,.9,.35,1)),
             box-shadow .3s var(--ease,cubic-bezier(.22,.9,.35,1));
}
:where(.pg-ninos) #testimonios .revelar-testimonio.in { opacity:1; translate:0 0; scale:1; }
:where(.pg-ninos) #testimonios .sec-title.revelar-testimonio { filter:blur(6px); transition-property:opacity, translate, scale, filter; }
:where(.pg-ninos) #testimonios .sec-title.revelar-testimonio.in { filter:none; }
/* ---- Insignia de Google ---- */
:where(.pg-ninos) .g-badge {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 44px auto 0;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--white,#fff);
  border: 2px solid var(--oxford,var(--oxford));
  border-radius: 999px;
  padding: 12px 24px;
  box-shadow: 5px 5px 0 var(--violet,#6C4CF1);
  transition: transform .18s var(--ease,cubic-bezier(.22,.9,.35,1)), box-shadow .18s var(--ease,cubic-bezier(.22,.9,.35,1));
}
:where(.pg-ninos) .g-badge:hover { box-shadow:2px 2px 0 var(--violet,#6C4CF1); }
:where(.pg-ninos) .g-badge .g-logo {
  font-family: var(--disp,'Bricolage Grotesque',sans-serif);
  font-size: 20px;
}
:where(.pg-ninos) .g-badge .g-div { background:var(--line,var(--line)); }
:where(.pg-ninos) .g-badge .g-score {
  font-family: var(--disp,'Bricolage Grotesque',sans-serif);
  font-size: 32px;
  color: var(--oxford,var(--oxford));
}
:where(.pg-ninos) .g-badge > span:last-child { display:flex; flex-direction:column; gap:2px; text-align:left; }
:where(.pg-ninos) .g-badge .g-stars { font-size:22px; line-height:1; }
:where(.pg-ninos) .g-badge .g-text { font-size:14.5px; color:var(--ink-soft,var(--ink-soft)); line-height:1.3; }
@media(max-width:520px){
  :where(.pg-ninos) .g-badge { gap:12px; padding:12px 18px; border-radius:24px; }
  :where(.pg-ninos) .g-badge .g-text { font-size:12.5px; }
}
/* ---- Modal de video ---- */
:where(.pg-ninos) .yt-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,19,48,.82);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
}
:where(.pg-ninos) .yt-popup.open { display:flex; }
/* Caja exactamente 9:16 (formato Shorts): el video llena la caja
   y la X queda pegada a su esquina. */
:where(.pg-ninos) .yt-popup-box {
  position: relative;
  aspect-ratio: 9/16;
  height: auto;
  width: min(86vw, calc(min(82vh, 850px) * 9 / 16));
  background: #000;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
:where(.pg-ninos) .yt-popup-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 6px;
}
:where(.pg-ninos) #yt-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 5;
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
:where(.pg-ninos) #yt-close:hover { background:var(--red,#E8442E); color:#fff; }
body.pg-ninos.yt-lock { overflow:hidden; }
/* ---- Menos movimiento ---- */
@media (prefers-reduced-motion:reduce){
  :where(.pg-ninos) #testimonios .revelar-testimonio { opacity:1; translate:none; scale:none; filter:none; transition:none; }
  :where(.pg-ninos) #testimonios .vid-tag i { animation:none; }
}
/* La composición gana espacio de forma gradual en monitores amplios. */
@media (min-width:1200px){
  :where(.pg-ninos) section { padding:clamp(84px,6vw,112px) clamp(5vw,7vw,112px); }
  :where(.pg-ninos) .hero-split-wrap { max-width:1440px; gap:clamp(52px,6vw,96px); }
  :where(.pg-ninos) .hero-split .stats-bar { max-width:1280px; gap:clamp(16px,2vw,30px); }
  :where(.pg-ninos) section.oportunidades .op-wrap { max-width:1400px; gap:clamp(56px,7vw,104px); }
  :where(.pg-ninos) #programa-infantil { max-width:1400px; padding-inline:clamp(30px,4vw,64px); }
  :where(.pg-ninos) #grilla-pilares { gap:clamp(24px,2.4vw,38px); }
  :where(.pg-ninos) .grid { gap:clamp(22px,2.2vw,36px); }
  :where(.pg-ninos) .habilidades-contenedor { padding-inline:clamp(40px,6vw,96px); }
  :where(.pg-ninos) .habilidades-seccion { max-width:1360px; }
  :where(.pg-ninos) .habilidades-grid { gap:clamp(20px,2.4vw,38px); }
  :where(.pg-ninos) .inc-stack-wrap { max-width:1440px; gap:clamp(60px,7vw,112px); }
  :where(.pg-ninos) .edades-tarjetas { gap:clamp(46px,5vw,78px); }
  :where(.pg-ninos) .edades-seccion + .cta-inline { width:min(1400px,100% - 10vw); }
  :where(.pg-ninos) .quote-box, :where(.pg-ninos) .faq-list { max-width:960px; }
  :where(.pg-ninos) .plan-form { max-width:880px; }
}
@media (min-width:1600px){
  :where(.pg-ninos) #cotizar { padding:0 4vw 56px; }
  :where(.pg-ninos) #cotizar .hero-split-wrap {
    width: min(92vw,2400px);
    max-width: none;
    grid-template-columns: minmax(360px,.9fr) minmax(420px,1.1fr) minmax(360px,.8fr);
    column-gap: clamp(56px,5vw,140px);
    align-items: center;
  }
  :where(.pg-ninos) #cotizar .hero-copy { padding-top:0; }
  :where(.pg-ninos) #cotizar .hero-copy h1 { max-width:560px; }
  :where(.pg-ninos) #cotizar .hero-copy .intro { max-width:460px; }
  :where(.pg-ninos) #cotizar .hero-plan { white-space:normal; }
  :where(.pg-ninos) #cotizar .hero-art {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 2;
    grid-row: 1;
    width: min(100%,760px);
    max-width: none;
    margin: 0 auto;
  }
  :where(.pg-ninos) #cotizar .quote-form { grid-column:3; grid-row:1; width:min(100%,430px); margin:0 auto; justify-self:center; }
  :where(.pg-ninos) #cotizar .stats-bar { width:min(88vw,2100px); max-width:none; gap:clamp(20px,2.5vw,56px); }
  :where(.pg-ninos) section.oportunidades .op-wrap { width:min(90vw,2200px); max-width:none; }
  :where(.pg-ninos) section.oportunidades .op-img { max-width:min(42vw,820px); }
  :where(.pg-ninos) #programa-infantil { width:min(90vw,2200px); max-width:none; }
  :where(.pg-ninos) #grilla-pilares { gap:clamp(30px,3vw,72px); }
  :where(.pg-ninos) .grid { gap:clamp(28px,3vw,72px); }
  :where(.pg-ninos) .habilidades-seccion { width:min(90vw,2200px); max-width:none; }
  :where(.pg-ninos) .habilidades-grid { gap:clamp(28px,3vw,72px); }
  :where(.pg-ninos) .inc-stack-wrap { width:min(90vw,2200px); max-width:none; }
  :where(.pg-ninos) .edades-tarjetas { gap:clamp(56px,5vw,120px); }
  :where(.pg-ninos) .edades-seccion + .cta-inline { width:min(90vw,2200px); }
  :where(.pg-ninos) .quote-box, :where(.pg-ninos) .faq-list { max-width:min(72vw,1200px); }
  :where(.pg-ninos) .plan-form { max-width:min(72vw,1100px); }
}
:where(.pg-ninos) .edades-seccion { width:calc(100% - clamp(32px,8vw,120px)); max-width:1154px; }
:where(.pg-ninos) .edades-tarjetas { margin-inline:clamp(16px,3vw,48px); }
/* Cursos: acentos de color suaves dentro de la paleta Oxford Centre. */
:where(.pg-ninos) .cursos-sub::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 99px;
  background: var(--red);
}
:where(.pg-ninos) .cursos-sub .mono-tag {
  width: fit-content;
  margin: 0 auto 12px;
  padding: 6px 12px;
  border: 1px solid var(--violet);
  border-radius: 999px;
  background: var(--violet-tint);
}
/* Paleta tomada de "Las 4 habilidades" (.habilidad-escuchar/hablar/leer/escribir): borde 3px + fondo */
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid.c3 .card:nth-child(1) {
  --course-line: #4dcbe9;
  --course-surface: #cdeef8;
  --course-shadow: rgba(77,203,233,.30);
}
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid.c3 .card:nth-child(2) {
  --course-line: #8b68ef;
  --course-surface: #e3dcfb;
  --course-shadow: rgba(139,104,239,.30);
}
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid.c3 .card:nth-child(3) {
  --course-line: #fdc83e;
  --course-surface: #fdf0c3;
  --course-shadow: rgba(253,200,62,.40);
}
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid.c2 .card:nth-child(1) {
  --course-line: #fb55c6;
  --course-surface: #fddaf0;
  --course-shadow: rgba(251,85,198,.28);
}
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid.c2 .card:nth-child(2) {
  --course-line: #8b68ef;
  --course-surface: #e3dcfb;
  --course-shadow: rgba(139,104,239,.30);
}
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid .card {
  background: var(--course-surface,#fff);
  border: 3px solid var(--course-line,var(--oxford));
  box-shadow: 6px 6px 0 var(--course-shadow,rgba(0,33,71,.10));
}
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid .card h3,
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid .card .mono-tag {
  color: var(--oxford);
}
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid .card ul li { border-top-color:var(--course-line,var(--line)); }
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid .card ul li::before { color:var(--course-line,var(--violet)); }
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid .card .btn-line {
  border-color: var(--course-line,var(--oxford));
  color: var(--oxford);
}
:where(.pg-ninos) .cursos-sub + .cursos-nota + .grid .card .btn-line:hover {
  background: var(--course-line,var(--oxford));
  color: var(--oxford);
}
/* Tipografías de marca en los bloques que no las declaraban explícitamente. */
:where(.pg-ninos) #titulo-principal, :where(.pg-ninos) .habilidades-titulo, :where(.pg-ninos) .edades-titulo { font-family:var(--disp); }
:where(.pg-ninos) #pilar-1-cuerpo h2,
:where(.pg-ninos) #pilar-2-cuerpo h2,
:where(.pg-ninos) #pilar-3-cuerpo h2,
:where(.pg-ninos) #pilar-4-cuerpo h2,
:where(.pg-ninos) #pilar-5-cuerpo h2,
:where(.pg-ninos) #pilar-6-cuerpo h2,
:where(.pg-ninos) .habilidad-tarjeta h3,
:where(.pg-ninos) .edades-titulo-tarjeta,
:where(.pg-ninos) .mcer-badge,
:where(.pg-ninos) .mcer-card h4 {
  font-family: var(--disp);
}
:where(.pg-ninos) #subtitulo,
:where(.pg-ninos) .habilidades-subtitulo,
:where(.pg-ninos) .habilidad-tarjeta p,
:where(.pg-ninos) .edades-seccion,
:where(.pg-ninos) .edades-seccion p {
  font-family: var(--body);
}
:where(.pg-ninos) #pilar-1-cabecera,
:where(.pg-ninos) #pilar-2-cabecera,
:where(.pg-ninos) #pilar-3-cabecera,
:where(.pg-ninos) #pilar-4-cabecera,
:where(.pg-ninos) #pilar-5-cabecera,
:where(.pg-ninos) #pilar-6-cabecera,
:where(.pg-ninos) .edades-etiqueta-tarjeta {
  font-family: var(--mono);
  font-weight: 700;
}
:where(.pg-ninos) #pilar-1-cabecera,
:where(.pg-ninos) #pilar-2-cabecera,
:where(.pg-ninos) #pilar-3-cabecera,
:where(.pg-ninos) #pilar-4-cabecera,
:where(.pg-ninos) #pilar-5-cabecera,
:where(.pg-ninos) #pilar-6-cabecera {
  font-weight: 700;
}
/* Sombra marcada sin borde oscuro en los dos formularios y botones principales. */
:where(.pg-ninos) #cotizar .quote-form, :where(.pg-ninos) .plan-form { border-color:transparent; box-shadow:0 14px 32px rgba(0,0,0,.22); }
:where(.pg-ninos) #cotizar .quote-form .btn-main, :where(.pg-ninos) .plan-form .btn-cta { border-color:transparent; box-shadow:0 8px 18px rgba(0,0,0,.30); }
:where(.pg-ninos) #cotizar .quote-form .btn-main:hover, :where(.pg-ninos) .plan-form .btn-cta:hover { box-shadow:0 8px 18px rgba(0,0,0,.30); }
/* Separa el formulario de la barra superior en escritorio. */
@media(min-width:1001px){
  :where(.pg-ninos) #cotizar .quote-form { margin-top:76px; }
}
/* Mantiene la etiqueta completa dentro de los límites del formulario. */
:where(.pg-ninos) #cotizar .hero-sticker { right:8px; }
@media(min-width:1025px){
  :where(.pg-ninos) .habilidades-deco-planeta { top:48px; right:-140px; width:360px; }
}
/* Fondo blanco uniforme y cita legible sobre blanco. */
:where(.pg-ninos) .alt { background:#fff; }
/* Cita blanca con rastro de figuras activado por el cursor. */
:where(.pg-ninos) .quote-sec { position:relative; overflow:hidden; background:#fff; }
:where(.pg-ninos) .quote-sec .quote-box { position:relative; z-index:3; }
:where(.pg-ninos) .quote-sec .quote-box p { color:var(--oxford); }
:where(.pg-ninos) .quote-sec .quote-highlight { color:var(--violet-deep); box-shadow:inset 0 -0.28em 0 var(--lime); }
:where(.pg-ninos) .quote-sec .quote-by { position:relative; z-index:3; background:transparent; }
:where(.pg-ninos) .quote-sec .quote-by b { color:var(--oxford); }
:where(.pg-ninos) .quote-sec .quote-by span { color:var(--violet-deep); }
:where(.pg-ninos) .fp-trail { position:absolute; inset:0; z-index:1; pointer-events:none; }
:where(.pg-ninos) .cta-band {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 0;
  margin: 0;
  padding: 56px 5vw;
  color: var(--oxford);
}
:where(.pg-ninos) .cta-band h3 { color:var(--oxford); }
:where(.pg-ninos) .cta-band p { color:var(--ink-soft); }
:where(.pg-ninos) .cta-band > :not(.fp-trail) { position:relative; z-index:2; }
:where(.pg-ninos) .fp-fig {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s ease, transform .5s var(--ease);
  will-change: transform, opacity;
  line-height: 0;
  font-size: 0;
}
:where(.pg-ninos) .fp-fig svg { display:block; width:100%; height:100%; }
@media(max-width:900px){
  :where(.pg-ninos) .fp-trail { display:none; }
}
@media(prefers-reduced-motion:reduce){
  :where(.pg-ninos) .fp-trail { display:none; }
}
/* ============ UTILIDADES (antes eran style="" dentro del HTML) ============ */
/* Botón al pie de una card de "Cursos disponibles" */
:where(.pg-ninos) .card > .btn { margin-top:16px; align-self:flex-start; }
:where(.pg-ninos) #testimonios .grid { margin-top:40px; }
:where(.pg-ninos) #testimonios .card .mono-tag { margin-top:6px; }
/* Figura del rastro de cursor (logo Appa) */
:where(.pg-ninos) .fp-fig > img { margin:0 auto; }
/* Marca del footer: igual que en las demás páginas */
/* Índice --i que escalona la animación (MCER) y el apilado (Todo lo que incluye) */
:where(.pg-ninos) .mcer-level:nth-child(1), :where(.pg-ninos) .inc-card:nth-child(1) { --i:0; }
:where(.pg-ninos) .mcer-level:nth-child(2), :where(.pg-ninos) .inc-card:nth-child(2) { --i:1; }
:where(.pg-ninos) .mcer-level:nth-child(3), :where(.pg-ninos) .inc-card:nth-child(3) { --i:2; }
:where(.pg-ninos) .mcer-level:nth-child(4), :where(.pg-ninos) .inc-card:nth-child(4) { --i:3; }
:where(.pg-ninos) .mcer-level:nth-child(5), :where(.pg-ninos) .inc-card:nth-child(5) { --i:4; }
:where(.pg-ninos) .inc-card:nth-child(6) { --i:5; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║ 04.4  ONLINE                                                 ║
   ╚══════════════════════════════════════════════════════════════╝
   body.pg-online · hero con cotizador, beneficios, pilares, 4 habilidades, ruta de niveles,
   "todo lo que incluye" (tarjetas apiladas), certificación, modalidades, testimonios.
   Lo que ya resuelve la plantilla (cabecera, pie, tarjetas, formularios, ticket) no se repite aquí. */

/* El contacto iba fijo a la derecha desde 641px y se metía por debajo del
 texto de la promo (se solapaban entre 641 y ~950px). Ahora los dos fluyen:
 la promo absorbe el espacio sobrante y centra su texto, con lo que el
 contacto queda clavado al borde derecho igual que antes; si no caben en una
 línea, la promo salta a la suya y el contacto a la siguiente. Sin números
 mágicos: se adapta solo al largo real de cada texto. */
@media(min-width:1000px){
  :where(.pg-online) .topbar .promo{ flex:1 1 auto; }
  :where(.pg-online) .topbar .topbar-contact{ flex:0 0 auto; }
}
/* ===== Page hero ===== */
:where(.pg-online) .page-hero{
  background: var(--off);
  padding: 84px 5vw 68px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(rgba(0,33,71,.07) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
}
:where(.pg-online) .page-hero h1{
  font-family: var(--disp);
  font-size: clamp(34px,5vw,56px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--oxford);
  line-height: 1.08;
  max-width: 820px;
  margin: 0 auto 18px;
}
:where(.pg-online) .quote-form .btn{
  width: 100%;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: var(--body);
  padding: 18px 22px;
}
/* ===== Buttons ===== */
:where(.pg-online) .btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  padding: 19px 30px;
  border-radius: 14px;
  transition: transform .22s var(--ease), box-shadow .22s;
}
/* Botón de acción destacado: el único en lima dentro de las páginas de programa */
:where(.pg-online) .btn-cta{
  background: #D4FF3D;
  color: var(--oxford-deep);
  border: 2.5px solid var(--oxford-deep);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  flex-shrink: 0;
  white-space: nowrap;
  padding: 18px 32px;
}
:where(.pg-online) .btn-cta:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(0,0,0,.35); }
@media(max-width:700px){
  :where(.pg-online) .btn-cta{ width:100%; justify-content:center; }
}
:where(.pg-online) .alt{ background:#fff; }
:where(.pg-online) .stat-box{
  background: #fff;
  border-radius: 16px;
  padding: 20px 16px 17px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(23,28,38,.18), 0 7px 10px rgba(23,28,38,.18);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}
:where(.pg-online) .stat-box:hover{
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(23,28,38,.22), 0 16px 26px rgba(23,28,38,.20);
}
@media(max-width:420px){
  :where(.pg-online) .stat-box{ padding:16px 12px 14px; }
}
/* ===== Oportunidades (texto + imagen) ===== */
:where(.pg-online) .beneficios__contenedor{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
:where(.pg-online) .beneficios__texto p{ margin-top:18px; font-size:16.5px; color:var(--ink-soft); line-height:1.65; }
:where(.pg-online) .beneficios__texto p b{ color:var(--oxford); }
:where(.pg-online) .beneficios__lista{ list-style:none; margin-top:26px; }
:where(.pg-online) .beneficios__lista li{
  font-size: 15px;
  color: var(--ink-soft);
  padding: 11px 0 11px 30px;
  border-top: 1.5px solid var(--line);
  position: relative;
}
:where(.pg-online) .beneficios__lista li::before{
  content: "→";
  position: absolute;
  left: 0;
  color: var(--violet);
  font-weight: 800;
}
:where(.pg-online) .beneficios__lista li b{ color:var(--oxford); }
:where(.pg-online) .beneficios__imagen{
  border: 2.5px solid var(--oxford);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--violet);
  aspect-ratio: 4/5;
  background: var(--off);
}
:where(.pg-online) .beneficios__imagen img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:900px){
  :where(.pg-online) .beneficios__contenedor{ grid-template-columns:1fr; gap:34px; }
  :where(.pg-online) .beneficios__imagen{ aspect-ratio:16/10; max-height:380px; }
}
/* ===== Nota al pie de bloques (usada en "Todo lo que incluye" y "Certificación") ===== */
/* ===== Oportunidades: composition and scroll reveal ===== */
:where(.pg-online) .beneficios{ background:#fff; }
:where(.pg-online) .beneficios .beneficios__contenedor{
  max-width: 950px;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 48px;
  align-items: center;
}
:where(.pg-online) .beneficios .beneficios__texto .sec-title{
  max-width: 540px;
  font-size: clamp(32px,3.4vw,42px);
  line-height: 1.16;
}
:where(.pg-online) .beneficios .beneficios__texto .sec-title .vio{ color:var(--violet-deep); }
:where(.pg-online) .beneficios .beneficios__texto .sec-title::after{
  width: 72px;
  height: 6px;
  margin: 22px 0 0;
  background: #E6007E;
}
:where(.pg-online) .beneficios .beneficios__texto p{ margin-top:22px; font-size:15.5px; line-height:1.7; }
:where(.pg-online) .beneficios .beneficios__lista{ margin-top:22px; }
:where(.pg-online) .beneficios .beneficios__lista li{ padding:11px 0 11px 28px; font-size:14px; }
:where(.pg-online) .beneficios .beneficios__lista li::before{ content:"\2192"; color:var(--violet-deep); }
:where(.pg-online) .beneficios .beneficios__imagen{
  width: 100%;
  aspect-ratio: 1/1;
  max-height: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
:where(.pg-online) .beneficios .beneficios__imagen img{ object-fit:contain; }
@media(max-width:900px){
  :where(.pg-online) .beneficios .beneficios__contenedor{ max-width:680px; gap:28px; }
  :where(.pg-online) .beneficios .beneficios__imagen{ max-height:380px; }
}
@media(max-width:680px){
  :where(.pg-online) .beneficios .beneficios__contenedor{ grid-template-columns:1fr; gap:22px; }
  :where(.pg-online) .beneficios .beneficios__imagen{ width:min(100%,460px); justify-self:center; }
}
:where(.pg-online) .incluye__nota, :where(.pg-online) .certificacion__nota{
  text-align: center;
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
:where(.pg-online) .incluye__nota b, :where(.pg-online) .certificacion__nota b{ color:var(--oxford); }
/* ===== "Todo lo que incluye" en tarjetas apiladas =====
Versión nueva (traída de todoincluye.html): columna izquierda + tarjetas que
se acumulan y se pintan de morado al pegarse; el "+" pasa a "−" justo antes.
Las medidas de cada tarjeta escalan con su ancho (unidades cqw), así se ve
igual de proporcionado en cualquier pantalla. */
:where(.pg-online) .incluye__contenedor{
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(0,1fr);
  gap: clamp(52px,8vw,112px);
  align-items: start;
  max-width: clamp(1260px,84vw,1900px);
  margin: 48px auto 0;
}
:where(.pg-online) .incluye__intro{ position:sticky; top:120px; }
:where(.pg-online) .incluye__intro .sec-title, :where(.pg-online) .incluye__intro .sec-intro{
  text-align: left;
  margin-left: 0;
}
/* Base compartida de la que depende el bloque de abajo: sin el flex-column el
gap del apilado no se aplica; sin list-style/padding salen los bullets. */
:where(.pg-online) .incluye__pila{ display:flex; flex-direction:column; gap:26px; }
:where(.pg-online) .incluye__tarjeta ul{ list-style:none; margin:0; padding:0; }
:where(.pg-online) .incluye__tarjeta ul li::before{
  content: "✓";
  color: var(--acento);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}
@media(max-width:900px){
  /* En pantallas pequeñas no se apila: las tarjetas se leen una tras otra */
  :where(.pg-online) .incluye__contenedor{ grid-template-columns:1fr; gap:34px; }
  :where(.pg-online) .incluye__intro{ position:static; }
  :where(.pg-online) .incluye__intro .sec-title, :where(.pg-online) .incluye__intro .sec-intro{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  :where(.pg-online) .incluye__tarjeta{ position:static; min-height:0; }
}
@media(prefers-reduced-motion:reduce){
  :where(.pg-online) .incluye__intro, :where(.pg-online) .incluye__tarjeta{ position:static; }
}
/* ============================================================
 "TODO LO QUE INCLUYE" — adaptación visual (solo estilos)
 Columna izquierda + tarjetas apiladas que se pintan de morado
 al acumularse; el "+" pasa a "−" justo antes de acumularse.
 ============================================================ */
@property --p { syntax:'<number>'; inherits:true; initial-value:0; }
/* 0 = tarjeta blanca · 1 = acumulada (morada) */
@property --m { syntax:'<number>'; inherits:true; initial-value:0; }
/* 0 = "+" · 1 = "−" */
/* ----- Columna izquierda ----- */
:where(.pg-online) .incluye__intro .sec-title{
  max-width: clamp(430px,34vw,640px);
  font-size: clamp(32px,3.4vw,60px);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #1a1f2c;
}
:where(.pg-online) .incluye__intro .sec-title .vio{ color:var(--violet-deep); }
:where(.pg-online) .incluye__intro .sec-title::after{ width:clamp(72px,5vw,104px); height:6px; margin:22px 0 0; background:#e6007e; }
:where(.pg-online) .incluye__intro .sec-intro{
  margin-top: 22px;
  max-width: clamp(400px,30vw,600px);
  font-size: clamp(13.5px,1vw,18px);
  line-height: 1.65;
  color: var(--ink-soft);
}
:where(.pg-online) .incluye__contador{
  margin-top: 20px;
  font-family: var(--body);
  font-size: clamp(12px,.9vw,17px);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--violet-deep);
}
:where(.pg-online) .incluye__intro .incluye__nota{
  max-width: clamp(400px,32vw,620px);
  margin: 14px 0 0;
  text-align: left;
  font-size: clamp(13.5px,1vw,18px);
  line-height: 1.65;
}
:where(.pg-online) .incluye__intro .incluye__nota b{ color:var(--oxford); font-weight:800; }
/* Imagen de la columna izquierda (debajo del texto) */
:where(.pg-online) .incluye__intro .incluye__ilustracion{
  display: block;
  width: min(100%,clamp(460px,38vw,780px));
  height: auto;
  max-height: min(46vh,clamp(440px,32vw,700px));
  margin: 26px auto 0;
  object-fit: contain;
  object-position: center;
}
@media (max-width:900px){
  :where(.pg-online) .incluye__intro .incluye__ilustracion{ width:min(100%,380px); max-height:none; margin-top:20px; }
}
/* ----- Tarjetas (medidas tomadas de la referencia) =====
 Todo escala con el ancho de la tarjeta (cqw); el alto lo da el contenido (como en Niños). */
:where(.pg-online) .incluye__pila{ container-type:inline-size; gap:28px; }
:where(.pg-online) .incluye__tarjeta{
  --p: 0;
  --m: 0;
  --violeta: #4f2edc;
  --rosa: #e6007e;
  --rosa-suave: #ffa2d3;
  --t: max(22px,3.4cqw);
  /* diámetro del botón + / − */
  position: sticky;
  top: calc(120px + var(--i,0) * 18px);
  display: grid;
  grid-template-columns: max(56px,11.8cqw) max(52px,11.7cqw) minmax(0,1fr);
  column-gap: 3.1cqw;
  align-items: start;
  align-content: start;
  min-height: 0;
  padding: 3cqw 5cqw 3cqw 2.5cqw;
  border-radius: 3.7cqw;
  background: color-mix(in srgb, var(--violeta) calc(var(--p) * 100%), #fff);
  border: 0;
  box-shadow: 0 2px 4px rgba(23,28,38,.18), 0 7px 10px rgba(23,28,38,.18),
  calc(var(--p) * .8cqw) calc(var(--p) * 1.2cqw) 0 color-mix(in srgb, var(--rosa-suave) calc(var(--p) * 100%), transparent);
}
:where(.pg-online) .incluye__tarjeta:nth-child(n){ --acento:var(--violet-deep); }
/* Número: "0X" grande y "/06" pequeño debajo */
:where(.pg-online) .incluye__tarjeta .incluye__numero{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  display: block;
  box-sizing: border-box;
  width: max(56px,11.8cqw);
  height: max(56px,11.8cqw);
  margin: 0;
  padding: 1.4cqw 1.8cqw 0;
  border-radius: 2.2cqw;
  text-align: center;
  line-height: 1.05;
  word-spacing: -.3em;
  font-family: var(--disp);
  font-size: max(11px,2.3cqw);
  font-weight: 800;
  letter-spacing: 0;
  background: color-mix(in srgb, var(--rosa) calc(var(--p) * 100%), #c6bffb);
  color: color-mix(in srgb, #fff calc(var(--p) * 100%), var(--violeta));
}
:where(.pg-online) .incluye__tarjeta .incluye__numero::first-line{
  font-size: max(26px,6cqw);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
/* Espacio de la imagen/ícono de cada tarjeta */
:where(.pg-online) .incluye__tarjeta::before{
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  width: max(52px,11.7cqw);
  height: max(52px,11.7cqw);
}
/* Sin width/height fijos: si la imagen no carga, solo se ve el ícono de imagen rota (sin recuadro) */
:where(.pg-online) .incluye__tarjeta > img{
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: start;
  width: auto;
  height: auto;
  max-width: max(52px,11.7cqw);
  max-height: max(52px,11.7cqw);
  object-fit: contain;
  z-index: 1;
}
:where(.pg-online) .incluye__tarjeta h3{
  grid-column: 3;
  grid-row: 1;
  margin: 0 0 2.2cqw 0;
  font-size: max(18px,4.4cqw);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 800;
  color: color-mix(in srgb, #fff calc(var(--p) * 100%), var(--violeta));
}
:where(.pg-online) .incluye__tarjeta ul{ grid-column:3; grid-row:2; margin:0; }
:where(.pg-online) .incluye__tarjeta ul li{
  display: flex;
  align-items: flex-start;
  gap: .5cqw;
  padding: 1.3cqw 0;
  font-size: max(12px,2.1cqw);
  line-height: 1.4;
  font-weight: 500;
  border-top: max(1px,.16cqw) solid color-mix(in srgb, #fff calc(var(--p) * 100%), var(--violeta));
  color: color-mix(in srgb, #fff calc(var(--p) * 100%), var(--ink-soft));
}
:where(.pg-online) .incluye__tarjeta ul li:last-child{ padding-bottom:0; }
:where(.pg-online) .incluye__tarjeta ul li::before{
  content: "✔";
  margin-top: .1em;
  font-size: .92em;
  font-weight: 800;
  color: color-mix(in srgb, #fff calc(var(--p) * 100%), var(--violeta));
}
/* Botón + / − (círculo fino a la derecha, alineado con el final de las líneas) */
:where(.pg-online) .incluye__tarjeta::after{
  --sig: color-mix(in srgb, var(--violeta) calc(var(--p) * 100%), #7f72e6);
  content: "";
  position: absolute;
  top: 4.1cqw;
  right: 5cqw;
  width: var(--t);
  height: var(--t);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #fff calc(var(--p) * 100%), #7f72e6);
  background: linear-gradient(var(--sig), var(--sig)) center / calc(var(--t) * .45) 1.5px no-repeat,
  linear-gradient(var(--sig), var(--sig)) center / 1.5px calc(var(--t) * .45 * (1 - var(--m))) no-repeat,
  color-mix(in srgb, #fff calc(var(--p) * 100%), transparent);
}
/* ----- Estados (los activa el pequeño script del final) =====
 .is-near    → la tarjeta está por acumularse: "+" pasa a "−"
 .is-stacked → la tarjeta ya quedó acumulada: se pinta de morado
 (--p y --m están registradas, así que la transición es suave) */
:where(.pg-online) .incluye__tarjeta{ transition:--p .45s var(--ease), --m .35s var(--ease); }
:where(.pg-online) .incluye__tarjeta.incluye__tarjeta--cerca{ --m:1; }
:where(.pg-online) .incluye__tarjeta.incluye__tarjeta--apilada{ --m:1; --p:1; }
@media (prefers-reduced-motion:reduce){
  :where(.pg-online) .incluye__tarjeta{ transition:none; }
}
/* Móvil / sin animación: tarjetas normales, sin apilado */
@media (max-width:900px){
  :where(.pg-online) .incluye__tarjeta{ padding-right:60px; }
  :where(.pg-online) .incluye__contenedor{ grid-template-columns:1fr; }
  :where(.pg-online) .incluye__intro .sec-title, :where(.pg-online) .incluye__intro .sec-intro, :where(.pg-online) .incluye__intro .incluye__nota{
    text-align: left;
    margin-left: 0;
  }
}
@media (max-width:640px){
  :where(.pg-online) .incluye__tarjeta{
    min-height: 0;
    padding: 20px 52px 22px 16px;
    column-gap: 12px;
    grid-template-columns: 56px 48px minmax(0,1fr);
  }
  :where(.pg-online) .incluye__tarjeta::before{ width:48px; height:48px; }
  :where(.pg-online) .incluye__tarjeta > img{ max-width:48px; max-height:48px; }
  :where(.pg-online) .incluye__tarjeta h3{ margin-bottom:14px; }
  :where(.pg-online) .incluye__tarjeta::after{ top:24px; right:14px; }
}
/* ===== Las 4 habilidades ===== */
:where(.pg-online) .habilidades__rejilla{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; }
/* 4 columnas solo cuando la tarjeta alcanza ancho para el título + la ilustración
(izquierda 17 + título + aire + img 88 + 36 de margen). Por debajo se pasa a 2. */
@media(max-width:1300px){
  :where(.pg-online) .habilidades__rejilla{ grid-template-columns:1fr 1fr; }
}
@media(max-width:520px){
  :where(.pg-online) .habilidades__rejilla{ grid-template-columns:1fr; }
}
:where(.pg-online) .habilidades__tarjeta{
  background: #fff;
  border-radius: var(--r);
  padding: 26px 22px;
  transition: transform .28s var(--ease);
}
:where(.pg-online) .habilidades__tarjeta:hover{ transform:translateY(-5px); }
:where(.pg-online) .habilidades__numero{
  display: block;
  font-family: var(--disp);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--violet);
  margin-bottom: 16px;
  transition: color .28s;
}
:where(.pg-online) .habilidades__tarjeta:hover .habilidades__numero{ color:var(--violet); }
:where(.pg-online) .habilidades__tarjeta h3{
  font-family: var(--disp);
  font-size: 19px;
  font-weight: 800;
  color: var(--oxford);
  margin-bottom: 7px;
}
:where(.pg-online) .habilidades__tarjeta p{ font-size:14px; color:var(--ink-soft); line-height:1.55; }
:where(.pg-online) .habilidades > .sec-title{ max-width:none; white-space:nowrap; font-size:clamp(22px,3.4vw,40px); }
:where(.pg-online) .habilidades__rejilla{ max-width:1250px; gap:40px; margin:56px auto 0; }
:where(.pg-online) .habilidades__tarjeta{
  position: relative;
  min-height: 172px;
  overflow: hidden;
  padding: 53px 17px 22px;
  border-radius: 23px;
  box-shadow: 0 2px 4px rgba(23,28,38,.18), 0 7px 10px rgba(23,28,38,.18);
  transition: background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
:where(.pg-online) .habilidades__numero{
  position: absolute;
  top: 9px;
  left: 15px;
  z-index: 0;
  margin: 0;
  color: #f0edfa;
  font-size: 112px;
  line-height: .9;
  font-weight: 800;
  -webkit-text-stroke: 0;
}
:where(.pg-online) .habilidades__tarjeta:hover .habilidades__numero{ color:#f0edfa; }
:where(.pg-online) .habilidades__tarjeta h3{
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #4f2edc;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -.035em;
}
:where(.pg-online) .habilidades__tarjeta p{
  position: relative;
  z-index: 1;
  margin: 0;
  color: #5a6072;
  font-size: 14px;
  line-height: 1.8;
  text-align: justify;
}
:where(.pg-online) .habilidades__tarjeta img{
  position: absolute;
  top: 13px;
  right: 36px;
  width: 88px;
  height: 82px;
  object-fit: contain;
  z-index: 1;
}
@media(max-width:680px){
  :where(.pg-online) .habilidades__tarjeta img{ right:18px; width:74px; height:70px; }
}
:where(.pg-online) .habilidades__tarjeta:hover{
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 6px 12px rgba(23,28,38,.22), 0 16px 26px rgba(23,28,38,.20);
}
@media(max-width:900px){
  :where(.pg-online) .habilidades__rejilla{ gap:24px; }
}
@media(max-width:680px){
  :where(.pg-online) .habilidades > .sec-title{ white-space:normal; }
  :where(.pg-online) .habilidades__rejilla{ gap:20px; margin-top:32px; }
  :where(.pg-online) .habilidades__tarjeta{ min-height:165px; }
}
/* ===== Escalera MCER ===== */
:where(.pg-online) .ruta-niveles__titulo{
  font-family: var(--disp);
  font-size: clamp(27px,3.4vw,40px);
  font-weight: 800;
  color: var(--oxford);
  text-align: center;
  max-width: none;
  margin: 76px auto 0;
  letter-spacing: -.02em;
  line-height: 1.12;
}
:where(.pg-online) .ruta-niveles__titulo .vio{ color:var(--violet); }
:where(.pg-online) .ruta-niveles__titulo::after{
  content: "";
  display: block;
  width: 102px;
  height: 6px;
  margin: 16px auto 0;
  border-radius: 99px;
  background: #e6007e;
}
:where(.pg-online) .ruta-niveles__subtitulo{
  text-align: center;
  margin: 14px auto 0;
  max-width: 600px;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
:where(.pg-online) .ruta-niveles__contenedor{
  display: grid;
  grid-template-columns: minmax(260px,.9fr) minmax(440px,1.1fr);
  gap: 38px;
  align-items: center;
  max-width: 1100px;
  margin: 34px auto 0;
}
:where(.pg-online) .ruta-niveles__mascota{ min-height:510px; }
:where(.pg-online) .ruta-niveles__mascota img{ display:block; width:100%; max-width:480px; height:auto; margin:0 auto; }
/* Timeline Container */
:where(.pg-online) .ruta-niveles__escalera{
  max-width: none;
  margin: 0;
  padding: 0;
  border-left: 3px solid #001330;
  position: relative;
  list-style: none;
}
/* Card Normal State */
:where(.pg-online) .ruta-niveles__nivel{
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0 16px;
  margin: 0 0 20px 84px;
  padding: 12px 18px 12px 12px;
  min-height: 92px;
  border: 1px solid #e7e7e9;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(23,28,38,.12), 0 6px 9px rgba(23,28,38,.08);
  position: relative;
  transition: all .3s var(--ease);
  cursor: pointer;
}
/* Timeline Nodes */
:where(.pg-online) .ruta-niveles__nivel::before{
  content: "";
  position: absolute;
  left: -98.5px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 0 2px #c7bfff;
  z-index: 3;
  transition: all .3s var(--ease);
}
:where(.pg-online) .ruta-niveles__nivel:nth-child(1)::before, :where(.pg-online) .ruta-niveles__nivel:nth-child(5)::before{
  background: #001330;
}
:where(.pg-online) .ruta-niveles__nivel:nth-child(2)::before, :where(.pg-online) .ruta-niveles__nivel:nth-child(4)::before{
  background: #1254eb;
}
:where(.pg-online) .ruta-niveles__nivel:nth-child(3)::before{
  background: #4f2edc;
}
/* Badge Nivel */
:where(.pg-online) .ruta-niveles__codigo{
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 14px;
  background: #c7bfff;
  color: #4f2edc;
  font-family: var(--disp);
  font-size: 36px;
  font-weight: 800;
  transition: all .3s var(--ease);
  position: relative;
}
:where(.pg-online) .ruta-niveles__nombre{
  align-self: end;
  font-family: var(--disp);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  color: #4f2edc;
  transition: color .3s var(--ease);
}
:where(.pg-online) .ruta-niveles__descripcion{
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  transition: color .3s var(--ease);
}
:where(.pg-online) .ruta-niveles__insignia{
  grid-column: 2;
  width: max-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #df0085;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  transition: all .3s var(--ease);
}
/* Card Hover State */
:where(.pg-online) .ruta-niveles__nivel:hover{
  background: #4f2edc;
  border-color: transparent;
  box-shadow: 6px 6px 0 #ffa2d3;
  transform: translateY(-2px);
}
/* Node on Hover: Outer Magenta Ring with PURPLE CENTER CIRCLE */
:where(.pg-online) .ruta-niveles__nivel:hover::before{
  background: #ffffff !important;
  /* Círculo del centro morado */
  border: 3.5px solid #e6007e;
  /* Anillo magenta exterior */
  box-shadow: 0 0 0 2px #ffffff;
  /* Borde separador blanco */
}
/* Horizontal Connector Line */
:where(.pg-online) .ruta-niveles__nivel:hover::after{
  content: "";
  position: absolute;
  left: -85.5px;
  top: 50%;
  width: 80px;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #e6007e 0%, #4f2edc 100%);
  z-index: 1;
}
/* Colita / Teardrop Pointer on card left edge */
:where(.pg-online) .ruta-niveles__cola{
  display: none;
  position: absolute;
  left: -6px;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #4f2edc;
  border-radius: 3px;
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
  transition: all .3s var(--ease);
}
:where(.pg-online) .ruta-niveles__nivel:hover .ruta-niveles__cola{
  display: block;
}
:where(.pg-online) .ruta-niveles__nivel:hover .ruta-niveles__codigo{
  background: #e6007e;
  color: #ffffff;
}
:where(.pg-online) .ruta-niveles__nivel:hover .ruta-niveles__nombre, :where(.pg-online) .ruta-niveles__nivel:hover .ruta-niveles__descripcion{
  color: #ffffff;
}
@media(max-width:900px){
  :where(.pg-online) .ruta-niveles__contenedor{ grid-template-columns:minmax(0,.7fr) minmax(390px,1.3fr); gap:20px; }
  :where(.pg-online) .ruta-niveles__nivel{ margin-left:44px; }
  :where(.pg-online) .ruta-niveles__nivel::before{ left:-58.5px; }
  :where(.pg-online) .ruta-niveles__nivel:hover::after{ left:-45.5px; width:40px; }
}
@media(max-width:720px){
  :where(.pg-online) .ruta-niveles__contenedor{ display:block; }
  :where(.pg-online) .ruta-niveles__mascota{ display:none; }
  :where(.pg-online) .ruta-niveles__escalera{ margin:30px 0 0 10px; }
  :where(.pg-online) .ruta-niveles__nivel{ margin-left:34px; grid-template-columns:56px 1fr; }
  :where(.pg-online) .ruta-niveles__nivel::before{ left:-48.5px; }
  :where(.pg-online) .ruta-niveles__nivel:hover::after{ left:-35.5px; width:30px; }
  :where(.pg-online) .ruta-niveles__codigo{ width:56px; height:56px; font-size:30px; }
  :where(.pg-online) .ruta-niveles__nombre{ font-size:15px; }
}
/* ===== Certificaciones (tarjetas) ===== */
:where(.pg-online) .certificacion__rejilla{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
@media(max-width:900px){
  :where(.pg-online) .certificacion__rejilla{ grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
  :where(.pg-online) .certificacion__rejilla{ grid-template-columns:1fr; }
}
:where(.pg-online) .certificacion__tarjeta{
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(23,28,38,.18), 0 7px 10px rgba(23,28,38,.18);
  transition: transform .3s var(--ease), box-shadow .3s;
  display: flex;
  flex-direction: column;
}
:where(.pg-online) .certificacion__tarjeta:hover{
  transform: translateY(-6px);
  box-shadow: 0 6px 12px rgba(23,28,38,.22), 0 16px 26px rgba(23,28,38,.20);
}
:where(.pg-online) .certificacion__tarjeta figcaption{ padding:22px 24px 26px; }
:where(.pg-online) .certificacion__tarjeta h3{
  font-family: var(--disp);
  font-size: 19px;
  font-weight: 800;
  color: var(--oxford);
  margin-bottom: 7px;
}
:where(.pg-online) .certificacion__tarjeta p{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; }
/* ===== Sección Certificación Ajustada ===== */
:where(.pg-online) #certificacion .certificacion__rejilla--doble{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
  max-width: 1060px;
  margin: 48px auto 0;
}
/* Mascota más grande */
:where(.pg-online) #certificacion .certificacion__mascota{
  width: clamp(230px, 25vw, 310px);
  height: auto;
  object-fit: contain;
  justify-self: center;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));
}
:where(.pg-online) #certificacion .certificacion__tarjeta{
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(26, 31, 44, 0.08);
  border: 1px solid rgba(227, 225, 240, 0.6);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
:where(.pg-online) #certificacion .certificacion__tarjeta:hover{
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(26, 31, 44, 0.12);
}
/* Encabezados más delgados/compactos */
:where(.pg-online) #certificacion .certificacion__encabezado{
  height: 78px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.pg-online) #certificacion .certificacion__tarjeta--toefl .certificacion__encabezado{
  background: #002147;
}
:where(.pg-online) #certificacion .certificacion__tarjeta--oopt .certificacion__encabezado{
  background: #4F2EDC;
}
:where(.pg-online) #certificacion .certificacion__encabezado img{
  max-height: 72px;
  width: auto;
  object-fit: contain;
}
/* Contenido de la tarjeta */
:where(.pg-online) #certificacion .certificacion__tarjeta figcaption{
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
:where(.pg-online) #certificacion .certificacion__tarjeta .certificacion__etiqueta{
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #D3442A;
  margin-bottom: 16px;
  line-height: 1.45;
}
:where(.pg-online) #certificacion .certificacion__tarjeta p{
  font-size: 13.5px;
  color: #5A6072;
  line-height: 1.55;
  margin-bottom: 24px;
}
:where(.pg-online) #certificacion .certificacion__tarjeta p b{
  color: #1A1F2C;
}
:where(.pg-online) #certificacion .certificacion__tarjeta .certificacion__enlace{
  font-family: var(--body);
  font-weight: 700;
  font-size: 13.5px;
  color: #4F2EDC;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  transition: opacity .2s;
}
:where(.pg-online) #certificacion .certificacion__tarjeta .certificacion__enlace:hover{
  opacity: .8;
}
:where(.pg-online) #certificacion .certificacion__nota{
  text-align: center;
  margin-top: 36px;
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
/* Adaptabilidad Móvil */
@media(max-width: 860px){
  :where(.pg-online) #certificacion .certificacion__rejilla--doble{
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 420px;
  }
  :where(.pg-online) #certificacion .certificacion__mascota{
    order: -1;
    width: 220px;
  }
}
/* Tarjeta destacada suave (curso VIP) */
:where(.pg-online) .card.featured-soft{ box-shadow:0 2px 4px rgba(23,28,38,.18), 0 10px 22px rgba(108,76,241,.30); }
/* ===== Cita de autoridad ===== */
:where(.pg-online) .quote-sec{ background:#fff; }
:where(.pg-online) .quote-box p{
  font-family: var(--disp);
  font-size: clamp(20px,2.6vw,29px);
  font-weight: 700;
  color: var(--oxford);
  line-height: 1.35;
  letter-spacing: -.01em;
}
:where(.pg-online) .quote-sec .quote-by{ background:transparent; padding:0; color:var(--ink-soft); font-size:14px; }
:where(.pg-online) .quote-by b{ display:block; color:var(--oxford); font-size:15px; font-weight:800; }
:where(.pg-online) .quote-by span{
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--violet-deep);
  letter-spacing: .06em;
}
:where(.pg-online) .card{
  background: #fff;
  border-radius: var(--r);
  padding: 30px 26px;
  box-shadow: 0 2px 4px rgba(23,28,38,.18), 0 7px 10px rgba(23,28,38,.18);
  transition: transform .3s var(--ease), box-shadow .3s;
  display: flex;
  flex-direction: column;
}
:where(.pg-online) .card:hover{
  transform: translateY(-6px) rotate(-.4deg);
  box-shadow: 0 6px 12px rgba(23,28,38,.22), 0 16px 26px rgba(23,28,38,.20);
}
/* Cards de los pilares académicos */
:where(.pg-online) .pilares__rejilla{ max-width:1200px; margin:34px auto 0; gap:36px 44px; }
:where(.pg-online) .pilares__rejilla .card{
  position: relative;
  min-height: 210px;
  padding: 18px 22px 17px;
  overflow: hidden;
  border-radius: 23px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(23,28,38,.18), 0 7px 10px rgba(23,28,38,.18);
  transition: background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
:where(.pg-online) .pilares__rejilla .card .mono-tag{
  display: block;
  margin: 0 0 8px;
  color: #d20c83;
  font: 700 9px/1.2 var(--body);
  letter-spacing: .04em;
}
:where(.pg-online) .pilares__rejilla .card h3{
  max-width: calc(100% - 104px);
  margin: 0 0 8px;
  color: #1a1f2c;
  font: 800 29px/1.12 var(--disp);
  letter-spacing: -.035em;
}
:where(.pg-online) .pilares__rejilla .card p{ margin:0; color:#5a6072; font-size:14px; line-height:1.8; text-align:justify; }
:where(.pg-online) .pilares__rejilla .card img{
  position: absolute;
  top: 25px;
  right: 35px;
  width: 81px;
  height: 81px;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}
@media(max-width:680px){
  :where(.pg-online) .pilares__rejilla .card img{ right:20px; width:68px; height:68px; }
  :where(.pg-online) .pilares__rejilla .card h3{ max-width:calc(100% - 90px); }
}
:where(.pg-online) .pilares__rejilla .card:hover{
  z-index: 1;
  transform: translateY(-3px);
  background: #4f2edc;
  box-shadow: 7px 9px 0 rgba(226,24,145,.38);
}
:where(.pg-online) .pilares__rejilla .card:hover .mono-tag, :where(.pg-online) .pilares__rejilla .card:hover h3{
  color: #fff;
}
:where(.pg-online) .pilares__rejilla .card:hover p{ color:rgba(255,255,255,.9); }
:where(.pg-online) .pilares > .sec-title{ max-width:none; white-space:nowrap; font-size:clamp(22px,3.4vw,40px); }
@media(max-width:1080px){
  :where(.pg-online) .pilares__rejilla{ gap:28px; }
  :where(.pg-online) .pilares__rejilla .card{ min-height:220px; }
  :where(.pg-online) .pilares__rejilla .card h3{ font-size:25px; }
}
@media(max-width:680px){
  :where(.pg-online) .pilares__rejilla{ gap:20px; margin-top:28px; }
  :where(.pg-online) .pilares__rejilla .card{ min-height:0; padding:20px; }
  :where(.pg-online) .pilares__rejilla .card h3{ font-size:25px; }
  :where(.pg-online) .pilares > .sec-title{ white-space:normal; }
}
/* ===== Estudia desde donde estés ===== */
:where(.pg-online) .estudia__contenedor{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px,5vw,72px);
  align-items: center;
  max-width: 1200px;
  margin: 56px auto 0;
}
:where(.pg-online) .estudia__ilustracion{ display:flex; justify-content:center; }
:where(.pg-online) .estudia__ilustracion img{ width:100%; max-width:600px; height:auto; }
:where(.pg-online) .estudia__tarjetas{ display:flex; flex-direction:column; gap:20px; }
:where(.pg-online) .estudia__tarjeta{
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 28px 24px;
  box-shadow: 0 3px 6px rgba(23,28,38,.16);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
:where(.pg-online) .estudia__tarjeta:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(23,28,38,.18), 0 14px 26px rgba(23,28,38,.10);
}
:where(.pg-online) .estudia__icono{ flex:0 0 116px; height:100px; display:flex; align-items:center; justify-content:center; }
:where(.pg-online) .estudia__icono img{ width:100%; height:100%; object-fit:contain; }
:where(.pg-online) .estudia__contenido{ min-width:0; }
:where(.pg-online) .estudia__tarjeta .estudia__etiqueta{
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--violet-deep);
}
:where(.pg-online) .estudia__tarjeta h3{
  margin-bottom: 6px;
  font-family: var(--disp);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -.02em;
}
:where(.pg-online) .estudia__tarjeta p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; }
@media(max-width:980px){
  :where(.pg-online) .estudia__contenedor{ grid-template-columns:1fr; gap:34px; }
  :where(.pg-online) .estudia__ilustracion img{ max-width:440px; }
}
@media(max-width:680px){
  :where(.pg-online) .estudia__tarjeta{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 20px;
    border-radius: 20px;
  }
  :where(.pg-online) .estudia__icono{ flex:0 0 auto; width:88px; height:76px; }
}
/* ===== CTA band ===== */
:where(.pg-online) .cta-band{
  background: #fff;
  border-radius: var(--r);
  margin: 0 5vw 84px;
  padding: 56px 6vw;
  text-align: center;
  color: var(--ink);
}
:where(.pg-online) .cta-band h3{
  font-family: var(--disp);
  font-size: clamp(24px,3vw,34px);
  font-weight: 800;
  color: var(--oxford);
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
:where(.pg-online) .cta-band p{ color:var(--ink-soft); max-width:560px; margin:0 auto 28px; font-size:15.5px; }
/* Subrayado de acento bajo los títulos de sección */
:where(.pg-online) .sec-title::after{
  content: "";
  display: block;
  width: 58px;
  height: 5px;
  border-radius: 99px;
  background: #E6007E;
  margin: 16px auto 0;
}
:where(.pg-online) .beneficios__texto .sec-title::after{ margin-left:0; }
/* Sombras de hover de las tarjetas */
:where(.pg-online) .card:hover, :where(.pg-online) .certificacion__tarjeta:hover, :where(.pg-online) .photo-slot:hover, :where(.pg-online) .mv-card:hover{
  box-shadow: 0 6px 12px rgba(23,28,38,.22), 0 16px 26px rgba(23,28,38,.20);
}
:where(.pg-online) .stat-box:hover{
  box-shadow: 0 6px 12px rgba(23,28,38,.22), 0 16px 26px rgba(23,28,38,.20);
}
/* ===== Sticker del hero ===== */
:where(.pg-online) .page-hero::after{
  position: absolute;
  top: 22px;
  right: 5vw;
  z-index: 2;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 9px 16px;
  border-radius: 999px;
  transform: rotate(2.5deg);
  border: 2px solid var(--oxford);
  background: #fff;
  color: var(--oxford);
  box-shadow: 3px 3px 0 var(--acc-sh);
}
@media(max-width:760px){
  :where(.pg-online) .page-hero::after{ display:none; }
}
/* ===== Botón "motion": el círculo se expande y se traga el botón =====
Adaptación en CSS puro del efecto MotionButton (React): al pasar el
mouse, el círculo crece hasta llenar la pastilla, la flecha se desliza
y el texto cambia de color. Sin dependencias. */
:where(.pg-online) .btn-motion{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--oxford);
  box-shadow: 4px 4px 0 rgba(0,33,71,.16);
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
:where(.pg-online) .btn-motion .circle{
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 44px;
  border-radius: 999px;
  background: var(--violet);
  transition: width .55s var(--ease);
}
:where(.pg-online) .btn-motion .icon{
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: #fff;
  transition: transform .55s var(--ease);
}
:where(.pg-online) .btn-motion .label{
  position: relative;
  z-index: 1;
  margin: 0 23px 0 64px;
  padding: 16px 0;
  font-weight: 800;
  font-size: 15px;
  color: var(--oxford);
  white-space: nowrap;
  transition: color .45s var(--ease);
}
:where(.pg-online) .btn-motion:hover .label{ color:#fff; }
@media(max-width:480px){
  :where(.pg-online) .btn-motion .label{ font-size:14px; margin:0 18px 0 58px; }
}
@media (prefers-reduced-motion: reduce){
  :where(.pg-online) .page-hero::after{ animation:none; }
}
/* ===== Hero online: composición de referencia ===== */
:where(.pg-online) #cotizar.page-hero.hero-split{
  /* --hero-img eliminado: imagen ahora en HTML */
  position: relative;
  overflow: hidden;
  padding: 34px clamp(20px,3.6vw,56px) 56px;
  background: #fff;
  background-image: none;
  text-align: left;
}
:where(.pg-online) #cotizar.page-hero::after{ content:none; display:none; }
:where(.pg-online) #cotizar .hero-split-wrap{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(auto,1.1fr) minmax(0,1.2fr) 310px;
  column-gap: clamp(16px,2vw,32px);
  row-gap: 10px;
  align-items: center;
}
:where(.pg-online) #cotizar .hero-split__imagen{
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 12px 15px rgba(0,33,71,.09));
}
:where(.pg-online) #cotizar .hero-copy{
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
:where(.pg-online) #cotizar .hero-copy h1{
  order: 1;
  margin: 0;
  max-width: 440px;
  text-wrap: balance;
  font-size: clamp(36px,3.9vw,52px);
  line-height: 1.16;
  letter-spacing: -.035em;
}
:where(.pg-online) #cotizar .hero-copy h1 .vio{ color:var(--violet-deep); text-transform:capitalize; }
:where(.pg-online) #cotizar .hero-copy h1::after{
  content: "";
  display: block;
  width: 140px;
  height: 6px;
  border-radius: 99px;
  background: #E6007E;
  margin-top: 26px;
}
:where(.pg-online) #cotizar .hero-copy .intro{
  order: 2;
  margin: 30px 0 0;
  max-width: 420px;
  font-size: 15.5px;
  line-height: 1.65;
}
:where(.pg-online) #cotizar .hero-copy .hero-plan{
  order: 4;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  font-size: 12.5px;
}
/* wrap: con la columna de texto estrecha el segundo botón baja de línea en
vez de desbordar sobre la imagen (pasaba entre 1280 y 1440px). */
:where(.pg-online) #cotizar .hero-copy .hero-cta{ order:3; gap:12px; margin-top:22px; flex-wrap:wrap; }
/* Conserva el diseño original de los dos botones y sus colores. */
:where(.pg-online) #cotizar .hero-cta .btn-line{ min-width:auto; }
/* Botones del hero con más altura (arriba/abajo) como referencia btnhero.png. */
:where(.pg-online) #cotizar .hero-cta .btn{ font-size:14px; padding:16px 22px; line-height:1.2; }
:where(.pg-online) #cotizar .btn-motion .label{ font-size:14px; padding:8px 0; margin:0 18px 0 56px; line-height:1.2; }
:where(.pg-online) #cotizar .btn-motion .circle{ width:40px; }
:where(.pg-online) #cotizar .btn-motion:hover .circle{ width:calc(100% - 12px); }
:where(.pg-online) #cotizar .btn-motion .icon{ left:15px; }
:where(.pg-online) #cotizar .hero-form{
  grid-column: 3;
  grid-row: 1;
  position: relative;
  justify-self: end;
  align-self: center;
  width: 100%;
  max-width: 310px;
  margin: 0;
  padding: 30px 18px 22px;
  background: #fff;
  border: 0;
  border-radius: 28px;
  box-shadow: 0 12px 34px rgba(26,31,44,.18);
}
:where(.pg-online) #cotizar .hero-form::before{
  content: "● Clases en vivo";
  position: absolute;
  top: -12px;
  right: -20px;
  z-index: 3;
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  background: #E6007E;
  color: #fff;
  font: 700 12px/1 var(--mono);
  animation: online-pulso-vivo 1.9s ease-in-out infinite;
}
@keyframes online-pulso-vivo {
0%,100%{ box-shadow:0 0 0 0 rgba(230,0,126,.42); }
50%{ box-shadow:0 0 0 9px rgba(230,0,126,0); }
}
:where(.pg-online) #cotizar .quote-tag{ margin:0 0 12px; padding:6px 12px; font-size:10.5px; border:0; }
:where(.pg-online) #cotizar .hf-title{ margin-bottom:6px; font-size:22px; }
:where(.pg-online) #cotizar .hf-sub{ margin-bottom:16px; }
:where(.pg-online) #cotizar .qf-grid{ grid-template-columns:1fr; gap:10px; }
:where(.pg-online) #cotizar .qf-field input{ padding:12px 14px; font-size:14px; border-width:1.5px; }
:where(.pg-online) #cotizar .quote-form .consent{ margin:14px 0 12px; font-size:11.5px; }
:where(.pg-online) #cotizar .quote-form .btn-main{
  width: 100%;
  height: 48px;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
}
:where(.pg-online) #cotizar .qf-nota{ margin-top:10px; font-size:11.5px; }
:where(.pg-online) #cotizar .stats-bar{
  max-width: 940px;
  margin: 38px auto 0;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}
:where(.pg-online) #cotizar .stat-box{
  padding: 20px 16px 17px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(23,28,38,.18), 0 7px 10px rgba(23,28,38,.18);
}
:where(.pg-online) #cotizar .stat-box:hover{
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(23,28,38,.22), 0 16px 26px rgba(23,28,38,.20);
}
:where(.pg-online) #cotizar .stat-num{ font-size:clamp(30px,3.6vw,42px); color:var(--violet); }
:where(.pg-online) #cotizar .stat-num.stat-stars{ font-size:24px; line-height:1; letter-spacing:1px; color:#F5A623; }
:where(.pg-online) #cotizar .stat-lbl{ margin-top:9px; font-size:12.5px; }
/* La imagen pasó de un ::after (que ya no existe) a un <img> real: en cada
salto de columna hay que reubicarla, o se queda clavada en la columna 2 y
rompe la retícula (solapa el formulario a ~1100px y crea una columna
implícita que descuadra todo el hero por debajo de 860px). */
@media(max-width:1280px){
  :where(.pg-online) #cotizar .hero-split-wrap{ grid-template-columns:minmax(0,1fr) 310px; }
  :where(.pg-online) #cotizar .hero-form{ grid-column:2; grid-row:1 / span 2; }
  :where(.pg-online) #cotizar .hero-split__imagen{ grid-column:1; grid-row:2; width:100%; max-width:520px; justify-self:center; }
}
@media(max-width:860px){
  :where(.pg-online) #cotizar.page-hero.hero-split{ padding:26px 20px 44px; text-align:center; }
  :where(.pg-online) #cotizar .hero-split-wrap{ grid-template-columns:minmax(0,1fr); row-gap:26px; }
  :where(.pg-online) #cotizar .hero-copy{ grid-column:1; grid-row:1; align-items:center; text-align:center; }
  :where(.pg-online) #cotizar .hero-copy h1::after{ margin:26px auto 0; }
  :where(.pg-online) #cotizar .hero-copy .hero-cta{ justify-content:center; }
  :where(.pg-online) #cotizar .hero-split__imagen{ grid-column:1; grid-row:2; max-width:460px; }
  :where(.pg-online) #cotizar .hero-form{ grid-column:1; grid-row:3; justify-self:center; max-width:380px; margin-top:16px; }
  :where(.pg-online) #cotizar .hero-form::before{ right:-6px; }
  :where(.pg-online) #cotizar .stats-bar{ grid-template-columns:1fr 1fr; margin-top:40px; }
}
@media(max-width:480px){
  :where(.pg-online) #cotizar .hero-copy .hero-cta{ flex-direction:row; flex-wrap:wrap; align-items:center; width:100%; }
  :where(.pg-online) #cotizar .hero-cta .btn-motion, :where(.pg-online) #cotizar .hero-cta .btn-line{
    justify-content: center;
  }
  :where(.pg-online) #cotizar .stat-box{ padding:20px 10px 18px; }
  :where(.pg-online) #cotizar .stat-lbl{ font-size:12.5px; }
}
@media(max-width:820px){
  :where(.pg-online) #cotizar .stats-bar{ grid-template-columns:1fr 1fr; }
}
@media(max-width:420px){
  :where(.pg-online) #cotizar .stat-box{ padding:16px 12px 14px; }
  :where(.pg-online) #cotizar .stat-lbl{ font-size:11.5px; }
}
/* Testimonios y cierre: estilos copiados de niños.html */
:where(.pg-online) #testimonios .test-video iframe{ display:none !important; }
/* scale(1.5): la portada 16:9 de YouTube trae barras negras a los lados del video vertical;
   al ampliarla desde el centro se recortan y el video llena la tarjeta. */
:where(.pg-online) #testimonios .test-video img.yt-thumb{ object-position:center; transform:scale(1.5); }
:where(.pg-online) #testimonios .test-video .yt-play{
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
:where(.pg-online) #testimonios .card{ position:relative; }
:where(.pg-online) #testimonios .card .pin{
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red,#E8442E);
  border: 3px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.18);
}
:where(.pg-online) #testimonios .test-video .vid-tag{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red,#E8442E);
  color: #fff;
  font-family: var(--mono,'Montserrat',sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
:where(.pg-online) #testimonios .test-video .vid-tag i{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: tv-pulse 2s infinite;
}
:where(.pg-online) #testimonios .grid{ perspective:1300px; }
:where(.pg-online) #testimonios .grid > .card:nth-child(1){ transform:rotate(-1deg); }
:where(.pg-online) #testimonios .grid > .card:nth-child(2){ transform:rotate(.8deg) translateY(14px); }
:where(.pg-online) #testimonios .grid > .card:nth-child(3){ transform:rotate(-.6deg); }
:where(.pg-online) #testimonios .grid > .card:hover{ transform:rotate(0) translateY(-6px); }
@media(max-width:680px){
  :where(.pg-online) #testimonios .grid > .card:nth-child(n){ transform:none; }
}
:where(.pg-online) #testimonios .revelar-testimonio{
  opacity: 0;
  translate: 0 44px;
  scale: .95;
  transition: opacity .8s var(--ease,cubic-bezier(.22,.9,.35,1)), translate .9s var(--ease,cubic-bezier(.22,.9,.35,1)), scale .9s var(--ease,cubic-bezier(.22,.9,.35,1)), transform .3s var(--ease,cubic-bezier(.22,.9,.35,1)), box-shadow .3s var(--ease,cubic-bezier(.22,.9,.35,1));
}
:where(.pg-online) #testimonios .revelar-testimonio.in{ opacity:1; translate:0 0; scale:1; }
:where(.pg-online) #testimonios .sec-title.revelar-testimonio{
  filter: blur(6px);
  transition-property: opacity,translate,scale,filter;
}
:where(.pg-online) #testimonios .sec-title.revelar-testimonio.in{ filter:none; }
:where(.pg-online) #testimonios .g-badge{
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 44px auto 0;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--white,#fff);
  border: 2px solid var(--oxford,#002147);
  border-radius: 999px;
  padding: 12px 24px;
  box-shadow: 5px 5px 0 var(--violet,#6C4CF1);
  text-decoration: none;
  transition: transform .18s var(--ease,cubic-bezier(.22,.9,.35,1)), box-shadow .18s var(--ease,cubic-bezier(.22,.9,.35,1));
}
:where(.pg-online) #testimonios .g-badge:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--violet,#6C4CF1); }
:where(.pg-online) #testimonios .g-badge .g-logo{
  font-family: var(--disp,'Bricolage Grotesque',sans-serif);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
}
:where(.pg-online) #testimonios .g-badge .g-score{
  font-family: var(--disp,'Bricolage Grotesque',sans-serif);
  font-weight: 800;
  font-size: 32px;
  color: var(--oxford,#002147);
  line-height: 1;
}
:where(.pg-online) #testimonios .g-badge > span:last-child{ display:flex; flex-direction:column; gap:2px; text-align:left; }
:where(.pg-online) #testimonios .g-badge .g-stars{
  display: block;
  color: #F5A623;
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
}
:where(.pg-online) #testimonios .g-badge .g-text{
  display: block;
  font-size: 14.5px;
  color: var(--ink-soft,#5A6072);
  font-weight: 600;
  line-height: 1.3;
}
@media(max-width:520px){
  :where(.pg-online) #testimonios .g-badge{ gap:12px; padding:12px 18px; border-radius:24px; }
  :where(.pg-online) #testimonios .g-badge .g-text{ font-size:12.5px; }
}
:where(.pg-online) .yt-popup{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,19,48,.82);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
}
:where(.pg-online) .yt-popup.open{ display:flex; }
:where(.pg-online) .yt-popup-box{
  position: relative;
  aspect-ratio: 9/16;
  height: auto;
  width: min(86vw, calc(min(82vh, 850px) * 9 / 16));
  background: #000;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
:where(.pg-online) .yt-popup-box iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 6px;
}
:where(.pg-online) #yt-close{
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 5;
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
:where(.pg-online) #yt-close:hover{ background:var(--red,#E8442E); color:#fff; }
body.pg-online.yt-lock{ overflow:hidden; }
:where(.pg-online) .quote-sec{ position:relative; overflow:hidden; background:#fff; }
:where(.pg-online) .quote-sec .quote-box{ position:relative; z-index:3; }
:where(.pg-online) .quote-sec .quote-box p{ color:var(--oxford); }
:where(.pg-online) .fp-trail{ position:absolute; inset:0; z-index:1; pointer-events:none; }
:where(.pg-online) .cta-band{ position:relative; overflow:hidden; }
:where(.pg-online) .cta-band > :not(.fp-trail){ position:relative; z-index:2; }
:where(.pg-online) .fp-fig{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s ease, transform .5s var(--ease);
  will-change: transform,opacity;
  line-height: 0;
  font-size: 0;
}
:where(.pg-online) .fp-fig svg{ display:block; width:100%; height:100%; }
@media(max-width:900px){
  :where(.pg-online) .fp-trail{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  :where(.pg-online) .fp-trail{ display:none; }
}
:where(.pg-online) .cta-band{ background:#fff; border-radius:var(--r); margin:0 5vw; padding:56px 6vw; color:var(--oxford); }
:where(.pg-online) .cta-band h3{ color:var(--oxford); }
:where(.pg-online) .cta-band p{ color:var(--ink-soft); }
@media(prefers-reduced-motion:reduce){
  :where(.pg-online) #testimonios .revelar-testimonio{ opacity:1; translate:none; scale:none; filter:none; transition:none; }
  :where(.pg-online) #testimonios .vid-tag i{ animation:none; }
}
/* Medidas y breakpoints de testimonios de niños.html, aplicados solo aquí. */
:where(.pg-online) #testimonios .grid{ gap:22px; margin-top:40px; }
:where(.pg-online) #testimonios .card{ padding:30px 26px; }
:where(.pg-online) #testimonios .test-video{ aspect-ratio:4/5; }
@media(max-width:1080px){
  :where(.pg-online) #testimonios .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px){
  :where(.pg-online) #testimonios .grid{ grid-template-columns:1fr; }
  :where(.pg-online) #testimonios .grid > .card:nth-child(n){ transform:none; }
}
@media(min-width:1200px){
  :where(.pg-online) #testimonios{ padding:clamp(84px,6vw,112px) clamp(5vw,7vw,112px); }
  :where(.pg-online) #testimonios .grid{ gap:clamp(22px,2.2vw,36px); }
}
@media(min-width:1600px){
  :where(.pg-online) #testimonios .grid{ gap:clamp(28px,3vw,72px); }
}
/* ============ AJUSTES: imagen, números y ruta MCER ============ */
/* ---------- 1) "Aprende inglés sin salir de casa": imagen más grande ---------- */
:where(.pg-online) .beneficios .beneficios__contenedor{
  max-width: 1180px;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(20px,3vw,48px);
}
:where(.pg-online) .beneficios .beneficios__texto .sec-title{ max-width:460px; }
:where(.pg-online) .beneficios .beneficios__imagen{ width:100%; aspect-ratio:1/1; }
:where(.pg-online) .beneficios .beneficios__imagen img{ width:100%; height:100%; object-fit:contain; }
@media(max-width:900px){
  :where(.pg-online) .beneficios .beneficios__contenedor{
    max-width: 680px;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 24px;
  }
}
@media(max-width:680px){
  :where(.pg-online) .beneficios .beneficios__contenedor{ grid-template-columns:1fr; gap:22px; }
  :where(.pg-online) .beneficios .beneficios__imagen{ width:min(100%,460px); justify-self:center; }
}
/* ---------- 2) Números 01–04 de las habilidades: más pequeños y difuminados ---------- */
:where(.pg-online) .habilidades__numero{
  top: 14px;
  left: 16px;
  font-size: 84px;
  line-height: .9;
  color: #e8e2fb;
  filter: blur(1.5px);
}
:where(.pg-online) .habilidades__tarjeta:hover .habilidades__numero{ color:#e8e2fb; }
/* ---------- 3) Ajustes de pantalla pequeña ---------- */
/* El botón "Enviar y hablar por WhatsApp →" lleva white-space:nowrap; en un
 celular angosto (≤427px) el texto no cabe en el formulario y se salía del
 borde. Aquí vuelve a poder envolverse. */
@media(max-width:480px){
  :where(.pg-online) .btn-cta{ white-space:normal; text-align:center; padding:16px 20px; }
}
/* Los campos con menos de 16px hacen que iOS haga zoom automático al
 enfocarlos y el visitante queda "atrapado" zoomado. */
@media(max-width:560px){
  :where(.pg-online) #cotizar .qf-field input, :where(.pg-online) .pf-field input, :where(.pg-online) .pf-field select, :where(.pg-online) .pf-field textarea{
    font-size: 16px;
  }
}
/* ============================================================
 7 · HORARIOS Y MODALIDADES DE GRUPO
 Estilo de "visual de online/horarios.html" aplicado sobre la
 estructura actual: solo cambian colores, bordes y sombras
 (mismos tamaños, tipografías y espaciados que hasta ahora).
 ============================================================ */
:where(.pg-online) #horarios .sec-title{ color:#1A1F2C; }
:where(.pg-online) #horarios .sec-title .vio{ color:#4F2EDC; }
/* ---------- Tarjeta 1: Grupos regulares (blanca) ---------- */
:where(.pg-online) #horarios .modalidades__tarjeta--regular{
  background: #fff;
  box-shadow: 0 2px 4px rgba(23,28,38,.18), 0 7px 10px rgba(23,28,38,.18);
}
:where(.pg-online) #horarios .grid.c2 .card{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
:where(.pg-online) #horarios .grid.c2 .card:hover{ transform:translateY(-4px); }
:where(.pg-online) #horarios .modalidades__tarjeta--regular:hover{
  box-shadow: 0 6px 12px rgba(23,28,38,.22), 0 16px 26px rgba(23,28,38,.20);
}
:where(.pg-online) #horarios .modalidades__tarjeta--regular .mono-tag{ color:#4F2EDC; }
:where(.pg-online) #horarios .modalidades__tarjeta--regular h3{ color:#1A1F2C; }
:where(.pg-online) #horarios .modalidades__tarjeta--regular p{ color:#5A6072; }
:where(.pg-online) #horarios .modalidades__tarjeta--regular ul li{ color:#1A1F2C; border-top:1.5px solid #4F2EDC; }
:where(.pg-online) #horarios .modalidades__tarjeta--regular ul li::before{ color:#4F2EDC; }
/* Las líneas de la lista no cruzan toda la tarjeta (mismo ancho que en horarios.html) */
:where(.pg-online) #horarios .grid.c2 .card ul{ width:74%; }
@media(max-width:1000px){
  :where(.pg-online) #horarios .grid.c2 .card ul{ width:100%; }
}
/* ---------- Tarjeta 2: Curso VIP (violeta con sombra rosa) ---------- */
:where(.pg-online) #horarios .card-featured, :where(.pg-online) #horarios .card.featured-soft{
  background: #4F2EDC;
  box-shadow: 7px 12px 0 #F8A8D4;
}
:where(.pg-online) #horarios .card.featured-soft:hover, :where(.pg-online) #horarios .card-featured:hover{
  box-shadow: 9px 15px 0 #F8A8D4;
}
:where(.pg-online) #horarios .card.featured-soft .mono-tag{ color:#fff; }
:where(.pg-online) #horarios .card.featured-soft h3{ color:#fff; }
:where(.pg-online) #horarios .card.featured-soft p{ color:rgba(255,255,255,.92); }
:where(.pg-online) #horarios .card.featured-soft ul li{ color:#fff; border-top:1.5px solid rgba(255,255,255,.9); }
:where(.pg-online) #horarios .card.featured-soft ul li::before{ color:#fff; }
/* ---------- Botones tipo píldora (mismo alto que antes) ---------- */
:where(.pg-online) #horarios .grid.c2 .card .btn{
  border-radius: 999px;
  transition: transform .25s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .25s var(--ease);
}
:where(.pg-online) #horarios .grid.c2 .card .btn:hover{ transform:translateY(-2px); }
:where(.pg-online) #horarios .modalidades__tarjeta--regular .btn-line{
  background: #fff;
  color: #1A1F2C;
  border: 2px solid #1A1F2C;
  box-shadow: none;
}
:where(.pg-online) #horarios .modalidades__tarjeta--regular .btn-line:hover{
  background: #1A1F2C;
  color: #fff;
  box-shadow: none;
}
:where(.pg-online) #horarios .card.featured-soft .btn-main{
  background: #E6007E;
  color: #fff;
  border: 2px solid #E6007E;
  box-shadow: none;
}
:where(.pg-online) #horarios .card.featured-soft .btn-main:hover{
  background: #c9006e;
  border-color: #c9006e;
  color: #fff;
  box-shadow: none;
}
/* ---------- Ilustraciones que sobresalen de cada tarjeta (como en horarios.html) ---------- */
:where(.pg-online) #horarios .grid.c2 .card{ position:relative; }
:where(.pg-online) #horarios .modalidades__ilustracion{
  position: absolute;
  top: -80px;
  width: 186px;
  aspect-ratio: 1.24/1;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
:where(.pg-online) #horarios .modalidades__tarjeta--regular .modalidades__ilustracion{ left:66px; }
:where(.pg-online) #horarios .modalidades__tarjeta--vip .modalidades__ilustracion{ right:78px; }
:where(.pg-online) #horarios .modalidades__ilustracion img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.14));
  transition: transform .35s var(--ease);
}
:where(.pg-online) #horarios .card:hover .modalidades__ilustracion img{
  transform: translateY(-4px) rotate(-2deg) scale(1.05);
}
/* Espacio extra solo dentro de esta sección para que la ilustración no choque */
:where(.pg-online) #horarios .grid.c2{ margin-top:96px; }
:where(.pg-online) #horarios .grid.c2 .modalidades__tarjeta--regular, :where(.pg-online) #horarios .grid.c2 .modalidades__tarjeta--vip{
  padding-top: 56px;
}
@media(max-width:1000px){
  :where(.pg-online) #horarios .modalidades__ilustracion{ width:112px; top:-60px; }
  :where(.pg-online) #horarios .modalidades__tarjeta--regular .modalidades__ilustracion{ left:36px; }
  :where(.pg-online) #horarios .modalidades__tarjeta--vip .modalidades__ilustracion{ right:36px; }
}
@media(max-width:880px){
  :where(.pg-online) #horarios .grid.c2{ gap:84px; margin-top:84px; }
}
@media(max-width:480px){
  :where(.pg-online) #horarios .grid.c2 .modalidades__tarjeta--regular, :where(.pg-online) #horarios .grid.c2 .modalidades__tarjeta--vip{
    padding-top: 52px;
  }
}
@media(prefers-reduced-motion:reduce){
  :where(.pg-online) #horarios .modalidades__ilustracion img{ transition:none; }
  :where(.pg-online) #horarios .card:hover .modalidades__ilustracion img{ transform:none; }
}

/* ── Ajustes que antes eran estilos en línea dentro del HTML ── */
:where(.pg-online) .beneficios .beneficios__texto .sec-title { text-align:left; margin-left:0; }
:where(.pg-online) .card .modalidades__boton { margin-top:16px; align-self:flex-start; }
:where(.pg-online) .grid.testimonios__rejilla { margin-top:40px; }
:where(.pg-online) .card .testimonios__modalidad { margin-top:6px; }
:where(.pg-online) .fp-fig > img { display:block; margin:0 auto; }
/* Índice --i que escalona el apilado de "Todo lo que incluye" */
:where(.pg-online) .incluye__tarjeta:nth-child(1) { --i:0; }
:where(.pg-online) .incluye__tarjeta:nth-child(2) { --i:1; }
:where(.pg-online) .incluye__tarjeta:nth-child(3) { --i:2; }
:where(.pg-online) .incluye__tarjeta:nth-child(4) { --i:3; }
:where(.pg-online) .incluye__tarjeta:nth-child(5) { --i:4; }
:where(.pg-online) .incluye__tarjeta:nth-child(6) { --i:5; }

/* La plantilla añadió después un borde de 2px a .card y .stat-box; online nunca lo tuvo. */
:where(.pg-online) :is(.card, .stat-box) { border:0; }
/* En online el cuerpo de la página usa blanco puro: --white (blanco roto de la cabecera) se redefine solo dentro de las secciones. */
:where(.pg-online) :is(section, header.page-hero, .cta-band) { --white:#fff; }

/* Ticket de reserva: es el mismo componente que Niños (definido en la plantilla); aquí solo cambia el color del talón. */
:where(.pg-online) .cta-inline {
  --ticket-acento: var(--violet-deep);
  --ticket-acento-hover: color-mix(in srgb, var(--violet-deep) 82%, #000);
  margin: 34px auto 0;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ 04.5  INICIO (HOME)                                          ║
   ╚══════════════════════════════════════════════════════════════╝
   body.pg-home · portada con test rápido, convenios, programas, método (recorrido horizontal), cierre con cita,
   historias en video, exámenes, "todo incluido" (recibo), historia, banda CTA, planes y pagos, diferencial,
   certificados, inscripción, recursos, preguntas, test de nivel (modal) y CTA fijo.
   Es una sección AUTÓNOMA: sus clases son propias (portada__, oferta__, paso__, recibo__…) y todo va con
   :where(.pg-home), así que no puede chocar con la plantilla ni con otras páginas. Header, topbar, menú móvil
   y pie son los de la plantilla; aquí solo se añade lo propio del home (nav compacta al hacer scroll,
   enlace "Test de nivel" del menú móvil). Los tokens que cambian respecto al sitio (blanco puro, tinta,
   línea, radio, curva) viven en .inicio y no tocan el header ni el pie. */

/* ----- Base del home ----- */
:where(.pg-home) {
  overflow-x: hidden;
}
:where(.pg-home) ::selection {
  background: var(--violet);
  color: #fff;
}
:where(.pg-home) .inicio {
  --white: #ffffff;
  --ink: #0e1e38;
  --ink-soft: #4a5872;
  --line: rgba(0,33,71,.14);
  --r: 18px;
  --ease: cubic-bezier(.22,.85,.3,1);
  --disp: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --body: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.55;
}
/* Elementos sin clase: con :where() no suben la especificidad (igual que el reset original del home) */
:where(.pg-home .inicio) :is(h1, h2, h3) {
  font-family: var(--disp);
}
:where(.pg-home .inicio) a {
  color: inherit;
}
/* El home conserva sus imágenes "en línea y sin tope de ancho"; la plantilla las pone en bloque y al 100% */
:where(.pg-home .inicio) img {
  display: inline;
  max-width: none;
}

/* ----- Header del home: lo único propio es que la nav se compacta al hacer scroll (lo activa el script) ----- */
:where(.pg-home) .nav {
  transition: padding .3s var(--ease);
}
:where(.pg-home) .nav.nav--compacta {
  padding-top: 9px;
  padding-bottom: 9px;
}
/* Alto del header en la home (su topbar es más alto): menú sticky debajo */
:where(.pg-home) .mobile-menu { top:103px; }
@media(max-width:640px){ :where(.pg-home) .mobile-menu { top:118px; } }
@media(max-width:520px){ :where(.pg-home) .mobile-menu { top:137px; } }
:where(.pg-home) .mobile-menu .mobile-menu__test {
  color: #001330;
  background: #D4FF3D;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  display: inline-block;
  margin: 4px 5vw;
}

/* dotted grid backdrop */
/* Fondo del home 100% blanco: la trama de puntos queda desactivada en las
     secciones. Los puntos guía de la lista de "incluido" se dibujan aparte. */
:where(.pg-home) .fondo-puntos {
  background-image: none;
}
/* ============ HERO ============ */
:where(.pg-home) .portada {
  position: relative;
  padding: 76px 5vw 100px;
  display: grid;
  grid-template-columns: minmax(0,1.24fr) minmax(0,1fr);
  gap: 100px;
  align-items: center;
  overflow: hidden;
}
:where(.pg-home) .portada__texto {
  position: relative;
  width: 90%;
}
:where(.pg-home) .portada__persona {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  margin-left: -30px;
  width: 330px;
  z-index: 2;
  pointer-events: none;
}
:where(.pg-home) .portada__persona img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}
@media (max-width:960px) {
  :where(.pg-home) .portada__persona {
    position: static;
    margin: 28px auto 0;
    width: 300px;
    height: 408px;
  }
  :where(.pg-home) .portada__texto {
    width: 100%;
  }
}
/* Fondo del hero 100% blanco: las manchas de color quedan desactivadas. */
:where(.pg-home) .portada__mancha {
  display: none;
}
:where(.pg-home) .portada__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet-deep);
  background: var(--violet-tint);
  border: 1.5px solid rgba(108,76,241,.35);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 28px;
}
:where(.pg-home) .portada__etiqueta i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: inicio-pulso 2s infinite;
}
@keyframes inicio-pulso {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232,68,46,.4);
  }
  55% {
    box-shadow: 0 0 0 7px rgba(232,68,46,0);
  }
}
:where(.pg-home) .portada h1 {
  font-size: clamp(40px, 5.4vw, 65px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.025em;
  color: var(--oxford);
  margin-bottom: 26px;
}
:where(.pg-home) .portada h1 .portada__resalte {
  position: relative;
  white-space: nowrap;
  color: var(--violet-deep);
}
:where(.pg-home) .portada h1 .portada__resalte::before {
  content: "";
  position: absolute;
  inset: -2px -8px -4px;
  z-index: -1;
  background: var(--violet-tint);
  border-radius: 10px;
  transform: rotate(-1.2deg) scaleX(0);
  transform-origin: left;
  animation: inicio-marca .6s .6s var(--ease) forwards;
}
@keyframes inicio-marca {
  to {
    transform: rotate(-1.2deg) scaleX(1);
  }
}
:where(.pg-home) .portada h1 .portada__tachado {
  position: relative;
  color: var(--ink);
}
:where(.pg-home) .portada h1 .portada__tachado::after {
  content: "";
  position: absolute;
  left: -2%;
  top: 54%;
  width: 0;
  height: 5px;
  background: var(--red);
  border-radius: 4px;
  transform: rotate(-2deg);
  animation: inicio-tachar .45s 1.35s var(--ease) forwards;
}
@keyframes inicio-tachar {
  to {
    width: 104%;
  }
}
:where(.pg-home) .portada p.portada__bajada {
  font-size: 17.5px;
  color: var(--ink-soft);
  max-width: 530px;
  margin-bottom: 36px;
}
:where(.pg-home) .portada p.portada__bajada b {
  color: var(--oxford);
}
:where(.pg-home) .portada__acciones {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
:where(.pg-home) .portada__enlace-suave {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.35;
}
:where(.pg-home) .portada__enlace-suave b {
  display: block;
  color: var(--violet-deep);
  font-weight: 700;
  background-image: linear-gradient(var(--violet),var(--violet));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .28s var(--ease);
}
:where(.pg-home) .portada__enlace-suave:hover b {
  background-size: 100% 2px;
}
:where(.pg-home) .boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15.5px;
  padding: 17px 30px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .2s;
}
:where(.pg-home) .boton--principal {
  background: var(--violet);
  color: #fff;
  box-shadow: 5px 5px 11px -5px var(--oxford);
}
:where(.pg-home) .boton--principal:hover {
  transform: translate(2px,2px);
  box-shadow: 2px 2px 10px var(--oxford);
  background: var(--violet-deep);
}
:where(.pg-home) .boton--principal .flecha {
  transition: transform .22s var(--ease);
}
:where(.pg-home) .boton--principal:hover .flecha {
  transform: translateX(4px);
}
:where(.pg-home) .boton--linea {
  background: transparent;
  color: var(--oxford);
  border: 2px solid var(--oxford);
  padding: 15px 28px;
}
:where(.pg-home) .boton--linea:hover {
  background: var(--oxford);
  color: #fff;
}
:where(.pg-home) .boton--linea-violeta {
  background: transparent;
  color: var(--violet-deep);
  border: 2px solid var(--violet);
  padding: 15px 28px;
}
:where(.pg-home) .boton--linea-violeta:hover {
  background: var(--violet);
  color: #fff;
}
:where(.pg-home) .cifras {
  display: flex;
  gap: 14px;
  margin-top: 52px;
  flex-wrap: wrap;
  max-width: 600px;
}
:where(.pg-home) .cifras__dato {
  background: var(--white);
  border: 2px solid var(--oxford);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 4px 4px 0 rgba(0,33,71,.12);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
:where(.pg-home) .cifras__dato:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 4px 8px 0 rgba(108,76,241,.25);
}
:where(.pg-home) .cifras__dato b {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 26px;
  color: var(--oxford);
  line-height: 1;
}
:where(.pg-home) .cifras__dato b .texto-violeta {
  color: var(--violet-deep);
}
:where(.pg-home) .cifras__dato span {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
/* quiz preview card */
/* z-index 3: la tarjeta del test va por encima de la foto del hero, así el
     estudiante y la mascota asoman por detrás sin tapar el texto. */
:where(.pg-home) .test-rapido {
  position: relative;
  z-index: 3;
  justify-self: end;
  width: min(410px,100%);
  transform: scale(.864);
  transform-origin: top right;
}
:where(.pg-home) .test-rapido__tarjeta {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 30px 30px 26px;
  box-shadow: 0px 0px 20px 2px var(--violet);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
:where(.pg-home) .test-rapido__tarjeta:hover {
  transform: rotate(0) translateY(-5px);
  box-shadow: 8px 11px 30px var(--violet);
}
:where(.pg-home) .test-rapido__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 2px dashed var(--line);
  margin-bottom: 18px;
  gap: 14px;
}
:where(.pg-home) .test-rapido__cabecera h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--oxford);
  line-height: 1.12;
  letter-spacing: -.01em;
}
:where(.pg-home) .test-rapido__cabecera h3 span {
  color: var(--violet-deep);
  background: var(--violet-tint);
  padding: 2px 10px;
  border-radius: 8px;
  display: inline-block;
  transform: rotate(-1.2deg);
  margin-top: 4px;
}
/* Sello GRATIS — estrella grande que se sale de la esquina de la tarjeta,
     late (pulse) y gira suavemente para capturar la mirada de inmediato. */
:where(.pg-home) .test-rapido__sello {
  position: absolute;
  top: -38px;
  right: -34px;
  z-index: 6;
  font-family: var(--disp);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  color: #fff;
  background: var(--red);
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 61% 12%, 76% 6%, 80% 22%, 96% 24%, 91% 39%, 100% 50%, 91% 61%, 96% 76%, 80% 78%, 76% 94%, 61% 88%, 50% 100%, 39% 88%, 24% 94%, 20% 78%, 4% 76%, 9% 61%, 0% 50%, 9% 39%, 4% 24%, 20% 22%, 24% 6%, 39% 12%);
  padding: 10px;
  filter: drop-shadow(0 10px 16px rgba(232,68,46,.45));
  animation: inicio-estrella 2.4s ease-in-out infinite;
}
:where(.pg-home) .test-rapido__sello small {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  margin-top: 2px;
  opacity: .9;
}
@keyframes inicio-estrella {
  0%, 100% {
    transform: rotate(8deg) scale(1);
  }
  50% {
    transform: rotate(-4deg) scale(1.12);
  }
}
:where(.pg-home) .test-rapido__tarjeta p.test-rapido__subtitulo {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
:where(.pg-home) .test-rapido__nivel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
:where(.pg-home) .test-rapido__nivel:last-of-type {
  border-bottom: none;
}
:where(.pg-home) .test-rapido__nivel .test-rapido__clave {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--oxford);
  font-size: 13px;
  background: var(--off);
  padding: 3px 10px;
  border-radius: 8px;
}
:where(.pg-home) .test-rapido__nivel .test-rapido__barra {
  flex: 1;
  max-width: 110px;
  height: 8px;
  background: var(--off);
  border-radius: 6px;
  overflow: hidden;
}
:where(.pg-home) .test-rapido__nivel .test-rapido__barra i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #9d85ff, var(--violet));
  width: 0;
  transition: width 1.1s var(--ease);
}
:where(.pg-home) .test-rapido__tarjeta .boton {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}
:where(.pg-home) .test-rapido__nota {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 12px;
}
:where(.pg-home) .test-rapido__etiqueta {
  position: absolute;
  top: -22px;
  left: -30px;
  z-index: 5;
  background: var(--oxford);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 11px 20px;
  border-radius: 999px;
  transform: rotate(-5deg);
}
@media (max-width:960px) {
  :where(.pg-home) .portada {
    grid-template-columns: minmax(0,1fr);
    padding-bottom: 76px;
  }
  :where(.pg-home) .test-rapido {
    justify-self: stretch;
    margin: 0 auto;
    transform-origin: top center;
  }
  :where(.pg-home) .test-rapido__etiqueta {
    left: -4px;
  }
}
/* ============ SECTION SHELL ============ */
/* scroll-margin-top: al llegar desde un enlace del menú, la sección se
     detiene por debajo del header fijo y no queda tapada su etiqueta. */
:where(.pg-home .inicio) section {
  padding: 100px 5vw;
  position: relative;
  scroll-margin-top: 118px;
}
/* Blanco alterno: se percibe como respiración, no como color.
     Va con selector de elemento + clase para ganarle al fondo propio
     de cada sección, que se declara más abajo en la hoja. */
/*section.sec-soft{ background:#FAFAFC; }*/
/* Filete de corte entre bloques temáticos. Va como elemento propio (y no
     como ::before) porque varias secciones ya usan su pseudo-elemento para
     decoración — por ejemplo el "EST. 2006" de Certificaciones. */
/*.sec-line{
    position:absolute; top:0; left:12%; right:12%; height:1px; display:block;
    background:linear-gradient(90deg, transparent, rgba(0,33,71,.16), transparent);
    pointer-events:none;
  }*/
:where(.pg-home) .etiqueta-seccion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oxford);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  background: #fff;
}
:where(.pg-home) .etiqueta-seccion .etiqueta-seccion__asterisco {
  color: var(--red);
  font-size: 14px;
}
/* Títulos y subtítulos centrados en todas las secciones (antes iban alineados
     a la izquierda salvo donde se usaba .sec-head-center). margin:0 auto centra
     el bloque de texto y text-align centra las líneas dentro de él. */
:where(.pg-home) .titulo-seccion {
  font-size: clamp(32px, 3.8vw, 50px);
  font-weight: 800;
  color: var(--oxford);
  line-height: 1.04;
  letter-spacing: -.02em;
  /*max-width:680px;*/
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
:where(.pg-home) .titulo-seccion .texto-violeta {
  color: var(--violet-deep);
}
:where(.pg-home) .intro-seccion {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 16.5px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
:where(.pg-home) .cabecera-seccion {
  text-align: center;
}
:where(.pg-home) .cabecera-seccion .titulo-seccion,
:where(.pg-home) .cabecera-seccion .intro-seccion {
  margin-left: auto;
  margin-right: auto;
}
/* ============ ENTRADA AL HACER SCROLL ============
     Con el fondo blanco, son las tarjetas las que arman la página: entran
     escalonadas, subiendo y enderezándose, con la sombra creciendo detrás. */
:where(.pg-home) .aparece {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  will-change: opacity, transform;
}
:where(.pg-home) .aparece.aparece--lista {
  opacity: 1;
  transform: none;
}
:where(.pg-home) .aparece.aparece--retraso-1 {
  transition-delay: .08s;
}
:where(.pg-home) .aparece.aparece--retraso-2 {
  transition-delay: .16s;
}
:where(.pg-home) .aparece.aparece--retraso-3 {
  transition-delay: .24s;
}
:where(.pg-home) .aparece.aparece--retraso-4 {
  transition-delay: .32s;
}
/* Las rejillas de tarjetas dan perspectiva para que la entrada tenga volumen */
:where(.pg-home) .oferta__rejilla,
:where(.pg-home) .examenes__rejilla,
:where(.pg-home) .historias__rejilla,
:where(.pg-home) .convenios__rejilla,
:where(.pg-home) .diferencial__rejilla,
:where(.pg-home) .financiacion__rejilla {
  perspective: 1300px;
}
/* Inclinación de reposo de los testimonios. Va aquí, antes del bloque de
     entrada, para que la animación de aparición la sobrescriba mientras dura
     y el hover (definido más abajo) pueda ganarle al terminar. */
:where(.pg-home) .historias__tarjeta:nth-child(1) {
  transform: rotate(-1deg);
}
:where(.pg-home) .historias__tarjeta:nth-child(2) {
  transform: rotate(.8deg) translateY(14px);
}
:where(.pg-home) .historias__tarjeta:nth-child(3) {
  transform: rotate(-.6deg);
}
/* Entrada con volumen de cada tarjeta */
:where(.pg-home) .oferta__tarjeta.aparece,
:where(.pg-home) .examenes__tarjeta.aparece,
:where(.pg-home) .historias__tarjeta.aparece,
:where(.pg-home) .inscripcion__formulario.aparece,
:where(.pg-home) .test-rapido__tarjeta.aparece,
:where(.pg-home) .recibo.aparece,
:where(.pg-home) .preguntas__item.aparece,
:where(.pg-home) .diferencial__item.aparece,
:where(.pg-home) .financiacion__item.aparece {
  opacity: 0;
  transform: translateY(52px) scale(.94) rotateX(9deg);
  transform-origin: 50% 100%;
  transition: opacity .8s var(--ease), transform .9s var(--ease), box-shadow .9s var(--ease);
}
:where(.pg-home) .oferta__tarjeta.aparece.aparece--lista,
:where(.pg-home) .examenes__tarjeta.aparece.aparece--lista,
:where(.pg-home) .historias__tarjeta.aparece.aparece--lista,
:where(.pg-home) .inscripcion__formulario.aparece.aparece--lista,
:where(.pg-home) .test-rapido__tarjeta.aparece.aparece--lista,
:where(.pg-home) .recibo.aparece.aparece--lista,
:where(.pg-home) .preguntas__item.aparece.aparece--lista,
:where(.pg-home) .diferencial__item.aparece.aparece--lista,
:where(.pg-home) .financiacion__item.aparece.aparece--lista {
  opacity: 1;
  transform: none;
}
/* Al aterrizar, los testimonios vuelven a su inclinación de reposo */
:where(.pg-home) .historias__tarjeta.aparece.aparece--lista:nth-child(1) {
  transform: rotate(-1deg);
}
:where(.pg-home) .historias__tarjeta.aparece.aparece--lista:nth-child(2) {
  transform: rotate(.8deg) translateY(14px);
}
:where(.pg-home) .historias__tarjeta.aparece.aparece--lista:nth-child(3) {
  transform: rotate(-.6deg);
}
/* …y el hover les gana a todas las anteriores por ir después */
:where(.pg-home) .historias__tarjeta.aparece.aparece--lista:hover {
  transform: rotate(0) translateY(-6px);
}
/* Los títulos de sección se enfocan al entrar */
:where(.pg-home) .titulo-seccion.aparece {
  filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
:where(.pg-home) .titulo-seccion.aparece.aparece--lista {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  :where(.pg-home) .aparece,
  :where(.pg-home) .aparece.aparece--lista,
  :where(.pg-home) .titulo-seccion.aparece {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
/* ============ MODALIDADES ============ */
:where(.pg-home) .programas {
  background: var(--white);
}
:where(.pg-home) .oferta__rejilla {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 22px;
  margin-top: 76px;
  align-items: start;
}
:where(.pg-home) .oferta__rejilla.oferta__rejilla--tres {
  grid-template-columns: repeat(3,1fr);
}
:where(.pg-home) .oferta__rejilla.oferta__rejilla--secundaria {
  grid-template-columns: repeat(2, minmax(0,420px));
  justify-content: center;
  margin-top: 22px;
}
@media (max-width:900px) {
  :where(.pg-home) .oferta__rejilla.oferta__rejilla--secundaria {
    grid-template-columns: minmax(0,420px);
  }
}
:where(.pg-home) .oferta__tarjeta {
  position: relative;
  background: #fff;
  border-radius: var(--r);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
  box-shadow: 1px 1px 10px 8px rgba(0,33,71,.10);
}
:where(.pg-home) .oferta__tarjeta:hover {
  transform: translateY(-8px) rotate(-.4deg);
  box-shadow: 8px 12px 20px rgba(108,76,241,.3);
}
:where(.pg-home) .oferta__tarjeta .oferta__imagen {
  width: calc(100% + 60px);
  margin: -34px -30px 16px;
  height: 44%;
  min-height: 210px;
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--off);
}
:where(.pg-home) .oferta__tarjeta .oferta__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada .oferta__imagen {
  border-bottom-color: rgba(255,255,255,.16);
}
:where(.pg-home) .oferta__tarjeta .oferta__etiqueta {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 6px 22px 0;
  border: 1.5px solid;
}
/* En "Programas de estudio" todas las etiquetas comparten el mismo color y se ponen azules al pasar el cursor */
:where(.pg-home) .programas .oferta__tarjeta .oferta__etiqueta,
:where(.pg-home) .programas .oferta__tarjeta .oferta__etiqueta.oferta__etiqueta--presencial,
:where(.pg-home) .programas .oferta__tarjeta .oferta__etiqueta.oferta__etiqueta--corporativo,
:where(.pg-home) .programas .oferta__tarjeta .oferta__etiqueta.oferta__etiqueta--online,
:where(.pg-home) .programas .oferta__tarjeta .oferta__etiqueta.oferta__etiqueta--ninos {
  background: var(--off);
  color: var(--oxford);
  border-color: var(--oxford);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
:where(.pg-home) .programas .oferta__tarjeta.oferta__tarjeta--destacada .oferta__etiqueta {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
:where(.pg-home) .programas .oferta__tarjeta:hover .oferta__etiqueta {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
}
/* Proporciones de imagen/texto más grandes para las tarjetas de programas */
/* Proporción fija: así las tres fotos miden igual aunque el original sea vertical */
:where(.pg-home) .programas .oferta__tarjeta .oferta__imagen {
  height: auto;
  aspect-ratio: 16/9;
  min-height: 0;
  margin-bottom: 20px;
}
:where(.pg-home) .programas .oferta__tarjeta .oferta__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(.pg-home) .programas .oferta__tarjeta h3 {
  font-size: 26px;
  margin-bottom: 6px;
}
:where(.pg-home) .programas .oferta__tarjeta .oferta__lugar {
  margin-bottom: 12px;
}
:where(.pg-home) .programas .oferta__tarjeta p {
  font-size: 15px;
}
:where(.pg-home) .oferta__etiqueta--presencial {
  background: #eaf6ef;
  color: #177a4c;
  border-color: #177a4c;
}
:where(.pg-home) .oferta__etiqueta--corporativo {
  background: #fff3ea;
  color: #b45a12;
  border-color: #b45a12;
}
:where(.pg-home) .oferta__etiqueta--online {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
}
:where(.pg-home) .oferta__etiqueta--ninos {
  background: #feeceb;
  color: var(--red);
  border-color: var(--red);
}
:where(.pg-home) .oferta__tarjeta h3 {
  font-size: 21px;
  font-weight: 800;
  color: var(--oxford);
  margin-bottom: 4px;
  letter-spacing: -.01em;
  line-height: 1.15;
}
:where(.pg-home) .oferta__tarjeta .oferta__lugar {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--violet-deep);
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: .04em;
}
:where(.pg-home) .oferta__tarjeta p {
  font-size: 16.5px;
  color: var(--ink-soft);
  margin-bottom: 0;
  flex: 1;
}
:where(.pg-home) .oferta__tarjeta p b {
  color: var(--oxford);
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada p b {
  color: #fff;
}
:where(.pg-home) .oferta__tarjeta ul {
  list-style: none;
  margin-bottom: 26px;
}
:where(.pg-home) .oferta__tarjeta ul li {
  font-size: 14px;
  padding: 9px 0 9px 28px;
  border-top: 1px solid var(--line);
  position: relative;
  font-weight: 500;
}
:where(.pg-home) .oferta__tarjeta ul li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  color: var(--violet-deep);
  font-weight: 800;
}
:where(.pg-home) .oferta__enlace {
  margin-top: auto;
  padding-top: 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--oxford);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
:where(.pg-home) .oferta__enlace .flecha {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--oxford);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform .22s var(--ease), background .2s;
}
:where(.pg-home) .oferta__enlace:hover .flecha {
  transform: translateX(5px);
  background: var(--violet);
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada {
  background: var(--oxford);
  border-color: var(--oxford);
  transform: translateY(-8px) rotate(.5deg);
  box-shadow: 5px 5px 9px 1px var(--violet);
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada:hover {
  transform: translateY(-14px) rotate(0);
  box-shadow: 8px 16px 20px var(--violet);
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada h3 {
  color: #fff;
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada p {
  color: rgba(255,255,255,.72);
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada .oferta__lugar {
  color: #B9A6FF;
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada ul li {
  color: #fff;
  border-color: rgba(255,255,255,.16);
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada ul li::before {
  color: #B9A6FF;
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada .oferta__enlace {
  color: #fff;
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada .oferta__enlace .flecha {
  background: var(--violet);
}
/* Doble salida en cada tarjeta de programa: el botón lleva directo al formulario
     de ese programa y el enlace de texto a la página completa. */
:where(.pg-home) .oferta__acciones {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
:where(.pg-home) .oferta__acciones .oferta__enlace {
  margin-top: 0;
  padding-top: 0;
}
:where(.pg-home) .oferta__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--violet);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 14.5px;
  padding: 13px 20px;
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--oxford);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
:where(.pg-home) .oferta__boton:hover {
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 var(--oxford);
}
:where(.pg-home) .oferta__boton .flecha {
  transition: transform .22s var(--ease);
}
:where(.pg-home) .oferta__boton:hover .flecha {
  transform: translateX(4px);
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada .oferta__boton {
  background: #fff;
  color: var(--oxford);
  box-shadow: 3px 3px 0 var(--violet);
}
/* Badge centrado con ícono de fuego + brillo pulsante: el plan más pedido
     tiene que saltar a la vista antes que cualquier otro elemento de la tarjeta. */
/* Cuando la tarjeta destacada no tiene imagen (planes de pago), el badge "El más pedido"
     necesita más aire arriba para no pisar la etiqueta que viene justo debajo. */
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada.oferta__tarjeta--sin-imagen {
  padding-top: 52px;
}
/* Precio ancla del plan destacado */
:where(.pg-home) .oferta__precio {
  margin: 2px 0 14px;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  font-weight: 600;
}
:where(.pg-home) .oferta__precio b {
  font-family: var(--disp);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #D4FF3D;
  margin: 0 4px;
}
:where(.pg-home) .oferta__precio .oferta__precio-periodo {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,.65);
}
:where(.pg-home) .oferta__precio .oferta__precio-usd {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: #B9A6FF;
  font-weight: 600;
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada .oferta__favorito {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FF7A3D, var(--red));
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -6px rgba(232,68,46,.7);
  animation: inicio-brillo-favorito 2.2s ease-in-out infinite;
  z-index: 3;
}
:where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada .oferta__favorito .oferta__llama {
  flex-shrink: 0;
  color: #FFD400;
  filter: drop-shadow(0 0 3px rgba(255,122,61,.9));
}
@keyframes inicio-brillo-favorito {
  0%, 100% {
    transform: translateX(-50%) rotate(-2deg) scale(1);
    box-shadow: 0 8px 20px -6px rgba(232,68,46,.7);
  }
  50% {
    transform: translateX(-50%) rotate(-2deg) scale(1.06);
    box-shadow: 0 10px 26px -4px rgba(255,122,61,.85);
  }
}
/* ===== Ola de color al pasar el cursor sobre las tarjetas de programa =====
     Dos capas curvas suben desde abajo: primero la cresta de color, detrás el
     relleno azul. La foto queda por encima, así que la ola solo se ve en el texto. */
/* ===== Diagramación pareja de las tarjetas de programa =====
     Todas ocupan el mismo ancho y se estiran a la misma altura; las dos de la
     segunda fila usan el ancho exacto de una columna de la fila de arriba. */
:where(.pg-home) .programas .oferta__rejilla {
  align-items: stretch;
}
:where(.pg-home) .programas .oferta__rejilla.oferta__rejilla--secundaria {
  grid-template-columns: repeat(2, calc((100% - 44px)/3));
  justify-content: center;
}
@media (max-width:1180px) {
  :where(.pg-home) .programas .oferta__rejilla.oferta__rejilla--secundaria {
    grid-template-columns: repeat(2, calc((100% - 22px)/2));
  }
}
@media (max-width:720px) {
  :where(.pg-home) .programas .oferta__rejilla.oferta__rejilla--secundaria {
    grid-template-columns: minmax(0,1fr);
  }
}
/* La destacada queda al mismo nivel que las demás: sin desplazamiento ni giro */
:where(.pg-home) .programas .oferta__tarjeta.oferta__tarjeta--destacada {
  transform: none;
}
/* Al pasar el cursor solo crecen un poco */
:where(.pg-home) .programas .oferta__tarjeta:hover,
:where(.pg-home) .programas .oferta__tarjeta.oferta__tarjeta--destacada:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 8px 12px 10px 3px rgba(108,76,241,.28);
}
@media (max-width:1180px) {
  :where(.pg-home) .programas .oferta__tarjeta.oferta__tarjeta--destacada {
    transform: none;
  }
}
:where(.pg-home) .programas .oferta__tarjeta {
  --acento: #FF7A3D;
  --relleno: var(--oxford);
  overflow: hidden;
}
:where(.pg-home) .programas .oferta__tarjeta.oferta__tarjeta--destacada {
  --acento: #FF7A3D;
  --relleno: var(--violet-deep);
}
/* Todas las tarjetas comparten cresta lima + relleno azul; la destacada es la excepción. */
:where(.pg-home) .oferta__ola {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  border-radius: calc(var(--r) - 3px);
}
:where(.pg-home) .oferta__ola i {
  position: absolute;
  left: -26%;
  bottom: 0;
  width: 152%;
  height: 150%;
  display: block;
  border-radius: 50% 50% 0 0 / 21% 21% 0 0;
  transform: translate3d(0,100%,0);
  transition: transform 1.6s var(--ease);
}
:where(.pg-home) .oferta__ola .oferta__ola-cresta {
  background: var(--acento);
  transition-delay: .30s;
}
:where(.pg-home) .oferta__ola .oferta__ola-fondo {
  background: var(--relleno);
  transition-delay: 0s;
}
/* Los hijos de la tarjeta van por encima de la ola */
:where(.pg-home) .programas .oferta__tarjeta > *:not(.oferta__ola) {
  position: relative;
  z-index: 2;
}
:where(.pg-home) .programas .oferta__tarjeta .oferta__imagen {
  z-index: 2;
}
@media (hover:hover) {
  :where(.pg-home) .programas .oferta__tarjeta:hover .oferta__ola .oferta__ola-cresta {
    transform: translate3d(0,-14%,0);
    transition-delay: 0s;
  }
  :where(.pg-home) .programas .oferta__tarjeta:hover .oferta__ola .oferta__ola-fondo {
    transform: translate3d(0,0,0);
    transition-delay: .32s;
  }
  /* El texto se invierte cuando la ola lo cubre */
  :where(.pg-home) .programas .oferta__tarjeta:hover h3 {
    color: #fff;
  }
  :where(.pg-home) .programas .oferta__tarjeta:hover p {
    color: rgba(255,255,255,.80);
  }
  :where(.pg-home) .programas .oferta__tarjeta:hover p b {
    color: #fff;
  }
  :where(.pg-home) .programas .oferta__tarjeta:hover .oferta__lugar {
    color: var(--acento);
  }
  :where(.pg-home) .programas .oferta__tarjeta:hover ul li {
    color: #fff;
    border-color: rgba(255,255,255,.18);
  }
  :where(.pg-home) .programas .oferta__tarjeta:hover ul li::before {
    color: var(--acento);
  }
  :where(.pg-home) .programas .oferta__tarjeta:hover .oferta__enlace {
    color: #fff;
  }
  :where(.pg-home) .programas .oferta__tarjeta:hover .oferta__enlace .flecha {
    background: var(--acento);
    color: var(--oxford);
  }
  :where(.pg-home) .programas .oferta__tarjeta:hover .oferta__etiqueta {
    background: transparent;
    color: var(--acento);
    border-color: var(--acento);
  }
  :where(.pg-home) .programas .oferta__tarjeta:hover .oferta__boton {
    background: var(--acento);
    color: var(--oxford);
    box-shadow: 3px 3px 0 rgba(255,255,255,.35);
  }
  :where(.pg-home) .programas .oferta__tarjeta h3,
  :where(.pg-home) .programas .oferta__tarjeta p,
  :where(.pg-home) .programas .oferta__tarjeta .oferta__lugar,
  :where(.pg-home) .programas .oferta__tarjeta ul li,
  :where(.pg-home) .programas .oferta__tarjeta .oferta__enlace,
  :where(.pg-home) .programas .oferta__tarjeta .oferta__etiqueta {
    transition: color .7s var(--ease) .62s, border-color .7s var(--ease) .62s, background-color .7s var(--ease) .62s;
  }
  :where(.pg-home) .programas .oferta__tarjeta .oferta__boton {
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .7s var(--ease) .62s, color .7s var(--ease) .62s;
  }
}
@media (prefers-reduced-motion:reduce) {
  :where(.pg-home) .oferta__ola i {
    transition: none;
  }
}
@media (max-width:1180px) {
  :where(.pg-home) .oferta__rejilla {
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width:720px) {
  :where(.pg-home) .oferta__rejilla {
    grid-template-columns: 1fr;
  }
}
@media (max-width:1180px) {
  :where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada {
    transform: none;
  }
  :where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada:hover {
    transform: translateY(-8px);
  }
}
/* ============ RESPONSIVE MODALIDADES ============ */
@media (max-width: 980px) {
  :where(.pg-home) .oferta__rejilla,
  :where(.pg-home) .oferta__rejilla.oferta__rejilla--tres {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 48px;
  }
  :where(.pg-home) .oferta__tarjeta {
    padding: 28px 22px 24px;
  }
  :where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada.oferta__tarjeta--sin-imagen {
    padding-top: 56px;
    /* un poco más de aire para el badge "El más pedido" */
  }
  :where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada {
    transform: none;
    /* quita el giro y el translateY en mobile */
  }
  :where(.pg-home) .oferta__tarjeta:hover,
  :where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada:hover {
    transform: translateY(-4px);
  }
  /* Precio más legible en móvil */
  :where(.pg-home) .oferta__precio b {
    font-size: 28px;
  }
  :where(.pg-home) .oferta__tarjeta h3 {
    font-size: 22px;
  }
}
@media (max-width: 480px) {
  :where(.pg-home) .oferta__tarjeta {
    padding: 24px 18px 20px;
  }
  :where(.pg-home) .oferta__tarjeta.oferta__tarjeta--destacada .oferta__favorito {
    font-size: 9.5px;
    padding: 7px 14px;
  }
  :where(.pg-home) .oferta__precio b {
    font-size: 26px;
  }
}
/* ============ MÉTODO ============ */
:where(.pg-home) .metodo {
  background: var(--white);
  position: relative;
}
/* ---- Recorrido horizontal del método ----
     El riel es alto: es la distancia de scroll que "gasta" el usuario mientras
     la sección queda fija y las tarjetas se desplazan hacia la izquierda. */
:where(.pg-home) .metodo {
  padding: 0;
}
:where(.pg-home) .metodo__riel {
  position: relative;
}
/* Sin overflow:hidden: el único que recorta es .pasos-vp. Tenerlo aquí
     obligaba a recomponer la capa fija en cada cuadro sin necesidad. */
:where(.pg-home) .metodo__fijo {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 5vw;
}
:where(.pg-home) .metodo__rejilla {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  gap: 60px;
  align-items: start;
  margin-top: 10px;
}
:where(.pg-home) .metodo__texto {
  position: static;
}
/* Ventana que recorta el riel: solo cabe una tarjeta a la vez */
:where(.pg-home) .metodo__visor {
  overflow: hidden;
  /*padding:14px 0;*/
}
:where(.pg-home) .metodo__pista {
  display: flex;
  gap: 22px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
}
/* Indicador de avance debajo de las tarjetas */
:where(.pg-home) .metodo__barra {
  margin-top: 26px;
  height: 4px;
  background: rgba(0,33,71,.12);
  border-radius: 4px;
  overflow: hidden;
  max-width: 280px;
}
/* La barra se mueve con transform (no con width): el navegador no tiene que
     recalcular el diseño en cada cuadro, así el avance va parejo con el riel. */
:where(.pg-home) .metodo__barra i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--violet);
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left center;
}
:where(.pg-home) .metodo__cuenta {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet-deep);
}
:where(.pg-home) .metodo__texto blockquote {
  margin-top: 34px;
  padding: 26px 28px;
  background: var(--violet-tint);
  border: 2px solid var(--violet);
  border-radius: var(--r);
  font-size: 17px;
  font-weight: 600;
  color: var(--oxford);
  line-height: 1.5;
  box-shadow: 5px 5px 0 rgba(108,76,241,.25);
  transform: rotate(-.6deg);
}
:where(.pg-home) .metodo__texto blockquote footer {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--violet-deep);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  padding: 0;
  border: none;
  text-align: left;
}
/* .step es el "espacio" de cada diapositiva: ocupa toda la ventana para que
     solo se vea una a la vez. No se ve, solo centra la tarjeta de adentro.
     El ancho exacto lo escribe el guion, porque depende de la columna. */
:where(.pg-home) .paso {
  flex: 0 0 var(--ancho-paso, 380px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sin JavaScript las tarjetas se ven normales. La opacidad y el desplazamiento
       los escribe el guion cuadro a cuadro según la distancia al centro, por eso
       aquí no llevan transición: si la llevaran, pelearía con el cálculo y es
       justo lo que hacía que la entrada se viera a saltos. */
  opacity: 1;
  will-change: opacity, transform;
  /* Aísla el repintado de cada tarjeta para que no arrastre al resto */
  contain: layout paint;
}
/* La tarjeta visible: proporción casi cuadrada y espacio de sobra abajo
     para agregar un botón, un dato o un enlace debajo del texto. */
/* Sin sombras: son lo más caro de dibujar y en un carrusel que se mueve
     cuadro a cuadro se nota. El relieve lo da el borde. */
:where(.pg-home) .paso__tarjeta {
  position: relative;
  width: 100%;
  max-width: 570px;
  min-height: 300px;
  background-color: #4F2EDC;
  border-radius: var(--r);
  padding: 34px 32px 36px;
  display: flex;
  flex-direction: column;
}
/* ===== Tarjeta 60 minutos – versión pulida ===== */
:where(.pg-home) .paso__tarjeta {
  background: #5B3DF5;
  border-radius: 28px;
  padding: 40px 40px 36px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}
:where(.pg-home) .paso__cuerpo {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: start;
  height: 100%;
}
/* Columna izquierda (número grande) */
:where(.pg-home) .paso__cifras {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
:where(.pg-home) .paso__cifras .paso__rotulo {
  font-family: var(--disp);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  opacity: 0.95;
}
:where(.pg-home) .paso__cifras .paso__cifra {
  font-family: var(--disp);
  font-size: 170px;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.045em;
  margin: 0;
}
:where(.pg-home) .paso__cifras .paso__medio {
  font-family: var(--disp);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}
:where(.pg-home) .paso__cifras .paso__sello {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FF4D2E;
  color: #fff;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  width: fit-content;
  margin-top: 20px;
}
:where(.pg-home) .paso__cifras .paso__sello::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}
/* Columna derecha (texto + imagen) */
:where(.pg-home) .paso__detalle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-top: 6px;
}
:where(.pg-home) .paso__detalle p {
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.93);
  margin: 0 0 10px 0;
  max-width: 280px;
  text-align: justify;
  margin-left: auto;
}
:where(.pg-home) .paso__detalle img {
  max-width: 240px;
  width: 80%;
  height: auto;
  align-self: flex-end;
  margin-left: auto;
}
/* Responsive */
@media (max-width: 700px) {
  :where(.pg-home) .paso__cuerpo {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }
  :where(.pg-home) .paso__cifras .paso__cifra {
    font-size: 96px;
  }
  :where(.pg-home) .paso__cifras .paso__sello {
    margin: 0 auto;
  }
  :where(.pg-home) .paso__detalle {
    align-items: center;
  }
  :where(.pg-home) .paso__detalle p {
    max-width: none;
    text-align: left;
  }
  :where(.pg-home) .paso__detalle img {
    margin: 0 auto;
  }
}
:where(.pg-home) .video-emergente {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
:where(.pg-home) .video-emergente__caja {
  position: relative;
  height: 70%;
  max-height: 850px;
  aspect-ratio: 4/7;
}
:where(.pg-home) .video-emergente iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
:where(.pg-home) .video-emergente__cerrar {
  position: absolute;
  right: -40px;
  top: -40px;
  background: white;
  border: 0;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 25px;
  cursor: pointer;
}
/* El borde violeta de la tarjeta activa va en una capa aparte que solo cambia
     de opacidad: así no hay que repintar la tarjeta al encenderse. */
:where(.pg-home) .paso__tarjeta::after {
  content: "";
  position: absolute;
  inset: -2.5px;
  pointer-events: none;
  border: 2.5px solid var(--violet);
  border-radius: var(--r);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
:where(.pg-home) .paso.paso--activo .paso__tarjeta::after {
  opacity: 1;
}
:where(.pg-home) .paso__numero {
  font-family: var(--disp);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--white);
  margin-bottom: 16px;
}
:where(.pg-home) .paso h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.25;
}
:where(.pg-home) .paso p {
  font-size: 15px;
  color: var(--white);
}
/* Cualquier cosa que se agregue al final de la tarjeta queda pegada abajo */
:where(.pg-home) .paso__tarjeta > :last-child {
  margin-bottom: 0;
}
:where(.pg-home) .paso__extra {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
/* En móvil no se secuestra el scroll: las tarjetas vuelven a apilarse */
@media (max-width:960px) {
  :where(.pg-home) .metodo {
    padding: 100px 0;
  }
  :where(.pg-home) .metodo__fijo {
    position: static;
    min-height: 0;
    padding: 0 5vw;
  }
  :where(.pg-home) .metodo__riel {
    height: auto !important;
  }
  :where(.pg-home) .metodo__rejilla {
    grid-template-columns: minmax(0,1fr);
    gap: 40px;
  }
  :where(.pg-home) .metodo__visor {
    overflow: visible;
    margin-right: 0;
  }
  :where(.pg-home) .metodo__pista {
    flex-direction: column;
    width: auto;
    transform: none !important;
  }
  :where(.pg-home) .paso {
    flex: none;
    opacity: 1;
    transform: none;
    display: block;
  }
  :where(.pg-home) .paso__tarjeta {
    max-width: none;
    min-height: 0;
  }
  :where(.pg-home) .metodo__barra,
  :where(.pg-home) .metodo__cuenta {
    display: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  :where(.pg-home) .metodo__fijo {
    position: static;
    min-height: 0;
  }
  :where(.pg-home) .metodo__riel {
    height: auto !important;
  }
  :where(.pg-home) .metodo__pista {
    transform: none !important;
  }
  :where(.pg-home) .paso {
    opacity: 1;
    transform: none;
  }
}
/* ============ CERTIFICACIONES ============ */
/* Certificaciones sobre blanco: son las tarjetas, con su borde azul y su
     sombra, las que dan estructura a la sección. */
:where(.pg-home) .examenes {
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
}
:where(.pg-home) .examenes .etiqueta-seccion {
  background: var(--violet-tint);
  color: var(--violet-deep);
  border-color: rgba(108,76,241,.35);
}
:where(.pg-home) .examenes .titulo-seccion {
  color: var(--oxford);
}
:where(.pg-home) .examenes .titulo-seccion .texto-violeta {
  color: var(--violet);
}
:where(.pg-home) .examenes .intro-seccion {
  color: var(--ink-soft);
}
:where(.pg-home) .examenes::before {
  font-family: var(--disp);
  font-size: 170px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(108,76,241,.14);
  pointer-events: none;
}
:where(.pg-home) .examenes__rejilla {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
  margin-top: 56px;
}
:where(.pg-home) .examenes__tarjeta {
  border-radius: var(--r);
  background: #fff;
  position: relative;
  box-shadow: 6px 6px 24px rgba(0,33,71,.10);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s var(--ease);
}
:where(.pg-home) .examenes__tarjeta:hover {
  transform: translateY(-6px);
  border-color: var(--violet);
  box-shadow: 8px 10px 0 rgba(108,76,241,.28);
}
:where(.pg-home) .examenes__tarjeta .examenes__punto {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
}
:where(.pg-home) .examenes__tarjeta .examenes__examen {
  font-family: var(--disp);
  font-size: 32px;
  font-weight: 800;
  color: var(--oxford);
  margin-bottom: 2px;
}
:where(.pg-home) .examenes__tarjeta .examenes__entidad {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet-deep);
  margin-bottom: 18px;
  font-weight: 600;
  margin-right: 28px;
  margin-left: 28px;
  margin-top: 18px;
}
:where(.pg-home) .examenes__tarjeta .examenes__entidad .examenes__sede {
  color: var(--ink-soft);
  font-weight: 500;
}
:where(.pg-home) .examenes__tarjeta p {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 20px;
  margin-right: 28px;
  margin-left: 28px;
}
:where(.pg-home) .examenes__tarjeta a {
  font-size: 14px;
  font-weight: 700;
  color: var(--violet-deep);
  text-decoration: none;
  margin-right: 28px;
  margin-left: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
}
:where(.pg-home) .examenes__tarjeta a:hover {
  color: var(--oxford);
  text-decoration: underline;
}
:where(.pg-home) .separacion-superior {
  margin-top: 18px;
}
:where(.pg-home) .separacion-inferior {
  margin-bottom: 18px;
}
@media (max-width:900px) {
  :where(.pg-home) .examenes__rejilla {
    grid-template-columns: 1fr;
  }
  :where(.pg-home) .separacion-inferior {
    margin-bottom: 0;
  }
  :where(.pg-home) .separacion-superior {
    margin-top: 0;
  }
  :where(.pg-home) .oculto-movil {
    display: none;
  }
}
@media (min-width:901px) and (max-width:1180px) {
  :where(.pg-home) .examenes__rejilla {
    grid-template-columns: repeat(2,1fr);
  }
}
/* ============ TODO INCLUIDO — "tiquete de matrícula" ============
     En vez de una lista genérica con chulos, todo lo incluido se presenta
     como un recibo de compra: cada ítem con su "precio" ($0) y el total
     de extras en $0. La idea que queda en la cabeza: todo esto ya está pago. */
:where(.pg-home) .incluido {
  background: var(--white);
}
:where(.pg-home) .incluido__rejilla {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 56px;
  align-items: start;
  margin-top: 20px;
}
:where(.pg-home) .incluido__texto .titulo-seccion,
:where(.pg-home) .incluido__texto .intro-seccion {
  text-align: left;
  margin-left: 0;
}
:where(.pg-home) .incluido__sello {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  border: 2.5px dashed var(--red);
  border-radius: 10px;
  padding: 12px 20px;
  transform: rotate(-3deg);
}
:where(.pg-home) .recibo {
  position: relative;
  background: #fff;
  max-width: 520px;
  justify-self: center;
  width: 100%;
  border: 2.5px solid var(--oxford);
  border-radius: 4px;
  padding: 10px 34px 5px;
  transform: rotate(1.4deg);
  box-shadow: 10px 12px 0 var(--violet);
  font-family: var(--mono);
  transition: transform .35s var(--ease);
}
:where(.pg-home) .recibo:hover {
  transform: rotate(0);
}
/* borde dentado inferior, como recibo recién impreso */
:where(.pg-home) .recibo::after {
  content: "";
  position: absolute;
  left: -2.5px;
  right: -2.5px;
  bottom: -14px;
  height: 14px;
  background: linear-gradient(-45deg, transparent 70%, #fff 72%) 0 0/16px 14px repeat-x, linear-gradient(45deg, transparent 70%, #fff 72%) 0 0/16px 14px repeat-x;
  filter: drop-shadow(0 3px 0 var(--oxford));
}
:where(.pg-home) .recibo__cabecera {
  text-align: center;
  border-bottom: 2px dashed var(--line);
  padding-bottom: 10px;
  margin-bottom: 0px;
}
:where(.pg-home) .recibo__cabecera b {
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--oxford);
  display: block;
  text-transform: uppercase;
}
:where(.pg-home) .recibo__cabecera span {
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: .08em;
}
:where(.pg-home) .recibo ul {
  list-style: none;
}
:where(.pg-home) .recibo li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
  padding: 8.5px 0;
  font-weight: 601;
}
:where(.pg-home) .recibo li .recibo__puntos {
  flex: 1;
  border-bottom: 2px dotted rgba(0,33,71,.25);
  transform: translateY(-3px);
}
:where(.pg-home) .recibo li .recibo__precio {
  color: var(--violet-deep);
  font-weight: 600;
  white-space: nowrap;
  font-size: 12px;
}
:where(.pg-home) .recibo li .recibo__precio s {
  color: var(--ink-soft);
  opacity: .6;
  margin-right: 5px;
}
:where(.pg-home) .recibo__total {
  border-top: 2.5px solid var(--oxford);
  margin-top: 12px;
  padding-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--oxford);
  text-transform: uppercase;
  letter-spacing: .06em;
}
:where(.pg-home) .recibo__total .recibo__puntos {
  flex: 1;
  border-bottom: 2px dotted rgba(0,33,71,.3);
  transform: translateY(-3px);
}
:where(.pg-home) .recibo__total .recibo__cero {
  font-family: var(--disp);
  font-size: 30px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: -.02em;
}
:where(.pg-home) .recibo__pie {
  text-align: center;
  margin-top: 0px;
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: .1em;
  text-transform: uppercase;
}
:where(.pg-home) .incluido__nota {
  margin-top: 26px;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 620px;
  font-family: var(--body);
}
@media (max-width:960px) {
  :where(.pg-home) .incluido__rejilla {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  :where(.pg-home) .incluido__texto .titulo-seccion,
  :where(.pg-home) .incluido__texto .intro-seccion {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  :where(.pg-home) .incluido__sello {
    display: block;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }
  :where(.pg-home) .recibo {
    padding: 24px 20px 22px;
  }
  :where(.pg-home) .recibo li {
    font-size: 11.5px;
  }
}
/* ============ TESTIMONIOS ============ */
:where(.pg-home) .historias {
  background: var(--white);
}
/* Insignia de reseñas de Google — el equivalente honesto y local al Trustpilot
     que usan los grandes. Usa tu calificación real de Google Business. */
:where(.pg-home) .insignia-google {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  background: var(--white);
  border: 2px solid var(--oxford);
  border-radius: 999px;
  padding: 12px 24px;
  box-shadow: 5px 5px 0 var(--violet);
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
:where(.pg-home) .insignia-google:hover {
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 var(--violet);
}
/* Pantallas estrechas: la insignia baja de línea en vez de salirse */
@media (max-width:400px) {
  :where(.pg-home) .insignia-google {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    padding: 12px 18px;
    border-radius: 28px;
  }
}
:where(.pg-home) .insignia-google .insignia-google__logo {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
}
:where(.pg-home) .insignia-google .insignia-google__logo .insignia-google__letra--azul {
  color: #4285F4;
}
:where(.pg-home) .insignia-google .insignia-google__logo .insignia-google__letra--roja {
  color: #EA4335;
}
:where(.pg-home) .insignia-google .insignia-google__logo .insignia-google__letra--amarilla {
  color: #FBBC05;
}
:where(.pg-home) .insignia-google .insignia-google__logo .insignia-google__letra--verde {
  color: #34A853;
}
:where(.pg-home) .insignia-google .insignia-google__nota {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 30px;
  color: var(--oxford);
  line-height: 1;
}
:where(.pg-home) .insignia-google .insignia-google__estrellas {
  color: #F5A623;
  font-size: 30px;
  letter-spacing: 2px;
}
:where(.pg-home) .insignia-google .insignia-google__texto {
  font-size: 20.5px;
  color: var(--ink-soft);
  font-weight: 600;
  line-height: 1.3;
}
:where(.pg-home) .insignia-google .insignia-google__divisor {
  width: 1.5px;
  align-self: stretch;
  background: var(--line);
}
@media (max-width:520px) {
  :where(.pg-home) .insignia-google {
    gap: 12px;
    padding: 12px 18px;
  }
  :where(.pg-home) .insignia-google .insignia-google__texto {
    font-size: 11.5px;
  }
}
:where(.pg-home) .historias__rejilla {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
  margin-top: 38px;
}
:where(.pg-home) .historias__tarjeta {
  background: #fff;
  border: 2px solid var(--oxford);
  border-radius: var(--r);
  padding: 38px 28px 28px;
  position: relative;
  box-shadow: 5px 5px 0 rgba(0,33,71,.10);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
:where(.pg-home) .historias__tarjeta:nth-child(1) {
  transform: rotate(-1deg);
}
:where(.pg-home) .historias__tarjeta:nth-child(2) {
  transform: rotate(.8deg) translateY(14px);
}
:where(.pg-home) .historias__tarjeta:nth-child(3) {
  transform: rotate(-.6deg);
}
:where(.pg-home) .historias__tarjeta:hover {
  transform: rotate(0) translateY(-6px);
  box-shadow: 7px 10px 0 rgba(108,76,241,.28);
}
:where(.pg-home) .historias__tarjeta .historias__chincheta {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.18);
}
/* Video-testimonio: reemplaza el poster (foto de portada) y el <source> por tu
     archivo real. El navegador muestra controles nativos (play, volumen, pantalla
     completa) — no hace falta tocar nada más para que funcione. */
:where(.pg-home) .historias__video {
  position: relative;
  border: 2px solid var(--oxford);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--oxford-deep);
  margin-bottom: 20px;
  box-shadow: 4px 4px 0 rgba(0,33,71,.12);
  cursor: pointer;
}
:where(.pg-home) .historias__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
/* La portada se toma automáticamente de YouTube; el iframe solo se carga al
     hacer clic, para que la página no se vuelva lenta con 3 reproductores. */
:where(.pg-home) .historias__video img.historias__miniatura {
  width: 100%;
  height: 100%;
  object-fit: none;
  display: block;
}
:where(.pg-home) .historias__video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
:where(.pg-home) .historias__video .historias__reproducir {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0,19,48,.15), rgba(0,19,48,.55));
  transition: background .25s var(--ease);
}
:where(.pg-home) .historias__video:hover .historias__reproducir {
  background: linear-gradient(180deg, rgba(0,19,48,.05), rgba(0,19,48,.45));
}
:where(.pg-home) .historias__video .historias__reproducir svg {
  width: 62px;
  height: 44px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
  transition: transform .25s var(--ease);
}
:where(.pg-home) .historias__video:hover .historias__reproducir svg {
  transform: scale(1.12);
}
:where(.pg-home) .historias__video .historias__video-etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  pointer-events: none;
}
:where(.pg-home) .historias__video .historias__video-etiqueta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: inicio-pulso 2s infinite;
}
:where(.pg-home) .historias__persona {
  display: flex;
  align-items: center;
  gap: 14px;
}
:where(.pg-home) .historias__avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--violet-tint);
  color: var(--violet-deep);
  border: 2px solid var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
:where(.pg-home) .historias__persona b {
  display: block;
  font-size: 14px;
}
:where(.pg-home) .historias__persona span {
  font-size: 12px;
  color: var(--ink-soft);
}
:where(.pg-home) .historias__modalidad {
  position: absolute;
  bottom: 22px;
  right: 20px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oxford);
  background: var(--off);
  border: 1.5px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
}
@media (max-width:960px) {
  :where(.pg-home) .historias__rejilla {
    grid-template-columns: 1fr;
  }
  :where(.pg-home) .historias__tarjeta:nth-child(n) {
    transform: none;
  }
}
/* ============ LOGOS / EMPRESAS ============ */
:where(.pg-home) .convenios {
  background: var(--white);
  padding-top: 84px;
  padding-bottom: 92px;
}
:where(.pg-home) .convenios__cabecera {
  text-align: center;
  margin-bottom: 52px;
}
:where(.pg-home) .convenios__cabecera .titulo-seccion {
  margin: 0 auto;
}
:where(.pg-home) .convenios__cabecera .convenios__icono {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--violet-tint);
  border: 2px solid var(--violet);
  color: var(--violet-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
  transform: rotate(-4deg);
  box-shadow: 4px 4px 0 rgba(108,76,241,.25);
}
:where(.pg-home) .convenios__marquesina {
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
:where(.pg-home) .convenios__pista {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: inicio-marquesina 38s linear infinite;
}
/* .logo-marquee:hover .logo-track{ animation-play-state:paused; } */
@keyframes inicio-marquesina {
  to {
    transform: translateX(-50%);
  }
}
:where(.pg-home) .convenios__logo {
  background: #fff;
  /*border:2px solid var(--line);*/
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  flex-shrink: 0;
  width: 148px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
:where(.pg-home) .convenios__logo:hover {
  transform: translateY(-6px) rotate(-.6deg);
  /*border-color:var(--oxford);
    box-shadow:5px 7px 0 rgba(108,76,241,.25);*/
}
:where(.pg-home) .convenios__arte {
  flex: 1;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 10px;
}
:where(.pg-home) .convenios__arte img {
  max-height: 100px;
  max-width: 82%;
  object-fit: contain;
}
:where(.pg-home) .convenios__marca {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.02em;
}
:where(.pg-home) .convenios__arte small {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.35;
}
:where(.pg-home) .convenios__barra {
  padding: 8px 8px;
  font-weight: 700;
  font-size: 10.5px;
  color: #fff;
  line-height: 1.25;
}
:where(.pg-home) .convenios__barra.convenios__barra--azul {
  background: var(--oxford);
}
:where(.pg-home) .convenios__barra.convenios__barra--violeta {
  background: var(--violet);
}
/* ============ NOSOTROS ============ */
:where(.pg-home) .historia {
  background: var(--white);
  overflow: hidden;
}
:where(.pg-home) .historia__rejilla {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.2fr);
  gap: 40px;
  align-items: center;
}
:where(.pg-home) .historia__flotantes {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 620px;
  height: 980px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
:where(.pg-home) .historia__flotante {
  position: absolute;
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 8px 8px 0 rgba(0,33,71,.14);
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite, infinite;
  animation-name: inicio-oscilar, inicio-deriva-izq-der;
}
:where(.pg-home) .historia__flotante .historia__flotante-imagen {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  background-color: var(--violet-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--violet-deep);
  text-align: center;
  padding: 10px;
  line-height: 1.4;
  font-weight: 600;
}
:where(.pg-home) .historia__flotante--1 {
  top: 0px;
  width: 250px;
  height: 190px;
  --r: -5deg;
  animation-duration: 6.4s,23s;
  animation-delay: 0s,0s;
}
:where(.pg-home) .historia__flotante--2 {
  top: 210px;
  width: 228px;
  height: 174px;
  --r: 4deg;
  animation-duration: 5.8s,27s;
  animation-delay: .6s,4s;
  animation-name: inicio-oscilar, inicio-deriva-der-izq;
}
:where(.pg-home) .historia__flotante--3 {
  top: 405px;
  width: 240px;
  height: 182px;
  --r: -3deg;
  animation-duration: 7s,25s;
  animation-delay: 1.1s,8s;
}
:where(.pg-home) .historia__flotante--4 {
  top: 600px;
  width: 220px;
  height: 168px;
  --r: 3deg;
  animation-duration: 6.1s,29s;
  animation-delay: .3s,2s;
  animation-name: inicio-oscilar, inicio-deriva-der-izq;
}
:where(.pg-home) .historia__flotante--5 {
  top: 790px;
  width: 200px;
  height: 154px;
  --r: -2deg;
  animation-duration: 6.7s,21s;
  animation-delay: .9s,6s;
}
@keyframes inicio-oscilar {
  0%, 100% {
    transform: translateY(0) rotate(var(--r,0deg));
  }
  50% {
    transform: translateY(-9px) rotate(var(--r,0deg));
  }
}
/* Entra por la izquierda, sale por la derecha */
@keyframes inicio-deriva-izq-der {
  0% {
    left: -220px;
  }
  100% {
    left: calc(100% + 220px);
  }
}
/* Entra por la derecha, sale por la izquierda */
@keyframes inicio-deriva-der-izq {
  0% {
    left: calc(100% + 220px);
  }
  100% {
    left: -220px;
  }
}
@media (max-width:960px) {
  :where(.pg-home) .historia__rejilla {
    grid-template-columns: 1fr;
  }
  :where(.pg-home) .historia__flotantes {
    height: auto;
    max-width: 420px;
    margin: 0 auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  /* En móvil el carrusel no aporta (poco espacio horizontal): se muestran fijas en grilla */
  :where(.pg-home) .historia__flotante {
    position: static !important;
    animation: none !important;
    width: 100% !important;
    height: 170px !important;
  }
  :where(.pg-home) .historia__flotante--5 {
    grid-column: 1 / -1;
    justify-self: center;
    width: 60% !important;
  }
}
/* ============ PAGOS ============ */
:where(.pg-home) .planes {
  background: var(--white);
}
:where(.pg-home) .financiacion {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-top: 44px;
}
:where(.pg-home) .financiacion__item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--violet-tint);
  border: 2px solid var(--violet);
  border-radius: 16px;
  padding: 15px 0px;
}
:where(.pg-home) .financiacion__icono {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--oxford);
  color: #fff;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.pg-home) .financiacion__item b {
  display: block;
  font-size: 15px;
  color: var(--oxford);
  font-weight: 800;
}
:where(.pg-home) .financiacion__item span {
  font-size: 12.5px;
  color: var(--ink-soft);
}
@media (max-width:900px) {
  :where(.pg-home) .financiacion {
    grid-template-columns: 1fr;
  }
}
/* ============ BLOG ============ */
:where(.pg-home) .recursos-blog {
  background: var(--white);
}
:where(.pg-home) .diferencial {
  background: var(--white);
}
:where(.pg-home) .diferencial__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 72px;
  max-width: 1040px;
  margin: 56px auto 0;
  border-bottom: 1.5px solid var(--line);
}
:where(.pg-home) .diferencial__item {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 21px 6px;
  border-top: 1.5px solid var(--line);
  transition: padding-left .28s var(--ease), background .28s;
}
:where(.pg-home) .diferencial__item:hover {
  padding-left: 18px;
  background: rgba(108,76,241,.05);
}
:where(.pg-home) .diferencial__item .diferencial__numero {
  font-family: var(--disp);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--violet);
  flex-shrink: 0;
  min-width: 42px;
  transition: color .28s;
}
:where(.pg-home) .diferencial__item:hover .diferencial__numero {
  color: var(--violet);
}
:where(.pg-home) .diferencial__item h3 {
  font-family: var(--disp);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--oxford);
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0;
}
:where(.pg-home) .diferencial__item .diferencial__item-vivo {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  margin-left: 9px;
  animation: inicio-pulso 2s infinite;
}
@media (max-width:760px) {
  :where(.pg-home) .diferencial__lista {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* ============ CERTIFICADOS POR EXCELENCIA (sellos de calidad) ============ */
:where(.pg-home) .certificados {
  background: var(--white);
}
:where(.pg-home) .certificados__rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 52px;
}
:where(.pg-home) .certificados__sello {
  width: 210px;
  height: 150px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: .02em;
  line-height: 1.4;
}
@media (max-width:600px) {
  :where(.pg-home) .certificados__sello {
    width: 120px;
    height: 120px;
    font-size: 11px;
  }
}
/* ============ TEST DE NIVEL (popup) ============*/
:where(.pg-home) .test-nivel {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,19,48,.72);
  backdrop-filter: blur(4px);
}
:where(.pg-home) .test-nivel:target,
:where(.pg-home) .test-nivel.test-nivel--abierto {
  display: flex;
}
:where(.pg-home) .test-nivel__caja {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: 24px;
  box-shadow: 10px 12px 0 var(--violet);
  position: relative;
  overflow: hidden;
  animation: inicio-test-entra .35s var(--ease);
}
@keyframes inicio-test-entra {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
:where(.pg-home) .test-nivel__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  background: var(--oxford);
}
:where(.pg-home) .test-nivel__cabecera .test-nivel__vivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
:where(.pg-home) .test-nivel__cabecera .test-nivel__vivo i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: inicio-pulso 2s infinite;
}
:where(.pg-home) .test-nivel__cerrar {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  font-family: var(--body);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
:where(.pg-home) .test-nivel__cerrar:hover {
  background: var(--red);
}
:where(.pg-home) .test-nivel__progreso {
  height: 7px;
  background: var(--off);
  overflow: hidden;
}
:where(.pg-home) .test-nivel__progreso i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #9d85ff, var(--violet));
  transition: width .5s var(--ease);
}
:where(.pg-home) .test-nivel__cuerpo {
  padding: 30px 32px 36px;
  min-height: 260px;
  max-height: 70vh;
  overflow-y: auto;
}
:where(.pg-home) .test-nivel__pregunta {
  font-family: var(--disp);
  font-size: clamp(19px,2.2vw,24px);
  font-weight: 700;
  color: var(--oxford);
  margin-bottom: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
:where(.pg-home) .test-nivel__opciones {
  display: grid;
  gap: 11px;
}
:where(.pg-home) .test-nivel__opcion {
  text-align: left;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  transition: border-color .18s, background .18s, transform .15s var(--ease), box-shadow .18s;
}
:where(.pg-home) .test-nivel__opcion:hover {
  border-color: var(--violet);
  background: var(--violet-tint);
  transform: translateX(5px);
  box-shadow: 3px 3px 0 rgba(108,76,241,.3);
}
:where(.pg-home) .test-nivel__opcion .test-nivel__tecla {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--violet-deep);
  background: var(--off);
  border-radius: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
:where(.pg-home) .test-nivel__resultado {
  text-align: center;
  padding: 8px 0;
}
:where(.pg-home) .test-nivel__resultado .test-nivel__nivel-grande {
  font-family: var(--disp);
  font-size: 76px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--oxford);
  line-height: 1;
  position: relative;
  display: inline-block;
}
:where(.pg-home) .test-nivel__resultado .test-nivel__nivel-grande::after {
  content: "✶";
  position: absolute;
  top: -6px;
  right: -28px;
  font-size: 24px;
  color: var(--red);
}
:where(.pg-home) .test-nivel__resultado .test-nivel__nivel-nombre {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--violet-deep);
  margin: 10px 0 16px;
}
:where(.pg-home) .test-nivel__resultado p {
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 420px;
  margin: 0 auto 24px;
}
:where(.pg-home) .test-nivel__reiniciar {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
  font-family: var(--body);
}
@media (max-width:560px) {
  :where(.pg-home) .test-nivel__cabecera {
    padding: 15px 18px;
  }
  :where(.pg-home) .test-nivel__cuerpo {
    padding: 24px 18px 28px;
  }
}
/* ============ CTA BANDS ============ */
:where(.pg-home) .banda-cta {
  margin: 0 5vw;
  padding: 34px 40px;
  border-radius: 22px;
  background: var(--oxford);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  transform: translateY(50%);
  z-index: 10;
  box-shadow: 8px 10px 0 rgba(108,76,241,.4);
  border: 2.5px solid var(--oxford);
}
:where(.pg-home) .banda-cta::before {
  content: "✶";
  position: absolute;
  right: -14px;
  top: -26px;
  font-family: var(--disp);
  font-size: 110px;
  font-weight: 800;
  color: rgba(108,76,241,.35);
  pointer-events: none;
}
:where(.pg-home) .banda-cta h3 {
  font-size: clamp(19px,2.2vw,25px);
  font-weight: 800;
  letter-spacing: -.01em;
  max-width: 520px;
  line-height: 1.2;
}
:where(.pg-home) .banda-cta h3 span {
  color: #B9A6FF;
}
:where(.pg-home) .banda-cta p {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}
:where(.pg-home) .banda-cta__acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
:where(.pg-home) .banda-cta .boton {
  font-size: 14.5px;
  padding: 14px 24px;
}
:where(.pg-home) .boton--blanco {
  background: #fff;
  color: var(--oxford);
  box-shadow: 4px 4px 0 var(--violet);
}
:where(.pg-home) .boton--blanco:hover {
  transform: translate(2px,2px);
  box-shadow: 1px 1px 0 var(--violet);
}
:where(.pg-home) .banda-cta__separador {
  height: 70px;
  background: var(--white);
}
@media (max-width:720px) {
  :where(.pg-home) .banda-cta {
    padding: 28px 24px;
    transform: translateY(40%);
  }
}
/* ============ INSCRIPCIÓN ============ */
:where(.pg-home) .inscripcion {
  background: var(--white);
}
:where(.pg-home) .inscripcion__rejilla {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 64px;
  align-items: start;
  margin-top: 10px;
}
:where(.pg-home) .inscripcion__texto {
  position: sticky;
  top: 120px;
}
:where(.pg-home) .inscripcion__texto ul {
  list-style: none;
  margin-top: 30px;
}
:where(.pg-home) .inscripcion__texto ul li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink);
}
:where(.pg-home) .inscripcion__texto ul li .inscripcion__paso-numero {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--violet-deep);
  background: var(--violet-tint);
  border-radius: 8px;
  padding: 4px 9px;
  flex-shrink: 0;
  margin-top: 2px;
}
:where(.pg-home) .inscripcion__formulario {
  background: #fff;
  border: 2.5px solid var(--oxford);
  border-radius: 24px;
  padding: 38px 36px;
  box-shadow: 10px 12px 0 var(--violet);
}
:where(.pg-home) .inscripcion__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
:where(.pg-home) .inscripcion__campo {
  margin-bottom: 18px;
}
:where(.pg-home) .inscripcion__campo label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oxford);
  margin-bottom: 8px;
}
:where(.pg-home) .inscripcion__campo label em {
  color: var(--red);
  font-style: normal;
}
:where(.pg-home) .inscripcion__campo input,
:where(.pg-home) .inscripcion__campo select {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--body);
  font-size: 15px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  outline: none;
  appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
:where(.pg-home) .inscripcion__campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23002147' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
:where(.pg-home) .inscripcion__campo input:focus,
:where(.pg-home) .inscripcion__campo select:focus {
  border-color: var(--violet);
  box-shadow: 3px 3px 0 rgba(108,76,241,.25);
}
:where(.pg-home) .inscripcion__campo input.es-invalido {
  border-color: var(--red);
}
:where(.pg-home) .inscripcion__formulario .boton {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
:where(.pg-home) .inscripcion__nota {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 14px;
}
:where(.pg-home) .inscripcion__consentimiento {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
:where(.pg-home) .inscripcion__consentimiento input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--violet);
  flex-shrink: 0;
  cursor: pointer;
}
:where(.pg-home) .inscripcion__consentimiento a {
  color: var(--violet-deep);
  font-weight: 600;
}
:where(.pg-home) .inscripcion__consentimiento em {
  color: var(--red);
  font-style: normal;
}
:where(.pg-home) .inscripcion__consentimiento.es-invalido {
  color: var(--red);
}
:where(.pg-home) .inscripcion__consentimiento.es-invalido a {
  color: var(--red);
}
:where(.pg-home) .inscripcion__ok {
  display: none;
  text-align: center;
  background: #eaf6ef;
  border: 2px solid #177a4c;
  color: #115c38;
  border-radius: 12px;
  padding: 14px;
  font-weight: 600;
  font-size: 14px;
  margin-top: 16px;
}
:where(.pg-home) .inscripcion__ok.inscripcion__ok--visible {
  display: block;
}
@media (max-width:960px) {
  :where(.pg-home) .inscripcion__rejilla {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  :where(.pg-home) .inscripcion__texto {
    position: static;
  }
  :where(.pg-home) .inscripcion__fila {
    grid-template-columns: 1fr;
  }
  :where(.pg-home) .inscripcion__formulario {
    padding: 30px 22px;
  }
}
/* ============ FAQ ============ */
:where(.pg-home) .preguntas {
  background: var(--white);
}
:where(.pg-home) .preguntas__lista {
  margin: 48px 15%;
}
:where(.pg-home) .preguntas__item {
  border: 2px solid var(--line);
  border-radius: 16px;
  margin-bottom: 14px;
  background: #fff;
  transition: border-color .25s, box-shadow .25s;
}
:where(.pg-home) .preguntas__item.preguntas__item--abierta {
  border-color: var(--violet);
  box-shadow: 4px 4px 0 rgba(108,76,241,.22);
}
:where(.pg-home) .preguntas__pregunta {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  font-family: var(--disp);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--oxford);
}
:where(.pg-home) .preguntas__pregunta .preguntas__mas {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--oxford);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: var(--body);
  font-weight: 500;
  flex-shrink: 0;
  transition: transform .3s var(--ease), background .25s;
}
:where(.pg-home) .preguntas__item.preguntas__item--abierta .preguntas__mas {
  transform: rotate(45deg);
  background: var(--violet);
}
:where(.pg-home) .preguntas__respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease);
}
:where(.pg-home) .preguntas__respuesta p {
  padding: 0 24px 22px;
  color: var(--ink-soft);
  font-size: 14.5px;
}
/* ========================================================= NUEVAS SECCIONES: Nosotros + Diferenciador (lo demás ya está en el index) ========================================================= */
/* Tags de sección (el index no los tiene) */
:where(.pg-home) .rotulo-seccion {
  display: block;
  text-align: center;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
:where(.pg-home) .rotulo-seccion i {
  font-style: normal;
  color: var(--violet);
  font-weight: 700;
}
:where(.pg-home) .rotulo-seccion::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--violet);
  opacity: .35;
  margin: 12px auto 0;
}
:where(.pg-home) .filete-seccion {
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(0,33,71,.16), transparent);
  pointer-events: none;
}
/* ============ NOSOTROS ============ */
:where(.pg-home) .historia {
  background: var(--white);
  overflow: hidden;
  position: relative;
  padding: 100px 5vw;
}
:where(.pg-home) .historia__dispersion {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.pg-home) .historia__texto {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  text-align: center;
}
:where(.pg-home) .historia__texto .titulo-seccion,
:where(.pg-home) .historia__texto .intro-seccion {
  margin-left: auto;
  margin-right: auto;
}
:where(.pg-home) .historia__texto .cifras {
  justify-content: center;
}
:where(.pg-home) .historia__foto {
  position: absolute;
  z-index: 1;
  width: 230px;
  background: #fff;
  border: 3px solid var(--oxford);
  border-radius: 18px;
  padding: 9px;
  box-shadow: 10px 12px 0 rgba(0,33,71,.14);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  transform-origin: center;
  will-change: transform, opacity;
}
:where(.pg-home) .historia__foto .historia__foto-imagen {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 13px;
  background-size: cover;
  background-position: center;
  background-color: var(--violet-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--violet-deep);
  text-align: center;
  padding: 10px;
  line-height: 1.5;
  font-weight: 600;
}
:where(.pg-home) .historia__foto .historia__foto-pie {
  display: none;
}
:where(.pg-home) .historia__foto--1 {
  --r: -4deg;
  top: 60px;
  left: 0;
  width: 350px;
}
:where(.pg-home) .historia__foto--2 {
  --r: 4deg;
  top: 130px;
  right: 0;
  width: 340px;
}
:where(.pg-home) .historia__foto--3 {
  --r: -2.5deg;
  bottom: 60px;
  left: 10px;
  width: 335px;
}
:where(.pg-home) .historia__foto--2 .historia__foto-imagen {
  aspect-ratio: auto;
  height: 476px;
}
:where(.pg-home) .historia__foto.dispersar {
  opacity: 0;
}
:where(.pg-home) .sin-animacion .historia__foto.dispersar {
  opacity: 1;
}
:where(.pg-home) .historia__foto:hover {
  box-shadow: 15px 17px 0 rgba(0,33,71,.20);
  z-index: 3;
}
@media (max-width:1240px) {
  :where(.pg-home) .historia__texto {
    max-width: 470px;
  }
  :where(.pg-home) .historia__foto--1 {
    width: 275px;
    left: 0;
  }
  :where(.pg-home) .historia__foto--2 {
    width: 260px;
    top: 180px;
  }
  :where(.pg-home) .historia__foto--3 {
    width: 262px;
    left: 6px;
  }
  :where(.pg-home) .historia__foto--2 .historia__foto-imagen {
    height: 360px;
  }
}
@media (max-width:960px) {
  :where(.pg-home) .historia__dispersion {
    display: block;
    min-height: 0;
  }
  :where(.pg-home) .historia__texto {
    max-width: 100%;
  }
  :where(.pg-home) .historia__foto {
    position: static;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    margin-top: 26px;
  }
  :where(.pg-home) .historia__foto:first-of-type {
    margin-top: 44px;
  }
}
/* ============ DIFERENCIADOR ============ */
:where(.pg-home) .diferencial {
  background: var(--white);
  overflow-x: clip;
  padding-top: 100px;
  padding-bottom: 0;
  position: relative;
}
:where(.pg-home) .diferencial__pista {
  height: 185vh;
  position: relative;
}
:where(.pg-home) .diferencial__fijo {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.pg-home) .diferencial__zona {
  position: relative;
  width: 100%;
  height: min(640px, 76vh);
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.pg-home) .diferencial__centro {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
:where(.pg-home) .diferencial__centro .titulo-seccion,
:where(.pg-home) .diferencial__centro .intro-seccion {
  margin-left: auto;
  margin-right: auto;
}
:where(.pg-home) .diferencial__hueco {
  position: absolute;
  z-index: 1;
  max-width: 320px;
  transform-origin: center;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.pg-home) .diferencial__burbuja {
  display: inline-flex;
  align-items: center;
  padding: 18px 32px;
  border-radius: 999px;
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px rgba(0,33,71,.16);
  font-family: var(--disp);
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-align: left;
  transform: rotate(var(--r,0deg));
}
:where(.pg-home) .flotando .diferencial__burbuja {
  animation: inicio-flotar var(--t,6s) ease-in-out infinite;
}
@keyframes inicio-flotar {
  0%, 100% {
    transform: translateY(0) rotate(var(--r,0deg));
  }
  50% {
    transform: translateY(-10px) rotate(var(--r,0deg));
  }
}
:where(.pg-home) .diferencial__burbuja::after {
  content: "";
  position: absolute;
  left: 30px;
  bottom: -14px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: inherit;
  border: 0;
}
:where(.pg-home) .diferencial__burbuja .diferencial__vivo {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  margin-left: 10px;
  flex-shrink: 0;
  animation: inicio-pulso 6s infinite;
}
:where(.pg-home) .diferencial__burbuja--violeta {
  background: var(--violet);
}
:where(.pg-home) .diferencial__burbuja--azul {
  background: var(--oxford);
}
:where(.pg-home) .diferencial__burbuja--roja {
  background: var(--red);
}
:where(.pg-home) .diferencial__burbuja--violeta-oscuro {
  background: var(--violet-deep);
}
:where(.pg-home) .diferencial__hueco--1 {
  --r: -3deg;
  --t: 6.2s;
  top: 10%;
  left: 10%;
}
:where(.pg-home) .diferencial__hueco--2 {
  --r: 2.5deg;
  --t: 7.1s;
  top: 4%;
  left: 38%;
}
:where(.pg-home) .diferencial__hueco--3 {
  --r: 3deg;
  --t: 5.6s;
  top: 19%;
  right: 6%;
}
:where(.pg-home) .diferencial__hueco--4 {
  --r: -2deg;
  --t: 6.8s;
  top: 32%;
  left: 0%;
}
:where(.pg-home) .diferencial__hueco--5 {
  --r: 2deg;
  --t: 5.9s;
  top: 60%;
  right: 0%;
}
:where(.pg-home) .diferencial__hueco--6 {
  --r: -2.5deg;
  --t: 7.4s;
  bottom: 18%;
  left: 16%;
}
:where(.pg-home) .diferencial__hueco--7 {
  --r: 3deg;
  --t: 6.5s;
  bottom: 8%;
  right: 25%;
}
:where(.pg-home) .diferencial__hueco.dispersar {
  opacity: 0;
}
:where(.pg-home) .sin-animacion .diferencial__hueco.dispersar {
  opacity: 1;
}
:where(.pg-home) .diferencial__hueco:hover {
  z-index: 3;
}
:where(.pg-home) .diferencial__hueco:hover .diferencial__burbuja {
  box-shadow: 0 14px 30px rgba(0,33,71,.26);
}
@media (max-width:1180px) {
  :where(.pg-home) .diferencial__centro {
    max-width: 430px;
  }
  :where(.pg-home) .diferencial__hueco {
    max-width: 265px;
  }
  :where(.pg-home) .diferencial__burbuja {
    font-size: 17px;
    padding: 14px 24px;
  }
  :where(.pg-home) .separacion-inferior {
    margin-bottom: 0px;
  }
  :where(.pg-home) .separacion-superior {
    margin-top: 0px;
  }
}
@media (max-width:960px) {
  :where(.pg-home) .diferencial {
    padding-bottom: 100px;
  }
  :where(.pg-home) .diferencial__pista {
    height: auto;
  }
  :where(.pg-home) .diferencial__fijo {
    position: static;
    height: auto;
    display: block;
  }
  :where(.pg-home) .diferencial__zona {
    display: block;
    height: auto;
  }
  :where(.pg-home) .diferencial__centro {
    max-width: 100%;
  }
  :where(.pg-home) .diferencial__burbujas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 14px;
    margin-top: 38px;
  }
  :where(.pg-home) .diferencial__hueco {
    position: static;
    max-width: none;
  }
  :where(.pg-home) .diferencial__burbuja::after {
    display: none;
  }
}
/* ============================================== FINAL CTA (versión nueva) ======================================================== */
:where(.pg-home) .cierre {
  background: var(--white);
  padding: 0;
}
:where(.pg-home) .cierre__panel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--oxford);
  background: var(--white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 84vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px 5vw;
}
:where(.pg-home) .cierre__texto {
  position: relative;
  z-index: 3;
  max-width: 720px;
}
:where(.pg-home) .cierre__etiqueta {
  display: inline-block;
  background: var(--violet-tint);
  border: 1px solid rgba(108,76,241,.25);
  color: var(--violet-deep);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  margin-bottom: 26px;
}
:where(.pg-home) .cierre h2 {
  font-family: var(--disp);
  font-size: clamp(32px,4.4vw,56px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.025em;
  max-width: 640px;
  margin: 0 auto 20px;
  color: var(--oxford);
}
:where(.pg-home) .cierre h2 .texto-violeta {
  color: var(--violet);
}
:where(.pg-home) .cierre p {
  color: var(--ink-soft);
  margin: 0 auto 36px;
  font-size: 16.5px;
}
:where(.pg-home) .cierre__boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--violet);
  color: #fff;
  font-weight: 800;
  font-size: 16.5px;
  padding: 18px 36px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(108,76,241,.55);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
:where(.pg-home) .cierre__boton:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -12px rgba(108,76,241,.65);
}
:where(.pg-home) .cierre__boton .flecha {
  transition: transform .28s var(--ease);
}
:where(.pg-home) .cierre__boton:hover .flecha {
  transform: translateX(5px);
}
:where(.pg-home) .cierre .cierre__alterno {
  display: block;
  margin: 26px auto 0;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 520px;
  line-height: 1.6;
}
:where(.pg-home) .cierre .cierre__alterno a {
  color: var(--violet-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(108,76,241,.4);
}
:where(.pg-home) .cierre .cierre__alterno a:hover {
  border-bottom-color: var(--violet-deep);
}
/* Rastro del cursor */
:where(.pg-home) .cierre__rastro {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
:where(.pg-home) .cierre__figura {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s ease, transform .5s var(--ease);
  will-change: transform, opacity;
  line-height: 0;
  font-size: 0;
}
:where(.pg-home) .cierre__figura svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width:900px) {
  :where(.pg-home) .cierre {
    padding: 0;
  }
  :where(.pg-home) .cierre__panel {
    padding: 80px 6vw;
    min-height: 0;
  }
  :where(.pg-home) .cierre__rastro {
    display: none;
  }
  :where(.pg-home) .preguntas__lista {
    margin: 16px 0;
  }
}
@media (prefers-reduced-motion:reduce) {
  :where(.pg-home) .cierre__rastro {
    display: none;
  }
}
/* sticky mobile CTA */
:where(.pg-home) .cta-fija {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 850;
  background: var(--oxford-deep);
  padding: 12px 16px;
  box-shadow: 0 -12px 30px rgba(0,19,48,.4);
}
:where(.pg-home) .cta-fija a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--violet);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 14px;
  border-radius: 999px;
}
@media (max-width:720px) {
  :where(.pg-home) .cta-fija.cta-fija--visible {
    display: block;
  }
}
/* ----- Bandas editoriales (integradas del demo; antes prefijo ed-) ----- */
/* ===== Bandas editoriales (integradas del demo, prefijo ed- para no
   interferir con los estilos propios del home) ===== */
:where(.pg-home) .cita {
  padding: 96px 5vw;
  position: relative;
  overflow: hidden;
}
:where(.pg-home) .cita__contenedor {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
:where(.pg-home) .cita--crema {
  background: var(--white);
}
/* Cita editorial */
:where(.pg-home) .cita__frase {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
:where(.pg-home) .cita__frase p {
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(23px,3.2vw,36px);
  line-height: 1.18;
  color: var(--oxford);
}
:where(.pg-home) .cita__frase p .cita__resalte {
  color: var(--violet-deep);
  box-shadow: inset 0 -12px 0 rgba(212,255,61,.7);
}
:where(.pg-home) .cita__frase .cita__autor {
  display: block;
  margin-top: 22px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Aparición al hacer scroll (independiente del sistema del home) */
:where(.pg-home) .cita__frase--aparece {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--edd,0ms);
}
:where(.pg-home) .cita__frase--aparece.cita__frase--lista {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  :where(.pg-home) .cita__frase--aparece {
    opacity: 1;
    transform: none;
  }
}

/* ===== Ajustes que antes eran style="" dentro del HTML ===== */
/* Portada */
:where(.pg-home) .portada__nota {
  margin-top: -24px;
  margin-bottom: 28px;
  font-size: 12.5px;
  color: var(--ink-soft);
  max-width: 530px;
}
/* Programas */
:where(.pg-home) .programas__aval {
  margin-top: 10px;
  font-weight: 700;
  color: var(--oxford);
}
:where(.pg-home) .oferta__tarjeta ul.oferta__lista--compacta {
  margin-bottom: 16px;
  margin-top: 16px;
}
/* Método: cada tarjeta ajusta tamaños a su contenido (van después del bloque responsive para ganarle, como antes el estilo en línea) */
/* Tarjeta 1 · Clases completas */
:where(.pg-home) .paso--clases .paso__medio {
  font-size: 45px;
}
:where(.pg-home) .paso--clases .paso__sello {
  font-size: 20px;
}
/* Tarjeta 2 · Intensidad */
:where(.pg-home) .paso--intensidad .paso__medio {
  margin-top: 3px;
  font-size: 39px;
}
:where(.pg-home) .paso--intensidad .paso__rotulo {
  font-size: 24px;
  margin: 0;
}
:where(.pg-home) .paso--intensidad .paso__cifra {
  margin-top: 10px;
}
:where(.pg-home) .paso--intensidad .paso__sello {
  font-size: 15px;
}
/* Tarjeta 3 · Asesorías y clubes */
:where(.pg-home) .paso--asesorias .paso__cifras > :nth-child(1) {
  font-size: 36px;
}
:where(.pg-home) .paso--asesorias .paso__cifras > :nth-child(2) {
  font-size: 43px;
}
:where(.pg-home) .paso--asesorias .paso__rotulo {
  font-size: 20px;
}
:where(.pg-home) .paso__infinito {
  width: 170px;
  height: auto;
}
:where(.pg-home) .paso--asesorias .paso__sello {
  font-size: 18px;
  margin-top: 15px;
  padding: 9px 40px;
}
/* Tarjeta 4 · Certificación internacional */
:where(.pg-home) .paso--certificacion .paso__cifras > :nth-child(1) {
  margin-bottom: 3px;
  margin-top: 3px;
}
:where(.pg-home) .paso--certificacion .paso__cifras > :nth-child(2) {
  font-size: 36px;
  margin-bottom: 5px;
}
:where(.pg-home) .paso--certificacion .paso__cifra {
  font-size: 93px;
  font-style: italic;
}
:where(.pg-home) .paso--certificacion .paso__rotulo {
  font-size: 23px;
}
:where(.pg-home) .paso--certificacion .paso__sello {
  font-size: 18px;
  margin-top: 5px;
}
/* Cierre y cita */
:where(.pg-home) .cierre__figura-imagen {
  display: block;
  margin: 0 auto;
}
:where(.pg-home) .cita--compacta {
  padding: 80px 5vw;
}
/* Historias: insignia de Google */
:where(.pg-home) .historias__insignia {
  text-align: center;
  margin: 20px;
}
:where(.pg-home) .insignia-google .insignia-google__texto {
  display: block;
}
:where(.pg-home) .historias__reproducir {
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* Exámenes */
:where(.pg-home) .examenes__marca {
  text-align: center;
  border-radius: 18px 18px 0px 0px;
}
:where(.pg-home) .examenes__marca--oxford {
  background-color: var(--oxford-deep);
}
:where(.pg-home) .examenes__marca--aptis {
  background-color: #BE1622;
}
:where(.pg-home) .examenes__marca--violeta {
  background-color: var(--violet-deep);
}
/* Esta mascota llevaba display inline que ganaba a .oculto-movil: se mantiene visible en móvil, como estaba */
:where(.pg-home) .examenes__mascota {
  text-align: center;
  display: block ruby;
}
:where(.pg-home) .examenes__mascota-imagen {
  width: auto;
  height: 280px;
  display: block;
}
:where(.pg-home) .incluido__mascota-imagen {
  width: auto;
  height: 270px;
  display: block;
}
/* Historia: cifras y fotos */
:where(.pg-home) .historia__cifras {
  margin-top: 40px;
}
:where(.pg-home) .cifras__dato .cifras__valor--violeta {
  color: var(--violet-deep);
}
:where(.pg-home) .historia__foto--1 .historia__foto-imagen {
  background-image: url("../images/IELTS_v1.webp");
}
:where(.pg-home) .historia__foto--2 .historia__foto-imagen {
  background-image: url("../images/IELTS_v2.webp");
}
:where(.pg-home) .historia__foto--3 .historia__foto-imagen {
  background-image: url("../images/IELTS_v3.webp");
}
/* Banda CTA violeta */
:where(.pg-home) .banda-cta.banda-cta--violeta {
  background: var(--violet);
  border-color: var(--violet);
  box-shadow: 8px 10px 0 var(--oxford);
}
:where(.pg-home) .banda-cta h3 .banda-cta__acento {
  color: #FFD9D3;
}
:where(.pg-home) .banda-cta .banda-cta__boton-linea {
  border-color: #fff;
  color: #fff;
}
/* Planes y financiación */
:where(.pg-home) .planes__nota {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
}
:where(.pg-home) .planes__enlace {
  color: var(--violet-deep);
  font-weight: 600;
}
:where(.pg-home) .financiacion__imagen {
  position: absolute;
}
:where(.pg-home) .financiacion__texto {
  margin-left: 160px;
}
:where(.pg-home) .financiacion__item:nth-child(2) .financiacion__texto {
  margin-left: 175px;
}
/* Sellos */
:where(.pg-home) .certificados__imagen {
  width: 100%;
  height: auto;
}
/* Test de nivel: enlace del resultado */
:where(.pg-home) .test-nivel__inscribirme {
  display: block;
  margin-top: 16px;
  font-weight: 700;
  color: var(--violet-deep);
}

/* ===== Respaldo: estilos propios que traía el home y que ahora cubre la plantilla =====
   Header, topbar, menú móvil, pie, skip-link y reset original del home. Se conservan comentados por si hay que
   comparar o recuperar algo; se pueden borrar cuando se confirme (megaauditoría).
:root {
  --oxford: #002147;
  --oxford-deep: #001330;
  --violet: #6C4CF1;
  --violet-deep: #4F2EDC;
  --violet-tint: #efeaff;
  --red: #E8442E;
  --white: #ffffff;
  --off: #F5F4FE;
  --ink: #0e1e38;
  --ink-soft: #4a5872;
  --line: rgba(0,33,71,.14);
  --disp: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --body: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --mono: 'Montserrat','Instrument Sans',sans-serif;
  --r: 18px;
  --ease: cubic-bezier(.22,.85,.3,1);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--body);
  background: var(--white);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}
::selection {
  background: var(--violet);
  color: #fff;
}
h1,
h2,
h3 {
  font-family: var(--disp);
}
a {
  color: inherit;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 800;
}
.topbar {
  background: var(--oxford-deep);
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 9px 5vw;
  gap: 6px;
  font-family: var(--mono);
  letter-spacing: .01em;
}
.topbar b {
  color: #fff;
  font-weight: 600;
}
.topbar a {
  color: #B9A6FF;
  text-decoration: none;
  font-weight: 600;
}
.topbar a:hover {
  text-decoration: underline;
}
.topbar .promo {
  color: rgba(255,255,255,.9);
  font-size: 13px;
  text-align: center;
}
.topbar .promo b {
  color: #B9A6FF;
}
.topbar .topbar-contact {
  font-size: 12px;
  color: rgba(255,255,255,.82);
}
@media(min-width:641px) {
  .topbar .topbar-contact {
    position: absolute;
    right: 5vw;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media(max-width:640px) {
  .topbar {
    flex-direction: column;
    text-align: center;
    font-size: 11px;
    padding: 8px 4vw;
    gap: 4px;
  }
  .topbar .promo {
    font-size: 11.5px;
  }
  .topbar .topbar-contact {
    font-size: 10px;
  }
}
.nav {
  position: relative;
  z-index: 800;
  background: rgba(253,253,251,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--oxford);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  height: 78px;
  transition: height .3s var(--ease);
}
.nav.compact {
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--disp);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  transition: transform .35s var(--ease);
}
.brand-mark img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.06);
}
.brand-name {
  line-height: 1.1;
}
.brand-name b {
  display: block;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 19px;
  color: var(--oxford);
}
.brand-name small {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet-deep);
  font-weight: 600;
}
.brand-name .tagline {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 1px;
}
.nav ul {
  display: flex;
  list-style: none;
  gap: 26px;
  align-items: center;
}
.nav ul a {
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding: 6px 2px;
}
.nav ul a:not(.cta-nav)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--violet);
  border-radius: 3px;
  transition: width .28s var(--ease);
}
.nav ul a:not(.cta-nav):hover::after {
  width: 100%;
}
.cta-nav {
  background: #D4FF3D;
  color: var(--oxford-deep)!important;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--oxford);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cta-nav:hover {
  transform: translate(2px,2px);
  box-shadow: 1px 1px 0 var(--oxford);
}
.nav-burger {
  display: none;
}
@media(max-width:920px) {
  .nav ul {
    display: none;
  }
  .nav-burger {
    display: block;
    background: var(--white);
    border: 2px solid var(--oxford);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 10px 16px;
    cursor: pointer;
    color: var(--oxford);
    box-shadow: 3px 3px 0 var(--violet);
  }
}
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-bottom: 2px solid var(--oxford);
  position: sticky;
  top: 64px;
  z-index: 790;
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  padding: 16px 5vw;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  border-top: 1px solid var(--line);
  color: var(--oxford);
}
footer {
  background: var(--oxford-deep);
  color: rgba(255,255,255,.55);
  padding: 56px 5vw 30px;
  font-size: 13.5px;
  border-top: 2.5px solid var(--violet);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.follow-strip {
  text-align: center;
  padding: 38px 0 8px;
}
.follow-title {
  font-family: var(--disp);
  font-size: 23px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.follow-icons {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}
.follow-icons a {
  display: inline-flex;
  transition: transform .22s var(--ease);
}
.follow-icons a:hover {
  transform: translateY(-4px) scale(1.1);
}
.follow-icons svg {
  width: 30px;
  height: 30px;
}
.foot-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.foot-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.foot-social a:hover {
  border-color: var(--violet);
  color: #fff;
  background: rgba(108,76,241,.25);
}
.foot-grid h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #B9A6FF;
  margin-bottom: 16px;
  font-weight: 600;
}
.foot-grid ul {
  list-style: none;
}
.foot-grid li {
  margin-bottom: 10px;
}
.foot-grid a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
}
.foot-grid a:hover {
  color: #fff;
}
.foot-brand p {
  max-width: 270px;
  margin-top: 14px;
  line-height: 1.6;
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}
@media(max-width:900px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--oxford);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 0 0 12px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
*/

/* ╔══════════════════════════════════════════════════════════════╗
   ║ 04.6  NOSOTROS (siempre al final)                            ║
   ╚══════════════════════════════════════════════════════════════╝
   body.pg-nosotros */

@keyframes sedeIn { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes sedeBrillo { from{ background-position:120% 0; } to{ background-position:-120% 0; } }
/* ── Principios y valores: Nosotros tiene su propio diseño y no define estos valores; aquí se anulan los de la plantilla (.principios-*) para que no lo alteren ── */
:where(.pg-nosotros) .principios-col { padding:0; }
:where(.pg-nosotros) .principios-head, :where(.pg-nosotros) .principios-col.is-valores .principios-head { background:transparent; }
:where(.pg-nosotros) .principios-list li { position:static; padding:0; color:inherit; font-size:inherit; line-height:inherit; }
:where(.pg-nosotros) .principios-list li::before { content:none; }
:where(.pg-nosotros) .principios-list .principios-text b { color:var(--principios-navy); }
/* ===== Header ===== */
:where(.pg-nosotros) .brand-mark img { width:35px; height:35px; }
@media(max-width:960px){
  :where(.pg-nosotros) .nav ul { display:none; }
  :where(.pg-nosotros) .nav-burger { display:block; }
}
@media(max-width:640px){
  :where(.pg-nosotros) .topbar { font-size:11px; padding:8px 4vw; gap:4px; }
  :where(.pg-nosotros) .topbar .promo { font-size:11.5px; }
  :where(.pg-nosotros) .topbar .topbar-contact { font-size:10px; }
}
/* ===== Page hero ===== */
/* Nota: .page-hero, .btn-main, .card*, .logo-strip, .narrativa y .aliados son estilos genéricos
   reutilizables de otras páginas; no se usan en Nosotros pero se conservan. */
/*background:var(--off);*/
:where(.pg-nosotros) .page-hero h1 {
  font-size: clamp(34px,5vw,56px);
}
:where(.pg-nosotros) .page-hero h1 .vio { color:var(--title-accent); }
/* ===== Sections ===== */
:where(.pg-nosotros) .sec-title .vio { color:var(--title-accent); }
/* ===== Cards genéricas ===== */
:where(.pg-nosotros) .card {
  background: var(--bg);
}
:where(.pg-nosotros) .card:hover { box-shadow:8px 10px 0 rgba(108,76,241,.3); }
/* Botón de acción al pie de una tarjeta: se pega abajo aunque los textos
   tengan distinta longitud, para que los tres queden a la misma altura. */
/* ============================================================
     NUESTRO PROPÓSITO  (todo scopeado a #proposito)
     Escritorio: rejilla de 2 columnas  [ texto + cards | foto ].
     Móvil (<=900px): una columna  [ texto + cards ] y luego [ foto + tarjeta ].
     ============================================================ */
:where(.pg-nosotros) #proposito {
  --proposito-navy: #0a2149;
  --proposito-coral: #e8315f;
  --proposito-azul: #1274bd;
  --proposito-violeta: #4a3a8c;
  --proposito-texto: #5d6474;
  --proposito-sombra: 0 10px 26px rgba(10,33,73,.18);
  --proposito-titulos: 'Bricolage Grotesque',system-ui,sans-serif;
  --proposito-detalles: 'Montserrat',system-ui,sans-serif;
  --proposito-solape: clamp(0px,3vw,40px);
  /* cuánto se mete el difuminado de la foto detrás de las cards */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  padding: 0 0 56px;
  /* recorta lo horizontal pero deja bajar la decoración por debajo de la sección */
  overflow-y: visible;
  margin-bottom: clamp(48px,7vw,96px);
  /* espacio para la decoración que se sale por debajo */
}
/* ---------- Columna izquierda: título + cards ---------- */
:where(.pg-nosotros) #proposito .proposito-cuerpo {
  position: relative;
  z-index: 2;
  padding: 48px 24px 0 max(32px, calc((100vw - 1240px) / 2));
  max-width: calc(640px + max(32px, calc((100vw - 1240px) / 2)) + 24px);
}
:where(.pg-nosotros) #proposito h2 {
  font-family: var(--proposito-titulos);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(2.2rem,4.4vw,3rem);
  color: var(--proposito-navy);
}
:where(.pg-nosotros) #proposito h2 span { color:var(--proposito-coral); }
:where(.pg-nosotros) #proposito .proposito-acento { width:76px; height:5px; border-radius:5px; background:var(--proposito-azul); margin:18px 0 22px; }
:where(.pg-nosotros) #proposito .proposito-intro { line-height:1.7; color:var(--proposito-texto); margin-bottom:26px; }
:where(.pg-nosotros) #proposito .proposito-tarjetas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
:where(.pg-nosotros) #proposito .proposito-tarjeta {
  background: #fff;
  border-radius: 22px;
  padding: 20px 18px 22px;
  box-shadow: var(--proposito-sombra);
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (hover:hover){
  :where(.pg-nosotros) #proposito .proposito-tarjeta:hover { transform:translateY(-5px); box-shadow:0 16px 32px rgba(10,33,73,.24); }
}
:where(.pg-nosotros) #proposito .proposito-tarjeta--vision { background:var(--proposito-navy); }
:where(.pg-nosotros) #proposito .proposito-pastilla {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--proposito-detalles);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: #ffd4e0;
  color: var(--proposito-coral);
}
:where(.pg-nosotros) #proposito .proposito-tarjeta--vision .proposito-pastilla { background:#bde3ff; color:var(--proposito-azul); }
:where(.pg-nosotros) #proposito .proposito-tarjeta h3 {
  font-family: var(--proposito-titulos);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  font-size: clamp(1.15rem,1.9vw,1.45rem);
  color: var(--proposito-navy);
  margin: 14px 0 12px;
}
:where(.pg-nosotros) #proposito .proposito-tarjeta--vision h3 { color:#fff; }
:where(.pg-nosotros) #proposito .proposito-tarjeta p {
  position: relative;
  padding-left: 11px;
  line-height: 1.6;
  text-align: justify;
  color: var(--proposito-texto);
}
:where(.pg-nosotros) #proposito .proposito-tarjeta p::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  height: 3.2em;
  width: 3px;
  border-radius: 3px;
  background: var(--proposito-coral);
}
:where(.pg-nosotros) #proposito .proposito-tarjeta p b { color:var(--proposito-navy); font-weight:700; }
:where(.pg-nosotros) #proposito .proposito-tarjeta--vision p { color:rgba(255,255,255,.82); }
:where(.pg-nosotros) #proposito .proposito-tarjeta--vision p::before { background:#3da0f0; }
:where(.pg-nosotros) #proposito .proposito-tarjeta--vision p b { color:#fff; }
/* ---------- Columna derecha: foto (ya trae su difuminado) + tarjeta de cristal ---------- */
:where(.pg-nosotros) #proposito .proposito-foto {
  position: relative;
  /* sin z-index: no crea capa propia, así la tarjeta compite con la decoración */
  margin: 0 0 40px calc(-1 * var(--proposito-solape));
}
:where(.pg-nosotros) #proposito .proposito-foto__marco { z-index:1; }
:where(.pg-nosotros) #proposito .proposito-foto__marco img {
  display: block;
}
:where(.pg-nosotros) #proposito .proposito-equipo {
  position: absolute;
  z-index: 3;
  bottom: -26px;
  left: calc(var(--proposito-solape) + 12px);
  right: clamp(64px,8vw,120px);
  /* deja libres las esferas de la derecha */
  max-width: 780px;
  margin-left: auto;
  /* si la pantalla es enorme, se pega a la derecha en vez de estirarse */
  display: flex;
  align-items: center;
  gap: clamp(12px,1.6vw,22px);
  padding: 14px clamp(16px,2vw,28px) 14px 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--proposito-sombra);
}
:where(.pg-nosotros) #proposito .proposito-equipo__icono {
  flex-shrink: 0;
  width: clamp(52px,5vw,68px);
  height: clamp(52px,5vw,68px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ddd5ff;
  color: var(--proposito-violeta);
}
:where(.pg-nosotros) #proposito .proposito-equipo__icono svg { width:52%; height:52%; }
:where(.pg-nosotros) #proposito .proposito-equipo__titulo {
  flex: 0 0 clamp(110px,26%,200px);
  font-family: var(--proposito-detalles);
  font-size: clamp(.74rem,1.05vw,.95rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--proposito-navy);
}
:where(.pg-nosotros) #proposito .proposito-equipo__texto {
  flex: 1;
  min-width: 0;
  font-size: clamp(.66rem,.92vw,.82rem);
  line-height: 1.6;
  color: var(--proposito-texto);
  border-left: 2px solid var(--proposito-violeta);
  padding-left: clamp(12px,1.4vw,18px);
}
/* ---------- Decoración: 2 imágenes, cada una trae sus propias esferas y líneas ---------- */
:where(.pg-nosotros) #proposito .proposito-deco {
  position: absolute;
  height: auto;
  max-width: none;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  background: none;
  /* se ve tal cual el archivo, sin transparencia añadida por CSS */
  pointer-events: none;
  user-select: none;
}
/* v1 (izquierda): cuelga justo debajo de las cards. Ajusta top / width si la quieres más arriba o más grande. */
:where(.pg-nosotros) #proposito .proposito-deco--izq { z-index:1; left:0; top:calc(100% - 49px); width:clamp(100px,17vw,240px); }
/* v2 (derecha): va dentro de .proposito-foto, pegada al borde derecho y por DEBAJO de la tarjeta de cristal. */
:where(.pg-nosotros) #proposito .proposito-deco--der { z-index:2; right:0; top:calc(100% - 6.6vw); width:clamp(170px,29vw,440px); }
/* ============ RESPONSIVE: primero las cards, luego la foto con su tarjeta ============ */
@media (max-width:900px){
  :where(.pg-nosotros) #proposito { display:block; padding:0 0 96px; }
  :where(.pg-nosotros) #proposito .proposito-cuerpo { position:static; max-width:none; padding:40px 18px 0; }
  :where(.pg-nosotros) #proposito .proposito-foto { margin:36px 0 0; min-height:0; height:clamp(240px,60vw,380px); }
  :where(.pg-nosotros) #proposito .proposito-equipo { left:16px; right:16px; bottom:-40px; max-width:none; margin-left:0; }
  :where(.pg-nosotros) #proposito .proposito-deco--izq { top:auto; bottom:-70px; width:clamp(90px,24vw,170px); }
  :where(.pg-nosotros) #proposito .proposito-deco--der { top:calc(100% - 9vw); width:clamp(130px,36vw,260px); }
}
@media (max-width:560px){
  :where(.pg-nosotros) #proposito .proposito-tarjetas { grid-template-columns:1fr; }
  :where(.pg-nosotros) #proposito .proposito-tarjeta p { font-size:.8rem; }
  :where(.pg-nosotros) #proposito .proposito-equipo { gap:10px; padding-right:12px; }
  :where(.pg-nosotros) #proposito .proposito-equipo__titulo { flex-basis:96px; font-size:.74rem; }
  :where(.pg-nosotros) #proposito .proposito-equipo__texto { font-size:.68rem; }
}
@media (prefers-reduced-motion:reduce){
  :where(.pg-nosotros) #proposito .proposito-tarjeta { transition:none; }
}
/* ===== Principios y valores ===== */
:where(.pg-nosotros) #principios-valores {
  --principios-navy: #00214d;
  --principios-magenta: #e61d5a;
  --principios-navy-soft: #dbeeff;
  --principios-magenta-soft: #fcdbe5;
  --principios-gray: #5d6474;
}
:where(.pg-nosotros) #principios-valores .sec-title {
  font-size: clamp(34px,4.5vw,52px);
  max-width: none;
  color: var(--principios-navy);
}
:where(.pg-nosotros) #principios-valores .sec-title .vio { color:var(--principios-magenta); }
:where(.pg-nosotros) #principios-valores .sec-title::after { background:var(--principios-navy); margin:12px auto 0; }
:where(.pg-nosotros) .principios-grid {
  gap: 32px;
  max-width: 1140px;
  margin: 52px auto 0;
}
@media(max-width:860px){
  :where(.pg-nosotros) .principios-grid { grid-template-columns:1fr; }
}
:where(.pg-nosotros) .principios-col {
  background: var(--principios-navy);
  border: 1px solid var(--principios-navy);
  border-radius: 28px;
  box-shadow: 0 18px 36px -8px rgba(0,33,77,.25), 0 8px 16px -4px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
:where(.pg-nosotros) .principios-col:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -10px rgba(0,33,77,.32), 0 12px 20px -4px rgba(0,0,0,.15);
}
:where(.pg-nosotros) .principios-col.is-valores {
  background: var(--principios-magenta);
  border-color: var(--principios-magenta);
  box-shadow: 0 18px 36px -8px rgba(230,29,90,.25), 0 8px 16px -4px rgba(0,0,0,.12);
}
:where(.pg-nosotros) .principios-col.is-valores:hover {
  box-shadow: 0 24px 44px -10px rgba(230,29,90,.32), 0 12px 20px -4px rgba(0,0,0,.15);
}
:where(.pg-nosotros) .principios-head {
  padding: 20px 24px 18px;
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: .14em;
}
:where(.pg-nosotros) .principios-body {
  background: #fff;
  border-radius: 22px;
  margin: 0 3px 3px;
  padding: 34px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
:where(.pg-nosotros) .principios-list { padding:0; display:flex; flex-direction:column; gap:26px; }
:where(.pg-nosotros) .principios-list li { display:flex; align-items:center; gap:16px; }
:where(.pg-nosotros) .principios-icon {
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--principios-navy-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300214d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0,33,77,.08);
}
:where(.pg-nosotros) .principios-col.is-valores .principios-icon {
  background-color: var(--principios-magenta-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e61d5a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(230,29,90,.08);
}
:where(.pg-nosotros) .principios-text { flex:1; line-height:1.45; color:var(--principios-gray); }
:where(.pg-nosotros) .principios-text b { color:var(--principios-navy); font-weight:700; }
:where(.pg-nosotros) .principios-col.is-valores .principios-text b { color:var(--principios-magenta); }
/* ===== Certificaciones, afiliaciones y patrocinios ===== */
:where(.pg-nosotros) .logo-slot {
  background: var(--bg);
}
/* ===== Aliados institucionales ===== */
@media(max-width:640px){
  :where(.pg-nosotros) .aliado { grid-template-columns:1fr; gap:4px; }
}
/* ===== Certificaciones auditadas ===== */
:where(.pg-nosotros) .cert-card-container {
  max-width: 1040px;
  margin: 36px auto 0;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 28px;
  padding: 18px 32px;
  box-shadow: 0 2px 4px rgba(23,28,38,.18), 0 7px 10px rgba(23,28,38,.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 28px;
}
:where(.pg-nosotros) .cert-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 160px;
  max-width: 190px;
}
:where(.pg-nosotros) .cert-card-item img { max-height:200px; width:auto; object-fit:contain; transition:transform .3s var(--ease); }
:where(.pg-nosotros) .cert-card-item:hover img { transform:scale(1.06); }
:where(.pg-nosotros) .cert-code {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #1474b9;
  margin-top: 10px;
  letter-spacing: .02em;
}
@media(max-width:768px){
  :where(.pg-nosotros) .cert-card-container { padding:24px 16px; gap:20px; border-radius:20px; }
  :where(.pg-nosotros) .cert-card-item { flex:1 1 130px; max-width:150px; }
  :where(.pg-nosotros) .cert-card-item img { max-height:90px; }
}
/* ===== CTA band ===== */
:where(.pg-nosotros) .cta-band-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
:where(.pg-nosotros) .cta-band .btn-line { border-color:#fff; color:#fff; }
/* ===== Footer ===== */
@media(max-width:1200px){
  :where(.pg-nosotros) .foot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px; }
}
@media(max-width:760px){
  :where(.pg-nosotros) .foot-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
  :where(.pg-nosotros) .foot-grid { grid-template-columns:1fr; }
}
/* ============================================================
   CAPA DE PERSONALIZACIÓN POR PÁGINA
   Cada subpágina declara su clase en <body> (pg-presencial, pg-online,
   pg-ninos, pg-empresas, pg-especiales, pg-examenes, pg-pagos,
   pg-blog, pg-nosotros, pg-legal). La paleta de marca no cambia:
   solo varían los acentos, la textura del hero y los micro-detalles,
   para que cada página tenga personalidad propia.
   ============================================================ */
/* Subrayado de acento bajo los títulos de sección */
:where(.pg-nosotros) .sec-title::after {
  background: var(--title-line);
}
/* Sombras de hover teñidas con el acento de cada página */
:where(.pg-nosotros) .card:hover { box-shadow:8px 10px 0 var(--acc-sh); }
/* ===== Sticker del hero (texto propio de cada página) ===== */
/* border:2px solid var(--oxford); background:#fff; color:var(--oxford); */
/* Nosotros: el año de fundación como marca de agua */
/* ===== Botón "motion": el círculo se expande y se traga el botón =====
   Adaptación en CSS puro del efecto MotionButton (React): al pasar el
   mouse, el círculo crece hasta llenar la pastilla, la flecha se desliza
   y el texto cambia de color. Sin dependencias. */
:where(.pg-nosotros) .btn-motion {
  background: var(--bg);
  border: 2.5px solid var(--oxford);
  box-shadow: 4px 4px 0 rgba(0,33,71,.16);
}
:where(.pg-nosotros) .btn-motion .circle {
  background: var(--violet);
}
:where(.pg-nosotros) .btn-motion .icon {
  color: #fff;
}
:where(.pg-nosotros) .btn-motion .label {
  color: var(--oxford);
}
:where(.pg-nosotros) .btn-motion:hover .label { color:#fff; }
/* Variante lima: para los cierres de página sobre fondo azul oscuro */
@media(max-width:480px){
  :where(.pg-nosotros) .btn-motion .label { font-size:14px; margin:0 18px 0 58px; }
}
/* ===== Barra de progreso de lectura ===== */
@media (prefers-reduced-motion: reduce){
  :where(.pg-nosotros) .rv { opacity:1; transform:none; }
}
/* ============ TOKENS ============ */
:where(.pg-nosotros) .nosotros-fragmento {
  --nosotros-azul-noche: #0a2149;
  --nosotros-coral: #e8315f;
  --nosotros-azul-academico: #1274bd;
  --nosotros-violeta: #4a3a8c;
  --nosotros-texto: #6b7280;
  --nosotros-fondo: #ffffff;
  --nosotros-tarjeta: #ffffff;
  --nosotros-sombra: 0 6px 14px rgba(10,33,73,.18);
  --nosotros-fuente-titulos: 'Bricolage Grotesque',system-ui,sans-serif;
  --nosotros-fuente-cuerpo: 'Instrument Sans',system-ui,sans-serif;
  --nosotros-fuente-detalles: 'Montserrat',system-ui,sans-serif;
}
:where(.pg-nosotros) .nosotros-fragmento, :where(.pg-nosotros) .nosotros-fragmento * { box-sizing:border-box; }
:where(.pg-nosotros) .nosotros-fragmento * { margin:0; padding:0; }
:where(.pg-nosotros) .nosotros-fragmento { font-family:var(--nosotros-fuente-cuerpo); color:var(--nosotros-texto); background:var(--nosotros-fondo); line-height:1.7; overflow-x:hidden; }
:where(.pg-nosotros) .nosotros-fragmento img { max-width:100%; display:block; }
:where(.pg-nosotros) .nosotros-fragmento a { color:inherit; }
:where(.pg-nosotros) .nosotros-fragmento h1, :where(.pg-nosotros) .nosotros-fragmento h2, :where(.pg-nosotros) .nosotros-fragmento h3 { font-family:var(--nosotros-fuente-titulos); color:var(--nosotros-azul-noche); line-height:1.05; letter-spacing:-.02em; }
:where(.pg-nosotros) .nosotros-fragmento h1, :where(.pg-nosotros) .nosotros-fragmento h2 { font-weight:800; }
:where(.pg-nosotros) .nosotros-fragmento h1 span, :where(.pg-nosotros) .nosotros-fragmento h2 span { color:var(--nosotros-coral); }
:where(.pg-nosotros) .nosotros-fragmento section { position:relative; padding:44px 32px; overflow:hidden; }
:where(.pg-nosotros) .nosotros-trayectoria { padding-top:48px; padding-bottom:63px; }
:where(.pg-nosotros) .nosotros-contenedor { max-width:1200px; margin:0 auto; position:relative; z-index:2; }
:where(.pg-nosotros) .nosotros-acento { width:76px; height:5px; border-radius:5px; background:var(--nosotros-azul-academico); margin:18px 0 22px; }
/* ============ BOTONES ============ */
:where(.pg-nosotros) .nosotros-accion { --nosotros-color-accion:var(--nosotros-azul-noche); position:relative; display:inline-flex; align-items:center; gap:10px; padding:5px 18px 5px 6px; border:0; border-radius:50px; background-color:#fff; background-image:linear-gradient(var(--nosotros-color-accion),var(--nosotros-color-accion)); background-repeat:no-repeat; background-size:0 100%; color:var(--nosotros-color-accion); font-family:var(--nosotros-fuente-detalles); font-weight:700; font-size:.72rem; text-decoration:none; box-shadow:var(--nosotros-sombra); transition:background-size .35s ease,color .35s ease,transform .2s; }
:where(.pg-nosotros) .nosotros-accion:hover { transform:translateY(-2px); }
:where(.pg-nosotros) .nosotros-accion:hover { background-size:100% 100%; color:#fff; }
:where(.pg-nosotros) .nosotros-accion:focus-visible, :where(.pg-nosotros) .nosotros-enlace-registros:focus-visible { outline:3px solid var(--nosotros-azul-academico); outline-offset:3px; }
:where(.pg-nosotros) .nosotros-accion i { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:.95rem; }
:where(.pg-nosotros) .nosotros-accion--prueba { --nosotros-color-accion:var(--nosotros-coral); }
:where(.pg-nosotros) .nosotros-accion--prueba i { background:var(--nosotros-coral); color:#fff; transition:background-color .35s ease,color .35s ease; }
:where(.pg-nosotros) .nosotros-accion--prueba:hover i { background:#fff; color:var(--nosotros-coral); }
:where(.pg-nosotros) .nosotros-accion--programas i { background:var(--nosotros-azul-noche); color:#fff; transition:background-color .35s ease,color .35s ease; }
:where(.pg-nosotros) .nosotros-accion--programas:hover i { background:#fff; color:var(--nosotros-azul-noche); }
/* ============ 1. HERO ============ */
:where(.pg-nosotros) .nosotros-trayectoria .nosotros-contenedor { display:grid; grid-template-columns:.85fr 1.1fr; align-items:center; }
:where(.pg-nosotros) .nosotros-trayectoria__texto { position:relative; isolation:isolate; width:100%; }
:where(.pg-nosotros) .nosotros-trayectoria__texto::after { content:""; position:absolute; z-index:-1; left:-185px; bottom:-75px; width:360px; height:176px; background:url("../images/linea-rosa.webp") center/contain no-repeat; pointer-events:none; }
:where(.pg-nosotros) .nosotros-trayectoria h1 { font-size:clamp(2.5rem,4.7vw,3rem); }
:where(.pg-nosotros) .nosotros-trayectoria .nosotros-trayectoria__intro { max-width:440px; }
:where(.pg-nosotros) .nosotros-indicadores { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:340px; }
:where(.pg-nosotros) .nosotros-indicador { box-shadow:var(--nosotros-sombra); text-align:center; min-width:0; }
:where(.pg-nosotros) .nosotros-indicador strong { display:block; font-family:var(--nosotros-fuente-detalles); color:var(--nosotros-azul-academico); }
:where(.pg-nosotros) .nosotros-indicador strong.nosotros-indicador__cifra { line-height:1; }
:where(.pg-nosotros) .nosotros-indicador small { display:block; font-family:var(--nosotros-fuente-detalles); }
:where(.pg-nosotros) .nosotros-trayectoria__visual { width:100%; min-width:0; }
:where(.pg-nosotros) .nosotros-foto { position:relative; isolation:isolate; width:100%; }
:where(.pg-nosotros) .nosotros-foto::after { content:""; position:absolute; z-index:0; top:-76px; right:-110px; width:clamp(160px,22vw,250px); height:calc(100% + 170px); background:url("../images/linea-azul.webp") center/contain no-repeat; pointer-events:none; }
:where(.pg-nosotros) .nosotros-foto .nosotros-foto__marco { position:relative; z-index:1; background:transparent; border-radius:clamp(18px,2.2vw,36px); overflow:hidden; box-shadow:0 22px 48px rgba(10,33,73,.2),0 4px 14px rgba(10,33,73,.1); }
:where(.pg-nosotros) .nosotros-foto .nosotros-foto__marco img { width:100%; height:auto; }
:where(.pg-nosotros) .nosotros-foto__esfera { position:absolute; z-index:2; height:auto; pointer-events:none; }
:where(.pg-nosotros) .nosotros-foto__esfera--coral { left:-4%; bottom:-8%; width:clamp(64px,15%,150px); }
:where(.pg-nosotros) .nosotros-foto__esfera--azul { right:-3%; top:-9%; width:clamp(64px,15%,150px); }
:where(.pg-nosotros) .nosotros-acciones { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:18px; }
/* ============ 2. RECONOCIMIENTO ============ */
:where(.pg-nosotros) .nosotros-reconocimientos .nosotros-contenedor { display:grid; grid-template-columns:.78fr 1.27fr; gap:44px; align-items:center; }
:where(.pg-nosotros) .nosotros-reconocimientos .nosotros-contenedor:last-child { display:block; }
:where(.pg-nosotros) .nosotros-reconocimientos__sellos { position:relative; min-height:340px; display:grid; place-items:center start; }
:where(.pg-nosotros) .nosotros-reconocimientos__sellos img { position:relative; z-index:2; width:100%; max-width:min(100%,35rem); }
:where(.pg-nosotros) .nosotros-reconocimientos h2 { font-size:clamp(1.5rem,2.55vw,2.8rem); text-wrap:balance; overflow-wrap:break-word; }
:where(.pg-nosotros) .nosotros-reconocimientos .nosotros-acento { margin:12px 0; }
:where(.pg-nosotros) .nosotros-reconocimientos .nosotros-reconocimientos__intro { max-width:45rem; font-size:1rem; line-height:1.75; }
:where(.pg-nosotros) .nosotros-hitos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:26px; }
:where(.pg-nosotros) .nosotros-hito { background:var(--nosotros-tarjeta); border-radius:20px; box-shadow:var(--nosotros-sombra); padding:22px 20px 26px; position:relative; transition:transform .3s ease,box-shadow .3s ease; }
:where(.pg-nosotros) .nosotros-hito .nosotros-hito__icono { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; margin:0 auto 18px; transition:transform .3s ease; }
:where(.pg-nosotros) .nosotros-hito .nosotros-hito__icono svg { width:28px; height:28px; display:block; }
:where(.pg-nosotros) .nosotros-hito--oxford .nosotros-hito__icono svg { width:31px; height:31px; }
:where(.pg-nosotros) .nosotros-hito .nosotros-hito__fecha { margin:0; font-family:var(--nosotros-fuente-detalles); font-weight:700; font-size:1.05rem; line-height:1.1; }
:where(.pg-nosotros) .nosotros-hito h3 { font-size:1.08rem; line-height:1.2; margin:2px 0 10px; }
:where(.pg-nosotros) .nosotros-hito p { font-size:.86rem; line-height:1.65; }
:where(.pg-nosotros) .nosotros-hito.nosotros-hito--oxford .nosotros-hito__fecha { color:var(--nosotros-violeta); }
:where(.pg-nosotros) .nosotros-hito.nosotros-hito--oxford .nosotros-hito__icono { background:#ddd5ff; color:var(--nosotros-violeta); }
:where(.pg-nosotros) .nosotros-hito.nosotros-hito--cambridge .nosotros-hito__fecha { color:var(--nosotros-azul-academico); }
:where(.pg-nosotros) .nosotros-hito.nosotros-hito--cambridge .nosotros-hito__icono { background:#bde3ff; color:var(--nosotros-azul-academico); }
:where(.pg-nosotros) .nosotros-hito.nosotros-hito--renovacion .nosotros-hito__fecha { color:var(--nosotros-coral); }
:where(.pg-nosotros) .nosotros-hito.nosotros-hito--renovacion .nosotros-hito__icono { background:#ffd4e0; color:var(--nosotros-coral); }
:where(.pg-nosotros) .nosotros-frase { width:fit-content; max-width:100%; margin:40px auto 0; border-left:3px solid var(--nosotros-azul-academico); padding-left:10px; font-family:var(--nosotros-fuente-titulos); font-weight:700; font-size:clamp(1.1rem,2.1vw,1.3rem); color:var(--nosotros-azul-noche); }
:where(.pg-nosotros) .nosotros-frase span { color:var(--nosotros-coral); }
@media (min-width:1000px){
  :where(.pg-nosotros) .nosotros-reconocimientos h2 { white-space:nowrap; }
}
@media (hover:hover){
  :where(.pg-nosotros) .nosotros-hito:hover, :where(.pg-nosotros) .nosotros-aliado:hover { transform:translateY(-6px); box-shadow:var(--nosotros-sombra); }
  :where(.pg-nosotros) .nosotros-hito:hover .nosotros-hito__icono { transform:scale(1.12) rotate(-6deg); }
}
@media (prefers-reduced-motion:reduce){
  :where(.pg-nosotros) .nosotros-hito, :where(.pg-nosotros) .nosotros-hito .nosotros-hito__icono { transition:none; }
}
/* Móvil / tablet vertical: una sola columna (sellos arriba, texto y tarjetas debajo) */
@media (max-width:760px){
  :where(.pg-nosotros) .nosotros-reconocimientos .nosotros-contenedor { grid-template-columns:1fr; gap:28px; }
  :where(.pg-nosotros) .nosotros-reconocimientos__sellos { min-height:260px; place-items:center; }
  :where(.pg-nosotros) .nosotros-reconocimientos__sellos img { max-width:min(100%,420px); }
  :where(.pg-nosotros) .nosotros-hitos { grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  :where(.pg-nosotros) .nosotros-hito { padding-inline:22px; }
}
/* ============ 3. CON QUIÉN TRABAJAMOS ============ */
:where(.pg-nosotros) .nosotros-alianzas { text-align:center; }
/* Esferas decorativas: roja a la izquierda, azul a la derecha. Escalan con el ancho para no tapar el título. */
:where(.pg-nosotros) .nosotros-alianzas__esferas { position:absolute; z-index:1; height:auto; pointer-events:none; }
:where(.pg-nosotros) .nosotros-alianzas__esferas--coral { width:clamp(56px,15vw,120px); left:0; top:8px; }
:where(.pg-nosotros) .nosotros-alianzas__esferas--azul { width:clamp(52px,13vw,110px); right:2%; top:clamp(8px,4vw,50px); }
:where(.pg-nosotros) .nosotros-alianzas h2 { font-size:clamp(2rem,4vw,3rem); }
:where(.pg-nosotros) .nosotros-alianzas .nosotros-acento { margin:16px auto 20px; }
:where(.pg-nosotros) .nosotros-alianzas .nosotros-alianzas__intro { max-width:60rem; margin:0 auto 31px; font-size:1.02rem; }
:where(.pg-nosotros) .nosotros-alianzas__rejilla { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,28px); }
:where(.pg-nosotros) .nosotros-aliado { --nosotros-color-aliado:var(--nosotros-azul-noche); background:var(--nosotros-tarjeta); border-radius:22px; box-shadow:var(--nosotros-sombra); border-top:5px solid var(--nosotros-color-aliado); padding:46px 16px 28px; position:relative; display:flex; flex-direction:column; align-items:center; min-height:300px; transition:transform .3s ease,box-shadow .3s ease; }
:where(.pg-nosotros) .nosotros-aliado .nosotros-aliado__emblema { position:absolute; top:-28px; left:50%; transform:translateX(-50%); width:56px; height:56px; border-radius:50%; background:var(--nosotros-color-aliado); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 6px #fff; transition:transform .3s ease; }
:where(.pg-nosotros) .nosotros-aliado .nosotros-aliado__emblema svg { width:30px; height:30px; }
@media (hover:hover){
  :where(.pg-nosotros) .nosotros-aliado:hover .nosotros-aliado__emblema { transform:translateX(-50%) scale(1.1) rotate(-6deg); }
}
@media (prefers-reduced-motion:reduce){
  :where(.pg-nosotros) .nosotros-aliado, :where(.pg-nosotros) .nosotros-aliado .nosotros-aliado__emblema { transition:none; }
}
/* Logos: cada uno entra en su propia "caja" (--lw × --lh) y se dibuja contenido dentro de ella.
   Así un logo muy ancho (Oxford, Cambridge) y uno casi cuadrado (Educación) pesan igual a la vista.
   Los archivos traen márgenes distintos, así que las cajas compensan: los logos anchos (Oxford, Cambridge) usan todo el ancho de la tarjeta.
   Si alguno se ve grande o pequeño, solo cambia --lw / --lh de su tarjeta. */
:where(.pg-nosotros) .nosotros-aliado .nosotros-aliado__logo { height:clamp(5.25rem,6.5vw,6.5rem); width:100%; display:grid; place-items:center; margin-bottom:18px; }
:where(.pg-nosotros) .nosotros-aliado .nosotros-aliado__logo img { width:var(--lw,100%); height:var(--lh,100%); max-width:100%; max-height:100%; object-fit:contain; }
:where(.pg-nosotros) .nosotros-aliado--oxford { --nosotros-color-aliado:var(--nosotros-azul-noche); --lw:100%; --lh:6.6rem; }
:where(.pg-nosotros) .nosotros-aliado--cambridge { --nosotros-color-aliado:var(--nosotros-coral); --lw:100%; --lh:6.6rem; }
:where(.pg-nosotros) .nosotros-aliado--british-council { --nosotros-color-aliado:var(--nosotros-violeta); --lw:10.5rem; --lh:5rem; }
:where(.pg-nosotros) .nosotros-aliado--ministerio { --nosotros-color-aliado:var(--nosotros-azul-academico); --lw:9.75rem; --lh:6rem; }
:where(.pg-nosotros) .nosotros-aliado h3 { font-size:1.12rem; margin-bottom:8px; }
:where(.pg-nosotros) .nosotros-aliado p { font-size:.95rem; line-height:1.45; }
:where(.pg-nosotros) .nosotros-enlace-registros { color:#3b3bd6; font-family:var(--nosotros-fuente-detalles); font-weight:600; }
/* Tablet: 2 columnas con aire suficiente para que el emblema (sobresale 28px) no pise la tarjeta de arriba */
@media (max-width:900px){
  :where(.pg-nosotros) .nosotros-alianzas__rejilla { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:48px; }
}
/* Móvil: 1 columna y banda libre arriba para las esferas */
@media (max-width:560px){
  :where(.pg-nosotros) .nosotros-alianzas__rejilla { grid-template-columns:minmax(0,1fr); }
}
/* ============ RESPONSIVE ============ */
@media (max-width:760px){
  :where(.pg-nosotros) .nosotros-trayectoria .nosotros-contenedor { grid-template-columns:1fr; }
  :where(.pg-nosotros) .nosotros-trayectoria__texto { text-align:center; }
  :where(.pg-nosotros) .nosotros-trayectoria__texto::after { left:-100px; bottom:-70px; width:min(324px,90vw); height:158px; }
  :where(.pg-nosotros) .nosotros-trayectoria .nosotros-trayectoria__intro { margin:18px auto 22px; }
  :where(.pg-nosotros) .nosotros-indicadores { max-width:480px; margin:0 auto; }
  :where(.pg-nosotros) .nosotros-foto::after { top:-50px; right:-70px; width:150px; height:calc(100% + 100px); }
}
@media (max-width:560px){
  :where(.pg-nosotros) .nosotros-fragmento section { padding:48px 18px; }
  :where(.pg-nosotros) .nosotros-indicadores { max-width:100%; }
  :where(.pg-nosotros) .nosotros-accion { width:100%; }
}
@media (prefers-reduced-motion:reduce){
  :where(.pg-nosotros) .nosotros-accion, :where(.pg-nosotros) .nosotros-accion i { transition:none; }
}
/* ============================================================
   AJUSTES DE LEGIBILIDAD (hero → principios y valores)
   Los textos del fragmento estaban en 8–11px; se suben para que
   se lean bien sin alterar la composición del diseño.
   ============================================================ */
:where(.pg-nosotros) .nosotros-trayectoria .nosotros-trayectoria__intro { line-height:1.8; max-width:460px; }
/* ===== Indicadores del hero: más espacio y respiración (antes se veían apretados) ===== */
:where(.pg-nosotros) .nosotros-trayectoria .nosotros-contenedor { gap:56px; }
:where(.pg-nosotros) .nosotros-trayectoria .nosotros-trayectoria__intro { margin:30px 0 34px; }
:where(.pg-nosotros) .nosotros-indicadores { max-width:500px; gap:16px; }
:where(.pg-nosotros) .nosotros-indicador {
  padding: 22px 14px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(10,33,73,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
:where(.pg-nosotros) .nosotros-indicador strong { font-size:1.02rem; line-height:1.2; }
:where(.pg-nosotros) .nosotros-indicador small { margin-top:8px; line-height:1.4; }
@media(max-width:760px){
  :where(.pg-nosotros) .nosotros-trayectoria .nosotros-contenedor { gap:34px; }
  :where(.pg-nosotros) .nosotros-indicadores { max-width:520px; }
}
@media(max-width:480px){
  :where(.pg-nosotros) .nosotros-indicadores { gap:10px; }
  :where(.pg-nosotros) .nosotros-indicador { padding:16px 8px 14px; }
}
/* Corrección: ".nosotros-fragmento a{color:inherit}" pisaba el color de los botones y del enlace "ver registros" */
/* ============================================================
   BOTONES DEL HERO — mismas animaciones que programas/online
   · .btn-motion: el círculo se expande y se traga el botón (flecha se desliza, texto cambia de color)
   · .btn-line:   contorno que se rellena al hacer hover
   Colores adaptados a esta página (coral + azul noche del diseño).
   Para volver al morado de la referencia: --btn-acc:#6C4CF1
   Van con el prefijo ".nosotros-acciones" porque el fragmento reinicia
   márgenes/paddings (".nosotros-fragmento *") y heredaba el color de los enlaces.
   ============================================================ */
:where(.pg-nosotros) .nosotros-fragmento .nosotros-acciones {
  --btn-acc: #e8315f;
  /* círculo / relleno del botón principal */
  --btn-ink: #0a2149;
  /* borde y texto */
  --btn-sh: rgba(10,33,73,.16);
  gap: 18px;
  margin-top: 26px;
  align-items: center;
}
:where(.pg-nosotros) .nosotros-acciones .btn-motion {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--btn-ink);
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--ease);
}
:where(.pg-nosotros) .nosotros-acciones .btn-motion:hover, :where(.pg-nosotros) .nosotros-acciones .btn-motion:focus-visible { transform:translateY(-2px); box-shadow:none; }
:where(.pg-nosotros) .nosotros-acciones .btn-motion .circle {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 48px;
  border-radius: 999px;
  background: var(--btn-acc);
  transition: width .55s var(--ease);
}
:where(.pg-nosotros) .nosotros-acciones .btn-motion:hover .circle, :where(.pg-nosotros) .nosotros-acciones .btn-motion:focus-visible .circle { width:calc(100% - 12px); }
:where(.pg-nosotros) .nosotros-acciones .btn-motion .icon {
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: #fff;
  transition: transform .55s var(--ease);
}
:where(.pg-nosotros) .nosotros-acciones .btn-motion:hover .icon, :where(.pg-nosotros) .nosotros-acciones .btn-motion:focus-visible .icon { transform:translateY(-50%) translateX(8px); }
:where(.pg-nosotros) .nosotros-acciones .btn-motion .icon svg { width:22px; height:22px; }
:where(.pg-nosotros) .nosotros-acciones .btn-motion .label {
  position: relative;
  z-index: 1;
  margin: 0 28px 0 64px;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-family: var(--nosotros-fuente-detalles);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  color: var(--btn-ink);
  white-space: nowrap;
  transition: color .45s var(--ease);
}
:where(.pg-nosotros) .nosotros-acciones .btn-motion:hover .label, :where(.pg-nosotros) .nosotros-acciones .btn-motion:focus-visible .label { color:#fff; }
:where(.pg-nosotros) .nosotros-acciones .btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 65px;
  padding: 0 32px;
  border-radius: 16px;
  border: 2.5px solid var(--btn-ink);
  background: transparent;
  color: var(--btn-ink);
  font-family: var(--nosotros-fuente-detalles);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .22s var(--ease);
}
:where(.pg-nosotros) .nosotros-acciones .btn-line:hover, :where(.pg-nosotros) .nosotros-acciones .btn-line:focus-visible { background:var(--btn-ink); color:#fff; transform:translateY(-2px); box-shadow:none; }
@media(max-width:560px){
  :where(.pg-nosotros) .nosotros-fragmento .nosotros-acciones { flex-direction:column; align-items:stretch; gap:16px; }
  :where(.pg-nosotros) .nosotros-acciones .btn-motion { justify-content:center; }
  :where(.pg-nosotros) .nosotros-acciones .btn-motion .label { font-size:14.5px; margin:0 22px 0 62px; }
  :where(.pg-nosotros) .nosotros-acciones .btn-line { min-height:60px; }
}
@media (prefers-reduced-motion:reduce){
  :where(.pg-nosotros) .nosotros-acciones .btn-motion, :where(.pg-nosotros) .nosotros-acciones .btn-motion .circle, :where(.pg-nosotros) .nosotros-acciones .btn-motion .icon, :where(.pg-nosotros) .nosotros-acciones .btn-motion .label, :where(.pg-nosotros) .nosotros-acciones .btn-line { transition:none; }
}
/* ============================================================
   HOVER DE LAS TARJETAS (divs) — como .card / .stat-box de la referencia:
   se elevan un poco, giran apenas y la sombra pasa a "bloque" teñido con el
   color propio de cada tarjeta.
   ============================================================ */
:where(.pg-nosotros) .nosotros-indicador { transition:transform .3s var(--ease); }
@media (hover:hover){
  :where(.pg-nosotros) .nosotros-indicador:hover { transform:translateY(-4px); }
  :where(.pg-nosotros) #proposito .proposito-tarjeta:hover { box-shadow:var(--proposito-sombra); }
  :where(.pg-nosotros) .principios-col:hover { box-shadow:0 18px 36px -8px rgba(0,33,77,.25), 0 8px 16px -4px rgba(0,0,0,.12); }
  :where(.pg-nosotros) .principios-col.is-valores:hover { box-shadow:0 18px 36px -8px rgba(230,29,90,.25), 0 8px 16px -4px rgba(0,0,0,.12); }
}
:where(.pg-nosotros) .scroll-progress { background:linear-gradient(90deg,#e8315f,#1274bd); }
:where(.pg-nosotros) .nosotros-fragmento .nosotros-enlace-registros { color:#3b3bd6; text-decoration:underline; text-underline-offset:3px; }
/* ============================================================
   ANIMACIONES AL HACER SCROLL
   - Solo se activan si hay JS y el usuario no pidió menos movimiento.
   - Usan las propiedades individuales translate / scale (no transform),
     así no pelean con los efectos hover que ya existen.
   ============================================================ */
/* ESTADO INICIAL (oculto) — vive en el CSS, no en el JS.
   Así los elementos nacen ocultos desde el primer pintado y nunca se ven "parpadear"
   (antes el JS les ponía la clase tarde: se veían, se desvanecían y volvían a aparecer).
   ⚠️ Estas listas deben ser las MISMAS que las del arreglo `plan` del script de animaciones. */
/* sube */
.revelar-activo :where(.pg-nosotros) :is(
  .nosotros-indicador, .nosotros-trayectoria .nosotros-acciones,
  .nosotros-reconocimientos h2, .nosotros-reconocimientos__intro, .nosotros-hito,
  .nosotros-alianzas h2, .nosotros-alianzas__intro, .nosotros-aliado,
  #certificaciones .sec-title, #certificaciones .sec-intro, .cert-card-item, #certificaciones .sellos-nota,
  #proposito .proposito-tarjeta,
  #principios-valores .sec-title, .principios-list li,
  #sedes .sec-title, #sedes .sec-intro, .sedes-tabs, .sedes-panels
):not(.revelar-visible) { opacity:0; translate:0 26px; }
/* entra desde la izquierda */
.revelar-activo :where(.pg-nosotros) :is(
  .nosotros-trayectoria h1, .nosotros-trayectoria__intro,
  #proposito h2, #proposito .proposito-intro, .principios-col:not(.is-valores)
):not(.revelar-visible) { opacity:0; translate:-32px 0; }
/* entra desde la derecha */
.revelar-activo :where(.pg-nosotros) :is(
  .nosotros-trayectoria .nosotros-foto, #proposito .proposito-foto__marco, .principios-col.is-valores
):not(.revelar-visible) { opacity:0; translate:32px 0; }
/* zoom suave */
.revelar-activo :where(.pg-nosotros) :is(
  .nosotros-reconocimientos__sellos, .nosotros-frase, .cert-card-container, .proposito-equipo
):not(.revelar-visible) { opacity:0; scale:.94; }
/* TRANSICIÓN — se aplica cuando el JS marca el elemento con .revelar y luego .revelar-visible (clase propia: enhance.js usa .in y la borra al terminar su transición).
   Las variantes con #id existen para ganarle en especificidad a las transiciones propias de cada tarjeta. */
.revelar-activo :where(.pg-nosotros) #proposito .revelar,
.revelar-activo :where(.pg-nosotros) #principios-valores .revelar,
.revelar-activo :where(.pg-nosotros) #certificaciones .revelar,
.revelar-activo :where(.pg-nosotros) #sedes .revelar {
  transition: opacity .7s var(--ease) var(--retraso,0ms),
    translate .7s var(--ease) var(--retraso,0ms),
    scale .7s var(--ease) var(--retraso,0ms),
    transform .3s ease,
    box-shadow .3s ease,
    background-size .35s ease,
    color .35s ease;
}
/* Esferas y decoraciones: flotan muy suave, sin distraer */
:where(.pg-nosotros) .nosotros-alianzas__esferas--azul { animation:flotar 7s ease-in-out infinite; }
:where(.pg-nosotros) .nosotros-alianzas__esferas--coral { animation:flotar 9s ease-in-out -3s infinite; }
/* Las decoraciones de "Nuestro propósito" (v1 izquierda, v2 derecha) van FIJAS: sin animación flotante. */
:where(.pg-nosotros) #proposito .proposito-deco { animation:none; translate:none; }
/* Las pestañas de los títulos: la barrita azul "se dibuja" */
.revelar-activo :where(.pg-nosotros) :is(.nosotros-acento, .proposito-acento) { transform-origin:left center; }
.revelar-activo :where(.pg-nosotros) .nosotros-alianzas .nosotros-acento { transform-origin:center; }
.revelar-activo :where(.pg-nosotros) :is(.nosotros-acento, .proposito-acento):not(.revelar-visible) { scale:0 1; }
/* Barra de progreso de lectura (si enhance.js no la crea) */
:where(.pg-nosotros) .scroll-progress { will-change:transform; }
@media (prefers-reduced-motion:reduce){
  :where(.pg-nosotros) .nosotros-alianzas__esferas--azul, :where(.pg-nosotros) .nosotros-alianzas__esferas--coral { animation:none; }
}
/* ============================================================
   DÓNDE ESTAMOS — selector de sedes + panel con mapa
   Izquierda: 3 tarjetas-pestaña (Ibagué, Girardot, Virtual).
   Derecha: panel que cambia según la sede elegida (mapa, datos, cómo llegar).
   Paleta del diseño: azul noche, coral, violeta; pastillas en tonos claros.
   ============================================================ */
:where(.pg-nosotros) #sedes { --sd-navy:#0a2149; --sd-coral:#e8315f; --sd-azul:#1274bd; --sd-texto:#5d6474; }
:where(.pg-nosotros) #sedes .sec-intro { max-width:640px; }
:where(.pg-nosotros) .sedes-wrap {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.5fr);
  gap: 32px;
  max-width: 1180px;
  margin: 48px auto 0;
  align-items: start;
}
/* ----- tarjetas-pestaña ----- */
:where(.pg-nosotros) .sedes-tabs { display:flex; flex-direction:column; gap:16px; }
:where(.pg-nosotros) .sede-tab {
  --tone: #0a2149;
  --soft: #bde3ff;
  --ink: #1274bd;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 20px 20px 20px 22px;
  border: 2px solid transparent;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(10,33,73,.10);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
:where(.pg-nosotros) .sede-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 5px;
  border-radius: 0 5px 5px 0;
  background: var(--tone);
  transform: scaleY(0);
  transition: transform .35s var(--ease);
}
/* Tonos por sede (variables consumidas por .sede-tab) */
:where(.pg-nosotros) .sede-tab--ibague { --tone:#0a2149; --soft:#bde3ff; --ink:#1274bd; }
:where(.pg-nosotros) .sede-tab--girardot { --tone:#e8315f; --soft:#ffd4e0; --ink:#e8315f; }
:where(.pg-nosotros) .sede-tab--virtual { --tone:#4a3a8c; --soft:#ddd5ff; --ink:#4a3a8c; }
:where(.pg-nosotros) .sede-tab:hover { transform:translateX(4px); }
:where(.pg-nosotros) .sede-tab:focus-visible { outline:3px solid var(--sd-azul); outline-offset:3px; }
:where(.pg-nosotros) .sede-tab.is-active { border-color:var(--tone); }
:where(.pg-nosotros) .sede-tab.is-active::before { transform:scaleY(1); }
:where(.pg-nosotros) .sede-ico {
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft);
  color: var(--tone);
  transition: background-color .3s, color .3s, transform .3s var(--ease);
}
:where(.pg-nosotros) .sede-ico svg { display:block; }
:where(.pg-nosotros) .sede-tab.is-active .sede-ico { background:var(--tone); color:#fff; transform:scale(1.04); }
:where(.pg-nosotros) .sede-txt { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
:where(.pg-nosotros) .sede-pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-family: 'Montserrat',system-ui,sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
:where(.pg-nosotros) .sede-txt b { font-family:var(--disp); font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--tone); }
:where(.pg-nosotros) .sede-txt small { line-height:1.5; color:var(--sd-texto); }
:where(.pg-nosotros) .sede-go {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tone);
  background: transparent;
  transition: background-color .3s, color .3s, transform .3s var(--ease);
}
:where(.pg-nosotros) .sede-go svg { width:16px; height:16px; }
:where(.pg-nosotros) .sede-tab.is-active .sede-go { background:var(--tone); color:#fff; transform:translateX(2px); }
/* ----- panel derecho ----- */
:where(.pg-nosotros) .sedes-panels { position:relative; min-width:0; }
:where(.pg-nosotros) .sede-panel { background:none; border:0; box-shadow:none; }
:where(.pg-nosotros) .sede-panel:not([hidden]) { animation:sedeIn .5s var(--ease); }
:where(.pg-nosotros) .sede-mapa {
  position: relative;
  height: clamp(240px,26vw,300px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10,33,73,.14);
  background: linear-gradient(rgba(255,255,255,.55) 1.5px,transparent 1.5px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,255,255,.55) 1.5px,transparent 1.5px) 0 0/44px 44px,
    #e3ebf2;
}
:where(.pg-nosotros) .sede-mapa iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
:where(.pg-nosotros) .sede-info {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 26px 0 0;
  /* sin sangría lateral: la foto y el botón quedan alineados con los bordes del mapa */
}
:where(.pg-nosotros) .sede-info.sin-foto { grid-template-columns:minmax(0,1fr) auto; }
/* ----- cuadro de fotos de la sede (fotos locales; si hay varias, rotan) ----- */
:where(.pg-nosotros) .sede-foto {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1/.9;
  background: #e3ebf2;
  box-shadow: 0 6px 16px rgba(10,33,73,.12);
  cursor: pointer;
  isolation: isolate;
}
:where(.pg-nosotros) .sede-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .8s var(--ease), transform 5s linear;
}
:where(.pg-nosotros) .sede-foto img.is-on { opacity:1; transform:scale(1); }
:where(.pg-nosotros) .sede-foto__vacio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8a97ad;
  font-family: 'Montserrat',system-ui,sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px;
}
:where(.pg-nosotros) .sede-foto__vacio svg { width:30px; height:30px; }
:where(.pg-nosotros) .sede-foto.has-fotos .sede-foto__vacio { display:none; }
:where(.pg-nosotros) .sede-foto.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size: 220% 100%;
  animation: sedeBrillo 1.4s linear infinite;
}
:where(.pg-nosotros) .sede-foto__dots { position:absolute; z-index:3; left:0; right:0; bottom:9px; display:flex; justify-content:center; gap:6px; }
:where(.pg-nosotros) .sede-foto__dots i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); transition:background-color .3s, transform .3s var(--ease); box-shadow:0 0 0 1px rgba(10,33,73,.18); }
:where(.pg-nosotros) .sede-foto__dots i.is-on { background:#fff; transform:scale(1.25); }
:where(.pg-nosotros) .sede-foto:focus-visible { outline:3px solid var(--sd-azul); outline-offset:3px; }
:where(.pg-nosotros) .sede-foto.has-uno .sede-foto__dots { display:none; }
:where(.pg-nosotros) .sede-info.sin-foto { grid-template-columns:minmax(0,1fr) auto; }
/* Escritorio: la columna de pestañas se estira a la altura del panel, así el primer y el último
   recuadro quedan alineados con el borde de arriba del mapa y el de abajo de la fila de datos. */
@media(min-width:981px){
  :where(.pg-nosotros) .sedes-wrap { align-items:stretch; }
  :where(.pg-nosotros) .sedes-tabs { justify-content:space-between; }
}
:where(.pg-nosotros) .sede-datos h3 { font-family:var(--disp); font-size:1.65rem; font-weight:800; letter-spacing:-.02em; color:var(--sd-navy); line-height:1.1; }
:where(.pg-nosotros) .sede-datos h3::after { content:""; display:block; width:44px; height:4px; border-radius:4px; background:var(--sd-azul); margin:10px 0 14px; }
:where(.pg-nosotros) .sede-lista { list-style:none; display:flex; flex-direction:column; gap:12px; }
:where(.pg-nosotros) .sede-lista li { display:flex; align-items:flex-start; gap:12px; line-height:1.5; color:var(--sd-texto); }
:where(.pg-nosotros) .sede-lista b { color:var(--sd-navy); font-weight:700; }
:where(.pg-nosotros) .sede-lista a { color:var(--sd-azul); font-weight:600; text-underline-offset:3px; }
:where(.pg-nosotros) .li-ico { flex-shrink:0; border-radius:50%; background:#e8f3fb; color:var(--sd-azul); display:grid; place-items:center; margin-top:-2px; }
:where(.pg-nosotros) .li-ico svg { width:16px; height:16px; display:block; }
/* ----- botón "Cómo llegar": mismo btn-motion del hero, en coral ----- */
:where(.pg-nosotros) #sedes .btn-motion {
  --btn-acc: #e8315f;
  --btn-ink: #0a2149;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--btn-ink);
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .22s var(--ease);
}
:where(.pg-nosotros) #sedes .btn-motion:hover, :where(.pg-nosotros) #sedes .btn-motion:focus-visible { transform:translateY(-2px); box-shadow:none; }
:where(.pg-nosotros) #sedes .btn-motion .circle { position:absolute; left:6px; top:6px; bottom:6px; width:48px; border-radius:999px; background:var(--btn-acc); transition:width .55s var(--ease); }
:where(.pg-nosotros) #sedes .btn-motion:hover .circle, :where(.pg-nosotros) #sedes .btn-motion:focus-visible .circle { width:calc(100% - 12px); }
:where(.pg-nosotros) #sedes .btn-motion .icon { position:absolute; left:19px; top:50%; transform:translateY(-50%); display:flex; color:#fff; transition:transform .55s var(--ease); }
:where(.pg-nosotros) #sedes .btn-motion:hover .icon, :where(.pg-nosotros) #sedes .btn-motion:focus-visible .icon { transform:translateY(-50%) translateX(6px); }
:where(.pg-nosotros) #sedes .btn-motion .icon svg { width:22px; height:22px; }
:where(.pg-nosotros) #sedes .btn-motion .label {
  position: relative;
  z-index: 1;
  margin: 0 26px 0 64px;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-family: 'Montserrat',system-ui,sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--btn-ink);
  transition: color .45s var(--ease);
}
:where(.pg-nosotros) #sedes .btn-motion:hover .label, :where(.pg-nosotros) #sedes .btn-motion:focus-visible .label { color:#fff; }
/* ----- panel Virtual ----- */
:where(.pg-nosotros) .sede-panel--virtual { background:linear-gradient(150deg,#0a2149 0%,#14306b 100%); border-radius:26px; box-shadow:0 10px 30px rgba(10,33,73,.18); }
:where(.pg-nosotros) .sede-virtual { position:relative; padding:46px 44px 44px; min-height:clamp(420px,40vw,520px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px; color:#fff; }
:where(.pg-nosotros) .sede-virtual__mascota { position:absolute; z-index:2; right:-3.5%; bottom:-18%; width:clamp(200px,64%,560px); height:auto; pointer-events:none; user-select:none; }
/* flotante: sobresale del panel por la derecha y por abajo */
:where(.pg-nosotros) .sede-virtual__pill { display:inline-block; padding:5px 13px; border-radius:999px; background:#ddd5ff; color:#4a3a8c; font-family:'Montserrat',system-ui,sans-serif; font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
:where(.pg-nosotros) .sede-virtual h3 { position:relative; font-family:var(--disp); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; letter-spacing:-.02em; line-height:1.1; max-width:440px; }
:where(.pg-nosotros) .sede-virtual p { position:relative; max-width:440px; font-size:.98rem; line-height:1.65; color:rgba(255,255,255,.8); }
:where(.pg-nosotros) .sede-virtual ul { position:relative; list-style:none; display:flex; flex-direction:column; gap:10px; margin:6px 0 10px; }
:where(.pg-nosotros) .sede-virtual li { display:flex; align-items:center; gap:12px; font-size:.95rem; font-weight:600; }
:where(.pg-nosotros) .sede-virtual li span { width:26px; height:26px; border-radius:50%; background:#e8315f; color:#fff; display:grid; place-items:center; flex-shrink:0; }
:where(.pg-nosotros) .sede-virtual li svg { width:14px; height:14px; display:block; }
:where(.pg-nosotros) #sedes .sede-cta--claro { --btn-ink:#fff; background:transparent; border-color:#fff; position:relative; }
:where(.pg-nosotros) #sedes .sede-cta--claro .label { color:#fff; }
:where(.pg-nosotros) .sedes-nota { margin-top:38px; }
/* ----- responsive ----- */
@media(max-width:980px){
  :where(.pg-nosotros) .sedes-wrap { grid-template-columns:1fr; gap:24px; }
  :where(.pg-nosotros) .sedes-tabs { flex-direction:row; overflow-x:auto; gap:14px; padding:4px 4px 16px; margin:0 -4px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  :where(.pg-nosotros) .sede-tab { flex:0 0 min(78%,320px); scroll-snap-align:start; align-items:flex-start; }
  :where(.pg-nosotros) .sede-go { display:none; }
  :where(.pg-nosotros) .sede-tab:hover { transform:none; }
}
@media(min-width:981px) and (max-width:1100px){
  :where(.pg-nosotros) .sede-virtual__mascota { width:38%; }
}
/* panel estrecho: la mascota cede sitio a la lista y al botón */
@media(min-width:721px){
  :where(.pg-nosotros) .sede-virtual h3 { max-width:min(12.6em,100%); }
  /* en em: escala con la tipografía y el título siempre cabe en 2 líneas */
  :where(.pg-nosotros) .sede-virtual p { max-width:min(440px,calc(48.5% - 10px)); }
  /* deja sitio a la mascota; el título conserva su ancho y queda completo */
}
@media(max-width:720px){
  :where(.pg-nosotros) .sede-info, :where(.pg-nosotros) .sede-info.sin-foto { grid-template-columns:1fr; gap:20px; padding:22px 0 0; }
  :where(.pg-nosotros) .sede-foto { aspect-ratio:16/9; }
  :where(.pg-nosotros) #sedes .sede-cta, :where(.pg-nosotros) #sedes a.sede-llegar { justify-content:center; }
  :where(.pg-nosotros) .sede-virtual { padding:34px 24px 32px; }
  :where(.pg-nosotros) .sede-virtual__mascota { display:none; }
  /* en móvil no se muestra */
}
@media (prefers-reduced-motion:reduce){
  :where(.pg-nosotros) .sede-foto.is-loading::after { animation:none; }
  :where(.pg-nosotros) .sede-foto img { transition:opacity .01ms; transform:none; }
  :where(.pg-nosotros) .sede-panel:not([hidden]) { animation:none; }
  :where(.pg-nosotros) .sede-tab, :where(.pg-nosotros) .sede-tab::before, :where(.pg-nosotros) .sede-ico, :where(.pg-nosotros) .sede-go, :where(.pg-nosotros) #sedes .btn-motion, :where(.pg-nosotros) #sedes .btn-motion .circle, :where(.pg-nosotros) #sedes .btn-motion .icon, :where(.pg-nosotros) #sedes .btn-motion .label { transition:none; }
}
/* ============================================================
   PULIDO FINAL — escala en pantallas grandes, espaciado, títulos y legibilidad
   Referencia de ancho: min(90vw, 2200px) como en programas/ninos
   ============================================================ */
:where(.pg-nosotros) { --ancho:clamp(1200px,86vw,2200px); --sec-y:clamp(4rem,6vw,6.75rem); }
html:has(body.pg-nosotros) { font-size:clamp(100%,calc(100% + (100vw - 1440px) * .0033),150%); }
/* crece suave desde 1440px hasta 4K */
/* --- Ancho: el contenido se extiende en pantallas grandes --- */
:where(.pg-nosotros) .nosotros-contenedor { max-width:var(--ancho); }
:where(.pg-nosotros) .principios-grid { max-width:calc(var(--ancho) * .95); }
:where(.pg-nosotros) .sedes-wrap { max-width:var(--ancho); }
:where(.pg-nosotros) .cert-card-container { max-width:calc(var(--ancho) * .9); }
:where(.pg-nosotros) .cta-band { max-width:var(--ancho); margin-inline:max(5vw,calc((100vw - var(--ancho)) / 2)); margin-bottom:var(--sec-y); }
/* --- Secciones más separadas --- */
:where(.pg-nosotros) section { padding-block:var(--sec-y); }
:where(.pg-nosotros) .nosotros-fragmento .nosotros-trayectoria { padding-top:clamp(40px,4vw,72px); padding-bottom:var(--sec-y); }
:where(.pg-nosotros) .nosotros-fragmento .nosotros-reconocimientos, :where(.pg-nosotros) .nosotros-fragmento .nosotros-alianzas { padding-block:var(--sec-y); }
/* Móvil: banda libre arriba para que las esferas no tapen el título */
@media(max-width:560px){
  :where(.pg-nosotros) .nosotros-fragmento .nosotros-alianzas { padding-top:calc(var(--sec-y) + 2.5rem); }
}
/* --- Nuestro propósito: cards más anchas; la foto y la tarjeta de cristal quedan dentro del contenido --- */
:where(.pg-nosotros) #proposito { max-width:2400px; margin-inline:auto; margin-bottom:clamp(56px,6vw,110px); --proposito-solape:clamp(0px,5vw,120px); }
@media(min-width:901px){
  :where(.pg-nosotros) #proposito { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); padding-bottom:clamp(56px,5vw,88px); }
  :where(.pg-nosotros) #proposito .proposito-cuerpo {
    max-width: none;
    padding: clamp(40px,4vw,72px) clamp(24px,2.4vw,72px) 0 max(32px,calc((min(100vw,2400px) - var(--ancho)) / 2));
  }
  :where(.pg-nosotros) #proposito .proposito-equipo { max-width:56rem; right:clamp(64px,6vw,160px); }
  /* Decoración: pegada a los bordes de la pantalla y recortada por ellos; si la ventana se achica, crece (mínimos en px) */
  :where(.pg-nosotros) #proposito { --izq-w:clamp(240px,22vw,528px); --der-h:clamp(200px,19vw,460px); }
  :where(.pg-nosotros) #proposito .proposito-deco--izq { z-index:-1; top:calc(100% - var(--izq-w) * .395); }
}
/* Decoración de "Nuestro propósito": ancla en el borde de pantalla (--bleed compensa el centrado a partir de 2400px) */
:where(.pg-nosotros) #proposito { --bleed:calc(-1 * max(0px, (100vw - 2400px) / 2)); overflow-x:clip; overflow-clip-margin:max(0px, calc((100vw - 2400px) / 2)); }
/* recorta en el borde de pantalla y no genera scroll horizontal */
:where(.pg-nosotros) #proposito .proposito-deco--izq { left:calc(var(--bleed) - var(--izq-w) * .18); width:var(--izq-w); }
/* der = linea-azul.webp: se dimensiona por la altura, arranca a la altura de la tarjeta de cristal, baja por debajo de la foto y asoma por el borde derecho */
:where(.pg-nosotros) #proposito .proposito-deco--der { width:auto; height:var(--der-h); top:calc(100% - var(--der-h) * .22); right:calc(var(--bleed) - var(--der-h) * .1); }
@media(max-width:900px){
  :where(.pg-nosotros) #proposito { --izq-w:clamp(120px,32vw,220px); --der-h:clamp(150px,40vw,280px); }
}
:where(.pg-nosotros) #proposito .proposito-tarjeta { padding:clamp(18px,1.5vw,34px); }
@media(min-width:2401px){
  :where(.pg-nosotros) #proposito .proposito-foto__marco { border-radius:0 2rem 2rem 0; overflow:hidden; }
}
/* --- Títulos en una línea (escritorio); en móvil se parten equilibrados --- */
:where(.pg-nosotros) .sec-title { font-size:clamp(1.7rem,3.3vw,3.2rem); max-width:none; text-wrap:balance; }
:where(.pg-nosotros) .sec-title::after { width:3.6rem; height:.32rem; }
:where(.pg-nosotros) #principios-valores .sec-title::after { width:4rem; height:.375rem; }
:where(.pg-nosotros) .nosotros-acento, :where(.pg-nosotros) .proposito-acento { width:4.75rem; height:.32rem; }
@media(min-width:900px){
  :where(.pg-nosotros) .sec-title { white-space:nowrap; }
}
/* --- Hero: título más grande + tarjetas "+20 años" con más peso y sombra --- */
:where(.pg-nosotros) .nosotros-trayectoria h1 { font-size:clamp(2.3rem,4.4vw,4.8rem); line-height:1.04; }
:where(.pg-nosotros) .nosotros-indicadores { max-width:min(100%,35rem); }
:where(.pg-nosotros) .nosotros-indicador {
  padding-inline: 10px;
  box-shadow: 0 12px 30px rgba(10,33,73,.24), 0 3px 8px rgba(10,33,73,.12);
  border-color: rgba(10,33,73,.10);
}
:where(.pg-nosotros) .nosotros-indicador strong { font-weight:800; }
:where(.pg-nosotros) .nosotros-indicador strong.nosotros-indicador__cifra { font-size:3rem; }
:where(.pg-nosotros) .nosotros-indicador small { font-size:.8rem; font-weight:700; color:#2b3550; }
@media(max-width:480px){
  :where(.pg-nosotros) .nosotros-indicador strong { font-size:.9rem; }
  :where(.pg-nosotros) .nosotros-indicador strong.nosotros-indicador__cifra { font-size:2.2rem; }
  :where(.pg-nosotros) .nosotros-indicador small { font-size:.7rem; }
}
/* --- Certificaciones: logos proporcionales en pantallas grandes --- */
@media(min-width:769px){
  :where(.pg-nosotros) .cert-card-item { max-width:clamp(11.5rem,12vw,17rem); }
  :where(.pg-nosotros) .cert-card-item img { max-height:clamp(10rem,9vw,15rem); }
}
/* --- Texto un poco más grande --- */
:where(.pg-nosotros) .sec-intro { font-size:1.1rem; max-width:45rem; }
:where(.pg-nosotros) .sellos-nota { font-size:1rem; }
:where(.pg-nosotros) .nosotros-trayectoria .nosotros-trayectoria__intro { font-size:1.08rem; max-width:min(100%,34rem); }
:where(.pg-nosotros) #proposito .proposito-intro { font-size:1.02rem; }
:where(.pg-nosotros) #proposito .proposito-pastilla { font-size:.7rem; }
:where(.pg-nosotros) #proposito .proposito-tarjeta h3 { font-size:clamp(1.2rem,1.9vw,1.65rem); }
:where(.pg-nosotros) #proposito .proposito-tarjeta p { font-size:.84rem; hyphens:auto; }
:where(.pg-nosotros) #proposito .proposito-equipo__titulo { font-size:clamp(.84rem,1.1vw,1.02rem); }
:where(.pg-nosotros) #proposito .proposito-equipo__texto { font-size:clamp(.74rem,1vw,.9rem); }
@media(max-width:560px){
  :where(.pg-nosotros) #proposito .proposito-equipo__titulo { font-size:.8rem; }
  :where(.pg-nosotros) #proposito .proposito-equipo__texto { font-size:.74rem; }
}
:where(.pg-nosotros) .principios-head { font-size:1.4rem; }
:where(.pg-nosotros) .principios-text { font-size:1rem; }
:where(.pg-nosotros) .principios-icon { width:2.6rem; height:2.6rem; background-size:1.25rem; }
:where(.pg-nosotros) .sede-pill { font-size:.7rem; }
:where(.pg-nosotros) .sede-ico { width:3.4rem; height:3.4rem; }
:where(.pg-nosotros) .sede-ico svg { width:1.6rem; height:1.6rem; }
:where(.pg-nosotros) .sede-txt b { font-size:1.5rem; }
:where(.pg-nosotros) .sede-txt small { font-size:.9rem; }
:where(.pg-nosotros) .sede-datos h3 { font-size:clamp(1.65rem,2.2vw,2rem); }
:where(.pg-nosotros) .sede-lista li { font-size:1rem; }
:where(.pg-nosotros) .li-ico { width:1.9rem; height:1.9rem; }
:where(.pg-nosotros) .sede-mapa { height:clamp(16rem,26vw,34rem); }
@media(min-width:721px){
  :where(.pg-nosotros) .sede-info { grid-template-columns:clamp(9.5rem,14vw,16rem) minmax(0,1fr) auto; }
  :where(.pg-nosotros) .sede-info.sin-foto { grid-template-columns:minmax(0,1fr) auto; }
}
:where(.pg-nosotros) .nosotros-acciones .btn-motion .label, :where(.pg-nosotros) .nosotros-acciones .btn-line, :where(.pg-nosotros) #sedes .btn-motion .label { font-size:.95rem; }
/* --- Nuestro propósito: la foto se muestra COMPLETA (sin recortar a nadie) ---
   Antes la foto llenaba una caja de altura fija (object-fit:cover) y en pantallas anchas
   cortaba el lado derecho. Ahora la foto manda: conserva sus proporciones y la fila crece
   lo necesario; las tarjetas de Misión y Visión se centran verticalmente a su lado. */
:where(.pg-nosotros) #proposito .proposito-foto { min-height:0; height:auto; align-self:center; }
:where(.pg-nosotros) #proposito .proposito-foto__marco { position:relative; inset:auto; }
:where(.pg-nosotros) #proposito .proposito-foto__marco img { width:100%; height:auto; object-fit:contain; object-position:center; }
@media(min-width:901px){
  :where(.pg-nosotros) #proposito .proposito-cuerpo { align-self:center; padding-bottom:clamp(8px,1vw,24px); }
}
@media(max-width:900px){
  :where(.pg-nosotros) #proposito .proposito-foto { height:auto; min-height:0; }
}
/* --- "Cómo llegar": botón azul sólido, ícono de navegación + texto + ícono de enlace externo --- */
:where(.pg-nosotros) #sedes a.sede-llegar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  white-space: nowrap;
  padding: 16px 22px;
  border-radius: 12px;
  border: 0;
  background: #1570ef;
  color: #fff;
  text-decoration: none;
  font-family: 'Montserrat',system-ui,sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  transition: background-color .25s var(--ease);
}
:where(.pg-nosotros) #sedes a.sede-llegar svg { width:1.3rem; height:1.3rem; flex-shrink:0; display:block; }
:where(.pg-nosotros) #sedes a.sede-llegar:hover, :where(.pg-nosotros) #sedes a.sede-llegar:focus-visible { background:#0f5fd0; }
:where(.pg-nosotros) #sedes a.sede-llegar:focus-visible { outline:3px solid var(--sd-azul); outline-offset:3px; }
/* ===== TIMELINE HORIZONTAL (prefijo timeline-) ===== */
:where(.pg-nosotros) .timeline-section {
  --timeline-navy: #0a2149;
  --timeline-coral: #e8315f;
  --timeline-azul: #1274bd;
  --timeline-violeta: #4a3a8c;
  --timeline-texto: #5d6474;
  --timeline-accent: #e8315f;
  --timeline-muted: #6b7280;
  --tl-head: 96px;
  /* franja reservada arriba para el título: los hitos nunca la invaden */
  position: relative;
  background: #fff;
}
:where(.pg-nosotros) .timeline-sticky { position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; }
:where(.pg-nosotros) .timeline-track {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  height: 100%;
  width: max-content;
  padding: 0 5vw;
  will-change: transform;
}
:where(.pg-nosotros) .timeline-hero-img {
  flex-shrink: 0;
  width: min(26vw, 320px);
  height: min(26vw, 320px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(10,33,73,.18);
}
:where(.pg-nosotros) .timeline-hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
:where(.pg-nosotros) .timeline-content { position:relative; flex-shrink:0; width:min(170vw, 1900px); height:max(min(72vh, 560px), 460px); }
:where(.pg-nosotros) .timeline-header { position:absolute; left:0; top:0; z-index:3; max-width:380px; }
:where(.pg-nosotros) .timeline-title {
  font-family: var(--disp), 'Bricolage Grotesque', sans-serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  color: var(--timeline-navy);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
:where(.pg-nosotros) .timeline-period {
  font-family: var(--mono), Montserrat, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--timeline-muted);
  margin: 0;
  margin-top: -8px;
}
:where(.pg-nosotros) .timeline-line-wrap {
  position: absolute;
  left: 0;
  top: calc(50% + var(--tl-head) / 2);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  height: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
}
:where(.pg-nosotros) .timeline-line { height:2.5px; width:0%; max-width:100%; background:var(--timeline-accent); border-radius:2px; }
:where(.pg-nosotros) .timeline-line-dot { width:11px; height:11px; border-radius:50%; background:var(--timeline-accent); flex-shrink:0; }
:where(.pg-nosotros) .timeline-line-dot--start { margin-right:-1px; }
:where(.pg-nosotros) .timeline-line-dot--end { margin-left:-1px; }
/* ===== Filas ancladas a la línea central ===== */
:where(.pg-nosotros) .timeline-row { position:absolute; left:0; right:0; display:flex; z-index:2; gap:clamp(160px, 20vw, 320px); }
:where(.pg-nosotros) .timeline-row--top { bottom:calc(50% - var(--tl-head) / 2); align-items:flex-end; padding-bottom:48px; padding-left:0; }
:where(.pg-nosotros) .timeline-row--bottom { top:calc(50% + var(--tl-head) / 2); align-items:flex-start; padding-top:48px; padding-left:clamp(120px, 15vw, 240px); }
:where(.pg-nosotros) .timeline-item {
  flex: 0 0 clamp(180px, 20vw, 250px);
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s cubic-bezier(.22,.9,.35,1), transform .5s cubic-bezier(.22,.9,.35,1);
}
:where(.pg-nosotros) .timeline-item.is-visible { opacity:1; transform:translateY(0); }
:where(.pg-nosotros) .timeline-item-title {
  font-family: var(--disp), 'Bricolage Grotesque', sans-serif;
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 800;
  color: var(--timeline-navy);
  line-height: 1.15;
  margin: 0 0 8px;
}
:where(.pg-nosotros) .timeline-item-desc {
  font-size: clamp(12.5px, 1.1vw, 14.5px);
  line-height: 1.45;
  color: var(--timeline-muted);
  margin: 0;
  max-width: 230px;
}
:where(.pg-nosotros) .timeline-stem {
  position: absolute;
  left: 6px;
  width: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
:where(.pg-nosotros) .timeline-row--top .timeline-stem {
  left: 235px;
  bottom: -47px;
  height: 48px;
  justify-content: flex-start;
  flex-direction: column-reverse;
}
:where(.pg-nosotros) .timeline-row--top .timeline-stem-line {
  width: 2px;
  flex: 1;
  background: var(--timeline-accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .4s cubic-bezier(.22,.9,.35,1);
}
:where(.pg-nosotros) .timeline-row--top .timeline-stem-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--timeline-accent);
  flex-shrink: 0;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.22,.9,.35,1) .12s;
}
:where(.pg-nosotros) .timeline-row--bottom .timeline-stem { left:200px; top:-47px; height:48px; justify-content:flex-start; }
:where(.pg-nosotros) .timeline-row--bottom .timeline-stem-line {
  width: 2px;
  flex: 1;
  background: var(--timeline-accent);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform .4s cubic-bezier(.22,.9,.35,1);
}
:where(.pg-nosotros) .timeline-row--bottom .timeline-stem-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--timeline-accent);
  flex-shrink: 0;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.22,.9,.35,1) .12s;
}
:where(.pg-nosotros) .timeline-item.is-visible .timeline-stem-line { transform:scaleY(1); }
:where(.pg-nosotros) .timeline-item.is-visible .timeline-stem-dot { transform:scale(1); }
/* ===== Móvil: scroll horizontal nativo ===== */
@media (max-width:900px), (max-height:500px){
  :where(.pg-nosotros) .timeline-sticky { position:relative; height:auto; overflow:visible; }
  :where(.pg-nosotros) .timeline-track { overflow-x:auto; -webkit-overflow-scrolling:touch; padding:16px 5vw 40px; width:100%; max-width:100vw; }
  :where(.pg-nosotros) .timeline-hero-img { width:min(62vw, 260px); height:min(62vw, 260px); }
  :where(.pg-nosotros) .timeline-content { width:min(240vw, 1500px); height:auto; min-height:560px; }
  :where(.pg-nosotros) .timeline-row { gap:min(16vw, 120px); }
  :where(.pg-nosotros) .timeline-item { flex-basis:min(58vw, 220px); }
  :where(.pg-nosotros) .timeline-line { width:100% !important; }
  :where(.pg-nosotros) .timeline-item { opacity:1; transform:none; }
  :where(.pg-nosotros) .timeline-stem-line { transform:scaleY(1); }
  :where(.pg-nosotros) .timeline-stem-dot { transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  :where(.pg-nosotros) .timeline-item, :where(.pg-nosotros) .timeline-stem-line, :where(.pg-nosotros) .timeline-stem-dot { transition:none !important; opacity:1 !important; transform:none !important; }
  :where(.pg-nosotros) .timeline-stem-line { transform:scaleY(1) !important; }
  :where(.pg-nosotros) .timeline-stem-dot { transform:scale(1) !important; }
}