/* ===== Temi colore: stessi ruoli, tre calibrazioni della palette =====
   fondo = pagina · chiaro = blocchi tenui · medio = tessere e bordi · accento = pulsanti e tessera principale
   scuro = blocchi pieni e footer · punto = dettaglio verde · su-* = testo sopra quei colori */
[data-tema="terracotta"]{
  --fondo:#FFFDF8;--chiaro:#F1E7C7;--medio:#E4C7AB;--accento:#B07558;--scuro:#262523;--punto:#BEBF40;
  --su-accento:#FFFDF8;--su-scuro:#F1E7C7;
  --cta:#B07558;--su-cta:#FFFDF8;--cta-foto:#FFFDF8;--su-cta-foto:#262523;
}
/* TEMA SCELTO */
:root,[data-tema="sabbia"]{   /* tono su tono, luminoso: meno contrasto, terracotta addolcita */
  --fondo:#FBF6EC;--chiaro:#F4EAD3;--medio:#EBD7C2;--accento:#C48E72;--scuro:#B07558;--punto:#D6D57E;
  --su-accento:#FFFDF8;--su-scuro:#FBF6EC;
  --cta:#BEBF40;--su-cta:#262523;--cta-foto:#BEBF40;--su-cta-foto:#262523;   /* pulsanti in verde lime */
}
[data-tema="graffite"]{ /* fondo crema, graffite protagonista, terracotta profonda e verde più presente */
  --fondo:#F1E7C7;--chiaro:#FFFDF8;--medio:#E4C7AB;--accento:#262523;--scuro:#8F5A42;--punto:#BEBF40;
  --su-accento:#F1E7C7;--su-scuro:#F1E7C7;
  --cta:#262523;--su-cta:#F1E7C7;--cta-foto:#FFFDF8;--su-cta-foto:#262523;
}
body{background:var(--fondo)}

