/* Foglio di stile unico del sito Crocevia — condiviso da tutte le pagine. */

:root{
  color-scheme: dark;
  --bg:#0d2219;
  --bg-radial: radial-gradient(ellipse 1100px 620px at 50% -12%, #172c21 0%, #0d2219 55%);
  --surface:#24352a;
  --surface-soft: rgba(36,53,42,0.55);
  --border:#3e4a31;
  --border-soft: rgba(62,74,49,0.55);
  --ink:#f4f1e4;
  --ink-muted:#b2bfb3;
  /* miele (pelo del cane) — Educazione + azioni primarie */
  --gold:#c38345;
  --gold-tint: rgba(195,131,69,0.16);
  --gold-tint-soft: rgba(195,131,69,0.09);
  /* oro (ciondolo) — Pensione & Asilo + azioni secondarie */
  --bordeaux:#efd49e;
  --bordeaux-tint: rgba(239,212,158,0.14);
  --bordeaux-tint-soft: rgba(239,212,158,0.08);
  --terracotta:#c38345;
  /* castagno — accento neutro (Chi siamo / filosofia) */
  --verde:#81522a;
  --verde-light:#c9a687;
  --verde-tint: rgba(129,82,42,0.18);
  /* bandana (oliva) — eyebrow, breadcrumb, etichette */
  --bandana:#82864d;
  /* colori che nel tema chiaro cambiano ruolo (testo su pulsanti pieni,
     intestazione, campi modulo): qui i valori per la taverna in notturna */
  --ink-strong:#f7f1de;
  --on-accent:#1a1005;
  --campo-bg:#1b2a20;
  --placeholder:#7f8d80;
  --header-bg: rgba(36,42,27,0.92);
  --header-bg-solid:#1b2a20;
  --menu-bg:#16241b;
  /* rosso (avvisi, stati annullati/in scadenza, area privata e staff) */
  --rosso:#a94438;
  --rosso-testo:#e2a89e;
  --rosso-testo-muto:#c98074;
  --rosso-tint-avviso: rgba(169,68,56,0.12);
  --rosso-tint-badge: rgba(169,68,56,0.16);
  --rosso-tint-nuova: rgba(169,68,56,0.22);
  --rosso-tint-cal: rgba(169,68,56,0.28);
}

/* ==================================================================
   TEMA CHIARO — la stessa taverna, vista di giorno (pergamena).
   Si attiva da solo se il sistema è impostato chiaro (a meno che
   l'utente non forzi lo scuro dall'interruttore in testata), oppure
   sempre quando l'utente lo forza esplicitamente.
   ================================================================== */
@media (prefers-color-scheme: light){
  :root:not([data-tema="scuro"]){
    color-scheme: light;
    --bg:#f2e6c4;
    --bg-radial: radial-gradient(ellipse 1100px 620px at 50% -12%, #fbf3de 0%, #f2e6c4 55%);
    --surface:#fdf6e6;
    --surface-soft: rgba(253,246,230,0.7);
    --border: rgba(59,42,26,0.28);
    --border-soft: rgba(59,42,26,0.14);
    --ink:#2e2013;
    --ink-muted:#6b5843;
    --gold:#8a4f1d;
    --gold-tint: rgba(138,79,29,0.16);
    --gold-tint-soft: rgba(138,79,29,0.09);
    --bordeaux:#7d5b12;
    --bordeaux-tint: rgba(125,91,18,0.16);
    --bordeaux-tint-soft: rgba(125,91,18,0.09);
    --terracotta:#8a4f1d;
    --verde:#6b3d1c;
    --verde-light:#5a3a1f;
    --verde-tint: rgba(107,68,35,0.16);
    --bandana:#5b5e28;
    --ink-strong:#1c1309;
    --on-accent:#fbf3de;
    --campo-bg:#fffdf6;
    --placeholder:#9c8a6e;
    --header-bg: rgba(253,246,230,0.92);
    --header-bg-solid:#fdf6e6;
    --menu-bg:#fbf1da;
    --rosso:#82291f;
    --rosso-testo:#6b1f16;
    --rosso-testo-muto:#7a3a30;
    --rosso-tint-avviso: rgba(130,41,31,0.12);
    --rosso-tint-badge: rgba(130,41,31,0.14);
    --rosso-tint-nuova: rgba(130,41,31,0.18);
    --rosso-tint-cal: rgba(130,41,31,0.22);
  }
}
:root[data-tema="chiaro"]{
  color-scheme: light;
  --bg:#f2e6c4;
  --bg-radial: radial-gradient(ellipse 1100px 620px at 50% -12%, #fbf3de 0%, #f2e6c4 55%);
  --surface:#fdf6e6;
  --surface-soft: rgba(253,246,230,0.7);
  --border: rgba(59,42,26,0.28);
  --border-soft: rgba(59,42,26,0.14);
  --ink:#2e2013;
  --ink-muted:#6b5843;
  --gold:#8a4f1d;
  --gold-tint: rgba(138,79,29,0.16);
  --gold-tint-soft: rgba(138,79,29,0.09);
  --bordeaux:#7d5b12;
  --bordeaux-tint: rgba(125,91,18,0.16);
  --bordeaux-tint-soft: rgba(125,91,18,0.09);
  --terracotta:#8a4f1d;
  --verde:#6b3d1c;
  --verde-light:#5a3a1f;
  --verde-tint: rgba(107,68,35,0.16);
  --bandana:#5b5e28;
  --ink-strong:#1c1309;
  --on-accent:#fbf3de;
  --campo-bg:#fffdf6;
  --placeholder:#9c8a6e;
  --header-bg: rgba(253,246,230,0.92);
  --header-bg-solid:#fdf6e6;
  --menu-bg:#fbf1da;
  --rosso:#82291f;
  --rosso-testo:#6b1f16;
  --rosso-testo-muto:#7a3a30;
  --rosso-tint-avviso: rgba(130,41,31,0.12);
  --rosso-tint-badge: rgba(130,41,31,0.14);
  --rosso-tint-nuova: rgba(130,41,31,0.18);
  --rosso-tint-cal: rgba(130,41,31,0.22);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg-radial), var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--gold-tint); color: var(--ink); }
a{ color: var(--terracotta); text-decoration: none; }
a:hover{ color: var(--gold); }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
img{ max-width:100%; }
h1,h2,h3{ font-family:"Cinzel", Georgia, serif; font-weight:700; color:var(--ink-strong); margin:0; text-wrap:balance; }
.wrap{ max-width: 780px; margin:0 auto; padding: 0 28px 90px; }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-soft);
}
.nav{
  /* Prenota e Area privata sul desktop sono un bottone e un'icona a parte
     (vedi sotto), fuori dall'elenco che scorre: restano sempre raggiungibili
     anche quando le 8 voci informative devono stringersi o scorrere. */
  max-width: 1200px; margin: 0 auto; padding: 16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap: 14px;
  flex-wrap: nowrap;
}
/* flex-shrink:0 — logo e nome non devono mai essere compressi: in alcuni
   browser il calcolo della larghezza minima di un flex annidato (brand
   dentro nav) può sbagliare e far sovrapporre il testo al pulsante
   accanto (tema-toggle). Il "sacrificio" in caso di spazio stretto lo fa
   .nav-links, che ha già lo scroll orizzontale proprio per questo. */
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; text-align:center; }
.brand-word{
  font-family:"Cinzel", serif; font-weight:700; font-size:15px; line-height:1;
  letter-spacing: 0.14em; color: var(--ink); white-space:nowrap;
}
.brand-tagline{
  font-family:"EB Garamond", Georgia, serif; font-style:italic; font-size:11.5px; line-height:1;
  color: var(--ink-muted); white-space:nowrap;
}
.crest{ width:34px; height:34px; flex:none; }
.nav-links{
  display:flex; flex-wrap:nowrap; gap: 4px 15px; list-style:none; margin:0; padding:0;
  overflow-x:auto; min-width:0;
}
.nav-links a{
  font-family:"Cinzel", serif; font-size:10.5px; letter-spacing:0.06em;
  color: var(--ink-muted); text-transform: uppercase; padding: 6px 1px;
  border-bottom: 1px solid transparent; white-space:nowrap;
}
.nav-links a:hover{ color: var(--gold); }
.nav-links a.active{ color: var(--gold); border-bottom-color: var(--gold); }

/* Voci "Prenota" / "Area privata" duplicate dentro l'elenco: servono solo
   al pannello mobile a comparsa (dove sono link di testo come gli altri).
   Sul desktop il bottone e l'icona qui sotto le sostituiscono, e queste
   restano nascoste: cosi' non compaiono due volte nello stesso menu. */
@media (min-width: 1000px){
  .nav-item-mobile-only{ display:none; }
}

