/* ============================================================
   Halosal Aljarafe — hoja de estilos de la landing
   Rediseño 2.0 (17/08/2026): wellness premium editorial.
   Paleta: marfil #F5F1E8 · arena #D8CBB8 · piedra #B8B0A3 ·
           rosa sal #C9A8A2 · marrón #6B5A4A · negro cálido #191817.
   Tipografía: Instrument Serif (titulares) + Manrope (cuerpo/UI).
   ============================================================ */

@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/Manrope-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/Manrope-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/Manrope-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
/* Glacial Indifference se conserva por si se reutiliza puntualmente (no se
   usa en el sistema tipográfico principal del rediseño 2.0). */
@font-face{
  font-family:"Glacial";
  src:url("../fonts/GlacialIndifference-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Glacial";
  src:url("../fonts/GlacialIndifference-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  /* ---- paleta base ---- */
  /* Paleta de marca original (logo del cliente): crema + blanco + coral
     vivo. Los nombres --marfil/--rosasal/--marron/--negro se conservan como
     alias porque muchas reglas de abajo los usan directamente. */
  --marfil:#fff7ef;
  --arena:#f7e6d8;
  --piedra:#e3b6ab;
  --rosasal:#d58577;
  --marron:#4a342c;
  --negro:#2e211c;

  /* ---- tokens (mismos nombres que antes, para que el resto del CSS
     y el HTML no tengan que cambiar de variable) ---- */
  --cream:var(--marfil);
  --cream-2:#fbefe3;
  --cream-3:#f7e6d8;
  --white:#fff;
  --line:#f1dfd1;
  --text:var(--marron);
  --muted:#937a6e;
  --coral:var(--rosasal);
  --coral-2:#c06856;
  --coral-3:#a94f3e;
  --coral-dark:#7a342a;
  --coral-soft:#fbe3dd;
  --ink:var(--negro);
  --shadow-s:0 4px 14px rgba(122,52,42,.07);
  --shadow-m:0 12px 30px rgba(122,52,42,.10);
  --shadow-l:0 24px 60px rgba(122,52,42,.16);
  --r-s:8px;
  --r-m:12px;
  --r-l:18px;
  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --sans:"Manrope","Segoe UI",system-ui,sans-serif;
  --display:var(--serif);
  --body:var(--sans);
  --nav-h:78px;
  /* Alto de la barra fija de Llamar/Reservar (solo existe en <=1000px).
     Lo usan el padding inferior del body y la posición del chat, que tiene
     que quedar justo encima de ella: si cambia el alto de la barra, cambia
     aquí y ya. */
  --barra-h:82px;
  --curva:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);overflow-x:hidden}
body{
  margin:0;background:var(--cream);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--coral-3);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:700;line-height:1.08;margin:0;color:var(--ink);letter-spacing:-.01em}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
h3,h4{font-family:var(--sans);font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
em{font-style:italic}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}

.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.section{padding:110px 0}
.section.tint{background:var(--cream-2)}
.section.deep{background:var(--ink);color:#efe3d8}
.section.deep h2,.section.deep h3{color:#fff}

/* ---------------------------------------------------- cabeceras de sección */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral-3);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--coral)}
.section-head{max-width:680px;margin-bottom:54px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow::before{display:none}
.section-head h2{font-size:clamp(34px,5.4vw,58px);margin-bottom:16px;text-transform:uppercase;line-height:1.02}
.section-head p{color:var(--muted);font-size:17.5px;font-family:var(--sans)}
/* Explicitamente SIN justificar: es la linea corta bajo cada h2 (a veces
   centrada por .section-head.center, a veces no), funciona como subtitulo
   de la seccion, no como texto descriptivo. text-align:inherit deja que
   siga tomando el valor de .section-head (center o el heredado por
   defecto), sin que la regla de justificado de mas abajo la pise. */
.section-head p{text-align:inherit}

/* -------------------------------------------------- texto justificado --- */
/* Descripciones y demas texto "de verdad" (no titulos, no subtitulos de
   cabecera, no etiquetas/avisos cortos de una linea) van justificados en
   todo el sitio, tanto en movil como en escritorio. En una linea sola
   justify no cambia nada (por eso las etiquetas cortas no hace falta
   excluirlas aparte); donde si se nota es en parrafos de varias lineas
   como los de "Nuestra historia". hyphens:auto evita rios de espacio en
   las columnas estrechas de movil al partir alguna palabra larga. */
.sala-texto,
.beneficio-card p,
.diferencia-lista p,
.parrafos p,
.historia blockquote,
.exp-card p,
.cita,
.footer-marca p:not(.footer-lema),
.footer-legal,
.legal p{
  text-align:justify;
  hyphens:auto;
}
h1,.historia h2{text-transform:uppercase}

/* ------------------------------------------------------------------ botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:17px 28px;border-radius:3px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--coral),var(--coral-2));color:#fff;box-shadow:0 12px 26px rgba(192,104,86,.34)}
.btn-primary:hover{box-shadow:0 18px 34px rgba(192,104,86,.42)}
.btn-ghost{background:transparent;color:var(--coral-dark);border-color:var(--coral)}
.btn-ghost:hover{background:var(--coral-soft)}
.btn-light{background:#fff;color:var(--coral-dark);box-shadow:var(--shadow-m)}
.btn-light:hover{background:var(--marfil)}
.btn-sm{padding:12px 20px;font-size:13px}
.btn svg{width:18px;height:18px;flex:0 0 18px}

/* ------------------------------------------------------------------ navbar */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(245,241,232,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,box-shadow .25s ease;
}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 20px rgba(25,24,23,.05)}
.nav .wrap{display:flex;align-items:center;gap:26px}
.nav-logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
/* Sin border-radius ni fondo: el logo es un PNG con transparencia. El
   redondeo de antes tapaba el rectangulo crema que traia incrustado la
   version vieja, de 218px y borrosa. */
.nav-logo img{height:52px;width:auto}
.nav-logo span{display:none}
.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-links a{
  color:var(--text);font-size:13.5px;font-weight:600;letter-spacing:.03em;padding:10px 14px;
  transition:color .18s ease;
}
.nav-links a:hover{color:var(--coral-3);text-decoration:none}

.nav-cta{margin-left:10px}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:1.5px solid var(--line);
  border-radius:3px;width:46px;height:46px;cursor:pointer;color:var(--coral-dark);
  align-items:center;justify-content:center;
}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;height:var(--hero-desktop-h, 82svh);min-height:520px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  /* isolation crea un contexto de apilamiento propio. Sin el, el
     mix-blend-mode:screen de .estela se mezclaria con TODA la pagina que
     tenga detras, no solo con la foto y el velo del hero. */
  isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 48%;
  animation:respirar 8s ease-in-out infinite;transform-origin:center;
}
/* Respiración marcada: recorrido de escala mucho más amplio (9%) y algo más
   rápido (8s) que una deriva decorativa, para que se note claramente el
   "inhala-exhala" en vez de intuirse. */
@keyframes respirar{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.09)}
}
@media (prefers-reduced-motion:reduce){
  .hero-media img{animation:none}
}
/* La foto es panoramica (1983x793) y la mujer esta a la derecha, sobre el 72%
   del ancho. En una caja estrecha `cover` recorta por los lados y con el
   encuadre centrado se queda fuera: solo se le ven los pies. Se desplaza el
   encuadre para que siga en cuadro, mas cuanto mas estrecha es la pantalla. */
