@charset "UTF-8";
/* =============================================================================
   CartellaVeterinaria - foglio di stile unico del sito
   Direzione artistica: dolcezza animale, blu petrolio e ocra caldo, angoli molto
   arrotondati, impronte di zampa e punti vaccinali disegnati in CSS puro.
   Titoli in Fredoka, testo in Mulish. Nessuna immagine esterna per le decorazioni.

   Indice:
    01. Font e reset
    02. Variabili di progetto
    03. Base tipografica
    04. Impaginazione e utilità
    05. Decorazioni firma: zampe e punti vaccinali
    06. Collegamento di salto, intestazione e navigazione
    07. Menu mobile
    08. Pulsanti
    09. Occhielli, testate di sezione, pannelli e schede
    10. Hero e scheda paziente
    11. Il problema
    12. La soluzione e i passi
    13. Funzionalità
    14. Vantaggi
    15. Testimonianze
    16. Prezzi
    17. Domande frequenti
    18. Contatto e modulo
    19. Blog: schede, testata articolo, corpo redazionale
    20. Blocco autore e profili
    21. Piede di pagina ed ecosistema
    22. Banner cookie
    23. Pagine di servizio
    24. Accessibilità, movimento ridotto e stampa
    25. Adattamento agli schermi
   ============================================================================= */

/* 01. FONT E RESET ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* la direzione artistica è calda e chiara: il sito resta in luce, senza tema scuro */
  color-scheme: light;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul[class], ol[class] { padding: 0; list-style: none; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a { color: inherit; }

table {
  border-collapse: collapse;
  width: 100%;
}

/* 02. VARIABILI DI PROGETTO ------------------------------------------------- */

:root {
  /* palette approvata */
  --bg: #FBF8F3;
  --surf: #FFFFFF;
  --ink: #1E2A2E;
  --mut: #5D6E73;
  --pri: #175C63;
  --acc: #DE8A3E;
  --line: #E8E2D8;

  /* derivate di stato e di profondità */
  --pri-scuro: #0F4248;
  --pri-chiaro: #2A7B83;
  --pri-velo: rgba(23, 92, 99, 0.08);
  --pri-velo-forte: rgba(23, 92, 99, 0.16);
  --acc-medio: #B96A1E;   /* ocra leggibile sui bordi e sugli anelli di fuoco */
  --acc-scuro: #9C5A16;   /* ocra usabile sul testo, contrasto AA sul fondo crema */
  --acc-velo: rgba(222, 138, 62, 0.14);
  --crema: #F4EFE6;
  --crema-scura: #EDE5D7;
  --line-forte: #D9CFBE;

  /* raggi molto generosi, marchio di fabbrica del sito */
  --r-1: 12px;
  --r-2: 18px;
  --r-3: 26px;
  --r-4: 34px;
  --r-5: 44px;
  --r-pillola: 999px;

  /* ombre calde, mai grigie */
  --ombra-1: 0 1px 2px rgba(30, 42, 46, 0.04), 0 6px 16px -10px rgba(23, 92, 99, 0.30);
  --ombra-2: 0 2px 4px rgba(30, 42, 46, 0.05), 0 18px 34px -20px rgba(23, 92, 99, 0.42);
  --ombra-3: 0 4px 8px rgba(30, 42, 46, 0.06), 0 34px 60px -28px rgba(23, 92, 99, 0.50);
  --ombra-ocra: 0 16px 30px -18px rgba(185, 106, 30, 0.55);

  /* ritmo verticale e orizzontale */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.5rem;
  --sp-7: 5rem;
  --sezione-y: clamp(3.5rem, 7vw, 6.5rem);
  --larghezza: 1180px;
  --larghezza-stretta: 44rem;
  --altezza-barra: 4.75rem;

  /* famiglie tipografiche con ricadute reali */
  --font-titoli: "Fredoka", "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --font-testo: "Mulish", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* scala armonica fluida, rapporto vicino a 1,22 */
  --t-xs: clamp(0.78rem, 0.76rem + 0.12vw, 0.84rem);
  --t-sm: clamp(0.88rem, 0.85rem + 0.16vw, 0.96rem);
  --t-base: clamp(1rem, 0.97rem + 0.2vw, 1.09rem);
  --t-md: clamp(1.12rem, 1.06rem + 0.32vw, 1.28rem);
  --t-lg: clamp(1.32rem, 1.2rem + 0.6vw, 1.62rem);
  --t-xl: clamp(1.6rem, 1.38rem + 1.05vw, 2.1rem);
  --t-2xl: clamp(1.95rem, 1.6rem + 1.7vw, 2.85rem);
  --t-3xl: clamp(2.35rem, 1.75rem + 2.9vw, 3.75rem);

  --transizione: 220ms cubic-bezier(0.33, 0.9, 0.35, 1);
}

/* 03. BASE TIPOGRAFICA ------------------------------------------------------ */

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* velo caldo in alto: due aloni morbidi che non disturbano la lettura */
  background-image:
    radial-gradient(60rem 32rem at 12% -8%, rgba(222, 138, 62, 0.10), transparent 70%),
    radial-gradient(52rem 30rem at 92% -4%, rgba(23, 92, 99, 0.10), transparent 68%);
  background-repeat: no-repeat;
}

h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { text-wrap: pretty; }

strong, b { font-weight: 700; }

a { text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }

::selection {
  background-color: var(--acc-velo);
  color: var(--ink);
}

/* lo scarto dell intestazione fissa vale per ogni bersaglio di ancoraggio */
[id] { scroll-margin-top: calc(var(--altezza-barra) + 1.5rem); }

