/* =========================================================
   Policía Municipal de Vallejuelo — Estilos base
   Paleta: azul PMV, dorado acento, oscuro institucional
   ========================================================= */

/* -------- Variables (colores & medidas) -------- */
:root{
  --pmv-azul:#0d3b66;
  --pmv-azul-osc:#0a2e50;
  --pmv-azul-grad-1:#0a2e50;
  --pmv-azul-grad-2:#0d3b66;
  --pmv-azul-grad-3:#194a8d;

  --pmv-dorado:#d4af37;
  --pmv-dorado-osc:#b8932d;

  --pmv-rojo:#d72638;
  --pmv-plateado:#e9eef3;
  --pmv-gris-700:#2a2f36;
  --pmv-gris-300:#bfc8d4;
  --pmv-blanco:#ffffff;

  --radius-lg:18px;
  --radius-md:12px;
  --shadow-1:0 8px 24px rgba(0,0,0,.15);
  --shadow-2:0 16px 36px rgba(0,0,0,.18);
}

/* -------- Reset simple -------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  color:#111;
  background:linear-gradient(180deg,var(--pmv-azul-grad-1),var(--pmv-azul-grad-2) 40%,var(--pmv-azul-grad-3));
  background-attachment: fixed;
}

img{max-width:100%; display:block}

/* -------- Utilidades -------- */
.container{width:min(1100px, 92%); margin:auto}
.muted{color:#cbd5e1; font-size:.92rem}
.accent{color:var(--pmv-plateado)}

/* =========================================================
   TOPBAR (LOGOS + TÍTULO)
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:1000;
  background:var(--pmv-azul-osc);
  border-bottom:4px solid var(--pmv-dorado);
  padding:.6rem .9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--pmv-blanco);
  border-radius:14px;
  padding:.35rem;
  box-shadow:var(--shadow-1);
  transition: transform .15s ease;
}
.brand:hover{ transform:translateY(-1px) }

.brand__logo{
  height:88px;   /* tamaño cómodo escritorio */
  width:auto;
}

/* bloque central con títulos */
.topbar__title{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--pmv-blanco);
  line-height:1.2;
  padding: .2rem .5rem;
  flex:1;                   /* permite centrar perfectamente */
}
.kicker{
  font-weight:600;
  letter-spacing:.12em;
  color:#dbe8ff;
  font-size:1.05rem;
}
.topbar__title strong{
  display:block;
  font-size:2.05rem;
  font-weight:800;
  color:var(--pmv-blanco);
  text-shadow:0 2px 0 rgba(0,0,0,.20);
}
.topbar__title strong::after{
  content:"";
  display:block;
  width:220px; height:4px;
  background:linear-gradient(90deg,transparent, var(--pmv-dorado), transparent);
  border-radius:999px;
  margin:.45rem auto 0;
}

/* =========================================================
   NAVEGACIÓN
   ========================================================= */
.nav{
  background:#1d2633;
  color:var(--pmv-blanco);
  border-bottom:1px solid rgba(255,255,255,.06);
}
/* Contenedor flexible SIEMPRE con wrap para evitar desbordes */
.nav .container{
  display:flex; align-items:center; gap:1rem;
  flex-wrap:wrap;                  /* <-- clave para que Contacto no se salga */
}

/* Botón hamburguesa (oculto en desktop) */
.nav__toggle{
  display:none;            /* se muestra en móvil */
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:.55rem .8rem; border-radius:10px;
  font-weight:600; letter-spacing:.02em;
}

/* Lista de enlaces */
.nav__list{
  display:flex; gap:1.1rem; align-items:center;
  list-style:none; margin:0; padding:.6rem 0;
  position:relative;
  flex-wrap:wrap;           /* si no cabe, baja a segunda línea dentro del banner */
}

.nav a{
  color:#e8eef6; text-decoration:none; font-weight:700;
  padding:.42rem .6rem; border-radius:10px;
  transition:background .2s ease, color .2s ease, transform .12s ease;
  white-space:nowrap;       /* evita que palabras se rompan feo */
}
.nav a:hover{ background:rgba(255,255,255,.08) }

/* Botones */
.btn{display:inline-block; border-radius:12px; font-weight:800}
.btn--primary{
  background:#123e79; color:#fff; padding:.7rem 1.05rem;
  box-shadow: var(--shadow-1); border:1px solid rgba(255,255,255,.12);
}
.btn--ghost{
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.25);
  padding:.62rem 1rem;
}
.btn--danger{
  background:var(--pmv-rojo); color:#fff; padding:.57rem .95rem;
  box-shadow:0 8px 16px rgba(215,38,56,.28); border:0;
}

/* Submenú (escritorio hover) */
.has-submenu{ position:relative }
.submenu{
  display:none; position:absolute; top:100%; left:0;
  background:#101722; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:.5rem; min-width:240px; z-index:5;
  box-shadow: var(--shadow-2);
}
.has-submenu:hover > .submenu{ display:block }
.submenu a{ display:block }