@media (max-width:1000px){
  .hero-media img{object-position:64% 50%}
}
@media (max-width:700px){
  .hero-media img{object-position:78% 50%}
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(25,24,23,.30) 0%,rgba(25,24,23,.20) 30%,rgba(25,24,23,.55) 72%,rgba(25,24,23,.86) 100%),
    linear-gradient(90deg,rgba(25,24,23,.35),transparent 55%);
}
.hero .sal{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
/* Estela del cursor. Mismo z que .sal: manda el orden del DOM, y ahi va
   antes, asi que las motas de sal se pintan por delante del vaho.
   screen = solo aclara; sobre la foto oscura el vaho suma luz y nunca
   ensucia los negros. */
.hero .estela{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}

/* Antes era un bloque de flujo normal pegado al fondo del hero
   (.hero{justify-content:flex-end}); ahora .wrap ocupa todo el alto y
   reparte su contenido en vertical con flexbox: ver los dos
   margin-bottom:auto de abajo (antetítulo y texto de apoyo). */
.hero .wrap{
  position:relative;z-index:3;display:flex;flex-direction:column;height:100%;
  padding-bottom:44px;padding-top:calc(var(--nav-h) + 40px);
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  /* Hueco elástico 1 de 2: empuja el titular hacia abajo, lejos del
     antetítulo, que se queda arriba del todo. */
  margin-bottom:auto;
  text-shadow:0 1px 2px rgba(25,24,23,.5);
}
.hero-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--rosasal)}
/* Titular de una sola linea y corta ("Vuelve a respirar."): el max-width de
   15ch ya no hace falta y el tamaño puede subir, porque no hay riesgo de que
   parta en tres lineas como el anterior. */
.hero h1{
  color:#fff;font-size:clamp(50px,9.4vw,124px);line-height:.94;margin-bottom:22px;max-width:14ch;
  /* Relieve. Cuatro sombras que hacen de capas distintas y no una sola
     difuminada, que es lo que da aspecto de texto "pegado" encima:
       1. filo superior claro -> la letra parece levantada hacia la luz;
       2. canto inferior duro y sin desenfoque -> el grosor del relieve;
       3. sombra corta -> despega la letra del fondo;
       4. sombra larga y suave -> la asienta en la foto.
     El filo claro apenas se ve sobre blanco puro, pero en los bordes
     antialiasados sí, y es lo que evita que el canto oscuro se lea como
     un simple desenfoque. */
  text-shadow:
    0 -1px 0 rgba(255,255,255,.45),
    0 2px 0 rgba(25,24,23,.35),
    0 5px 12px rgba(25,24,23,.42),
    0 20px 44px rgba(25,24,23,.34);
}
.hero .lead{
  font-family:var(--sans);font-size:20px;color:rgba(255,255,255,.88);max-width:470px;
  line-height:1.5;
  /* Hueco elástico 2 de 2: empuja "Para adultos..." y el botón hacia
     abajo del todo. Al repartirse el espacio libre a partes iguales con
     el margen del antetítulo, y pesar más este grupo de abajo (le sigue
     el botón), el titular queda por encima del centro, no exacto en él. */
  margin-bottom:auto;
  /* Mucho más suave que el titular: a 20px un relieve marcado emborrona. */
  text-shadow:0 1px 2px rgba(25,24,23,.45),0 6px 18px rgba(25,24,23,.3);
}
.hero .lead strong{color:#fff;font-weight:700}
/* Segunda linea, mas pequeña: dice a quien va dirigido sin robarle peso al
   reclamo. */
.hero-publico{
  font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.7);margin-bottom:24px;
  text-shadow:0 1px 2px rgba(25,24,23,.45);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:4px}
.hero-legal{
  font-family:var(--sans);font-size:12.5px;color:rgba(255,255,255,.55);
  text-shadow:0 1px 2px rgba(25,24,23,.45);margin-top:8px;
}

/* ------------------------------------------------------------- autoridad */
.trust{background:var(--ink);color:#efe3d8;padding:30px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust-item{display:flex;flex-direction:column;gap:4px;text-align:center;
  border-left:1px solid rgba(255,255,255,.12);padding-left:20px}
.trust-item:first-child{border-left:none;padding-left:0}
.trust-item b{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--rosasal)}
.trust-item span{font-family:var(--sans);font-size:12.5px;letter-spacing:.03em;color:rgba(239,227,216,.68);line-height:1.4}

/* Utilidades ------------------------------------------------------------ */
/* Texto solo para lectores de pantalla. Lo usan los enlaces repetidos, como
   los "Reservar esta sesion" de servicios: los tres dicen lo mismo y sin esto
   un lector de pantalla que liste los enlaces no distingue a cual va cada uno. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.centrado{text-align:center}
.enlace-flecha{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--coral-3);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:gap .2s var(--curva),border-color .2s ease;
}
.enlace-flecha:hover{gap:13px;border-bottom-color:var(--coral-3)}

/* ------------------------------------------------------------------ cards */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  padding:30px 28px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--coral-soft)}
.card h3{font-size:18.5px;margin-bottom:9px;letter-spacing:0}
.card p{color:var(--muted);font-size:15px}
.ic{
  width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--coral-soft);color:var(--coral-3);margin-bottom:18px;
}
.ic svg{width:23px;height:23px}
.card .tag{
  display:inline-block;margin-top:16px;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  color:var(--coral-dark);background:var(--coral-soft);padding:6px 13px;border-radius:3px;
}

/* ------------------------------------------------------ servicios: salas */
/* Rediseño del 24/08/2026: antes la foto era el fondo de toda la tarjeta y
   el texto iba encima en blanco (poco legible con fotos claras). Ahora la
   foto va arriba, contenida y con esquinas redondeadas, y todo el
   contenido va debajo sobre crema. Solo duración + título conviven con la
   imagen; el resto (texto, "ideal para", botón) va siempre sobre fondo
   claro. */
.salas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.5vw,52px);margin-bottom:clamp(36px,4.5vw,56px)}
/* display:contents: en escritorio este envoltorio (necesario en móvil
   para moverlo entero con transform) no debe alterar la rejilla de
   arriba — sus hijos (.sala) participan en ella como si no existiera. */
.salas-track{display:contents}
.sala{display:flex;flex-direction:column}
/* Solo existe para el gesto de deslizar en móvil (ver comentario en el
   HTML): en escritorio, rejilla fija de 2, no pinta nada aquí. */
.sala-clon{display:none}
.sala-foto{margin:0 0 26px;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-m)}
.sala-foto img{
  width:100%;height:clamp(240px,28vw,340px);object-fit:cover;display:block;
  transition:transform .7s var(--curva);
}
.sala:hover .sala-foto img{transform:scale(1.05)}
.sala-duracion{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral-3);margin-bottom:10px;
}
.sala h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,30px);
  text-transform:uppercase;letter-spacing:0;line-height:1.08;margin-bottom:12px;
}
.sala-texto{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:42ch;margin-bottom:22px}
.sala .ideal-label{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.sala .ideal{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:8px}
.sala .ideal li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--text)}
.sala .ideal svg{width:16px;height:16px;flex:0 0 16px;color:var(--coral)}
.salas-hint{
  display:none;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--coral-3);margin:-6px 0 clamp(28px,6vw,40px);
}
/* Mismo aviso, pero para la galería de "El espacio": visible siempre (no
   solo en móvil), porque esa galería es de scroll manual en cualquier
   tamaño de pantalla, a diferencia de las salas (que en desktop/tablet ya
   se ven las dos sin necesidad de deslizar). */
.galeria-hint{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--coral-3);margin:0 0 clamp(20px,4vw,32px);
}

/* Móvil (≤700px): las dos salas en el mismo renglón, deslizando en vez de
   apiladas. Cada tarjeta ocupa TODO el ancho de .wrap (sin sangrar a los
   bordes del viewport: un margen negativo aquí desbordaba la página
   horizontalmente porque .salas vive dentro de .wrap, que ya está
   centrado y con ancho limitado — a diferencia de los otros carruseles
   de la web, que van FUERA de .wrap a propósito). El scroll-snap encaja
   cada tarjeta al soltar. El aviso "Desliza para ver más" solo se ve
   aquí. */
