/* Pagine interne: stili che la home non ha bisogno di caricare. */

/* CHI SIAMO (14/10, Andrea): pagina ridisegnata con le foto dello studio; via il motivo fonoassorbente
   di sfondo e il riquadro del «gap». Il testo e' lo stesso di prima, diviso in blocchi. */
.chi section { padding-block: clamp(52px, 7vw, 96px); border-top: 1px solid var(--line); }
.chi .chi__apertura { padding-top: clamp(32px, 5vw, 72px); border-top: 0; }
.chi__due { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.chi__stretto { max-width: 760px; }
.chi h1 { margin: 8px 0 22px; font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.8rem); line-height: 1.04; letter-spacing: -.02em; }
.chi .lead { margin: 0 0 18px; font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); line-height: 1.65; color: var(--text); }
.chi__testo p:not(.kicker):not(.lead), .chi__stretto p:not(.kicker) { margin: 0 0 18px; font-size: 1rem; line-height: 1.8; color: var(--soft); }
.chi .kicker { margin: 0 0 10px; }
.chi__foto { margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 30px 80px -34px rgba(37, 99, 235, .55); background: #050b1d; }
.chi__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* il «gap»: una frase in bianco, senza riquadro */
.chi__perche { text-align: center; }
.chi__perche .chi__stretto { margin-inline: auto; }
.chi p.chi__frase { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.8; color: var(--text); }   /* 14/10: in bianco, pulita (Andrea) */
.chi p.chi__chiusa { margin: 6px 0 26px; font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); font-weight: 600; line-height: 1.45; color: var(--text); }
.chi__link { margin: 0; }
/* telefono e tablet (una colonna): foto piu' basse, inquadratura sulle postazioni (14/10, Andrea: «troppo grandi») */
@media (max-width: 859px) {
  .chi__foto { aspect-ratio: 4 / 3; max-width: 560px; }
  .chi__apertura .chi__foto img { object-position: 50% 50%; }
  .chi__studio .chi__foto img { object-position: 50% 40%; }
}
@media (min-width: 860px) {
  .chi__due { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .chi__due--inverso { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .chi__foto { aspect-ratio: 3 / 4; }
}

/* =============================================================================
   PAGINA DEL CORSO (bootcamp-live/, bootcamp-studio/)
   La pagina che risponde alle sei domande di chi sta decidendo: cosa imparo,
   chi insegna, come funziona, e' per me, quanto costa e cosa rischio, altri l'hanno fatto.
   Il colore d'accento cambia col percorso: --acc (Live oro, Studio smeraldo).
   ============================================================================= */
.corso { --acc: #22d3ee; --acc-rgb: 34, 211, 238; }
.corso--live   { --acc: #fbbf24; --acc-rgb: 251, 191, 36; }
.corso--studio { --acc: #34d399; --acc-rgb: 52, 211, 153; }

/* --- hero: sfondo della card del percorso, scuro, col titolo grande --- */
.corso__hero { position: relative; padding: 120px 0 72px; overflow: hidden; }
.corso__hero::before { content: ""; position: absolute; inset: 0; background: center / cover no-repeat; opacity: .35; }
/* la foto e' la stessa della card nella home (il percorso resta riconoscibile) */
.corso--live .corso__hero::before   { background-image: url(../images/mentor-bg.webp); }
.corso--studio .corso__hero::before { background-image: url(../images/bootcamp-bg.webp); }
.corso__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.92) 70%, var(--bg)); }
.corso__hero .wrap { position: relative; z-index: 1; }
.corso__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(var(--acc-rgb), .55); color: var(--acc); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.corso__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.corso__hero h1 { margin: 18px 0 10px; font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem); line-height: 1; letter-spacing: -.02em; }
.corso__hero h1 em { font-style: normal; color: var(--acc); }
.corso__hero .lead { max-width: 56ch; }
.corso__fatti { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; font-size: .92rem; color: var(--soft); }
.corso__fatti b { color: var(--text); font-weight: 600; }
.corso__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn--acc { background: var(--acc); color: #04121a; box-shadow: 0 14px 44px -14px rgba(var(--acc-rgb), .7); }
.btn--acc:hover { filter: brightness(1.08); color: #04121a; }

/* --- sezioni interne --- */
.corso__sez { padding: 56px 0; border-top: 1px solid var(--line); }
.corso__sez h2 { margin: 0 0 6px; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); letter-spacing: -.015em; }
.corso__sez .kicker, .corso__fine .kicker { color: var(--acc); }   /* 13/10: anche nel riquadro del prezzo */
.corso__sez > .wrap > .lead { margin-bottom: 26px; }
/* 13/10: senza frase d'introduzione il contenuto restava a 6px dal titolo */
.corso__sez h2 + :not(.lead) { margin-top: 22px; }

/* per chi e' / per chi non e' */
.corso__due { display: grid; grid-template-columns: 1fr; gap: 16px; }
.corso__due .card { padding: 22px 24px; }
.corso__due ul { margin: 10px 0 0; padding: 0; list-style: none; }
.corso__due li { position: relative; padding: 8px 0 8px 24px; border-top: 1px solid var(--line); color: var(--soft); line-height: 1.5; }
.corso__due li::before { content: ""; position: absolute; left: 2px; top: calc(8px + .72em); width: 12px; height: 1px; background: var(--acc); }
.corso__due .no li::before { background: #f87171; }
.corso__due .no .panel-label { color: #fca5a5; }

/* programma: i quattro moduli */
.corso__moduli { display: grid; grid-template-columns: 1fr; gap: 14px; }
.modulo { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); position: relative; overflow: hidden; }
.modulo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: .7; }
.modulo__num { font-size: .78rem; letter-spacing: .14em; color: var(--acc); font-weight: 600; }
.modulo h3 { margin: 6px 0 4px; font-size: 1.25rem; }
.modulo__sotto { margin: 0 0 12px; color: var(--muted); font-size: .95rem; }
.modulo ul { margin: 0; padding: 0; list-style: none; }
.modulo li { position: relative; padding: 7px 0 7px 22px; border-top: 1px solid var(--line); color: var(--soft); font-size: .95rem; }
.modulo li::before { content: ""; position: absolute; left: 0; top: calc(7px + .7em); width: 12px; height: 1px; background: var(--acc); }

/* come funziona: schede brevi */
.corso__griglia { display: grid; grid-template-columns: 1fr; gap: 14px; }
.corso__griglia .card { padding: 20px 22px; }
.corso__griglia .card b { display: block; color: var(--text); margin-bottom: 4px; }
.corso__griglia .card p { margin: 0; color: var(--soft); font-size: .95rem; line-height: 1.5; }

/* cosa ricevi */
.corso__ricevi { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.corso__ricevi li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--soft); line-height: 1.5; }
.corso__ricevi li::before { content: "✓"; color: var(--acc); font-weight: 700; }

/* mentor */
.corso__mentor { display: grid; grid-template-columns: 1fr; gap: 14px; }
.mentor { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 18px 20px; }
.mentor__ini { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--acc-rgb), .14); color: var(--acc); font-weight: 700; letter-spacing: .04em; border: 1px solid rgba(var(--acc-rgb), .4); }
.mentor b { display: block; color: var(--text); }
.mentor p { margin: 4px 0 0; color: var(--soft); font-size: .95rem; line-height: 1.5; }

