/* Sito Già Fatto — foglio unico per le pagine di vendita.
   Regole in ../DESIGN.md. Nessuna risorsa esterna. */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --terra: #8a4b2a;          /* colore del marchio, testo bianco sopra 6,7:1 */
  --terra-scuro: #6b3a20;
  --terra-tenue: #f3e9e3;
  --inchiostro: #1d1a17;
  --testo: #37322d;
  --testo-2: #5c554e;
  --fondo: #ffffff;
  --superficie: #f5f4f2;
  --linea: #e2ddd7;
  --raggio: 10px;
  --misura: 35rem;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--testo);
  background: var(--fondo);
  padding-bottom: 4.5rem; /* spazio per la barra fissa sul telefono */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

::selection { background: var(--terra-tenue); color: var(--inchiostro); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  color: var(--inchiostro);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 var(--s4);
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); font-weight: 750; margin-top: 0; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
p, li, dd { text-wrap: pretty; }
p { margin: 0 0 var(--s4); max-width: var(--misura); }

a { color: var(--terra); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--terra-scuro); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 4px; }

.contenitore { max-width: 72rem; margin-inline: auto; }
.testata, .piede, .sezione, .apertura, .pagina { padding-left: 1.25rem; padding-right: 1.25rem; }
.salta { position: absolute; left: -999px; top: 0; background: var(--inchiostro); color: #fff; padding: var(--s3) var(--s4); z-index: 20; }
.salta:focus { left: var(--s4); }
.salta:hover { color: #fff; }

/* Pulsanti */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 3rem; padding: .75rem 1.4rem;
  background: var(--terra); color: #fff;
  font: inherit; font-weight: 700; font-size: 1.0625rem;
  border: 0; border-radius: var(--raggio);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 6px rgb(107 58 32 / .18);
  transition: background-color .2s ease, transform .15s ease;
}
.pulsante:hover { background: var(--terra-scuro); color: #fff; text-decoration: none; }
.pulsante:active { transform: translateY(1px); }
.pulsante-leggero {
  display: inline-flex; align-items: center; min-height: 3rem; padding: .75rem .25rem;
  font-weight: 700; color: var(--terra); text-decoration: underline;
}
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); }

/* Testata */
.testata { border-bottom: 1px solid var(--linea); background: var(--fondo); position: sticky; top: 0; z-index: 10; }
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 4rem; }
.marchio { font-weight: 800; font-size: 1.2rem; color: var(--inchiostro); text-decoration: none; letter-spacing: -0.01em; }
.marchio span { color: var(--terra); }
.marchio small { display: block; font-size: .8rem; font-weight: 500; color: var(--testo-2); letter-spacing: 0; }
.menu { display: none; gap: var(--s5); }
.menu a { color: var(--testo); text-decoration: none; font-weight: 600; padding: var(--s2) 0; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--terra); text-decoration: underline; }
.testata .pulsante { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: 1rem; }
@media (min-width: 900px) { .menu { display: flex; } }

/* Menu secondario sul telefono: riga scorrevole sotto la testata */
.menu-telefono { display: flex; gap: var(--s5); overflow-x: auto; padding: var(--s2) 1.25rem; border-bottom: 1px solid var(--linea); background: var(--superficie); }
.menu-telefono a { white-space: nowrap; color: var(--testo); font-weight: 600; text-decoration: none; padding: var(--s2) 0; }
.menu-telefono a[aria-current="page"] { color: var(--terra); text-decoration: underline; }
@media (min-width: 900px) { .menu-telefono { display: none; } }

/* Sezioni */
.sezione { padding-top: 4rem; padding-bottom: 4rem; }
.sezione + .sezione { border-top: 1px solid var(--linea); }
.sezione-tenue { background: var(--superficie); }
.introduzione { font-size: 1.2rem; color: var(--testo); max-width: 44rem; }

