@font-face{font-family:'Poppins';src:url('/fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --navy-950:#07162F; --navy-900:#0A1E42; --navy-800:#102A5C;
  --navy-700:#16376F; --navy-600:#1E4A92;
  --teal-400:#6FCEDD; --teal-500:#4EBDCE; --teal-600:#2E9FB4; --teal-700:#10788B;
  --teal-050:#EAF7FA;
  --ink:#152033; --body:#4A566B; --muted:#6B7891;
  --line:#E2E8F1; --soft:#F4F8FB; --white:#fff;
  --wa:#1EA855; --wa-dark:#177F41;
  --wrap:1160px; --r:16px; --r-lg:24px;
  --shadow-sm:0 1px 2px rgba(10,30,66,.06),0 2px 8px rgba(10,30,66,.05);
  --shadow-md:0 4px 12px rgba(10,30,66,.08),0 12px 28px rgba(10,30,66,.08);
  --shadow-lg:0 18px 48px rgba(10,30,66,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--body);background:var(--white);line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:var(--teal-700);text-decoration:none}
h1,h2,h3,h4{color:var(--ink);line-height:1.18;margin:0 0 .6em;font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.65rem,1.1rem + 2.2vw,2.5rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.section{padding-block:clamp(56px,7vw,104px)}
.section--soft{background:var(--soft)}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-700);margin-bottom:.9rem}
.lead{font-size:1.06rem;color:var(--body);max-width:60ch}
.head-center{text-align:center;max-width:660px;margin:0 auto clamp(36px,4vw,60px)}
.head-center .lead{margin-inline:auto}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;font-size:1rem;line-height:1;padding:1rem 1.6rem;border-radius:999px;
  border:2px solid transparent;cursor:pointer;transition:transform .18s ease,
  background-color .18s ease,box-shadow .18s ease,color .18s ease;text-align:center}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--teal-500);color:var(--navy-950);box-shadow:0 6px 20px rgba(78,189,206,.32)}
.btn--primary:hover{background:var(--teal-400);box-shadow:0 10px 26px rgba(78,189,206,.4)}
.btn--navy{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-sm)}
.btn--navy:hover{background:var(--navy-700);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--outline{background:#fff;color:var(--navy-800);border-color:var(--line)}
.btn--outline:hover{border-color:var(--teal-500);color:var(--teal-700)}
.btn--sm{padding:.7rem 1.25rem;font-size:.92rem}
.btn--block{width:100%}

:where(a,button,summary,details):focus-visible{outline:3px solid var(--teal-600);
  outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy-800);color:#fff;
  padding:.8rem 1.2rem;z-index:200;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.94);
  /* El prefijo -webkit- hace falta para Safari 17 y anteriores, que todavia
     tienen bastantes iPhone y iPad en uso. Sin el se pierde solo el desenfoque:
     el fondo sigue siendo rgba(255,255,255,.94), asi que degrada sin romperse. */
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:700;color:var(--navy-800);
  letter-spacing:-.02em;font-size:1.12rem}
.brand img{width:44px;height:44px}
/* ⚠️ --body y no --muted: con --muted este texto daba 4,45:1 sobre blanco, por
   debajo del minimo AA de 4,5. Es el mismo 4,45 que ya habia dado el subtitulo
   de los enlaces cruzados el 13/09 — la causa siempre es --muted sobre blanco.
   Con --body queda en 7,41:1. Venia asi desde la v1.0.0. */
.brand span small{display:block;font-size:.62rem;font-weight:500;color:var(--body);
  letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{color:var(--navy-800);font-weight:500;font-size:.96rem;position:relative;padding-block:.3rem}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--teal-500);transition:width .22s ease}
.nav a:hover::after{width:100%}
.nav .btn{display:none}  /* solo aparece dentro del menú móvil */
.hdr__cta{display:flex;align-items:center;gap:.75rem}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--navy-800)}
.burger svg{width:26px;height:26px}

