/* Relax Mas · borrador v3 · hero a pantalla completa con transición al scroll
   Primero móvil. Corte principal a 968 px. Tipografía alojada (Inter variable, OFL).
   Paleta: los azules están en 4 variables (--azul-marca, --azul-boton, --azul-hover, --azul-claro) para cambiarla en un solo sitio.
   Efectos (todos apagados con "reducir movimiento", sin ocultar contenido):
   1) hero: el marco (imagen + texto) se hace pequeño y se desvanece con el scroll mientras sube la sección siguiente
      (CSS scroll-driven animations; respaldo con JS ligero al final de index.html)
   2) titulares y textos de sección: del desenfoque a la nitidez al hacer scroll
   3) aparición suave de la foto de Derwuin (recta)
   4) cabecera fija */

/* ---------- Tipografía alojada en la propia web ---------- */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- Colores y medidas ---------- */
:root{
  --azul-marca:#006EA6;     /* azul del logo de Derwuin */
  --azul-boton:#006EA6;     /* todo lo pulsable: texto blanco sobre este azul = 5,6:1 */
  --azul-hover:#005A8C;
  --texto:#1F2020;
  --sec:#4A4F52;
  --blanco:#FFFFFF;
  --azul-claro:#E6F1F8;     /* azul muy claro: alterna con el blanco */
  --beige:#E8E2D9;     /* único beige: solo en cosas pequeñas (tarjeta "Recomendado") */
  --pared:#E6E7E8;    /* gris claro de la pared de la imagen del hero */
  --falta:#FFF1B8;
  --fuente:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pad:64px;          /* espacio entre secciones: 64 px móvil, 104 px ordenador */
  --alto-cab:84px;
  --hi:max(44svh,calc(100svh - 420px));   /* alto de la imagen del hero en móvil */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--alto-cab) + 8px)}
