/* =====================================================================================
   Curriculum Facile — stili delle pagine
   Landing, galleria modelli, prezzi, autenticazione, area utente.
   Dipende dai token definiti in app.css.
   ===================================================================================== */


/* --------------------------------------------------------------- Landing ----------- */

.hero {
    padding-block: var(--sp-16) var(--sp-12);
    /* Un solo passaggio di tono dall'alto al basso, appena percettibile: nel sistema
       le superfici sono piane e le sfumature colorate non esistono. */
    background: linear-gradient(180deg, #f2f2f3 0%, #ececed 100%);
    border-bottom: 1px solid var(--bordo);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sp-12);
    align-items: center;
}

.hero__occhiello {
    /* Nessuna pillola: nel sistema l'occhiello è testo nudo, monospaziato e
       spaziato largo. Lo stile arriva da .occhiello; qui resta solo la distanza. */
    margin-bottom: var(--sp-5);
}

.hero__titolo {
    /* Grande e maiuscolo: è il pezzo forte della pagina. Le tre righe
       le decide il markup, quindi niente bilanciamento automatico. */
    font-size: clamp(2.375rem, 4.4vw, 3.375rem);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin-bottom: var(--sp-5);
}

.hero__titolo em {
    /* La parola accentata non cambia colore soltanto: le si tira sotto una riga
       spessa, come una sottolineatura tracciata a mano su una copia stampata. */
    font-style: normal;
    color: var(--blu-700);
    border-bottom: 5px solid var(--blu-500);
}


.hero__sottotitolo {
    font-size: var(--testo-lg);
    color: var(--grigio-600);
    line-height: 1.65;
    max-width: 52ch;
    margin-bottom: var(--sp-8);
}

.hero__azioni {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}

/* Tre dati in fila, divisi da filetti verticali. Il numero è condensato e grande,
   l'etichetta minuta: il contrasto fra i due è ciò che li fa leggere come una
   tabella e non come tre frasi. */
.hero__dati {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--bordo);
}

.dato {
    padding: var(--sp-4) var(--sp-4) 0 var(--sp-5);
    border-right: 1px solid var(--bordo);
}

.dato:first-child {
    padding-left: 0;
}

.dato:last-child {
    border-right: 0;
    padding-right: 0;
}

.dato__numero {
    display: block;
    font-family: var(--font-titoli);
    font-weight: var(--peso-titoli);
    font-size: 30px;
    line-height: 1;
}

.dato__etichetta {
    display: block;
    font-size: var(--testo-xs);
    color: var(--testo-tenue);
}

@media (max-width: 560px) {
    .hero__dati {
        grid-template-columns: 1fr 1fr;
    }

    .dato:nth-child(2) {
        border-right: 0;
        padding-right: 0;
    }

    .dato:nth-child(3) {
        border-top: 1px solid var(--bordo);
        padding-left: 0;
        grid-column: 1 / -1;
    }
}

/* Mostra un foglio A4 in prospettiva: comunica il prodotto senza spiegarlo. */
.hero__anteprima {
    position: relative;
    aspect-ratio: 210 / 297;
    max-width: 400px;
    margin-inline: auto;
    width: 100%;
}

.hero__foglio {
    position: absolute;
    inset: 0;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-lg);
    overflow: hidden;
}

.hero__foglio--dietro {
    transform: rotate(-4deg) translate(-16px, 10px) scale(0.96);
    opacity: 0.55;
    z-index: 0;
}

.hero__foglio--avanti {
    z-index: 1;
}

.hero__foglio iframe {
    width: 210mm;
    height: 297mm;
    border: 0;
    transform-origin: top left;
    /* Il fattore è calcolato dal JavaScript in base alla larghezza reale. */
    transform: scale(var(--scala-anteprima, 0.5));
    pointer-events: none;
}

@media (max-width: 940px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__anteprima { max-width: 320px; }
    .hero__titolo { font-size: var(--testo-3xl); }
}

@media (max-width: 520px) {
    .hero { padding-block: var(--sp-12) var(--sp-10); }
    .hero__titolo { font-size: var(--testo-3xl); }
    .hero__sottotitolo { font-size: var(--testo-base); }
    .hero__azioni .btn { width: 100%; }
}


/* --- Intestazione di sezione --- */

/* Le intestazioni di sezione sono allineate a sinistra e chiuse da un filetto:
   il centrato dà un'aria da opuscolo, questa da tavola tecnica — che è il tono
   del sistema. */
.sezione__intestazione {
    margin: 0 0 var(--sp-8);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--bordo);
    text-align: left;
}

.sezione__occhiello {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--blu-700);
    margin-bottom: var(--sp-3);
}

.sezione__titolo {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    letter-spacing: 0.005em;
    margin-bottom: var(--sp-3);
}

