/* ─────────────────────────────────────────────────────────────────────────
   mobile.css — livello mobile e tablet condiviso da tutte le pagine del funnel.
   Caricato per ultimo, quindi vince sulle regole inline delle singole pagine.

   Scritto il 17/08/2026 dopo un collaudo con emulazione reale dei dispositivi
   (iPhone SE 375, iPhone 14 390, Android 412, tablet 768, iPad orizzontale 1024).
   Problemi che risolve, in ordine di gravità:
     1. scorrimento orizzontale sulla landing (il libro dell'hero e le due
        card uscivano dallo schermo perché diventavano elementi di un flex);
     2. testo sotto i 15px su tutte le pagine, illeggibile da telefono;
     3. bersagli da toccare sotto i 44px (link, caselle, bottone "no grazie");
     4. griglie a due colonne e righe della tracklist troppo strette.
   ───────────────────────────────────────────────────────────────────────── */

/* ══ TABLET E SOTTO (fino a 1024px) ══════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Niente deve mai sfondare lo schermo in orizzontale. */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }

  /* Alcune sezioni riscrivono il padding del contenitore azzerandolo (.hero-in,
     .checkout, .stats-in e simili impostano "padding: N 0"). Su desktop non si
     nota perche' la colonna e' larga al massimo 1140px e resta aria ai lati; tra
     620 e 1024 il contenitore e' largo quanto lo schermo e il testo finisce
     attaccato al bordo. Qui il margine laterale viene ripristinato. */
  .wrap.hero-in, .wrap.checkout, .wrap.stats-in, .wrap.two-col,
  .wrap.final-in, .wrap.guarantee, .wrap.nav-in { padding-left: 24px; padding-right: 24px; }

  /* Bersagli da toccare: minimo 44px, come da linee guida Apple e Google. */
  .btn, .dl-a, .btn-share, .btn-pay, .price-cta, .final-cta, .btn-yes { min-height: 48px; }
  .faq-q { min-height: 52px; }
  .nav-links a { padding: 6px 2px; }
}

/* ══ TABLET IN VERTICALE (fino a 900px) ═════════════════════════════════ */
@media (max-width: 900px) {
  .ben-grid { grid-template-columns: 1fr; }
  /* Anche su tablet il libro e le due card stavano in fila e si stringevano.
     Colonna: libro sopra, card sotto, entrambi centrati. */
  .hero-visual { flex-direction: column; width: 100%; }
  .hero-book { width: min(260px, 60%); margin: 0 auto; }
  .float-card { position: static; margin: 12px auto 0; max-width: 90%; }
  /* Testo a sinistra anche qui: centrato si legge peggio su piu' righe. */
  .hero-in, .hero-copy, .center-head { text-align: left; }
  .hero-copy { align-items: flex-start; }
  .hero-lead, .sec-lead { margin-left: 0; margin-right: 0; }
  .hero-trust { justify-content: flex-start; }
  .checkout { grid-template-columns: 1fr; }
  /* Su tablet il riepilogo ordine va sopra il modulo: dice subito cosa si paga. */
  .checkout > div:last-child { order: -1; }
  .sticky { position: static; }
}

