/* components.css — i componenti di dental_practice. Il segno del verticale è la testata SPARTITA
   (blocco di colore pieno e fotografia affiancati) con la scheda bianca che ne scavalca il bordo, e i
   trattamenti come griglia NUMERATA: entrambi vengono da dental-care-04, il template di riferimento.
   I colori si prendono SOLO dai token; le regole d'uso della palette stanno in tokens.css. */

/* ============================ impianto ============================ */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - var(--gutter) * 2, 76ch); margin-inline: auto; }
.stack > * + * { margin-top: var(--space-4); }

.section { padding-block: var(--section-y); background-color: var(--band-section-bg, transparent); background-image: var(--grad-carta); }
.section--alt { background-color: var(--band-section-alt-bg, transparent); background-image: var(--grad-carta2); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }

/* ⚠ Il riferimento scelto per il secondo studio CENTRA le intestazioni e le da' aria; il golden le
   tiene a sinistra. Sono token perche' e' una scelta di sito, non del verticale. */
.section-intro {
  max-width: var(--intro-max, 62ch);
  margin-bottom: var(--space-7);
  margin-inline: var(--intro-margin, 0);
  text-align: var(--intro-align, start);
}
.section-intro h2 { margin-bottom: var(--space-3); }
.section-intro .rule { margin-inline: var(--intro-rule-margin, 0); }

/* Filetto sotto un occhiello o un titolo: è il ciano DEL MARCHIO, che qui è nel suo mestiere —
   un segno, non un testo. */
.rule { border: 0; height: 3px; width: 56px; background: var(--grad-accento); border-radius: 2px; margin: var(--space-4) 0; }

/* ============================ bottoni ============================ */
/* Pillola: il registro moderno della categoria (i template recenti stanno su radius 38–57px). */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.78rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--brand); color: var(--on-dark);
  border: 2px solid var(--brand);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--brand-mid); border-color: var(--brand-mid); transform: translateY(-1px); }
/* ⚠ Il fantasma su fondo CHIARO porta il testo dell'accento-testo (6,00), non del marchio (4,36). */
.btn--ghost { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost:hover { background: var(--accent-ink); color: var(--on-dark); transform: translateY(-1px); }
/* Su fondo SCURO il fantasma è bianco su bianco-bordo: il contrasto lo dà la banda sottostante. */
.btn--on-dark { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.55); }
.btn--on-dark:hover { background: var(--on-dark); color: var(--brand); border-color: var(--on-dark); }
/* ⚠ Sull'accento chiaro il testo è --ink (6,41): il bianco farebbe 2,42. */
.btn--accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-lt); border-color: var(--accent-lt); }

/* ============================ fascia di servizio ============================ */
.topbar { background: var(--brand-dark); color: var(--on-dark); font-size: 0.82rem; }
.topbar__row {
  display: var(--topbar-display); flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
  justify-content: flex-end; min-height: var(--chrome-topbar);
}
.topbar__item { color: var(--on-dark-muted); }
.topbar a.topbar__item:hover { color: var(--on-dark); text-decoration: underline; }
@media (max-width: 599.98px) { .topbar { display: none; } }

/* ============================ intestazione ============================ */
/* Header FISSO su fondo chiaro: le pagine interne non hanno una testata fotografica sotto cui nascondersi.
   ⚠ Lo sticky va liberato dal wrapper del template-part, che altrimenti lo confina. */
.wp-block-template-part { display: contents; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 76px;
}
/* ⚠ Nav e CTA portano un margine di blocco da WP che li spinge sotto il centro: si azzera e si centra
   ciascuno per conto suo (regola 16). */
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); }
.wordmark__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.16rem;
  line-height: 1.1; letter-spacing: -0.012em; color: var(--ink);
  /* ⚠ Il nome si spegne quando il marchio del cliente porta già le stesse parole dentro il segno.
     Una sola dichiarazione di `display`: due nella stessa regola le decide l'ORDINE, non il token. */
  display: var(--wordmark-name-display); flex-direction: column;
}
.wordmark__tag {
  font-size: 0.66rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-ink);
}
/* ⚠ UN MARCHIO SI MISURA SULLA LARGHEZZA, non sull'altezza: con la sola `height` in un flex item
   riducibile l'SVG si ridisegna DENTRO il box e risulta piccolo senza che nessuna misura del box lo
   denunci. Qui la larghezza è dichiarata e in riga stretta è la NAV a cedere (v. media query).
   ⚠⚠ Il marchio nel markup è quello del VERTICALE, e un `src` cablato farebbe pubblicare a ogni studio
   il segno del primo cliente. Lo si sostituisce dal FOGLIO con `content`, che su un elemento
   rimpiazzato ridipinge l'immagine senza toccare una riga di markup: il pattern resta identico per
   tutti, e chi non lo sovrascrive non se ne accorge (`normal` = l'immagine del `src`). La larghezza e
   l'altezza sono token perché un lockup che porta la scritta dentro il segno va pubblicato come TARGA
   larga, non come quadrato da 46px. */
.wordmark__mark {
  width: 46px; height: auto; flex: 0 0 auto;
  display: var(--brand-mark-native-display);
}
/* ⚠⚠ Il marchio del PROGETTO si dipinge su uno pseudo del contenitore, non sull'`<img>` del pattern.
   Sostituire l'immagine con `content: url()` sembrava piu' pulito e RENDE MALE: su un elemento
   rimpiazzato `object-fit` non vincola l'immagine generata, e il marchio usciva dal proprio riquadro
   tagliato in basso (misurato: box 118x64, disegno oltre i 104px). Uno pseudo e' un elemento normale,
   dove `background-size: contain` fa esattamente quello che dice.
   Il default `none` non genera nessuno pseudo: chi non porta un marchio proprio non se ne accorge. */
