/* =====================================================================
   PAGINE DI TRATTAMENTO — /impianti-denti-fissi, /allineatori-trasparenti,
   /sbiancamento-denti, /faccette-dentali  (22 set 2026)
   ---------------------------------------------------------------------
   Sono sorelle di /crema e /treviglio: caricano PRIMA /zona/zona.css (tutto
   il sistema: caratteri, colori, pulsanti, hero, "Hai paura del dentista?",
   recensioni, dottori, mappa, contatti, piede, barra, cookie) e POI questo
   file, che aggiunge solo i pezzi che le pagine di zona non hanno:
     · il modulo "Come lavoriamo" (TAC 3D con i segni numerati), preso da
       google-ads/landing/moduli/tecnologia-3d/sezione.css;
     · i passi numerati 01 · 02 · 03 con "Per te";
     · il riquadro "Quanto costa?" (preventivo, mai cifre: L.103/2023);
     · "Dove siamo" con le DUE sedi affiancate, ognuna con la sua mappa.
   ⚠️ Qui non si ridefinisce niente di zona.css per tutte le pagine: le
   classi che esistono già là (.passi) si toccano solo dentro .preventivo,
   così /crema e /treviglio restano identiche.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO — il punto a fuoco della foto cambia da pagina a pagina:
   si scrive nell'HTML, sulla <section class="hero">, con
   style="--fuoco-m: 50% 40%; --fuoco-d: 55% 50%"  (telefono / desktop)
   --------------------------------------------------------------------- */
@media (max-width:59.99rem){ .hero-foto img{object-position:var(--fuoco-m,50% 35%)} }
@media (min-width:60rem){ .hero-foto img{object-position:var(--fuoco-d,60% 72%)} }
.hero h1 em{font-style:italic;color:var(--blu)}
/* fra 60 e 80rem la colonna del testo tiene conto del margine del .wrap centrato: il titolo non tocca la foto */
@media (min-width:60rem) and (max-width:80rem){ .hero-testo{max-width:calc(56vw - max(0px,(100vw - var(--maxw)) / 2) - var(--gutter) - var(--s-7))} }
/* le frasi grandi delle recensioni vanno a capo senza lasciare una parola sola sull'ultima riga */
.citazione-grande blockquote{text-wrap:pretty}

/* ---------------------------------------------------------------------
   COME LAVORIAMO — modulo tecnologia (solo /impianti-denti-fissi)
   --------------------------------------------------------------------- */
.lavoro{padding-block:var(--sezione);background:var(--carta)}
.lavoro-testa{display:grid;gap:var(--s-5);margin-bottom:var(--s-8)}
.filosofia{font-family:var(--serif);font-size:clamp(1.3125rem,1.15rem + .8vw,1.8125rem);line-height:1.42;color:var(--inchiostro);max-width:38ch;letter-spacing:-.005em}
@media (min-width:60rem){
  .lavoro-testa{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:start}
}

.schermo{margin:0 0 var(--s-9)}
.schermo-quadro{position:relative;border-radius:.5rem;overflow:hidden;background:#05101E;box-shadow:var(--ombra)}
.schermo-quadro img{width:100%;height:auto;aspect-ratio:850/540;object-fit:cover}
.tac-segno{position:absolute;left:max(var(--x),1.5rem);top:var(--y);z-index:3;display:flex;align-items:center;gap:.5rem;transform:translate(-.875rem,-50%)}
.tac-segno .n{
  display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;
  background:#fff;color:var(--notte);font-size:.875rem;font-weight:700;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 4px rgba(255,255,255,.22),0 4px 12px rgba(0,0,0,.4)
}
.tac-segno .nome{display:none;padding:.3125rem .625rem;border-radius:.25rem;background:rgba(255,255,255,.94);color:var(--inchiostro);font-size:.875rem;font-weight:600;white-space:nowrap}
.schermo-quadro .tac-segno{opacity:0;transition:opacity .6s var(--ease);transition-delay:calc(var(--i,0) * 200ms + 150ms)}
.schermo-quadro .tac-segno:nth-of-type(2){--i:1}.schermo-quadro .tac-segno:nth-of-type(3){--i:2}
.schermo-quadro.visto .tac-segno{opacity:1}
.schermo figcaption{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.schermo figcaption > p{font-size:.875rem;color:var(--testo-2)}
.legenda{list-style:none;margin:0;padding:0;display:grid;gap:.375rem;counter-reset:legenda}
.legenda li{display:flex;align-items:center;gap:.625rem;font-size:var(--t-meta)}
.legenda li::before{counter-increment:legenda;content:counter(legenda);display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--notte);color:#fff;font-size:.8125rem;font-weight:700;flex:0 0 auto}
@media (max-width:47.99rem){ .schermo-quadro{margin-inline:calc(var(--gutter) * -1);border-radius:0} }
@media (min-width:48rem){
  .tac-segno .nome{display:block}
  .legenda{display:none}
}

.comfort{list-style:none;margin:var(--s-8) 0 0;padding:var(--s-6) 0 0;border-top:1px solid var(--linea);display:grid;gap:var(--s-5)}
.comfort h3{font-size:1.125rem;margin-bottom:.25rem}
.comfort p{color:var(--testo-2);font-size:1.0625rem}
@media (min-width:48rem){ .comfort{grid-template-columns:1fr 1fr;gap:var(--s-8)} }


/* ---------------------------------------------------------------------
   PASSI 01 · 02 · 03 — numeri in serif, "Per te" allineati sulla stessa riga.
   .percorso = tre colonne su desktop; .percorso.a-due = due colonne (4 voci)
   --------------------------------------------------------------------- */
.percorso{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-6);counter-reset:passo}
.percorso li{display:grid;gap:.625rem;align-content:start;position:relative}
.percorso li::before{counter-increment:passo;content:counter(passo,decimal-leading-zero);font-family:var(--serif);font-size:2.5rem;line-height:1;color:var(--blu);font-variant-numeric:lining-nums}
.percorso h3{font-size:clamp(1.3125rem,1.2rem + .5vw,1.5rem)}
.percorso p{color:var(--testo-2)}
.per-te{margin-top:var(--s-2);padding-top:var(--s-4);border-top:1px solid var(--linea);font-family:var(--serif);font-style:italic;font-size:1.1875rem;line-height:1.45;color:var(--inchiostro)!important}
.per-te span{display:block;font-family:var(--font);font-style:normal;font-size:.8125rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--blu);margin-bottom:.25rem}
@media (max-width:59.99rem){
  .percorso li{grid-template-columns:2.75rem 1fr;column-gap:.25rem}
  .percorso li::before{grid-row:1;font-size:1.75rem;line-height:1.2}
  .percorso li > *{grid-column:2}
  .percorso h3{grid-row:1;align-self:center}
}
@media (min-width:60rem){
  .percorso{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:var(--s-8);row-gap:0}
  .percorso li{grid-row:span 4;grid-template-rows:subgrid;gap:0}
  .percorso li > *{margin-top:.75rem}
  .percorso li::before{margin-bottom:.5rem}
  .percorso .per-te{margin-top:var(--s-5)}
  .percorso.a-due{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(8,auto);row-gap:0}
  .percorso.a-due li:nth-child(n+3){margin-top:var(--s-7)}
}

