/* ==========================================================================
   CST - Stampa Tesi Torino — Landing styles (v2 — allineato al design CST reale)
   Stile mutuato dalla pagina attuale: giallo brand, verde menta CTA,
   sezioni image+text alternate, banner gradient, box "Perché?", marker giallo.
   ========================================================================== */

.cst-tesi {
    /* === PALETTE CST (estratta dal sito reale) === */
    --cst-yellow: #F5C518;          /* giallo brand (hero, accenti) */
    --cst-yellow-light: #FFD93D;    /* giallo marker / highlight parole */
    --cst-yellow-dark: #d9a900;
    --cst-orange: #ED8B00;          /* arancio gradient mid */
    --cst-red: #ed1c24;             /* rosso CST logo + gradient end */
    --cst-mint: #8AD3B9;            /* verde menta CTA Calcola Preventivo */
    --cst-mint-dark: #6AB89C;
    --cst-navy: #2c2c5a;            /* navy heading + eyebrow */
    --cst-navy-dark: #1a1a3e;
    --cst-text: #3d4045;            /* grigio scuro body (Divi default) */
    --cst-text-soft: #6b6e75;
    --cst-bg: #ffffff;
    --cst-bg-soft: #f4f4f5;         /* grigio chiarissimo sezioni alternate */
    --cst-bg-dark: #ebebed;
    --cst-border: #e5e5e8;
    --cst-success: #16a34a;
    --cst-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    --cst-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.10);

    /* Compatibility aliases (per non rompere classi esistenti) */
    --cst-primary: var(--cst-navy);
    --cst-primary-dark: var(--cst-navy-dark);
    --cst-primary-light: #f0f0fa;
    --cst-accent: var(--cst-mint);
    --cst-accent-dark: var(--cst-mint-dark);

    --cst-radius: 14px;
    --cst-radius-lg: 22px;
    --cst-radius-pill: 999px;
    --cst-maxw: 1350px;
    --cst-section-py: clamp(2.25rem, 4vw, 3.5rem);

    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    color: var(--cst-text);
    line-height: 1.7;
    font-size: 15px;
}

.cst-tesi *,
.cst-tesi *::before,
.cst-tesi *::after { box-sizing: border-box; }

.cst-tesi img { max-width: 100%; height: auto; display: block; }
.cst-tesi a { color: var(--cst-navy); text-decoration: none; }
.cst-tesi a:hover { color: var(--cst-red); }

/* === Tipografia === */
.cst-h1, .cst-h2, .cst-h3, .cst-h4 {
    font-family: 'Poppins', sans-serif;
    color: var(--cst-navy);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 1rem;
}
.cst-h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    color: #fff; /* nell'hero giallo è bianco */
}
.cst-h1 span { color: #fff; display: inline-block; }
.cst-h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.2;
}
/* Sub-titolo dentro H2: stesso pattern del mobile (main bold sopra + sub regular sotto) */
.cst-h2__sub {
    display: block;
    font-weight: 400;
    font-size: 0.6em;
    color: var(--cst-text-soft);
    line-height: 1.25;
    margin-top: 0.25em;
    letter-spacing: 0;
    text-transform: none;
}
.cst-h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.cst-h3 small {
    font-weight: 500;
    color: var(--cst-text-soft);
    font-size: 0.85rem;
}

/* Eyebrow = etichetta uppercase sopra l'H2 */
.cst-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cst-navy);
    margin-bottom: 0.75rem;
}

/* Marker neutralizzato — gli span .cst-mark restano nel markup ma senza highlight giallo */
.cst-mark {
    background: none;
    padding: 0;
}

.cst-lead {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 1.5rem;
    line-height: 1.7;
    max-width: 540px;
}
.cst-section__lead {
    font-size: 1rem;
    color: var(--cst-text);
    opacity: 0.85;
    max-width: 720px;
    margin: 0 0 2rem;
    line-height: 1.7;
}

.cst-section__inner {
    max-width: var(--cst-maxw);
    margin: 0 auto;
    padding: var(--cst-section-py) 1.5rem;
}

/* === BOTTONI (stile pillola CST) — versione contenuta === */
.cst-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.3rem;
    border-radius: var(--cst-radius-pill);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none !important;
    transition: all .25s ease;
    border: 2px solid transparent;
    cursor: pointer;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cst-btn--mint {
    background: var(--cst-mint);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(138, 211, 185, 0.3);
}
.cst-btn--mint:hover {
    background: var(--cst-mint-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(138, 211, 185, 0.4);
}
.cst-btn--ghost-white {
    background: transparent;
    color: #fff !important;
    border-color: #fff;
}
.cst-btn--ghost-white:hover {
    background: #fff;
    color: var(--cst-navy) !important;
    transform: translateY(-2px);
}
.cst-btn--yellow {
    background: var(--cst-yellow);
    color: var(--cst-navy) !important;
    box-shadow: 0 2px 6px rgba(245, 197, 24, 0.25);
}
.cst-btn--navy {
    background: var(--cst-navy);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(44, 44, 90, 0.35);
}
.cst-btn--navy:hover {
    background: var(--cst-navy-dark);
    transform: translateY(-2px);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(44, 44, 90, 0.45);
}
.cst-btn--yellow:hover {
    background: var(--cst-yellow-dark);
    transform: translateY(-2px);
    color: #fff !important;
}
.cst-btn--small {
    padding: 0.45rem 1rem;
    font-size: 0.7rem;
}
.cst-btn--large {
    padding: 0.85rem 1.6rem;
    font-size: 0.9rem;
}
.cst-btn__icon { font-size: 1.1em; }

/* Alias per retro-compatibilità con .cst-btn--primary già usato nei template */
.cst-btn--primary { background: var(--cst-mint); color:#fff !important; box-shadow: 0 2px 8px rgba(138, 211, 185, 0.3); }
.cst-btn--primary:hover { background: var(--cst-mint-dark); transform: translateY(-2px); }

/* ==========================================================================
   HERO (sfondo giallo, titolo bianco, foto a destra)
   ========================================================================== */
.cst-hero {
    background: var(--cst-yellow);
    padding: 30px 1.5rem 0;
    position: relative;
    overflow: visible;
}
.cst-hero__inner {
    max-width: var(--cst-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.cst-hero .cst-eyebrow {
    color: var(--cst-navy);
}
.cst-hero .cst-h1 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.cst-hero__lead {
    font-size: 1.05rem;
    color: var(--cst-navy);
    max-width: 480px;
    margin: 0 0 2rem;
    line-height: 1.7;
}
.cst-hero__lead strong { color: var(--cst-navy-dark); }

/* Hero tag (desktop default — non uppercase, niente letter-spacing largo) */
.cst-hero__tag {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cst-navy);
    margin: 0 0 1rem;
    opacity: 0.9;
}
/* Hero checklist (desktop) */
.cst-hero__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}
.cst-hero__list li {
    position: relative;
    padding-left: 2rem;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--cst-navy);
    margin-bottom: 0.6rem;
}
.cst-hero__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--cst-navy);
    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='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.85rem 0.85rem;
}
.cst-hero__list li strong { font-weight: 800; color: var(--cst-navy-dark); }
.cst-hero__cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Visual hero — placeholder mascotte / libri (sostituibile con foto reale) */
.cst-hero__visual {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    align-self: end;
    /* la foto tocca il bordo inferiore del giallo */
}
.cst-hero__mascot {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 3/4;
    margin: 0 auto;
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.4) 0%, transparent 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.cst-hero__mascot::after {
    content: '🎓';
    font-size: 8rem;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}