/* 04. IMPAGINAZIONE E UTILITÀ ---------------------------------------------- */

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.contenitore-stretto {
  width: 100%;
  max-width: var(--larghezza-stretta);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.sezione {
  position: relative;
  padding-block: var(--sezione-y);
}

/* fascia crema con angoli molto arrotondati: alterna il ritmo della home */
.sezione--alt {
  background-color: var(--crema);
  border-radius: var(--r-5);
  margin-inline: clamp(0px, 2vw, 1.5rem);
  border: 1px solid var(--line);
}

.sezione--crema { background-color: var(--crema); }

.griglia-2,
.griglia-3,
.griglia-4 {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
}

.centrato { text-align: center; }

.testo-tenue { color: var(--mut); }

.nascosto-vista {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 05. DECORAZIONI FIRMA: ZAMPE E PUNTI VACCINALI --------------------------- */

/* impronta disegnata con cinque gradienti radiali: quattro dita e un cuscinetto */
.zampa {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image:
    radial-gradient(circle at 20% 32%, currentColor 0 15%, transparent 16%),
    radial-gradient(circle at 41% 18%, currentColor 0 14%, transparent 15%),
    radial-gradient(circle at 63% 18%, currentColor 0 14%, transparent 15%),
    radial-gradient(circle at 83% 33%, currentColor 0 15%, transparent 16%),
    radial-gradient(ellipse 30% 26% at 51% 71%, currentColor 0 99%, transparent 100%);
}

/* tappezzeria di impronte per le sezioni: passo largo, opacità bassissima */
.sezione--zampe::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.5;
  background-repeat: repeat;
  background-size: 168px 168px;
  background-image:
    radial-gradient(circle 5px at 26px 44px, var(--pri-velo) 98%, transparent 100%),
    radial-gradient(circle 5px at 44px 30px, var(--pri-velo) 98%, transparent 100%),
    radial-gradient(circle 5px at 63px 30px, var(--pri-velo) 98%, transparent 100%),
    radial-gradient(circle 5px at 81px 44px, var(--pri-velo) 98%, transparent 100%),
    radial-gradient(ellipse 17px 14px at 53px 70px, var(--pri-velo) 98%, transparent 100%),
    radial-gradient(circle 4px at 116px 130px, var(--acc-velo) 98%, transparent 100%),
    radial-gradient(circle 4px at 130px 119px, var(--acc-velo) 98%, transparent 100%),
    radial-gradient(circle 4px at 145px 119px, var(--acc-velo) 98%, transparent 100%),
    radial-gradient(circle 4px at 159px 130px, var(--acc-velo) 98%, transparent 100%),
    radial-gradient(ellipse 13px 11px at 137px 150px, var(--acc-velo) 98%, transparent 100%);
}

.sezione--zampe > * { position: relative; z-index: 1; }

/* fila di punti vaccinali: fatti, in corso, ancora da fare */
.vaccino-linea {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.vaccino-punto {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex: none;
  background-color: var(--line-forte);
  box-shadow: inset 0 0 0 2px var(--surf);
}

.vaccino-punto--fatto { background-color: var(--pri); }

.vaccino-punto--prossimo {
  background-color: var(--acc);
  box-shadow: inset 0 0 0 2px var(--surf), 0 0 0 4px var(--acc-velo);
  animation: respiro 2.6s ease-in-out infinite;
}

@keyframes respiro {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--surf), 0 0 0 3px var(--acc-velo); }
  50% { box-shadow: inset 0 0 0 2px var(--surf), 0 0 0 8px rgba(222, 138, 62, 0.06); }
}

/* etichetta a pillola usata per stati, date e piccole segnalazioni */
.timbro {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pillola);
  background-color: var(--pri-velo);
  color: var(--pri);
  font-family: var(--font-titoli);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.timbro--ocra {
  background-color: var(--acc-velo);
  color: var(--acc-scuro);
}

/* 06. COLLEGAMENTO DI SALTO, INTESTAZIONE E NAVIGAZIONE -------------------- */

.salta-al-contenuto {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translate(-50%, -160%);
  z-index: 120;
  padding: 0.7rem 1.3rem;
  border-radius: var(--r-pillola);
  background-color: var(--pri);
  color: var(--surf);
  font-family: var(--font-titoli);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--ombra-2);
  transition: transform var(--transizione);
}

.salta-al-contenuto:focus-visible { transform: translate(-50%, 0); }

.intestazione {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: rgba(251, 248, 243, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.intestazione__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--altezza-barra);
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
}

.marchio__sigla {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 38% 38% 42% 42% / 40% 40% 40% 40%;
  background: linear-gradient(150deg, var(--pri-chiaro), var(--pri) 62%);
  color: var(--surf);
  font-family: var(--font-titoli);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--ombra-1);
}

/* piccolo cuscinetto ocra che sbuca dall angolo del marchio */
.marchio__sigla::after {
  content: "";
  position: absolute;
  right: -0.22rem;
  bottom: -0.22rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background-color: var(--acc);
  border: 2px solid var(--bg);
}

.marchio__nome {
  font-family: var(--font-titoli);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marchio__nome em {
  font-style: normal;
  color: var(--pri);
}

.nav-principale { display: none; }

.nav-principale__lista {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
}

.nav-principale__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.72rem;
  border-radius: var(--r-pillola);
  color: var(--mut);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transizione), background-color var(--transizione);
}

.nav-principale__link:hover { color: var(--pri); background-color: var(--pri-velo); }

.nav-principale__link.attivo,
.nav-principale__link[aria-current="page"] {
  color: var(--pri);
  background-color: var(--pri-velo);
}

/* punto vaccinale ocra sotto la voce attiva */
.nav-principale__link.attivo::after,
.nav-principale__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.05rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background-color: var(--acc);
  transform: translateX(-50%);
}

.intestazione__azioni {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.apri-menu {
  display: inline-grid;
  place-content: center;
  gap: 4px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-forte);
  border-radius: var(--r-2);
  background-color: var(--surf);
}

