/* ============================================================================
   estilos.css — Sistema visual
   Guía de gestión del riesgo · Casanare · CEDCO
   Look At Me — Agencia Digital

   Tema claro único. Sin degradados, sin sombras, sin animación decorativa.
   Sin fuentes web ni dependencias externas: 0 KB de red.
   TODO color vive en el bloque :root. Ningún componente lleva un hexadecimal
   suelto: si hace falta un color nuevo, se declara arriba como variable.
   ========================================================================== */

:root{
  color-scheme: light;

  /* --- Marca ------------------------------------------------------------- */
  --naranja:        #F1592A;   /* marca y acción. NUNCA texto de cuerpo      */
  --naranja-texto:  #C43D12;   /* única variante admitida para texto  5,2:1  */
  --pizarra:        #2A3A49;   /* base institucional y texto principal       */

  /* --- Neutrales --------------------------------------------------------- */
  --blanco:         #FFFFFF;
  --arena:          #F6F1E7;   /* fondo alterno de lectura                   */
  --niebla:         #E4E8EB;   /* bordes y separadores                       */
  --gris-texto:     #54616E;   /* texto secundario                    6,3:1  */

  /* --- Temáticos por módulo ---------------------------------------------- */
  --verde:          #2F6B4F;   --verde-tinte:    #E9F2ED;
  --azul:           #1B5E9E;   --azul-tinte:     #E8F0F8;
  --ladrillo:       #8F2E14;   --ladrillo-tinte: #F7EAE6;
  --mostaza:        #8A5A08;   --mostaza-tinte:  #F7F0E0;

  /* --- Velos (únicos colores translúcidos del sistema) -------------------- */
  --velo-claro:     rgba(255,255,255,.20);  /* sobre --pizarra               */
  --velo-oscuro:    rgba(42,58,73,.55);     /* fondo de la hoja              */

  /* --- Tema activo. Lo reemplaza cada módulo; por defecto, institucional -- */
  --tema:           var(--pizarra);
  --tema-tinte:     var(--arena);
  --tema-texto:     var(--blanco);          /* texto sobre --tema            */

  /* --- Métrica ----------------------------------------------------------- */
  --r-s: 6px;  --r-m: 10px;  --r-l: 14px;
  --toque: 52px;               /* área táctil mínima (mínimo exigido: 48)    */
  --ancho: 640px;

  /* --- Tipografía del sistema: 0 KB de descarga -------------------------- */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            "Noto Sans", Arial, sans-serif;
}

/* Temas de módulo. Un solo color temático por pantalla. */
.vista[data-tema="finca"]{ --tema: var(--verde);    --tema-tinte: var(--verde-tinte); }
.vista[data-tema="agua"] { --tema: var(--azul);     --tema-tinte: var(--azul-tinte); }
.vista[data-tema="fuego"]{ --tema: var(--ladrillo); --tema-tinte: var(--ladrillo-tinte); }
.vista[data-tema="rayo"] { --tema: var(--mostaza);  --tema-tinte: var(--mostaza-tinte); }
/* "clima" y "emergencia" usan el tema institucional por defecto. */

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

/* El atributo hidden debe ganarle a cualquier display de clase. */
[hidden]{ display:none !important; }

body{
  margin:0;
  background: var(--blanco);
  color: var(--pizarra);
  font-family: var(--fuente);
  font-size: 18px;               /* mínimo del proyecto */
  line-height: 1.6;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  padding-bottom: 96px;          /* aire para el botón fijo de emergencias */
}

h1,h2,h3,h4{ line-height:1.2; margin:0 0 .4em; font-weight:800; }
h1{ font-size: clamp(28px, 7.5vw, 38px); }
h2{ font-size: clamp(23px, 5.6vw, 29px); }
h3{ font-size: clamp(20px, 4.6vw, 23px); }
p{ margin:0 0 1em; }
a{ color: var(--naranja-texto); }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0 0 1em; padding-left:0; list-style:none; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:3px solid var(--naranja-texto); outline-offset:3px; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--pizarra); color:var(--blanco); padding:14px 18px; font-weight:800;
}
.saltar:focus{ left:0; }

.env{ width:100%; max-width:var(--ancho); margin:0 auto; padding-inline:18px; }

.nota-suave{ font-size:15px; color:var(--gris-texto); margin:0 0 14px; }