/* ══ TELEFONI (fino a 620px) ════════════════════════════════════════════ */
@media (max-width: 620px) {

  /* ── Tipografia: sotto i 16px sul telefono non si legge ──────────────── */
  body { font-size: 17px; line-height: 1.68; }
  .sec-lead, .hero-lead { font-size: 17.5px; line-height: 1.7; }
  .card p, .oi span, .faq-a, .ben span, .bump-desc,
  .track .t-name, .tr .tt small, .step-body span, .dl-h small,
  .legal p, .legal li, .legal td, .note-box, .lead { font-size: 16px; line-height: 1.65; }
  .kicker { font-size: 12px; letter-spacing: .14em; }
  .price-note, .price-micro, .pay-mini, .dl-note, .support,
  .footer-legal, .footer-copy, .btn-sub { font-size: 15px; line-height: 1.6; }
  /* Rete di sicurezza: nessun testo secondario scende sotto i 15px. */
  small, .kicker, .secure-tag, .pay-ic, .bump-list li, .order-item small,
  .footer-links, .updated, .cross-links, .trust-row .t, .hero-trust .t,
  .tr .tl, .track .t-dur, .lead, .email-note, .social-share p,
  .fallback-notice, .price-old, .bump-tag { font-size: 15px; }
  .kicker, .bump-tag { font-size: 12.5px; }
  /* Il consenso al recesso e' testo legale: deve essere comodo da leggere. */
  #consent-check + span { font-size: 15.5px; line-height: 1.6; }
  .nav .btn { font-size: 14px; }
  .topbar { font-size: 14.5px; line-height: 1.5; gap: 6px 12px; padding: 11px 16px; }
  .stat span, .guarantee span, .social-share p { font-size: 15px; }
  /* specificita' allineata a quella delle regole di pagina, altrimenti perde */
  .audio-card .ac-top span { font-size: 15px; }
  footer, footer p, footer .wrap p { font-size: 15px; }
  .kicker { font-size: 13.5px; }
  /* qualunque link dentro un paragrafo o un footer deve essere premibile */
  footer a, p a, .footer-links a, .back-line a { display: inline-block; padding: 10px 0; }
  .price-badge-top { font-size: 13px; padding: 8px 16px; }
  .btn-no { font-size: 16px; }
  /* Il banner cookie copre la parte bassa: su telefono i due bottoni vanno
     a tutta larghezza, altrimenti restano stretti accanto al testo. */
  /* Il banner copriva quasi mezzo schermo: testo piu' compatto, i due
     bottoni sulla stessa riga, e il link della privacy in linea col testo. */
  #cc-cookie-banner { padding: 11px 13px !important; font-size: 15px !important; line-height: 1.45 !important; }
  #cc-cookie-banner p { min-width: 100% !important; margin-bottom: 4px !important; }
  #cc-cookie-banner p a { padding: 13px 0 !important; }
  #cc-cookie-banner button { flex: 1 1 0; min-height: 44px; padding: 10px 8px !important; font-size: 14.5px !important; }
  #cc-cookie-banner > div { gap: 10px !important; }

  /* ── Barra di navigazione ────────────────────────────────────────────
     Il bottone lungo andava a capo e finiva sopra al logo. Su telefono
     sparisce: la stessa chiamata all'azione sta due dita piu' sotto,
     dentro l'hero, e in fondo alla pagina. */
  .nav-in { gap: 10px; }
  .brand img { height: 34px; }
  .nav .btn, .nav-cta { display: none; }
  .nav-in { justify-content: center; }

  /* ── Testo allineato a sinistra ──────────────────────────────────────
     La regola desktop centrava tutto sotto gli 860px: su colonna stretta
     il testo centrato costringe l'occhio a cercare l'inizio di ogni riga. */
  .hero-in, .hero-copy, .center-head, .sec-lead.center { text-align: left; }
  .hero-copy { align-items: flex-start; }
  .hero-lead, .sec-lead { margin-left: 0; margin-right: 0; }
  .hero-trust { justify-content: flex-start; }

  /* ── HERO della landing: qui stava lo scorrimento orizzontale ────────── */
  .hero-in { padding: 36px 0 44px; gap: 30px; }
  .hero-h1 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.06; }
  .hero-lead { max-width: 100%; }
  /* Il contenitore del libro era un flex: le card ci finivano dentro in riga
     e sfondavano. Diventa una colonna centrata con il libro sopra. */
  .hero-visual { flex-direction: column; width: 100%; }
  .hero-book { width: min(230px, 62%); margin: 0 auto; }
  .hero-glow { width: 210px; height: 210px; }
  .float-card { width: auto; max-width: 88%; margin: 12px auto 0; justify-content: center; }
  .hero-trust { justify-content: center; gap: 8px 12px; font-size: 13.5px; }
  .hero-trust .tsep { display: none; }
  /* Il testo del bottone andava a capo con la freccia appesa a destra.
     Meno imbottitura laterale e corpo leggermente ridotto: sta su una riga. */
  .hero-cta, .final-in .btn, .price-card .btn { width: 100%; }
  .hero-cta .btn, .price-cta, .final-cta { width: 100%; }
  /* Il bottone non deve mai essere piu' largo della colonna: il testo va a
     capo centrato e la freccia lo segue, invece di restare appesa a destra. */
  .btn { padding: 16px 14px; font-size: 15.5px; line-height: 1.3; gap: 7px; text-align: center; flex-wrap: wrap; justify-content: center; max-width: 100%; }
  /* La freccia e' decorativa: sul telefono ruba spazio al testo del bottone. */
  .cta-arrow { display: none; }
  .btn span { text-align: center; }

  /* ── Sezioni e griglie ──────────────────────────────────────────────── */
  .wrap { padding: 0 18px; }
  .wrap.hero-in, .wrap.checkout, .wrap.stats-in, .wrap.two-col,
  .wrap.final-in, .wrap.guarantee, .wrap.nav-in { padding-left: 18px; padding-right: 18px; }
  .sec { padding: 44px 0; }
  .two-col, .offer-layout, .cards-3, .guarantee { grid-template-columns: 1fr; display: block; }
  .cards-3 .card { margin-bottom: 14px; }
  .offer-book { max-width: 210px; margin: 0 auto 22px; }
  .guarantee { text-align: left; padding: 24px 20px; }
  .g-seal { margin-bottom: 14px; }
  .stats-in { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 10px; text-align: center; }

  /* ── Blocco prezzo ──────────────────────────────────────────────────── */
  .price-card { padding: 28px 20px; }
  .price-now { font-size: 54px; }
  .price-big { font-size: 56px; }
  .price-box { padding: 30px 20px; }
  .inc, .includes li { font-size: 16px; align-items: flex-start; }

  /* ── FAQ ────────────────────────────────────────────────────────────── */
  .faq-q { font-size: 16.5px; padding: 18px; text-align: left; gap: 12px; }
  .faq-a { padding: 0 18px 18px; }

  /* ── Checkout ───────────────────────────────────────────────────────── */
  .card { padding: 22px 18px; }
  .progress { gap: 6px; padding: 18px 0 4px; }
  .step { font-size: 12px; }
  .step-sep { width: 20px; }
  .bump { padding: 16px 14px; }
  /* La casella era 20px: troppo piccola da centrare col dito. */
  .bump input, #consent-check { width: 26px; height: 26px; }
  .bump label, #consent-check + span { line-height: 1.55; }
  .order-total .val { font-size: 26px; }
  .trust-row { gap: 10px 16px; font-size: 13px; }

  /* ── Upsell ─────────────────────────────────────────────────────────── */
  .ul-hero h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .audio-card { padding: 20px 16px; border-radius: 20px; }
  .track .t-name { font-size: 15.5px; }
  /* Le righe della tracklist andavano a capo male: numero e durata sopra,
     testo sotto, invece di tre colonne strizzate. */
  .tr { flex-wrap: wrap; padding: 15px 16px; gap: 6px 12px; }
  .tr .tt { flex: 1 1 100%; order: 2; }
  .tr .tn { order: 1; }
  .tr .tl { order: 1; margin-left: auto; }
  .btn-yes { width: 100%; font-size: 17px; }
  /* Il "no grazie" era alto 18px: impossibile da centrare, e va lasciato
     comodo da premere anche se non è la scelta che vogliamo. */
  .btn-no { min-height: 48px; padding: 12px; width: 100%; }

  /* ── Pagina di conferma ─────────────────────────────────────────────── */
  .confirm { padding: 36px 0 16px; }
  .confirm h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .dl-card { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 18px; }
  .dl-h { min-width: 0; }
  .dl-a { width: 100%; min-height: 48px; }
  .um { padding: 24px 20px; }
  .next { padding: 24px 18px; }
  .share-btns { flex-direction: column; }
  .btn-share { width: 100%; justify-content: center; min-height: 48px; }

  /* ── Pagine legali ──────────────────────────────────────────────────── */
  .legal h2 { font-size: 21px; margin-top: 26px; }
  /* La tabella a due colonne su 375px diventa illeggibile: si impila, con
     l'intestazione ripetuta sopra ogni cella tramite data-label. */
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
  .legal thead { display: none; }
  .legal tr { border: 1px solid var(--line); border-radius: 12px; padding: 4px 0; margin-bottom: 12px; background: var(--white); }
  .legal td { border: none; padding: 10px 14px; }
  .legal td::before { content: attr(data-label); display: block; font-family: var(--font-d); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--coral); margin-bottom: 4px; }
  .back, .cross-links a { display: inline-block; padding: 12px 0; min-height: 44px; }
  .footer-links a, footer a, .support a, .legal a, .help a { display: inline-block; padding: 9px 0; }
  .brand img { padding: 4px 0; }
  .bump input, #consent-check { width: 28px; height: 28px; }
}