.sezione__testo {
    color: var(--testo-tenue);
    max-width: 62ch;
    font-size: var(--testo-lg);
    line-height: 1.65;
}

@media (max-width: 620px) {
    .sezione__titolo { font-size: var(--testo-2xl); }
    .sezione__testo { font-size: var(--testo-base); }
}


/* --- Come funziona --- */

/* I passaggi sono divisi da filetti verticali, come le colonne di una tabella. */
.passo {
    position: relative;
    padding: 0 var(--sp-5);
    border-left: 1px solid var(--bordo);
}

.passo:first-child {
    border-left: 0;
    padding-left: 0;
}

/* Il numero non è più un gettone colorato ma una cifra grande e chiara, in secondo
   piano rispetto al titolo: annuncia l'ordine senza rubare l'attenzione. */
.passo__numero {
    display: block;
    width: auto;
    height: auto;
    background: none;
    font-family: var(--font-titoli);
    font-weight: var(--peso-titoli);
    font-size: 44px;
    line-height: 0.9;
    color: var(--blu-300);
    margin-bottom: var(--sp-3);
}

.passo__titolo {
    font-size: 21px;
    letter-spacing: -0.005em;
    text-transform: none;
    margin-bottom: var(--sp-2);
}

.passo__testo {
    color: var(--grigio-600);
    font-size: var(--testo-sm);
    line-height: 1.65;
}


/* --- Vantaggi --- */

.vantaggio__icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--raggio);
    background: var(--blu-50);
    color: var(--blu-600);
    margin-bottom: var(--sp-4);
}


/* --- Galleria modelli --- */

.modelli-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-6);
}

.modello-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 1px solid var(--bordo);
    border-radius: 0;
    overflow: hidden;
    transition: border-color var(--transizione), box-shadow var(--transizione),
                transform var(--transizione);
}

.modello-card:hover {
    border-color: var(--blu-300);
    box-shadow: var(--ombra-md);
    transform: translateY(-3px);
}

.modello-card__anteprima {
    position: relative;
    aspect-ratio: 210 / 297;
    background: var(--grigio-100);
    overflow: hidden;
    border-bottom: 1px solid var(--bordo);
}

.modello-card__anteprima iframe {
    width: 210mm;
    height: 297mm;
    border: 0;
    transform-origin: top left;
    transform: scale(var(--scala-anteprima, 0.33));
    pointer-events: none;
}

.modello-card__badge {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    z-index: 2;
    display: flex;
    gap: var(--sp-1);
}

.modello-card__corpo {
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
}

.modello-card__nome {
    font-size: var(--testo-base);
    font-weight: 700;
}

.modello-card__testo {
    font-size: var(--testo-sm);
    color: var(--grigio-600);
    line-height: 1.55;
    flex: 1;
}

.modello-card__azioni {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.filtri {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-8);
}

.filtro {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-tondo);
    font-size: var(--testo-sm);
    font-weight: 500;
    color: var(--grigio-600);
    background: var(--superficie);
    cursor: pointer;
    transition: all var(--transizione);
}

.filtro:hover {
    border-color: var(--blu-400);
    color: var(--blu-600);
    text-decoration: none;
}

.filtro.is-active {
    background: var(--blu-500);
    border-color: var(--blu-500);
    color: #fff;
}


/* --- Prezzi --- */

.prezzi-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
    max-width: 860px;
    margin-inline: auto;
}

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

.piano {
    background: transparent;
    border: 1px solid var(--bordo);
    border-radius: 0;
    padding: var(--sp-8);
    display: flex;
    flex-direction: column;
}

.piano--evidenza {
    /* Il piano consigliato si distingue con un filetto d'accento, non con un'ombra
       o un fondo diverso: nel sistema la gerarchia passa dal tratto. */
    border-color: var(--blu-500);
    border-width: 2px;
    box-shadow: var(--ombra-lg);
    position: relative;
}

.piano__etichetta {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--blu-500);
    color: #fff;
    padding: var(--sp-1) var(--sp-4);
    border-radius: var(--raggio-tondo);
    font-size: var(--testo-xs);
    font-weight: 700;
    white-space: nowrap;
}

.piano__nome {
    font-size: var(--testo-xl);
    margin-bottom: var(--sp-2);
}

.piano__prezzo {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin-block: var(--sp-4) var(--sp-2);
}

.piano__cifra {
    /* La cifra resta la cosa più grande della scheda, ma non più del titolo di
       sezione: è un prezzo di un euro, non un annuncio. */
    font-family: var(--font-titoli);
    font-size: var(--testo-3xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--grigio-900);
}

.piano__periodo {
    color: var(--testo-tenue);
    font-size: var(--testo-sm);
}

