/* ==========================================================================
   Farmacia Scoccianti — foglio di stile
   Palette derivata dal logo: teal #40BCC6, navy #205091. Nessun grigio neutro.
   ========================================================================== */

/* ---- Font: Roboto variable, self-hostato -------------------------------- */
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/Roboto-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/Roboto-Variable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Variabili ----------------------------------------------------------- */
:root {
  --teal: #40bcc6;
  --teal-scuro: #2a9aa4;
  --teal-tenue: rgba(64, 188, 198, 0.12);
  --navy: #205091;
  --ink: #0f2440;
  --muted: #54687f;
  --ice: #eef3f9;
  --ice-scuro: #e2ebf5;
  --bianco: #ffffff;
  --hairline: rgba(32, 80, 145, 0.14);
  --scuro-a: #1c4b87;
  --scuro-b: #122c50;
  --r-s: 10px;
  --r-m: 12px;
  --r-l: 18px;
  --ombra-hover: 0 14px 40px rgba(18, 44, 80, 0.12);
  --transizione: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 64px;
}

/* ---- Reset --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: var(--navy);
}
h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
p {
  margin: 0 0 1em;
}
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
::selection {
  background: var(--teal-tenue);
}

.solo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.salta-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--r-s) 0;
  z-index: 200;
}
.salta-contenuto:focus {
  left: 0;
}

.contenitore {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Icone emoji rese monocromatiche */
.icona {
  filter: grayscale(1);
  opacity: 0.85;
}

/* ---- Header -------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.header-int {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header-logo svg,
.header-logo img {
  height: 38px;
  width: auto;
}
.nav-principale {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-principale a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: var(--r-s);
  transition: background var(--transizione), color var(--transizione);
  white-space: nowrap;
}
.nav-principale a:hover {
  background: var(--ice);
}
.nav-principale a[aria-current="page"] {
  color: var(--navy);
  background: var(--ice);
}
.nav-cta {
  background: var(--teal);
  color: #fff !important;
  font-weight: 700;
  padding: 9px 18px !important;
  border-radius: var(--r-s);
  margin-left: 8px;
}
.nav-cta:hover {
  background: var(--teal-scuro) !important;
}
.selettore-lingua {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted) !important;
  border: 1px solid var(--hairline);
  padding: 6px 10px !important;
}
.selettore-lingua:hover {
  color: var(--navy) !important;
}

/* Menu mobile */
.apri-menu {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r-s);
  width: 42px;
  height: 42px;
  cursor: pointer;
  padding: 0;
}
.apri-menu span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  margin: 4px auto;
  border-radius: 2px;
  transition: transform var(--transizione), opacity var(--transizione);
}
@media (max-width: 1060px) {
  .apri-menu {
    display: block;
  }
  .nav-principale {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--hairline);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 20px;
    gap: 2px;
    box-shadow: var(--ombra-hover);
  }
  .nav-principale.aperto {
    display: flex;
  }
  .nav-principale a {
    padding: 12px 14px;
    font-size: 16px;
  }
  .nav-cta {
    margin: 10px 0 0;
    text-align: center;
  }
  .selettore-lingua {
    margin: 8px 0 0;
    text-align: center;
  }
  body.menu-aperto .apri-menu span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.menu-aperto .apri-menu span:nth-child(2) {
    opacity: 0;
  }
  body.menu-aperto .apri-menu span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* ---- Fascia apertura ------------------------------------------------------ */
.fascia-apertura {
  background: var(--navy);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 7px 16px;
}
.fascia-apertura strong {
  font-weight: 700;
}
.fascia-apertura a {
  color: #fff;
}
.fascia-contatti {
  white-space: nowrap;
}
@media (max-width: 700px) {
  /* Su mobile: a capo prima del numero, contatti tutti sulla seconda riga */
  .fascia-sep {
    display: none;
  }
  .fascia-contatti {
    display: block;
  }
}

