/* Centro Medico Valpofitness — prototipo · assets/site.css · v2 (stile da video) */

/* ============================================================
   TOKEN
   ============================================================ */
:root{
  --orange:#F1661F; --orange-dark:#CE5310; --orange-soft:#FDEFE6;
  --green:#00A651;  --green-dark:#00713A;
  --ink:#0E0F13;    --ink-2:#17181E;
  --paper:#FFFFFF;  --mist:#F5F5F4;
  --text:#1E2126;   --muted:#5C6167;
  --line:#E6E6E4;   --line-dark:#2A2C34;
  --on-dark:#C9CCD3;
  --disp:'Montserrat',sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --w:1180px; --pad:24px; --r:14px;
  --stripes:repeating-linear-gradient(135deg,var(--orange) 0 16px,var(--ink) 16px 32px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:1rem;line-height:1.65;color:var(--text);background:var(--paper)}
img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}

/* ============================================================
   TIPOGRAFIA · titoli bicolore come nel video
   ============================================================ */
h1,h2,h3,h4{font-family:var(--disp);line-height:1.12;letter-spacing:.005em}
h1{font-weight:800;font-size:clamp(1.85rem,4.3vw,3.05rem);text-transform:uppercase}
h2{font-weight:800;font-size:clamp(1.45rem,2.9vw,2.15rem);text-transform:uppercase}
h3{font-weight:700;font-size:1.08rem}
h1 em,h2 em{font-style:normal;color:var(--orange)}
.lead{font-size:1.07rem;color:var(--muted);max-width:62ch}
.on-dark .lead{color:var(--on-dark)}
.eyebrow{display:block;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dark);margin-bottom:.7rem}
.on-dark .eyebrow{color:var(--orange)}
.kicker{display:block;font-family:var(--disp);font-weight:300;font-style:italic;
  font-size:clamp(1rem,1.9vw,1.35rem);text-transform:none;letter-spacing:.02em;margin-top:.5rem}