/* Prenota e Area privata sul desktop: un bottone pieno e un'icona, fuori
   dall'elenco .nav-links che scorre in orizzontale quando lo spazio si
   stringe — cosi' restano sempre visibili e cliccabili, a differenza
   delle voci informative che possono finire fuori vista nello scroll.
   Nascosti di default: il pannello mobile li mostra gia' (vedi sopra). */
.nav-divider, .nav-cta, .nav-account{ display:none; }
@media (min-width: 1000px){
  .nav-divider{
    display:block; width:1px; height:20px; flex:none;
    background: var(--border-soft); order:2;
  }
  .nav-cta{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    order:3; font-family:"Cinzel", serif; font-weight:600; font-size:11px;
    letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap;
    padding: 8px 16px; border-radius:4px; border:1px solid var(--gold);
    background: var(--gold); color:var(--on-accent);
    transition: background .15s ease, border-color .15s ease;
  }
  .nav-cta:hover{ background: var(--verde-light); border-color: var(--verde-light); color:var(--on-accent); }
  .nav-account{
    display:flex; align-items:center; justify-content:center; flex:none;
    order:4; width:38px; height:38px; padding:0; border-radius:4px;
    border:1px solid var(--border-soft); color: var(--ink-muted);
    transition: color .15s ease, border-color .15s ease;
  }
  .nav-account:hover, .nav-account.active{ color: var(--gold); border-color: var(--gold); }
  .nav-account svg{ width:18px; height:18px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; }
  .nav-links{ order:1; }
  .tema-toggle{ order:5; }
}

/* ---------- interruttore tema chiaro/scuro ---------- */
.tema-toggle{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--border-soft); border-radius:4px;
  color: var(--ink-muted); transition: color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tema-toggle:hover{ color: var(--gold); border-color: var(--gold); }
.tema-toggle svg{ width:18px; height:18px; display:block; }
.tema-toggle .icona-sole{ display:none; fill:none; stroke:currentColor; }
.tema-toggle .icona-luna{ display:block; fill:currentColor; }
/* di sistema chiaro (a meno che l'utente non forzi lo scuro): sole visibile */
@media (prefers-color-scheme: light){
  :root:not([data-tema="scuro"]) .tema-toggle .icona-sole{ display:block; }
  :root:not([data-tema="scuro"]) .tema-toggle .icona-luna{ display:none; }
}
/* forzato chiaro dall'interruttore, a prescindere dal sistema */
:root[data-tema="chiaro"] .tema-toggle .icona-sole{ display:block; }
:root[data-tema="chiaro"] .tema-toggle .icona-luna{ display:none; }
@media (prefers-reduced-motion: reduce){
  .tema-toggle{ transition:none; }
}

/* ---------- hero / kicker ---------- */
.kicker{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-family:"Cinzel", serif; font-size:12.5px; letter-spacing:0.3em;
  color: var(--bandana); margin: 44px 0 16px; text-transform:uppercase;
}
.crumb{
  font-family:"Cinzel", serif; font-size:11.5px; letter-spacing:0.2em;
  color: var(--bandana); text-transform:uppercase; margin: 40px 0 14px;
}
.crumb a{ color: var(--bandana); border-bottom: 1px solid transparent; }
.crumb a:hover{ border-bottom-color: var(--bandana); }
.logo-nav{ display:block; height:44px; width:auto; border-radius:5px; }

/* ---------- hero a piena larghezza (home) ---------- */
.hero-band{
  background:
    radial-gradient(ellipse 900px 460px at 50% -12%, var(--gold-tint-soft), transparent 70%),
    var(--surface-soft);
  border-bottom:1px solid var(--border-soft);
  padding: 50px 24px 54px;
}
/* senza questo spazio le card sotto toccavano subito il bordo della fascia */
.hero-band + .wrap{ padding-top: 48px; }
.hero-badge{ display:inline-block; margin:0 0 20px; }
.logo-hero{ display:block; width:220px; height:auto; margin:0 auto; }
.page-head{ text-align:center; max-width:600px; margin:0 auto 42px; }
.page-head h1{ font-size: clamp(30px, 4.4vw, 40px); margin-bottom: 12px; }
/* in home il titolo sta su una riga sola sul computer: la fascia si allarga,
   il sottotitolo resta alla larghezza di lettura di prima */
.hero-band .page-head{ max-width:820px; }
.hero-band .page-sub{ max-width:600px; margin-left:auto; margin-right:auto; }
.page-sub{
  font-style:italic; font-size:18.5px; color: var(--ink-muted); line-height:1.55; margin:0;
}
h1.left{ text-align:left; }
.page-head.left{ text-align:left; margin-left:0; }

/* ---------- ribbon cta ---------- */
.ribbon{
  font-family:"Cinzel", serif; font-weight:600; letter-spacing:0.05em;
  text-align:center; padding: 15px 34px;
  clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background: var(--surface); color: var(--ink);
  display:block;
}
.hero-ribbon{ display:flex; justify-content:center; margin: 0 0 10px; }
.hero-ribbon .ribbon{ font-size:19px; letter-spacing:0.12em; }
.hero-sub{
  text-align:center; font-style:italic; font-size:15.5px; color: var(--ink-muted);
  margin: 0 0 40px;
}

/* ---------- comparsa allo scroll ---------- */
/* .is-visible viene aggiunta da main.js quando l'elemento entra nello
   schermo (IntersectionObserver). Se JS non parte o l'utente ha chiesto
   meno movimento, il CSS da solo mostra tutto normalmente: niente resta
   invisibile per un errore di script. */
.reveal{
  opacity:0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }
.cta-row > .reveal:nth-child(2), .loc-row > .reveal:nth-child(2), .bio-row > .reveal:nth-child(2){
  transition-delay: .1s;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

.cta-row{ display:flex; gap:22px; margin: 0 0 46px; }
.cta-block{
  flex:1; border-radius:4px; padding: 28px 22px; text-align:center;
  transition: transform .15s ease, border-color .15s ease;
}
.cta-block:hover{ transform: translateY(-2px); }
.cta-block.edu, .cta-block.pen{ background: var(--bordeaux-tint-soft); border:1px solid rgba(138,58,64,0.6); }
.cta-block.edu:hover, .cta-block.pen:hover{ border-color: var(--bordeaux); }
.cta-block .t{ font-family:"Cinzel", serif; font-weight:600; font-size:16.5px; letter-spacing:0.04em; }
.cta-block.edu .t, .cta-block.pen .t{ color: var(--bordeaux); }
.cta-block .s{ font-style:italic; font-size:14px; color: var(--ink-muted); margin-top:9px; }

.end-cta{
  display:block; border-radius:4px; padding: 24px; text-align:center; margin-top: 8px;
  font-family:"Cinzel", serif; font-weight:600; font-size:15px; letter-spacing:0.04em;
  transition: transform .15s ease, border-color .15s ease;
}
.end-cta:hover{ transform: translateY(-2px); }
.end-cta.plain{ border:1px solid var(--verde); background: var(--verde-tint); color: var(--verde-light); }
.end-cta.plain:hover{ border-color: var(--verde-light); }

/* ---------- section cards ---------- */
.section{
  border:1px solid var(--border-soft); background: var(--surface-soft);
  border-radius:4px; padding: 26px 28px; margin-bottom: 20px;
  border-left-width: 3px;
}
.section.edu, .section.pen{ border-left-color: var(--bordeaux); }
.section.verde{ border-left-color: var(--verde); }
.section h3{
  font-family:"EB Garamond", Georgia, serif; font-weight:600;
  font-size:20px; margin-bottom:9px;
}
.section.edu h3, .section.pen h3{ color: var(--bordeaux); }
.section.verde h3{ color: var(--verde-light); }
.section p{ margin:0; color: var(--ink); }
.section p + p{ margin-top:10px; }
.price{ font-style:normal; font-weight:600; }
.section.edu .price, .section.pen .price{ color: var(--bordeaux); }
.section.verde .price{ color: var(--verde-light); }

/* ---------- teaser (media + testo) ---------- */
.teaser{
  display:grid; grid-template-columns: 128px 1fr; align-items:center; gap:22px;
  border:1px solid var(--border-soft); background: var(--surface-soft);
  border-radius:4px; padding: 22px 26px; margin-bottom: 18px;
  transition: transform .15s ease, border-color .15s ease;
}
.teaser:hover{ transform: translateY(-2px); border-color: var(--gold); }
/* la seconda card inverte l'ordine: testo/foto alternati, non una colonna piatta */
.teaser--inversa{ grid-template-columns: 1fr 128px; }
.teaser--inversa .teaser-figura{ order:2; }
.teaser-figura{
  width:128px; height:128px; border-radius:4px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--gold-tint-soft); border:1px solid var(--border-soft);
}
/* segnaposto in attesa di una foto vera: basta sostituire il contenuto
   di .teaser-figura con un <img src="assets/img/..."> quando disponibile */