/* ============================ BARRA SUPERIOR ============================== */
.barra{
  position:sticky; top:0; z-index:60;
  background:var(--pizarra); color:var(--blanco);
  border-bottom:3px solid var(--naranja);
}
.barra__fila{ display:flex; align-items:center; gap:12px; min-height:62px; padding-block:9px; }
/* Placa naranja bajo el logo: es el lockup propio de CEDCO (logo blanco
   sobre campo naranja). Se dibuja con CSS, no va quemada en el archivo:
   0 KB extra, borde nítido en cualquier densidad de pantalla y el tono
   queda atado al token de la paleta. */
.barra__logo{
  height:36px; width:auto; flex:0 0 auto;
  background:var(--naranja); padding:6px 10px; border-radius:var(--r-m);
  box-sizing:content-box;
}
.barra__texto{ flex:1 1 auto; min-width:0; }
.barra__sub{
  font-size:14.5px; font-weight:700; margin:0; color:var(--niebla); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.barra__atras{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:var(--toque); min-height:48px; padding:0 12px;
  background:var(--velo-claro); border:0; border-radius:var(--r-s);
  color:var(--blanco); font-weight:800; font-size:15px; cursor:pointer;
}

/* Progreso */
.progreso{ background:var(--pizarra); padding:8px 0 12px; }
.progreso__fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.progreso__txt{ font-size:13.5px; color:var(--niebla); font-weight:700; }
.progreso__pista{ height:8px; background:var(--velo-claro); border-radius:99px; overflow:hidden; margin-top:7px; }
.progreso__barra{ height:100%; background:var(--naranja); border-radius:99px; width:0; }
.progreso__puntos{ display:flex; gap:5px; }
.progreso__punto{ width:9px; height:9px; border-radius:99px; background:var(--velo-claro); }
.progreso__punto.is-hecho{ background:var(--naranja); }
.progreso__punto.is-actual{ background:var(--blanco); }

/* ================================ VISTAS ================================= */
.vista{ display:none; padding-block:26px 40px; }
.vista.is-activa{ display:block; }

/* ================================ INICIO ================================= */
/* Portada en tres franjas.
   1. Titular sobre pizarra: el texto va en HTML, no dentro de la imagen.
      Así es nítido a cualquier tamaño, se edita desde contenido.js, lo lee
      un lector de pantalla y no pesa un solo kilobyte.
   2. Ilustración: su borde superior debe fundirse en pizarra y el inferior
      en arena, para que las tres franjas se lean como una sola pieza.
   3. Cuerpo sobre arena. */
.hero{
  background:var(--arena); border:2px solid var(--niebla); border-radius:var(--r-l);
  overflow:hidden; margin-bottom:22px;
}
.hero__titular{ background:var(--pizarra); color:var(--blanco); padding:26px 20px 24px; }
.hero__kicker{
  position:relative; display:block; margin:0 0 14px; padding-left:15px;
  font-size:12.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--niebla);
}
.hero__kicker::before{
  content:""; position:absolute; left:0; top:.2em;
  width:6px; height:1em; background:var(--naranja);
}
.hero__titular h1{ color:var(--blanco); margin:0 0 .35em; font-size:clamp(30px, 8vw, 42px); }
.hero__sub{ font-size:18px; color:var(--niebla); margin:0; }
.hero__figura{ position:relative; aspect-ratio:16/9; background:var(--pizarra); }
.hero__cuerpo{ padding:22px 20px 24px; background:var(--arena); }
.hero__texto{ font-size:18px; color:var(--pizarra); margin:0; }

.datos{ display:flex; gap:10px; margin:18px 0 0; }
.dato{
  flex:1; background:var(--blanco); border:2px solid var(--niebla);
  border-radius:var(--r-m); padding:12px 10px; text-align:center;
}
.dato__v{ display:block; font-size:24px; font-weight:800; color:var(--naranja-texto); line-height:1.1; }
.dato__t{ font-size:12.5px; color:var(--gris-texto); line-height:1.3; }

/* ============================== BOTONES ================================== */
.boton{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:var(--toque); padding:14px 18px;
  border:2px solid transparent; border-radius:var(--r-m);
  font-size:19px; font-weight:800;         /* 19px: mínimo sobre --naranja */
  cursor:pointer; text-decoration:none; text-align:center;
}
/* Texto --pizarra sobre --naranja: 3,45:1 — válido solo en negrita ≥19 px. */
.boton--primario{ background:var(--naranja); color:var(--pizarra); border-color:var(--naranja); }
.boton--primario:hover{ background:var(--naranja-texto); color:var(--blanco); border-color:var(--naranja-texto); }
.boton--secundario{ background:var(--blanco); color:var(--pizarra); border-color:var(--pizarra); }
.boton--secundario:hover{ background:var(--arena); }
.boton--oscuro{ background:var(--pizarra); color:var(--blanco); border-color:var(--pizarra); }
.botones{ display:grid; gap:11px; margin-top:18px; }