body{
  margin:0;
  background:var(--blanco);
  color:var(--texto);
  font-family:var(--fuente);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,blockquote,figure,dl{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}

:focus-visible{outline:3px solid var(--texto);outline-offset:3px;border-radius:6px}

.salto{
  position:absolute;left:16px;top:-80px;z-index:40;
  background:var(--texto);color:#fff;padding:12px 18px;border-radius:999px;font-weight:500;
}
.salto:focus{top:12px}

/* ---------- Contenedor ---------- */
.c{width:calc(100% - 40px);max-width:1216px;margin-inline:auto}

/* ---------- Titulares ---------- */
h1,h2,h3{font-weight:500;text-wrap:balance}
h2{font-size:clamp(36px,10.4vw,48px);line-height:1.04;letter-spacing:-.042em}
h3{font-size:24px;line-height:1.2;letter-spacing:-.025em}

/* ---------- Piezas comunes ---------- */
.nombre{
  font-weight:600;
  white-space:nowrap;
  font-size:clamp(21px,6.4vw,24px);
  line-height:1;
  letter-spacing:-.035em;
}
.logo{display:flex;align-items:center;gap:10px;min-height:48px;white-space:nowrap;color:var(--texto)}
.logo img{flex:none;height:76px;width:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;width:100%;padding:0 30px;
  background:var(--azul-boton);color:#fff;
  font-weight:500;font-size:18px;line-height:1.2;letter-spacing:-.012em;
  border-radius:999px;white-space:nowrap;
}
.btn:hover{background:var(--azul-hover)}
.btn svg{flex:none}
.btn-menu{display:none}
button.btn{border:0;cursor:pointer;font-family:inherit}
.btn-sec{background:transparent;color:var(--texto);box-shadow:inset 0 0 0 1.5px var(--texto)}
.btn-sec:hover{background:rgba(31,32,32,.07)}

.enlace{
  display:inline-flex;align-items:center;min-height:48px;
  color:var(--azul-boton);font-weight:500;font-size:17px;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;
}
.nota{color:var(--sec);font-size:16px}

.etiqueta{
  display:inline-block;background:var(--azul-boton);color:#fff;
  font-weight:500;font-size:15px;line-height:1;letter-spacing:0;
  padding:8px 14px;border-radius:999px;
}

.seccion{padding-block:var(--pad)}
.fondo-blanco{background:var(--blanco)}
.fondo-azul{background:var(--azul-claro)}

/* Marcas visibles de lo que falta (solo en el borrador) */
.falta{
  display:inline-block;background:var(--falta);color:var(--texto);
  font-size:15px;line-height:1.35;padding:4px 10px;border-radius:8px;
  border:1px dashed #8A6D00;letter-spacing:0;
}

/* ---------- Efecto: los bloques suben suavemente al aparecer (solo si no se pide reducir movimiento y hay JS) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .rv{
    opacity:0;translate:0 22px;
    transition:opacity .75s cubic-bezier(.22,.7,.2,1),translate .75s cubic-bezier(.22,.7,.2,1);
    transition-delay:var(--d,0s);
  }
  .js .rv.visto{opacity:1;translate:0 0}
}

/* ---------- Cabecera fija con fondo suave ---------- */
.cabecera{
  position:fixed;top:0;left:0;right:0;z-index:30;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.cabecera .c{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--alto-cab)}
.enlaces{display:none}
.llamar{
  display:flex;align-items:center;gap:8px;min-height:48px;
  color:var(--azul-boton);font-weight:500;font-size:17px;white-space:nowrap;
}
.llamar svg{flex:none}

/* =====================================================================
   HERO
   Móvil: texto arriba sobre el color de la pared y la imagen abajo, difuminada hacia arriba.
   Ordenador (apaisado): imagen a pantalla completa con el texto sobre la pared blanca de la izquierda.
   ===================================================================== */
.hero-pista{position:relative;background:var(--blanco)}
.hero{position:relative;height:100vh;height:100svh}
.hero-marco{
  position:absolute;inset:0;overflow:hidden;
  background:var(--pared);
  transform-origin:50% 42%;
}
.hero-img{
  position:absolute;left:0;right:0;bottom:0;
  height:var(--hi);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);
          mask-image:linear-gradient(180deg,transparent 0,#000 34%);
}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:78% 100%}
.hero-texto{
  position:relative;z-index:2;
  padding-top:calc(var(--alto-cab) + 30px);
}
.hero h1{
  font-size:clamp(46px,14.2vw,72px);
  line-height:.98;
  letter-spacing:-.05em;
  margin-bottom:18px;
}
.hero h1 .ln{display:block}
.hero h1 .ln>span{display:inline-block}
.apoyo{color:var(--texto);font-size:19px;line-height:1.4;margin-bottom:26px;max-width:20em}
.btn-flecha{justify-content:space-between;padding:0 12px 0 30px}
.btn-flecha .fl{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
}

/* Entrada del hero (solo al cargar): la imagen se asienta y el texto sube suavemente */
@keyframes hero-asienta{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes hero-sube{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
.hero-img .capa{position:absolute;inset:0}
.foto-viva{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hero-img .capa{animation:hero-asienta 2.2s cubic-bezier(.2,.7,.2,1) both}
  .hero h1 .ln>span,.hero .ent{
    animation:hero-sube .9s cubic-bezier(.22,.7,.2,1) both;
    animation-delay:var(--e,0s);
  }
}

/* Efecto de velas (decorativo). El JS coloca .velas justo encima de la imagen recortada. Sin JS, o con "reducir movimiento", no se muestra. */
.velas{position:absolute;display:none;pointer-events:none}
.velas.lista{display:block}
@media (prefers-reduced-motion:reduce){
  .velas,.velas.lista{display:none!important}
}
.velas .halo,.velas .brillo,.velas .llama{position:absolute;mix-blend-mode:screen}

/* Halo ambiental del conjunto, muy suave */
.velas .halo{
  left:71.6%;top:63.5%;width:56%;aspect-ratio:1.25;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,176,86,.30) 0,rgba(255,150,60,.12) 42%,rgba(255,140,40,0) 70%);
}
/* Brillos que se reflejan sobre el vidrio ámbar, la madera y alrededor de cada llama */
.velas .brillo{translate:-50% -50%;border-radius:50%;transform-origin:50% 50%}
.velas .aura{width:15%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,205,120,.62) 0,rgba(255,150,50,.24) 36%,rgba(255,140,40,0) 68%)}
.velas .vidrio-a{width:17%;aspect-ratio:1.5;background:radial-gradient(ellipse,rgba(255,170,64,.62) 0,rgba(255,140,40,.26) 45%,rgba(255,130,30,0) 72%)}
.velas .vidrio-b{width:16%;aspect-ratio:1.5;background:radial-gradient(ellipse,rgba(255,150,70,.58) 0,rgba(255,130,50,.24) 45%,rgba(255,120,40,0) 72%)}
.velas .vidrio-c{width:13%;aspect-ratio:1.4;background:radial-gradient(ellipse,rgba(255,190,70,.5) 0,rgba(255,170,50,.2) 45%,rgba(255,160,40,0) 72%)}
.velas .madera{width:22%;aspect-ratio:1.9;background:radial-gradient(ellipse,rgba(255,160,70,.42) 0,rgba(255,140,50,.16) 48%,rgba(255,130,40,0) 74%)}
.velas .punto-c{width:7%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,226,160,.55) 0,rgba(255,190,90,.2) 40%,rgba(255,170,60,0) 70%)}