/* ---------- Hero ---------- */
.hero{position:relative;background:
    radial-gradient(1100px 520px at 78% -8%,rgba(78,189,206,.34),transparent 62%),
    radial-gradient(760px 420px at 6% 104%,rgba(30,74,146,.5),transparent 66%),
    linear-gradient(168deg,var(--navy-800) 0%,var(--navy-900) 52%,var(--navy-950) 100%);
  color:#fff;padding-top:clamp(120px,14vw,170px);padding-bottom:clamp(110px,13vw,160px);
  overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 62px);}
.hero h1{color:#fff;font-size:clamp(2.1rem,1.2rem + 3.9vw,3.65rem);margin-bottom:.45em;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--teal-500);display:block}
.hero p{color:#CFDAEA;font-size:clamp(1.02rem,.97rem + .3vw,1.2rem);max-width:54ch;margin-bottom:2.1rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.6rem}
.hero__facts{display:flex;flex-wrap:wrap;gap:.6rem 2rem;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.16)}
.hero__facts li{display:flex;align-items:center;gap:.55rem;color:#CFDAEA;font-size:.94rem}
.hero__facts svg{width:19px;height:19px;color:var(--teal-500);flex:none}
.waves{position:absolute;left:0;right:0;bottom:-1px;z-index:1;width:100%;height:auto;
  pointer-events:none;display:block}

/* ---------- Programas ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.5rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem 1.75rem;
  height:100%;display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.card__icon{width:56px;height:56px;border-radius:16px;background:var(--teal-050);
  display:grid;place-items:center;margin-bottom:1.4rem;color:var(--teal-700)}
.card__icon svg{width:28px;height:28px}
.card p{font-size:.97rem;margin-bottom:1.5rem}
.card__list{margin-bottom:1.75rem;display:grid;gap:.5rem}
.card__list li{display:flex;gap:.6rem;font-size:.93rem;color:var(--body)}
.card__list svg{width:17px;height:17px;color:var(--teal-600);flex:none;margin-top:.28rem}
.card .btn{margin-top:auto}
.card--feature{background:linear-gradient(165deg,var(--navy-800),var(--navy-950));
  border-color:transparent;color:#CFDAEA;box-shadow:var(--shadow-lg)}
.card--feature h3{color:#fff}
.card--feature p,.card--feature .card__list li{color:#BECCE2}
.card--feature .card__icon{background:rgba(78,189,206,.16);color:var(--teal-500)}
.card--feature .card__list svg{color:var(--teal-500)}
.card--feature:hover{box-shadow:0 24px 60px rgba(7,22,47,.3)}
.tag{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--teal-500);color:var(--navy-950);padding:.35rem .8rem;border-radius:999px;margin-bottom:1.1rem}

/* ---------- Pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;list-style:none}
.step{position:relative;padding-top:.4rem}
.step__n{width:46px;height:46px;border-radius:14px;background:var(--navy-800);color:#fff;
  font-weight:700;display:grid;place-items:center;margin-bottom:1.1rem;font-size:1.05rem}
.step h3{font-size:1.08rem;margin-bottom:.4rem}
.step p{font-size:.95rem;margin:0}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:.85rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease}
.faq details[open]{border-color:var(--teal-500);box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 3.2rem 1.15rem 1.4rem;
  font-weight:600;color:var(--ink);position:relative;font-size:1rem;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.4rem;top:1.45rem;width:11px;height:11px;
  border-right:2.5px solid var(--teal-600);border-bottom:2.5px solid var(--teal-600);
  transform:rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.6rem}
.faq__a{padding:0 1.4rem 1.35rem;font-size:.96rem}
.faq__a p:last-child{margin-bottom:0}

/* ---------- Ubicación ---------- */
.place{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.place__info{padding:clamp(28px,3.4vw,52px)}
.place__info h2{margin-bottom:.5em}
.data{display:grid;gap:1.35rem;margin:2rem 0}
.data li{display:flex;gap:1rem}
.data svg{width:22px;height:22px;color:var(--teal-600);flex:none;margin-top:.2rem}
.data h3{font-size:.94rem;margin:0 0 .15rem;color:var(--ink)}
.data p{margin:0;font-size:.95rem}
.map{position:relative;min-height:380px;background:
    linear-gradient(150deg,#DCE9F2 0%,#C9DEEB 48%,#B9D3E4 100%);display:grid;place-items:center}
.map::before{content:"";position:absolute;inset:0;opacity:.5;background-image:
  linear-gradient(rgba(255,255,255,.55) 1.5px,transparent 1.5px),
  linear-gradient(90deg,rgba(255,255,255,.55) 1.5px,transparent 1.5px);background-size:46px 46px}
.map__facade{position:relative;text-align:center;padding:1.5rem}
.map__pin{width:54px;height:54px;margin:0 auto 1rem;border-radius:50%;background:var(--navy-800);
  display:grid;place-items:center;box-shadow:0 8px 22px rgba(10,30,66,.28)}
.map__pin svg{width:26px;height:26px;color:var(--teal-500)}
.map__facade p{color:var(--navy-800);font-weight:600;font-size:.95rem;margin-bottom:1rem}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Footer ---------- */
.ft{background:var(--navy-950);color:#93A3BE;padding-block:clamp(44px,5vw,68px) 28px;font-size:.92rem}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem}
.ft h3,.ft h4{color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:1.1rem;font-weight:700}
.ft a{color:#93A3BE;transition:color .18s ease}
.ft a:hover{color:var(--teal-500)}
.ft__brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.ft__brand img{width:52px;height:52px}
.ft__brand strong{color:#fff;font-size:1.15rem;display:block;letter-spacing:-.02em}
.ft__brand small{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#93A3BE}
.ft__links{display:grid;gap:.6rem}
.ft__social{display:flex;gap:.75rem;margin-top:1.2rem}
.ft__social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.07);
  display:grid;place-items:center;transition:background .18s ease,transform .18s ease}
.ft__social a:hover{background:var(--teal-600);transform:translateY(-2px)}
.ft__social svg{width:19px;height:19px;color:#fff}
.ft__bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.6rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.85rem}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:99;width:58px;height:58px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;box-shadow:0 8px 26px rgba(30,168,85,.42);
  transition:transform .2s ease,background .2s ease}
.wa-float:hover{background:var(--wa-dark);transform:scale(1.07)}
.wa-float svg{width:30px;height:30px;color:#fff}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wa);animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .place{grid-template-columns:1fr}
  .map{min-height:300px}
  .ft__grid{grid-template-columns:1fr 1fr;gap:2rem}
}
/* ⚠️ La CABECERA colapsa a 1160px, no a 768. NO es un numero a ojo: con los tres
   idiomas y sin partir palabras, la fila necesita 1124 px (medido barriendo de
   1100 a 1164 de 8 en 8; el español es el idioma mas ancho). 1160 es --wrap, o
   sea el ancho al que el contenido deja de crecer, y deja 36 px de holgura.
   Historia: 768 hasta la v1.3.1 sin selector · 960 en la v1.4.0 con dos idiomas ·
   1160 desde la v1.5.0 con tres. Cada cosa que se agregue a esta fila obliga a
   volver a medir; hay una prueba que barre los anchos y otra que comprueba que
   no se parta ninguna palabra. El resto de reglas moviles (hero, pie) se quedan
   en 768: alli nunca hubo problema. */
@media (max-width:1160px){
  .burger{display:block}
  .nav{position:fixed;inset:72px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:.5rem 20px 1.25rem;
    box-shadow:var(--shadow-md);transform:translateY(-130%);transition:transform .28s ease;visibility:hidden}
  .nav[data-open="true"]{transform:translateY(0);visibility:visible}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.02rem}
  .nav a::after{display:none}
}
@media (max-width:768px){
  /* Solo aqui desaparece el CTA del header y aparece el del menu: entre 769 y
     960 px el del header SI cabe, y es la conversion — mejor visible que oculto. */
  .nav .btn{display:inline-flex;margin-top:1rem;border-bottom:0}
  .hdr__cta .btn{display:none}
  .hero__actions .btn{width:100%}
  .ft__grid{grid-template-columns:1fr}
  .ft__bottom{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .btn:hover,.card:hover,.wa-float:hover{transform:none}
}

/* =====================================================================
   COMPONENTES MULTI-PÁGINA  (añadidos al pasar de one-page a 4 páginas)
   ===================================================================== */

/* ---- Menú desplegable de Programas (sin JS para abrir: <details>) ---- */
.nav__group{position:relative}
.nav__group>summary{list-style:none;cursor:pointer;color:var(--navy-800);font-weight:500;
  font-size:.96rem;padding-block:.3rem;display:inline-flex;align-items:center;gap:.35rem}
.nav__group>summary::-webkit-details-marker{display:none}
.nav__group>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease}
.nav__group[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.nav__group>summary:focus-visible{outline:2px solid var(--teal-600);outline-offset:3px;border-radius:4px}
.nav__sub{position:absolute;top:calc(100% + 14px);left:-16px;min-width:270px;margin:0;padding:.5rem;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-md);z-index:120}
.nav__sub li{margin:0}
.nav__sub a{display:block;padding:.6rem .75rem;border-radius:10px;font-size:.94rem;
  color:var(--navy-800);white-space:nowrap}
.nav__sub a::after{display:none}
.nav__sub a:hover,.nav__sub a:focus-visible{background:var(--teal-050);color:var(--teal-700)}
.nav a[aria-current="page"],.nav__sub a[aria-current="page"]{color:var(--teal-700);font-weight:700}

/* ---- Migas de pan ---- */
.crumbs{padding:calc(72px + 1.25rem) 0 0}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0;padding:0;list-style:none;
  font-size:.85rem;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:.45rem}
.crumbs li+li::before{content:"›";color:var(--line);font-size:1.1rem;line-height:1}
.crumbs a{color:var(--teal-700)}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--body)}

/* ---- Cabecera de página interior ---- */
.page-head{padding:1.5rem 0 0}
.page-head h1{font-size:clamp(1.9rem,1.2rem + 2.8vw,3rem);margin-bottom:.5rem}
.page-head .lead{font-size:clamp(1.02rem,.98rem + .3vw,1.15rem);color:var(--body);max-width:62ch}
.page-head .hero__actions{margin-top:1.75rem}

/* ---- Cuerpo de texto largo ---- */
.wrap--narrow{max-width:840px}
.prose{max-width:70ch}
.wrap--narrow .prose{max-width:none}
.prose h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.85rem);margin-top:2.4em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.8em;font-size:1.08rem}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.35rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--teal-600)}
.prose strong{color:var(--ink)}

