/*
  Design system Vanda · componenti
  Versione 1.3 · 30 settembre 2026
  Richiede tokens.css caricato prima. I componenti leggono solo i ruoli (--vd-*),
  quindi cambiano faccia da soli dentro un [data-linea="..."].
*/

/* ---------- Base ---------- */

.vd-pagina {
  margin: 0;
  background: var(--vd-fondo);
  color: var(--vd-testo);
  font-family: var(--vd-font-lettura);
  font-size: var(--vd-t-corpo);
  line-height: var(--vd-interlinea-testo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vd-h1, .vd-h2, .vd-h3, .vd-h4 {
  margin: 0 0 var(--vd-s-4);
  font-family: var(--vd-font-titoli);
  font-weight: var(--vd-peso-titoli);
  line-height: var(--vd-interlinea-titoli);
  letter-spacing: var(--vd-traccia-titoli);
  color: var(--vd-titoli);
  text-wrap: balance;
}
.vd-h1 { font-size: var(--vd-t-h1); }
.vd-h2 { font-size: var(--vd-t-h2); }
.vd-h3 { font-size: var(--vd-t-h3); font-weight: var(--vd-peso-sottotitoli); }
.vd-h4 { font-size: var(--vd-t-h4); font-weight: var(--vd-peso-sottotitoli); }

.vd-lead {
  margin: 0 0 var(--vd-s-5);
  font-family: var(--vd-font-lettura);
  font-size: var(--vd-t-lead);
  line-height: 1.45;
  color: var(--vd-testo);
}

.vd-testo { max-width: var(--vd-misura); }
.vd-testo p { margin: 0 0 1em; }

.vd-nota {
  font-family: var(--vd-font-interfaccia);
  font-size: var(--vd-t-nota);
  line-height: 1.5;
  color: var(--vd-note);
}

/* Etichetta: la riga piccola in maiuscolo sopra un titolo */
.vd-etichetta {
  display: block;
  margin: 0 0 var(--vd-s-3);
  font-family: var(--vd-font-interfaccia);
  font-size: var(--vd-t-etichetta);
  font-weight: var(--vd-peso-interfaccia);
  letter-spacing: var(--vd-traccia-etichette);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--vd-etichetta);
}
[data-linea="cera-di-cleo"] .vd-etichetta { font-family: var(--vd-font-dati); font-weight: 400; }

/* Testo solo per chi usa un lettore di schermo */
.vd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Bottone ---------- */

.vd-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--vd-altezza-bottone);
  padding: 0.5rem 1.75rem;
  font-family: var(--vd-font-interfaccia);
  font-size: var(--vd-t-piccolo);
  font-weight: var(--vd-peso-interfaccia);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  color: var(--vd-su-azione);
  background: var(--vd-azione);
  border: 2px solid var(--vd-azione);
  border-radius: var(--vd-raggio-bottone);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.vd-bottone:hover { background: var(--vd-azione-hover); border-color: var(--vd-azione-hover); color: var(--vd-su-azione); }
.vd-bottone:active { transform: translateY(1px); }
.vd-bottone:focus-visible { outline: 3px solid var(--vd-fuoco); outline-offset: 3px; }

.vd-bottone--secondario { background: transparent; color: var(--vd-azione); }
.vd-bottone--secondario:hover { background: var(--vd-velo); color: var(--vd-azione-hover); border-color: var(--vd-azione-hover); }

.vd-bottone--grande { min-height: 3.75rem; padding: 0.625rem 2.25rem; font-size: var(--vd-t-corpo); }
.vd-bottone--piccolo { min-height: 2.75rem; padding: 0.375rem 1.25rem; font-size: var(--vd-t-nota); }   /* nella barra in cima: 44px, il minimo per il dito */
.vd-bottone__freccia { display: inline-block; line-height: 1; transition: transform 0.15s ease; }
.vd-bottone:hover .vd-bottone__freccia { transform: translateX(3px); }
.vd-bottone--pieno { display: flex; width: 100%; }