.piano__descrizione {
    color: var(--grigio-600);
    font-size: var(--testo-sm);
    line-height: 1.65;
    margin-bottom: var(--sp-6);
}

.piano__elenco {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
    flex: 1;
}

.piano__voce {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--testo-sm);
    line-height: 1.5;
}

.piano__voce svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--verde-700);
}

.piano__voce--assente {
    color: var(--testo-tenue);
}

.piano__voce--assente svg {
    color: var(--grigio-400);
}

/* Tabella di confronto */

.confronto {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--testo-sm);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-lg);
    overflow: hidden;
}

.confronto th,
.confronto td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--bordo);
}

.confronto thead th {
    background: var(--grigio-50);
    font-weight: 700;
    font-size: var(--testo-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grigio-600);
}

.confronto td:not(:first-child),
.confronto th:not(:first-child) {
    text-align: center;
    width: 22%;
}

.confronto tbody tr:last-child td {
    border-bottom: 0;
}

.confronto tr.is-highlight td:first-child {
    font-weight: 600;
}

.tabella-scorrevole {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* --- FAQ --- */

.faq {
    max-width: 780px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.faq__voce {
    background: transparent;
    border: 1px solid var(--bordo);
    border-radius: 0;
    overflow: hidden;
}

.faq__voce[open] {
    border-color: var(--blu-300);
}

.faq__domanda {
    padding: var(--sp-4) var(--sp-5);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    list-style: none;
    font-size: var(--testo-base);
}

.faq__domanda::-webkit-details-marker {
    display: none;
}

.faq__domanda::after {
    content: '+';
    font-size: var(--testo-xl);
    color: var(--blu-500);
    font-weight: 400;
    flex-shrink: 0;
    line-height: 1;
}

.faq__voce[open] .faq__domanda::after {
    content: '−';
}

.faq__risposta {
    padding: 0 var(--sp-5) var(--sp-5);
    color: var(--grigio-600);
    font-size: var(--testo-sm);
    line-height: 1.7;
}


/* --- Richiamo finale --- */

.cta-finale {
    /* Un blocco pieno del blu più scuro: chiude la pagina con un cambio di campo
       netto, senza sfumature. */
    background: var(--blu-900);
    color: var(--testo-inverso);
    border-radius: 0;
    padding: var(--sp-16) var(--sp-8);
    text-align: center;
}

.cta-finale h2 {
    color: var(--testo-inverso);
    font-size: var(--testo-2xl);
    margin-bottom: var(--sp-3);
}

.cta-finale p {
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--testo-lg);
    max-width: 52ch;
    margin: 0 auto var(--sp-8);
}

.cta-finale .btn--primary {
    background: #fff;
    color: var(--blu-700);
}

.cta-finale .btn--primary:hover {
    background: var(--blu-50);
    color: var(--blu-800);
}


/* --------------------------------------------------------- Autenticazione ---------- */

.auth {
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    padding-block: var(--sp-12);
}

.auth__card {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-xl);
    padding: var(--sp-8);
    box-shadow: var(--ombra-md);
}

.auth__titolo {
    font-size: var(--testo-2xl);
    margin-bottom: var(--sp-2);
}

.auth__sottotitolo {
    color: var(--grigio-600);
    font-size: var(--testo-sm);
    margin-bottom: var(--sp-6);
    line-height: 1.6;
}

.auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.auth__pie {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--bordo);
    text-align: center;
    font-size: var(--testo-sm);
    color: var(--grigio-600);
}

.password-forza {
    height: 4px;
    background: var(--grigio-200);
    border-radius: var(--raggio-tondo);
    overflow: hidden;
    margin-top: var(--sp-2);
}

.password-forza__barra {
    height: 100%;
    width: 0;
    border-radius: var(--raggio-tondo);
    transition: width var(--transizione), background-color var(--transizione);
}


/* -------------------------------------------------------------- Area utente -------- */

.app-shell {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
}

@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
}

.app-sidebar {
    background: var(--superficie);
    border-right: 1px solid var(--bordo);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

@media (max-width: 900px) {
    .app-sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--bordo);
    }
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.app-nav__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--raggio);
    color: var(--grigio-600);
    font-size: var(--testo-sm);
    font-weight: 500;
}

.app-nav__link:hover {
    background: var(--grigio-50);
    color: var(--grigio-900);
    text-decoration: none;
}

.app-nav__link.is-active {
    background: var(--blu-50);
    color: var(--blu-700);
    font-weight: 600;
}

.app-nav__link svg {
    flex-shrink: 0;
    opacity: 0.75;
}

.app-main {
    padding: var(--sp-8) var(--sp-6) var(--sp-16);
    max-width: 1100px;
    width: 100%;
}