/* ---- Aviso "esto lo confirmamos contigo" ---- */
.callout{border-left:4px solid var(--teal-500);background:var(--teal-050);
  padding:1.1rem 1.25rem;border-radius:0 var(--r) var(--r) 0;margin:0 0 1.6em}
.callout p{margin:0;color:#0F3F4C}
.callout p+p{margin-top:.6em}

/* ---- Bloque NAP del pie ---- */
.nap{font-style:normal;line-height:1.75;color:#C4D2E8}
.nap strong{color:#fff;display:block;margin-bottom:.25rem}
.nap a{color:var(--teal-400)}
.nap a:hover{color:#fff;text-decoration:underline}
.nap__links{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.4rem .75rem}

/* ---- Enlaces a los otros programas ---- */
.crosslinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;
  margin:2.5rem 0 0;padding:0;list-style:none}
.crosslinks li{margin:0}
.crosslinks a{display:block;height:100%;padding:1.15rem 1.25rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);
  color:var(--navy-800);font-weight:600;transition:box-shadow .2s ease,transform .2s ease}
.crosslinks a:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);color:var(--teal-700)}
.crosslinks span{display:block;font-weight:400;font-size:.9rem;color:var(--body);margin-top:.3rem}

/* ---- Barra de acción fija en móvil (solo páginas de programa) ---- */
.cta-bar{display:none}
@media (max-width:768px){
  body.has-cta-bar{padding-bottom:76px}
  body.has-cta-bar .wa-float{display:none}
  .cta-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:98;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);
    padding:.7rem 20px calc(.7rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 24px rgba(10,30,66,.1)}
  .cta-bar .btn{width:100%}
}