.teaser-figura svg{ width:46px; height:46px; color: var(--ink-muted); opacity:.6; }
.teaser-figura.foto{ overflow:hidden; background: var(--surface); }
.teaser-figura img{ display:block; width:100%; height:100%; object-fit:cover; }
.teaser-corpo{ min-width:0; }
.teaser h3{ font-family:"EB Garamond", Georgia, serif; font-weight:600; font-size:19px; margin-bottom:8px; color: var(--ink); }
.teaser p{ font-style:italic; color: var(--ink-muted); margin:0; }
.teaser .more{ display:inline-block; margin-top:10px; font-style:normal; font-family:"Cinzel", serif; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; }
@media (max-width:600px){
  .teaser, .teaser--inversa{ grid-template-columns: 1fr; text-align:center; }
  .teaser--inversa .teaser-figura{ order:0; }
  .teaser-figura{ width:100%; height:110px; margin:0 auto; }
  .teaser-figura.foto{ height:auto; aspect-ratio: 16 / 9; }
}

/* ---------- foto ---------- */
/* foto in testa a una card (chi siamo, dove operiamo) */
.card-foto{
  display:block; width:100%; height:auto; aspect-ratio: 4 / 3; object-fit:cover;
  border-radius:3px; border:1px solid var(--border-soft); margin-bottom:16px;
  background: var(--surface);
}
.card-foto.quadrata{ aspect-ratio: 1 / 1; }
/* foto larga in apertura di pagina */
.foto-banner{ margin:0 0 20px; }
.foto-banner img{
  display:block; width:100%; height:auto; aspect-ratio: 16 / 9; object-fit:cover;
  border-radius:4px; border:1px solid var(--border-soft); background: var(--surface);
}
/* piccola galleria: 2 o 3 foto affiancate */
.foto-griglia{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:14px; margin:0 0 20px;
}
.foto-griglia figure{ margin:0; }
.foto-griglia img{
  display:block; width:100%; height:auto; aspect-ratio: 4 / 3; object-fit:cover;
  border-radius:4px; border:1px solid var(--border-soft); background: var(--surface);
}
.foto-griglia figcaption, .foto-banner figcaption{
  font-style:italic; font-size:14px; color: var(--ink-muted); margin-top:7px;
}
/* sul telefono le foto restano affiancate a due a due (la prima, se sono
   dispari, prende tutta la riga): impilate spingerebbero il testo troppo in basso */
@media (max-width:600px){
  .foto-griglia{ grid-template-columns: 1fr 1fr; gap:10px; }
  .foto-griglia figure:first-child:nth-last-child(odd){ grid-column: 1 / -1; }
  .foto-griglia figcaption{ font-size:13px; margin-top:5px; }
}
/* tablet in verticale: le card vanno una sotto l'altra a tutta larghezza
   (~700px), e una foto 4:3 o quadrata riempirebbe lo schermo */
@media (min-width:601px) and (max-width:999px){
  .card-foto{ aspect-ratio: 16 / 9; }
  .card-foto.quadrata{ aspect-ratio: 1 / 1; max-width: 320px; }
}
/* telefono in orizzontale: lo schermo è alto ~390px, le foto non devono
   occuparlo tutto */
@media (orientation: landscape) and (max-width: 999px) and (max-height: 560px){
  .foto-banner img{ aspect-ratio: 3 / 1; }
  .card-foto{ aspect-ratio: 16 / 9; }
  .card-foto.quadrata{ aspect-ratio: 1 / 1; max-width: 180px; }
}

/* ---------- dividers ---------- */
.divider{ display:flex; align-items:center; gap:16px; margin: 46px 0 26px; }
.divider .line{ flex:1; height:1px; background: var(--border-soft); }
.divider span{
  font-family:"Cinzel", serif; font-size:11.5px; letter-spacing:0.24em;
  color: var(--ink-muted); white-space:nowrap; text-transform:uppercase;
}

/* ---------- FAQ (accordion) ---------- */
.faq-list{ display:grid; gap:12px; margin-bottom: 8px; }
.faq-item{
  border:1px solid var(--border-soft); background: var(--surface-soft);
  border-radius:4px; border-left:3px solid var(--bandana);
  overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding: 18px 46px 18px 22px;
  font-family:"EB Garamond", Georgia, serif; font-weight:600; font-size:17px;
  color: var(--ink-strong);
}
.faq-item summary:hover{ color: var(--gold); }
.faq-item summary:focus-visible{ outline: 2px solid var(--gold); outline-offset: -2px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:"Cinzel", serif; font-size:18px; line-height:1; color: var(--bandana);
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item[open] summary{ border-bottom:1px solid var(--border-soft); }
.faq-risposta{ padding: 16px 22px 20px; color: var(--ink); }
.faq-risposta p{ margin:0; }
.faq-risposta p + p{ margin-top:10px; }
@media (max-width:600px){
  .faq-item summary{ padding: 16px 40px 16px 18px; font-size:16px; }
  .faq-risposta{ padding: 14px 18px 18px; }
}

/* ---------- location cards (dove operiamo) ---------- */
.loc-row{ display:flex; gap:22px; margin-bottom: 10px; }
.loc-card{ flex:1; border:1px solid var(--border-soft); background: var(--surface-soft); border-radius:4px; padding:24px 22px; }
.loc-card h3{ font-family:"EB Garamond", Georgia, serif; font-weight:600; font-size:19px; color: var(--bandana); margin-bottom:8px; }
.loc-card ul{ margin:12px 0 0; padding-left:18px; color: var(--ink-muted); font-size:15px; }
.loc-card li{ margin-bottom:4px; }
.loc-map{
  margin-top:16px; border-radius:4px; overflow:hidden;
  border:1px solid var(--border-soft); aspect-ratio: 4 / 3;
}
.loc-map iframe{ width:100%; height:100%; border:0; display:block; }
.note{ font-style:italic; color: var(--ink-muted); font-size:15px; text-align:center; margin-top:22px; }

/* ---------- contact ---------- */
.contact-card{
  border:1px solid var(--border-soft); background: var(--surface-soft);
  border-radius:4px; padding: 34px 30px; text-align:center;
}
.contact-line{ font-family:"Cinzel", serif; font-size:19px; letter-spacing:0.02em; margin: 14px 0; }
.contact-line a{ color: var(--ink); border-bottom: 1px solid var(--terracotta); }
.contact-line a:hover{ color: var(--gold); border-bottom-color: var(--gold); }
.contact-label{ font-size:11px; letter-spacing:0.2em; color: var(--bandana); text-transform:uppercase; font-family:"Cinzel",serif; }
.piva{ margin-top:26px; font-size:13px; color: var(--ink-muted); }

/* ---------- bio (chi siamo) ---------- */
.bio-row{ display:flex; gap:22px; margin-bottom: 8px; }
.bio-card{ flex:1; border:1px solid var(--border-soft); background: var(--surface-soft); border-radius:4px; padding:24px 22px; }
.bio-card .role{ font-family:"Cinzel", serif; font-size:11.5px; letter-spacing:0.14em; color: var(--bandana); text-transform:uppercase; margin-bottom:8px; }
.bio-card h3{ font-size:20px; margin-bottom:8px; }
.bio-card p{ color: var(--ink-muted); font-size:15px; margin:0; }
.pillars-list{ list-style:none; margin:0; padding:0; }
.pillars-list li{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.pillars-list li:last-child{ border-bottom:none; }
.pillars-list .dot{ width:7px; height:7px; margin-top:8px; background:var(--verde-light); transform:rotate(45deg); flex:none; }
.pillars-list b{ color: var(--ink); }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--border-soft); margin-top: 26px;
  padding: 30px 28px 40px; text-align:center;
}
.footer-inner{ max-width:780px; margin:0 auto; }
.footer-links{ font-size:14px; color: var(--ink-muted); margin-bottom:8px; }
.footer-links a{ color: var(--ink-muted); }
.footer-links a:hover{ color:var(--gold); }
.footer-contact{ font-size:14.5px; color: var(--ink); }
.footer-contact a{ color: var(--ink); border-bottom:1px solid var(--terracotta); }
.footer-piva{ font-size:12px; color: var(--ink-muted); opacity:0.75; margin-top:12px; }

@media (max-width: 600px){
  .cta-row, .loc-row, .bio-row{ flex-direction:column; }
  .nav{ gap:10px; }
  .nav-links{ gap:4px 12px; }
}
@media (prefers-reduced-motion: reduce){
  .cta-block, .teaser, .end-cta, .bottone{ transition:none; }
}

