/* La Victoria — Portal del pueblo. Mobile-first, sin dependencias. */
:root{
  --verde:#2f5d34; --verde-osc:#1e3f23; --verde-claro:#e8f0e4;
  --azul:#1565a0; --azul-osc:#0d4570; --azul-claro:#e3eff8;
  --ambar:#d98a12; --ambar-claro:#fdf3e2;
  --tinta:#23281f; --gris:#5d6357; --linea:#d8dccf;
  --fondo:#faf8f1; --blanco:#ffffff;
  --sombra:0 2px 10px rgba(30,63,35,.10);
  --radio:14px;
  --fuente:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--fuente);background:var(--fondo);color:var(--tinta);line-height:1.65;font-size:1.02rem}
img{max-width:100%;height:auto;display:block;border-radius:8px}
a{color:var(--azul-osc)}
h1,h2,h3{line-height:1.25;color:var(--verde-osc);margin-top:0}
h2{font-size:1.45rem;margin-bottom:.6rem;border-bottom:3px solid var(--ambar);display:inline-block;padding-bottom:.2rem}
h3{font-size:1.12rem;margin-bottom:.35rem}
main{max-width:72rem;margin:0 auto;padding:0 1rem 3rem}
section{margin:2.2rem 0}
p{margin:.5rem 0 1rem}
.lead{font-size:1.12rem;color:var(--gris)}
small,.peq{font-size:.85rem;color:var(--gris)}