/* sezione che apre con titolo a sinistra e testo lungo a destra (come "Come lavoriamo") */
.metodo{padding-block:var(--sezione);background:var(--carta)}
.metodo .lavoro-testa{margin-bottom:var(--s-8)}

/* ---------------------------------------------------------------------
   QUANTO COSTA — nessuna cifra (L.103/2023): si accoglie la domanda e si
   invita alla visita, dove si riceve il preventivo scritto.
   --------------------------------------------------------------------- */
.preventivo{padding-block:var(--sezione);background:var(--carta)}  /* bianco: dopo c'è l'avorio delle recensioni */
.preventivo-griglia{display:grid;gap:var(--s-6)}
.preventivo h2{max-width:12ch}
.preventivo .grande{font-family:var(--serif);font-size:clamp(1.375rem,1.15rem + 1.1vw,2.125rem);line-height:1.34;letter-spacing:-.008em;color:var(--inchiostro);max-width:32ch}
/* dentro "Quanto costa" c'è anche "Com'è la prima visita": la risposta al prezzo è la visita */
.visita-titolo{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,1.3rem + 1vw,2.125rem);line-height:1.12;letter-spacing:-.015em;margin:var(--s-8) 0 var(--s-5);padding-top:var(--s-6);border-top:1px solid var(--linea)}
.preventivo .passi{max-width:40rem}
.preventivo .btn-riga{margin-top:var(--s-7)}
@media (min-width:60rem){
  .preventivo-griglia{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-8);align-items:start}
  .preventivo h2{position:sticky;top:7rem}
}

/* ---------------------------------------------------------------------
   DOVE SIAMO — le due sedi affiancate, ognuna con la sua mappa vera
   (le stesse di /crema e /treviglio) e i suoi orari.
   --------------------------------------------------------------------- */
.sedi{display:grid;gap:var(--s-8)}
.sede-col{display:grid;gap:var(--s-5);align-content:start}
.sede-col .sede h3{font-size:1.375rem}
.sede-col .righe-dove{margin-bottom:var(--s-4)}
.sede-col .orari-tab{margin-top:var(--s-2)}
.sede-col .orari-tab caption{font-size:1.1875rem}
@media (min-width:48rem){
  .sedi{grid-template-columns:1fr 1fr;gap:var(--s-7)}
}
@media (min-width:60rem){
  .sedi{gap:var(--s-9)}
  .sede-col .link-mappe{display:flex;flex-wrap:wrap}
}

/* le tre ragioni per curarsi vicino a casa, sotto i dottori (solo /impianti-denti-fissi) */
.comfort.dopo{margin-top:var(--s-8)}
@media (min-width:60rem){ .comfort.tre{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8)} }

/* attribuzione delle due mappe, una volta sola sotto le sedi */
.mappa-fonte{margin-top:var(--s-6);font-size:.8125rem;color:var(--testo-2)}
.mappa-fonte a{color:inherit}

/* DOTTORI — nelle pagine di trattamento la scheda dice anche dove si sono formati (pagina Chi siamo) */
.dottore .formazione{font-size:.875rem;line-height:1.5;color:var(--testo-2);margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--linea)}
/* quattro schede (allineatori: l'ortodontista e i tre dottori) */
@media (min-width:48rem){ .dottori.quattro{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:60rem){ .dottori.quattro{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)} }
/* la riga onesta sotto "Quando si valutano" (faccette) */
.onesto{margin-top:var(--s-5);color:var(--testo-2);font-size:1.0625rem;max-width:44ch}