/* ═══════════════════════════════════════════════════════════════════════════
   ParqueSalud · Centro de Fisioterapia · Collado Villalba
   ───────────────────────────────────────────────────────────────────────────
   EL COLOR sale de SU LOGOTIPO, que además está en vectorial y descargado de
   su propio servidor: dos hexágonos entrelazados, uno azul #4A90E2 y otro
   turquesa #50E3C2. Ésos son los dos colores de la casa y no hay que
   inventarse nada.

   LO QUE SE EVITA A PROPÓSITO: el blanco de hospital. Una clínica de barrio de
   veintitrés años no es un quirófano, así que el fondo es un blanco VERDOSO
   muy claro —el mismo verdeagua que tiene el vinilo de su escaparate— y el
   azul profundo se usa para las secciones de peso. Nada de gris frío.

   EL OBJETO FIRMA es la CALCULADORA DE BONO. Su tarifa tiene un descuento
   progresivo real (35 € una sesión, 31,50 con el bono de 2, 30 con el de 3, 27
   con el de 5, y 18,50 en el de 10 de media hora) y eso no se puede ver en
   ninguna parte. Enseñar la escalera de precios es un servicio de verdad, y
   además es SU argumento: «tenemos los precios más competitivos de Collado
   Villalba» lo escribieron ellos.

   Y LA LÍNEA QUE NO SE CRUZA: la pieza NO diagnostica. Da una referencia de
   precio y dice, en el propio objeto y en el pie, que la valoración la hacen
   ellos. En salud, una web que insinúa un diagnóstico es un problema.

   TIPOGRAFÍA: Rethink Sans en titulares y Newsreader en el texto, que se lee
   largo sin cansar. Ninguna de las dos la usa ninguna hermana de la serie.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Rethink Sans y NO Syne. Syne es la tercera vez que Rober la rechaza por
   «aplastada» y esta escrita por su nombre en la nota de tipografia: es una
   grotesca de proporcion muy ancha y baja, y en un titular de varias lineas se
   lee espachurrada. Elegida comparando cuatro renderizadas con el titular de
   verdad (Albert Sans, Rethink Sans, Golos Text, Be Vietnam Pro), como manda
   la regla, no de memoria. */
@font-face{font-family:Rethink;src:url(fonts/rethink.woff2)format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Newsreader;src:url(fonts/newsreader.woff2)format('woff2');font-weight:200 700;font-display:swap}

:root{
  --papel:#f4f8f7;      /* blanco verdoso: el vinilo de su escaparate */
  --papel-2:#ffffff;
  --papel-3:#e2ecea;    /* filetes */
  --azul:#1d5f96;       /* su azul, un paso más profundo para poder leer sobre él */
  --azul-cl:#4a90e2;    /* EL azul exacto de su logotipo */
  --turq:#2fb9a3;       /* su turquesa, ajustado para contrastar sobre claro */
  --turq-cl:#50e3c2;    /* el exacto del logotipo */
  --tinta:#12232e;
  --tinta-2:#546b78;
  --r:12px;
  --max:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 clamp(16.5px,1.05vw,18px)/1.7 Newsreader,Georgia,serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,ol,ul,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--turq);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--azul);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 8px 0}
.saltar:focus{left:0}