.apri-menu span {
  display: block;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--pri);
  transition: transform var(--transizione), opacity var(--transizione);
}

.apri-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.apri-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.apri-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 07. MENU MOBILE ---------------------------------------------------------- */

.menu-mobile {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 110;
  width: min(21rem, 92vw);
  height: 100dvh;
  padding: 1.25rem clamp(1rem, 4vw, 1.6rem) 2rem;
  overflow-y: auto;
  background-color: var(--surf);
  border-left: 1px solid var(--line);
  border-radius: var(--r-5) 0 0 var(--r-5);
  box-shadow: var(--ombra-3);
  transform: translateX(105%);
  transition: transform var(--transizione);
}

.menu-mobile.aperto { transform: translateX(0); }

.menu-mobile__testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.menu-mobile__chiudi {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line-forte);
  border-radius: var(--r-2);
  background-color: var(--bg);
  color: var(--pri);
  font-size: 1.4rem;
  line-height: 1;
}

.menu-mobile__lista {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: var(--sp-3) 0 var(--sp-4);
}

.menu-mobile__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.9rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-2);
  color: var(--ink);
  font-family: var(--font-titoli);
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transizione), color var(--transizione);
}

.menu-mobile__link::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background-color: var(--line-forte);
  transition: background-color var(--transizione);
}

.menu-mobile__link:hover,
.menu-mobile__link:focus-visible { background-color: var(--crema); color: var(--pri); }

.menu-mobile__link:hover::before { background-color: var(--acc); }

.velo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(30, 42, 46, 0.42);
  backdrop-filter: blur(2px);
}

.blocco-scroll { overflow: hidden; }

/* 08. PULSANTI ------------------------------------------------------------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.72rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--r-pillola);
  font-family: var(--font-titoli);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform var(--transizione), box-shadow var(--transizione),
              background-color var(--transizione), border-color var(--transizione), color var(--transizione);
}

.bottone--primario {
  background-color: var(--pri);
  border-color: var(--pri);
  color: var(--surf);
  box-shadow: var(--ombra-2);
}

.bottone--primario:hover {
  background-color: var(--pri-scuro);
  border-color: var(--pri-scuro);
  transform: translateY(-2px);
  box-shadow: var(--ombra-3);
}

.bottone--secondario {
  background-color: var(--surf);
  border-color: var(--line-forte);
  color: var(--pri);
}

.bottone--secondario:hover {
  border-color: var(--pri);
  background-color: var(--crema);
  transform: translateY(-2px);
}

.bottone--ocra {
  background-color: var(--acc);
  border-color: var(--acc);
  color: var(--ink);
  box-shadow: var(--ombra-ocra);
}

.bottone--ocra:hover {
  background-color: #D07E2F;
  border-color: #D07E2F;
  transform: translateY(-2px);
}

.bottone--largo { width: 100%; }

.bottone--piccolo {
  min-height: 2.6rem;
  padding: 0.5rem 1.1rem;
  font-size: var(--t-xs);
}

.bottone-testo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--pri);
  font-family: var(--font-testo);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-underline-offset: 0.22em;
}

.bottone-testo:hover { color: var(--acc-scuro); }

/* 09. OCCHIELLI, TESTATE DI SEZIONE, PANNELLI E SCHEDE --------------------- */

.occhiello {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-2);
  padding: 0.3rem 0.9rem 0.3rem 0.5rem;
  border-radius: var(--r-pillola);
  background-color: var(--surf);
  border: 1px solid var(--line);
  color: var(--acc-scuro);
  font-family: var(--font-titoli);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* impronta ocra davanti a ogni occhiello */
.occhiello::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--acc);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image:
    radial-gradient(circle at 20% 32%, currentColor 0 15%, transparent 16%),
    radial-gradient(circle at 41% 18%, currentColor 0 14%, transparent 15%),
    radial-gradient(circle at 63% 18%, currentColor 0 14%, transparent 15%),
    radial-gradient(circle at 83% 33%, currentColor 0 15%, transparent 16%),
    radial-gradient(ellipse 30% 26% at 51% 71%, currentColor 0 99%, transparent 100%);
}

.testata-sezione {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.testata-sezione--centrata {
  margin-inline: auto;
  text-align: center;
}

.testata-sezione--centrata .occhiello { justify-content: center; }

.testata-sezione__titolo { margin-bottom: var(--sp-2); }

.testata-sezione__testo {
  color: var(--mut);
  font-size: var(--t-md);
  max-width: 40rem;
}

.testata-sezione--centrata .testata-sezione__testo { margin-inline: auto; }

.pannello {
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--ombra-1);
}

.scheda {
  position: relative;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--ombra-1);
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}

.scheda:hover {
  transform: translateY(-4px);
  border-color: var(--pri-velo-forte);
  box-shadow: var(--ombra-2);
}

/* filigrana di impronta nell angolo, decorazione tipica delle schede del sito */
.scheda--zampa::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 0.9rem;
  width: 3.4rem;
  height: 3.4rem;
  opacity: 0.1;
  color: var(--pri);
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image:
    radial-gradient(circle at 20% 32%, currentColor 0 15%, transparent 16%),
    radial-gradient(circle at 41% 18%, currentColor 0 14%, transparent 15%),
    radial-gradient(circle at 63% 18%, currentColor 0 14%, transparent 15%),
    radial-gradient(circle at 83% 33%, currentColor 0 15%, transparent 16%),
    radial-gradient(ellipse 30% 26% at 51% 71%, currentColor 0 99%, transparent 100%);
}

/* 10. HERO E SCHEDA PAZIENTE ---------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}

.hero__griglia {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.hero__titolo { margin-bottom: var(--sp-3); }

.hero__titolo em {
  font-style: normal;
  color: var(--pri);
  /* sottolineatura morbida che ricorda un tratto di penna sul libretto */
  background-image: linear-gradient(transparent 62%, var(--acc-velo) 62%);
  padding-inline: 0.12em;
}