/* domande frequenti */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 36px 16px 0; position: relative; font-weight: 600; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--acc); font-size: 1.4rem; font-weight: 300; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; color: var(--soft); line-height: 1.6; max-width: 70ch; }

/* voci */
.corso__voci { display: grid; grid-template-columns: 1fr; gap: 14px; }
/* 13/10: width/flex annullano la misura fissa delle recensioni della home (nastro), che qui stringeva o accavallava le carte */
.corso__voci .review { width: auto; flex: none; min-width: 0; margin: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.corso__voci .review__stars { color: var(--acc); letter-spacing: .1em; font-size: .9rem; }
.corso__voci blockquote { margin: 10px 0 12px; color: var(--text); line-height: 1.55; }
.corso__voci figcaption { color: var(--muted); font-size: .9rem; }
.corso__voci figcaption span:first-child { color: var(--soft); font-weight: 600; }

/* prezzo e iscrizione */
.corso__fine { padding: 64px 0 90px; border-top: 1px solid var(--line); text-align: center; }
.corso__prezzo { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight: 700; letter-spacing: -.02em; margin: 10px 0 4px; }
.corso__prezzo small { font-size: .95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.corso__fine .muted { max-width: 60ch; margin: 10px auto 0; text-wrap: balance; }
.corso__fine .corso__cta { justify-content: center; }

/* --- SEGNAPOSTO: cosa manca ancora, in evidenza. Da togliere a testi pronti. --- */
.da-scrivere { position: relative; border: 1px dashed rgba(251, 191, 36, .7) !important; background: rgba(251, 191, 36, .05) !important; }
.da-scrivere::before { content: "DA SCRIVERE"; position: absolute; top: -9px; left: 12px; padding: 2px 8px; border-radius: 999px; background: #fbbf24; color: #1a1206; font-size: .62rem; font-weight: 700; letter-spacing: .14em; z-index: 2; }
.da-decidere { position: relative; border: 1px dashed rgba(56, 189, 248, .7); background: rgba(56, 189, 248, .05); border-radius: var(--r); padding: 22px 18px 20px; display: inline-block; }
.da-decidere::before { content: "DA DECIDERE: MOSTRARE IL PREZZO?"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: #38bdf8; color: #061a24; font-size: .62rem; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }

@media (min-width: 760px) {
  .corso__due, .corso__griglia, .corso__mentor, .corso__voci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .corso__moduli { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 13/10: quattro recensioni, due per riga */
}

/* 13/10 (revisione su 25 dispositivi) */
/* telefono: i bottoni d'apertura a tutta larghezza e uguali tra loro, come nella home */
@media (max-width: 600px) {
  .corso__hero .corso__cta .btn { width: 100%; justify-content: center; }
}
/* telefono stretto: l'etichetta della data non lascia "2026" da solo */
@media (max-width: 390px) {
  .corso__badge { letter-spacing: .07em; }
}
/* telefono in orizzontale: titolo e bottoni nella prima schermata */
@media (max-height: 500px) and (orientation: landscape) {
  .corso__hero { padding: 84px 0 40px; }
  .corso__hero h1 { font-size: 2.4rem; }
}

/* --- 13/10: PAGINE LEGALI (privacy, termini, cookie, disclaimer) con lo stile del sito.
   Colonna di ~72 caratteri, testo a 16px, elenchi tutti uguali. Il testo e' quello di prima. --- */
.legale { max-width: 72ch; }
.legale h1 { margin: 6px 0 20px; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); letter-spacing: -.015em; line-height: 1.15; }
.legale h2 { margin: 32px 0 10px; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.legale p, .legale li { font-size: 1rem; line-height: 1.7; color: var(--soft); }
.legale ul { margin: 10px 0 0; padding-left: 18px; }
.legale li { margin: 6px 0; }
.legale hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }
.legale strong { color: var(--text); }
.legale a { color: var(--accent); overflow-wrap: anywhere; }
.legale a:hover { color: var(--accent2); }
.legale .block { margin-bottom: 14px; }
.legale .note { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.legale .badge { display: inline-block; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(15, 23, 42, .7); font-size: .8rem; color: var(--soft); }
/* 13/10: pagine dei corsi riscritte con Andrea. Chi insegna il modulo, accanto al numero. */
.modulo__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.modulo__chi { font-size: .82rem; color: var(--muted); }
.corso__link { margin: 0; }
/* punteggio Trustpilot sopra le recensioni */
.corso__punteggio { margin: 0 0 18px; color: var(--muted); font-size: .95rem; }
.corso__punteggio b { color: var(--text); }
.corso__punteggio a { color: var(--acc); }
/* la riga sotto "Prezzo in arrivo": centrata, attaccata al titolo */
.corso__fine .corso__nota-prezzo { margin-top: 0; }
/* Studio, "Studi al tuo ritmo": tre schede, tutte su una riga sul computer */
@media (min-width: 960px) { .corso__griglia--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* tablet (due colonne): la terza scheda prende tutta la riga, invece di restare sola a meta' */
@media (min-width: 760px) and (max-width: 959px) { .corso__griglia--tre > :last-child { grid-column: 1 / -1; } }
/* moduli 01 e 02: la riga che dice che la teoria viene anche messa in pratica (sobria, come il sottotitolo: Andrea 13/10) */
.modulo__pratica { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; line-height: 1.5; }
