/* ==========================================================================
   components.css — nav, footer, bottoni, chip, card, form, accordion, marquee
   ========================================================================== */

/* =========================
   Bottoni
   ========================= */
.btn {
  --scorri: cubic-bezier(.65, 0, .35, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* il colore del testo cambia in fretta: a metà del riempimento non resta grigio */
  transition: color .22s linear, background .4s var(--ease),
              border-color .4s var(--ease), box-shadow .4s var(--ease);
}

/* Al passaggio del mouse un riempimento chiaro entra da sinistra e, quando
   il mouse se ne va, esce verso destra (cambia il punto d'origine). Il testo
   scivola appena e accanto compare una freccia: il bottone dice "si va".
   Tutto intorno resta il filo verde del bordo. Niente colori scuri al passaggio. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--scorri);
  pointer-events: none;
}
/* testo e freccia: li crea main.js (senza JavaScript resta il riempimento) */
.btn__testo { position: relative; display: inline-block; transition: transform .5s var(--scorri); }
.btn__freccia {
  position: absolute;
  left: calc(100% + .45em);
  top: 50%;
  width: .85em;
  height: .85em;
  margin-top: -.425em;
  opacity: 0;
  transform: translateX(-.5em);
  transition: opacity .3s var(--ease), transform .5s var(--scorri);
}
.btn__freccia svg { display: block; width: 100%; height: 100%; }

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.btn--primary::before { background: var(--btn-bg-hover); }

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--secondary::before { background: var(--bg-4); }

@media (hover: hover) {
  .btn:hover::before,
  .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
  .btn--primary:hover,
  .btn--primary:focus-visible {
    color: var(--btn-fg-hover);
    box-shadow: 0 12px 26px -16px rgb(44 53 42 / .55);
  }
  .btn--secondary:hover,
  .btn--secondary:focus-visible { border-color: var(--forest); color: var(--text-2); }
  /* il gruppo testo + freccia resta centrato: il testo si sposta di metà
     dello spazio che occupa la freccia */
  .btn:hover .btn__testo,
  .btn:focus-visible .btn__testo { transform: translateX(-.65em); }
  .btn:hover .btn__freccia,
  .btn:focus-visible .btn__freccia { opacity: 1; transform: none; }
}

.btn--whatsapp svg { flex: none; }

/* link freccia */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 28px;
  padding-block: 2px;
  font-weight: 600;
  font-size: 15px;
  color: var(--terra);
  text-decoration: none;
}
.arrow-link::after {
  content: '';
  width: 18px; height: 1px;
  background: currentColor;
  transition: width var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
  .arrow-link:hover { color: var(--terra-hi); }
  .arrow-link:hover::after { width: 30px; }
}

/* =========================
   Card
   ========================= */
.card {
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-soft);
  padding: clamp(20px, 2.4vw, 34px);
}

/* =========================
   Header / Nav
   ========================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Il vetro smerigliato sta su un livello a parte, non sull'header.
   Un backdrop-filter (come un transform) sull'header lo renderebbe il
   riferimento dei suoi figli `position: fixed`: il menu del telefono, che è
   dentro l'header, si aprirebbe alto quanto la barra invece che a tutto
   schermo. Succedeva appena la pagina veniva scorsa. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-scrolled { border-bottom-color: var(--line-2); }
.site-header.is-hidden { transform: translateY(-100%); }
/* a menu aperto la barra non si muove e non ha fondo: il pannello è già pieno */
.site-header.is-menu-open { transform: none; transition: none; border-bottom-color: transparent; }
.site-header.is-menu-open::before { opacity: 0; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  height: var(--nav-height);
}

/* area di tocco di almeno 44px anche quando il logo è basso (telefoni stretti) */
.nav__logo { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
/* marchio definitivo, versione orizzontale "colori" (guida d'uso del
   marchio: sul sito, su fondi chiari). Mai filtri o ricolorazioni: per i
   fondi scuri c'è il file "negativo". Larghezza minima 180 px. */
.nav__logo img {
  display: block;
  width: auto; height: 44px;
  transition: opacity var(--dur-micro) var(--ease);
}
.nav__logo:hover img { opacity: 1; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
}
.nav__toggle span {
  display: block;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* pannello mobile a schermo pieno */
.nav__panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-height) + var(--space-m)) var(--pad) var(--space-m);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s .35s;
}
.nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--ease);
}

.nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.nav__list a {
  font-family: var(--font-display);
  font-size: clamp(30px, 9vw, 46px);
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease);
}
@media (hover: hover) { .nav__list a:hover { color: var(--terra); } }
.nav__list a[aria-current="page"] { color: var(--terra); }

.nav__panel .btn { margin-top: var(--space-l); align-self: flex-start; }
.nav__extra { display: none; }

@media (min-width: 900px) {
  .nav__toggle { display: none; }
  .nav__panel {
    position: static;
    inset: auto;
    background: transparent;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(20px, 3vw, 44px);
    padding: 0;
    opacity: 1;
    visibility: visible;
    flex: 1;
    transition: none;
  }
  .nav__list { flex-direction: row; gap: clamp(20px, 2.6vw, 40px); }
  .nav__list a {
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--dim);
    position: relative;
    /* area cliccabile di almeno 24px anche se il testo è basso (WCAG 2.5.8) */
    display: inline-flex;
    align-items: center;
    min-height: 30px;
  }
  .nav__list a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%; bottom: 2px;
    height: 1px;
    background: var(--terra);
    transition: right .35s var(--ease);
  }
  .nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--text); }
  .nav__list a:hover::after,
  .nav__list a[aria-current="page"]::after { right: 0; }
  .nav__panel .btn { margin-top: 0; padding: 12px 24px; font-size: 14px; }
}

/* CTA sticky mobile — l'aspetto completo è in mobile.css */
.sticky-cta {
  position: fixed;
  left: var(--space-s); right: var(--space-s);
  bottom: var(--space-s);
  z-index: 90;
  display: flex;
  justify-content: center;
  transform: translateY(150%);
  transition: transform .4s var(--ease);
  pointer-events: none;
}
.sticky-cta.is-visible { transform: translateY(0); pointer-events: auto; }
.sticky-cta .btn { width: 100%; max-width: 420px; box-shadow: var(--shadow-lift); }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* =========================
   Footer
   ========================= */
.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  padding-top: clamp(60px, 8vw, 110px);
  margin-top: clamp(60px, 9vw, 140px);
  overflow: hidden;
}
/* il marchio nel piede: orizzontale da computer, a bandiera da telefono
   (il <picture> sceglie il file); intorno resta lo spazio libero della guida */
.footer-marchio { margin: 0; }
.footer-marchio img {
  display: block;
  width: clamp(280px, 30vw, 430px);
  height: auto;
}
.footer-grid {
  display: grid;
  gap: var(--space-m);
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line-2);
  margin-top: clamp(24px, 3vw, 48px);
}
.footer-col h2,
.footer-col h3 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 18px;
}
.footer-col address,
.footer-col p,
.footer-col a { color: var(--dim); font-style: normal; line-height: 1.9; }
.footer-col a { display: inline-block; text-decoration: none; transition: color .3s var(--ease); }
@media (hover: hover) { .footer-col a:hover { color: var(--text); } }
.footer-links { list-style: none; padding: 0; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5em 2em;
  padding-block: 22px 30px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--dim-2);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-l); }
}

/* =========================
   Form
   ========================= */
.form { display: grid; gap: var(--space-s); }
.form label { font-weight: 600; display: block; margin-bottom: .4em; font-size: 14.5px; letter-spacing: .02em; }
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  transition: border-color .3s var(--ease);
}
.form input::placeholder,
.form textarea::placeholder { color: var(--dim-2); }
.form textarea { min-height: 9em; resize: vertical; }
.form input:hover,
.form select:hover,
.form textarea:hover { border-color: var(--line); }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 1px;
  border-color: transparent;
}
.form .field-error {
  display: none;
  color: var(--terra-hi);
  font-size: 14px;
  margin-top: .35em;
}
.form .field.is-invalid .field-error { display: block; }
.form .field.is-invalid input,
.form .field.is-invalid textarea { border-color: var(--terra); }
.form-hint { font-size: 14px; color: var(--dim); }

/* =========================
   Accordion FAQ
   ========================= */
.faq { display: grid; gap: 8px; }
.faq details {
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-soft);
  transition: border-color .35s var(--ease);
}
.faq details[open] { border-color: var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 1.15rem 1.3rem;
  font-weight: 600;
  color: var(--text-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq__icon {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
  transition: transform .4s var(--ease);
}
.faq summary .faq__icon::before,
.faq summary .faq__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--terra);
  border-radius: 2px;
}
.faq summary .faq__icon::before { width: 14px; height: 1.5px; }
.faq summary .faq__icon::after { width: 1.5px; height: 14px; }
.faq details[open] summary .faq__icon { transform: rotate(135deg); }
.faq .faq__body { padding: 0 1.3rem 1.3rem; color: var(--dim); }
.faq .faq__body > * + * { margin-top: .6em; }

