/* =====================================================
   ALZA LA VOZ - Estilos generales
   ===================================================== */
:root{
  --alz-rojo:        #D90429;
  --alz-rojo-oscuro: #A3001E;
  --alz-azul:        #051B38;
  --alz-azul-2:      #0B2A52;
  --alz-amarillo:    #FFD60A;
  --alz-dorado:      #DDA300;
  --alz-verde:       #4D9834;
  --alz-naranja:     #E08A1E;
  --alz-gris:        #EDEDED;
  --alz-gris-2:      #6B6B6B;
  --alz-texto:       #1A1A1A;
  --alz-font-head:   'Poppins', 'Segoe UI', sans-serif;
  --alz-font-body:   'Inter', 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }

body{
  font-family:var(--alz-font-body);
  color:var(--alz-texto);
  background:#fff;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,.font-head{
  font-family:var(--alz-font-head);
  font-weight:800;
  letter-spacing:.2px;
}

a{ text-decoration:none; }

.container-alz{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Botones ---------- */
.btn-alz-red{
  background:var(--alz-rojo);
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:700;
  padding:.75rem 1.5rem;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  transition:.2s ease;
}
.btn-alz-red:hover{ background:var(--alz-rojo-oscuro); color:#fff; transform:translateY(-1px); }

.btn-alz-outline{
  background:transparent;
  border:2px solid var(--alz-azul);
  color:var(--alz-azul);
  border-radius:8px;
  font-weight:700;
  padding:.6rem 1.3rem;
}
.btn-alz-outline:hover{ background:var(--alz-azul); color:#fff; }

/* ---------- Top bar ---------- */
.alz-topbar{
  background:var(--alz-azul);
  color:#fff;
  font-size:.85rem;
  padding:.4rem 0;
}
.alz-topbar a{ color:#fff; }

/* ---------- Navbar ---------- */
.alz-navbar{
  background:#fff;
  padding:.7rem 0;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  position:sticky;
  top:0;
  z-index:1000;
}
.alz-navbar img.logo{ height:42px; }

/* Enlaces del menú: en escritorio van en fila; en móvil se ocultan
   por defecto y se muestran como panel desplegable propio (sin
   depender de JS/CSS de terceros como Bootstrap). */
.alz-nav-links{
  display:flex;
  align-items:center;
  gap:.4rem;
}
.alz-nav-links a{
  color:var(--alz-azul);
  font-weight:700;
  font-size:.95rem;
  padding:.5rem .6rem;
  border-radius:6px;
  white-space:nowrap;
}
.alz-nav-links a:hover{ color:var(--alz-rojo); }
.alz-nav-links .btn-whatsapp-nav{
  background:#25D366;
  color:#fff !important;
  border-radius:8px;
  font-weight:700;
  padding:.55rem 1.1rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-left:.4rem;
}
.alz-nav-links .btn-whatsapp-nav:hover{ background:#1DA851; }

.alz-nav-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--alz-azul);
  font-size:1.3rem;
  padding:.3rem .5rem;
  line-height:1;
}

@media (max-width: 991.98px){
  .alz-nav-toggle{ display:block; }
  .alz-nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.6rem 20px 1rem;
    box-shadow:0 12px 20px rgba(0,0,0,.12);
    border-top:1px solid #eee;
  }
  .alz-nav-links.is-open{ display:flex; }
  .alz-nav-links a{
    padding:.75rem .2rem;
    border-bottom:1px solid #f1f1f1;
    border-radius:0;
  }
  .alz-nav-links .btn-whatsapp-nav{
    margin:.8rem 0 0;
    justify-content:center;
    border-bottom:none;
  }
  .alz-navbar{ position:relative; }
}

/* ---------- Hero ---------- */
.alz-hero{
  position:relative;
  color:#fff;
  overflow:hidden;
  min-height:420px;
  display:flex;
  align-items:center;
}
.alz-hero .bg-photo{
  position:absolute;
  inset:0;
  background:#050d1a url('../img/hero-bg.jpg') center center/cover no-repeat;
  z-index:0;
}
.alz-hero .bg-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
      rgba(3,8,17,.94) 0%,
      rgba(3,8,17,.88) 28%,
      rgba(3,8,17,.55) 48%,
      rgba(3,8,17,.18) 68%,
      rgba(3,8,17,.35) 100%);
  z-index:1;
}
.alz-hero .hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  padding:2.6rem 0;
}
.alz-hero .hero-logo{
  height:170px;
  width:auto;
  display:block;
  margin-bottom:1rem;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.alz-hero .tag-emergencia{
  display:inline-block;
  background:var(--alz-rojo);
  color:#fff;
  font-weight:800;
  padding:.25rem 1rem;
  border-radius:4px;
  letter-spacing:1px;
  font-size:.95rem;
  margin-bottom:1rem;
}
.alz-hero h2.pregunta{
  font-size:1.4rem;
  margin-bottom:.2rem;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.alz-hero h2.pregunta .destacado{ color:var(--alz-amarillo); display:block; font-size:1.55rem; }
.alz-hero p.desc{ color:#eef1f6; max-width:460px; text-shadow:0 2px 6px rgba(0,0,0,.6); }

.alz-hero .whatsapp-box{
  display:flex;
  align-items:center;
  gap:1rem;
}
.alz-hero .whatsapp-box .wa-circle{
  width:54px;height:54px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.alz-hero .whatsapp-box .wa-num{
  font-size:1.8rem;
  font-weight:800;
  color:#fff;
  line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.alz-hero .whatsapp-box .wa-label{
  font-size:.85rem;
  color:#fff;
  font-weight:800;
  letter-spacing:.5px;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}
.alz-hero .whatsapp-box p{ font-size:.85rem; color:#e9edf3; margin-bottom:0; text-shadow:0 2px 6px rgba(0,0,0,.7); }

/* ---------- Como funciona ---------- */
.alz-como-funciona{ padding:3.5rem 0 2.5rem; }
.alz-como-funciona h2{ text-align:center; font-size:1.9rem; margin-bottom:2.5rem; }
.pasos-wrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.5rem;
  position:relative;
}
.pasos-wrap::before{
  content:"";
  position:absolute;
  top:38px;
  left:8%;
  right:8%;
  height:0;
  border-top:3px dotted #d8d8d8;
  z-index:0;
}
.paso{
  position:relative;
  z-index:1;
  flex:1;
  text-align:center;
  padding:0 .4rem;
}
.paso .icono-circulo{
  width:78px;height:78px;
  border-radius:50%;
  background:var(--alz-gris);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto .8rem;
}
.paso .icono-circulo img{ width:38px;height:38px;object-fit:contain; }
.paso .num{
  display:inline-flex;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--alz-azul);
  color:#fff;
  font-size:.75rem;
  font-weight:800;
  align-items:center;justify-content:center;
  margin-bottom:.4rem;
}
.paso h5{ font-size:.85rem; font-weight:800; margin-bottom:.4rem; }
.paso p{ font-size:.78rem; color:var(--alz-gris-2); }

/* ---------- Que puede reportar + mapa ---------- */
.alz-reportar{ padding:2rem 0 3rem; }
.reportar-card{
  background:var(--alz-gris);
  border-radius:16px;
  padding:1.8rem;
  height:100%;
}
.reportar-card h3{ font-size:1.15rem; margin-bottom:1.3rem; }
.reportar-item{
  display:flex;
  gap:.9rem;
  margin-bottom:1.2rem;
}
.reportar-item img{ width:40px;height:40px;object-fit:contain;flex-shrink:0; }
.reportar-item h6{ font-weight:800; font-size:.85rem; margin-bottom:.2rem; }
.reportar-item p{ font-size:.78rem; color:var(--alz-gris-2); margin-bottom:0; }

.mapa-card{
  background:var(--alz-azul) url('../img/fondo-mapa.png') no-repeat center center;
  background-size:cover;
  border-radius:16px;
  padding:2rem;
  color:#fff;
  height:100%;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mapa-card::before{ content:none; }
.mapa-card .contenido{ position:relative; z-index:1; }
.mapa-card h3{ font-size:1.7rem; margin-bottom:.6rem; }
.mapa-card p{ color:#dbe3f0; margin-bottom:.3rem; }

/* ---------- Listado de casos ---------- */
.alz-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.2rem;
}
.alz-section-title h3{ font-size:1.15rem; margin:0; }
.alz-section-title a{ color:var(--alz-rojo); font-weight:800; font-size:.85rem; }
.alz-section-title a i, .alz-section-title a svg{ margin-left:.2rem; }

.caso-card{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  height:100%;
  transition:.2s;
  border:1px solid #eee;
}
.caso-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.1); }
.caso-card .foto-wrap{ position:relative; height:150px; overflow:hidden; }
.caso-card .foto-wrap img{ width:100%; height:100%; object-fit:cover; }
.caso-card .region-tag{
  position:absolute; top:8px; left:8px;
  background:var(--alz-rojo);
  color:#fff;
  font-size:.7rem;
  font-weight:800;
  padding:.2rem .6rem;
  border-radius:3px;
  text-transform:uppercase;
}
.caso-card .body{ padding:.9rem 1rem 1.1rem; }
.caso-card h6{ font-weight:800; font-size:.92rem; margin-bottom:.5rem; color:var(--alz-texto); }
.caso-card .fecha{ font-size:.72rem; color:#5a6f92; margin-bottom:.5rem; }

.badge-estado{
  display:inline-block;
  font-size:.7rem;
  font-weight:800;
  padding:.28rem .7rem;
  border-radius:4px;
  color:#fff;
  text-transform:uppercase;
}
.badge-gestion{ background:var(--alz-rojo); }
.badge-verificado{ background:var(--alz-dorado); }
.badge-atendido{ background:var(--alz-verde); }

/* ---------- Respuestas de las entidades ---------- */
.respuesta-card{
  background:var(--alz-gris);
  border-radius:14px;
  padding:1.4rem 1.6rem;
  margin-bottom:1rem;
}
.respuesta-card .caso-titulo{ font-weight:800; font-size:.95rem; margin-bottom:.6rem; }
.respuesta-card .etiqueta-mini{ font-weight:800; color:var(--alz-azul); font-size:.8rem; }
.respuesta-card p{ font-size:.85rem; margin-bottom:.6rem; }
.respuesta-card .estado-linea{ font-size:.8rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.respuesta-card .fecha-act{ font-size:.75rem; color:var(--alz-gris-2); }

/* ---------- CTA final / franja solidaridad ---------- */
.alz-cta-final{
  background:var(--alz-rojo);
  color:#fff;
  padding:1.6rem 0;
}
.alz-cta-final .icono-corazon{ width:52px; }
.alz-cta-final h4{ font-size:1.15rem; margin-bottom:0; }
.alz-cta-final .divisor{ width:1px; background:rgba(255,255,255,.4); align-self:stretch; }

/* ---------- Footer ---------- */
.alz-footer{
  background:var(--alz-azul);
  color:#cfd8e6;
  padding:2.4rem 0 1.2rem;
  font-size:.85rem;
}
.alz-footer a{ color:#cfd8e6; }
.alz-footer a:hover{ color:#fff; }
.alz-footer .logo{ height:34px; margin-bottom:.8rem; }
.alz-footer hr{ border-color:rgba(255,255,255,.15); margin:1.5rem 0 1rem; }

/* ---------- Botón flotante WhatsApp ---------- */
.wa-float{
  position:fixed;
  bottom:22px; right:22px;
  width:60px;height:60px;
  border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  z-index:1200;
  animation:wa-pulse 2.4s infinite;
}
.wa-float img{ width:30px; }
@keyframes wa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- Buscador ---------- */
.alz-buscador-hero{
  background:var(--alz-azul);
  color:#fff;
  padding:2.4rem 0;
}
.alz-buscador-hero h1{ font-size:1.8rem; }
.form-buscador{
  background:#fff;
  border-radius:14px;
  padding:1.2rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.form-buscador label{ font-size:.78rem; font-weight:700; color:var(--alz-azul); margin-bottom:.25rem; }
.form-buscador .form-control, .form-buscador .form-select{
  border-radius:8px;
  border:1px solid #ddd;
  font-size:.9rem;
}
.form-buscador .btn-buscar{
  background:var(--alz-rojo);
  color:#fff; border:none; border-radius:8px; font-weight:700;
  width:100%;
}

/* ---------- Caso detalle ---------- */
.caso-detalle-hero{ background:var(--alz-azul); padding:1.6rem 0; color:#fff; }
.caso-detalle-hero .breadcrumb a{ color:#b9c6dc; }
.caso-detalle-foto{ width:100%; max-height:420px; object-fit:cover; border-radius:14px; }
.caso-detalle-meta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin:1rem 0; }
.caja-respuesta{
  background:var(--alz-gris);
  border-left:5px solid var(--alz-verde);
  border-radius:10px;
  padding:1.3rem 1.5rem;
  margin-top:1.5rem;
}
.caja-respuesta.pendiente{ border-left-color:var(--alz-naranja); }
.caja-pregunta{
  background:#fff8e1;
  border-left:5px solid var(--alz-dorado);
  border-radius:10px;
  padding:1.1rem 1.4rem;
  margin-top:1.2rem;
}

/* ---------- Paginación ---------- */
.pagination .page-link{ color:var(--alz-azul); }
.pagination .page-item.active .page-link{ background:var(--alz-rojo); border-color:var(--alz-rojo); }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .alz-hero .hero-logo{ height:140px; }
  .pasos-wrap{ flex-wrap:wrap; row-gap:1.6rem; justify-content:center; }
  .pasos-wrap::before{ display:none; }
  .paso{ flex:0 0 33.33%; }
}
@media (max-width: 767px){
  .alz-hero{ min-height:0; }
  .alz-hero .bg-overlay{
    background:linear-gradient(180deg,
        rgba(3,8,17,.45) 0%,
        rgba(3,8,17,.62) 40%,
        rgba(3,8,17,.72) 100%);
  }
  .alz-hero .hero-inner{ padding:2.2rem 0; }
  .alz-hero .hero-logo{ height:120px; }
  .alz-hero .whatsapp-box{ margin-top:1.6rem; }
  .paso{ flex:0 0 50%; margin-bottom:1rem; }
  .mapa-card{ margin-top:1.2rem; }
  .alz-cta-final .divisor{ display:none; }
  .alz-cta-final .text-md-end{ text-align:left!important; margin-top:.8rem; }
}
@media (max-width: 575px){
  .alz-hero .hero-logo{ height:100px; }
  .alz-hero h2.pregunta{ font-size:1.2rem; }
  .alz-hero .whatsapp-box .wa-num{ font-size:1.5rem; }
  .paso{ flex:0 0 100%; max-width:260px; margin-bottom:1.6rem; }
}