/* ══ TABLET, ANCHE IN ORIZZONTALE (da 621px a 1024px) ═══════════════════
   Un iPad si tocca col dito come un telefono: stessi minimi di leggibilita'
   e di bersaglio, con misure un filo piu' contenute perche' la colonna e'
   piu' larga. */
@media (min-width: 621px) and (max-width: 1024px) {
  body { font-size: 17px; line-height: 1.7; }
  .sec-lead, .hero-lead { font-size: 18px; }
  small, .kicker, .bump-desc, .dl-h small, .order-item small, .step-body span,
  .track .t-name, .tr .tt small, .legal td, .legal p, .legal li, .note-box,
  .footer-copy, .footer-links, .footer-legal, .price-note, .support, .dl-note,
  .trust-row .t, .hero-trust .t, .social-share p, .topbar, .secure-tag,
  .audio-card .ac-top span, .ben span, .oi span, .faq-a, .card p,
  .stat span, .guarantee span, .cross-links, .email-note, .lead,
  footer, footer p, footer .wrap p, .price-badge-top, .btn-no { font-size: 15.5px; }
  .kicker { font-size: 13.5px; }
  /* Bersagli: stesso minimo del telefono. */
  .btn, .dl-a, .btn-share, .btn-pay, .price-cta, .final-cta, .btn-yes { min-height: 48px; }
  .btn-no { min-height: 46px; padding: 12px; }
  .back, .cross-links a, .footer-links a, footer a, .support a, p a,
  .legal a, .help a, .back-line a { display: inline-block; padding: 9px 0; }
  .bump input, #consent-check { width: 26px; height: 26px; }
  #cc-cookie-banner p a { padding: 12px 0 !important; }
}


