/* ============================================================================
   Arbolex · Guías del incendio — hoja de estilo compartida
   Ruta: sitio/incendio/guias/assets/guia.css

   Gobierna: Handoff_Web_Guias_Build.md (§5 componentes, §8 experiencia de uso)
   y Regla_Ley_vs_Opinion_Publicaciones.md (etiquetas Ley / Nuestra lectura).

   DOS COSAS QUE NO SE TOCAN AL EDITAR ESTE ARCHIVO:
   1. El cuerpo de texto no baja de 17 px en móvil (§8). El público es mayor.
      Si algo no cabe, se recorta el texto o se cambia el diseño, NUNCA la letra.
   2. Los colores de .et-ley y .cita son identitarios: son la señal visual de
      «esto es literal del BOE». No se reutilizan para otra cosa.
   ========================================================================== */

:root {
  /* --- tokens de marca (§5) --- */
  --azul: #213251;
  --dorado: #a8853e;
  --dorado-d: #8c6e32;
  --crema: #fff9ee;
  --papel: #faf8f2;
  --verde: #2f7d4f;
  --verde-d: #24623d;
  --verde-cl: #f0f7f2;
  --rojo: #b5622f;
  --rojo-d: #8f4a20;      /* variante oscura: el token base no da contraste AA en texto pequeño */
  --rojo-cl: #fdf4ef;

  --bg: #ffffff;
  --texto: #1c1c1c;       /* casi negro: contraste alto (§8) */
  --suave: #5b5f57;       /* gris de apoyo — 7:1 sobre blanco. No usar nada más claro */
  --linea: #e2dccb;
  --linea-f: #cfc7b0;
  --gris: #6b6f66;

  --sombra: 0 1px 3px rgba(33, 50, 81, .07);
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.1rem;          /* ≈17,6 px — mínimo del §8. En rem para respetar el ajuste del sistema */
  line-height: 1.65;
}

@media (min-width: 768px) { body { font-size: 1.125rem } }

.env { max-width: 680px; margin: 0 auto; padding: 0 18px 130px }
@media (min-width: 768px) { .env { padding-bottom: 60px } }

img { max-width: 100%; height: auto }

/* enfoque visible: hay gente navegando con teclado y con lupa */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--dorado); outline-offset: 2px; border-radius: 4px;
}

/* ---------------------------------------------------------------- cabecera */
/* flex-wrap + el sello encogible: sin esto, el sello usa su ancho de max-content
   y provoca scroll horizontal en cualquier móvil (443 px de ancho real). */
.top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 14px;
  padding: 15px 0 13px; border-bottom: 1px solid var(--linea); margin-bottom: 4px;
}
.marca { text-decoration: none; display: block; line-height: 1 }
.marca .n { font-family: var(--serif); font-weight: 600; color: var(--azul); font-size: 1.3rem; letter-spacing: -.01em }
.marca .n b { color: var(--dorado) }
.marca .s {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--suave); margin-top: 4px;
}

/* sello de verificación — va en todas las guías */
.sello {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 1 auto; min-width: 0;          /* encogible: si no, desborda en móvil */
  background: var(--verde-cl); border: 1px solid #c6ded0; color: var(--verde-d);
  font-size: .74rem; font-weight: 700; line-height: 1.3;
  padding: 7px 12px; border-radius: 14px; text-align: left;
}
.sello svg { width: 15px; height: 15px; flex: 0 0 auto }
@media (max-width: 620px) {
  .top { align-items: flex-start }
  .sello { font-size: .7rem; padding: 7px 11px; width: 100% }
}

.migas { font-size: .82rem; color: var(--suave); margin: 14px 0 0 }
.migas a { color: var(--suave); text-decoration: underline; text-underline-offset: 3px }
.migas a:hover { color: var(--dorado-d) }

/* ------------------------------------------------------------------ titular */
/* Escala tipográfica contenida a propósito (16/08/2026).
   El cuerpo NO baja de 17 px — es el suelo de accesibilidad del §8 y no se toca.
   Lo que se ha reducido son los titulares y los espacios: en el móvil la guía
   se veía enorme y daba sensación de ladrillo antes de empezar a leerla. */