/* ---- Tablas (horarios y precios, cuando existan los datos) ---- */
.table-wrap{overflow-x:auto;margin:0 0 1.6em;border:1px solid var(--line);border-radius:var(--r)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:480px;font-size:.95rem}
.table-wrap caption{text-align:left;padding:.9rem 1rem;font-weight:700;color:var(--ink)}
.table-wrap th,.table-wrap td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.table-wrap thead th{background:var(--soft);color:var(--ink);font-size:.85rem;
  text-transform:uppercase;letter-spacing:.04em}
.table-wrap tbody tr:last-child th,.table-wrap tbody tr:last-child td{border-bottom:0}

@media (max-width:1160px){
  .nav__group{border-bottom:1px solid var(--line)}
  .nav__group>summary{padding:.95rem 0;font-size:1.02rem;justify-content:space-between}
  .nav__sub{position:static;min-width:0;border:0;box-shadow:none;padding:0 0 .6rem .9rem;
    border-left:2px solid var(--teal-050);margin-left:.2rem}
  .nav__sub a{padding:.55rem 0;white-space:normal;border-bottom:0}
  .crumbs{padding-top:calc(72px + 1rem)}
}

/* ---- Bloque de contacto dentro del cuerpo de texto ---- */
.nap-body{color:var(--body);line-height:1.9}
.nap-body a{font-weight:500}
.nap-body a:hover{text-decoration:underline}