.wordmark::before {
  content: var(--brand-mark-plate, none);
  width: var(--brand-mark-w); height: var(--brand-mark-h); flex: 0 0 auto;
  background: var(--brand-mark-img) left center / contain no-repeat;
}

.site-nav { margin-left: auto; }
.site-nav .wp-block-navigation-item__content {
  font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; color: var(--ink);
  padding-block: var(--space-2);
}
.site-header .site-nav .wp-block-navigation-item__content:hover { color: var(--accent-ink); }
/* Voce corrente: filetto nel ciano di marca — un segno, non un testo. */
.site-header .site-nav .current-menu-item .wp-block-navigation-item__content {
  color: var(--accent-ink); box-shadow: inset 0 -3px 0 var(--brand-mark);
}
/* ⚠ Una ul di wp:navigation nasce flex-wrap:wrap: con margin-left:auto una voce in più va orfana su due
   righe. Sopra i 900px si impone nowrap. */
@media (min-width: 900px) { .site-nav .wp-block-navigation__container { flex-wrap: nowrap; } }

.site-header__cta { margin-left: var(--space-4); }
@media (max-width: 1023.98px) { .site-header__cta { display: none; } }

/* --- Menu mobile: overlay di wp:navigation (regola 15).
   ⚠ WP tiene l'overlay bianco con un selettore a specificità (0,4,0): si vince solo RICOPIANDONE lo
   schema, non aggiungendo una classe.
   ⚠⚠ E NON BASTA allineare le voci: il contenitore `__responsive-container-content` è largo quanto il
   viewport e nasce `justify-content: flex-end`, quindi le voci restano schiacciate a DESTRA e vanno
   fuori schermo anche con `text-align: left` sul figlio. Il colpevole è il PRIMO ANTENATO largo quanto
   lo schermo con l'allineamento contrario: si corregge lì, risalendo la catena. --- */
.wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.wp-block-navigation__responsive-container.is-menu-open:not(.has-background):not(.disable-default-overlay) { background: var(--paper); }
/* ⚠ Il padding orizzontale va sul CONTENUTO, non sull'overlay: sull'overlay WP lo azzera e la regola
   sparisce senza lasciare traccia (misurato: `padding: 0px` sull'overlay, `56px 0px 96px` sul contenuto,
   cioè è il contenuto la superficie che accetta il nostro padding). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%; align-items: stretch; justify-content: flex-start;
  padding-inline: var(--gutter); padding-bottom: 96px;
}
/* ⚠ Il contenitore delle voci nasce `align-items: flex-end` e il nostro `stretch` a pari specificità
   perde contro il CSS dei blocchi, che è iniettato DOPO il tema: serve un livello in più. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
  width: 100%; align-items: stretch; gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%; text-align: left; font-family: var(--font-display); font-weight: 800;
  font-size: 1.32rem; color: var(--ink);
  padding-block: var(--space-4); border-bottom: 1px solid var(--line);
}
/* ⚠ Il bottone di chiusura di WP nasce minuscolo e SENZA area di tocco: sotto i 44px non rispetta il
   bersaglio minimo, e appiccicato al bordo sembra un refuso. Si dichiarano misura, area e posizione. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
  top: var(--space-5); right: var(--gutter);
  width: 48px; height: 48px; padding: 10px;
  color: var(--ink); background: var(--surface); border-radius: var(--radius-pill);
}
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.wp-block-navigation__responsive-container-close:hover { background: var(--surface-2); }
/* Anche l'hamburger merita un bersaglio pieno: 48×48 è il minimo comodo su un telefono. */
.wp-block-navigation__responsive-container-open {
  width: 48px; height: 48px; padding: 10px; color: var(--ink);
}
.wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

/* ============================ testata (il segno del verticale) ============================ */
/* Blocco di colore pieno e fotografia AFFIANCATI, non sovrapposti: il contrasto del titolo è strutturale
   e non dipende dal fotogramma. È l'impianto di dental-care-04. */
.hero { background: var(--paper); }
.hero__split {
  display: grid; grid-template-columns: var(--hero-split-cols);
  min-height: var(--hero-min-h);
  position: relative;
}
.hero__panel {
  background: var(--hero-panel-bg); color: var(--on-dark);
  border-radius: var(--hero-panel-radius); margin: var(--hero-panel-margin);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--hero-panel-pad);
  /* ⚠ Il padding sinistro cresce col viewport (--bleed vale 680 a 2560px): la larghezza massima del
     contenuto DEVE sommarlo, altrimenti su un monitor largo il padding divora il blocco. Quando il
     blocco diventa una SCHEDA il rientro lo dà il margine, e il padding torna a una misura fissa:
     sommare i due strozzerebbe il testo a una colonna di una parola. */
  position: relative;
}
.hero__panel > * { max-width: 34rem; }
.hero__panel .eyebrow { color: var(--accent-lt); }
.hero__panel h1 { color: var(--on-dark); margin-bottom: var(--space-4); }
.hero__panel .lead { color: var(--on-dark-muted); margin-bottom: var(--space-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ⚠ `position`/`inset` sono TOKEN, non due fogli alternativi: al default (`static`/`auto`) la fotografia
   resta la seconda colonna della griglia; portati a `absolute`/`0` copre l'intera banda e il blocco di
   colore le galleggia sopra come scheda — è l'impianto del riferimento scelto per il secondo studio. */
.hero__media { position: var(--hero-media-position, relative); inset: var(--hero-media-inset); overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos);
  /* Deriva lentissima della fotografia della testata (Ken Burns): la pagina respira senza che nulla
     si muova davvero. ⚠ Si FERMA sotto prefers-reduced-motion, e al default non esiste.
     ⚠⚠ Senza promuovere l'elemento a livello proprio la scala di un bitmap grande si RI-CAMPIONA a
     ogni fotogramma e si vede come micro-scatto: `will-change` la fa fare al compositor su una texture
     gia' pronta. `backface-visibility` toglie lo sfarfallio da subpixel. Entrambi al default inerti. */
  animation: var(--hero-kenburns, none);
  will-change: var(--hero-img-will-change, auto);
  backface-visibility: hidden;
}
/* ⚠ La curva conta piu' della durata: con `ease-out` l'80% del movimento sta nei primi secondi, poi
   rallenta in modo visibile e con `forwards` si CONGELA — che e' esattamente cio' che si legge come
   «a scatti». Andata e ritorno a velocita' COSTANTE non ha ne' partenza brusca ne' fine secca. */
@keyframes fp-kenburns { from { transform: scale(1) translateZ(0); } to { transform: scale(1.05) translateZ(0); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; } }
/* Velo tenue: non serve a far leggere il titolo (che sta sul blocco), ma a legare foto e blocco. */
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--grad-velo); }
/* ⚠⚠ Il secondo velo esiste SOLO quando il testo sta sopra la fotografia: lì il contrasto non è più
   strutturale e va misurato sul pixel. A opacità 0 (default) non dipinge nulla. */
.hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--grad-brand); opacity: var(--hero-scrim-opacity);
}
.hero__media > img { position: relative; }
.hero__panel { z-index: 2; }
/* Bagliore d'accento sul blocco di colore: è ciò che toglie alla campitura piena l'aria di fondale. */
.hero__panel::before { content: ""; position: absolute; inset: 0; background: var(--grad-bagliore); pointer-events: none; }
.hero__panel > * { position: relative; }

/* Variante DESIGN (nessuna foto hero-grade): il blocco di colore prende tutta la banda. Nel registro di
   dental-care-04 è una variante legittima, non un ripiego — MAI una foto finta. */
.hero--design .hero__split { grid-template-columns: 1fr; }
.hero--design .hero__panel { padding-inline: var(--bleed); align-items: flex-start; }
.hero--design .hero__panel > * { max-width: min(46rem, 100%); }

@media (max-width: 899.98px) {
  .hero__split { grid-template-columns: 1fr; min-height: 0; }
  .hero__panel { padding: var(--space-8) var(--gutter); }
  .hero__panel > * { max-width: none; }
  /* ⚠ Con la fotografia DIETRO l'intera banda il rapporto fisso le impone un'altezza di 260px e la
     scheda finisce per metà sul bianco: chi la mette dietro dichiara `auto` e la lascia riempire. */
  .hero__media { aspect-ratio: var(--hero-media-ar, var(--fig-ratio-wide)); }
}

/* ============================ lo studio (la scheda che scavalca) ============================ */
/* ⚠ Lo scavalcamento sulla testata schiacciava scheda e fotografia contro il blocco di colore: il
   segno resta, ma con una distanza dichiarata sopra, sennò la sezione sembra incollata. */
.studio { padding: clamp(var(--space-7), 5vw, var(--space-9)) 0 var(--section-y); background-color: var(--band-studio-bg, transparent); background-image: var(--grad-carta); position: relative; }
.studio__grid {
  display: grid; grid-template-columns: var(--studio-cols, minmax(0, 1.06fr) minmax(0, 0.94fr));
  gap: var(--studio-gap, clamp(var(--space-6), 4vw, var(--space-8))); align-items: stretch;
  position: relative; z-index: 2;
}
/* ⚠ Lo SCAVALCO e' il segno dichiarato del verticale (`--overlap`) ma la sezione «lo studio» non lo
   usava: scheda e fotografia restavano due rettangoli affiancati con un vuoto in mezzo. Con un margine
   negativo la scheda entra sulla fotografia e i due blocchi diventano UNA composizione. Default 0. */
.studio__card {
  background: var(--grad-scheda); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: var(--shadow-md);
  position: relative; z-index: 2;
  margin-inline-end: var(--studio-card-overlap, 0);
  margin-block: var(--studio-card-offset, 0);
  align-self: var(--studio-card-align, stretch);
}
.studio__card h2 { margin-bottom: var(--space-3); text-wrap: balance; }
/* Il corpo della scheda respira: senza una misura dichiarata il testo eredita la larghezza della
   colonna, che qui è stretta, e va a capo troppo presto. */
.studio__card .lead, .studio__card .prose p { max-width: 54ch; }
.studio__card .lead { margin-bottom: var(--space-4); }
.studio__card .prose p + p { margin-top: var(--space-4); }
.studio__card .btn { margin-top: var(--space-6); }

/* ⚠ Lo scavalcamento è un MARGINE NEGATIVO sul primo figlio del contenitore, e WP lo azzera con
   `.is-layout-flow > :first-child { margin-block-start: 0 }` — specificità (0,1,1), che BATTE la classe
   nuda (0,1,0). Il valore c'era nel foglio e computava 0: si vince solo aggiungendo un livello. */
.studio .container > .studio__grid { margin-top: 0; }

.studio__fig { border-radius: var(--radius-lg); overflow: hidden; display: flex; margin: 0; }
.studio__fig img { width: 100%; height: 100%; min-height: clamp(320px, 36vw, 560px); object-fit: cover; object-position: var(--fig-object-pos); }

