/* ─────────────────────────────────────────────────────────────
   Mi cuaderno de práctica — foglio di stile unico.
   Mondo: il quaderno di chi studia da adulto. Carta avorio a righe,
   inchiostro blu notte, rosso timbro, giallo evidenziatore, verde matita.
   Pubblico 50+ sul telefono: testo grande, target ≥ 48px, contrasto AA.
   ───────────────────────────────────────────────────────────── */

@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/atkinson-700.woff2") format("woff2"); }

:root {
  /* carta e inchiostri */
  --carta: #f8f4ea;          /* foglio avorio (fondo pagina) */
  --riga: #d9e3ee;           /* righe azzurre del quaderno */
  --margine: #e6a9a3;        /* linea rossa del margine */
  --foglio: #ffffff;         /* fogli di lavoro sopra la carta */
  --tinta: #1d2b45;          /* inchiostro blu notte: testo e azioni */
  --tinta-2: #2c3f63;        /* hover dell'inchiostro */
  --lapiz: #4b5873;          /* testo secondario (7:1 sul bianco) */
  --borde: #d7dce5;          /* filetti */
  --sello: #b0352b;          /* rosso timbro: sello e "da ripassare" */
  --sello-fondo: #fbecea;
  --resaltador: #f7e05c;     /* giallo evidenziatore: attuale / scelto */
  --resaltador-suave: #fdf3b8;
  --lapiz-verde: #2b6e44;    /* "giusto" */
  --verde-fondo: #e7f3ea;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(29, 43, 69, .06), 0 10px 28px rgba(29, 43, 69, .08);
  --ancho-lectura: 40rem;
  --barra-acciones: 0px;
}