.note{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted)}
.on-dark .note{color:#7E8492}

/* firma: barra arancio tagliata in diagonale (dal lockup video) */
.rule{width:76px;height:6px;background:var(--orange);margin-top:1.05rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.rule--c{margin-inline:auto}

/* divisore: linea arancio */
.ribbon{height:4px;background:var(--orange)}

/* ============================================================
   BOTTONI
   ============================================================ */
.btn{display:inline-block;font-family:var(--disp);font-weight:700;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;text-align:center;
  padding:.95rem 1.7rem;border-radius:999px;background:var(--orange);color:#fff;
  border:2px solid var(--orange);transition:background .18s,border-color .18s,transform .18s}
.btn:hover{background:var(--orange-dark);border-color:var(--orange-dark);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:currentColor}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.on-dark .btn--ghost{color:#fff}
.on-dark .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ============================================================
   NAV · una riga, si compatta prima di andare a capo
   ============================================================ */
.nav{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff;
  border-bottom:1px solid var(--line-dark)}
.nav .wrap{display:flex;align-items:center;gap:1.4rem;min-height:72px;flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;flex:none}
.logo img{width:42px;height:42px}
.logo b{font-family:var(--disp);font-weight:800;font-size:.92rem;letter-spacing:.05em;
  line-height:1.1;display:block;white-space:nowrap}
.logo b span{color:var(--orange)}
.logo i{display:block;font-family:var(--disp);font-weight:300;font-style:italic;
  font-size:.62rem;letter-spacing:.06em;color:var(--on-dark);white-space:nowrap}
.nav__links{display:flex;gap:1.3rem;margin-left:auto;align-items:center;white-space:nowrap}
.nav__links a{font-family:var(--disp);font-weight:700;font-size:.73rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--on-dark);padding:.4rem 0;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav__links a:hover{color:#fff}
.nav__links a[aria-current="page"]{color:#fff;border-color:var(--orange)}
.nav__cta{margin-left:.3rem}
.nav .btn{padding:.68rem 1.25rem;font-size:.72rem}
.nav__burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-dark);
  color:#fff;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.55rem .9rem;border-radius:8px;cursor:pointer}

/* ============================================================
   HEADER PAGINA · contenuto centrato, immagine dietro in opacità
   ============================================================ */
.bhead{position:relative;background:var(--ink);color:#fff;overflow:hidden;text-align:center}
.bhead__bg{position:absolute;inset:0}
.bhead__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.bhead__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,15,19,.5),rgba(14,15,19,.86))}
.bhead .wrap{position:relative;z-index:1;max-width:880px;
  padding-top:clamp(60px,8vw,110px);padding-bottom:clamp(60px,8vw,110px)}
.bhead--tall .wrap{padding-top:clamp(88px,11vw,160px);padding-bottom:clamp(88px,11vw,160px)}
.bhead .lead{margin:1.3rem auto 0;color:var(--on-dark)}
.bhead .rule{margin-inline:auto}
.bhead .btn-row{justify-content:center}
.bhead .badge{margin-inline:auto}
.hero__meta{margin-top:2.3rem;padding-top:1.2rem;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:.73rem;letter-spacing:.03em;color:#8B90A0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.8rem}
.hero__meta b{color:#fff;font-weight:500}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark);
  border:1px solid var(--line-dark);border-radius:999px;padding:.45rem .95rem;margin-bottom:1.5rem;
  width:max-content;max-width:100%}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}

/* immagine da video con etichetta prototipo */
.vph{position:relative;overflow:hidden;background:var(--ink-2)}
.vph img{width:100%;height:100%;object-fit:cover}
.vph--box{border-radius:var(--r);min-height:300px}

/* segnaposto senza foto (mappa ecc.) */
.ph{position:relative;background:
  linear-gradient(215deg,rgba(241,102,31,.12),rgba(245,245,244,0) 55%),
  repeating-linear-gradient(90deg,#ECECEA 0 84px,#E4E4E2 84px 168px)}
.ph::after{content:attr(data-ph);position:absolute;inset:auto 0 0 0;padding:.7rem 1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:#9AA09D;border-top:1px dashed #D6D6D3}
.ph--box{border-radius:var(--r);overflow:hidden;min-height:240px}

/* ============================================================
   SEZIONI
   ============================================================ */
.sec{padding:clamp(56px,7vw,92px) 0}
.sec--tight{padding:clamp(26px,3.2vw,40px) 0}
.sec--mist{background:var(--mist)}
.sec--ink{background:var(--ink);color:#fff}
.sec--div{border-top:1px solid var(--line)}
.sec--ink.sec--div{border-color:var(--line-dark)}
.sec__head{max-width:780px;margin-bottom:2.5rem}
.sec__head .lead{margin-top:1.1rem}

/* azioni rapide sotto l'hero */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.qa a{display:flex;align-items:center;gap:.9rem;text-decoration:none;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:1.05rem 1.2rem;
  font-family:var(--disp);font-weight:700;font-size:.83rem;letter-spacing:.03em;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.qa a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(14,15,19,.1);border-color:#CFCFCC}
.qa a small{display:block;font-family:var(--mono);font-weight:400;font-size:.64rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.qa .icn{margin:0;flex:none}

/* chip specialità */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{text-decoration:none;font-family:var(--disp);font-weight:700;font-size:.78rem;
  letter-spacing:.04em;padding:.62rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);
  background:var(--paper);transition:all .15s}
.chips a:hover{border-color:var(--orange);color:var(--orange-dark)}
.chips a.chips--more{background:var(--ink);border-color:var(--ink);color:#fff}
.chips a.chips--more:hover{background:var(--orange);border-color:var(--orange)}

/* card */
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;gap:.55rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;text-decoration:none;
  color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s}
a.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,15,19,.09);border-color:#CFCFCC}
.card p{font-size:.92rem;color:var(--muted)}
.card__go{margin-top:auto;padding-top:.6rem;font-family:var(--disp);font-weight:700;
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dark)}
.icn{width:46px;height:46px;border-radius:12px;background:var(--orange-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}
.icn svg{width:24px;height:24px;stroke:var(--orange-dark);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tag{display:inline-block;width:max-content;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px}
.tag--g{background:rgba(0,166,81,.12);color:var(--green-dark)}
.tag--o{background:rgba(241,102,31,.12);color:var(--orange-dark)}
.tag--n{background:var(--mist);color:var(--muted);border:1px dashed #D6D6D3}

/* card con foto da video */
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s}
a.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,15,19,.1)}
.pcard .vph{min-height:200px}
.pcard__b{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pcard__b p{font-size:.92rem;color:var(--muted)}

/* elenco con croce verde (accento clinico) */
.plist{list-style:none;display:grid;gap:.55rem}
.plist li{position:relative;padding-left:1.7rem}
.plist li::before{content:"";position:absolute;left:0;top:.44em;width:14px;height:14px;
  background:
    linear-gradient(var(--green),var(--green)) center/100% 30% no-repeat,
    linear-gradient(var(--green),var(--green)) center/30% 100% no-repeat}

/* filtro specialità */
.fbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.8rem}
.fbar button{font-family:var(--disp);font-weight:700;font-size:.74rem;letter-spacing:.07em;
  text-transform:uppercase;padding:.6rem 1.15rem;border-radius:999px;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--line);color:var(--muted);transition:all .15s}
.fbar button:hover{border-color:var(--ink);color:var(--ink)}
.fbar button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.fbar__meta{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.fcard h3{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* staff */
.scard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.scard .vph,.scard .ph{min-height:190px}
.scard__b{padding:1.1rem 1.3rem 1.3rem}
.scard__b h3{font-size:1rem}
.scard__b span{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--muted);margin-top:.3rem}

/* numeri */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.counter b{display:block;font-family:var(--disp);font-weight:800;
  font-size:clamp(2rem,4.5vw,3rem);color:var(--orange)}
.counter span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--on-dark)}

/* passi */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;counter-increment:step}
.step::before{content:counter(step,decimal-leading-zero);font-family:var(--disp);font-weight:800;
  font-size:2rem;color:var(--orange);display:block;margin-bottom:.5rem}
.step p{font-size:.92rem;color:var(--muted)}
.step a{color:var(--orange-dark);font-weight:600}

/* tabella orari */
.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours th,.hours td{text-align:left;padding:.75rem .5rem;border-bottom:1px solid var(--line)}
.hours th{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.hours td b{font-family:var(--mono);font-weight:500}
.on-dark .hours th{color:#7E8492}
.on-dark .hours th,.on-dark .hours td{border-color:var(--line-dark)}

/* accordion */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.acc + .acc{margin-top:10px}
.acc__btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:0;text-align:left;padding:1.1rem 1.3rem;cursor:pointer;
  font-family:var(--disp);font-weight:700;font-size:.95rem;color:var(--text)}
.acc__btn::after{content:"+";font-weight:300;font-size:1.5rem;color:var(--orange)}
.acc__btn[aria-expanded="true"]::after{content:"–"}
.acc__body{padding:0 1.3rem 1.2rem;color:var(--muted);font-size:.95rem}
.acc__body a{color:var(--orange-dark);font-weight:600}

/* form */
.form{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.form label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.form input,.form select,.form textarea{width:100%;font:inherit;padding:.8rem 1rem;
  border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--orange);outline:none}
.form .full{grid-column:1 / -1}
.form .note{grid-column:1 / -1}

/* CTA finale */
.ctabox{max-width:820px;margin:0 auto;text-align:center;background:var(--ink-2);
  border:1px solid var(--line-dark);border-radius:20px;padding:clamp(2.2rem,5vw,3.6rem);
  position:relative;overflow:hidden}
.ctabox::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--orange)}
.ctabox p{color:var(--on-dark);margin-top:1rem}
.ctabox .note{margin-top:1.6rem}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:var(--on-dark);font-size:.92rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;
  padding:clamp(48px,6vw,72px) 0 2.4rem}