/* ══ RESPIRO: ritmo verticale su telefono e tablet ══════════════════════
   Feedback di Marco: "e' tutto appiccicato". Sul telefono la colonna e'
   stretta, quindi gli spazi che sul desktop bastano qui spariscono e i
   blocchi sembrano incollati. Qui si applica una scala coerente invece di
   ritoccare i singoli margini a occhio:
     sezione 56px sopra e sotto · titolo 16px dal testo · paragrafo 18px
     · elementi di lista 16px · schede 18px tra loro e 24px dentro.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sec { padding: 56px 0; }
  .center-head { margin-bottom: 34px; }
  .h2, .h3 { margin-bottom: 16px; }
  .sec-lead { margin-bottom: 18px; }
  .sec-lead:last-child { margin-bottom: 0; }

  /* Hero: aria tra titolo, testo, bottone e riga di garanzie. */
  .hero-h1 { margin: 22px 0 24px; }
  .hero-lead { margin-bottom: 18px; }
  .hero-cta { margin-top: 28px; }
  .hero-trust { margin-top: 24px; row-gap: 12px; }
  .hero-visual { margin-top: 44px; }
  .float-card { margin-top: 16px; padding: 14px 18px; }

  /* Fascia dei numeri: era attaccata al bordo delle sezioni vicine. */
  .stats-in { padding: 34px 0; gap: 26px 14px; }

  /* Elenchi e schede. */
  .check-list { margin-top: 22px; gap: 16px; }
  .check-list li { line-height: 1.6; }
  .cards-3 { gap: 18px; }
  .cards-3 .card { margin-bottom: 18px; padding: 24px 22px; }
  .card h3 { margin-bottom: 10px; }
  .offer-list { gap: 14px; }
  .oi { padding: 20px 18px; }
  .oi div b { margin-bottom: 4px; display: block; }
  .faq-list { gap: 14px; }
  .note-card { padding: 24px 20px; margin-top: 26px; }

  /* Blocco prezzo: le voci incluse erano una sull'altra. */
  .price-card { padding: 32px 22px; }
  .price-line { margin-bottom: 8px; }
  .price-includes { margin: 22px auto 28px; }
  .inc { padding: 12px 0; line-height: 1.55; }
  .price-cta { margin-top: 8px; }
  .price-micro { margin-top: 16px; }

  /* Garanzia e chiusura. */
  .guarantee { padding: 32px 22px; margin: 0 auto; }
  .guarantee .sec-lead { margin-bottom: 16px; }
  .final { padding: 56px 0; }
  .final-h2 { margin-bottom: 16px; }
  .final-p { margin-bottom: 26px; }
  .final-micro { margin-top: 18px; }

  /* Checkout. */
  .checkout { gap: 20px; padding: 22px 0 60px; }
  .card { margin-bottom: 18px; }
  .bump { padding: 20px 16px; }
  .bump-title { margin-bottom: 10px; line-height: 1.35; }
  .bump-desc { margin-bottom: 4px; }
  .bump-list { margin-top: 16px; gap: 10px; }
  .bump-price-row { margin-top: 18px; }
  .btn-pay { margin-top: 24px; }
  .trust-row { margin-top: 22px; row-gap: 12px; }
  .order-item { padding: 16px 0; }
  .guarantee-box, .mini-list { margin-top: 20px; }
  .mini-list li { line-height: 1.5; }

  /* Upsell. */
  .ul-hero { padding: 30px 0 10px; }
  .ul-hero h1 { margin-bottom: 16px; }
  .audio-card { margin-top: 30px; padding: 24px 18px; }
  .track { padding: 14px 0; }
  .ben-grid { gap: 16px; }
  .ben { padding: 22px 18px; }
  .ben b { margin-bottom: 6px; }
  .tr { padding: 18px 16px; }
  .price-box { padding: 34px 22px; }
  .includes { gap: 14px; margin-bottom: 28px; }
  .guarantee-mini { margin-top: 22px; line-height: 1.5; }

  /* Pagina di conferma. */
  .dl-card { padding: 22px 18px; margin-bottom: 18px; }
  .dl-h { gap: 14px; }
  .next { padding: 26px 20px; margin-top: 26px; }
  .step-list { gap: 20px; }
  .step-body b { margin-bottom: 4px; }
  .um { padding: 26px 22px; margin-top: 26px; }
  .um p { margin: 10px 0 20px; }
  .social-share { margin-top: 30px; }
  .share-btns { gap: 12px; }
  .support { margin-top: 28px; line-height: 1.6; }

  /* Pagine legali. */
  .legal { padding: 28px 22px; }
  .legal h2 { margin-top: 32px; margin-bottom: 12px; }
  .legal p, .legal li { margin-bottom: 14px; }
  .legal ul { margin-bottom: 18px; }
  .note-box { padding: 18px; margin: 18px 0; }
  .cross-links { margin-top: 30px; padding-top: 24px; }

  footer { padding: 44px 0; }
  .footer-links { margin-bottom: 14px; line-height: 2; }
}