@media (max-width:700px){
  /* Sin scroll nativo (antes overflow-x:auto): con eso, el navegador tenía
     que decidir en el primer instante de cada gesto a qué eje lo dedicaba,
     y a veces se equivocaba con el vertical de la página. Con
     overflow:hidden no hay nada que desplazar nativamente aquí: el
     arrastre horizontal lo lleva a mano main.js sobre .salas-track
     (transform), y el vertical de la página nunca se disputa con nada.
     Mismo motor que ya usan sin este problema beneficios/opiniones
     (.marquee/.marquee-track), sin el bucle automático que ahí no hace
     falta. */
  /* display:block: .salas es grid de 2 columnas en escritorio, pero esa
     regla (linea ~337) no tiene media query -- sin este reset, en movil
     .salas-track (ya no display:contents aqui) quedaba encajado en UNA
     sola columna de esa rejilla, es decir a mitad de ancho, y cada .sala
     calculaba su 100% sobre esa mitad: cabian casi dos tarjetas dentro
     del recorte de .salas y la segunda se veia cortada en vez de fuera
     de pantalla. Con display:block, .salas-track (flex) vuelve a ocupar
     el ancho completo del contenedor. */
  .salas{display:block;overflow:hidden;margin-bottom:10px}
  .salas-track{display:flex;flex-wrap:nowrap;gap:16px;will-change:transform}
  /* min-width:0: .sala es a la vez elemento flexible de .salas-track Y
     contenedor flex de su propio contenido; sin esto, su mínimo se calcula
     a partir de lo que hay dentro (texto, icono+texto en fila...) y podía
     acabar más ancha que el 100% que le tocaba — la tarjeta se pasaba del
     ancho de pantalla y quedaba recortada contra el overflow:hidden de
     .salas. Con min-width:0 + max-width:100%, lo que no cabe se ajusta
     DENTRO de la tarjeta en vez de ensancharla. */
  .sala{flex:0 0 100%;min-width:0;max-width:100%}
  .sala-clon{display:flex}
  /* Pegado a las tarjetas (arriba) y bien separado del carrusel de
     beneficios (abajo), para que quede claro que el aviso es de las
     salas, no de lo que viene después. */
  .salas-hint{display:flex;margin:0 0 clamp(40px,10vw,56px)}
}

/* --------------------------------------------------------- diferenciales */
/* ------------------------------------------------- por qué Halosal (dif.) */
/* Foto real a un lado y discurso al otro. Antes eran cuatro celdas con
   bordes, que leían como una tabla de características; ahora la foto lleva
   el peso visual y los cuatro puntos van como lista editorial, separados
   solo por una línea fina. */
.diferencia{
  display:grid;grid-template-columns:0.85fr 1fr;
  /* column-gap y row-gap por separado a propósito: el column-gap es el aire
     entre la foto y el texto, pero un row-gap iba a ese mismo valor (hasta
     70px) y se sumaba al margin-bottom de la cabecera, dejando un hueco
     enorme entre "...experiencia de bienestar." y "Limpieza entre
     sesiones". Ese espacio ya lo pone solo el margin-bottom de la cabecera,
     así que aquí el row-gap va a 0. */
  column-gap:clamp(32px,4.5vw,70px);row-gap:0;
  /* La foto ocupa las dos filas de su columna; cabecera y lista se apilan
     en la suya. grid-template-areas (en vez de solo el orden del HTML)
     es lo que permite que en móvil la foto se cuele ENTRE la cabecera y
     la lista sin duplicar marcado para cada tamaño. */
  grid-template-areas:"foto cabecera" "foto lista";
  align-items:stretch;
}
/* La foto llena su columna de arriba abajo, a ras con el texto. Se probó
   dejarla centrada (dejaba un hueco grande de crema) y sticky (inútil: las
   dos columnas miden casi lo mismo, así que no hay recorrido). */
.diferencia-foto{grid-area:foto;margin:0;height:100%}
.diferencia-foto img{
  /* Sin height:100% el atributo height="1165" del HTML manda y la foto sale
     con su alto original. Mismo tropiezo que hubo con la imagen del hero. */
  width:100%;height:100%;min-height:520px;object-fit:cover;display:block;
  border-radius:var(--r-m);
  box-shadow:0 18px 50px rgba(25,24,23,.13);
}
/* El encabezado aquí va alineado a la izquierda, no centrado como en el
   resto: la columna es estrecha y centrarlo dejaba el texto flotando. */
.diferencia-cabecera{grid-area:cabecera;margin-bottom:34px;max-width:none}
.diferencia-lista{grid-area:lista}
/* Titular en caja baja y con punto final, a diferencia de las otras
   secciones: pedido expreso para que este bloque lea más editorial. */
.titular-frase{text-transform:none !important;letter-spacing:-.015em;line-height:1.04}

.diferencia-lista{list-style:none;margin:0;padding:0;display:grid;gap:0}
.diferencia-lista li{
  display:flex;gap:22px;align-items:flex-start;
  padding:22px 0;border-top:1px solid var(--line);
}
.diferencia-lista li:last-child{border-bottom:1px solid var(--line)}
.dif-num{
  font-family:var(--serif);font-weight:400;font-size:30px;color:var(--rosasal);
  line-height:1.05;flex:0 0 auto;min-width:38px;
}
.diferencia-lista h3{font-size:17.5px;margin-bottom:5px}
.diferencia-lista p{color:var(--muted);font-size:15px;line-height:1.55}

/* -------------------------------------------------------------- historia */
.historia{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:stretch}
.historia-media{position:relative;min-height:380px}
.historia-media img{
  border-radius:var(--r-m);
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;   /* la cara, no el pecho */
}
.historia h2{font-size:clamp(32px,4.4vw,48px);margin-bottom:26px;line-height:1.04}
.historia blockquote{margin:0;font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(23px,2.8vw,30px);line-height:1.35;color:var(--ink)}
.historia .parrafos{display:grid;gap:16px;margin-top:24px}
.historia .parrafos p{color:var(--marron);font-size:17px;line-height:1.7}
.historia .firma{margin-top:28px;display:flex;align-items:center;gap:13px;font-size:14px;color:var(--muted);letter-spacing:.02em}
.historia .firma::before{content:"";width:34px;height:1.5px;background:var(--coral);flex:0 0 34px}


/* ============================================================
   CARRUSELES INFINITOS (opiniones, galería…)
   Mismo patrón que el carrusel de reseñas de alpha43.com y el
   CarruselInfinito de golfaffinity: bucle continuo con una animación CSS
   sobre el ancho real de un set (medido por JS, ver assets/js/carrusel.js),
   desvanecido en los bordes con mask-image, y arrastre con el dedo o el
   ratón. Motor genérico (.marquee/.marquee-track), reutilizado por las
   opiniones y la galería. Sin librerías: 0 dependencias nuevas.
   ============================================================ */
.marquee{
  position:relative;overflow:hidden;cursor:grab;padding:6px 0 10px;
  mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.marquee:active{cursor:grabbing}
.marquee-track{
  display:flex;gap:22px;width:max-content;align-items:stretch;
  will-change:transform;backface-visibility:hidden;
}
.marquee-track.is-animating{animation:marquee-scroll 45s linear infinite}
@keyframes marquee-scroll{
  from{transform:translateX(0) translateZ(0)}
  to{transform:translateX(calc(-1 * var(--set-w,50%))) translateZ(0)}
}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
}

/* Tarjeta de opinión */
.opinion-card{
  flex-shrink:0;user-select:none;width:clamp(270px,78vw,360px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  padding:30px 28px;display:flex;flex-direction:column;
}
.opinion-stars{display:flex;gap:2px;margin-bottom:16px}
.opinion-stars svg{width:15px;height:15px;color:var(--rosasal)}
.opinion-card .cita{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--marron);line-height:1.5;flex:1;margin-bottom:22px}
.opinion-autor{margin-top:auto;display:flex;align-items:center;gap:12px}
.opinion-avatar{
  flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--coral-soft);color:var(--coral-3);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:400;font-size:17px;
}
.opinion-autor b{display:block;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink)}
.opinion-autor > div span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}

/* Galería "El espacio": scroll nativo (sin animación propia), el
   visitante desliza a la derecha o la izquierda para descubrir las fotos.
   Antes llevaba un degradado en los bordes (mask-image) para insinuar que
   había más contenido fuera de pantalla; se quitó — hacía que las fotos
   de los extremos "nacieran" desvanecidas en vez de tener un contorno
   limpio, y en móvil se notaba como si fueran más anchas de lo que eran.
   .galeria-wrap es el envoltorio (position:relative) sobre el que se
   apoyan las flechas de escritorio, ver .galeria-flecha más abajo. */