.antetitulo {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dorado-d); margin: 16px 0 7px;
}
h1 {
  font-family: var(--serif); font-weight: 600; color: var(--azul);
  font-size: 1.72rem; line-height: 1.2; letter-spacing: -.012em; margin: 0 0 7px;
}
@media (min-width: 768px) { h1 { font-size: 2.1rem } }
.subtitulo { font-family: var(--serif); font-size: 1.08rem; color: var(--dorado-d); line-height: 1.4; margin: 0 0 11px }
.entradilla { font-size: 1.04rem; line-height: 1.58; color: var(--texto); margin: 0 0 13px }

h2 {
  font-family: var(--serif); font-weight: 600; color: var(--azul);
  font-size: 1.26rem; line-height: 1.3; letter-spacing: -.005em; margin: 26px 0 8px;
}
h3 { font-family: var(--serif); font-weight: 600; color: var(--azul); font-size: 1.08rem; margin: 18px 0 5px }
p { margin: 0 0 12px }
a.inline, .cuerpo a { color: var(--dorado-d); font-weight: 600; text-underline-offset: 3px }

.meta-lectura {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  font-size: .88rem; color: var(--suave); margin: 0 0 18px;
}
.meta-lectura b { color: var(--texto) }

/* ============================================================================
   ETIQUETAS Ley / Nuestra lectura / Criterio técnico   (§5 — identitarias)
   ========================================================================== */
/* Sin nowrap: hay etiquetas largas («Nuestra lectura, y aquí somos honestos»)
   que a 320 px desbordaban la pantalla. Prefiero dos líneas a scroll lateral. */
.et {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 5px; line-height: 1.35; max-width: 100%;
}
.et-ley { background: var(--verde); color: #fff }
.et-lectura { background: #5f6360; color: #fff }
.et-criterio { background: var(--azul); color: #fff }
.et .ic { font-size: .82em }

/* la referencia del artículo que acompaña a la etiqueta */
.et-ref { font-size: .84rem; font-weight: 700; color: var(--verde-d); margin-left: 2px }
.et-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 9px }

/* ============================================================================
   CITA LEGAL — literal del BOE. Lo que hace creíble la página.
   ========================================================================== */
.cita {
  background: var(--verde-cl); border: 1px solid #cbe2d5; border-left: 5px solid var(--verde);
  border-radius: 0 12px 12px 0; padding: 15px 17px; margin: 16px 0;
}
.cita .titular { font-weight: 700; color: var(--azul); font-size: 1.06rem; line-height: 1.4; margin: 0 0 8px }
.cita blockquote {
  margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.06rem;
  line-height: 1.55; color: #14301f;
}
.cita blockquote + blockquote { margin-top: 10px }
.cita p { margin: 9px 0 0; font-size: 1rem }
.cita :last-child { margin-bottom: 0 }

/* bloque de nuestra lectura / opinión */
.lectura {
  background: #f5f5f4; border: 1px solid #dcdcd8; border-left: 5px solid #5f6360;
  border-radius: 0 12px 12px 0; padding: 15px 17px; margin: 16px 0;
}
.lectura :last-child { margin-bottom: 0 }

.criterio {
  background: var(--papel); border: 1px solid var(--linea); border-left: 5px solid var(--azul);
  border-radius: 0 12px 12px 0; padding: 15px 17px; margin: 16px 0;
}
.criterio :last-child { margin-bottom: 0 }

/* ============================================================================
   CAJA DE ALERTA — el aviso crítico de cada guía (§5)
   ========================================================================== */
.alerta {
  background: var(--rojo-cl); border: 1px solid #eccdb9; border-left: 6px solid var(--rojo);
  border-radius: 0 14px 14px 0; padding: 17px 19px; margin: 20px 0;
}
.alerta .rotulo {
  font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--rojo-d); margin: 0 0 8px;
}
.alerta .titular { font-family: var(--serif); font-size: 1.3rem; line-height: 1.32; color: var(--azul); font-weight: 600; margin: 0 0 10px }
.alerta blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.04rem; line-height: 1.55; color: #46301f }
.alerta :last-child { margin-bottom: 0 }

/* ---------------------------------------------------------- bloque confianza */
.confianza {
  background: var(--crema); border: 1px solid var(--linea); border-radius: 14px;
  padding: 15px 17px; margin: 18px 0;
}
.confianza p { margin: 0; font-size: 1rem; line-height: 1.55 }
.confianza p + p { margin-top: 8px }

/* --------------------------------------------------------------------- caja */
.caja { background: var(--bg); border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; margin: 16px 0; box-shadow: var(--sombra) }
.caja.papel { background: var(--papel); box-shadow: none }
.caja :last-child { margin-bottom: 0 }

/* ============================================================================
   TARJETAS DE OPCIÓN — 3 columnas en escritorio, apiladas en móvil (§5)
   ========================================================================== */
.opciones { display: grid; gap: 14px; margin: 18px 0 }
@media (min-width: 820px) { .opciones { grid-template-columns: repeat(3, 1fr); align-items: start } }

.opcion { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: var(--bg); box-shadow: var(--sombra) }
.opcion .cab {
  padding: 12px 15px; color: #fff; font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; gap: 9px; line-height: 1.3;
}
.opcion .cab .sig {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); display: flex; align-items: center;
  justify-content: center; font-size: .95rem; font-weight: 800;
}
.opcion .cuerpo-op { padding: 14px 15px; font-size: 1rem; line-height: 1.55 }
.opcion .cuerpo-op :last-child { margin-bottom: 0 }
.opcion.mala .cab { background: var(--rojo) }
.opcion.media .cab { background: var(--dorado-d) }
.opcion.buena .cab { background: var(--verde) }
.opcion.buena { border-color: var(--verde); border-width: 2px }
.pie-opciones { font-size: .95rem; margin: 4px 0 0 }