/* Banner divisorio gradient (giallo soft uniforme — niente più rosso) */
.cst-banner {
    background-image: linear-gradient(90deg, #fcb80b 0%, #fcb80b 63%, #ffd336 100%);
    padding: 1.25rem 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    color: #fff;
    text-align: center;
    overflow: visible;
    margin-bottom: 30px;
    z-index: 1;
}
.cst-banner__avatar {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--cst-yellow);
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    left: 4%;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.cst-banner__title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    font-weight: 600;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.cst-banner__title strong { font-weight: 800; }
.cst-banner__step {
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    opacity: 0.9;
    margin: 0 0 0.25rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ==========================================================================
   SEZIONE TRUST / BENEFIT (sfondo giallo come l'attuale "Dai vita...")
   ========================================================================== */
.cst-benefits {
    background: var(--cst-yellow);
    padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
    text-align: center;
}
.cst-benefits__inner {
    max-width: var(--cst-maxw);
    margin: 0 auto;
}
.cst-benefits__title {
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    color: var(--cst-navy);
    font-weight: 600;
    margin: 0 0 2.5rem;
}
.cst-benefits__title strong { font-weight: 800; }
.cst-benefits__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.cst-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--cst-navy);
    font-weight: 600;
    font-size: 0.92rem;
    text-align: center;
}
.cst-benefit__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   SEZIONE IMAGE + TESTO (alternate left/right come l'attuale)
   ========================================================================== */
.cst-imgtxt {
    background: var(--cst-bg-soft);
    padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem;
}
.cst-imgtxt--white { background: #fff; }
.cst-imgtxt__inner {
    max-width: var(--cst-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.cst-imgtxt--reverse .cst-imgtxt__inner > :first-child { order: 2; }
.cst-imgtxt__visual {
    border-radius: var(--cst-radius);
    overflow: hidden;
    box-shadow: var(--cst-shadow-lg);
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--cst-navy) 0%, var(--cst-navy-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    position: relative;
}
.cst-imgtxt__visual--diamante { background: linear-gradient(135deg, #1c2a4a 0%, #0d1729 100%); }
.cst-imgtxt__visual--rubino   { background: linear-gradient(135deg, #c9a875 0%, #8f7048 100%); }
.cst-imgtxt__visual--nuvola   { background: linear-gradient(135deg, #5b1a26 0%, #2e0b13 100%); }
.cst-imgtxt__visual--corallo  { background: linear-gradient(135deg, #e2387f 0%, #6e3f9c 100%); }
.cst-imgtxt__visual--smeraldo { background: linear-gradient(135deg, #1d3a2b 0%, #0c1f17 100%); }
.cst-imgtxt__visual--giada    { background: linear-gradient(135deg, #c41f30 0%, #7c0d1a 100%); }
.cst-imgtxt__visual::after {
    content: 'COPERTINA · ' attr(data-name);
    color: rgba(255, 215, 130, 0.6);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    font-weight: 600;
}
.cst-imgtxt__text { padding: 1rem 0; }
.cst-imgtxt__text p { font-size: 1rem; line-height: 1.75; }
.cst-imgtxt__text strong { color: var(--cst-navy); }

/* Box "Perché?" — card con bordo giallo */
.cst-why-box {
    background: #fff;
    border: 2px solid var(--cst-yellow);
    border-radius: var(--cst-radius);
    padding: 1.25rem 1.5rem;
    margin-top: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.65;
}
.cst-why-box__label {
    color: var(--cst-yellow-dark);
    font-weight: 800;
    margin-right: 0.5rem;
}
.cst-why-box strong { color: var(--cst-navy); }

/* Lista colori chip dentro le sezioni linee */
.cst-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.cst-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem 0.3rem 0.3rem;
    background: #fff;
    border: 1px solid var(--cst-border);
    border-radius: var(--cst-radius-pill);
    font-size: 0.82rem;
}
.cst-color-chip__swatch {
    width: 22px; height: 22px;
    border-radius: 50%;
}

/* ==========================================================================
   CALCOLATORE (rivestito in stile CST)
   ========================================================================== */
.cst-calc {
    background: var(--cst-bg-soft);
    padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem;
    border-top: 1px solid var(--cst-border);
}
.cst-calc__head {
    max-width: var(--cst-maxw);
    margin: 0 auto 2.5rem;
    text-align: center;
}
.cst-calc__head .cst-eyebrow { color: var(--cst-navy); }
.cst-calc__head .cst-h2 { color: var(--cst-navy); }
.cst-calc__head p { max-width: 640px; margin: 0 auto; color: var(--cst-text); opacity: 0.85; }
.cst-calc__container {
    max-width: var(--cst-maxw);
    margin: 0 auto;
    background: #fff;
    border-radius: var(--cst-radius-lg);
    padding: clamp(1.5rem, 4vw, 3rem);
    box-shadow: var(--cst-shadow-lg);
}

/* === GRUPPI calcolatore: "1. INTERNO" / "2. COPERTINA" === */
.cst-calc__group {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--cst-bg-soft);
    border-radius: var(--cst-radius);
    border: 1px solid var(--cst-border);
}
.cst-calc__group:last-of-type { margin-bottom: 0; }

.cst-calc__group-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cst-border);
}
.cst-calc__group-num {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    font-family: 'Poppins', sans-serif;
}
.cst-calc__group--interno .cst-calc__group-num {
    background: var(--cst-yellow);
    color: var(--cst-navy);
}
.cst-calc__group--copertina .cst-calc__group-num {
    background: var(--cst-navy);
    color: #fff;
}
.cst-calc__group-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--cst-navy);
    margin: 0;
    line-height: 1.2;
}
.cst-calc__group-desc {
    color: var(--cst-text);
    opacity: 0.7;
    font-size: 0.88rem;
    margin: 0.2rem 0 0;
    line-height: 1.4;
}

/* Field dentro al group: sfondo bianco (perché il group è grigio chiaro) */
.cst-calc__group .cst-field {
    background: #fff;
}

.cst-calc__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.cst-field {
    background: var(--cst-bg-soft);
    border: 1px solid var(--cst-border);
    border-radius: var(--cst-radius);
    padding: 1.25rem;
}
.cst-field--full { grid-column: 1 / -1; }
.cst-field__label {
    display: block;
    font-weight: 700;
    color: var(--cst-navy);
    margin-bottom: 0.7rem;
    font-size: 0.95rem;
}
.cst-field__hint {
    display: block;
    font-size: 0.82rem;
    color: var(--cst-text-soft);
    margin-top: 0.4rem;
}
.cst-field__note {
    margin-top: 0.65rem;
    padding: 0.75rem 0.9rem;
    background: rgba(245, 197, 24, 0.12);
    border-left: 3px solid var(--cst-yellow);
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--cst-text);
}
.cst-field__note strong { color: var(--cst-navy); font-weight: 700; }
.cst-field__note > strong:first-child { display: block; margin-bottom: 0.25rem; }
.cst-field__input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 2px solid var(--cst-border);
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cst-navy);
    background: #fff;
    font-family: 'Poppins', sans-serif;
    transition: border-color .15s ease;
}
.cst-field__input:focus { outline: none; border-color: var(--cst-yellow); }
.cst-help { color: var(--cst-text-soft); font-weight: normal; cursor: help; margin-left: 0.25rem; }

/* Toggle B/N - Colore */
.cst-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border: 2px solid var(--cst-border);
    border-radius: var(--cst-radius-pill);
    padding: 4px;
    gap: 4px;
}
.cst-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cst-toggle label {
    padding: 0.65rem;
    text-align: center;
    border-radius: var(--cst-radius-pill);
    cursor: pointer;
    font-weight: 600;
    transition: all .15s ease;
    color: var(--cst-text-soft);
    user-select: none;
    font-size: 0.92rem;
}
.cst-toggle input:checked + label {
    background: var(--cst-navy);
    color: #fff;
    box-shadow: 0 2px 6px rgba(44, 44, 90, 0.3);
}

/* Radio grid (carta + copie) */
.cst-radio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.cst-radio-grid input { position: absolute; opacity: 0; pointer-events: none; }
.cst-radio-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 0.5rem;
    text-align: center;
    border: 2px solid var(--cst-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s ease;
    background: #fff;
}
.cst-radio-grid label strong { color: var(--cst-navy); font-size: 0.95rem; }
.cst-radio-grid label span { color: var(--cst-text-soft); font-size: 0.78rem; line-height: 1.3; }
.cst-radio-grid label span small { font-size: 0.72rem; color: var(--cst-mint-dark); font-weight: 700; }
.cst-radio-grid input:checked + label {
    border-color: var(--cst-yellow);
    background: rgba(245, 197, 24, 0.08);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.15);
}

.cst-copie-extra {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--cst-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}
.cst-copie-extra[hidden] { display: none !important; }
.cst-copie-extra label { color: var(--cst-text-soft); }
.cst-copie-extra input {
    width: 80px;
    padding: 0.5rem;
    border: 2px solid var(--cst-border);
    border-radius: 8px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

/* Tabs linee copertina */
.cst-lines {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.cst-line {
    padding: 0.75rem 0.5rem;
    background: #fff;
    border: 2px solid var(--cst-border);
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: all .15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.cst-line strong { color: var(--cst-navy); font-size: 0.95rem; }
.cst-line small { color: var(--cst-text-soft); font-size: 0.72rem; }
.cst-line:hover { border-color: var(--cst-yellow); }
.cst-line.is-active {
    border-color: var(--cst-yellow);
    background: rgba(245, 197, 24, 0.12);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.18);
}

.cst-swatches__intro {
    background: var(--cst-bg-soft);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.92rem;
    color: var(--cst-text-soft);
}
.cst-swatches__intro strong { color: var(--cst-navy); }
.cst-swatches__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.5rem;
}
.cst-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem;
    background: #fff;
    border: 2px solid var(--cst-border);
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    transition: all .15s ease;
}
.cst-swatch__color {
    display: block;
    width: 100%;
    height: 56px;
    border-radius: 6px;
}
.cst-swatch__name {
    font-size: 0.78rem;
    color: var(--cst-navy);
    font-weight: 600;
    text-align: center;
}
.cst-swatch:hover { border-color: var(--cst-yellow); transform: translateY(-1px); }
.cst-swatch.is-active {
    border-color: var(--cst-yellow);
    background: rgba(245, 197, 24, 0.08);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.2);
}

/* Riepilogo preventivo — card scura come "Calcola il preventivo" attuale */
.cst-summary {
    margin-top: 2rem;
    background: var(--cst-navy);
    color: #fff;
    border-radius: var(--cst-radius-lg);
    padding: 2rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.3fr;
    gap: 1.5rem;
    align-items: center;
    box-shadow: var(--cst-shadow-lg);
}
.cst-summary__breakdown { display: flex; flex-direction: column; gap: 0.55rem; }
.cst-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    font-size: 0.92rem;
}
.cst-summary__row:last-child { border: none; }
.cst-summary__row span:first-child { opacity: 0.75; }
.cst-summary__row span:last-child { font-weight: 600; text-align: right; }
.cst-summary__row--scelta span:last-child { color: var(--cst-yellow); }

.cst-summary__total { text-align: center; }
.cst-summary__label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.8;
}
.cst-summary__amount {
    display: block;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: var(--cst-yellow);
    line-height: 1.1;
    margin: 0.25rem 0;
}
.cst-summary__note { font-size: 0.78rem; opacity: 0.7; }

.cst-summary__cta { text-align: center; }
.cst-summary__cta .cst-btn { width: 100%; }
.cst-summary__disclaimer {
    font-size: 0.74rem;
    opacity: 0.75;
    margin: 0.7rem 0 0;
    line-height: 1.45;
}

/* ==========================================================================
   LISTINO (due card affiancate, una bianca + una scura come l'attuale)
   ========================================================================== */
.cst-pricing { background: #fff; }
.cst-pricing__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.cst-pricing__card {
    background: #fff;
    border-radius: var(--cst-radius);
    padding: 1.75rem;
    border: 2px solid var(--cst-border);
}
.cst-pricing__card--highlight {
    background: var(--cst-navy);
    color: #fff;
    border: none;
    box-shadow: var(--cst-shadow-lg);
}
.cst-pricing__card .cst-h3 { color: var(--cst-navy); }
.cst-pricing__card--highlight .cst-h3 { color: #fff; }
.cst-pricing__card--highlight .cst-h3 small { color: rgba(255,255,255,0.7); }
.cst-pricing__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.cst-pricing__table th,
.cst-pricing__table td {
    padding: 0.7rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--cst-border);
}
.cst-pricing__table th {
    font-weight: 700;
    color: var(--cst-text-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cst-pricing__table td strong { color: var(--cst-navy); }

.cst-pricing__list { list-style: none; padding: 0; margin: 1rem 0 0; }
.cst-pricing__list li {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.cst-pricing__list li:last-child { border: none; }
.cst-pricing__price { font-size: 1.5rem; font-weight: 800; color: var(--cst-yellow); }
.cst-pricing__price small { font-size: 0.7rem; opacity: 0.8; font-weight: 500; }
.cst-pricing__best { position: relative; }
.cst-pricing__badge {
    background: var(--cst-mint);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--cst-radius-pill);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-basis: 100%;
    text-align: right;
}
.cst-pricing__note { font-size: 0.86rem; margin: 1.25rem 0 0; opacity: 0.85; line-height: 1.6; }

/* ==========================================================================
   COME FUNZIONA (3 step card bianche su sfondo grigio)
   ========================================================================== */
.cst-how { background: var(--cst-bg-soft); }
.cst-steps {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.cst-step {
    background: #fff;
    border-radius: var(--cst-radius);
    padding: 2.25rem 1.5rem 1.75rem;
    border: 1px solid var(--cst-border);
    position: relative;
    text-align: center;
}
.cst-step__num {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--cst-yellow);
    color: var(--cst-navy);
    font-weight: 800;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(245, 197, 24, 0.4);
}
.cst-step__title { margin: 0.5rem 0 0.65rem; font-size: 1.15rem; color: var(--cst-navy); }
.cst-step p { font-size: 0.92rem; color: var(--cst-text); }

/* ==========================================================================
   STAMPA A CALDO
   ========================================================================== */
.cst-foil { background: #fff; }
.cst-foil__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.cst-foil__list { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.cst-foil__list li {
    padding: 0.5rem 0 0.5rem 2rem;
    position: relative;
    color: var(--cst-text);
    line-height: 1.7;
}
.cst-foil__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--cst-mint-dark);
    font-weight: 800;
    font-size: 1.1rem;
}
.cst-foil__list strong { color: var(--cst-navy); }

.cst-foil__mockup {
    background: linear-gradient(160deg, #1c3a2b 0%, #0b1f15 100%);
    border-radius: var(--cst-radius);
    padding: 3rem 2rem;
    height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    color: #f5c518;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    box-shadow: var(--cst-shadow-lg), inset 0 0 0 1px rgba(245, 197, 24, 0.25);
    position: relative;
    overflow: hidden;
}
.cst-foil__mockup::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(245, 197, 24, 0.2);
    border-radius: 8px;
    pointer-events: none;
}
.cst-foil__university { font-size: 0.85rem; letter-spacing: 0.18em; font-weight: 700; }
.cst-foil__brand { font-size: 1.7rem; font-weight: 800; }
.cst-foil__title { font-size: 1rem; font-style: italic; opacity: 0.9; }
.cst-foil__name { font-size: 1.1rem; font-weight: 600; }

/* ==========================================================================
   PERCHÉ NOI (3×2 grid con icone cerchiate)
   ========================================================================== */
.cst-why { background: #fff; }
.cst-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}
.cst-why__item {
    background: var(--cst-bg-soft);
    border-radius: var(--cst-radius);
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--cst-border);
    text-align: center;
}
.cst-why__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cst-yellow);
    margin: 0 auto 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}
.cst-why__item h3 { color: var(--cst-navy); font-size: 1.1rem; }
.cst-why__item p { font-size: 0.92rem; color: var(--cst-text); margin: 0; }

/* ==========================================================================
   FAQ — stile come l'accordion CST attuale (mascotte sx, accordion dx)
   ========================================================================== */
.cst-faq { background: #fff; }
.cst-faq__inner {
    max-width: var(--cst-maxw);
    margin: 0 auto;
    padding: var(--cst-section-py) 1.5rem;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    align-items: start;
}
.cst-faq__aside {
    text-align: center;
    position: sticky;
    top: 100px;
}
.cst-faq__avatar {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--cst-yellow);
    margin: 0 auto 1.25rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
}
.cst-faq__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.cst-faq__aside h2 {
    font-size: 1.6rem;
    color: var(--cst-navy);
    margin: 0;
    line-height: 1.2;
}
.cst-faq__list { width: 100%; }
.cst-faq__item {
    border-bottom: 1px solid var(--cst-border);
    transition: background .15s ease;
    break-inside: avoid;
    page-break-inside: avoid;
}
.cst-faq__item:first-child { border-top: 1px solid var(--cst-border); }

/* Desktop ≥1024px: 2 colonne FAQ */
@media (min-width: 1024px) {
    .cst-faq__list {
        column-count: 2;
        column-gap: 2.5rem;
        column-fill: balance;
    }
    /* Border-top su ogni item così la prima riga di entrambe le colonne ha il bordo
       (con CSS columns :first-child segue il flow, non l'inizio di ogni colonna). */
    .cst-faq__item { border-top: 1px solid var(--cst-border); }
    /* Domanda padding ridotto per stare comoda nella colonna stretta */
    .cst-faq__q { font-size: 0.95rem; padding: 1rem 2.5rem 1rem 0.25rem; }
    .cst-faq__a { font-size: 0.9rem; line-height: 1.6; padding: 0 0.25rem 1rem; }
}
.cst-faq__q {
    padding: 1.15rem 3rem 1.15rem 0.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--cst-navy);
    list-style: none;
    position: relative;
}
.cst-faq__q::-webkit-details-marker { display: none; }
.cst-faq__q::after {
    content: '⌄';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-65%);
    font-size: 1.3rem;
    color: var(--cst-yellow-dark);
    transition: transform .2s ease;
    line-height: 1;
}
.cst-faq__item[open] .cst-faq__q::after {
    transform: translateY(-35%) rotate(180deg);
}
.cst-faq__a {
    padding: 0 0.25rem 1.25rem;
    color: var(--cst-text);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ==========================================================================
   RECENSIONI GOOGLE (card bianche con foto + stelline)
   ========================================================================== */
.cst-reviews { background: #fff; padding-top: 0; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.cst-reviews__head { text-align: center; margin: 0 auto 2rem; }
.cst-reviews__head h2 { color: var(--cst-navy); }
.cst-reviews__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--cst-yellow);
    color: var(--cst-navy);
    padding: 0.5rem 1.25rem;
    border-radius: var(--cst-radius-pill);
    font-weight: 700;
    margin-top: 0.5rem;
}
.cst-reviews__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: var(--cst-maxw);
    margin: 0 auto;
}
.cst-review {
    background: #fff;
    border: 1px solid var(--cst-border);
    border-radius: var(--cst-radius);
    padding: 1.25rem;
    box-shadow: var(--cst-shadow);
}
.cst-review__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.cst-review__avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--cst-navy);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
}
.cst-review__meta { flex: 1; }
.cst-review__name { font-weight: 700; color: var(--cst-navy); font-size: 0.92rem; line-height: 1.2; }
.cst-review__date { font-size: 0.78rem; color: var(--cst-text-soft); }
.cst-review__g {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: conic-gradient(from -45deg, #4285F4, #34A853, #FBBC05, #EA4335);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
}
.cst-review__stars { color: #FBBC05; font-size: 0.95rem; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.cst-review__text { font-size: 0.9rem; color: var(--cst-text); margin: 0; line-height: 1.55; }

/* ==========================================================================
   CONTATTI FINALI (sfondo scuro, stile footer CST con accenti gialli)
   ========================================================================== */
.cst-final {
    background: var(--cst-text); /* #3d4045 - stesso colore del footer CST */
    color: #fff;
}
.cst-final__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.cst-final .cst-eyebrow { color: var(--cst-yellow); }
.cst-final__left h2 { color: #fff; }
.cst-final__left h2 .cst-mark {
    background: linear-gradient(180deg, transparent 55%, rgba(245, 197, 24, 0.4) 55%, rgba(245, 197, 24, 0.4) 92%, transparent 92%);
    color: #fff;
}
.cst-final__left p { color: rgba(255, 255, 255, 0.85); font-size: 1rem; line-height: 1.7; }
.cst-final__left p strong { color: var(--cst-yellow); }

/* Titolo finale grande, bianco, sentence case, no highlight */
.cst-final__title {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 1.5rem;
    text-transform: none;
}

.cst-final__contact-box {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--cst-radius);
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.cst-final__contact-box h3 {
    color: var(--cst-navy);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    line-height: 1.45;
}
.cst-final__contact-box h3 strong { font-weight: 800; color: var(--cst-navy); }

.cst-contact-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}
.cst-contact-row__icon {
    flex: 0 0 52px;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--cst-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cst-text); /* icona SVG colore dark per contrasto sul giallo */
    font-size: 0;
}
.cst-contact-row__icon .cst-icon {
    color: var(--cst-text);
    width: 22px;
    height: 22px;
}
.cst-contact-row__body { flex: 1; }
.cst-contact-row__label {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--cst-text-soft);
    font-weight: 700;
}
.cst-contact-row__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cst-navy);
    margin: 0.2rem 0 0.5rem;
}
.cst-contact-row__value a { color: var(--cst-navy); }
.cst-contact-row__value a:hover { color: var(--cst-yellow-dark); }

