@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.
   ⚠️ v1.12.0 (21/10): esa holgura se habia gastado sin que nadie lo viera —en /pt/
   faltaban 10 px y el boton «Fale conosco» salia en dos lineas: la prueba de
   palabras no miraba el boton—. Con banderas y codigos (ES · EN · PT) la fila mas
   ancha, la del portugues, mide 1042 px sobre 1120 utiles: 78 px de holgura, los
   mismos en cualquier ancho de escritorio, porque --wrap topea el ancho util. */
@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  ·  v1.12.0 — CON BANDERAS
   ---------------------------------------------------------------------
   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.
   v1.12.0, pedido del cliente: cada idioma lleva su bandera (España, Estados
   Unidos, Brasil). La bandera ACOMPAÑA y la palabra manda: una bandera es un
   pais, no un idioma, asi que va aria-hidden y sin <title>, y el idioma sigue
   escrito. SVG dentro del HTML y nunca emoji: Chrome y Edge sobre Windows no
   dibujan los emoji de bandera, muestran las dos letras del pais.
   ⚠️ En escritorio NO entran bandera + nombre completo: ya con los nombres solos
   a la fila del portugues le faltaban 10 px y el boton «Fale conosco» se partia
   en dos lineas (medido el 21/10 a 1161, 1200 y 1440 px: el ancho util es 1120
   en los tres, porque --wrap lo topea). Por eso en escritorio se ve el codigo
   (ES · EN · PT) y el nombre queda para el lector de pantalla; en el menu del
   celular se ve el nombre completo.
   ===================================================================== */
.lang{display:flex;align-items:center;gap:.9rem}
.lang a,.lang__now{display:inline-flex;align-items:center;gap:.4rem;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}
/* La bandera: tamaño fijo en px y proporcion 3:2. El filete de 1 px separa el
   blanco de la de EE. UU. del fondo blanco de la cabecera. forced-color-adjust
   la deja como imagen en el alto contraste de Windows, que si no la pintaria
   de un solo color. */
.lang__flag{width:18px;height:12px;flex:none;border-radius:2px;
  box-shadow:0 0 0 1px rgba(7,22,47,.14);forced-color-adjust:none}
/* Escritorio: se ve el codigo y el nombre queda solo para el lector de pantalla,
   que lee "EN English": contiene lo que se ve, como pide WCAG 2.5.3. */