/* Su fondo scuro il bottone si rovescia */
.vd-bottone--chiaro { background: var(--vd-su-scuro); border-color: var(--vd-su-scuro); color: var(--vd-fondo-scuro); }
.vd-bottone--chiaro:hover { background: var(--vd-velo); border-color: var(--vd-velo); color: var(--vd-fondo-scuro); }

/* Link d'azione: la CTA delle email, che ripete la headline */
.vd-link-azione {
  font-family: var(--vd-font-interfaccia);
  font-size: var(--vd-t-piccolo);
  font-weight: var(--vd-peso-interfaccia);
  line-height: 1.4;
  color: var(--vd-azione);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.vd-link-azione::before { content: "\2192\00a0"; text-decoration: none; display: inline-block; }
.vd-link-azione:hover { color: var(--vd-azione-hover); }
.vd-link-azione:focus-visible { outline: 3px solid var(--vd-fuoco); outline-offset: 3px; border-radius: 2px; }

/* Gruppo CTA: il bottone più la riga che toglie il dubbio (spedizione, durata, garanzia) */
.vd-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vd-s-3); }
.vd-cta__nota {
  margin: 0;
  max-width: 30rem;
  font-family: var(--vd-font-interfaccia);
  font-size: var(--vd-t-nota);
  line-height: 1.5;
  color: var(--vd-note);
}
/* Variante in carattere dei dati e maiuscolo, come sulla landing di Cera di Cleo */
.vd-cta__nota--dati {
  font-family: var(--vd-font-dati);
  font-size: var(--vd-t-etichetta);
  letter-spacing: var(--vd-traccia-etichette);
  text-transform: uppercase;
  line-height: 1.6;
}

/* ---------- Prezzo ---------- */

.vd-prezzo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin: 0;
  font-family: var(--vd-font-interfaccia);
  color: var(--vd-prezzo);
}
.vd-prezzo__ora { font-size: var(--vd-t-prezzo); font-weight: 600; line-height: 1.1; }
.vd-prezzo__unita { font-size: var(--vd-t-nota); font-weight: 500; }
.vd-prezzo__pieno { font-size: var(--vd-t-piccolo); font-weight: 500; color: var(--vd-prezzo-pieno); text-decoration: line-through; }
.vd-prezzo__nota { flex-basis: 100%; font-size: var(--vd-t-nota); font-weight: 400; line-height: 1.5; color: var(--vd-note); }

/* ---------- Card prodotto ---------- */

.vd-card-prodotto {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--vd-fondo);
  color: var(--vd-testo);
  border: 1px solid var(--vd-bordo);
  border-radius: var(--vd-raggio-card);
  box-shadow: var(--vd-ombra-1);
}
.vd-card-prodotto::before { content: ""; display: block; height: 5px; background: var(--vd-marchio); }
.vd-card-prodotto__media { margin: 0; aspect-ratio: 4 / 3; background: #FFFFFF; border-bottom: 1px solid var(--vd-bordo); }
.vd-card-prodotto__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vd-card-prodotto__corpo { display: flex; flex-direction: column; flex: 1; gap: var(--vd-s-3); padding: var(--vd-s-5); }
.vd-card-prodotto__corpo .vd-etichetta { margin: 0; }
.vd-card-prodotto__nome {
  margin: 0;
  font-family: var(--vd-font-titoli);
  font-size: 1.5rem;
  font-weight: var(--vd-peso-sottotitoli);
  line-height: 1.2;
  letter-spacing: var(--vd-traccia-titoli);
  color: var(--vd-titoli);
}
[data-linea="cera-di-cleo"] .vd-card-prodotto__nome { font-size: 1.875rem; }
.vd-card-prodotto__cosa { margin: 0; font-family: var(--vd-font-lettura); font-size: var(--vd-t-piccolo); line-height: 1.5; }
.vd-card-prodotto__formato { margin: 0; font-family: var(--vd-font-interfaccia); font-size: var(--vd-t-nota); color: var(--vd-note); }
.vd-card-prodotto__fondo { display: flex; flex-direction: column; gap: var(--vd-s-4); margin-top: auto; padding-top: var(--vd-s-3); border-top: 1px solid var(--vd-bordo); }

/* ---------- Intestazione di landing ---------- */
/* Due fasce: la barra dei loghi, sempre su fondo chiaro, e la scena, che può cambiare fondo. */

.vd-intestazione { color: var(--vd-testo); }
.vd-intestazione__fascia { background: var(--vd-fondo); border-bottom: 1px solid var(--vd-bordo); }
.vd-intestazione__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vd-s-4);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--vd-s-3) var(--vd-s-5);
}
.vd-intestazione__logo { display: block; max-height: 5rem; max-width: min(18rem, 48%); width: auto; height: auto; }  /* i verticali si fermano sull'altezza, le scritte orizzontali (Gsh-Va) sulla larghezza */
.vd-intestazione__firma { display: block; height: 3.25rem; width: auto; }
.vd-intestazione__scena { background: var(--vd-fondo); }

