/* Centro Bienestar Kamali · limpiezadecolon.es
   «Lila claro y oro», aprobado por Bet el 8-oct-2026 sobre la muestra de portada.
   Un solo mundo claro (la consulta con luz de día). Letras en assets/fonts/fuentes.css.
   Al cargar: el titular sube palabra a palabra. Al bajar: titulares que suben, fotos que se
   abren, listas que entran una a una, una frase que se ilumina, una banda de palabras que se
   desliza, una línea que se dibuja y tarjetas de precios que se enderezan. Las terapias y las
   opiniones pasan solas. Un hilo dorado marca lo leído. Con el ratón: tarjetas y fotos que
   crecen, botones que se rellenan de oro. Todo se calma con «reducir movimiento». */
:root{
  color-scheme:light;
  /* Lila claro: lila del pétalo y oro del corazón de la flor, sobre marfil (elegido por Bet el 8-oct) */
  --fondo:#FAF7F2; --papel:#FFFFFF; --tenue:#F3ECF8;
  --principal:#8460A2; --principal-2:#6F4E8B; --hondo:#5E4278;
  --acento:#86640F; --acento-claro:#E6C670;
  --tinta:#2E2834; --tinta-suave:#655C6B;
  --display:"Ibarra Real Nova","Baskerville","Book Antiqua",Georgia,serif;
  --texto:"Albert Sans","Segoe UI",Roboto,Helvetica,sans-serif;
  --radio:28px; --radio-g:32px; --gutter:clamp(18px,4vw,48px); --ancho:1240px;
  --suave:cubic-bezier(.16,1,.3,1);
  --flor:url(assets/img/flor-mascara.webp);
  /* Oro metalizado para el botón de reservar: brillos claros en el centro, donde va el texto */
  --oro-metal:linear-gradient(115deg,#B48A2C 0%,#DDBB5F 16%,#F7E6A4 34%,#E6C66F 50%,#D2AA4C 70%,#EDD48A 86%,#B8902F 100%);
  --oro-tinta:#3E2A50;
}

html{scroll-behavior:smooth; scroll-padding-top:92px; scrollbar-color:var(--principal) var(--fondo)}
*{box-sizing:border-box}
body{margin:0; background:var(--fondo); color:var(--tinta); font:400 17px/1.65 var(--texto); -webkit-font-smoothing:antialiased; overflow-x:clip; transition:background-color .5s}
::selection{background:var(--acento-claro); color:var(--hondo)}
:focus-visible{outline:2px solid var(--acento); outline-offset:3px; border-radius:8px}
h1,h2,h3{font-family:var(--display); font-weight:400; margin:0; text-wrap:balance; letter-spacing:-.01em}
p,ul,ol{margin:0}
a{color:inherit}
em{font-style:italic; color:var(--acento)}
.envoltura{width:100%; max-width:calc(var(--ancho) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter)}
.seccion{padding-block:clamp(72px,10vw,136px)}
.titulo{font-size:clamp(2.2rem,1.5rem + 2.8vw,3.6rem); line-height:1.08; color:var(--hondo); transition:color .5s}
.cabecera-seccion{display:grid; gap:14px; max-width:660px; margin-bottom:clamp(32px,4vw,52px)}
.cabecera-seccion p{color:var(--tinta-suave); font-size:1.08rem}
.enlace{font-weight:500; color:var(--principal); text-decoration:none; padding-bottom:3px; cursor:pointer;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; transition:background-size .5s var(--suave), color .3s}
.enlace:hover{background-size:35% 1px; color:var(--principal-2)}

/* ---------- Palabras que suben (titulares) ---------- */
.mascara{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em}
.palabra{display:inline-block; transition:transform 1.1s var(--suave); transition-delay:calc(var(--i,0) * 55ms)}
.por-revelar .palabra{transform:translateY(108%)}

/* ---------- Botones: se rellenan desde abajo ---------- */
.btn{position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:.85rem 1.75rem;
  border-radius:999px; font:500 1rem/1 var(--texto); letter-spacing:.01em; text-decoration:none; white-space:nowrap; border:1px solid transparent; cursor:pointer;
  transition:color .35s, border-color .35s, background-color .5s, transform .4s var(--suave), box-shadow .4s var(--suave)}
.btn::before{content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; background:var(--btn-hover); transform:translateY(102%); transition:transform .55s var(--suave)}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 28px -16px color-mix(in srgb,var(--hondo) 70%,transparent)}
.btn:hover::before{transform:translateY(0)}
/* lila satinado: un brillo arriba y algo más hondo abajo */
.btn--principal{background:linear-gradient(180deg,#8A66A8,#7A5898 55%,#6F4E8B); color:#fff; --btn-hover:var(--oro-metal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px -12px color-mix(in srgb,var(--hondo) 80%,transparent)}
/* todos los botones que no son dorados se rellenan de oro metalizado al pasar el ratón */
.btn--principal:hover, .btn--claro:hover, .btn--contorno:hover, .btn--linea:hover{color:var(--oro-tinta); border-color:color-mix(in srgb,#8A6A1C 45%,transparent)}
/* iconos dentro de los botones: la flecha se mueve al pasar el ratón */
.btn svg{width:18px; height:18px; margin-left:10px; flex:none; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--suave)}
.btn svg.antes{margin:0 10px 0 -2px}
.btn:hover .flecha{transform:translateX(4px)}
.btn:hover .flecha-abajo{transform:translateY(3px)}
.btn--claro{background:var(--papel); color:var(--hondo); --btn-hover:var(--oro-metal); box-shadow:inset 0 -1px 0 rgba(94,66,120,.12), 0 8px 18px -12px rgba(0,0,0,.45)}
/* el dorado no se rellena: al pasar el ratón le cruza un destello, como la luz sobre el metal */
.btn--oro{background:var(--oro-metal); background-size:160% 100%; background-position:0% 50%; color:var(--oro-tinta);
  border-color:color-mix(in srgb,#8A6A1C 45%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(120,85,10,.3), 0 8px 18px -12px rgba(120,85,10,.6);
  transition:color .35s, transform .4s var(--suave), box-shadow .4s var(--suave), background-position .9s var(--suave)}
.btn--oro::before{inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%); transform:translateX(-120%); transition:none}
.btn--oro:hover{background-position:100% 50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(120,85,10,.3), 0 14px 26px -14px rgba(120,85,10,.75)}
.btn--oro:hover::before{transform:translateX(120%); transition:transform .9s var(--suave)}
/* cristal esmerilado sobre la foto: deja ver la sala detrás, desenfocada */
.btn--contorno{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6); color:#fff; --btn-hover:var(--oro-metal);
  -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -14px rgba(0,0,0,.5)}
/* lila muy suave con borde */
.btn--linea{background:var(--tenue); border-color:color-mix(in srgb,var(--principal) 40%,transparent); color:var(--hondo); --btn-hover:var(--oro-metal)}

/* ---------- Cabecera: transparente sobre la foto, sólida al bajar ---------- */
.cab{position:fixed; top:0; left:0; right:0; z-index:50; padding-top:env(safe-area-inset-top,0px); color:#fff; transition:background-color .45s, color .45s, box-shadow .45s}
.cab__in{max-width:calc(var(--ancho) + 2 * var(--gutter) + 32px); margin-inline:auto; padding:26px calc(var(--gutter) + 16px); display:flex; align-items:center; gap:28px; transition:padding .45s var(--suave)}
.cab__logo img{height:50px; width:auto; display:block; transition:height .45s var(--suave)}
.cab__logo .logo-color{display:none}
.cab__nav{margin-left:auto; display:flex; gap:28px; font-weight:500; font-size:.98rem}
.cab__nav > a:not(.btn){text-decoration:none; padding-block:6px; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .45s var(--suave)}
.cab__nav > a:not(.btn):hover{background-size:100% 1px}
.cab .btn{min-height:44px; padding:.7rem 1.4rem}
.cab__menu{display:none; width:46px; height:46px; border-radius:50%; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; place-items:center}
.cab__menu svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round}
.cab--solida{background:var(--fondo); color:var(--tinta);
  box-shadow:0 1px 0 color-mix(in srgb,var(--hondo) 10%,transparent), 0 12px 32px -20px color-mix(in srgb,var(--hondo) 45%,transparent)}
.cab--solida .cab__in{padding-block:12px}
.cab--solida .cab__logo img{height:44px}
.cab--solida .logo-blanco{display:none}
.cab--solida .logo-color{display:block}

/* ---------- Portada: foto grande con velo y movimiento lento ---------- */
.hero{padding:16px 16px 0}
.hero__marco{position:relative; isolation:isolate; overflow:hidden; border-radius:var(--radio-g); min-height:clamp(580px,90vh,880px); display:grid; place-items:center}
.hero__foto{position:absolute; inset:-9% 0; z-index:-2; background-size:cover; background-position:50% 50%; transform:translate3d(0,var(--py,0px),0) scale(1.05); will-change:transform}
.hero__velo{position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 70% 60% at 50% 52%, color-mix(in srgb,var(--hondo) 58%,transparent), color-mix(in srgb,var(--hondo) 30%,transparent) 75%),
             linear-gradient(180deg, color-mix(in srgb,var(--hondo) 55%,transparent) 0%, transparent 32%, transparent 62%, color-mix(in srgb,var(--hondo) 80%,transparent) 100%)}
.hero__txt{display:grid; justify-items:center; gap:22px; text-align:center; color:#fff; padding:150px var(--gutter) 150px; max-width:920px}
.hero h1{font-size:clamp(2.7rem,1.5rem + 4.8vw,5.6rem); line-height:1.04}
.hero__lede{font-size:clamp(1.05rem,.95rem + .45vw,1.3rem); line-height:1.55; max-width:42ch; color:rgba(255,255,255,.93)}
.hero__btns{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:6px}
.hero__datos{position:absolute; left:0; right:0; bottom:28px; padding-inline:var(--gutter); text-align:center; font-size:.93rem; color:rgba(255,255,255,.86)}
/* entrada al cargar la página */
.hero__lede, .hero__btns, .hero__datos{transition:opacity 1s var(--suave), transform 1s var(--suave)}
.anima:not(.cargada) .hero h1 .palabra{transform:translateY(108%)}
.anima:not(.cargada) .hero__lede, .anima:not(.cargada) .hero__btns, .anima:not(.cargada) .hero__datos{opacity:0; transform:translateY(18px)}
.anima .hero__lede{transition-delay:.45s} .anima .hero__btns{transition-delay:.6s} .anima .hero__datos{transition-delay:.8s}

/* ---------- Cinta de confianza (las cifras cuentan al aparecer) ---------- */
.cinta{display:grid; grid-template-columns:repeat(3,1fr); padding-top:clamp(36px,5vw,56px)}
.cinta > div{padding:6px clamp(16px,3vw,36px); display:grid; gap:4px; border-left:1px solid color-mix(in srgb,var(--hondo) 14%,transparent)}
.cinta > div:first-child{border-left:0; padding-left:0}
.cinta__dato{font:400 clamp(1.8rem,1.3rem + 1.3vw,2.4rem)/1.1 var(--display); color:var(--hondo); display:flex; align-items:center; gap:.35rem; font-variant-numeric:tabular-nums}
.cinta__dato svg{width:.62em; height:.62em; fill:var(--acento); transform:translateY(-1px)}
.cinta p:not(.cinta__dato){color:var(--tinta-suave); font-size:.98rem; line-height:1.45; max-width:30ch}

/* ---------- Opiniones de Google que pasan de lado ---------- */
.opiniones{padding-top:clamp(48px,6vw,80px)}
.opiniones__cab{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; margin-bottom:22px}
.opiniones__titulo{font:400 clamp(1.45rem,1.2rem + .8vw,1.9rem)/1.15 var(--display); color:var(--hondo)}
.opiniones__enlace{display:inline-flex; align-items:center; gap:6px; color:var(--principal-2); font-size:.95rem; font-weight:500; text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); text-underline-offset:4px}
.opiniones__enlace svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.opiniones__enlace:hover{color:var(--acento)}
.opiniones__ventana{overflow:hidden; padding-block:6px 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.opiniones__pista{display:flex; width:max-content; animation:desfile 150s linear infinite; animation-play-state:paused}
.opiniones.en-marcha .opiniones__pista{animation-play-state:running}
.opiniones.en-marcha .opiniones__ventana:hover .opiniones__pista, .opiniones.pausada .opiniones__pista{animation-play-state:paused}
.opiniones__acciones{display:flex; align-items:center; gap:16px}
.opiniones__pausa{width:44px; height:44px}
@keyframes desfile{to{transform:translateX(-50%)}}
.opiniones__fila{list-style:none; margin:0; padding:0 22px 0 0; display:flex; gap:22px}
.opinion{width:clamp(270px,28vw,370px); display:flex; flex-direction:column; gap:12px; padding:24px 26px; background:var(--papel); border-radius:var(--radio);
  border:1px solid color-mix(in srgb,var(--principal) 12%,transparent); box-shadow:0 18px 36px -28px color-mix(in srgb,var(--hondo) 55%,transparent)}
.opinion__estrellas{color:var(--acento); letter-spacing:.14em; font-size:.95rem; line-height:1}
.opinion__texto{margin:0; flex:1}
.opinion__texto p{color:var(--tinta); font-size:1rem; line-height:1.6; text-wrap:pretty}
.opinion__autor{font-size:.9rem; font-weight:600; color:var(--hondo)}
.opinion__autor span{font-weight:400; color:var(--tinta-suave)}

/* ---------- Frase que se ilumina palabra a palabra ---------- */
.frase{padding-block:clamp(84px,11vw,150px); text-align:center}
.relleno{font:400 clamp(1.45rem,1.05rem + 1.5vw,2.25rem)/1.3 var(--display); color:var(--hondo); max-width:38ch; margin-inline:auto; text-wrap:balance}
.relleno .p{opacity:var(--o,1); transition:opacity .25s linear}
.relleno em{white-space:nowrap}

/* ---------- Terapias: carrusel que se desliza hacia los lados ---------- */
#terapias .envoltura{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px; margin-bottom:clamp(28px,3.5vw,44px)}
#terapias .cabecera-seccion{margin-bottom:0}
.carrusel__mandos{display:flex; align-items:center; gap:12px}
.carrusel__barra{width:clamp(80px,10vw,140px); height:2px; margin-right:10px; border-radius:2px; background:color-mix(in srgb,var(--hondo) 14%,transparent); overflow:hidden}
.carrusel__barra i{display:block; height:100%; background:var(--acento); transform-origin:left; transform:scaleX(var(--avance,.3)); transition:transform .3s}
.carrusel__flecha{position:relative; isolation:isolate; overflow:hidden; width:54px; height:54px; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--principal) 30%,transparent); background:var(--papel); color:var(--principal-2); transition:color .3s, border-color .3s, opacity .3s}
.carrusel__flecha::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--oro-metal); opacity:0; transition:opacity .35s}
.carrusel__flecha:hover:not(:disabled){color:var(--oro-tinta); border-color:color-mix(in srgb,#8A6A1C 45%,transparent)}
.carrusel__flecha:hover:not(:disabled)::before{opacity:1}
.carrusel__flecha:disabled{opacity:.35; cursor:default}
.carrusel__flecha svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.carrusel__pista{list-style:none; margin:0; display:flex; gap:20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px max(var(--gutter), calc((100% - var(--ancho)) / 2)) 24px; scroll-padding-inline:max(var(--gutter), calc((100% - var(--ancho)) / 2));
  scrollbar-width:none; cursor:grab}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista.arrastrando{scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; user-select:none}
.carrusel__pista:focus-visible{outline:2px solid var(--principal); outline-offset:-2px}
.terapia{position:relative; isolation:isolate; overflow:hidden; flex:0 0 clamp(262px,24vw,330px); min-height:clamp(410px,34vw,470px); scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:flex-end; border-radius:var(--radio); transition:transform .6s var(--suave), box-shadow .6s var(--suave)}
.terapia:hover{transform:translateY(-6px); box-shadow:0 30px 50px -34px color-mix(in srgb,var(--hondo) 70%,transparent)}
.terapia__foto{position:absolute; inset:0; z-index:-2; background-size:cover; transform:scale(1.02); transition:transform 1.4s var(--suave)}
.terapia:hover .terapia__foto{transform:scale(1.08)}
.terapia--foto::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, color-mix(in srgb,var(--hondo) 92%,transparent) 0%, color-mix(in srgb,var(--hondo) 55%,transparent) 42%, transparent 72%)}
.terapia--texto{background:var(--tenue); border:1px solid color-mix(in srgb,var(--principal) 14%,transparent)}
.terapia--lamina{background:var(--papel); border:1px solid color-mix(in srgb,var(--principal) 14%,transparent)}
.terapia--lamina .terapia__foto{inset:14px 14px auto; height:52%; border-radius:calc(var(--radio) - 8px); background-size:contain; background-repeat:no-repeat; transform:none}
.terapia--lamina:hover .terapia__foto{transform:scale(1.04)}
.terapia--lamina h3{color:var(--hondo)}
.terapia--lamina .terapia__txt p:not(.terapia__dura){color:var(--tinta-suave)}
.terapia--lamina .terapia__dura{background:var(--tenue); color:var(--acento)}
.terapia--lamina .terapia__enlace{color:var(--principal-2)}
.terapia__flor{position:absolute; top:26px; left:24px; width:64px; height:48px; background:var(--acento);
  -webkit-mask:var(--flor) center/contain no-repeat; mask:var(--flor) center/contain no-repeat; opacity:.85}
