/* Lo stile delle pagine web del glossario (scripts/glossario-web.mjs): gli
   stessi gettoni, la stessa tipografia, la stessa testata e lo stesso piede
   della landing (landing/landing.html). Non e' una tavolozza nuova: i fondi
   dei gruppi sono i colori delle categorie dell'app (`CAT_BG` in
   apps/web/src/indice.ts), e li scrive la pagina in `--campo` e `--tinta`.

   Sta in un file solo perche' le pagine sono ventiquattro e devono restare
   uguali, come `legale.css` per le pagine legali. */

:root {
  --paper: #FAF8F3;
  --ink: #2F2E2A;
  --ink-inverse: #FAF8F3;
  --line: #E3DDCE;
  --accent: #A8543A;
  --borde: 72px;
  --w: 1360px;
}

* { box-sizing: border-box }
html { background: var(--paper) }
html, body { margin: 0; overflow-x: clip }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); text-decoration: none }
a:hover { color: #82442B }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }

/* ── i tre caratteri della landing ─────────────────────────────────── */
.lbl {
  font-size: 11px; font-weight: 700; font-stretch: 112%;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
}
.tit {
  font-stretch: 62%; font-weight: 800; letter-spacing: -.005em;
  line-height: .84; text-transform: uppercase; margin: 0;
}
h2 { margin: 0; font-size: inherit; font-weight: inherit }
.cuerpo { font-stretch: 100%; font-weight: 400; line-height: 1.5 }
/* `<dfn>` dice ai motori e agli assistenti che la parola e' definita qui; a
   vederla e' il titolo e basta. */
dfn { font-style: normal }

.w { max-width: var(--w); margin: 0 auto; padding-inline: var(--borde) }

.marca { display: flex; align-items: center; color: var(--ink) }
.marca:hover { color: var(--ink) }
.marca img { width: 30px; height: 30px; display: block }
.marca span {
  font-size: 25px; font-weight: 700; font-stretch: 100%;
  letter-spacing: -.015em; margin-left: 1px;
}

/* ── la banda colorata: testata, briciole, titolo ─────────────────── */
.banda { background: var(--campo) }
.cabecera {
  display: flex; align-items: center; gap: 26px;
  border-bottom: 1px solid rgba(47,46,42,.30);
  padding-top: env(safe-area-inset-top);
  height: calc(74px + env(safe-area-inset-top));
}
/* Il selettore della landing, ma con dei link: qui cambiare lingua e' andare
   a un'altra pagina. */
.idiomas { margin-left: auto; display: flex; gap: 8px }
.idiomas a {
  position: relative; color: var(--ink); opacity: .45; padding: 8px 4px;
  font-size: 11px; font-weight: 700; font-stretch: 112%;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  transition: opacity .15s ease-out;
}
.idiomas a[aria-current="page"] { opacity: 1 }
.idiomas a::after {
  content: ''; position: absolute; left: 4px; right: calc(4px + .16em); bottom: 4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transition: transform .15s ease-out;
}
@media (hover: hover) {
  .idiomas a:not([aria-current]):hover { opacity: .85; color: var(--ink) }
  .idiomas a:not([aria-current]):hover::after { transform: scaleX(1) }
}
@media (prefers-reduced-motion: reduce) {
  .idiomas a, .idiomas a::after { transition: none }
}

/* Il menu della landing, con le stesse misure: le due parti di Planaquí sul
   web a destra, il puntino, poi le lingue. La voce della sezione in cui sta
   la pagina tiene la linea sotto, come la lingua corrente tiene il pieno. */
.menu { margin-left: auto; display: flex; gap: 18px }
.menu ~ .idiomas { margin-left: 0 }
.menu a {
  position: relative; color: var(--ink); padding: 8px 0;
  font-size: 11px; font-weight: 700; font-stretch: 112%;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
}
.menu a::after {
  content: ''; position: absolute; left: 0; right: .16em; bottom: 4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transition: transform .15s ease-out;
}
.menu a[aria-current]::after { transform: scaleX(1) }
@media (hover: hover) { .menu a:hover { color: var(--ink) } .menu a:hover::after { transform: scaleX(1) } }
@media (prefers-reduced-motion: reduce) { .menu a::after { transition: none } }
.sep-lingue { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; font-size: 0; flex-shrink: 0 }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Sotto i 480px l'hamburger della landing: il pannello a tutto schermo sotto
   la testata, velo scuro trasparente e sfocato, le voci nel carattere dei
   titoli. `<details>` si apre anche senza JavaScript. */
.burger { display: none }
.burger summary {
  list-style: none; cursor: pointer; color: var(--ink);
  width: 40px; height: 40px; margin-right: -10px;
  display: flex; align-items: center; justify-content: center;
}
.burger summary::-webkit-details-marker { display: none }
.burger summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.burger[open] .icona-apri, .burger:not([open]) .icona-chiudi { display: none }
.burger nav {
  position: fixed; left: 0; right: 0; bottom: 0; top: calc(54px + env(safe-area-inset-top)); z-index: 40;
  background: rgba(47,46,42,.78); color: var(--ink-inverse);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  padding: 12px var(--borde) calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; overflow-y: auto;
  animation: pannello .18s ease-out;
}
@keyframes pannello { from { opacity: 0; transform: translateY(-8px) } }
.burger nav a {
  display: block; color: var(--ink-inverse); padding: 26px 0 24px;
  border-bottom: 1px solid rgba(250,248,243,.18);
}
.burger nav a b {
  display: block; font-size: 46px; font-stretch: 62%; font-weight: 800;
  letter-spacing: -.005em; line-height: .9; text-transform: uppercase;
}
.burger nav a span { display: block; margin-top: 10px; font-size: 16px; line-height: 1.4; opacity: .7 }
.burger nav a:active b { color: var(--accent) }
html.menu-aperto { overflow: hidden }
@media (prefers-reduced-motion: reduce) { .burger nav { animation: none } }
@media (max-width: 480px) {
  .cabecera { position: relative }
  .menu, .sep-lingue { display: none !important }
  .menu ~ .idiomas { margin-left: auto }
  .burger { display: block }
}

.miga { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 22px }
.miga a, .miga span { color: var(--ink); opacity: .6 }
.miga a:hover { opacity: 1 }
.miga [aria-current] { opacity: 1 }
.hero { padding: 56px 0 64px }
.hero h1 { font-size: clamp(48px, 7.4vw, 116px) }
.kicker { margin: 0 0 22px; opacity: .6 }
.intro { margin: 28px 0 0; font-size: 18px; max-width: 60ch }
.conta { margin: 28px 0 0; opacity: .6 }

/* ── l'indice: un capitolo per gruppo ─────────────────────────────── */
main { padding-bottom: 24px }
.gruppo { padding: 48px 0; border-top: 1px solid rgba(47,46,42,.18) }
.gruppo:first-child { border-top: 0 }
.gruppo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px }
.gruppo-cab h2 { font-size: clamp(34px, 4vw, 56px) }
.gruppo-cab h2 a { color: var(--ink); box-shadow: inset 0 -.32em 0 var(--tinta) }
.gruppo-cab .lbl { white-space: nowrap }
.lista { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 48px }
.lista li { break-inside: avoid; padding: 12px 0; border-top: 1px solid var(--line) }
.lista a { color: var(--ink); font-weight: 700; font-stretch: 100%; font-size: 17px }
.lista a:hover { color: var(--accent) }
.lista p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; opacity: .75 }