.hero__sottotitolo {
  max-width: 34rem;
  margin-bottom: var(--sp-4);
  color: var(--mut);
  font-size: var(--t-md);
}

.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--sp-4);
}

.hero__punti,
.elenco-zampe {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}

.hero__punti li,
.elenco-zampe li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.hero__punti li::before,
.elenco-zampe li::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.28rem;
  flex: none;
  color: var(--pri);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image:
    radial-gradient(circle at 20% 32%, currentColor 0 15%, transparent 16%),
    radial-gradient(circle at 41% 18%, currentColor 0 14%, transparent 15%),
    radial-gradient(circle at 63% 18%, currentColor 0 14%, transparent 15%),
    radial-gradient(circle at 83% 33%, currentColor 0 15%, transparent 16%),
    radial-gradient(ellipse 30% 26% at 51% 71%, currentColor 0 99%, transparent 100%);
}

.elenco-zampe li { font-weight: 400; color: var(--mut); }

.hero__figura {
  position: relative;
  margin: 0;
}

.hero__figura img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-5);
  border: 1px solid var(--line);
  box-shadow: var(--ombra-3);
}

/* la scheda paziente è l elemento visivo firma della home */
.scheda-paziente {
  position: relative;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  box-shadow: var(--ombra-3);
}

.scheda-paziente::before {
  content: "";
  position: absolute;
  inset: -0.9rem -0.9rem auto auto;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background-color: var(--acc-velo);
  z-index: -1;
}

.scheda-paziente__testata {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--line-forte);
}

.scheda-paziente__avatar {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: 40% 40% 44% 44% / 42% 42% 40% 40%;
  background-color: var(--crema);
  color: var(--pri);
  border: 1px solid var(--line);
}

.scheda-paziente__avatar .zampa { width: 1.5rem; height: 1.5rem; }

.scheda-paziente__nome {
  font-family: var(--font-titoli);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.scheda-paziente__meta {
  color: var(--mut);
  font-size: var(--t-xs);
}

.scheda-paziente__righe {
  display: grid;
  gap: 0.15rem;
  margin: var(--sp-3) 0;
}

.riga-dato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid var(--line);
}

.riga-dato:last-child { border-bottom: 0; }

.riga-dato__etichetta {
  color: var(--mut);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.riga-dato__valore {
  font-family: var(--font-titoli);
  font-size: var(--t-sm);
  font-weight: 500;
  text-align: right;
}

.scheda-paziente__promemoria {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-3);
  background-color: var(--crema);
  border: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink);
}

.scheda-paziente__promemoria strong { color: var(--acc-scuro); }

/* 11. IL PROBLEMA ---------------------------------------------------------- */

.problema__griglia {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.problema__racconto p { margin-bottom: var(--sp-3); }

.problema__racconto p:first-child {
  font-size: var(--t-md);
  color: var(--ink);
}

.problema__racconto p:last-child { margin-bottom: 0; }

.sintomi {
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  border-radius: var(--r-4);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-left: 5px solid var(--acc);
  box-shadow: var(--ombra-1);
}

.sintomi__titolo {
  margin-bottom: var(--sp-2);
  font-size: var(--t-md);
  color: var(--acc-scuro);
}

.sintomi__lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.sintomi__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--t-sm);
  color: var(--mut);
}

.sintomi__lista li::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.55rem;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--acc);
}

/* 12. LA SOLUZIONE E I PASSI ---------------------------------------------- */

.soluzione__testo {
  max-width: 42rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.soluzione__testo p { margin-bottom: var(--sp-3); }

.soluzione__testo p:last-child { margin-bottom: 0; }

.passi {
  position: relative;
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
  margin: 0;
}

.passo {
  position: relative;
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--ombra-1);
}

.passo__numero {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: var(--sp-2);
  border-radius: 42% 42% 46% 46% / 44% 44% 40% 40%;
  background: linear-gradient(145deg, var(--pri-chiaro), var(--pri));
  color: var(--surf);
  font-family: var(--font-titoli);
  font-size: 1.15rem;
  font-weight: 700;
}

.passo__titolo { margin-bottom: var(--sp-2); }

.passo__testo { color: var(--mut); font-size: var(--t-sm); }

/* filo tratteggiato che collega i passi, come una serie di richiami */
.passo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.15rem;
  width: 2px;
  height: 1.1rem;
  transform: translateX(-50%);
  background-image: linear-gradient(var(--line-forte) 55%, transparent 55%);
  background-size: 2px 8px;
}

.passo:last-child::after { display: none; }

/* 13. FUNZIONALITÀ -------------------------------------------------------- */

.griglia-funzioni {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.scheda-funzione {
  position: relative;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--ombra-1);
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}

.scheda-funzione:hover {
  transform: translateY(-4px);
  border-color: var(--pri-velo-forte);
  box-shadow: var(--ombra-2);
}

.scheda-funzione__icona {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--sp-3);
  border-radius: 40% 40% 44% 44% / 42% 42% 40% 40%;
  background-color: var(--pri-velo);
  color: var(--pri);
  transition: background-color var(--transizione), color var(--transizione);
}

.scheda-funzione:hover .scheda-funzione__icona {
  background-color: var(--acc-velo);
  color: var(--acc-scuro);
}

.scheda-funzione__icona .zampa { width: 1.5rem; height: 1.5rem; }

.scheda-funzione__titolo { margin-bottom: var(--sp-2); font-size: var(--t-md); }

.scheda-funzione__testo { color: var(--mut); font-size: var(--t-sm); }

/* 14. VANTAGGI ------------------------------------------------------------ */

.griglia-vantaggi {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.vantaggio {
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.3rem, 2.4vw, 1.8rem);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
}

/* cappello ocra arrotondato sul bordo superiore */
.vantaggio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 5px;
  border-radius: 0 0 var(--r-pillola) var(--r-pillola);
  background: linear-gradient(90deg, var(--pri), var(--acc));
}

.vantaggio__titolo { margin-bottom: var(--sp-2); font-size: var(--t-md); }

.vantaggio__testo { color: var(--mut); font-size: var(--t-sm); }

/* 15. TESTIMONIANZE ------------------------------------------------------- */

.testimonianze {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.testimonianza {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-4) var(--r-4) var(--r-4) var(--r-1);
  box-shadow: var(--ombra-1);
}

.testimonianza::before {
  content: "\201C";
  position: absolute;
  top: 0.35rem;
  right: 1.2rem;
  font-family: var(--font-titoli);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--acc-velo);
}

.testimonianza__testo {
  font-size: var(--t-sm);
  color: var(--ink);
}

.testimonianza__firma {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: var(--sp-3);
  margin-top: auto;
  border-top: 1px dashed var(--line-forte);
}

.testimonianza__firma .zampa { width: 1.35rem; height: 1.35rem; color: var(--pri); flex: none; }

.testimonianza__nome {
  display: block;
  font-family: var(--font-titoli);
  font-weight: 600;
}

.testimonianza__ruolo {
  display: block;
  color: var(--mut);
  font-size: var(--t-xs);
}

.nota-scenari {
  margin-top: var(--sp-4);
  padding: 0.85rem 1.2rem;
  border: 1px dashed var(--line-forte);
  border-radius: var(--r-3);
  background-color: var(--surf);
  color: var(--mut);
  font-size: var(--t-xs);
  text-align: center;
}

/* 16. PREZZI -------------------------------------------------------------- */

.piani {
  display: grid;
  gap: clamp(1.1rem, 2.6vw, 1.8rem);
  align-items: stretch;
}

.piano {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  box-shadow: var(--ombra-1);
}

.piano--evidenza {
  border: 2px solid var(--pri);
  box-shadow: var(--ombra-3);
  background-image: linear-gradient(180deg, var(--pri-velo), transparent 26%);
}

.piano__etichetta {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.28rem 0.95rem;
  border-radius: var(--r-pillola);
  background-color: var(--acc);
  color: var(--ink);
  font-family: var(--font-titoli);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--ombra-ocra);
}

.piano__nome {
  margin-bottom: var(--sp-1);
  font-size: var(--t-lg);
  color: var(--pri);
}

.piano__prezzo {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: var(--sp-2);
  font-family: var(--font-titoli);
  font-size: clamp(2.4rem, 5vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
}

.piano__prezzo span {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--mut);
}

.piano__descrizione {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--line-forte);
  color: var(--mut);
  font-size: var(--t-sm);
}

.piano__elenco {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 var(--sp-4);
}

.piano__elenco li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--t-sm);
  color: var(--ink);
}

.piano__elenco li::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.52rem;
  flex: none;
  border-radius: 50%;
  background-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-velo);
}

.piano .bottone { margin-top: auto; }

.nota-prezzi {
  max-width: 44rem;
  margin: var(--sp-4) auto 0;
  color: var(--mut);
  font-size: var(--t-sm);
  text-align: center;
}

/* 17. DOMANDE FREQUENTI --------------------------------------------------- */

.faq {
  max-width: 48rem;
  margin-inline: auto;
  display: grid;
  gap: 0.7rem;
}

.faq__voce {
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

.faq__voce.aperta {
  border-color: var(--pri);
  box-shadow: var(--ombra-1);
}

.faq__domanda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.4rem;
  padding: 1rem 1.2rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-titoli);
  font-size: var(--t-md);
  font-weight: 500;
  text-align: left;
  line-height: 1.35;
}

.faq__domanda:hover { color: var(--pri); }

.faq__icona {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background-color: var(--pri-velo);
  transition: background-color var(--transizione), transform var(--transizione);
}

.faq__icona::before,
.faq__icona::after {
  content: "";
  position: absolute;
  background-color: var(--pri);
  border-radius: 2px;
}

.faq__icona::before { width: 0.85rem; height: 2px; }
.faq__icona::after { width: 2px; height: 0.85rem; transition: transform var(--transizione); }

.faq__domanda[aria-expanded="true"] .faq__icona {
  background-color: var(--acc-velo);
  transform: rotate(90deg);
}

.faq__domanda[aria-expanded="true"] .faq__icona::after { transform: scaleY(0); }

.faq__risposta {
  padding: 0 1.2rem 1.3rem;
  color: var(--mut);
  font-size: var(--t-sm);
}

.faq__risposta p + p { margin-top: var(--sp-2); }

/* 18. CONTATTO E MODULO --------------------------------------------------- */

.contatto__griglia {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}

.modulo {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  box-shadow: var(--ombra-2);
}

.modulo__intro {
  margin-bottom: var(--sp-4);
  color: var(--mut);
  font-size: var(--t-sm);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--sp-3);
}

.campo__etichetta,
.campo > label {
  font-family: var(--font-titoli);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  background-color: var(--bg);
  border: 1px solid var(--line-forte);
  border-radius: var(--r-2);
  font-family: var(--font-testo);
  font-size: var(--t-sm);
  color: var(--ink);
  transition: border-color var(--transizione), box-shadow var(--transizione), background-color var(--transizione);
}

.campo textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.65;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--pri-chiaro); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  background-color: var(--surf);
  border-color: var(--pri);
  box-shadow: 0 0 0 4px var(--pri-velo);
}

.campo input::placeholder,
.campo textarea::placeholder { color: #8B979B; }

.campo__aiuto {
  color: var(--mut);
  font-size: var(--t-xs);
}

.campo-doppio {
  display: grid;
  gap: 0 1rem;
}

/* la freccia del menu a tendina è disegnata in CSS, senza immagini */
.campo--scelta { position: relative; }

.campo--scelta select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
}