/* Telefono: sezioni un filo piu' compatte, ma mai attaccate. */
@media (max-width: 620px) {
  .sec { padding: 50px 0; }
  .hero-in { padding: 32px 0 48px; }
  .center-head { margin-bottom: 28px; }
}

/* ══ TELEFONI PICCOLI (iPhone SE e simili, fino a 380px) ════════════════ */
@media (max-width: 380px) {
  .wrap { padding: 0 15px; }
  .hero-h1 { font-size: 29px; }
  .nav .btn { padding: 10px 12px; font-size: 12.5px; }
  .price-now, .price-big { font-size: 46px; }
  .stats-in { grid-template-columns: 1fr; gap: 14px; }
  /* Sotto i 380px il testo del bottone non ci sta su una riga: si lascia
     andare a capo invece di farlo sbordare fuori dallo schermo. */
  .btn { font-size: 14.5px; padding: 15px 10px; }
}

/* ══ INTERLINEA DEI TITOLI ══════════════════════════════════════════════
   Correzione chiesta da Marco. I titoli non avevano un'interlinea propria,
   quindi ereditavano quella del corpo del testo (1.68 sul telefono, 1.72
   sul desktop) e le righe risultavano troppo distanti. Vale su tutti i
   dispositivi, non solo su mobile: 1.2.
   L'unica eccezione e' il titolo dell'hero, gia' piu' stretto (1.02-1.06):
   portarlo a 1.2 lo allargherebbe, cioe' il contrario della correzione.
   ═══════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4,
.h2, .h3, .final-h2, .card-title, .bump-title,
.card h3, .oi b, .ben b, .tr .tt b, .step-body b, .dl-h b,
.legal h2, .legal h3, .um b, .audio-card .ac-top b, .price-line, .confirm h1,
.ul-hero h1, .next h3, .social-share h3, .center-head h2 { line-height: 1.2; }
.hero-h1 { line-height: 1.06; }