/* Llamas: gota con tres capas (borde naranja, cuerpo cálido, núcleo claro). El punto de anclaje es la base de la llama. */
.velas .llama{
  width:1.4%;aspect-ratio:2/5;height:auto;
  translate:-50% -100%;transform-origin:50% 100%;
  overflow:visible;
}

/* Parpadeo irregular: la altura y la anchura cambian, hay un ligero vaivén de ±1,5 px y saltos pequeños de intensidad */
@keyframes llama-a{
  0%{transform:translateX(0) scale(1,1) skewX(0);opacity:.95}
  7%{transform:translateX(1px) scale(.94,1.06) skewX(1.5deg);opacity:1}
  13%{transform:translateX(-1px) scale(1.04,.88) skewX(-1deg);opacity:.72}
  19%{transform:translateX(-1.5px) scale(.96,1.1) skewX(-2deg);opacity:.9}
  31%{transform:translateX(.5px) scale(1.06,.96) skewX(1deg);opacity:1}
  38%{transform:translateX(1.5px) scale(.9,1.14) skewX(2.5deg);opacity:.85}
  44%{transform:translateX(0) scale(1.02,.84) skewX(0);opacity:.62}
  52%{transform:translateX(-1px) scale(.98,1.04) skewX(-1.5deg);opacity:.94}
  63%{transform:translateX(1px) scale(1.08,.98) skewX(1deg);opacity:1}
  71%{transform:translateX(-.5px) scale(.92,1.12) skewX(-2deg);opacity:.8}
  77%{transform:translateX(0) scale(1,.9) skewX(.5deg);opacity:.68}
  86%{transform:translateX(1.5px) scale(.96,1.08) skewX(2deg);opacity:.96}
  100%{transform:translateX(0) scale(1,1) skewX(0);opacity:.95}
}
@keyframes llama-b{
  0%{transform:translateX(0) scale(1,1) skewX(0);opacity:.9}
  9%{transform:translateX(-1px) scale(.95,1.08) skewX(-1.5deg);opacity:1}
  15%{transform:translateX(0) scale(1.05,.86) skewX(0);opacity:.66}
  24%{transform:translateX(1.5px) scale(.92,1.12) skewX(2deg);opacity:.92}
  33%{transform:translateX(1px) scale(1.04,.94) skewX(1deg);opacity:1}
  41%{transform:translateX(-1.5px) scale(.97,1.06) skewX(-2.5deg);opacity:.78}
  49%{transform:translateX(0) scale(1.06,.82) skewX(0);opacity:.6}
  58%{transform:translateX(.5px) scale(.94,1.1) skewX(1deg);opacity:.9}
  68%{transform:translateX(-1px) scale(1.02,1) skewX(-1deg);opacity:1}
  79%{transform:translateX(1.5px) scale(.9,1.14) skewX(2deg);opacity:.74}
  90%{transform:translateX(-.5px) scale(1.04,.92) skewX(-.5deg);opacity:.94}
  100%{transform:translateX(0) scale(1,1) skewX(0);opacity:.9}
}
/* Los brillos "respiran" con las mismas duraciones y fases que su llama, pero más suaves */
@keyframes resp-a{
  0%{opacity:.78;transform:scale(1)}13%{opacity:.5;transform:scale(.94)}31%{opacity:.95;transform:scale(1.05)}
  44%{opacity:.45;transform:scale(.92)}63%{opacity:1;transform:scale(1.06)}77%{opacity:.55;transform:scale(.95)}86%{opacity:.88;transform:scale(1.03)}100%{opacity:.78;transform:scale(1)}
}
@keyframes resp-b{
  0%{opacity:.75;transform:scale(1)}15%{opacity:.45;transform:scale(.93)}33%{opacity:.98;transform:scale(1.06)}
  49%{opacity:.4;transform:scale(.9)}68%{opacity:.95;transform:scale(1.04)}79%{opacity:.55;transform:scale(.94)}100%{opacity:.75;transform:scale(1)}
}
@keyframes resp-c{
  0%,100%{opacity:.5}28%{opacity:.8}52%{opacity:.4}77%{opacity:.7}
}
@keyframes halo-respira{0%,100%{opacity:.6}38%{opacity:.9}70%{opacity:.7}}
@media (prefers-reduced-motion:no-preference){
  .velas .llama-a{animation:llama-a 1.9s linear infinite;animation-delay:-.5s}
  .velas .llama-b{animation:llama-b 2.6s linear infinite;animation-delay:-1.7s}
  .velas .aura-a,.velas .vidrio-a{animation:resp-a 1.9s ease-in-out infinite;animation-delay:-.5s}
  .velas .aura-b,.velas .vidrio-b{animation:resp-b 2.6s ease-in-out infinite;animation-delay:-1.7s}
  .velas .madera{animation:resp-b 2.6s ease-in-out infinite;animation-delay:-.9s}
  .velas .vidrio-c,.velas .punto-c{animation:resp-c 3.2s ease-in-out infinite;animation-delay:-1.1s}
  .velas .halo{animation:halo-respira 5.5s ease-in-out infinite}
}