.galeria-wrap{position:relative}
.galeria-scroll{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 0 14px;
}
.galeria-scroll::-webkit-scrollbar{display:none}
/* Viñeta corta en los bordes: no es que las fotos de los extremos midan
   más (todas comparten el mismo ancho), es que casi nunca hay una parada
   con la última foto visible completa — queda cortada en seco por el
   borde de la pantalla, sin su esquina redondeada por ese lado, y una
   foto sin su contorno cerrado se lee como si siguiera más allá. Esta
   capa (encima, no un mask sobre la foto) insinúa que hay más sin
   desvanecer el contenido: 44px fijos, no un % del carril completo como
   antes, así que apenas roza el borde de la tarjeta que le toque. */
.galeria-wrap::before,
.galeria-wrap::after{
  content:"";position:absolute;top:6px;bottom:14px;width:44px;z-index:1;pointer-events:none;
}
.galeria-wrap::before{left:0;background:linear-gradient(to right,var(--cream-2),transparent)}
.galeria-wrap::after{right:0;background:linear-gradient(to left,var(--cream-2),transparent)}

/* Flechas de la galería: solo en escritorio (min-width:1001px, ver más
   abajo) — en móvil el propio gesto de deslizar ya es la forma natural de
   moverse y estarían de más. */
.galeria-flecha{
  display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-m);
  color:var(--coral-3);cursor:pointer;
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.galeria-flecha:hover{background:var(--coral-soft);box-shadow:var(--shadow-l)}
.galeria-flecha svg{width:22px;height:22px}
.galeria-flecha-prev{left:24px}
.galeria-flecha-prev svg{transform:rotate(180deg)}
.galeria-flecha-next{right:24px}
@media (min-width:1001px){
  .galeria-flecha{display:flex}
}

/* Tarjeta de foto (galería "El espacio") */
.foto-card{
  scroll-snap-align:start;
  flex-shrink:0;user-select:none;width:clamp(240px,60vw,320px);aspect-ratio:4/5;
  border-radius:var(--r-m);overflow:hidden;cursor:zoom-in;box-shadow:var(--shadow-s);
}
.foto-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--curva)}
.foto-card:hover img{transform:scale(1.06)}

/* Galeria "El espacio" en movil: colocado DESPUES de las reglas base de
   arriba a proposito -- con la misma especificidad, si esto fuera antes
   en el archivo la base ganaria igual sin importar el media query (ya
   paso una vez, ver comentario en el bloque que se quito de aqui arriba).
   - La foto activa centrada en pantalla, y al deslizar la siguiente
     encaja centrada tambien: relleno lateral en .galeria-scroll (mismo
     calculo del ancho de tarjeta que el clamp() de .foto-card) +
     scroll-snap-align:center en vez de start.
   - Flechas tambien aqui (antes solo en escritorio): mismo boton, un
     poco mas pequeño y pegado al borde para que quepa en el hueco que
     deja el centrado sin tapar la foto entera. */
@media (max-width:700px){
  .galeria-scroll{
    scroll-snap-type:x mandatory;
    padding-left:calc((100vw - 24px - clamp(240px,60vw,320px)) / 2);
    padding-right:calc((100vw - 24px - clamp(240px,60vw,320px)) / 2);
  }
  .foto-card{scroll-snap-align:center}
  .galeria-flecha{display:flex;width:38px;height:38px}
  .galeria-flecha svg{width:18px;height:18px}
  .galeria-flecha-prev{left:2px}
  .galeria-flecha-next{right:2px}
}

/* Lightbox: clic en una foto de la galería para verla grande */
.lightbox{
  display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;
  /* .97 y no .92: el fondo de la pagina es crema y a .92 se leia el titular
     de la seccion por detras de la foto. Ahora que el visor se recorre foto a
     foto, ese fantasma distrae. */
  padding:32px;background:rgba(25,24,23,.97);
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-m);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.lightbox-close{
  position:fixed;top:22px;right:22px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .18s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,.24)}

/* Flechas del visor. Van fijas a los lados y no dentro de un contenedor de la
   imagen: la foto cambia de tamaño segun su proporcion (las hay verticales y
   panoramicas) y con las flechas pegadas a ella bailarian en cada salto. */
.lightbox-nav{
  position:fixed;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:30px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease;
  /* El glifo ‹ › tiene mucho aire a la derecha y queda descentrado */
  padding-bottom:4px;
}
.lightbox-nav:hover{background:rgba(255,255,255,.24)}
.lightbox-prev{left:22px}
.lightbox-next{right:22px}
.lightbox-contador{
  position:fixed;left:0;right:0;bottom:26px;margin:0;text-align:center;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;
  color:rgba(255,255,255,.62);
}
@media (max-width:620px){
  /* En movil no caben a los lados de la foto: bajan junto al contador y se
     manejan sobre todo deslizando. */
  .lightbox{padding:20px 14px 92px}
  .lightbox-nav{top:auto;bottom:20px;transform:none;width:46px;height:46px;font-size:26px}
  .lightbox-prev{left:calc(50% - 78px)}
  .lightbox-next{right:calc(50% - 78px)}
  .lightbox-contador{bottom:34px}
}

/* ---------------------------------------------------------------- precios */
.precios{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.precio{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-m);padding:34px 28px;
  display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;
}
.precio:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.precio.destacado{border-color:var(--coral);box-shadow:var(--shadow-l);position:relative}
.precio .badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--coral),var(--coral-2));color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 16px;border-radius:3px;white-space:nowrap;
}
.precio h3{font-size:18px;margin-bottom:14px}
.precio .cifra{font-family:var(--serif);font-weight:400;font-size:46px;color:var(--ink);line-height:1}
.precio .unidad{font-size:13.5px;color:var(--muted);margin-top:8px}
.precio .detalle{font-size:15px;color:var(--muted);margin:18px 0 20px}
.precio ul{display:grid;gap:10px;margin-bottom:26px}
.precio li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
.precio li svg{width:17px;height:17px;flex:0 0 17px;color:var(--coral);margin-top:3px}
.precio .btn{margin-top:auto;width:100%}
.precio-nota{
  margin-top:26px;text-align:center;font-size:14.5px;color:var(--muted);
  background:var(--white);border:1px dashed var(--piedra);border-radius:var(--r-m);padding:16px;
}

/* -------------------------------------------------------------------- faq */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.faq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  padding:0;overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease;
}
.faq details[open]{box-shadow:var(--shadow-m);border-color:var(--coral-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 56px 20px 24px;position:relative;
  font-family:var(--sans);font-weight:700;font-size:16.5px;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--coral-3);border-bottom:2px solid var(--coral-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .r{padding:0 24px 22px;color:var(--marron);font-size:15.5px}

/* --------------------------------------------------------------- contacto */
/* La fachada real del centro ocupa toda la sección, sin cabecera de texto
   delante: solo las tarjetas de cristal (glassmorphism) flotan encima. El
   velo es casi testimonial, únicamente para que .contacto-datos/.mapa no
   pierdan del todo el contraste sobre las zonas más claras de la foto. */
/* La altura no es decorativa: la seccion alinea su contenido abajo
   (justify-content:flex-end), asi que lo que sobra por arriba es lo que
   deja ver el rotulo de la fachada. Con 820px las tarjetas quedaban a 13px
   del rotulo a 1440, y a 1680 llegaban a taparlo. El rotulo termina al
   26,2% del alto de la foto (medido sobre fachada.webp: y=242 de 923), asi
   que con 960px quedan ~100px de aire por debajo de el en todos los anchos.
   Si algun dia crecen las tarjetas, hay que volver a subir este numero. */
#contacto{
  position:relative;overflow:hidden;min-height:720px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--cream-2) url("../img/fachada.webp") center 25%/cover;
  /* .section mete 110px de padding arriba Y abajo; el de abajo dejaba esa
     cantidad de foto de sobra bajo el botón de WhatsApp en vez de que el
     contenido llegara de verdad al final de la foto (justify-content:
     flex-end empuja al fondo de la caja, pero DENTRO del padding). Se
     anula solo el de abajo; el de arriba se queda, es el aire bajo el
     menú antes de que empiece a verse el rótulo. */
  padding-bottom:0;
}
#contacto::before{content:"";position:absolute;inset:0;background:rgba(251,239,227,.14)}
#contacto .wrap{position:relative;z-index:1}