/* ==================================================================
   Pagine di testo e modulo (privacy, termini, 404, prenota)
   Stessi contenuti di prima, vestiti come il resto del sito.
   ================================================================== */
.data{ font-size:13px; color: var(--ink-muted); letter-spacing:0.04em; margin: 0 0 18px; }
.premessa{ font-style:italic; font-size:17.5px; color: var(--ink-muted); line-height:1.55; margin: 0 0 30px; }
.premessa a{ font-style:normal; }
/* saluto + pulsante "Esci" in area privata: testo a sinistra, pulsante
   sempre ancorato a destra, sulla stessa riga finché c'è spazio */
.riga-benvenuto{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:30px;
}
.riga-benvenuto .premessa{ margin-bottom:0; }

/* indice in cima alle pagine legali */
.indice{
  margin: 0 0 40px; padding: 20px 24px 20px 40px;
  border:1px solid var(--border-soft); border-left:3px solid var(--bandana);
  background: var(--surface-soft); border-radius:4px;
  columns: 2; column-gap: 30px;
  font-size:15px;
}
.indice li{ margin-bottom:7px; break-inside:avoid; color: var(--ink-muted); }
.indice a{ color: var(--ink-muted); }
.indice a:hover{ color: var(--gold); }

/* sezioni numerate */
main section{ margin-bottom: 30px; scroll-margin-top: calc(var(--testata) + 12px); }
main section h2{
  font-size:15px; letter-spacing:0.07em; text-transform:uppercase;
  color: var(--verde-light); margin-bottom:12px;
  padding-bottom:9px; border-bottom:1px solid var(--border-soft);
}
main section p{ margin: 0 0 11px; }
main section ul, main section ol{ margin: 0 0 11px; padding-left:20px; color: var(--ink); }
main section li{ margin-bottom:6px; }
main section b{ color:var(--ink-strong); }
main section table{
  width:100%; border-collapse:collapse; margin: 0 0 14px; font-size:14.5px;
  border:1px solid var(--border-soft); border-radius:4px; overflow:hidden;
}
main section th, main section td{
  text-align:left; vertical-align:top; padding:10px 12px;
  border-bottom:1px solid var(--border-soft); color: var(--ink);
}
main section th{
  font-family:"Cinzel", serif; font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color: var(--bandana); background: var(--surface-soft);
}
main section tr:last-child td{ border-bottom:none; }
@media (max-width: 600px){
  /* su telefono le tabelle (es. cookie in privacy) sforavano di qualche px */
  main section table{ font-size:13.5px; }
  main section th, main section td{ padding:8px 6px; overflow-wrap:break-word; hyphens:auto; }
  main section th{ letter-spacing:0.02em; font-size:10px; }
}
@media (max-width: 360px){
  main section th, main section td{ overflow-wrap:anywhere; }
}
.riquadro{
  border:1px solid var(--border-soft); border-left:3px solid var(--gold);
  background: var(--gold-tint-soft); border-radius:4px;
  padding: 18px 20px; margin: 0 0 14px;
}
.riquadro p:last-child{ margin-bottom:0; }

/* pulsanti (404, prenota) */
.azioni{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.bottone{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Cinzel", serif; font-weight:600; font-size:14px;
  letter-spacing:0.08em; text-transform:uppercase;
  padding: 15px 30px; border-radius:4px; border:1px solid var(--gold);
  cursor:pointer; text-align:center;
  background: var(--gold-tint); color: var(--gold);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bottone:hover{ transform: translateY(-2px); }
.bottone-pieno{ background: var(--gold); color:var(--on-accent); border-color: var(--gold); }
.bottone-pieno:hover{ background: var(--verde-light); border-color: var(--verde-light); color:var(--on-accent); }
.bottone-vuoto{ background: transparent; color: var(--gold); }
.bottone-vuoto:hover{ background: var(--gold-tint); color: var(--gold); }
/* stessa dimensione del tastone finale del modulo di contatto (#modulo-contatto .bottone),
   per i pulsanti "Prenota" a piena larghezza fuori dal modulo */
.bottone-full{ display:flex; width:100%; padding: 17px 30px; font-size:15px; }

/* 404 */
.numero{
  font-family:"Cinzel", serif; font-weight:700; font-size: clamp(56px, 16vw, 92px);
  line-height:1; color: var(--gold); opacity:.85; margin: 0 0 10px; letter-spacing:0.04em;
}

/* modulo di contatto */
#modulo-contatto{ margin-top: 6px; }
#modulo-contatto fieldset, #blocco-autenticazione fieldset, #area-cliente fieldset,
#corpo-prenotazione fieldset, #corpo-staff fieldset{
  border:1px solid var(--border-soft); border-left:3px solid var(--gold);
  background: var(--surface-soft); border-radius:4px;
  padding: 20px 22px 22px; margin: 0 0 20px;
}
#modulo-contatto legend, #blocco-autenticazione legend, #area-cliente legend,
#corpo-prenotazione legend, #corpo-staff legend{
  font-family:"Cinzel", serif; font-weight:600; font-size:13px;
  letter-spacing:0.09em; text-transform:uppercase; color: var(--gold);
  padding: 0 9px;
}
.riga{ display:grid; gap:16px; }
/* fuori da un fieldset (dove il padding già dà respiro), una riga
   seguita da altro contenuto — un'altra riga, un campo, un pulsante —
   ha bisogno del suo margine: senza, quel contenuto le si appiccica
   sopra */
.riga:not(:last-child){ margin-bottom:16px; }
.riga-2{ grid-template-columns: 1fr 1fr; }
.riga-3{ grid-template-columns: 1fr 1fr 1fr; }
.campo{ margin-bottom:16px; }
.riga .campo{ margin-bottom:0; }
.campo label{
  display:block; margin-bottom:6px;
  font-family:"Cinzel", serif; font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--ink-muted);
}
/* segnaposto invisibile della stessa altezza di .campo label: senza,
   una checkriga (senza etichetta sopra) risulta più in alto degli altri
   campi della stessa riga, che invece hanno etichetta + campo */
.campo-etichetta-vuota{
  display:block; margin-bottom:6px; font-size:11.5px; line-height:1.6;
}
.campo input, .campo select, .campo textarea{
  width:100%; padding: 11px 12px;
  background:var(--campo-bg); color: var(--ink);
  border:1px solid var(--border); border-radius:4px;
  font-family:"EB Garamond", Georgia, serif; font-size:16px; line-height:1.4;
}
.campo textarea{ min-height:110px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color: var(--gold); box-shadow:0 0 0 2px var(--gold-tint);
}
.campo input::placeholder, .campo textarea::placeholder{ color:var(--placeholder); }
/* i tre pannelli data/soggiorno: ne resta visibile solo quello del
   servizio scelto — lo script del modulo mette e toglie .attivo */
[data-blocco]{ display:none; }
[data-blocco].attivo{ display:block; }

/* la spunta "pappa fornita": è una <label> che contiene la casella,
   quindi va sottratta allo stile delle etichette normali */