.terapia__txt{display:grid; gap:10px; padding:26px 24px}
.terapia--foto .terapia__txt{color:#fff}
.terapia h3{font-size:clamp(1.5rem,1.25rem + .6vw,1.9rem); line-height:1.08; color:inherit}
.terapia--texto h3{color:var(--hondo)}
.terapia__txt p:not(.terapia__dura){font-size:.98rem; line-height:1.5; max-width:34ch; text-wrap:pretty}
.terapia--foto .terapia__txt p:not(.terapia__dura){color:rgba(255,255,255,.9)}
.terapia--texto .terapia__txt p:not(.terapia__dura){color:var(--tinta-suave)}
.terapia__dura{justify-self:start; font-size:.8rem; font-weight:600; letter-spacing:.06em; padding:5px 11px; border-radius:999px}
.terapia--foto .terapia__dura{background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.terapia--texto .terapia__dura{background:var(--papel); color:var(--acento)}
.terapia__enlace{display:inline-flex; align-items:center; gap:6px; justify-self:start; margin-top:4px; font-weight:500; font-size:.97rem; padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.terapia--texto .terapia__enlace{color:var(--principal-2)}
.terapia__enlace svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--suave)}
.terapia:hover .terapia__enlace svg{transform:translateX(4px)}
@media (max-width:560px){ .terapia{flex-basis:78vw; min-height:420px} .carrusel__barra{display:none} }

/* ---------- Terapias en cinta: pasan solas como las opiniones; con el ratón encima se paran y la tarjeta crece ---------- */
.carrusel--cinta .carrusel__ventana{overflow:hidden; padding-block:26px 62px; margin-block:-20px -38px; touch-action:pan-y pinch-zoom; cursor:grab; user-select:none; -webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.carrusel--cinta .carrusel__ventana.arrastrando{cursor:grabbing}
.carrusel--cinta .carrusel__pista{overflow:visible; width:max-content; padding:0; scroll-snap-type:none; scroll-behavior:auto; cursor:inherit; will-change:transform}
.carrusel--cinta .carrusel__pista:focus-visible{outline:none}
.carrusel--cinta .carrusel__ventana:has(.carrusel__pista:focus-visible){outline:2px solid var(--principal); outline-offset:-6px; border-radius:var(--radio)}
.carrusel--cinta .terapia:hover{transform:translateY(-8px) scale(1.06); z-index:2; box-shadow:0 28px 44px -26px color-mix(in srgb,var(--hondo) 75%,transparent)}
.carrusel--cinta .carrusel__barra i{transition:none}
.carrusel__ventana.por-entrar .terapia{opacity:0; translate:110px 0}
.carrusel__ventana.entra .terapia{transition:opacity 1s var(--suave), translate 1.3s var(--suave), transform .6s var(--suave), box-shadow .6s var(--suave);
  transition-delay:calc(var(--n,0) * 90ms), calc(var(--n,0) * 90ms), 0s, 0s}
/* el masaje a cuatro manos ocupa dos huecos, para que se vea a las dos profesionales */
.terapia--ancha{flex-basis:calc(2 * clamp(262px,24vw,330px) + 20px)}
.terapia--ancha .terapia__foto{background-position:50% 45%}
@media (max-width:560px){ .terapia--ancha{flex-basis:78vw} .terapia--ancha .terapia__foto{background-position:10% 50%} }
/* botón de pausa (terapias y opiniones) */
.pausa svg{width:18px; height:18px; fill:currentColor; stroke:none}
.pausa .pausa__seguir, .pausa[aria-pressed="true"] .pausa__parar{display:none}
.pausa[aria-pressed="true"] .pausa__seguir{display:block}

/* ---------- Banda de palabras que se desliza al bajar ---------- */
.deslizante{overflow:hidden; padding-block:clamp(20px,3vw,36px) clamp(56px,7vw,96px); display:grid; gap:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.fila-texto{display:flex; width:max-content; white-space:nowrap; font:400 clamp(2.6rem,1.6rem + 4.2vw,5.2rem)/1.08 var(--display); letter-spacing:-.015em;
  transform:translate3d(var(--x,0px),0,0); will-change:transform}
.fila-texto span{display:inline-flex; align-items:center; gap:.4em; padding-right:.4em}
.fila-texto i{display:inline-block; width:.62em; height:.47em; background:var(--acento); -webkit-mask:var(--flor) center/contain no-repeat; mask:var(--flor) center/contain no-repeat}
.fila-texto--llena{color:var(--principal)}
.fila-texto--hueca{color:transparent; -webkit-text-stroke:1px var(--acento)}

/* ---------- Tu primera sesión: línea que se dibuja ---------- */
.camino{position:relative; list-style:none; padding:0; display:grid; gap:clamp(56px,8vw,110px)}
.camino::before, .camino__linea{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; border-radius:2px}
.camino::before{background:color-mix(in srgb,var(--principal) 16%,transparent)}
.camino__linea{background:linear-gradient(var(--principal), var(--acento)); transform-origin:top; transform:scaleY(var(--avance,1))}
.etapa{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(56px,9vw,128px); align-items:center; opacity:.42; transition:opacity .8s var(--suave)}
.etapa.activo{opacity:1}
.etapa::before{content:""; position:absolute; left:50%; top:50%; width:20px; height:20px; border-radius:50%; background:var(--fondo);
  border:2px solid color-mix(in srgb,var(--principal) 35%,transparent); transform:translate(-50%,-50%) scale(.75); transition:all .6s var(--suave)}
.etapa.activo::before{background:var(--acento-claro); border-color:var(--acento); transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 8px color-mix(in srgb,var(--acento-claro) 35%,transparent)}
.etapa:nth-child(odd of .etapa) .etapa__foto{order:2}
.etapa__foto{aspect-ratio:4/3; border-radius:var(--radio); background-size:cover; background-position:center}
.etapa__txt{display:grid; gap:12px; max-width:440px}
.etapa__txt p{text-wrap:balance}
.etapa:nth-child(odd of .etapa) .etapa__txt{justify-self:end; text-align:right}
.etapa h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem); line-height:1.1; color:var(--hondo); display:flex; align-items:baseline; gap:.5em}
.etapa:nth-child(odd of .etapa) h3{justify-content:flex-end}
.etapa__num{font-size:1.5em; line-height:.8; color:var(--acento); font-variant-numeric:lining-nums}
.etapa p{color:var(--tinta-suave); font-size:1.04rem}

/* ---------- El centro: banda oscura, lista y foto que cambia ---------- */
.banda{margin-inline:16px; border-radius:var(--radio-g); background:var(--hondo); color:var(--papel); transition:background-color .5s}
.centro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:center}
.centro .titulo{color:var(--papel)}
.centro__intro{margin:16px 0 30px; color:color-mix(in srgb,var(--papel) 80%,transparent); font-size:1.06rem; max-width:44ch}
.estancias{list-style:none; padding:0; display:grid}
.estancia{all:unset; box-sizing:border-box; width:100%; display:grid; gap:8px; padding:18px 0; cursor:pointer; border-top:1px solid color-mix(in srgb,var(--papel) 18%,transparent)}
.estancias li:last-child .estancia{border-bottom:1px solid color-mix(in srgb,var(--papel) 18%,transparent)}
.estancia__nombre{font:400 clamp(1.6rem,1.2rem + 1.5vw,2.35rem)/1.1 var(--display); color:color-mix(in srgb,var(--papel) 48%,transparent); transition:color .4s, transform .5s var(--suave); display:flex; align-items:center; gap:14px}
.estancia__nombre::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--acento-claro); transform:scale(0); transition:transform .5s var(--suave)}
.estancia:hover .estancia__nombre, .estancia.activa .estancia__nombre{color:var(--papel)}
.estancia:hover .estancia__nombre{transform:translateX(6px)}
.estancia.activa .estancia__nombre::before{transform:scale(1)}
.estancia__txt{max-height:0; opacity:0; overflow:hidden; color:color-mix(in srgb,var(--papel) 82%,transparent); font-size:1rem; line-height:1.55; max-width:46ch; padding-left:24px; transition:max-height .6s var(--suave), opacity .4s}
.estancia.activa .estancia__txt{max-height:140px; opacity:1}
.estancia:focus-visible{outline-color:var(--acento-claro); outline-offset:6px}
.centro__fotos{position:relative; aspect-ratio:4/3; border-radius:var(--radio); overflow:hidden; background:color-mix(in srgb,var(--papel) 8%,transparent)}
.centro__foto{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.06); transition:opacity .8s var(--suave), transform 1.4s var(--suave)}
.centro__foto.activa{opacity:1; transform:none}
.centro__fotos:hover .centro__foto.activa{transform:scale(1.04)}
@media (min-width:981px){ .centro{align-items:start} .centro__fotos{position:sticky; top:118px} }