/* ── il gruppo: l'indice delle parole e le voci ───────────────────── */
.indice {
  display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 22px 0;
  border-bottom: 1px solid rgba(47,46,42,.18);
}
.indice a { font-size: 15px; font-stretch: 100% }
.voce {
  display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 0 48px;
  padding: 40px 0; border-bottom: 1px solid var(--line);
  /* L'ancora non finisce sotto il bordo dello schermo. */
  scroll-margin-top: 16px;
}
.voce > * { min-width: 0 }
.voce h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: .92; overflow-wrap: anywhere }
.breve { font-size: 19px; font-weight: 600; font-stretch: 100%; line-height: 1.35; margin: 0 0 12px }
.testo { font-size: 17px; margin: 0; max-width: 62ch; opacity: .88 }
.voce:target h2 { color: var(--accent) }

.altri { padding: 56px 0 32px }
.altri h2 { font-size: 34px; margin-bottom: 22px }
.altri ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.altri a { display: block; padding: 18px 20px; border-radius: 0 12px 12px 12px; color: var(--ink) }
.altri a:hover { color: var(--ink); box-shadow: 0 8px 20px rgba(47,46,42,.14) }
.altri b { display: block; font-size: 22px; font-stretch: 62%; font-weight: 800; line-height: .9; text-transform: uppercase }
.altri span { display: block; margin-top: 8px; font-size: 13px; opacity: .7 }