/* ── cabecera ─────────────────────────────────────────────────────────── */
.barra{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:1.4rem;
  padding:.7rem clamp(1rem,3vw,2.4rem);background:rgba(244,248,247,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--papel-3);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.barra.oculta{transform:translateY(-104%)}
.marca{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.marca img{width:38px;height:38px}
.marca-txt{display:grid;line-height:1}
.marca-t{font-family:Rethink,system-ui,sans-serif;font-weight:700;font-size:clamp(1.05rem,1.7vw,1.3rem);
  letter-spacing:-.01em}
.marca-s{font-family:Rethink,system-ui,sans-serif;font-size:max(12.5px,.6rem);letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-2);margin-top:.35em}
.barra-nav{display:flex;gap:1.4rem;font-family:Rethink,system-ui,sans-serif;font-size:.92rem;color:var(--tinta-2)}
.barra-nav a{padding:.4rem 0;border-bottom:2px solid transparent}
.barra-nav a:hover{color:var(--azul);border-bottom-color:var(--turq)}
.barra-cta{background:var(--azul);color:#fff;font-family:Rethink,system-ui,sans-serif;font-weight:600;
  padding:.6rem 1.15rem;border-radius:999px;font-size:.95rem;white-space:nowrap;will-change:transform}
@media (max-width:900px){.barra-nav{display:none}}

/* ── portada ──────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  gap:clamp(1.5rem,4vw,4rem);min-height:100svh;
  padding:clamp(6rem,11vh,8.5rem) clamp(1.1rem,4vw,3.4rem) clamp(3rem,7vh,5rem)}
.hero-sup{font-family:Rethink,system-ui,sans-serif;font-size:max(12.5px,.8rem);letter-spacing:.24em;
  text-transform:uppercase;color:var(--turq);margin-bottom:1.1rem}
.hero-h1{font-family:Rethink,system-ui,sans-serif;font-weight:800;
  font-size:clamp(2.5rem,6.4vw,5.6rem);line-height:1.08;letter-spacing:-0.01em}
.hero-h1 em{font-style:normal;color:var(--azul-cl)}
.hero-p{max-width:44ch;margin-top:1.4rem;color:var(--tinta-2)}
.hero-p b{color:var(--tinta);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.hero-nota{margin-top:1.4rem;font-size:.9rem;color:var(--tinta-2)}
.hero-nota b{font-family:Rethink,system-ui,sans-serif;color:var(--turq);font-weight:700}
.hero-foto img{width:100%;aspect-ratio:8/5;object-fit:cover;border-radius:var(--r);
  box-shadow:0 40px 70px -34px rgba(18,35,46,.4)}
@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:auto;padding-top:6.5rem}
  .hero-foto{order:-1}
}

/* ── piezas comunes ──────────────────────────────────────────────────── */
.etiqueta{font-family:Rethink,system-ui,sans-serif;font-size:max(12.5px,.76rem);letter-spacing:.24em;
  text-transform:uppercase;color:var(--turq);margin-bottom:.85rem}
.h2{font-family:Rethink,system-ui,sans-serif;font-weight:800;font-size:clamp(1.9rem,4.6vw,3.8rem);
  line-height:1.08;letter-spacing:-0.01em}
.parr{max-width:58ch;margin-top:1.1rem;color:var(--tinta-2)}
.parr b{color:var(--tinta);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:Rethink,system-ui,sans-serif;
  font-weight:600;padding:.92rem 1.6rem;border-radius:999px;font-size:.98rem;
  transition:transform .2s,box-shadow .2s;will-change:transform}
.btn-ac{background:var(--azul);color:#fff;box-shadow:0 12px 28px -14px rgba(29,95,150,.8)}
.btn-ac:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(29,95,150,.95)}
.btn-linea{border:1.5px solid var(--papel-3);color:var(--tinta)}
.btn-linea:hover{border-color:var(--turq);color:var(--azul)}
.btn-ancho{width:100%}
.sube{opacity:0;transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.sube.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sube{opacity:1;transform:none;transition:none}}

/* ── LA PIEZA: la calculadora de bono ───────────────────────────────── */
.ruta{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);max-width:var(--max);margin-inline:auto}
.ruta-cab{max-width:46ch}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(1.2rem,2.5vw,2rem);margin-top:clamp(2rem,4vh,3rem);align-items:start}
@media (max-width:960px){.calc{grid-template-columns:minmax(0,1fr)}}
.calc-m{background:var(--papel-2);border:1px solid var(--papel-3);border-radius:var(--r);
  padding:clamp(1.2rem,3vw,2rem);display:grid;gap:clamp(1.5rem,3vw,2.2rem)}
.paso-t{display:flex;align-items:center;gap:.7rem;font-family:Rethink,system-ui,sans-serif;font-weight:700;
  font-size:1.15rem;margin-bottom:.9rem}
.paso-n{display:grid;place-items:center;width:26px;height:26px;background:var(--turq);
  color:#08312a;border-radius:50%;font-size:.85rem;font-family:Rethink,system-ui,sans-serif;font-weight:700}
.paso-o{display:block;font-family:Rethink,system-ui,sans-serif;font-weight:700;font-size:1.35rem;
  color:var(--azul);margin-top:.6rem}
.paso-n2{margin-top:.7rem;font-size:.88rem;color:var(--tinta-2)}
.ops{display:flex;flex-wrap:wrap;gap:.5rem}
.op{border:1.5px solid var(--papel-3);border-radius:999px;padding:.62rem 1.1rem;
  font-family:Rethink,system-ui,sans-serif;font-size:.94rem;transition:.2s;min-height:44px;background:var(--papel)}
.op:hover{border-color:var(--turq)}
.op.on{background:var(--azul);border-color:var(--azul);color:#fff}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;
  background:var(--papel-3);border-radius:99px;outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--turq);border:3px solid #fff;cursor:grab;
  box-shadow:0 2px 8px rgba(18,35,46,.3)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--turq);
  border:3px solid #fff;cursor:grab}

