/* Curriculum Gratis AI: un quaderno di scuola (Chiara, 14/11/2026: «tipo quaderno della scuola, una roba da giovani»).
   Foglio a righe col margine rosso, titoli a penna (Caveat), testo tondo e leggibile (Nunito), l'evidenziatore giallo. */
:root {
  --carta: #fbf8ef;
  --riga: #cfdcef;
  --margine: #e8908a;
  --penna: #1d3577;          /* blu penna: contrasto 9:1 sulla carta */
  --inchiostro: #24263a;
  --tenue: #565a72;          /* testo secondario: contrasto 6:1 */
  --evidenziatore: #ffe95c;
  --rosso: #c4372f;
  --verde: #1f7a4a;
  --bianco: #ffffff;
  --interlinea: 32px;
  --penna-font: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --testo-font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--inchiostro); font-family: var(--testo-font); font-size: 17px; line-height: 1.55;
  background-color: var(--carta);
  /* le righe del quaderno, e il margine rosso a sinistra */
  background-image:
    linear-gradient(90deg, transparent 0 calc(var(--marg) - 2px), var(--margine) calc(var(--marg) - 2px) var(--marg), transparent var(--marg)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--interlinea) - 1px), var(--riga) calc(var(--interlinea) - 1px) var(--interlinea));
  --marg: 28px;
}
@media (min-width: 720px) { body { --marg: 72px; } }
a { color: var(--penna); }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 16px; top: 16px; background: var(--bianco); padding: 8px 12px; z-index: 10; }
:focus-visible { outline: 3px solid var(--penna); outline-offset: 3px; border-radius: 6px; }

.foglio { max-width: 680px; margin: 0 auto; padding: 40px 20px 64px calc(var(--marg) + 12px); outline: none; }
@media (min-width: 720px) { .foglio { padding: 64px 32px 96px 40px; } }
.carico { color: var(--tenue); }

/* ---------------------------------------------------------------- i titoli a penna */
.penna { font-family: var(--penna-font); font-weight: 700; color: var(--penna); text-align: center; line-height: 1.05; margin: 0; letter-spacing: 0.2px; }
h1.penna { font-size: clamp(2.6rem, 9vw, 4.4rem); }
h2.penna { font-size: clamp(2.1rem, 7vw, 3.2rem); outline: none; }
h3.blocco-dati { font-size: 30px; margin-top: 34px; }
.box-profilo .mandiamo { font-size: 14px; color: var(--tenue); margin: -8px 0 0; }
.sotto { text-align: center; font-size: 19px; margin: 14px 0 0; }
.aiuto { text-align: center; color: var(--tenue); margin: 10px auto 0; max-width: 520px; }

/* la nota cerchiata a mano */
.nota { font-family: var(--penna-font); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--rosso); text-align: center;
  max-width: 500px; margin: 26px auto 0; padding: 22px 44px; position: relative; transform: rotate(-1.5deg); }
@media (max-width: 619px) { .nota { font-size: 21px; padding: 14px 22px; } }
.nota::before { content: ""; position: absolute; inset: 0; border: 2.5px solid var(--rosso); border-radius: 48% 52% 50% 46% / 58% 46% 54% 42%; transform: rotate(1deg); }

/* la freccia disegnata */
.freccia { display: block; width: 46px; height: 74px; margin: 18px auto 6px; color: var(--penna); }
@media (prefers-reduced-motion: no-preference) {
  .freccia { animation: giu 1.8s ease-in-out infinite; }
  @keyframes giu { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
}

/* ---------------------------------------------------------------- i bottoni */
.scelte { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 620px) { .scelte { grid-template-columns: 1fr 1fr; } }
.scelta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 18px;
  background: var(--bianco); border: 2px solid var(--inchiostro); border-radius: 14px 18px 12px 16px; box-shadow: 4px 5px 0 var(--inchiostro);
  font: inherit; color: var(--inchiostro); cursor: pointer; transition: transform 150ms ease-out, box-shadow 150ms ease-out; touch-action: manipulation; }
.scelta:hover { transform: translate(-1px, -2px); box-shadow: 6px 7px 0 var(--inchiostro); }
.scelta:active { transform: translate(2px, 3px); box-shadow: 1px 2px 0 var(--inchiostro); }
.scelta .piccolo { font-size: 16px; color: var(--tenue); }
.scelta .grande { font-family: var(--penna-font); font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--penna); }
.evidenziato { background: linear-gradient(180deg, transparent 52%, var(--evidenziatore) 52%, var(--evidenziatore) 90%, transparent 90%); padding: 0 6px; }

.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: 999px;
  border: 2px solid var(--penna); background: var(--penna); color: var(--bianco); font: 700 17px/1.2 var(--testo-font); cursor: pointer;
  transition: transform 150ms ease-out, opacity 150ms; touch-action: manipulation; text-decoration: none; }