/* ---- Griglia tile (home) -------------------------------------------------- */
.griglia-tile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px;
  max-width: 1400px;
  margin: 0 auto;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 460px;
  padding: 64px 40px 0;
  border-radius: var(--r-l);
  background: var(--ice);
  overflow: hidden;
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombra-hover);
}
.tile-full {
  grid-column: 1 / -1;
  min-height: 560px;
}
.tile-scuro {
  background: linear-gradient(160deg, var(--scuro-a), var(--scuro-b));
}
/* Variante verde acqua: tonalità del teal del logo, per dare ritmo alla griglia */
.tile-verde {
  background: linear-gradient(160deg, #e6f5f6, #d2edee);
}
.tile-verde .tile-occhiello {
  color: var(--teal-scuro);
}
.tile-verde .evidenzia {
  color: var(--teal-scuro);
}
/* Variante fotografica: foto piena con velo scuro e testo bianco (tile teaser) */
.tile-fotografico .tile-occhiello {
  color: var(--teal);
}
.tile-fotografico h1,
.tile-fotografico h2,
.tile-fotografico .tile-sottotitolo {
  color: #fff;
}
.tile-fotografico .tile-sottotitolo {
  opacity: 0.92;
}
.tile-fotografico .tile-link a {
  color: var(--teal);
}
.tile.tile-fotografico.con-foto::before {
  background: linear-gradient(rgba(15, 36, 64, 0.45), rgba(15, 36, 64, 0.78));
}
.tile-verde.con-foto::before {
  background: linear-gradient(
    to bottom,
    rgba(226, 243, 244, 0.92) 0%,
    rgba(226, 243, 244, 0.78) 50%,
    rgba(226, 243, 244, 0.5) 100%
  );
}
/* Foto di sfondo in trasparenza: velo più denso in alto, dove c'è il testo */
.tile.con-foto {
  background-size: cover;
  background-position: center;
}
.tile.con-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(238, 243, 249, 0.92) 0%,
    rgba(238, 243, 249, 0.78) 50%,
    rgba(238, 243, 249, 0.5) 100%
  );
}
.tile-scuro.con-foto::before {
  background: linear-gradient(
    to bottom,
    rgba(18, 44, 80, 0.93) 0%,
    rgba(18, 44, 80, 0.82) 50%,
    rgba(18, 44, 80, 0.6) 100%
  );
}
.tile > * {
  position: relative;
}
.tile-scuro .tile-occhiello {
  color: var(--teal);
}
.tile-scuro h1,
.tile-scuro h2,
.tile-scuro .tile-sottotitolo {
  color: #fff;
}
.tile-scuro .tile-sottotitolo {
  opacity: 0.85;
}
.tile-occhiello {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal-scuro);
  margin: 0 0 14px;
}
.tile h1,
.tile h2 {
  font-size: clamp(30px, 4vw, 46px);
  max-width: 22ch;
  margin: 0 0 14px;
}
.tile-full h1,
.tile-full h2 {
  font-size: clamp(36px, 5vw, 58px);
}
.tile .evidenzia {
  color: var(--navy);
}
.tile-scuro .evidenzia {
  color: var(--teal);
}
.tile-sottotitolo {
  font-size: 18px;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 0 20px;
}
.tile-link {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 2;
}
/* Tile interamente cliccabile (soprattutto da smartphone): link invisibile
   esteso su tutto il riquadro; i link testuali restano cliccabili sopra */
.copri-tile {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.tile-link a {
  color: var(--teal-scuro);
  font-weight: 700;
  font-size: 16.5px;
  text-decoration: none;
}
.tile-link a::after {
  content: " \2192";
  transition: transform var(--transizione);
  display: inline-block;
}
.tile-link a:hover {
  text-decoration: underline;
}
.tile-link a:hover::after {
  transform: translateX(3px);
}
.tile-scuro .tile-link a {
  color: var(--teal);
}
.tile-visual {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.tile-visual svg {
  width: min(560px, 88%);
  height: auto;
}
.tile-full .tile-visual svg {
  width: min(760px, 80%);
}
/* Invito a scendere, in fondo al banner di apertura */
.invito-scroll {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background var(--transizione);
}
.invito-scroll:hover {
  background: rgba(255, 255, 255, 0.95);
}
.invito-scroll-freccia {
  display: inline-block;
  font-size: 15px;
}
@media (prefers-reduced-motion: no-preference) {
  .invito-scroll-freccia {
    animation: invito-giu 1.8s ease-in-out infinite;
  }
}
@keyframes invito-giu {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Se l'ultimo tile a mezza riga resta orfano, occupa l'intera riga */
.griglia-tile .tile:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .griglia-tile {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }
  .tile,
  .tile-full {
    min-height: 420px;
    padding: 48px 24px 0;
  }
}

/* ---- Sezioni generiche ---------------------------------------------------- */
.sezione {
  padding: 96px 0;
}
.sezione-testa {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.sezione-testa h2 {
  font-size: clamp(28px, 3.6vw, 42px);
}
.sezione-testa p {
  color: var(--muted);
  font-size: 18px;
}
.evidenzia {
  color: var(--navy);
}

/* ---- Intestazione di pagina ----------------------------------------------- */
.testata-pagina {
  padding: 84px 0 56px;
  text-align: center;
}
.testata-pagina .tile-occhiello {
  margin-bottom: 12px;
}
.testata-pagina h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  max-width: 24ch;
  margin: 0 auto 16px;
}
.testata-pagina .sottotitolo {
  font-size: 19px;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto;
}

/* ---- Bottoni --------------------------------------------------------------- */
.bottone {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 13px 26px;
  border-radius: var(--r-m);
  border: none;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transizione), transform var(--transizione);
}
.bottone:hover {
  background: var(--teal-scuro);
}
.bottone:active {
  transform: scale(0.98);
}
.bottone-secondario {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.bottone-secondario:hover {
  background: var(--ice);
  color: var(--navy);
}
.bottone-bianco {
  background: #fff;
  color: var(--navy);
}
.bottone-bianco:hover {
  background: var(--ice);
}
.bottone[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* ---- Card ------------------------------------------------------------------ */
.card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-m);
  padding: 28px;
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombra-hover);
}

