/* ============================================================
   REVIOO — pagine di approfondimento
   (come-funziona.php, menu-digitale.php)
   Stessa palette e stessa barra di presentazione.php e prezzi.php.
   ============================================================ */

:root{
  --stone:#F2EEE4;
  --stone-deep:#E8E1D0;
  --paper:#FDFBF7;
  --line:#D6CEBE;
  --olive:#4B5A34;
  --olive-deep:#333E22;
  --terracotta:#C1532A;
  --terracotta-soft:#E08B5C;
  --ink:#2B2822;
  --ink-soft:#6B6558;
  --nav-h:62px;
  --serif:Fraunces, Georgia, "Times New Roman", serif;
  --sans:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 18px); -webkit-text-size-adjust:100%; }
body{ background:var(--stone); color:var(--ink); font-family:var(--sans); line-height:1.6; padding-top:var(--nav-h); }
img{ max-width:100%; }
a{ color:var(--olive-deep); }

.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(20px, 5vw, 56px); }

/* ---------- BARRA ---------- */
nav{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--olive-deep); border-bottom:1px solid rgba(255,255,255,.12);
}
nav .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:inline-flex; align-items:center; height:34px; text-decoration:none; }
.brand img{ display:block; width:auto; height:30px; }
.nav-links{ display:flex; align-items:center; gap:20px; }
.nav-links a{
  display:inline-flex; align-items:center; height:34px;
  color:rgba(242,238,228,.76); font-size:13px; font-weight:500;
  text-decoration:none; white-space:nowrap; transition:color .2s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:#fff; }
.nav-links .cta{ padding:0 16px; border-radius:4px; background:var(--terracotta-soft); color:var(--ink); font-weight:700; }
.nav-links .cta:hover{ color:var(--ink); background:#F0A278; }

/* ---------- TIPOGRAFIA ---------- */
.eyebrow{
  margin-bottom:14px; color:var(--terracotta);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
h1, h2{ font-family:var(--serif); font-weight:500; color:var(--olive-deep); }
h1{ max-width:720px; margin-bottom:20px; font-size:clamp(38px, 5.2vw, 62px); line-height:1.05; letter-spacing:-.02em; }
h2{ margin-bottom:14px; font-size:clamp(28px, 3.8vw, 42px); line-height:1.12; }
h3{ font-size:16px; font-weight:650; line-height:1.35; margin-bottom:6px; }
.lead{ max-width:640px; color:var(--ink-soft); font-size:clamp(16px, 1.9vw, 18.5px); line-height:1.65; }
.testo p:not(.eyebrow){ color:var(--ink-soft); font-size:15.5px; margin-top:14px; max-width:600px; }
.testo h2 + p{ margin-top:0 !important; }
.testo strong{ color:var(--ink); }

/* ---------- PULSANTI ---------- */
.azioni{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px; border-radius:4px;
  background:var(--olive-deep); color:var(--stone);
  font-size:15px; font-weight:650; text-decoration:none; text-align:center;
  transition:opacity .2s ease, transform .2s ease;
}
.btn:hover{ opacity:.9; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--terracotta); color:var(--terracotta); opacity:1; }
.btn-caldo{ background:var(--terracotta); color:#fff; }
.btn-chiaro{ background:var(--stone); color:var(--olive-deep); }
.btn-chiaro-vuoto{ background:transparent; color:var(--stone); border:1px solid rgba(242,238,228,.4); }
.btn-chiaro-vuoto:hover{ border-color:var(--stone); }

/* ---------- SEZIONI ---------- */
section{ padding:clamp(72px, 9vw, 112px) 0; }
.fondo-sabbia{ background:var(--stone-deep); }
.fondo-carta{ background:var(--paper); }
.fondo-oliva{ background:var(--olive-deep); color:var(--stone); }
.fondo-oliva h2, .fondo-oliva h3{ color:var(--stone); }
.fondo-oliva .eyebrow{ color:#E9A47C; }
.fondo-oliva .lead, .fondo-oliva .testo p:not(.eyebrow){ color:rgba(242,238,228,.78); }
.fondo-oliva .testo strong{ color:#fff; }

.intestazione{ max-width:760px; margin-bottom:clamp(30px, 5vw, 48px); }
.centrato{ text-align:center; margin-left:auto; margin-right:auto; }
.centrato .lead{ margin-left:auto; margin-right:auto; }
.centrato .azioni{ justify-content:center; }

/* Due colonne: testo e figura */
.blocco{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px, 7vw, 88px); align-items:center;
}
.blocco--rovescia > :first-child{ order:2; }

/* ---------- HERO ---------- */
.hero{ padding:clamp(56px, 8vw, 96px) 0 clamp(72px, 9vw, 110px); }
.hero .blocco{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
.briciole{ font-size:12.5px; color:var(--ink-soft); margin-bottom:22px; }
.briciole a{ color:var(--ink-soft); text-decoration:none; }
.briciole a:hover{ color:var(--terracotta); }

.figura{ position:relative; }
.figura img{
  display:block; width:100%; object-fit:cover;
  border-radius:14px; box-shadow:0 24px 60px rgba(43,40,34,.16);
  background:var(--stone-deep);
}
.figura--alta img{ aspect-ratio:4/5; }
.figura--larga img{ aspect-ratio:4/3; }
.figura--cornice::after{
  content:""; position:absolute; inset:16px -16px -16px 16px; z-index:-1;
  border:1px solid var(--line); border-radius:14px;
}
.figura figcaption{ margin-top:12px; font-size:12.5px; color:var(--ink-soft); }
.targhetta{
  position:absolute; left:-26px; bottom:28px; max-width:250px;
  padding:16px 18px; border-radius:10px; background:var(--paper);
  box-shadow:0 16px 38px rgba(43,40,34,.18);
}
.targhetta strong{ display:block; font-family:var(--serif); font-size:21px; font-weight:500; color:var(--olive-deep); line-height:1.2; margin-bottom:3px; }
.targhetta span{ display:block; font-size:12.5px; color:var(--ink-soft); }

/* ---------- INDICE DELLA PAGINA (bottoni nella parte alta) ---------- */
.indice{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.indice a, .indice-pannello a{
  display:inline-flex; align-items:center; min-height:38px; padding:0 16px;
  border:1px solid var(--line); border-radius:40px; background:var(--paper);
  font-size:13px; font-weight:500; color:var(--ink); text-decoration:none;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.indice a:hover, .indice-pannello a:hover{ border-color:var(--terracotta); color:var(--terracotta); }
.indice-pannello a[aria-current="true"]{ background:var(--olive-deep); border-color:var(--olive-deep); color:var(--stone); }

/* Bottone flottante «Sezioni»: compare quando i bottoni in alto escono dallo schermo */
.indice-mobile{
  position:fixed; right:clamp(14px, 3vw, 28px); bottom:clamp(14px, 3vw, 28px); z-index:95;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.indice-mobile.visibile{ opacity:1; transform:none; pointer-events:auto; }
.indice-apri{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 20px;
  border:0; border-radius:40px; background:var(--olive-deep); color:var(--stone);
  font:inherit; font-size:14px; font-weight:650; cursor:pointer;
  box-shadow:0 10px 28px rgba(43,40,34,.28);
}
.indice-apri:hover{ background:var(--olive); }
.indice-mobile.aperto .indice-apri{ background:var(--terracotta); }
.indice-pannello{
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  width:min(260px, calc(100vw - 28px)); padding:14px;
  background:var(--stone); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 44px rgba(43,40,34,.22);
}
.indice-pannello[hidden]{ display:none; }
.indice-titolo{ margin:2px 4px 4px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--terracotta); }
.indice-pannello a{ justify-content:flex-start; }
.indice-pannello a.indice-su{ border-style:dashed; color:var(--ink-soft); }

/* ---------- PASSAGGI ---------- */
.passi{ list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; counter-reset:passo; }
.passi li{
  position:relative; padding:24px 22px 26px;
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  counter-increment:passo;
}
.passi li::before{
  content:counter(passo, decimal-leading-zero);
  display:block; margin-bottom:14px;
  font-family:var(--serif); font-size:28px; line-height:1; color:var(--terracotta);
}
.passi p{ font-size:14px; color:var(--ink-soft); }
.passi .quando{ display:block; margin-bottom:6px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--olive); }

/* ---------- SCHEDE ---------- */
.schede{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.schede--due{ grid-template-columns:repeat(2, 1fr); }
.schede--quattro{ grid-template-columns:repeat(4, 1fr); }
.scheda{
  padding:22px; background:var(--paper);
  border:1px solid var(--line); border-radius:10px;
}
.scheda p{ font-size:14px; color:var(--ink-soft); }
.scheda .icona{
  display:grid; place-items:center; width:40px; height:40px; margin-bottom:14px;
  border-radius:50%; background:#E5EBDB; color:var(--olive-deep);
}
.scheda .icona svg{ width:21px; height:21px; }
.scheda .dove{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-size:12.5px; color:var(--ink); }
.scheda .dove b{ color:var(--terracotta); font-weight:650; }
.fondo-oliva .scheda{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.16); }
.fondo-oliva .scheda p{ color:rgba(242,238,228,.76); }
.fondo-oliva .scheda .icona{ background:rgba(233,164,124,.18); color:#E9A47C; }

/* Elenco con spunte */
.spunte{ list-style:none; display:grid; gap:12px; margin-top:22px; }
.spunte li{ position:relative; padding-left:30px; font-size:15px; color:var(--ink-soft); }
.spunte li::before{
  content:"✓"; position:absolute; left:0; top:1px;
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:#E5EBDB; color:var(--olive-deep); font-size:11px; font-weight:700;
}
.spunte strong{ color:var(--ink); }
.fondo-oliva .spunte li{ color:rgba(242,238,228,.8); }
.fondo-oliva .spunte strong{ color:#fff; }
.fondo-oliva .spunte li::before{ background:rgba(233,164,124,.2); color:#E9A47C; }

/* Citazione / nota forte */
.nota-forte{
  padding:clamp(26px, 5vw, 40px); border-radius:12px; background:var(--paper);
  border:1px solid var(--line);
}
.nota-forte strong{
  display:block; margin-bottom:12px;
  font-family:var(--serif); font-size:clamp(23px, 3vw, 30px); font-weight:500; line-height:1.2; color:var(--olive-deep);
}
.nota-forte p{ color:var(--ink-soft); font-size:14.5px; }

/* Galleria a tre */
.galleria{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.galleria figure img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:var(--stone-deep); }
.galleria figcaption{ margin-top:10px; font-size:13.5px; color:var(--ink-soft); }
.galleria figcaption strong{ display:block; color:var(--ink); font-size:14.5px; }

/* Coppia di foto */
.coppia{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
.coppia img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; background:var(--stone-deep); }

/* Canali di provenienza */
.fonti{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:32px; }
.fonte{ padding:18px; border-radius:9px; background:var(--paper); border:1px solid var(--line); }
.fonte strong{ display:block; font-family:var(--serif); font-size:20px; font-weight:500; color:var(--olive-deep); margin-bottom:4px; }
.fonte span{ font-size:13px; color:var(--ink-soft); }
.blocco .fonti{ grid-template-columns:1fr 1fr; }
.fonte--evidenza{ border:2px solid var(--terracotta); background:#FFFAF6; }

/* ---------- MOCKUP TELEFONO ---------- */
.telefono{
  position:relative; width:min(100%, 300px); margin:0 auto;
  padding:12px; border-radius:40px; background:#1E1C18;
  box-shadow:0 30px 70px rgba(43,40,34,.28), inset 0 0 0 2px #3A362E;
}
.telefono::before{
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:84px; height:22px; border-radius:20px; background:#1E1C18; z-index:2;
}
.schermo{
  position:relative; overflow:hidden; border-radius:30px; background:var(--stone);
  min-height:540px; padding:52px 18px 22px; font-size:12px;
}
.schermo .s-logo{
  width:46px; height:46px; margin:0 auto 12px; border-radius:50%;
  display:grid; place-items:center; border:1.5px solid var(--olive-deep); color:var(--olive-deep);
  font-family:var(--serif); font-size:18px;
}
.schermo .s-occhiello{ text-align:center; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.schermo .s-titolo{ text-align:center; font-family:var(--serif); font-size:23px; line-height:1.15; color:var(--olive-deep); margin:6px 0 8px; }
.schermo .s-testo{ text-align:center; color:var(--ink-soft); font-size:11.5px; margin-bottom:18px; }
.schermo .s-google{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px; border-radius:4px; background:var(--olive-deep); color:var(--stone); font-weight:600; font-size:13px;
}
.schermo .s-oppure{ display:flex; align-items:center; gap:8px; margin:16px 0 12px; color:var(--ink-soft); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; }
.schermo .s-oppure::before, .schermo .s-oppure::after{ content:""; flex:1; height:1px; background:var(--stone-deep); }
.schermo .s-riga{ display:flex; gap:8px; }
.schermo .s-riga span{ flex:1; padding:10px 6px; text-align:center; border:1px solid var(--line); border-radius:4px; font-weight:600; font-size:11.5px; }
.schermo .s-privato{ margin-top:22px; padding-top:14px; border-top:1px solid var(--stone-deep); text-align:center; color:var(--ink-soft); font-size:11px; }
.schermo .s-privato u{ text-decoration-color:var(--line); text-underline-offset:3px; }
.schermo .s-firma{ margin-top:22px; text-align:center; color:var(--ink-soft); font-size:11px; }

/* Schermo del menu digitale (tema scuro, come il tema «Notte») */
.schermo--menu{ background:#1F2421; color:#EDE6D6; padding:0 0 18px; }
.schermo--menu .m-copertina{
  height:150px; padding:54px 16px 0; text-align:center;
  background:linear-gradient(180deg, rgba(20,22,20,.25), rgba(20,22,20,.85)), linear-gradient(135deg, #6B4E2E, #2F3A2A);
}
.schermo--menu .m-nome{ font-family:var(--serif); font-size:21px; color:#F4EBD8; }
.schermo--menu .m-claim{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#C9A96B; margin-top:3px; }
.schermo--menu .m-cerca{
  display:flex; align-items:center; justify-content:space-between;
  margin:14px 14px 10px; padding:9px 12px; border-radius:20px; background:#2A302C; color:#9E978A; font-size:11px;
}
.schermo--menu .m-cerca b{ color:#C9A96B; font-weight:600; font-size:10px; }
.schermo--menu .m-filtri{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:0 12px 12px; }
.schermo--menu .m-filtri span{ padding:5px 10px; border-radius:20px; border:1px solid #3B433D; font-size:10px; color:#CFC7B6; }
.schermo--menu .m-filtri span.on{ background:#C9A96B; border-color:#C9A96B; color:#1F2421; font-weight:600; }
.schermo--menu .m-cat{ padding:4px 16px 6px; font-family:var(--serif); font-size:16px; color:#C9A96B; }
.schermo--menu .m-piatto{ display:flex; gap:10px; align-items:center; padding:9px 14px; border-top:1px solid #2C332E; }
.schermo--menu .m-foto{ flex:0 0 42px; height:42px; border-radius:8px; }
.schermo--menu .m-info{ flex:1; min-width:0; }
.schermo--menu .m-info strong{ display:block; font-size:12px; color:#F4EBD8; font-weight:600; }
.schermo--menu .m-info small{ display:block; font-size:10px; color:#9E978A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.schermo--menu .m-allergeni{ display:flex; gap:3px; margin-top:4px; }
.schermo--menu .m-allergeni i{ width:7px; height:7px; border-radius:50%; }
.schermo--menu .m-prezzo{ font-size:12px; color:#C9A96B; font-weight:600; }
.schermo--menu .m-chef{ display:inline-block; margin-left:4px; padding:1px 6px; border-radius:10px; background:#C1532A; color:#fff; font-size:8.5px; vertical-align:1px; }
.schermo--menu .m-esaurito{ opacity:.45; }
.schermo--menu .m-esaurito strong::after{ content:" · esaurito"; font-weight:400; font-size:10px; color:#E08B5C; }
.schermo--menu .m-ponte{
  margin:16px 14px 0; padding:16px; border-radius:12px; text-align:center;
  background:#2A302C; border:1px solid #3B433D;
}
.schermo--menu .m-ponte p{ font-family:var(--serif); font-size:17px; color:#F4EBD8; margin-bottom:10px; }
.schermo--menu .m-ponte span{ display:block; padding:10px; border-radius:6px; background:#C9A96B; color:#1F2421; font-weight:700; font-size:12px; }

/* ---------- DOMANDE ---------- */
.domande-griglia{ display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(36px, 8vw, 96px); }
.domande{ display:grid; gap:12px; }
.domande details{ padding:20px 22px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.domande summary{ cursor:pointer; font-weight:650; list-style:none; padding-right:26px; position:relative; }
.domande summary::-webkit-details-marker{ display:none; }
.domande summary::after{ content:"+"; position:absolute; right:0; top:-2px; color:var(--terracotta); font-size:22px; line-height:1; }
.domande details[open] summary::after{ content:"−"; }
.domande p{ padding-top:12px; color:var(--ink-soft); font-size:14.5px; }

/* ---------- PIANI (menu) ---------- */
.piani{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:stretch; }
.piano{ position:relative; display:flex; flex-direction:column; padding:26px; border-radius:12px; background:var(--paper); border:1px solid var(--line); }
.piano--consigliato{ border:2px solid var(--terracotta); background:#FFFAF6; }
.piano .etichetta{ position:absolute; top:-13px; right:18px; padding:5px 10px; border-radius:20px; background:var(--terracotta); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.piano h3{ font-family:var(--serif); font-weight:500; font-size:24px; color:var(--olive-deep); }
.piano > p{ font-size:14px; color:var(--ink-soft); }
.piano .spunte{ margin:18px 0 22px; }
.piano .spunte li{ font-size:14px; }
.piano .btn{ margin-top:auto; width:100%; }
.nota-piccola{ margin-top:18px; font-size:12.5px; color:var(--ink-soft); text-align:center; }

/* ---------- CHIUSURA ---------- */
.chiusura{ text-align:center; }
.chiusura h2{ max-width:760px; margin:0 auto 14px; }
.chiusura .lead{ margin:0 auto; }

/* ---------- PIEDE ---------- */
footer{ padding:32px 0 40px; background:var(--olive-deep); color:rgba(242,238,228,.72); font-size:12.5px; }
.footer-top, .footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-top{ margin-bottom:22px; }
.footer-top img{ display:block; width:auto; height:38px; }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-identity{ flex:1 1 100%; max-width:900px; line-height:1.7; }
.footer-identity p{ margin:0 0 5px; }
footer a{ color:inherit; text-decoration:none; }
footer a:hover{ color:#fff; text-decoration:underline; }

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width:980px){
  .passi{ grid-template-columns:repeat(2, 1fr); }
  .schede--quattro{ grid-template-columns:repeat(2, 1fr); }
  .fonti{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:860px){
  .blocco, .hero .blocco{ grid-template-columns:1fr; }
  .blocco--rovescia > :first-child{ order:0; }
  .schede, .galleria, .piani{ grid-template-columns:1fr 1fr; }
  .domande-griglia{ grid-template-columns:1fr; }
  .figura--alta img{ aspect-ratio:4/3; }
  .targhetta{ left:14px; }
}

/* ============================================================
   TELEFONO
   ============================================================ */
@media (max-width:640px){
  .nav-links a:not(.cta){ display:none; }
  .nav-links .cta{ padding:0 13px; font-size:12px; }
  section{ padding:60px 0; }
  .hero{ padding-top:44px; }
  h1{ font-size:clamp(34px, 10vw, 46px); }
  .azioni .btn{ width:100%; }
  .passi, .schede, .schede--due, .schede--quattro, .galleria, .piani, .coppia{ grid-template-columns:1fr; }
  .fonti{ grid-template-columns:1fr 1fr; }
  .targhetta{ position:static; max-width:none; margin-top:14px; box-shadow:none; border:1px solid var(--line); }
  .figura--cornice::after{ inset:10px -8px -10px 10px; }
  .footer-bottom{ align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}

/* ============================================================
   MENU DIGITALE — aggiunte del 28 settembre 2026
   (prezzi del menu, passi su fondo scuro, confronto)
   ============================================================ */
[hidden]{ display:none !important; }

/* Pillola del tempo sotto ai bottoni dell'hero */
.tempo-pill{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  padding:9px 16px 9px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper);
  font-size:13px; font-weight:600; color:var(--olive-deep);
}
.tempo-pill svg{ flex:none; color:var(--terracotta); }

/* Ancora dei vecchi link (#ponte) dentro la sezione recensioni */
.ancora-vecchia{ display:block; position:relative; top:-20px; height:0; }

/* Passaggi su fondo oliva */
.passi--scuri li{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.16); }
.passi--scuri li::before{ color:#E9A47C; }
.passi--scuri .quando{ color:#C9D1B5; }
.passi--scuri h3{ color:var(--stone); }
.passi--scuri p{ color:rgba(242,238,228,.76); }
.nota-chiara{ margin-top:22px; font-size:14px; color:rgba(242,238,228,.78); max-width:760px; }
.nota-chiara a{ color:#E9A47C; }

/* Selettore annuale / mensile */
.periodo{
  display:inline-flex; gap:4px; margin-top:26px; padding:4px;
  border:1px solid var(--line); border-radius:999px; background:var(--paper);
}
.periodo button{
  min-height:42px; padding:0 20px; border:0; border-radius:999px;
  background:transparent; color:var(--ink-soft);
  font:inherit; font-size:14px; font-weight:650; cursor:pointer;
}
.periodo button small{ margin-left:4px; font-size:11px; font-weight:700; color:var(--terracotta); }
.periodo button[aria-pressed="true"]{ background:var(--olive-deep); color:var(--stone); }
.periodo button[aria-pressed="true"] small{ color:#E9A47C; }
.periodo button:focus-visible{ outline:3px solid var(--terracotta); outline-offset:2px; }

/* Prezzo dentro il piano */
.piano__costo{ margin-top:16px; }
.piano__prezzo{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; color:var(--olive-deep); }
.piano__prezzo strong{ font-family:var(--serif); font-weight:500; font-size:clamp(34px, 3.6vw, 42px); line-height:1; white-space:nowrap; }
.piano__prezzo span{ font-size:14px; color:var(--ink-soft); }
.piano > .piano__costo .piano__nota{ margin-top:8px; font-size:12.5px; color:var(--ink-soft); min-height:2.8em; }
.piano__risparmio{
  align-self:flex-start; margin-top:12px; padding:4px 10px; border-radius:6px;
  background:#F6E3D9; color:#A8431F; font-size:12.5px; font-weight:700;
}
.piano > p.piano__risparmio{ color:#A8431F; font-size:12.5px; }
#prezzi .piani{ margin-top:clamp(28px, 4vw, 40px); }

/* Tabella di confronto: su telefono scorre nel suo riquadro, la pagina no */
.confronto{
  margin-top:clamp(36px, 5vw, 52px); overflow-x:auto;
  border:1px solid var(--line); border-radius:12px; background:var(--paper);
}
.confronto table{ width:100%; min-width:560px; border-collapse:collapse; font-size:14px; }
.confronto caption{
  padding:16px 18px 4px; text-align:left;
  font-family:var(--serif); font-size:20px; color:var(--olive-deep);
}
.confronto th, .confronto td{ padding:12px 16px; border-bottom:1px solid var(--stone-deep); text-align:left; }
.confronto tbody th{ font-weight:400; color:var(--ink); }
.confronto thead th{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.confronto td, .confronto thead th:not(:first-child){ text-align:center; width:18%; }
.confronto .evidenza{ background:#FFF6F0; }
.confronto thead .evidenza{ color:var(--terracotta); }
.confronto tr:last-child th, .confronto tr:last-child td{ border-bottom:0; }
.confronto .si{ color:var(--olive-deep); font-weight:700; font-size:16px; }
.confronto .no{ color:#B3AB9B; }

/* Banda "Hai già Revioo?" */
.insieme-banda{
  display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:clamp(24px, 5vw, 56px); align-items:center;
  margin-top:clamp(36px, 5vw, 52px); padding:clamp(18px, 3vw, 28px);
  border-radius:14px; background:var(--paper); border:1px solid var(--line);
}
.insieme-banda img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.insieme-banda h3{ font-family:var(--serif); font-weight:500; font-size:clamp(22px, 2.6vw, 28px); color:var(--olive-deep); margin-bottom:10px; }
.insieme-banda p:not(.eyebrow){ color:var(--ink-soft); font-size:15px; margin-bottom:18px; }

@media (max-width:860px){
  .insieme-banda{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .periodo{ width:100%; }
  .periodo button{ flex:1; padding:0 10px; }
}
@media (max-width:640px){
  /* Su telefono le tre colonne stanno nello schermo: niente scorrimento laterale */
  .confronto table{ min-width:0; font-size:12.5px; }
  .confronto th, .confronto td{ padding:10px 8px; }
  .confronto thead th{ font-size:9.5px; letter-spacing:.02em; }
  .confronto td, .confronto thead th:not(:first-child){ width:16%; }
  .confronto caption{ font-size:18px; padding:14px 12px 4px; }
}