.campo--scelta::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  bottom: 1.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--pri);
  border-bottom: 2px solid var(--pri);
  transform: rotate(45deg);
  pointer-events: none;
}

.modulo__nota {
  margin-top: var(--sp-3);
  color: var(--mut);
  font-size: var(--t-xs);
}

.modulo__alternativa {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-forte);
  font-size: var(--t-sm);
}

.modulo__alternativa a { color: var(--pri); font-weight: 600; }

/* trappola per i robot: fuori dallo schermo, mai visibile e mai nascosta ai lettori */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 19. BLOG: SCHEDE, TESTATA ARTICOLO, CORPO REDAZIONALE ------------------- */

.griglia-articoli {
  display: grid;
  gap: clamp(1.1rem, 2.6vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.scheda-articolo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--ombra-1);
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}

.scheda-articolo:hover {
  transform: translateY(-4px);
  border-color: var(--pri-velo-forte);
  box-shadow: var(--ombra-2);
}

.scheda-articolo__figura {
  margin: 0;
  overflow: hidden;
  background-color: var(--crema);
}

.scheda-articolo__figura img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.33, 0.9, 0.35, 1);
}

.scheda-articolo:hover .scheda-articolo__figura img { transform: scale(1.04); }

.scheda-articolo__corpo {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  flex: 1;
}

.scheda-articolo__data {
  color: var(--acc-scuro);
  font-family: var(--font-titoli);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.scheda-articolo__titolo {
  font-size: var(--t-md);
  line-height: 1.3;
}

.scheda-articolo__titolo a {
  text-decoration: none;
  color: var(--ink);
}

.scheda-articolo__titolo a:hover { color: var(--pri); }

.scheda-articolo__testo {
  color: var(--mut);
  font-size: var(--t-sm);
}

.scheda-articolo__link {
  margin-top: auto;
  padding-top: var(--sp-2);
  color: var(--pri);
  font-family: var(--font-titoli);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}

.scheda-articolo__link::after {
  content: " \203A";
  transition: padding-left var(--transizione);
}

.scheda-articolo__link:hover::after { padding-left: 0.25rem; }

.briciole {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--sp-3);
  color: var(--mut);
  font-size: var(--t-xs);
  list-style: none;
  padding: 0;
}

.briciole li + li::before { content: "/ "; color: var(--line-forte); }

.briciole a { color: var(--pri); text-decoration: none; }
.briciole a:hover { text-decoration: underline; }

.meta-articolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-bottom: var(--sp-4);
  color: var(--mut);
  font-size: var(--t-xs);
}

.meta-articolo strong { color: var(--ink); font-weight: 600; }

.figura-evidenza {
  margin: 0 0 var(--sp-4);
}

.figura-evidenza img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-5);
  border: 1px solid var(--line);
  box-shadow: var(--ombra-2);
}

.credito-foto {
  margin-top: 0.5rem;
  color: var(--mut);
  font-size: var(--t-xs);
  text-align: right;
}

.credito-foto a { color: var(--pri); }

/* corpo redazionale: misura di lettura fra 62 e 72 caratteri */
.prosa {
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--t-base);
  line-height: 1.78;
  color: var(--ink);
}

.prosa > * + * { margin-top: var(--sp-3); }

.prosa h2 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  font-size: var(--t-xl);
  padding-left: 1.1rem;
  border-left: 5px solid var(--acc);
  border-radius: 2px;
}

.prosa h3 {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  font-size: var(--t-lg);
  color: var(--pri);
}

.prosa p { margin-bottom: 0; }

.prosa a {
  color: var(--pri);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--acc);
}

.prosa a:hover { color: var(--acc-scuro); }

.prosa ul,
.prosa ol {
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.prosa ul { list-style: none; padding-left: 0; }

.prosa ul li {
  position: relative;
  padding-left: 1.7rem;
}

.prosa ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62rem;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-velo);
}

.prosa ol { list-style: decimal; }
.prosa ol li::marker { color: var(--pri); font-weight: 700; }

.prosa blockquote {
  margin: var(--sp-4) 0;
  padding: 1.2rem 1.4rem;
  background-color: var(--crema);
  border-radius: var(--r-3);
  border-left: 5px solid var(--pri);
  font-size: var(--t-md);
  font-style: italic;
  color: var(--ink);
}

.prosa figure { margin: var(--sp-4) 0; }
.prosa figure img { border-radius: var(--r-4); border: 1px solid var(--line); }

.prosa figcaption,
figcaption {
  margin-top: 0.5rem;
  color: var(--mut);
  font-size: var(--t-xs);
}

.prosa code,
code {
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background-color: var(--crema-scura);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  color: var(--pri-scuro);
}

.prosa table,
.tabella {
  width: 100%;
  margin: var(--sp-4) 0;
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid var(--line);
  font-size: var(--t-sm);
  background-color: var(--surf);
}

.prosa th,
.tabella th {
  padding: 0.8rem 1rem;
  background-color: var(--pri);
  color: var(--surf);
  font-family: var(--font-titoli);
  font-weight: 600;
  text-align: left;
}

.prosa td,
.tabella td {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.prosa tbody tr:nth-child(even),
.tabella tbody tr:nth-child(even) { background-color: var(--crema); }

.tabella-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--sp-4) 0;
}

.chapo {
  margin-bottom: var(--sp-4);
  padding-left: 1.1rem;
  border-left: 5px solid var(--acc);
  border-radius: 2px;
  font-size: var(--t-md);
  color: var(--ink);
  font-weight: 500;
}

.sommario {
  margin: var(--sp-4) 0;
  padding: 1.2rem 1.4rem;
  background-color: var(--surf);
  border: 1px dashed var(--line-forte);
  border-radius: var(--r-3);
}