/* ---------- Tarifas: tarjetas inclinadas que se enderezan ---------- */
.cabecera-centrada{text-align:center; justify-items:center; margin-inline:auto}
.tarjetas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-top:28px}
.tarjeta{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16px; padding:36px 32px 32px; border-radius:var(--radio);
  background:var(--papel); border:1px solid color-mix(in srgb,var(--principal) 16%,transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 22px 44px -26px color-mix(in srgb,var(--hondo) 50%,transparent);
  transform-origin:50% 100%; transform:translateY(calc(var(--sube,0px) * var(--p,1) - var(--alza,0px))) rotate(calc(var(--giro,0deg) * var(--p,1)));
  transition:transform .45s var(--suave), box-shadow .45s var(--suave), background-color .5s}
.tarjeta:hover{--alza:10px; box-shadow:0 2px 4px rgba(0,0,0,.04), 0 34px 60px -28px color-mix(in srgb,var(--hondo) 60%,transparent)}
.tarjeta::before{content:""; position:absolute; width:250px; height:190px; right:-62px; top:-34px; background:var(--acento); opacity:.15; pointer-events:none;
  -webkit-mask:var(--flor) center/contain no-repeat; mask:var(--flor) center/contain no-repeat; transition:transform 1.2s var(--suave), opacity .6s}
.tarjeta:hover::before{transform:rotate(-12deg) scale(1.08); opacity:.24}
.tarjeta > *{position:relative}
.tarjeta h3{font-size:1.6rem; line-height:1.12; color:var(--hondo); padding-right:28px}
.tarjeta__precio{font:400 clamp(2.9rem,2.2rem + 2vw,3.8rem)/1 var(--display); color:var(--tinta); font-variant-numeric:lining-nums}
.tarjeta__precio small{font:500 .78rem/1 var(--texto); letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave); margin-left:.45rem}
.tarjeta ul{list-style:none; padding:0; display:grid; gap:10px; color:var(--tinta-suave); font-size:.99rem; margin-bottom:10px}
/* la viñeta va aparte para que un precio dentro de la frase no la parta en columnas */
.tarjeta li{position:relative; padding-left:18px}
.tarjeta li::before{content:""; position:absolute; left:0; top:calc(.8em - 4px); width:7px; height:7px; border-radius:50%; background:var(--acento)}
.tarjeta li.caduca{color:var(--acento); font-weight:500}
.tarjeta .btn{align-self:flex-start; margin-top:auto}
.tarjeta--destacada{background:var(--hondo); border-color:transparent}
.tarjeta--destacada::before{background:var(--acento-claro); opacity:.22}
.tarjeta--destacada h3, .tarjeta--destacada .tarjeta__precio{color:var(--papel)}
.tarjeta--destacada .tarjeta__precio small{color:color-mix(in srgb,var(--papel) 70%,transparent)}
.tarjeta--destacada ul{color:color-mix(in srgb,var(--papel) 84%,transparent)}
.tarjeta--destacada li::before{background:var(--acento-claro)}
.tarjeta--destacada li.caduca{color:var(--acento-claro)}
.insignia{align-self:flex-start; padding:.5rem .9rem; border-radius:999px; background:var(--acento-claro); color:var(--hondo); font:500 .82rem/1 var(--texto); letter-spacing:.03em}
.mas-tarifas{text-align:center; margin-top:clamp(40px,5vw,60px)}

/* ---------- Bet ---------- */
.yo{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(36px,7vw,110px); align-items:center}
.yo__foto{aspect-ratio:3/4; max-width:440px; width:100%; border-radius:240px 240px var(--radio) var(--radio); background-size:cover; background-position:50% 18%}
.yo__txt{display:grid; gap:18px; max-width:540px}
.yo__txt p{font-size:1.08rem}

/* ---------- Fotos que se abren al aparecer ---------- */
.revela-foto{clip-path:inset(0 0 0 0 round var(--radio)); transition:clip-path 1.5s var(--suave), transform 1.7s var(--suave)}
.por-revelar-foto{clip-path:inset(16% 12% 16% 12% round var(--radio)); transform:scale(1.06)}

/* ---------- Preguntas frecuentes: acordeón que se abre suave ---------- */
:root{interpolate-size:allow-keywords}
.faq{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px); align-items:start}
.faq__cab{position:sticky; top:120px; display:grid; gap:16px}
.faq__cab p{color:var(--tinta-suave); font-size:1.06rem; max-width:36ch}
.faq__lista{display:grid; gap:12px}
.pregunta{background:var(--papel); border:1px solid color-mix(in srgb,var(--hondo) 10%,transparent); border-radius:22px;
  transition:border-color .4s, box-shadow .5s var(--suave), transform .5s var(--suave)}
.pregunta:hover{border-color:color-mix(in srgb,var(--principal) 35%,transparent); transform:translateY(-2px);
  box-shadow:0 18px 36px -24px color-mix(in srgb,var(--hondo) 55%,transparent)}
.pregunta[open]{border-color:color-mix(in srgb,var(--principal) 30%,transparent); box-shadow:0 18px 36px -24px color-mix(in srgb,var(--hondo) 45%,transparent)}
.pregunta summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px 20px 28px;
  border-radius:22px; font:400 clamp(1.15rem,1.05rem + .35vw,1.35rem)/1.3 var(--display); color:var(--hondo)}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary:focus-visible{outline-offset:-3px}
.pregunta__signo{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--tenue); color:var(--principal);
  transition:background-color .4s, color .4s, transform .6s var(--suave)}