@media (max-width: 899.98px) {
  .studio__grid { grid-template-columns: 1fr; margin-top: calc(-1 * var(--space-5)); }
  /* ⚠⚠ In colonna singola lo scavalco non ha piu' nulla da scavalcare e diventa TRABOCCO: un margine
     negativo di 5rem su una griglia larga quanto lo schermo spinge la scheda fuori (misurato: 14px a
     390). Si azzera sull'ELEMENTO, che vince sul valore ereditato da :root qualunque sia l'ordine dei
     fogli — e per chi non lo usa e' gia' zero, quindi non cambia nulla. */
  .studio__card { margin-inline-end: 0; margin-block: 0; }
}

/* ============================ i trattamenti (griglia numerata) ============================ */
.treats { padding-block: var(--section-y); background-color: var(--band-treats-bg, transparent); background-image: var(--band-treats-grad, var(--grad-tint)); }
/* ⚠ L'introduzione stretta a sinistra lasciava un BUCO a destra largo mezza pagina. Titolo e testo
   si dividono la riga: la colonna del titolo tiene la gerarchia, quella del testo la misura di
   lettura, e insieme riempiono tutta l'area. Sotto i 900px tornano in colonna. */
.treats__head { display: grid; gap: clamp(var(--space-6), 4vw, var(--space-8)); }
/* ⚠ L'intestazione dei trattamenti e' a DUE colonne (titolo a sinistra, testo a destra). Centrarla
   dentro questo impianto la spezza: titolo centrato nella sua meta' e paragrafo orfano nell'altra.
   Chi la centra passa a UNA colonna — sono due valori, non due fogli. */
.treats__head > .section-intro {
  max-width: var(--intro-head-max, none); margin-bottom: 0;
  margin-inline: var(--intro-margin, 0);
  display: grid; grid-template-columns: var(--intro-head-cols, minmax(0, 1fr) minmax(0, 1fr));
  /* ⚠ Distanza fra COLONNE ampia (separa i due blocchi) ma fra RIGHE stretta: col gap unico il filetto
     restava orfano a mezz'aria sotto il titolo invece di appartenergli. */
  column-gap: clamp(var(--space-6), 5vw, var(--space-9)); row-gap: var(--space-4); align-items: start;
}
.treats__head > .section-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.treats__head > .section-intro h2 { margin-bottom: var(--space-3); }
.treats__head > .section-intro .rule { grid-column: 1; margin-top: 0; margin-inline: var(--intro-rule-margin, 0); }
.treats__head > .section-intro .lead { grid-column: var(--intro-head-lead-col, 2); grid-row: var(--intro-head-lead-row, 2 / span 2); max-width: 54ch; margin: var(--intro-head-lead-margin, 0); }
@media (max-width: 899.98px) {
  .treats__head > .section-intro { grid-template-columns: 1fr; }
  .treats__head > .section-intro .lead { grid-column: 1; grid-row: auto; }
}
/* ⚠ Le schede della HOME sono tipografiche (occhiello + icona + testo) e stanno bene su tre colonne;
   quelle della pagina Trattamenti portano una FOTOGRAFIA, e su tre colonne la foto scende sotto la
   soglia in cui legge come immagine invece che come miniatura. Due griglie diverse, decise da CIÒ CHE
   LA SCHEDA CONTIENE — non dalla pagina, che il CSS non conosce. */
.treats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-5), 2.4vw, var(--space-6)); }
/* Sulla pagina dei trattamenti le schede sono grandi e con fotografia: appoggiarle su un piano proprio
   le lega fra loro invece di lasciarle galleggiare sul fondo della banda. Default trasparente. */
.treats__grid:has(.treat--foto) {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-5), 3vw, var(--space-7));
  background: var(--treats-grid-bg, transparent);
  border-radius: var(--treats-grid-radius, 0);
  padding: var(--treats-grid-pad, 0);
}
@media (max-width: 1023.98px) { .treats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 619.98px) { .treats__grid, .treats__grid:has(.treat--foto) { grid-template-columns: 1fr; } }

.treat {
  display: block; background: var(--grad-scheda); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--treat-pad, clamp(var(--space-4), 2vw, var(--space-6)));
  position: relative; overflow: hidden;
  box-shadow: var(--treat-shadow, none);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* ⚠ Filo d'accento in cima alla scheda: si allunga al passaggio del mouse. A `--treat-bar: 0` non
   esiste, quindi chi non lo accende non vede nulla — nemmeno un pixel trasparente. */
.treat::before {
  content: ""; position: absolute; inset-inline: 0; top: 0;
  height: var(--treat-bar, 0); background: var(--grad-accento);
  transform: scaleX(var(--treat-bar-scale, 1)); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.treat:hover::before { transform: scaleX(1); }
.treat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-mark); }
/* Il numerale 01–06 di dental-care-04. È nell'accento-testo (6,00), non nel ciano di marca.
   ⚠ Portato a misura di DISEGNO (non piu' un'etichetta): resta leggibile perche' e' decorativo e il
   titolo lo segue: `--treat-num-*` al default lascia l'etichetta minuscola di prima. */