/* Fascia sotto la barra: una riga che dice per chi è la pagina */
.vd-intestazione__annuncio {
  margin: 0;
  padding: var(--vd-s-3) var(--vd-s-5);
  background: var(--vd-fondo-scuro);
  color: var(--vd-su-scuro);
  font-family: var(--vd-font-titoli);
  font-size: 1.125rem;
  line-height: 1.4;
  text-align: center;
}
.vd-intestazione__annuncio::before,
.vd-intestazione__annuncio::after { content: "\2736"; color: var(--vd-marchio); margin: 0 0.9em; }
.vd-intestazione__corpo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--vd-s-7);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--vd-s-8) var(--vd-s-5);
}
.vd-intestazione--senza-figura .vd-intestazione__corpo { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.vd-intestazione__occhiello {
  margin: 0 0 var(--vd-s-4);
  font-family: var(--vd-font-lettura);
  font-style: italic;
  font-size: var(--vd-t-corpo);
  line-height: 1.5;
}
.vd-intestazione__titolo {
  margin: 0 0 var(--vd-s-5);
  font-family: var(--vd-font-titoli);
  font-size: var(--vd-t-h1);
  font-weight: var(--vd-peso-titoli);
  line-height: var(--vd-interlinea-titoli);
  letter-spacing: var(--vd-traccia-titoli);
  color: var(--vd-titoli);
  text-wrap: balance;
}
.vd-intestazione__titolo em { font-style: italic; color: var(--vd-titolo-enfasi, var(--vd-titoli)); }
.vd-intestazione__sottotitolo {
  margin: 0 0 var(--vd-s-6);
  max-width: 38rem;
  font-family: var(--vd-font-sottotitolo, var(--vd-font-lettura));
  font-style: var(--vd-stile-sottotitolo);
  font-size: var(--vd-t-lead);
  line-height: 1.45;
}
.vd-intestazione__sottotitolo--filetto { padding-top: var(--vd-s-5); border-top: 1px solid var(--vd-bordo); }
.vd-intestazione__sottotitolo:last-child { margin-bottom: 0; }
.vd-intestazione__prova {
  margin: var(--vd-s-6) 0 0;
  padding-top: var(--vd-s-4);
  border-top: 1px solid var(--vd-bordo);
  font-family: var(--vd-font-interfaccia);
  font-size: var(--vd-t-nota);
  line-height: 1.5;
  color: var(--vd-note);
}
.vd-intestazione__figura { margin: 0; }
.vd-intestazione__figura img { display: block; width: 100%; height: auto; border-radius: var(--vd-r-grande); box-shadow: var(--vd-ombra-2); }
.vd-intestazione__figura figcaption {
  margin: var(--vd-s-3) auto 0;
  max-width: 30rem;
  font-family: var(--vd-font-sottotitolo, var(--vd-font-lettura));
  font-style: italic;
  font-size: var(--vd-t-piccolo);
  line-height: 1.4;
  text-align: center;
}
/* Colonna destra con immagine e azione, come sulla landing di Cera di Cleo */
.vd-intestazione__lato { display: flex; flex-direction: column; gap: var(--vd-s-6); }
.vd-intestazione__lato .vd-cta { align-items: center; text-align: center; }
.vd-intestazione__lato .vd-cta__nota { max-width: 28rem; }

/* Fascia delle prove: quattro fatti in fila, sotto l'intestazione */
.vd-fascia-prove {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vd-s-3) var(--vd-s-6);
  margin: 0;
  padding: var(--vd-s-4) var(--vd-s-5);
  list-style: none;
  background: var(--vd-fondo-prove, var(--vd-marchio));
  color: var(--vd-su-prove);
  font-family: var(--vd-font-interfaccia);
  font-size: var(--vd-t-nota);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.vd-fascia-prove li::before { content: "\2736"; margin-right: 0.5em; font-size: 0.8em; }

/* Varianti della scena */
/* Apertura con la VSL (Insu Lean, Gsh-Va): tutto centrato, misure della landing, il video al posto della figura */
.vd-intestazione--vsl .vd-intestazione__corpo { grid-template-columns: minmax(0, 1fr); max-width: 64rem; text-align: center; justify-items: stretch; }
.vd-intestazione--vsl .vd-intestazione__occhiello { font-size: 1.25rem; line-height: 1.5; max-width: 58rem; margin: 0 auto var(--vd-s-4); }
.vd-intestazione__occhiello--forte { font-weight: 700; font-style: italic; }
.vd-intestazione--vsl .vd-intestazione__titolo { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.3; max-width: 58rem; margin-left: auto; margin-right: auto; }
.vd-intestazione--vsl .vd-intestazione__sottotitolo { font-size: clamp(1.125rem, 1rem + 0.7vw, 1.625rem); line-height: 1.45; max-width: 58rem; margin-left: auto; margin-right: auto; }
.vd-intestazione__invito { font-family: var(--vd-font-interfaccia); font-size: 1.25rem; font-weight: var(--vd-peso-interfaccia); color: var(--vd-azione); margin: var(--vd-s-5) 0 var(--vd-s-3); }
.vd-intestazione__video { position: relative; width: 100%; max-width: 58rem; aspect-ratio: 16 / 9; margin: 0 auto; border-radius: var(--vd-r-grande); overflow: hidden; background: #000; box-shadow: var(--vd-ombra-2); }
.vd-intestazione__video iframe, .vd-intestazione__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vd-intestazione--vsl .vd-cta { align-items: center; text-align: center; margin-top: var(--vd-s-6); }
.vd-intestazione--vsl .vd-bottone { max-width: 48rem; }

.vd-intestazione--velo .vd-intestazione__scena { background: var(--vd-velo); }
.vd-intestazione--scura .vd-intestazione__scena { background: var(--vd-fondo-scuro); color: var(--vd-su-scuro); }
.vd-intestazione--accento .vd-intestazione__scena { background: var(--vd-fondo-accento); color: var(--vd-su-accento); }
.vd-intestazione--scura .vd-intestazione__titolo,
.vd-intestazione--scura .vd-etichetta,
.vd-intestazione--scura .vd-intestazione__prova { color: var(--vd-su-scuro); border-color: currentColor; }
.vd-intestazione--accento .vd-intestazione__titolo,
.vd-intestazione--accento .vd-etichetta,
.vd-intestazione--accento .vd-intestazione__prova { color: var(--vd-su-accento); border-color: currentColor; }

@media (max-width: 860px) {
  .vd-intestazione__corpo { grid-template-columns: minmax(0, 1fr); gap: var(--vd-s-6); padding: var(--vd-s-6) var(--vd-s-4) var(--vd-s-7); }
  .vd-intestazione__barra { padding: var(--vd-s-3) var(--vd-s-4); }
  .vd-intestazione__logo { height: 3.75rem; }
  .vd-intestazione__firma { height: 2.5rem; }
}

/* Spazio per un logo che non c'è: non si disegna, si dichiara */
.vd-logo-mancante {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.25rem var(--vd-s-4);
  border: 2px dashed currentColor;
  border-radius: var(--vd-r-piccolo);
  font-family: var(--vd-font-interfaccia);
  font-size: var(--vd-t-etichetta);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.85;
}

/* ---------- La parola al medico ---------- */

.vd-medico {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--vd-s-5);
  margin: 0;
  padding: var(--vd-s-6);
  background: var(--vd-velo);
  border: 1px solid var(--vd-bordo);
  border-radius: var(--vd-r-medio);
  color: var(--vd-testo);
}
.vd-medico__ritratto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--vd-fondo);
  border: 2px solid var(--vd-marchio);
  font-family: var(--vd-font-titoli);
  font-size: 1.5rem;
  font-weight: var(--vd-peso-sottotitoli);
  color: var(--vd-etichetta);
}
.vd-medico__ritratto img { width: 100%; height: 100%; object-fit: cover; }
.vd-medico__citazione { margin: 0 0 var(--vd-s-4); }
.vd-medico__citazione p {
  margin: 0;
  font-family: var(--vd-font-citazione, var(--vd-font-lettura));
  font-style: italic;
  font-size: var(--vd-t-lead);
  line-height: 1.5;
  color: var(--vd-titoli);
}
.vd-medico__firma { display: flex; flex-direction: column; gap: 0.15rem; font-family: var(--vd-font-interfaccia); font-size: var(--vd-t-nota); line-height: 1.45; }
.vd-medico__nome { font-size: var(--vd-t-piccolo); font-weight: 600; color: var(--vd-titoli); }
.vd-medico__contesto { color: var(--vd-note); }
.vd-medico__avvertenza {
  margin: var(--vd-s-4) 0 0;
  padding-top: var(--vd-s-3);
  border-top: 1px solid var(--vd-bordo);
  font-family: var(--vd-font-interfaccia);
  font-size: var(--vd-t-nota);
  line-height: 1.5;
  color: var(--vd-note);
}
.vd-medico--breve { grid-template-columns: minmax(0, 1fr); padding: var(--vd-s-5); }
.vd-medico--breve .vd-medico__citazione p { font-size: var(--vd-t-corpo); }