.lang__nom{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (max-width:1160px){
  /* flex-wrap: a 320 px los tres nombres con bandera no entran en una linea y el
     tercero baja; desde 360 px entran (medido el 21/10). */
  .lang{padding:.95rem 0;border-bottom:1px solid var(--line);gap:.6rem 1rem;flex-wrap:wrap}
  .lang a{border-bottom:0}
  /* El actual tambien a 1rem y con la misma caja: hasta la v1.11.1 quedaba en
     .88rem y dentro del menu se veia mas chico que los otros dos. */
  .lang a,.lang__now{font-size:1rem;padding:0}
  .lang__cod{display:none}
  .lang__nom{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
}

/* 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}

/* ---- v6 · Como llegar (v1.7.0): llamar, Google Maps y Waze como botones ----
   Reemplazan a los enlaces de texto "Como llegar · Waze". En escritorio cada
   boton va a su ancho; en movil se estiran para que el dedo acierte. Base real
   (auto), no flex:1: con base 0 se achican en vez de envolver. */
.como-llegar{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.5rem}
@media (max-width:560px){
  .como-llegar .btn{flex:1 1 auto}
}

/* =====================================================================
   v8 · FOTOS DE LA PISCINA (v1.8.0; galeria de tres desde la v1.9.0)
   ---------------------------------------------------------------------
   Seis lugares y UN solo componente: <figure class="foto"> con una <picture>
   (AVIF > WebP > JPEG) y un pie. Cada contexto solo cambia la proporcion y el
   ancho; los archivos son los mismos (3:2) y se recortan AQUI con
   aspect-ratio + object-fit, sin style en linea (la CSP no lo permite).

   ⚠️ Las fotos de pagina son originales de camara del cliente, recortadas y
   reveladas con ajustes clasicos (luz, color, ruido): ningun pixel de IA llega
   a la web. El rotulo .foto__ia queda para el dia en que una imagen publicada
   SI lleve IA declarada: tools/validar.py (bloque 18) falla si una imagen que
   declara IA en sus metadatos sale en el HTML sin el rotulo.
   ⚠️ CLS = 0: el <img> lleva width/height y, aqui, un aspect-ratio que
   coincide: la caja existe antes de que llegue el primer byte.
   ⚠️ Ningun contexto usa fetchpriority en el <img>: en movil la foto de la
   portada queda DEBAJO del boton de WhatsApp y no debe competir con el CSS ni
   con las fuentes. En escritorio la adelanta un <link rel="preload"> con media.
   ===================================================================== */
.foto{margin:0}
.foto__img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:var(--teal-050);border-radius:var(--r-lg)}
.foto figcaption{margin:.75rem .2rem 0;font-size:.85rem;line-height:1.55;color:var(--body)}
.foto__ia{display:inline-block;margin-left:.3rem;padding:0 .6rem;border:1px solid var(--line);
  border-radius:999px;font-size:.75rem;font-weight:500;line-height:1.7;white-space:nowrap}

/* Punto focal de cada foto: lo que no puede recortarse cuando el contexto es mas
   apaisado que 3:2. */
.f-frente{object-position:50% 62%}
.f-diagonal{object-position:50% 52%}
.f-nadador{object-position:50% 46%}
.f-luz{object-position:50% 30%}      /* v1.9.0: arriba van las ventanas con flores */
.f-exterior{object-position:50% 40%}

/* ---- Portada (/, /en/, /pt/): en movil la foto va DEBAJO del texto y del boton;
        desde 901 px, texto a la izquierda y foto a la derecha. 901 y no 900: el resto
        del sitio pasa a una columna con max-width:900px, y la misma raya para todo. ---- */
.hero__media{margin-top:2.6rem}
.hero__media .foto__img{box-shadow:var(--shadow-lg)}
.hero__media figcaption{color:#CFDAEA}
.hero__media .foto__ia{color:#CFDAEA;border-color:rgba(255,255,255,.32)}
@media (min-width:901px){
  .hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:clamp(32px,4.4vw,72px);align-items:center}
  /* Con la foto al lado el texto dispone de ~60 % del ancho: con el titulo a 58 px se
     partia en 4-5 lineas y el boton de WhatsApp bajaba ~100 px. Medido en 901-1920 px
     (ES/EN/PT): con este tamano el boton queda igual o mas arriba que en la v1.7.0.
     Si se cambia el titulo, la proporcion de columnas o el hueco, se vuelve a medir
     (pruebas.py, grupo "hero") y se actualiza SIZES["hero"] en comun.py. */
  .hero__copy h1{font-size:clamp(2rem,4.6vw,3.4rem)}
  .hero__media{margin-top:0}
  .hero__media .foto__img{aspect-ratio:4/3}
}

/* ---- Galeria de la home (#piscina), tres fotos desde la v1.9.0 ----
        Hasta 640 px: una columna. De 641 a 900: dos columnas y la tercera
        (.foto--ancha) a todo el ancho, mas apaisada para no hacer la seccion
        interminable. Desde 901: tres columnas iguales. ⚠️ SIZES["galeria"] y
        SIZES["galeria_ancha"] (comun.py) dicen lo mismo en otro idioma: si se
        cambia un corte o el hueco, se vuelve a medir con pruebas.py (grupo 5). */
.galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px)}
.galeria .foto__img{box-shadow:var(--shadow-sm)}
.galeria .foto--ancha{grid-column:1/-1}
.galeria .foto--ancha .foto__img{aspect-ratio:2/1}
@media (max-width:640px){
  .galeria{grid-template-columns:1fr}
  .galeria .foto--ancha .foto__img{aspect-ratio:3/2}
}
@media (min-width:901px){
  .galeria{grid-template-columns:repeat(3,minmax(0,1fr))}
  .galeria .foto--ancha{grid-column:auto}
  .galeria .foto--ancha .foto__img{aspect-ratio:3/2}
}

/* ---- Cabecera de las paginas de programa: foto bajo el boton de WhatsApp ---- */
.page-head .foto{margin:2rem 0 2.75rem}
.page-head .foto__img{aspect-ratio:3/2}
@media (min-width:600px){.page-head .foto__img{aspect-ratio:16/9}}

/* ---- "Donde estamos": la fachada. En las paginas de texto va dentro de .prose;
        en la home y en /en/ y /pt/ va sobre el mapa, dentro de la misma tarjeta. ---- */
.prose .foto--lugar{max-width:560px;margin:0 0 1.6rem}
.prose .foto--lugar .foto__img{aspect-ratio:16/9}
.place__side{display:flex;flex-direction:column;min-width:0}
.place__side .foto__img{border-radius:0;aspect-ratio:16/9}
.place__side figcaption{margin:0;padding:.7rem 1.1rem .75rem;background:#fff;
  border-bottom:1px solid var(--line)}
.place__side .map{flex:1 1 auto;min-height:260px}
@media (max-width:900px){
  .place__side .foto__img{aspect-ratio:3/2}
}