.cst-final__hours {
    font-size: 0.92rem;
    color: var(--cst-text);
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.cst-final__hours strong { color: var(--cst-navy); }
.cst-final__map { margin-top: 2rem; }
.cst-final__map iframe { border-radius: var(--cst-radius); width: 100%; }

/* ============== LEGAL footer — riga unica sotto le 2 colonne ============== */
.cst-final__legal {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 1.25rem 2rem;
}

/* Logo a sinistra */
.cst-final__legal-logo {
    display: flex;
    align-items: center;
}
.cst-final__legal-logo img {
    max-height: 48px;
    width: auto;
    display: block;
}

/* Social cerchi gialli al centro */
.cst-final__legal-social {
    display: flex;
    gap: 0.6rem;
}
.cst-final__legal-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cst-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cst-navy);
    transition: all .2s ease;
}
.cst-final__legal-social a:hover {
    background: #fff;
    transform: translateY(-2px);
}
.cst-final__legal-social .cst-icon {
    width: 18px;
    height: 18px;
    color: var(--cst-navy);
    fill: currentColor;
    stroke: none;
}
.cst-final__legal-social .cst-icon path { fill: currentColor; }

/* Crediti a destra */
.cst-final__legal-credits {
    text-align: right;
}
.cst-final__copy {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.3rem;
    line-height: 1.5;
}
.cst-final__links {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}
.cst-final__links a { color: rgba(255, 255, 255, 0.75); }
.cst-final__links a:hover { color: var(--cst-yellow); }