@media (max-width: 560px) {
  .vd-medico { grid-template-columns: minmax(0, 1fr); padding: var(--vd-s-5); gap: var(--vd-s-4); }
  .vd-medico__ritratto { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
}

/* ---------- Avvertenza obbligatoria ---------- */

.vd-avvertenza {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--vd-s-4);
  margin: 0;
  padding: var(--vd-s-5);
  background: var(--vd-fondo-2);
  border: 1px solid var(--vd-bordo-forte);
  border-radius: var(--vd-r-medio);
  color: var(--vd-testo);
}
.vd-avvertenza__icona { width: 1.75rem; height: 1.75rem; color: var(--vd-titoli); flex: none; }
.vd-avvertenza__titolo {
  margin: 0 0 var(--vd-s-2);
  font-family: var(--vd-font-interfaccia);
  font-size: var(--vd-t-etichetta);
  font-weight: var(--vd-peso-interfaccia);
  letter-spacing: var(--vd-traccia-etichette);
  text-transform: uppercase;
  color: var(--vd-titoli);
}
.vd-avvertenza p:not(.vd-avvertenza__titolo) {
  margin: 0 0 var(--vd-s-2);
  font-family: var(--vd-font-lettura);
  font-size: var(--vd-t-piccolo);
  line-height: 1.55;
}
.vd-avvertenza p:last-child { margin-bottom: 0; }