/* TOSCA — riassetto del sito in piu' pagine (bozza del 13/09/2026).
   Sta in un file a parte, caricato DOPO stile.css, per non toccare il foglio
   che e' online finche' la bozza non e' approvata. Usa solo le variabili di
   stile.css: colori e misure restano quelli del sito. */

/* ---- Home: i macro-titoli ---------------------------------------------
   Una scheda per sezione: titolo, due righe, e il collegamento alla pagina
   di approfondimento. Tutta la scheda e' cliccabile (il ::after del link la
   copre), ma il collegamento vero resta uno solo, con un testo che dice dove
   porta: e' quello che legge Google. */
.macro-griglia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 980px;
    margin: 0 auto;
}

.macro {
    position: relative;
    padding: clamp(26px, 3.5vw, 38px);
    background: var(--avorio);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    transition: border-color .3s ease, transform .3s ease;
}
.macro:hover { border-color: var(--rosa-linea); transform: translateY(-2px); }

/* Icona ed etichetta una sotto l'altra, allineate a sinistra: in riga, lo
   spazio dopo l'icona spingeva l'etichetta di una trentina di pixel. */
.macro .aggiunta-segno { display: block; }
.macro .occhiello { display: block; margin-top: 14px; }
.macro h3 { margin-top: 12px; }
.macro p { margin-top: 10px; font-size: 1rem; }
.macro .link-freccia { margin-top: 20px; }
.macro-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

@media (max-width: 760px) {
    .macro-griglia { grid-template-columns: 1fr; }
}

/* ---- Home: "clicca per approfondire" ----------------------------------
   Il pieghevole di stile.css si apre solo sul telefono e sul desktop resta
   sempre aperto. Questo invece parte CHIUSO ovunque: e' il riassunto che
   si legge, il dettaglio si apre. */
.pieghevole.approfondisci > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 940px;
    margin: 0 auto;
    padding: 20px 22px;
    background: var(--rosa-velo);
    border: 1px solid var(--rosa-linea);
    border-radius: var(--r-lg);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rosa-profondo);
    cursor: pointer;
    list-style: none;
}
.pieghevole.approfondisci > summary::-webkit-details-marker { display: none; }
.pieghevole.approfondisci > summary::after {
    content: '+';
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 300;
}
.pieghevole.approfondisci[open] > summary::after { content: '\2212'; }
.pieghevole.approfondisci[open] > .pieghevole-corpo { padding-top: 10px; }

/* ---- Pagine di approfondimento ---------------------------------------- */
.pagina-testa { padding-bottom: clamp(40px, 6vw, 72px); }
.pagina-testa .testata { margin-bottom: 0; }

.briciole {
    margin-bottom: 26px;
    text-align: center;
    font-size: .82rem;
    color: var(--grigio-tenue);
}
.briciole a { color: var(--rosa-profondo); text-decoration: none; }
.briciole a:hover { text-decoration: underline; }

.nav a[aria-current="page"] { color: var(--rosa-profondo); }

.pagina-elenco { max-width: 660px; margin: 0 auto; }

.compreso-premium {
    display: inline-block;
    margin-top: 22px;
    padding: 6px 14px;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rosa-profondo);
    background: var(--rosa-velo);
    border: 1px solid var(--rosa-linea);
    border-radius: 999px;
}

.altre-pagine { padding: clamp(48px, 6vw, 80px) 0; text-align: center; }
.altre-pagine-elenco {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 30px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.altre-pagine-elenco a {
    color: var(--inchiostro);
    text-decoration: none;
    border-bottom: 1px solid var(--rosa-linea);
    padding-bottom: 2px;
}
.altre-pagine-elenco a:hover { color: var(--rosa-profondo); border-bottom-color: var(--rosa-profondo); }

/* ---- Titoli piu' grandi e piu' pieni (richiesta del 13/09/2026) ---------
   Il Cormorant a peso 300 e' elegante ma a quella misura si legge poco: i
   titoli passano a 500 (caricato in font/font.css) e crescono di circa un
   terzo. Il corsivo resta a 400, l'ultimo peso corsivo presente nei font:
   chiederne di piu' farebbe disegnare al browser un grassetto finto. */
.sezione h2,
.invito h2 {
    font-size: clamp(2.6rem, 6.2vw, 4.9rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.012em;
}
/* Dentro una colonna (titolo accanto alla foto) la misura piena andrebbe a
   capo a ogni parola. */
.capitolo h2,
.scheda-griglia h2 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); }

.sezione h2 .corsivo,
.invito h2 .corsivo,
.pagina-testa h1 .corsivo,
.manifesto h2 .corsivo { font-weight: 400; }

