/* ==========================================================================
   LAVACITY — foglio di stile unico
   Palette verificata WCAG 2.1 AA:
     testo blu   #1261A0 su bianco ....... 6,5:1
     testo grigio#5A6672 su bianco ....... 5,9:1
     testo scuro #0E3D6B su oro #EFBB5F .. 6,3:1   (il vecchio bianco su oro era 1,76:1)
   ========================================================================== */

:root {
  --blu:        #1261a0;
  --blu-scuro:  #0e4f86;
  --blu-notte:  #0e3d6b;
  --oro:        #efbb5f;
  --oro-scuro:  #d9a23f;
  --oro-testo:  #8a5f10;

  --ink:        #10202e;
  --testo:      #5a6672;
  --tenue:      #616d7a;   /* 5,3:1 su bianco — 4,9:1 sul grigio chiaro */
  --linea:      #e3eaf0;
  --sfondo:     #f4f7fa;
  --bianco:     #ffffff;

  --ok:         #1a7f4b;
  --ok-bg:      #e9f5ee;
  --err:        #b3261e;
  --err-bg:     #fbeceb;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ombra:    0 1px 2px rgba(16,32,46,.06), 0 4px 12px rgba(16,32,46,.06);
  --ombra-lg: 0 4px 12px rgba(16,32,46,.08), 0 16px 40px rgba(16,32,46,.10);
  --raggio: 14px;
  --max: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--testo);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
a  { color: var(--blu); }

:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 2px;
  border-radius: 4px;
}

.contenitore { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.stretto { max-width: 760px; margin-inline: auto; }
.centro { text-align: center; }

.salta-al-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blu); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.salta-al-contenuto:focus { left: 0; }

/* ---------- intestazione ---------- */
.testata {
  position: sticky; top: 0; z-index: 100;
  background: var(--blu);
  box-shadow: 0 1px 0 rgba(255,255,255,.12);
}
.testata-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
/* flex-shrink: 0 -- con nove voci di menu il logo veniva compresso e il
   testo "LAVACITY" finiva sotto la prima voce. Il marchio non si schiaccia. */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none;
        margin-right: auto; flex: 0 0 auto; }
.logo img { height: 42px; width: auto; }
.logo-testo { color: #fff; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1; }
.logo-payoff { display: block; font-size: .68rem; font-weight: 600; opacity: .9; letter-spacing: .01em; margin-top: 2px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem;
  padding: 9px 13px; border-radius: 8px; white-space: nowrap;
}
.nav a:hover { background: rgba(255,255,255,.14); }
.nav a[aria-current="page"] { background: var(--oro); color: var(--blu-notte); }

.testata-azioni { display: flex; align-items: center; gap: 10px; }
.tel-testata {
  color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem;
  padding: 9px 13px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.45);
  white-space: nowrap;
}
.tel-testata:hover { background: rgba(255,255,255,.14); }

.hamburger {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
  color: #fff; border-radius: 8px;
}
.hamburger svg { display: block; }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2;
  padding: 15px 26px; border-radius: 10px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primario   { background: var(--oro); color: var(--blu-notte); box-shadow: var(--ombra); }
.btn-primario:hover  { background: var(--oro-scuro); }
.btn-secondario { background: var(--blu); color: #fff; }
.btn-secondario:hover { background: var(--blu-scuro); }
.btn-fantasma   { background: transparent; color: var(--blu); border-color: var(--linea); }
.btn-fantasma:hover { border-color: var(--blu); background: var(--sfondo); }
.btn-chiaro     { background: #fff; color: var(--blu-notte); }
.btn-chiaro:hover { background: #f0f4f8; }
.btn-lg { padding: 17px 32px; font-size: 1.06rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-blocco { width: 100%; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(180deg, #eef3f8 0%, #ffffff 100%); padding: 56px 0 0; }
.hero-griglia { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 18px; }
h1 .accento { color: var(--blu); }
.hero-sottotitolo { font-size: 1.18rem; max-width: 34ch; margin-bottom: 26px; }
.hero-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero-figura { margin: 0; }
.hero-figura img { border-radius: var(--raggio); box-shadow: var(--ombra-lg); max-height: 440px; object-fit: cover; width: 100%; }

.strip-prezzi { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 4px; }
.strip-prezzi div { font-size: .92rem; }
.strip-prezzi b { display: block; color: var(--ink); font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; }

.nastro-offerta {
  background: var(--blu-notte); color: #fff; text-align: center;
  padding: 13px 20px; font-weight: 600; font-size: .97rem; margin-top: 48px;
}
.nastro-offerta b { color: var(--oro); }

/* ---------- sezioni ---------- */
.sezione { padding: 68px 0; }
.sezione-alt { background: var(--sfondo); }
.sezione-intestazione { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.sezione-intestazione p { font-size: 1.06rem; margin: 0; }
.occhiello {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blu); margin-bottom: 10px;
}

/* ---------- card servizi ---------- */
.griglia-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--ombra-lg); }
.card-figura { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sfondo); }
.card-figura img { width: 100%; height: 100%; object-fit: cover; }
.card-corpo { padding: 22px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.card-corpo h3 { margin-bottom: 2px; }
.card-occhiello { font-size: .8rem; font-weight: 700; color: var(--blu); }
.card-corpo p { margin: 0; font-size: .95rem; }
.card-prezzo { font-weight: 800; color: var(--ink); font-size: 1.1rem; margin-top: 6px; }
.card-prezzo span { font-weight: 600; color: var(--tenue); font-size: .85rem; }
.card-azione { margin-top: auto; padding-top: 16px; }

/* ---------- vantaggi ---------- */
.griglia-vantaggi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.vantaggio { text-align: center; }
.vantaggio-icona {
  width: 54px; height: 54px; border-radius: 50%; background: var(--blu);
  display: grid; place-items: center; margin: 0 auto 14px; color: #fff;
}
.vantaggio h3 { font-size: 1.05rem; margin-bottom: 4px; }
.vantaggio p { font-size: .93rem; margin: 0; }

/* ---------- come funziona ---------- */
.passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; counter-reset: passo; }
.passo { counter-increment: passo; position: relative; padding-top: 46px; }
.passo::before {
  content: counter(passo);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--oro); color: var(--blu-notte);
  font-weight: 800; font-size: .95rem; display: grid; place-items: center;
}
.passo h3 { font-size: 1.03rem; margin-bottom: 4px; }
.passo p { font-size: .93rem; margin: 0; }

/* ---------- listino ---------- */
.listino { border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; background: #fff; }
.listino-titolo {
  background: var(--sfondo); padding: 14px 20px; font-weight: 800; color: var(--ink);
  border-bottom: 1px solid var(--linea); font-size: 1.02rem;
}
.listino-riga {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 20px; border-bottom: 1px solid var(--linea);
}
.listino-riga:last-child { border-bottom: 0; }
.listino-riga b { color: var(--ink); font-weight: 700; }
.listino-riga small { display: block; font-weight: 400; color: var(--tenue); font-size: .86rem; }
.listino-prezzo { font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* il prezzo con la fidelity, sotto quello pieno: stessa lingua della tabella
   del self-service, cosi' chi arriva dalla home riconosce i due numeri. */
.listino-prezzo small {
  display: block; text-align: right; margin-top: 2px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--blu); opacity: .9;
}

.griglia-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }

/* ---------- pacchetti ---------- */
.pacchetti { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.pacchetto {
  border: 2px solid var(--linea); border-radius: var(--raggio); padding: 24px;
  background: #fff; display: flex; flex-direction: column; position: relative;
}
.pacchetto.evidenza { border-color: var(--oro); }
.badge-evidenza {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--oro); color: var(--blu-notte); font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px;
  white-space: nowrap;
}
.pacchetto h3 { margin-bottom: 2px; }
.pacchetto .contenuto { font-size: .88rem; color: var(--tenue); margin-bottom: 12px; }
.pacchetto .prezzo { font-size: 2rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.pacchetto .prezzo small { font-size: .8rem; font-weight: 600; color: var(--tenue); letter-spacing: 0; }
/* il prezzo dei pacchetti arriva dal database gia' col simbolo dell'euro,
   quindi il <small>€</small> a parte e' stato tolto: senza, ne uscivano due */
.pacchetto p { font-size: .92rem; margin: 10px 0 0; }
.pacchetto .btn { margin-top: auto; }
.pacchetto ul { margin: 14px 0 0; padding-left: 0; list-style: none; font-size: .92rem; }
.pacchetto li { padding-left: 24px; position: relative; margin-bottom: 6px; }
.pacchetto li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--ok); font-weight: 800;
}

/* ---------- recensioni ---------- */
.recensioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.recensione { background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); padding: 24px; }
.stelle { color: var(--oro-testo); letter-spacing: 2px; font-size: 1.05rem; margin-bottom: 10px; }
.recensione blockquote { margin: 0 0 14px; font-size: .97rem; color: var(--ink); }
.recensione figcaption { font-size: .87rem; color: var(--tenue); font-weight: 600; }