/* Acciones de portada: apiladas y a ancho completo. */
.acciones{ display:grid; gap:11px; margin:18px 0 20px; }

/* Acceso a emergencias: mismo peso que el principal, distinta forma.
   Muestra el número a la vista para no exigir un toque de más. */
.eme{
  display:flex; width:100%; align-items:center; gap:14px; text-align:left;
  min-height:var(--toque); padding:11px 18px 11px 14px;
  background:var(--pizarra); color:var(--blanco);
  border:2px solid var(--pizarra); border-left:6px solid var(--naranja);
  border-radius:var(--r-m); cursor:pointer;
}
.eme:hover{ background:var(--naranja-texto); border-color:var(--naranja-texto); }
.eme svg{ width:20px; height:20px; flex:0 0 auto; }
.eme__t{
  display:block; font-size:12px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--niebla); line-height:1.2;
}
.eme__n{ display:block; font-size:23px; font-weight:800; color:var(--blanco); line-height:1.15; }

/* ======================== ÍNDICE DE MÓDULOS ============================== */
.seccion-titulo{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:34px 0 14px; }
.seccion-titulo h2{ margin:0; }
.etiqueta-mini{ font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gris-texto); }

.lista-modulos{ display:grid; gap:12px; }
.tarjeta-modulo{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-l);
  padding:15px 16px; min-height:var(--toque); cursor:pointer;
}
.tarjeta-modulo:hover{ border-color:var(--pizarra); }
.tarjeta-modulo.is-hecho{ background:var(--arena); }
.tarjeta-modulo__num{
  flex:0 0 48px; height:48px; border-radius:var(--r-m); display:grid; place-items:center;
  font-size:21px; font-weight:800; color:var(--blanco);
}
.tarjeta-modulo__txt{ flex:1 1 auto; min-width:0; }
.tarjeta-modulo__t{ display:block; font-size:18px; font-weight:800; line-height:1.25; margin:0 0 2px; }
.tarjeta-modulo__s{ display:block; font-size:14.5px; color:var(--gris-texto); line-height:1.35; margin:0; }
.tarjeta-modulo__meta{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:13px; color:var(--gris-texto); }
.tarjeta-modulo__flecha{ flex:0 0 auto; color:var(--gris-texto); }
.pastilla-ok{
  display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:800;
  color:var(--verde); background:var(--verde-tinte); padding:3px 9px; border-radius:99px;
}

/* Distintivo de módulo: color + número + rótulo (nunca solo color). */
.c-clima      { background:var(--pizarra); }
.c-finca      { background:var(--verde); }
.c-agua       { background:var(--azul); }
.c-fuego      { background:var(--ladrillo); }
.c-rayo       { background:var(--mostaza); }
.c-emergencia { background:var(--naranja); color:var(--pizarra) !important; }

/* ============================== MÓDULO =================================== */
.modulo__cabeza{ margin-bottom:18px; }
.modulo__eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--blanco);
  padding:6px 12px; border-radius:var(--r-s); margin-bottom:12px;
}
.modulo__sub{ font-size:18px; color:var(--gris-texto); margin:0; }
.modulo__banner{
  aspect-ratio:16/9; border-radius:var(--r-l); overflow:hidden; margin:16px 0 4px;
  background:var(--tema-tinte); border:2px solid var(--niebla);
}

.seccion{
  margin-top:24px; background:var(--tema-tinte);
  border:2px solid var(--niebla); border-radius:var(--r-l); padding:18px 16px;
}
.seccion > h3{
  font-size:21px; margin-bottom:14px; padding-bottom:10px;
  border-bottom:3px solid var(--tema); color:var(--pizarra);
}

/* --- bloques de contenido ------------------------------------------------ */
.instruccion{
  font-size:14.5px; font-weight:700; color:var(--gris-texto);
  display:flex; align-items:center; gap:7px; margin:0 0 10px;
}
.instruccion::before{ content:"›"; font-size:20px; color:var(--naranja-texto); font-weight:800; line-height:1; }

.lista{ display:grid; gap:10px; margin-bottom:16px; }
.lista li{ position:relative; padding-left:30px; font-size:18px; line-height:1.5; }
.lista li::before{
  content:""; position:absolute; left:6px; top:.6em;
  width:10px; height:10px; border-radius:99px; background:var(--tema);
}

