/* ============================================================
   SITI STUDIO LAB — la tela
   ------------------------------------------------------------
   Il sito finto che compare dentro la cornice. Regola unica e
   assoluta: qui dentro NON si scrive mai un colore, un carattere o
   un raggio a mano. Tutto passa dalle variabili di temi.css.

   Se un giorno serve una palette nuova, si aggiunge la' e questo
   file non si tocca. E' tutto il senso del Lab.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-corpo);
  background: var(--fondo);
  color: var(--testo);
  line-height: 1.6;
  font-size: 15px;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-titolo);
  font-weight: var(--peso-titolo);
  letter-spacing: var(--spazia-tit);
  line-height: 1.12;
  text-wrap: balance;
}

.t-conto { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 22px; }

/* ---- barra in alto ---- */
.t-barra {
  position: sticky; top: 0; z-index: 10;
  background: var(--fondo);
  border-bottom: 1px solid var(--bordo);
}
.t-barra__riga { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 62px; }
.t-marchio { font-family: var(--font-titolo); font-weight: var(--peso-titolo); font-size: 1.05rem; letter-spacing: var(--spazia-tit); }
.t-marchio small { display: block; font-family: var(--font-corpo); font-weight: 500; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--primario); margin-top: 2px; }
.t-voci { display: flex; gap: 20px; font-size: .84rem; color: var(--testo-tenue); }
.t-voci li { white-space: nowrap; }

/* ---- pulsanti ---- */
.t-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-titolo);
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .01em;
  text-transform: var(--maiuscolo);
  padding: 12px 22px;
  border: 1.5px solid var(--primario);
  border-radius: var(--raggio-p);
  background: var(--primario);
  color: var(--su-primario);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.t-btn:hover { background: var(--primario-cs); border-color: var(--primario-cs); }
.t-btn--vuoto { background: transparent; color: var(--primario); }
.t-btn--vuoto:hover { background: var(--primario); color: var(--su-primario); }

/* ---- APERTURE: quattro composizioni, non una ----
   Ogni settore ne usa una diversa. E' la differenza fra "lo stesso sito
   ricolorato" e "due siti". */

.t-apre { position: relative; }
.t-apre h1 { font-size: var(--titolo-xl); }
.t-apre .t-occhiello { display: block; font-size: var(--etichetta); font-weight: 600; letter-spacing: var(--spazio-eti); text-transform: uppercase; color: var(--primario); margin-bottom: 14px; }
.t-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* PIENO — la foto arriva prima di tutto, il testo ci sta sopra in basso.
   Niente centratura: il blocco di testo sta a sinistra come su un manifesto. */
.t-apre--pieno { min-height: min(78vh, 620px); display: grid; align-items: end; isolation: isolate; }
.t-apre--pieno .t-apre__sfondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.t-apre--pieno .t-apre__sfondo img { width: 100%; height: 100%; object-fit: cover; }
.t-apre--pieno .t-apre__sfondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 46%, rgba(0,0,0,.06) 100%);
}
/* La misura del titolo si conta sul titolo, non sul contenitore.
   Con max-width:30ch messo qui, i "ch" erano quelli del testo normale: una
   colonna di 240px in una apertura larga 1280, dentro cui un titolo da 60px
   andava a capo ogni due parole. Sembrava un errore di impaginazione, e in
   effetti lo era. Ora la colonna e' larga, e a limitare le righe e' il
   titolo stesso — dove un "ch" vale quanto una sua lettera. */