/* =====================================================================
   v1.3.0 — accesibilidad y navegación entre páginas
   ===================================================================== */

/* ---- WCAG 2.2 · 2.5.8 Objetivo (mínimo): 24×24 CSS px ----
   Los enlaces del pie iban en una lista y medían 209×20. Los enlaces dentro de
   un párrafo (el NAP, los del cuerpo) están exentos por la propia norma, porque
   su alto lo fija el interlineado del texto que los rodea. Estos no lo estaban. */
.ft__links a{display:inline-block;min-height:24px;padding-block:2px}
.nav__sub a{min-height:24px}
.crumbs a{display:inline-block;min-height:24px;padding-block:2px}

/* ---- Transiciones entre documentos ----
   Mejora progresiva pura: el navegador que no la soporta ignora la regla y
   navega como siempre. Hace que ir de la home a un programa se sienta continuo
   en vez de un parpadeo en blanco. */
@view-transition{navigation:auto}

/* La cabecera es la misma en las cinco páginas: se le da nombre propio para que
   no desaparezca y reaparezca en cada navegación. */
.hdr{view-transition-name:cabecera}
.wa-float{view-transition-name:whatsapp-flotante}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none}
}

/* ---- Dos utilidades que reemplazan los style= en línea ----
   Existen para que la CSP pueda declarar style-src sin 'unsafe-inline':
   un solo atributo style= en el HTML obliga a abrir la política entera. */
.cta-centrado{text-align:center;margin-top:clamp(32px,4vw,52px)}
.bloque-cierre{margin-top:2rem}

/* =====================================================================
   v1.4.0 — SELECTOR DE IDIOMA
   ---------------------------------------------------------------------
   Un solo bloque en el DOM, dentro de <nav id="nav">: en escritorio cae a la
   izquierda del CTA de WhatsApp y en movil entra dentro del menu desplegado.
   NO se duplica el marcado: duplicar un control de cabecera es exactamente
   como se desincronizan las cabeceras entre paginas.
   Palabras y no banderas: una bandera es un pais, no un idioma. Y cada idioma
   escrito en su propio idioma, que es lo que un visitante busca con la vista.
   ===================================================================== */