.nota{
  background:var(--blanco); border:2px solid var(--niebla); border-left:6px solid var(--tema);
  border-radius:var(--r-m); padding:14px 16px; margin:0 0 16px; font-size:17.5px;
}
.frase{
  background:var(--pizarra); color:var(--blanco); border-radius:var(--r-l);
  padding:20px 18px; margin:20px 0; font-size:19.5px; font-weight:700; line-height:1.4;
}
.frase::before{
  content:""; display:block; width:44px; height:5px; background:var(--naranja);
  border-radius:99px; margin-bottom:12px;
}
.porque{
  background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-m);
  padding:13px 15px; font-size:17px; margin:12px 0 0;
}
.porque strong{
  color:var(--naranja-texto); display:block; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px;
}

.aviso{
  background:var(--mostaza-tinte); border:2px solid var(--mostaza);
  border-radius:var(--r-m); padding:14px 16px; margin:16px 0;
}
.aviso__t{ font-weight:800; font-size:17.5px; margin:0 0 4px; color:var(--mostaza); }
.aviso p{ margin:0; font-size:17px; color:var(--pizarra); }

.urgente{
  background:var(--ladrillo-tinte); border:2px solid var(--ladrillo);
  border-radius:var(--r-l); padding:17px 16px; margin:16px 0;
}
.urgente p{ font-size:18px; margin:0 0 14px; }

/* --- pasos --------------------------------------------------------------- */
.pasos{ display:grid; gap:10px; margin-bottom:18px; }
.paso{ background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-m); overflow:hidden; }
.paso.is-abierto{ border-color:var(--tema); }
.paso__btn{
  display:flex; align-items:center; gap:13px; width:100%; min-height:var(--toque);
  padding:13px 15px; background:none; border:0; text-align:left; cursor:pointer;
  font-weight:700; font-size:17.5px;
}
.paso__n{
  flex:0 0 38px; height:38px; border-radius:99px; background:var(--tema); color:var(--tema-texto);
  display:grid; place-items:center; font-size:17px; font-weight:800;
}
.paso__t{ flex:1 1 auto; line-height:1.3; }
.paso__cuerpo{ padding:0 15px 15px 66px; font-size:17.5px; }

/* --- acordeón ------------------------------------------------------------ */
.acordeon{ display:grid; gap:10px; margin-bottom:18px; }
.acordeon__item{ background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-m); overflow:hidden; }
.acordeon__item.is-abierto{ border-color:var(--tema); }
.acordeon__btn{
  display:flex; align-items:center; gap:13px; width:100%; min-height:var(--toque);
  padding:14px 15px; background:none; border:0; text-align:left; cursor:pointer;
}
.acordeon__n{
  flex:0 0 40px; height:40px; border-radius:var(--r-s); background:var(--tema); color:var(--tema-texto);
  display:grid; place-items:center; font-size:19px; font-weight:800;
}
.acordeon__t{ flex:1 1 auto; font-size:18px; font-weight:800; line-height:1.3; }
.acordeon__mas{ flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; color:var(--tema); }
.acordeon__item.is-abierto .acordeon__mas,
.paso.is-abierto .acordeon__mas,
.alterna__item.is-abierto .acordeon__mas{ transform:rotate(45deg); }
.acordeon__cuerpo{ padding:2px 16px 16px; }
.acordeon__cuerpo .lista{ margin-bottom:0; }

/* --- pestañas (antes/durante/después) ------------------------------------ */
.tabs{ margin-bottom:18px; }
.tabs__barra{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-m); padding:5px;
  position:sticky; top:118px; z-index:20;
}
.tabs__btn{
  min-height:48px; border:0; border-radius:var(--r-s); background:none; cursor:pointer;
  font-size:15px; font-weight:800; color:var(--gris-texto); padding:6px 4px;
}
.tabs__btn[aria-selected="true"]{ background:var(--tema); color:var(--tema-texto); }
.tabs__panel{ padding-top:16px; }
.tabs__sub{ font-size:16.5px; color:var(--gris-texto); font-weight:700; margin:0 0 12px; }