/* ------------------------------------------------------------ pasos con círculo */
ol.pasos { list-style: none; counter-reset: p; margin: 18px 0; padding: 0 }
ol.pasos > li {
  counter-increment: p; position: relative; padding: 0 0 0 47px; margin: 0 0 18px;
  min-height: 34px; font-size: 1.04rem; line-height: 1.58;
}
ol.pasos > li:before {
  content: counter(p); position: absolute; left: 0; top: -1px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--azul); color: #fff; font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; font-family: var(--sans);
}
ol.pasos > li:last-child { margin-bottom: 0 }

ul.lista, ol.lista { margin: 0 0 14px; padding-left: 22px }
ul.lista > li, ol.lista > li { margin: 0 0 9px; line-height: 1.58 }

/* ============================================================================
   CHECKLIST — casillas reales, y que sobrevivan a la impresión (§5)
   ========================================================================== */
.check { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; margin: 18px 0 }
.check h3 { margin: 0 0 4px }
.check .sub { font-size: .95rem; color: var(--suave); margin: 0 0 12px }
.check ul { list-style: none; margin: 0; padding: 0 }
.check li { margin: 0 0 4px }
.check label {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  padding: 11px 12px; border-radius: 10px; background: var(--bg);
  border: 1px solid transparent; font-size: 1.02rem; line-height: 1.5;
  min-height: 48px;                                  /* área de toque grande (§8) */
}
.check label:hover { border-color: var(--linea-f) }
.check input[type=checkbox] { flex: 0 0 auto; width: 23px; height: 23px; margin: 2px 0 0; accent-color: var(--verde) }
.check input:checked + span { color: var(--suave); text-decoration: line-through }
.check .acciones { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px }

/* ============================================================================
   TABLA COMPARATIVA — en móvil se apila en tarjetas, NUNCA scroll horizontal
   ========================================================================== */
.tabla-env { margin: 18px 0; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden }
table.comp { width: 100%; border-collapse: collapse; font-size: 1rem; background: var(--bg) }
table.comp caption { caption-side: top; text-align: left; font-size: .92rem; color: var(--suave); padding: 13px 15px 0 }
table.comp th, table.comp td { padding: 13px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea) }
table.comp thead th {
  background: var(--azul); color: #fff; font-size: .78rem; letter-spacing: .05em;
  text-transform: uppercase; font-weight: 700; border-bottom: none;
}
table.comp tbody th { font-weight: 700; color: var(--azul); width: 30%; background: var(--papel) }
table.comp tbody tr:last-child th, table.comp tbody tr:last-child td { border-bottom: none }
table.comp .et { margin-right: 5px }