.treat__num {
  display: var(--num-display);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--treat-num-size, var(--text-sm));
  line-height: var(--treat-num-lh, inherit);
  letter-spacing: var(--treat-num-tracking, var(--tracking-label));
  color: var(--treat-num-color, var(--accent-ink));
  margin-bottom: var(--space-2);
}
.treat__icon {
  display: block; width: 34px; height: 34px; margin-bottom: var(--space-3);
  background: var(--brand-mark);
  /* ⚠ La maschera vive QUI e non in uno style inline nel post_content: `../assets/` è riscritto solo nei
     .php del tema, mentre nel DB il PHP non gira. Nel foglio la url() si risolve rispetto al FOGLIO. */
  -webkit-mask: var(--icon, none) center / contain no-repeat;
  mask: var(--icon, none) center / contain no-repeat;
}
.treat[data-icon="ortodonzia"]     { --icon: url("../assets/img/icons/ortodonzia.svg"); }
.treat[data-icon="pedodonzia"]     { --icon: url("../assets/img/icons/pedodonzia.svg"); }
.treat[data-icon="parodontologia"] { --icon: url("../assets/img/icons/parodontologia.svg"); }
.treat[data-icon="implantologia"]  { --icon: url("../assets/img/icons/implantologia.svg"); }
.treat[data-icon="protesi"]        { --icon: url("../assets/img/icons/protesi.svg"); }
.treat[data-icon="conservativa"]   { --icon: url("../assets/img/icons/conservativa.svg"); }
.treat[data-icon="igiene"]         { --icon: url("../assets/img/icons/igiene.svg"); }
.treat[data-icon="estetica"]       { --icon: url("../assets/img/icons/estetica.svg"); }
.treat[data-icon="endodonzia"]     { --icon: url("../assets/img/icons/endodonzia.svg"); }
.treat[data-icon="chirurgia"]      { --icon: url("../assets/img/icons/chirurgia.svg"); }

/* Targa dietro l'icona: la trasforma da pittogramma sospeso in un elemento con un suo peso. */
.treat__icon {
  padding: var(--treat-icon-pad, 0);
  box-sizing: content-box;
  border-radius: var(--treat-icon-radius, 0);
}
.treat h3 { margin-bottom: var(--space-2); }
.treat p { color: var(--ink-muted); }
.treat__more { margin-top: var(--space-3); font-weight: 700; color: var(--accent-ink); font-size: 0.92rem; }
a.treat:hover h3 { color: var(--accent-ink); }
a.treat:hover .treat__more { text-decoration: underline; }

/* ============================ i valori (pannello a mezza pagina) ============================ */
/* Il blocco di colore che occupa METÀ pagina e si ferma, con l'elenco spuntato: è il device
   «why choose us» di dental-care-04. Asimmetrico per costruzione. */
.values { background-color: var(--band-values-bg, var(--paper)); position: relative; }
.values__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.values__panel {
  background: var(--grad-panel); color: var(--on-dark);
  padding: var(--section-y) var(--space-7) var(--section-y) var(--bleed);
}
.values__panel > * { max-width: 30rem; }
.values__panel .eyebrow { color: var(--accent-lt); }
.values__panel h2 { color: var(--on-dark); margin-bottom: var(--space-3); }
.values__panel .lead { color: var(--on-dark-muted); }
.values__list { margin-top: var(--space-6); }
.values__list li + li { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.22); }
.value { display: grid; grid-template-columns: 26px 1fr; gap: var(--space-3); }
.value__icon {
  width: 26px; height: 26px; margin-top: 3px;
  background: var(--accent-lt);
  -webkit-mask: var(--icon, none) center / contain no-repeat;
  mask: var(--icon, none) center / contain no-repeat;
}
.value[data-icon="paziente"]        { --icon: url("../assets/img/icons/paziente.svg"); }
.value[data-icon="cortesia"]        { --icon: url("../assets/img/icons/cortesia.svg"); }
.value[data-icon="professionalita"] { --icon: url("../assets/img/icons/professionalita.svg"); }
.value[data-icon="qualita"]         { --icon: url("../assets/img/icons/qualita.svg"); }
.value h3 { color: var(--on-dark); margin-bottom: var(--space-1); font-size: var(--text-base); }
.value p { color: var(--on-dark-muted); font-size: 0.95rem; }

.values__side { background: var(--surface); }
.values__side img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); }

@media (max-width: 899.98px) {
  .values__grid { grid-template-columns: 1fr; }
  .values__panel { padding-inline: var(--gutter); }
  .values__panel > * { max-width: none; }
  /* ⚠ Senza foto la colonna resterebbe un riquadro tinto VUOTO alto mezzo schermo: su mobile la si
     mostra solo quando contiene davvero un'immagine. */
  .values__side:not(:has(img)) { display: none; }
  .values__side:has(img) { aspect-ratio: var(--fig-ratio-wide); }
}

/* ============================ fascia contatti ============================ */
/* Un MESTIERE per blocco: questa fascia AGISCE (prenota), il piè ORIENTA (mappa del sito). */
/* Scala di PROFONDITÀ fra i tre blocchi pieni che si susseguono: pannello valori (--brand), fascia
   contatti (--brand-mid), piè (--brand-dark). Sullo stesso teal si leggevano come una massa unica —
   il salto di tono è ciò che dice al lettore che il mestiere del blocco è cambiato. Tutte e tre le
   coppie di testo restano sopra 4,6 (misurate: bianco 6,01 · 7,96 · 11,26). */
.contact-band { background: var(--grad-band); color: var(--on-dark); padding-block: var(--section-y); }
.contact-band__map .eyebrow { color: var(--accent-lt); }
.contact-band__map p { color: var(--on-dark); margin-bottom: var(--space-4); }
.contact-band__map .btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,.55); }
.contact-band__map .btn--ghost:hover { background: var(--on-dark); color: var(--brand); border-color: var(--on-dark); }
.contact-band .eyebrow { color: var(--accent-lt); }
.contact-band h2 { color: var(--on-dark); margin-bottom: var(--space-3); }
.contact-band .lead { color: var(--on-dark-muted); margin-bottom: var(--space-6); }
.contact-band__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: center; }
.contact-band__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact-band__facts { display: grid; gap: var(--space-4); }
.contact-band__facts dt { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt); }
.contact-band__facts dd { color: var(--on-dark); margin: 0; }
.contact-band a:hover { text-decoration: underline; }
@media (max-width: 899.98px) { .contact-band__row { grid-template-columns: 1fr; } }