.pregunta__signo svg{width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round}
.pregunta:hover .pregunta__signo{background:var(--principal); color:#fff}
/* abierta: el + gira y se vuelve una × dorada */
.pregunta[open] .pregunta__signo{background:var(--oro-metal); color:var(--oro-tinta); transform:rotate(45deg)}
.pregunta::details-content{block-size:0; overflow:hidden; transition:block-size .55s var(--suave), content-visibility .55s allow-discrete}
.pregunta[open]::details-content{block-size:auto}
.pregunta__resp{padding:0 28px 24px; color:var(--tinta-suave)}
.pregunta__resp p + p{margin-top:.75em}
@media (max-width:980px){
  .faq{grid-template-columns:1fr}
  .faq__cab{position:static}
}
@media (max-width:560px){
  .pregunta summary{padding:18px 16px 18px 20px}
  .pregunta__resp{padding:0 20px 20px}
}

/* ---------- Cierre sobre tu foto del loto: la flor a la derecha, el recuadro a la izquierda ---------- */
/* el fondo es el color del agua de la foto, para que la flor se funda sin borde */
.final{position:relative; isolation:isolate; overflow:hidden; margin-inline:16px; border-radius:var(--radio-g); min-height:clamp(480px,46vw,620px); display:grid; place-items:center start;
  padding:clamp(48px,6vw,88px) clamp(24px,5vw,80px); background:#0C1626}
.final__foto{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:100% 50%; transform:scale(var(--zoom,1)); transform-origin:72% 50%; will-change:transform}
.final::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, color-mix(in srgb,var(--hondo) 50%,transparent), color-mix(in srgb,var(--hondo) 28%,transparent) 50%, color-mix(in srgb,var(--hondo) 4%,transparent))}
.final__tarjeta{background:var(--papel); border-radius:var(--radio); padding:clamp(32px,4.5vw,56px); max-width:540px; display:grid; justify-items:center; gap:16px; text-align:center;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.final__tarjeta p{color:var(--tinta-suave); font-size:1.06rem; max-width:44ch}
.final__btns{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:6px}
.final__datos{font-size:.93rem}
/* en pantallas medianas y móvil: la flor arriba y el recuadro debajo, para no taparla */
@media (max-width:1099px){
  .final{place-items:end center; padding-top:clamp(300px,52vw,420px)}
  .final__foto{bottom:auto; height:calc(clamp(300px,52vw,420px) + 80px); background-position:92% 50%; transform-origin:62% 50%;
    -webkit-mask-image:linear-gradient(#000 72%,transparent); mask-image:linear-gradient(#000 72%,transparent)}
  .final::after{background:linear-gradient(180deg, color-mix(in srgb,var(--hondo) 6%,transparent), color-mix(in srgb,var(--hondo) 45%,transparent) 70%)}
}

/* ---------- Redes sociales y botón de llamar ---------- */
.frase__llamar{margin-top:clamp(28px,3.5vw,44px)}
.redes{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.redes a{position:relative; isolation:isolate; overflow:hidden; width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--papel) 30%,transparent); color:var(--papel); transition:color .3s, border-color .3s, transform .35s var(--suave)}
.redes a::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--oro-metal); opacity:0; transition:opacity .35s}
.redes a:hover{color:var(--oro-tinta); border-color:transparent; transform:translateY(-2px)}
.redes a:hover::before{opacity:1}
.redes svg{width:19px; height:19px; fill:currentColor}
.final .redes{justify-content:center; margin-top:2px}
.final .redes a{color:var(--principal-2); border-color:color-mix(in srgb,var(--principal) 26%,transparent)}
.pie__lema{margin-top:16px; font-size:.95rem; max-width:30ch}
.pie{margin-top:clamp(56px,7vw,88px); background:var(--hondo); color:color-mix(in srgb,var(--papel) 82%,transparent); border-radius:var(--radio-g) var(--radio-g) 0 0; padding-block:56px 120px; transition:background-color .5s}
.pie__grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:32px}
.pie img{height:46px; width:auto}
.pie h3{font:500 .82rem/1 var(--texto); letter-spacing:.12em; text-transform:uppercase; color:var(--acento-claro); margin-bottom:14px}
.pie ul{list-style:none; padding:0; display:grid; gap:8px; font-size:.97rem}
.pie__legal{margin-top:40px; padding-top:24px; border-top:1px solid color-mix(in srgb,var(--papel) 16%,transparent); font-size:.86rem; max-width:90ch}

/* ---------- Hilo dorado arriba: marca lo que llevas leído ---------- */
.hilo{position:fixed; top:0; left:0; right:0; z-index:60; height:3px; pointer-events:none; background:var(--oro-metal); transform-origin:0 50%; transform:scaleX(var(--leido,0))}
@supports (animation-timeline: scroll()){
  .hilo{transform:none; animation:leer linear both; animation-timeline:scroll(root)}
}
@keyframes leer{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* ---------- WhatsApp siempre a mano: aparece al pasar la portada ---------- */
.wasap{position:fixed; right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:45; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; height:60px; border-radius:999px; text-decoration:none; color:#fff;
  background:linear-gradient(180deg,#8A66A8,#7A5898 55%,#6F4E8B);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 30px -12px rgba(62,42,80,.6), 0 0 0 0 rgba(132,96,162,0);
  opacity:0; visibility:hidden; translate:0 24px; scale:.9;
  transition:opacity .45s var(--suave), translate .6s var(--suave), scale .6s var(--suave), visibility 0s linear .6s, color .3s}
.wasap.visible{opacity:1; visibility:visible; translate:none; scale:none; animation:llama 2s .9s 2 ease-out;
  transition:opacity .45s var(--suave), translate .6s var(--suave), scale .6s var(--suave), visibility 0s, color .3s}
.wasap.tapado{opacity:0; visibility:hidden; pointer-events:none}
.wasap::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--oro-metal); opacity:0; transition:opacity .35s}
.wasap:hover{color:var(--oro-tinta)}
.wasap:hover::before{opacity:1}
.wasap svg{flex:none; width:28px; height:28px; margin-inline:16px; fill:currentColor}
.wasap__txt{max-width:0; overflow:hidden; white-space:nowrap; font:500 .98rem/1 var(--texto); transition:max-width .6s var(--suave), padding .6s var(--suave)}
.wasap:hover .wasap__txt, .wasap:focus-visible .wasap__txt{max-width:16em; padding-left:24px}
@keyframes llama{
  from{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 30px -12px rgba(62,42,80,.6), 0 0 0 0 rgba(132,96,162,.55)}
  to{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 30px -12px rgba(62,42,80,.6), 0 0 0 22px rgba(132,96,162,0)}
}
@media (max-width:560px){ .wasap{height:56px} .wasap svg{width:26px; height:26px; margin-inline:15px} }

