/* ─────────────────────────────────────────────────────────────────────────────
   Ciudadanía Clara — foglio di stile del sito del regalo.
   Scritto il 12/09/2026, rifacendo la landing con la skill impeccable.

   PERCHÉ UN FILE SOLO, E NON IL CSS DENTRO OGNI PAGINA.
   Le pagine sono quattro (index, revisa-tu-correo, gracias, privacidad) e sono la
   stessa cosa vista in quattro momenti. Con il CSS dentro ogni pagina, cambiare un
   colore vuol dire cambiarlo quattro volte, e la quarta si dimentica.
   ⛔ Conseguenza sul caricamento: questo file va caricato INSIEME alle pagine. Se
   manca, le pagine si vedono nude. L'elenco dei file sta in BONUS/LEGGIMI.md.

   DA DOVE VENGONO I COLORI E I CARATTERI — non sono scelti a occhio:
   · il blu, il rosso e l'oro sono presi dal file della copertina (PACCHETTO/COVER/
     fronte-corretto.png). Chi inquadra il codice riconosce il libro che ha in mano;
   · IBM Plex Sans e IBM Plex Mono sono i caratteri con cui è composto DENTRO il
     libro (letti con pdffonts su PACCHETTO/BOOK/interior.pdf). La pagina è la
     continuazione del libro, quindi parla con la sua voce;
   · Archivo Black è il carattere dei titoli grossi: è la lettera pesante della
     copertina. Sul titolo si grida come grida la copertina, nel testo si legge
     come si legge il libro.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── i caratteri, sul nostro server ─────────────────────────────────────────
   Non si chiamano da Google: una pagina che aspetta un altro server è una pagina
   che a volte non arriva, e questa la aprono da telefono, spesso con poca rete. */