/* --- comparador ---------------------------------------------------------- */
.comparador{ margin-bottom:18px; }
.comparador__barra{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.comparador__btn{
  min-height:58px; border-radius:var(--r-m); border:2px solid var(--niebla); background:var(--blanco);
  font-size:15.5px; font-weight:800; line-height:1.25; cursor:pointer; padding:8px 10px; color:var(--gris-texto);
}
.comparador__btn[aria-selected="true"]{ color:var(--blanco); }
.comparador__btn[data-tono="agua"][aria-selected="true"]{ background:var(--azul); border-color:var(--azul); }
.comparador__btn[data-tono="fuego"][aria-selected="true"]{ background:var(--ladrillo); border-color:var(--ladrillo); }
.comparador__panel{ border-radius:var(--r-m); padding:16px; border:2px solid var(--niebla); background:var(--blanco); }
.comparador__panel[data-tono="agua"] .lista li::before{ background:var(--azul); }
.comparador__panel[data-tono="fuego"] .lista li::before{ background:var(--ladrillo); }

/* --- alterna (dos conceptos) --------------------------------------------- */
.alterna{ display:grid; gap:10px; margin-bottom:18px; }
.alterna__item{ border:2px solid var(--niebla); border-radius:var(--r-m); background:var(--blanco); overflow:hidden; }
.alterna__item.is-abierto{ border-color:var(--tema); }
.alterna__item[data-tono="agua"].is-abierto{ border-color:var(--azul); }
.alterna__item[data-tono="fuego"].is-abierto{ border-color:var(--ladrillo); }
.alterna__btn{
  width:100%; min-height:var(--toque); padding:14px 15px; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left;
  font-size:18px; font-weight:800;
}
.alterna__cuerpo{ padding:0 15px 15px; font-size:17.5px; }

/* --- cifras -------------------------------------------------------------- */
.cifras{ display:grid; gap:11px; margin-bottom:18px; }
.cifra{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-m); padding:14px 15px;
}
.cifra__v{ flex:0 0 auto; min-width:78px; font-size:22px; font-weight:800; color:var(--naranja-texto); line-height:1.15; }
.cifra__t{ font-size:17px; line-height:1.45; }

/* --- checklist ----------------------------------------------------------- */
.check{ display:grid; gap:9px; margin-bottom:16px; }
.check__item{
  display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left;
  background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-m);
  padding:13px 15px; min-height:var(--toque); cursor:pointer; font-size:17.5px; line-height:1.45;
}
.check__caja{
  flex:0 0 28px; width:28px; height:28px; border:3px solid var(--gris-texto); border-radius:var(--r-s);
  display:grid; place-items:center; margin-top:1px; color:transparent;
}
.check__item.is-marcado{ border-color:var(--verde); background:var(--verde-tinte); }
.check__item.is-marcado .check__caja{ background:var(--verde); border-color:var(--verde); color:var(--blanco); }

/* --- kit de 3 bolsas ----------------------------------------------------- */
.kit{ border:2px solid var(--azul); border-radius:var(--r-l); overflow:hidden; margin:18px 0; background:var(--blanco); }
.kit__cabeza{ background:var(--azul); color:var(--blanco); padding:14px 16px; }
.kit__cabeza h4{ margin:0; font-size:19px; }
.kit__cabeza p{ margin:4px 0 0; font-size:14.5px; color:var(--niebla); }
.kit__figura{ position:relative; background:var(--arena); border-top:2px solid var(--niebla); }
/* contain, no cover: el kit es una rejilla y recortarla cortaría contenido */
.kit__figura .img-llena{ object-fit:contain; }
.kit__bolsa{ border-top:2px solid var(--niebla); }
.kit__bolsa:first-child{ border-top:0; }
.kit__nombre{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px 6px; font-size:16px; font-weight:800; color:var(--azul); text-transform:uppercase;
}
.kit__conteo{ font-size:13px; font-weight:800; color:var(--gris-texto); background:var(--arena); border-radius:99px; padding:3px 10px; }
.kit__items{ padding:0 12px 12px; display:grid; gap:7px; }
.kit__items .check__item{ padding:11px 13px; min-height:48px; font-size:17px; }

/* --- umbral (30 cm / 50 cm) ---------------------------------------------- */
.umbral{ background:var(--azul); color:var(--blanco); border-radius:var(--r-l); padding:18px 16px; margin:18px 0; }
.umbral h4{ margin:0 0 4px; font-size:21px; color:var(--blanco); }
.umbral > p{ margin:0 0 14px; color:var(--niebla); font-size:17px; }
.umbral__medidas{ display:grid; gap:9px; }
.umbral__m{ display:flex; align-items:center; gap:13px; background:var(--velo-claro); border-radius:var(--r-m); padding:12px 14px; }
.umbral__v{ flex:0 0 auto; font-size:26px; font-weight:800; line-height:1; min-width:80px; }
.umbral__t{ font-size:16.5px; line-height:1.35; }
.umbral__cierre{ margin:14px 0 0; font-weight:700; font-size:17.5px; }