/* Orari: componente CONDIVISO fra banda scura, scheda chiara e piè.
   ⚠ Un componente condiviso NASCE CHIARO: il colore si EREDITA dal contesto, non si fissa qui, altrimenti
   diventa invisibile sull'altro fondo. */
.hours { display: grid; gap: var(--space-2); font-size: 0.95rem; }
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); }
.hours li span:first-child { font-weight: 700; }

/* ============================ testata di pagina ============================ */
/* ⚠ NON riusa la size della testata (regola 6): è una testata di pagina, non un hero. */
.page-head { background-color: var(--band-head-bg, transparent); background-image: var(--band-head-grad, var(--grad-carta2)); padding-block: clamp(var(--space-7), 5vw, var(--space-9)); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.page-head .lead { max-width: 62ch; }

/* ============================ prosa ============================ */
/* Il testo lungo dell'informativa su un FOGLIO invece che appoggiato al fondo della pagina: e' la
   differenza fra un documento e un muro di testo. Default trasparente. */
.section > .prose,
.section > .container > .prose {
  background: var(--prose-panel-bg, transparent);
  border-radius: var(--prose-panel-radius, 0);
  padding: var(--prose-panel-pad, 0);
  box-shadow: var(--prose-panel-shadow, none);
}
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose p + p { margin-top: var(--space-4); }
.prose ul { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.prose ul li { padding-left: var(--space-5); position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-mark); }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

.checks { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
/* ⚠⚠ `checks/0..2` di trattamenti_page sono leaf OBBLIGATORIE del catalogo che nessun pattern rendeva:
   il primo cliente le ha riempite senza accorgersene e il testo non e' mai arrivato in pagina. Ora
   esistono, ma SOLO dove il progetto le accende — accenderle per tutti farebbe comparire un elenco
   nuovo su un sito gia' consegnato. */
.checks--prestazioni {
  display: var(--page-checks-display, none);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5) var(--space-6); margin: 0;
}
/* La banda che le ospita esiste solo con loro: senza, e' una sezione vuota che stampa il proprio
   padding e apre un vuoto in mezzo alla pagina. */
.section.prestazioni { display: var(--page-checks-display, none); padding-block: var(--space-7); background-color: var(--band-prestazioni-bg, transparent); background-image: none; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; }
.checks li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; background: var(--accent-ink); -webkit-mask: url("../assets/img/icons/check.svg") center / contain no-repeat; mask: url("../assets/img/icons/check.svg") center / contain no-repeat; }

/* Foto di sezione INTEGRATA vicino alla descrizione, mai in una banda separata a fondo pagina (regola 13). */
.fig { border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-6); }
.fig img { width: 100%; aspect-ratio: 21 / 9; min-height: clamp(260px, 30vw, 460px); object-fit: cover; object-position: var(--fig-object-pos); }

/* ============================ pagina contatti ============================ */
.contact-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: start;   background: var(--contact-panel-bg, transparent);
  border-radius: var(--contact-panel-radius, 0);
  padding: var(--contact-panel-pad, 0);
  box-shadow: var(--contact-panel-shadow, none);
}
@media (max-width: 899.98px) { .contact-cols { grid-template-columns: 1fr; } }

/* ⚠ Aside per fondo CHIARO: non si riusa la scheda della banda scura, che avrebbe i colori invertiti. */
.contact-info { background: var(--grad-tint); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(var(--space-5), 3vw, var(--space-7)); }
.contact-info dl { display: grid; gap: var(--space-5); }
.contact-info dt { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--space-1); }
.contact-info dd { margin: 0; color: var(--ink); }
.contact-info a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.contact-info .btn { margin-top: var(--space-5); }

.contact-form { display: grid; gap: var(--space-4); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 599.98px) { .contact-form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--field-radius);
  padding: 0.72rem 0.9rem; width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent-ink); }
/* ⚠ `.consent` è un flex: un <a> dentro il testo si spezzerebbe in un flex-item a sé — il testo va TUTTO
   dentro un solo <span>, link compreso. */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.92rem; color: var(--ink-muted); }
.consent input { margin-top: 0.28rem; flex: 0 0 auto; }
/* ⚠ Il consenso MARKETING è facoltativo e non tutti gli studi lo raccolgono: esiste solo dove il
   progetto lo accende. Spento è `display:none`, quindi non è focalizzabile e una casella non spuntata
   non spedisce nulla — nessun consenso viene raccolto per chi resta al default. */
.consent--marketing { display: var(--consent-marketing-display, none); }
.consent a { color: var(--accent-ink); text-decoration: underline; }

.contact-hero { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-7); }
.contact-hero img { width: 100%; height: clamp(300px, 38vw, 520px); object-fit: cover; object-position: var(--fig-object-pos); }

/* ============================ piè di pagina ============================ */
.site-footer { background: var(--grad-foot); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); }
.site-footer__grid { display: grid; grid-template-columns: var(--footer-cols); gap: clamp(var(--space-6), 4vw, var(--space-8)); }
/* ⚠ Togliere una colonna da una griglia FISSA lascia un buco: la traccia resta e lo spazio a destra
   rimane vuoto. La regola scatta SOLO quando la colonna manca davvero, così chi ha tutte le colonne non
   cambia di un pixel. Vale per gli orari, che spariscono con la loro riga quando non sono dichiarati. */