/* ── la chiusura: la parola dentro il programma, e gli store ──────── */
.cta {
  background: var(--ink); color: var(--ink-inverse);
  padding: 56px max(var(--borde), calc((100% - var(--w)) / 2 + var(--borde)));
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px 64px; align-items: center;
}
.cta h2 { font-size: clamp(34px, 4vw, 56px) }
.cta p { margin: 0 0 28px; font-size: 17px; max-width: 46ch; opacity: .85 }
.scarica { display: block; margin-bottom: 14px; opacity: .7 }

/* I badge della landing, chiari su scuro. */
.badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.badge {
  display: flex; align-items: center; gap: 10px;
  border-radius: 9px; padding: 9px 16px 10px 14px;
  background: var(--paper); color: var(--ink);
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}
.badge:hover { color: var(--ink) }
.badge b { display: block; font-size: 19px; font-weight: 600; font-stretch: 100%; letter-spacing: -.01em; line-height: 1.15 }
.badge small { display: block; font-size: 9.5px; font-weight: 500; font-stretch: 100%; letter-spacing: .02em; line-height: 1.15 }
@media (hover: hover) {
  .badge:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.28) }
}
.badge:active { transform: none; transition-duration: .06s }
.badge:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px }
@media (prefers-reduced-motion: reduce) {
  .badge { transition: none }
  .badge:hover, .badge:active { transform: none }
}

/* ── il banner dell'app (`bannerApp` in scripts/pagine-web.mjs) ──────
   Riutilizzabile in ogni pagina: scuro come la chiusura, con il raggio delle
   foto. A destra il telefono del volantino (24/10/2026), costruito a misura
   di un telefono vero, 390 per 820, e rimpicciolito: la sagoma con i tasti e
   l'isola, la barra di stato, la schermata Oggi. */