/* --- guion de llamada ---------------------------------------------------- */
.guion{ display:grid; gap:9px; counter-reset:g; margin-bottom:16px; padding:0; }
.guion li{
  counter-increment:g; display:flex; gap:13px; align-items:flex-start;
  background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-m);
  padding:13px 15px; font-size:17.5px; list-style:none;
}
.guion li::before{
  content:counter(g); flex:0 0 34px; height:34px; border-radius:99px;
  background:var(--pizarra); color:var(--blanco); display:grid; place-items:center;
  font-weight:800; font-size:16px;
}

/* --- comprobación -------------------------------------------------------- */
.comprueba{ background:var(--blanco); border:3px dashed var(--gris-texto); border-radius:var(--r-l); padding:18px 16px; margin:28px 0 0; }
.comprueba__et{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--naranja-texto); margin:0 0 8px; }
.comprueba__q{ font-size:19px; font-weight:800; line-height:1.35; margin:0 0 14px; }
.comprueba__ops{ display:grid; gap:9px; }
.comprueba__op{
  width:100%; text-align:left; min-height:var(--toque); padding:13px 15px;
  background:var(--arena); border:2px solid var(--niebla); border-radius:var(--r-m);
  font-size:17.5px; line-height:1.4; cursor:pointer;
}
.comprueba__op:hover{ border-color:var(--pizarra); }
.comprueba__op.is-ok{ border-color:var(--verde); background:var(--verde-tinte); font-weight:700; }
.comprueba__op.is-mal{ border-color:var(--ladrillo); background:var(--ladrillo-tinte); }
.comprueba__fb{ margin:14px 0 0; padding:13px 15px; border-radius:var(--r-m); font-size:17px; border:2px solid; }
.comprueba__fb.ok{ background:var(--verde-tinte); color:var(--verde); border-color:var(--verde); }
.comprueba__fb.mal{ background:var(--ladrillo-tinte); color:var(--ladrillo); border-color:var(--ladrillo); }

/* --- marcador de imagen pendiente ---------------------------------------- */
.img-llena{ width:100%; height:100%; object-fit:cover; display:block; }
.ph{ width:100%; height:100%; display:grid; place-items:center; text-align:center; padding:16px; }
.ph__txt{ font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gris-texto); margin:0; }
.ph__id{ font-size:12px; color:var(--gris-texto); margin:3px 0 0; }

/* ============================ DIRECTORIO ================================= */
.dir{ display:grid; gap:22px; }
.dir__grupo h4{
  font-size:13.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gris-texto); margin:0 0 10px;
}
.linea-123{ background:var(--pizarra); color:var(--blanco); border-radius:var(--r-l); padding:20px 18px; }
.linea-123__n{ font-size:68px; font-weight:800; line-height:.95; margin:0; color:var(--naranja); }
.linea-123__t{ font-size:19px; font-weight:800; margin:6px 0 8px; color:var(--blanco); }
.linea-123__d{ font-size:16.5px; color:var(--niebla); margin:0 0 16px; }
.linea-123 .boton{ background:var(--naranja); color:var(--pizarra); border-color:var(--naranja); }

.tel{
  display:flex; align-items:center; gap:13px; width:100%;
  background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-m);
  padding:13px 15px; min-height:var(--toque); text-decoration:none; color:var(--pizarra); text-align:left;
}
.tel:hover{ border-color:var(--naranja-texto); background:var(--arena); }
.tel__ico{
  flex:0 0 44px; height:44px; border-radius:var(--r-s); background:var(--arena);
  color:var(--naranja-texto); display:grid; place-items:center;
}
.tel__txt{ flex:1 1 auto; min-width:0; }
.tel__n{ display:block; font-size:21px; font-weight:800; line-height:1.2; color:var(--pizarra); }
.tel__e{ display:block; font-size:14.5px; color:var(--gris-texto); line-height:1.3; }
.dir__lista,.tabla-lineas{ display:grid; gap:9px; }

/* ========================= BOTÓN FIJO EMERGENCIAS ======================== */
.fab{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--blanco); border-top:2px solid var(--niebla);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;
}
.fab__inner{
  max-width:var(--ancho); margin:0 auto; pointer-events:auto;
  display:grid; grid-template-columns:1fr auto; gap:9px;
}
.fab__lista{ width:auto; padding:14px 18px; }
/* El número se puede seleccionar y copiar con pulsación larga: es la salida
   cuando el navegador no permite abrir el marcador (algunos navegadores
   dentro de otras aplicaciones lo bloquean). */