.bottone:hover { transform: translateY(-1px); }
.bottone:disabled { opacity: 0.55; cursor: wait; transform: none; }
.bottone.chiaro { background: var(--bianco); color: var(--penna); }
.bottone.lieve { background: transparent; border-color: transparent; color: var(--tenue); padding: 10px 12px; }
.bottone.largo { width: 100%; min-height: 58px; font-size: 19px; }
.riga-bottoni { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 32px; }
.centro { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

/* i tre passi, come appunti numerati a margine */
.appunti { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 14px; }
@media (min-width: 620px) { .appunti { grid-template-columns: repeat(3, 1fr); } }
.appunti li { display: flex; gap: 10px; align-items: flex-start; }
.appunti .num { flex: none; font-family: var(--penna-font); font-weight: 700; font-size: 30px; line-height: 1; color: var(--rosso); width: 30px; height: 36px;
  border: 2px solid var(--rosso); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.appunti b { display: block; }
.piccola { text-align: center; color: var(--tenue); font-size: 15px; margin-top: 30px; }

/* ---------------------------------------------------------------- l'avanzamento */
.avanza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; font-size: 15px; color: var(--tenue); }
.puntini { display: flex; gap: 6px; flex-wrap: wrap; }
.puntini span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--penna); }
.puntini span.fatto { background: var(--penna); }
.puntini span.ora { background: var(--evidenziatore); }

/* ---------------------------------------------------------------- i campi: si scrive sulle righe */
.campi { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 620px) { .campi.due { grid-template-columns: 1fr 1fr; } }
.campo label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.campo input, .campo textarea { width: 100%; font: 18px/1.6 var(--testo-font); color: var(--inchiostro); background: rgba(255, 255, 255, 0.72);
  border: 0; border-bottom: 2px solid var(--penna); border-radius: 8px 8px 0 0; padding: 10px 12px; min-height: 48px; }
.campo textarea { resize: vertical; min-height: 104px; }
.campo input:focus, .campo textarea:focus { outline: none; background: var(--bianco); box-shadow: 0 0 0 3px rgba(29, 53, 119, 0.25); }
.file { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border: 2px dashed var(--penna); border-radius: 14px;
  background: rgba(255, 255, 255, 0.72); cursor: pointer; font-weight: 700; color: var(--penna); padding: 12px; text-align: center; }
.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.per-ora { color: var(--tenue); font-size: 15px; text-align: center; margin: 8px 0 0; }
.errore { color: var(--rosso); font-weight: 700; text-align: center; margin: 14px 0 0; }

/* ---------------------------------------------------------------- la proposta dell'AI: un post-it */
.ai { margin-top: 6px; }
.ai .mandiamo { font-size: 14px; color: var(--tenue); margin: 6px 0 0; }
.postit { background: #fff4a8; border-radius: 4px 4px 16px 4px; padding: 16px; box-shadow: 3px 4px 0 rgba(36, 38, 58, 0.18); transform: rotate(-0.6deg); }
.postit .titolo-postit { font-family: var(--penna-font); font-weight: 700; font-size: 25px; color: var(--penna); margin: 0 0 8px; }
.postit textarea { width: 100%; min-height: 110px; border: 0; background: rgba(255, 255, 255, 0.6); border-radius: 6px; padding: 10px; font: 17px/1.55 var(--testo-font); color: var(--inchiostro); resize: vertical; }
.postit .manca { font-size: 15px; margin: 8px 0 0; }

/* ---------------------------------------------------------------- da togliere: le spunte */
.spunte { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.spunte label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 18px; }
.spunte input, .consenso input { width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--penna); }

/* ---------------------------------------------------------------- l'anteprima: il foglio pulito */
.anteprima { background: var(--bianco); border: 1px solid #d9d4c4; border-radius: 6px; padding: 26px 22px; margin-top: 26px; box-shadow: 0 10px 30px rgba(36, 38, 58, 0.08); }
.anteprima .nome { font-size: 26px; font-weight: 700; margin: 0; }
.anteprima .contatti { color: var(--tenue); font-size: 15px; margin: 2px 0 0; }
.anteprima .cerca { color: var(--penna); font-weight: 700; margin: 8px 0 0; }
.anteprima section { border-top: 1px solid #e6e1d2; margin-top: 16px; padding-top: 12px; }
.anteprima .testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.anteprima h3 { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--penna); margin: 0; }
.anteprima ul { margin: 6px 0 0; padding-left: 18px; }
.anteprima p { margin: 6px 0 0; }
.cambia { min-height: 44px; border: 0; background: none; color: var(--penna); font: 700 15px var(--testo-font); text-decoration: underline; cursor: pointer; padding: 0 6px; }
.box-profilo { margin-top: 22px; }

.consenso { margin-top: 26px; display: flex; gap: 12px; align-items: flex-start; font-size: 16px; cursor: pointer; }
.informativa { font-size: 14px; color: var(--tenue); margin: 12px 0 0; text-align: center; }
.gratis { text-align: center; font-family: var(--penna-font); font-weight: 700; font-size: 22px; color: var(--verde); margin: 10px 0 0; }

/* ---------------------------------------------------------------- la fine */
.consiglio { font-family: var(--penna-font); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--penna); border-left: 3px solid var(--rosso);
  padding: 6px 0 6px 14px; margin: 30px auto 0; max-width: 520px; }

.piede { text-align: center; font-size: 14px; color: var(--tenue); padding: 0 20px 28px calc(var(--marg) + 12px); }
.piede .marchio { font-family: var(--penna-font); font-weight: 700; font-size: 20px; color: var(--penna); }
@media (min-width: 720px) { .piede { padding-left: 20px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }