/* ResPública Seguridad — hoja de estilos del sitio */
:root{
  --arena:#F5F1E8; --arena-2:#EAD9B8; --blanco:#FFFFFF;
  --tinta:#1B2421; --tinta-2:#33403B; --tenue:#5A5145;
  --verde:#1F4D45; --verde-osc:#123029; --verde-claro:#E3EEEA;
  --ocre:#8A4B0F; --miel:#F2C46D; --cafe:#2E2108; --linea:#DDD4C2;
  --display:'Bricolage Grotesque', Georgia, serif;
  --texto:'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --ancho:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--arena);color:var(--tinta);font-family:var(--texto);font-size:18px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde)} a:hover{color:var(--verde-osc)}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
h1,h2,h3{margin:0}
p{margin:0}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.salto{position:absolute;left:-9999px}.salto:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:10}

/* Cabecera */
.cabecera{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinta)}
.marca img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.marca span{display:flex;flex-direction:column;line-height:1}
.marca b{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.5px}
.marca small{font-size:12px;font-weight:700;color:#6B5A3E;margin-top:4px;letter-spacing:2px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-size:16px}
.nav a{text-decoration:none;color:var(--tinta)}
.nav a:hover{text-decoration:underline}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:999px;font-weight:700;font-size:18px;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn-chico{min-height:44px;padding:10px 20px;font-size:16px}
.btn-verde{background:var(--verde);color:#fff}.btn-verde:hover{background:var(--verde-osc);color:#fff}
.btn-borde{border-color:var(--tinta);color:var(--tinta);background:transparent}.btn-borde:hover{background:var(--tinta);color:#fff}
.btn-miel{background:var(--miel);color:var(--cafe)}.btn-miel:hover{background:#e8b553;color:var(--cafe)}
.nav .btn-verde{color:#fff}

/* Tipografía de sección */
.titulo{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.6vw,46px);line-height:1.05;letter-spacing:-1px}
.bajada{color:var(--tinta-2);max-width:40em}
.seccion{padding-block:80px}
.fondo-blanco{background:var(--blanco)}
.cabeza-seccion{display:flex;flex-direction:column;gap:12px;max-width:720px;margin-bottom:40px}
.pastilla{align-self:flex-start;display:inline-block;background:var(--arena-2);color:#5A3F12;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:700}

/* Hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-block:48px 72px}
.hero-texto{flex:1 1 460px;display:flex;flex-direction:column;gap:24px}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,5.2vw,68px);line-height:1.02;letter-spacing:-1.5px}
.hero .bajada{font-size:20px}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.aviso-chico{font-size:15px;color:var(--tenue)}
.hero-tel{flex:0 1 340px;margin:0 auto;display:flex;justify-content:center}
.telefono{width:300px;background:#fff;border:10px solid var(--tinta);border-radius:44px;padding:28px 18px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px -30px rgba(27,36,33,.45)}
.telefono .t-titulo{font-family:var(--display);font-weight:700;font-size:20px}
.estado{background:var(--verde-claro);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:6px}
.estado .ok{width:40px;height:40px;border-radius:999px;background:var(--verde);display:flex;align-items:center;justify-content:center}
.estado b{font-size:17px;color:var(--verde-osc)}
.estado span{font-size:14px;color:var(--tinta-2)}
.zonas{list-style:none;margin:0;padding:0;font-size:15px}
.zonas li{display:flex;justify-content:space-between;padding:10px 4px;border-bottom:1px solid #ECE6DA}
.zonas li:last-child{border-bottom:0}
.zonas .tranquila{color:var(--verde);font-weight:700}.zonas .con-aviso{color:var(--ocre);font-weight:700}
.alerta{background:#FBF3E3;border:1px solid var(--arena-2);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.alerta .cat{font-size:13px;font-weight:700;color:var(--ocre)}
.alerta b{font-size:15px}.alerta span{font-size:13px;color:var(--tenue)}

/* Pasos */
.grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.grilla-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.paso{background:var(--arena);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:12px}
.paso .num{font-family:var(--display);font-weight:800;font-size:48px;line-height:1;color:var(--ocre)}
.paso h3,.tarjeta h3,.ayuda h3{font-size:22px}
.paso p,.tarjeta p,.ayuda p{color:var(--tinta-2)}
.mas{display:inline-block;margin-top:32px;font-weight:700}

/* Comparación */
.comparar{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.comparar>div:first-child{flex:1 1 320px;display:flex;flex-direction:column;gap:16px}
.tabla-caja{flex:2 1 520px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:17px;background:#fff;border-radius:20px;overflow:hidden}
th{text-align:left;padding:18px 20px;font-weight:700}
th:first-child{background:#E9E3D6;color:var(--tenue)} th:last-child{background:var(--verde);color:#fff}
td{padding:16px 20px;border-bottom:1px solid #ECE6DA;vertical-align:top}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--tenue)}

/* Suricata */
.suricata{background:var(--arena-2);padding-block:72px}
.suricata .envoltura{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.suricata img{flex:0 1 280px;margin:0 auto;max-height:340px;width:auto}
.suricata .texto{flex:1 1 420px;display:flex;flex-direction:column;gap:16px}
.suricata h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,42px);line-height:1.08;letter-spacing:-1px;color:var(--cafe)}
.suricata p{color:#3D2E12}

/* Comunidades */
.tarjeta{background:#fff;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:10px}
.tarjeta p{font-size:17px}
.proximo{align-self:flex-start;background:var(--arena);color:var(--tenue);font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px}

/* Ayuda */
.ayuda{display:flex;flex-direction:column;gap:8px}
.no911{margin-top:32px;background:var(--tinta);color:#fff;border-radius:20px;padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.no911 p{flex:1 1 300px}

/* Categorías */
.chips{list-style:none;margin:24px 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;font-size:17px}
.chips li{background:#fff;border:1px solid var(--linea);padding:10px 18px;border-radius:999px}

/* Embajadores */
.embajadores{background:var(--verde);color:#fff;padding-block:88px}
.embajadores .envoltura{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.embajadores .texto{flex:1 1 400px;display:flex;flex-direction:column;gap:18px}
.embajadores .pastilla{background:transparent;border:1px solid var(--miel);color:var(--miel)}
.embajadores h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-1px}
.embajadores .texto p{font-size:19px;color:var(--verde-claro)}
.roles{flex:1 1 360px;display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}
.roles li{background:rgba(255,255,255,.08);border-radius:20px;padding:20px 22px}
.roles h3{font-size:20px;margin-bottom:6px}
.roles p{color:var(--verde-claro);font-size:17px}

/* Canción */
.cancion{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:#fff;border-radius:28px;padding:28px 32px}
.cancion .info{display:flex;flex-direction:column;gap:8px;flex:1 1 320px}
.cancion .rotulo{font-size:14px;font-weight:700;color:var(--ocre)}
.cancion .nombre{font-family:var(--display);font-weight:700;font-size:24px}
audio{width:100%;max-width:420px}

/* Formulario */
.form-caja{background:#fff;border-radius:28px;padding:32px;max-width:760px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.ancho{grid-column:1/-1}
label,legend{font-weight:700;font-size:16px}
input,select,textarea{font:inherit;font-size:17px;padding:12px 14px;border:1.5px solid #B9AE98;border-radius:12px;background:#fff;color:var(--tinta);min-height:48px}
textarea{min-height:130px;resize:vertical}
fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;grid-column:1/-1}
fieldset legend{margin-bottom:8px;width:100%}
.opcion{display:flex;align-items:center;gap:8px;font-weight:400}
.opcion input{min-height:auto;width:20px;height:20px}
.ayuda-campo{font-size:14px;color:var(--tenue)}
.oculto{position:absolute;left:-9999px}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:12px;max-width:860px}
details{background:#fff;border-radius:18px;padding:20px 24px}
summary{font-weight:700;font-size:19px;cursor:pointer}
details p{margin-top:12px;color:var(--tinta-2)}

/* Descarga */
.descarga{background:var(--tinta);color:#fff;padding-block:80px;text-align:center}
.descarga .envoltura{display:flex;flex-direction:column;align-items:center;gap:20px}
.descarga h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,50px);line-height:1.05;letter-spacing:-1px}
.descarga p{color:#CFD8D4}
.tiendas{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.tienda{display:flex;flex-direction:column;align-items:center;gap:14px}
.tienda img.badge{height:52px;width:auto}
.tienda img.qr{width:140px;height:140px;background:#fff;padding:8px;border-radius:12px}
@media (max-width:700px){.tienda img.qr{display:none}}

/* Pie */
.pie{background:#141B19;color:#CFD8D4;padding-block:40px;font-size:15px}
.pie .envoltura{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.pie b{font-family:var(--display);font-size:20px;color:#fff;display:block;margin-bottom:6px}
.pie nav{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.pie a{color:var(--miel)}

/* Páginas internas */
.interna{padding-block:40px 80px}
.volver{display:inline-block;margin-bottom:24px;font-weight:700}
.categoria{background:#fff;border-radius:24px;padding:28px;margin-bottom:20px}
.categoria h2{font-family:var(--display);font-weight:800;font-size:30px;margin-bottom:16px}
.sub{padding-block:14px;border-top:1px solid #ECE6DA}
.sub h3{font-size:19px;margin-bottom:8px}
.nivel{display:flex;gap:10px;align-items:baseline;font-size:17px;color:var(--tinta-2)}
.nivel b{min-width:52px;font-size:14px;padding:2px 8px;border-radius:999px;text-align:center}
.leve{background:#E3EEEA;color:var(--verde-osc)}
.grave{background:#F6DCC4;color:#6B3409}
.lista-canciones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.lista-canciones li{background:#fff;border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.lista-canciones .nombre{font-family:var(--display);font-weight:700;font-size:20px}