.campo label.checkriga, .checkriga{
  display:flex; align-items:center; gap:10px;
  font-family:"EB Garamond", Georgia, serif; font-size:16px;
  letter-spacing:0; text-transform:none; color: var(--ink);
  margin:0; cursor:pointer;
}
.checkriga input[type="checkbox"], .checkriga input[type="radio"]{
  width:19px; height:19px; flex:none; margin:0;
  accent-color: var(--gold);
}
/* l'invio del modulo è l'azione principale della pagina: pieno */
#modulo-contatto .bottone{
  width:100%; padding: 17px 30px; font-size:15px;
  background: var(--gold); color:var(--on-accent); border-color: var(--gold);
}
#modulo-contatto .bottone:hover{ background: var(--verde-light); border-color: var(--verde-light); }
/* due canali di invio affiancati (WhatsApp / email); in colonna su mobile */
.invio-doppio{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.info-invio{ font-size:14px; color: var(--ink-muted); text-align:center; margin-top:14px; font-style:italic; }

@media (max-width: 999px){
  .indice{ columns:1; padding: 16px 18px 16px 34px; margin-bottom:30px; }
  .riga-2, .riga-3{ grid-template-columns: 1fr; }
  #modulo-contatto fieldset, #blocco-autenticazione fieldset, #area-cliente fieldset,
  #corpo-prenotazione fieldset, #corpo-staff fieldset{ padding: 16px 16px 18px; }
  .azioni{ flex-direction:column; }
  .bottone{ width:100%; }
  .invio-doppio{ grid-template-columns: 1fr; }
  .premessa{ font-size:16.5px; }
}
@media (orientation: landscape) and (max-width: 999px) and (max-height: 560px){
  .riga-2{ grid-template-columns: 1fr 1fr; }
  .riga-3{ grid-template-columns: 1fr 1fr 1fr; }
  .indice{ columns:2; }
  .azioni{ flex-direction:row; }
  .bottone{ width:auto; }
  .invio-doppio{ grid-template-columns: 1fr 1fr; }
  .numero{ font-size:48px; }
}

/* ==================================================================
   TRE VISTE — mobile verticale / mobile orizzontale / computer
   Aggiunto senza toccare le regole qui sopra: il desktop resta
   identico a prima, le due viste mobile sono nuove.
   ================================================================== */
:root{
  --testata: 66px;   /* altezza reale dell'intestazione, misurata via JS */
  --barra: 56px;     /* altezza della barra "Prenota" fissa in basso */
}

/* Elementi che esistono solo sul mobile: nascosti di default,
   così la vista computer non cambia di una virgola. */
.nav-toggle{ display:none; }
.barra-azione{ display:none; }

/* ------------------------------------------------------------------
   VISTA 1 — MOBILE (base verticale, fino a 999px)
   ------------------------------------------------------------------ */
@media (max-width: 999px){

  /* --- intestazione: niente backdrop-filter, altrimenti il menu
         a tutto schermo verrebbe agganciato all'header e non al viewport --- */
  .site-header{
    background:var(--header-bg-solid);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .nav{
    padding: 11px 18px;
    gap: 12px;
    min-height: var(--testata);
  }
  .logo-nav{ height: 40px; }
  .tema-toggle{ width:44px; height:44px; }

  /* --- pulsante hamburger --- */
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex:none; padding:0; cursor:pointer;
    background:transparent; border:1px solid var(--border-soft); border-radius:4px;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle .barre{
    position:relative; display:block; width:20px; height:2px;
    background:var(--ink); transition: background .18s ease;
  }
  .nav-toggle .barre::before,
  .nav-toggle .barre::after{
    content:""; position:absolute; left:0; width:20px; height:2px;
    background:var(--ink); transition: transform .18s ease;
  }
  .nav-toggle .barre::before{ top:-6px; }
  .nav-toggle .barre::after{ top:6px; }
  body.menu-aperto .nav-toggle .barre{ background:transparent; }
  body.menu-aperto .nav-toggle .barre::before{ transform: translateY(6px) rotate(45deg); }
  body.menu-aperto .nav-toggle .barre::after{ transform: translateY(-6px) rotate(-45deg); }

  /* --- menu a comparsa: pannello a tutto schermo sotto l'intestazione --- */
  .nav-links{
    position:fixed; top:var(--testata); left:0; right:0; bottom:0;
    z-index:30;
    display:block; overflow-x:hidden; overflow-y:auto;
    margin:0; padding: 6px 20px calc(28px + env(safe-area-inset-bottom));
    background:var(--menu-bg);
    border-top:1px solid var(--border-soft);
    opacity:0; visibility:hidden; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    -webkit-overflow-scrolling: touch;
  }
  body.menu-aperto .nav-links{ opacity:1; visibility:visible; transform:none; }
  body.menu-aperto{ overflow:hidden; }
  .nav-links li{ border-bottom:1px solid var(--border-soft); }
  .nav-links li:last-child{ border-bottom:none; }
  .nav-links a{
    display:block; padding: 15px 2px;
    font-size: 13.5px; letter-spacing: 0.14em;
    border-bottom:none;
  }
  .nav-links a.active{ border-bottom:none; }
  .nav-links a.active::before{
    content:"— "; color: var(--gold);
  }

  /* --- corpo pagina: margini più stretti, spazio per la barra in basso --- */
  body{ padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom)); }
  .wrap{ padding: 0 20px 56px; }
  .site-footer{ padding: 26px 20px 30px; }

  /* --- niente colonne affiancate su schermo stretto --- */
  .cta-row, .loc-row, .bio-row{ flex-direction:column; gap:16px; }

  /* --- titoli e spaziature più compatti --- */
  .kicker{ margin: 30px 0 14px; font-size:11.5px; letter-spacing:0.24em; }
  .crumb{ margin: 26px 0 12px; }
  .page-head{ margin-bottom: 30px; }
  .page-head h1{ font-size: clamp(26px, 8vw, 34px); }
  .page-sub{ font-size: 17px; }
  .hero-ribbon .ribbon{ font-size:15px; letter-spacing:0.08em; padding: 13px 22px; }
  .hero-sub{ margin-bottom: 30px; }
  .section, .teaser{ padding: 20px 18px; }
  .loc-card, .bio-card{ padding: 20px 18px; }
  .contact-card{ padding: 26px 18px; }
  .contact-line{ font-size:17px; }
  .divider{ margin: 34px 0 20px; }

  /* --- i moduli non devono far zoomare iOS: minimo 16px --- */
  input, select, textarea, button{ font-size:16px; }
  input, select, textarea{ width:100%; max-width:100%; }

  /* --- barra "Prenota" fissa in basso --- */
  .barra-azione{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    min-height: var(--barra);
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    background: var(--gold); color:var(--on-accent);
    font-family:"Cinzel", serif; font-weight:600;
    font-size: 14.5px; letter-spacing:0.1em; text-transform:uppercase;
    text-decoration:none;
    box-shadow: 0 -8px 20px rgba(0,0,0,.38);
  }
  .barra-azione:hover, .barra-azione:focus{ color:var(--on-accent); }
  body.menu-aperto .barra-azione{ display:none; }
}

/* ------------------------------------------------------------------
   VISTA 2 — MOBILE ORIZZONTALE (telefono girato: poco spazio in altezza)
   Larghezza e altezza insieme: un telefono in orizzontale è largo
   ~850px ma alto ~390px, e una regola sulla sola larghezza lo
   scambierebbe per un tablet.
   ------------------------------------------------------------------ */
@media (orientation: landscape) and (max-width: 999px) and (max-height: 560px){
  :root{ --testata: 54px; --barra: 46px; }

  .nav{ padding: 7px 18px; }
  .logo-nav{ height: 34px; }
  .nav-toggle{ width:38px; height:38px; }

  /* menu su due colonne: ci sta tutto senza scorrere */
  .nav-links{
    display:grid; grid-template-columns: 1fr 1fr;
    column-gap: 22px; align-content:start;
    padding: 4px 18px calc(16px + env(safe-area-inset-bottom));
  }
  .nav-links a{ padding: 11px 2px; font-size:13px; }

  /* meno aria in verticale: il primo contenuto utile resta sopra la piega */
  .wrap{ padding: 0 22px 40px; max-width: 720px; }
  .kicker{ margin: 16px 0 10px; }
  .crumb{ margin: 14px 0 10px; }
  .page-head{ margin-bottom: 16px; }
  .page-head h1{ font-size: 24px; margin-bottom: 8px; }
  .page-sub{ font-size: 15.5px; line-height:1.45; }
  .hero-badge{ margin-bottom: 8px; }
  .logo-hero{ width: 120px; }
  .hero-ribbon{ margin-bottom: 8px; }
  .hero-sub{ margin-bottom: 16px; font-size:14px; }
  .section, .teaser{ padding: 16px 18px; margin-bottom: 14px; }
  .divider{ margin: 24px 0 16px; }
  .end-cta{ padding: 18px; }

  /* in orizzontale lo spazio in larghezza c'è: le coppie restano affiancate */
  .cta-row, .loc-row, .bio-row{ flex-direction:row; gap:16px; }

  .barra-azione{ font-size:13.5px; padding: .45rem 1rem calc(.45rem + env(safe-area-inset-bottom)); }
  .site-footer{ padding: 20px 22px 24px; }
}

/* ------------------------------------------------------------------
   VISTA 3 — COMPUTER (da 1000px in su)
   Il menu a comparsa e la barra in basso non esistono; la barra di
   navigazione torna in linea, con un filo di respiro in più.
   ------------------------------------------------------------------ */
@media (min-width: 1000px){
  body{ padding-bottom: 0; }
  .nav-toggle{ display:none; }
  .barra-azione{ display:none; }
  .nav-links{
    position:static; opacity:1; visibility:visible; transform:none;
    display:flex; background:none; border-top:none;
    overflow-x:auto; overflow-y:visible; padding:0;
  }
  .nav-links a{ font-size:11px; letter-spacing:0.07em; }
}

/* Chi ha chiesto meno animazioni non le riceve. */
@media (prefers-reduced-motion: reduce){
  .nav-links, .nav-toggle .barre,
  .nav-toggle .barre::before, .nav-toggle .barre::after{ transition:none; }
}

/* Badge Trustpilot: riquadro fisso in basso a destra, dimensione bloccata
   cosi' il markup iniettato da Trustpilot non puo' mai eccedere il box. */