/* ---------- Hero fijo con transición ligada al scroll (solo sin "reducir movimiento") ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-pista{height:200vh;height:200svh}
  .hero{position:sticky;top:0;z-index:2}
  .hero-marco{will-change:transform,opacity}
  .hero-pista+.ambiente{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh}

  @keyframes hero-sale{
    0%{transform:scale(1);opacity:1;border-radius:0;visibility:visible}
    20%{opacity:1}
    88%{opacity:0}
    100%{transform:scale(.7);opacity:0;border-radius:44px;visibility:hidden}
  }
  @keyframes hero-texto-sale{
    0%{opacity:1;transform:none}
    100%{opacity:0;transform:translateY(-48px)}
  }
  @supports (animation-timeline:scroll()){
    .hero-marco{
      animation:hero-sale 1s linear both;
      animation-timeline:scroll(root);
      animation-range:0 100svh;
    }
    .hero-texto{
      animation:hero-texto-sale 1s linear both;
      animation-timeline:scroll(root);
      animation-range:0 55svh;
    }
  }
}

/* Titulares algo más pequeños en Ambiente, Quién soy, Por qué elegirme y Pide tu cita */
.ambiente h2,.sobre h2,.motivos h2,.contacto h2{font-size:clamp(30px,8.4vw,38px);line-height:1.06}

/* ---------- Ambiente y confort: título y tres tarjetas a la izquierda, foto de la sala a la derecha ---------- */
.ambiente h2{margin-bottom:22px}
.amb-lista{display:grid;gap:14px;margin-bottom:28px}
.amb-item{
  display:flex;align-items:center;gap:16px;
  background:var(--blanco);
  border:1px solid rgba(31,32,32,.08);
  border-radius:22px;
  padding:18px 20px;
}
.amb-icono{
  flex:none;width:52px;height:52px;border-radius:50%;
  background:var(--azul-claro);color:var(--azul-boton);
  display:flex;align-items:center;justify-content:center;
}
.amb-icono svg{width:28px;height:28px}
.amb-item h3{font-size:20px;line-height:1.2;letter-spacing:-.02em;margin-bottom:3px}
.amb-item p{font-size:15px;line-height:1.45;color:var(--sec)}
.ambiente figure{width:min(100%,320px)}
.ambiente img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 74%;border-radius:24px}

