/* ============================================================================
   Mi Ruta — Capa de LECTURA FÁCIL (accesibilidad cognitiva)
   ----------------------------------------------------------------------------
   Aditiva y OPT-IN: todo el estilo cuelga de `html.lf-on`. Si la clase no está,
   la web se ve EXACTAMENTE igual que siempre. Se activa desde el panel de
   accesibilidad. Criterios: UNE 153101 (Lectura Fácil) + WCAG 2.1
   (1.4.8 presentación visual, 2.4.7 foco, 2.5.5 tamaño de destino, 3.1 legible).
   ========================================================================== */

/* --- Tipografía y legibilidad (todo relativo a rem, compone con el zoom) --- */
html.lf-on body{
  --lf-ink:#12202e;         /* texto de alto contraste */
  --lf-accent:#0b5f57;      /* verde oscuro accesible */
  --lf-accent-ink:#ffffff;
  --lf-line:#c9d3d1;
  line-height:1.7;
  letter-spacing:.01em;
  word-spacing:.04em;
}
html.lf-on p,
html.lf-on li,
html.lf-on label,
html.lf-on figcaption,
html.lf-on .card__text,
html.lf-on .eco-card__text,
html.lf-on td,
html.lf-on th{
  font-size:1.18rem;
  line-height:1.7;
  color:var(--lf-ink);
}
html.lf-on h1{font-size:2rem;line-height:1.25}
html.lf-on h2{font-size:1.6rem;line-height:1.3}
html.lf-on h3{font-size:1.3rem;line-height:1.35}
/* Texto alineado a la izquierda: nunca justificado (crea "ríos" difíciles de leer) */
html.lf-on p,html.lf-on li,html.lf-on div,html.lf-on td{text-align:left!important;text-justify:auto!important}
/* Ancho de línea cómodo para no perderse al saltar de renglón (WCAG 1.4.8) */
html.lf-on main p,
html.lf-on main li{max-width:62ch}
/* Espacio entre párrafos y entre bloques: aire para separar ideas */
html.lf-on p{margin-top:.7em;margin-bottom:.7em}
html.lf-on li{margin-bottom:.5em}
html.lf-on section,html.lf-on .card,html.lf-on article{margin-bottom:1.1rem}

/* --- Enlaces y botones claros y grandes (WCAG 2.5.5: destino >= 44px) ---
   OJO: se acota a #main-view para NO tocar el propio botón/panel de accesibilidad
   ni la barra de lectura fácil (tienen su tamaño propio). */
html.lf-on #main-view a{text-decoration:underline;text-underline-offset:3px}
html.lf-on #main-view a.btn,html.lf-on #main-view button,html.lf-on #main-view .btn,
html.lf-on #main-view [role="button"],html.lf-on #main-view input[type="submit"]{
  min-height:48px;
  font-size:1.1rem!important;
  padding:12px 18px;
  border-radius:12px;
}
html.lf-on #main-view input,html.lf-on #main-view select,html.lf-on #main-view textarea{
  min-height:48px;font-size:1.1rem;
}

/* --- Foco siempre visible y potente (WCAG 2.4.7) --- */
html.lf-on :focus-visible{
  outline:4px solid #12645c!important;
  outline-offset:3px!important;
  border-radius:6px;
}

/* --- Menos ruido visual: quitar movimiento y adornos decorativos --- */
html.lf-on *,html.lf-on *::before,html.lf-on *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important;
}
html.lf-on [aria-hidden="true"].decor,
html.lf-on .home-hero__art,
html.lf-on .parallax,
html.lf-on .home-eco__art{display:none!important}

/* --- Barra de ayuda de lectura fácil (inyectada por lectura-facil.js) --- */
.lf-bar{display:none}
html.lf-on .lf-bar{
  display:block;
  background:#eef6f4;
  border-bottom:3px solid #0b5f57;
  padding:14px 16px 16px;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  scroll-margin-top:84px; /* la franja superior fija (#pro-strip) no tapa la cabecera al enfocar */
}
.lf-bar__wrap{max-width:1100px;margin:0 auto}
.lf-bar__intro{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.lf-bar__badge{flex:none;display:inline-flex;align-items:center;gap:8px;background:#0b5f57;color:#fff;font-weight:700;font-size:15px;padding:8px 14px;border-radius:999px}
.lf-bar__badge svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.lf-bar__text{font-size:1.05rem;color:#12202e;margin:2px 0;line-height:1.6}
.lf-grid{display:grid;grid-template-columns:1fr;gap:10px}
.lf-tile{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid #cfe0dc;border-radius:16px;padding:14px 16px;text-decoration:none;color:#12202e;font-size:1.15rem;font-weight:600;min-height:64px;cursor:pointer}
.lf-tile:hover,.lf-tile:focus-visible{border-color:#0b5f57;background:#f4fbf9}
.lf-tile__ic{flex:none;width:80px;height:80px;display:grid;place-items:center;background:#fff;border:1px solid #dfeae7;border-radius:14px;color:#0b5f57}
.lf-tile__ic svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lf-tile__ic img{width:72px;height:72px;object-fit:contain;display:block}
.lf-bar__off{margin-top:14px;display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid #0b5f57;color:#0b5f57;font-weight:700;font-size:1rem;padding:11px 18px;border-radius:12px;cursor:pointer;min-height:48px}
.lf-bar__off:hover,.lf-bar__off:focus-visible{background:#0b5f57;color:#fff}
.lf-bar__attr{margin:12px 0 0;font-size:.78rem;color:#5b6675;line-height:1.5}
.lf-bar__attr a{color:#0b5f57}

@media(min-width:640px){ .lf-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .lf-grid{grid-template-columns:repeat(4,1fr)} }