.tp-badge{
  position:fixed; right:12px; bottom:calc(var(--barra) + env(safe-area-inset-bottom) + 12px);
  width:132px; height:44px; overflow:hidden;
  border-radius:10px; background:#00b67a; border:1px solid rgba(0,0,0,.12);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  z-index:25;
}
.tp-badge, .tp-badge *{ box-sizing:border-box; }
.tp-badge .trustpilot-widget{ width:100% !important; height:100% !important; pointer-events:none; }
.tp-badge iframe{ display:block !important; width:100% !important; height:100% !important; border:0 !important; }
/* Maschera: unico elemento cliccabile e visibile, copre l'intero box. Il
   widget Trustpilot sopra resta nel DOM e funzionante (tracking/impressioni)
   ma nascosto dietro: il comportamento non dipende piu' da come lo renderizza. */
.tp-badge .tp-mask{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:0 8px;
  background:#00b67a; color:#fff; text-decoration:none; text-align:center;
}
.tp-badge .tp-mask:hover{ filter:brightness(.9); }
.tp-badge .tp-mask:focus-visible{ outline:2px solid #fff; outline-offset:-3px; }
.tp-badge .tp-mask .stars{ display:flex; gap:1px; }
.tp-badge .tp-mask .stars svg{ display:block; width:7px; height:7px; fill:#fff; }
.tp-badge .tp-mask .tp-copy{ display:flex; flex-direction:column; align-items:center; }
.tp-badge .tp-mask .l1{ font-weight:700; font-size:8.6px; white-space:nowrap; }
.tp-badge .tp-mask .l2{ font-weight:400; font-size:7.2px; opacity:.88; white-space:nowrap; }

@media (min-width:1000px){
  .tp-badge{ right:20px; bottom:20px; width:150px; height:52px; }
  .tp-badge .tp-mask .stars svg{ width:9px; height:9px; }
  .tp-badge .tp-mask .l1{ font-size:10px; }
  .tp-badge .tp-mask .l2{ font-size:8.3px; }
}

@media (orientation:landscape) and (max-width:999px) and (max-height:560px){
  .tp-badge{ width:116px; height:38px; right:10px; }
  .tp-badge .tp-mask{ padding:0 6px; }
  .tp-badge .tp-mask .stars{ display:none; }
  .tp-badge .tp-mask .l1{ font-size:7.6px; line-height:1.25; white-space:normal; }
  .tp-badge .tp-mask .l2{ font-size:6.6px; }
}

/* area privata */
.schede-conto{ display:flex; gap:10px; margin-bottom:22px; }
.scheda-tab{
  flex:1; padding:12px 16px; border-radius:4px; border:1px solid var(--border);
  background:var(--surface-soft); color:var(--ink-muted); cursor:pointer;
  font-family:"Cinzel", serif; font-weight:600; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase;
}
.scheda-tab.attiva{ border-color:var(--gold); color:var(--gold); background:var(--gold-tint); }

.avviso{
  padding:12px 16px; border-radius:4px; margin: 0 0 18px;
  font-size:15px; line-height:1.5; border:1px solid var(--border-soft);
  background: var(--surface-soft); color: var(--ink);
}
.avviso-errore{ border-color:var(--rosso); background: var(--rosso-tint-avviso); }
.avviso-ok{ border-color: var(--gold); background: var(--gold-tint-soft); }

.sezione-conto{ margin: 0 0 34px; }
.sezione-conto h2{
  font-family:"Cinzel", serif; font-size:18px; letter-spacing:0.05em;
  color: var(--ink-strong); margin: 0 0 14px;
}

.lista-animali, .lista-prenotazioni{ display:grid; gap:12px; margin-bottom:18px; }
.card-animale, .card-prenotazione{
  border:1px solid var(--border-soft); border-left:3px solid var(--gold);
  background: var(--surface-soft); border-radius:4px; padding:14px 16px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;
}
.card-animale h3, .card-prenotazione h3{
  font-family:"Cinzel", serif; font-size:15px; margin:0 0 4px; color:var(--ink-strong);
}
.card-animale p, .card-prenotazione p{ margin:0; color:var(--ink-muted); font-size:14.5px; }
.card-azioni{ display:flex; gap:8px; flex:none; }
.card-azioni button{
  border:1px solid var(--border); background:transparent; color:var(--ink-muted);
  border-radius:4px; padding:7px 12px; font-size:13px; cursor:pointer;
}
.card-azioni button:hover{ border-color:var(--gold); color:var(--gold); }

.badge-stato{
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:12px; letter-spacing:0.04em; text-transform:uppercase; font-weight:600;
  flex:none;
}
.badge-in_attesa_pagamento{ background: rgba(195,131,69,0.18); color: var(--gold); }
.badge-confermata{ background: rgba(129,82,42,0.22); color: var(--verde-light); }
.badge-completata{ background: rgba(130,150,130,0.18); color: var(--ink-muted); }
.badge-annullata{ background: var(--rosso-tint-badge); color:var(--rosso-testo-muto); }
.badge-nuova{ background: var(--rosso-tint-nuova); color:var(--rosso-testo); }

.vuoto{ color: var(--ink-muted); font-style:italic; }

/* calendario disponibilità pensione/asilo */
.calendario{ margin: 4px 0 22px; }
.calendario-intestazione{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.calendario-intestazione button{
  border:1px solid var(--border); background:transparent; color:var(--ink-muted);
  border-radius:4px; padding:7px 14px; cursor:pointer; font-size:15px;
}
.calendario-intestazione button:hover{ border-color:var(--gold); color:var(--gold); }
.calendario-mese{
  font-family:"Cinzel", serif; font-size:15px; letter-spacing:0.05em;
  color:var(--ink-strong); text-transform:capitalize;
}
.calendario-griglia{ display:grid; grid-template-columns: repeat(7, 1fr); gap:5px; }
.etichetta-giorno{
  text-align:center; font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--ink-muted); padding-bottom:4px;
}
.giorno-cal{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:4px; font-size:14px; border:2px solid transparent;
  background: var(--surface-soft); color: var(--ink);
}
.giorno-cal.fuori-mese{ visibility:hidden; }
.giorno-cal.passato{ opacity:.35; }
.giorno-cal.rosso{ background: var(--rosso-tint-cal); color:var(--rosso-testo); cursor:not-allowed; }
.giorno-cal.giallo{ background: rgba(195,131,69,0.28); color: var(--gold); cursor:pointer; }
.giorno-cal.verde{ background: rgba(129,82,42,0.22); color: var(--verde-light); cursor:pointer; }
.giorno-cal.selezionato{ border-color: var(--gold); font-weight:700; }
.giorno-cal.in-intervallo{ border-color: var(--gold-tint); }

.legenda-calendario{ display:flex; gap:18px; flex-wrap:wrap; margin: 10px 0 0; font-size:13px; color:var(--ink-muted); }
.legenda-calendario span{ display:inline-flex; align-items:center; gap:6px; }
.legenda-pallino{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.legenda-pallino.rosso{ background:var(--rosso); }
.legenda-pallino.giallo{ background: var(--gold); }
.legenda-pallino.verde{ background: var(--verde-light); }

.riepilogo-prezzo{
  border:1px solid var(--border-soft); border-left:3px solid var(--gold);
  background: var(--surface-soft); border-radius:4px; padding:16px 18px; margin: 4px 0 20px;
}
.riepilogo-prezzo p{ margin:4px 0; }
.riepilogo-prezzo .totale{ font-family:"Cinzel", serif; color:var(--gold); font-size:16px; }

/* ==================================================================
   AREA PRIVATA E STAFF — menù "il mio conto" e pagine dedicate
   Il pulsante con l'iniziale sostituisce l'icona .nav-account quando
   sei loggato (lo inserisce area-comune.js) e apre il menù con tutte le
   pagine dell'area; su telefono resta in testata accanto all'hamburger.
   ================================================================== */
/* hidden deve vincere anche sugli elementi che qui sotto hanno un display */
[hidden]{ display:none !important; }

.conto-wrap{ position:relative; order:4; flex:none; }
.conto-btn{
  position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0;
  border:1px solid var(--border-soft); border-radius:4px; background:transparent;
  color:var(--ink-muted); cursor:pointer; -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, border-color .15s ease;
}
.conto-btn:hover, .conto-btn.active, .conto-btn[aria-expanded="true"]{ color:var(--gold); border-color:var(--gold); }
.conto-iniziale{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--gold); color:var(--on-accent);
  font-family:"Cinzel", serif; font-weight:700; font-size:13px; line-height:1;
}
.conto-punto{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--rosso); color:#fff;
  font:700 11px/18px system-ui, sans-serif; text-align:center;
}
@media (max-width:999px){
  .conto-btn{ width:44px; height:44px; }
}
@media (orientation: landscape) and (max-width: 999px) and (max-height: 560px){
  .conto-btn{ width:38px; height:38px; }
}
/* cambiando pagina, prima che arrivi la sessione: se il browser ricorda
   l'iniziale (salvata al login, vedi script in testa alle pagine) la si
   mostra subito nell'icona dell'area privata, con l'aspetto del pulsante
   vero, così non si vede il lampo dell'omino */
.conto-noto .nav-account svg{ display:none; }
.conto-noto .nav-account::before{
  content: var(--conto-iniziale); width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:var(--gold); color:var(--on-accent);
  font-family:"Cinzel", serif; font-weight:700; font-size:13px; line-height:1;
}
@media (max-width:999px){
  .conto-noto .nav-account{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; border:1px solid var(--border-soft); border-radius:4px;
  }
}
@media (orientation: landscape) and (max-width: 999px) and (max-height: 560px){
  .conto-noto .nav-account{ width:38px; height:38px; }
}
/* telefoni stretti: quattro elementi in testata (logo, tema, hamburger,
   conto) — si stringono gli spazi, il logo resta intero */
@media (max-width:400px){
  .nav{ gap:8px; padding-left:14px; padding-right:14px; }
  .tema-toggle, .nav-toggle, .conto-btn, .conto-noto .nav-account{ width:40px; height:40px; }
}

.menu-conto{
  position:absolute; right:0; top:calc(100% + 10px); z-index:40; width:290px;
  background:var(--menu-bg); border:1px solid var(--border); border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.35); padding:8px;
}
.menu-conto .chi{
  display:flex; gap:12px; align-items:center; padding:8px 10px 12px;
  border-bottom:1px solid var(--border-soft); margin-bottom:4px;
}
.menu-conto .chi .conto-iniziale{ width:38px; height:38px; font-size:16px; }
.menu-conto .chi div{ min-width:0; }
.menu-conto .chi b{ display:block; font-family:"Cinzel", serif; font-size:13.5px; color:var(--ink-strong); letter-spacing:.03em; }
.menu-conto .chi small{ display:block; color:var(--ink-muted); font-size:14px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-conto .gruppo{
  font-family:"Cinzel", serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bandana); padding:10px 10px 4px;
}
.menu-conto a, .menu-conto button.voce{
  display:flex; align-items:center; gap:11px; width:100%; padding:8px 10px; border-radius:4px;
  color:var(--ink); font-family:"EB Garamond", Georgia, serif; font-size:16.5px; line-height:1.25;
  background:none; border:0; cursor:pointer; text-align:left;
}
.menu-conto svg{ width:18px; height:18px; flex:none; fill:none; stroke:var(--ink-muted); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.menu-conto a:hover, .menu-conto button.voce:hover{ background:var(--gold-tint-soft); color:var(--gold); }
.menu-conto a:hover svg, .menu-conto a.attiva svg, .menu-conto button.voce:hover svg{ stroke:var(--gold); }
.menu-conto a.attiva{ background:var(--gold-tint); color:var(--gold); }
.menu-conto .conta{
  margin-left:auto; font:700 11px/1 system-ui, sans-serif; padding:4px 7px; border-radius:10px;
  background:var(--rosso-tint-nuova); color:var(--rosso-testo);
}
.menu-conto .conta.neutra{ background:var(--gold-tint); color:var(--gold); }
.menu-conto hr{ border:0; border-top:1px solid var(--border-soft); margin:6px 0; }
.menu-conto button.voce{ color:var(--ink-muted); }
@media (max-width:600px){
  /* pannello stretto ancorato a destra, sotto il pulsante: copre il meno possibile */
  .menu-conto{
    position:fixed; left:auto; right:10px; width:min(270px, calc(100vw - 20px));
    top:var(--menu-conto-top, 80px);
    max-height:calc(100vh - var(--menu-conto-top, 80px) - 16px); overflow:auto;
    padding:6px;
  }
  .menu-conto .chi{ padding:6px 8px 10px; }
  .menu-conto .chi .conto-iniziale{ width:32px; height:32px; font-size:14px; }
  .menu-conto a, .menu-conto button.voce{ padding:7px 8px; font-size:16px; }
}

/* contenuto delle pagine dell'area */
.testa-area{ margin:0 0 28px; }
.testa-area h1{ font-size:clamp(28px, 4vw, 36px); margin:0 0 8px; }
.testa-area .premessa{ margin:0; }
.testa-area.con-azione{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.caricamento{ color:var(--ink-muted); font-style:italic; }

.pannello{
  border:1px solid var(--border-soft); border-left:3px solid var(--gold);
  background:var(--surface-soft); border-radius:4px; padding:20px 22px 22px; margin:0 0 20px;
}
.pannello > h2{
  font-family:"Cinzel", serif; font-size:13px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold); margin:0 0 16px;
}
.pannello .nota{ color:var(--ink-muted); font-size:15px; font-style:italic; margin:-8px 0 16px; }
.pannello > :last-child{ margin-bottom:0; }
@media (max-width:999px){ .pannello{ padding:16px 16px 18px; } }
/* i moduli che si aprono con scrollIntoView non finiscono sotto la testata fissa */
.pannello{ scroll-margin-top: calc(var(--testata, 70px) + 16px); }
.campo input.mancante{ border-color:var(--rosso); }
.riga-bottoni{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.bottone.piccolo{ padding:10px 16px; font-size:12px; }
@media (max-width:999px){ .riga-bottoni .bottone, .testa-area .bottone{ width:100%; } }

/* cose da fare, in cima alla panoramica */
.da-fare{ display:grid; gap:10px; margin:0 0 28px; }
.da-fare:empty{ display:none; }
a.voce-da-fare{
  display:flex; gap:14px; align-items:center; padding:13px 16px; border-radius:4px;
  border:1px solid var(--border-soft); border-left:3px solid var(--rosso);
  background:var(--rosso-tint-avviso); color:var(--ink);
}
a.voce-da-fare.oro{ border-left-color:var(--gold); background:var(--gold-tint-soft); }
a.voce-da-fare:hover{ border-color:var(--gold); color:var(--ink); }
.voce-da-fare b{ display:block; font-family:"Cinzel", serif; font-size:13.5px; letter-spacing:.04em; color:var(--ink-strong); }
.voce-da-fare span{ color:var(--ink-muted); font-size:15px; }
.voce-da-fare i{ margin-left:auto; font-style:normal; color:var(--gold); font-family:"Cinzel", serif; font-size:12px; letter-spacing:.06em; white-space:nowrap; }

/* tessere: riquadri cliccabili della panoramica e della pagina "Oggi" */
.tessere{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 28px; }
.tessere.quattro{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:760px){ .tessere.quattro{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .tessere{ grid-template-columns:1fr; } .tessere.quattro{ grid-template-columns:1fr 1fr; } }
.tessera{
  display:flex; flex-direction:column; gap:6px; padding:18px 18px 16px; border-radius:4px;
  border:1px solid var(--border-soft); background:var(--surface-soft); color:var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
a.tessera:hover{ border-color:var(--gold); transform:translateY(-2px); color:var(--ink); }
.tessera.oro{ border-left:3px solid var(--gold); }
.tessera.allerta{ border-left:3px solid var(--rosso); }
.tessera .etichetta{ font-family:"Cinzel", serif; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bandana); }
.tessera h3{ font-size:16px; }
.tessera p{ margin:0; color:var(--ink-muted); font-size:15px; line-height:1.4; }
.tessera .piede{ margin-top:auto; padding-top:8px; font-family:"Cinzel", serif; font-size:11.5px; letter-spacing:.06em; color:var(--gold); }
.tessera .numero-grande{ font-family:"Cinzel", serif; font-size:34px; line-height:1; color:var(--ink-strong); font-weight:700; }
.tessera .numero-grande small{ font-size:16px; color:var(--ink-muted); }
.azioni-rapide{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 20px; }
.azioni-rapide .bottone{ padding:14px 18px; font-size:13px; }
@media (max-width:600px){ .azioni-rapide{ grid-template-columns:1fr; } }

/* schede filtro (In arrivo / Passate, Da gestire / Confermate / Archivio) */
.filtri{ display:flex; gap:4px; flex-wrap:wrap; margin:0 0 16px; border-bottom:1px solid var(--border-soft); }
.filtri button{
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:9px 12px; cursor:pointer; color:var(--ink-muted);
  font-family:"Cinzel", serif; font-size:12px; letter-spacing:.07em; text-transform:uppercase;
}
.filtri button:hover{ color:var(--gold); }
.filtri button.on{ color:var(--gold); border-bottom-color:var(--gold); }
.filtri .n{ font:700 11px/1 system-ui, sans-serif; margin-left:5px; padding:3px 6px; border-radius:9px; background:var(--gold-tint); }
.barra-cerca{ margin:0 0 14px; }
.barra-cerca input{
  width:100%; padding:10px 12px; background:var(--campo-bg); color:var(--ink);
  border:1px solid var(--border); border-radius:4px; font:16px "EB Garamond", Georgia, serif;
}
.barra-cerca input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-tint); }

/* scheda cane */
.griglia-cani{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 22px; }
@media (max-width:600px){ .griglia-cani{ grid-template-columns:1fr; } }
.cane{ border:1px solid var(--border-soft); background:var(--surface-soft); border-radius:4px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.cane .testa{ display:flex; gap:12px; align-items:center; }
.cane .avatar{ width:46px; height:46px; border-radius:50%; background:var(--gold-tint); color:var(--gold); display:grid; place-items:center; font-family:"Cinzel", serif; font-size:19px; font-weight:700; flex:none; }
.cane h3{ font-size:17px; }
.cane .sotto{ color:var(--ink-muted); font-size:15px; line-height:1.3; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ font-size:13px; padding:2px 10px; border-radius:20px; border:1px solid var(--border-soft); color:var(--ink-muted); }
.chip.attenzione{ border-color:var(--rosso); color:var(--rosso-testo); }
.cane-nota{ font-size:14.5px; color:var(--ink-muted); border-top:1px dashed var(--border-soft); padding-top:9px; line-height:1.4; margin:0; }
.cane-nota b{ color:var(--ink); font-weight:600; }
.cane .card-azioni{ margin-top:auto; }

/* scheda prenotazione (cliente e staff) */
.pren{
  border:1px solid var(--border-soft); border-left:3px solid var(--gold);
  background:var(--surface-soft); border-radius:4px; padding:16px 18px; margin:0 0 12px;
}
.pren.conf{ border-left-color:var(--verde-light); }
.pren.rossa{ border-left-color:var(--rosso); }
.pren.spenta{ border-left-color:var(--border); }
.pren.spenta > *{ opacity:.8; }
.pren .alto{ display:flex; justify-content:space-between; gap:8px 12px; align-items:flex-start; flex-wrap:wrap; }
.pren h3{ font-family:"Cinzel", serif; font-size:15.5px; margin:0; color:var(--ink-strong); }
.pren h3 .badge-stato{ margin-right:6px; vertical-align:2px; }
.pren .quando{ color:var(--ink); font-size:16px; margin-top:2px; }
.pren .quando small{ color:var(--ink-muted); font-size:14.5px; }
.pren .riga-info{ color:var(--ink-muted); font-size:15px; margin:2px 0 0; }
.pren .riga-info a{ color:var(--gold); }
.pren .avviso{ margin:12px 0 0; font-size:14.5px; padding:9px 12px; }
.pren .riga-bottoni, .pren .card-azioni{ margin-top:12px; }
.pren .card-azioni{ flex-wrap:wrap; }
.conti{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; margin:12px 0 0;
  background:var(--border-soft); border:1px solid var(--border-soft); border-radius:4px; overflow:hidden;
}
.conti div{ background:var(--campo-bg); padding:8px 12px; min-width:0; }
.conti small{ display:block; font-family:"Cinzel", serif; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--bandana); }
.conti b{ font-size:16px; color:var(--ink-strong); font-weight:600; }
.conti em{ display:block; font-size:13px; color:var(--ink-muted); }
.conti em.ok{ color:var(--verde-light); }
.conti em.no{ color:var(--rosso-testo-muto); }
@media (max-width:480px){ .conti div{ padding:7px 9px; } .conti b{ font-size:15px; } }
.scelta-cani{ display:grid; gap:8px; margin:12px 0 0; padding:12px 14px; border:1px dashed var(--border); border-radius:4px; }
.scelta-cani .etichetta{ font-family:"Cinzel", serif; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--bandana); }