/* Apertura della home */
.apertura { padding-top: 2rem; padding-bottom: 3rem; }
.apertura .contenitore { display: grid; gap: var(--s6); align-items: center; }
.apertura .sotto { font-size: 1.2rem; max-width: 34rem; }
.prezzo-breve { font-weight: 600; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.telefono {
  justify-self: center; width: min(78%, 300px);
  border: 10px solid var(--inchiostro); border-radius: 30px; overflow: hidden;
  box-shadow: 0 18px 40px -12px rgb(29 26 23 / .35);
}
.telefono img { width: 100%; }
.didascalia { font-size: .95rem; color: var(--testo-2); text-align: center; margin: var(--s3) auto 0; }
@media (min-width: 900px) {
  .apertura { padding-top: 3rem; padding-bottom: 4rem; }
  .apertura .contenitore { grid-template-columns: 1.25fr .75fr; gap: var(--s8); }
}

/* Listino */
.listino { display: grid; gap: 0; margin-top: var(--s6); border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--fondo); }
.livello { padding: var(--s5); display: flex; flex-direction: column; }
.livello + .livello { border-top: 1px solid var(--linea); }
.livello h3 { margin-bottom: var(--s2); }
.cifra { font-size: 2.4rem; font-weight: 800; color: var(--inchiostro); line-height: 1; margin: 0 0 var(--s2); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cifra small { font-size: 1rem; font-weight: 600; color: var(--testo-2); letter-spacing: 0; }
.rinnovo { font-weight: 600; color: var(--terra-scuro); margin-bottom: var(--s4); }
.livello ul { margin: 0 0 var(--s4); padding-left: 1.2rem; }
.livello li { margin-bottom: var(--s2); }
.livello .esempio-link { margin-top: auto; font-weight: 700; }
@media (min-width: 900px) {
  .listino { grid-template-columns: repeat(3, 1fr); }
  .livello + .livello { border-top: 0; border-left: 1px solid var(--linea); }
}
.nota { color: var(--testo-2); }
.nota strong { color: var(--testo); }

/* Due colonne */
.due { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .due { grid-template-columns: 1.1fr .9fr; gap: var(--s8); } }
.spunte { list-style: none; padding: 0; margin: 0; }
.spunte li { padding: var(--s3) 0 var(--s3) 2rem; border-bottom: 1px solid var(--linea); position: relative; }
.spunte li::before {
  content: ""; position: absolute; left: .2rem; top: 1.05rem; width: .9rem; height: .5rem;
  border-left: 2px solid var(--terra); border-bottom: 2px solid var(--terra); transform: rotate(-45deg);
}
.blocco { background: var(--superficie); border-radius: var(--raggio); padding: var(--s5); }
.blocco h3 { margin-top: 0; }

/* Esempi: striscia scorrevole sul telefono, griglia sul computer */
.esempi { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s4); margin-top: var(--s5); }
.esempio { scroll-snap-align: start; text-decoration: none; color: var(--testo); background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.esempio:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgb(29 26 23 / .4); color: var(--testo); }
.esempio img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.esempio .txt { padding: var(--s4); }
.esempio h3 { font-size: 1.1rem; margin: var(--s1) 0; }
.esempio p { margin: 0; color: var(--testo-2); font-size: .95rem; }
.fascia { font-size: .95rem; font-weight: 700; color: var(--terra-scuro); font-variant-numeric: tabular-nums; }
.scorri { font-size: .95rem; color: var(--testo-2); }
@media (min-width: 900px) {
  .esempi { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); overflow: visible; }
  .scorri { display: none; }
}

/* Mestieri */
.mestieri { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.mestiere { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--fondo); color: var(--inchiostro); font-weight: 600; text-decoration: none; }
.mestiere:hover { border-color: var(--terra); color: var(--terra); }

/* Garanzie: righe, non schede */
.garanzie { margin: var(--s5) 0 0; }
.garanzia { display: grid; gap: var(--s2); padding: var(--s5) 0; border-top: 1px solid var(--linea); }
.garanzia h3 { margin: 0; }
.garanzia p { margin: 0; }
@media (min-width: 900px) { .garanzia { grid-template-columns: 18rem 1fr; gap: var(--s6); } }

/* Contatti */
.contatto-grande { font-size: 1.15rem; }