/* ELARIA CLINIC — stile del sito (direzione C · Luce)
   foto a tutto schermo, blocchi di colore pieni, cerchi e angoli molto arrotondati */
  .wrap{max-width:1240px;margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02}
  h2{font-size:clamp(32px,4.2vw,54px);line-height:1.12}
  .kicker{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:6px 16px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
  .btn{display:inline-block;padding:16px 32px;border-radius:999px;text-decoration:none;font-size:15px;background:var(--cta);color:var(--su-cta);transition:.2s}
  .btn:hover{background:var(--scuro);color:var(--su-scuro)}
  .btn.light{background:var(--cta-foto);color:var(--su-cta-foto)}
  .btn.light:hover{background:var(--medio)}
  .round{border-radius:32px;overflow:hidden}
  .round img,.circle img{width:100%;height:100%;object-fit:cover}
  .circle{border-radius:50%;overflow:hidden;aspect-ratio:1}

  /* header trasparente sopra la foto */
  .top{position:absolute;top:0;left:0;right:0;z-index:10;color:var(--fondo)}
  .top .wrap{display:flex;align-items:center;justify-content:space-between;height:108px}
  .top nav{display:flex;gap:6px;background:rgba(255,253,248,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:6px;border-radius:999px}
  .top nav a{text-decoration:none;padding:10px 18px;border-radius:999px;font-size:15px}
  .top nav a:hover{background:rgba(255,253,248,.25)}
  .top .logo img{height:78px;width:auto;display:block}
  footer .logo-foot{height:170px;width:auto;display:block}
  .top .azioni{display:flex;align-items:center;gap:12px}
  .burger{display:none;width:46px;height:46px;flex:none;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
  .burger span{display:block;width:20px;height:1.5px;background:currentColor}

  /* hero */
  .hero{position:relative;height:100vh;min-height:640px;max-height:980px;color:var(--fondo);overflow:hidden}
  .hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,37,35,.25),rgba(38,37,35,0) 30%,rgba(38,37,35,.35))}
  .hero .inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding-bottom:70px}
  .hero h1{font-size:clamp(44px,9.2vw,136px);line-height:1}
  .hero p{font-size:20px;margin:14px 0 28px}

  /* intro */
  .intro{padding:120px 0}
  .intro .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
  .intro .circle{max-width:440px}
  .intro p.big{font-family:var(--display);font-size:clamp(23px,2.4vw,31px);line-height:1.28;margin-bottom:24px}

  /* servizi: tessere colorate */
  .servizi{padding:0 0 120px}
  .servizi .head{text-align:center;margin-bottom:50px}
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .tile{border-radius:32px;padding:30px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;position:relative;overflow:hidden;transition:transform .25s}
  .tile:hover{transform:translateY(-6px)}
  .tile h3{font-size:30px;line-height:1.12;max-width:80%}
  .tile p{font-size:15px;max-width:85%}
  .tile .arrow{position:absolute;top:26px;right:26px;width:46px;height:46px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:20px}
  .t1{background:var(--accento);color:var(--su-accento);grid-row:span 2;min-height:658px}
  .t1 .circle{width:70%;margin:20px auto}
  .t2{background:var(--chiaro)}
  .t3{background:var(--medio)}
  .t4{background:var(--scuro);color:var(--su-scuro)}
  .t5{background:var(--chiaro)}
  .t6{background:var(--fondo);border:1px solid var(--medio)}
  .t6 .arrow{background:var(--punto);border-color:var(--punto)}
  .tiles .t1 ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .tiles .t1 li{border:1px solid rgba(255,253,248,.6);border-radius:999px;padding:6px 14px;font-size:14px}

  /* percorso */
  .percorso{background:var(--chiaro);padding:120px 0;border-radius:60px 60px 0 0}
  .percorso .head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:60px}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .step{background:var(--fondo);border-radius:32px;padding:30px 26px}
  .step b{display:flex;width:56px;height:56px;border-radius:50%;background:var(--accento);color:var(--fondo);align-items:center;justify-content:center;font-family:var(--display);font-weight:400;font-size:26px;margin-bottom:26px}
  .step h3{font-size:24px;margin-bottom:8px}

  /* trattamenti a scorrimento */
  .scroller{background:var(--chiaro);padding:0 0 120px}
  .track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px 20px;max-width:1240px;margin:0 auto}
  .card{flex:0 0 300px;scroll-snap-align:start}
  .card .round{height:380px;margin-bottom:16px}
  .card h3{font-size:22px;line-height:1.15;margin-bottom:4px}
  .card p{font-size:14px}

  /* partner */
  .partner{padding:120px 0}
  .partner .wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .partner .lead{grid-column:1/-1;text-align:center;margin-bottom:30px}
  .pcard{display:grid;grid-template-columns:140px 1fr;gap:26px;align-items:center;border:1px solid var(--medio);border-radius:999px;padding:16px 40px 16px 16px}
  .pcard h3{font-size:22px;line-height:1.15;margin-bottom:4px}

  /* prenota */
  .prenota{padding:0 24px 24px}
  .pren{position:relative;border-radius:48px;overflow:hidden;color:var(--fondo);min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center}
  .pren > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pren::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--accento) 72%,transparent)}
  .pren .inner{position:relative;z-index:2;max-width:620px;padding:40px 24px}
  .pren p{margin:16px 0 30px;font-size:18px}

  /* contatti + footer */
  footer{background:var(--scuro);color:var(--su-scuro);margin:0 24px 24px;border-radius:48px;padding:80px 0 30px}
  footer .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:50px}
  footer h2{color:var(--fondo)}
  footer h4{font-weight:400;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--medio);margin-bottom:10px}
  footer .blk p{font-size:18px;margin-bottom:24px}
  footer a{text-decoration:none}
  footer .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(241,231,199,.2);margin-top:60px;padding-top:24px;font-size:13px;opacity:.7}

  @media (max-width:900px){
    .top > .wrap > nav{display:none}.burger{display:flex}
    .top .btn{padding:12px 20px;font-size:14px}
    .top .logo img{height:66px}
    .intro .wrap,.partner .wrap,footer .grid{grid-template-columns:minmax(0,1fr);gap:40px}
    .tiles{grid-template-columns:1fr}.t1{grid-row:auto;min-height:auto}
    .steps{grid-template-columns:1fr}
    .hero h1{font-size:9.6vw}
    h2{font-size:30px}
    .pcard{grid-template-columns:90px 1fr;border-radius:40px;padding-right:22px}
  }

/* ===== Header pieno per le pagine interne ===== */
.top.solid{position:sticky;background:var(--fondo);color:var(--scuro);border-bottom:1px solid var(--chiaro)}
.top.solid .wrap{height:92px}
.top.solid nav{background:var(--chiaro)}
.top.solid nav a:hover,.top.solid nav a.on{background:var(--fondo)}
.top.solid .logo img{height:70px}
.top .btn.dark{background:var(--cta);color:var(--su-cta)}

/* ===== Testata delle pagine interne: foto arrotondata con titolo ===== */
.page-hero{padding:16px 24px 0}
.ph{position:relative;border-radius:48px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;color:var(--fondo)}
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,37,35,0) 30%,rgba(38,37,35,.5))}
.ph .inner{position:relative;z-index:2;padding:48px;max-width:820px}
.ph h1{font-size:clamp(38px,6vw,84px);line-height:1.05}
.ph p{font-size:18px;margin-top:14px;max-width:560px}
.crumbs{font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;opacity:.85}
.crumbs a{text-decoration:none}
.page-hero.plain .ph{background:var(--chiaro);color:var(--scuro);min-height:300px}
.page-hero.plain .ph::after{display:none}