.sommario__titolo {
  margin-bottom: var(--sp-2);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acc-scuro);
}

.sommario ol,
.sommario ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: var(--t-sm);
}

.sommario a { color: var(--pri); }

.riquadro {
  margin: var(--sp-4) 0;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background-color: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  border-top: 5px solid var(--pri);
}

.riquadro__titolo {
  margin-bottom: var(--sp-2);
  font-size: var(--t-md);
  color: var(--pri);
}

.da-leggere {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--line-forte);
}

.da-leggere__titolo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--sp-4);
  font-size: var(--t-xl);
}

.da-leggere__titolo::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--acc);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image:
    radial-gradient(circle at 20% 32%, currentColor 0 15%, transparent 16%),
    radial-gradient(circle at 41% 18%, currentColor 0 14%, transparent 15%),
    radial-gradient(circle at 63% 18%, currentColor 0 14%, transparent 15%),
    radial-gradient(circle at 83% 33%, currentColor 0 15%, transparent 16%),
    radial-gradient(ellipse 30% 26% at 51% 71%, currentColor 0 99%, transparent 100%);
}

/* 20. BLOCCO AUTORE E PROFILI --------------------------------------------- */

.autore-box {
  display: grid;
  gap: var(--sp-3);
  align-items: start;
  margin-top: var(--sp-5);
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  box-shadow: var(--ombra-1);
}

.autore-box__foto {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  border-radius: 42% 42% 46% 46% / 44% 44% 40% 40%;
  border: 3px solid var(--acc-velo);
}

.autore-box__nome {
  margin-bottom: var(--sp-1);
  font-size: var(--t-md);
}

.autore-box__bio {
  color: var(--mut);
  font-size: var(--t-sm);
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--sp-3) 0 0;
  padding: 0;
}

.social__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-pillola);
  background-color: var(--crema);
  border: 1px solid var(--line);
  color: var(--pri);
  font-size: var(--t-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transizione), border-color var(--transizione), transform var(--transizione);
}

.social__link:hover {
  background-color: var(--acc-velo);
  border-color: var(--acc);
  transform: translateY(-2px);
}

/* 21. PIEDE DI PAGINA ED ECOSISTEMA --------------------------------------- */

.pie {
  position: relative;
  margin-top: var(--sezione-y);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  background-color: var(--pri);
  color: #DCE7E8;
  border-radius: var(--r-5) var(--r-5) 0 0;
  overflow: hidden;
}

/* impronte chiare appena percettibili sul fondo petrolio */
.pie::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-repeat: repeat;
  background-size: 190px 190px;
  background-image:
    radial-gradient(circle 6px at 30px 52px, rgba(255, 255, 255, 0.045) 98%, transparent 100%),
    radial-gradient(circle 6px at 52px 35px, rgba(255, 255, 255, 0.045) 98%, transparent 100%),
    radial-gradient(circle 6px at 75px 35px, rgba(255, 255, 255, 0.045) 98%, transparent 100%),
    radial-gradient(circle 6px at 96px 52px, rgba(255, 255, 255, 0.045) 98%, transparent 100%),
    radial-gradient(ellipse 20px 17px at 63px 84px, rgba(255, 255, 255, 0.045) 98%, transparent 100%);
}

.pie > * { position: relative; z-index: 1; }

.pie__griglia {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.5rem);
  padding-bottom: var(--sp-5);
}

.pie__colonna { min-width: 0; }

.pie__colonna .marchio { color: #FFFFFF; }

.pie__colonna .marchio__sigla {
  background: linear-gradient(150deg, #2F868E, #0F4248 65%);
  box-shadow: none;
}

.pie__colonna .marchio__sigla::after { border-color: var(--pri); }

.pie__colonna .marchio__nome em { color: var(--acc); }

.pie__titolo {
  margin-bottom: var(--sp-3);
  color: #FFFFFF;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.pie__claim {
  margin: var(--sp-3) 0;
  font-size: var(--t-sm);
  color: #C6D8DA;
  max-width: 22rem;
}

.pie__contatto { font-size: var(--t-sm); }

.pie__contatto a { color: var(--acc); font-weight: 600; }

.pie__lista {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
}

.pie__link {
  display: inline-block;
  color: #C6D8DA;
  font-size: var(--t-sm);
  text-decoration: none;
  transition: color var(--transizione), transform var(--transizione);
}

.pie__link:hover {
  color: #FFFFFF;
  transform: translateX(3px);
  text-decoration: underline;
  text-decoration-color: var(--acc);
}

.pie__lista .bottone-testo {
  color: #C6D8DA;
  font-size: var(--t-sm);
  min-height: 2.4rem;
}

.pie__lista .bottone-testo:hover { color: #FFFFFF; }

/* la colonna dell ecosistema è fatta di piccole schede, non di una lista grezza */
.eco-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.eco-link {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-2);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #C6D8DA;
  font-size: var(--t-xs);
  text-decoration: none;
  transition: background-color var(--transizione), border-color var(--transizione), transform var(--transizione);
}

.eco-link strong {
  display: block;
  color: #FFFFFF;
  font-family: var(--font-titoli);
  font-size: var(--t-sm);
  font-weight: 600;
}

.eco-link:hover {
  background-color: rgba(222, 138, 62, 0.16);
  border-color: var(--acc);
  transform: translateY(-2px);
}

.pie__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #B4CACD;
  font-size: var(--t-xs);
}

.pie__legale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0;
}