/* ---------- Volver arriba: aparece al bajar, encima del WhatsApp ---------- */
.arriba{position:fixed; right:calc(24px + env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:44; isolation:isolate; overflow:hidden;
  width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:var(--principal-2); background:var(--papel);
  border:1px solid color-mix(in srgb,var(--principal) 30%,transparent); box-shadow:0 12px 26px -14px rgba(62,42,80,.55);
  opacity:0; visibility:hidden; translate:0 16px;
  transition:opacity .45s var(--suave), translate .6s var(--suave), visibility 0s linear .6s, color .3s, border-color .3s}
.arriba.visible{opacity:1; visibility:visible; translate:0 0;
  transition:opacity .45s var(--suave), translate .6s var(--suave), visibility 0s, color .3s, border-color .3s}
.wasap.visible ~ .arriba.visible{translate:0 -74px}
.arriba::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--oro-metal); opacity:0; transition:opacity .35s}
.arriba:hover{color:var(--oro-tinta); border-color:color-mix(in srgb,#8A6A1C 45%,transparent)}
.arriba:hover::before{opacity:1}
.arriba .arriba__flecha{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:translate .45s var(--suave), opacity .25s}
.arriba:hover .arriba__flecha{translate:0 -3px}
/* El aro se llena de oro según bajas, como el hilo de arriba; mientras te mueves sale el %, al parar vuelve la flecha */
.arriba{border-color:transparent}
.arriba__aro{position:absolute; inset:0; width:100%; height:100%; rotate:-90deg; fill:none; pointer-events:none}
.arriba__pista{stroke:color-mix(in srgb,var(--principal) 20%,transparent); stroke-width:2.5}
.arriba__lleno{stroke:url(#oro-aro); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100}
.arriba__cifra{position:absolute; inset:0; display:grid; place-items:center; font-size:12.5px; font-weight:600; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; opacity:0; transition:opacity .25s}
.arriba--cuenta .arriba__cifra{opacity:1}
.arriba--cuenta .arriba__flecha{opacity:0}
.arriba:hover .arriba__cifra, .arriba:focus-visible .arriba__cifra{opacity:0}
.arriba:hover .arriba__flecha, .arriba:focus-visible .arriba__flecha{opacity:1}
@media (max-width:560px){ .arriba{right:calc(22px + env(safe-area-inset-right,0px))} .wasap.visible ~ .arriba.visible{translate:0 -70px} }

/* ---------- Detalles con keyframes ---------- */
/* la foto de la portada respira muy despacio */
@keyframes respira{to{scale:1.07}}
.hero__foto{animation:respira 26s ease-in-out infinite alternate}
/* el teléfono suena al aparecer y al pasar el ratón */
@keyframes timbre{0%,72%,100%{rotate:0deg} 9%,27%,45%{rotate:-15deg} 18%,36%,54%{rotate:15deg}}
@keyframes timbre-b{0%,72%,100%{rotate:0deg} 9%,27%,45%{rotate:-15deg} 18%,36%,54%{rotate:15deg}}
.suena svg.antes{animation:timbre 1.3s .7s ease-in-out}
.frase__llamar:hover svg.antes, .btn--linea[href^="tel"]:hover svg.antes{animation:timbre-b 1s ease-in-out}
/* listas que entran una a una */
@keyframes sube{from{opacity:0; translate:0 28px}}
.por-escalonar > *{opacity:0}
.escalona > *{animation:sube 1s var(--suave) both; animation-delay:calc(var(--n,0) * 110ms)}

/* ---------- Aparición suave al bajar ---------- */
[data-aparece]{transition:opacity 1s var(--suave), transform 1s var(--suave)}
.por-aparecer{opacity:0; transform:translateY(30px)}

/* ---------- Tableta y móvil ---------- */
@media (max-width:980px){
  .cab__nav{display:none}
  .cab__menu{display:grid}
  .cab__reservar{margin-left:auto}
  .cab.menu-abierto{background:var(--fondo); color:var(--tinta)}
  .cab.menu-abierto .logo-blanco{display:none}
  .cab.menu-abierto .logo-color{display:block}
  .cab.menu-abierto .cab__nav{display:grid; position:absolute; top:100%; left:0; right:0; gap:0; padding:8px var(--gutter) 24px; background:var(--fondo); box-shadow:0 28px 40px -24px color-mix(in srgb,var(--hondo) 45%,transparent)}
  .cab.menu-abierto .cab__nav > a:not(.btn){padding-block:14px; border-bottom:1px solid color-mix(in srgb,var(--hondo) 10%,transparent); background:none}
  .centro{grid-template-columns:1fr}
  .centro__fotos{order:-1; aspect-ratio:4/3}
  .yo{grid-template-columns:1fr}
  .yo__foto{max-width:360px; margin-inline:auto}
  .tarjetas{grid-template-columns:1fr; max-width:480px; margin-inline:auto; gap:24px}
  .tarjeta{--sube:0px !important}
  .tarjeta:nth-child(1){--giro:-1.5deg !important}
  .tarjeta:nth-child(2){--giro:1.2deg !important}
  .tarjeta:nth-child(3){--giro:-1.2deg !important}
  .pie__grid{grid-template-columns:1fr 1fr}
  /* la línea de los pasos pasa a la izquierda */
  .camino::before, .camino__linea{left:11px}
  .etapa{grid-template-columns:1fr; gap:22px; padding-left:46px}
  .etapa::before{left:11px; top:14px}
  .etapa:nth-child(odd of .etapa) .etapa__foto{order:0}
  .etapa:nth-child(odd of .etapa) .etapa__txt{justify-self:start; text-align:left}
  .etapa:nth-child(odd of .etapa) h3{justify-content:flex-start}
  .etapa__txt{order:-1}
}
@media (max-width:820px){
  .cinta{grid-template-columns:1fr; gap:18px}
  .cinta > div{border-left:0; padding:18px 0 0; border-top:1px solid color-mix(in srgb,var(--hondo) 14%,transparent)}
  .cinta > div:first-child{border-top:0; padding-top:0}
}
@media (max-width:560px){
  .cab__logo img{height:40px}
  .cab__reservar{display:none}
  .cab__menu{margin-left:auto}
  .hero{padding:12px 12px 0}
  .hero__marco{min-height:620px}
  .hero__txt{padding:120px 22px 150px}
  .hero__btns .btn{flex:1 1 100%}
  .banda, .final{margin-inline:12px}
  .pie__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__foto{transform:scale(1.05)}
  .tarjeta{transform:none}
  [data-aparece], .centro__foto, .estancia__txt, .btn, .btn::before, .palabra, .revela-foto, .etapa{transition:none}
  .btn--oro, .btn--oro:hover::before{transition:none}
  .pregunta, .pregunta::details-content, .pregunta__signo, .btn svg{transition:none}
  .carrusel__pista{scroll-behavior:auto} .redes a, .redes a::before{transition:none} .terapia, .terapia__foto, .terapia__enlace svg{transition:none}
  .opiniones__pista{animation:none}
  .hero__foto, .wasap, .wasap.visible, .escalona > *, .suena svg.antes, .frase__llamar:hover svg.antes, .btn--linea[href^="tel"]:hover svg.antes{animation:none}
  .wasap, .wasap.visible, .wasap__txt, .carrusel__ventana.entra .terapia, .arriba, .arriba.visible, .arriba .arriba__flecha, .arriba__cifra{transition:none}
  .opiniones__ventana{overflow-x:auto; scroll-snap-type:x mandatory}
  .opiniones__fila[aria-hidden]{display:none}
  .opinion{scroll-snap-align:start}
  .por-aparecer{opacity:1; transform:none}
  .por-revelar .palabra{transform:none}
  .por-revelar-foto{clip-path:inset(0 0 0 0 round var(--radio)); transform:none}
  .etapa{opacity:1}
}

/* =========================================================================
   Cabecera de la web entera: menú con las páginas y desplegable de terapias
   ========================================================================= */
.cab__nav{gap:26px}
.cab__nav > a, .cab__grupo > a{white-space:nowrap}
.cab__nav > a[aria-current], .cab__grupo > a[aria-current]{background-size:100% 1px}
.cab__grupo{position:relative; display:flex; align-items:center}
.cab__grupo > a{text-decoration:none; padding-block:6px; display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .45s var(--suave)}
.cab__grupo > a:hover{background-size:100% 1px}
.cab__grupo > a svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:rotate .4s var(--suave)}
.cab__grupo:hover > a svg, .cab__grupo:focus-within > a svg{rotate:180deg}
.cab__panel{position:absolute; top:calc(100% + 16px); left:50%; width:500px; margin:0 0 0 -250px; padding:10px; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:2px 8px;
  background:var(--papel); color:var(--tinta); border-radius:22px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--hondo) 8%,transparent), 0 28px 50px -24px color-mix(in srgb,var(--hondo) 55%,transparent);
  opacity:0; visibility:hidden; translate:0 10px; transition:opacity .3s, translate .45s var(--suave), visibility 0s linear .45s}
.cab__panel::before{content:""; position:absolute; left:0; right:0; top:-18px; height:18px}
.cab__grupo:hover .cab__panel, .cab__grupo:focus-within .cab__panel{opacity:1; visibility:visible; translate:0 0; transition-delay:0s}
.cab__panel a{display:flex; align-items:center; min-height:46px; padding:0 16px; border-radius:14px; text-decoration:none; font-size:.98rem; transition:background-color .3s, color .3s, padding .4s var(--suave)}
.cab__panel a:hover{background:var(--tenue); color:var(--hondo); padding-left:22px}
.cab__panel a[aria-current="page"]{color:var(--principal-2); background:var(--tenue)}
.cab__panel ul{list-style:none; margin:0; padding:0; display:grid; gap:2px; align-content:start}
.cab__otras{padding-left:8px; border-left:1px solid color-mix(in srgb,var(--hondo) 10%,transparent)}
.cab__otras p{padding:12px 16px 6px; font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-suave)}
.cab__cta{display:none !important}
/* páginas sin foto arriba: la cabecera es sólida desde el principio */
.cab--clara ~ main{padding-top:80px}
.cab:not(.cab--solida) :focus-visible{outline-color:var(--acento-claro)}
@media (max-width:980px){
  .cab.menu-abierto .cab__nav{max-height:calc(100vh - 90px); overflow-y:auto}
  .cab.menu-abierto .cab__grupo{display:block}
  .cab.menu-abierto .cab__grupo > a{display:flex; padding-block:14px; border-bottom:1px solid color-mix(in srgb,var(--hondo) 10%,transparent); background:none}
  .cab.menu-abierto .cab__grupo > a svg{display:none}
  .cab.menu-abierto .cab__panel{position:static; opacity:1; visibility:visible; translate:none; min-width:0; width:auto; margin:0; padding:0 0 0 16px; background:none; box-shadow:none; border-radius:0; gap:0; grid-template-columns:1fr}
  .cab.menu-abierto .cab__panel ul{gap:0}
  .cab.menu-abierto .cab__otras{padding-left:0; border-left:0}
  .cab.menu-abierto .cab__otras p{padding:16px 0 4px}
  .cab.menu-abierto .cab__otras ul{padding-left:16px}
  .cab.menu-abierto .cab__panel::before{display:none}
  .cab.menu-abierto .cab__panel a{min-height:48px; border-radius:0; padding-inline:0; border-bottom:1px solid color-mix(in srgb,var(--hondo) 8%,transparent); color:var(--tinta-suave)}
  .cab.menu-abierto .cab__panel a:hover{background:none; padding-left:6px}
  .cab.menu-abierto .cab__cta{display:inline-flex !important; margin-top:18px; justify-self:start}
  .cab--clara ~ main{padding-top:72px}
}

/* =========================================================================
   Páginas interiores: el mismo mundo «Lila claro y oro» que la portada
   ========================================================================= */
.wrap{width:100%; max-width:calc(var(--ancho) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter)}
.lectura{width:100%; max-width:calc(820px + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.saltar{position:absolute; left:-999px; top:0; z-index:100; padding:.8rem 1.2rem; border-radius:0 0 14px 0; background:var(--hondo); color:#fff}
.saltar:focus{left:0}
b,strong{font-weight:600}
img{display:block; max-width:100%}

/* cabecera de cada página: con su foto (como la portada) o en lila suave */
.cab-pagina{position:relative; isolation:isolate; overflow:hidden; margin:16px 16px 0; border-radius:var(--radio-g);
  padding-block:clamp(56px,7vw,96px) clamp(48px,6vw,80px);
  background:radial-gradient(ellipse 70% 120% at 88% -10%, color-mix(in srgb,var(--principal) 18%,transparent), transparent 62%), var(--tenue)}
.cab-pagina::before{content:""; position:absolute; right:-40px; bottom:-60px; z-index:-1; width:clamp(220px,26vw,360px); aspect-ratio:4/3; background:var(--acento); opacity:.12;
  -webkit-mask:var(--flor) center/contain no-repeat; mask:var(--flor) center/contain no-repeat}
.cab-pagina h1{font-size:clamp(2.5rem,1.5rem + 3.8vw,4.8rem); line-height:1.04; color:var(--hondo); max-width:17ch}
.entradilla{margin-top:20px; font-size:clamp(1.06rem,.98rem + .4vw,1.3rem); line-height:1.55; color:var(--tinta-suave); max-width:52ch; text-wrap:pretty}
.migas{display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; margin-bottom:14px; font-size:.93rem; color:var(--tinta-suave)}
.migas a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 80%/0 1px no-repeat; transition:background-size .45s var(--suave), color .3s}
.migas a:hover{color:var(--principal-2); background-size:100% 1px}
.cab-pagina--foto{display:flex; align-items:flex-end; min-height:clamp(440px,64vh,620px); padding-block:150px clamp(44px,6vw,76px); color:#fff; background:var(--hondo)}
.cab-pagina--foto::before{display:none}
.cab-pagina__foto{position:absolute; inset:-8% 0; z-index:-2; background-size:cover; background-position:center;
  transform:translate3d(0,var(--py,0px),0) scale(1.04); animation:respira 26s ease-in-out infinite alternate; will-change:transform}
.cab-pagina--foto::after, .foto-titular::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, color-mix(in srgb,var(--hondo) 55%,transparent) 0%, transparent 32%, color-mix(in srgb,var(--hondo) 38%,transparent) 55%, color-mix(in srgb,var(--hondo) 90%,transparent) 100%)}
.cab-pagina--foto h1{color:#fff}
.cab-pagina--foto .entradilla{color:rgba(255,255,255,.93)}
.cab-pagina--foto .migas{color:rgba(255,255,255,.82)}
.cab-pagina--foto .migas a:hover{color:#fff}
.cab-pagina--foto :focus-visible{outline-color:var(--acento-claro)}
/* entrada al cargar, como el titular de la portada */
.cab-pagina .migas, .cab-pagina .entradilla, .p404 p, .p404 .acciones{transition:opacity 1s var(--suave), transform 1s var(--suave)}
.anima:not(.cargada) .cab-pagina h1 .palabra, .anima:not(.cargada) .p404 h1 .palabra{transform:translateY(108%)}
.anima:not(.cargada) .cab-pagina .migas, .anima:not(.cargada) .cab-pagina .entradilla,
.anima:not(.cargada) .p404 p, .anima:not(.cargada) .p404 .acciones{opacity:0; transform:translateY(18px)}
.anima .cab-pagina .entradilla, .anima .p404 p{transition-delay:.4s}
.anima .cab-pagina .migas, .anima .p404 .acciones{transition-delay:.55s}

/* titulares y texto */
.titular{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.4rem); line-height:1.07; color:var(--hondo)}
.h2{font-size:clamp(1.65rem,1.3rem + 1.3vw,2.4rem); line-height:1.1; color:var(--hondo)}
.prosa{display:flex; flex-direction:column; gap:1.15rem; max-width:62ch}
.prosa p, .dos__texto p, .bet__texto p{text-wrap:pretty}
.suave{color:var(--tinta-suave)}
.pie-nota{font-size:.96rem; line-height:1.62; color:var(--tinta-suave); max-width:62ch}
/* El texto se alarga hasta el borde de las cajas, tarjetas y listas que tiene al lado (las cajas no se estrechan) */
.lectura .prosa, .lectura .pie-nota, .lectura .nota-precios, .lectura .beneficios__intro, .lectura .beneficios__nota, .lectura .aviso--cierre{max-width:none}
.destaque{font:400 clamp(1.3rem,1.12rem + .7vw,1.7rem)/1.35 var(--display); color:var(--principal-2)}
.acciones{display:flex; flex-wrap:wrap; gap:12px}
.prosa a:not(.btn):not(.enlace), .aviso a, .dos__texto p a:not(.enlace), .datos a:not(.btn):not(.enlace), .legal a, .subraya{color:var(--principal-2); text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent); text-underline-offset:3px; transition:color .3s, text-decoration-color .3s}
.prosa a:not(.btn):not(.enlace):hover, .aviso a:hover, .dos__texto p a:not(.enlace):hover, .datos a:not(.btn):not(.enlace):hover, .legal a:hover, .subraya:hover{color:var(--acento); text-decoration-color:currentColor}
.enlace{display:inline-flex; align-items:center; min-height:44px}

/* bandas: blanca y lila hondo, con las esquinas redondeadas como en la portada */
.seccion--blanca{margin:16px; border-radius:var(--radio-g); background:var(--papel)}
.oscura{margin:16px; border-radius:var(--radio-g); background:var(--hondo); color:color-mix(in srgb,var(--papel) 90%,transparent)}
.oscura .titular, .oscura .h2, .oscura h2{color:var(--papel)}
.oscura .suave, .oscura .pie-nota{color:color-mix(in srgb,var(--papel) 74%,transparent)}
.oscura .enlace{color:var(--acento-claro)}
.oscura :focus-visible{outline-color:var(--acento-claro)}
.seccion--pegada{padding-top:0}

/* texto y foto a dos columnas */
.dos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,96px); align-items:center}
.dos > *{min-width:0}
.dos--inv .dos__foto{order:2}
.dos--arriba{align-items:start}
.dos__foto{border-radius:var(--radio); overflow:hidden; background:var(--tenue)}
.dos__foto img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--suave)}
.dos__foto:hover img{transform:scale(1.04)}
.foto-54{aspect-ratio:5/4} .foto-43{aspect-ratio:4/3} .foto-45{aspect-ratio:4/5}
.dos__foto--estrecha{max-width:440px; justify-self:end; width:100%}
.dos__texto{display:flex; flex-direction:column; gap:1.25rem}
.dos__texto p{max-width:56ch}
.columna{display:grid; gap:2rem}