@media (max-width: 620px) {
    .app-main { padding: var(--sp-5) var(--sp-4) var(--sp-12); }
}

.app-intestazione {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-8);
}

.app-intestazione__titolo {
    font-size: var(--testo-2xl);
    margin-bottom: var(--sp-1);
}

.app-intestazione__testo {
    color: var(--grigio-600);
    font-size: var(--testo-sm);
}

.piano-riquadro {
    background: var(--blu-50);
    border: 1px solid var(--blu-200);
    border-radius: var(--raggio);
    padding: var(--sp-4);
    font-size: var(--testo-sm);
}

.piano-riquadro--premium {
    background: linear-gradient(135deg, #fff8e6, #fef2d6);
    border-color: #f0d090;
}


/* --- Card curriculum --- */

.cv-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-5);
}

.cv-card {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transizione), box-shadow var(--transizione);
}

.cv-card:hover {
    border-color: var(--blu-300);
    box-shadow: var(--ombra-md);
}

.cv-card__miniatura {
    aspect-ratio: 210 / 148;
    background: var(--grigio-100);
    border-bottom: 1px solid var(--bordo);
    overflow: hidden;
    position: relative;
}

.cv-card__miniatura iframe {
    width: 210mm;
    height: 297mm;
    border: 0;
    transform-origin: top left;
    transform: scale(var(--scala-anteprima, 0.33));
    pointer-events: none;
}

.cv-card__corpo {
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
}

.cv-card__titolo {
    font-size: var(--testo-base);
    font-weight: 700;
    word-break: break-word;
}

.cv-card__meta {
    font-size: var(--testo-xs);
    color: var(--testo-tenue);
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.cv-card__azioni {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--bordo);
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    background: var(--grigio-25);
}

.cv-card__azioni .btn {
    flex: 1;
}

/* Card "aggiungi" */

.cv-card--nuovo {
    border-style: dashed;
    border-width: 2px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-10) var(--sp-5);
    min-height: 260px;
    color: var(--grigio-500);
}

.cv-card--nuovo:hover {
    border-color: var(--blu-400);
    background: var(--blu-50);
    color: var(--blu-700);
    text-decoration: none;
}


/* --- Stato vuoto --- */

.vuoto {
    text-align: center;
    padding: var(--sp-16) var(--sp-6);
    background: var(--superficie);
    border: 1px dashed var(--bordo-forte);
    border-radius: var(--raggio-lg);
}

.vuoto__icona {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-5);
    color: var(--grigio-400);
}

.vuoto__titolo {
    font-size: var(--testo-xl);
    margin-bottom: var(--sp-2);
}

.vuoto__testo {
    color: var(--grigio-600);
    max-width: 46ch;
    margin: 0 auto var(--sp-6);
    line-height: 1.65;
}


/* --- Tabelle dell'area utente e admin --- */

.tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--testo-sm);
    background: var(--superficie);
}

.tabella th,
.tabella td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--bordo);
    vertical-align: middle;
}

.tabella thead th {
    background: var(--grigio-50);
    font-weight: 600;
    font-size: var(--testo-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grigio-600);
    white-space: nowrap;
}

.tabella tbody tr:hover {
    background: var(--grigio-25);
}

.tabella-contenitore {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-lg);
    overflow: hidden;
}


/* ================================================= Telefono ==================== */
/*
   Sul telefono il progetto non si limita a impilare: cambia le proporzioni. Il
   titolo scende a 46px con interlinea 0.95 — resta la voce più forte della pagina
   senza mangiarsi lo schermo — e l'anteprima del curriculum passa sotto il testo,
   perché lì serve a confermare la promessa, non ad aprirla.
*/
@media (max-width: 620px) {
    .hero {
        padding-block: var(--sp-10) var(--sp-8);
    }

    .hero__titolo {
        font-size: 40px;
        line-height: 1;
    }

    .hero__sottotitolo {
        font-size: var(--testo-base);
    }

    /* I due comandi occupano tutta la riga e si impilano: su un pollice solo,
       due bottoni affiancati diventano due bersagli stretti. */
    .hero__azioni {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__azioni .btn {
        width: 100%;
    }

    .sezione {
        padding-block: var(--sp-10);
    }

    .sezione__intestazione {
        margin-bottom: var(--sp-6);
        padding-bottom: var(--sp-4);
    }

    /* I passaggi perdono i filetti verticali e prendono quelli orizzontali:
       in colonna, un filetto a sinistra non separa più nulla. */
    .passo {
        border-left: 0;
        border-top: 1px solid var(--bordo);
        padding: var(--sp-4) 0 0;
    }

    .passo:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .passo__numero {
        font-size: 36px;
    }

    .cta-finale {
        padding: var(--sp-10) var(--sp-5);
    }
}