@font-face{
  font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap;
  src:url('tipografia/archivo-black.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('tipografia/plex-sans-var.woff2') format('woff2-variations'),
      url('tipografia/plex-sans-var.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('tipografia/plex-mono-500.woff2') format('woff2');
}

:root{
  /* i tre colori della copertina */
  --azul:#011f3d;          /* la fascia in cima */
  --azul-noche:#02152a;    /* il piede, un gradino più scuro */
  --azul-alto:#0a2d53;     /* un piano rialzato sul blu */
  --rojo:#8f1111;          /* la fascia in fondo */
  --oro:#c8a02e;           /* il «128» */
  --oro-vivo:#e6c256;

  /* la carta: è l'interno del libro, non il bianco di uno schermo */
  --papel:#f7f5f0;
  --papel-hondo:#efebe2;
  --tinta:#17181b;
  --tinta-suave:#55575d;
  --linea:#dcd6c9;

  /* sul blu, il testo secondario si tinge di blu. Mai grigio su un fondo colorato. */
  --sobre-azul:#ffffff;
  --sobre-azul-suave:#a9bdd6;

  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --grito:'Archivo Black','IBM Plex Sans',system-ui,sans-serif;
  --medida:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ancho:1080px;          /* la gabbia larga */
  --lectura:66ch;          /* la gabbia del testo che si legge */
  --radio:10px;

  color-scheme:light;
  accent-color:var(--azul);
}

*,*::before,*::after{box-sizing:border-box}

/* ⛔ 12/09/2026, trovato da Riccardo: un `display` di una nostra classe batte
   `[hidden]{display:none}` del browser, e un elemento «nascosto» resta in pagina.
   Qui vale per tutti, così non si ripete su un elemento nuovo. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%; scrollbar-color:var(--azul-alto) var(--papel-hondo)}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.62;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* ── le superfici che non ho disegnato io, ma che si vedono lo stesso ──────── */
::selection{background:var(--oro); color:#1c1505}
:where(a):focus-visible,:where(button):focus-visible,
:where(input):focus-visible,:where(select):focus-visible,
:where([tabindex]):focus-visible{
  outline:3px solid var(--oro);
  outline-offset:3px;
  border-radius:4px;
}
a{color:inherit; text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
img{max-width:100%; height:auto}

/* ── la gabbia ──────────────────────────────────────────────────────────────── */
.caja{width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:22px}
.texto{max-width:var(--lectura)}

/* ── testata: il marchio dell'editore, non un'etichetta sopra il titolo ─────── */
.cabecera{
  background:var(--azul);
  border-bottom:1px solid rgba(169,189,214,.2);
}
.cabecera .caja{display:flex; align-items:center; min-height:58px; gap:14px}
.marca{
  font-family:var(--grito);
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro); margin:0; text-decoration:none;
}

/* ── i titoli ───────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--grito); font-weight:400; letter-spacing:-.02em; line-height:1.08; margin:0}
h1{font-size:clamp(34px,6.2vw,60px)}
h2{font-size:clamp(24px,3.4vw,34px); line-height:1.14}
h3{font-size:19px; letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.entrada{font-size:clamp(18px,2vw,21px); line-height:1.5}
.menudo{font-size:15px; line-height:1.55; color:var(--tinta-suave)}

/* ── il numero, il tempo, la pronuncia: la voce del libro per le misure ─────── */
.medida{
  font-family:var(--medida); font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

/* ── sezioni di carta ───────────────────────────────────────────────────────── */
.hoja{padding:clamp(44px,7vw,84px) 0}
.hoja + .hoja{padding-top:0}
.hoja h2 + p,.hoja h2 + .texto{margin-top:18px}

/* la fascia rossa della copertina: separa il fronte dalle pagine */
.filo-rojo{height:7px; background:var(--rojo)}

/* ── il modulo ──────────────────────────────────────────────────────────────── */
.campo{display:block; margin:0 0 16px}
.campo .etiqueta{
  display:block; font-weight:600; font-size:15px; letter-spacing:.01em; margin:0 0 7px;
}
.campo input{
  width:100%; padding:15px 15px; font:inherit; font-size:17px;
  color:var(--tinta); background:#fff;
  border:1px solid #9aa4b1; border-radius:8px;
  caret-color:var(--azul);
}
.campo input::placeholder{color:#6d7480}
.campo input:hover{border-color:#6f7b8a}
.campo input:focus{border-color:var(--azul); box-shadow:0 0 0 1px var(--azul)}
.campo.mal input{border-color:#c62525; box-shadow:0 0 0 1px #c62525}
.aviso-campo{
  display:none; margin:7px 0 0; font-size:14.5px; font-weight:600; color:#a11414;
}
.campo.mal .aviso-campo{display:block}

/* la trappola per i robot: fuori dallo schermo, non display:none */
.trampa{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;
}

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:17px 20px;
  font-family:var(--grito); font-size:18px; letter-spacing:.005em;
  color:#1c1505; background:var(--oro);
  border:0; border-radius:8px; cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.8), 0 2px 0 0 #a5811c inset;
  transition:background .18s cubic-bezier(.2,.8,.3,1), transform .18s cubic-bezier(.2,.8,.3,1);
}
.boton:hover{background:var(--oro-vivo)}
.boton:active{transform:translateY(1px)}
.boton[disabled]{background:#8a7a4e; color:#efe7d2; cursor:progress; box-shadow:none}

/* ── il piede: la quarta di copertina ───────────────────────────────────────── */
.pie{background:var(--azul-noche); color:var(--sobre-azul-suave); padding:40px 0 46px; font-size:15px}
.pie .marca{color:var(--oro); display:inline-block; margin:0 0 16px}
.pie strong{color:#fff; font-weight:600}
.pie a{color:#dce6f2}
.pie .texto{max-width:62ch}
.pie .documentos{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  margin:22px 0 0; padding:18px 0 0; border-top:1px solid rgba(169,189,214,.22);
}
.pie .sello{margin:16px 0 0; font-size:13.5px; color:#7f93ab; line-height:1.55}

@media (max-width:560px){
  body{font-size:17px}
  .caja{padding-inline:18px}
}