/* Cabecera sobre la parte alta de la foto. Va en cristal como las fichas
   porque cae sobre la fachada y en texto plano no se leeria en todos los
   anchos: la foto cambia de claro a oscuro segun donde recorte. */
.contacto-head{
  display:inline-block;margin-bottom:20px;
  background:rgba(46,33,28,.42);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-m);padding:16px 24px;
}
.contacto-head .eyebrow{color:#f3d9d1;margin-bottom:8px}
.contacto-head .eyebrow::before{background:var(--rosasal)}
.contacto-head h2{color:#fff;font-size:clamp(24px,3.4vw,38px);margin:0;line-height:1.05;
  text-shadow:0 2px 10px rgba(25,24,23,.4)}

.contacto{display:grid;grid-template-columns:.85fr 1fr;gap:22px;align-items:stretch}

/* Los dos CTA de la ubicacion ocupan la ultima fila de la columna de fichas,
   asi que no cuentan como una ficha mas en el reparto de altura. */
.contacto-acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* El boton fantasma es transparente y aqui cae sobre la fachada, donde no se
   leia: se le pone el mismo cristal que a las fichas. */
.contacto-acciones .btn-ghost{
  background:rgba(255,252,248,.87);
  backdrop-filter:blur(30px) saturate(1.25);-webkit-backdrop-filter:blur(30px) saturate(1.25);
  border-color:rgba(255,255,255,.9);color:var(--coral-3);
}
.contacto-acciones .btn-ghost:hover{background:rgba(255,255,255,.96)}
.contacto-acciones .btn{flex:1;min-width:170px;justify-content:center}
@media (max-width:520px){
  .contacto-acciones .btn{min-width:100%}
}
/* Ficha de Horario y botón "Cómo llegar" fuera, en escritorio y en móvil:
   la barra fija de Llamar/Reservar ya cubre esa función en móvil, y en
   escritorio se pidió quitarlos y dejar solo "Reservar por WhatsApp",
   ahora en su propia fila centrada (ver .contacto-wa-fila).
   OJO: ".dato.dato-horario" (encadenado), no ".dato-horario" suelto — con
   una sola clase empataba en especificidad con la regla base ".dato{
   display:grid}" de más abajo, y al ir esa después en el archivo terminaba
   ganando ella: el horario seguía saliendo pese al display:none. */
.dato.dato-horario,.boton-como-llegar{display:none}
/* Con solo 3 fichas y sin fila de acciones ya no hace falta estirarlas a
   la altura del plano: cada una mide lo que pide su contenido, todas
   iguales ("cuadradas") en vez de deformadas para rellenar hueco. */
.contacto-datos{display:grid;gap:12px}

/* Fila del CTA de WhatsApp, centrada debajo de las dos columnas (antes
   vivía dentro de la columna del plano, cargándole el alto). */
.contacto-wa-fila{text-align:center;margin-top:26px}
.contacto-wa-boton{width:auto;min-width:280px;justify-content:center}

/* Tarjetas de cristal. El fondo va bastante opaco a propósito: detrás está
   la foto de la fachada, con el escaparate lleno de texto ("Alivio · Tos ·
   Asma"...), y con poca opacidad esas letras se colaban entre las nuestras.
   El blur solo no basta contra un fondo con tanto contraste. */
.dato{
  display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center;
  /* .78 dejaba leer "Alivio · Tos · Asma" del escaparate a traves de la
     ficha: el desenfoque solo no gana a un fondo con tanto contraste. .87 es
     el punto donde la fachada se sigue intuyendo y nuestro texto manda. */
  background:rgba(255,252,248,.87);
  backdrop-filter:blur(30px) saturate(1.25);-webkit-backdrop-filter:blur(30px) saturate(1.25);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-m);padding:16px 20px;
  box-shadow:0 10px 30px rgba(25,24,23,.08);
  transition:transform .28s var(--curva),box-shadow .28s var(--curva),background-color .28s ease;
}
.dato:hover{
  transform:translateY(-2px);
  background:rgba(255,252,248,.92);
  box-shadow:0 16px 38px rgba(25,24,23,.13);
}
.dato .ic{
  margin-bottom:0;width:44px;height:44px;flex:0 0 44px;border-radius:13px;
  background:linear-gradient(140deg,rgba(213,133,119,.24),rgba(213,133,119,.09));
  border:1px solid rgba(213,133,119,.3);
  color:var(--coral-3);
}
.dato .ic svg{width:19px;height:19px}
/* Rótulo pequeño y apagado, dato grande: antes competían los dos al mismo
   peso y no se sabía dónde mirar. */
.dato b{
  display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:4px;
}
.dato span,.dato a{font-size:15.5px;line-height:1.45;color:var(--ink);font-weight:500}
.dato a{color:var(--coral-3);font-weight:600}
.dato a:hover{text-decoration:underline;text-underline-offset:3px}

/* Tarjeta de mapa: mismo cristal que .dato, pero como enlace directo a
   Google Maps en vez de un iframe embebido — así no hace falta ni el paso
   de consentimiento de antes: nunca se incrusta nada de Google en la web. */
/* La tarjeta entera es el enlace: dentro va el plano y, encima, el boton.
   El plano se recorta con object-fit, asi la tarjeta puede estirarse a la
   altura de la columna de datos sin deformarlo. */
.mapa{
  position:relative;display:block;overflow:hidden;
  min-height:220px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:var(--r-m);
  box-shadow:0 14px 40px rgba(25,24,23,.08);
  background:var(--cream-2);
}
.mapa img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--curva);
}
.mapa:hover img{transform:scale(1.04)}
/* Velo inferior: sin el, el boton cae sobre las calles del plano y pierde
   contraste segun donde toque. */
.mapa::after{
  content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(to top,rgba(46,33,28,.55),transparent);
  pointer-events:none;
}
.mapa .btn{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:1;white-space:nowrap;
}

/* ------------------------------------------------------------------ footer */
/* Historial: hubo una zona CTA independiente arriba del todo (.footer-cta,
   con logo grande, título, subtítulo y botón "Reservar mi sesión"), que
   fusionaba lo que antes era la sección .cierre con el footer. Se quitó:
   el logo y el título pasaron a la primera columna, junto a la
   descripción de marca; el botón y el subtítulo se eliminaron sin más. */
.footer{background:var(--ink);color:rgba(239,227,216,.72);padding:34px 0 28px;font-size:15px}

.footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer img{height:58px;width:auto;margin-bottom:16px}
/* "Tu próxima pausa empieza aquí.", ahora aquí en vez de como titular
   grande de una zona propia: tamaño de lema corto, no de titular de
   sección. */
.footer-lema{
  font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,23px);
  color:var(--cream);line-height:1.25;margin-bottom:10px;
}
.footer h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
.footer a{color:rgba(239,227,216,.72)}
.footer a:hover{color:var(--rosasal)}
.footer ul{display:grid;gap:9px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-top:24px;font-size:13px}
.footer-legal{font-size:12.5px;color:rgba(239,227,216,.45);max-width:760px;margin-top:20px;line-height:1.6}
.credito{
  display:inline-flex;align-items:center;gap:9px;
  color:rgba(239,227,216,.7);font-size:12.5px;font-weight:500;
  opacity:.85;transition:opacity .2s ease;text-decoration:none;
}
.credito:hover{opacity:1;text-decoration:none}
/* margin-bottom:0 a proposito: .footer img le mete 16px pensando en el
   logo grande de la primera columna, y aqui ese margen entra en el
   centrado del flex y sube la imagen unos px sobre el texto. */
.credito img{height:15px;width:auto;margin-bottom:0;position:relative;top:-0.5px}

/* El deslizador de móvil (tres páginas de dos tarjetas) se eliminó el
   18/08/2026: obligaba a pintar los seis beneficios DOS VECES en el HTML, una
   para la rejilla y otra para el deslizador. Ahora hay una sola lista y el
   responsive lo resuelve la rejilla. Se fue con él la pista "Desliza para
   descubrir más", que ya no hace falta porque en móvil se ven los seis. */

/* ------------------------------------------------- barra CTA móvil fija */
/* Oculta hasta pasar el hero (que ya lleva su propio "Reservar mi sesión").
   display:none de base para no interferir en escritorio; en el breakpoint
   móvil pasa a flex pero empieza traducida fuera de pantalla, y solo sube
   cuando main.js le añade .visible. */