.site-footer__grid:has(> :nth-child(2):last-child) { grid-template-columns: var(--footer-cols-2); }
.site-footer__col h3 { font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt); margin-bottom: var(--space-4); }
.site-footer__col ul { display: grid; gap: var(--space-2); }
.site-footer__col a { color: var(--on-dark-muted); }
.site-footer__col a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer p { color: var(--on-dark-muted); }
.site-footer .hours { color: var(--on-dark-muted); }

/* ⚠ `justify-content: space-between` con TRE elementi NON centra il mediano: lo posiziona dove capita,
   in funzione della larghezza dei due laterali (qui la riga legale è lunga e «Powered by Dgitaly»
   finiva spostato a sinistra del centro ottico). Il centraggio vero vuole `1fr auto 1fr`: le due
   colonne laterali si spartiscono lo spazio in parti UGUALI e il mediano resta al centro della riga
   qualunque cosa contengano. */
.site-footer__legal {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3) var(--space-5); align-items: center;
  font-size: 0.85rem; color: var(--on-dark-muted);
}
.site-footer__legal > :last-child { justify-self: end; }
@media (max-width: 699.98px) {
  .site-footer__legal { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer__legal > :last-child { justify-self: center; }
}
.site-footer__legal a { color: var(--on-dark-muted); text-decoration: underline; }
.site-footer__legal a:hover { color: var(--on-dark); }
/* Powered by Dgitaly (regola 1): il marchio è un badge quadrato SENZA scritta, quindi il testo è nostro
   e il logo non si deforma. */
.powered { display: inline-flex; align-items: center; gap: var(--space-2); }
.powered img { width: 20px; height: 20px; }
@media (max-width: 899.98px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ============================ barra CTA mobile ============================ */
.cta-bar { display: none; }
@media (max-width: 1023.98px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 60;
    background: var(--brand); border-top: 1px solid rgba(255,255,255,.2);
  }
  .cta-bar a {
    padding: var(--space-4) var(--space-3); text-align: center;
    font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--on-dark);
  }
  .cta-bar a + a { border-left: 1px solid rgba(255,255,255,.2); background: var(--brand-mid); }
  /* Lo spazio per la barra, così l'ultima riga del piè non ci finisce sotto. */
  .wp-site-blocks { padding-bottom: 60px; }
}

/* ============================ 404 ============================ */
.notfound { padding-block: clamp(var(--space-8), 10vw, var(--space-10)); text-align: center; }
.notfound h1 { margin-bottom: var(--space-4); }
.notfound p { margin-inline: auto; margin-bottom: var(--space-6); }

/* Scheda di trattamento CON fotografia (pagina Trattamenti): la foto sta SOPRA il numerale, vicino al
   testo che descrive — mai raccolta in una banda a fondo pagina (regola 13). */
.treat__fig { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-4); }
.treat__fig img { width: 100%; aspect-ratio: 4 / 3; min-height: clamp(240px, 32vw, 470px); object-fit: cover; object-position: var(--fig-object-pos); transition: transform 620ms var(--ease); }
.treat--foto:hover .treat__fig img { transform: scale(1.03); }

/* ============================ mosaico dello studio ============================ */
/* ⚠ Mai una griglia piatta e uniforme: la categoria «Dottori» compone per mosaici asimmetrici. Due
   tessere rompono il passo — una ALTA (per lo scatto verticale) e una LARGA (per il panoramico) — e le
   altre restano quadre. Le dimensioni sono scelte sul RAPPORTO delle foto disponibili, non a caso. */
.gallery { padding-block: var(--section-y); background-color: var(--band-gallery-bg, transparent); background-image: var(--band-gallery-grad, var(--grad-carta2)); }
/* ⚠ Il mosaico deve TASSELLARE per intero: con collocazioni automatiche la tessera alta e quella larga
   lasciavano celle scoperte e l'ultima foto finiva sola su una riga nuova. Qui la griglia è 4×2 = otto
   celle, e le sei fotografie le occupano TUTTE: la alta ne prende due in colonna, la larga due in riga,
   le altre quattro una ciascuna. Le posizioni sono DICHIARATE, non lasciate all'auto-placement. */
.mosaic {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(190px, 19vw, 275px)); gap: var(--tile-gap);
}
.mosaic > .tile:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.mosaic > .tile:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.mosaic > .tile:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
.mosaic > .tile:nth-child(4) { grid-area: 1 / 4 / 2 / 5; }
.mosaic > .tile:nth-child(5) { grid-area: 2 / 2 / 3 / 4; }
.mosaic > .tile:nth-child(6) { grid-area: 2 / 4 / 3 / 5; }
.tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-2); margin: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); transition: transform 620ms var(--ease); }
.tile:hover img { transform: scale(1.05); }
/* Le classi restano come segno del RUOLO della tessera; la collocazione la fissa la griglia sopra. */
/* La didascalia vive sotto un velo sfumato: sul chiaro di una foto il bianco non reggerebbe, e un velo
   pieno spegnerebbe la fotografia. Compare al passaggio del puntatore e resta leggibile anche ferma. */