/* ===== Blocchi di contenuto ===== */
.sec{padding:110px 0}
.sec.crema{background:var(--chiaro);border-radius:60px}
.sec.tight{padding:70px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split .round{height:520px}
.lede{font-family:var(--display);font-size:clamp(21px,2.2vw,28px);line-height:1.3;margin-bottom:22px}
.prose p+p{margin-top:14px}
.prose ul{margin:16px 0 0 20px;line-height:1.9}

/* scheda rapida del trattamento */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fact{background:var(--fondo);border-radius:32px;padding:26px}
.fact span{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-bottom:10px}
.fact b{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.05}

/* elenco trattamenti di un servizio */
.tlist{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.titem{text-decoration:none;display:block;background:var(--fondo);border-radius:32px;padding:14px 14px 24px;transition:transform .25s}
.titem:hover{transform:translateY(-6px)}
.titem .round{height:260px;margin-bottom:18px;border-radius:24px}
.titem h3{font-size:25px;line-height:1.15;padding:0 10px}
.titem p{font-size:15px;padding:4px 10px 0}
.titem .more{display:inline-block;margin:14px 10px 0;font-size:14px;border-bottom:1px solid currentColor}

/* domande frequenti */
.faq{max-width:860px;margin:0 auto}
.faq details{border-radius:28px;background:var(--chiaro);padding:22px 28px;margin-bottom:12px}
.faq summary{font-family:var(--display);font-size:20px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";font-family:var(--testo)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px}

/* valori */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.val{border-radius:32px;padding:36px 30px;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end}
.val h3{font-size:32px;margin-bottom:8px}

/* galleria spazi */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:18px}
.gallery .round:first-child{grid-row:span 2}
.gallery .ph-box{background:var(--medio);display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.18em;text-transform:uppercase}

/* moduli */
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.fld input,.fld textarea,.fld select{font:inherit;font-size:16px;letter-spacing:0;text-transform:none;padding:15px 20px;border:1px solid var(--medio);border-radius:20px;background:var(--fondo);color:var(--scuro)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:2px solid var(--accento);border-color:transparent}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px}

@media (max-width:900px){
  .top.solid .logo img,.top.scrolled .logo img{height:58px}
  .top.solid .wrap,.top.scrolled .wrap{height:76px}
  .split,.tlist,.vals{grid-template-columns:minmax(0,1fr);gap:40px}
  .split .round{height:380px}
  .facts{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:200px 200px 200px}
  .gallery .round:first-child{grid-column:span 2;grid-row:auto}
  .ph{min-height:380px;border-radius:32px}.ph .inner{padding:28px}
  .sec{padding:80px 0}.sec.crema{border-radius:36px}
}

/* header fisso nella home, dopo la foto */
.top.scrolled{position:fixed;background:var(--fondo);color:var(--scuro);border-bottom:1px solid var(--chiaro)}
.top.scrolled .wrap{height:84px}
.top.scrolled nav{background:var(--chiaro);backdrop-filter:none;-webkit-backdrop-filter:none}
.top.scrolled nav a:hover{background:var(--fondo)}
.top.scrolled .logo img{height:64px}
html{scroll-padding-top:100px}

/* menu a tutto schermo su telefono */
.menu-mobile{position:fixed;inset:0;z-index:100;background:var(--fondo);color:var(--scuro);padding:14px 24px 28px;overflow:auto;display:flex;flex-direction:column;gap:18px}
.mm-top{display:flex;align-items:center;justify-content:space-between}
.mm-top img{height:62px;width:auto;display:block}
.mm-chiudi{width:46px;height:46px;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;font:inherit;font-size:26px;line-height:1;cursor:pointer}
.menu-mobile nav{display:flex;flex-direction:column;flex:1}
.menu-mobile nav a{font-family:var(--display);font-size:24px;line-height:1.2;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--medio)}
.menu-mobile nav a.sub{font-family:var(--testo);font-size:16px;padding:10px 0 10px 18px}
.menu-mobile .btn{text-align:center}
.burger:focus-visible,.mm-chiudi:focus-visible,.menu-mobile a:focus-visible{outline:2px solid var(--accento);outline-offset:2px}

/* selettore tema (solo per le bozze, da togliere in produzione) */
.tema-switch{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;gap:6px;background:#FFFDF8;border:1px solid #262523;border-radius:999px;padding:6px;font-size:13px;box-shadow:0 6px 24px rgba(38,37,35,.15)}
.tema-switch button{border:0;border-radius:999px;padding:8px 14px;font:inherit;cursor:pointer;background:transparent;color:#262523;display:flex;align-items:center;gap:8px}
.tema-switch button.on{background:#262523;color:#FFFDF8}
.tema-switch i{width:12px;height:12px;border-radius:50%;display:inline-block}

[hidden]{display:none!important}