/* =========================
   Marquee recensioni
   ========================= */
.marquee {
  overflow: hidden;
  display: flex;
  user-select: none;
  padding-block: 4px;
}
.marquee__track {
  display: flex;
  gap: var(--space-s);
  flex: none;
  padding-right: var(--space-s);
  will-change: transform;
  animation: marquee 52s linear infinite;
}
/* metà track: i contenuti sono duplicati, così il loop non lascia vuoti */
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Con JavaScript il nastro diventa uno scorrimento vero: avanza da solo, ma
   il dito (o il mouse) lo prende e lo sposta come qualsiasi carosello.
   L'animazione CSS resta solo come ripiego senza JavaScript. */
.marquee.is-native {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.marquee.is-native::-webkit-scrollbar { display: none; }
.marquee.is-native.is-dragging { cursor: grabbing; }
.marquee.is-native .marquee__track { animation: none; }

.review {
  width: min(80vw, 24rem);
  flex: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.review p { font-family: var(--font-display); font-size: 19px; line-height: 1.45; color: var(--text-2); }
.review .stars { color: var(--terra); letter-spacing: .12em; font-size: 13px; }
.review cite { font-style: normal; font-weight: 600; font-size: 14px; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* =========================
   Reveal "a porta" sulle immagini
   Stato iniziale solo con JS attivo e senza reduced-motion.
   ========================= */
html.js:not(.reduced-motion) .reveal-door { clip-path: inset(0 50% 0 50%); }
html.js:not(.reduced-motion) .reveal-door.is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-wipe) var(--ease-out);
}

/* =========================
   Sezioni
   ========================= */
.section { padding-block: clamp(70px, 10vh, 180px); position: relative; }
.section--alt { background: var(--bg-2); }
.section__head { max-width: 46rem; margin-bottom: clamp(32px, 4.5vw, 64px); }
.section__head h2 { margin-top: 18px; }
.section__head p { margin-top: 1em; }
/* quando la testata è anche il contenitore di pagina (recensioni) resta
   allineata alle altre sezioni: larga come il contenitore, testo stretto */
.wrap.section__head { max-width: min(2000px, 96vw); }
.wrap.section__head > * { max-width: 46rem; }

/* box segnaposto per le immagini in arrivo */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--sage) 7%, transparent) 0 12px,
      transparent 12px 24px),
    var(--bg-3);
  border: 1px dashed var(--line);
  color: var(--dim-2);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: 1em;
  overflow: hidden;
}

/* =========================================================
   Illustrazioni a linea
   Disegno continuo, tratto sottile: il registro grafico del
   sito. Si animano con stroke-dashoffset.
   ========================================================= */
.illu {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent-soft);
  overflow: visible;
}
.illu--terra { color: var(--terra); }
.illu--peach { color: var(--peach); }
.illu--sky   { color: var(--sky); }
.illu .dot { fill: currentColor; stroke: none; }
.illu .faint { opacity: .45; }

/* curva di crescita: il segno ricorrente del sito */
.growth-curve {
  width: 100%;
  height: auto;
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.2;
  opacity: .5;
  overflow: visible;
}
.growth-curve .p-dot { fill: var(--terra); stroke: none; }

/* =========================================================
   Annotazioni disegnate a mano (rough-notation)
   Il markup resta pulito: la libreria disegna un SVG sopra.
   ========================================================= */
.annotate { position: relative; }

/* =========================================================
   Nota clinica — box informativo dal tono medico ma caldo
   ========================================================= */
.note {
  display: flex;
  gap: var(--space-s);
  padding: clamp(16px, 2vw, 26px);
  background: color-mix(in srgb, var(--sage) 8%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  border-left-width: 3px;
  border-left-color: var(--terra);
}
.note__icon { flex: none; width: 26px; color: var(--terra); }
.note p { color: var(--dim); font-size: 15.5px; }
.note strong { color: var(--text); }

/* =========================================================
   Età / tappe — pillola con l'età di riferimento
   ========================================================= */
.age {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .35em .9em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--terra) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--terra) 35%, transparent);
  color: var(--terra-hi);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* =========================
   Sipario: schermata di caricamento fra le pagine
   Stesso aspetto del caricamento della home. Seguendo un link scende
   dall'alto e copre la pagina; la pagina nuova si apre già coperta e,
   quando è pronta, il sipario scivola via verso il basso.
   Il comportamento è in main.js; la classe d'arrivo la mette lo script
   nel <head>, così copre già dal primo disegno.
   ========================= */