.foot h4{font-family:var(--disp);font-weight:700;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin-bottom:1rem}
.foot a{display:block;color:var(--on-dark);text-decoration:none;padding:.28rem 0}
.foot a:hover{color:#fff}
.foot .logo{margin-bottom:1rem}
.foot__tel{margin-top:.9rem;font-family:var(--mono);font-size:.78rem;line-height:2}
.foot__disc{padding:1.3rem 0 2rem;border-top:1px solid var(--line-dark);
  font-size:.78rem;color:#7E8492;max-width:900px}
.foot__legal{background:#0A0B0F;padding:1rem 0;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.03em;color:#7E8492}
.foot__legal .wrap{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
.foot__legal a{color:inherit}
[hidden]{display:none!important}

/* ============================================================
   REVEAL + RESPONSIVE
   ============================================================ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv-2{transition-delay:.08s}.rv-3{transition-delay:.16s}.rv-4{transition-delay:.24s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .btn,.card,.pcard,.qa a{transition:none}
}

@media (max-width:1120px){
  .nav__links{position:fixed;inset:72px 0 auto 0;background:var(--ink);flex-direction:column;
    align-items:flex-start;gap:0;padding:1rem var(--pad) 1.6rem;display:none;white-space:normal;
    border-bottom:1px solid var(--line-dark);max-height:calc(100vh - 72px);overflow:auto}
  .nav__links a{padding:.75rem 0;width:100%;border-bottom:1px solid var(--line-dark)}
  .nav__links a[aria-current="page"]{border-bottom-color:var(--orange)}
  .nav__cta{margin:1rem 0 0}
  .nav.open .nav__links{display:flex}
  .nav__burger{display:block}
}
@media (max-width:980px){
  .grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}
  .qa{grid-template-columns:repeat(2,1fr)}
  .counters{grid-template-columns:repeat(2,1fr);gap:28px 16px}
  .steps{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:640px){
  .grid--3,.grid--2,.grid--4,.qa{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .fbar__meta{margin-left:0;width:100%}
  .logo i{display:none}
}