/* ==========================================================================
   Vetrina48 — proposta.css
   Pagina /p/ (la proposta per un cliente). Solo ciò che main.css non ha:
   card delle versioni, quattro passi, modulo richiamata, barra fissa su
   telefono, stati speciali. Mobile-first da 390px; tre card affiancate
   da 900px in su. Stessi token di main.css.
   ========================================================================== */

/* --- Header: WhatsApp al posto del telefono ------------------------------ */

/* La parola "WhatsApp" si vede quando c'è spazio: sotto i 30rem restano
   l'icona e il numero, ma la parola resta nel DOM (fuori schermo) così il
   nome del link per lo screen reader è sempre "WhatsApp 379 263 7462". */
.testata__wa-parola {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 30rem) {
  .testata__wa-parola {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: inherit;
  }
}

/* Icona WhatsApp dentro un bottone: senza misura, il reset svg{max-width}
   la farebbe riempire tutto il bottone. */
.btn .icona-wa {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* --- Hero ------------------------------------------------------------------- */

/* Un nome in una parola sola ("Elettroidraulicasanitaria") deve spezzarsi:
   senza, l'H1 allarga la pagina e il telefono scorre in orizzontale. */
.hero__nome {
  color: var(--verde);
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Negli stati corti (non trovata, non raggiungibile) il piede va in fondo
   allo schermo: niente striscia di sfondo sotto il footer. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  flex: 1;
}

/* Qui la riga di fiducia segue il sottotitolo, non un form: il margine di
   main.css la spingerebbe troppo in basso. */
.hero .trust {
  margin-top: 0;
}

.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

/* Mentre i dati arrivano l'hero tiene il posto: niente salto di pagina. */
main[data-stato='carico'] .hero {
  min-height: 40vh;
}

/* --- Le tre versioni --------------------------------------------------------- */

.sezione--versioni {
  padding-top: clamp(1.5rem, 4vw, 3rem);
}

.versioni__frase {
  color: var(--inchiostro-soft);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
}

.versioni {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .versioni {
    grid-template-columns: repeat(3, 1fr);
  }
}

.versione {
  display: flex;
  flex-direction: column;
  background: var(--carta-pura);
  border: 1px solid var(--bordo);
  border-radius: var(--r-l);
  box-shadow: var(--ombra-s);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.versione:hover {
  border-color: var(--bordo-forte);
  box-shadow: var(--ombra-m);
}

/* La versione scelta resta evidenziata: è quella che la barra fissa apre. */
.versione--scelta,
.versione--scelta:hover {
  border-color: var(--verde);
  box-shadow: 0 0 0 2px var(--verde), var(--ombra-m);
}

.versione__anteprima {
  display: block;
  margin: 0;
  background: var(--carta-scura);
  border-bottom: 1px solid var(--bordo);
  /* Stesse proporzioni dei mockup (1200×750): niente ritagli. */
  aspect-ratio: 16 / 10;
}

.versione__anteprima img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

a.versione__anteprima:focus-visible {
  outline-offset: -3px;
}

.versione__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.15rem 1.25rem;
}

.versione__nome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* "Versione 1" su una riga sua, il nome dello stile sotto: a tre colonne il
   titolo non ci sta comunque su una riga, e così non va mai a capo a caso. */
.versione__numero {
  flex-basis: 100%;
  font-family: var(--font-testo);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--verde);
}

.versione__azioni {
  display: grid;
  gap: 0.6rem;
  margin-top: auto;
}

/* Fra 900 e 960px le colonne sono strette (~220px): con il padding standard
   "Prendo questa · 299€" andrebbe su due righe. */
.versione__azioni .btn {
  width: 100%;
  padding-inline: 0.9em;
  font-size: 0.95rem;
}

.versione__parlarne {
  margin: 0;
  font-size: 0.9rem;
  color: var(--inchiostro-soft);
  text-align: center;
}

.versione__parlarne a {
  font-weight: 600;
  white-space: nowrap;
}

/* Aperta da ?v=<id>: la versione concordata al telefono. */
.versione-da-link {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--verde-tenue);
  border: 1px solid color-mix(in srgb, var(--verde) 28%, transparent);
  border-radius: var(--r-m);
  color: var(--verde-scuro);
}

