/* ==========================================================================
   Aggiunte alla pagina tesi — selettore colore e disponibilità.
   Tutto dentro .cst-tesi, così non tocca niente del foglio di stile esistente.
   ========================================================================== */

/* ---------- barra di prova (non va in produzione) ---------- */
.cst-prova { background: #1a1a3e; color: #fff; font-family: 'Poppins', sans-serif; }
.cst-prova__inner { max-width: 1350px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px max(16px, env(safe-area-inset-left, 0px)); }
.cst-prova__tag { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F5C518; }
.cst-prova__testo { font-size: 12.5px; color: #c9cad6; flex: 1 1 240px; min-width: 0; line-height: 1.45; }
.cst-prova__sw { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; user-select: none; }
.cst-prova__sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.cst-prova__pista { width: 42px; height: 24px; border-radius: 999px; background: #4a4a6b; position: relative; transition: background .18s ease; flex: none; }
.cst-prova__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.cst-prova__sw input:checked + .cst-prova__pista { background: #16a34a; }
.cst-prova__sw input:checked + .cst-prova__pista::after { transform: translateX(18px); }
.cst-prova__sw input:focus-visible + .cst-prova__pista { outline: 2px solid #F5C518; outline-offset: 2px; }

/* ---------- vetrina: tutte le foto impilate, si vede l'attiva ---------- */
.cst-tesi .cst-vetrina {
    position: relative; aspect-ratio: 1; max-width: 100%;
    background: #fff; border: 1px solid var(--cst-border); border-radius: var(--cst-radius-lg);
    box-shadow: var(--cst-shadow); overflow: hidden;
}
.cst-tesi .cst-vetrina img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 5%;
    opacity: 0; transition: opacity .25s ease;
}
.cst-tesi .cst-vetrina img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cst-tesi .cst-vetrina img { transition: none; } }

.cst-tesi .cst-vetrina__scheda { margin-top: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.cst-tesi .cst-vetrina__nome { font-weight: 700; color: var(--cst-navy); font-size: 1rem; }
.cst-tesi .cst-vetrina__nome i { font-style: normal; font-weight: 400; color: var(--cst-text-soft); }

/* ---------- pillole di stato ---------- */
.cst-tesi .cst-disp {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: .72rem; font-weight: 700; line-height: 1.3;
    padding: .25rem .65rem; border-radius: var(--cst-radius-pill);
}
.cst-tesi .cst-disp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cst-tesi .cst-disp--pronta { color: #0f7a3d; background: #e7f6ec; }
.cst-tesi .cst-disp--ordine { color: #9a6a00; background: #fff8e1; }
.cst-tesi .cst-disp--neutra { color: var(--cst-text-soft); background: var(--cst-bg-soft); }

/* ---------- selettore colore ---------- */
.cst-tesi .cst-picker__istruzione {
    display: flex; align-items: center; gap: .5rem;
    font-size: .95rem; font-weight: 700; color: var(--cst-navy);
    margin: 1.25rem 0 .15rem;
}
.cst-tesi .cst-picker__istruzione .cst-icon { width: 20px; height: 20px; color: var(--cst-orange); flex: none; }
.cst-tesi .cst-picker__conteggio { font-size: .85rem; color: var(--cst-text-soft); margin: 0 0 1rem; }

.cst-tesi .cst-picker__gruppo { margin-bottom: 1.25rem; }
.cst-tesi .cst-picker__gruppo-tit {
    display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--cst-navy); margin: 0 0 .55rem;
}
.cst-tesi .cst-picker__gruppo-tit em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cst-text-soft); font-size: .82rem; }
.cst-tesi .cst-picker__gruppo-tit b { color: #16a34a; }

.cst-tesi .cst-tacche { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cst-tesi .cst-tacca {
    position: relative; width: 58px; height: 58px; padding: 0;
    border: 2px solid var(--cst-border); border-radius: 10px; background: #fff;
    cursor: pointer; overflow: hidden; display: block;
    transition: border-color .15s ease, transform .15s ease;
}
.cst-tesi .cst-tacca img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.75); }
.cst-tesi .cst-tacca:hover { border-color: var(--cst-navy); transform: translateY(-2px); }
.cst-tesi .cst-tacca:focus-visible { outline: 2px solid var(--cst-orange); outline-offset: 2px; }
.cst-tesi .cst-tacca[aria-pressed="true"] { border-color: var(--cst-navy); transform: none; }
.cst-tesi .cst-tacca[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px #fff; border-radius: 8px; }
.cst-tesi .cst-tacca__ok {
    position: absolute; z-index: 2; right: 3px; bottom: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--cst-navy); display: none; align-items: center; justify-content: center;
}
.cst-tesi .cst-tacca[aria-pressed="true"] .cst-tacca__ok { display: flex; }
.cst-tesi .cst-tacca__ok svg { width: 9px; height: 9px; color: #fff; stroke-width: 3.5; }
.cst-tesi .cst-tacca__dot {
    position: absolute; z-index: 2; right: 4px; top: 4px; width: 9px; height: 9px;
    border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2px #fff; display: none;
}
.cst-tesi .cst-tacca--scorta .cst-tacca__dot { display: block; }

/* invito al primo tocco: smette appena si tocca */
@keyframes cst-respiro {
    0%, 100% { box-shadow: 0 0 0 0 rgba(237, 139, 0, .5); }
    50%      { box-shadow: 0 0 0 7px rgba(237, 139, 0, 0); }
}
body:not(.cst-toccato) .cst-tesi .cst-tacca--invito { animation: cst-respiro 2.1s ease-out infinite; }
body:not(.cst-toccato) .cst-tesi li:nth-child(2) .cst-tacca--invito { animation-delay: .25s; }
body:not(.cst-toccato) .cst-tesi li:nth-child(3) .cst-tacca--invito { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .cst-tesi .cst-tacca--invito { animation: none !important; } }

/* ---------- i due riquadri sotto i selettori ---------- */
.cst-tesi .cst-ganci { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 1350px; margin: 2rem auto 0; }
@media (max-width: 760px) { .cst-tesi .cst-ganci { grid-template-columns: 1fr; } }
.cst-tesi .cst-gancio { background: #fff; border: 1px solid var(--cst-border); border-radius: var(--cst-radius); padding: 1.1rem 1.25rem; box-shadow: var(--cst-shadow); }
.cst-tesi .cst-gancio h3 { font-size: 1rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.cst-tesi .cst-gancio h3 .cst-icon { width: 20px; height: 20px; color: var(--cst-orange); flex: none; }
.cst-tesi .cst-gancio p { font-size: .9rem; margin-bottom: .6rem; }
.cst-tesi .cst-gancio p:last-child { margin-bottom: 0; }

/* ---------- mappa statica al posto dell'iframe (solo nel mockup) ---------- */
.cst-tesi .cst-mappa-finta {
    min-height: 380px; border-radius: var(--cst-radius);
    background: repeating-linear-gradient(45deg, #eceef2, #eceef2 12px, #e4e7ec 12px, #e4e7ec 24px);
    border: 1px solid var(--cst-border);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .6rem; text-align: center; padding: 1.5rem; color: var(--cst-text-soft); font-size: .9rem;
}
.cst-tesi .cst-mappa-finta strong { color: var(--cst-navy); font-size: 1rem; }
.cst-tesi .cst-mappa-finta .cst-icon { width: 34px; height: 34px; color: var(--cst-red); }

/* ==========================================================================
   Revisione UX — novembre 2026
   Le copertine vengono per prime, la tabella scende a riepilogo,
   gli approfondimenti vanno nei toggle.
   ========================================================================== */

/* ---------- sezioni copertina: fuori dal meccanismo fisarmonica ----------
   Avevano la classe .cst-stampa-item: su telefono il JS le chiudeva e il CSS
   schiacciava la foto a 16/9. Ora hanno una classe propria. */
.cst-tesi .cst-linee { background: #fff; padding: 0 1.5rem; }
.cst-tesi .cst-linea-item { max-width: var(--cst-maxw); margin: 0 auto; padding: 2.5rem 0; }
.cst-tesi .cst-linea-item__inner {
    display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 900px) {
    .cst-tesi .cst-linee { padding: 0 1rem; }
    .cst-tesi .cst-linea-item { padding: 1.75rem 0; }
    /* la copertina deve stare SOPRA: è la cosa che fa scegliere */
    .cst-tesi .cst-linea-item__inner { grid-template-columns: 1fr; gap: 1.25rem; }
}

.cst-tesi .cst-linea-item .cst-h2 { margin-bottom: .4rem; }
.cst-tesi .cst-linea-claim {
    font-size: 1.05rem; font-weight: 600; color: var(--cst-navy);
    margin: 0 0 .5rem; line-height: 1.4;
}
.cst-tesi .cst-linea-item > .cst-linea-item__inner p { margin-bottom: .75rem; }

/* ---------- toggle leggero per gli approfondimenti ---------- */
.cst-tesi .cst-piu { border: 0; margin: .25rem 0 1rem; }
.cst-tesi .cst-piu > summary {
    display: inline-flex; align-items: center; gap: .35rem;
    cursor: pointer; list-style: none;
    font-size: .85rem; font-weight: 500; color: var(--cst-navy);
    border-bottom: 1px dashed var(--cst-yellow-dark); padding-bottom: 1px;
}
.cst-tesi .cst-piu > summary::-webkit-details-marker { display: none; }
.cst-tesi .cst-piu > summary::after { content: "+"; font-size: 1.05rem; line-height: 1; color: var(--cst-orange); }
.cst-tesi .cst-piu[open] > summary::after { content: "\2013"; }
.cst-tesi .cst-piu > summary:focus-visible { outline: 2px solid var(--cst-orange); outline-offset: 3px; }
.cst-tesi .cst-piu__corpo {
    font-size: .9rem; line-height: 1.6; color: var(--cst-text);
    background: var(--cst-bg-soft); border-radius: 10px;
    padding: .85rem 1rem; margin-top: .6rem;
}
.cst-tesi .cst-piu__corpo p { margin: 0 0 .6rem; font-size: .9rem; }
.cst-tesi .cst-piu__corpo p:last-child { margin-bottom: 0; }
.cst-tesi .cst-piu__corpo ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }

/* ---------- tabella riepilogo, ora sotto le linee ---------- */
.cst-tesi .cst-riepilogo { background: var(--cst-bg-soft); }
.cst-tesi .cst-riepilogo .cst-section__inner { padding-top: 2rem; padding-bottom: 2.5rem; }

/* ---------- schede delle copie ---------- */
.cst-tesi .cst-copie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 900px; margin: 0 auto; }
@media (max-width: 760px) { .cst-tesi .cst-copie { grid-template-columns: 1fr; } }
.cst-tesi .cst-copia {
    position: relative; background: #fff; border: 1px solid var(--cst-border);
    border-radius: var(--cst-radius); padding: 1.3rem 1.1rem 1.1rem; text-align: center;
}
.cst-tesi .cst-copia__q { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cst-text-soft); margin: 0 0 .35rem; }
.cst-tesi .cst-copia__p { font-size: 2rem; font-weight: 800; color: var(--cst-navy); line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.cst-tesi .cst-copia__p small { font-size: .9rem; font-weight: 600; color: var(--cst-text-soft); }
.cst-tesi .cst-copia__chi { font-size: .85rem; color: var(--cst-text); margin: .5rem 0 0; }
.cst-tesi .cst-copia--best { border: 2px solid var(--cst-yellow); background: #fffdf3; box-shadow: 0 6px 20px rgba(245,197,24,.22); }
.cst-tesi .cst-copia__etichetta {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    background: var(--cst-yellow); color: var(--cst-navy-dark);
    font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: .25rem .6rem; border-radius: var(--cst-radius-pill);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.cst-tesi .cst-copia__etichetta svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }

/* ---------- passi del calcolatore: riga con numeri collegati ---------- */
.cst-tesi .cst-passi { display: flex; align-items: flex-start; gap: 0; max-width: 820px; margin: 0 auto 1.75rem; }
.cst-tesi .cst-passo { flex: 1 1 0; text-align: center; position: relative; padding: 0 .35rem; }
.cst-tesi .cst-passo::before {
    content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
    background: var(--cst-border); z-index: 0;
}
.cst-tesi .cst-passo:first-child::before { display: none; }
.cst-tesi .cst-passo__n {
    position: relative; z-index: 1; width: 32px; height: 32px; margin: 0 auto .45rem;
    border-radius: 50%; background: var(--cst-bg-soft); border: 2px solid var(--cst-border);
    color: var(--cst-navy); font-weight: 800; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
}
.cst-tesi .cst-passo.is-active .cst-passo__n { background: var(--cst-yellow); border-color: var(--cst-yellow); }
.cst-tesi .cst-passo__t { font-size: .8rem; font-weight: 700; color: var(--cst-navy); line-height: 1.25; display: block; }
.cst-tesi .cst-passo__d { font-size: .72rem; color: var(--cst-text-soft); line-height: 1.3; display: block; margin-top: .15rem; }
@media (max-width: 560px) { .cst-tesi .cst-passo__d { display: none; } }

/* ==========================================================================
   GERARCHIA DEI PESI
   Il problema non era la grafica dei singoli pezzi: era che gridavano tutti
   allo stesso volume. Qui si abbassa il volume di quello che accompagna,
   così resta alto solo dove serve decidere.
   ========================================================================== */

/* 1 · Scala dei titoli — tre livelli invece di uno solo
      h1 hero  >  h2 delle 4 scelte  >  h2 dei blocchi interni */
.cst-tesi .cst-stampa-group .cst-h2,
.cst-tesi .cst-linea-item .cst-h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.cst-tesi .cst-stampa-group .cst-h2__sub { font-size: .62em; }
.cst-tesi .cst-stampa-group .cst-imgtxt__text p { font-size: .95rem; }

/* 2 · I banner di sezione: erano fasce piene, diventano un'insegna sottile */
.cst-tesi .cst-banner { padding-block: .9rem; box-shadow: none; }
.cst-tesi .cst-banner__title { font-size: clamp(1.1rem, 2.2vw, 1.45rem); letter-spacing: .02em; }
.cst-tesi .cst-banner__step { font-size: .68rem; letter-spacing: .12em; opacity: .75; }
.cst-tesi .cst-banner__avatar { width: 46px; height: 46px; }

/* 3 · Il riquadro "Perché?" dentro le sezioni stampa: da scatola gialla
      a nota di margine. Si legge se serve, non compete col titolo. */
.cst-tesi .cst-stampa-group .cst-why-box {
    background: transparent; border: 0; border-left: 3px solid var(--cst-yellow);
    border-radius: 0; padding: .35rem 0 .35rem .9rem; margin-top: .9rem;
    font-size: .88rem; color: var(--cst-text-soft);
}
.cst-tesi .cst-stampa-group .cst-why-box__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.cst-tesi .cst-stampa-group .cst-why-box strong { color: var(--cst-text); }

/* 4 · Meno oggetti con bordo e ombra: l'ombra marca ciò che è cliccabile */
.cst-tesi .cst-pillar { box-shadow: none; border: 1px solid var(--cst-border); }
.cst-tesi .cst-choice { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.cst-tesi .cst-choice:hover { box-shadow: var(--cst-shadow); }

/* 5 · Respiro: più spazio FRA le quattro scelte, meno dentro ognuna */
.cst-tesi .cst-anchor + .cst-banner { margin-top: 3.5rem; }
@media (max-width: 760px) { .cst-tesi .cst-anchor + .cst-banner { margin-top: 2.25rem; } }
.cst-tesi .cst-stampa-group .cst-imgtxt { padding-block: 1.75rem; }

/* 6 · La fascia gialla dei vantaggi ripeteva la barra blu in alto.
      Resta, ma solo con quello che la barra blu non dice già. */
.cst-tesi .cst-benefits__grid { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin: 0 auto; }
@media (max-width: 620px) { .cst-tesi .cst-benefits__grid { grid-template-columns: 1fr; gap: .6rem; } }
.cst-tesi .cst-benefits__title { font-size: clamp(1rem, 2vw, 1.25rem); }

/* 7 · Il listino: il prezzo è il dato, il resto è contorno */
.cst-tesi .cst-pricing__price { font-variant-numeric: tabular-nums; }
.cst-tesi .cst-pricing__card:not(.cst-pricing__card--highlight) .cst-pricing__note { font-size: .82rem; color: var(--cst-text-soft); }

/* La scheda blu: la nota grigia qui sopra la rendeva illeggibile sul navy */
.cst-tesi .cst-pricing__card--highlight .cst-pricing__note { font-size: .82rem; color: rgba(255,255,255,.78); }
.cst-tesi .cst-pricing__card--highlight .cst-pricing__note strong { color: #fff; }

/* L'etichetta era una barra verde a tutta larghezza: ora è una pastiglia
   piccola accanto al prezzo, come le altre della pagina */
/* Etichetta accanto al nome a sinistra, prezzo a destra in colonna
   con le altre due righe. */
.cst-tesi .cst-pricing__best { display: flex; flex-wrap: nowrap; align-items: center; gap: .6rem; }
.cst-tesi .cst-pricing__best > strong { order: 1; }
.cst-tesi .cst-pricing__best > .cst-pricing__badge { order: 2; }
.cst-tesi .cst-pricing__best > .cst-pricing__price { order: 3; margin-left: auto; }
.cst-tesi .cst-pricing__badge {
    position: static; display: inline-flex; align-items: center; gap: 3px;
    width: auto; margin: 0; flex: none; white-space: nowrap;
    background: var(--cst-yellow); color: var(--cst-navy-dark);
    font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: .18rem .45rem; border-radius: var(--cst-radius-pill); box-shadow: none;
}
.cst-tesi .cst-pricing__badge .cst-stellina { width: 9px; height: 9px; }

/* ==========================================================================
   COMPATTAZIONE
   Molti vuoti non erano scelte: erano il gap da 4rem di .cst-imgtxt__inner
   applicato anche ai blocchi a una colonna, dove separa il titolo dal
   contenuto come se fossero due colonne.
   ========================================================================== */

/* 1 · I passi del calcolatore erano un <ol>: il browser aggiungeva
      "1." "2." "3." accanto ai cerchietti. */
.cst-tesi .cst-passi { list-style: none; padding-left: 0; margin-top: 0; }
.cst-tesi .cst-passo { list-style: none; }

/* 2 · Gap generale più corto, e molto più corto nei blocchi a una colonna */
.cst-tesi .cst-imgtxt__inner { gap: clamp(1.5rem, 3vw, 2.5rem); }
.cst-tesi .cst-imgtxt__inner.cst-stretto { gap: 1rem; }
.cst-tesi .cst-imgtxt__inner.cst-stretto > div:first-child { margin-bottom: 0; }

/* 3 · "Come stampi la tua tesi": le schede erano alte il doppio del testo */
.cst-tesi .cst-steps { margin-top: 2rem; gap: 1rem; }
.cst-tesi .cst-step { padding: 2.1rem 1.15rem 1.2rem; }
.cst-tesi .cst-step__num { width: 40px; height: 40px; top: -20px; font-size: 1rem; }
.cst-tesi .cst-step__title { font-size: 1rem; margin-bottom: .35rem; }
.cst-tesi .cst-step p { font-size: .88rem; line-height: 1.55; margin-bottom: 0; }
@media (max-width: 760px) { .cst-tesi .cst-steps { gap: 1.9rem; } }

/* 4 · Fascia gialla: due centimetri di aria sotto il titolo */
.cst-tesi .cst-benefits { padding-block: 1.6rem; }
.cst-tesi .cst-benefits__title { margin-bottom: 1.1rem; }
.cst-tesi .cst-benefit__icon { width: 44px; height: 44px; }
.cst-tesi .cst-benefit span { font-size: .85rem; }

/* 5 · Sezioni a una colonna: meno padding verticale */
.cst-tesi .cst-imgtxt--compatta { padding-block: 2rem; }

/* 6 · La checklist "cosa portare" prende il modo delle FAQ:
      righe sottili separate da un filo, niente scatole */
.cst-tesi .cst-checklist { display: grid; gap: 0; }
.cst-tesi .cst-checklist li {
    background: transparent; border: 0; border-top: 1px solid var(--cst-border);
    border-radius: 0; padding: .95rem .25rem; box-shadow: none;
}
.cst-tesi .cst-checklist li p { font-size: .88rem; color: var(--cst-text-soft); margin: .2rem 0 0; }
.cst-tesi .cst-checklist__icon { width: 34px; height: 34px; }

/* 7 · Il confronto con gli e-commerce: righe più sottili */
.cst-tesi .cst-compare__row { padding-block: .6rem; }

/* ==========================================================================
   REVISIONE 2 — prova sociale, riquadro vantaggi, flusso a icone, FAQ pulite
   ========================================================================== */

/* ---------- icone piu' leggere ---------- */
.cst-tesi .cst-icon { stroke-width: 1.45; }

/* ---------- stellina riutilizzabile ---------- */
.cst-tesi .cst-stellina { width: 1em; height: 1em; fill: currentColor; stroke: none; vertical-align: -.12em; }

/* ---------- prova sociale sotto i pulsanti dell'hero ---------- */
.cst-tesi .cst-sociale {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    margin: 1.1rem 0 0; font-size: .82rem; color: var(--cst-navy); line-height: 1.35;
}
.cst-tesi .cst-sociale__stelle { display: inline-flex; gap: 1px; color: #fff; }
.cst-tesi .cst-sociale__stelle .cst-stellina { width: 15px; height: 15px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.cst-tesi .cst-sociale__testo { flex: 1 1 15rem; min-width: 0; }

/* ---------- etichette di fiducia sulla foto dell'hero ---------- */
.cst-tesi .cst-hero__visual { position: relative; }
.cst-tesi .cst-hero__bollo {
    position: absolute; z-index: 2; display: flex; flex-direction: column; line-height: 1.2;
    background: #fff; color: var(--cst-navy); border-radius: var(--cst-radius);
    padding: .5rem .8rem; box-shadow: 0 6px 18px rgba(0,0,0,.14);
    font-size: .68rem; white-space: nowrap;
}
.cst-tesi .cst-hero__bollo strong { font-size: .95rem; font-weight: 800; }
.cst-tesi .cst-hero__bollo--alto { top: 14%; left: -6px; }
.cst-tesi .cst-hero__bollo--basso { bottom: 34%; right: -6px; }
@media (max-width: 820px) {
    .cst-tesi .cst-hero__bollo--alto { top: 6%; left: 0; }
    .cst-tesi .cst-hero__bollo--basso { bottom: 30%; right: 0; }
    .cst-tesi .cst-hero__bollo { font-size: .62rem; padding: .4rem .6rem; }
    .cst-tesi .cst-hero__bollo strong { font-size: .82rem; }
}

/* ---------- barra blu a 5 voci ---------- */
.cst-tesi .cst-trustbar__inner { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .cst-tesi .cst-trustbar__inner { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cst-tesi .cst-trustbar__inner { grid-template-columns: repeat(2, 1fr); } }

/* ---------- riquadro vantaggi a due colonne (era la fascia gialla) ---------- */

/* ---------- striscia colori nella tabella di riepilogo ---------- */
.cst-tesi .cst-colonna-colori { min-width: 190px; }
.cst-tesi .cst-striscia { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: .45rem; max-width: 200px; }
.cst-tesi .cst-striscia span {
    width: 13px; height: 13px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.cst-tesi .cst-quanti { display: block; font-size: .85rem; font-weight: 800; color: var(--cst-navy); }

/* ---------- "come stampi": icone al posto delle scatole ---------- */
.cst-tesi .cst-flusso {
    list-style: none; margin: 2rem auto 0; padding: 0; max-width: 980px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}
@media (max-width: 760px) { .cst-tesi .cst-flusso { grid-template-columns: 1fr; gap: 1.5rem; } }
.cst-tesi .cst-flusso__passo { text-align: center; position: relative; }
.cst-tesi .cst-flusso__ico {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%; background: #fff;
    border: 2px solid var(--cst-yellow); margin-bottom: .75rem;
}
.cst-tesi .cst-flusso__ico .cst-icon { width: 27px; height: 27px; color: var(--cst-navy); }
.cst-tesi .cst-flusso__ico b {
    position: absolute; top: -5px; right: -5px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--cst-navy); color: #fff; font-size: .72rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.cst-tesi .cst-flusso__passo h3 { font-size: 1rem; margin: 0 0 .35rem; }
.cst-tesi .cst-flusso__passo p { font-size: .88rem; color: var(--cst-text); margin: 0; }

/* ---------- pallini della checklist: tondi, non ovali ---------- */
.cst-tesi .cst-checklist__icon { flex: 0 0 34px; border-radius: 50%; aspect-ratio: 1; }

/* ---------- FAQ a una colonna ---------- */
.cst-tesi .cst-faq--pulite .cst-faq__inner { display: block; max-width: 800px; margin: 0 auto; }
.cst-tesi .cst-faq--pulite .cst-faq__testata { text-align: center; margin-bottom: 1.75rem; }
.cst-tesi .cst-faq--pulite .cst-faq__list { display: block; columns: auto; }
.cst-tesi .cst-faq--pulite .cst-faq__item {
    background: transparent; border: 0; border-top: 1px solid var(--cst-border);
    border-radius: 0; box-shadow: none; margin: 0; break-inside: auto;
}
.cst-tesi .cst-faq--pulite .cst-faq__item:last-child { border-bottom: 1px solid var(--cst-border); }
.cst-tesi .cst-faq--pulite .cst-faq__q { padding: 1rem .25rem; font-size: 1rem; }
.cst-tesi .cst-faq--pulite .cst-faq__a { padding: 0 .25rem 1.1rem; font-size: .92rem; color: var(--cst-text); max-width: 68ch; }

/* ---------- LA CAUSA VERA DEL TAGLIO ----------
   style.css riga 1606: .cst-imgtxt__photo ha overflow:hidden e aspect-ratio:4/3.
   La vetrina quadrata ci stava dentro e veniva ritagliata dal contenitore,
   non dall'immagine. Qui il contenitore viene neutralizzato: la forma la
   decide la vetrina. */
.cst-tesi .cst-linea-item .cst-imgtxt__photo {
    aspect-ratio: auto;
    overflow: visible;
    background: none;
    border-radius: 0;
    height: auto;
    max-height: none;
}
.cst-tesi .cst-linea-item .cst-vetrina { aspect-ratio: 1 / 1; height: auto; overflow: hidden; }
.cst-tesi .cst-linea-item .cst-vetrina img { object-fit: contain; width: 100%; height: 100%; }

/* ---------- recensioni Google sotto i pulsanti dell'hero ----------
   Una riga sola: marchio, stelle, quante sono, link. Niente altro. */
.cst-tesi .cst-google {
    display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-top: 1.1rem; padding: 0;
    background: none; border: 0; box-shadow: none;
    text-decoration: none; color: var(--cst-navy);
}
.cst-tesi .cst-google:hover { color: var(--cst-navy); }
.cst-tesi .cst-google:hover .cst-google__testo { text-decoration: underline; text-underline-offset: 3px; }
.cst-tesi .cst-google:focus-visible { outline: 2px solid var(--cst-navy); outline-offset: 3px; }
.cst-tesi .cst-google__g { display: inline-flex; flex: none; }
.cst-tesi .cst-google__g svg { width: 18px; height: 18px; }
.cst-tesi .cst-google__stelle { display: inline-flex; gap: 1px; flex: none; }
/* Il giallo di Google (#FBBC04) sul giallo dell'hero (#F5C518) sparisce.
   Bianche, con un'ombra appena accennata perche' sul giallo chiaro il
   bianco puro da solo si smaterializza. */
.cst-tesi .cst-google__stelle svg {
    width: 15px; height: 15px; fill: #fff; stroke: none;
    filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.22));
}
.cst-tesi .cst-google__testo { font-size: .82rem; line-height: 1.2; }
.cst-tesi .cst-google__testo strong { color: var(--cst-navy); font-weight: 700; }
.cst-tesi .cst-google__freccia { font-size: .9rem; color: var(--cst-text-soft); flex: none; }
.cst-tesi .cst-google:hover .cst-google__freccia { color: var(--cst-navy); }

/* barra blu: 4 voci (via le recensioni e l'indirizzo, gia' detti altrove) */
.cst-tesi .cst-trustbar__inner { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .cst-tesi .cst-trustbar__inner { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   CAPITOLI
   Le fasce gialle non staccavano più perché la pagina ne attraversa una
   ventina: quella del capitolo era una striscia fra tante. Qui lo stacco
   lo fa il fondo, che vale per TUTTO il capitolo, e un'apertura numerata
   senza colore. Il giallo torna a fare l'accento.
   ========================================================================== */
.cst-tesi .cst-cap { padding-block: .5rem 3rem; }
.cst-tesi .cst-cap--bianco { background: #fff; }
.cst-tesi .cst-cap--crema { background: #faf7ef; }

/* dentro il capitolo il fondo lo decide il capitolo, non la singola sezione */
.cst-tesi .cst-cap .cst-imgtxt,
.cst-tesi .cst-cap .cst-imgtxt--white,
.cst-tesi .cst-cap .cst-linee,
.cst-tesi .cst-cap .cst-compare-lines,
.cst-tesi .cst-cap .cst-riepilogo,
.cst-tesi .cst-cap .cst-how,
.cst-tesi .cst-cap .cst-calc,
.cst-tesi .cst-cap .cst-stampa-group { background: transparent; }
/* questi invece il loro fondo ce l'hanno per un motivo */
.cst-tesi .cst-cap .cst-pricing__card--highlight { background: var(--cst-navy); }
.cst-tesi .cst-cap .cst-vetrina,
.cst-tesi .cst-cap .cst-gancio,
.cst-tesi .cst-cap .cst-pricing__card,
.cst-tesi .cst-cap .cst-compare-lines__table-wrap,
.cst-tesi .cst-cap .cst-flusso__ico { background: #fff; }

/* ---------- apertura di capitolo ----------
   Era un titolo e finiva appiccicato al titolo vero della sezione: due
   blocchi occhiello+titolo a trenta pixel di distanza. Ora e' un
   separatore con un nome: una riga, non un'intestazione. */
.cst-tesi .cst-capo {
    max-width: var(--cst-maxw); margin: 0 auto;
    padding: 2.5rem 1.5rem 1.25rem;
    display: flex; align-items: center; gap: .7rem;
}
.cst-tesi .cst-capo__n {
    flex: none; width: 25px; height: 25px; border-radius: 50%;
    border: 0; background: var(--cst-yellow); color: var(--cst-navy);
    font-size: .74rem; font-weight: 800; opacity: 1;
    display: flex; align-items: center; justify-content: center;
}
.cst-tesi .cst-capo__t {
    flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cst-text-soft);
}
.cst-tesi .cst-capo::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--cst-border); }
@media (max-width: 760px) { .cst-tesi .cst-capo { padding: 1.75rem 1rem 1rem; } }

/* ==========================================================================
   PERCHE' NOI — due colonne, con tre copertine vere al posto del vuoto
   ========================================================================== */
.cst-tesi .cst-perche { background: #fff; padding: 3rem 1.5rem; }
.cst-tesi .cst-perche__inner {
    max-width: 1060px; margin: 0 auto;
    display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
@media (max-width: 820px) { .cst-tesi .cst-perche__inner { grid-template-columns: 1fr; } }

.cst-tesi .cst-perche__foto img {
    width: 100%; height: auto; border-radius: var(--cst-radius);
    display: block;
}

.cst-tesi .cst-perche__testo .cst-h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.cst-tesi .cst-perche__testo > p { font-size: 1rem; color: var(--cst-text); }
.cst-tesi .cst-perche__punti { display: grid; gap: .9rem; margin-top: 1.4rem; }
.cst-tesi .cst-perche__punti > div { display: flex; gap: .8rem; align-items: flex-start; }
.cst-tesi .cst-perche__punti .cst-icon { width: 24px; height: 24px; flex: none; color: var(--cst-yellow-dark); margin-top: 2px; }
.cst-tesi .cst-perche__punti strong { display: block; color: var(--cst-navy); font-size: .95rem; margin-bottom: .1rem; }
.cst-tesi .cst-perche__punti span { font-size: .88rem; color: var(--cst-text-soft); line-height: 1.5; }

/* le domande frequenti ora sono H3: l'aspetto non cambia, la struttura sì */
.cst-tesi .cst-faq__q h3 { font-size: inherit; font-weight: inherit; color: inherit; margin: 0; display: inline; }

/* ==========================================================================
   1 · UN SOLO DIVISORE PER CAPITOLO
   Dove c'è il separatore non devono esserci né bande né filetti in più.
   Il filetto sotto "3 Calcola il preventivo" era il border-top di .cst-calc;
   le fasce chiare erano i fondi grigi che le sezioni si portano dietro.
   ========================================================================== */
/* il riquadro interno del calcolatore invece il suo fondo bianco lo tiene */
.cst-tesi .cst-cap .cst-calc__container { background: #fff; }

/* ==========================================================================
   2 · GERARCHIA: occhiello, titolo, sottotitolo, claim, testo
   Il problema era che l'occhiello SEO era blu e in grassetto, cioè vestito
   come il titolo. Due elementi dello stesso peso a otto pixel di distanza
   e il titolo si perde. Ora l'occhiello fa l'occhiello: grigio e piccolo.
   ========================================================================== */

/* l'occhiello serve a Google e a dare contesto, non a farsi guardare */
.cst-tesi .cst-eyebrow {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .11em;
    color: var(--cst-text-soft);
    margin-bottom: .45rem;
}
/* ma sui fondi colorati deve restare leggibile */
.cst-tesi .cst-hero .cst-eyebrow,
.cst-tesi .cst-final .cst-eyebrow { color: inherit; }

/* il titolo è l'unico elemento forte del blocco */
.cst-tesi .cst-imgtxt__text .cst-h2,
.cst-tesi .cst-linea-item .cst-h2 { margin-bottom: .3rem; }

/* il sottotitolo resta un respiro, non una seconda riga di titolo */
.cst-tesi .cst-h2__sub { font-weight: 400; color: var(--cst-text-soft); }

/* il claim era blu e grassetto come il titolo: ora è un cappello di lettura */
.cst-tesi .cst-linea-claim {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cst-text);
    margin: .55rem 0 .6rem;
}

/* più aria SOPRA l'occhiello (stacca dal blocco precedente),
   poca fra occhiello e titolo (appartengono allo stesso blocco) */
.cst-tesi .cst-imgtxt__text > .cst-eyebrow:first-child,
.cst-tesi .cst-linea-item .cst-eyebrow:first-child { display: block; margin-top: 0; }

/* ==========================================================================
   Il nome del prodotto deve vincere sul resto del blocco.
   Nella colonna c'erano nove elementi di testo e tre in grassetto: il nome
   aveva due concorrenti dello stesso peso. Ora il grassetto blu è uno solo.
   ========================================================================== */
.cst-tesi .cst-linea-item .cst-h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.3rem);
    margin-bottom: .25rem;
}
.cst-tesi .cst-linea-item .cst-h2__sub { font-size: .5em; }

/* il claim scende di un gradino e prende aria sopra */
.cst-tesi .cst-linea-claim { font-size: .98rem; margin: 1rem 0 .55rem; }

/* l'istruzione era grassetto blu come un titolo: è un suggerimento */
.cst-tesi .cst-picker__istruzione {
    font-size: .86rem; font-weight: 500; color: var(--cst-text-soft);
    margin: 1.6rem 0 .9rem; gap: .45rem; align-items: baseline; flex-wrap: wrap;
}
.cst-tesi .cst-picker__istruzione .cst-icon { width: 17px; height: 17px; align-self: center; }
.cst-tesi .cst-picker__istruzione span { color: var(--cst-text-soft); opacity: .75; }
.cst-tesi .cst-picker__istruzione span::before { content: "\00b7"; margin-right: .45rem; }

/* tre gruppi con aria vera fra l'uno e l'altro, invece di nove righe pari */
.cst-tesi .cst-linea-item .cst-piu { margin: .1rem 0 0; }
.cst-tesi .cst-linea-item .cst-picker__gruppo-tit { margin-top: .2rem; }

/* ---------- il blocco colori si stacca da quello che lo precede ---------- */
.cst-tesi .cst-picker__istruzione { margin-top: 2.5rem; }

/* ---------- dentro la foto: dire che è lei a cambiare ---------- */
.cst-tesi .cst-vetrina__hint {
    position: absolute; z-index: 2; left: 50%; bottom: 12px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    background: rgba(255,255,255,.92); backdrop-filter: blur(3px);
    border: 1px solid var(--cst-border); border-radius: var(--cst-radius-pill);
    padding: .3rem .7rem; font-size: .72rem; font-weight: 600; color: var(--cst-text-soft);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: opacity .2s ease;
}
.cst-tesi .cst-vetrina__hint .cst-icon { width: 15px; height: 15px; color: var(--cst-orange); }
/* appena si tocca un colore il suggerimento ha finito il suo lavoro */
body.cst-toccato .cst-tesi .cst-vetrina__hint { opacity: 0; pointer-events: none; }

/* ---------- via i pallini verdi: le due righe sono già separate ---------- */
.cst-tesi .cst-tacca__dot { display: none !important; }

/* ==========================================================================
   CORREZIONE — la scheda blu del listino era diventata bianca
   La regola che dà fondo bianco alle schede dentro i capitoli arrivava DOPO
   quella della scheda in evidenza, a parità di specificità: vinceva il
   bianco, e il testo bianco spariva. Qui la specificità è più alta.
   ========================================================================== */
.cst-tesi .cst-cap .cst-pricing__card.cst-pricing__card--highlight { background: var(--cst-navy); }
.cst-tesi .cst-cap .cst-pricing__card--highlight .cst-h3,
.cst-tesi .cst-cap .cst-pricing__card--highlight li > strong { color: #fff; }

/* ---------- i 3 passaggi erano tre colonne di testo ammassate ---------- */
.cst-tesi .cst-flusso { gap: clamp(2rem, 5vw, 3.5rem); max-width: 1040px; }
.cst-tesi .cst-flusso__passo { padding: 0 .5rem; }
.cst-tesi .cst-flusso__passo h3 { margin-bottom: .55rem; }
.cst-tesi .cst-flusso__passo p { line-height: 1.65; max-width: 30ch; margin: 0 auto; }
.cst-tesi .cst-flusso__ico { margin-bottom: 1rem; }

/* ---------- "Cosa serve": filetto solo fra le righe, e aria fra le colonne
   Ogni voce aveva un filetto sopra: in due colonne diventavano quattro
   spezzoni sfasati. Ora la riga c'è solo dove serve, in mezzo. ---------- */
.cst-tesi .cst-checklist { gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.cst-tesi .cst-checklist li {
    border-top: 0;
    border-bottom: 1px solid var(--cst-border);
    padding: 1rem .25rem 1.1rem;
}
.cst-tesi .cst-checklist li:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 760px) {
    .cst-tesi .cst-checklist li:nth-last-child(-n+2) { border-bottom: 1px solid var(--cst-border); }
    .cst-tesi .cst-checklist li:last-child { border-bottom: 0; }
}

/* la mascotte dubbiosa nel riquadro "Non riesci a scegliere?" */
.cst-tesi .cst-gancio__faccia {
    float: left; width: 86px; height: 86px; border-radius: 50%;
    object-fit: cover; margin: .2rem .9rem .6rem 0;
    box-shadow: 0 3px 12px rgba(0,0,0,.12);
}
@media (max-width: 480px) { .cst-tesi .cst-gancio__faccia { width: 68px; height: 68px; } }

/* ==========================================================================
   Il calcolatore costruisce le intestazioni a fisarmonica sotto i 768px e il
   CSS che le nasconde vive nella stessa media query. Aprendo la pagina
   stretta e poi allargando, quelle intestazioni restavano nel documento e
   ricomparivano come testo sfuso col "+". Qui vengono spente sopra i 768.
   ========================================================================== */
@media (min-width: 769px) {
    .cst-tesi .cst-accordion__head { display: none !important; }
    .cst-tesi .cst-accordion__body { max-height: none !important; overflow: visible !important; }
    .cst-tesi .cst-stampa-item.cst-accordion { border: 0; border-radius: 0; padding: 0; overflow: visible; }
    .cst-tesi .cst-stampa-item.cst-accordion .cst-imgtxt__photo { aspect-ratio: auto; margin-bottom: 0; }
}

/* foto da mostrare intere: il contenitore le ritagliava a 4:3 col "cover"
   e del formato non si vedevano più le copertine dietro */
.cst-tesi .cst-imgtxt__photo img.cst-foto-intera {
    object-fit: contain;
    background: #fff;
}

/* ---------- la prima sezione del capitolo respira già grazie al separatore:
   il suo padding superiore raddoppiava il vuoto ---------- */
.cst-tesi .cst-capo { padding-bottom: .9rem; }
.cst-tesi .cst-cap > .cst-capo + section { padding-top: .75rem !important; }
.cst-tesi .cst-cap > .cst-capo + div > section:first-of-type { padding-top: .75rem; }

/* ---------- un filetto solo: quello del capitolo ----------
   Il calcolatore porta un border-top da style.css. Sotto l'apertura di
   capitolo, che la sua riga ce l'ha gia', diventava una seconda riga a
   tutta larghezza venti pixel piu' sotto. ---------- */
.cst-tesi .cst-capo + section,
.cst-tesi .cst-capo + .cst-anchor + section,
.cst-tesi .cst-anchor + .cst-capo + section { border-top: 0; }
.cst-tesi .cst-cap .cst-calc__head { padding-top: 0; }

/* ==========================================================================
   PESI — il foglio di stile originale ha 28 regole a 800 e 27 a 700:
   quasi tutto è grassetto, e quando tutto è grassetto niente lo è.
   Qui si scende di un gradino. La forza la fanno dimensione e colore,
   non lo spessore: è così che un impaginato comunica precisione.
   ========================================================================== */
.cst-tesi .cst-h1,
.cst-tesi .cst-h2,
.cst-tesi .cst-h3,
.cst-tesi h1, .cst-tesi h2, .cst-tesi h3,
.cst-tesi .cst-capo__n,
.cst-tesi .cst-final__title { font-weight: 700; }

.cst-tesi .cst-btn,
.cst-tesi .cst-faq__q,
.cst-tesi .cst-vetrina__nome,
.cst-tesi .cst-picker__gruppo-tit,
.cst-tesi .cst-capo__t,
.cst-tesi .cst-calc__group-title,
.cst-tesi .cst-field__label,
.cst-tesi .cst-trustbar__text,
.cst-tesi .cst-benefit span,
.cst-tesi .cst-flusso__passo h3 { font-weight: 600; }

/* i numeri restano forti: lì lo spessore è informazione */
.cst-tesi .cst-pricing__price,
.cst-tesi .cst-summary__amount,
.cst-tesi .cst-quanti { font-weight: 700; }

/* ---------- il menu: pulito, leggibile, senza urlare ---------- */
.cst-tesi .cst-mobile-nav__nav-item {
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0;
}
.cst-tesi .cst-mobile-nav__nav-external { font-weight: 600; font-size: .9rem; }
.cst-tesi .cst-mobile-nav__desktop-menu a { font-weight: 500; }

/* ==========================================================================
   TELEFONO — passata di ordine
   ========================================================================== */
@media (max-width: 760px) {

    /* capitoli: meno aria ai lati e in verticale, il pollice scorre meno */
    .cst-tesi .cst-cap { padding-block: .25rem 2rem; }
    .cst-tesi .cst-linee { padding: 0 1rem; }
    .cst-tesi .cst-perche { padding: 2rem 1rem; }

    /* titoli: su schermo stretto 2,3rem erano tre righe */
    .cst-tesi .cst-linea-item .cst-h2 { font-size: 1.7rem; }
    .cst-tesi .cst-h2 { font-size: clamp(1.45rem, 6vw, 1.8rem); }

    /* la copertina grande non deve prendere tutto lo schermo */
    .cst-tesi .cst-linea-item .cst-vetrina { max-width: 300px; margin-inline: auto; }
    .cst-tesi .cst-vetrina__scheda { justify-content: center; }

    /* pastiglie più piccole: 25 colori stavano in cinque file */
    .cst-tesi .cst-tacca { width: 50px; height: 50px; }
    .cst-tesi .cst-tacche { gap: 7px; }
    .cst-tesi .cst-picker__istruzione { margin-top: 1.8rem; }

    /* la tabella di riepilogo scorre in orizzontale: dirlo */
    .cst-tesi .cst-compare-lines__table-wrap { position: relative; }
    .cst-tesi .cst-compare-lines__table-wrap::after {
        content: "scorri \2192"; position: absolute; right: 10px; top: 6px;
        font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
        color: var(--cst-text-soft); pointer-events: none;
    }

    /* i due riquadri e i passaggi: una colonna, con stacco vero */
    .cst-tesi .cst-ganci { gap: .85rem; margin-top: 1.5rem; }
    .cst-tesi .cst-flusso { gap: 1.75rem; }

    /* il blocco recensioni va a capo pulito invece di spezzarsi male */
    .cst-tesi .cst-google { flex-wrap: wrap; row-gap: .25rem; }

    /* l'ultima barra in basso copre il piè di pagina: gli lascio spazio */
    .cst-tesi .cst-final__legal { padding-bottom: 4.5rem; }
}

@media (max-width: 420px) {
    .cst-tesi .cst-tacca { width: 46px; height: 46px; }
    .cst-tesi .cst-linea-item .cst-vetrina { max-width: 260px; }
    .cst-tesi .cst-hero__bollo { font-size: .58rem; padding: .35rem .55rem; }
    .cst-tesi .cst-capo__t { font-size: .66rem; letter-spacing: .1em; }
    /* la riga dei 3 passi del calcolatore: i numeri restano, le didascalie no */
    .cst-tesi .cst-passo__t { font-size: .72rem; }
}

/* ---------- la fascia del laboratorio: filmato di fondo, testi sopra ----------
   Il riquadro bianco in mezzo al giallo sembrava appoggiato lì per caso, e
   del video si vedevano due strisce ai lati. Ora il filmato è la fascia, e
   sopra restano solo quattro righe: niente scatola, niente giallo. */

/* ==========================================================================
   TELEFONO — passata di ordine
   ========================================================================== */
@media (max-width: 760px) {

    /* capitoli: meno aria ai lati e in verticale, il pollice scorre meno */
    .cst-tesi .cst-cap { padding-block: .25rem 2rem; }
    .cst-tesi .cst-linee { padding: 0 1rem; }
    .cst-tesi .cst-perche { padding: 2rem 1rem; }

    /* titoli: su schermo stretto 2,3rem erano tre righe */
    .cst-tesi .cst-linea-item .cst-h2 { font-size: 1.7rem; }
    .cst-tesi .cst-h2 { font-size: clamp(1.45rem, 6vw, 1.8rem); }

    /* la copertina grande non deve prendere tutto lo schermo */
    .cst-tesi .cst-linea-item .cst-vetrina { max-width: 300px; margin-inline: auto; }
    .cst-tesi .cst-vetrina__scheda { justify-content: center; }

    /* pastiglie più piccole: 25 colori stavano in cinque file */
    .cst-tesi .cst-tacca { width: 50px; height: 50px; }
    .cst-tesi .cst-tacche { gap: 7px; }
    .cst-tesi .cst-picker__istruzione { margin-top: 1.8rem; }

    /* la tabella di riepilogo scorre in orizzontale: dirlo */
    .cst-tesi .cst-compare-lines__table-wrap { position: relative; }
    .cst-tesi .cst-compare-lines__table-wrap::after {
        content: "scorri \2192"; position: absolute; right: 10px; top: 6px;
        font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
        color: var(--cst-text-soft); pointer-events: none;
    }

    /* i due riquadri e i passaggi: una colonna, con stacco vero */
    .cst-tesi .cst-ganci { gap: .85rem; margin-top: 1.5rem; }
    .cst-tesi .cst-flusso { gap: 1.75rem; }

    /* il blocco recensioni va a capo pulito invece di spezzarsi male */
    .cst-tesi .cst-google { flex-wrap: wrap; row-gap: .25rem; }

    /* l'ultima barra in basso copre il piè di pagina: gli lascio spazio */
    .cst-tesi .cst-final__legal { padding-bottom: 4.5rem; }
}

@media (max-width: 420px) {
    .cst-tesi .cst-tacca { width: 46px; height: 46px; }
    .cst-tesi .cst-linea-item .cst-vetrina { max-width: 260px; }
    .cst-tesi .cst-hero__bollo { font-size: .58rem; padding: .35rem .55rem; }
    .cst-tesi .cst-capo__t { font-size: .66rem; letter-spacing: .1em; }
    /* la riga dei 3 passi del calcolatore: i numeri restano, le didascalie no */
    .cst-tesi .cst-passo__t { font-size: .72rem; }
}

/* ---------- la banda gialla: filmato a sinistra, vantaggi a destra ----------
   Come sfondo non si percepiva: la fascia è bassa e larga, e il riquadro
   bianco ne copriva il centro. Da elemento vero si vede, e su telefono le
   due colonne si impilano da sole col video in cima. */

/* ==========================================================================
   TELEFONO — passata di ordine
   ========================================================================== */
@media (max-width: 760px) {

    /* capitoli: meno aria ai lati e in verticale, il pollice scorre meno */
    .cst-tesi .cst-cap { padding-block: .25rem 2rem; }
    .cst-tesi .cst-linee { padding: 0 1rem; }
    .cst-tesi .cst-perche { padding: 2rem 1rem; }

    /* titoli: su schermo stretto 2,3rem erano tre righe */
    .cst-tesi .cst-linea-item .cst-h2 { font-size: 1.7rem; }
    .cst-tesi .cst-h2 { font-size: clamp(1.45rem, 6vw, 1.8rem); }

    /* la copertina grande non deve prendere tutto lo schermo */
    .cst-tesi .cst-linea-item .cst-vetrina { max-width: 300px; margin-inline: auto; }
    .cst-tesi .cst-vetrina__scheda { justify-content: center; }

    /* pastiglie più piccole: 25 colori stavano in cinque file */
    .cst-tesi .cst-tacca { width: 50px; height: 50px; }
    .cst-tesi .cst-tacche { gap: 7px; }
    .cst-tesi .cst-picker__istruzione { margin-top: 1.8rem; }

    /* la tabella di riepilogo scorre in orizzontale: dirlo */
    .cst-tesi .cst-compare-lines__table-wrap { position: relative; }
    .cst-tesi .cst-compare-lines__table-wrap::after {
        content: "scorri \2192"; position: absolute; right: 10px; top: 6px;
        font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
        color: var(--cst-text-soft); pointer-events: none;
    }

    /* i due riquadri e i passaggi: una colonna, con stacco vero */
    .cst-tesi .cst-ganci { gap: .85rem; margin-top: 1.5rem; }
    .cst-tesi .cst-flusso { gap: 1.75rem; }

    /* il blocco recensioni va a capo pulito invece di spezzarsi male */
    .cst-tesi .cst-google { flex-wrap: wrap; row-gap: .25rem; }

    /* l'ultima barra in basso copre il piè di pagina: gli lascio spazio */
    .cst-tesi .cst-final__legal { padding-bottom: 4.5rem; }
}

@media (max-width: 420px) {
    .cst-tesi .cst-tacca { width: 46px; height: 46px; }
    .cst-tesi .cst-linea-item .cst-vetrina { max-width: 260px; }
    .cst-tesi .cst-hero__bollo { font-size: .58rem; padding: .35rem .55rem; }
    .cst-tesi .cst-capo__t { font-size: .66rem; letter-spacing: .1em; }
    /* la riga dei 3 passi del calcolatore: i numeri restano, le didascalie no */
    .cst-tesi .cst-passo__t { font-size: .72rem; }
}

/* ---------- il filmato come sfondo della banda gialla ----------
   Muto, in ciclo, senza comandi: è una prova, non un contenuto da guardare.
   Sopra c'è un velo giallo che tiene l'identità della fascia e garantisce
   la leggibilità del riquadro bianco. Il poster copre il primo disegno. */
/* appena scurito col nero: il filmato resta coi suoi colori, il riquadro
   bianco sopra guadagna contrasto */

/* ==========================================================================
   TELEFONO — passata di ordine
   ========================================================================== */
@media (max-width: 760px) {

    /* capitoli: meno aria ai lati e in verticale, il pollice scorre meno */
    .cst-tesi .cst-cap { padding-block: .25rem 2rem; }
    .cst-tesi .cst-linee { padding: 0 1rem; }
    .cst-tesi .cst-perche { padding: 2rem 1rem; }

    /* titoli: su schermo stretto 2,3rem erano tre righe */
    .cst-tesi .cst-linea-item .cst-h2 { font-size: 1.7rem; }
    .cst-tesi .cst-h2 { font-size: clamp(1.45rem, 6vw, 1.8rem); }

    /* la copertina grande non deve prendere tutto lo schermo */
    .cst-tesi .cst-linea-item .cst-vetrina { max-width: 300px; margin-inline: auto; }
    .cst-tesi .cst-vetrina__scheda { justify-content: center; }

    /* pastiglie più piccole: 25 colori stavano in cinque file */
    .cst-tesi .cst-tacca { width: 50px; height: 50px; }
    .cst-tesi .cst-tacche { gap: 7px; }
    .cst-tesi .cst-picker__istruzione { margin-top: 1.8rem; }

    /* la tabella di riepilogo scorre in orizzontale: dirlo */
    .cst-tesi .cst-compare-lines__table-wrap { position: relative; }
    .cst-tesi .cst-compare-lines__table-wrap::after {
        content: "scorri \2192"; position: absolute; right: 10px; top: 6px;
        font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
        color: var(--cst-text-soft); pointer-events: none;
    }

    /* i due riquadri e i passaggi: una colonna, con stacco vero */
    .cst-tesi .cst-ganci { gap: .85rem; margin-top: 1.5rem; }
    .cst-tesi .cst-flusso { gap: 1.75rem; }

    /* il blocco recensioni va a capo pulito invece di spezzarsi male */
    .cst-tesi .cst-google { flex-wrap: wrap; row-gap: .25rem; }

    /* l'ultima barra in basso copre il piè di pagina: gli lascio spazio */
    .cst-tesi .cst-final__legal { padding-bottom: 4.5rem; }
}

@media (max-width: 420px) {
    .cst-tesi .cst-tacca { width: 46px; height: 46px; }
    .cst-tesi .cst-linea-item .cst-vetrina { max-width: 260px; }
    .cst-tesi .cst-hero__bollo { font-size: .58rem; padding: .35rem .55rem; }
    .cst-tesi .cst-capo__t { font-size: .66rem; letter-spacing: .1em; }
    /* la riga dei 3 passi del calcolatore: i numeri restano, le didascalie no */
    .cst-tesi .cst-passo__t { font-size: .72rem; }
}

/* ---------- il filmato nel riquadro "Perché farla fare a noi" ----------
   Muto, in ciclo, senza comandi: è una prova, non un contenuto da guardare.
   Il poster fa sì che il primo disegno sia immediato anche se il video
   deve ancora arrivare. */

/* ==========================================================================
   HERO — gradiente sui gialli della campagna
   Si poteva fare solo dopo aver restituito la trasparenza alla foto: prima
   aveva il giallo #F5C518 cotto dentro e qualunque sfumatura ne mostrava
   il rettangolo. Ora l'alfa della laureata è quella dell'originale, unita
   alla sagoma del libro, quindi il fondo le passa dietro.
   Gialli campionati dalla creatività dell'ADS: #FBB412 ambra, #F5C518
   marchio, #FFDD00 il più luminoso.
   ========================================================================== */
.cst-tesi .cst-hero {
    background:
        radial-gradient(850px 580px at 16% 72%, rgba(255, 221, 0, .80) 0%, rgba(255, 221, 0, 0) 60%),
        linear-gradient(186deg, #FBB412 0%, #F5C518 36%, #F6C716 100%);
}
.cst-tesi .cst-hero__text { background: none; }

/* ==========================================================================
   FASCIA DEL LABORATORIO — unica versione valida
   (tutte le regole precedenti su .cst-vantaggi sono state rimosse: ce
   n'erano tre generazioni sovrapposte e vincevano le più vecchie)
   Il filmato È la fascia. Sopra, solo quattro righe in bianco.
   ========================================================================== */
.cst-tesi .cst-cap .cst-vantaggi,
.cst-tesi .cst-vantaggi {
    position: relative;
    overflow: hidden;
    background: #1d1f24;
    padding-block: clamp(4rem, 9vw, 7rem);
}
.cst-tesi .cst-vantaggi__sfondo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
}
.cst-tesi .cst-vantaggi__velo {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(120% 110% at 50% 45%, rgba(0,0,0,.58) 0%, rgba(0,0,0,.78) 100%);
}
.cst-tesi .cst-vantaggi__inner {
    position: relative; z-index: 2;
    max-width: var(--cst-maxw); margin: 0 auto;
    padding-inline: max(1.5rem, env(safe-area-inset-left, 0px));
    background: none; box-shadow: none; border-radius: 0; display: block;
}
.cst-tesi .cst-vantaggi .cst-h3 {
    color: #fff; font-weight: 700; text-align: center;
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    max-width: 24ch; margin: 0 auto 2.2rem; line-height: 1.25;
    text-shadow: 0 2px 16px rgba(0,0,0,.65);
}
.cst-tesi .cst-vantaggi__lista {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.75rem; max-width: 1100px; margin-inline: auto;
}
.cst-tesi .cst-vantaggi__lista li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; }
.cst-tesi .cst-vantaggi__lista .cst-icon { width: 30px; height: 30px; flex: none; color: var(--cst-yellow); }
.cst-tesi .cst-vantaggi__lista strong {
    display: block; color: #fff; font-size: 1.02rem; font-weight: 600;
    text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.cst-tesi .cst-vantaggi__lista span {
    font-size: .9rem; color: rgba(255,255,255,.88); line-height: 1.5;
    text-shadow: 0 1px 12px rgba(0,0,0,.65);
}
.cst-tesi .cst-vantaggi__firma {
    margin: 2.6rem 0 0; font-size: .97rem; line-height: 1.5;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: .5rem;
    color: rgba(255,255,255,.88); font-weight: 500;
    text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.cst-tesi .cst-vantaggi__firma i { width: 18px; height: 18px; color: var(--cst-yellow); flex: none; }
.cst-tesi .cst-vantaggi__firma a {
    color: var(--cst-yellow); font-weight: 700; text-decoration: none;
    border-bottom: 2px solid rgba(245,197,24,.45); padding-bottom: 1px;
    transition: border-color .18s ease, color .18s ease;
}
.cst-tesi .cst-vantaggi__firma a:hover,
.cst-tesi .cst-vantaggi__firma a:focus-visible { color: var(--cst-yellow-light); border-bottom-color: var(--cst-yellow); }
@media (max-width: 1000px) { .cst-tesi .cst-vantaggi__lista { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) {
    .cst-tesi .cst-vantaggi__lista { grid-template-columns: 1fr; gap: 1.6rem; }
    .cst-tesi .cst-cap .cst-vantaggi,
    .cst-tesi .cst-vantaggi { padding-block: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cst-tesi .cst-vantaggi__sfondo { display: none; }
    .cst-tesi .cst-vantaggi { background: #1d1f24 url("img/stampa-a-caldo-loop-poster.jpg") center/cover; }
}


/* ==========================================================================
   Le copertine nella griglia colori del preventivatore erano tagliate in
   basso: il riquadro foto e' alto 80px fissi (50 sotto i 760) mentre le
   foto sono quadrate 500x500, e l'object-fit "cover" mangiava sopra e
   sotto. Riquadro quadrato come la foto: niente taglio, niente bordi vuoti.
   ========================================================================== */
.cst-tesi .cst-swatch__color--photo {
    height: auto; aspect-ratio: 1 / 1; overflow: hidden;
}
.cst-tesi .cst-swatch__color--photo img {
    width: 100%; height: 100%; object-fit: contain; background: #fff;
}

/* ---------- nel confronto, il marchio al posto del nome scritto ----------
   Resta leggibile da Google attraverso l'alt. ---------- */
.cst-tesi .cst-compare__col-cst { padding-block: .7rem; }
.cst-tesi .cst-compare__logo {
    display: block; width: auto; height: 30px; margin: 0 auto;
}
@media (max-width: 760px) { .cst-tesi .cst-compare__logo { height: 26px; } }

/* ---------- spunte dell'hero: pallino bianco, segno blu ----------
   Tre dischi blu pieni sul giallo pesavano come tre punti fermi sotto
   il titolo. Invertiti, la lista resta leggibile e la testata respira. */
.cst-tesi .cst-hero__list li::before {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f7a3d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ---------- il separatore stava troppo lontano da cio' che apre ----------
   Sotto l'apertura di capitolo la sezione ripartiva col suo padding pieno:
   fra la riga e il primo occhiello si aprivano cento pixel di niente. ---------- */
.cst-tesi .cst-capo { padding-top: 2rem; padding-bottom: .7rem; }
.cst-tesi .cst-capo + section > .cst-section__inner,
.cst-tesi .cst-capo + .cst-anchor + section > .cst-section__inner,
.cst-tesi .cst-anchor + .cst-capo + section > .cst-section__inner { padding-top: 1.1rem; }
.cst-tesi .cst-capo + section.cst-calc,
.cst-tesi .cst-anchor + .cst-capo + section.cst-calc { padding-top: 1.6rem; }
@media (max-width: 760px) {
    .cst-tesi .cst-capo { padding-top: 1.5rem; padding-bottom: .6rem; }
}

/* ==========================================================================
   LA VETRINA NON E' PIU' UNA SCHEDA
   Riquadro bianco + filetto + ombra: e' il linguaggio dei siti di dieci anni
   fa, e per giunta raddoppiava un bianco che la foto aveva gia' dentro.
   Le foto prodotto sono su fondo bianco pieno: con "multiply" quel bianco
   diventa trasparente e resta solo la copertina con la sua ombra naturale.
   Il libro galleggia sulla pagina, senza cornice.
   ========================================================================== */
.cst-tesi .cst-vetrina,
.cst-tesi .cst-cap .cst-vetrina,
.cst-tesi .cst-linea-item .cst-vetrina {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.cst-tesi .cst-vetrina img {
    mix-blend-mode: multiply;
    padding: 2%;
}
/* il suggerimento era una pastiglia con bordo e ombra sopra la foto:
   stessa roba vecchia in piccolo. Ora e' una riga e basta. */
.cst-tesi .cst-vetrina__hint {
    background: none; border: 0; box-shadow: none; backdrop-filter: none;
    padding: 0; bottom: -2px; font-size: .75rem; font-weight: 600;
    color: var(--cst-text-soft); letter-spacing: .01em;
}
@media (max-width: 760px) {
    .cst-tesi .cst-vetrina__hint { bottom: -6px; font-size: .72rem; }
}

/* le parole in evidenza dei 3 punti dell'hero erano a 800: sul giallo
   pesavano quanto il titolo */
.cst-tesi .cst-hero__list li strong { font-weight: 650; }

/* ---------- la riga sopra il titolo faceva concorrenza al titolo ----------
   E' un'indicazione di contesto, non un messaggio: deve stare un passo
   indietro. Piu' piccola, meno nera, meno peso. ---------- */
.cst-tesi .cst-hero__tag {
    font-size: .82rem; font-weight: 500; opacity: .72; margin-bottom: .9rem;
}
/* titolo e tre punti erano attaccati: un respiro in mezzo */
.cst-tesi .cst-hero .cst-h1 { margin-bottom: 1.75rem; }
@media (max-width: 760px) {
    .cst-tesi .cst-hero__tag { font-size: .76rem; }
    .cst-tesi .cst-hero .cst-h1 { margin-bottom: 1.35rem; }
}

/* ==========================================================================
   Sul telefono la pagina scorreva di lato di 18px: nel riquadro contatti
   l'indirizzo email e' una stringa di 26 caratteri che non si spezza, e
   una cella di griglia non scende mai sotto il suo contenuto piu' largo
   (min-width: auto). Sbloccata la cella e concesso il taglio alla parola.
   ========================================================================== */
.cst-tesi .cst-final__inner > * { min-width: 0; }
.cst-tesi .cst-contact-row__value,
.cst-tesi .cst-contact-row__value a { overflow-wrap: break-word; }

/* ==========================================================================
   MENU DEL TELEFONO: CHIARO
   Era un pannello antracite con i social dentro due pastiglie gialle. Il
   resto della pagina e' bianco e blu: il menu deve sembrare la stessa
   azienda, non un'altra. Fondo bianco, testo blu, icone nude.
   ========================================================================== */
@media (max-width: 768px) {
    .cst-tesi .cst-mobile-nav__overlay,
    .cst-mobile-nav__overlay {
        background: #fff;
        color: var(--cst-navy);
    }
    .cst-mobile-nav__overlay-head { border-bottom-color: var(--cst-border); }
    .cst-mobile-nav__overlay-logo { max-height: 34px; }
    .cst-mobile-nav__close { color: var(--cst-navy); }
    .cst-mobile-nav__close:hover { color: var(--cst-navy); background: var(--cst-bg-soft); }

    .cst-mobile-nav__nav a {
        color: var(--cst-navy);
        font-weight: 500;
        border-bottom-color: var(--cst-border);
    }
    .cst-mobile-nav__nav a:hover,
    .cst-mobile-nav__nav a:focus { color: var(--cst-navy-dark); }

    /* il rimando al sito: in blu, con la freccia gialla a fare l'accento */
    .cst-mobile-nav__nav-external {
        border-top-color: var(--cst-border);
        color: var(--cst-navy) !important;
        font-weight: 600 !important;
        font-size: .8rem !important;
    }
    .cst-mobile-nav__nav-external span { color: var(--cst-yellow-dark); }

    /* il tasto telefono era bianco su bianco */
    .cst-mobile-nav__cta .cst-btn--ghost-white {
        color: var(--cst-navy) !important;
        border-color: var(--cst-navy);
        background: transparent;
    }

    /* social: solo l'icona */
    .cst-mobile-nav__social { border-top-color: var(--cst-border); gap: 1.5rem; }
    .cst-mobile-nav__social a {
        width: auto; height: auto; border-radius: 0; background: none;
        color: var(--cst-navy);
    }
    .cst-mobile-nav__social a:hover { background: none; transform: none; color: var(--cst-navy-dark); }
    .cst-mobile-nav__social .cst-icon { width: 25px; height: 25px; color: inherit; }
}

/* ==========================================================================
   RASSEGNA TELEFONO (390px): quello che si rompeva solo in verticale
   ========================================================================== */
@media (max-width: 768px) {
    /* 1 — le due etichette dell'hero finivano in faccia alla ragazza, e
       ripetono parola per parola i tre punti scritti due centimetri sopra */
    .cst-tesi .cst-hero__bollo { display: none; }

    /* 2 — la foto arrivava DOPO i colori: toccavi un colore e la copertina
       che cambiava era fuori schermo. Prima la foto, poi la tavolozza. */
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__photo { order: 1; }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text { order: 2; }

    /* 3 — "scorri" cadeva sopra l'intestazione della colonna Finitura */
    .cst-tesi .cst-compare-lines__table-wrap { padding-top: 1.25rem; }
    .cst-tesi .cst-compare-lines__table-wrap::after { top: 0; right: 2px; }

    /* 4 — l'invito del laboratorio era una riga flex: l'indirizzo andava a
       capo da solo e lasciava un "in" appeso a fine riga */
    .cst-tesi .cst-vantaggi__firma {
        display: block; text-align: center;
    }
    .cst-tesi .cst-vantaggi__firma i {
        display: inline-block; vertical-align: -.2em; margin-right: .3rem;
    }
}

/* 5 — nel preventivatore due colonne di copertine quadrate facevano
   tredici file da scorrere: a tre ci stanno tutte in meno di metà */
@media (max-width: 560px) {
    .cst-tesi .cst-swatches__grid { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
    .cst-tesi .cst-swatch { padding: .35rem; }
    .cst-tesi .cst-swatch__name { font-size: .68rem; }
}

/* ---------- telefono: la tavolozza sale sotto al titolo ----------
   Messa la foto in cima restavano seicento pixel di descrizione prima dei
   colori: toccavi un colore e la copertina che cambiava era gia' uscita
   dallo schermo. Qui la colonna di testo diventa flessibile e la parte
   descrittiva scende sotto la tavolozza. Nel documento l'ordine non
   cambia, quindi per Google la pagina resta identica. ---------- */
@media (max-width: 768px) {
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text { display: flex; flex-direction: column; }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > * { order: 6; }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > .cst-eyebrow { order: 1; }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > .cst-h2 { order: 2; }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > .cst-linea-claim { order: 3; }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > .cst-picker__istruzione { order: 4; margin-top: 1.4rem; }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > [data-ruolo="gruppi"] { order: 5; margin-bottom: 1.6rem; }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > .cst-piu { order: 7; }
}

/* ---------- social: icona nuda anche nel piede ----------
   Due pastiglie gialle in fondo a una fascia antracite pesavano come un
   bottone qualsiasi. ---------- */
.cst-tesi .cst-final__legal-social a {
    width: auto; height: auto; border-radius: 0; background: none;
    color: rgba(255,255,255,.82);
    transition: color .15s ease;
}
.cst-tesi .cst-final__legal-social a:hover { background: none; transform: none; color: var(--cst-yellow); }
.cst-tesi .cst-final__legal-social .cst-icon { width: 24px; height: 24px; color: inherit; fill: currentColor; stroke: none; }

/* il titolo finale ha un <br> pensato per il desktop: sul telefono
   spezzava "Pronto per la tua / tesi?" */
@media (max-width: 768px) {
    .cst-tesi .cst-final__title br { display: none; }
}

/* ==========================================================================
   I PALLINI CHE NON ABBIAMO MAI CHIESTO
   Divi scrive ".entry-content ul { list-style-type: disc; padding: 0 0 23px 1em }"
   e il suo foglio si carica DOPO il nostro: a parita' di peso vince lui, e
   ogni elenco della pagina si ritrova il pallino e un rientro di un em.
   Succedeva gia' con la versione vecchia della pagina.
   Qui si vince con l'identificativo: #cst-tesi pesa piu' di .entry-content
   a prescindere dall'ordine di caricamento, quindi niente "!important".
   ========================================================================== */
#cst-tesi ul,
#cst-tesi ol {
    list-style: none;
    padding-left: 0;
    padding-bottom: 0;
    line-height: inherit;
}
/* l'unico elenco che il pallino lo vuole davvero: quello dentro "Perche' questa" */
#cst-tesi .cst-piu__corpo ul {
    list-style: disc;
    padding-left: 1.1rem;
}

/* ==========================================================================
   SECONDA PASSATA SUL TELEFONO
   Rassegna di Marco del 10 novembre, punto per punto.
   ========================================================================== */

/* ---------- 1 · HERO A DUE RIGHE ----------
   Il titolo stava in una colonna stretta e usciva su quattro righe, con la
   foto a comprimerlo. Ora occhiello e titolo prendono tutta la larghezza, e
   sotto si aprono due colonne: i tre punti con le recensioni a sinistra, la
   laureata a destra. Il blocco di testo diventa "display: contents" cosi' i
   suoi figli entrano direttamente nella griglia dell'hero. */
@media (max-width: 768px) {
    .cst-tesi .cst-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
        grid-template-areas:
            "occhiello occhiello"
            "titolo    titolo"
            "punti     foto"
            "stelle    foto";
        column-gap: .5rem;
        align-items: end;
    }
    .cst-tesi .cst-hero__text { display: contents; }
    .cst-tesi .cst-hero__tag { grid-area: occhiello; }
    .cst-tesi .cst-hero .cst-h1 { grid-area: titolo; margin-bottom: 1.1rem; }
    .cst-tesi .cst-hero__list { grid-area: punti; margin-bottom: .6rem; align-self: start; }
    .cst-tesi .cst-google { grid-area: stelle; margin-top: 0; align-self: start; }
    .cst-tesi .cst-hero__visual { grid-area: foto; justify-self: end; }
    .cst-tesi .cst-hero__img { height: 300px; }

    /* il titolo puo' crescere: non ha piu' la foto che gli ruba larghezza */
    .cst-tesi .cst-hero .cst-h1 { font-size: clamp(2rem, 9.5vw, 2.9rem); }
    .cst-tesi .cst-hero__list li { font-size: .92rem; margin-bottom: .45rem; }
}
@media (max-width: 420px) {
    .cst-tesi .cst-hero__img { height: 250px; }
    .cst-tesi .cst-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); }
}

/* ---------- 2 · LA COPERTINA E I SUOI COLORI ----------
   Cinque livelli di testo di seguito (etichetta, titolo, sottotitolo grigio,
   frase in neretto, istruzione) con la stessa aria in mezzo: non si capiva
   cosa stesse con cosa. Qui lo spazio diventa il raggruppatore - stretto
   dentro un blocco, largo fra un blocco e l'altro - e la tavolozza sale
   subito sotto al nome della copertina, per vederne piu' insieme alla foto. */
@media (max-width: 768px) {
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__photo { margin-bottom: .2rem; }
    .cst-tesi .cst-linea-item .cst-vetrina { max-width: 230px; }
    .cst-tesi .cst-vetrina__scheda { margin-top: .4rem; }

    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text { padding-top: .4rem; gap: 0; }
    /* etichetta e titolo sono la stessa cosa: appiccicati */
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > .cst-eyebrow {
        margin-bottom: .15rem; font-size: .62rem; opacity: .75;
    }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > .cst-h2 { margin-bottom: .9rem; }
    .cst-tesi .cst-linea-item .cst-h2__sub { font-size: .92rem; }
    /* la frase forte scende sotto la tavolozza, col resto della descrizione */
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > .cst-linea-claim { order: 6; margin-top: .2rem; }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > .cst-picker__istruzione {
        order: 4; margin-top: 0; margin-bottom: .5rem; font-size: .85rem;
    }
    /* andando a capo, il puntino di separazione non separa piu' niente */
    .cst-tesi .cst-picker__istruzione span { display: block; margin-top: .1rem; padding-left: 1.95rem; }
    .cst-tesi .cst-picker__istruzione span::before { content: none; }
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > [data-ruolo="gruppi"] { margin-bottom: 1.3rem; }
    .cst-tesi .cst-picker__gruppo { margin-bottom: .7rem; }
    .cst-tesi .cst-picker__gruppo-tit { margin-bottom: .35rem; }
    .cst-tesi .cst-tacche { gap: .4rem; }
    .cst-tesi .cst-piu { margin-top: .4rem; }
}

/* ---------- 3 · IL PREVENTIVO NELLA BARRA IN BASSO ----------
   Tre voci identiche: niente diceva quale fosse quella importante.
   (La regola vera sta in fondo al file: qui c'era un primo tentativo con
   le variabili del marchio, che fuori da .cst-tesi non esistono. Peggio:
   aveva anche il selettore ".cst-tesi ~ .cst-mobile-bar ...", piu' pesante
   di quello giusto, quindi vinceva lui e lasciava il fondo trasparente.) */

/* ---------- 4 · IL BLOCCO DELLE COPIE ----------
   L'etichetta "piu' conveniente" stava sulla stessa riga del prezzo e lo
   spingeva fuori asse, e il "cad." di fianco al numero disallineava le
   cifre. Ora: a sinistra la quantita', a destra il prezzo incolonnato col
   "cad." sotto, e l'etichetta su una riga sua. */
@media (max-width: 768px) {
    .cst-tesi .cst-pricing__list li {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: .2rem .8rem;
        padding: .85rem 0;
    }
    .cst-tesi .cst-pricing__list li > strong { grid-column: 1; }
    .cst-tesi .cst-pricing__price {
        grid-column: 2; grid-row: 1 / span 2;
        text-align: right; line-height: 1.1;
    }
    .cst-tesi .cst-pricing__price small {
        display: block; margin-top: .1rem; font-size: .66rem;
    }
    .cst-tesi .cst-pricing__badge {
        grid-column: 1; grid-row: 2;
        justify-self: start; margin: .25rem 0 0;
        font-size: .62rem; padding: .25rem .6rem;
    }
}

/* ---------- 5 · IL CONFRONTO, APRIBILE ----------
   Sul telefono erano sei righe che diventavano sei schede: tanto spazio per
   un argomento che interessa solo a chi sta confrontando i preventivi. */
.cst-tesi .cst-confronto { border: 0; }
.cst-tesi .cst-confronto > summary { display: none; }
@media (max-width: 768px) {
    .cst-tesi .cst-confronto > summary {
        display: flex; align-items: center; justify-content: space-between;
        gap: .6rem; cursor: pointer; list-style: none;
        padding: .95rem 1.1rem; margin: 0 auto; max-width: 560px;
        background: #fff; border: 1px solid var(--cst-border); border-radius: var(--cst-radius);
        font-weight: 700; font-size: .92rem; color: var(--cst-navy);
    }
    .cst-tesi .cst-confronto > summary::-webkit-details-marker { display: none; }
    .cst-tesi .cst-confronto > summary::after {
        content: "+"; font-size: 1.4rem; font-weight: 700; line-height: 1;
        color: var(--cst-yellow-dark); flex: none;
    }
    .cst-tesi .cst-confronto[open] > summary { margin-bottom: 1rem; }
    .cst-tesi .cst-confronto[open] > summary::after { content: "\2212"; }

    /* il marchio al posto della scritta gialla, riga per riga */
    .cst-tesi .cst-compare__cst::before {
        content: "";
        display: block;
        width: 104px; height: 16px;
        margin-bottom: .35rem;
        background: url("img/logo-cst.png") no-repeat left center / contain;
    }
}

/* ---------- 6 · "PRIMA DI COMINCIARE" IN ORIZZONTALE ----------
   Quattro voci impilate erano quattro schermate di niente: diventano una
   fila che si scorre col pollice. */
@media (max-width: 768px) {
    .cst-tesi .cst-checklist {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 76%;
        gap: .75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .6rem;
        margin-inline: -1rem;
        padding-inline: 1rem;
        scrollbar-width: none;
    }
    .cst-tesi .cst-checklist::-webkit-scrollbar { display: none; }
    .cst-tesi .cst-checklist li {
        scroll-snap-align: start;
        border: 1px solid var(--cst-border) !important;
        border-radius: var(--cst-radius);
        background: #fff;
        padding: 1rem !important;
    }
    .cst-tesi .cst-checklist li:nth-last-child(-n+2) { border-bottom: 1px solid var(--cst-border); }
}

/* ---------- 7 · LE DOMANDE FREQUENTI ----------
   Le domande lunghe finivano sotto la freccia. */
.cst-tesi .cst-faq__item > summary {
    padding-right: 2.6rem;
    position: relative;
}

/* ==========================================================================
   TERZA PASSATA SUL TELEFONO
   ========================================================================== */

/* ---------- la laureata era schiacciata ----------
   Aveva altezza fissa 300px e larghezza automatica, ma nella colonna
   stretta della griglia il "max-width: 100%" le tagliava la larghezza
   lasciando l'altezza dov'era: proporzioni sballate. Si governa una
   dimensione sola, l'altra la calcola il browser. */
@media (max-width: 768px) {
    .cst-tesi .cst-hero__img {
        /* una dimensione sola la detta il foglio, l'altra la calcola il
           browser: cosi' le proporzioni non si possono rompere */
        width: calc(100% + 1.4rem);
        height: auto;
        max-height: 330px;
        object-fit: contain;
        object-position: bottom right;
        /* la foto sborda nel margine della sezione: guadagna corpo senza
           togliere larghezza alle parole */
        margin-right: -1.4rem;
    }
    .cst-tesi .cst-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 43%); }
}
@media (max-width: 420px) {
    .cst-tesi .cst-hero__img { max-height: 290px; }
    .cst-tesi .cst-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
}

/* ---------- il carosello aveva la prima scheda piu' stretta ----------
   "grid-auto-columns" vale solo per le colonne che la griglia si inventa:
   le prime due arrivavano dal "grid-template-columns: 1fr 1fr" del foglio
   base, e quindi erano larghe un'altra cosa. Qui il modello si azzera. */
@media (max-width: 768px) {
    .cst-tesi .cst-checklist {
        grid-template-columns: none;
        grid-auto-columns: 84%;
    }
}
@media (max-width: 420px) {
    .cst-tesi .cst-checklist { grid-auto-columns: 88%; }
}

/* ---------- il tasto Preventivo non cambiava colore ----------
   La barra in basso vive FUORI da #cst-tesi, e i colori del marchio sono
   definiti su .cst-tesi: dentro la barra "var(--cst-yellow)" non esiste e
   la regola cadeva nel vuoto. Qui i colori sono scritti per esteso. */
.cst-mobile-bar .cst-mobile-bar__btn--calc {
    background: #F5C518;
    color: #2c2c5a !important;
}
.cst-mobile-bar .cst-mobile-bar__btn--calc .cst-icon,
.cst-mobile-bar .cst-mobile-bar__btn--calc svg { color: #2c2c5a; stroke: #2c2c5a; }

/* ---------- il sottotitolo del prodotto porta anche la disponibilita' ----------
   Prima erano due righe separate a dire cose vicine: ora il nome della
   copertina si porta dietro finitura e numero di colori, e la riga
   "tocca un colore" torna a essere solo un invito. */
.cst-tesi .cst-h2__quanti {
    display: block;
    margin-top: .35rem;
    font-weight: 600;
    font-size: .88em;
    color: var(--cst-text-soft);
}
.cst-tesi .cst-linea-item .cst-h2__sub { margin-top: .45rem; }
@media (max-width: 768px) {
    .cst-tesi .cst-linea-item__inner > .cst-imgtxt__text > .cst-h2 { margin-bottom: 1.1rem; }
    .cst-tesi .cst-h2__quanti { font-size: .85em; }
}

/* ==========================================================================
   L'INGRESSO DEL PREVENTIVATORE
   Scorrendo col telefono non si capiva che lì cominciava un'altra cosa: il
   titolo pesava come tutti gli altri. Qui cresce e si porta davanti una
   calcolatrice, così l'occhio capisce prima di leggere.
   ========================================================================== */
.cst-tesi .cst-calc__ico {
    display: block;
    margin: 0 auto .55rem;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--cst-yellow);
    color: var(--cst-navy);
    display: grid; place-items: center;
    box-shadow: 0 4px 14px rgba(245, 197, 24, .4);
}
.cst-tesi .cst-calc__ico .cst-icon { width: 25px; height: 25px; stroke-width: 1.6; }

@media (max-width: 768px) {
    /* il titolo del preventivatore sopra tutti gli altri h2 della pagina:
       è l'unico punto in cui si passa dal leggere al fare */
    .cst-tesi #calc-title {
        font-size: clamp(1.75rem, 7.6vw, 2.25rem);
        line-height: 1.12;
        margin-bottom: .7rem;
    }
    .cst-tesi .cst-calc__ico { width: 54px; height: 54px; border-radius: 16px; margin-bottom: .7rem; }
    .cst-tesi .cst-calc__ico .cst-icon { width: 29px; height: 29px; }
    /* l'occhiello sopra diventa una didascalia, non un secondo titolo */
    .cst-tesi .cst-calc__head .cst-eyebrow { font-size: .64rem; opacity: .8; }
    .cst-tesi .cst-calc__head { margin-bottom: 1.8rem; }
}

/* ==========================================================================
   IL TOTALE NELLA BARRA IN BASSO
   Mentre componi il preventivo il totale vive in fondo alla pagina, fuori
   schermo: cambi la carta e non vedi cosa succede al prezzo. Qui, appena
   la cifra è diversa da zero, la barra se la porta dietro.
   Sparisce "Negozio" - è la voce meno urgente di uno che sta facendo un
   preventivo - e resta WhatsApp, che è il gesto a cui tutto il
   preventivatore porta. Quando il riquadro blu del totale è ormai passato
   sopra la testa, la barra torna come prima.
   ========================================================================== */
.cst-mobile-bar__btn--totale { display: none !important; }

body.cst-ha-totale .cst-mobile-bar__btn--shop,
body.cst-ha-totale .cst-mobile-bar__btn--calc { display: none !important; }

body.cst-ha-totale .cst-mobile-bar__btn--totale {
    display: flex !important;
    gap: .1rem;
    background: #F5C518;
    color: #2c2c5a !important;
    flex: 1.15;
}
.cst-mobile-bar__etichetta {
    font-size: .58rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; opacity: .72; line-height: 1;
}
.cst-mobile-bar__cifra {
    font-size: 1.12rem; font-weight: 800; line-height: 1.1;
    letter-spacing: -.01em; white-space: nowrap;
}
@media (max-width: 360px) {
    .cst-mobile-bar__cifra { font-size: 1rem; }
}
/* senza il tasto giallo del preventivo, WhatsApp diventa il gesto principale */
body.cst-ha-totale .cst-mobile-bar__btn--wa {
    background: #25D366;
    color: #fff !important;
}
body.cst-ha-totale .cst-mobile-bar__btn--wa .cst-wa-icon { background-color: #fff; }
.cst-mobile-bar__btn--totale,
.cst-mobile-bar__btn--wa { transition: background .18s ease, color .18s ease; }