/* ---------- Tipos de masaje ---------- */
.masajes h2{margin-bottom:44px}
.tipos{display:grid;gap:22px}
.tarjeta{
  position:relative;
  background:var(--blanco);
  border:1.5px solid rgba(31,32,32,.14);
  border-radius:24px;
  padding:12px 12px 22px;
}
.tarjeta .foto{margin-bottom:16px;overflow:hidden;border-radius:14px}
.tarjeta .foto img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 45%;border-radius:14px;transform-origin:50% 50%}
.tarjeta h3,.tarjeta p{padding-inline:10px}
.tarjeta h3{font-size:22px;margin-bottom:8px}
.tarjeta p{color:var(--sec);font-size:16px;line-height:1.5}
.tarjeta.destacada{background:var(--beige);border-color:var(--azul-boton);border-width:2px;margin-top:14px}
.tarjeta .etiqueta{position:absolute;top:-15px;left:22px;z-index:1}
/* Masaje mixto: a todo el ancho, con su foto arriba (en móvil) o a la izquierda */
.tarjeta.destacada .foto img{aspect-ratio:4/3;object-position:50% 55%}
.tarjeta.destacada .cuerpo h3{font-size:clamp(28px,7.4vw,36px);letter-spacing:-.035em}

/* ---------- Tarifas (un solo bloque pequeño para todos los masajes) ---------- */
.tarifas{
  margin:40px auto 0;
  width:min(100%,460px);
  text-align:center;
  background:var(--azul-claro);
  border-radius:24px;
  padding:26px 22px 28px;
}
.tarifas-cab{margin-bottom:14px}
.tarifas h3{font-size:26px;letter-spacing:-.03em;margin-bottom:2px}
.precios{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.precio{display:flex;flex-direction:column;align-items:center;gap:2px}
.precio span{font-size:17px;letter-spacing:-.01em;color:var(--sec)}
.precio strong{
  font-weight:500;font-size:clamp(44px,12vw,56px);line-height:1;letter-spacing:-.05em;white-space:nowrap;
}

/* ---------- Quién soy ---------- */
.sobre .c{display:grid;gap:36px;justify-items:start}
.retrato{
  background:#fff;padding:12px;border-radius:22px;
  width:min(100%,300px);
  box-shadow:0 22px 44px -22px rgba(31,32,32,.4),0 0 0 1px rgba(31,32,32,.07);
}
.retrato img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:47% 8%;border-radius:12px}
.sobre h2{margin-bottom:14px}
.sobre .presentacion p{font-size:17px;line-height:1.55}

/* Reseñas compactas */
.opiniones{width:100%;padding-top:8px}
.citas{display:grid;gap:22px}
.citas blockquote{border-left:3px solid var(--azul-marca);padding:2px 0 2px 18px}
.citas p{font-size:16px;line-height:1.5;letter-spacing:-.012em}
.estrellas{display:flex;gap:2px;color:#B07000;margin-top:8px}  /* dorado oscuro: 4:1 sobre blanco y 3,5:1 sobre el azul claro */
.estrellas svg{width:18px;height:18px}
.citas cite{display:block;margin-top:4px;font-style:normal;font-weight:600;font-size:15px;letter-spacing:0}
.mas-opiniones{margin-top:22px}
.mas-opiniones .falta{display:block;width:fit-content;margin-top:6px}

/* ---------- Por qué elegirme (sobre blanco: las tarjetas llevan un borde algo más marcado) ---------- */
.motivos h2{margin-bottom:22px}
.motivos .amb-item{border-color:rgba(31,32,32,.14)}
.motivos .c{display:grid;gap:28px}
.mapa{
  position:relative;min-height:320px;border-radius:24px;overflow:hidden;
  background:var(--azul-claro);
  border:1px solid rgba(31,32,32,.08);
  display:flex;align-items:center;justify-content:center;
}
.mapa-ficha{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 22px;text-align:center}
.mapa-pin{
  width:64px;height:64px;border-radius:50%;
  background:var(--azul-claro);color:var(--azul-boton);
  display:flex;align-items:center;justify-content:center;
}
.mapa-pin svg{width:34px;height:34px}
.mapa-btn{display:none;width:auto;min-width:200px}
.js .mapa-btn{display:inline-flex}
.mapa-aviso{font-size:14px;color:var(--sec);max-width:22em}
.mapa-enlace{min-height:44px;font-size:16px}
.js .mapa-aviso{display:block}
.mapa-aviso{display:none}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa.cargado .mapa-ficha{display:none}

/* ---------- Pide tu cita ---------- */
.contacto .c{display:grid;gap:44px}
.contacto h2{margin-bottom:12px}
.contacto .frase{font-size:18px;margin-bottom:24px}
.contacto .botones{display:grid;gap:12px;max-width:460px}
.contacto .zona{margin-top:22px;font-size:16px;color:var(--sec)}
.horario h3{font-size:clamp(24px,6.4vw,28px);letter-spacing:-.035em;margin-bottom:8px}
.dias div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:5px 0}
.dias dt{font-size:clamp(19px,5.4vw,23px);font-weight:500;letter-spacing:-.035em;line-height:1.15}
.dias dd{margin:0;font-size:clamp(16px,4.6vw,19px);letter-spacing:-.02em;color:var(--texto);white-space:nowrap}
.dias .cerrado dt,.dias .cerrado dd{color:var(--sec)}