.calc-t{background:linear-gradient(165deg,var(--azul),#123f66 70%);color:#fff;
  border-radius:var(--r);padding:clamp(1.2rem,3vw,1.8rem);display:grid;gap:.65rem;
  position:sticky;top:5.6rem}
@media (max-width:960px){.calc-t{position:static}}
.ct-r{font-family:Rethink,system-ui,sans-serif;font-size:max(12.5px,.78rem);letter-spacing:.2em;
  text-transform:uppercase;color:var(--turq-cl)}
.ct-n{font-family:Rethink,system-ui,sans-serif;font-weight:800;font-size:clamp(3.2rem,7.5vw,4.6rem);
  line-height:.95;display:flex;align-items:baseline;gap:.1em}
.ct-n b{font-size:.4em;font-weight:600;opacity:.8}
.ct-d{font-size:1rem}
.ct-l{display:grid;gap:.25rem;padding:.8rem 0;border-top:1px solid rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2);font-size:.88rem;color:rgba(255,255,255,.82)}
.ct-l li{display:flex;justify-content:space-between;gap:.8rem}
.ct-ah{font-family:Rethink,system-ui,sans-serif;font-weight:700;color:var(--turq-cl);font-size:.98rem}
.ct-n2{font-size:.84rem;color:rgba(255,255,255,.72)}
.ct-n2 b{color:#fff;font-weight:600}
/* el «llamar al…» de dentro del aviso salia de 14 px de alto: no se acierta */
.ct-n2 a{color:var(--turq-cl);text-underline-offset:3px;display:inline-block;
  padding-block:.3rem;min-height:24px;line-height:1.5}

/* ── la tarifa ───────────────────────────────────────────────────────── */
.tarifa{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);background:var(--papel-2);
  border-block:1px solid var(--papel-3)}
.tarifa-cab{max-width:44ch;margin-inline:auto;text-align:center}
.tarifa .parr{margin-inline:auto}
/* cuatro tablas: 2+2, nunca un renglón a medias */
.tablas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.8rem);
  margin:clamp(2rem,4vh,3rem) auto 0;max-width:var(--max)}
@media (max-width:820px){.tablas{grid-template-columns:minmax(0,1fr)}}
.tabla{background:var(--papel);border:1px solid var(--papel-3);border-radius:var(--r);
  padding:clamp(1.1rem,2.5vw,1.7rem)}
.tabla-h{font-family:Rethink,system-ui,sans-serif;font-weight:700;font-size:1.25rem;color:var(--azul);
  padding-bottom:.8rem;border-bottom:2px solid var(--turq);margin-bottom:.4rem}
.filas{display:grid}
.filas li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .9rem;
  padding:.78rem 0;border-bottom:1px solid var(--papel-3);align-items:baseline}
.filas li:last-child{border-bottom:0}
.filas span{font-size:.98rem}
.filas b{font-family:Rethink,system-ui,sans-serif;font-weight:700;font-size:1.1rem;color:var(--azul);
  white-space:nowrap}
.filas em{grid-column:1/-1;font-style:normal;font-size:max(12.5px,.8rem);color:var(--turq)}
.tabla-n{margin-top:.9rem;font-size:.86rem;color:var(--tinta-2)}
.tabla-n b{color:var(--tinta);font-weight:600}
.tarifa-av{max-width:60ch;margin:clamp(1.6rem,3vh,2.2rem) auto 0;text-align:center;
  font-size:.88rem;color:var(--tinta-2)}
.tarifa-av b{color:var(--tinta);font-weight:600}

/* ── el centro ───────────────────────────────────────────────────────── */
.centro{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);max-width:var(--max);margin-inline:auto}
.centro-cab{max-width:46ch}
/* seis piezas: 3+3 */
.mosaico{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.6vw,1.2rem);
  margin-top:clamp(2rem,4vh,3rem)}