.lang{display:flex;align-items:center;gap:.9rem}
.lang__ico{width:17px;height:17px;flex:none;color:var(--body)}
.lang a,.lang__now{display:inline-flex;align-items:center;min-height:24px;
  padding-block:2px;font-size:.88rem}
.lang a{color:var(--body);font-weight:500}
.lang a:hover{color:var(--teal-700)}
.lang a::after{display:none}          /* sin el subrayado animado de .nav a */
/* ⚠️ Los TRES idiomas figuran siempre. El actual NO es enlace: va como <span> con
   aria-current y algo mas oscuro, para que se lea "estas aqui". Mostrar solo los
   alternativos hacia que la lista cambiara de pagina a pagina y confundia. */
.lang__now{color:var(--ink);font-weight:700;cursor:default}
/* Punto separador en el hueco entre idiomas: posicionado FUERA de la caja del
   enlace, para no agrandar el area tactil, que mide justo los 24 px de la norma. */
.lang :is(a,span) + :is(a,span){position:relative}
.lang :is(a,span) + :is(a,span)::before{content:"·";position:absolute;left:-.52rem;
  color:var(--muted);pointer-events:none}

@media (max-width:1160px){
  .lang{padding:.95rem 0;border-bottom:1px solid var(--line);gap:1rem}
  .lang a{font-size:1rem;padding:0;border-bottom:0}
}

/* Aviso honesto de /en/ y /pt/: el negocio responde en espanol.
   El margen negativo colapsa contra el margin-bottom de .hero__actions
   (2.6rem) y deja 1.1rem: es la separacion que queremos y es predecible. */
.nota-idioma{margin:-1.5rem 0 0;font-size:.9rem;color:var(--body)}
/* Dentro del hero hace falta ganarle a .hero p, que lo pondria en 19 px y lo
   haria parecer un segundo parrafo de entrada en vez de una salvedad. */
.hero p.nota-idioma{margin:-1.5rem 0 0;font-size:.9rem;color:rgba(255,255,255,.8)}

/* /en/ y /pt/ no llevan migas de pan —son raiz de idioma, hermanas de la home,
   no hijas de nada—, asi que el hueco de la cabecera fija lo pone la propia
   seccion. Sin esto el H1 queda POR DEBAJO del header y no se lee. */
.page-head--solo{padding-top:calc(72px + 1.5rem)}

/* =====================================================================
   v1.5.0 — LA FILA DE LA CABECERA NO PARTE PALABRAS
   ---------------------------------------------------------------------
   ⚠️ Sin esto el fallo es INVISIBLE para las pruebas: flex encoge los items
   hasta su ancho de min-content y el texto se parte en dos lineas DENTRO de
   los 72 px, asi que ni el scroll horizontal ni la altura de .hdr cambian y
   todo parece correcto mientras se lee "Horarios y / precios" y
   "SWIMMING / SCHOOL". Con nowrap, si algun dia no cabe, la fila DESBORDA —
   y eso si lo detecta la prueba de anchos. Fallo detectable > fallo silencioso.
   ===================================================================== */
.brand span,.brand span small,.nav>a,.nav__group>summary,.lang a,.lang__now{white-space:nowrap}

/* =====================================================================
   v1.5.2 — ENLACES EN TEXTO CORRIDO, SUBRAYADOS
   ---------------------------------------------------------------------
   WCAG 1.4.1 (Uso del color, nivel A): un enlace dentro de un parrafo no
   puede distinguirse SOLO por color. Medido por Lighthouse sobre las tres
   paginas de programa: el teal del enlace contra el gris del texto que lo
   rodea da 1,43:1, muy por debajo del minimo de 3:1 que exigiria el color
   por si solo. Con subrayado el criterio se cumple sin depender del color.
   Solo afecta a enlaces SIN clase: los botones y las tarjetas quedan fuera.
   ===================================================================== */
.prose p > a:not([class]),
.nap-body a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose p > a:not([class]):hover,
.nap-body a:hover{text-decoration-thickness:2px}