.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:rgba(245,241,232,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.mobile-bar .btn{flex:1;padding:14px 12px;font-size:13.5px}

/* ============================================================
   LO QUE NOTAS CUANDO VIENES — beneficios, carrusel arrastrable
   Rediseño del 24/08/2026: la rejilla numerada (01-06) con una línea fina
   encima de cada tarjeta se leía como una tabla, y esa línea parecía un
   separador de sección propia — justo lo que no queríamos al fusionar
   "servicios" y "beneficios". Ahora son tarjetas sueltas en el mismo
   carrusel arrastrable que opiniones y la galería (.marquee, ver
   assets/js/carrusel.js): sin números, sin líneas, cada una con su propio
   icono en vez de una posición en una lista.
   ============================================================ */
.beneficios-marquee{margin-top:clamp(8px,1.5vw,16px)}
.beneficio-card{
  flex-shrink:0;user-select:none;width:clamp(230px,27vw,290px);
  background:linear-gradient(135deg,var(--coral),var(--coral-2));
  border-radius:var(--r-m);box-shadow:0 14px 32px rgba(192,104,86,.28);
  padding:28px 26px;display:flex;flex-direction:column;
}
.beneficio-card h3{color:#fff;font-size:19px;margin-bottom:8px;line-height:1.2}
.beneficio-card p{color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.6}

.servicios-cta{text-align:center;margin-top:clamp(32px,4vw,48px)}



/* ============================================================
   OPINIONES — nota de Google
   ============================================================ */
/* El margin-bottom del .section-head genérico (54px) es el aire estándar
   antes de una tarjeta o una rejilla; aquí, antes de las estrellas, se veía
   como un hueco de más. Se acorta solo para esta sección. */
#opiniones .section-head{margin-bottom:22px}
.nota-google{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  margin-bottom:clamp(34px,4vw,50px);
}
.nota-estrellas{display:flex;gap:6px;color:var(--coral)}
.nota-estrellas svg{width:26px;height:26px}
.nota-cifra{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,30px);
  line-height:1;color:var(--ink);
}
.nota-google .nota-texto{
  display:block;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.nota-google .enlace-flecha{margin-top:4px}

/* ------------------------------------------------------------- animación */
/* ============================================================
   CAPA DE MOVIMIENTO
   Todos los estados iniciales cuelgan de .con-movimiento, que pone
   assets/js/movimiento.js. Sin JS, con prefers-reduced-motion o con ?qa=1
   NADA se esconde: la página se ve entera y quieta.
   ============================================================ */

/* Lenis lleva el scroll: el suavizado del navegador estorbaría. */
.con-movimiento{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* --- subida simple, para tarjetas y bloques --- */
.con-movimiento .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--curva),transform .85s var(--curva);
  transition-delay:var(--retraso,0ms);
}
.con-movimiento .reveal.dentro{opacity:1;transform:none}

/* --- fade: solo opacidad, para bloques grandes que no deben "saltar" --- */
.con-movimiento .fade{
  opacity:0;transition:opacity 1.1s var(--curva);transition-delay:var(--retraso,0ms);
}
.con-movimiento .fade.dentro{opacity:1}

/* --- slow-scale: zoom mínimo de foto al entrar en pantalla --- */
.con-movimiento .slow-scale img{
  transform:scale(1.08);transition:transform 1.3s var(--curva);
}
.con-movimiento .slow-scale.dentro img{transform:none}

/* --- titulares: el texto sube desde debajo del borde --- */
.mascara{display:block;overflow:hidden;padding-bottom:.1em}
.mascara-int{display:block}
.con-movimiento .mascara-int{
  transform:translateY(108%);
  transition:transform 1s var(--curva);
  transition-delay:var(--retraso,0ms);
}
.con-movimiento .con-mascara.dentro .mascara-int{transform:none}

/* --- fotos: se descubren de abajo arriba, con un punto de zoom --- */
/* .sala-foto SALIO de aqui: dependia de que el IntersectionObserver de
   movimiento.js calculase bien su interseccion estando dentro de un
   carrusel movido por transform (.salas-track) en vez de scroll nativo de
   la pagina, y ya ha fallado mas de una vez por motivos distintos --
   "adultos" se quedaba con clip-path:inset(0 0 100% 0) para siempre (foto
   invisible) si el observer no la marcaba "dentro". Sin esa dependencia,
   la foto se ve desde el primer momento; la entrada suave de la tarjeta
   la sigue dando .sala.reveal (fiable: no depende de ningun transform
   ajeno, solo de su propia posicion vertical en la pagina). .tv-video
   (Canal Sur) se queda, ese vive en scroll nativo normal. */
.con-movimiento .tv-video{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--curva);
  transition-delay:var(--retraso,0ms);
}
.con-movimiento .tv-video.dentro{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* =========================================================== responsive == */
@media (max-width:1000px){
  .g4,.equipo{grid-template-columns:repeat(2,1fr)}
  .g3,.precios{grid-template-columns:1fr}
  .historia,.contacto{grid-template-columns:1fr;gap:34px}
  /* En movil las tarjetas de cristal tapaban el rotulo de la fachada, que es
     lo unico que identifica el local en la foto. Se reserva el tercio
     superior para que el rotulo se vea y se manda todo el contenido abajo
     (la seccion ya es flex column con justify-content:flex-end). Para que
     quepa, las tarjetas van mas compactas mas abajo en este mismo bloque. */
  /* La foto deja de ser fondo `cover` y pasa a banda superior a ancho
     completo. Con cover habia que ampliarla tanto (la seccion es alta y
     estrecha) que el rotulo se salia por los lados y se leia "HALOS
     ALJARA". A ancho completo se ve entero y sin recortar.
     El padding reserva justo el alto de la foto: 100vw por su relacion de
     aspecto real (923/1705 = 0.5413), mas un respiro. */
  /* border-top: Opiniones y #contacto comparten --cream-2 (con las
     tarifas ocultas quedan pegados uno a otro) y aqui la foto no cubre
     desde el primer pixel como en escritorio -- empieza var(--nav-h) mas
     abajo a proposito (ver comentario debajo). Sin esta linea, esa franja
     inicial se fundia con el --cream-2 de Opiniones sin ningun corte
     visible entre los dos bloques. */
  #contacto{
    min-height:0;
    border-top:1px solid rgba(46,33,28,.1);
    background:var(--cream-2) url("../img/fachada.webp") center var(--nav-h) / 100% auto no-repeat;
    /* La banda arranca por debajo del menu fijo: al saltar a #contacto la
       seccion queda pegada arriba y la barra tapaba justo la palabra
       HALOSAL del rotulo. */
    padding-top:calc(var(--nav-h) + 100vw * 0.5413 + 22px);
    /* Holgura por debajo de la barra fija de Llamar/Reservar (~82px). El
       plano es el ultimo elemento de la seccion y sin esto su boton queda
       debajo de la barra justo al terminar de leerla. */
    padding-bottom:calc(64px + var(--barra-h));
  }
  #contacto::before{background:rgba(251,239,227,.1)}

  .contacto{gap:14px}
  /* En movil las fichas no compiten con el plano por la altura: cada una
     mide lo que necesita, sin repartir a partes iguales. */
  .contacto-datos{gap:10px;grid-auto-rows:auto}
  /* En movil la foto es una banda superior, asi que la cabecera ya no cae
     encima: sin fondo de cristal, que ahi parecia una caja gris flotando. */
  .contacto-head{
    display:block;background:none;border:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;padding:0;margin-bottom:16px;
  }
  .contacto-head .eyebrow{color:var(--coral-3)}
  .contacto-head h2{color:var(--ink);text-shadow:none}
  .dato{padding:13px 16px;gap:12px;border-radius:15px}
  .dato .ic{width:36px;height:36px;flex:0 0 36px;border-radius:11px}
  .dato .ic svg{width:16px;height:16px}
  .dato b{font-size:10px;letter-spacing:.13em;margin-bottom:3px}
  .dato span,.dato a{font-size:14px;line-height:1.4}
  /* En móvil ya hay una barra fija de Llamar/Reservar siempre visible, así
     que aquí sobran: los botones "Cómo llegar" y "Reservar por WhatsApp"
     (el botón "Abrir en Google Maps" del plano se queda). El horario ya se
     oculta en la regla universal, junto con "Cómo llegar". */
  .contacto-acciones,.contacto-wa-boton{display:none}
  /* Compacta en movil. Antes reservaba 220px de alto con el boton pegado
     al fondo (justify-content:flex-end), asi que a media pagina caia
     justo debajo de la barra fija de Llamar/Reservar y no se veia.
     Sin altura minima y con el contenido centrado, la tarjeta mide lo
     que ocupa y el boton queda a la vista. */
  /* En movil la tarjeta no se estira contra nada, asi que se le da una
     altura fija comoda para que el plano se lea. */
  .mapa{min-height:0;height:210px}
  .historia-media{min-height:0;height:320px}
  /* Apilado: la foto arriba, con menos altura para no comerse la pantalla. */
  /* Apilado en móvil: la foto va ENTRE la cabecera ("...experiencia de
     bienestar.") y la lista ("Limpieza entre sesiones..."), no antes de
     todo ni al final — pedido expreso del cliente. grid-template-areas
     reordena sin tocar el HTML ni el maquetado de escritorio. */
  .diferencia{
    grid-template-columns:1fr;gap:26px;
    grid-template-areas:"cabecera" "foto" "lista";
  }
  /* Apilada: en apaisado, que en vertical se come la pantalla. */
  .diferencia-foto{height:auto}
  .diferencia-foto img{height:auto;min-height:0;aspect-ratio:4/3}
  .diferencia-cabecera{margin-bottom:0}
  .diferencia-lista li{padding:18px 0;gap:16px}
  .dif-num{font-size:26px;min-width:32px}
  .footer-top{grid-template-columns:1fr 1fr}
  .mobile-bar{
    display:flex;transform:translateY(100%);transition:transform .3s var(--curva);
  }
  .mobile-bar.visible{transform:none}
  body{padding-bottom:var(--barra-h)}
  .hero{height:auto;min-height:0;padding-top:0}
  /* La barra fija de Llamar/Reservar ya cubre esta acción desde aquí en
     adelante (main.js la muestra en cuanto el hero deja de verse): estos
     dos botones se ocultan para no repetirla. El del hero se queda, es el
     único CTA visible mientras la barra no ha aparecido todavía. */
  .servicios-cta{display:none}
}
@media (max-width:760px){
  body{font-size:16.5px}
  :root{--nav-h:64px}
  .wrap{width:min(1180px,100% - 24px)}
  .section{padding:64px 0}
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--cream);border-bottom:1px solid var(--line);padding:14px 20px 22px;
    box-shadow:var(--shadow-m);display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 14px;font-size:16px}
  .nav-cta{display:inline-flex;margin-left:auto;padding:10px 15px;font-size:12px;gap:7px}
  .nav-cta svg{width:16px;height:16px;flex:0 0 16px}
  .nav-toggle{display:flex;margin-left:8px;width:42px;height:42px}
  .nav .wrap{gap:10px}
  .nav-logo img{height:40px}
  .hero{height:var(--vh100, 100svh);min-height:560px;max-height:none;padding-top:0}
  /* .wrap pasa a ocupar todo el alto del hero y se convierte en columna:
     así el antetítulo/titular/texto se quedan arriba (mitad superior de
     la foto) y el botón, con margin-top:auto, se empuja hacia abajo en
     vez de ir todo pegado al fondo como en desktop. */
  .hero .wrap{
    display:flex;flex-direction:column;height:100%;
    padding-top:calc(var(--nav-h) + 20px);padding-bottom:36px;
  }
  .hero-eyebrow{margin-bottom:22px}
  .hero h1{margin-bottom:22px}
  .hero .lead{margin-bottom:14px}
  /* El hueco flexible va ANTES de "Para adultos, niños..." (no antes del
     botón), para que ese texto quede pegado justo encima del botón en vez
     de separado de él por el aire que empuja el bloque hacia abajo. */
  .hero-publico{margin-top:auto;margin-bottom:10px}
  .hero-actions .btn{flex:1;min-width:100%}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:20px 16px}
  .trust-item:nth-child(2n+1){border-left:none;padding-left:0}
  .trust-item:nth-child(n+3){padding-top:16px}
  .g2,.g4,.equipo{grid-template-columns:1fr}
  .card,.precio,.opinion-card{padding:24px 20px}
  /* Contacto e Informacion en dos columnas dentro del mismo bloque (no
     uno debajo del otro): .footer-marca pasa a ocupar las dos columnas de
     su fila, y los dos divs siguientes (Contacto / Informacion, ver
     pie.php) caen solos, uno en cada columna, en la fila de abajo. */
  /* minmax(0,1fr) y no 1fr a secas: el email (halosalaljarafe@icloud.com,
     una sola palabra sin espacios) no se puede partir y pedia mas ancho
     minimo que cualquier enlace de Informacion -- con las dos columnas a
     "1fr" a secas (que llevan un minimo automatico = su contenido), esa
     palabra larga ensanchaba la columna de Contacto a costa de la de
     Informacion aunque el peso fuera igual. Con minmax(0,1fr) el minimo
     pasa a 0 y el email se envuelve dentro de su propia columna en vez de
     ensancharla. */
  .footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;row-gap:28px}
  .footer-marca{grid-column:1/-1}
  .footer-top a{overflow-wrap:anywhere}
  /* En móvil el crédito de la agencia va a la izquierda y el copyright a
     la derecha: al revés que en escritorio. El HTML no cambia, solo el
     orden visual dentro del flex.
     OJO: el selector tiene que ser ">span" (hijo directo), no "span" a
     secas — .credito es OTRO contenedor flex con su propio <span>Creado
     por</span> dentro, y un "span" sin acotar también le entraba a ese,
     invirtiendo ahí el logo con el texto. */
  .footer-bottom .credito{order:1}
  .footer-bottom > span{order:2}
}
@media (max-width:420px){
  .nav-cta{padding:11px;gap:0;width:44px}
  .nav-cta span{display:none}
}

