/* Correzioni d'insieme della Home desktop (caricato per ultimo).
   Le sezioni restano quelle congelate: qui solo gutter, etichette, CTA, divisori, s01, giunzioni, piede. */
:root {
  --cta: #7a3d29;
  --cta-hover: #69321f;
  --filo: #8d9685;
  --divisore: rgba(88, 84, 58, .17);
  --verde-scuro: #16231b;
}

/* ---------- 1. gutter globale: 6,67% della larghezza (128 px a 1920, 102 a 1536) ---------- */
.st { --page-gutter: clamp(24px, 6.67cqw, 160px); }
.st .gutter { translate: calc(var(--page-gutter) - var(--xref) * var(--u)) 0; }

/* ---------- 2. giunzioni: livello di sfondo, sotto testo e grafica ---------- */
.giunzione { height: auto; pointer-events: none; }

/* ---------- 3. etichette sopra i titoli: un solo componente, 21 px a 1920 ---------- */
.st .eyebrow {
  font-family: var(--font-testo) !important; font-weight: 400 !important;
  font-size: 1.094cqw !important; line-height: 1.4 !important; letter-spacing: .01em !important;
  text-transform: none !important; color: var(--eyebrow, rgb(97,12,39)) !important;
  display: flex !important; align-items: center; gap: .78cqw !important; white-space: nowrap;
}
.st .eyebrow::after { content: "" !important; flex: none !important; margin: 0 !important;
  width: calc(var(--riga, 140) * var(--u)) !important; height: 1px !important; background: rgb(172,156,141) !important; }
#s04 .eyebrow { align-items: flex-start; }
#s04 .eyebrow::after { margin-top: .7em !important; }
#s06 .eyebrow { --eyebrow: #e7e4da; }
/* la lunghezza del filo resta quella di ciascun mockup; i fili disegnati a parte si spengono */
#s04 { --riga: 138; } #s05 { --riga: 138; } #s06 { --riga: 198; } #s07 { --riga: 143; } #s08 { --riga: 202; }
#s09 { --riga: 132; } #s09b { --riga: 134; } #s09c { --riga: 125; } #s10 { --riga: 234; } #s11 { --riga: 151; }
#s04 .eyebrow, #s05 .eyebrow, #s06 .eyebrow, #s07 .eyebrow, #s08 .eyebrow, #s09 .eyebrow, #s09b .eyebrow,
#s09c .eyebrow, #s10 .eyebrow, #s11 .eyebrow { --riga: inherit; }
.filo-s04, .filo-s05[style*="--y:133"], .filo-s06[style*="--y:73"], .filo-s07, .filo-s08, .filo-s09,
.filo-s09b, .filo-s09c, .filo-s10, .filo-s11[style*="--y:106"] { display: none !important; }

/* ---------- 4. CTA primaria: un solo marrone ---------- */
.st .cta, .st .cta-s06 { background: rgb(97,12,39) !important; }
.st .cta:hover, .st .cta-s06:hover { background: var(--cta-hover) !important; }

/* ---------- 5. divisori chiari: un solo colore semitrasparente ---------- */
.divisore-s01, .divisore-s02, .divisore-s03, .divisore-s05, .divisore-s08, .divisore-s09,
.divisore-s09b, .divisore-s09c, .divisore-s10, .divisore-s11 { background: rgba(172,156,141,0.6) !important; opacity: 1 !important; }

/* ---------- 6. s01 nella scala del resto del sito (a 1920: titolo 108 px, testo 22 px, CTA 65 px) ---------- */
#s01 h1 { --f: 57.6 !important; --y: 170 !important; }
#s01 > .tipo-sottotitolo { --f: 31.7 !important; --y: 296 !important; }
#s01 > .tipo-corpo { --f: 11.9 !important; --y: 425 !important; }
#s01 > .cta { --f: 11.7 !important; --h: 34.7 !important; --w: 225 !important; }
#s01 > .link { --f: 11.7 !important; --x: 326 !important; }
#s01 .pilastro { --f: 15 !important; --y: 645 !important; }
#s01 .icona-s01 { scale: .7; transform-origin: 100% 50%; }

/* ---------- 7. piede: informazioni reali del sito di Irene, fondo verde scuro ---------- */
.piede { container-type: inline-size; background: rgb(74,52,44); color: rgba(239,236,233,0.85);
  font-family: var(--font-testo); font-size: .94cqw; line-height: 1.6; }
