/*
  Eje Fisioterapia, Valencia
  Harmony: triadic. Indigo (about 237 deg), coral red (about 7 deg) and green (about 150 deg), three hues roughly
  120 degrees apart, sampled from the photo shoot: the therapist's navy shirt, the coral dumbbells and the green band.
  60  --paper    #F6F6F2  page background (dominant)
  30  --indigo   #23265E  text, header, dark bands   | --slate #4A4E7A secondary text | --haze #B9BCE0 text on indigo
      --mint     #DDEFE3  surfaces (green leg, tinted)  | --green #1E6E47 small marks and icons
  10  --coral    #C8412F  buttons and key marks         | --peach #F58A76 coral on dark backgrounds
  Contrast (WCAG): indigo on paper 12.83, slate on paper 7.28, paper on indigo 12.83, white on coral 4.94,
  peach on indigo 5.81, indigo on mint 11.61, green on paper 5.74, green on mint 5.19, haze on indigo 7.50.
*/
:root {
  --paper: #F6F6F2;
  --indigo: #23265E;
  --slate: #4A4E7A;
  --haze: #B9BCE0;
  --mint: #DDEFE3;
  --green: #1E6E47;
  --coral: #C8412F;
  --peach: #F58A76;
  --line: #DADBE3;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Figtree", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 80px);
  --max: 1320px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--indigo); font: 400 18px/1.6 var(--body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--indigo); }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.02; letter-spacing: -.025em; font-weight: 700; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.hidden { display: none; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--indigo); color: #fff; padding: 10px 14px; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* header */