@media (max-width: 720px) {
  table.comp, table.comp tbody, table.comp tr, table.comp td, table.comp th { display: block; width: auto }
  table.comp caption { display: block; padding: 13px 15px 2px }
  table.comp thead { display: none }
  table.comp tbody tr { border-bottom: 4px solid var(--linea) }
  table.comp tbody tr:last-child { border-bottom: none }
  table.comp tbody th { width: auto; font-size: 1.06rem; border-bottom: 1px solid var(--linea) }
  table.comp td { border-bottom: 1px dashed var(--linea) }
  table.comp td:before {
    content: attr(data-th); display: block; font-size: .72rem; letter-spacing: .07em;
    text-transform: uppercase; color: var(--suave); font-weight: 800; margin-bottom: 3px;
  }
}

/* ============================================================================
   «LO QUE TODAVÍA NO SABEMOS» — no es adorno, es el método. No se recorta (§10)
   ========================================================================== */
.nosabemos {
  background: #f4f4f2; border: 1px solid #dedbd3; border-radius: 14px;
  padding: 17px 19px; margin: 22px 0;
}
.nosabemos h2, .nosabemos h3 { margin-top: 0; color: var(--azul) }
.nosabemos ul { margin: 0 0 12px; padding-left: 22px }
.nosabemos li { margin: 0 0 10px; line-height: 1.55 }
.nosabemos .cierre-hon { font-size: .98rem; color: var(--suave); margin: 0; font-style: italic }

/* ============================================================================
   DESPLEGABLE  (16/08/2026)
   Para lo que es de consulta y no de lectura: checklists, tablas de plazos,
   listas de documentación. La guía se lee de un tirón y quien necesita el
   detalle lo abre. NO se usa para los bloques Ley ni para «Lo que todavía no
   sabemos»: esos van siempre a la vista.
   Se abren solos al imprimir — lo hace guia.js con beforeprint.
   ========================================================================== */
.plegable {
  border: 1px solid var(--linea); border-radius: 14px; background: var(--papel);
  margin: 16px 0; overflow: hidden;
}
.plegable > summary {
  cursor: pointer; list-style: none; padding: 15px 17px; min-height: 54px;
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; color: var(--azul); font-size: 1.05rem; line-height: 1.35;
}
.plegable > summary::-webkit-details-marker { display: none }
.plegable > summary:hover { background: #f4f1e8 }
.plegable > summary .txt { flex: 1 1 auto; min-width: 0 }
.plegable > summary .pista {
  display: block; font-weight: 400; font-size: .88rem; color: var(--suave); margin-top: 2px;
}
.plegable > summary .fl {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--azul); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: .95rem; font-weight: 700; transition: transform .18s;
}
.plegable > summary .fl:after { content: '+' }
.plegable[open] > summary .fl:after { content: '–' }
.plegable[open] > summary { border-bottom: 1px solid var(--linea) }
.plegable .interior { padding: 4px 17px 16px }
.plegable .interior > :first-child { margin-top: 12px }
.plegable .interior > :last-child { margin-bottom: 0 }
/* dentro de un desplegable, los bloques ya no necesitan su propio marco */
.plegable .check, .plegable .tabla-env { background: none; border: none; margin: 12px 0; padding: 0 }
.plegable .check label { background: var(--bg) }

/* -------------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: 12px; padding: 15px 20px; min-height: 54px;
  font: 700 1.05rem var(--sans); cursor: pointer; text-decoration: none; text-align: center;
}
.btn.prim { background: var(--azul); color: #fff }
.btn.prim:hover { background: #17253d }
.btn.wa { background: #1faa52; color: #fff }
.btn.wa:hover { background: #189044 }
.btn.oro { background: var(--dorado); color: #fff }
.btn.oro:hover { background: var(--dorado-d) }
.btn.borde { background: var(--bg); color: var(--azul); border: 2px solid var(--linea-f) }
.btn.borde:hover { border-color: var(--dorado) }
.btn.ancho { width: 100% }
.btn.chico { min-height: 46px; padding: 11px 16px; font-size: .95rem }

/* --------------------------------------------------------------- compartir */
.compartir {
  background: var(--crema); border: 1px solid var(--linea); border-left: 5px solid var(--dorado);
  border-radius: 14px; padding: 17px 19px; margin: 22px 0;
}
.compartir h2 { font-size: 1.28rem; margin: 0 0 8px }
.compartir p { font-size: 1.03rem; margin: 0 0 13px }
.compartir .fino { font-size: .93rem; color: var(--suave); margin: 11px 0 0; text-align: center }
.compartir.arriba { margin: 18px 0 22px; padding: 14px 16px }
.compartir.arriba p { margin: 0 0 11px }