.piede a { color: inherit; text-decoration: none; }
.piede a:hover { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
.piede-griglia { display: grid; grid-template-columns: 2.2fr 1fr 1.3fr 1fr; gap: 3cqw;
  padding: 4.6cqw clamp(24px, 6.67cqw, 160px) 3.4cqw; }
.piede-nome { margin: 0; font-family: var(--font-titoli); color: rgb(239,236,233); font-size: 1.9cqw; line-height: 1.1; letter-spacing: -.02em; }
.piede-ruolo { margin: .5cqw 0 0; color: rgb(239,236,233); }
.piede-descrizione { margin: .2cqw 0 1.6cqw; color: rgba(239,236,233,0.7); }
.piede-prenota { display: inline-flex; align-items: center; min-height: 3.2cqw; padding: 0 1.4cqw; border-radius: 999px;
  border: 1px solid rgba(212,187,162,0.45); color: rgb(239,236,233) !important; }
.piede-prenota:hover { background: rgba(255, 255, 255, .06); text-decoration: none !important; }
.piede-titolo { margin: 0 0 1cqw; font-size: 1.094cqw; color: rgb(212,187,162); letter-spacing: .01em; }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin: 0 0 .45cqw; }
.piede-firma { margin: 0; padding: 1.4cqw clamp(24px, 6.67cqw, 160px) 1.8cqw; border-top: 1px solid rgba(212,187,162,0.18);
  color: rgba(239,236,233,0.6); font-size: .83cqw; }

/* ---------- 8. s01: ritmo verticale compatto (a 1920: etichetta->titolo 37 px, titolo->sottotitolo 15,
   sottotitolo->testo 37, testo->CTA 41, CTA->pilastri 81). Scale gia' approvate invariate. ---------- */
#s01 .eyebrow { --y: 172 !important; text-transform: uppercase !important; letter-spacing: .09em !important; }
#s01 h1 { --y: 210 !important; }
#s01 > .tipo-sottotitolo { --y: 328 !important; }
#s01 > .tipo-corpo { --y: 439 !important; }
#s01 > .cta { --y: 527 !important; }
#s01 > .link { --y: 535 !important; }

/* ---------- 9. testata nello stesso contenitore del sito: logo | menu | Prenota, bordi sul gutter ---------- */
#s01 header { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: calc(62 * var(--u));
  display: flex; align-items: center; justify-content: space-between; padding-inline: var(--page-gutter); box-sizing: border-box; }
#s01 header > .a, #s01 header nav > .a { position: static !important; translate: none !important; }
#s01 header nav { display: block; }

/* ══ PALETTE DI IRENE (palette.py): le regole che l'anteprima approvata scriveva a parte ══ */
:root { --cta: rgb(97,12,39); --cta-hover: rgb(76,9,30); }
.st .eyebrow::after { background: rgb(97,12,39) !important; }
:is(#s06, #dimensioni) .eyebrow::after { background: rgb(212,187,162) !important; }
#s10 > .fasi-s10::before { background: rgb(172,156,141) !important; }
#s10 .fase-s10::before { background: rgb(239,236,233) !important; border-color: rgb(97,12,39) !important; }
#s10 .fase-s10:last-of-type::before { background: rgb(97,12,39) !important; }
#s07 > .passi-s07::before { background: rgb(172,156,141) !important; }
#s06 > .processo-s06::before { background: rgba(212,187,162,.45) !important; }
#s09 .percorsi-s09 > .percorso-s09::before { color: rgb(97,12,39) !important; }
/* chiusura "Quale percorso scegliere?": fondo bordeaux, testi bianco latte. SOLO TELEFONO: l'anteprima approvata e'
   del telefono; sul computer la sezione e' una foto chiara e il testo chiaro non si leggerebbe */
@media (max-width: 767.98px) {
#s11 { background: rgb(97,12,39) !important; }
#s11#s11 *:not(svg):not(svg *) { color: rgb(239,236,233) !important; }
#s11 .eyebrow::after, #s11 [class*="filo"] { background: rgba(239,236,233,.55) !important; }
#s11 blockquote { border-left-color: rgba(239,236,233,.55) !important; }
#s11 [class*="cerchio"] { background: rgb(212,187,162) !important; }
#s11 [class*="cerchio"] svg, #s11 [class*="cerchio"] svg * { stroke: rgb(97,12,39) !important; color: rgb(97,12,39) !important; }
#s11 .colonna-s11 { border-color: rgba(239,236,233,.25) !important; }
#s11#s11 *::before, #s11#s11 *::after { color: rgba(239,236,233,.75) !important; }
}
:root { --cielo-v2: rgb(212,187,162); --crema-v2: rgb(239,236,233); --verde-scuro: rgb(74,52,44); }