/* ==========================================================================
   ICONE SVG FLAT (Heroicons/Lucide style) — dimensioni fisse in px
   ========================================================================== */
.cst-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.cst-icon--lg { width: 24px; height: 24px; }
.cst-icon--xl { width: 32px; height: 32px; }

/* === Trust bar: icone 32px, gialle, container 40px === */
.cst-trustbar__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cst-yellow);
    font-size: inherit;
    line-height: 1;
}
.cst-trustbar__icon .cst-icon { width: 32px; height: 32px; }

/* === Pillars: icone 32px dentro cerchio giallo 70px === */
.cst-pillar__icon { font-size: 0; }
.cst-pillar__icon .cst-icon {
    width: 32px;
    height: 32px;
    color: var(--cst-navy);
}

/* === Benefits: icone 24px dentro cerchio giallo 56px === */
.cst-benefit__icon { font-size: 0; }
.cst-benefit__icon .cst-icon {
    width: 24px;
    height: 24px;
    color: var(--cst-navy);
}

/* === Mini-box "Cosa cambia?": icona 22px inline col testo === */
.cst-info-box__icon {
    width: 22px;
    height: 22px;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cst-info-box__icon .cst-icon {
    width: 22px;
    height: 22px;
    color: var(--cst-navy);
}

/* === Checklist: icone 22px dentro cerchio 50px === */
.cst-checklist__icon { font-size: 0; }
.cst-checklist__icon .cst-icon {
    width: 22px;
    height: 22px;
    color: var(--cst-navy);
}

/* === Location list: icone 18px inline col testo === */
.cst-location-list .cst-icon {
    width: 18px;
    height: 18px;
    color: var(--cst-yellow-dark);
    margin-right: 0.4em;
    vertical-align: -3px;
}

/* === Bottoni: icone 16px === */
.cst-btn .cst-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 2px;
}

/* ==========================================================================
   WHATSAPP (icona, bottone inline, floating button)
   ========================================================================== */
.cst-wa-icon {
    display: inline-block;
    width: 22px; height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") no-repeat center / contain;
    vertical-align: -4px;
}
.cst-wa-icon--lg { width: 30px; height: 30px; }

.cst-btn--whatsapp {
    background: #25D366;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}
.cst-btn--whatsapp:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.cst-btn--ghost-yellow {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    justify-content: center;
}
.cst-btn--ghost-yellow:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* Floating WhatsApp button — DISATTIVATO: top-nav e bottom-bar mobile coprono
   già la persistenza, evita 3 bottoni WA simultanei nella stessa videata. */
.cst-wa-fab { display: none !important; }
.cst-wa-fab--unused {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #25D366;
    color: #fff !important;
    padding: 0.65rem 1.05rem;
    border-radius: 50px;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0, 0, 0, 0.12);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-decoration: none !important;
    transition: all .25s ease;
    animation: cst-wa-pulse 2.5s ease-in-out infinite;
}
.cst-wa-fab:hover {
    background: #1ebe5d;
    transform: translateY(-3px) scale(1.03);
}
.cst-wa-fab__label {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.cst-wa-fab .cst-wa-icon--lg { width: 22px; height: 22px; }
@keyframes cst-wa-pulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5), 0 2px 8px rgba(0, 0, 0, 0.15); }
    50% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.8), 0 0 0 8px rgba(37, 211, 102, 0.15); }
}

/* ==========================================================================
   HERO IMAGE (sostituisce il vecchio mascot emoji)
   ========================================================================== */
.cst-hero__img {
    height: 400px;
    width: auto;
    max-width: 100%;
    margin: 0;
    display: block;
}

/* ==========================================================================
   TRUST BAR (6 USP sotto hero)
   ========================================================================== */
.cst-trustbar {
    background: var(--cst-navy);
    padding: 1.5rem 1.25rem;
}
.cst-trustbar__inner {
    max-width: var(--cst-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    align-items: center;
}
.cst-trustbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    color: #fff;
}
.cst-trustbar__text {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   PILLARS (3 colonne valore: tocchi / anteprima / ristampa)
   ========================================================================== */
.cst-pillars { background: #fff; padding: 0 0 1rem; }
.cst-pillars__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding-top: 0;
    max-width: 900px;
    margin: 0 auto;
}
.cst-pillar {
    background: transparent;
    border-radius: var(--cst-radius);
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--cst-border);
    text-align: center;
    transition: all .2s ease;
}
.cst-pillar:hover {
    border-color: var(--cst-yellow);
    transform: translateY(-3px);
    box-shadow: var(--cst-shadow);
}
.cst-pillar__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--cst-yellow);
    margin: 0 auto 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cst-pillar__icon .cst-icon { width: 24px; height: 24px; }
.cst-pillar h3 { color: var(--cst-navy); margin-bottom: 0.75rem; }
.cst-pillar p { font-size: 0.95rem; color: var(--cst-text); margin: 0; line-height: 1.65; }

/* ==========================================================================
   IMAGE+TEXT — foto reali (sostituisce visual gradient)
   ========================================================================== */
.cst-imgtxt__photo {
    border-radius: var(--cst-radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--cst-bg-soft);
}
.cst-imgtxt__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cst-imgtxt__photo--map {
    aspect-ratio: auto;
    overflow: hidden;
}
.cst-imgtxt__photo--map iframe { display: block; }

/* ==========================================================================
   BANNER avatar — IMG invece di emoji
   ========================================================================== */
.cst-banner__avatar {
    overflow: hidden;
    padding: 0;
}
.cst-banner__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ==========================================================================
   LOCATION LIST (vicinanze atenei + mezzi)
   ========================================================================== */
.cst-location-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}
.cst-location-list li {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--cst-border);
    font-size: 0.98rem;
    color: var(--cst-text);
}
.cst-location-list li:last-child { border: none; }
.cst-location-list strong { color: var(--cst-navy); }

/* ==========================================================================
   COMPARE TABLE (CST vs e-commerce)
   ========================================================================== */