/* ---------- Pie ---------- */
.pie{background:var(--blanco);padding:48px 0 120px}
.pie .logo{margin-bottom:14px}
.pie .logo img{height:76px}
.pie .sec{color:var(--sec);font-size:16px}
.pie .acciones{display:flex;flex-wrap:wrap;gap:0 24px;margin:14px 0 6px}
.pie .acciones a{display:inline-flex;align-items:center;min-height:48px;color:var(--azul-boton);font-weight:500;font-size:17px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.pie .copy{margin-top:10px}
/* Firma de Badaweb: discreta, última línea del pie */
.pie .firma{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px}
.pie .firma a{display:inline-flex;align-items:center;min-height:48px}
.pie .firma img{height:60px;width:auto;display:block}

/* ---------- Botón de WhatsApp fijo: solo el icono, siempre visible, abajo a la derecha (móvil y ordenador) ---------- */
.flotante{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;
  width:54px;height:54px;min-width:0;min-height:0;padding:0;gap:0;
  background:var(--azul-boton);color:#fff;
  border-radius:50%;
  box-shadow:0 10px 26px -6px rgba(31,32,32,.4);
}
.flotante svg{width:30px;height:30px}
.flotante:hover{background:var(--azul-hover)}
/* Pulsación lenta y suave: un anillo que crece y se desvanece cada 2,4 s */
@media (prefers-reduced-motion:no-preference){
  .flotante::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    border:2px solid var(--azul-boton);
    animation:pulso 2.4s ease-out infinite;
    pointer-events:none;
  }
  @keyframes pulso{
    0%{transform:scale(1);opacity:.55}
    70%,100%{transform:scale(1.7);opacity:0}
  }
}

