/* =====================================================================
   comun.css — estilos comunes a todas las páginas de Pranamaya
   =====================================================================
   Los colores salen del logo y del cartel de horarios de Pranamaya:
   el azul fuerte de los rótulos, los azules suaves de la luna y el fondo
   color crema. Se cambian todos desde aquí, en el bloque :root.

   IMPORTANTE: cada página carga este archivo con ?v=FECHA. Si cambias algo
   aquí, sube ese número en TODAS las páginas (lo hace solo la herramienta
   `python3 herramientas/version.py`), o el navegador seguirá usando la
   versión vieja.
   ===================================================================== */

:root{
  /* --- colores: propuesta B, «azul luna» (elegida por Adolf, 21/09/2026) ---
     Salen de la luna del logotipo de Pranamaya, sobre un fondo crema cálido.
     El --azul es un punto más oscuro que el azul exacto de la luna (#3074B9,
     guardado en --azul-medio): así los enlaces y los botones también se leen
     bien encima de las cajas de fondo arena, donde el tono puro se quedaba
     en 3,99:1 y la norma de accesibilidad pide 4,5:1. */
  --azul:#2A67A6;            /* enlaces, botones y títulos de sección */
  --azul-oscuro:#1F5488;     /* el mismo, más oscuro, al pasar el ratón */
  --azul-noche:#13273D;      /* fondo del pie y velo de los banners */
  --azul-medio:#3074B9;      /* el azul exacto de la luna del logotipo */
  --azul-suave:#BBD9F2;      /* azul claro de la luna */
  --azul-agua:#E9F2FB;       /* fondo de avisos y cajas azules */
  --crema:#FAF7F1;           /* fondo de la web */
  --arena:#EFE8DC;           /* fondo de las cajas y franjas suaves */
  --texto:#233240;
  --texto-suave:#5A6976;
  --linea:#E2D8C6;

  /* --- medidas --- */
  --ancho:1180px;
  --margen-lateral:20px;
  --carril:min(var(--ancho), 100% - 2*var(--margen-lateral));
  --respiro:clamp(44px, 5vw, 76px);
  --respiro-titulo:clamp(22px, 2vw, 30px);
  --radio:16px;
  --radio-peq:10px;
  --alto-cabecera:92px;

  /* --- letras --- */
  --sans:"Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --roboto:"Roboto","Open Sans",system-ui,Arial,sans-serif;
  --mont:"Montserrat","Open Sans",system-ui,Arial,sans-serif;
}
@media (max-width:480px){:root{--margen-lateral:16px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--alto-cabecera)}
body{margin:0;font-family:var(--sans);font-size:16.5px;line-height:1.6;color:var(--texto);background:var(--crema);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
img.sin-foto{visibility:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--mont);font-weight:700;line-height:1.18;color:var(--azul-noche)}
p{margin:0 0 .85em}
a{color:var(--azul)}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.caja{width:var(--carril);margin-left:auto;margin-right:auto}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:16px;top:16px;z-index:1000;background:#fff;color:#000;padding:8px 14px;border-radius:6px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- Animaciones de entrada ---------- */
.js [data-anima]{opacity:0}
.js [data-anima].visto{animation-duration:1.1s;animation-fill-mode:both;animation-timing-function:ease}
.visto[data-anima="fadeIn"]{animation-name:fadeIn}
.visto[data-anima="fadeInUp"]{animation-name:fadeInUp}
.visto[data-anima="fadeInLeft"]{animation-name:fadeInLeft}
.visto[data-anima="fadeInRight"]{animation-name:fadeInRight}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,48px,0)}to{opacity:1;transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-48px,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(48px,0,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js [data-anima]{opacity:1!important;animation:none!important}}

/* =====================================================================
   Cabecera
   ===================================================================== */
.cabecera{position:sticky;top:0;z-index:100;background:rgba(250,247,241,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--linea)}
.cabecera .caja{display:flex;align-items:center;height:var(--alto-cabecera);gap:22px;width:min(1360px, 100% - 40px)}
.logo{display:block;flex-shrink:0}
.logo img{height:52px;width:auto}
.navegacion{margin-left:auto;display:flex;align-items:center}
.menu{display:flex;list-style:none;margin:0;padding:0}
.menu>li{position:relative}
.menu a{display:flex;align-items:center;gap:6px;padding:0 14px;white-space:nowrap;line-height:var(--alto-cabecera);color:var(--azul-noche);text-decoration:none;font-family:var(--mont);font-size:13px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;transition:color .2s}
.menu a:hover,.menu a[aria-current]{color:var(--azul)}
.menu a[aria-current]{box-shadow:inset 0 -3px 0 var(--azul)}
.menu svg{width:10px;height:10px}
.submenu{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:0;min-width:238px;background:var(--crema);border:1px solid var(--linea);border-top:3px solid var(--azul);border-radius:0 0 var(--radio-peq) var(--radio-peq);box-shadow:0 12px 26px rgba(19,39,61,.14);display:none}
.menu>li:hover .submenu,.menu>li:focus-within .submenu{display:block}
.submenu a{line-height:1.35;padding:11px 20px;font-size:12.5px;box-shadow:none}
.submenu li+li a{border-top:1px solid var(--linea)}
.abrir-menu{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.abrir-menu span{display:block;width:26px;height:2px;background:var(--azul-noche);margin:6px 0;border-radius:2px}

/* Selector de idioma */
.idiomas{position:relative;margin-left:8px}
.idiomas>button{display:flex;align-items:center;gap:7px;background:none;border:0;padding:6px 4px;cursor:pointer;color:var(--azul-noche);font-family:var(--mont);font-size:12.5px;font-weight:700;letter-spacing:.5px}
.idiomas>button::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.bandera{width:21px;height:14px;display:block;border-radius:2px;flex-shrink:0}
.idiomas ul{list-style:none;margin:0;padding:6px 0;position:absolute;top:100%;right:0;min-width:110px;background:var(--crema);border:1px solid var(--linea);border-radius:var(--radio-peq);box-shadow:0 12px 26px rgba(19,39,61,.14);display:none;z-index:5}
.idiomas.abierto ul,.idiomas:hover ul,.idiomas:focus-within ul{display:block}
.idiomas li a{display:flex;align-items:center;gap:7px;padding:8px 12px;color:var(--azul-noche);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.idiomas li a:hover{color:var(--azul);background:var(--arena)}

@media (max-width:1100px){
  .abrir-menu{display:block;order:3}
  .idiomas{order:2;margin-left:auto}
  .navegacion{display:none;position:absolute;left:0;right:0;top:100%;background:var(--crema);border-bottom:1px solid var(--linea);padding:6px 24px 22px;max-height:calc(100vh - var(--alto-cabecera));overflow:auto;box-shadow:0 14px 26px rgba(19,39,61,.12)}
  .navegacion.abierta{display:block}
  .menu{flex-direction:column}
  .menu a{line-height:1.4;padding:14px 0;border-bottom:1px solid var(--linea);font-size:14px;box-shadow:none}
  .submenu{position:static;display:block;border:0;box-shadow:none;padding:0 0 0 18px;background:none}
  .submenu a{border-top:0}
  .menu>li>a svg{display:none}
}
@media (max-width:767px){:root{--alto-cabecera:76px}.logo img{height:42px}}
@media (max-width:420px){.logo img{height:36px}.cabecera .caja{gap:10px;width:calc(100% - 24px)}}

/* =====================================================================
   Banners con foto
   ===================================================================== */
.banner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:96px 26px;min-height:420px;color:#fff;background:var(--azul-noche) center/cover no-repeat;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(19,39,61,.26) 0%,rgba(19,39,61,.60) 55%,rgba(19,39,61,.71) 100%)}
.banner>*{position:relative;z-index:2}
/* El vídeo de fondo del banner (Adolf, 28/09/2026). Va DEBAJO del velo, y
   solo aparece si la persona acepta las galetes: hasta entonces se ve la
   foto de siempre, que es el fondo de la propia sección. Por eso aquí no
   hay ningún color de fondo, y por eso no se puede pinchar. */
.banner .video-fondo{position:absolute;inset:0;z-index:0;background:none;border-radius:0;pointer-events:none}
.banner .video-fondo iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-width:177.78vh;min-height:100%;border:0;border-radius:0}
.banner h1,.banner h2{color:#fff;font-size:clamp(30px,4.3vw,50px);letter-spacing:.2px;max-width:17ch}
.banner .bajada{margin:20px auto 0;max-width:62ch;font-size:clamp(16px,1.5vw,19px);line-height:1.6;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.banner .acciones{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.portada{min-height:max(600px,calc(100svh - var(--alto-cabecera)))}
.portada h1{max-width:20ch}
.banner-corto{min-height:320px;padding:70px 26px}

/* Flecha de bajar */
.bajar{position:absolute;left:26px;bottom:22px;z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;text-decoration:none;animation:flota 2.4s ease-in-out infinite}
.bajar svg{width:20px;height:20px}
/* La fletxa va a l'ESQUERRA, no al mig: al mig queda damunt del cos de la
   Lidia i es llegeix malament (Adolf, 28/09/2026). A la dreta tampoc, que
   hi ha el boto de WhatsApp. */
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.bajar{animation:none}}

/* La miga de pan: «Inici › Classes i horaris». Va debajo de la cabecera en
   todas las páginas menos la portada, para saber siempre dónde estás y poder
   volver con un clic (Adolf, 28/09/2026). */
.miga{background:var(--arena);border-bottom:1px solid var(--linea);font-size:14px}
.miga ol{list-style:none;margin:0;padding:11px 0;display:flex;flex-wrap:wrap;
         align-items:center;gap:6px}
.miga li{display:flex;align-items:center;gap:6px;color:var(--texto-suave)}
.miga li+li::before{content:"›";color:var(--azul-suave);font-size:17px;line-height:1}
.miga a{color:var(--azul);text-decoration:none}
.miga a:hover{text-decoration:underline}
.miga [aria-current]{color:var(--texto-suave)}

/* El botón de buscar, en la cabecera */
.abrir-buscador{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-left:auto;border:0;border-radius:50%;
  background:transparent;color:var(--azul-noche);cursor:pointer}
.abrir-buscador:hover{background:var(--azul-agua);color:var(--azul)}
.abrir-buscador svg{width:20px;height:20px}

/* La ventana del buscador */
dialog.ventana-buscar .ventana-cuerpo{padding:20px 24px 26px}
.buscador-campo{width:100%;padding:14px 16px;border:2px solid var(--linea);
  border-radius:var(--radio-peq);font:inherit;font-size:16px;background:#fff}
.buscador-campo:focus{outline:0;border-color:var(--azul)}
.buscador-lista{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;
  max-height:46vh;overflow:auto}
.buscador-lista a{display:block;padding:12px 14px;border:1px solid var(--linea);
  border-radius:var(--radio-peq);text-decoration:none;background:#fff}
.buscador-lista a:hover{border-color:var(--azul);background:var(--azul-agua)}
.buscador-lista strong{display:block;color:var(--azul-noche);font-family:var(--mont);
  font-size:15.5px}
.buscador-lista span{display:block;margin-top:4px;font-size:14px;color:var(--texto-suave)}
.buscador-nada{margin:18px 0 0;color:var(--texto-suave)}

/* =====================================================================
   Secciones y cajas
   ===================================================================== */
main>section,main>div.seccion{padding-top:var(--respiro)}
main>section:last-of-type{padding-bottom:var(--respiro)}
/* Si la página termina con un banner de foto, el pie va pegado a él: sin
   franja de fondo crema entre los dos. */
main>section.banner:last-of-type{padding-bottom:70px}
.seccion-titulo{text-align:center;margin-bottom:var(--respiro-titulo)}
.seccion-titulo h2{font-size:clamp(25px,3vw,34px)}
.seccion-titulo p{max-width:70ch;margin:16px auto 0;color:var(--texto-suave)}
.etiqueta{display:inline-block;margin:0 0 10px;font-family:var(--mont);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--azul)}
.banner .etiqueta{color:#D5E6F7;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* Línea de luna bajo los títulos de sección */
.seccion-titulo h2::after{content:"";display:block;width:74px;height:3px;margin:18px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--azul),var(--azul-suave))}

.caja-suave{background:var(--arena);border-radius:var(--radio);padding:clamp(28px,4vw,52px)}
.caja-azul{background:var(--azul-agua);border-radius:var(--radio);padding:clamp(24px,3.5vw,40px)}
.texto-ancho{max-width:74ch}
.centro{text-align:center}

/* Dos columnas: foto y texto */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.duo.estrecha{grid-template-columns:400px 1fr}
/* Texto ancho + retrato pequeno al lado. Con `estrecha` la foto se
   llevaba la columna grande y salia enorme (Adolf, 28/09/2026). */
.duo.retrat{grid-template-columns:1fr 300px;align-items:start}
.duo figure{margin:0}
.duo img{border-radius:var(--radio)}
.duo h2{font-size:clamp(23px,2.6vw,31px);margin-bottom:18px}
@media (max-width:860px){.duo,.duo.estrecha,.duo.retrat{grid-template-columns:1fr}
                         .duo.retrat figure{max-width:300px;margin:0 auto}}

/* Galería: una tira de fotos verticales, todas del mismo alto.
   Se apilan de dos en dos en el móvil. */
.galeria{list-style:none;margin:0;padding:0;display:grid;
         grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.galeria li{margin:0}
.galeria figure{margin:0}
.galeria img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;
             border-radius:var(--radio);display:block}
.galeria figcaption{margin-top:8px;font-family:var(--roboto);font-size:13px;
                    font-style:normal;color:var(--texto-suave);line-height:1.4}
.galeria.peq{grid-template-columns:repeat(auto-fit,minmax(150px,210px));justify-content:center}
/* Galería de fotos apaisadas: para las de grupo, donde recortar a 3/4 se
   comería media escena. */
.galeria.ancha{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.galeria.ancha img{aspect-ratio:3/2}
/* Si la última queda sola en su fila, que ocupe todo el ancho en vez de
   dejar un hueco al lado. */
.galeria.ancha li:last-child:nth-child(odd){grid-column:1 / -1}
/* Tres apaisades en fila, sense que l'ultima s'estiri (Adolf, 28/09/2026) */
.galeria.ancha.tres{grid-template-columns:repeat(3,1fr)}
.galeria.ancha.tres li:last-child:nth-child(odd){grid-column:auto}
@media (max-width:860px){.galeria.ancha.tres{grid-template-columns:1fr}}
@media (max-width:520px){.galeria{grid-template-columns:1fr 1fr;gap:12px}
                         /* las apaisadas, de una en una: a media pantalla no se ven */
                         .galeria.ancha{grid-template-columns:1fr}}

/* Aviso corto dentro del texto: una cosa que todavía no está cerrada */
.nota-destacada{background:var(--azul-agua);border-left:4px solid var(--azul);
                border-radius:0 var(--radio-peq) var(--radio-peq) 0;
                padding:16px 20px;margin:22px 0;font-size:16px;line-height:1.55}

.entrada-retiro{font-size:clamp(17px,1.8vw,19px);line-height:1.5;color:var(--azul-noche)}

/* Pie de foto con el crédito */
figure figcaption{margin-top:10px;font-family:var(--roboto);font-size:13.5px;font-style:italic;color:var(--texto-suave)}

/* =====================================================================
   Tarjetas
   ===================================================================== */
.tarjetas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:28px 26px;display:flex;flex-direction:column}
.tarjeta h3{font-size:19px;margin-bottom:12px}
.tarjeta p{font-size:15.5px;color:var(--texto-suave)}
.tarjeta p:last-child{margin-bottom:0}
.tarjeta .ir{margin-top:auto;padding-top:18px}
.tarjeta .icono{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:18px;border-radius:50%;background:var(--azul-agua);color:var(--azul)}
.tarjeta .icono svg{width:25px;height:25px}

/* Opiniones */
.opiniones{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.opiniones li{position:relative;background:var(--arena);border:0;padding:34px 28px 28px}
.opiniones li::before{content:"\201C";position:absolute;top:6px;left:22px;font-family:var(--mont);
  font-size:62px;line-height:1;color:var(--azul-suave)}
.opiniones blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--azul-noche)}
.opiniones figcaption,.opiniones .quien{margin-top:auto;padding-top:20px;font-size:14.5px;color:var(--texto-suave)}
.opiniones .quien strong{display:block;font-family:var(--mont);font-size:15px;color:var(--azul-noche)}
.opiniones .quien .guia{display:inline-flex;align-items:center;gap:5px;margin-top:4px}
.opiniones .quien svg{width:13px;height:13px;fill:var(--azul)}

/* Cifras */
.cifras{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;text-align:center}
.cifras li{background:var(--arena);border-radius:var(--radio-peq);padding:26px 16px}
.cifras .num{display:block;font-family:var(--mont);font-size:clamp(26px,3vw,34px);font-weight:700;color:var(--azul);line-height:1.1}
.cifras .et{display:block;margin-top:8px;font-size:14px;color:var(--texto-suave)}

/* =====================================================================
   Horario semanal
   ===================================================================== */
.horario{overflow-x:auto;border-radius:var(--radio);border:1px solid var(--linea);background:#fff}
.horario table{border-collapse:collapse;width:100%;min-width:660px;font-size:15px}
.horario caption{caption-side:top;padding:18px 20px 0;text-align:left;font-family:var(--mont);font-weight:700;color:var(--azul-noche)}
.horario th,.horario td{border:1px solid var(--linea);padding:14px 12px;text-align:center;vertical-align:middle}
.horario thead th{background:var(--azul);color:#fff;font-family:var(--mont);font-size:14px;font-weight:700;letter-spacing:.5px;border-color:var(--azul)}
.horario tbody th{background:var(--arena);font-family:var(--roboto);font-weight:500;white-space:nowrap;color:var(--azul-noche)}
.horario td.clase{background:#fff}
.horario td.clase strong{display:block;font-family:var(--mont);font-size:14px;color:var(--azul);text-transform:uppercase;letter-spacing:.4px}
.horario td.clase span{display:block;margin-top:4px;font-size:13.5px;color:var(--texto-suave)}
.horario td.vacia{background:#FBF9F4}
/* En el móvil la tabla se lee de lado: aviso para que se sepa */
.horario-aviso{margin:10px 0 0;font-size:14px;color:var(--texto-suave)}
@media (min-width:768px){.horario-aviso{display:none}}

/* Precios */
.precios{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px}
.precios li{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px 22px;text-align:center}
.precios li.destacado{border-color:var(--azul);box-shadow:0 8px 22px rgba(42,103,166,.14)}
.precios .que{display:block;font-family:var(--mont);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--azul-noche)}
.precios .cuanto{display:block;margin-top:12px;font-family:var(--mont);font-size:31px;font-weight:700;color:var(--azul);line-height:1}
.precios .cuanto small{font-size:15px;font-weight:600;color:var(--texto-suave)}
.precios .nota{display:block;margin-top:10px;font-size:14px;color:var(--texto-suave)}

/* =====================================================================
   Botones
   ===================================================================== */
:is(a,button):is(.boton,.boton-linea,.boton-blanco){
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:14px 28px;border:2px solid transparent;border-radius:50px;
  font-family:var(--mont);font-size:13px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s
}
/* Acción principal: relleno */
:is(a,button).boton{background:var(--azul);color:#fff;box-shadow:0 4px 14px rgba(42,103,166,.26)}
:is(a,button).boton:hover,:is(a,button).boton:focus-visible{background:var(--azul-oscuro);box-shadow:0 6px 18px rgba(42,103,166,.32)}
/* Secundarios: solo contorno */
:is(a,button).boton-linea{background:transparent;border-color:var(--azul);color:var(--azul)}
:is(a,button).boton-linea:hover,:is(a,button).boton-linea:focus-visible{background:var(--azul);color:#fff}
/* Sobre foto oscura */
:is(a,button).boton-blanco{background:transparent;border-color:#fff;color:#fff}
:is(a,button).boton-blanco:hover,:is(a,button).boton-blanco:focus-visible{background:#fff;color:var(--azul-noche)}
:is(a,button):is(.boton,.boton-linea,.boton-blanco) svg{width:14px;height:14px;fill:currentColor;flex:none}
@media (max-width:480px){:is(a,button):is(.boton,.boton-linea,.boton-blanco){font-size:12px;padding:13px 22px;min-height:46px}}

/* Botón de WhatsApp, siempre a mano */
.whatsapp-fijo{position:fixed;right:18px;bottom:112px;z-index:95;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s}
.whatsapp-fijo:hover{transform:scale(1.06)}
/* Los dos botones flotantes se levantan del suelo (Adolf, 29/09/2026): las
   extensiones del navegador —Adobe Acrobat, traductores, asistentes— ponen
   su icono justo en la esquina de abajo a la derecha y se solapaban. Dejando
   libres los 50 px de abajo, ya no se pisan. */
.whatsapp-fijo svg{width:28px;height:28px;fill:#fff}

/* =====================================================================
   Listas con marca
   ===================================================================== */
.lista-marcas{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lista-marcas li{position:relative;padding-left:30px}
.lista-marcas li::before{content:"";position:absolute;left:4px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--azul-suave)}

/* Preguntas que se abren y se cierran */
.desplegable{border:1px solid var(--linea);border-radius:var(--radio-peq);background:#fff;margin-bottom:12px;overflow:hidden}
.desplegable summary{cursor:pointer;padding:17px 20px;font-family:var(--mont);font-weight:700;font-size:16px;color:var(--azul-noche);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.desplegable summary::-webkit-details-marker{display:none}
.desplegable summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg);transition:transform .2s}
.desplegable[open] summary::after{transform:rotate(-135deg)}
.desplegable .cuerpo{padding:0 20px 18px}
.desplegable .cuerpo p:last-child{margin-bottom:0}

/* =====================================================================
   Ventanas que se abren sin salir de la página
   ===================================================================== */
dialog.ventana{width:min(760px,calc(100% - 32px));max-height:86vh;border:0;border-radius:var(--radio);padding:0;background:var(--crema);color:var(--texto);box-shadow:0 26px 60px rgba(19,39,61,.34)}
dialog.ventana::backdrop{background:rgba(19,39,61,.62)}
dialog.ventana .ventana-cabecera{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:var(--crema);border-bottom:1px solid var(--linea)}
dialog.ventana h2{font-size:21px}
dialog.ventana .cerrar{border:0;background:var(--arena);color:var(--azul-noche);width:38px;height:38px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
dialog.ventana .cerrar:hover{background:var(--azul);color:#fff}
dialog.ventana .ventana-cuerpo{padding:24px;overflow:auto;max-height:calc(86vh - 80px)}
/* La ventana del formulario de inscripcion: el formulario de Google necesita
   todo el alto que se le pueda dar, asi que va sin margenes a los lados. */
dialog.ventana-form{width:min(820px,calc(100% - 24px));max-height:92vh}
dialog.ventana-form .ventana-cuerpo{padding:0;max-height:calc(92vh - 80px)}
dialog.ventana-form iframe{display:block;width:100%;height:min(70vh,760px);border:0}
dialog.ventana-form .nota-ventana{margin:0;padding:14px 20px;font-size:14px;
  color:var(--texto-suave,#5b6b7c);background:var(--arena);text-align:center}

/* =====================================================================
   Formulario de contacto
   ===================================================================== */
.formulario{display:grid;gap:18px;max-width:640px}
.formulario label{display:block;font-family:var(--mont);font-size:13.5px;font-weight:700;color:var(--azul-noche);margin-bottom:6px}
.formulario input,.formulario select,.formulario textarea{width:100%;padding:13px 14px;border:1px solid var(--linea);border-radius:8px;background:#fff;font-family:var(--sans);font-size:16px;color:var(--texto)}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{outline:3px solid var(--azul-suave);outline-offset:1px;border-color:var(--azul)}
.formulario textarea{min-height:140px;resize:vertical}
.formulario .consentimiento{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--texto-suave)}
.formulario .consentimiento input{width:19px;height:19px;flex:none;margin-top:3px;accent-color:var(--azul)}
.formulario .ayuda{margin:-8px 0 0;font-size:14px;color:var(--texto-suave)}

/* =====================================================================
   Datos de contacto
   ===================================================================== */
.datos-contacto{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.datos-contacto li{display:flex;gap:14px;align-items:flex-start}
.datos-contacto svg{width:21px;height:21px;flex:none;margin-top:3px;fill:var(--azul)}
.datos-contacto a{text-decoration:none}
.datos-contacto a:hover{text-decoration:underline}

/* =====================================================================
   Pie
   ===================================================================== */
.pie{background:var(--azul-noche);color:#E7EDF4;padding:56px 0 0;margin-top:var(--respiro)}
main:has(>section.banner:last-of-type:last-child)+.pie{margin-top:0}
.pie .columnas{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:38px;padding-bottom:42px}
.pie h2{font-family:var(--mont);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:#fff;margin:0 0 16px}
.pie p{font-size:14.5px;line-height:1.7;color:#C6D3E0}
.pie a{color:#C6D3E0;text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px}
.pie .logo-pie{width:236px;margin-bottom:20px}
.pie .redes{display:flex;gap:10px;margin-top:18px}
.pie .redes a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);transition:background .2s}
.pie .redes a:hover{background:var(--azul)}
.pie .redes svg{width:17px;height:17px;fill:#fff}
/* El logotipo de La Cuquera, debajo de las redes. Es naranja sobre
   transparente y va algo mas pequeno que el de Pranamaya. */
.pie .logo-cuquera{display:block;width:116px;height:auto;margin-top:26px;opacity:.92}
.pie-final{border-top:1px solid rgba(255,255,255,.16);padding:18px 0}
.pie-final .caja{font-size:13.5px;color:#A8B8C8;text-align:center;line-height:1.6}
@media (max-width:860px){.pie .columnas{grid-template-columns:1fr 1fr}.pie .col1{grid-column:1/-1}}
@media (max-width:560px){.pie .columnas{grid-template-columns:1fr}}

/* ---------- Volver arriba ---------- */
.arriba{position:fixed;right:20px;bottom:52px;z-index:90;width:42px;height:42px;border:0;border-radius:50%;background:var(--azul-noche);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.arriba.visible{opacity:.85;visibility:visible}
.arriba:hover{opacity:1}
.arriba svg{width:15px;height:15px;fill:#fff}

/* ---------- Páginas de texto legal ---------- */
.legal h2{font-size:clamp(22px,2.4vw,28px);margin:var(--respiro) 0 16px}
.legal h3{font-size:19px;margin:30px 0 10px}
.legal table{border-collapse:collapse;width:100%;margin:18px 0;font-size:15px;background:#fff}
.legal th,.legal td{border:1px solid var(--linea);padding:11px 13px;text-align:left;vertical-align:top}
.legal thead th{background:var(--arena);font-family:var(--mont);font-size:13.5px;color:var(--azul-noche)}
.legal .tabla{overflow-x:auto;border-radius:var(--radio-peq)}

/* Aviso de «esto falta por confirmar» — se ve solo en el ordenador de trabajo,
   nunca en la web publicada: `revisar.py` avisa si queda alguno sin resolver. */
.pendiente{display:block;margin:10px 0;padding:12px 16px;border-left:4px solid #E0A400;background:#FFF8E6;border-radius:0 var(--radio-peq) var(--radio-peq) 0;font-size:14.5px;color:#6B5200}

/* La foto de la playa tiene la cara arriba del todo, y un banner corto
   recorta unos 85 px por arriba y por abajo: la cabeza se perdia detras
   de la cabecera (Adolf, 28/09/2026). Anclada arriba, se ve entera. */
/* Solo en el banner CORTO: ahi la foto se recorta 85 px por arriba y se
   comia la cabeza. En la portada NO, porque es alta y la foto tiene que
   quedar centrada con el titulo (Adolf, 28/09/2026). */
.banner-corto.bg-lidia-playa{background-position:center top}
.banner-corto.bg-lidia-namaste{background-position:center top}

/* La portada: el bloc del titol, una mica cap a la dreta. La Lidia queda
   lleugerament a l'esquerra de la foto i aixi el text no li passa per sobre
   (Adolf, 28/09/2026). Nomes a l'ordinador: al mobil es queda centrat.
   Va amb transform i no amb marges perque el banner te overflow:hidden i
   aixi no pot sortir cap barra de desplacament lateral. */
@media (min-width:1025px){.banner.portada>div{transform:translateX(3.5%)}}
/* Les dues cares queden a la part de dalt de la foto: ancorant-la a dalt
   no es tallen pel marge superior. I el banner es una mica mes alt (440 px
   en lloc de 320), perque amb l'alcada de sempre les cares queien just
   damunt del titol o be quedaven fora (28/09/2026). */
.banner-corto.bg-lidia-cuquera-banner{background-position:center top;min-height:440px}

/* La Lidia esta en el centro de la foto, justo donde va el titulo. Anclando
   la foto abajo, la cara sube y queda por encima del texto (28/09/2026). */
/* La foto de la entrada: anclada ARRIBA, no abajo (Adolf, 29/09/2026: «ya le
   has cortado la cabeza»). El banner mide menos de alto que la foto, así que
   `cover` recorta: con `bottom` se comía la parte de arriba, que es justo
   donde está la cara de Lidia. Al 40 % la cabeza queda dentro a cualquier
   altura de banner. */
.bg-lidia-entrada-ancha{background-position:center 40%}

/* Los titulos de los banners, en el ordenador (Adolf, 28/09/2026):
   en una sola linea, sin que la bajada se amontone, y todo centrado.
   El limite de 17ch que hay arriba parte titulos que caben de sobra en
   una pantalla ancha; aqui se suelta, y en tablet y movil se queda como
   estaba, porque alli SI tienen que partirse. */
@media (min-width:1025px){
  .banner h1,.banner h2{max-width:none;white-space:nowrap}
  .banner .bajada{max-width:72ch}
  /* Si algun titulo fuera tan largo que no cupiera, mejor que se parta
     antes que salirse de la pantalla. */
  .banner h1:only-child,.banner .portada h1{white-space:normal}
}
@media (min-width:1025px) and (max-width:1240px){
  .banner h1,.banner h2{font-size:clamp(28px,3.6vw,44px)}
}


/* En el movil, la foto pequena del banner: la grande son hasta 350 kB que
   nadie necesita en una pantalla de 400 px de ancho.
   Lleva !important porque la foto grande va en el atributo style de cada
   pagina, y a un estilo en linea no se le gana de otra manera.
   Las direcciones son relativas a ESTE archivo, que vive en recursos/. */
@media (max-width:640px){
.bg-lidia-cuquera-banner{background-image:url('../imagenes/lidia-cuquera-banner-768.webp')!important}
.bg-lidia-arbol-ancha{background-image:url('../imagenes/lidia-arbol-ancha-768.webp')!important}
.bg-lidia-entrada-ancha{background-image:url('../imagenes/lidia-entrada-ancha-768.webp')!important}
.bg-lidia-jardin{background-image:url('../imagenes/lidia-jardin-768.webp')!important}
.bg-lidia-namaste{background-image:url('../imagenes/lidia-namaste-768.webp')!important}
.bg-lidia-playa{background-image:url('../imagenes/lidia-playa-768.webp')!important}
.bg-retiro-classe-banner{background-image:url('../imagenes/retiro-classe-banner-768.webp')!important}
.bg-retiro-sala-banner{background-image:url('../imagenes/retiro-sala-banner-768.webp')!important}
}

/* Los dos botones flotantes, más pequeños en el móvil: a 54 px tapaban el
   texto y hasta algún botón de la página (Adolf, 28/09/2026). */
@media (max-width:640px){
  .whatsapp-fijo{width:46px;height:46px;right:12px;bottom:96px}
  .whatsapp-fijo svg{width:22px;height:22px}
  .arriba{width:38px;height:38px;right:14px;bottom:44px}
}