/* ---- Pagina servizi -------------------------------------------------------- */
.barra-servizi {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0;
}
.barra-servizi-int {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.campo-ricerca {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}
.campo-ricerca input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 12px 18px 12px 46px;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-m);
  background: var(--ice);
  color: var(--ink);
  transition: border-color var(--transizione), background var(--transizione);
}
.campo-ricerca input:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
}
.campo-ricerca .icona {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.chip {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  background: var(--ice);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione);
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover {
  background: var(--ice-scuro);
}
.chip[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
}
.chips-contenitore {
  position: relative;
}
.chips-freccia,
.chips-invito {
  display: none;
}
@media (max-width: 700px) {
  /* Invito esplicito allo scorrimento delle categorie */
  .chips-invito {
    display: block;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--teal-scuro);
    margin: 0 0 2px;
  }
  .chips-invito span {
    display: inline-block;
  }
  .chips {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    padding-right: 56px;
    padding-left: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  /* Chip più grandi: più facili da toccare e da riconoscere come pulsanti */
  .chip {
    font-size: 15.5px;
    padding: 12px 20px;
  }
  .chips::-webkit-scrollbar {
    display: none;
  }
  /* Sfumature ai bordi + frecce sempre presenti: le categorie continuano oltre */
  .chips-contenitore::before,
  .chips-contenitore::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 4px;
    width: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transizione);
  }
  .chips-contenitore::before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  }
  .chips-contenitore::after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  }
  .chips-contenitore.sfuma-sx::before,
  .chips-contenitore.sfuma-dx::after {
    opacity: 1;
  }
  .chips-freccia {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    width: 34px;
    height: 34px;
    margin-top: -20px;
    border-radius: 50%;
    border: none;
    background: var(--navy);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transizione);
  }
  .chips-freccia-sx {
    left: 2px;
  }
  .chips-freccia-dx {
    right: 2px;
  }
  .chips-contenitore.sfuma-sx .chips-freccia-sx,
  .chips-contenitore.sfuma-dx .chips-freccia-dx {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .chips-invito span {
    animation: invito-scorri 1.6s ease-in-out infinite;
  }
}
@keyframes invito-scorri {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

.categoria-servizi {
  padding: 64px 0 24px;
}
.categoria-servizi > .contenitore > h2 {
  font-size: clamp(26px, 3.2vw, 36px);
}
.categoria-descrizione {
  color: var(--muted);
  font-size: 18px;
  max-width: 62ch;
  margin-bottom: 40px;
}
.griglia-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.card-servizio {
  display: flex;
  flex-direction: column;
}
.card-servizio .badge {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal-scuro);
  background: var(--teal-tenue);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.card-servizio h3 {
  font-size: 21px;
  margin-bottom: 6px;
}
.card-servizio .prezzo {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.card-servizio p {
  color: var(--muted);
  font-size: 15.5px;
  flex-grow: 1;
}
.card-servizio .azioni {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}
.card-servizio .azioni a {
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: var(--teal-scuro);
}
.card-servizio .azioni a:hover {
  text-decoration: underline;
}

/* Card interamente cliccabile: il link .copri-card si estende su tutto il box,
   gli altri link dell'area azioni restano cliccabili sopra di esso */
.card-servizio,
.card-pacchetto {
  position: relative;
}
.card-servizio .azioni a:not(.copri-card),
.azioni-pacchetto a:not(.copri-card) {
  position: relative;
  z-index: 2;
}
a.copri-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Prestazioni infermieristiche: card con confronto farmacia / domicilio */
.titolo-gruppo {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin: 40px 0 16px;
}
.titolo-gruppo:first-of-type {
  margin-top: 0;
}
.griglia-infermieristici {
  margin-bottom: 8px;
}
.card-servizio h4 {
  font-size: 20px;
  margin-bottom: 6px;
}
.confronto-prezzi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 12px;
}
.confronto-prezzi .luogo {
  border-radius: var(--r-s);
  padding: 12px 14px;
  background: var(--teal-tenue);
  border: 1px solid rgba(64, 188, 198, 0.35);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.confronto-prezzi .luogo-domicilio {
  background: var(--ice);
  border-color: var(--hairline);
}
.confronto-prezzi .dove {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-scuro);
}
.confronto-prezzi .luogo-domicilio .dove {
  color: var(--navy);
}
.confronto-prezzi .cifra {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.confronto-prezzi .cinquepiuuno {
  font-size: 12.5px;
  color: var(--muted);
}
.confronto-prezzi .non-disponibile {
  background: transparent;
  border-style: dashed;
}
.confronto-prezzi .nd {
  font-size: 13.5px;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}

/* Pacchetti check-up in evidenza */
.griglia-pacchetti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.card-pacchetto {
  position: relative;
  background: linear-gradient(160deg, var(--scuro-a), var(--scuro-b));
  color: #fff;
  border-radius: var(--r-l);
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.card-pacchetto:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombra-hover);
}
.badge-pacchetto {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--scuro-b);
  background: var(--teal);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.card-pacchetto h3 {
  color: #fff;
  font-size: 26px;
  margin-bottom: 8px;
}
.card-pacchetto p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15.5px;
}
.card-pacchetto p.prezzo-pacchetto {
  font-size: 40px;
  font-weight: 700;
  color: var(--teal);
  margin: 6px 0 18px;
  line-height: 1;
}
.azioni-pacchetto {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.link-chiaro {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.link-chiaro:hover {
  color: var(--teal);
}

/* Tendine servizi infermieristici */
.gruppo-infermieristico {
  border: 1px solid var(--hairline);
  border-radius: var(--r-m);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.gruppo-infermieristico summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  transition: background var(--transizione);
}
.gruppo-infermieristico summary::-webkit-details-marker {
  display: none;
}
.gruppo-infermieristico summary:hover {
  background: var(--ice);
}
.gruppo-infermieristico summary::after {
  content: "+";
  margin-left: auto;
  font-size: 22px;
  font-weight: 400;
  color: var(--navy);
  transition: transform var(--transizione);
}
.gruppo-infermieristico[open] summary::after {
  transform: rotate(45deg);
}
.righe-prestazioni {
  padding: 4px 24px 16px;
}
.riga-prestazione {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.riga-prestazione + .riga-prestazione {
  border-top: 1px solid var(--hairline);
}
.riga-prestazione .nome {
  font-weight: 500;
}
.riga-prestazione .da {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.riga-prestazione .da strong {
  color: var(--navy);
  font-size: 17px;
}
.nota-prezzi {
  font-size: 14.5px;
  color: var(--muted);
  background: var(--ice);
  border-radius: var(--r-m);
  padding: 18px 22px;
  margin-top: 20px;
}

/* Ricerca: stato vuoto */
.ricerca-vuota {
  text-align: center;
  padding: 72px 24px;
  color: var(--muted);
}
.ricerca-vuota strong {
  color: var(--ink);
}
[hidden] {
  display: none !important;
}
mark.ricerca-match {
  background: var(--teal-tenue);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* ---- Pagina singolo servizio ---------------------------------------------- */
.briciole {
  font-size: 13.5px;
  color: var(--muted);
  padding: 22px 0 0;
}
.briciole a {
  color: var(--muted);
  text-decoration: none;
}
.briciole a:hover {
  color: var(--navy);
  text-decoration: underline;
}
.layout-servizio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  padding: 32px 0 96px;
  align-items: start;
}
.layout-servizio h1 {
  font-size: clamp(30px, 4vw, 44px);
}
.sottotitolo-locale {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 28px;
}
.corpo-servizio h2 {
  font-size: 24px;
  margin-top: 40px;
}
.corpo-servizio h3 {
  font-size: 19px;
  margin-top: 28px;
}
.corpo-servizio p,
.corpo-servizio li {
  color: var(--ink);
}
.corpo-servizio ul {
  padding-left: 22px;
}
.colonna-lato {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.box-breve {
  background: var(--ice);
  border-radius: var(--r-m);
  padding: 26px;
}
.box-breve h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin-bottom: 14px;
}
.box-breve dl {
  margin: 0;
}
.box-breve dt {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 12px;
}
.box-breve dd {
  margin: 2px 0 0;
  font-weight: 500;
}
.box-prenota {
  background: linear-gradient(160deg, var(--scuro-a), var(--scuro-b));
  color: #fff;
  border-radius: var(--r-m);
  padding: 26px;
}
.box-prenota h2 {
  color: #fff;
  font-size: 20px;
}
.box-prenota p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}
.box-prenota .bottone {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
@media (max-width: 900px) {
  .layout-servizio {
    grid-template-columns: 1fr;
  }
  .colonna-lato {
    position: static;
  }
}

/* ---- Moduli ---------------------------------------------------------------- */
.blocco-modulo {
  background: var(--ice);
  border-radius: var(--r-l);
  padding: 56px;
  max-width: 760px;
  margin: 0 auto;
}
.blocco-modulo h2 {
  font-size: clamp(26px, 3.2vw, 36px);
}
.blocco-modulo > p {
  color: var(--muted);
  margin-bottom: 32px;
}
.modulo {
  display: grid;
  gap: 20px;
}
.campo {
  display: grid;
  gap: 7px;
}
.campo label {
  font-weight: 700;
  font-size: 14.5px;
}
.campo .aiuto {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}
.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-s);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--transizione);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--teal);
}
.campo textarea {
  min-height: 120px;
  resize: vertical;
}
.due-colonne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) {
  .due-colonne {
    grid-template-columns: 1fr;
  }
  .blocco-modulo {
    padding: 32px 22px;
  }
}
.campo-consenso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-s);
  padding: 14px 16px;
}
.campo-consenso input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--teal);
}
.campo-consenso a {
  color: var(--navy);
}
.esito-modulo {
  border-radius: var(--r-s);
  padding: 16px 20px;
  font-weight: 500;
}
.esito-modulo.ok {
  background: var(--teal-tenue);
  color: var(--teal-scuro);
  border: 1px solid var(--teal);
}
.esito-modulo.errore {
  background: #fdf0ef;
  color: #a3372e;
  border: 1px solid #dfa49e;
}
.riquadro-whatsapp {
  background: var(--teal-tenue);
  border: 1.5px solid var(--teal);
  border-radius: var(--r-m);
  padding: 22px 24px;
  font-size: 14.5px;
  color: var(--muted);
}
.riquadro-whatsapp strong {
  color: var(--ink);
}
.riquadro-whatsapp-titolo {
  font-size: 17px;
  margin-bottom: 6px;
}
.riquadro-whatsapp .bottone {
  margin-top: 4px;
}