/* Sobre mí: foto en arco */
.bet{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(36px,7vw,110px); align-items:center}
.bet__texto{display:flex; flex-direction:column; gap:1.3rem; min-width:0}
.bet__texto p{max-width:56ch; font-size:1.06rem}
.bet__foto{aspect-ratio:3/4; width:100%; max-width:420px; justify-self:end; overflow:hidden; border-radius:240px 240px var(--radio) var(--radio); background:var(--tenue)}
.bet__foto img{width:100%; height:100%; object-fit:cover; object-position:50% 18%}

/* Terapias: filas que se elevan */
.fila{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 280px; gap:clamp(20px,3vw,48px); align-items:center; margin-bottom:14px; padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px) clamp(22px,3vw,40px);
  border-radius:var(--radio); background:var(--papel); border:1px solid color-mix(in srgb,var(--principal) 12%,transparent); text-decoration:none; color:inherit;
  transition:transform .55s var(--suave), box-shadow .55s var(--suave), border-color .4s}
.fila:hover{transform:translateY(-5px); border-color:color-mix(in srgb,var(--principal) 30%,transparent); box-shadow:0 30px 50px -34px color-mix(in srgb,var(--hondo) 75%,transparent)}
.fila h2, .fila h3{font-size:clamp(1.6rem,1.3rem + 1.1vw,2.3rem); line-height:1.08; color:var(--hondo); transition:color .3s}
.fila:hover h2, .fila:hover h3{color:var(--principal)}
.fila__txt{color:var(--tinta-suave); font-size:1rem; line-height:1.62; max-width:46ch}
.fila__img{aspect-ratio:4/3; border-radius:calc(var(--radio) - 8px); overflow:hidden; background:var(--tenue)}
.fila__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--suave)}
.fila:hover .fila__img img{transform:scale(1.07)}
.fila__mas{display:inline-flex; margin-top:12px; padding-bottom:3px; color:var(--principal-2); font-weight:500;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; transition:background-size .5s var(--suave)}
.fila:hover .fila__mas{background-size:35% 1px}

/* pasos numerados */
.pasos{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pasos li{display:grid; grid-template-columns:48px 1fr; gap:18px; align-items:start; padding:20px 24px; border-radius:22px; background:var(--papel);
  border:1px solid color-mix(in srgb,var(--principal) 12%,transparent); transition:transform .5s var(--suave), box-shadow .5s var(--suave)}
.pasos li:hover{transform:translateX(4px); box-shadow:0 18px 34px -26px color-mix(in srgb,var(--hondo) 60%,transparent)}
.seccion--blanca .pasos li{background:var(--fondo)}
.pasos .n{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--tenue); color:var(--acento); font:400 1.5rem/1 var(--display); font-variant-numeric:lining-nums}
.seccion--blanca .pasos .n{background:var(--papel)}
.pasos h2, .pasos h3{font:600 1.05rem/1.35 var(--texto); letter-spacing:0; color:var(--hondo); margin-top:10px}
.pasos p{margin-top:4px; color:var(--tinta-suave); font-size:.99rem; line-height:1.62}

/* listas de precios (las escribe tarifas/generar.py desde el Excel) */
.tarifas{list-style:none; margin:0; padding:0}
.tarifa{display:grid; grid-template-columns:1fr auto; gap:.3rem 1.5rem; align-items:baseline; padding-block:1.3rem; border-top:1px solid color-mix(in srgb,var(--hondo) 12%,transparent)}
.tarifa:last-child{border-bottom:1px solid color-mix(in srgb,var(--hondo) 12%,transparent)}
.tarifa h3{font:600 1.05rem/1.35 var(--texto); letter-spacing:0; color:var(--hondo)}
.tarifa p{color:var(--tinta-suave); font-size:.96rem; line-height:1.55}
.tarifa__txt{min-width:0}
.precio, .tarifa .precio{font:400 clamp(1.55rem,1.3rem + .7vw,2rem)/1.1 var(--display); color:var(--principal-2); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap}
.cad{display:block; margin-top:.45rem; font-size:.93rem; font-weight:500; color:var(--acento)}
.tarifa__compra{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-top:.9rem}
.tarifa__compra small{font-size:.84rem; line-height:1.4; color:var(--tinta-suave)}
.btn--peq{min-height:44px; padding:.6rem 1.25rem; font-size:.95rem}
.oscura .tarifa{border-color:color-mix(in srgb,var(--papel) 16%,transparent)}
.oscura .tarifa h3{color:var(--papel)}
.oscura .tarifa p{color:color-mix(in srgb,var(--papel) 74%,transparent)}
.oscura .precio, .oscura .tarifa .precio, .oscura .cad{color:var(--acento-claro)}
.oscura .tarifa__compra small{color:color-mix(in srgb,var(--papel) 66%,transparent)}
.subtitulo-precios{margin:2.6rem 0 1rem; font-size:clamp(1.35rem,1.15rem + .7vw,1.7rem)}
.nota-precios{margin-top:1.4rem; font-size:.96rem; max-width:65ch}