.head { position: sticky; top: 0; z-index: 40; background: rgba(246, 246, 242, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.head .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 27px/1 var(--display); letter-spacing: -.04em; color: var(--indigo); margin-right: auto; }
.logo svg { width: 34px; height: 34px; }
.logo small { font: 400 14px/1.1 var(--body); letter-spacing: 0; color: var(--slate); max-width: 9ch; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { text-decoration: none; font-weight: 700; font-size: 16px; padding: 10px 14px; border-radius: 10px; }
.nav a:hover { background: var(--mint); }
.nav a[aria-current="page"] { background: var(--indigo); color: var(--paper); }
.nav .nav__book { background: var(--coral); color: #fff; margin-left: 10px; padding: 12px 20px; border-radius: 999px; }
.nav .nav__book:hover, .nav .nav__book[aria-current="page"] { background: var(--indigo); color: #fff; }
.head__tel { font-weight: 700; text-decoration: none; white-space: nowrap; }
.menu-btn { display: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; font: 700 17px/1 var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.btn--coral { background: var(--coral); color: #fff; }
.btn--coral:hover { background: var(--indigo); }
.btn--line { border-color: var(--indigo); color: var(--indigo); background: transparent; }
.btn--line:hover { background: var(--indigo); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--indigo); }
.btn--light:hover { background: var(--peach); }

/* home hero */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(52px, 7.4vw, 112px); font-weight: 800; }
.hero h1 .bend { display: inline-block; color: var(--coral); }
.hero__lede { font-size: 20px; color: var(--slate); max-width: 44ch; margin: 28px 0 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__facts { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hero__facts li { border-top: 3px solid var(--indigo); padding-top: 12px; font-size: 15px; color: var(--slate); }
.hero__facts strong { display: block; font: 700 24px/1.1 var(--display); color: var(--indigo); margin-bottom: 4px; }
.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 28px; }
.hero__band { position: absolute; inset: auto -18px -18px auto; width: 58%; aspect-ratio: 1; border-radius: 50%; border: 18px solid var(--mint); z-index: -1; }
.hero__chip { position: absolute; left: -26px; bottom: 40px; background: var(--paper); border-radius: 18px; padding: 16px 20px; box-shadow: 0 18px 40px -18px rgba(35, 38, 94, .45); display: grid; gap: 2px; animation: pop .8s .5s cubic-bezier(.2,.8,.2,1.2) both; }
.hero__chip b { font: 700 20px/1.1 var(--display); }
.hero__chip span { font-size: 14px; color: var(--slate); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* body map (signature) */
.map { background: var(--indigo); color: var(--paper); padding: clamp(72px, 9vw, 120px) 0; }
.map .wrap { display: grid; grid-template-columns: 1fr minmax(260px, 360px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.map h2 { font-size: clamp(40px, 5vw, 72px); }
.map__intro p { color: var(--haze); max-width: 36ch; margin: 20px 0 26px; }
.zones { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zones button, .zone-chip { font: 700 15px/1 var(--body); color: var(--paper); background: transparent; border: 1.5px solid rgba(185, 188, 224, .45); border-radius: 999px; padding: 12px 16px; min-height: 44px; cursor: pointer; }
.zones button:hover { border-color: var(--haze); }
.zones button[aria-pressed="true"] { background: var(--peach); border-color: var(--peach); color: var(--indigo); }
.figure { width: 100%; max-width: 300px; margin: 0 auto; }
.figure svg { width: 100%; height: auto; overflow: visible; }
.figure .body { fill: #3C4086; }
.figure .body-glow { fill: none; stroke: rgba(185, 188, 224, .35); stroke-width: 10; }
.figure .spot { cursor: pointer; }
.figure .spot circle.dot { fill: var(--paper); stroke: var(--indigo); stroke-width: 3; transition: fill .2s; }
.figure .spot circle.ring { fill: none; stroke: var(--peach); stroke-width: 2; opacity: 0; }
.figure .spot:hover circle.dot { fill: var(--peach); }
.figure .spot.is-on circle.dot { fill: var(--peach); }
.figure .spot.is-on circle.ring { animation: pulse 1.8s ease-out infinite; }
.figure .spot:focus { outline: none; }
.figure .spot:focus-visible circle.dot { stroke: var(--peach); stroke-width: 5; }
@keyframes pulse { 0% { opacity: .9; r: 9; } 100% { opacity: 0; r: 26; } }
.advice { background: var(--paper); color: var(--indigo); border-radius: 24px; padding: 30px; }
.advice__zone { margin: 0 0 8px; color: var(--coral); font-weight: 700; }
.advice h3 { font-size: 32px; margin-bottom: 14px; }
.advice p { margin: 0 0 16px; color: var(--slate); }
.advice dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; }
.advice dl div { background: var(--mint); border-radius: 14px; padding: 12px 14px; }
.advice dt { font-size: 14px; color: var(--green); font-weight: 700; }
.advice dd { margin: 2px 0 0; font: 700 18px/1.25 var(--display); }
.advice .btn { width: 100%; }

/* steps on home */
.visit { padding: clamp(80px, 10vw, 130px) 0; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(40px, 5vw, 72px); max-width: 16ch; }
.sec-head p { margin: 0; max-width: 42ch; color: var(--slate); }
.visit__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: v; }
.visit__steps li { counter-increment: v; }
.visit__steps img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; margin-bottom: 20px; }
.visit__steps h3 { font-size: 26px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.visit__steps h3::before { content: counter(v); flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--green); display: grid; place-items: center; font-size: 19px; }
.visit__steps p { margin: 0; color: var(--slate); }

/* voices */
.voices { background: var(--mint); padding: clamp(72px, 9vw, 110px) 0; }
.voices__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; }
.voice { margin: 0; background: var(--paper); border-radius: 24px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.voice blockquote { margin: 0; font: 600 21px/1.35 var(--display); letter-spacing: -.01em; }
.voice:first-child { background: var(--indigo); color: var(--paper); }
.voice:first-child blockquote { font-size: 30px; }
.voice figcaption { font-size: 15px; color: var(--slate); }
.voice:first-child figcaption { color: var(--haze); }
.voice figcaption b { display: block; color: inherit; font-size: 17px; }
.voice:first-child figcaption b { color: var(--paper); }

/* cta band */
.band { padding: clamp(64px, 8vw, 100px) 0; }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.band h2 { font-size: clamp(36px, 4.4vw, 60px); max-width: 18ch; }

/* page hero (inner pages) */
.phero { padding: clamp(48px, 6vw, 88px) 0 clamp(36px, 4vw, 56px); }
.phero h1 { font-size: clamp(50px, 7vw, 104px); font-weight: 800; }
.phero p { max-width: 56ch; color: var(--slate); font-size: 20px; margin: 22px 0 0; }
.crumbs { font-size: 15px; color: var(--slate); margin: 0 0 18px; }
.crumbs a { color: var(--slate); }

/* treatments */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filters button { font: 700 16px/1 var(--body); color: var(--indigo); background: transparent; border: 2px solid var(--line); border-radius: 999px; padding: 12px 18px; min-height: 46px; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: var(--paper); }
.treats { list-style: none; margin: 0 0 80px; padding: 0; border-top: 2px solid var(--indigo); }
.treat { display: grid; grid-template-columns: 70px 1.2fr 1.6fr auto auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.treat[hidden] { display: none; }
.treat__icon { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: var(--mint); }
.treat__icon svg { width: 34px; height: 34px; stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.treat h2 { font-size: 26px; }
.treat__tag { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--green); }
.treat p { margin: 0; color: var(--slate); font-size: 17px; }
.treat__price { text-align: right; font: 700 26px/1 var(--display); white-space: nowrap; }
.treat__price small { display: block; font: 400 14px/1.4 var(--body); color: var(--slate); }
.treat .btn { min-height: 48px; padding: 0 20px; font-size: 16px; }
.bonos { background: var(--indigo); color: var(--paper); border-radius: 32px; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center; margin-bottom: 96px; }
.bonos h2 { font-size: clamp(34px, 4vw, 56px); }
.bonos p { color: var(--haze); }
.bonos__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bono { background: rgba(246, 246, 242, .08); border: 1.5px solid rgba(185, 188, 224, .35); border-radius: 20px; padding: 22px; }
.bono b { display: block; font: 800 40px/1 var(--display); color: var(--peach); }
.bono span { display: block; margin-top: 8px; font-size: 15px; color: var(--haze); }
.bono strong { display: block; margin-top: 14px; font: 700 22px/1 var(--display); }

/* team */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 72px; }
.person { display: grid; grid-template-columns: 170px 1fr; gap: 28px; background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 28px; }
.mono { width: 170px; height: 210px; border-radius: 90px 90px 22px 22px; display: grid; place-items: end start; padding: 18px; font: 800 64px/1 var(--display); letter-spacing: -.05em; color: var(--paper); position: relative; overflow: hidden; }
.mono::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; border: 16px solid rgba(255,255,255,.22); right: -46px; top: -30px; }
.mono--a { background: var(--indigo); } .mono--b { background: var(--coral); } .mono--c { background: var(--green); } .mono--d { background: #3F4390; }
.person h2 { font-size: 30px; }
.person__role { margin: 6px 0 14px; font-weight: 700; color: var(--coral); }
.person p { margin: 0 0 14px; color: var(--slate); font-size: 17px; }
.person ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.person li { background: var(--mint); color: var(--green); font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.person__days { margin-top: 14px !important; font-size: 15px !important; }
.room { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin-bottom: 96px; }
.room img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 28px; }
.room h2 { font-size: clamp(34px, 4vw, 56px); margin-bottom: 18px; }
.room p { color: var(--slate); }

/* booking */
.book { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; margin-bottom: 96px; }
.book__form { display: grid; gap: 34px; }
.step { border: 0; margin: 0; padding: 0; }
.step legend { font: 700 26px/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 16px; padding: 0; display: flex; align-items: center; gap: 12px; }
.step legend span { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--indigo); color: var(--paper); display: grid; place-items: center; font-size: 18px; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.opt input, .slot input, .dayp input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: grid; gap: 4px; padding: 18px; border-radius: 18px; border: 2px solid var(--line); background: #fff; cursor: pointer; height: 100%; }
.opt b { font: 700 19px/1.2 var(--display); }
.opt small { font-size: 15px; color: var(--slate); }
.opt input:checked + span { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); background: var(--mint); }
.opt input:focus-visible + span, .slot input:focus-visible + span, .dayp input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dayp span { display: grid; place-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; border: 2px solid var(--line); background: #fff; cursor: pointer; text-align: center; }
.dayp small { font-size: 14px; color: var(--slate); }
.dayp b { font: 800 26px/1 var(--display); }
.dayp input:checked + span { background: var(--indigo); border-color: var(--indigo); color: var(--paper); }
.dayp input:checked + span small { color: var(--haze); }
.slots { display: grid; gap: 12px; }
.slots p { margin: 0; font-size: 15px; font-weight: 700; color: var(--slate); }
.slots__row { display: flex; flex-wrap: wrap; gap: 8px; }
.slot span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-weight: 700; cursor: pointer; }
.slot input:checked + span { background: var(--coral); border-color: var(--coral); color: #fff; }
.slot input:disabled + span { color: #9B9DB4; text-decoration: line-through; cursor: not-allowed; background: transparent; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fields label, .field { display: grid; gap: 7px; font-weight: 700; font-size: 16px; }
.fields .wide { grid-column: 1 / -1; }
.fields input, .fields textarea, .fields select { width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; font: 400 17px/1.4 var(--body); color: var(--indigo); }
.fields input:focus, .fields textarea:focus, .fields select:focus { outline: none; border-color: var(--indigo); }
.summary { position: sticky; top: 100px; background: var(--indigo); color: var(--paper); border-radius: 28px; padding: 32px; }
.summary h2 { font-size: 30px; margin-bottom: 18px; }
.summary dl { margin: 0 0 24px; display: grid; gap: 14px; }
.summary dl div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(185, 188, 224, .3); }
.summary dt { color: var(--haze); font-size: 15px; }
.summary dd { margin: 0; font-weight: 700; }
.summary .btn { width: 100%; }
.summary__note { font-size: 14px; color: var(--haze); margin: 16px 0 0; }
.book__ok { margin: 0; padding: 16px 18px; border-radius: 16px; background: var(--green); color: #fff; }

/* footer */
.foot { background: var(--indigo); color: var(--haze); padding: 64px 0 36px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.foot h2 { color: var(--paper); font-size: 30px; margin-bottom: 12px; }
.foot h3 { color: var(--paper); font: 700 17px/1.2 var(--body); letter-spacing: 0; margin-bottom: 10px; }
.foot p { margin: 0 0 8px; }
.foot a { color: var(--paper); }
.foot__credit { margin-top: 44px !important; padding-top: 22px; border-top: 1px solid rgba(185, 188, 224, .25); font-size: 14px; }

@media (max-width: 1100px) {
  .map .wrap { grid-template-columns: 1fr 1fr; }
  .map__intro { grid-column: 1 / -1; }
  .treat { grid-template-columns: 62px 1fr auto; }
  .treat p { grid-column: 2 / -1; }
  .treat__price { grid-column: 2; text-align: left; }
  .treat .btn { grid-column: 3; grid-row: 3; }
  .team { grid-template-columns: 1fr; }
  .bonos { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .menu-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--indigo); background: transparent; color: var(--indigo); font: 700 16px/1 var(--body); cursor: pointer; }
  .head__tel { display: none; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--paper); padding: 10px var(--pad) 22px; border-bottom: 1px solid var(--line); display: none; }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 12px; font-size: 18px; }
  .nav .nav__book { margin: 10px 0 0; text-align: center; }
  .hero .wrap, .room, .book, .foot__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 520px; }
  .hero__chip { left: 14px; }
  .map .wrap { grid-template-columns: 1fr; }
  .figure { max-width: 260px; }
  .visit__steps, .voices__grid { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .logo small { display: none; }
  .hero__facts { grid-template-columns: 1fr; gap: 12px; }
  .hero__facts li { display: flex; align-items: baseline; gap: 10px; }
  .hero__facts strong { font-size: 20px; }
  .advice { padding: 22px; }
  .advice dl { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .mono { width: 100%; height: 150px; }
  .opts, .fields { grid-template-columns: 1fr; }
  .days { grid-template-columns: repeat(3, 1fr); }
  .bonos__list { grid-template-columns: 1fr; }
  .treat { grid-template-columns: 52px 1fr; gap: 14px 16px; }
  .treat__icon { width: 52px; height: 52px; border-radius: 14px; }
  .treat p, .treat__price { grid-column: 1 / -1; }
  .treat .btn { grid-column: 1 / -1; grid-row: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}