/* --------------------------------------------------------------- CTA a la app */
.cta-app {
  background: var(--azul); color: #fff; border-radius: 16px; padding: 22px 20px; margin: 24px 0;
}
.cta-app h2 { color: #fff; margin: 0 0 8px; font-size: 1.42rem }
.cta-app p { color: #dfe5ef; font-size: 1.03rem; margin: 0 0 16px }
.cta-app .btn.oro { width: 100% }

/* ------------------------------------------------------------------- Pablo */
.pablo { display: flex; gap: 14px; align-items: flex-start; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; margin: 20px 0 }
.pablo .ini {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--azul); color: #fff;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.pablo .n { font-weight: 700; color: var(--azul); font-size: 1.05rem; line-height: 1.3 }
.pablo p { font-size: 1rem; margin: 5px 0 11px; line-height: 1.55 }

/* -------------------------------------------------------------- aviso legal */
.legal {
  font-size: .95rem; line-height: 1.6; color: #3d403c; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 12px; padding: 15px 17px; margin: 22px 0;
}
.legal b { color: var(--azul) }
.legal :last-child { margin-bottom: 0 }

.pie { margin-top: 26px; color: var(--suave); font-size: .88rem; line-height: 1.6; border-top: 1px solid var(--linea); padding-top: 18px }
.pie a { color: var(--suave); text-underline-offset: 3px }

/* ============================================================================
   BARRA FLOTANTE EN MÓVIL — dos acciones, y se puede cerrar (§4.9)
   No aparece hasta que se ha leído algo, y desaparece al llegar al cierre.
   ========================================================================== */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--linea-f);
  box-shadow: 0 -3px 16px rgba(33, 50, 81, .12);
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
  display: none; gap: 8px; align-items: center;
}
.barra.on { display: flex }
.barra .btn { flex: 1 1 0; min-height: 50px; padding: 11px 10px; font-size: .97rem; border-radius: 11px }
.barra .cerrar {
  flex: 0 0 auto; width: 40px; height: 50px; border: none; background: none;
  color: var(--suave); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 10px;
}
.barra .cerrar:hover { background: var(--papel); color: var(--texto) }
@media (min-width: 768px) { .barra { display: none !important } }

/* ============================================================================
   ÍNDICE DE GUÍAS  /incendio/guias/
   ========================================================================== */
.tarjeta {
  display: block; text-decoration: none; color: inherit; background: var(--bg);
  border: 1px solid var(--linea); border-left: 5px solid var(--dorado); border-radius: 14px;
  padding: 17px 19px; margin: 14px 0; box-shadow: var(--sombra);
}
.tarjeta:hover { border-color: var(--dorado); box-shadow: 0 3px 10px rgba(33, 50, 81, .1) }
.tarjeta h2 { font-size: 1.28rem; margin: 0 0 6px; line-height: 1.28 }
.tarjeta p { font-size: 1.02rem; color: #3d403c; margin: 0 0 10px }
.tarjeta .datos { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; font-size: .88rem; color: var(--suave) }
.tarjeta .leer { font-weight: 700; color: var(--dorado-d) }
.urgente { background: var(--rojo); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px }
.tarjeta.destacada { border-left-color: var(--rojo) }
.tarjeta.pronto { border-left-color: var(--linea-f); opacity: .78 }
.tarjeta.pronto .leer { color: var(--suave) }

/* ============================================================================
   ENLACE A OTRA GUÍA  (rediseñado el 16/08/2026)
   Antes era una caja con una frase y una flecha, y la gente no entendía que
   fuera otra página. Ahora lleva icono, la etiqueta «Lectura recomendada» y un
   «Leer la guía →» explícito: se ve que es un enlace a otra guía, no un aviso.
   ========================================================================== */
.mas-guias { margin: 24px 0 }
.mas-guias > .rotulo {
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--suave); margin: 0 0 10px; padding-top: 18px; border-top: 1px solid var(--linea);
}