/* ============================================================
   CHATBOT "SALADITO" — asistente flotante
   ============================================================ */
.chat-launcher{
  position:fixed;right:26px;bottom:26px;z-index:98;
  display:flex;align-items:center;gap:11px;
  background:linear-gradient(135deg,var(--coral),var(--coral-2));color:#fff;
  border:none;border-radius:999px;padding:13px 20px 13px 14px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:14.5px;
  box-shadow:0 14px 32px rgba(192,104,86,.42);
  transition:transform .2s ease,box-shadow .2s ease;
}
.chat-launcher:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(192,104,86,.5)}
.chat-launcher img{width:34px;height:34px;border-radius:50%;background:#fff;object-fit:cover}
.chat-launcher .dot{
  position:absolute;top:10px;left:38px;width:11px;height:11px;border-radius:50%;
  background:#5fae6b;border:2px solid #fff;
}
.chat-launcher[hidden]{display:none}

.chat-panel{
  position:fixed;right:26px;bottom:26px;z-index:99;width:390px;max-width:calc(100vw - 32px);
  height:min(620px,calc(100vh - 52px));
  background:var(--cream);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 70px rgba(25,24,23,.28);
  display:none;flex-direction:column;overflow:hidden;
}
.chat-panel.open{display:flex}
.chat-head{
  display:flex;align-items:center;gap:12px;padding:15px 16px;
  background:linear-gradient(135deg,var(--coral),var(--coral-2));color:#fff;
}
.chat-head img{width:40px;height:40px;border-radius:50%;background:#fff;object-fit:cover;flex:0 0 40px}
.chat-head b{font-family:var(--sans);font-size:15.5px;display:block;line-height:1.2}
.chat-head small{font-size:12px;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:6px}
.chat-head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#7ee094}
.chat-close{
  margin-left:auto;background:rgba(255,255,255,.14);border:none;color:#fff;cursor:pointer;
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;
}
.chat-close:hover{background:rgba(255,255,255,.24)}
.chat-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg{max-width:86%;padding:12px 15px;border-radius:12px;font-size:15px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start;color:var(--text)}
.msg.user{background:linear-gradient(135deg,var(--coral),var(--coral-2));color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg a{color:var(--coral-3);font-weight:600;text-decoration:underline}
.msg.user a{color:#fff}
.chat-foot{border-top:1px solid var(--line);background:#fff;padding:11px 12px}
.chat-form{display:flex;gap:9px;align-items:flex-end}
.chat-form textarea{
  flex:1;resize:none;border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  font-family:var(--sans);font-size:15px;color:var(--text);max-height:110px;line-height:1.45;background:var(--cream);
}
.chat-form textarea:focus{outline:none;border-color:var(--coral)}
.chat-send{
  background:linear-gradient(135deg,var(--coral),var(--coral-2));border:none;color:#fff;cursor:pointer;
  width:44px;height:44px;border-radius:10px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;
}
.chat-send:disabled{opacity:.5;cursor:not-allowed}
.chat-send svg{width:20px;height:20px}
.chat-legal{font-size:11px;color:var(--muted);text-align:center;padding:7px 10px 2px;line-height:1.4}
.typing{display:flex;gap:5px;padding:14px 16px;align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;border-bottom-left-radius:4px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--coral);opacity:.4;animation:blink 1.3s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ============================================================
   PÁGINAS LEGALES
   ============================================================ */
.legal-page{padding-top:calc(var(--nav-h) + 56px)}
.legal{max-width:820px;margin-inline:auto}
.legal h1{font-size:clamp(30px,4.4vw,44px);margin-bottom:10px;text-transform:none}
.legal-fecha{color:var(--muted);font-size:14px;margin-bottom:36px}
.legal h2{font-family:var(--sans);font-size:20px;margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--line);text-transform:none}
.legal h3{font-size:17px;margin:24px 0 8px}
.legal p{margin-bottom:14px;color:var(--marron)}
.legal ul{list-style:disc;padding-left:22px;margin:0 0 16px;display:grid;gap:8px}
.legal ol{padding-left:22px;margin:0 0 16px;display:grid;gap:8px}
.legal li{color:var(--marron)}
.legal a{text-decoration:underline}
.legal .dl{display:grid;gap:10px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-m);padding:22px;margin-bottom:18px}
.legal .dl div{display:grid;grid-template-columns:180px 1fr;gap:14px;font-size:15px}
.legal .dl dt,.legal .dl b{font-weight:700;color:var(--ink);font-family:var(--sans)}
.legal .tabla{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:14px}
.legal .tabla th,.legal .tabla td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal .tabla th{background:var(--cream-2);font-family:var(--sans);color:var(--ink)}
.legal .aviso{background:var(--coral-soft);border:1px solid var(--rosasal);border-radius:var(--r-m);
  padding:18px 20px;margin-bottom:20px;font-size:15px;color:var(--coral-dark)}
.pendiente{background:#ffe9a8;color:#7a5b00;padding:1px 8px;border-radius:4px;font-weight:700;font-size:.92em}
@media (max-width:760px){
  .legal-page{padding-top:calc(var(--nav-h) + 32px)}
  .legal .dl div{grid-template-columns:1fr;gap:2px}
  .legal .tabla{display:block;overflow-x:auto}
}


/* Posición del chat en pantallas pequeñas.
   IMPORTANTE: este bloque tiene que ir DESPUÉS de las reglas base del chat. */
@media (max-width:1000px){
  .chat-launcher{
    bottom:calc(14px + var(--barra-h) + env(safe-area-inset-bottom));right:14px;
    padding:11px 16px 11px 12px;font-size:14px;
  }
  .chat-launcher img{width:30px;height:30px}
  /* Más baja que la fórmula de escritorio y con un tope en dvh (alto de
     viewport ya descontada la barra del navegador): así cabe entera, con
     margen, sin que la cabecera con la X de cerrar quede fuera de pantalla.
     --chat-kb/--chat-vvh los fija chatbot.js con visualViewport: sin
     teclado valen 0px / sin límite extra (sin efecto aquí); con el
     teclado abierto suben el panel justo lo que tapa y evitan que se
     salga por arriba. */
  .chat-panel{
    bottom:calc(14px + var(--chat-barra-h, var(--barra-h)) + env(safe-area-inset-bottom) + var(--chat-kb, 0px));
    left:14px;right:14px;width:auto;
    height:min(58vh,460px);
    height:min(58dvh,460px,calc(var(--chat-vvh, 1000px) - 24px));
    transition:bottom .18s ease;
  }
}
@media (max-width:420px){
  .chat-launcher{padding:12px;gap:0;border-radius:50%}
  .chat-launcher .txt{display:none}
  .chat-launcher .dot{top:8px;left:34px}
}

.faq-pagina{max-width:none;margin-top:26px}

/* ============================================================
   BLOQUE "COMO VISTO EN CANAL SUR" (vídeo del reportaje)
   ============================================================ */
/* El reportaje es la prueba, asi que manda el video: el texto sube a la
   cabecera de la seccion y aqui abajo solo quedan los logos y el credito.
   Antes el video vivia en media caja oscura junto a un parrafo que competia
   con el. */
.tv{max-width:940px;margin-inline:auto}
.tv-video video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000;
  border-radius:var(--r-l);box-shadow:0 26px 60px rgba(122,52,42,.20);
}
.tv-pie{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:18px;
}
.tv-credito{margin:0;font-size:11.5px;line-height:1.45;color:var(--muted);max-width:46ch}
.tv-logos{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tv-logos img{height:26px;width:auto}
.tv-logos span{font-size:12px;color:var(--muted);letter-spacing:.02em}
#canal-sur .eyebrow svg{width:18px;height:18px}
#canal-sur .eyebrow::before{display:none}
#canal-sur .eyebrow{gap:8px}
@media (max-width:700px){
  .tv-pie{flex-direction:column;align-items:flex-start;gap:12px}
}


/* ============================================================
   EXPERIENCIAS HALOSAL
   La foto manda y el texto va encima. Antes eran tres tarjetas junto a una
   foto, y leia como "estas son las tres actividades que tenemos"; esto tiene
   que leer como "aqui pasan cosas que merece la pena vivir".
   ============================================================ */
.experiencias{padding:0}
.exp-marco{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(430px,58vh,600px);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.exp-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* La foto del yoga es morada y muy contrastada: sin un velo serio el texto
   blanco se pierde sobre las luces LED. En degradado y no plano, para que la
   foto siga respirando por los bordes. */
.exp-velo{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(95% 80% at 50% 50%,rgba(46,33,28,.78) 0%,rgba(46,33,28,.55) 100%),
    linear-gradient(180deg,rgba(46,33,28,.45),rgba(46,33,28,.72));
}
.exp-sobre{
  position:relative;z-index:2;
  max-width:640px;padding:clamp(56px,7vw,90px) 22px;
}
.exp-sobre .eyebrow{color:var(--rosasal);justify-content:center}
.exp-sobre .eyebrow::before{background:var(--rosasal)}
.exp-sobre h2{
  color:#fff;font-size:clamp(32px,5.2vw,60px);line-height:1.04;margin-bottom:18px;
  text-shadow:0 2px 16px rgba(25,24,23,.35);
}
/* Las actividades en una linea con puntos, no en tres tarjetas. */
.exp-lista{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;
  margin-bottom:32px;
  font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86);
}
.exp-lista span[aria-hidden]{color:var(--rosasal)}
@media (max-width:600px){
  .exp-marco{min-height:0}
  .exp-lista{font-size:11.5px;letter-spacing:.1em;gap:9px}
}

/* Experiencias con fecha: solo se pintan si $EXPERIENCIAS tiene contenido.
   Hoy esta vacio y no se inventa ninguna agenda. */
.exp-secundarias{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.5vw,44px);
  padding:clamp(44px,5vw,68px) 0;
}
.exp-card-foto{border-radius:var(--r-m);overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow-s)}
.exp-card-foto img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.exp-card h3{font-size:21px;margin-bottom:8px;line-height:1.2}
.exp-cuando{
  font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.05em;
  color:var(--coral-3);margin-bottom:10px;
}
.exp-card p{color:var(--muted);font-size:15px;line-height:1.6}
@media (max-width:900px){
  .exp-secundarias{grid-template-columns:1fr}
}