* { box-sizing: border-box; }
html { font-size: 19px; -webkit-text-size-adjust: 100%; scrollbar-color: #b9c3d3 var(--carta); }
body {
  margin: 0; color: var(--tinta); line-height: 1.5;
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* il foglio a righe è il mondo: righe orizzontali + margine rosso */
  background-color: var(--carta);
  background-image:
    linear-gradient(90deg, transparent 0, transparent 22px, var(--margine) 22px, var(--margine) 24px, transparent 24px),
    repeating-linear-gradient(180deg, transparent 0, transparent 37px, var(--riga) 37px, var(--riga) 38px);
  background-attachment: local;
  min-height: 100vh;
}
::selection { background: var(--resaltador); color: var(--tinta); }
a { color: var(--tinta); text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:hover { color: var(--tinta-2); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 7px var(--resaltador); border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── struttura ───────────────────────────────────────────── */
.pagina { max-width: 1120px; margin: 0 auto; padding: 20px 18px 40px 40px; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.volver { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 12px 0 4px;
  font-weight: 700; text-decoration: none; border-radius: 10px; }
.volver:hover { background: rgba(29, 43, 69, .06); }
h1 { font-size: 1.9rem; line-height: 1.2; letter-spacing: -.015em; margin: .2rem 0 .9rem; text-wrap: balance; }
h2 { font-size: 1.32rem; line-height: 1.25; margin: 1.6rem 0 .6rem; text-wrap: balance; }
h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
p { margin: .5rem 0; }
.lapiz { color: var(--lapiz); }
.resaltado { background: linear-gradient(transparent 52%, var(--resaltador) 52%, var(--resaltador) 92%, transparent 92%); padding: 0 .12em; }

/* foglio di lavoro: l'unico contenitore elevato */
.hoja { background: var(--foglio); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; }
.hoja + .hoja { margin-top: 16px; }

/* ── icone ───────────────────────────────────────────────── */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* ── bottoni ─────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 12px 18px; margin: 10px 0;
  font: inherit; font-weight: 700; color: var(--tinta); text-decoration: none; text-align: center;
  background: var(--foglio); border: 2px solid var(--tinta); border-radius: 12px; cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:hover { background: #f1f4f9; }
.btn:active { transform: translateY(1px); }
.btn.tinta { background: var(--tinta); color: #fff; }
.btn.tinta:hover { background: var(--tinta-2); }
.btn.grande { min-height: 64px; font-size: 1.12rem; }
.btn.suave { border-color: var(--borde); }
.btn[disabled] { cursor: default; opacity: .55; transform: none; }
.btn.usado { display: none; } /* azione già fatta: sparisce invece di sembrare ancora cliccabile */

/* pulsante audio: il gesto principale di ogni domanda */
.audio { display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 22px 10px 12px;
  font: inherit; font-weight: 700; font-size: 1.08rem; color: #fff; background: var(--tinta);
  border: 0; border-radius: 999px; cursor: pointer; }
.audio .disco { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.audio:hover { background: var(--tinta-2); }
.audio.sonando .disco { animation: latido 1s ease-in-out infinite; }
@keyframes latido { 50% { background: rgba(255, 255, 255, .34); } }
.sin-audio { color: var(--lapiz); font-style: italic; }

/* ── opzioni di risposta (righe del quaderno) ────────────── */
.opciones { display: grid; gap: 10px; margin: 16px 0 4px; }
.opcion {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 14px;
  font: inherit; color: var(--tinta); text-align: left; background: var(--foglio);
  border: 2px solid var(--borde); border-radius: 12px; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.opcion:hover:not([disabled]) { border-color: var(--tinta); }
.opcion .letra { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; border: 2px solid currentColor; font-size: .9rem; }
.opcion[disabled] { cursor: default; }
.opcion.ok { border-color: var(--lapiz-verde); background: var(--verde-fondo); }
.opcion.ok .letra { background: var(--lapiz-verde); border-color: var(--lapiz-verde); color: #fff; }
.opcion.mal { border-color: var(--sello); background: var(--sello-fondo); }
.opcion.mal .letra { background: var(--sello); border-color: var(--sello); color: #fff; }
.opcion.apagada { opacity: .6; }

/* ── esito di una risposta ───────────────────────────────── */
.veredicto { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; margin: 14px 0 6px; }
.veredicto.ok { color: var(--lapiz-verde); }
.veredicto.mal { color: var(--sello); }
.veredicto .ico { width: 1.4em; height: 1.4em; }

/* nota: evidenziatore, non bordo colorato */
.nota { display: flex; gap: 10px; align-items: flex-start; background: var(--resaltador-suave);
  border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.nota .ico { margin-top: .15em; color: #7a6200; }

/* ── testi della domanda ─────────────────────────────────── */
.en { font-size: 1.2rem; font-weight: 700; margin: .5rem 0; line-height: 1.35; }
.es { color: var(--lapiz); margin: .35rem 0; }
/* testo coperto: si vede che c'è, ma si legge solo se lo si chiede */
.velado { position: relative; display: block; width: 100%; min-height: 64px; margin: 12px 0 4px; padding: 12px 14px;
  font: inherit; text-align: left; color: var(--tinta); background: #f2f5fa; border: 2px dashed #b9c3d3; border-radius: 12px;
  cursor: pointer; overflow: hidden; }
.velado:hover { border-color: var(--tinta); }
.velado-borroso { display: block; font-size: 1.2rem; font-weight: 700; filter: blur(7px); opacity: .45; user-select: none; }
.velado-aviso { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }
.velado-texto { margin: 12px 0 4px; }
.respuesta { border-top: 2px dashed var(--borde); margin-top: 14px; padding-top: 12px; }
.etiqueta { font-size: .88rem; font-weight: 700; color: var(--lapiz); margin: 12px 0 8px; }
.estrella { display: flex; align-items: center; gap: 4px; margin-top: 0; }
.estrella .ico { color: #a07800; }
.situacion { background: #f2f5fa; border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
.lectura { font-size: 1.45rem; padding: 6px 0 10px; }
.aviso { color: var(--lapiz); font-size: .9rem; }
.campo.dictado { margin: 14px 0 4px; text-transform: none; letter-spacing: 0; font-size: 1.15rem; }
.palabra-ok { color: var(--lapiz-verde); }
.palabra-mal { color: var(--sello); text-decoration: underline wavy; text-underline-offset: .25em; }
#zona > .audio { margin: 4px 0 8px; }
#zona > :first-child { margin-top: 0; }

/* ── livelli (controllo segmentato) ──────────────────────── */
.niveles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #e9edf3; padding: 5px; border-radius: 14px; }
.niveles button { min-height: 52px; padding: 6px 4px; font: inherit; font-size: .86rem; font-weight: 700; line-height: 1.15;
  color: var(--tinta); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.niveles button span { display: block; font-size: 1.05rem; }
.niveles button[aria-pressed="true"] { background: var(--foglio); box-shadow: 0 1px 3px rgba(29, 43, 69, .18); }
.nivel-explica { font-size: .88rem; color: var(--lapiz); margin: 6px 2px 10px; }

/* ── fermate della sessione (avanzamento) ────────────────── */
.ruta { display: flex; align-items: center; gap: 0; margin: 8px 0 14px; padding: 0; list-style: none; }
.ruta li { flex: 1; display: flex; align-items: center; }
.ruta li::before { content: ""; flex: 1; height: 3px; background: var(--borde); }
.ruta li:first-child { flex: none; }
.ruta li:first-child::before { display: none; }
.ruta .parada { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--borde); background: var(--foglio); flex: none; }
.ruta li.ok .parada { background: var(--lapiz-verde); border-color: var(--lapiz-verde); }
.ruta li.mal .parada { background: var(--foglio); border-color: var(--sello); }
.ruta li.ok::before, .ruta li.mal::before, .ruta li.actual::before { background: var(--tinta); }
.ruta li.actual .parada { width: 26px; height: 26px; border-color: var(--tinta); background: var(--resaltador); }
.ruta.larga .parada { width: 10px; height: 10px; border-width: 2px; }
.ruta.larga li.actual .parada { width: 18px; height: 18px; border-width: 3px; }
.ruta li { min-width: 0; }
.ruta-texto { display: flex; flex-wrap: wrap; gap: 0 12px; justify-content: space-between; font-size: .9rem; color: var(--lapiz); font-weight: 700; }

/* ── il sello (timbro): la firma del mondo ───────────────── */
.sello { flex: none; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%;
  color: var(--sello); border: 3px solid currentColor; box-shadow: inset 0 0 0 3px var(--foglio), inset 0 0 0 5px currentColor;
  font-weight: 700; font-size: .72rem; line-height: 1.05; text-align: center; text-transform: uppercase; letter-spacing: .02em;
  transform: rotate(-11deg); }
.sello.n1 { color: #6a7896; }
.sello.vacio { color: #8a95a8; border-style: dashed; box-shadow: none; font-size: .8rem; transform: none; }
.sello.grande { width: 150px; height: 150px; font-size: 1rem; border-width: 4px; letter-spacing: 0; }
.sello.estampar { animation: estampar .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes estampar { from { transform: rotate(-24deg) scale(1.9); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-11deg) scale(1); } }

/* ── barra delle azioni: sempre a portata di pollice ─────── */
.acciones:empty { display: none; }
.acciones { margin-top: 16px; }
.acciones .btn { margin: 8px 0 0; }

/* ── Inicio ──────────────────────────────────────────────── */
.hoy h2 { margin-top: 0; font-size: 1.45rem; }
.hoy .btn { margin-bottom: 0; }
.resumen { display: flex; align-items: center; gap: 14px; }
.grupo + .grupo { margin-top: 8px; }
.grupo h2 { display: flex; align-items: center; gap: 10px; }
.ejercicio {
  display: flex; align-items: center; gap: 14px; justify-content: space-between; min-height: 92px;
  padding: 14px 16px; margin: 10px 0; text-decoration: none; color: var(--tinta);
  background: var(--foglio); border-radius: var(--radio); box-shadow: var(--sombra); transition: transform .12s ease;
}
.ejercicio { position: relative; }
.ejercicio:hover { transform: translateY(-1px); }
.ejercicio .abrir { color: inherit; text-decoration: none; }
.ejercicio .abrir::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }   /* tutta la scheda è il link */
.ejercicio .abrir:focus-visible { outline: none; box-shadow: none; }
.ejercicio:has(.abrir:focus-visible) { outline: 3px solid var(--tinta); outline-offset: 3px; }
.ver-video.mini { position: relative; z-index: 1; margin: 10px 0 0; min-height: 44px; font-size: .88rem; padding: 3px 12px 3px 3px; gap: 8px; }
.ver-video.mini .disco { width: 32px; height: 32px; }
.ejercicio .titulo { font-weight: 700; font-size: 1.05rem; }
.ejercicio .num-ej { color: var(--lapiz); }
.ejercicio .desc { display: block; color: var(--lapiz); font-size: .92rem; margin-top: 2px; }
.ejercicio .avance { display: block; color: var(--lapiz); font-size: .82rem; margin-top: 4px; }
.ejercicio .sello { width: 84px; height: 84px; font-size: .55rem; letter-spacing: 0; padding: 0 6px; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.interruptor input { appearance: none; flex: none; width: 56px; height: 32px; border-radius: 999px; background: #c9d0dc;
  position: relative; cursor: pointer; transition: background-color .15s; }
.interruptor input::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.interruptor input:checked { background: var(--tinta); }
.interruptor input:checked::after { transform: translateX(24px); }

/* ── risultato di fine sessione ──────────────────────────── */
.resultado { text-align: center; }
.resultado .sello { margin: 8px auto 14px; }
.resultado .puntos { font-size: 2.4rem; font-weight: 700; margin: 0; }

/* ── accesso ─────────────────────────────────────────────── */
.portada { max-width: 34rem; margin: 6vh auto 0; }
.portada h1 { font-size: 1.9rem; }
.campo { width: 100%; min-height: 64px; padding: 10px 16px; font: inherit; font-size: 1.4rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); background: var(--foglio);
  border: 2px solid var(--tinta); border-radius: 12px; }
.campo::placeholder { color: #8a95a8; letter-spacing: .04em; text-transform: none; font-weight: 400; font-size: 1.05rem; }
.campo.normal { text-transform: none; letter-spacing: .02em; }
.portada .hoja h2 { margin-top: 0; }
.portada label.es { display: block; margin-top: 14px; }

/* ── utente: dati di accesso e riga dei progressi ────────── */
.dato { margin: 10px 0; }
.dato > span { display: block; }
.t-login { margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--borde); }
.con-ojo { display: flex; gap: 8px; align-items: stretch; }
.con-ojo .btn { flex: none; width: auto; margin: 0; }
.dato strong { font-size: 1.6rem; letter-spacing: .03em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tarjeta-img { display: block; width: 100%; height: auto; margin: 14px 0 4px; border-radius: var(--radio); box-shadow: var(--sombra); }
.cuenta { margin: 0 0 14px; }
.cuenta strong { display: block; font-size: 1.15rem; }
/* ── campanella dei messaggi (fissa in alto a destra) ──── */
.campana { position: fixed; z-index: 40; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--tinta);
  background: var(--foglio); color: var(--tinta); box-shadow: var(--sombra); cursor: pointer; }
.campana .ico { width: 26px; height: 26px; }
.campana .contador { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: var(--sello); color: #fff; font-size: .8rem; font-weight: 700; line-height: 24px; text-align: center; }
.con-campana .cabecera, .con-campana .inicio .lateral h1 { padding-right: 64px; }
.buzon { position: fixed; z-index: 41; top: calc(max(12px, env(safe-area-inset-top)) + 62px); right: 12px;
  width: min(420px, calc(100vw - 24px)); overflow-y: auto; overscroll-behavior: contain;
  /* dvh = altezza davvero visibile: su iPhone 100vh include lo spazio sotto la barra di Safari e nasconde i pulsanti in fondo */
  max-height: calc(100vh - 100px); max-height: calc(100dvh - 90px - env(safe-area-inset-bottom));
  background: var(--carta); border-radius: var(--radio); box-shadow: 0 12px 40px rgba(29, 43, 69, .25); padding: 14px; }
.buzon-cab { display: flex; align-items: center; justify-content: space-between; }
.buzon-cab h2 { margin: 0; font-size: 1.3rem; }
.cerrar-buzon { width: 44px; height: 44px; border: 0; background: none; color: var(--tinta); cursor: pointer; border-radius: 10px; }
.buzon .vacio { margin: 10px 0 4px; }
.msg { background: var(--foglio); border: 2px solid var(--tinta); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.msg.leido { background: #eceef2; border-color: transparent; color: var(--lapiz); }
.msg h3 { margin: 2px 0 6px; font-size: 1.08rem; }
.msg.leido h3 { color: var(--lapiz); }
.msg .fecha { margin: 0; font-size: .82rem; color: var(--lapiz); }
.msg .texto { margin: 0 0 6px; }
.msg label.es { display: block; margin-top: 8px; }
.msg .aviso-datos { margin: 4px 0 0; font-size: .85rem; color: var(--lapiz); }
.msg .respuesta-dada { margin: 8px 0 0; white-space: pre-wrap; }
.campo.texto-libre { min-height: 0; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1.05rem; resize: vertical; }
.fila-botones { display: flex; gap: 10px; }
.fila-botones .btn { margin-top: 0; }
/* ── home: scorciatoie a progresso e risorse ─────────────── */
.atajo { margin-top: 16px; }
.atajo h2 { margin-top: 0; font-size: 1.3rem; }
.atajo .btn { margin-bottom: 0; }
.pdf { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--borde); text-decoration: none; font-weight: 700; }
.pdf:first-child { border-top: 1px solid var(--borde); }
.pdf span:not(.lapiz) { flex: 1; }
.pdf .lapiz { font-size: .8rem; font-weight: 400; }
/* ── Mi progreso ─────────────────────────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cifra { background: var(--foglio); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 16px; display: flex; flex-direction: column; }
.cifra strong { font-size: 2rem; line-height: 1.1; }
.cifra small { margin-top: 4px; font-size: .82rem; }
.mi-progreso { max-width: 820px; }
.mi-progreso .hoja h2 { margin-top: 0; }
.mi-progreso .hoja + h2 { margin-top: 28px; }
.cifra-grande { margin: 0 0 8px; } .cifra-grande strong { font-size: 2rem; }
.barra { height: 12px; border-radius: 999px; background: var(--riga); overflow: hidden; margin: 6px 0; }
.barra > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--tinta); }
.grafico { display: flex; align-items: flex-end; gap: 4px; height: 170px; margin: 12px 0 4px; }
.columna { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer; font: inherit; }
.columna .pista { flex: 1; width: 100%; display: flex; align-items: flex-end; border-bottom: 2px solid var(--borde); }
.columna .relleno { display: block; width: 100%; max-width: 22px; margin: 0 auto; border-radius: 4px 4px 0 0; background: var(--tinta); opacity: .85; }
.columna.hoy .relleno, .columna.activa .relleno { opacity: 1; box-shadow: 0 0 0 2px var(--resaltador); }
.columna .valor { font-size: .75rem; min-height: 1em; color: var(--lapiz); }
.columna .dia { font-size: .72rem; color: var(--lapiz); }
.columna.hoy .dia { font-weight: 700; color: var(--tinta); }
.detalle-dia { min-height: 1.5em; margin: 6px 0 0; }
.grupo-progreso h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--lapiz); }
.grupo-progreso + .grupo-progreso { margin-top: 12px; }
.fila-ej { padding: 10px 0; border-top: 1px solid var(--borde); }
.fila-ej-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fila-ej .titulo { font-weight: 700; text-decoration: none; }
.fila-ej-pie { margin: 0; font-size: .85rem; }
.etiqueta-sello { flex: none; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px;
  border-radius: 999px; border: 2px solid var(--sello); color: var(--sello); }
.etiqueta-sello.vacio { border-style: dashed; border-color: #8a95a8; color: #6b768a; }
.repasar { list-style: none; padding: 0; margin: 8px 0 0; }
.repasar a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--borde); text-decoration: none; }
.repasar .en-mini { flex: 1 1 100%; font-weight: 700; }
.repasar .lapiz { flex: 1; font-size: .85rem; }
.guardado { display: inline-flex; align-items: center; gap: 6px; }
.guardado .ico { color: var(--lapiz-verde); }
.numero-codigo { display: inline-block; min-width: 2.4em; text-align: center; padding: 0 .2em; }

/* ── Recursos / testi ────────────────────────────────────── */
.texto { max-width: var(--ancho-lectura); }
.texto ul { padding-left: 1.2em; }
.texto li { margin: .35rem 0; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.desplegable summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 4px;
  font-weight: 700; cursor: pointer; border-top: 2px dashed var(--borde); }
.desplegable summary .ico { transition: transform .15s; }
.desplegable[open] summary .ico { transform: rotate(90deg); }
.capitales { columns: 2 14rem; column-gap: 24px; padding-left: 0; list-style: none; }
.capitales li { break-inside: avoid; padding: 4px 0; border-bottom: 1px solid var(--borde); }

/* ── video tutorial ────────────────────────────────────── */
.ver-video { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: -4px 0 14px; padding: 4px 16px 4px 4px;
  font: inherit; font-weight: 700; color: var(--tinta); background: var(--foglio); border: 2px solid var(--borde); border-radius: 999px; cursor: pointer; }
.ver-video:hover { border-color: var(--tinta); }
.ver-video .disco { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tinta); color: #fff; }
.ver-video .lapiz { font-weight: 400; }
.hoy + .ver-video { margin: 14px 0 0; }
.cabecera .ver-video { margin: 0; font-size: .9rem; padding-right: 10px; gap: 8px; }
.cabecera .ver-video .disco { width: 34px; height: 34px; }
.cabecera .volver, .ver-video { white-space: nowrap; }
.practica .cabecera { margin: 0 0 4px; flex-wrap: wrap; gap: 4px 8px; }
.practica .cabecera .volver { padding-right: 4px; margin-left: -4px; font-size: .92rem; }
.video-dlg { padding: 0; border: 0; border-radius: 18px; background: #000; max-width: none; max-height: none; overflow: visible; }
.video-dlg::backdrop { background: rgba(20, 28, 45, .82); }
.video-dlg video { display: block; height: min(86vh, 160vw); aspect-ratio: 9 / 16; border-radius: 18px; background: #000; }
.video-dlg .cerrar { position: absolute; top: -56px; right: 0; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; border: 0; background: var(--foglio); color: var(--tinta); cursor: pointer; }
.video-pagina { display: block; width: min(100%, 360px); aspect-ratio: 9 / 16; margin: 6px 0 18px; border-radius: 16px; background: #000; }

/* ── pie ─────────────────────────────────────────────────── */
.pie { max-width: 1120px; margin: 0 auto; padding: 8px 18px 32px 40px; color: var(--lapiz); font-size: .88rem; }
.pie a { display: inline-block; padding: 12px 4px; }

/* ── telefono: azioni fisse in basso ─────────────────────── */
@media (max-width: 759px) {
  .pagina { padding: 12px 14px 32px 34px; }
  body { background-image:
    linear-gradient(90deg, transparent 0, transparent 18px, var(--margine) 18px, var(--margine) 20px, transparent 20px),
    repeating-linear-gradient(180deg, transparent 0, transparent 37px, var(--riga) 37px, var(--riga) 38px); }
  .practica .acciones { position: sticky; bottom: 0; z-index: 5; margin: 16px -14px 0 -34px;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) 34px;
    background: rgba(248, 244, 234, .96); box-shadow: 0 -6px 18px rgba(29, 43, 69, .10); }
  .hoja { padding: 18px 16px; }
  h1 { font-size: 1.65rem; }
}

/* ── desktop: due colonne ────────────────────────────────── */
@media (min-width: 960px) {
  .inicio { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 36px; align-items: start; }
  .inicio .lista h2:first-child { margin-top: 0; }
  .practica { max-width: 820px; margin: 0 auto; }
  .practica .hoja { padding: 28px 32px; }
  .recursos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
}


@media (min-width: 1240px) {
  .ejercicios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ejercicios .ejercicio { margin: 0; }
}

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