/* ---------- Aviso legal ---------- */
.pag-legal{padding-top:var(--alto-cab)}
.legal{padding-block:36px 72px;max-width:760px}
.legal h1{font-size:clamp(36px,10vw,52px);line-height:1.04;letter-spacing:-.045em;margin:12px 0 24px}
.legal h2{font-size:22px;letter-spacing:-.025em;line-height:1.2;margin:28px 0 6px}
.legal p{font-size:18px}
.legal a{color:var(--azul-boton);font-weight:500;text-decoration:underline;text-underline-offset:5px}
/* Página 404: dos botones apilados */
.pag-404 .botones{display:grid;gap:12px;max-width:360px;margin-top:28px}
.pag-404 .btn,.pag-404 .btn-sec{text-decoration:none}
.pag-404 .btn{color:#fff}
.pag-404 .btn-sec{color:var(--texto);font-weight:500}

/* ---------- Móviles muy estrechos (320 px) ---------- */
@media (max-width:359px){
  .btn{font-size:17px;padding:0 20px}
  .btn-flecha{padding:0 10px 0 22px}
  .apoyo{font-size:18px;margin-bottom:20px}
}
@media (max-height:700px) and (max-width:967px){
  .hero h1{font-size:clamp(40px,12vw,56px);margin-bottom:12px}
  .apoyo{margin-bottom:16px;font-size:18px}
  .hero-texto{padding-top:calc(var(--alto-cab) + 16px)}
}

/* Hero en móvil (< 768 px): letras más grandes y bloque de texto anclado a medio camino entre arriba y las velas.
   El borde inferior del bloque queda a 1,03 veces el alto de la imagen del hero contando desde abajo
   (más alto = el bloque sube). Va después de las reglas de poca altura para que mande en móvil. */
@media (max-width:767px){
  .hero-texto{
    position:absolute;left:0;right:0;padding-top:0;
    bottom:min(calc(var(--hi) * 1.03),calc(100svh - var(--alto-cab) - 330px));
  }
  .hero h1{font-size:clamp(50px,16.6vw,80px);line-height:.98;margin-bottom:18px}
  .hero .apoyo{font-size:clamp(19px,5.4vw,23px);margin-bottom:26px}
  .hero .btn-flecha{font-size:20px;min-height:60px}
}
@media (max-width:767px) and (max-height:700px){
  .hero h1{font-size:clamp(46px,14.6vw,64px);margin-bottom:12px}
  .hero .apoyo{font-size:19px;margin-bottom:18px}
  .hero .btn-flecha{font-size:19px;min-height:56px}
}

/* ---------- Tableta ---------- */
@media (min-width:768px){
  :root{--pad:84px;--alto-cab:80px}
  .c{width:calc(100% - 96px)}
  .enlaces{display:flex;align-items:center;gap:32px;font-size:17px;font-weight:500}
  .enlaces a{display:inline-flex;align-items:center;min-height:48px}
  .btn{width:fit-content;min-width:300px}
  .flotante{width:54px;min-width:0}

  .hero .btn-flecha{display:flex;width:fit-content;min-width:300px}
  .hero h1{font-size:clamp(64px,10vw,100px)}
  .apoyo{font-size:22px}

  .tipos{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .tarjeta.destacada{grid-column:1 / -1;margin-top:20px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 28px;align-items:center;padding:12px}
  .tarjeta.destacada .foto{margin-bottom:0}
  .tarjeta.destacada .cuerpo{padding-block:8px 8px}
  .tarjeta.destacada .cuerpo h3,.tarjeta.destacada .cuerpo p{padding-inline:0}
  .tarjeta.destacada .cuerpo p{font-size:18px;max-width:28em}
  .precio strong{font-size:56px}
  .tarjeta h3{font-size:19px}
  .tarjeta h3,.tarjeta p{padding-inline:6px}
  .tarjeta p{font-size:15px}
  .mapa{min-height:360px}
  .citas{grid-template-columns:repeat(3,1fr);gap:32px}
  .sobre .c{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px 72px;align-items:center}
  .sobre .opiniones{grid-column:1 / -1}
  .retrato{width:100%}
  .ambiente .c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:0 56px;align-items:center}
  .ambiente .amb-texto{grid-column:1;grid-row:1}
  .ambiente figure{grid-column:2;grid-row:1;width:100%}
  .amb-lista{margin-bottom:0}
  .contacto .botones{max-width:360px}
}

/* Cabecera en tableta (768-967 px): enlaces más juntos para que "Opiniones" y "Llamar" no queden pegados */
@media (min-width:768px) and (max-width:967px){
  .enlaces{gap:16px}
}

/* ---------- Ordenador ---------- */
@media (min-width:968px){
  :root{--pad:104px;--alto-cab:100px}
  body{font-size:18px}
  .logo{gap:12px}
  .logo img{height:88px}
  .nombre{font-size:26px}
  .enlaces{gap:40px;font-size:18px}
  .llamar{display:none}
  .btn-menu{
    display:inline-flex;min-height:52px;min-width:0;width:auto;padding:0 26px;font-size:17px;
  }
  .btn{min-height:60px;font-size:18px}
  h2{font-size:clamp(48px,5vw,72px);line-height:1.02}
  h3{font-size:26px}
  .flotante{right:28px;bottom:28px;width:56px;height:56px;min-height:0}

  .masajes h2{margin-bottom:56px}
  .tarifas{margin-top:48px}

  .motivos h2{margin-bottom:18px}
  .motivos .c{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 72px;align-items:stretch}
  .mapa{min-height:480px}

  .sobre .c{gap:56px 96px;grid-template-columns:minmax(0,380px) minmax(0,1fr)}
  .sobre .presentacion p{font-size:20px;line-height:1.5;max-width:30em}
  .citas p{font-size:16px}

  .contacto .c{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:center}
  .ambiente h2,.sobre h2,.motivos h2,.contacto h2{font-size:clamp(38px,3.8vw,54px);line-height:1.04}
  .horario h3{font-size:28px}
  .contacto .frase{font-size:21px}
  .contacto .zona{font-size:17px}
  .dias{max-width:460px}
  .dias div{padding:6px 0}
  .dias dt{font-size:24px}
  .dias dd{font-size:19px}

  .pie{padding:72px 0 112px}
  .pie .c{display:grid;grid-template-columns:1fr auto;gap:8px 64px;align-items:start}
}

@media (min-width:968px){
  .tipos{gap:28px}
  .tarjeta{padding:14px 14px 26px}
  .tarjeta h3{font-size:24px}
  .tarjeta.destacada{padding:14px;gap:0 40px;margin-top:22px}
  .tarjeta.destacada .cuerpo h3{font-size:clamp(34px,3.4vw,44px)}
  .tarjeta.destacada .cuerpo p{font-size:19px}
  .ambiente .c{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 72px}
  .ambiente figure{width:100%}
  .ambiente img{aspect-ratio:1/1;object-position:50% 52%}
  .amb-item{padding:20px 24px}
  .amb-item h3{font-size:22px}
  .amb-item p{font-size:16px}
}

/* Hero apaisado en ordenador: imagen a pantalla completa y texto sobre la pared blanca */
@media (min-width:968px) and (min-aspect-ratio:1/1){
  .hero-marco{display:flex;align-items:center}
  .hero-img{
    inset:0;height:auto;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero-img img{object-position:50% 50%}
  .hero-texto{width:100%;padding-top:var(--alto-cab)}
  .hero .bloque{max-width:min(46%,620px)}
  .hero h1{font-size:clamp(56px,7.2vw,116px);margin-bottom:24px}
  .apoyo{font-size:clamp(19px,1.8vw,24px);margin-bottom:34px}
  .btn-flecha{min-width:300px}
}

@media (min-width:1280px){
  .c{width:calc(100% - 128px)}
}

/* ---------- Efectos al pasar el cursor (solo ratón; en móvil no pasa nada) ---------- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* Ambiente y confort: la tarjeta se eleva un poco y toma borde azul */
  .amb-item{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease}
  .amb-item:hover{
    transform:translateY(-4px);
    border-color:var(--azul-marca);
    background:#FAFCFE;
    box-shadow:0 14px 28px -16px rgba(31,32,32,.28);
  }
  /* Tipos de masaje: zoom mínimo en la tarjeta y algo más en la imagen, dentro de su marco redondeado */
  .tarjeta{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
  .tarjeta:hover{transform:scale(1.02);box-shadow:0 16px 30px -20px rgba(31,32,32,.35)}
  /* Masaje mixto: la tarjeta ENTERA palpita despacio mientras el cursor esté encima (la imagen va fija dentro) */
  .tarjeta.destacada:hover{animation:palpita 4s ease-in-out infinite}
  @keyframes palpita{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.03)}
  }
}
@media (hover:hover) and (prefers-reduced-motion:reduce){
  .amb-item:hover{border-color:var(--azul-marca);background:#FAFCFE}
  .tarjeta:hover{border-color:var(--azul-marca)}
}

/* ---------- La foto de Derwuin aparece desde la transparencia al entrar en la sección ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .retrato.rv-foto{
    opacity:0;transform:scale(.94);
    transition:opacity 1s cubic-bezier(.22,.7,.2,1),transform 1s cubic-bezier(.22,.7,.2,1);
  }
  .js .retrato.rv-foto.visto{opacity:1;transform:scale(1)}
}

/* ---------- Reducir movimiento: sin cabecera fija ni efectos ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .cabecera{position:absolute}
  .rv,.rv-foto{opacity:1!important;translate:none!important}
  .retrato{transform:none!important}
}