/* avisos */
.aviso{padding:20px 24px; border-radius:22px; background:var(--tenue); border:1px solid color-mix(in srgb,var(--principal) 18%,transparent); font-size:.99rem; line-height:1.65; color:var(--tinta)}
.aviso > b:first-child{display:block; margin-bottom:6px; font:400 1.25rem/1.3 var(--display); color:var(--hondo)}
.aviso--ambar{background:#FBF4E4; border-color:color-mix(in srgb,var(--acento) 32%,transparent)}
.aviso--ambar > b:first-child{color:var(--acento)}
.oscura .aviso{background:color-mix(in srgb,var(--papel) 8%,transparent); border-color:color-mix(in srgb,var(--papel) 18%,transparent); color:color-mix(in srgb,var(--papel) 90%,transparent)}
.oscura .aviso > b:first-child{color:var(--acento-claro)}
.oscura .aviso a{color:var(--acento-claro)}

/* escala de Bristol */
.bristol-wrap{overflow-x:auto; margin-top:1.6rem}
.bristol{width:100%; max-width:840px; border-collapse:separate; border-spacing:0 6px}
.bristol tr{background:var(--papel)}
.bristol tr.ref{background:var(--tenue)}
.bristol td{padding:.85rem 1rem; vertical-align:middle; font-size:.96rem; color:var(--tinta-suave)}
.bristol td:first-child{border-radius:16px 0 0 16px; font:400 1.12rem/1.2 var(--display); color:var(--hondo); white-space:nowrap}
.bristol td:last-child{border-radius:0 16px 16px 0}
.bristol svg{width:110px; height:44px; fill:#A98D73}
.bristol .grieta{fill:none; stroke:#846A55; stroke-width:1.8; stroke-linecap:round}
.bristol .tag{display:inline-block; margin-left:.5rem; padding:.18rem .62rem; border-radius:999px; background:var(--principal); color:#fff; font-size:.72rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; vertical-align:middle}

/* galería de facioterapia */
.galeria{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px); margin-top:clamp(28px,4vw,44px)}
.galeria figure{margin:0; overflow:hidden; border-radius:var(--radio); background:var(--papel); border:1px solid color-mix(in srgb,var(--principal) 12%,transparent)}
.galeria img{width:100%; height:auto; transition:transform 1.3s var(--suave)}
.galeria figure:hover img{transform:scale(1.03)}

/* tarjetas regalo */
.regalos{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.regalo{display:grid; grid-template-columns:1fr auto; gap:.4rem 1.5rem; align-items:center; padding:22px 26px; border-radius:22px; background:var(--fondo);
  border:1px solid color-mix(in srgb,var(--principal) 12%,transparent); transition:transform .5s var(--suave), box-shadow .5s var(--suave)}
.regalo:hover{transform:translateY(-3px); box-shadow:0 22px 40px -30px color-mix(in srgb,var(--hondo) 70%,transparent)}
.regalo h3{font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem); line-height:1.15; color:var(--hondo)}
.regalo p{margin-top:4px; color:var(--tinta-suave); font-size:.96rem}
.regalo .cad{margin-top:.5rem}
.regalo__lado{display:flex; align-items:center; gap:1.2rem}

/* contacto */
.datos{display:grid; gap:1.7rem}
.datos h2, .datos h3{font:600 .8rem/1 var(--texto); letter-spacing:.14em; text-transform:uppercase; color:var(--acento); margin-bottom:.55rem}
.datos p{font-size:1.06rem}
.datos .acciones{margin-top:.8rem}
.datos .dos__foto{max-width:440px}
.datos .redes{margin-top:4px}
.datos .redes a, .bet__texto .redes a{color:var(--principal-2); border-color:color-mix(in srgb,var(--principal) 28%,transparent)}
.form{display:grid; gap:1.1rem; padding:clamp(24px,3vw,40px); border-radius:var(--radio); background:var(--papel); border:1px solid color-mix(in srgb,var(--principal) 12%,transparent);
  box-shadow:0 30px 60px -44px color-mix(in srgb,var(--hondo) 60%,transparent)}
.campo{display:grid; gap:.45rem}
.campo label{font-size:.96rem; font-weight:500; color:var(--hondo)}
.campo input, .campo textarea{width:100%; min-height:52px; padding:.85rem 1.1rem; border:1px solid color-mix(in srgb,var(--hondo) 18%,transparent); border-radius:16px;
  background:var(--fondo); color:var(--tinta); font:inherit; transition:border-color .3s, box-shadow .3s, background-color .3s}
.campo textarea{min-height:150px; resize:vertical}
.campo input:focus, .campo textarea:focus{outline:none; border-color:var(--principal); background:var(--papel); box-shadow:0 0 0 4px color-mix(in srgb,var(--principal) 16%,transparent)}
.campo [aria-invalid="true"]{border-color:#A4472A}
.campo .ayuda{font-size:.86rem; line-height:1.45; color:var(--tinta-suave)}
.check{display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; color:var(--tinta-suave)}
.check input{flex:none; width:22px; height:22px; margin-top:.1rem; accent-color:var(--principal)}
.check a{color:var(--principal-2)}
.form-ok{padding:1rem 1.2rem; border-radius:16px; background:var(--tenue); color:var(--hondo); font-size:.96rem}
.form-ok.es-error{background:#FBF4E4; border:1px solid color-mix(in srgb,var(--acento) 32%,transparent); color:var(--tinta)}

/* textos legales */
.legal h2{font-size:clamp(1.4rem,1.2rem + .7vw,1.8rem); margin:2.4rem 0 .7rem; color:var(--hondo)}
.legal h3{font:600 1.05rem/1.4 var(--texto); letter-spacing:0; margin:1.6rem 0 .5rem; color:var(--hondo)}
.legal p{margin-bottom:.9rem}
.legal ul, .legal ol{margin:0 0 1rem; padding-left:1.3rem}
.legal li{margin-bottom:.45rem}
.legal li::marker{color:var(--acento)}
.legal table{width:100%; border-collapse:collapse; margin:0 0 1.2rem; font-size:.96rem}
.legal th, .legal td{text-align:left; vertical-align:top; padding:.7rem .9rem .7rem 0; border-top:1px solid color-mix(in srgb,var(--hondo) 12%,transparent); overflow-wrap:anywhere}
.legal th{font-weight:600; color:var(--hondo)}
.legal tr > th:first-child:nth-last-child(2){width:34%}
.legal-meta{margin-top:2.4rem; font-size:.93rem; color:var(--tinta-suave)}
.legal .aviso{margin:1.2rem 0}

/* 404 */
.p404{padding-block:clamp(56px,10vw,120px); text-align:center}
.p404 h1{margin:0 auto 1rem; max-width:18ch; font-size:clamp(2.4rem,1.6rem + 3vw,4.2rem); line-height:1.05; color:var(--hondo)}
.p404 p{max-width:48ch; margin:0 auto 2rem; color:var(--tinta-suave)}
.p404 .acciones{justify-content:center}
.atajos{list-style:none; margin:2.6rem auto 0; padding:0; max-width:660px; text-align:left; display:grid; gap:10px}
.atajos a{display:flex; flex-direction:column; gap:.2rem; padding:18px 24px; border-radius:22px; background:var(--papel); border:1px solid color-mix(in srgb,var(--principal) 12%,transparent);
  text-decoration:none; transition:transform .5s var(--suave), box-shadow .5s var(--suave)}
.atajos a:hover{transform:translateY(-3px); box-shadow:0 22px 40px -30px color-mix(in srgb,var(--hondo) 70%,transparent)}
.atajos b{font:400 1.4rem/1.2 var(--display); color:var(--hondo)}
.atajos span{font-size:.96rem; color:var(--tinta-suave)}

/* huecos y medidas sueltas */
.tras-titulo{margin-top:1.4rem}
.titular--lista{margin-bottom:1.6rem}
.titular--corto{max-width:18ch}
.titular--nota{margin-bottom:.8rem}
.prosa--intro{margin:1.4rem 0 2rem}
.separado{margin-top:2rem}
.aviso--bloque{margin:1.6rem 0}
.aviso--cierre{margin-top:clamp(2rem,4vw,3rem); max-width:68ch}
.aviso--pasos{margin-top:2rem}
.prosa--pasos{max-width:none}
.antes-de-boton{margin-bottom:1.2rem}
.btn--frase{white-space:normal; line-height:1.3; text-align:center}

/* Final de cada página: el nenúfar a la derecha y el recuadro blanco, como en la portada */
.seccion.cierre{position:relative; isolation:isolate; overflow:hidden; margin:16px; border-radius:var(--radio-g); min-height:clamp(460px,44vw,600px); display:grid; place-items:center start;
  padding:clamp(48px,6vw,88px) clamp(24px,5vw,80px); color:var(--tinta);
  background:#0C1626 url(assets/img/nenufar-lateral-2000.webp) 100% 50%/cover no-repeat}
.seccion.cierre::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, color-mix(in srgb,var(--hondo) 50%,transparent), color-mix(in srgb,var(--hondo) 26%,transparent) 50%, color-mix(in srgb,var(--hondo) 4%,transparent))}
.seccion.cierre .wrap{max-width:540px; margin:0; padding:clamp(32px,4.5vw,56px); display:grid; justify-items:center; gap:16px; text-align:center;
  background:var(--papel); border-radius:var(--radio); box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.seccion.cierre h2{font-size:clamp(2rem,1.5rem + 2vw,3rem); line-height:1.08; color:var(--hondo)}
.seccion.cierre p{color:var(--tinta-suave); font-size:1.06rem; max-width:44ch}
.seccion.cierre .acciones{justify-content:center; margin-top:6px}
.seccion.cierre .btn--borde{background:var(--tenue); border-color:color-mix(in srgb,var(--principal) 40%,transparent); color:var(--hondo); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none}
.seccion.cierre :focus-visible{outline-color:var(--acento)}
@media (max-width:1099px){
  .seccion.cierre{--alto-flor:clamp(300px,52vw,420px); place-items:end center; padding-top:var(--alto-flor);
    background:linear-gradient(180deg, transparent calc(var(--alto-flor) - 40px), #0C1626 calc(var(--alto-flor) + 70px)),
               #0C1626 url(assets/img/nenufar-lateral-1000.webp) 88% 0/auto calc(var(--alto-flor) + 80px) no-repeat}
  .seccion.cierre::after{background:linear-gradient(180deg, color-mix(in srgb,var(--hondo) 6%,transparent), color-mix(in srgb,var(--hondo) 45%,transparent) 70%)}
}

/* botones de las páginas interiores, en el lenguaje de la portada */
.btn--cita{background:linear-gradient(180deg,#8A66A8,#7A5898 55%,#6F4E8B); color:#fff; --btn-hover:var(--oro-metal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px -12px color-mix(in srgb,var(--hondo) 80%,transparent)}
.btn--ghost{background:var(--tenue); border-color:color-mix(in srgb,var(--principal) 40%,transparent); color:var(--hondo); --btn-hover:var(--oro-metal)}
.btn--borde{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6); color:#fff; --btn-hover:var(--oro-metal);
  -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4)}
.btn--cita:hover, .btn--ghost:hover, .btn--borde:hover{color:var(--oro-tinta); border-color:color-mix(in srgb,#8A6A1C 45%,transparent)}
.oscura .btn--ghost{background:var(--papel); border-color:transparent}

/* el pie de todas las páginas */
.pie a{color:color-mix(in srgb,var(--papel) 90%,transparent); text-decoration:none; transition:color .3s}
.pie ul a{display:inline-flex; align-items:center; min-height:40px}
.pie ul a:hover, .pie__base a:hover{color:var(--acento-claro)}
.pie__base{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 24px; margin-top:18px; font-size:.86rem; color:color-mix(in srgb,var(--papel) 70%,transparent)}
.pie__base nav{display:flex; flex-wrap:wrap; gap:0 22px}
.pie__base a{display:inline-flex; align-items:center; min-height:44px}
.pie :focus-visible{outline-color:var(--acento-claro)}

/* fotos que se cargan al acercarse (data-fondo): mientras, un lila suave */
[data-fondo]{background-color:color-mix(in srgb,var(--principal) 10%,var(--fondo))}

/* ---------- Tableta y móvil (páginas interiores) ---------- */
@media (max-width:1000px){
  .dos, .bet{grid-template-columns:1fr}
  .dos--inv .dos__foto{order:0}
  .bet__foto{justify-self:start; max-width:340px; order:-1}
  .dos__foto--estrecha{justify-self:start}
  .fila{grid-template-columns:1fr 200px; grid-template-areas:"t i" "d i"}
  .fila > div:first-child{grid-area:t; align-self:end}
  .fila__desc{grid-area:d; align-self:start}
  .fila__img{grid-area:i}
}
@media (max-width:560px){
  .cab-pagina, .seccion--blanca, .oscura, .seccion.cierre{margin-inline:12px}
  .cab-pagina--foto{min-height:500px; padding-top:130px}
  .fila{grid-template-columns:1fr; grid-template-areas:"i" "t" "d"; padding:14px 14px 22px}
  .fila > div:first-child, .fila__desc{padding-inline:8px}
  .fila__img{aspect-ratio:16/10}
  .galeria{grid-template-columns:1fr}
  .regalo{grid-template-columns:1fr; padding:20px}
  .regalo__lado{justify-content:space-between}
  .pasos li{grid-template-columns:40px 1fr; gap:14px; padding:18px}
  .pasos .n{width:40px; height:40px; font-size:1.3rem}
  .pasos h2, .pasos h3{margin-top:7px}
  .bristol td:nth-child(2){display:none}
  .seccion.cierre .acciones .btn, .p404 .acciones .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .cab-pagina__foto{animation:none; transform:scale(1.04)}
  .cab__panel, .cab__grupo > a svg, .migas a, .fila, .fila__img img, .dos__foto img, .pasos li, .regalo, .atajos a, .galeria img, .campo input, .campo textarea,
  .cab-pagina .migas, .cab-pagina .entradilla, .p404 p, .p404 .acciones{transition:none}
}

/* cada tarjeta de terapia de la portada lleva a su página: el enlace cubre la tarjeta */
.terapia__enlace{text-decoration:none; color:inherit}
.terapia__enlace::after{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit}
.terapia__enlace:focus-visible{outline:none}
.terapia:has(.terapia__enlace:focus-visible){outline:2px solid var(--acento); outline-offset:3px}
.cab__nav{align-items:center}
.cab.menu-abierto .cab__nav .cab__cta{border-bottom:1px solid color-mix(in srgb,#8A6A1C 45%,transparent)}

/* ---------- Chat de Saray (Agentclic), abajo a la izquierda ----------
   El programa del chat pone sus propios estilos y no lleva clases: se le reconoce
   por su z-index. Si Agentclic cambia el programa, estos ajustes dejan de aplicarse
   y el chat sigue funcionando igual, solo con su aspecto de serie. */
body > div[style*="2147483647"]{font-family:var(--texto) !important}
body > div[style*="2147483647"][style*="left"]{left:calc(18px + env(safe-area-inset-left,0px)) !important; bottom:calc(18px + env(safe-area-inset-bottom,0px)) !important}
body > div[style*="2147483647"] input, body > div[style*="2147483647"] button{font-family:inherit !important}
body > div[style*="2147483647"] > div:last-child > button:first-child:hover{background:var(--oro-metal) !important; color:var(--oro-tinta) !important}
/* con el menú del móvil abierto, el chat se aparta para no tapar enlaces */
.cab.menu-abierto ~ div[style*="2147483647"]{display:none !important}
/* en el móvil solo el botón redondo: el bocadillo de texto taparía el de WhatsApp;
   y la letra del campo a 16px, para que el iPhone no amplíe la pantalla al escribir */
@media (max-width:560px){
  body > div[style*="2147483647"] > div:last-child > button + button{display:none !important}
  body > div[style*="2147483647"] input{font-size:16px !important}
  /* con el chat abierto, la flecha de volver arriba asomaría por su borde */
  body:has(> div[style*="2147483647"] > div:first-child[style*="display: flex"]) .arriba{visibility:hidden}
}
@media print{ body > div[style*="2147483647"]{display:none !important} }

/* ---------- Regala bienestar: los vales de Bet, ladeados como una tarjeta en la mano ---------- */
.cab-pagina--vale::before{display:none}
.cab-pagina--vale .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center}
.vale{margin:0; border-radius:18px; overflow:hidden; background:var(--papel); rotate:2.5deg;
  box-shadow:0 36px 60px -32px color-mix(in srgb,var(--hondo) 65%,transparent), 0 2px 8px color-mix(in srgb,var(--hondo) 10%,transparent);
  transition:rotate .9s var(--suave), scale .9s var(--suave)}
.vale img{display:block; width:100%; height:auto}
.vale:hover{rotate:0deg; scale:1.02}
.vales{display:grid; padding-block:2% 13%}
.vales > .vale{grid-area:1/1; width:80%}
.vale--atras{justify-self:start; align-self:start; rotate:-5deg}
.vale--delante{justify-self:end; align-self:end; rotate:3deg; translate:0 22%}
.vale--izq{rotate:-2deg}
.dos__vale{margin:0; display:grid; gap:16px; justify-items:center; width:100%; max-width:520px; justify-self:end}
.dos__vale figcaption{font-size:.95rem; color:var(--tinta-suave)}
.dos__vale--izq{justify-self:start}
@media (max-width:1000px){
  .cab-pagina--vale .wrap{grid-template-columns:minmax(0,1fr)}
  .cab-pagina--vale .vale{max-width:560px; rotate:1.5deg}
  .dos__vale{justify-self:center}
}
@media (prefers-reduced-motion:reduce){ .vale{transition:none} }

/* ---------- Hidrocolonterapia: lo que notan muchas personas ---------- */
.beneficios__intro{max-width:none; color:var(--tinta-suave)}
/* Título de sección encima de una foto, con el mismo velo morado que la cabecera (Bet, 15-oct-2026) */
.foto-titular{position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; min-height:clamp(440px,62vh,580px);
  margin-bottom:clamp(20px,3vw,32px); padding:clamp(28px,5vw,64px); border-radius:var(--radio-g); color:#fff; background:var(--hondo)}
.foto-titular__foto{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:42% 40%}
.foto-titular .titular{color:#fff}
.foto-titular .entradilla{color:rgba(255,255,255,.93); max-width:60ch}
@media (max-width:560px){ .foto-titular{min-height:600px; padding:24px 22px 28px} .foto-titular__foto{object-position:38% 40%} }
.beneficios{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:1000px){ .beneficios{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .beneficios{grid-template-columns:minmax(0,1fr)} }
.beneficios li{padding:26px 24px; border-radius:var(--radio); background:var(--papel);
  box-shadow:0 30px 50px -40px color-mix(in srgb,var(--hondo) 55%,transparent); border:1px solid color-mix(in srgb,var(--principal) 12%,transparent)}
.beneficios h3{font:400 1.45rem/1.15 var(--display); color:var(--hondo); margin-bottom:10px}
.beneficios p{color:var(--tinta-suave); line-height:1.6}
.beneficios__nota{margin-top:1.6rem; max-width:none}

/* ---------- Escala de Bristol, con los dibujos de la app de fichas ---------- */
.escala{list-style:none; margin:1.6rem 0 0; padding:0; border-radius:var(--radio); overflow:hidden; background:var(--papel);
  border:1px solid color-mix(in srgb,var(--principal) 16%,transparent)}
.escala__fila{--tono:#A8443A; --fondo-sello:#F7E4E0; display:flex; align-items:center; gap:18px; padding:14px 18px 14px 14px; border-left:5px solid var(--tono)}
.escala__fila + .escala__fila{border-top:1px solid color-mix(in srgb,var(--principal) 12%,transparent)}
.escala--ojo{--tono:#9A6B12; --fondo-sello:#FBF0D9}
.escala--bien{--tono:var(--principal-2); --fondo-sello:var(--tenue)}
.escala--bien{background:color-mix(in srgb,var(--tenue) 45%,transparent)}
.escala--rapido{--tono:#3F6587; --fondo-sello:#E5EDF5}
.escala__dibujo{flex:none; width:150px; padding:4px; border-radius:12px; background:#fff}
.escala__dibujo svg{display:block; width:100%; height:auto}
.escala__tipo{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-bottom:2px}
.escala__tipo b{font:400 1.25rem/1.2 var(--display); color:var(--tinta)}
.escala__sello{padding:3px 10px; border-radius:999px; background:var(--fondo-sello); color:var(--tono); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.escala__fila p{line-height:1.5}
.escala__forma{margin-top:2px; font-size:.9rem; color:var(--tinta-suave)}
.escala__fuente{margin-top:12px; font-size:.82rem; color:var(--tinta-suave)}
@media (max-width:560px){
  .escala__fila{flex-direction:column; align-items:stretch; gap:10px}
  .escala__dibujo{width:100%; max-width:260px; align-self:center}
}

/* ---------- Página de cada terapia: título a la izquierda, imagen a la derecha ---------- */
.cab-pagina--terapia::before{display:none}
.cab-pagina--terapia .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,80px); align-items:center}
.cab-pagina--terapia .acciones{margin-top:28px}
.cab-pagina__img{margin:0; border-radius:var(--radio); overflow:hidden; background:var(--papel);
  box-shadow:0 36px 60px -34px color-mix(in srgb,var(--hondo) 60%,transparent)}
.cab-pagina__img img{display:block; width:100%; height:auto}
.cab-pagina__img--vertical{max-width:400px; justify-self:center}
.ficha-terapia .h2{margin:2.6rem 0 .9rem}
.ficha-terapia .h2:first-child{margin-top:0}
.ficha-terapia > p{font-size:1.06rem; line-height:1.75}
.ficha-terapia__foto{margin:1.4rem 0 0; border-radius:var(--radio); overflow:hidden}
.ficha-terapia__foto img{display:block; width:100%; height:auto}
@media (max-width:1000px){
  .cab-pagina--terapia .wrap{grid-template-columns:minmax(0,1fr)}
  .cab-pagina__img{max-width:560px}
  .cab-pagina__img--vertical{max-width:340px; justify-self:start}
}

/* ---------- Tarjetas de «Otras terapias» ---------- */
.mini{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:18px}
.mini a{display:flex; flex-direction:column; gap:6px; height:100%; padding:12px 12px 20px; border-radius:var(--radio); background:var(--fondo); color:var(--tinta); text-decoration:none;
  border:1px solid color-mix(in srgb,var(--principal) 12%,transparent); transition:transform .5s var(--suave), box-shadow .5s var(--suave)}
.mini a:hover{transform:translateY(-4px); box-shadow:0 26px 44px -32px color-mix(in srgb,var(--hondo) 70%,transparent)}
.mini__img{display:block; aspect-ratio:4/3; margin-bottom:8px; border-radius:calc(var(--radio) - 10px); overflow:hidden; background:var(--tenue)}
.mini__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--suave)}
.mini a:hover .mini__img img{transform:scale(1.06)}
.mini b{padding-inline:8px; font:400 1.45rem/1.15 var(--display); color:var(--hondo)}
.mini__txt{padding-inline:8px; font-size:.96rem; line-height:1.5; color:var(--tinta-suave)}
.mini__dato{margin-top:auto; padding:8px 8px 0; font-size:.9rem; font-weight:600; color:var(--acento)}
@media (prefers-reduced-motion:reduce){ .mini a, .mini__img img{transition:none} .mini a:hover{transform:none} }
/* Diplomas de Sobre mí: se ven enteros, sin recortar */
.diplomas .mini__img img{object-fit:contain; padding:10px}
.diplomas .mini__dato{font-variant-numeric:lining-nums}
#diplomas .pie-nota{max-width:none}
.ficha-terapia > p a{color:var(--principal-2); text-decoration:underline; text-underline-offset:3px}