.tel__n, .linea-123__n{ user-select:all; -webkit-user-select:all; }

/* Panel de respaldo: aparece solo si el navegador impide abrir el marcador.
   Muestra el número en grande para marcarlo a mano y permite copiarlo. */
.tel-respaldo{
  margin:10px 0 4px; padding:14px 16px;
  background:var(--pizarra); border-left:6px solid var(--naranja);
  border-radius:var(--r-m);
}
.tel-respaldo__t{
  margin:0 0 6px; font-size:15px; line-height:1.35; color:var(--blanco);
}
.tel-respaldo__n{
  margin:0 0 12px; font-size:34px; font-weight:800; line-height:1.05;
  color:var(--naranja); letter-spacing:.5px;
  user-select:all; -webkit-user-select:all;
}
.tel-respaldo__b{ width:100%; }
.tel-respaldo{ position:relative; }
.tel-respaldo__x{
  position:absolute; top:6px; right:8px; width:34px; height:34px;
  background:none; border:0; padding:0; cursor:pointer;
  font-size:26px; line-height:1; color:var(--blanco); opacity:.75;
}
/* Cuando el enlace está en la barra fija de abajo, el panel flota sobre ella. */
.tel-respaldo--flota{
  position:fixed; z-index:80; left:12px; right:12px;
  bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  max-width:var(--ancho); margin:0 auto;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

/* ============================ HOJA (panel inferior) ====================== */
.hoja-fondo{
  position:fixed; inset:0; z-index:90; background:var(--velo-oscuro);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.hoja-fondo.is-abierta{ opacity:1; pointer-events:auto; }
.hoja{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--blanco); border-top:4px solid var(--naranja);
  border-radius:var(--r-l) var(--r-l) 0 0;
  max-height:90vh; display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .22s ease;
}
.hoja.is-abierta{ transform:none; }
.hoja__cabeza{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px 12px; border-bottom:2px solid var(--niebla); background:var(--blanco);
}
.hoja__cabeza h2{ margin:0; font-size:22px; }
.hoja__x{
  flex:0 0 auto; width:48px; height:48px; border-radius:99px; border:2px solid var(--pizarra);
  background:var(--blanco); color:var(--pizarra); display:grid; place-items:center; cursor:pointer;
}
.hoja__cuerpo{ overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 18px calc(26px + env(safe-area-inset-bottom, 0px)); }

/* =============================== ENCUESTA ================================ */
.encuesta{ background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-l); overflow:hidden; }
.encuesta__cabeza{ background:var(--pizarra); color:var(--blanco); padding:24px 20px; }
.encuesta__kicker{ font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--naranja); margin:0 0 8px; }
.encuesta__cabeza h2{ margin:0 0 10px; color:var(--blanco); }
.encuesta__cabeza p{ margin:0; color:var(--niebla); font-size:18px; }
.encuesta__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip{ font-size:14px; font-weight:700; background:var(--velo-claro); color:var(--blanco); border-radius:99px; padding:6px 12px; }
.encuesta__cuerpo{ padding:20px; }
.legal{ background:var(--arena); border:2px solid var(--niebla); border-radius:var(--r-m); padding:14px 15px; margin-bottom:18px; }
.legal h4{ font-size:14px; margin:0 0 6px; letter-spacing:.04em; text-transform:uppercase; color:var(--gris-texto); }
.legal p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--gris-texto); }

/* Formulario de Google embebido: se responde sin salir de la página. */
.marco__consejo{
  margin:0 0 12px; padding:14px 16px; font-size:17px; line-height:1.5;
  color:var(--pizarra); background:var(--arena);
  border-left:5px solid var(--naranja); border-radius:var(--r-s);
}
.marco__consejo strong{ display:block; font-weight:800; margin-bottom:2px; }
.marco{
  position:relative; width:100%; border:2px solid var(--niebla);
  border-radius:var(--r-m); overflow:hidden; background:var(--arena);
}
.marco iframe{ position:relative; z-index:1; display:block; width:100%; height:100%; border:0; }
.marco__cargando{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center;
  margin:0; padding:20px; text-align:center; font-size:16px; color:var(--gris-texto);
}
.marco__respaldo{
  display:block; margin:12px 0 0; font-size:16px; font-weight:700;
  color:var(--naranja-texto); text-align:center;
}