.t-apre--pieno .t-apre__sopra { padding-block: clamp(38px, 6vw, 74px); max-width: min(680px, 92%); color: #fff; }
.t-apre--pieno h1 { max-width: 18ch; }
.t-apre--pieno p { max-width: 44ch; }
.t-apre--pieno h1 { color: #fff; }
.t-apre--pieno p { margin-top: 16px; color: rgba(255,255,255,.86); font-size: 1.02rem; }
.t-apre--pieno .t-occhiello { color: #fff; opacity: .9; }
.t-apre--pieno .t-btn--vuoto { color: #fff; border-color: rgba(255,255,255,.6); }
.t-apre--pieno .t-btn--vuoto:hover { background: #fff; color: var(--testo); border-color: #fff; }

/* EDITORIALE — il titolo occupa la scena, la foto sta sotto e a lato.
   Composizione asimmetrica: 7 colonne di foto, 5 di testo. */
.t-apre--editoriale { padding-block: var(--sez-y) var(--sez-y-corta); }
.t-apre--editoriale h1 { max-width: 15ch; }
.t-apre--editoriale .t-apre__basso {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 3.5vw, 44px); align-items: end;
  margin-top: clamp(28px, 4vw, 52px);
}
.t-apre--editoriale .t-apre__foto { aspect-ratio: 16 / 10; overflow: hidden; }
.t-apre--editoriale .t-apre__foto img { width: 100%; height: 100%; object-fit: cover; }
.t-apre--editoriale .t-apre__coda p { color: var(--testo-tenue); font-size: 1rem; }

/* DIVISO — testo e foto affiancati. Il piu' sobrio: studi, negozi. */
.t-apre--diviso { padding-block: var(--sez-y); }
.t-apre--diviso .t-apre__griglia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.t-apre--diviso p { margin-top: 18px; color: var(--testo-tenue); font-size: 1.02rem; max-width: 40ch; }
.t-apre--diviso .t-apre__foto { aspect-ratio: 5 / 6; overflow: hidden; border-radius: var(--raggio); }
.t-apre--diviso .t-apre__foto img { width: 100%; height: 100%; object-fit: cover; }

/* SCHEDA — la foto grande, e una scheda che ci sale sopra dal basso.
   Il lavoro si vede, i dati restano leggibili. */
.t-apre--scheda { padding-bottom: var(--sez-y-corta); }
.t-apre--scheda .t-apre__pila { display: grid; }
.t-apre--scheda .t-apre__foto { aspect-ratio: 21 / 9; overflow: hidden; }
.t-apre--scheda .t-apre__foto img { width: 100%; height: 100%; object-fit: cover; }
.t-apre--scheda .t-apre__card {
  background: var(--fondo);
  padding: clamp(24px, 3.4vw, 40px);
  margin: -14% 0 0 0;
  width: min(100%, 60ch);
  border-radius: var(--raggio);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .5);
}
.t-apre--scheda p { margin-top: 14px; color: var(--testo-tenue); }

/* ---- sezioni ---- */
/* Il ritmo verticale lo decide la direzione artistica, non una misura
   unica: sezioni tutte alte uguali sono il sintomo del generatore.
   Le dispari respirano di piu' delle pari. */
.t-sez { padding-block: var(--sez-y-corta); }
.t-sez:nth-of-type(odd) { padding-block: var(--sez-y); }
.t-sez--alt { background: var(--superficie); border-block: var(--filetto) solid var(--bordo); }
.t-sez__testa { max-width: 44ch; margin-bottom: clamp(20px, 3vw, 36px); }
.t-sez__testa h2 { font-size: var(--titolo-l); }
.t-sez__testa .t-occhiello { font-size: var(--etichetta); letter-spacing: var(--spazio-eti); }

/* Maiuscoletto: barbieri e palestre lo vogliono, ristoranti e studi no. */
[data-maiuscoletto="si"] .t-sez__testa h2 { text-transform: uppercase; letter-spacing: .01em; }
.t-sez__testa p { margin-top: 10px; color: var(--testo-tenue); font-size: .95rem; }

/* ---- ELENCHI: due modi, non uno ----
   Un menu di ristorante dentro dei box non l'ha mai fatto nessuno. Sulla
   carta e' un elenco tipografico con i puntini che portano al prezzo, e
   qui si fa cosi'. Le schede restano per i listini di servizi, dove la
   descrizione conta quanto il nome. */

/* TIPOGRAFICO — come su un menu stampato. */
[data-elenco="tipografico"] .t-elenco { display: grid; gap: 0; background: none; border: 0; }
[data-elenco="tipografico"] .t-riga {
  display: grid; grid-template-columns: auto minmax(2ch, 1fr) auto;
  align-items: baseline; gap: 0 10px;
  background: none; padding: 14px 0;
  border-bottom: var(--filetto) solid var(--bordo);
}
[data-elenco="tipografico"] .t-riga:last-child { border-bottom: 0; }
/* I puntini di guida: sono decorazione, ma di quelle che dicono una cosa
   vera — "questo prezzo appartiene a questa riga". */
[data-elenco="tipografico"] .t-riga::after {
  content: ''; grid-column: 2; align-self: center; height: 0;
  border-bottom: 1px dotted var(--bordo);
}
[data-elenco="tipografico"] .t-riga b { grid-column: 1; font-family: var(--font-titolo); font-weight: 600; font-size: 1.06rem; }
[data-elenco="tipografico"] .t-riga span { grid-column: 3; font-family: var(--font-titolo); font-weight: 600; font-size: 1.06rem; color: var(--testo); white-space: nowrap; }
[data-elenco="tipografico"] .t-riga small { grid-column: 1 / -1; margin-top: 3px; color: var(--testo-tenue); font-size: .85rem; }

/* SCHEDE — righe separate, per i listini con descrizione. */
[data-elenco="schede"] .t-elenco { display: grid; gap: 2px; background: var(--bordo); border: var(--bordo-blocco) solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
[data-elenco="schede"] .t-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; background: var(--fondo); padding: 15px 18px; }
[data-elenco="schede"] .t-sez--alt .t-riga { background: var(--superficie); }
[data-elenco="schede"] .t-riga b { font-family: var(--font-titolo); font-weight: 600; font-size: .98rem; }
[data-elenco="schede"] .t-riga span { font-family: var(--font-titolo); font-weight: 600; color: var(--primario); white-space: nowrap; }
[data-elenco="schede"] .t-riga small { grid-column: 1 / -1; color: var(--testo-tenue); font-size: .84rem; }

/* griglia: gallerie e prodotti */
/* Tre composizioni per le griglie. Quella auto-fit "tutte uguali" era il
   sintomo piu' evidente del template: adesso e' solo il ripiego. */
.t-griglia { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* RIVISTA — una grande, due piccole di fianco. Asimmetrica di proposito. */
[data-griglia="rivista"] .t-griglia { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
[data-griglia="rivista"] .t-scheda:first-child { grid-row: span 2; }
[data-griglia="rivista"] .t-scheda:first-child img { aspect-ratio: 4 / 5; }

/* MOSAICO — proporzioni diverse fra le schede, come in una gallery vera. */
[data-griglia="mosaico"] .t-griglia { grid-template-columns: repeat(6, minmax(0, 1fr)); }
[data-griglia="mosaico"] .t-scheda { grid-column: span 2; }
[data-griglia="mosaico"] .t-scheda:nth-child(3n+1) { grid-column: span 4; }
[data-griglia="mosaico"] .t-scheda:nth-child(3n+1) img { aspect-ratio: 16 / 9; }
[data-griglia="mosaico"] .t-scheda img { aspect-ratio: 1 / 1; }

/* AFFIANCATA — una colonna sola, foto e testo di fianco. Studi, artigiani:
   dove conta leggere, non guardare. */
[data-griglia="affiancata"] .t-griglia { grid-template-columns: minmax(0, 1fr); }
[data-griglia="affiancata"] .t-scheda { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); align-items: center; }
[data-griglia="affiancata"] .t-scheda img { aspect-ratio: 4 / 3; height: 100%; }
.t-scheda { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.t-sez--alt .t-scheda { background: var(--fondo); }
.t-scheda img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.t-scheda__corpo { padding: 14px 16px 18px; }
.t-scheda h3 { font-size: .98rem; }
.t-scheda p { margin-top: 5px; color: var(--testo-tenue); font-size: .85rem; }

/* recensioni */
.t-rec { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.t-rec__voce { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 18px 20px; }
.t-sez--alt .t-rec__voce { background: var(--fondo); }
.t-stelle { color: var(--primario); letter-spacing: .14em; font-size: .82rem; }
.t-rec__voce p { margin-top: 10px; font-size: .92rem; }
.t-rec__voce b { display: block; margin-top: 12px; font-size: .84rem; color: var(--testo-tenue); font-weight: 500; }

/* fascia d'azione */
.t-fascia { background: var(--primario); color: var(--su-primario); border-radius: var(--raggio); padding: clamp(24px, 4vw, 40px); text-align: center; }
.t-fascia h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
.t-fascia p { margin: 12px auto 22px; max-width: 46ch; opacity: .88; font-size: .95rem; }
.t-fascia .t-btn { background: var(--su-primario); color: var(--primario); border-color: var(--su-primario); }
.t-fascia .t-btn:hover { background: transparent; color: var(--su-primario); }

/* informazioni */
.t-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px; background: var(--bordo); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.t-info__voce { background: var(--fondo); padding: 18px 20px; }
.t-info__voce b { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--primario); margin-bottom: 6px; }
.t-info__voce span { font-size: .92rem; }

/* piede */
.t-piede { border-top: 1px solid var(--bordo); padding-block: 26px; font-size: .8rem; color: var(--testo-tenue); }
.t-piede__riga { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* ---- da tablet in giu' ---- */
@media (max-width: 780px) {
  .t-apre__griglia { grid-template-columns: minmax(0, 1fr); }
  .t-apre__foto { order: -1; }
  .t-voci { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- fascia di fatti brevi ---- */
.t-evidenze { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: var(--bordo); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.t-evidenza { background: var(--fondo); padding: 18px 20px; }
.t-sez--alt .t-evidenza { background: var(--superficie); }
.t-evidenza b { display: block; font-family: var(--font-titolo); font-weight: var(--peso-titolo); font-size: 1.24rem; color: var(--primario); letter-spacing: var(--spazia-tit); }
.t-evidenza span { display: block; margin-top: 4px; font-size: .85rem; color: var(--testo-tenue); }

/* ---- prenotazione finta ---- */
.t-prenota { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: clamp(18px, 3vw, 26px); display: grid; gap: 18px; }
.t-sez--alt .t-prenota { background: var(--fondo); }
.t-prenota__gruppo > b { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--testo-tenue); margin-bottom: 9px; }
.t-pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.t-pillola {
  font-family: var(--font-corpo); font-size: .88rem; font-weight: 500;
  padding: 9px 15px; cursor: pointer;
  border: 1.5px solid var(--bordo); border-radius: var(--raggio-p);
  background: var(--fondo); color: var(--testo-tenue);
  transition: border-color .18s, color .18s, background-color .18s;
}
.t-sez--alt .t-pillola { background: var(--superficie); }
.t-pillola:hover { border-color: var(--primario); color: var(--testo); }
.t-pillola.e-scelta { border-color: var(--primario); background: var(--primario); color: var(--su-primario); font-weight: 600; }
.t-prenota__coda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.t-prenota__coda span { font-size: .84rem; color: var(--testo-tenue); }

/* ---- passaggi numerati ---- */
.t-passi { counter-reset: passo; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; list-style: none; padding: 0; }
.t-passi li { counter-increment: passo; padding-top: 40px; position: relative; }
.t-passi li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-titolo); font-weight: var(--peso-titolo);
  font-size: 1.5rem; color: var(--primario); opacity: .55;
}
.t-passi b { display: block; font-family: var(--font-titolo); font-weight: 600; font-size: 1rem; }
.t-passi span { display: block; margin-top: 6px; font-size: .88rem; color: var(--testo-tenue); }

/* ---- domande frequenti ---- */
.t-faq { display: grid; gap: 2px; background: var(--bordo); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.t-faq__voce { background: var(--fondo); }
.t-sez--alt .t-faq__voce { background: var(--superficie); }
.t-faq__voce summary {
  cursor: pointer; padding: 15px 18px; list-style: none;
  font-family: var(--font-titolo); font-weight: 600; font-size: .96rem;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.t-faq__voce summary::-webkit-details-marker { display: none; }
.t-faq__voce summary::after { content: '+'; color: var(--primario); font-size: 1.3rem; line-height: 1; flex: none; }
.t-faq__voce[open] summary::after { content: '\2212'; }
.t-faq__voce p { padding: 0 18px 16px; font-size: .9rem; color: var(--testo-tenue); max-width: 62ch; }

/* ---- piani a confronto ---- */
.t-piani { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.t-piano { position: relative; background: var(--superficie); border: 1.5px solid var(--bordo); border-radius: var(--raggio); padding: 22px 20px; display: grid; align-content: start; gap: 8px; }
.t-sez--alt .t-piano { background: var(--fondo); }
.t-piano--forte { border-color: var(--primario); }
.t-piano__eti { position: absolute; top: -11px; left: 20px; background: var(--primario); color: var(--su-primario); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--raggio-p); }
.t-piano h3 { font-size: 1.05rem; }
.t-piano__prezzo { font-family: var(--font-titolo); font-weight: var(--peso-titolo); font-size: 1.7rem; color: var(--primario); letter-spacing: var(--spazia-tit); }
.t-piano__sotto { font-size: .85rem; color: var(--testo-tenue); }
.t-piano__lista { display: grid; gap: 7px; margin: 6px 0 14px; }
.t-piano__lista li { position: relative; padding-left: 18px; font-size: .87rem; color: var(--testo-tenue); }
.t-piano__lista li::before { content: '✓'; position: absolute; left: 0; color: var(--primario); font-weight: 700; }

/* ---- contatti ---- */
.t-contatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.t-contatti__dati { display: grid; gap: 12px; align-content: start; }
.t-contatti__voce b { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--primario); margin-bottom: 3px; }
.t-contatti__voce span { font-size: .93rem; }
.t-mappa {
  margin-top: 6px; min-height: 150px; display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--bordo); border-radius: var(--raggio);
  background: var(--superficie); color: var(--testo-tenue); font-size: .82rem; padding: 18px;
}
.t-sez--alt .t-mappa { background: var(--fondo); }
.t-modulo { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 20px; display: grid; gap: 10px; align-content: start; }
.t-sez--alt .t-modulo { background: var(--fondo); }
.t-modulo > b { font-family: var(--font-titolo); font-weight: 600; font-size: 1rem; }
.t-campo { border: 1.5px solid var(--bordo); border-radius: var(--raggio); padding: 11px 13px; background: var(--fondo); color: var(--testo-tenue); font-size: .87rem; }
.t-sez--alt .t-campo { background: var(--superficie); }
.t-campo--alto { min-height: 76px; }
.t-modulo .t-btn { margin-top: 4px; }