.versione-da-link p {
  margin: 0;
}

.versione-da-link p + p {
  margin-top: 0.35rem;
}

.avviso-js {
  margin-top: 2rem;
  padding: 1rem 1.15rem;
  background: var(--carta-scura);
  border-radius: var(--r-m);
  color: var(--inchiostro-soft);
}

.avviso-js p {
  margin: 0;
}

/* --- Cosa succede dopo il sì: quattro passi ---------------------------------- */

@media (min-width: 52rem) {
  .passi--quattro {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .passi--quattro {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

.passi__nota {
  margin: 1.5rem 0 0;
  font-style: italic;
  color: var(--inchiostro-soft);
}

/* --- Preferisci che ti chiamiamo noi? ----------------------------------------- */

.richiamata__box {
  max-width: 40rem;
  padding: clamp(1.4rem, 3.5vw, 2rem);
  background: var(--carta-pura);
  border: 1px solid var(--bordo);
  border-radius: var(--r-l);
  box-shadow: var(--ombra-s);
}

.richiamata__box h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  margin-bottom: 0.7em;
}

/* La versione di cui si parla, se ne è stata scelta una. */
.richiamata__variante {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--verde-tenue);
  border-radius: var(--r-s);
  font-size: 0.925rem;
  color: var(--verde-scuro);
}

.richiamata__variante span {
  font-weight: 600;
}

select.campo {
  appearance: auto;
}

.campo-facoltativo {
  font-weight: 400;
  color: var(--inchiostro-soft);
}

/* Giorno e fascia: due select affiancati finché ci stanno. La fascia prende
   solo la larghezza che le serve ("17–20"), il resto va al giorno; se
   "Il prima possibile" non ci sta intero (telefoni stretti, testo ingrandito)
   i due select vanno uno sotto l'altro invece di tagliarsi o sovrapporsi. */
.richiamata__quando {
  margin: 1.25rem 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.richiamata__quando legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.campi--quando {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* min-width: 0 — con il testo molto ingrandito "Il prima possibile" non ci
   sta nemmeno su una riga sua: il select si accorcia invece di allargare il
   riquadro e far scorrere la pagina di lato. */
.campi--quando > * {
  min-width: 0;
}

.campi--quando > :first-child {
  flex: 999 1 auto;
}

.campi--quando > :last-child {
  flex: 1 0 auto;
}

/* Il link WhatsApp dentro l'errore: stesso colore del messaggio, non verde. */
.richiamata .genera__errore a {
  color: var(--errore);
  font-weight: 600;
}

/* --- Chi c'è dietro -------------------------------------------------------------- */

.chi__link {
  margin: 1.5rem 0 0;
  font-size: 0.925rem;
}

/* --- Barra fissa su telefono ------------------------------------------------------
   Compare quando le card sono scorse via di sopra (proposta.js). Sta sotto il
   banner del consenso (z-index 50): finché quello è aperto, ha la precedenza. */

.barra-fissa {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem var(--gutter);
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: var(--carta-pura);
  border-top: 1px solid var(--bordo-forte);
  box-shadow: 0 -8px 30px rgb(0 0 0 / 8%);
}

.barra-fissa__prezzo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--inchiostro-soft);
}

.barra-fissa__prezzo b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--verde);
}

.barra-fissa .btn {
  flex: none;
  white-space: nowrap;
}

.barra-fissa__wa {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #1f8e43;
  color: var(--carta-pura);
}

.barra-fissa__wa:hover {
  background: #19783a;
  color: var(--carta-pura);
}

.barra-fissa__wa svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Il piede non deve restare coperto dalla barra. */
body.con-barra {
  padding-bottom: 5rem;
}

/* Un campo messo a fuoco da tastiera non deve finire sotto la barra. */
@media (max-width: 899.98px) {
  html {
    scroll-padding-bottom: 5.5rem;
  }
}

@media (min-width: 900px) {
  .barra-fissa {
    display: none !important;
  }

  body.con-barra {
    padding-bottom: 0;
  }
}

@media print {
  .barra-fissa {
    display: none !important;
  }
}