/* Guida ai codici delle ricette (con facsimile) */
.guida-nre {
  margin-top: 4px;
}
.guida-nre summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-scuro);
  list-style: none;
}
.guida-nre summary::-webkit-details-marker {
  display: none;
}
.guida-nre summary::before {
  content: "+ ";
}
.guida-nre[open] summary::before {
  content: "− ";
}
.guida-nre summary:hover {
  text-decoration: underline;
}
.guida-nre-corpo {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-s);
  padding: 18px 20px 10px;
  margin-top: 10px;
}
.guida-nre-corpo p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}
.guida-nre-corpo p strong {
  color: var(--ink);
}
.facsimile-ricette {
  width: 100%;
  height: auto;
  margin: 6px 0 10px;
}

/* ---- Offerte e giornate ---------------------------------------------------- */
/* Fascia arancione dal logo dello Scoccianti Club (#F07F06) */
.sezione-offerte {
  padding: 40px 0 48px;
}
.fascia-offerte {
  max-width: 1400px;
  margin: 0 auto;
  padding: 72px 10px 76px;
  border-radius: var(--r-l);
  background: linear-gradient(160deg, #fef3e6, #fce4c8);
}
.occhiello-offerte {
  color: #b65b00;
}
.fascia-offerte .evidenzia {
  color: #d96c00;
}
.fascia-offerte .card-offerta {
  background: #fff;
  box-shadow: 0 6px 24px rgba(240, 127, 6, 0.08);
}
.fascia-offerte .card-offerta .badge-offerta.teal {
  background: #f07f06;
}
.fascia-offerte .quando {
  color: #b65b00;
}
.fascia-offerte .bottone-secondario {
  color: #b65b00;
  border-color: #d96c00;
}
.fascia-offerte .bottone-secondario:hover {
  background: #fdeeda;
  color: #b65b00;
}
@media (max-width: 900px) {
  .fascia-offerte {
    margin: 0 10px;
    padding: 48px 0 52px;
  }
}

.griglia-offerte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}
.card-offerta {
  display: flex;
  flex-direction: column;
  background: var(--ice);
  border: none;
}
.card-offerta .badge-offerta {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--navy);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.card-offerta .badge-offerta.teal {
  background: var(--teal);
}
.card-offerta h3 {
  font-size: 22px;
}
.card-offerta .quando {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-scuro);
  margin-bottom: 8px;
}
.card-offerta p {
  color: var(--muted);
  flex-grow: 1;
}
.card-offerta .in-arrivo {
  font-style: italic;
  color: var(--muted);
}