.testata { max-width: 920px; }
.invito h2 { max-width: 980px; }

.pagina-testa h1 {
    font-size: clamp(3.1rem, 8vw, 6.4rem);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -0.015em;
}

.macro h3 {
    font-size: clamp(2rem, 3.3vw, 2.75rem);
    font-weight: 500;
    line-height: 1.05;
}

.manifesto h2 {
    font-size: clamp(2.3rem, 5.4vw, 4.2rem);
    font-weight: 500;
    max-width: 1000px;
}

.citazione blockquote { font-size: clamp(1.9rem, 4.2vw, 3.2rem); }

/* A capo bilanciato: senza, "I conti tornano. Da soli." lasciava "soli."
   da solo sulla seconda riga. I browser che non lo conoscono lo ignorano. */
.sezione h2, .invito h2, .pagina-testa h1, .macro h3, .manifesto h2 { text-wrap: balance; }

/* Chi siamo: con il testo ridotto a due righe, la foto non deve allungare
   la sezione da sola. */
.atelier { align-items: center; }
.atelier-testo .guida { margin-top: 26px; }
.atelier-foto img { max-height: 440px; object-fit: cover; object-position: center top; }

@media (max-width: 640px) {
    .sezione h2, .invito h2 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
    .capitolo h2, .scheda-griglia h2 { font-size: clamp(2.3rem, 10vw, 2.9rem); }
    .pagina-testa h1 { font-size: clamp(2.8rem, 13vw, 3.6rem); }
    .macro h3 { font-size: clamp(2rem, 9vw, 2.5rem); }
    .atelier-foto img { width: 100%; height: 280px; max-height: none; }
}

/* ---- Per chi: restano solo i tasti, come etichette (13/09/2026) --------
   Il riquadro sotto e' stato tolto: senza niente da aprire i tasti non
   devono reagire al passaggio del mouse, se no sembrano rotti. */
#per-chi .scheda-tab { cursor: default; pointer-events: none; }
/* Il margine sotto i tasti serviva a staccarli dal riquadro: senza riquadro
   lasciava un vuoto in fondo alla sezione. */
#per-chi .schede-nav { margin-bottom: 0; }

/* ---- Home: titolo "Tosca / il GEstionale / facile, per estetiste" --------
   La seconda riga sta fra la parola grande e la coda in corsivo. La E rosa
   e' uno span DENTRO la parola, senza spazi: per chi legge la pagina (Google
   compreso) resta "GEstionale", una parola sola. */
.titolone .riga-gestionale {
    display: block;
    margin-top: .12em;
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    font-weight: 400;
    letter-spacing: -.015em;
    color: var(--inchiostro);
}
.titolone .riga-gestionale .cong { padding-left: 0; }
.titolone .e-rosa { color: var(--rosa); }

/* ---- Pagina solarium: la barra del monitor (13/09/2026) ----------------
   Schermata ritagliata a grandezza reale: si allarga fino alla sua misura
   e non oltre, cosi' i tempi dei tasti restano leggibili. La sezione dopo e'
   bianca come questa: il margine sotto si toglie per non raddoppiarlo. */
.monitor-sezione { padding-bottom: 0; }
.monitor-foto {
    max-width: 1289px;
    margin: 0 auto;
    padding: 12px;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 40px rgba(46, 42, 56, .08);
}
.monitor-foto img { display: block; width: 100%; height: auto; border-radius: 6px; }
.monitor-foto figcaption { margin-top: 12px; text-align: center; }

/* ---- Spazi fra le sezioni delle pagine di approfondimento (13/09/2026) ---
   .sezione ha fino a 138px sopra e sotto: giusto per un capitolo pieno,
   troppo sopra e sotto una schermata o intorno a un riquadro di tre righe. */
/* Misurato il 13/09/2026 sulla pagina solarium: fra un blocco e l'altro
   c'erano 200-217px di vuoto. Obiettivo 90-110px sul desktop. */