.pie__legale a { color: #C6D8DA; text-decoration: none; }
.pie__legale a:hover { color: #FFFFFF; text-decoration: underline; }

/* 22. BANNER COOKIE ------------------------------------------------------- */

.cookie {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 130;
  width: min(40rem, calc(100vw - 1.5rem));
  transform: translateX(-50%);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background-color: var(--surf);
  border: 1px solid var(--line-forte);
  border-radius: var(--r-4);
  box-shadow: var(--ombra-3);
  max-height: min(80vh, 40rem);
  overflow-y: auto;
}

.cookie__titolo {
  margin-bottom: var(--sp-2);
  font-size: var(--t-md);
  color: var(--pri);
}

.cookie__testo {
  margin-bottom: var(--sp-3);
  color: var(--mut);
  font-size: var(--t-sm);
}

.cookie__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

/* Accetta e Rifiuta hanno la stessa larghezza e lo stesso peso visivo */
.cookie__azioni .bottone {
  flex: 1 1 9rem;
  min-height: 2.9rem;
}

.cookie__azioni .bottone-testo { flex: 1 1 100%; }

.cookie__dettaglio {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-forte);
  font-size: var(--t-xs);
  color: var(--mut);
}

.cookie__dettaglio table {
  margin-bottom: var(--sp-2);
  font-size: var(--t-xs);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
}

.cookie__dettaglio th {
  padding: 0.5rem 0.7rem;
  background-color: var(--crema);
  color: var(--ink);
  text-align: left;
}

.cookie__dettaglio td {
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--line);
}

.cookie__dettaglio a { color: var(--pri); }

/* 23. PAGINE DI SERVIZIO -------------------------------------------------- */

.intestazione-pagina {
  position: relative;
  padding-block: clamp(2.2rem, 5vw, 3.5rem);
  margin-bottom: var(--sp-5);
  border-bottom: 1px dashed var(--line-forte);
}

.intestazione-pagina h1 { margin-bottom: var(--sp-2); }

.intestazione-pagina p {
  max-width: 44rem;
  color: var(--mut);
  font-size: var(--t-md);
}

.mappa-gruppo {
  margin-bottom: var(--sp-5);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
}

.mappa-gruppo h2 {
  margin-bottom: var(--sp-2);
  font-size: var(--t-lg);
  color: var(--pri);
}

.mappa-gruppo ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.mappa-gruppo a { color: var(--ink); }

.conferma {
  max-width: 40rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}

.conferma__segno {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto var(--sp-4);
  border-radius: 42% 42% 46% 46% / 44% 44% 40% 40%;
  background-color: var(--pri-velo);
  color: var(--pri);
}

.conferma__segno .zampa { width: 2.6rem; height: 2.6rem; }

/* 24. ACCESSIBILITÀ, MOVIMENTO RIDOTTO E STAMPA --------------------------- */

:focus-visible {
  outline: 3px solid var(--acc-medio);
  outline-offset: 3px;
  border-radius: 6px;
}

.bottone:focus-visible,
.nav-principale__link:focus-visible,
.menu-mobile__link:focus-visible,
.social__link:focus-visible,
.eco-link:focus-visible { outline-offset: 4px; }

/* i bersagli tattili restano comodi anche sul telefono */
a, button { touch-action: manipulation; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .scheda:hover,
  .scheda-funzione:hover,
  .scheda-articolo:hover,
  .bottone:hover,
  .social__link:hover,
  .eco-link:hover { transform: none; }
  .scheda-articolo:hover .scheda-articolo__figura img { transform: none; }
}

@media print {
  .intestazione, .menu-mobile, .cookie, .pie, .salta-al-contenuto { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .prosa { max-width: none; }
}

/* 25. ADATTAMENTO AGLI SCHERMI -------------------------------------------- */

/* da 480 px: due colonne per i campi affiancati e per il piede */
@media (min-width: 30em) {
  .campo-doppio { grid-template-columns: 1fr 1fr; }
  .autore-box { grid-template-columns: auto 1fr; }
}

/* da 640 px: griglie a due colonne */
@media (min-width: 40em) {
  .griglia-2 { grid-template-columns: repeat(2, 1fr); }
  .griglia-4 { grid-template-columns: repeat(2, 1fr); }
  .pie__griglia { grid-template-columns: repeat(2, 1fr); }
  .conferma__segno { width: 6.5rem; height: 6.5rem; }
}

/* da 860 px: passi in fila, prezzi a tre colonne, contatto su due colonne */
@media (min-width: 54em) {
  .griglia-3 { grid-template-columns: repeat(3, 1fr); }
  .passi { grid-template-columns: repeat(3, 1fr); }
  .passo::after {
    left: auto;
    right: -1.15rem;
    top: 3.6rem;
    bottom: auto;
    width: 1.1rem;
    height: 2px;
    transform: none;
    background-image: linear-gradient(90deg, var(--line-forte) 55%, transparent 55%);
    background-size: 8px 2px;
  }
  .piani { grid-template-columns: repeat(3, 1fr); }
  .problema__griglia { grid-template-columns: 1.35fr 1fr; }
  .contatto__griglia { grid-template-columns: 1fr 1.15fr; }
  .pie__griglia { grid-template-columns: repeat(3, 1fr); }
}

/* da 1024 px: navigazione desktop, hero su due colonne, piede a cinque colonne */
@media (min-width: 64em) {
  .nav-principale { display: block; }
  .apri-menu { display: none; }
  .griglia-4 { grid-template-columns: repeat(4, 1fr); }
  .hero__griglia { grid-template-columns: 1.05fr 0.95fr; }
  .pie__griglia { grid-template-columns: 1.35fr 1fr 1fr 1fr 1.15fr; }
  .piano--evidenza { transform: translateY(-0.75rem); }
}

/* da 1280 px: un poco d aria in più fra le colonne principali */
@media (min-width: 80em) {
  .hero__griglia { gap: 4rem; }
  .testata-sezione { max-width: 50rem; }
}

/* Adattamento ai titoli degli articoli in forma di domanda */
article h1 {
  font-size: clamp(1.55rem, 1rem + 2.3vw, 2.5rem);
  line-height: 1.18;
  text-wrap: balance;
  overflow-wrap: break-word;
}