.sipario {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: var(--bg);
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}
.sipario .loader__barra i { transition: transform .2s linear; }
/* il bordo che avanza: un filo nei colori del sito e un'ombra morbida, così
   il movimento si legge anche se il telo è dello stesso colore della pagina */
.sipario::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--terra), var(--sage));
  box-shadow: 0 10px 34px 6px rgb(44 53 42 / .16);
}
/* partenza: scende da sopra */
html.sipario-giu .sipario {
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: transform .6s cubic-bezier(.76, 0, .24, 1);
}
/* arrivo: copre subito... */
html.sipario-su .sipario {
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: none;
}
/* ...e a pagina pronta scende via, verso il basso */
html.sipario-su.sipario-via .sipario {
  transform: translateY(100%);
  pointer-events: none;
  transition: transform .75s cubic-bezier(.76, 0, .24, 1);
}
/* il contenuto del sipario si muove un po' meno del telo: dà profondità */
html.sipario-giu .sipario .loader__centro { animation: sipario-entra .6s cubic-bezier(.76, 0, .24, 1) both; }
html.sipario-su.sipario-via .sipario .loader__centro { transform: translateY(-38%); opacity: 0; transition: transform .75s cubic-bezier(.76, 0, .24, 1), opacity .35s linear; }
@keyframes sipario-entra { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sipario scuro: verde bosco della palette, logo e scritte color sabbia,
   così il passaggio fra le pagine si distingue dal fondo chiaro del sito.
   Arrivando in home dal sipario, anche il caricamento della home prende lo
   stesso colore (classe loader-scuro, messa nel <head>): niente salto di
   colore nel passaggio. */
.sipario,
html.loader-scuro .loader__anta { background: var(--forest); }
html.loader-scuro .loader__anta--sx { box-shadow: inset -1px 0 0 rgb(255 255 255 / .12); }
/* sul verde il marchio è il file "negativo" (niente filtri sul logo a colori) */
.loader__logo--scuro,
html.loader-scuro .loader__logo--chiaro { display: none; }
html.loader-scuro .loader__logo--scuro { display: block; }
.sipario .loader__pct,
html.loader-scuro .loader__pct { color: color-mix(in srgb, var(--bg) 85%, transparent); }
.sipario .loader__barra,
html.loader-scuro .loader__barra { background: color-mix(in srgb, var(--bg) 22%, transparent); }
.sipario .loader__barra i,
html.loader-scuro .loader__barra i { background: linear-gradient(90deg, var(--sage), var(--bg)); }
.sipario::after { background: linear-gradient(90deg, var(--sage), var(--bg)); box-shadow: 0 12px 38px 8px rgb(30 38 28 / .28); }

/* Con "riduci movimento" il sipario non scorre: compare e sparisce in
   dissolvenza (niente movimento, ma il passaggio si vede). Le durate hanno
   !important per vincere sulla regola che azzera tutte le transizioni. */
html.sipario-fade .sipario { transform: none; opacity: 0; }
html.sipario-fade.sipario-giu .sipario,
html.sipario-fade.sipario-su .sipario { opacity: 1; }
html.sipario-fade.sipario-giu .sipario { transition: opacity .35s linear !important; transition-duration: .35s !important; }
html.sipario-fade.sipario-su.sipario-via .sipario { transform: none; opacity: 0; transition: opacity .45s linear !important; transition-duration: .45s !important; }
html.sipario-fade .sipario .loader__centro { animation: none !important; transform: none !important; }
html.sipario-fade .sipario::after { display: none; }

/* =========================
   Credito: chi ha realizzato il sito
   Fascia verde bosco a tutta larghezza in fondo a ogni pagina.
   Testi in sabbia e salvia chiara (contrasto AA sul verde).
   ========================= */
.credito {
  background: var(--forest);
  color: var(--bg);
  padding-block: clamp(26px, 3vw, 38px) calc(clamp(26px, 3vw, 38px) + env(safe-area-inset-bottom));
}
.credito__dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 32px;
}
.credito__testo { display: flex; flex-direction: column; gap: .35em; }
.credito__etichetta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bg-4);
}
.credito__nome {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.1;
  color: var(--bg);
  text-decoration: none;
  /* area di tocco da 44px senza spostare l'impaginazione */
  padding-block: 8px;
  margin-block: -8px;
}
.credito__nome span { color: var(--sage); }
.credito__nota { font-size: 13.5px; color: var(--bg-4); }
.credito__link { display: flex; flex-wrap: wrap; gap: 10px; }
.credito__btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--bg) 45%, transparent);
  color: var(--bg);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.credito__btn:first-child { background: var(--bg); border-color: var(--bg); color: var(--forest); }