/* ---- Blog ------------------------------------------------------------------ */
.griglia-blog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.card-articolo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #fff;
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.card-articolo:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombra-hover);
}
.card-articolo .copertina {
  height: 170px;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
.copertina-teal {
  background: linear-gradient(140deg, var(--teal), var(--teal-scuro));
}
.copertina-navy {
  background: linear-gradient(140deg, var(--navy), var(--scuro-b));
}
.copertina-ghiaccio {
  background: linear-gradient(140deg, var(--ice-scuro), var(--ice));
}
.copertina-notte {
  background: linear-gradient(140deg, var(--scuro-a), var(--scuro-b));
}
.card-articolo .copertina svg {
  width: 88px;
  opacity: 0.5;
}
.copertina-ghiaccio svg path {
  fill: var(--navy);
}
.card-articolo .testo {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.card-articolo time {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-scuro);
  margin-bottom: 8px;
}
.card-articolo h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.card-articolo p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}
.articolo {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.articolo-testata {
  margin-bottom: 40px;
}
.articolo-testata time {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-scuro);
}
.articolo-testata h1 {
  font-size: clamp(32px, 4.4vw, 46px);
  margin-top: 10px;
}
.articolo-testata .riassunto {
  font-size: 19px;
  color: var(--muted);
}
.articolo-corpo h2 {
  font-size: 25px;
  margin-top: 44px;
}
.articolo-corpo h3 {
  font-size: 20px;
  margin-top: 30px;
}
.articolo-corpo a {
  color: var(--teal-scuro);
}
.articolo-corpo ul {
  padding-left: 22px;
}