.tile figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--space-5) var(--space-4) var(--space-3);
  /* ⚠ Il velo era CABLATO nel ciano del primo cliente: su una palette diversa la didascalia usciva
     di un colore che non appartiene al sito. E' un token, e il default e' il valore storico. */
  background: var(--tile-caption-veil, linear-gradient(180deg, rgba(1,65,77,0) 0%, rgba(1,65,77,.86) 100%));
  color: var(--on-dark); font-size: 0.82rem; line-height: 1.35;
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover figcaption, .tile:focus-within figcaption { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tile figcaption { opacity: 1; transform: none; } .tile:hover img { transform: none; } }
@media (max-width: 899.98px) {
  /* Su due colonne la tassellatura si rifà: la alta occupa una colonna su due righe, la larga le
     attraversa entrambe. Sei foto, sei celle piene, nessun buco. */
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, clamp(130px, 30vw, 185px)); }
  .mosaic > .tile:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
  .mosaic > .tile:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  .mosaic > .tile:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
  .mosaic > .tile:nth-child(4) { grid-area: 3 / 1 / 4 / 3; }
  .mosaic > .tile:nth-child(5) { grid-area: 4 / 1 / 5 / 2; }
  .mosaic > .tile:nth-child(6) { grid-area: 4 / 2 / 5 / 3; }
}

/* ============================ bande delle pagine interne ============================ */
/* Chiusura che INVITA ad agire in fondo a ogni pagina interna: una pagina che finisce nel nulla lascia
   il visitatore senza il gesto successivo. Colore diverso da fascia e piè, così i tre blocchi scuri
   restano tre cose distinte. */
.cta-band { background: var(--grad-panel); color: var(--on-dark); padding-block: clamp(2.6rem, 1.8rem + 3vw, 4.5rem); }
.cta-band__row { display: grid; justify-items: center; text-align: center; gap: var(--space-4); }
.cta-band h2 { color: var(--on-dark); max-width: 22ch; }
.cta-band p { color: var(--on-dark-muted); max-width: 56ch; }
.cta-band__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* I punti fermi: numerali editoriali su una riga di tre. Non sono decorazione — sono le tre frasi che il
   cliente ripete in tutte le pagine, qui raccolte una volta sola. */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-5), 3vw, var(--space-7)); }
.pillar {
  display: grid; gap: var(--space-2); padding: var(--space-5);
  background: var(--grad-scheda); border: 1px solid var(--line); border-radius: var(--radius-lg);
  border-top: 3px solid transparent; border-image: var(--grad-accento) 1;
}
.pillar__n { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  background: var(--grad-accento); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pillar p { color: var(--ink); font-weight: 600; }
@media (max-width: 699.98px) { .pillars { grid-template-columns: 1fr; } }

/* Gli orari come banda propria: su una pagina Contatti sono il dato più cercato, e in fondo a un aside
   si perdono. */
.orari-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: center;
  background: var(--orari-panel-bg, transparent);
  border-radius: var(--orari-panel-radius, 0);
  padding: var(--orari-panel-pad, 0);
  box-shadow: var(--orari-panel-shadow, none);
}
.hours--big { font-size: 1.02rem; }
.hours--big li { padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.hours--big li:last-child { border-bottom: 0; }
@media (max-width: 899.98px) { .orari-band { grid-template-columns: 1fr; } }

/* Dentro la scheda la fotografia va a FILO del bordo: un riquadro dentro un riquadro fa cornice, e la
   cornice è il difetto tipico delle griglie di schede. */
.treat--foto { padding: 0; overflow: hidden; }
.treat--foto .treat__fig { margin-bottom: 0; border-radius: 0; }
.treat--foto > :not(.treat__fig) { margin-inline: clamp(var(--space-4), 2vw, var(--space-6)); }
.treat--foto > .treat__num { margin-top: var(--space-5); }
.treat--foto > p:last-child { margin-bottom: clamp(var(--space-4), 2vw, var(--space-6)); }

/* Il mosaico dei Contatti ha tre tessere: una larga che apre e due che chiudono la riga. */
.mosaic--contatti { grid-template-rows: repeat(2, clamp(230px, 24vw, 340px)); margin-bottom: var(--space-7); }

/* ============================ nastro dei trattamenti ============================ */
/* Le sei specialità che scorrono sotto la testata: sono le PAROLE DEL CLIENTE, non un ornamento, e
   dicono in tre secondi che cosa fa lo studio. ⚠ Il nastro è decorativo per lo screen reader (il suo
   contenuto è ripetuto per esteso nella sezione Trattamenti) e si FERMA su prefers-reduced-motion. */
.ribbon { display: var(--ribbon-display); background: var(--grad-nastro); color: var(--on-dark); overflow: hidden; }
/* Nastro con le specialita' DELLO STUDIO (dalla sua categoria) invece di quelle cablate nel pattern:
   esiste solo dove il progetto lo accende, e allora l'altro si spegne. */
.ribbon--client { display: var(--ribbon-client-display, none); }
.ribbon__viewport { display: flex; width: 100%; }
.ribbon__track {
  display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-3) var(--space-4) 0; margin: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 0.94rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap;
  animation: fp-ribbon 38s linear infinite;
  /* Stessa ragione della testata: una traccia larga 1698px che trasla ridisegna sul thread principale
     a ogni fotogramma se non ha un livello proprio. */
  will-change: var(--marquee-will-change, auto);
  backface-visibility: hidden;
}
.ribbon__track li { flex: 0 0 auto; }
.ribbon__track li[aria-hidden] { color: var(--accent-lt); }
@keyframes fp-ribbon { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ribbon__track { animation: none; } .ribbon__viewport { overflow-x: auto; } }

/* La chiamata all'azione di ogni trattamento: sul sito precedente chiudeva la rispettiva pagina, qui
   chiude la sua scheda. La freccia si sposta al passaggio del puntatore — il movimento dice che è un link. */
.treat__cta { margin-top: var(--space-4); }
.treat__cta a {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--accent-ink);
}
.treat__cta a::after { content: "→"; transition: transform var(--dur) var(--ease); }
.treat__cta a:hover { color: var(--brand-dark); }
.treat__cta a:hover::after { transform: translateX(4px); }