.cst-compare { background: var(--cst-bg-soft); padding: var(--cst-section-py) 0; }
.cst-compare__table {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--cst-radius);
    overflow: hidden;
}
.cst-compare__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: stretch;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.cst-compare__row:last-child { border-bottom: none; }
.cst-compare__row--head {
    background: #fff;
    color: var(--cst-text-soft);
    border-bottom: 2px solid var(--cst-yellow);
}
.cst-compare__col-cst,
.cst-compare__col-other {
    padding: 0.85rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--cst-text-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cst-compare__col-cst {
    color: var(--cst-navy);
    font-weight: 800;
}
.cst-compare__label {
    padding: 0.95rem 1.25rem;
    font-weight: 700;
    color: var(--cst-navy);
    font-size: 0.92rem;
    display: flex;
    align-items: center;
}
.cst-compare__cst,
.cst-compare__other {
    padding: 0.95rem 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cst-compare__cst {
    color: var(--cst-navy);
    font-weight: 500;
}
.cst-compare__other {
    color: var(--cst-text-soft);
}
.cst-compare__row:hover { background: rgba(245, 197, 24, 0.04); }
.cst-compare__row--head:hover { background: #fff; }

/* ==========================================================================
   CHECKLIST "Cosa portare"
   ========================================================================== */
.cst-checklist {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.cst-checklist li {
    background: var(--cst-bg-soft);
    border-radius: var(--cst-radius);
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border: 1px solid var(--cst-border);
}
.cst-checklist__icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--cst-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cst-checklist strong {
    display: block;
    color: var(--cst-navy);
    margin-bottom: 0.35rem;
    font-size: 1rem;
}
.cst-checklist p {
    font-size: 0.9rem;
    color: var(--cst-text);
    margin: 0;
    line-height: 1.55;
}

/* ==========================================================================
   ACCESSIBILITY: screen-reader only text + scroll anchors
   ========================================================================== */
.cst-tesi .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
/* Ancora invisibile con offset per la sticky bar */
.cst-anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

/* ==========================================================================
   STICKY PROGRESS BAR (4 macro-scelte)
   ========================================================================== */
.cst-stepbar {
    position: sticky;
    top: 80px; /* cascade sotto la .cst-mobile-nav desktop (alta ~77px) */
    z-index: 99;
    background: #fff;
    border-bottom: 2px solid var(--cst-yellow);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.cst-stepbar__inner {
    max-width: var(--cst-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.cst-stepbar__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    color: var(--cst-text-soft);
    text-decoration: none !important;
    border-right: 1px solid var(--cst-border);
    transition: all .2s ease;
    position: relative;
}
.cst-stepbar__item:last-child { border-right: none; }
.cst-stepbar__item:hover {
    background: var(--cst-bg-soft);
    color: var(--cst-navy);
}
.cst-stepbar__item.is-active {
    background: var(--cst-yellow);
    color: var(--cst-navy);
}
.cst-stepbar__item.is-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cst-navy);
}
.cst-stepbar__num {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--cst-bg-dark);
    color: var(--cst-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    transition: all .2s ease;
}
.cst-stepbar__item.is-active .cst-stepbar__num {
    background: var(--cst-navy);
    color: var(--cst-yellow);
}
.cst-stepbar__label {
    font-size: 0.85rem;
    line-height: 1.2;
    font-weight: 500;
}
.cst-stepbar__label strong {
    display: block;
    font-weight: 800;
    color: var(--cst-navy);
    font-size: 0.95rem;
}
.cst-stepbar__hint {
    font-size: 0.75rem;
    opacity: 0.7;
    line-height: 1.1;
    margin-left: auto;
    display: none;
}
@media (min-width: 1024px) {
    .cst-stepbar__hint { display: block; max-width: 90px; text-align: right; }

    /* === 4 sezioni stampa: grid 2x2 compatto su desktop === */
    #cst-stampa-accordion.cst-stampa-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: var(--cst-maxw);
        margin: 0 auto;
        padding: var(--cst-section-py) 1.5rem;
        background: transparent;
    }
    #cst-stampa-accordion .cst-stampa-item.cst-imgtxt {
        background: #fff;
        border: 1px solid var(--cst-border);
        border-radius: var(--cst-radius);
        padding: 1.5rem;
    }
    /* Annulla l'alternanza desktop dentro la grid (zebra + reverse non hanno senso in 2x2) */
    #cst-stampa-accordion .cst-stampa-item.cst-imgtxt--white { background: #fff; }
    #cst-stampa-accordion .cst-stampa-item.cst-imgtxt--reverse .cst-imgtxt__inner > :first-child { order: 0; }
    /* Inner: foto sx | testo dx ; box "Perché"/"info" sotto full-width */
    #cst-stampa-accordion .cst-stampa-item .cst-imgtxt__inner {
        display: grid;
        grid-template-columns: 150px 1fr;
        grid-template-areas:
            "photo text"
            "extra extra";
        gap: 0.75rem 1rem;
        max-width: none;
        padding: 0;
    }
    #cst-stampa-accordion .cst-stampa-item .cst-imgtxt__photo {
        grid-area: photo;
        width: 100%;
        aspect-ratio: 1 / 1;
        max-height: 150px;
    }
    #cst-stampa-accordion .cst-stampa-item .cst-imgtxt__photo img {
        width: 100%; height: 100%; object-fit: cover;
    }
    #cst-stampa-accordion .cst-stampa-item .cst-imgtxt__text {
        grid-area: text;
        padding: 0;
    }
    #cst-stampa-accordion .cst-stampa-item .cst-imgtxt__extra {
        grid-area: extra;
        margin-top: 0.5rem;
    }
    /* Tipografia compatta */
    #cst-stampa-accordion .cst-stampa-item .cst-h2 {
        font-size: 1.35rem;
        line-height: 1.2;
        margin-bottom: 0.6rem;
    }
    #cst-stampa-accordion .cst-stampa-item .cst-eyebrow {
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
    }
    #cst-stampa-accordion .cst-stampa-item .cst-imgtxt__text p {
        font-size: 0.92rem;
        line-height: 1.55;
        margin-bottom: 0.85rem;
    }
    /* Box "Perché?" e info-box dentro le card: padding ridotto */
    #cst-stampa-accordion .cst-stampa-item .cst-why-box {
        padding: 0.75rem 0.85rem;
        font-size: 0.85rem;
    }
    #cst-stampa-accordion .cst-stampa-item .cst-info-box {
        padding: 0.85rem;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   HERO SHORTCUT "Hai fretta?"
   ========================================================================== */
.cst-hero__shortcut {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--cst-navy);
    opacity: 0.85;
}
.cst-hero__shortcut a {
    color: var(--cst-navy);
    font-weight: 700;
    border-bottom: 2px solid rgba(44, 44, 90, 0.3);
    padding-bottom: 1px;
}
.cst-hero__shortcut a:hover {
    color: var(--cst-red);
    border-color: var(--cst-red);
}

/* ==========================================================================
   BOX "Le 4 SCELTE DA FARE"
   ========================================================================== */
.cst-choices {
    background: #fff;
    padding: var(--cst-section-py) 0;
}
.cst-choices__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}
.cst-choices__head p {
    font-size: 1rem;
    color: var(--cst-text);
    margin: 0;
}
.cst-choices__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: var(--cst-maxw);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.cst-choice {
    display: block;
    background: #fff;
    border: 3px solid var(--cst-yellow);
    border-radius: var(--cst-radius);
    padding: 2rem 1.5rem 1.5rem;
    text-decoration: none !important;
    color: var(--cst-text);
    transition: all .25s ease;
    position: relative;
    text-align: center;
}
.cst-choice:hover {
    border-color: var(--cst-yellow-dark);
    transform: translateY(-4px);
    box-shadow: var(--cst-shadow-lg);
}
.cst-choice__num {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--cst-yellow);
    color: var(--cst-navy);
    font-weight: 800;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(245, 197, 24, 0.4);
}
.cst-choice h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cst-text);
    margin: 0.5rem 0 0.65rem;
}
.cst-choice h3 strong {
    color: var(--cst-navy);
    font-weight: 800;
}
.cst-choice p {
    font-size: 0.88rem;
    color: var(--cst-text);
    margin: 0 0 1rem;
    line-height: 1.55;
    min-height: 70px;
}
.cst-choice__cta {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cst-navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cst-choice:hover .cst-choice__cta { color: var(--cst-yellow-dark); }

/* ==========================================================================
   TABELLA COMPARATIVA 6 LINEE
   ========================================================================== */
.cst-compare-lines {
    background: #fff;
    padding: var(--cst-section-py) 0;
}
/* Nota disponibilità sopra la tabella */
.cst-stock-note {
    max-width: 700px;
    margin: 0 auto 1.5rem;
    padding: 0.85rem 1.1rem;
    background: #fff8e1;
    border: 1px solid var(--cst-yellow);
    border-left-width: 4px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--cst-text);
}
.cst-stock-note__icon {
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cst-yellow-dark);
    margin-top: 1px;
}
.cst-stock-note__icon .cst-icon { width: 18px; height: 18px; }
/* Badge "Pronta in 24/48 ore" sovrapposto sulla foto delle copertine in stock */
.cst-imgtxt__photo { position: relative; }
.cst-photo-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.cst-photo-badge--ready {
    background: #1f7a44;
    color: #fff;
}
@media (max-width: 480px) {
    .cst-photo-badge { font-size: 0.68rem; padding: 0.3rem 0.6rem; top: 8px; left: 8px; }
}

/* Badge disponibilità nella tabella */
.cst-stock-badge {
    display: inline-block;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.cst-stock-badge--ready {
    background: #e6f5ec;
    color: #1f7a44;
    border: 1px solid #b5dec6;
}
.cst-stock-badge--order {
    background: #fff4d6;
    color: #8a6300;
    border: 1px solid #f1d785;
}
.cst-compare-lines__table-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem;
    overflow-x: auto;
    background: #fff;
    border-radius: var(--cst-radius);
}
.cst-compare-lines__table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.92rem;
}
.cst-compare-lines__table thead th {
    background: #fff;
    color: var(--cst-text-soft);
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid var(--cst-yellow);
}
.cst-compare-lines__table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    vertical-align: middle;
    color: var(--cst-text);
}
.cst-compare-lines__table tbody tr:last-child td { border-bottom: none; }
.cst-compare-lines__table tbody tr:hover td { background: rgba(245, 197, 24, 0.05); }
.cst-compare-lines__name {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.cst-compare-lines__name img {
    width: 44px; height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.cst-compare-lines__name strong {
    color: var(--cst-navy);
    font-size: 0.98rem;
    font-weight: 700;
}
.cst-compare-lines__link {
    color: var(--cst-navy);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0.85;
    transition: opacity .15s ease, color .15s ease;
}
.cst-compare-lines__link:hover { color: var(--cst-yellow-dark); opacity: 1; }

/* ==========================================================================
   MINI-BOX "COSA CAMBIA?" (informativo blue navy chiaro)
   ========================================================================== */
.cst-info-box {
    background: linear-gradient(135deg, #f0f0fa 0%, #e8e8f5 100%);
    border-left: 4px solid var(--cst-navy);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.25rem;
}
.cst-info-box--centered {
    border-left: none;
    border-top: 4px solid var(--cst-navy);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.cst-info-box__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    color: var(--cst-navy);
    font-size: 1.02rem;
}
.cst-info-box--centered .cst-info-box__head {
    justify-content: center;
}
.cst-info-box__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.65rem;
}
.cst-info-box__list--3col {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: left;
}
.cst-info-box__list li {
    padding: 0.65rem 0.85rem;
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--cst-text);
}
.cst-info-box__list strong { color: var(--cst-navy); }
.cst-info-box__list em {
    color: var(--cst-text-soft);
    font-style: italic;
    font-size: 0.85rem;
}
.cst-info-box__highlight {
    background: var(--cst-yellow) !important;
    box-shadow: 0 2px 8px rgba(245, 197, 24, 0.3);
}
.cst-info-box__highlight strong { color: var(--cst-navy-dark); }

/* ==========================================================================
   COLOR CHIP CON FOTO (sostituisce il chip con swatch colorato)
   ========================================================================== */
.cst-color-chip--photo {
    padding: 0.3rem 0.85rem 0.3rem 0.3rem;
}
.cst-color-chip--photo img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
}