.banner-app {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 156px; column-gap: 32px; align-items: center;
  background: var(--ink); color: var(--ink-inverse);
  border-radius: 0 12px 12px 12px; padding: 32px 32px 34px;
}
.banner-app .tit { margin: 0 0 16px; font-size: clamp(32px, 3vw, 40px) }
.banner-app .sotto { margin: 0 0 24px; font-size: 17px; line-height: 1.5; max-width: 46ch; opacity: .85 }
.banner-app .scarica { margin-bottom: 14px }
.banner-tel { position: relative; width: 156px; height: 328px }
.tel {
  position: absolute; top: 0; left: 0; width: 390px; height: 820px; transform: scale(.4); transform-origin: top left;
  padding: 13px; border-radius: 64px; background: #1D1D1B;
  box-shadow: inset 0 0 0 3px rgba(250,248,243,.2), 0 30px 60px rgba(0,0,0,.4);
}
/* I tasti: due a sinistra (il volume, il secondo e' l'ombra del primo), uno a destra. */
.tel::before, .tel::after { content: ''; position: absolute; width: 5px; background: #1D1D1B; box-shadow: inset 0 0 0 1px rgba(250,248,243,.2) }
.tel::before { left: -5px; top: 190px; height: 64px; border-radius: 3px 0 0 3px; box-shadow: inset 0 0 0 1px rgba(250,248,243,.2), 0 84px 0 #1D1D1B }
.tel::after { right: -5px; top: 250px; height: 100px; border-radius: 0 3px 3px 0 }
.tel-vetro {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 52px; background: var(--paper); color: var(--ink); font-stretch: 100%;
}
.tel-stato { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 8px 30px 0 46px; font-size: 18px; font-weight: 700 }
.tel-isola { position: absolute; top: 13px; left: 50%; width: 124px; height: 36px; margin-left: -62px; border-radius: 18px; background: #000 }
.tel-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 0 20px }
.tel-marca { display: flex; align-items: center }
.tel-marca img { width: 30px; height: 30px; display: block }
.tel-marca span { font-size: 25px; font-weight: 700; letter-spacing: -.015em; margin-left: 1px }
.tel-azioni { display: flex; gap: 26px }
.tel svg { display: block; flex-shrink: 0 }
.tel-luogo { display: flex; align-items: center; gap: 4px; padding: 22px 20px 0; font-size: 16px; font-weight: 600 }
.tel-dia { padding: 26px 20px 0 }
.tel-settimana { font-size: 17px; opacity: .7; margin-bottom: 8px }
.tel-diaRiga { display: flex; align-items: center; gap: 22px }
.tel-diaIzq { display: flex; flex-direction: column; flex-shrink: 0 }
.tel-num, .tel-mes { font-family: 'Bricolage Grotesque', 'Archivo', sans-serif; font-weight: 800; letter-spacing: -.03em }
.tel-num { font-size: 104px; line-height: .86 }
.tel-mes { font-size: 60px; line-height: .95 }
.tel-div { align-self: stretch; width: 1px; background: rgba(47,46,42,.18) }
.tel-pillole { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0 }
.tel-pillola {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 38px; padding: 0 15px;
  border-radius: 19px; box-shadow: inset 0 0 0 1px rgba(47,46,42,.08); font-size: 16px; white-space: nowrap;
}
.tel-pillola::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--tinta); opacity: .32 }
.tel-grupo { display: flex; align-items: center; gap: 10px; margin: 32px 20px 14px }
.tel-grupoTxt { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }
.tel-linea { flex: 1; height: 1px; background: rgba(47,46,42,.25) }
.tel-ficha { margin: 0 14px; padding: 20px 22px 18px; border-radius: 20px; background: var(--tel-campo, #85A2BC) }
.tel-tag {
  display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--ink-inverse);
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
.tel-fichaTit { margin-top: 16px; font-size: 23px; font-weight: 600; line-height: 1.3 }
.tel-filete { height: 1px; margin-top: 22px; background: rgba(47,46,42,.2) }
.tel-fichaLugar { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 16px }
.tel-pie { display: flex; margin: auto 14px 0; padding: 5px; border-radius: 999px; background: rgba(47,46,42,.06) }
.tel-pie span { flex: 1; padding: 15px 0; border-radius: 999px; text-align: center; font-size: 20px; font-weight: 700 }
.tel-pie .on { background: var(--ink); color: var(--ink-inverse) }
.tel-home { width: 134px; height: 5px; margin: 16px auto 10px; border-radius: 3px; background: var(--ink) }
/* Sul telefono, un telefono dentro il riquadro non si legge: solo il testo. */
@media (max-width: 600px) {
  .banner-app { grid-template-columns: 1fr }
  .banner-tel { display: none }
}

/* Il piede della landing, con le stesse due righe. */
footer {
  padding: 56px var(--borde) calc(40px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  grid-template-areas: "marca nav" "luogo credito";
}
footer .marca { grid-area: marca }
footer nav { grid-area: nav; display: grid; grid-template-columns: repeat(4, auto); gap: 32px 56px; margin-left: 32px }
footer nav .lbl { margin: 0 0 16px; opacity: .55 }
footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
footer nav a { font-size: 15px; font-stretch: 100% }
.pie-luogo, .credito {
  margin: 40px 0 0; padding-top: 22px; border-top: 1px solid rgba(47,46,42,.14);
  opacity: .55; align-self: start;
}
.pie-luogo { grid-area: luogo }
.credito { grid-area: credito; text-align: right }
.credito a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.credito a:hover { text-decoration-thickness: 2px }
.credito > span { margin-right: -.16em }

/* «Torna su», quello della landing: in basso a destra, nasce invisibile e lo
   script lo accende passata la prima schermata; `visibility` lo toglie anche
   dal tab e dai lettori di schermo finche' non serve. */
.arriba {
  position: fixed; right: var(--borde); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60;
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--ink); color: var(--ink-inverse);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(47,46,42,.28);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.arriba.visible { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s }
.arriba:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px }
@media (prefers-reduced-motion: reduce) { .arriba, .arriba.visible { transition: none; transform: none } }

/* ── telefono: come la landing sotto i 1100px ─────────────────────── */
@media (max-width: 1100px) {
  :root { --borde: 16px }
  .lbl, .idiomas a, .menu a { font-stretch: 100% }
  .menu { gap: 14px }
  .cabecera { height: calc(54px + env(safe-area-inset-top)); gap: 16px }
  .hero { padding: 36px 0 40px }
  .hero h1 { line-height: .9 }
  .intro { margin-top: 18px; font-size: 16px }
  .conta { margin-top: 22px }
  .gruppo { padding: 36px 0 }
  .gruppo-cab { flex-direction: column; gap: 14px }
  .lista { columns: 1 }
  .voce { grid-template-columns: 1fr; gap: 12px; padding: 28px 0 }
  .altri { padding: 40px 0 16px }
  .altri h2 { font-size: 28px }
  .altri ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .cta { grid-template-columns: 1fr; padding: 48px var(--borde) }
  .badges .badge { flex: 1; padding: 8px 12px 9px 11px }
  .badge b { font-size: 15.5px }
  .badge small { font-size: 8px }
  footer {
    padding: 36px var(--borde) calc(36px + env(safe-area-inset-bottom));
    grid-template-columns: 1fr; grid-template-areas: "marca" "nav" "luogo" "credito";
  }
  footer nav { margin: 32px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px }
  .pie-luogo { margin-top: 28px; padding-top: 20px }
  .credito { margin: 0; padding-top: 10px; border-top: 0; text-align: left }
}