/* Páginas de servicio — mismos tokens y tipografías que la portada.
   Compartido por las 5 para que no se dupliquen 200 líneas en cada fichero. */

:root{
  --paper:#f6f3ed;
  --ink:#16130f;
  --carmin:#c22643;
  --smoke:#615b52;
  --gutter:clamp(1.25rem, 5vw, 4.5rem);
  --display:"Anton", "Arial Narrow", sans-serif;
  --serif:"Source Serif 4", Georgia, serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--carmin);outline-offset:3px;border-radius:2px}

.display{
  font-family:var(--display);
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:.005em;
  font-weight:400;
}
.kicker{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.28em;
  color:var(--carmin);
}

/* ---------- barra superior ---------- */
.topbar{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.4rem max(var(--gutter), calc((100% - 80rem) / 2 + var(--gutter)));
  border-bottom:1px solid rgba(22,19,15,.12);
}
.topbar a{text-decoration:none}
.topbar .brand{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.95rem}
.topbar .back{font-size:.85rem;color:var(--smoke);font-style:italic}

/* ---------- cabecera del servicio ---------- */
.hero{padding:clamp(2.6rem,7vw,5rem) var(--gutter) 0;max-width:80rem;margin-inline:auto;width:100%}
.hero h1{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(2.7rem, 8vw, 6rem);line-height:.9;margin:.5rem 0 1rem;
}
.hero .lede{font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:46ch;color:#2a241d}
.hero-rule{width:5.5rem;height:3px;background:var(--carmin);margin:1.6rem 0 0}

/* ---------- cuerpo ---------- */
.wrap{padding:clamp(2rem,5vw,3.4rem) var(--gutter);max-width:80rem;margin-inline:auto;width:100%}
.cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.prose h2{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:.95;margin:2.2rem 0 .8rem;
}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:1.05rem;max-width:62ch}
.prose ul{margin:0 0 1.3rem 1.1rem}
.prose li{margin-bottom:.45rem;max-width:60ch}
.prose strong{font-weight:600}

/* ---------- ficha de detalles ---------- */
.card{
  background:#fff;border:1px solid rgba(22,19,15,.1);
  padding:clamp(1.4rem,3vw,2rem);
  position:sticky;top:1.4rem;
}
@media (max-width:820px){.card{position:static}}
.card .price{
  font-family:var(--display);font-size:clamp(3.4rem,10vw,5.2rem);line-height:1;
  display:flex;align-items:baseline;gap:.18em;margin:.2rem 0 1rem;
}
.card .eur{font-size:.34em;color:var(--carmin)}
.card .dur{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--smoke)}
.card dl{margin:1.1rem 0 1.4rem;font-size:.95rem}
.card dt{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--carmin);margin-top:.9rem}
.card dd{margin:.15rem 0 0}
.btn{
  display:inline-block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.14em;font-size:.95rem;text-decoration:none;
  background:var(--carmin);color:#fff;padding:1.05rem 2.1rem;
  transition:transform .25s ease, background .25s ease;
}
.btn:hover{transform:translateY(-2px);background:#a81f39}

/* ---------- otros masajes ---------- */
.others{padding:0 var(--gutter) clamp(2.4rem,6vw,4rem);max-width:80rem;margin-inline:auto;width:100%}
.others h2{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:1.1rem}
.others ul{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
.others a{
  display:inline-block;text-decoration:none;
  border:1px solid rgba(22,19,15,.22);padding:.6rem 1.1rem;
  font-size:.92rem;transition:border-color .2s ease,background .2s ease;
}
.others a:hover{border-color:var(--carmin);background:#fff}

/* ---------- faq ---------- */
.faq{padding:0 var(--gutter) clamp(2.4rem,6vw,4rem);max-width:80rem;margin-inline:auto;width:100%}
.faq h2{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:1.1rem}
.faq dt{font-weight:600;margin-top:1.1rem}
.faq dd{margin:.2rem 0 0;max-width:62ch;color:#2a241d}

/* ---------- pie ---------- */
footer{
  background:var(--ink);color:var(--paper);font-size:.85rem;
  padding:2.2rem max(var(--gutter), calc((100% - 80rem) / 2 + var(--gutter))) 5.5rem;
}
footer p{margin-bottom:.35rem}
.foot-mast{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.95rem;margin-bottom:.7rem}
footer a{text-decoration:underline}
.adult{margin-top:.6rem;letter-spacing:.08em;color:#b9b1a6}

/* ---------- whatsapp flotante ---------- */
.wa-float{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:50;
  width:3.6rem;height:3.6rem;border-radius:50%;
  background:var(--carmin);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(22,19,15,.35);
  transition:transform .25s ease;
}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:1.9rem;height:1.9rem;fill:currentColor}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}