.pagina-testa { padding-bottom: clamp(28px, 4vw, 48px); }
.monitor-sezione { padding-top: clamp(28px, 4vw, 48px); }
.monitor-sezione + .sezione { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
.sezione--stretta { padding: clamp(28px, 3.5vw, 40px) 0; }
.sezione--stretta .riquadro-adatta { margin-top: 0; }
.altre-pagine { padding: clamp(32px, 4vw, 48px) 0; }
main > .altre-pagine + .invito { padding-top: clamp(40px, 5vw, 64px); }

/* ---- Cosa fa TOSCA: schede scure alternate (13/09/2026) ----------------
   Quattro schede chiare di fila si leggevano come un blocco unico. Due sono
   scure, con i colori della scheda Premium del listino: a scacchiera sul
   desktop (2a e 3a, in diagonale) e alternate sul telefono (2a e 4a), dove
   le schede stanno in colonna e la scacchiera darebbe due scure di fila. */
@media (min-width: 761px) {
    .macro-griglia .macro:nth-child(2),
    .macro-griglia .macro:nth-child(3) { background: var(--inchiostro); border-color: var(--inchiostro); }
    .macro-griglia .macro:nth-child(2) h3,
    .macro-griglia .macro:nth-child(3) h3 { color: var(--bianco); }
    .macro-griglia .macro:nth-child(2) p,
    .macro-griglia .macro:nth-child(3) p { color: rgba(255,255,255,.72); }
    .macro-griglia .macro:nth-child(2) .occhiello,
    .macro-griglia .macro:nth-child(3) .occhiello,
    .macro-griglia .macro:nth-child(2) .link-freccia,
    .macro-griglia .macro:nth-child(3) .link-freccia { color: var(--rosa); border-color: rgba(233,137,159,.5); }
    .macro-griglia .macro:nth-child(2):hover .link-freccia,
    .macro-griglia .macro:nth-child(3):hover .link-freccia { color: var(--bianco); border-color: var(--bianco); }
}
@media (max-width: 760px) {
    .macro-griglia .macro:nth-child(2),
    .macro-griglia .macro:nth-child(4) { background: var(--inchiostro); border-color: var(--inchiostro); }
    .macro-griglia .macro:nth-child(2) h3,
    .macro-griglia .macro:nth-child(4) h3 { color: var(--bianco); }
    .macro-griglia .macro:nth-child(2) p,
    .macro-griglia .macro:nth-child(4) p { color: rgba(255,255,255,.72); }
    .macro-griglia .macro:nth-child(2) .occhiello,
    .macro-griglia .macro:nth-child(4) .occhiello,
    .macro-griglia .macro:nth-child(2) .link-freccia,
    .macro-griglia .macro:nth-child(4) .link-freccia { color: var(--rosa); border-color: rgba(233,137,159,.5); }
}

/* ---- Listino: l'attivazione in promozione (13/09/2026) ---------------- */
.attivazione--promo { justify-content: center; text-align: center; }
.attivazione--promo .attivazione-testo { max-width: none; }
.attivazione--promo h3 {
    margin: 0;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    font-weight: 500;
}
.promo-gratis {
    display: inline-block;
    margin-top: 18px;
    padding: 14px 26px;
    background: var(--rosa-profondo);
    color: var(--bianco);
    border-radius: var(--r-lg);
    font-family: var(--testo);
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.35;
    text-transform: uppercase;
}
.attivazione--promo .piano-iva { margin-top: 14px; }

/* 599 € barrato in movimento: la riga si disegna da sinistra a destra quando
   il riquadro entra nello schermo (pagina.js mette .visibile sulle .rivela).
   Si usa <del> per il significato, ma la sua riga di serie si spegne: si
   disegna con ::after, che si puo' animare. Senza JavaScript, o con il
   movimento ridotto chiesto dal sistema, la riga c'e' subito e ferma. */
.prezzo-barrato {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--grigio-tenue);
}
.prezzo-barrato::after {
    content: '';
    position: absolute;
    left: -6%;
    right: -6%;
    /* 62% e non 50%: le cifre del Cormorant scendono sotto la riga, e a meta'
       altezza la barra passava sopra il 599 invece che attraverso. */
    top: 62%;
    height: 3px;
    background: var(--rosa-profondo);
    border-radius: 2px;
    transform: rotate(-8deg) scaleX(0);
    transform-origin: left center;
}
.attivazione--promo.visibile .prezzo-barrato::after {
    animation: barra-prezzo .7s cubic-bezier(.6, 0, .3, 1) .5s forwards;
}
@keyframes barra-prezzo {
    to { transform: rotate(-8deg) scaleX(1); }
}
html:not(.js) .prezzo-barrato::after { transform: rotate(-8deg) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .prezzo-barrato::after,
    .attivazione--promo.visibile .prezzo-barrato::after {
        animation: none;
        transform: rotate(-8deg) scaleX(1);
    }
}
@media (max-width: 700px) {
    .attivazione--promo { align-items: center; }
}

/* Sotto gli 880px stile.css mette .atelier in colonna: il centrato del
   desktop qui stringerebbe foto e testo alla loro larghezza minima. */
@media (max-width: 880px) {
    .atelier { align-items: stretch; }
}