/* ===== Banner de estatus municipal ===== */
.banner-municipio{background:linear-gradient(100deg,var(--verde-osc),var(--azul-osc));color:#fff;text-align:center;padding:.55rem .8rem;font-size:.92rem}
.banner-municipio strong{color:var(--ambar)}
.banner-municipio a{color:#ffe9bd}

/* ===== Encabezado y navegación ===== */
header{background:var(--blanco);box-shadow:var(--sombra);position:sticky;top:0;z-index:50}
.barra{display:flex;align-items:center;justify-content:space-between;max-width:72rem;margin:0 auto;padding:.7rem 1rem}
.marca{font-weight:800;font-size:1.25rem;color:var(--verde-osc);text-decoration:none;display:flex;align-items:center;gap:.5rem}
.marca .sol{color:var(--ambar)}
.lema{font-size:.82rem;color:var(--gris);font-weight:600;line-height:1.3;text-align:center}
nav ul{list-style:none;margin:0;padding:0;display:none;flex-direction:column;background:var(--blanco);border-top:1px solid var(--linea)}
nav ul.abierto{display:flex}
nav a{display:block;padding:.75rem 1rem;text-decoration:none;color:var(--tinta);font-weight:600;border-bottom:1px solid var(--linea)}
nav a.activo,nav a:hover{background:var(--verde-claro);color:var(--verde-osc)}
.boton-menu{background:var(--verde);color:#fff;border:0;border-radius:8px;padding:.55rem .8rem;font-size:1.1rem;cursor:pointer}

/* ===== Hero ===== */
.hero{position:relative;color:#fff;margin:0 -1rem 0;padding:0}
.hero img{border-radius:0;width:100%;height:min(60vw,420px);object-fit:cover}
.hero .velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,40,24,.15),rgba(20,40,24,.78));display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem 1.2rem}
.hero h1{color:#fff;font-size:1.9rem;margin:0 0 .3rem}
.hero p{margin:0 0 .8rem;color:#f2f5ee}
.btn{display:inline-block;background:var(--ambar);color:#231700;font-weight:700;text-decoration:none;padding:.6rem 1.2rem;border-radius:10px;margin-right:.5rem;margin-bottom:.5rem}
.btn.sec{background:rgba(255,255,255,.14);color:#fff;border:1px solid #fff}

/* ===== Tarjetas ===== */
.tarjetas{display:grid;gap:1rem;grid-template-columns:1fr}
.tarjeta{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:1.1rem;border-top:4px solid var(--ambar)}
.tarjeta.verde{border-top-color:var(--verde)}
.tarjeta.azul{border-top-color:var(--azul)}
.dato-num{font-size:1.9rem;font-weight:800;color:var(--verde-osc);line-height:1.1}
.dato-etq{font-size:.9rem;color:var(--gris);margin-top:.15rem}

/* ===== Línea de tiempo ===== */
.linea{position:relative;margin:1.5rem 0;padding-left:1.6rem;border-left:3px solid var(--ambar)}
.evento{position:relative;margin-bottom:1.4rem;background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:.9rem 1rem}
.evento::before{content:"";position:absolute;left:calc(-1.6rem - 8px);top:1.1rem;width:13px;height:13px;border-radius:50%;background:var(--verde);border:2px solid var(--blanco);box-shadow:0 0 0 2px var(--ambar)}
.evento .fecha{display:inline-block;background:var(--verde-osc);color:#fff;font-weight:700;font-size:.85rem;border-radius:20px;padding:.15rem .7rem;margin-bottom:.4rem}
.evento h3{margin:.2rem 0 .3rem}

/* ===== Recuadros de honestidad ===== */
.nota-invest{background:var(--ambar-claro);border-left:5px solid var(--ambar);border-radius:8px;padding:1rem;margin:1.4rem 0}
.nota-invest h3{color:#8a5a0b}
.no-confirmado{background:#fdf0ef;border-left:5px solid #c0392b;border-radius:8px;padding:1rem;margin:1.4rem 0}
.no-confirmado h3{color:#922b21}

/* ===== Galería ===== */
.galeria{display:grid;gap:1rem;grid-template-columns:1fr}
.figura{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden}
.figura img{border-radius:0;width:100%;aspect-ratio:4/3;object-fit:cover}
.figura figcaption{padding:.8rem 1rem}
.credito{display:block;margin-top:.4rem;font-size:.8rem;color:var(--gris)}

/* ===== Directorio / tablas ===== */
table{width:100%;border-collapse:collapse;background:var(--blanco);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);font-size:.95rem}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--linea);vertical-align:top}
th{background:var(--verde-osc);color:#fff}
tr:last-child td{border-bottom:0}

/* ===== Noticias ===== */
.noticia{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:1rem;margin-bottom:1rem}
.noticia .fecha{font-weight:700;color:var(--azul-osc);font-size:.9rem}

/* ===== Listas de fuentes ===== */
.fuentes li{margin-bottom:.7rem}

/* ===== Footer ===== */
footer{background:var(--verde-osc);color:#eef3ea;margin-top:2rem}
.pie{max-width:72rem;margin:0 auto;padding:2rem 1rem;display:grid;gap:1.2rem;grid-template-columns:1fr}
footer h3{color:var(--ambar)}
footer a{color:#cfe3c9}
.pie-base{text-align:center;border-top:1px solid rgba(255,255,255,.2);padding:1rem;font-size:.88rem;color:#cfe3c9}

.boton-subir{position:fixed;right:1rem;bottom:1rem;background:var(--verde);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:1.2rem;cursor:pointer;display:none;box-shadow:var(--sombra)}
.boton-subir.visible{display:block}

@media(min-width:700px){
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .pie{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:2.6rem}
  .boton-menu{display:none}
  nav ul{display:flex;flex-direction:row;border-top:0}
  nav a{border-bottom:0;border-radius:8px;padding:.6rem .8rem}
  nav li{margin-left:.15rem}
}
@media(min-width:1000px){
  .tarjetas{grid-template-columns:repeat(4,1fr)}
  .galeria{grid-template-columns:repeat(3,1fr)}
}

/* ===== Dinamismo client-side: reveal, carrusel, mapa, buscador ===== */
.revelar{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.revelar.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.revelar{opacity:1;transform:none;transition:none}}

/* Carrusel de fotos */
.carrusel{position:relative}
.carrusel-vista{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.4rem;scrollbar-width:thin}
.carrusel-slide{flex:0 0 82%;scroll-snap-align:center;background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden;margin:0}
.carrusel-slide img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.carrusel-slide figcaption{padding:.7rem .9rem;font-size:.92rem}
.carrusel-btn{position:absolute;top:36%;transform:translateY(-50%);background:rgba(30,63,35,.78);color:#fff;border:0;border-radius:50%;width:42px;height:42px;font-size:1.4rem;line-height:1;cursor:pointer;z-index:2}
.carrusel-btn.ant{left:.4rem}
.carrusel-btn.sig{right:.4rem}
@media(min-width:700px){.carrusel-slide{flex-basis:46%}}
@media(min-width:1000px){.carrusel-slide{flex-basis:31%}}

/* Mapa de secciones */
#mapa-secciones{height:380px;border-radius:var(--radio);box-shadow:var(--sombra);z-index:1;background:var(--verde-claro)}
.leaflet-container{font-family:var(--fuente)}
.lista-secciones{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.lista-secciones button{background:var(--verde-claro);border:1px solid var(--verde);color:var(--verde-osc);font-weight:700;border-radius:20px;padding:.45rem .95rem;cursor:pointer;font-size:.9rem;font-family:var(--fuente)}
.lista-secciones button:hover,.lista-secciones button.activo{background:var(--verde);color:#fff}

/* Buscador interno */
.barra-busqueda{max-width:72rem;margin:0 auto;padding:.7rem 1rem 0;position:relative}
.barra-busqueda input{width:100%;padding:.6rem 1rem;border:1px solid var(--linea);border-radius:24px;font-size:1rem;font-family:var(--fuente);background:var(--blanco)}
.resultados-busqueda{position:absolute;left:1rem;right:1rem;top:100%;background:var(--blanco);border-radius:12px;box-shadow:var(--sombra);z-index:60;overflow:hidden}
.resultados-busqueda a{display:block;padding:.6rem 1rem;text-decoration:none;color:var(--tinta);border-bottom:1px solid var(--linea)}
.resultados-busqueda a:last-child{border-bottom:0}
.resultados-busqueda a:hover{background:var(--verde-claro)}
.resultados-busqueda .rb-t{font-weight:700;color:var(--verde-osc)}
.resultados-busqueda .rb-p{font-size:.82rem;color:var(--gris)}

/* Formulario de reporte comunitario */
.form-reporte{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:1.2rem;margin:1rem 0}
.campo{margin-bottom:.9rem}
.campo label{display:block;font-weight:700;margin-bottom:.3rem;color:var(--verde-osc)}
.campo input,.campo select,.campo textarea{width:100%;padding:.6rem .8rem;border:1px solid var(--linea);border-radius:10px;font-size:1rem;font-family:var(--fuente);background:var(--fondo);color:var(--tinta)}
.campo textarea{resize:vertical}
.form-reporte .btn{border:0;cursor:pointer;font-size:1rem}

/* ===== Interactividad: línea de tiempo, efemérides, clima, patronales, trivia ===== */

/* Línea de tiempo interactiva (historia.html) */
details.timeline-detalle{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);margin-bottom:1rem;padding:.9rem 1.1rem;border-left:6px solid var(--verde)}
details.timeline-detalle summary{cursor:pointer;font-weight:700;color:var(--verde-osc);list-style:none;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
details.timeline-detalle summary::-webkit-details-marker{display:none}
details.timeline-detalle summary::before{content:"+";color:var(--ambar);font-weight:800;font-size:1.2rem;line-height:1}
details.timeline-detalle[open] summary::before{content:"\2212"}
details.timeline-detalle summary .fecha{display:inline-block;background:var(--verde-osc);color:#fff;font-weight:700;font-size:.85rem;border-radius:20px;padding:.15rem .7rem}
details.timeline-detalle summary .futuro{background:var(--ambar);color:#231700;font-weight:800;font-size:.75rem;border-radius:12px;padding:.1rem .6rem;text-transform:uppercase}
details.timeline-detalle .cuerpo{margin-top:.5rem}
details.timeline-detalle .nota-honesta{background:var(--ambar-claro);border-left:4px solid var(--ambar);padding:.55rem .9rem;border-radius:8px;font-size:.92rem;margin-top:.6rem}

/* Efemérides del día (index.html) */
.efemeride{background:var(--ambar-claro);border:1px solid var(--ambar);border-radius:var(--radio);padding:1rem 1.2rem;font-size:1.05rem}
.efemeride .dias{display:inline-block;background:var(--ambar);color:#231700;font-weight:800;border-radius:12px;padding:.1rem .7rem;margin-left:.4rem;font-size:.9rem}

/* Clima en vivo (index.html) */
.clima{background:var(--azul-claro);border:1px solid var(--azul);border-radius:var(--radio);padding:1rem 1.2rem;margin-top:1.1rem;font-size:1.02rem;display:flex;gap:.4rem 1.4rem;flex-wrap:wrap;align-items:center}
.clima .temp{font-size:1.7rem;font-weight:800;color:var(--azul-osc)}
.clima .estado{font-weight:700;color:var(--verde-osc)}
.clima .meta{color:var(--gris)}
.clima .fuente{width:100%;font-size:.8rem;color:var(--gris)}

/* Banda de cuenta regresiva a patronales (index.html / fiestas.html) */
.banda-patronales{background:linear-gradient(100deg,var(--verde-osc),var(--azul-osc));border-radius:var(--radio);padding:1.2rem 1.4rem;display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:space-between}
.banda-patronales h2{color:#fff;border:0;margin-bottom:.2rem}
.banda-patronales p{margin:.15rem 0;color:#eef3ea}
.banda-patronales a{color:#ffe9bd}
#cuenta-patrorales{font-size:1.05rem;color:#ffe9bd}
#cuenta-patrorales .cd-numero{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);border-radius:10px;padding:.15rem .65rem;font-weight:800;color:#fff;font-size:1.3rem;margin:0 .12rem}
#cuenta-patrorales .cd-fiesta{font-weight:800;font-size:1.15rem;color:#fff}

/* Trivia del pueblo (trivia.html) */
.pregunta{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:1rem 1.2rem;margin-bottom:1.2rem}
.opciones{display:grid;gap:.6rem;margin-top:.7rem}
.opciones button{text-align:left;font:inherit;background:var(--fondo);border:2px solid var(--linea);border-radius:10px;padding:.7rem 1rem;cursor:pointer;color:var(--tinta)}
.opciones button:hover:not(:disabled){border-color:var(--ambar)}
.opciones button:disabled{cursor:default}
.opciones button.correcta{border-color:var(--verde);background:var(--verde-claro);font-weight:700}
.opciones button.incorrecta{border-color:#b3261e;background:#fdecea}
.opciones button.atenuada{opacity:.55}
.resultado-trivia{background:var(--verde-claro);border:2px solid var(--verde);border-radius:var(--radio);padding:1.5rem;text-align:center}
.resultado-trivia .puntaje{font-size:2.2rem;font-weight:800;color:var(--verde-osc);display:block;margin:.4rem 0}
.resultado-trivia .btn{border:0;cursor:pointer;font-size:1rem;margin-top:.8rem}
.trivia-progreso{color:var(--gris);font-size:.9rem;font-weight:600}

/* Widget Google Translate (English version, traducción automática) */
#google_translate_element{margin-left:.4rem;font-size:.8rem}
.goog-te-banner-frame{display:none!important}
body{top:0!important}
.goog-te-gadget{font-size:.8rem!important}

/* ===== Mejoras 18-oct noche: modo oscuro, compartir, historias, sabías que, podcast, gráficos ===== */

/* Botón de tema */
.boton-tema{background:var(--blanco);border:1px solid var(--linea);border-radius:8px;padding:.5rem .7rem;font-size:1.1rem;cursor:pointer;margin-right:.4rem;line-height:1}

/* Modo oscuro */
[data-tema="oscuro"]{
  --tinta:#e9ede4; --gris:#a9b3a0; --linea:#39412f;
  --fondo:#12160f; --blanco:#1c231a;
  --verde-claro:#243420; --azul-claro:#14273c; --ambar-claro:#33270e;
  --sombra:0 2px 10px rgba(0,0,0,.4);
}
[data-tema="oscuro"] h1,[data-tema="oscuro"] h2,[data-tema="oscuro"] h3{color:#d7e6cf}
[data-tema="oscuro"] .marca{color:#eef3ea}
[data-tema="oscuro"] .lema{color:var(--gris)}
[data-tema="oscuro"] nav a{color:var(--tinta)}
[data-tema="oscuro"] nav a.activo,[data-tema="oscuro"] nav a:hover{background:#2a3a24;color:#fff}
[data-tema="oscuro"] .btn.sec{color:#fff}
[data-tema="oscuro"] .dato-num{color:#fff}
[data-tema="oscuro"] .campo input,[data-tema="oscuro"] .campo select,[data-tema="oscuro"] .campo textarea{background:#141a12;color:var(--tinta)}
[data-tema="oscuro"] .barra-busqueda input{background:#1c231a;color:var(--tinta)}
[data-tema="oscuro"] .opciones button{background:#141a12;color:var(--tinta)}
[data-tema="oscuro"] th{background:#0f1a0d}
[data-tema="oscuro"] .boton-tema{background:#1c231a;color:#ffe9bd;border-color:var(--linea)}
[data-tema="oscuro"] .hero .velo{background:linear-gradient(180deg,rgba(8,14,9,.35),rgba(8,14,9,.85))}

/* Botones de compartir */
.compartir{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0;align-items:center}
.compartir .etq{font-weight:700;color:var(--gris);font-size:.92rem}
.btn-wsp{background:#25d366;color:#fff}
.btn-fb{background:#1877f2;color:#fff}

/* Historias destacadas (estilo estados) */
.historias{display:flex;gap:1rem;overflow-x:auto;padding:.6rem .2rem 1rem;scrollbar-width:thin}
.historia{flex:0 0 auto;text-align:center;text-decoration:none;color:var(--tinta);width:96px}
.historia .circulo{width:78px;height:78px;border-radius:50%;background:var(--verde-claro);border:3px solid var(--ambar);display:flex;align-items:center;justify-content:center;font-size:2.1rem;margin:0 auto .4rem;box-shadow:var(--sombra)}
.historia span{font-size:.82rem;font-weight:600;display:block;line-height:1.3}
.historia:hover .circulo{border-color:var(--verde)}

/* ¿Sabías que? */
.sabias{background:var(--azul-claro);border:1px solid var(--azul);border-radius:var(--radio);padding:1.1rem 1.3rem;font-size:1.05rem;min-height:4.5rem}

/* Podcast */
.episodio{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.episodio audio{width:100%;margin-top:.7rem}
.episodio .dur{font-size:.85rem;color:var(--gris);font-weight:600}

/* Gráficos (La Victoria en números) */
.grafico{max-width:660px;margin:1.2rem auto;background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:1.1rem}
.grafico h3{text-align:center;margin-bottom:.6rem}

/* ===== Chatbot "Pregúntale a La Victoria" ===== */
.chatbot-btn{position:fixed;right:1rem;bottom:4.4rem;z-index:70;width:54px;height:54px;border-radius:50%;border:0;background:var(--verde);color:#fff;font-size:1.6rem;cursor:pointer;box-shadow:var(--sombra)}
.chatbot-btn:hover{background:var(--verde-osc)}
.chatbot-panel{position:fixed;right:1rem;bottom:8.4rem;z-index:70;width:min(350px,calc(100vw - 2rem));max-height:min(480px,calc(100vh - 12rem));display:flex;flex-direction:column;background:var(--blanco);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.25);overflow:hidden;border:1px solid var(--linea)}
.chatbot-panel[hidden]{display:none}
.chatbot-cab{display:flex;align-items:center;justify-content:space-between;background:var(--verde-osc);color:#fff;padding:.7rem 1rem}
.chatbot-cab strong{font-size:.95rem}
.chatbot-cab button{background:none;border:0;color:#fff;font-size:1rem;cursor:pointer}
.chatbot-msgs{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.6rem;min-height:180px}
.chatbot-msg{max-width:88%;padding:.55rem .8rem;border-radius:12px;font-size:.92rem;line-height:1.45;white-space:pre-wrap}
.chatbot-msg.bot{background:var(--verde-claro);color:var(--tinta);align-self:flex-start;border-bottom-left-radius:4px}
.chatbot-msg.yo{background:var(--azul);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chatbot-msg.escribiendo{font-style:italic;opacity:.7}
.chatbot-aviso{font-size:.75rem;color:var(--gris);text-align:center;padding:.3rem .8rem;border-top:1px dashed var(--linea)}
.chatbot-form{display:flex;gap:.5rem;padding:.6rem;border-top:1px solid var(--linea)}
.chatbot-form input{flex:1;padding:.55rem .8rem;border:1px solid var(--linea);border-radius:20px;font-size:.92rem;font-family:var(--fuente);background:var(--fondo);color:var(--tinta)}
.chatbot-form button{background:var(--ambar);border:0;border-radius:50%;width:40px;height:40px;font-size:1.1rem;cursor:pointer;color:#231700;flex:0 0 auto}


/* ===== Olas plan-100 (merge central) ===== */

/* ===== Worker B: estilos de las secciones comunitarias (no editar style.css) ===== */

/* Aviso de sección en construcción */
.aviso-construccion{
  border:2px dashed #b98a1d;
  background:#fff8e6;
  border-radius:10px;
  padding:1rem 1.2rem;
  margin:1rem 0;
}
.aviso-construccion strong{color:#8a5d00;}

/* Etiqueta para datos de ejemplo (no llamar / no son reales) */
.marca-ejemplo{
  display:inline-block;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.06em;
  background:#6b7280;
  color:#fff;
  border-radius:6px;
  padding:.15em .5em;
  vertical-align:middle;
  margin-left:.4em;
}

/* Botón de WhatsApp click-to-chat (motoconchos) */
.btn-wa{
  display:inline-block;
  background:#25d366;
  color:#fff !important;
  font-weight:700;
  border-radius:8px;
  padding:.6rem 1.1rem;
  text-decoration:none;
}
.btn-wa:hover{background:#1da851;}

/* Insignias de colaboradores */
.insignias{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}
.insignia{text-align:center;padding:1.2rem;}
.insignia svg{width:110px;height:110px;}
.insignia h3{margin:.6rem 0 .3rem;}
.insignia .nivel-tag{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.08em;
  color:#8a5d00;
}

/* Historia y Cultura Viva — estilos propios (no tocar style.css) */
.aviso-construccion{background:#fff7e6;border:1px solid #e0b84c;border-radius:10px;padding:1rem 1.2rem;margin:1rem 0}
.aviso-construccion strong{color:#8a5a00}
.marca-oral{display:inline-block;background:#eef4ff;border:1px solid #7aa5e8;color:#174a9e;font-size:.78rem;border-radius:999px;padding:.15rem .7rem;margin:.2rem 0}
.grid-archivo{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin:1rem 0}
.fig-archivo{border:1px solid #ddd;border-radius:10px;overflow:hidden;background:#fff}
.fig-archivo img{width:100%;height:auto;display:block;background:#f4f4f4}
.fig-archivo figcaption{padding:.8rem 1rem;font-size:.92rem}
.fig-archivo .credito{display:block;margin-top:.4rem;font-size:.8rem;color:#666}
/* comparador antes/ahora */
.ba-comparador{position:relative;max-width:720px;margin:1.2rem auto;overflow:hidden;border-radius:12px;border:1px solid #ccc;touch-action:none}
.ba-comparador img{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
.ba-antes{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}
.ba-antes img{width:100%;height:100%;object-fit:cover}
.ba-handle{position:absolute;top:0;bottom:0;width:44px;margin-left:-22px;cursor:ew-resize;display:flex;align-items:center;justify-content:center}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.6)}
.ba-handle::after{content:"◀ ▶";font-size:.7rem;background:#fff;border-radius:999px;padding:.35rem .5rem;position:relative;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.ba-etiqueta{position:absolute;top:.6rem;font-size:.8rem;background:rgba(0,0,0,.65);color:#fff;padding:.2rem .6rem;border-radius:999px}
.ba-etiqueta.izq{left:.6rem}.ba-etiqueta.der{right:.6rem}
/* trivia por niveles */
.trivia-niveles{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.trivia-niveles button{padding:.7rem 1.2rem;border-radius:999px;border:2px solid #1a73e8;background:#fff;color:#1a73e8;font-weight:700;cursor:pointer;font-size:1rem}
.trivia-niveles button.activo{background:#1a73e8;color:#fff}
.pregunta-box{border:1px solid #ddd;border-radius:10px;padding:1.2rem;margin:1rem 0;background:#fff}
.pregunta-box .opc{display:block;width:100%;text-align:left;margin:.4rem 0;padding:.6rem .9rem;border-radius:8px;border:1px solid #bbb;background:#fafafa;cursor:pointer;font-size:1rem}
.pregunta-box .opc:hover{background:#eef3ff}
.pregunta-box .opc.bien{background:#dff5df;border-color:#2d8a2d}
.pregunta-box .opc.mal{background:#fbe3e3;border-color:#b3261e}
.barra-puntaje{display:flex;gap:1.2rem;align-items:center;margin:.8rem 0;font-weight:700}
.ranking{font-size:.95rem}
/* audios */
.episodio-audio{border:1px solid #ddd;border-radius:10px;padding:1rem 1.2rem;margin:1rem 0;background:#fff}
.episodio-audio audio{width:100%;margin-top:.6rem}
.guion{font-size:.9rem;color:#555;background:#f7f7f7;border-left:3px solid #1a73e8;padding:.6rem .9rem;margin-top:.6rem}
/* formularios de aporte */
.form-aporte{border:1px solid #ddd;border-radius:10px;padding:1.2rem;margin:1.2rem 0;background:#fdfdfd;max-width:640px}
.form-aporte .campo{margin:.7rem 0}
.form-aporte label{display:block;font-weight:700;margin-bottom:.25rem}
.form-aporte input[type=text],.form-aporte input[type=email],.form-aporte textarea{width:100%;padding:.55rem .7rem;border:1px solid #bbb;border-radius:8px;font-size:1rem;box-sizing:border-box}
.form-aporte button.btn{margin-top:.5rem}
.estado-vacio{border:2px dashed #bbb;border-radius:10px;padding:1.6rem;text-align:center;color:#666;margin:1rem 0}
.lista-envio{font-size:.85rem;color:#777}
@media (prefers-color-scheme:dark){.pregunta-box,.episodio-audio,.form-aporte{background:#1b1b1b}.fig-archivo{background:#1b1b1b}.aviso-construccion{background:#2a220f}}

:root{}
/* Estilos de las páginas de Servicios Prácticos (worker D). No editar style.css. */
.aviso-indep{background:#fff8e1;border:1px solid #e0b73c;border-left:6px solid #e0b73c;border-radius:12px;padding:.9rem 1.1rem;margin:1rem 0;font-size:.95rem}
.aviso-indep strong{color:#7a5b00}
.en-construccion{background:var(--blanco);border:1px dashed var(--linea);border-radius:var(--radio);padding:1.1rem 1.2rem;margin:1rem 0}
.en-construccion p{margin:.6rem 0 0}
.badge-pend{display:inline-block;background:#f0e6c8;color:#7a5b00;border-radius:999px;padding:.25rem .9rem;font-weight:700;font-size:.88rem}
.bloque-json{margin:1rem 0}
.bloque-json h3{margin:1.2rem 0 .4rem}
.bloque-json .actualizado{font-size:.85rem;color:#777;margin-bottom:.6rem}

/* w-e.css — Web fácil: accesibilidad auto-inyectada.
   No editar style.css ni script.js. Este archivo es independiente y seguro. */

/* ===== Botón de alto contraste (inyectado por w-e.js en el header) ===== */
.boton-contraste{background:var(--verde);color:#fff;border:0;border-radius:8px;padding:.55rem .8rem;font-size:.95rem;font-weight:700;cursor:pointer;margin-left:.4rem}
.boton-contraste:hover{background:var(--verde-osc)}

/* ===== Botón "Escuchar" (inyectado por w-e.js al inicio de cada <article>) ===== */
.boton-escuchar{background:var(--azul-claro);color:var(--azul-osc);border:1px solid var(--azul);border-radius:8px;padding:.3rem .7rem;font-size:.85rem;font-weight:700;cursor:pointer;margin-bottom:.6rem;display:inline-block}
.boton-escuchar:hover{background:var(--azul);color:#fff}
.boton-escuchar:focus-visible{outline:3px solid var(--ambar);outline-offset:2px}

/* ===== Alto contraste: [data-contraste="alto"] en <html> ===== */
[data-contraste="alto"]{
  --verde:#ffff00; --verde-osc:#ffff00; --verde-claro:#111111;
  --azul:#8fd8ff; --azul-osc:#bfe9ff; --azul-claro:#061826;
  --ambar:#ffff00; --ambar-claro:#2b2400;
  --tinta:#ffffff; --gris:#f5f5f5; --linea:#ffff00;
  --fondo:#000000; --blanco:#0a0a0a;
  --sombra:0 0 0 2px #ffff00;
}
[data-contraste="alto"] body{background:#000;color:#fff}
[data-contraste="alto"] a{color:#ffff00;text-decoration:underline;font-weight:700}
[data-contraste="alto"] h1,[data-contraste="alto"] h2,[data-contraste="alto"] h3{color:#ffff00}
[data-contraste="alto"] header,[data-contraste="alto"] .tarjeta,[data-contraste="alto"] .noticia,[data-contraste="alto"] .evento{background:#000;border:1px solid #ffff00}
[data-contraste="alto"] .banner-municipio{background:#000;border-bottom:2px solid #ffff00}
[data-contraste="alto"] .btn{background:#ffff00;color:#000}
[data-contraste="alto"] .btn.sec{background:#000;color:#ffff00;border:2px solid #ffff00}
[data-contraste="alto"] img{outline:2px solid #ffff00}
[data-contraste="alto"] nav a{color:#fff}
[data-contraste="alto"] nav a.activo,[data-contraste="alto"] nav a:hover{background:#333300;color:#ffff00}
[data-contraste="alto"] .boton-escuchar{background:#000;color:#ffff00;border:2px solid #ffff00}
[data-contraste="alto"] .boton-contraste{background:#ffff00;color:#000}
[data-contraste="alto"] input,[data-contraste="alto"] textarea,[data-contraste="alto"] select{background:#000;color:#fff;border:2px solid #ffff00}
[data-contraste="alto"] footer{background:#000;border-top:2px solid #ffff00}
[data-contraste="alto"] .lema,[data-contraste="alto"] .peq,[data-contraste="alto"] small,[data-contraste="alto"] .lead{color:#f5f5f5}

/* w-f.css — PULIDO (Batch 2): velocidad, accesibilidad, diseño y confianza.
   No editar style.css ni script.js. Este archivo es independiente y seguro:
   solo añade o refuerza reglas; si se elimina, el sitio sigue funcionando. */

/* ===== 30) Foco visible por teclado (:focus-visible) ===== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--ambar);
  outline-offset:2px;
  border-radius:6px;
}
[data-tema="oscuro"] a:focus-visible, [data-tema="oscuro"] button:focus-visible,
[data-tema="oscuro"] input:focus-visible, [data-tema="oscuro"] select:focus-visible,
[data-tema="oscuro"] textarea:focus-visible, [data-tema="oscuro"] summary:focus-visible{
  outline-color:#ffd35c;
}

/* ===== 44) Espaciado vertical consistente (múltiplos de 8px) ===== */
main section{margin:32px 0}
.tarjetas, .galeria{gap:16px}
.tarjeta, .noticia, .evento, .episodio, .pregunta{padding:16px}
.evento{margin-bottom:16px}
.noticia{margin-bottom:16px}
.figura figcaption{padding:16px}
.carrusel-slide figcaption{padding:16px}
h2{margin-bottom:16px}
p{margin:8px 0 16px}

/* ===== 48) Tarjetas unificadas: misma sombra, radio y padding ===== */
.tarjeta, .evento, .noticia, .figura, .episodio, .pregunta,
.carrusel-slide, .grafico, .portada-seccion{
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}

/* ===== 47) "Por confirmar": etiqueta ámbar reconocible de un vistazo ===== */
.por-confirmar{
  display:inline-block;
  background:var(--ambar);
  color:#231700;
  font-weight:800;
  font-size:.8rem;
  border-radius:999px;
  padding:4px 12px;
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.02em;
}
/* Las secciones .no-confirmado existentes adoptan la familia ámbar */
.no-confirmado{
  background:var(--ambar-claro);
  border-left:5px solid var(--ambar);
}
.no-confirmado h3{color:#8a5a0b}
[data-tema="oscuro"] .no-confirmado h3{color:#ffd35c}

/* ===== 23) Tablas con scroll horizontal contenido (sin romper el layout) ===== */
main table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
main table th, main table td{white-space:normal;min-width:96px}

/* ===== 24) El widget de Google Translate no tapa el botón "volver arriba" ===== */
.boton-subir{z-index:200}
#google_translate_element{position:static}
#google_translate_element .goog-te-gadget{max-width:44vw;overflow:hidden;text-overflow:ellipsis}
iframe.skiptranslate{display:none!important}

/* ===== 28) Contraste 4.5:1 en textos sobre fotos del hero ===== */
.hero .velo{
  background:linear-gradient(180deg,rgba(20,40,24,.38),rgba(20,40,24,.86));
}
.hero h1, .hero .velo p{
  text-shadow:0 2px 10px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9);
}
.hero .velo small{text-shadow:0 1px 4px rgba(0,0,0,.9)}

/* ===== 25) Formularios: un campo por fila en móvil ===== */
@media(max-width:699px){
  .form-reporte .campo{width:100%}
  .form-reporte .fila{display:block}
  .campo input, .campo select, .campo textarea{font-size:16px} /* evita zoom en iOS */
}

/* ===== 26) Saturación de verdes en modo oscuro móvil ===== */
@media(max-width:699px){
  [data-tema="oscuro"] .tarjeta.verde,
  [data-tema="oscuro"] .dato-num,
  [data-tema="oscuro"] .historia .circulo{
    filter:saturate(.78);
  }
  [data-tema="oscuro"] h1, [data-tema="oscuro"] h2, [data-tema="oscuro"] h3{
    filter:saturate(.85);
  }
}

/* ===== 21) Carrusel: puntitos indicadores de posición ===== */
.carrusel-puntos{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  margin:8px 0 0;
  padding:0;
  list-style:none;
}
.carrusel-puntos button{
  width:12px;height:12px;
  border-radius:50%;
  border:2px solid var(--verde-osc);
  background:transparent;
  padding:0;
  cursor:pointer;
  line-height:1;
}
.carrusel-puntos button.activo{background:var(--ambar);border-color:var(--ambar)}
.carrusel-puntos button:focus-visible{outline:3px solid var(--ambar);outline-offset:2px}

/* ===== 22) Videos: sin reproducción hasta tocar (mismo patrón que el mapa) ===== */
.video-tap{
  position:relative;
  aspect-ratio:16/9;
  background:#101410;
  border-radius:8px;
  overflow:hidden;
  max-width:100%;
}
.video-tap iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}
.video-tap .video-tap-btn{
  position:absolute;inset:0;
  width:100%;height:100%;
  background:linear-gradient(180deg,rgba(10,16,10,.25),rgba(10,16,10,.72));
  color:#fff;
  border:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:center;
  font-family:var(--fuente);
  font-size:1rem;
  font-weight:700;
  text-align:center;
  padding:16px;
}
.video-tap .video-tap-btn .play{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--ambar);
  color:#231700;
  font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.5);
}

/* ===== 18) Memorial sobrio: sin animaciones bruscas ===== */
body.sobrio .revelar{opacity:1;transform:none;transition:none}
body.sobrio .revelar.visible{opacity:1;transform:none}
body.sobrio{scroll-behavior:auto}

/* ===== 39) Foto de portada por página de sección ===== */
.portada-seccion{
  margin:0 0 24px;
  overflow:hidden;
  background:var(--blanco);
}
.portada-seccion picture{display:block}
.portada-seccion img{
  width:100%;
  aspect-ratio:21/9;
  object-fit:cover;
  border-radius:0;
}
.portada-seccion figcaption{
  padding:8px 16px;
  font-size:.85rem;
  color:var(--gris);
  background:var(--blanco);
}

/* <picture> no debe romper los estilos que apuntan al img */
picture{display:contents}
.portada-seccion picture, .carrusel-slide picture, .figura picture{display:block}

/* ===== 45) Disclaimer visible sin scroll dentro del footer ===== */
footer .pie > div:first-child{
  border-left:4px solid var(--ambar);
  padding-left:16px;
}
@media(max-width:699px){
  footer .pie > div:first-child{order:-1}
}

/* ===== 50) Buscador sin resultados: mensaje + sugerencias ===== */
.resultados-busqueda .rb-x-t{font-weight:800;color:var(--verde-osc);display:block;padding:8px 16px 0}
.resultados-busqueda .rb-x-p{font-size:.85rem;color:var(--gris);display:block;padding:0 16px 4px}
.resultados-busqueda .rb-sug{font-size:.85rem;color:var(--gris);display:block;padding:4px 16px 8px}
.resultados-busqueda .rb-sug a{display:inline;padding:0;border:0;color:var(--azul-osc);font-weight:700;text-decoration:underline}

/* Contadores: valor final anunciado a lectores de pantalla (ver w-f.js) */
.dato-num[aria-live="polite"]{speak:normal}

/* Enlace "saltar al contenido" (accesibilidad) */
.skip-link{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:.6rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip-link:focus{left:8px;top:8px;color:#fff}

/* ===== Espacios publicitarios (monetización) ===== */
.espacio-pub{margin:1.6rem 0}
.espacio-pub .pub-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem .9rem;background:linear-gradient(100deg,#fdf8ec,#f5edd9);border:2px dashed var(--ambar);border-radius:var(--radio);padding:1rem 1.2rem;text-decoration:none;text-align:center;min-height:90px}
.espacio-pub .pub-link:hover{border-style:solid}
.espacio-pub .pub-etiqueta{width:100%;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.espacio-pub .pub-titulo{font-size:1.15rem;font-weight:800;color:var(--verde-osc)}
.espacio-pub .pub-texto{color:var(--gris);font-size:.95rem}
.espacio-pub .pub-cta{background:var(--ambar);color:#231700;font-weight:700;border-radius:10px;padding:.45rem 1rem;font-size:.92rem}
[data-tema="oscuro"] .espacio-pub .pub-link{background:linear-gradient(100deg,#2b2414,#372c16)}
[data-tema="oscuro"] .espacio-pub .pub-titulo{color:#f2e2b0}
/* Distintivo Destacado */
.badge-destacado{display:inline-block;background:linear-gradient(100deg,var(--ambar),#f2b93b);color:#231700;font-weight:800;font-size:.78rem;border-radius:999px;padding:.2rem .8rem;margin-left:.4rem;vertical-align:middle;white-space:nowrap}
.nota-destacado{background:var(--ambar-claro);border:1px solid var(--ambar);border-left:6px solid var(--ambar);border-radius:12px;padding:.9rem 1.1rem;margin:1rem 0;font-size:.95rem}
[data-tema="oscuro"] .nota-destacado{background:#2b2414}

/* Denuncias del barrio (20-oct-2026) */
.estado{display:inline-block;font-size:.85em;font-weight:700;padding:.25em .7em;border-radius:999px;margin:.3em 0}
.estado-pendiente{background:#fde8e8;color:#b71c1c;border:1px solid #f5c6c6}
.estado-proceso{background:#fff8e1;color:#8d6e00;border:1px solid #f0e0a8}
.estado-resuelto{background:#e8f5e9;color:#1b5e20;border:1px solid #c8e6c9}
.evento.denuncia video{display:block;margin:.6em 0}