/* ---------- faq ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--linea); padding: 4px 0;
}
.faq summary {
  cursor: pointer; padding: 16px 30px 16px 0; font-weight: 700; color: var(--ink);
  list-style: none; position: relative; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--blu); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 16px; margin: 0; font-size: .96rem; }

/* ---------- avvisi ---------- */
.avviso {
  border-left: 4px solid var(--blu); background: var(--sfondo);
  padding: 16px 20px; border-radius: 0 10px 10px 0; font-size: .95rem;
}
.avviso.ok  { border-color: var(--ok);  background: var(--ok-bg); }
.avviso.err { border-color: var(--err); background: var(--err-bg); color: #7c1a15; }
.avviso strong { color: var(--ink); }
.avviso.err strong { color: #7c1a15; }

/* ---------- fascia CTA ---------- */
.fascia-cta { background: var(--blu); color: #fff; padding: 60px 0; text-align: center; }
.fascia-cta h2 { color: #fff; }
.fascia-cta p { color: rgba(255,255,255,.9); font-size: 1.08rem; max-width: 52ch; margin: 0 auto 26px; }
.fascia-cta-azioni { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- piè di pagina ---------- */
.pie { background: var(--ink); color: #b9c4ce; padding: 52px 0 24px; font-size: .93rem; }
.pie-griglia { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 34px; }
.pie h2, .pie h3 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 8px; }
.pie a { color: #b9c4ce; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
/* width: auto e' obbligatorio: senza, la larghezza resta quella dichiarata
   nell'attributo HTML e il simbolo -- che nel file e' quasi quadrato,
   694x599 -- veniva stirato in orizzontale due volte e mezzo. */
.pie-logo img { height: 56px; width: auto; margin-bottom: 12px; }
.pie address { font-style: normal; }
.pie-basso {
  border-top: 1px solid #253544; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .85rem; color: #8494a2;
}
.pie-regione { display: flex; align-items: center; gap: 12px; }
.pie-regione img { height: 34px; background: #fff; padding: 4px 6px; border-radius: 4px; }

/* ---------- barra mobile fissa ---------- */
.barra-mobile {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--linea);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 10px; box-shadow: 0 -4px 16px rgba(16,32,46,.10);
}
.barra-mobile .btn { flex: 1; padding: 13px 10px; font-size: .95rem; }

/* ==================================================== banner consenso =====
   UNA STRISCIA BASSA, NON UNA SCHERMATA.
   Sul sito precedente il banner copriva tutto il telefono: la prima cosa che
   vedeva chi arrivava da un annuncio a pagamento era una parete bianca da
   scavalcare, non il prezzo. Qui la striscia occupa il minimo indispensabile,
   il contenuto resta visibile dietro, e le due scelte hanno lo stesso peso
   perche' spingere l'accettazione, oltre che sleale, e' contestato dalle
   autorita' europee.
   ========================================================================== */

.consenso {
  position: fixed; inset: auto 0 0 0; z-index: 300; max-width: none;
  background: #fff; border-top: 1px solid var(--linea); border-radius: 0;
  box-shadow: 0 -6px 24px rgba(16,32,46,.14);
  padding: 12px 20px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px;
}
.consenso[hidden] { display: none; }
.consenso h2 { font-size: .95rem; margin: 0; flex: 0 0 auto; }
.consenso p  { font-size: .88rem; line-height: 1.45; margin: 0; flex: 1 1 320px; }
.consenso-azioni { display: flex; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.consenso-azioni .btn { padding: 10px 18px; font-size: .92rem; white-space: nowrap; }

/* ================================================ invito a installare =====
   LA FASCETTA CHE DICE «PUOI TENERCI SUL TELEFONO».

   Non e' un banner da schermata intera e non e' una finestra che blocca: e'
   una scheda bassa, che lascia leggere quello che c'e' dietro. Chi arriva qui
   vuole sapere quanto costa, non aggiungere un'icona: se l'invito copre il
   prezzo, ha gia' fatto danno.

   Sta sopra la barra mobile dei pulsanti (76px) per non coprirla, e sotto la
   striscia dei cookie come importanza: le due non compaiono mai insieme, ci
   pensa il codice in site.js.
   ========================================================================== */

.invito-app {
  position: fixed; z-index: 280;
  left: 12px; right: 12px; bottom: 12px;
  max-width: 520px; margin-left: auto; margin-right: auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--bianco);
  border: 1px solid var(--linea); border-radius: var(--raggio);
  box-shadow: var(--ombra-lg);
  transform: translateY(140%);
  transition: transform .25s ease;
}
.invito-app.visibile { transform: translateY(0); }

.invito-app-icona {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 11px; box-shadow: var(--ombra);
}
.invito-app-testo { flex: 1 1 200px; min-width: 0; }
/* il titolo, non il «Condividi» dentro la frase: da qui il figlio diretto */
.invito-app-testo > strong {
  display: block; color: var(--ink); font-size: .96rem; line-height: 1.25;
}
.invito-app-testo span strong { color: var(--ink); font-weight: 700; }
.invito-app-testo span {
  display: block; margin-top: 3px;
  font-size: .85rem; line-height: 1.4; color: var(--tenue);
}
.invito-app-azioni { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.invito-app-azioni .btn { padding: 9px 15px; font-size: .88rem; white-space: nowrap; }

@media (max-width: 860px) {
  /* Sopra la barra dei pulsanti, dove c'e'. Non tutte le pagine ce
     l'hanno ("Segui il tuo ordine", per esempio, non ce l'ha): li'
     l'invito starebbe sospeso a meta' con un vuoto sotto, e la classe
     non viene messa. */
  .invito-app.sopra-barra { bottom: calc(76px + 10px); }
}

@media (max-width: 560px) {
  /* i due pulsanti vanno su una riga tutta loro: schiacciati accanto al testo
     diventavano due bersagli troppo stretti per un dito. */
  .invito-app-azioni { width: 100%; margin-left: 0; }
  .invito-app-azioni .btn { flex: 1; }
}

/* ==========================================================================
   PRENOTAZIONE
   ========================================================================== */
.prenota-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }

.passi-indicatore { display: flex; gap: 8px; margin-bottom: 30px; }
.passi-indicatore li { flex: 1; list-style: none; }
.passi-indicatore .barra { height: 5px; border-radius: 3px; background: var(--linea); margin-bottom: 8px; }
.passi-indicatore .etichetta { font-size: .78rem; font-weight: 700; color: var(--tenue); }
.passi-indicatore li[data-stato="attivo"] .barra   { background: var(--blu); }
.passi-indicatore li[data-stato="attivo"] .etichetta { color: var(--blu); }
.passi-indicatore li[data-stato="fatto"] .barra    { background: var(--ok); }
.passi-indicatore li[data-stato="fatto"] .etichetta { color: var(--ok); }

.pannello { display: none; }
.pannello.attivo { display: block; }
.pannello > h2 { font-size: 1.5rem; margin-bottom: 6px; }
.pannello > .intro { margin-bottom: 24px; }

.gruppo-articoli { border: 1px solid var(--linea); border-radius: var(--raggio); margin-bottom: 18px; overflow: hidden; }
.gruppo-testa { background: var(--sfondo); padding: 15px 20px; border-bottom: 1px solid var(--linea); }
.gruppo-testa h3 { margin: 0; }
.gruppo-testa p { margin: 3px 0 0; font-size: .88rem; }

.articolo {
  display: flex; align-items: center; gap: 16px; padding: 14px 20px;
  border-bottom: 1px solid var(--linea);
}
.articolo:last-child { border-bottom: 0; }
.articolo-info { flex: 1; min-width: 0; }
.articolo-info .nome { font-weight: 700; color: var(--ink); display: block; }
.articolo-info .dett { font-size: .86rem; color: var(--tenue); }
.articolo-prezzo { font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: 38px; height: 38px; border-radius: 9px; border: 1.5px solid var(--linea);
  background: #fff; color: var(--blu); font-size: 1.25rem; font-weight: 700;
  cursor: pointer; line-height: 1; display: grid; place-items: center; font-family: inherit;
}
.stepper button:hover:not([disabled]) { border-color: var(--blu); background: var(--sfondo); }
.stepper button[disabled] { opacity: .35; cursor: not-allowed; }
.stepper input {
  width: 52px; height: 38px; text-align: center; font-size: 1rem; font-weight: 700;
  border: 1.5px solid var(--linea); border-radius: 9px; font-family: inherit; color: var(--ink);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* campi */
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 700; color: var(--ink); font-size: .93rem; margin-bottom: 6px; }
.campo .aiuto { font-weight: 400; color: var(--tenue); font-size: .86rem; display: block; margin-top: 2px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 15px; font-family: inherit; font-size: 1rem;
  border: 1.5px solid var(--linea); border-radius: 10px; background: #fff; color: var(--ink);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--blu); }
.campo textarea { resize: vertical; min-height: 92px; }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--err); }
.errore-campo { color: var(--err); font-size: .86rem; font-weight: 600; margin-top: 5px; display: none; }
.errore-campo:not(:empty) { display: block; }
.campi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Due campi affiancati hanno etichette di lunghezza diversa: se una frase di
   aiuto va a capo e l'altra no, i due riquadri finiscono sfalsati di una riga
   e la pagina sembra storta.

   La soluzione e' far condividere ai due campi le stesse righe della griglia
   (subgrid): l'etichetta sta nella prima riga, il riquadro nella seconda,
   l'eventuale errore nella terza. Cosi' restano allineati sempre -- anche
   quando un aiuto va a capo, e anche quando sotto a uno solo dei due compare
   un messaggio di errore.

   Dove subgrid non c'e' (browser vecchi) non succede niente: i campi tornano
   uno sotto l'altro come prima, che e' brutto ma non rotto. */
@supports (grid-template-rows: subgrid) {
  .campi-2 { grid-template-rows: auto auto auto; }
  .campi-2 .campo {
    display: grid; grid-template-rows: subgrid; grid-row: span 3;
  }
}

/* scelta consegna */
.scelte { display: grid; gap: 12px; }
.scelta {
  display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px;
  border: 2px solid var(--linea); border-radius: 12px; cursor: pointer; background: #fff;
}
.scelta:hover { border-color: #c6d4e0; }
.scelta input { margin: 3px 0 0; accent-color: var(--blu); width: 19px; height: 19px; flex-shrink: 0; }
.scelta:has(input:checked) { border-color: var(--blu); background: #f5f9fd; }
.scelta-testo { flex: 1; }
.scelta-testo .nome { font-weight: 700; color: var(--ink); display: block; }
.scelta-testo .dett { font-size: .87rem; color: var(--tenue); }
.scelta-prezzo { font-weight: 800; color: var(--ink); white-space: nowrap; }
.scelta-prezzo .barrato { text-decoration: line-through; color: var(--tenue); font-weight: 600; margin-right: 6px; }
.scelta-prezzo .gratis { color: var(--ok); }

.navigazione-passi { display: flex; gap: 12px; margin-top: 28px; }
.navigazione-passi .btn-avanti { margin-left: auto; }

/* riepilogo laterale */
.riepilogo {
  position: sticky; top: 92px;
  border: 1px solid var(--linea); border-radius: var(--raggio); background: #fff;
  box-shadow: var(--ombra); overflow: hidden;
}
.riepilogo-testa { background: var(--blu); color: #fff; padding: 16px 20px; }
.riepilogo-testa h2 { color: #fff; font-size: 1.05rem; margin: 0; }
.riepilogo-corpo { padding: 20px; }
.riepilogo-vuoto { color: var(--tenue); font-size: .92rem; margin: 0; }
.riepilogo-righe { list-style: none; margin: 0 0 14px; padding: 0; font-size: .92rem; }
.riepilogo-righe li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.riepilogo-righe .qta { color: var(--tenue); }
.riepilogo-righe .imp { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.riepilogo-righe li.gratuito .imp { color: var(--ok); }
.riepilogo-totale {
  border-top: 2px solid var(--linea); padding-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.riepilogo-totale .etichetta { font-weight: 800; color: var(--ink); }
.riepilogo-totale .valore { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.riepilogo-iva { font-size: .84rem; color: var(--tenue); text-align: right; margin: 2px 0 0; }

/* esito */
.esito { max-width: 620px; margin: 0 auto; text-align: center; padding: 40px 0; }
.esito-icona {
  width: 72px; height: 72px; border-radius: 50%; background: var(--ok-bg); color: var(--ok);
  display: grid; place-items: center; margin: 0 auto 22px;
}
.riquadro-riepilogo {
  text-align: left; border: 1px solid var(--linea); border-radius: var(--raggio);
  padding: 22px; margin: 26px 0; background: var(--sfondo);
}
.riquadro-riepilogo dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: .94rem; }
.riquadro-riepilogo dt { font-weight: 700; color: var(--ink); }
.riquadro-riepilogo dd { margin: 0; text-align: right; }

/* ---------- 404 ---------- */
.pagina-404 { text-align: center; padding: 90px 0; }
.pagina-404 .codice { font-size: 5rem; font-weight: 800; color: var(--oro-testo); line-height: 1; margin-bottom: 8px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .prenota-layout { grid-template-columns: 1fr; }
  .riepilogo { position: static; }
  .pie-griglia { grid-template-columns: 1fr 1fr; }
}

/* ============================================== la testata si chiude prima ==
   Le voci di menu sono otto e occupano 774 px. Con il logo (178) e il numero
   di telefono (131) servono 1083 px di contenuto: sotto i 1080 px non ci
   stanno piu', e il menu finiva sopra al logo.
   Da qui in giu' comanda il pulsante con le tre righe. Non e' una resa: un
   menu che entra a fatica si legge male anche quando entra.
   ========================================================================== */

@media (max-width: 1080px) {
  .hamburger { display: block; }
  .tel-testata { display: none; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--blu-scuro); flex-direction: column; align-items: stretch;
    padding: 10px; gap: 2px; box-shadow: var(--ombra-lg);
  }
  .nav.aperto { display: flex; }
  .nav a { padding: 14px 16px; font-size: 1rem; }
}

@media (max-width: 860px) {
  .hero-griglia { grid-template-columns: 1fr; gap: 30px; }
  .hero { padding-top: 36px; }
  .hero-figura { order: -1; }
  .hero-figura img { max-height: 260px; }
  .hero-sottotitolo { max-width: none; }

  .barra-mobile { display: flex; }
  body { padding-bottom: 76px; }
  .consenso { inset: auto 0 76px 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .sezione { padding: 46px 0; }
  .pie-griglia { grid-template-columns: 1fr; gap: 28px; }
  .campi-2 { grid-template-columns: 1fr; }

  /* Su telefono il nome del servizio va su una riga tutta sua: schiacciato
     accanto al selettore di quantità andava a capo a ogni parola. */
  .articolo { flex-wrap: wrap; row-gap: 12px; }
  .articolo-info { flex: 1 1 100%; }
  .articolo-prezzo { order: 2; font-size: 1.05rem; }
  .stepper { order: 3; margin-left: auto; }
  .strip-prezzi { gap: 10px 18px; }
}

@media print {
  .testata, .pie, .barra-mobile, .consenso, .invito-app, .navigazione-passi { display: none !important; }
  body { padding: 0; }
}

/* ==========================================================================
   CODICE SCONTO, ESITO ORDINE E TRACCIAMENTO
   ========================================================================== */

/* Mentre il listino arriva dal database la pagina resta visibile ma spenta:
   evita che i prezzi cambino sotto le dita di chi ha già iniziato a leggere. */
.prenota.in-caricamento .prenota-layout { opacity: .45; pointer-events: none; }
.prenota-layout { transition: opacity .18s ease; }

.blocco-codice {
  margin: 22px 0 6px;
  padding: 16px 18px;
  background: var(--sfondo);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
}
.blocco-codice > label {
  display: block;
  font-weight: 650;
  font-size: .95rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.riga-codice { display: flex; gap: 10px; flex-wrap: wrap; }
.riga-codice input {
  flex: 1 1 190px;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 10px;
}
.riga-codice input:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 1px;
  border-color: var(--blu);
}
.riga-codice .btn { flex: 0 0 auto; }

.esito-codice { margin: 10px 0 0; font-size: .92rem; min-height: 1.2em; }
.esito-codice.ok { color: var(--ok); font-weight: 600; }
.esito-codice.ko { color: var(--err); font-weight: 600; }

/* Il numero d'ordine: la cosa che il cliente deve portarsi via. */
.numero-ordine {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 6px 0 20px;
  padding: 14px 20px;
  background: var(--sfondo);
  border: 1.5px dashed var(--blu);
  border-radius: var(--raggio);
}
.numero-ordine-et {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tenue);
}
.numero-ordine-val {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--blu-notte);
  font-variant-numeric: tabular-nums;
}
.btn-copia {
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  padding: 7px 14px;
  color: var(--blu-notte);
  background: var(--bianco);
  border: 1.5px solid var(--blu);
  border-radius: 8px;
  cursor: pointer;
}
.btn-copia:hover { background: var(--blu); color: var(--bianco); }
.btn-copia:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }

/* ------------------------------------------------ pagina di tracciamento -- */

.traccia { padding: 46px 0 70px; }
.traccia-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 620px;
  margin: 26px 0 0;
}
.traccia-form .campo { flex: 1 1 200px; margin: 0; }

.scheda-ordine {
  margin-top: 34px;
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  overflow: hidden;
}
.scheda-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: var(--blu-notte);
  color: var(--bianco);
}
.scheda-testa h2 { margin: 0; font-size: 1.25rem; color: var(--bianco); letter-spacing: .03em; }
.scheda-corpo { padding: 24px; }

/* Pastiglia di stato. I colori sono scelti per restare leggibili: ogni
   combinazione supera 4,5:1 sul proprio sfondo. */
.pastiglia {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.pastiglia-nuovo          { background: #fdf0d5; color: #7a4f00; }
.pastiglia-confermato     { background: #dceafa; color: #0d4a80; }
.pastiglia-ritirato       { background: #dceafa; color: #0d4a80; }
.pastiglia-in_lavorazione { background: #e6e2f7; color: #4a3a8c; }
.pastiglia-pronto         { background: #e9f5ee; color: #14663c; }
.pastiglia-in_consegna    { background: #e9f5ee; color: #14663c; }
.pastiglia-consegnato     { background: #1a7f4b; color: #ffffff; }
.pastiglia-annullato      { background: #fbeceb; color: #98201a; }

/* Avanzamento dell'ordine */
.avanzamento { list-style: none; margin: 0 0 26px; padding: 0; }
.avanzamento li {
  position: relative;
  padding: 0 0 22px 34px;
  color: var(--tenue);
  font-size: .95rem;
}
.avanzamento li::before {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bianco);
  border: 2.5px solid var(--linea);
}
.avanzamento li::after {
  content: "";
  position: absolute;
  left: 9.5px; top: 20px; bottom: 0;
  width: 2.5px;
  background: var(--linea);
}
.avanzamento li:last-child { padding-bottom: 0; }
.avanzamento li:last-child::after { display: none; }
.avanzamento li.fatto { color: var(--ink); font-weight: 600; }
.avanzamento li.fatto::before { background: var(--ok); border-color: var(--ok); }
.avanzamento li.fatto::after  { background: var(--ok); }
.avanzamento li.corrente::before {
  background: var(--blu);
  border-color: var(--blu);
  box-shadow: 0 0 0 5px rgba(18,97,160,.16);
}
.avanzamento li.corrente { color: var(--blu-notte); font-weight: 700; }
.avanzamento .quando { display: block; font-size: .84rem; font-weight: 400; color: var(--tenue); }

@media (max-width: 560px) {
  .scheda-testa { padding: 16px 18px; }
  .scheda-corpo { padding: 18px; }
  .numero-ordine { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   DATI FISCALI E PAGINE LEGALI
   ========================================================================== */

.pie-legale {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem;
  color: rgba(255,255,255,.66);
}
.pie-legale.promemoria-dati {
  color: #ffd98a;
  border-top-color: rgba(255,217,138,.35);
}

/* Segnaposto non ancora compilato: evidente per te, discreto per gli altri */
[data-vuoto] {
  background: #fff3cd;
  color: #7a4f00;
  padding: 0 5px;
  border-radius: 4px;
  font-weight: 600;
}

.pagina-legale { padding: 42px 0 80px; }
.pagina-legale .contenuto-legale { max-width: 74ch; }
.pagina-legale h1 { margin-bottom: 6px; }
.pagina-legale .aggiornato {
  color: var(--tenue);
  font-size: .92rem;
  margin: 0 0 34px;
}
.pagina-legale h2 {
  margin: 40px 0 14px;
  font-size: 1.28rem;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
}
.pagina-legale h2:first-of-type { border-top: 0; padding-top: 0; }
.pagina-legale h3 { margin: 26px 0 10px; font-size: 1.05rem; }
.pagina-legale p, .pagina-legale li { line-height: 1.68; }
.pagina-legale ul, .pagina-legale ol { padding-left: 1.3em; }
.pagina-legale li { margin-bottom: 9px; }

.pagina-legale .tabella-dati {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 26px;
  font-size: .94rem;
}
.pagina-legale .tabella-dati th,
.pagina-legale .tabella-dati td {
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--linea);
  vertical-align: top;
}
.pagina-legale .tabella-dati th { background: var(--sfondo); font-size: .86rem; }

.indice-legale {
  background: var(--sfondo);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 20px 24px;
  margin-bottom: 38px;
}
.indice-legale h2 {
  margin: 0 0 12px !important;
  font-size: .84rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tenue);
  border: 0 !important;
  padding: 0 !important;
}
.indice-legale ol { margin: 0; }
.indice-legale li { margin-bottom: 6px; }

@media (max-width: 640px) {
  .pagina-legale .tabella-dati,
  .pagina-legale .tabella-dati tbody,
  .pagina-legale .tabella-dati tr,
  .pagina-legale .tabella-dati td { display: block; width: 100%; }
  .pagina-legale .tabella-dati thead { display: none; }
  .pagina-legale .tabella-dati tr {
    margin-bottom: 14px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    overflow: hidden;
  }
  .pagina-legale .tabella-dati td { border: 0; border-bottom: 1px solid var(--linea); }
  .pagina-legale .tabella-dati td:last-child { border-bottom: 0; }
  .pagina-legale .tabella-dati td::before {
    content: attr(data-etichetta);
    display: block;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tenue);
    margin-bottom: 3px;
  }
}

/* ==========================================================================
   DICHIARAZIONE SULL'AVVIO IMMEDIATO DEL SERVIZIO (art. 59 Cod. consumo)
   --------------------------------------------------------------------------
   Non è una riga di piccolo testo da scavalcare con lo sguardo: è la
   dichiarazione che fa decadere il diritto di ripensamento, quindi il cliente
   deve poterla leggere davvero prima di spuntarla.
   ========================================================================== */

.consenso-recesso {
  margin: 20px 0 18px;
  padding: 16px 18px;
  background: var(--sfondo);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
}
.consenso-recesso label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--testo);
}
.consenso-recesso input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--blu);
  cursor: pointer;
}
.consenso-recesso input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 2px;
}
.consenso-recesso label:hover { color: var(--ink); }
.consenso-recesso strong { color: var(--ink); }

/* quando manca la spunta, il riquadro si accende invece di lasciare
   l'errore da solo in fondo */
.consenso-recesso:has(.errore-campo:not(:empty)) {
  border-color: var(--err);
  background: var(--err-bg);
}
.consenso-recesso .errore-campo { margin: 10px 0 0 34px; }

/* ==========================================================================
   PRENOTAZIONE — scelta del giorno, indirizzo, controllo dei campi
   ========================================================================== */

.etichetta-gruppo {
  display: block; font-weight: 700; color: var(--ink);
  font-size: .93rem; margin-bottom: 8px;
}

/* ---------- giorno e fascia: pastiglie invece di menù a tendina ----------
   Su un telefono un <select> con venti date è un muro. Le pastiglie si
   scorrono con il pollice e fanno vedere subito quanti giorni ci sono. */

/* Senza min-width:0 una colonna di griglia si allarga fino a contenere
   tutte le pastiglie, e l'intera pagina finisce per scorrere di lato. */
.prenota-layout > * { min-width: 0; }

.scelte-giorno {
  display: flex; gap: 9px; overflow-x: auto; min-width: 0;
  padding: 3px 3px 12px; margin: 0 -3px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.scelte-giorno::-webkit-scrollbar { height: 6px; }
.scelte-giorno::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 3px; }

.scelte-giorno .chip-giorno {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 82px; padding: 12px 10px;
  background: var(--bianco); border: 1.5px solid var(--linea);
  border-radius: 12px; cursor: pointer; text-align: center;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.scelte-giorno .chip-giorno:hover { border-color: #c6d4e0; }
.scelte-giorno .chip-giorno input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-sopra { display: block; font-weight: 750; color: var(--ink); font-size: .9rem; line-height: 1.2; }
.chip-sotto { display: block; font-size: .82rem; color: var(--tenue); margin-top: 3px; }
.scelte-giorno .chip-giorno:has(input:checked) {
  border-color: var(--blu); background: #eef5fc; box-shadow: inset 0 0 0 1px var(--blu);
}
.scelte-giorno .chip-giorno:has(input:checked) .chip-sopra { color: var(--blu-notte); }
.scelte-giorno .chip-giorno:has(input:focus-visible) { outline: 3px solid var(--blu); outline-offset: 2px; }

.scelte-fascia { display: flex; flex-wrap: wrap; gap: 9px; }
.scelte-fascia .chip-fascia {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; min-height: 48px;
  font-weight: 650; color: var(--testo);
  background: var(--bianco); border: 1.5px solid var(--linea);
  border-radius: 999px; cursor: pointer;
}
.scelte-fascia .chip-fascia:hover { border-color: #c6d4e0; }
.scelte-fascia .chip-fascia input { position: absolute; opacity: 0; width: 0; height: 0; }
.scelte-fascia .chip-fascia:has(input:checked) {
  border-color: var(--blu); background: #eef5fc; color: var(--blu-notte);
}
.scelte-fascia .chip-fascia:has(input:focus-visible) { outline: 3px solid var(--blu); outline-offset: 2px; }

.nota-scelta { color: var(--tenue); font-size: .92rem; margin: 0; }

/* ---------- suggerimenti dell'indirizzo ---------- */

.campo { position: relative; }

.suggerimenti {
  list-style: none; margin: 4px 0 0; padding: 5px;
  position: absolute; left: 0; right: 0; z-index: 30;
  max-height: 290px; overflow-y: auto;
  background: var(--bianco); border: 1.5px solid var(--blu);
  border-radius: 12px; box-shadow: var(--ombra-lg);
}
.suggerimenti[hidden] { display: none; }
.suggerimenti li {
  padding: 11px 13px; border-radius: 8px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.suggerimenti li:hover,
.suggerimenti li.evidenziata { background: #eef5fc; }
.sug-nome { font-weight: 650; color: var(--ink); font-size: .96rem; }
.sug-dett { font-size: .82rem; color: var(--tenue); }

.fonte-dati { font-size: .76rem; color: var(--tenue); margin: 5px 0 0; }
.fonte-dati a { color: var(--tenue); }

/* ---------- esito della zona di copertura ---------- */

.nota-zona {
  margin: -4px 0 18px; padding: 12px 15px;
  border-radius: 10px; font-size: .91rem; line-height: 1.5;
  border: 1px solid var(--linea); background: var(--sfondo);
}
.nota-zona[hidden] { display: none; }
.nota-zona.dentro  { border-color: var(--ok);  background: var(--ok-bg);  color: #14663c; font-weight: 600; }
.nota-zona.confine { border-color: var(--oro); background: #fffaf0; color: var(--oro-testo); }
.nota-zona.fuori   { border-color: var(--oro); background: #fffaf0; color: var(--oro-testo); }

/* ---------- stato dei campi ---------- */

/* La spunta verde è una conferma silenziosa: dice "questo è a posto" senza
   occupare spazio né chiedere attenzione. */
.campo.convalidato input:not([type="checkbox"]) {
  border-color: #9ccdb0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}
.campo.in-errore input,
.campo.in-errore textarea { border-color: var(--err); background: #fffbfb; }

/* ---------- fattura alla ditta ---------- */

.blocco-azienda {
  margin: 4px 0 20px; padding: 0 18px;
  border: 1px solid var(--linea); border-radius: var(--raggio);
  background: var(--sfondo);
}
.blocco-azienda > summary {
  padding: 15px 0; cursor: pointer; font-weight: 650;
  color: var(--blu); font-size: .95rem; list-style: none;
}
.blocco-azienda > summary::-webkit-details-marker { display: none; }
.blocco-azienda > summary::before {
  content: "+"; display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-right: 9px;
  border: 1.5px solid var(--blu); border-radius: 50%;
  font-size: .9rem; line-height: 1;
}
.blocco-azienda[open] > summary::before { content: "−"; }
.blocco-azienda > summary:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.blocco-azienda[open] > summary { border-bottom: 1px solid var(--linea); margin-bottom: 18px; }
.blocco-azienda .campo:last-of-type { margin-bottom: 18px; }

@media (max-width: 560px) {
  .scelte-giorno .chip-giorno { min-width: 74px; padding: 11px 8px; }
  .blocco-azienda { padding: 0 14px; }
}

/* ==========================================================================
   PAGINA DOMICILIO — elementi che aiutano a decidere
   ========================================================================== */

/* Le tre rassicurazioni sotto il pulsante principale: rispondono alle
   obiezioni che fermano chi sta per prenotare, prima che se le faccia. */
.rassicurazioni {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.rassicurazioni li {
  position: relative; padding-left: 26px;
  font-size: .95rem; color: var(--testo);
}
.rassicurazioni li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 16px; height: 16px;
  background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f4b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 7'/%3E%3C/svg%3E");
}

/* Fatti verificabili, non slogan */
.garanzie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 18px; margin-top: 42px;
  padding-top: 34px; border-top: 1px solid var(--linea);
}
.garanzia h3 { font-size: .99rem; margin-bottom: 5px; }
.garanzia p  { font-size: .91rem; margin: 0; }

/* ==========================================================================
   FLUSSO DI PRENOTAZIONE — barra del totale su telefono
   --------------------------------------------------------------------------
   Su schermo grande il riepilogo sta nella colonna a destra ed è sempre
   sott'occhio. Su telefono finisce in fondo alla pagina, dove nessuno lo
   vede: chi sceglie i servizi non sa quanto sta spendendo. Questa barra
   rimette il totale e il pulsante davanti agli occhi.
   ========================================================================== */

.barra-totale { display: none; }

@media (max-width: 980px) {
  .barra-totale {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; gap: 14px;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: var(--bianco);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -4px 20px rgba(16, 32, 46, .10);
    transform: translateY(110%);
    transition: transform .22s ease;
  }
  .barra-totale.visibile { transform: translateY(0); }
  .barra-totale[hidden] { display: none; }

  .barra-totale .bt-cifre { flex: 1; min-width: 0; line-height: 1.25; }
  .barra-totale .bt-et {
    display: block; font-size: .74rem; text-transform: uppercase;
    letter-spacing: .07em; color: var(--tenue);
  }
  .barra-totale .bt-val {
    display: block; font-size: 1.3rem; font-weight: 800; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  }
  .barra-totale .bt-pezzi { font-size: .78rem; color: var(--tenue); }
  .barra-totale .btn { flex: 0 0 auto; padding: 13px 22px; }

  /* La barra fissa in fondo prende il posto di quella del sito */
  body.con-barra-totale .barra-mobile { display: none; }
  body.con-barra-totale { padding-bottom: 88px; }
}

/* Rassicurazioni sotto il pulsante di conferma: l'ultimo momento in cui
   qualcuno può ripensarci. */
.rassicurazioni-finali {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: .87rem; color: var(--tenue);
}
.rassicurazioni-finali li { position: relative; padding-left: 20px; }
.rassicurazioni-finali li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 13px; height: 13px;
  background: no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f4b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 7'/%3E%3C/svg%3E");
}


/* ==========================================================================
   COMPONENTI CONDIVISI FRA PIU' PAGINE
   Aggiunti dopo, con nomi nuovi: non cambiano l'aspetto di niente che esisteva
   gia'. Li usano la home e la pagina "chi siamo".
   ========================================================================== */

/* ------------------------------------------------- i tre fatti secchi --- */

/* Tempo, orari, indirizzo. Sono risposte, non slogan: numeri grandi e una
   riga di spiegazione. */
.fatti {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.fatto {
  padding: 26px 24px; background: var(--bianco);
  border: 1px solid var(--linea); border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.fatto b {
  display: block; font-size: 1.75rem; line-height: 1.1;
  color: var(--ink); letter-spacing: -.02em; margin-bottom: 6px;
}
.fatto strong {
  display: block; font-size: 1rem; color: var(--ink); margin-bottom: 4px;
}
.fatto p { margin: 0; font-size: .96rem; color: var(--testo); }

/* --------------------------------------------------- foto che mancano --- */

/* Segnaposto grigio al posto di una foto che non abbiamo ancora. Dice quale
   foto serve, cosi' non ci si dimentica e non si e' tentati di rimediare con
   una foto di repertorio. */
.foto-manca {
  /* align-content: center tiene le due righe unite al centro. Con il solo
     place-items la griglia le distribuiva sull'altezza del riquadro, e su un
     segnaposto alto sembravano due cose separate. */
  display: grid; place-items: center; align-content: center; gap: 6px;
  text-align: center;
  min-height: 220px; padding: 28px 22px;
  background: repeating-linear-gradient(45deg, #eef2f6 0 12px, #e7edf3 12px 24px);
  border: 2px dashed #c8d4e0; border-radius: var(--raggio);
  color: var(--tenue);
}
.foto-manca b {
  display: block; font-size: .74rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: #8b9aa8; margin-bottom: 8px;
}
.foto-manca span { font-size: .98rem; line-height: 1.45; max-width: 34ch; }


/* ------------------------------------------------------ il racconto ----- */

/* Serve alla pagina "chi siamo". E' un testo che si legge, non si scorre:
   riga corta, corpo grande, respiro fra i paragrafi. La misura sotto i 66
   caratteri non e' un vezzo, e' la larghezza oltre la quale l'occhio fatica
   a ritrovare l'inizio della riga dopo. */
.racconto { max-width: 62ch; }
.racconto p {
  font-size: 1.14rem; line-height: 1.72; color: var(--ink);
  margin-bottom: 22px;
}
.racconto p:last-child { margin-bottom: 0; }
.racconto .apertura { font-size: 1.3rem; line-height: 1.62; }
.racconto strong { font-weight: 700; }
/* l'ultima riga del racconto e' una firma, non un paragrafo: sta staccata
   e piu' grande, cosi' la pagina finisce con una frase e non con un punto. */
.racconto .chiusura {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--linea);
  font-size: 1.34rem; font-weight: 700; line-height: 1.45;
  color: var(--blu);
}

@media (max-width: 560px) {
  .racconto p { font-size: 1.06rem; line-height: 1.66; }
  .racconto .apertura { font-size: 1.16rem; }
}

/* -------------------------------------------------------------- mappa --- */

/* La mappa NON si carica da sola. Un riquadro di Google Maps incorporato
   scarica script e cookie di Google appena apri la pagina, e questo sito
   promette che non succede niente prima che tu abbia scelto. Quindi mostro
   un segnaposto e la carico solo se la si chiede. Le indicazioni stradali,
   che sono la cosa che serve davvero, funzionano comunque senza caricare
   niente. */
.mappa {
  position: relative; overflow: hidden;
  border-radius: var(--raggio); border: 1px solid var(--linea);
  background: var(--sfondo); min-height: 300px;
}
.mappa iframe { display: block; width: 100%; height: 380px; border: 0; }
.mappa-invito {
  display: grid; place-items: center; gap: 14px; text-align: center;
  min-height: 300px; padding: 32px 24px;
}
.mappa-invito p { margin: 0; max-width: 46ch; color: var(--testo); font-size: .96rem; }

/* Le due colonne devono finire alla stessa altezza: con "start" la mappa
   restava alta per conto suo e la scheda dei contatti sembrava mozzata.
   Con "stretch" la mappa si allunga fino alla scheda, ed e' anche quello che
   il commento piu' sotto diceva di voler fare. */
.dove {
  display: grid; gap: 22px;
  grid-template-columns: minmax(260px, 360px) 1fr;
  align-items: stretch;
}
/* Sul telefono una colonna da 260 px piu' la mappa non ci stanno: si impilano. */
@media (max-width: 860px) {
  .dove { grid-template-columns: 1fr; }
}
.dove-scheda {
  padding: 26px 24px; background: var(--bianco);
  border: 1px solid var(--linea); border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.dove-scheda h3 { margin: 0 0 10px; font-size: 1.15rem; }
.dove-scheda address {
  font-style: normal; font-size: 1.05rem; color: var(--ink); line-height: 1.5;
  margin-bottom: 16px;
}
.dove-scheda dl { margin: 0 0 20px; display: grid; gap: 10px; }
.dove-scheda dt {
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue);
}
.dove-scheda dd { margin: 2px 0 0; color: var(--ink); }


/* ---------------------------------------------------- tariffe macchine --- */

/* Il listino del self-service ha DUE prezzi per riga, e questo e' il punto
   delicato: il prezzo scontato non deve mai poter passare per il prezzo che
   paga chiunque. Chi entra senza fidelity card deve leggere subito quanto
   spende LUI.

   Come lo ottengo, e non e' solo estetica:
   · il prezzo pieno e' grande, nero, in colonna prima;
   · quello con la card e' piu' piccolo, blu, e porta SEMPRE scritto sotto
     "con fidelity card" — anche sul computer, dove l'intestazione di colonna
     lo direbbe gia'. Ripetuto e' ridondante; non ripeterlo, su una riga letta
     di sfuggita, e' un prezzo ingannevole. */

.tariffe-scatola { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tariffe {
  width: 100%; border-collapse: collapse;
  background: var(--bianco); border: 1px solid var(--linea);
  border-radius: var(--raggio); overflow: hidden;
  box-shadow: var(--ombra);
}
.tariffe th, .tariffe td {
  padding: 15px 18px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--linea);
}
.tariffe tr:last-child td { border-bottom: 0; }
.tariffe thead th {
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue);
  background: var(--sfondo); white-space: nowrap;
}
.tariffe thead th:not(:first-child), .tariffe td.prezzo { text-align: right; }

.tariffe td.macchina b { display: block; font-size: 1.04rem; color: var(--ink); }
.tariffe td.macchina small { display: block; font-size: .86rem; color: var(--tenue); margin-top: 2px; }

/* il prezzo che paga chiunque */
.tariffe .pieno b {
  font-size: 1.28rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.tariffe .pieno small { display: block; font-size: .82rem; color: var(--tenue); }

/* il prezzo con la card: sempre etichettato */
.tariffe .fedelta b {
  font-size: 1.08rem; font-weight: 700; color: var(--blu);
  font-variant-numeric: tabular-nums;
}
.tariffe .fedelta small {
  display: block; font-size: .76rem; font-weight: 700;
  letter-spacing: .04em; color: var(--blu); opacity: .85;
}

/* su telefono la tabella diventa un elenco di schede: tre colonne strette
   costringerebbero a spostare la pagina di lato per leggere un prezzo. */
@media (max-width: 620px) {
  .tariffe, .tariffe tbody, .tariffe tr, .tariffe td { display: block; width: 100%; }
  .tariffe thead { display: none; }
  .tariffe tr {
    border-bottom: 1px solid var(--linea);
    padding: 14px 16px; display: grid;
    grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 14px;
  }
  .tariffe tr:last-child { border-bottom: 0; }
  .tariffe td { border: 0; padding: 0; }
  .tariffe td.macchina { grid-column: 1; grid-row: 1 / span 2; }
  .tariffe td.pieno    { grid-column: 2; grid-row: 1; text-align: right; }
  .tariffe td.fedelta  { grid-column: 2; grid-row: 2; text-align: right; }
}

/* ------------------------------------------------------ fidelity card --- */

.card-fedelta {
  display: grid; gap: 18px; grid-template-columns: auto 1fr; align-items: start;
  margin-top: 26px; padding: 26px 28px;
  background: var(--blu-notte); color: #fff; border-radius: var(--raggio);
}
.card-fedelta .simbolo {
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(255,255,255,.12); display: grid; place-items: center;
}
.card-fedelta h3 { margin: 0 0 8px; font-size: 1.2rem; color: #fff; }
.card-fedelta p { margin: 0; font-size: 1.04rem; line-height: 1.65; color: rgba(255,255,255,.92); }

@media (max-width: 560px) {
  .card-fedelta { grid-template-columns: 1fr; padding: 22px 20px; gap: 14px; }
}

/* ------------------------------------------------------- in dotazione --- */

.dotazione {
  display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
.dotazione li {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; background: var(--bianco);
  border: 1px solid var(--linea); border-radius: 99px;
  font-size: .96rem; font-weight: 600; color: var(--ink);
}
.dotazione svg { color: var(--ok); flex: 0 0 auto; }

/* -------------------------------------------------- fascia del prezzo --- */

.hero-prezzo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin-top: 22px; padding: 18px 22px;
  background: var(--blu-notte); border-radius: var(--raggio);
  color: #fff;
}
.hero-prezzo b {
  font-size: 2.1rem; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hero-prezzo span { font-size: 1rem; color: rgba(255,255,255,.88); }
.hero-prezzo small {
  flex: 1 0 100%; margin-top: 6px;
  font-size: .88rem; color: rgba(255,255,255,.72);
}


@media (max-width: 640px) {
  .hero-prezzo { margin-top: 18px; padding: 16px 18px; }
  .hero-prezzo b { font-size: 1.9rem; }
}


/* ==================================================== il banner cookie =====
   Su telefono il banner del consenso e' alto circa 250 px e sta in fondo:
   sommato alla barra fissa, arriva a coprire proprio la fascia "da 6 €" —
   cioe' l'unica cosa che questa pagina deve mostrare subito. Misurato, non
   supposto: il banner cominciava a 546 px e il prezzo finiva a 578.

   Qui lo rendo compatto sotto i 560 px: stesso testo, stesse scelte, stessi
   diritti, solo scritto piu' stretto. Nessuna opzione viene nascosta — un
   banner che nasconde il rifiuto e' illegale, oltre che sleale.

   Sta in style.css, quindi vale su TUTTE le pagine: il banner era troppo
   grande dappertutto, non solo sulla home.
   ========================================================================== */

@media (max-width: 700px) {
  .consenso { padding: 12px 14px; gap: 8px 12px; }
  .consenso h2 { font-size: .9rem; }
  .consenso p  { font-size: .82rem; flex: 1 1 100%; }
  .consenso-azioni { flex: 1 1 100%; margin-left: 0; }
  .consenso-azioni .btn { flex: 1; padding: 11px 12px; font-size: .88rem; }
}

/* I due pulsanti del consenso devono avere lo STESSO peso visivo.
   Due motivi, e il secondo conta piu' del primo:

   1. L'oro dev'essere uno per schermata, e in apertura e' gia' preso dal
      pulsante principale. "Accetta tutti" in oro glielo rubava.

   2. Colorare l'accettazione e lasciare smorto il rifiuto e' un modo di
      spingere la scelta. Le autorita' europee lo chiamano "dark pattern" e
      lo contestano: accettare e rifiutare devono costare lo stesso sforzo e
      avere lo stesso risalto. Cosi' com'era non lo avevano. */
.consenso .btn.btn-primario {
  background: var(--bianco);
  color: var(--blu);
  border: 1.5px solid var(--linea);
  box-shadow: none;
}
.consenso .btn.btn-primario:hover { border-color: var(--blu); background: var(--sfondo); }


/* ============================================ apertura del self-service ===
   Stessa scelta gia' fatta sulla home, qui limitata a questa pagina con la
   classe sul <body>: su telefono la foto scende SOTTO al testo. Sopra la
   linea di taglio restano titolo, frase, pulsanti e "da 6 €", cioe' cosa
   trovi, dove, quanto costa e cosa fare. La foto non risponde a nessuna
   domanda: puo' aspettare il primo dito di scorrimento.
   ========================================================================== */

@media (max-width: 860px) {
  .pagina-self .hero-figura,
  .pagina-animali .hero-figura,
  .pagina-prodotti .hero-figura { order: 0; margin-top: 4px; }
  .pagina-self .hero-figura img,
  .pagina-animali .hero-figura img,
  .pagina-prodotti .hero-figura img { max-height: 220px; }
  .pagina-self .hero-griglia,
  .pagina-animali .hero-griglia,
  .pagina-prodotti .hero-griglia { gap: 22px; }
}

@media (max-width: 560px) {
  .pagina-self .hero-azioni,
  .pagina-animali .hero-azioni,
  .pagina-prodotti .hero-azioni { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 0; }
  .pagina-self .hero-azioni .btn,
  .pagina-animali .hero-azioni .btn,
  .pagina-prodotti .hero-azioni .btn { width: 100%; }
}


/* ================================================= listino a peso =========
   Due tabelle affiancate: quanto costa se la borsa la porti tu al banco, e
   quanto costa se passiamo noi. Stanno una accanto all'altra apposta: la
   differenza fra le due colonne e' il costo del viaggio, e si deve poter
   leggere in un colpo d'occhio senza fare conti.

   Ogni prezzo si porta dietro l'etichetta della piegatura, sempre, anche sul
   computer dove ci sarebbe l'intestazione di colonna: un prezzo senza la sua
   condizione accanto e' un prezzo che qualcuno legge sbagliato.
   ========================================================================== */

.due-listini {
  display: grid; gap: 20px;
  grid-template-columns: 1fr 1fr; align-items: start;
}

.listino-peso {
  background: var(--bianco); border: 1px solid var(--linea);
  border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden;
}
/* il riquadro del servizio di cui parla questa pagina e' quello marcato */
.listino-peso.principale { border: 1.5px solid var(--blu); }

.listino-peso > h3 {
  margin: 0; padding: 15px 18px;
  font-size: .8rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue);
  background: var(--sfondo); border-bottom: 1px solid var(--linea);
}
.listino-peso.principale > h3 { color: var(--blu); }
.listino-peso > h3 span {
  display: block; margin-top: 3px;
  font-size: .78rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--tenue);
}

.pesi { width: 100%; border-collapse: collapse; }
.pesi td {
  padding: 14px 18px; border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}
.pesi tr:last-child td { border-bottom: 0; }
.pesi td.peso { font-weight: 700; color: var(--ink); }
.pesi td.prezzo { text-align: right; white-space: nowrap; }
.pesi td.prezzo b {
  display: block; font-size: 1.16rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.pesi td.prezzo small {
  display: block; font-size: .76rem; font-weight: 700;
  letter-spacing: .03em; color: var(--tenue);
}

@media (max-width: 900px) {
  .due-listini { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .pesi, .pesi tbody, .pesi tr, .pesi td { display: block; width: 100%; }
  .pesi tr {
    padding: 13px 16px; border-bottom: 1px solid var(--linea);
    display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
    align-items: baseline;
  }
  .pesi tr:last-child { border-bottom: 0; }
  .pesi td { border: 0; padding: 0; }
  .pesi td.peso { grid-column: 1; grid-row: 1 / span 2; }
  .pesi td.prezzo { text-align: right; }
}

/* stessa scelta della home e del self-service: su telefono la foto scende
   sotto al testo, cosi' titolo, frase e prezzo stanno sopra la piega. */
@media (max-width: 860px) {
  .pagina-domicilio .hero-figura { order: 0; margin-top: 4px; }
  .pagina-domicilio .hero-figura img { max-height: 220px; }
  .pagina-domicilio .hero-griglia { gap: 22px; }
}
@media (max-width: 560px) {
  .pagina-domicilio .hero-azioni { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 0; }
  .pagina-domicilio .hero-azioni .btn { width: 100%; }
}


/* =================================================== schede prodotto ======
   Quattro schede uguali per struttura: nome, formato, note, prezzo. Il prezzo
   sta sempre nello stesso punto, in basso a sinistra, cosi' l'occhio li
   confronta senza rileggere. La prima scheda porta una fascia: e' l'unica
   che dice qualcosa in piu', ed e' la profumazione che il cliente ha gia'
   annusato in negozio.
   ========================================================================== */

.prodotti {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.prodotto {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px; background: var(--bianco);
  border: 1px solid var(--linea); border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.prodotto.principale { border: 1.5px solid var(--blu); }

.prodotto h3 {
  margin: 0; font-size: 1.18rem; letter-spacing: .02em; color: var(--ink);
}
.prodotto .formato {
  font-size: .82rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tenue);
}
.prodotto .note { margin: 0; font-size: .95rem; color: var(--testo); }
.prodotto .prezzo-prod {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linea);
  font-size: 1.3rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.prodotto .prezzo-prod small {
  display: block; font-size: .78rem; font-weight: 600; color: var(--tenue);
  letter-spacing: 0;
}

/* la fascia della scheda in evidenza: blu notte, non oro. L'oro di questa
   pagina e' gia' del pulsante principale. */
.prodotto .in-lavanderia {
  align-self: flex-start;
  background: var(--blu-notte); color: #fff;
  font-size: .8rem; font-weight: 700; line-height: 1.35;
  padding: 8px 12px; border-radius: 999px;
}


/* ================================================ il blocco dei dati ======
   Le stesse tre righe, identiche, in fondo a ogni pagina: chi siamo, dove,
   come ci chiami, quando siamo aperti. Non e' decorazione.

   1. Per Google conta che nome, indirizzo e telefono siano scritti sempre
      allo stesso modo, ovunque, senza varianti: e' il segnale con cui
      capisce che le pagine parlano della stessa attivita' fisica.
   2. Per chi legge dal telefono, il numero e' l'ultima cosa che trova
      scorrendo, ed e' cliccabile.
   ========================================================================== */

.pie-nap {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 26px; padding-top: 20px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: .92rem; line-height: 1.55;
}
.pie-nap b { color: #fff; font-weight: 800; letter-spacing: .01em; }
.pie-nap a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.pie-nap a:hover { text-decoration: none; }
.pie-nap .regione { font-size: .84rem; opacity: .78; margin-top: 2px; }


/* ==========================================================================
   MOVIMENTO
   --------------------------------------------------------------------------
   Tre regole che non si toccano, e vengono prima di qualsiasi effetto:

   1. IL CONTENUTO E' VISIBILE DI DEFAULT. Qui sotto non c'e' una sola riga
      che nasconda qualcosa. A nascondere gli elementi e' il programma, e solo
      dopo aver verificato di poterli far ricomparire (attributo
      data-movimento sull'elemento <html>). Se il JavaScript non parte, se e'
      bloccato, se il file non arriva: la pagina si vede ferma e completa.
      Una pagina bianca perche' l'animazione non e' partita e' il modo piu'
      stupido di perdere un cliente.

   2. SI MUOVONO SOLO opacita' e transform. Nessuna proprieta' che sposti il
      testo mentre qualcuno legge: Google misura quello spostamento (CLS) e
      lo conta contro di noi, e chi legge perde il segno.

   3. CHI HA CHIESTO MENO MOVIMENTO NON LO VEDE. Sotto
      prefers-reduced-motion il programma non nasconde nemmeno: niente
      transizioni da aspettare, tutto fermo e leggibile. Non e' gentilezza,
      e' che a qualcuno queste animazioni fanno venire il mal di testa.

   Sul telefono la prima schermata non si anima MAI: il prezzo "da 6 €" deve
   esserci al primo istante, non mezzo secondo dopo.
   ========================================================================== */

html[data-movimento] .mv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
html[data-movimento] .mv.visto {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* i numeri dei passaggi si accendono uno dopo l'altro */
html[data-movimento] .passo::before {
  opacity: 0; transform: scale(.6);
  transition: opacity .34s ease, transform .34s cubic-bezier(.2, 1.4, .4, 1);
}
html[data-movimento] .passo.visto::before { opacity: 1; transform: none; }

/* l'apertura entra in sequenza: solo su schermo largo, e solo al primo
   caricamento della pagina */
html[data-movimento] .hero-avvio > * {
  opacity: 0; transform: translateY(16px);
  animation: mv-entra .62s cubic-bezier(.2, .7, .3, 1) forwards;
}
html[data-movimento] .hero-avvio > *:nth-child(1) { animation-delay: .05s; }
html[data-movimento] .hero-avvio > *:nth-child(2) { animation-delay: .14s; }
html[data-movimento] .hero-avvio > *:nth-child(3) { animation-delay: .23s; }
html[data-movimento] .hero-avvio > *:nth-child(4) { animation-delay: .32s; }
html[data-movimento] .hero-avvio > *:nth-child(5) { animation-delay: .41s; }

@keyframes mv-entra { to { opacity: 1; transform: none; } }

/* Interruttore di sicurezza dell'entrata: qualunque cosa succeda
   all'animazione, dopo un attimo questo la chiude sullo stato finale.
   Serve per il caso in cui la pagina venga aperta in una scheda in secondo
   piano: li' il browser mette in pausa le animazioni, e senza questa regola
   il titolo e il prezzo resterebbero invisibili fino al primo sguardo. */
html[data-movimento] .hero-avvio.mv-fatto > * {
  opacity: 1 !important; transform: none !important; animation: none !important;
}

/* la foto dell'apertura: uno zoom lentissimo, appena percettibile */
html[data-movimento] .hero-figura.mv-zoom img {
  animation: mv-zoom 1.6s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes mv-zoom { from { transform: scale(1.045); } to { transform: none; } }

/* i numeri che salgono non devono far ballare la riga mentre contano */
.voto-cifra, .voto-quante b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html[data-movimento] .mv,
  html[data-movimento] .passo::before,
  html[data-movimento] .hero-avvio > * { opacity: 1; transform: none; animation: none; }
}


/* ================================================== voci dei clienti ======
   Tre frasi vere, prese dalle recensioni pubblicate su Google, accanto al
   voto. Non sono decorazione: il voto dice quanto, la frase dice perche'.

   REGOLA CHE NON SI DISCUTE: qui dentro non si scrive niente che un cliente
   non abbia scritto davvero. Una recensione inventata e' pubblicita'
   ingannevole (Codice del consumo, art. 21) e su Google costa la scheda.
   Finche' non arrivano le frasi vere, qui resta un segnaposto grigio.
   ========================================================================== */

.citazioni {
  display: grid; gap: 16px; margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.citazione {
  margin: 0; padding: 22px 24px;
  background: var(--bianco); border: 1px solid var(--linea);
  border-radius: var(--raggio); box-shadow: var(--ombra);
  display: flex; flex-direction: column; gap: 12px;
}
.citazione .stelline { color: var(--oro-scuro); font-size: .95rem; letter-spacing: .1em; }
.citazione p {
  margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink);
}
.citazione footer {
  margin-top: auto; font-size: .86rem; color: var(--tenue); font-style: normal;
}
.citazione footer b { color: var(--testo); font-weight: 700; }


/* ====================================================== la foto dell'area pet
   La foto della lavatrice PET e' VERTICALE (900x1200). I contenitori normali
   di questo sito ritagliano le immagini per tenerle tutte della stessa forma:
   con questa il ritaglio tagliava gli occhi in alto e la targhetta "10 kg"
   in basso, cioe' le due cose che la rendono riconoscibile.
   Qui si vede intera, e la larghezza e' limitata per non far diventare la
   sezione una colonna alta il doppio di quella accanto.
   ========================================================================== */

.foto-pet { margin: 0; }
.foto-pet img {
  display: block; width: 100%; height: auto;
  max-height: none; object-fit: fill;
  border-radius: var(--raggio); box-shadow: var(--ombra-lg);
}
@media (min-width: 861px) {
  .foto-pet { max-width: 400px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 860px) {
  .foto-pet { max-width: 300px; margin-left: auto; margin-right: auto; }
  /* La regola dell'apertura di questa pagina limita le foto a 220 px di
     altezza per tenere il prezzo sopra la piega. Qui non serve: la foto sta
     SOTTO al prezzo, e schiacciata a 220 px non si capiva piu' cosa fosse. */
  .pagina-animali .hero-figura.foto-pet img { max-height: none; }
}


/* ------------------------------------------------- il riquadro della mappa
   Prima del clic il riquadro era grigio e vuoto, e non si capiva che dietro
   ci fosse una mappa: l'ha notato per primo il titolare guardando le pagine.
   Ora ha il reticolo di una cartina, il segnaposto e una riga che dice cosa
   c'e' sotto. Il motivo dell'attesa resta scritto: e' un cookie di Google,
   non un capriccio. */

.mappa { background-color: var(--sfondo); }

/* La mappa e' sempre accesa: nessun pulsante, nessuna attesa. Il riquadro si
   allunga fino a riempire la colonna accanto alla scheda con indirizzo e
   orari; sul telefono, dove le due cose si impilano, tiene 300 px -- abbastanza
   per riconoscere l'incrocio, non tanto da mangiarsi mezza schermata. */
.mappa iframe,
.mappa-riquadro {
  display: block; width: 100%; height: 100%; min-height: 300px; border: 0;
}


/* ------------------------------------------ il cartellino sopra la mappa
   La mappa di OpenStreetMap non ha la scheda dell'attivita' come quella di
   Google: mostra il segnaposto e basta. Questo cartellino rimette le
   informazioni che si perdevano -- nome, indirizzo, voto -- e le rimette
   scritte da noi, quindi restano leggibili anche a mappa non caricata e
   funzionano per Google che legge la pagina.
   Il collegamento porta alla scheda Google vera, dove ci sono foto,
   recensioni e il pulsante per il percorso. */

.mappa-scheda {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  max-width: min(260px, calc(100% - 24px));
  background: var(--bianco); border: 1px solid var(--linea);
  border-radius: 12px; box-shadow: var(--ombra-lg);
  padding: 12px 14px; font-size: .88rem; line-height: 1.45;
}
.mappa-scheda b { display: block; color: var(--ink); font-size: .98rem; letter-spacing: .01em; }
.mappa-scheda span { display: block; color: var(--tenue); }
.mappa-scheda .voto-riga { color: var(--oro-scuro); font-weight: 700; letter-spacing: .04em; }
.mappa-scheda .voto-riga small { color: var(--tenue); font-weight: 600; letter-spacing: 0; }
.mappa-scheda a {
  display: inline-block; margin-top: 6px; font-weight: 700; color: var(--blu);
}

@media (max-width: 560px) {
  .mappa-scheda { top: 8px; left: 8px; padding: 10px 12px; font-size: .82rem; }
}


/* ================================================= il conto per le attivita'
   Un riquadro che fa un conto solo: quanto spendi al mese con noi. Non
   inventa i costi che hai adesso -- quelli li sai tu e cambiano da attivita'
   ad attivita' -- e non promette risparmi che non posso dimostrare. Da' un
   numero vero da confrontare con il tuo, che e' esattamente la cosa che
   serve a chi deve decidere.
   ========================================================================== */

.conto {
  background: var(--blu-notte); color: #fff;
  border-radius: var(--raggio); padding: 26px 28px;
  display: grid; gap: 18px;
}
.conto h3 { margin: 0; color: #fff; font-size: 1.18rem; }
.conto p.spiega { margin: 0; font-size: .95rem; color: rgba(255,255,255,.82); }

.conto-scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.conto-scelte button {
  border: 1.5px solid rgba(255,255,255,.34); background: transparent; color: #fff;
  border-radius: 999px; padding: 9px 16px; font: inherit; font-size: .93rem;
  font-weight: 700; cursor: pointer;
}
.conto-scelte button[aria-pressed="true"] { background: var(--oro); color: var(--blu-notte); border-color: var(--oro); }

.conto-riga { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.conto-riga label { font-size: .9rem; color: rgba(255,255,255,.82); display: block; }
.conto-riga input {
  width: 110px; margin-top: 6px; padding: 11px 12px; font: inherit; font-size: 1.05rem;
  border-radius: 10px; border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); color: #fff;
}
.conto-riga input:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

.conto-esito {
  border-top: 1px solid rgba(255,255,255,.18); padding-top: 16px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
}
.conto-esito b { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.conto-esito span { font-size: .95rem; color: rgba(255,255,255,.82); }
.conto-nota { margin: 0; font-size: .86rem; color: var(--oro); font-weight: 700; }
/* Da dove esce il numero del mese. Senza questa riga chi legge moltiplica per
   quattro, trova meno, e pensa che stiamo gonfiando il conto. */
.conto-settimana { margin: 8px 0 0; font-size: .86rem; color: rgba(255,255,255,.72); }
.conto-settimana b { font-weight: 700; color: rgba(255,255,255,.92); }


/* Il pensiero: tre righe, larghe quanto un respiro, in mezzo alla pagina.
   Grande abbastanza da farsi leggere piano, non tanto da sembrare uno slogan. */
.pensiero {
  margin: 0 auto; max-width: 34ch;
  font-size: 1.32rem; line-height: 1.55; color: var(--ink);
  letter-spacing: -.01em; text-wrap: balance;
}
@media (max-width: 560px) { .pensiero { font-size: 1.16rem; max-width: none; } }


/* la riga che dice come sono espressi i prezzi, sotto un listino ------------ */
.listino-nota {
  margin: 14px 0 0;
  font-size: .92rem;
  color: var(--tenue);
}

/* il pezzo colorato di un titolo hero non si spezza a meta': o sta tutto
   sulla riga, o va a capo intero. Senza questo, su telefono si leggeva
   "un prezzo: le" e poi "ore di chi lo fa." ---------------------------------- */
h1 .accento { display: inline-block; }

/* ------------------------------------------ le foto scattate col telefono
   La regola generale di .hero-figura taglia le foto a 440 px di altezza con
   object-fit: cover. Su questo scatto -- verticale, con la persona al centro
   e Citta' Alta sullo sfondo -- quel taglio mangiava la testa e le borse,
   cioe' le uniche due cose che raccontano il servizio. Qui la foto si vede
   tutta, dentro una larghezza massima che le impedisce di dominare la
   colonna accanto al testo. */
.foto-intera { margin: 0; }
.foto-intera img {
  display: block; width: 100%; height: auto;
  max-height: none; object-fit: fill;
  border-radius: var(--raggio); box-shadow: var(--ombra-lg);
}
@media (min-width: 861px) {
  .foto-intera { max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 860px) {
  .foto-intera { max-width: 340px; margin-left: auto; margin-right: auto; }
  .hero-figura.foto-intera img { max-height: none; }
}


/* --------------------------------------------------- apertura di "chi siamo"
   Il racconto e la foto stavano uno sotto l'altra perche' questa classe non
   aveva regole: il testo occupava tutta la larghezza e la foto finiva sotto,
   lontana dalle parole che dovrebbe illustrare. Su schermo largo stanno
   affiancate, sul telefono tornano incolonnate. */
.chi-apertura { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) {
  .chi-apertura { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; }
}

/* ------------------------------------------- il risparmio di ogni pacchetto
   Il cliente non deve fare il conto a mente: sotto il prezzo c'e' scritto
   quanto risparmia e quanto pagherebbe a listino. E' la riga che trasforma
   un pacchetto in un'offerta. */
.pacchetto .risparmio {
  margin: 10px 0 0; font-size: .9rem; color: var(--ok);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
}
.pacchetto .risparmio b { font-weight: 800; }
.pacchetto .risparmio span {
  color: var(--tenue); font-size: .82rem; text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,.28);
}

/* la riga sotto il prezzo di un abbonamento: e' un'informazione, non un
   risparmio barrato -- .risparmio qui non va perche' taglia il testo */
.pacchetto .al-mese {
  margin: 8px 0 0; font-size: .9rem; color: var(--tenue); font-weight: 600;
}

/* ==========================================================================
   NASCONDERE VUOL DIRE NASCONDERE
   --------------------------------------------------------------------------
   Il browser nasconde gli elementi con l'attributo "hidden" mettendoli a
   display:none, ma basta una qualunque regola di classe con la stessa
   specificita' per ribaltarlo. E' successo davvero: nel calcolatore delle
   attivita' il campo "Singole a settimana" spariva secondo il codice e
   restava visibile secondo il CSS, e in modalita' Salone chiedeva una cosa
   che i saloni non hanno. Fino a oggi la cosa si rattoppava caso per caso
   (.consenso[hidden], .nota-zona[hidden] e altri due): questa riga la chiude
   per tutto il sito, quelli restano solo perche' non danno fastidio.
   ========================================================================== */
[hidden] { display: none !important; }


/* ==========================================================================
   MODULO RICHIESTE (pagina B&B e saloni)
   Usa i campi gia' definiti sopra (.campo, .campi-2, .errore-campo): qui c'e'
   solo quello che manca -- il campo trappola per i robot e il piede.
   ========================================================================== */
.modulo-richiesta { max-width: 640px; margin: 0 auto; }
.modulo-richiesta .trappola {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.modulo-fondo {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px;
}
.modulo-nota { font-size: .86rem; color: var(--tenue); margin: 0; flex: 1 1 260px; line-height: 1.5; }
.modulo-richiesta .avviso.ok { margin-top: 20px; }


/* ==========================================================================
   PREZZO UNICO (pagina a domicilio)
   Una borsa sola, un prezzo solo: una tabella con una riga sembrava vuota.
   ========================================================================== */
.prezzo-unico {
  background: var(--bianco); border: 1px solid var(--linea);
  border-radius: var(--raggio); box-shadow: var(--ombra);
  padding: 26px 28px; display: flex; align-items: baseline;
  gap: 12px 30px; flex-wrap: wrap;
}
.prezzo-unico-cifra { flex: 0 0 auto; }
.prezzo-unico-cifra b {
  display: block; font-size: 2.5rem; font-weight: 800; color: var(--ink);
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.prezzo-unico-cifra span {
  display: block; margin-top: 7px; font-size: .9rem; font-weight: 700; color: var(--tenue);
}
.prezzo-unico p { flex: 1 1 260px; margin: 0; font-size: .95rem; line-height: 1.55; }