/* ═══════════════════════════════════════════════════════════════════════════
   Ciudadano DEP — versión en lectura fácil (facil.php)
   Hoja propia y autónoma: no depende de home.css ni de style.css.
   Paleta tomada de home.css. Contrastes verificados WCAG AA:
   15,94 · 14,96 · 13,64 · 11,58 · 10,87 · 7,68 · 7,56 · 5,13 · 12,61.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --azul: #003873;
  --azul-hover: #0a4a8d;
  --amarillo: #ffcc29;
  --amarillo-claro: #fff6d9;
  --tinta: #0f2338;
  --papel: #f5f8fc;
  --gris: #5b6b7d;
  --borde: #c9d6e4;
  --cabecera: #e8eef5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.f-salto {
  position: absolute; left: -9999px; top: 0;
  background: var(--amarillo); color: #3a2c02;
  padding: .75rem 1rem; font-weight: 700; z-index: 999;
}
.f-salto:focus { left: 0; }

.f-envoltura { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }

/* ── Barra superior ───────────────────────────────────────────────────────── */
.f-barra { background: var(--azul); padding: .75rem 0; }
.f-barra .f-envoltura {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.f-barra img { height: 34px; width: auto; display: block; }
.f-barra a {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 44px; padding: .5rem .875rem;
  color: var(--azul); background: var(--amarillo);
  font-size: .9375rem; font-weight: 700;
  border-radius: .5rem; text-decoration: none;
}
.f-barra a:hover { background: #ffd75c; }
.f-barra svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── Encabezado ───────────────────────────────────────────────────────────── */
.f-hero { background: var(--azul); color: #fff; padding: 1.5rem 0 2rem; }
.f-hero .f-kicker {
  margin: 0 0 .375rem; font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo);
}
.f-hero h1 {
  margin: 0 0 .5rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 900; font-size: 2rem; line-height: 1.1;
}
.f-hero p.f-bajada { margin: 0; font-size: 1.25rem; color: #dce8f5; }

/* ── Bloques ──────────────────────────────────────────────────────────────── */
main { padding: 1.5rem 0 2.5rem; }

.f-bloque {
  background: #fff;
  border: 2px solid var(--borde);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1rem;
}
.f-cab {
  display: flex; align-items: center; gap: .875rem;
  padding: .75rem; background: var(--cabecera);
  border-bottom: 2px solid var(--borde);
}
.f-img, .f-picto {
  width: 84px; height: 84px; flex: 0 0 auto;
  border-radius: .625rem; display: block; object-fit: cover; background: #fff;
}
.f-picto {
  display: grid; place-items: center; color: var(--azul);
  border: 2px solid var(--borde);
}
.f-picto svg { width: 48px; height: 48px; }
.f-cab h2 {
  margin: 0; font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--tinta);
}

.f-cuerpo { padding: .875rem; }

.f-frases { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.f-frases li {
  font-size: 1.0625rem; line-height: 1.55;
  padding-left: .75rem; border-left: 3px solid var(--amarillo);
}

.f-remarque {
  margin: .75rem 0 0; padding: .625rem .75rem;
  background: var(--amarillo-claro);
  border-left: 4px solid var(--amarillo);
  border-radius: .375rem;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.45; color: #3a2c02;
}
.f-nota { margin: .625rem 0 0; font-size: 1rem; line-height: 1.5; }

/* ── Listas que salen de la base ──────────────────────────────────────────── */
.f-datos-tit {
  margin: 1rem 0 .5rem; font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800; font-size: 1.0625rem; color: var(--tinta);
}
.f-datos { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.f-datos li {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .625rem .75rem;
  background: var(--papel);
  border: 2px solid var(--borde);
  border-radius: .625rem;
}
.f-datos-nombre { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.f-datos-donde { display: block; font-size: .9375rem; font-weight: 400; color: var(--gris); }
.f-puntos {
  flex: 0 0 auto; padding: .25rem .625rem; border-radius: .5rem;
  font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--azul);
}
.f-vacio { margin: .5rem 0 0; font-size: 1rem; color: var(--gris); }

/* ── Escuchar ─────────────────────────────────────────────────────────────── */
.f-voz {
  display: flex; align-items: center; justify-content: center; gap: .375rem;
  width: 100%; min-height: 48px; border: 0;
  border-top: 2px solid var(--borde);
  background: var(--cabecera); color: var(--azul);
  font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.f-voz:hover { background: #dae4ef; }
.f-voz.sonando { background: var(--amarillo); color: #3a2c02; }
.f-voz svg { width: 20px; height: 20px; fill: currentColor; }
.f-voz[hidden] { display: none; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.f-pie { background: var(--azul); color: #dce8f5; padding: 1.5rem 0; font-size: .9375rem; }
.f-pie p { margin: 0 0 .25rem; }
.f-pie a { color: var(--amarillo); font-weight: 700; }

@media (min-width: 640px) {
  .f-img, .f-picto { width: 112px; height: 112px; }
  .f-picto svg { width: 62px; height: 62px; }
  .f-cab h2 { font-size: 1.5rem; }
  .f-frases li, .f-remarque, .f-datos-nombre { font-size: 1.125rem; }
  .f-hero h1 { font-size: 2.5rem; }
}