/* Pequeño ajuste de compacidad antes de pasar a hamburguesa */
@media (max-width: 1200px){
  .nav__list{ gap:.7rem }
  .nav a{ padding:.38rem .5rem; font-weight:700; font-size:.97rem }
  .btn--danger{ padding:.52rem .85rem }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:3.5rem 1rem 2.5rem;
  text-align:center; color:#fff;
}
.hero__content{ width:min(820px, 92%); margin:auto }
.hero__logo{
  width:min(360px, 55vw);
  margin:0 auto 1.2rem;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
  border-radius:22px; background:#fff; padding:1.1rem;
}
.slogan{
  color:var(--pmv-rojo);
  font-weight:800;
  font-style:italic;
  font-size:clamp(1.4rem, 2.2vw + 1rem, 2.2rem);
}
.hero h1{
  margin:.25rem 0 1.2rem;
  font-weight:900; font-size:clamp(1.8rem, 3vw + 1rem, 3.2rem);
  color:#fff;
}
.hero__cta{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap }

/* =========================================================
   DENUNCIAS + QR
   ========================================================= */
.denuncias{
  background:#0e2744;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  color:#eaf2ff;
  display:grid; gap:1.2rem; grid-template-columns: 2fr 1fr;
  align-items:center; padding:1.2rem 1rem;
}
.denuncias__text{ padding: .5rem .75rem }
.denuncias__qr img{
  width:min(280px, 56vw); margin-inline:auto;
  background:#fff; border-radius:16px; padding:.75rem; box-shadow:var(--shadow-1);
}

/* =========================================================
   SECCIONES VARIAS
   ========================================================= */
.section{
  background:#0f2f56;
  color:#f1f5fb;
  margin:1.1rem auto;
  border-radius:20px;
  box-shadow:var(--shadow-1);
  padding:1.3rem;
  width:min(1100px, 92%);
}
.section h2{ margin:.35rem 0 1rem; font-size:1.8rem }
.bullets{ margin:.6rem 0 0 1rem }
.bullets li{ margin:.25rem 0 }

/* Historia / Misión / Visión */
.mvv{
  display:grid; gap:1rem;
  grid-template-columns: repeat(3, 1fr);
}
.mvv article{
  background:#102d4a; border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:1rem; min-height:160px;
}

/* =========================================================
   GALERÍA (Carrusel + Lightbox)
   ========================================================= */
.galeria { text-align:center; }
.carousel{
  position:relative;
  max-width: 900px;             /* un poco más ancho que otras secciones */
  margin: 0 auto;
  overflow:hidden;
  border-radius:14px;
  box-shadow: var(--shadow-1);
  background:#0d1f38;
}
.carousel__track{
  display:flex;
  transition: transform .5s ease-in-out;
}
.carousel__img{
  width:100%;
  flex-shrink:0;
  cursor:zoom-in;
  user-select:none;
}
.carousel__btn{
  position:absolute; inset-block-start:50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  color:#fff; border:0; border-radius:12px;
  font-size:2rem; line-height:1;
  padding:.35rem .75rem;
  cursor:pointer;
}
.carousel__btn.prev{ inset-inline-start:10px }
.carousel__btn.next{ inset-inline-end:10px }

/* Lightbox */
.lightbox{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.82);
  z-index: 9999;
  align-items:center; justify-content:center;
  padding: 1.2rem;
}
.lightbox__img{
  max-width:95%; max-height:85%;
  border-radius:12px;
  box-shadow: var(--shadow-2);
}
.lightbox__close{
  position:absolute; top:18px; right:26px;
  font-size:2rem; color:#fff; cursor:pointer;
  user-select:none;
}

/* =========================================================
   CONTACTO & FOOTER
   ========================================================= */
.contact a.link{ color:#cfe3ff; text-decoration:underline dotted }
.footer{
  text-align:center; color:#c4d2e8;
  padding:1.4rem .75rem; background:#0b203c; border-top:1px solid rgba(255,255,255,.07)
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* --- Tablet & abajo: nav hamburguesa --- */
@media (max-width: 900px){
  .nav__toggle{ display:inline-block }
  .nav .container{ flex-wrap:wrap }
  .nav__list{
    display:none; flex-direction:column; width:100%;
    padding:.35rem 0 .75rem;
  }
  .nav__list.show{ display:flex }
  .submenu{ position:static; display:none; width:100%; box-shadow:none; border:0; padding:.25rem 0 }
  .submenu.show{ display:block }

  /* Galería: ancho cómodo en tablet */
  .carousel{ max-width: 95% }
}

/* --- Ajuste general móvil: logos uno a la IZQ y otro a la DER --- */
@media (max-width: 768px){

  /* la barra NO debe apilarse, va en fila */
  .topbar{
    display:flex;
    flex-direction:row;          /* fila */
    align-items:center;
    justify-content:space-between;
    gap:.65rem;
    padding:.5rem .65rem;
  }

  /* orden y comportamiento de cada bloque */
  .brand--left{ order:0 }
  .topbar__title{ order:1; flex:1; text-align:center }
  .brand--right{ order:2 }

  /* tamaños contenidos */
  .brand__logo{
    max-height:62px;             /* para que no queden gigantes */
    width:auto;
  }
  .topbar__title .kicker{ font-size:.98rem }
  .topbar__title strong{ font-size:1.65rem }
  .topbar__title strong::after{ width:170px; height:3px }

  /* Galería */
  .carousel__btn{ font-size:1.6rem; padding:.25rem .55rem }
}

/* --- Móviles medianos/pequeños --- */
@media (max-width: 560px){
  .hero{ padding:2.2rem .9rem 1.6rem }
  .hero__logo{ width:min(300px, 75vw); padding:.9rem; }
  .denuncias{ grid-template-columns:1fr; text-align:center }
  .mvv{ grid-template-columns:1fr } /* Historia/Misión/Visión apiladas */

  /* Galería en móvil */
  .carousel{ max-width: 96% }
}