@media (max-width:900px){.mosaico{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mosaico{grid-template-columns:minmax(0,1fr)}}
.mos{position:relative;border-radius:var(--r);overflow:hidden;background:var(--papel-2)}
.mos img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.mos:hover img{transform:scale(1.04)}
.mos-t{position:absolute;left:0;bottom:0;background:var(--azul);color:#fff;
  font-family:Rethink,system-ui,sans-serif;font-weight:600;font-size:.92rem;padding:.45rem .95rem;
  border-radius:0 var(--r) 0 0}
.mos-cita{display:grid;align-content:center;gap:.9rem;padding:clamp(1.1rem,2.8vw,1.7rem);
  background:var(--turq);color:#08312a}
.mos-cita blockquote{font-size:1.05rem;line-height:1.5;font-style:italic}
.mos-f{font-family:Rethink,system-ui,sans-serif;font-size:max(12.5px,.76rem);letter-spacing:.14em;
  text-transform:uppercase;opacity:.72}
.trx{position:relative;margin-top:clamp(1.6rem,3vh,2.4rem);border-radius:var(--r);overflow:hidden}
.trx img{width:100%;aspect-ratio:3/2;object-fit:cover}
.trx-t{position:absolute;inset:auto 0 0;padding:clamp(1.2rem,3vw,2rem);
  background:linear-gradient(to top,rgba(18,35,46,.92),rgba(18,35,46,.1));color:#fff}
.trx-e{font-family:Rethink,system-ui,sans-serif;font-size:max(12.5px,.78rem);letter-spacing:.22em;
  text-transform:uppercase;color:var(--turq-cl);margin-bottom:.5rem}
.trx-p{max-width:48ch;font-size:1.02rem}

/* ── dónde ───────────────────────────────────────────────────────────── */
.donde{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);max-width:var(--max);margin-inline:auto}
.donde-foto img{border-radius:var(--r);aspect-ratio:4/5;object-fit:cover}
.horario{margin-top:1.6rem;display:grid;gap:.1rem}
.horario>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.78rem 0;border-bottom:1px solid var(--papel-3)}
.horario dt{font-size:1rem;color:var(--tinta-2)}
.horario dd{font-family:Rethink,system-ui,sans-serif;font-weight:700;font-size:1.15rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--azul)}
.horario-n{margin-top:.85rem;font-size:.86rem;color:var(--tinta-2)}
.horario-n b{color:var(--tinta);font-weight:600}
.contacto{display:grid;gap:.5rem;margin-top:1.6rem;justify-items:start}
.cont-g{font-family:Rethink,system-ui,sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--azul);min-height:36px;will-change:transform}
.cont-l{color:var(--tinta-2);font-size:.95rem;border-bottom:1px solid transparent;
  padding:.25rem 0;min-height:30px}
.cont-l:hover{color:var(--turq);border-bottom-color:var(--turq)}
@media (max-width:960px){.donde{grid-template-columns:minmax(0,1fr)}.donde-foto{order:-1}}

/* ── desde 2003 ──────────────────────────────────────────────────────── */
.anos{padding:clamp(3rem,8vh,5.5rem) clamp(1.1rem,4vw,3.4rem);max-width:860px;
  margin-inline:auto;text-align:center;border-top:1px solid var(--papel-3)}
.anos-q{font-family:Rethink,system-ui,sans-serif;font-weight:400;font-size:clamp(1.35rem,3.2vw,2.3rem);
  line-height:1.3;letter-spacing:-.02em}
.anos-q span{display:block;font-size:max(12.5px,.78rem);letter-spacing:.24em;
  text-transform:uppercase;color:var(--turq);margin-top:1.3rem;font-weight:600}
.anos-p{margin-top:1.6rem;color:var(--tinta-2)}

/* ── pie ─────────────────────────────────────────────────────────────── */
.pie{padding:clamp(2.5rem,6vh,4rem) clamp(1.1rem,4vw,3.4rem);background:var(--papel-2);
  border-top:1px solid var(--papel-3);display:grid;gap:1.3rem;max-width:var(--max);margin-inline:auto}
.pie-a{display:flex;align-items:flex-start;gap:1rem}
.pie-logo{width:44px;height:44px;flex:none}
.pie-d{font-size:.9rem;color:var(--tinta-2);line-height:1.75}
.pie-d b{color:var(--tinta);font-weight:600}
.pie-n{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.88rem;color:var(--tinta-2)}
.pie-n a{border-bottom:1px solid transparent;padding:.3rem 0;min-height:30px}
.pie-n a:hover{color:var(--turq);border-bottom-color:var(--turq)}
.pie-c{font-size:max(12.5px,.8rem);color:var(--tinta-2);max-width:90ch;line-height:1.6;
  padding-top:1.1rem;border-top:1px solid var(--papel-3)}