/* =====================================================================
   v9 · OPINIONES DE GOOGLE (v1.10.0)
   ---------------------------------------------------------------------
   Una banda navy entre dos secciones claras: corta el ritmo de la pagina y
   le da a la prueba social el peso que tiene. Las opiniones son texto LITERAL
   de la ficha de Google, firmadas solo con el nombre (resenas.py, generador).
   ⚠️ Fondo y tarjetas en colores SOLIDOS, a proposito: pruebas.py (grupo 4)
   mide el contraste leyendo el color de fondo del CSS, y sobre un degradado o
   un rgba() no puede. Medido sobre navy-800/900: cita 11,6:1 · nombre 13,9:1 ·
   fuente 8,2:1 · dato 11,2:1 · eyebrow 9,0:1 · estrellas 8,2:1 (3:1 minimo).
   ⚠️ SIN schema Review ni AggregateRating: lo comprueba validar.py (bloque 19).
   ===================================================================== */
:root{--oro:#FBBC04}
.opiniones{background:var(--navy-900)}
.opiniones h2{color:#fff;text-wrap:balance}   /* sin una palabra sola en la ultima linea */
.opiniones .eyebrow{color:var(--teal-400)}
.opiniones .head-center{margin-bottom:clamp(32px,3.6vw,52px)}
.opiniones__dato{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.4rem .75rem;margin:0;color:#C9D6EA;font-size:.95rem}
.opiniones__num{color:#fff;font-size:1.9rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.opiniones__dato time{white-space:nowrap}   /* la fecha no se parte: "de / 2026" */
.opiniones__nota{margin:.75rem 0 0;color:#C9D6EA;font-size:.88rem}
.estrellas{width:100px;height:20px;flex:none;color:var(--oro)}
/* Hasta 640 px, una columna; de 641 a 900, dos y la tercera a todo el ancho (como
   la galeria: si no, queda sola en media fila); desde 901, tres. Las tarjetas de
   una fila terminan a la misma altura y el nombre queda abajo (margin-top:auto). */
.opiniones__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.2vw,28px)}
@media (min-width:641px){
  .opiniones__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opiniones__grid>.resena:nth-child(3){grid-column:1/-1}
}
@media (min-width:901px){
  .opiniones__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .opiniones__grid>.resena:nth-child(3){grid-column:auto}
}
.resena{margin:0;display:flex;flex-direction:column;gap:1rem;padding:1.6rem 1.5rem 1.4rem;
  background:var(--navy-800);border:1px solid #1E3A6E;border-radius:var(--r-lg)}
.resena .estrellas{width:90px;height:18px}
.resena__texto{margin:0;color:#E4EBF5;font-size:1rem;line-height:1.7}
.resena__texto p{margin:0}
.resena__texto p+p{margin-top:.75em}
.resena__autor{margin-top:auto;padding-top:1rem;border-top:1px solid #23427A;
  font-size:.86rem;line-height:1.5;color:#B9C8DE}
.resena__nombre{display:block;color:#fff;font-weight:700;font-size:1rem}
.resena__fuente,.resena__fecha{display:block}
.opiniones .cta-centrado{margin-top:clamp(28px,3.4vw,44px)}

/* ---- La calificacion junto al boton de WhatsApp ----
   En la portada es el primer dato bajo los botones; en las paginas interiores, una
   linea bajo el boton. Va DESPUES del boton en el HTML, asi que el boton no se mueve
   (pruebas.py, grupo 8). Enlaza a la seccion de la misma pagina, no a Google: la
   prueba se lee sin sacar al visitante del sitio. La estrella es decorativa
   (aria-hidden): el "5,0" va en texto. */
.estrella{width:18px;height:18px;flex:none;color:var(--oro)}
.hero__facts .estrella{color:var(--oro)}
.hero__facts a{display:inline-flex;align-items:center;gap:.55rem;min-height:24px;color:inherit;
  text-decoration:underline;text-decoration-color:rgba(207,218,234,.45);
  text-decoration-thickness:1px;text-underline-offset:4px}
.hero__facts a:hover{color:#fff;text-decoration-color:currentColor}
.hero__facts strong{color:#fff}
/* El margen negativo colapsa contra el margin-bottom de .hero__actions (2.6rem) y deja
   1.2rem; el de abajo repite esos 2.6rem, que es lo que habia antes hasta la foto o
   hasta la seccion siguiente. */
.valoracion{margin:-1.4rem 0 2.6rem;font-size:.95rem}
.valoracion a{display:inline-flex;align-items:center;gap:.5rem;min-height:24px;color:var(--body);
  text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;
  text-underline-offset:4px}
.valoracion a:hover{color:var(--teal-700);text-decoration-color:currentColor}
.valoracion strong{color:var(--ink)}