@media (hover: hover) {
  .credito__btn:hover { background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--bg); border-color: var(--bg); }
  .credito__btn:first-child:hover { background: var(--bg-4); color: var(--forest); }
  .credito__nome:hover { color: var(--bg-4); }
}
.credito a:focus-visible { outline-color: var(--bg); }
@media (max-width: 599px) {
  .credito__link, .credito__btn { width: 100%; }
  .credito__btn { justify-content: center; }
}

/* =========================
   Recensioni: nome e luogo in fondo alla scheda
   ========================= */
.review cite { margin-top: auto; display: block; }
.review cite span { display: block; margin-top: .25em; font-weight: 500; font-size: 13px; color: var(--dim-2); }

/* =========================
   Banner dei cookie (js/consenso.js)
   Al centro dello schermo, su un velo che scurisce la pagina finché non si
   sceglie. "Rifiuta" e "Accetta" identici: nessuna delle due scelte è spinta.
   Sta sotto il caricamento e il sipario, sopra il menu e la barra in basso.
   ========================= */
.consenso-scena {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgb(31 39 32 / .42);
  opacity: 0;
  transition: opacity .35s var(--ease);
  touch-action: none;
}
.consenso-scena.is-visibile { opacity: 1; }
.consenso-scena[hidden] { display: none; }
.consenso {
  position: relative;
  width: min(30rem, 100%);
  max-height: calc(100svh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 26px 26px 18px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 80px -30px rgb(20 26 20 / .6);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.consenso:focus { outline: none; }
.consenso.is-visibile { opacity: 1; transform: none; }
.consenso__titolo {
  margin: 0 2.4rem .45em 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-2);
}
.consenso__testo { margin: 0; color: var(--dim); }
.consenso__testo strong { color: var(--text); font-weight: 600; }
.consenso__testo a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.consenso__chiudi {
  position: absolute;
  top: 10px; right: 10px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.consenso__chiudi:hover,
.consenso__chiudi:focus-visible { background: var(--bg-4); color: var(--text-2); }
.consenso__scelte { display: grid; gap: 12px; margin: 16px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line-2); }
.consenso__scelte[hidden] { display: none; }
.consenso__voce {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  color: var(--dim);
  cursor: pointer;
}
.consenso__voce input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--forest); }
.consenso__voce strong { display: block; color: var(--text-2); font-weight: 600; }
.consenso__azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.consenso__btn {
  min-height: 46px;
  border: 1.5px solid var(--forest);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--forest);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.consenso__btn:hover,
.consenso__btn:focus-visible { background: var(--sage); color: #1F2720; }
.consenso__altro {
  grid-column: 1 / -1;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--forest);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (max-width: 599px) {
  .consenso { padding: 22px 18px 12px; font-size: 14px; border-radius: 18px; }
  .consenso__titolo { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .consenso-scena, .consenso { transition: none; }
  .consenso { transform: none; }
}
/* senza JavaScript non c'è niente da scegliere: niente pulsanti che non fanno nulla */
html:not(.js) [data-consenso-apri],
html:not(.js) [data-mappa-mostra] { display: none; }

/* "Preferenze cookie" nel piè di pagina */
.footer-cookie {
  padding: 12px 0;
  margin: -12px 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer-cookie:hover { color: var(--forest); }

/* =========================
   Mappa di Google in attesa del consenso
   ========================= */
.mappa {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(90deg, rgb(67 87 63 / .06) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgb(67 87 63 / .06) 0 1px, transparent 1px 46px),
    var(--bg-4);
}
.mappa.is-caricata { display: block; aspect-ratio: auto; background: none; }
.mappa__avviso {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 26rem;
  padding: 20px;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}
.mappa__avviso p { margin: 0; }
.mappa__info { font-size: 13.5px; color: var(--forest); text-decoration: underline; text-underline-offset: 2px; padding: 10px 6px; margin: -10px 0; }
@media (max-width: 767px) {
  .mappa { aspect-ratio: 4 / 3; }
}

/* recensioni ferme (poche schede): affiancate da computer, una sotto l'altra da telefono */
.recensioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-s);
  max-width: 56rem;
}
.recensioni .review { width: auto; }