/* ---- Reparti --------------------------------------------------------------- */
.griglia-reparti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.card-reparto {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: var(--ice);
  background-size: cover;
  background-position: center;
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.card-reparto:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombra-hover);
}
/* Foto in trasparenza sotto il contenuto: velo azzurro ghiaccio,
   più denso in basso dove c'è il testo, che resta scuro e leggibile */
.card-reparto.con-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(238, 243, 249, 0.62) 0%,
    rgba(238, 243, 249, 0.74) 55%,
    rgba(244, 248, 252, 0.94) 100%
  );
}
.card-reparto > * {
  position: relative;
}
.card-reparto h3 {
  font-size: 23px;
  margin-bottom: 6px;
}
.card-reparto p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}
.card-reparto.con-foto p {
  color: var(--ink);
  opacity: 0.75;
}

/* ---- Contatti --------------------------------------------------------------- */
.griglia-contatti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 64px;
}
.card-contatto {
  text-align: center;
  padding: 34px 26px;
}
.card-contatto .icona {
  font-size: 28px;
  margin-bottom: 10px;
  display: inline-block;
}
.card-contatto h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.card-contatto a {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  word-break: break-word;
}
.card-contatto a:hover {
  text-decoration: underline;
}
.tabella-orari {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.tabella-orari caption {
  text-align: left;
  font-weight: 700;
  font-size: 18px;
  padding-bottom: 12px;
  color: var(--ink);
}
.tabella-orari th,
.tabella-orari td {
  text-align: left;
  padding: 12px 8px;
  border-top: 1px solid var(--hairline);
}
.tabella-orari th {
  font-weight: 500;
  color: var(--muted);
}
.tabella-orari td {
  font-weight: 700;
  text-align: right;
}
.due-tabelle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto 72px;
}
@media (max-width: 760px) {
  .due-tabelle {
    grid-template-columns: 1fr;
  }
}