.ver-guia {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--bg); border: 1.5px solid var(--linea); border-radius: 14px;
  padding: 14px 16px; margin: 10px 0; text-decoration: none; color: inherit;
  box-shadow: var(--sombra);
}
.ver-guia:hover { border-color: var(--dorado); box-shadow: 0 3px 10px rgba(33, 50, 81, .1) }
.ver-guia .icono {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: var(--crema); border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.ver-guia .cuerpo-vg { flex: 1 1 auto; min-width: 0 }
.ver-guia .r {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dorado-d); margin-bottom: 3px;
}
.ver-guia .t { display: block; font-weight: 700; color: var(--azul); font-size: 1.04rem; line-height: 1.35 }
.ver-guia .d { display: block; font-size: .92rem; color: var(--suave); line-height: 1.45; margin-top: 3px }
.ver-guia .ir { display: block; font-size: .9rem; font-weight: 700; color: var(--dorado-d); margin-top: 7px }
.ver-guia .ir:after { content: ' →' }

/* ============================================================================
   IMPRESIÓN / GUARDAR EN PDF  (§6.4 y §11.3)
   ========================================================================== */
@media print {
  @page { margin: 14mm 13mm }

  body { font-size: 10.5pt; line-height: 1.45; color: #000; background: #fff }
  .env { max-width: none; padding: 0 }

  /* Los desplegables se imprimen ABIERTOS. guia.js les pone el atributo `open`
     al recibir beforeprint; esto es la red de seguridad para navegadores que
     impriman sin JavaScript. Un PDF con secciones ocultas no serviría de nada. */
  .plegable > summary { list-style: none }
  .plegable > summary .fl { display: none }
  .plegable:not([open]) > .interior { display: block !important }
  .plegable { background: #fff; border: 1pt solid #999 }
  .plegable > summary { padding: 0; min-height: 0; border-bottom: none }
  .plegable .interior { padding: 0 }

  .mas-guias, .ver-guia { display: none !important }   /* en papel no sirven de nada */

  .top { border-bottom: 1.2pt solid #000; padding: 0 0 6pt; margin-bottom: 10pt; align-items: flex-start }
  /* en A4 el descriptivo de marca se comía la línea del sello */
  .marca .n { font-size: 15pt }
  .marca .s { font-size: 6pt; letter-spacing: .08em; margin-top: 2pt }
  .sello { font-size: 7.5pt; padding: 4pt 9pt }
  .migas, .indice, .compartir, .barra, .cta-app, .no-print, #cookie-banner { display: none !important }

  h1 { font-size: 19pt; margin-bottom: 5pt }
  h2 { font-size: 13.5pt; margin: 13pt 0 5pt }
  h3 { font-size: 11.5pt }
  .subtitulo { font-size: 12pt }
  .entradilla { font-size: 11pt }
  h1, h2, h3 { page-break-after: avoid }

  .cita, .alerta, .lectura, .criterio, .caja, .opcion, .check, .nosabemos, .legal, .pablo, .confianza,
  .tabla-env, ol.pasos > li { page-break-inside: avoid }

  /* los colores de las etiquetas SÍ se imprimen: son la señal de qué es literal */
  .et, .opcion .cab, table.comp thead th, .urgente {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .cita, .alerta, .nosabemos, .confianza { -webkit-print-color-adjust: exact; print-color-adjust: exact }

  .opciones { display: block }
  .opcion { margin-bottom: 9pt }

  /* la checklist se imprime en blanco, para rellenar a bolígrafo */
  .check { page-break-before: auto }
  .check input[type=checkbox] {
    -webkit-appearance: none; appearance: none; width: 13pt; height: 13pt;
    border: 1pt solid #000; border-radius: 2pt; background: #fff;
  }
  .check input:checked + span { text-decoration: none; color: #000 }
  .check .acciones { display: none }

  a { color: #000; text-decoration: none }
  .cuerpo a[href^="http"]:after, .legal a[href^="http"]:after {
    content: " (" attr(href) ")"; font-size: 8pt; color: #444; word-break: break-all;
  }

  .pie { margin-top: 12pt; font-size: 8.5pt }
  .pie:after {
    content: "Descargado de arbolex.es/incendio/guias — comprueba en la web si hay una versión más reciente.";
    display: block; margin-top: 5pt; color: #444;
  }
}