/* ==========================================================================
   SWATCHES CON FOTO REALI (nel calcolatore)
   ========================================================================== */
.cst-swatch__color--photo {
    height: 80px;
    background: transparent !important;
    overflow: hidden;
    padding: 0;
}
.cst-swatch__color--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ==========================================================================
   DOTS pillars carousel — default nascosti (mostrati solo mobile)
   ========================================================================== */
.cst-pillars__dots { display: none; }

/* ==========================================================================
   STEPBAR progress bar — visibile sempre (cima della stepbar, sticky)
   ========================================================================== */
.cst-stepbar__progress {
    display: block;
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    position: relative;
}
.cst-stepbar__progress-fill {
    height: 100%;
    width: 0%;
    background: var(--cst-yellow);
    transition: width .15s linear;
}

/* ==========================================================================
   ACCORDION mobile per le 4 sub-sezioni stampa
   Desktop: nessuno stile (sezioni image+text normali).
   ========================================================================== */
.cst-accordion__head,
.cst-accordion__body { display: contents; } /* desktop: passthrough */

/* ==========================================================================
   TOP NAV — DESKTOP: logo + menu inline + WhatsApp CTA
   Su mobile (≤768px) diventa logo + hamburger (vedi media query sotto).
   ========================================================================== */
.cst-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: #fff;
    padding: 0.75rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--cst-border);
}
.cst-mobile-nav__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
}
.cst-mobile-nav__logo img {
    max-height: 52px;
    width: auto;
    display: block;
}
/* Menu desktop inline (nascosto su mobile) */
.cst-mobile-nav__desktop-menu {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-left: auto;
}
.cst-mobile-nav__desktop-menu a {
    color: var(--cst-navy);
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.005em;
    transition: color .15s ease;
    white-space: nowrap;
}
.cst-mobile-nav__desktop-menu a:hover,
.cst-mobile-nav__desktop-menu a:focus {
    color: var(--cst-yellow);
}
.cst-mobile-nav__cta-inline {
    background: #25D366;
    color: #fff !important;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700 !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cst-mobile-nav__cta-inline:hover,
.cst-mobile-nav__cta-inline:focus {
    background: #1ebe5d;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}
.cst-mobile-nav__cta-inline .cst-wa-icon {
    width: 16px;
    height: 16px;
}
/* Hamburger nascosto su desktop */
.cst-mobile-nav__hamburger { display: none; }
/* Overlay menu nascosto su desktop */
.cst-mobile-nav__overlay { display: none; }

/* === NASCONDE header del tema Divi (vale anche su desktop, abbiamo la nostra barra) === */
body.cst-page-stampa-tesi #main-header,
body.cst-page-stampa-tesi .et_header_style_default,
body.cst-page-stampa-tesi #top-header { display: none !important; }
body.cst-page-stampa-tesi #page-container { padding-top: 0 !important; }

/* === FIX STICKY in Divi: position:sticky si rompe se un antenato ha overflow!=visible
   o transform!=none. Divi mette overflow:hidden/transform su section/row/column/text.
   Forzo overflow:visible su tutti i wrapper Divi quando la pagina ha shortcode CST. === */
body.cst-page-stampa-tesi #page-container,
body.cst-page-stampa-tesi #et-main-area,
body.cst-page-stampa-tesi #main-content,
body.cst-page-stampa-tesi .et_pb_section,
body.cst-page-stampa-tesi .et_pb_row,
body.cst-page-stampa-tesi .et_pb_column,
body.cst-page-stampa-tesi .et_pb_module,
body.cst-page-stampa-tesi .et_pb_text,
body.cst-page-stampa-tesi .et_pb_text_inner,
body.cst-page-stampa-tesi .et_pb_code,
body.cst-page-stampa-tesi .et_pb_code_inner {
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
}

/* ==========================================================================
   CAROUSEL MOBILE — 6 SEZIONI COPERTINE
   Desktop: comportamento normale (stack verticale).
   Mobile (≤768px): scroll-snap orizzontale con dots indicatori.
   ========================================================================== */
.cst-lines-carousel { width: 100%; }
.cst-lines-carousel__dots {
    display: none;
}

/* ==========================================================================
   STICKY BOTTOM BAR MOBILE — Preventivo / Negozio / WhatsApp
   ========================================================================== */
.cst-mobile-bar { display: none; }

/* Freccia animata scroll-down (solo mobile) */
.cst-hero__scroll-arrow { display: none; }

/* ==========================================================================
   RESPONSIVE — Mobile is the primary view
   ========================================================================== */

/* === TABLET (≤1024px) === */
@media (max-width: 1024px) {
    .cst-benefits__grid { grid-template-columns: repeat(3, 1fr); }
    .cst-reviews__grid { grid-template-columns: repeat(2, 1fr); }
    .cst-lines { grid-template-columns: repeat(3, 1fr); }
    .cst-trustbar__inner { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .cst-pillars__inner { grid-template-columns: 1fr; }
    .cst-choices__grid { grid-template-columns: repeat(2, 1fr); }
    .cst-info-box__list--3col { grid-template-columns: 1fr; }
}

/* === MOBILE (≤768px) — vista principale === */
@media (max-width: 768px) {
    /* Tipografia scalata — H1 GRANDE, H2 più evidenti */
    .cst-h1 { font-size: 3rem; line-height: 1.02; letter-spacing: -0.015em; }
    .cst-h2 { font-size: 1.7rem; line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; }
    .cst-h3 { font-size: 1.1rem; font-weight: 700; }
    .cst-section__inner { padding: 2.5rem 1rem; }

    /* === HERO MOBILE SEMPLIFICATO: tag + H1 grande + checklist + foto a destra === */
    .cst-hero { padding: 1.5rem 1rem 0; position: relative; }
    .cst-hero__inner {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 0.5rem;
        align-items: end;
    }
    .cst-hero__text { order: 1; padding-bottom: 1rem; }
    .cst-hero__visual { order: 2; min-height: 0; display: flex; justify-content: flex-end; align-items: flex-end; margin: 0; }
    .cst-hero__img { height: 280px; width: auto; max-width: 100%; margin: 0; display: block; }
    .cst-h1 { font-size: 2.5rem; line-height: 1.02; letter-spacing: -0.02em; }
    /* Tag (era .cst-eyebrow): no uppercase, no letter-spacing largo */
    .cst-hero__tag {
        font-family: 'Poppins', sans-serif;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--cst-navy);
        text-transform: none;
        letter-spacing: 0;
        line-height: 1.35;
        margin: 0 0 0.65rem;
        opacity: 0.9;
    }
    /* Checklist con spunte sotto H1 */
    .cst-hero__list {
        list-style: none;
        padding: 0;
        margin: 0.85rem 0 0;
    }
    .cst-hero__list li {
        position: relative;
        padding-left: 1.55rem;
        font-size: 0.82rem;
        line-height: 1.4;
        color: var(--cst-navy);
        margin-bottom: 0.5rem;
    }
    .cst-hero__list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.05rem;
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 50%;
        background: var(--cst-navy);
        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='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0.75rem 0.75rem;
    }
    .cst-hero__list li strong { font-weight: 800; }
    .cst-hero__lead { font-size: 0.85rem; max-width: 100%; line-height: 1.55; }
    .cst-eyebrow { font-size: 0.7rem; }
    /* Nascondi su mobile: bottoni CTA hero + link "Hai già idee chiare" (i canali sono nella sticky bar) */
    .cst-hero__cta { display: none; }
    .cst-hero__shortcut { display: none; }

    /* Freccia animata scroll-down: NASCOSTA su mobile (la sticky bottom bar è già richiamo)
       Per riattivarla: change display a inline-flex */
    .cst-hero__scroll-arrow { display: none; }

    /* === STICKY STEPBAR mobile: più leggibile, in cascade SOTTO la cst-mobile-nav (alta ~62px) === */
    .cst-stepbar { box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: sticky; top: 62px; z-index: 99; }
    .cst-stepbar__inner { grid-template-columns: repeat(4, 1fr); }
    .cst-stepbar__item {
        padding: 0.55rem 0.3rem 0.65rem;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        text-align: center;
        border-right: 1px solid var(--cst-border);
    }
    .cst-stepbar__num {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
        flex: 0 0 28px;
        font-weight: 800;
    }
    .cst-stepbar__label { font-size: 0.7rem; line-height: 1.15; font-weight: 600; }
    .cst-stepbar__label strong { font-size: 0.78rem; display: block; font-weight: 800; }
    .cst-stepbar__hint { display: none; }
    /* Stato attivo evidenziato chiaramente */
    .cst-stepbar__item.is-active {
        background: var(--cst-yellow);
        box-shadow: inset 0 -3px 0 var(--cst-navy);
    }
    .cst-stepbar__item.is-active .cst-stepbar__num { background: var(--cst-navy); color: var(--cst-yellow); }

    /* === TRUST BAR: 2×3 grid === */
    .cst-trustbar { padding: 1rem 0.75rem; }
    .cst-trustbar__inner { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .cst-trustbar__text { font-size: 0.78rem; }

    /* === PILLARS (3 motivi) — CAROUSEL mobile === */
    .cst-pillars { padding-bottom: 2rem; }
    .cst-pillars__inner {
        display: flex;
        grid-template-columns: none;
        gap: 0;
        padding: 0 1rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    .cst-pillars__inner::-webkit-scrollbar { display: none; }
    .cst-pillars__inner > .cst-pillar {
        flex: 0 0 calc(100% - 1rem);
        scroll-snap-align: center;
        margin-right: 1rem;
    }
    .cst-pillars__inner > .cst-pillar:last-child { margin-right: 0; }
    .cst-pillar { padding: 1.5rem 1.25rem; }
    /* Dots pillars (visibili solo mobile) */
    .cst-pillars__dots {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        padding: 1.25rem 0 0;
    }
    .cst-pillars__dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.15);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: all .25s ease;
    }
    .cst-pillars__dot.is-active {
        background: var(--cst-yellow);
        transform: scale(1.4);
        box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.25);
    }

    /* === CHOICES "4 scelte": grid 2×2 mobile — box staccati con più aria === */
    .cst-choices { padding: 2rem 0; }
    .cst-choices__head { margin-bottom: 1.75rem; padding: 0 1.25rem; }
    .cst-choices__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem 1.25rem;
        padding: 0.75rem 1.25rem 0.5rem;
    }
    .cst-choice {
        padding: 1.75rem 1.25rem 1.25rem;
        text-align: center;
    }
    .cst-choice__num { width: 38px; height: 38px; font-size: 1rem; top: -19px; }
    .cst-choice h3 { font-size: 0.95rem; margin: 0.4rem 0 0.55rem; line-height: 1.25; }
    .cst-choice p { font-size: 0.8rem; line-height: 1.5; min-height: 0; margin-bottom: 0.85rem; }
    .cst-choice__cta { font-size: 0.68rem; letter-spacing: 0.03em; }

    /* === BANNER gradient mobile: cerchio mascotte sovrapposto sopra (sporge) + banda sottile === */
    .cst-banner {
        padding: 1.1rem 1rem 1.25rem;
        margin: 50px 0 20px; /* top: spazio per cerchio sovrapposto */
        gap: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        overflow: visible;
    }
    .cst-banner__avatar {
        position: absolute;
        top: -45px;
        left: 50%;
        transform: translateX(-50%);
        flex: none;
        width: 90px;
        height: 90px;
        border-width: 4px;
        margin: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 2;
    }
    .cst-banner__step {
        font-size: 0.7rem;
        margin: 2.55rem 0 0.25rem; /* spazio sotto cerchio sovrapposto */
        letter-spacing: 0.06em;
    }
    .cst-banner__title {
        font-size: 1.75rem;
        line-height: 1.1;
        padding: 0;
        text-align: center;
        margin: 0;
        flex: none;
    }
    .cst-banner__title strong {
        font-weight: 800;
        letter-spacing: 0.01em;
        font-size: 1.75rem;
    }

    /* === IMG+TEXT: SEMPRE testo prima della foto su mobile === */
    .cst-imgtxt { padding: 2rem 1rem; }
    .cst-imgtxt__inner { grid-template-columns: 1fr; gap: 1.25rem; grid-template-areas: none; }
    .cst-imgtxt__text { order: 1; }
    .cst-imgtxt__photo { order: 2; }
    .cst-imgtxt__extra { order: 3; }
    /* Reverse mobile (per copertine 2-children: photo+text) */
    .cst-imgtxt--reverse .cst-imgtxt__inner > :first-child { order: 2; }
    .cst-imgtxt--reverse .cst-imgtxt__inner > :last-child { order: 1; }
    /* Annulla reverse mobile per sezioni stampa (3-children: photo+text+extra) — usa order esplicito */
    #cst-stampa-accordion .cst-imgtxt--reverse .cst-imgtxt__photo { order: 2; }
    #cst-stampa-accordion .cst-imgtxt--reverse .cst-imgtxt__text  { order: 1; }
    #cst-stampa-accordion .cst-imgtxt--reverse .cst-imgtxt__extra { order: 3; }
    .cst-imgtxt__photo--map iframe { min-height: 280px; }

    /* === ACCORDION mobile per le 4 sub-sezioni stampa === */
    .cst-stampa-group { padding: 0 1rem; background: #fff; }
    .cst-stampa-item.cst-accordion {
        display: block;
        background: #fff;
        border: 1px solid var(--cst-border);
        border-radius: 10px;
        margin-bottom: 0.5rem;
        overflow: hidden;
        padding: 0;
    }
    .cst-stampa-item.cst-accordion .cst-imgtxt__inner { padding: 0; max-width: none; }
    .cst-accordion__head {
        display: flex !important;
        width: 100%;
        background: #fff;
        border: none;
        padding: 1rem 1rem;
        cursor: pointer;
        align-items: center;
        justify-content: space-between;
        font-family: 'Poppins', sans-serif;
        text-align: left;
        gap: 0.75rem;
        transition: background .15s ease;
    }
    .cst-accordion__head:hover { background: var(--cst-bg-soft); }
    .cst-accordion__label {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        font-weight: 800;
        color: var(--cst-navy);
        font-size: 1rem;
        line-height: 1.25;
        text-align: left;
        flex: 1;
    }
    .cst-accordion__label-main {
        font-weight: 600;
        font-size: 1rem;
        color: var(--cst-navy);
        line-height: 1.2;
    }
    .cst-accordion__label-main strong {
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.01em;
    }
    .cst-accordion__label-sub {
        font-weight: 400;
        font-size: 0.78rem;
        color: var(--cst-text-soft);
        line-height: 1.3;
    }
    .cst-accordion__arrow {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--cst-yellow);
        color: var(--cst-navy);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        font-weight: 700;
        line-height: 1;
        transition: transform .25s ease;
    }
    .cst-stampa-item.is-open .cst-accordion__arrow {
        transform: rotate(45deg);
    }
    .cst-accordion__body {
        display: block !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
    }
    .cst-stampa-item.is-open .cst-accordion__body {
        max-height: 2200px; /* spazio sufficiente per il contenuto */
    }
    .cst-stampa-item.is-open .cst-imgtxt__inner {
        padding: 0 1rem 1.25rem;
    }
    .cst-stampa-item.cst-accordion .cst-imgtxt__photo {
        margin-bottom: 1rem;
        aspect-ratio: 16/9;
    }

    /* === TABELLA COMPARATIVA 6 LINEE: scroll orizzontale === */
    .cst-compare-lines { padding: 2.5rem 0; }
    .cst-compare-lines__table-wrap { padding: 0 1rem; -webkit-overflow-scrolling: touch; }
    .cst-compare-lines__table { font-size: 0.78rem; min-width: 580px; }
    .cst-compare-lines__name img { width: 36px; height: 36px; }
    .cst-compare-lines__table thead th { padding: 0.65rem 0.7rem; font-size: 0.7rem; }
    .cst-compare-lines__table tbody td { padding: 0.65rem 0.7rem; }

    /* === CALCOLATORE === */
    .cst-calc { padding: 2.5rem 0.75rem; }
    .cst-calc__head { margin-bottom: 1.5rem; }
    .cst-calc__container { padding: 1rem; border-radius: 12px; }
    .cst-calc__group { padding: 1rem; margin-bottom: 1.25rem; border-radius: 10px; }
    .cst-calc__group-head { gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.75rem; }
    .cst-calc__group-num { width: 36px; height: 36px; font-size: 1rem; flex: 0 0 36px; }
    .cst-calc__group-title { font-size: 1rem; }
    .cst-calc__group-desc { font-size: 0.82rem; }
    .cst-calc__grid { grid-template-columns: 1fr; gap: 0.85rem; }
    .cst-field { padding: 1rem; }
    .cst-field__input { font-size: 1rem; padding: 0.7rem; }
    .cst-field__note { font-size: 0.78rem; padding: 0.65rem 0.8rem; }

    /* Radio grid: 1 colonna full-width touch-friendly */
    .cst-radio-grid { grid-template-columns: 1fr; gap: 0.4rem; }
    .cst-radio-grid label { flex-direction: row; justify-content: space-between; padding: 0.85rem 1rem; min-height: 44px; }
    .cst-radio-grid label strong { font-size: 0.95rem; }
    .cst-radio-grid label span { font-size: 0.82rem; }

    /* Linee copertina: 2 colonne */
    .cst-lines { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
    .cst-line { padding: 0.65rem 0.45rem; min-height: 44px; }
    .cst-line strong { font-size: 0.88rem; }
    .cst-line small { font-size: 0.7rem; }

    /* Swatches: 3 colonne mobile */
    .cst-swatches__grid { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
    .cst-swatch { padding: 0.4rem; }
    .cst-swatch__color { height: 50px; }
    .cst-swatch__name { font-size: 0.72rem; }

    /* Summary preventivo */
    .cst-summary { grid-template-columns: 1fr; padding: 1.25rem; gap: 1rem; text-align: center; }
    .cst-summary__row { justify-content: space-between; }
    .cst-summary__amount { font-size: 2.2rem; }
    .cst-summary__cta .cst-btn { width: 100%; justify-content: center; }

    /* === LISTINO === */
    .cst-pricing__grid { grid-template-columns: 1fr; gap: 1.25rem; }

    /* === COME FUNZIONA === */
    .cst-steps { grid-template-columns: 1fr; gap: 2.25rem; }
    .cst-step { padding: 1.75rem 1.25rem 1.25rem; }

    /* === BENEFITS gialla: 2 colonne === */
    .cst-benefits { padding: 2rem 1rem; }
    .cst-benefits__title { font-size: 1.05rem; margin-bottom: 1.5rem; }
    .cst-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .cst-benefit__icon { width: 48px; height: 48px; }
    .cst-benefit { font-size: 0.82rem; }

    /* === CHECKLIST "Cosa portare" === */
    .cst-checklist { grid-template-columns: 1fr; gap: 1rem; }
    .cst-checklist li { padding: 1.25rem 1rem; }

    /* === TABELLA CONFRONTO: stack verticale con prefissi === */
    .cst-compare__row { grid-template-columns: 1fr; padding: 0.5rem 0; border-bottom: 2px solid rgba(0,0,0,0.04); }
    .cst-compare__row--head { display: none; }
    .cst-compare__label {
        padding: 0.85rem 1rem 0.5rem;
        background: var(--cst-bg-soft);
        font-size: 1rem;
    }
    .cst-compare__cst,
    .cst-compare__other {
        padding: 0.85rem 1rem;
        text-align: left;
        justify-content: flex-start;
    }
    .cst-compare__cst::before {
        content: 'Centro Stampa Torino · ';
        display: block;
        font-weight: 800;
        color: var(--cst-yellow-dark);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.2rem;
    }
    .cst-compare__other::before {
        content: 'E-commerce nazionale · ';
        display: block;
        font-weight: 700;
        color: var(--cst-text-soft);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.2rem;
        opacity: 0.75;
    }

    /* === FAQ: mascotte sopra, accordion sotto === */
    .cst-faq__inner { grid-template-columns: 1fr; gap: 1.25rem; padding: 2.5rem 1rem; }
    .cst-faq__aside { position: static; text-align: center; }
    .cst-faq__avatar { width: 110px; height: 110px; margin: 0 auto 1rem; }
    .cst-faq__aside h2 { font-size: 1.35rem; }
    .cst-faq__q { font-size: 0.95rem; padding: 0.9rem 2.5rem 0.9rem 0.5rem; }
    .cst-faq__a { padding: 0 0.5rem 1.1rem; font-size: 0.9rem; }

    /* === FINAL footer === */
    .cst-final__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .cst-final__left { order: 1; }
    .cst-final__contact-box { order: 2; padding: 1.5rem; }
    .cst-final__legal {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
        justify-items: center;
    }
    .cst-final__legal-logo img { max-height: 44px; }
    .cst-final__legal-social a { width: 36px; height: 36px; }
    .cst-final__legal-credits { text-align: center; }
    .cst-final__copy,
    .cst-final__links { font-size: 0.7rem; }

    /* === WhatsApp FAB: nascosto su mobile (sostituito da cst-mobile-bar) === */
    .cst-wa-fab { display: none !important; }

    /* === TOP NAV mobile: logo + hamburger (menu inline desktop nascosto) === */
    .cst-mobile-nav {
        padding: 0.65rem 1rem;
        z-index: 100;
        gap: 0;
    }
    .cst-mobile-nav__logo img { max-height: 40px; }
    .cst-mobile-nav__desktop-menu { display: none; }
    .cst-mobile-nav__hamburger {
        background: transparent;
        border: none;
        border-radius: 4px;
        width: 44px;
        height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        padding: 0;
    }
    .cst-mobile-nav__hamburger span {
        width: 26px;
        height: 2.5px;
        background: var(--cst-navy);
        border-radius: 2px;
        transition: all 0.25s ease;
    }
    /* Hamburger → "X" quando menu aperto */
    .cst-mobile-nav__hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .cst-mobile-nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
    .cst-mobile-nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    /* === OVERLAY MENU — pulito e professionale === */
    .cst-mobile-nav__overlay {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: var(--cst-text);
        color: #fff;
        z-index: 9999;
        padding: 1rem 1.5rem 1.5rem;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
    }
    .cst-mobile-nav__overlay.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .cst-mobile-nav__overlay[hidden] { display: flex; }

    /* Head: logo piccolo + close discreto */
    .cst-mobile-nav__overlay-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 1rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .cst-mobile-nav__overlay-logo {
        max-height: 36px;
        width: auto;
        display: block;
    }
    .cst-mobile-nav__close {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.85);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color .15s ease, background .15s ease;
    }
    .cst-mobile-nav__close:hover {
        color: var(--cst-yellow);
        background: rgba(255, 255, 255, 0.06);
    }

    /* Nav: voci più sobrie e curate */
    .cst-mobile-nav__nav {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 0.5rem;
        margin-bottom: 1.25rem;
    }
    .cst-mobile-nav__nav a {
        color: rgba(255, 255, 255, 0.92);
        font-family: 'Poppins', sans-serif;
        font-size: 1.05rem;
        font-weight: 600;
        text-decoration: none !important;
        padding: 0.85rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        transition: color .15s ease;
        letter-spacing: -0.005em;
    }
    .cst-mobile-nav__nav a:hover,
    .cst-mobile-nav__nav a:focus { color: var(--cst-yellow); }

    /* "Torna allo Shop CST" — sobrio, in giallo */
    .cst-mobile-nav__nav-external {
        margin-top: 0.5rem;
        padding-top: 1rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-bottom: none !important;
        color: var(--cst-yellow) !important;
        font-size: 0.85rem !important;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 700 !important;
    }
    .cst-mobile-nav__nav-external span { font-size: 1.1rem; }

    .cst-mobile-nav__cta {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 0.5rem;
    }
    .cst-mobile-nav__cta .cst-btn { width: 100%; justify-content: center; }

    /* Social: 2 cerchi gialli compatti */
    .cst-mobile-nav__social {
        display: flex;
        justify-content: center;
        gap: 0.85rem;
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .cst-mobile-nav__social a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--cst-yellow);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--cst-navy);
        transition: background .15s ease, transform .15s ease;
    }
    .cst-mobile-nav__social a:hover {
        background: #fff;
        transform: translateY(-2px);
    }
    .cst-mobile-nav__social .cst-icon {
        width: 20px;
        height: 20px;
        fill: currentColor;
        stroke: none;
        color: var(--cst-navy);
    }

    /* === Dentro accordion (copertine + 4 sezioni stampa): nascondi eyebrow + H2 (già nel header).
       Restano in HTML per SEO. === */
    #cst-lines-carousel .cst-stampa-item.cst-accordion .cst-imgtxt__text > .cst-eyebrow,
    #cst-lines-carousel .cst-stampa-item.cst-accordion .cst-imgtxt__text > .cst-h2,
    #cst-stampa-accordion .cst-stampa-item.cst-accordion .cst-imgtxt__text > .cst-eyebrow,
    #cst-stampa-accordion .cst-stampa-item.cst-accordion .cst-imgtxt__text > .cst-h2 {
        display: none;
    }

    /* === 6 LINEE COPERTINA: accordion mobile (era carousel) === */
    .cst-lines-carousel {
        padding: 0 1rem;
        background: #fff;
    }
    .cst-lines-carousel > .cst-imgtxt.cst-stampa-item {
        margin-bottom: 0.5rem;
    }
    /* Dots eventualmente rimasti: nascosti */
    .cst-lines-carousel__dots,
    .cst-lines-carousel__dot { display: none !important; }

    /* === STICKY BOTTOM BAR MOBILE === */
    .cst-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
        z-index: 9998;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    .cst-mobile-bar__btn {
        flex: 1;
        padding: 0.85rem 0.25rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 0.7rem;
        text-decoration: none !important;
        text-align: center;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: #fff;
        color: var(--cst-navy);
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        transition: background .15s ease;
    }
    .cst-mobile-bar__btn:last-child { border-right: none; }
    .cst-mobile-bar__btn:active,
    .cst-mobile-bar__btn:hover { background: var(--cst-bg-soft); }
    /* Solo le icone hanno il colore brand (look pulito, no sfondi colorati) */
    .cst-mobile-bar__btn--calc .cst-icon { color: var(--cst-yellow-dark); }
    .cst-mobile-bar__btn--shop .cst-icon { color: var(--cst-navy); }
    .cst-mobile-bar__btn--wa  .cst-wa-icon { background-color: #25D366; }
    .cst-mobile-bar__btn .cst-wa-icon,
    .cst-mobile-bar__btn .cst-icon { width: 22px; height: 22px; }
    .cst-mobile-bar__btn span:not(.cst-wa-icon):not(.cst-icon) { line-height: 1; }

    /* Padding-bottom al wrapper per non far coprire dal bottom bar */
    .cst-tesi { padding-bottom: 60px; }

    /* === OTHER === */
    .cst-foil__inner { grid-template-columns: 1fr; gap: 2rem; }
    .cst-why__grid { grid-template-columns: 1fr; }
    .cst-reviews__grid { grid-template-columns: 1fr; }
    /* Anchor offset per stepbar sticky */
    .cst-anchor { top: -100px; }
}