/* Mappa click-to-load */
.mappa-blocco {
  border-radius: var(--r-l);
  overflow: hidden;
  background: linear-gradient(160deg, var(--scuro-a), var(--scuro-b));
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.mappa-attesa {
  color: #fff;
  padding: 40px;
  max-width: 480px;
}
.mappa-attesa h3 {
  color: #fff;
  font-size: 24px;
}
.mappa-attesa p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}
.mappa-blocco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Footer ----------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--hairline);
  background: var(--ice);
  padding: 72px 0 40px;
  margin-top: 96px;
}
.footer-griglia {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
.footer-logo svg,
.footer-logo img {
  height: 40px;
  width: auto;
  margin-bottom: 18px;
}
.footer p,
.footer li,
.footer address {
  font-size: 14.5px;
  color: var(--muted);
  font-style: normal;
}
.footer h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin-bottom: 16px;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.footer a {
  color: var(--muted);
  text-decoration: none;
}
.footer a:hover {
  color: var(--navy);
  text-decoration: underline;
}
.footer-gestisci-cookie {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 14.5px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}
.footer-gestisci-cookie:hover {
  color: var(--navy);
  text-decoration: underline;
}
.footer-base {
  border-top: 1px solid var(--hairline);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .footer-griglia {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .footer-griglia {
    grid-template-columns: 1fr;
  }
}

/* ---- Banner cookie ----------------------------------------------------------- */
.banner-cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-l);
  box-shadow: 0 24px 70px rgba(18, 44, 80, 0.25);
  padding: 26px 28px;
}
.banner-cookie h2 {
  font-size: 18px;
  margin-bottom: 8px;
}
.banner-cookie p {
  font-size: 14px;
  color: var(--muted);
}
.banner-cookie .azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.banner-cookie .azioni .bottone {
  padding: 10px 18px;
  font-size: 14.5px;
}
.pannello-preferenze .voce-preferenza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}
.pannello-preferenze .voce-preferenza:first-of-type {
  margin-top: 14px;
}
.voce-preferenza .descr {
  font-size: 13.5px;
  color: var(--muted);
}
.voce-preferenza strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
}
.voce-preferenza .sempre {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-scuro);
  white-space: nowrap;
}
.interruttore {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.interruttore input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  cursor: pointer;
}
.interruttore .binario {
  position: absolute;
  inset: 0;
  background: var(--ice-scuro);
  border-radius: 999px;
  transition: background var(--transizione);
  pointer-events: none;
}
.interruttore .binario::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(18, 44, 80, 0.3);
  transition: transform var(--transizione);
}
.interruttore input:checked + .binario {
  background: var(--teal);
}
.interruttore input:checked + .binario::after {
  transform: translateX(20px);
}

/* ---- Gestione (dashboard riservata) ------------------------------------------ */
.gestione {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.gestione-accesso {
  max-width: 420px;
  margin: 96px auto;
  text-align: center;
}
.gestione-accesso .modulo {
  text-align: left;
  margin-top: 26px;
}
.gestione-schede {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 32px 0 24px;
}
.gestione-testa {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.gestione input[type="search"] {
  font: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-s);
  min-width: 260px;
}
.tabella-gestione {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-top: 8px;
}
.tabella-gestione th {
  text-align: left;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 2px solid var(--hairline);
  white-space: nowrap;
}
.tabella-gestione td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.tabella-gestione td.dettagli {
  white-space: pre-line;
  max-width: 420px;
}
.tabella-gestione .elimina {
  background: none;
  border: 1px solid #dfa49e;
  color: #a3372e;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-s);
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--transizione);
}
.tabella-gestione .elimina:hover {
  background: #fdf0ef;
}
.gestione-vuoto {
  text-align: center;
  color: var(--muted);
  padding: 56px 0;
}
@media (max-width: 800px) {
  .tabella-gestione thead {
    display: none;
  }
  .tabella-gestione tr {
    display: block;
    border-bottom: 1px solid var(--hairline);
    padding: 12px 0;
  }
  .tabella-gestione td {
    display: block;
    border: none;
    padding: 4px 0;
  }
}

/* ---- Pagina di testo (privacy) ------------------------------------------------ */
.pagina-testo {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.pagina-testo h1 {
  font-size: clamp(32px, 4vw, 44px);
}
.pagina-testo h2 {
  font-size: 24px;
  margin-top: 44px;
}
.pagina-testo h3 {
  font-size: 19px;
  margin-top: 28px;
}
.pagina-testo ul {
  padding-left: 22px;
}
.avviso-legale {
  background: var(--ice);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--muted);
  margin: 24px 0;
}

/* ---- Chi siamo ----------------------------------------------------------------- */
.numeri-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 0 auto 72px;
}
.numero-card {
  background: var(--ice);
  border-radius: var(--r-m);
  padding: 30px 26px;
  border: none;
}
.numero-card h3 {
  font-size: 19px;
  color: var(--navy);
  margin-bottom: 8px;
}
.numero-card p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}
.prosa {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 18px;
}
.prosa p {
  margin-bottom: 1.4em;
}
.fascia-scura {
  background: linear-gradient(160deg, var(--scuro-a), var(--scuro-b));
  border-radius: var(--r-l);
  color: #fff;
  text-align: center;
  padding: 72px 40px;
}
.fascia-scura h2 {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 38px);
  max-width: 24ch;
  margin: 0 auto 14px;
}
.fascia-scura p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 52ch;
  margin: 0 auto 24px;
}

