/* ==========================================================================
   LAVACITY — blocchi propri della home
   --------------------------------------------------------------------------
   Caricato solo da index.html: quello che c'e' qui dentro non tocca nessuna
   altra pagina.

   Due regole di marca che qui diventano codice, e non vanno rotte:

   1. L'ORO E' UNO SOLO PER SCHERMATA. L'oro dice "tocca qui". Se compare in
      tre punti non comanda piu' niente. Nella prima schermata l'oro e' il
      pulsante "Prenota il ritiro" e basta: per questo la fascia del prezzo,
      che pure e' importantissima, e' blu notte e non oro.

   2. IL PREZZO SI VEDE SENZA SCORRERE. "Da 6 €" e' la prima cosa che la gente
      cerca, e se deve scorrere per trovarla se ne va. Per questo su telefono
      la foto del negozio scende SOTTO al blocco di testo: l'immagine e' bella
      ma non risponde a nessuna domanda.
   ========================================================================== */

/* --------------------------------------------------------- recensioni --- */

.voto {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 34px 24px;
  background: var(--bianco); border: 1px solid var(--linea);
  border-radius: var(--raggio); box-shadow: var(--ombra);
}
.voto-cifra {
  font-size: 3.4rem; font-weight: 800; line-height: 1;
  color: var(--ink); letter-spacing: -.03em;
}
.voto .stelle { font-size: 1.5rem; letter-spacing: .12em; color: var(--oro-scuro); }
.voto-quante { font-size: 1rem; color: var(--testo); margin: 0; }

/* ----------------------------------------------------- contatto secco --- */

.contatti-diretti {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.contatto {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; min-height: 76px;
  background: var(--bianco); border: 1px solid var(--linea);
  border-radius: var(--raggio); text-decoration: none; color: var(--ink);
  box-shadow: var(--ombra);
}
.contatto:hover { border-color: var(--blu); }
.contatto svg { flex: 0 0 auto; color: var(--blu); }
.contatto b { display: block; font-size: 1.12rem; letter-spacing: -.01em; }
.contatto small { display: block; font-size: .88rem; color: var(--tenue); }
/* WhatsApp tiene il suo verde: e' il colore con cui la gente lo riconosce,
   e non e' l'oro del marchio, quindi non gli ruba l'attenzione. */
.contatto.whatsapp svg { color: #25d366; }

/* ------------------------------------------------------------ animali --- */

.animali { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; align-items: center; }

/* ----------------------------------------------------------- telefono --- */

@media (max-width: 860px) {
  .dove, .animali { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* La foto del negozio scende sotto al prezzo: sopra ci deve stare il
     titolo, la frase, i due pulsanti e "da 6 €". */
  .hero-prezzo { margin-top: 18px; padding: 16px 18px; }
  .hero-prezzo b { font-size: 1.9rem; }
  .voto-cifra { font-size: 2.9rem; }
  .fatto { padding: 22px 20px; }
  .fatto b { font-size: 1.55rem; }
}

/* ============================================================ l'apertura ===
   Il foglio di stile generale, sul telefono, porta la foto SOPRA al testo
   (`.hero-figura { order: -1 }`). Su altre pagine ha senso. Qui no: quella
   foto e' alta 260 px e da sola spinge "da 6 €" fuori dallo schermo, misurato:
   il prezzo finiva a 874 px su uno schermo di 812.

   Qui la rimetto sotto. Sopra la linea di taglio restano il titolo, la frase,
   i due pulsanti e il prezzo — cioe' cosa siamo, dove, quanto costa e cosa
   fare. La foto la vedi al primo dito di scorrimento, e non le serve altro.
   ========================================================================== */

@media (max-width: 860px) {
  .hero-figura { order: 0; margin-top: 4px; }
  .hero-figura img { max-height: 220px; }
  .hero-griglia { gap: 22px; }
}

/* I due pulsanti dell'apertura, su telefono, a tutta larghezza e uno sopra
   l'altro. Cosi' com'erano prendevano la larghezza del testo dentro, quindi
   uscivano di misure diverse e allineati a sinistra: sembrava un errore, e
   il bersaglio per il pollice era piu' piccolo del necessario. */
@media (max-width: 560px) {
  .hero-azioni { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 0; }
  .hero-azioni .btn { width: 100%; }
}