/* =============================== CIERRE ================================== */
.cierre{ text-align:center; background:var(--blanco); border:2px solid var(--niebla); border-radius:var(--r-l); padding:32px 20px; }
.cierre__ico{
  width:76px; height:76px; border-radius:99px; background:var(--verde-tinte); color:var(--verde);
  display:grid; place-items:center; margin:0 auto 16px; border:3px solid var(--verde);
}
.cierre p{ font-size:18px; color:var(--gris-texto); }
.cierre .botones{ text-align:left; }
.cierre .nota{ text-align:left; }

/* ================================= PIE =================================== */
.pie{ background:var(--pizarra); color:var(--niebla); padding:28px 0 34px; margin-top:44px; font-size:15px; }
.pie__logo{
  height:44px; width:auto; margin-bottom:18px;
  background:var(--naranja); padding:8px 13px; border-radius:var(--r-m);
  box-sizing:content-box;
}
.pie p{ margin:0 0 8px; line-height:1.5; }

/* ============================ SIN CONEXIÓN =============================== */
.offline{
  position:fixed; left:0; right:0; top:0; z-index:120;
  background:var(--mostaza); color:var(--blanco);
  text-align:center; font-weight:800; font-size:15.5px; padding:10px 16px;
  transform:translateY(-100%); transition:transform .2s ease;
}
.offline.is-visible{ transform:none; }

/* ============================== ESCRITORIO =============================== */
@media (min-width:760px){
  :root{ --ancho: 760px; }
  body{ font-size:19px; }
  .barra__fila{ min-height:74px; }
  .barra__logo{ height:44px; padding:7px 12px; }
  .hero__cuerpo{ padding:32px 30px 34px; }
  .botones{ grid-template-columns:1fr 1fr; }
  .botones .boton--ancho{ grid-column:1 / -1; }
  .lista-modulos{ grid-template-columns:1fr 1fr; }
  .cifras{ grid-template-columns:1fr 1fr; }
  .tabs__barra{ top:132px; }
  .fab{ left:auto; right:24px; bottom:24px; background:none; border:0; padding:0; width:auto; }
  .fab__inner{ width:auto; }
  .fab .boton{ padding:16px 26px; }
  .hoja{ left:50%; right:auto; transform:translate(-50%,100%); width:min(680px,94vw);
         border-radius:var(--r-l); bottom:24px; max-height:82vh; }
  .hoja.is-abierta{ transform:translate(-50%,0); }
}

/* ========================= MOVIMIENTO REDUCIDO =========================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; }
}

/* ============================== IMPRESIÓN ================================ */
@media print{
  @page{ size:A4; margin:12mm; }
  /* El pie se imprime sobre blanco: se retira la placa naranja y el logo
     monocromo se invierte a negro para que quede legible en papel. */
  .pie__logo{ filter:invert(1); background:none; padding:0; }
  body{ background:var(--blanco); color:var(--pizarra); font-size:10.5pt; padding:0; line-height:1.35; }
  .barra,.progreso,.fab,.hoja,.hoja-fondo,.offline,.comprueba,
  .botones,.boton,.modulo__banner,.hero__figura,.tabs__barra,.comparador__barra,
  .alterna__btn,.saltar,.encuesta__meta,.marco,.marco__respaldo{ display:none !important; }
  .vista{ display:block !important; padding:0; page-break-inside:avoid; }
  .env{ max-width:none; padding:0; }
  .hero,.frase,.umbral,.linea-123,.encuesta__cabeza,.kit__cabeza,.pie,.seccion{
    background:var(--blanco) !important; color:var(--pizarra) !important;
    border:1pt solid var(--pizarra); }
  .hero__sub,.hero__texto,.dato__t,.dato__v,.linea-123__d,.linea-123__t,.linea-123__n,
  .umbral__t,.umbral h4,.pie p,.encuesta__cabeza h2,.encuesta__cabeza p,
  .kit__cabeza h4,.kit__cabeza p{ color:var(--pizarra) !important; }
  .paso__cuerpo,.acordeon__cuerpo,.alterna__cuerpo,.tabs__panel{ display:block !important; }
  .paso,.acordeon__item,.tarjeta-modulo,.cifra,.check__item,.tel,.guion li{
    border:.5pt solid var(--gris-texto); break-inside:avoid; }
  h1{ font-size:17pt; } h2{ font-size:14pt; } h3{ font-size:12pt; }
  a[href^="tel:"]::after{ content:" (" attr(href) ")"; font-size:9pt; }
}