/* ---- Pagina "La Farmacia" (racconto per immagini) -------------------------------- */
.lf {
  background: #0f2440;
}
.lf-scena {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.lf-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  .lf-scena.lf-attiva .lf-foto {
    animation: lf-zoom 18s ease-in-out infinite alternate;
  }
}
@keyframes lf-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
.lf-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10, 25, 46, 0.32), rgba(10, 25, 46, 0.66));
}
.lf-velo-scuro {
  background: linear-gradient(rgba(10, 25, 46, 0.5), rgba(10, 25, 46, 0.85));
}
.lf-contenuto {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 860px;
  padding: 96px 24px;
}
.lf-occhiello {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--teal);
  margin-bottom: 18px;
}
.lf-titolo {
  color: #fff;
  font-size: clamp(38px, 7vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 28px rgba(0, 0, 0, 0.45);
  margin-bottom: 20px;
}
.lf-testo {
  font-size: clamp(17px, 2.2vw, 20px);
  color: rgba(255, 255, 255, 0.94);
  max-width: 34em;
  margin: 0 auto;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.lf-didascalia {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #9fc3dd;
  margin: 0;
}
.lf-freccia {
  position: absolute;
  bottom: 52px;
  left: 50%;
  margin-left: -12px;
  z-index: 2;
  color: #fff;
  font-size: 24px;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .lf-freccia {
    animation: lf-rimbalzo 1.8s ease-in-out infinite;
  }
}
@keyframes lf-rimbalzo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(9px); }
}
.lf-cta-testuale {
  color: var(--teal);
  font-weight: 700;
  font-size: 16.5px;
  text-decoration: none;
}
.lf-cta-testuale:hover {
  text-decoration: underline;
}

/* Apparizione in sequenza */
.lf-el {
  opacity: 0;
  transform: translateY(26px);
}
@media (prefers-reduced-motion: no-preference) {
  .lf-el {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lf-el.r2 { transition-delay: 0.15s; }
  .lf-el.r3 { transition-delay: 0.3s; }
  .lf-el.r4 { transition-delay: 0.45s; }
}
.lf-vista .lf-el,
.lf-el.lf-subito {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .lf-el {
    opacity: 1;
    transform: none;
  }
}

/* Interludio 1959 */
.lf-interludio {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(720px circle at 50% 38%, rgba(64, 188, 198, 0.16), transparent 70%), #122c50;
}
.lf-anno {
  font-size: clamp(64px, 12vw, 130px);
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 26px;
}
.lf-interludio-testo {
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  max-width: 26em;
  margin: 0 auto 22px;
}
.lf-glow {
  color: #7fe0e8;
}
.lf-interludio-sotto {
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.75);
}

/* Le altre stanze */
.lf-stanze {
  background: #0f2440;
  padding: 110px 24px;
}
.lf-stanze-int {
  max-width: 880px;
  margin: 0 auto;
}
.lf-stanze .lf-occhiello {
  text-align: center;
  margin-bottom: 40px;
}
.lf-stanza {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 40px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid rgba(64, 188, 198, 0.25);
}
.lf-stanza h3 {
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  margin: 0;
}
.lf-stanza p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15.5px;
  margin: 0;
}
.lf-stanze-nota {
  text-align: center;
  color: var(--teal);
  font-weight: 700;
  font-size: 16px;
  margin-top: 44px;
}
@media (max-width: 640px) {
  .lf-stanza {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* I numeri */
.lf-numeri {
  background: #0b1a2e;
  padding: 96px 24px;
}
.lf-numeri-int {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  text-align: center;
}
.lf-numero-valore {
  display: block;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  color: var(--teal);
  line-height: 1.1;
}
.lf-numero-etichetta {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #9fc3dd;
}
@media (max-width: 700px) {
  .lf-numeri-int {
    grid-template-columns: 1fr 1fr;
  }
}

/* Finale */
.lf-badge {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 8px 18px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin-bottom: 10px;
}
.lf-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.lf-bottone-vetro {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lf-bottone-vetro:hover {
  background: rgba(255, 255, 255, 0.26);
}
.lf-indirizzo {
  margin-top: 26px;
  font-size: 13.5px;
  color: #9fc3dd;
}

/* Navigazione a puntini */
.lf-punti {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lf-punto {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.65);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.lf-punto:hover {
  border-color: #fff;
}
.lf-punto.attivo {
  background: var(--teal);
  border-color: var(--teal);
}
.lf-punto-etichetta {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(15, 36, 64, 0.85);
  border-radius: 6px;
  padding: 4px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transizione);
}
.lf-punto:hover .lf-punto-etichetta,
.lf-punto:focus-visible .lf-punto-etichetta {
  opacity: 1;
}
@media (max-width: 820px) {
  .lf-punti {
    display: none;
  }
}
/* La pagina termina scura: il footer chiaro riprende subito dopo */
.lf + * {
  margin-top: 0;
}

/* ---- Animazioni di ingresso ----------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .rivela {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.js .rivela.visibile {
    opacity: 1;
    transform: none;
  }
}

/* ---- Stampa --------------------------------------------------------------------- */
@media print {
  .header,
  .footer,
  .banner-cookie,
  .fascia-apertura {
    display: none;
  }
}