/* === MOBILE PICCOLO (≤480px) — iPhone SE / smartphone stretti === */
@media (max-width: 480px) {
    .cst-h1 { font-size: 2.4rem; line-height: 1.06; }
    .cst-h2 { font-size: 1.45rem; line-height: 1.2; }
    .cst-hero__lead { font-size: 0.82rem; }
    .cst-hero__img { height: 260px; }
    /* Bottom bar bottoni più piccoli su iPhone SE */
    .cst-mobile-bar__btn { font-size: 0.62rem; padding: 0.7rem 0.2rem; }
    .cst-mobile-bar__btn .cst-wa-icon,
    .cst-mobile-bar__btn .cst-icon { width: 18px; height: 18px; }
    .cst-hero__lead { font-size: 0.9rem; }
    /* Trustbar resta a 2 colonne anche su smartphone piccoli */
    .cst-trustbar__inner { grid-template-columns: repeat(2, 1fr); gap: 0.7rem 0.85rem; }
    .cst-trustbar__item { flex-direction: row; justify-content: flex-start; gap: 0.6rem; text-align: left; }
    .cst-trustbar__text { font-size: 0.72rem; }
    /* Benefit grid: 2 colonne anche su mobile piccoli */
    .cst-benefits__grid { grid-template-columns: repeat(2, 1fr); }
    .cst-stepbar__label { font-size: 0.58rem; }
    .cst-stepbar__label strong { font-size: 0.65rem; }
    .cst-banner__title { font-size: 0.85rem; }
    .cst-calc__group-title { font-size: 0.95rem; }
    .cst-calc__group-desc { font-size: 0.78rem; }
    .cst-swatches__grid { grid-template-columns: repeat(2, 1fr); }
    .cst-section__inner { padding: 2rem 1rem; }
    .cst-section__lead { font-size: 0.92rem; }
    .cst-final__logo img { max-height: 48px; }
}

/* Reset word-wrap per evitare overflow nei box compatti */
.cst-tesi h1, .cst-tesi h2, .cst-tesi h3, .cst-tesi p, .cst-tesi ul, .cst-tesi ol {
    word-wrap: break-word;
}