/* staff: elenchi, iscritti, posti */
.elenco{ list-style:none; margin:0; padding:0; }
.elenco li{ display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.elenco li:last-child{ border-bottom:0; }
.elenco .quando-breve{ font-family:"Cinzel", serif; font-size:11.5px; color:var(--bandana); letter-spacing:.06em; width:112px; flex:none; text-transform:uppercase; }
.elenco .cosa{ flex:1; min-width:0; }
.elenco .cosa small{ display:block; color:var(--ink-muted); font-size:14px; }
.elenco a.tel{ color:var(--gold); font-size:14.5px; white-space:nowrap; }
@media (max-width:480px){ .elenco li{ flex-wrap:wrap; } .elenco .quando-breve{ width:auto; flex-basis:100%; } }
.barra-posti{ height:6px; background:var(--border-soft); border-radius:3px; overflow:hidden; margin-top:8px; max-width:220px; }
.barra-posti i{ display:block; height:100%; background:var(--gold); }
.iscritti{ margin:12px 0 0; border-top:1px dashed var(--border-soft); padding-top:10px; }
.iscritti summary{ cursor:pointer; color:var(--gold); font-family:"Cinzel", serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.iscritti ul{ list-style:none; padding:0; margin:8px 0 0; }
.iscritti li{ display:flex; justify-content:space-between; gap:4px 10px; padding:6px 0; font-size:15px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.iscritti li:last-child{ border-bottom:0; }
.iscritti li span{ color:var(--ink-muted); }
.cliente-trovato{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px 14px; margin:0 0 16px;
  border:1px solid var(--gold); background:var(--gold-tint-soft); border-radius:4px;
}
.cliente-trovato div{ flex:1; min-width:180px; }
.cliente-trovato b{ font-family:"Cinzel", serif; font-size:14px; color:var(--ink-strong); }
.cliente-trovato small{ display:block; color:var(--ink-muted); font-size:14.5px; }
.riepilogo-staff{ padding:12px 14px; border:1px dashed var(--border); border-radius:4px; font-size:15.5px; color:var(--ink-muted); margin:4px 0 0; }
.riepilogo-staff:empty{ display:none; }
.riepilogo-staff b{ color:var(--ink-strong); }
.spunte{ display:grid; gap:8px; margin:0 0 14px; }

/* admin: tabella utenti (su telefono diventa una lista) */
.tabella{ width:100%; border-collapse:collapse; font-size:15.5px; }
.tabella th{ text-align:left; font-family:"Cinzel", serif; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bandana); padding:8px 10px; border-bottom:1px solid var(--border); }
.tabella td{ padding:10px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.tabella td small{ display:block; color:var(--ink-muted); font-size:13.5px; }
.tabella select{ padding:6px 8px; background:var(--campo-bg); color:var(--ink); border:1px solid var(--border); border-radius:4px; font:16px "EB Garamond", Georgia, serif; width:auto; }
@media (max-width:600px){
  .tabella thead{ display:none; }
  .tabella tr{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
  .tabella td{ border:0; padding:0; min-width:0; overflow-wrap:anywhere; }
  .tabella td:nth-child(3){ grid-row:1 / span 2; grid-column:2; align-self:center; }
}

/* pagina di accesso: colonna stretta */
.accesso{ max-width:480px; margin:0 auto; }

/* registrazione: i passi che seguono la creazione dell'account */
.passi-iniziali{ margin:18px 0 10px; padding:14px 18px 14px 36px; border:1px dashed var(--border); border-radius:4px; color:var(--ink-muted); font-size:15.5px; line-height:1.45; }
.passi-iniziali li{ margin:0 0 6px; }
.passi-iniziali li:last-child{ margin:0; }
.passi-iniziali b{ color:var(--ink); font-weight:600; }
.nota-registrazione{ font-style:italic; color:var(--ink-muted); font-size:15px; margin:0; }

/* panoramica: checklist "primi passi" del nuovo cliente */
.primi-passi{ border-left-color:var(--gold); background:var(--gold-tint-soft); }
.checklist{ list-style:none; margin:0 0 16px; padding:0; }
.checklist li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.checklist li:last-child{ border-bottom:0; }
.checklist .segno{
  width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  border:1px solid var(--border); color:var(--ink-muted); font:700 13px/1 system-ui, sans-serif;
}
.checklist li.fatto .segno{ background:var(--verde-light); border-color:var(--verde-light); color:var(--on-accent); }
.checklist li.ora .segno{ background:var(--gold); border-color:var(--gold); color:var(--on-accent); }
.checklist li > div{ flex:1; min-width:0; }
.checklist b{ display:block; font-family:"Cinzel", serif; font-size:13.5px; letter-spacing:.04em; color:var(--ink-strong); }
.checklist li.fatto b{ color:var(--ink-muted); }
.checklist small{ display:block; color:var(--ink-muted); font-size:14.5px; }
.checklist li > a{ font-family:"Cinzel", serif; font-size:12px; letter-spacing:.06em; white-space:nowrap; }
.checklist li.dopo{ opacity:.7; }