/* Pagine interne */
.pagina { padding-top: 2rem; padding-bottom: 4rem; }
.pagina h2 { margin-top: var(--s7); }
.occhiello { font-size: 1.2rem; color: var(--testo); max-width: 44rem; }
.dati { display: grid; gap: var(--s1) var(--s5); margin: 0; }
.dati dt { font-weight: 700; color: var(--inchiostro); margin-top: var(--s3); }
.dati dd { margin: 0; }
@media (min-width: 700px) { .dati { grid-template-columns: 16rem 1fr; } .dati dt { margin-top: 0; } .dati dt, .dati dd { padding: var(--s3) 0; border-top: 1px solid var(--linea); } }
.piccolo { font-size: .95rem; color: var(--testo-2); }
.persone p { margin-bottom: var(--s3); }

/* Modulo */
.campo { margin-bottom: var(--s5); }
.campo label, .campo legend { display: block; font-weight: 700; color: var(--inchiostro); margin-bottom: var(--s1); }
.aiuto { display: block; font-size: .95rem; color: var(--testo-2); margin-bottom: var(--s2); max-width: var(--misura); }
input[type="text"], textarea {
  width: 100%; max-width: 36rem; font: inherit; color: var(--inchiostro);
  padding: .7rem .85rem; border: 1px solid #a49b92; border-radius: 8px; background: var(--fondo);
}
textarea { min-height: 7rem; }
input[type="text"]:focus, textarea:focus { outline: 3px solid var(--terra); outline-offset: 1px; border-color: var(--terra); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); }
.scelta { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; font-weight: 400; }
.scelta input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--terra); flex: none; }
/* 08/10/2026: legenda e pallini allineati ai campi, opzioni in tondo (prima vinceva .campo label) */
legend { padding: 0; }
.campo .scelta { display: flex; gap: var(--s3); align-items: flex-start; font-weight: 400; color: var(--testo); }
.scelta input { margin: .2rem 0 0; }
.nascondi { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.avviso-prova { background: var(--terra-tenue); color: var(--inchiostro); padding: var(--s3) var(--s4); border-radius: 8px; font-weight: 600; }

/* Piede */
.piede { background: var(--inchiostro); color: #e9e4de; padding-top: 3rem; padding-bottom: 3rem; margin-top: 0; }
.piede p { max-width: none; margin-bottom: var(--s2); font-size: .95rem; }
.piede a, .piede a:hover { color: #fff; }
.piede nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); }
.piede nav a { padding: var(--s2) 0; }

/* Barra fissa sul telefono: l'azione resta sempre a portata di pollice */
.barra-telefono {
  position: fixed; inset: auto 0 0 0; z-index: 15;
  display: flex; gap: var(--s3); padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--fondo); border-top: 1px solid var(--linea);
  box-shadow: 0 -6px 18px -12px rgb(29 26 23 / .35);
}
.barra-telefono .pulsante { flex: 1; }
.barra-telefono .pulsante-leggero { padding-inline: var(--s3); }
@media (min-width: 900px) { .barra-telefono { display: none; } }
.vetrina-telefono { margin: 0; }
.telefono { display: block; }
.stacco { margin-top: var(--s6); }
.h-livello { font-size: 1.25rem; margin-bottom: var(--s2); letter-spacing: -0.01em; }
.esempio-singolo { display: block; margin-top: var(--s4); }
.stacco-piccolo { margin-top: var(--s3); }
.pagina .livello h2, .pagina .blocco h2 { margin-top: 0; }
.due > div > h2:first-child { margin-top: 0; }
li, dd, .blocco p { max-width: var(--misura); }
.piccolo, .aiuto, .nota, .didascalia { max-width: 32rem; }
.pagina .blocco { max-width: 44rem; }

/* Pagina Esempi: griglia in colonna sul telefono, più colonne sul computer */
.griglia-esempi { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s4); margin-top: var(--s4); }

/* Promozione 09/10-30/11/2026: prezzo precedente barrato e condizioni scritte accanto */
.cifra s, .prezzo-breve s, .rinnovo s { font-size: .55em; font-weight: 600; color: var(--testo-2); margin-right: .25em; }
.prezzo-breve s, .rinnovo s { font-size: 1em; }
.promo { font-size: .95rem; color: var(--terra-scuro); max-width: 32rem; margin: 0 0 var(--s2); }

/* Nome della promozione in corso (Halloween fino al 02/11, poi Natale; stessa scadenza 22/12) */
.promo-nome { color: var(--terra); }