/* ==========================================================
   Portal Municipalidad de Ñiquén
   CSS separado desde index.php
   ========================================================== */

:root{
  --primary:#0b6ecf;
  --primary-dark:#074d92;
  --accent:#fbbf24;

  /* Celeste institucional + ligeramente más luminoso */
  --bg:#dbeafe;        /* fondo principal */
  --bg2:#e8f2ff;       /* segundo tono para gradientes */

  --text:#0f172a;
  --muted:#64748b;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  font-family:"Outfit",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Fondo más moderno y suave */
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color:var(--text);
  scroll-behavior:smooth;
}


  a{text-decoration:none;color:var(--primary);}
  a:hover{text-decoration:underline;}

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

  .page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  .container{
    width:100%;
    max-width:1800px;
    margin:0 auto;
    padding:0 12px;
  }

  /* HEADER / NAV */
  .top-bar{
    background:transparent;
    border-bottom:1px solid #e2e8f0;
    position:sticky;
    top:0;
    z-index:50;
    transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
    backdrop-filter:blur(0px);
  }
  body.is-scrolled .top-bar{
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(10px);
    box-shadow:0 6px 18px rgba(15,23,42,.12);
  }

  .top-bar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
    gap:16px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    color:var(--primary-dark);
    text-decoration:none;
  }
  .brand-logo{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#e5e7eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:700;
    color:var(--primary-dark);
    overflow:hidden;
  }
  .brand-text{
    line-height:1.2;
  }
  .brand-text small{
    display:block;
    font-size:.75rem;
    color:var(--muted);
    font-weight:400;
  }

  .top-bar-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid transparent;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    background:var(--primary);
    color:#fff;
    transition:.15s;
    white-space:nowrap;
  }
  .btn-outline{
    background:#fff;
    color:var(--primary-dark);
    border-color:#cbd5f5;
  }
  .btn:hover{
    background:var(--primary-dark);
    color:#fff;
    text-decoration:none;
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(15,23,42,.18);
  }
  .btn-outline:hover{
    background:#eff6ff;
  }

  .search-box{
    position:relative;
  }
  .search-box input{
    padding:8px 30px 8px 10px;
    border-radius:999px;
    border:1px solid #cbd5e1;
    font-size:.85rem;
  }
  .search-box button{
    position:absolute;
    right:2px;
    top:2px;
    bottom:2px;
    border:none;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-size:.8rem;
    padding:0 10px;
    cursor:pointer;
  }

  /* NAV BAR PRINCIPAL */
.nav-bar{
  /* margin-top: 36px;  ← ya no es necesario */
  background:var(--primary);
  position:fixed;
  top:170px;          /* ⬅️ antes 52px: súbelo o bájalo a gusto */
  left:0;
  width:100%;
  z-index:999;
  transition:box-shadow .25s ease, background .25s ease;
}

body{
  margin:0;
  padding:0;
  font-family:"Outfit",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);

  /* 🔵 espacio para que no tape el hero */
  padding-top:110px;   /* ajusta si ves que tapa o queda muy abajo */
}

  body.is-scrolled .nav-bar{
    box-shadow:0 8px 18px rgba(15,23,42,.25);
    background:#0b5fcc;
  }

  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .nav-menu{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    padding:0;
    margin:0 auto;   /* asegura centrado como bloque */
    gap:4px;
    justify-content:center;  /* CENTRA LOS BOTONES */
}

  .nav-item{
    position:relative;
  }
  .nav-link{
    position:relative;
    display:block;
    padding:10px 14px;
    font-size:.9rem;
    color:#e5f0ff;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.03em;
    overflow:hidden;
  }
  .nav-link::after{
    content:'';
    position:absolute;
    left:14px;
    right:14px;
    bottom:5px;
    height:2px;
    background:#fbbf24;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
  }
  .nav-link:hover{
    background:rgba(15,23,42,.2);
    text-decoration:none;
  }
  .nav-link:hover::after{
    transform:scaleX(1);
  }

  /* DROPDOWNs simples */
  .nav-item.has-sub > .nav-link::after{
    content:"▾";
    margin-left:4px;
    font-size:.7rem;
    position:static;
    transform:none;
    background:none;
  }

  .nav-submenu li a{
    display:block;
    padding:8px 14px;
    font-size:.9rem;
    color:#111827;
    text-decoration:none;
    white-space:nowrap;
  }
  .nav-submenu li a:hover{
    background:#eff6ff;
  }
  .nav-item:hover > .nav-submenu{
    position:absolute;
    left:0;
    top:100%;
    min-width:240px;
    background:#ffffff;
    border-radius:0 0 14px 14px;
    box-shadow:0 18px 40px rgba(15,23,42,.35);
    list-style:none;
    padding:8px 0;
    margin:0;
    display:none;
    z-index:9500 !important;
}

  /* ===== HERO / BIENVENIDA ===== */
  .hero{
  background:var(--bg) !important;
}


  /* Grid: texto + slider */
  .hero-grid{
    display:grid;
    grid-template-columns:1.2fr 1.8fr; /* slider más ancho */
    gap:30px;
    align-items:center;
  }
  /* Tablets: darle más espacio al slider */
  @media (min-width:768px) and (max-width:1180px){
    .hero-grid{
      grid-template-columns:0.9fr 2.1fr;
    }
  }
  /* Móviles: una sola columna, texto arriba y slider abajo */
  @media (max-width:760px){
    .hero-grid{
      grid-template-columns:1fr;
    }
    .hero-right{
  background:#001b60; /* o el azul exacto de tus banners */
}

    .hero-left{
      order:1;
    }
  }

  .hero-left{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .hero-tag{
    margin-top:48px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(37,99,235,.06);
    border:1px solid rgba(37,99,235,.18);
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#1d4ed8;
  }

  .hero-left h1{
    margin:4px 0 0;
    font-size:2rem;
    text-transform:uppercase;
    color:var(--primary-dark);
  }
  .hero-left h4{
    margin:0;
    color:var(--muted);
    font-weight:500;
  }
  .hero-left p{
    margin:4px 0 0;
    color:#0f172a;
    line-height:1.5;
  }

  .hero-buttons{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .hero-badge-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:6px;
  }
  .info-badge{
    padding:6px 10px;
    border-radius:5px;
    background:#eff6ff;
    font-size:.85rem;
    display:flex;
    align-items:center;
    gap:6px;
    color:#1f2937;
  }

  
/* ==========================================================
   SLIDER COMENTADO / DESACTIVADO
   Este bloque fue comentado para que no aplique estilos al slider.
   ========================================================== */

/*
/ * ==========================================================
   NUEVO SLIDER MODERNO
========================================================== * /

.hero-right{
  position:relative;
  margin-top:90px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(145deg,#020617,#0f172a);
  box-shadow:
    0 25px 60px rgba(15,23,42,.55),
    0 0 0 1px rgba(255,255,255,.05);
}

.hero-slider{
  position:relative;
  width:100%;
  aspect-ratio:16/7;
  overflow:hidden;
  background:#020617;
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:
    opacity .7s ease,
    transform .7s ease;
  transform:scale(1.03);
}

.hero-slide.is-active{
  opacity:1;
  transform:scale(1);
  z-index:2;
}

.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-slide::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(2,6,23,.88) 0%,
      rgba(2,6,23,.25) 40%,
      rgba(2,6,23,.05) 100%
    );
}

.hero-slide-caption{
  position:absolute;
  left:28px;
  bottom:30px;
  z-index:5;
  max-width:65%;
}

.hero-slide-caption h3{
  margin:0 0 8px;
  font-size:1.8rem;
  font-weight:800;
  color:#ffffff;
  text-shadow:0 4px 18px rgba(0,0,0,.55);
}

.hero-slide-caption p{
  margin:0;
  font-size:1rem;
  line-height:1.5;
  color:#e2e8f0;
}

.hero-slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:rgba(15,23,42,.72);
  color:#fff;
  font-size:24px;
  cursor:pointer;
  z-index:10;
  backdrop-filter:blur(12px);
  transition:all .25s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}

.hero-slider-arrow.prev{
  left:18px;
}

.hero-slider-arrow.next{
  right:18px;
}

.hero-slider-arrow:hover{
  background:#2563eb;
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 18px 35px rgba(37,99,235,.45);
}

.hero-slider-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  z-index:10;
}

.hero-slider-dots button{
  width:10px;
  height:10px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:all .25s ease;
}

.hero-slider-dots button.is-active{
  width:34px;
  background:#fbbf24;
  box-shadow:0 0 18px rgba(251,191,36,.7);
}

@media (max-width:960px){

  .hero-right{
    margin-top:20px;
    border-radius:18px;
  }

  .hero-slider{
    aspect-ratio:16/10;
  }

  .hero-slide-caption{
    left:18px;
    right:18px;
    bottom:20px;
    max-width:100%;
  }

  .hero-slide-caption h3{
    font-size:1.2rem;
  }

  .hero-slide-caption p{
    font-size:.88rem;
  }

  .hero-slider-arrow{
    width:42px;
    height:42px;
    font-size:20px;
  }

}
*/

/* BLOQUE “UN MUNICIPIO PUERTAS ABIERTAS” */
  .open-muni{
    background:transparent;
    border-top:1px solid #e5e7eb;
    padding:16px 0 8px;
    text-align:center;
  }
  .open-muni h3{
    margin:0;
    font-size:1.1rem;
    text-transform:uppercase;
    color:var(--primary-dark);
  }
  .open-muni p{
    max-width:800px;
    margin:6px auto 0;
    font-size:.95rem;
    color:var(--muted);
  }

  /* CONTENIDO PRINCIPAL */
  .main-content{
    flex:1;
    padding:16px 0 32px;
  }

  /* 🔹 3 COLUMNAS (IZQ - CENTRO - DERECHA) */
  .grid-main{
    display:grid;
    grid-template-columns: 0.8fr 7fr 0.8fr; /* Laterales pequeños + centro amplio */
    gap:30px;
    align-items:flex-start;
}

  .left-sidebar .block{
    font-size:.9rem;
  }

  .block{
    background:transparent;
    border-radius:12px;
    box-shadow:0 6px 14px rgba(15,23,42,.06);
    padding:16px;
    margin-bottom:18px;
    position:relative;
    overflow:hidden;
    transition:
      box-shadow .25s ease,
      transform .25s ease,
      border-color .25s ease,
      background .25s ease;
    border:1px solid rgba(148,163,184,.25);
  }
  .block::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right, rgba(37,99,235,.06), transparent 55%);
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
  }
  .block:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(15,23,42,.14);
    border-color:rgba(37,99,235,.35);
  }
  .block:hover::before{
    opacity:1;
  }

  .block-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }
  .block-header h2{
    margin:0;
    font-size:1.2rem;
    text-transform:uppercase;
    color:var(--primary-dark);
  }

  /* Ñiquén Informa */
  .info-grid{
    display:grid;
    grid-template-columns:1.8fr 1.2fr;
    gap:14px;
  }
  .info-main{
    position:relative;
    border-radius:10px;
    overflow:hidden;
    background:#000;
    color:#fff;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .info-main img{
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
    background:#000;
  }

  .info-main--large{
    min-height: 360px;
  }
  .info-main--large{
  min-height: auto;
}

.info-main--large img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  background:#000;
}

@media (min-width: 992px){
  .info-main--large img{
    height:auto;
  }
}

  .info-main-body{
    padding:12px 14px 16px;
    background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
    font-size:.9rem;
    position:relative;
  }
  .info-tag{
    display:inline-block;
    padding:2px 8px;
    background:var(--accent);
    color:#1f2937;
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    border-radius:3px;
    margin-bottom:6px;
  }
  .info-main-body h3{
    margin:0 0 4px 0;
    font-size:1.1rem;
  }
  .info-main-body p{
    margin:0 0 4px 0;
    font-size:.9rem;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .info-side-list{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .info-side-item{
    display:grid;
    grid-template-columns:1.2fr 2fr;
    gap:0;
    border-radius:8px;
    overflow:hidden;
    background:#0f172a;
    color:#e5e7eb;
    font-size:.85rem;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, background .18s ease;
  }
  .info-side-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    min-height:70px;
  }
  .info-side-body{
    padding:6px 8px;
  }
  .info-side-body h4{
    margin:0 0 3px 0;
    font-size:.9rem;
  }
  .info-side-body p{
    margin:0;
    font-size:.8rem;
    color:#cbd5f5;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .info-main:hover,
  .info-side-item:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(15,23,42,.35);
    background:#111827;
  }

  .leer-mas-link{
    display:inline-block;
    margin-top:4px;
    font-size:.8rem;
    font-weight:600;
    color:var(--accent);
    text-decoration:none;
  }
  .leer-mas-link:hover{
    text-decoration:underline;
  }

 /* Eventos Municipales — tarjetas 3D */
.event-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

@media (max-width:800px){
  .event-list{
    grid-template-columns:1fr;
  }
}

.event-card{
  position:relative;
  border-radius:16px;
  padding:12px 14px;
  background:linear-gradient(135deg,#0f172a,#020617);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.5);
  box-shadow:0 10px 26px rgba(15,23,42,.65);
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  overflow:hidden;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .22s ease,
    border-color .22s ease;
}

/* brillo suave 3D */
.event-card::before{
  content:'';
  position:absolute;
  inset:-40%;
  background:conic-gradient(
    from 200deg,
    rgba(59,130,246,.0),
    rgba(59,130,246,.55),
    rgba(16,185,129,.7),
    rgba(234,179,8,.55),
    rgba(59,130,246,.0)
  );
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .3s ease;
}

/* contenido por encima del brillo */
.event-icon,
.event-info{
  position:relative;
  z-index:1;
}

.event-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  background:rgba(15,23,42,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.7);
  flex-shrink:0;
}
.event-icon .material-icons{
  font-size:24px;
  color:#fbbf24;
}

.event-info{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.event-date{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#bfdbfe;
}
.event-name{
  font-weight:700;
  font-size:.95rem;
}
.event-place{
  font-size:.85rem;
  color:#e5e7eb;
  opacity:.9;
}

/* efecto hover 3D con cambio de color (sin fondo blanco) */
.event-card:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 18px 40px rgba(15,23,42,.9);
  border-color:rgba(59,130,246,.95);
  background:linear-gradient(135deg,#1d4ed8,#0f172a);
}
.event-card:hover::before{
  opacity:.6;
}


  /* Redes Sociales */
  .social-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }
  .social-card{
    border-radius:10px;
    border:1px solid #e5e7eb;
    padding:12px;
    text-align:center;
    font-size:.9rem;
    background:#f9fafb;
    transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease, background .22s ease;
  }
  .social-card strong{
    display:block;
    margin-bottom:6px;
  }
.social-card:hover{
  filter:none; /* no subir brillo */
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 22px 45px rgba(0,0,0,.6);
}


  /* YouTube */
  .youtube-placeholder{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    border-radius:10px;
    border:1px solid #e5e7eb;
    background:#000;
  }
  .youtube-placeholder iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }

/* Redes Sociales — Tarjetas 3D con colores de marca */
.social-grid-3d{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}

.social-card{
  position:relative;
  border-radius:18px;
  padding:16px 16px 18px;
  color:#ffffff;
  overflow:hidden;
  box-shadow:0 14px 30px rgba(15,23,42,.45);
  transform:translateY(0) scale(1);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease,
    background .22s ease;
  cursor:default;
}

/* Brillo diagonal suave */
/* Brillo suave sin blanco, adaptado al color de la red */
.social-card::before{
  content:'';
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at top left, rgba(255,255,255,.05), transparent 60%);
  opacity:.5;
  pointer-events:none;
  mix-blend-mode:overlay;
}


/* Contenido por encima del brillo */
.social-card > *{
  position:relative;
  z-index:1;
}

/* Hover 3D */
.social-card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 22px 45px rgba(15,23,42,.75);
  filter:brightness(1.05);
}

/* Header dentro de la tarjeta */
.social-card-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.social-card-header strong{
  font-size:1rem;
}
.social-card-header small{
  font-size:.8rem;
  opacity:.9;
}

/* Icono redondo 3D */
.social-icon{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.18);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  font-size:1.4rem;
}
.social-text{
  margin:4px 0 12px;
  font-size:.9rem;
  line-height:1.4;
}

/* Botón principal de cada red */
.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  border:none;
  text-decoration:none;
  background:rgba(15,23,42,.25);
  color:#ffffff;
  box-shadow:0 10px 22px rgba(15,23,42,.6);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}
.social-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,0,0,.75);
  text-decoration:none;
}

/* Colores de marca */
.social-card--ig{
  background:radial-gradient(circle at top left,#ff9a9e 0,#f472b6 30%,#ec4899 52%,#8b5cf6 92%);
}
.social-card--fb{
  background:linear-gradient(135deg,#2563eb,#1d4ed8,#1e3a8a);
}
.social-card--yt{
  background:linear-gradient(135deg,#ef4444,#dc2626,#b91c1c);
}

/* Botón con tono más oscuro de la marca */
.social-btn--ig{
  background:rgba(88,28,135,.75);
}
.social-btn--ig:hover{
  background:rgba(76,29,149,.95);
}
.social-btn--fb{
  background:rgba(30,64,175,.85);
}
.social-btn--fb:hover{
  background:rgba(30,64,175,1);
}
.social-btn--yt{
  background:rgba(153,27,27,.9);
}
.social-btn--yt:hover{
  background:rgba(127,29,29,1);
}

/* Responsive: 2 columnas y luego 1 */
@media (max-width:960px){
  .social-grid-3d{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  .social-grid-3d{
    grid-template-columns:1fr;
  }
}

  /* Últimas Noticias */
  .news-list{
    list-style:none;
    padding:0;
    margin:0;
  }
  .news-list li{
    padding:8px 0;
    border-bottom:1px solid #e5e7eb;
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:.9rem;
  }
  .news-list li:last-child{
    border-bottom:none;
  }
  .news-list time{
    font-size:.8rem;
    color:var(--muted);
    white-space:nowrap;
  }

  /* ASIDE DERECHO */
  .aside-block h3{
    margin-top:0;
    font-size:1rem;
    text-transform:uppercase;
    color:var(--primary-dark);
  }
  .quick-links{
    list-style:none;
    margin:0;
    padding-left:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .quick-links a{
    font-size:.9rem;
  }

  /* FOOTER NUEVO */
.footer{
  background:radial-gradient(circle at top left,#0b1120,#020617 55%,#020617 100%);
  color:#e5e7eb;
  margin-top:30px;
  position:relative;
  overflow:hidden;
}

/* brillo suave */
.footer::before{
  content:'';
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at top left,rgba(59,130,246,.18),transparent 55%),
    radial-gradient(circle at bottom right,rgba(248,250,252,.08),transparent 60%);
  opacity:.9;
  pointer-events:none;
}

.footer-inner{
  position:relative;
  z-index:1;
  padding:26px 0 20px;
  display:grid;
  grid-template-columns:2fr 1.4fr 1.5fr;
  gap:26px;
}

.footer-col h4{
  margin:0 0 10px;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#bfdbfe;
}

.footer-col p{
  margin:2px 0;
  font-size:.88rem;
  color:#e5e7eb;
}

/* Marca / logo */
.footer-brand{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.footer-logo-wrap{
  width:58px;
  height:58px;
  border-radius:18px;
  background:rgba(15,23,42,.9);
  box-shadow:
    0 10px 25px rgba(0,0,0,.6),
    0 0 0 1px rgba(148,163,184,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.footer-logo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.footer-brand-text p strong{
  color:#facc15;
}

/* Enlaces */
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{
  margin-bottom:6px;
}
.footer-links a{
  color:#e5e7eb;
  font-size:.9rem;
  text-decoration:none;
  position:relative;
  padding-left:14px;
}
.footer-links a::before{
  content:'›';
  position:absolute;
  left:0;
  top:0;
  font-size:.8rem;
  color:#60a5fa;
}
.footer-links a:hover{
  color:#bfdbfe;
}

/* Redes sociales botones 3D */
.footer-social{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}
.footer-social-btn{
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:7px 12px;
  font-size:.88rem;
  font-weight:600;
  text-decoration:none;
  color:#f9fafb;
  box-shadow:0 10px 24px rgba(0,0,0,.6);
  transform:translateY(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .15s ease,
    background .18s ease;
}
.footer-social-icon{
  width:26px;
  height:26px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  background:rgba(15,23,42,.85);
}

/* Colores por red */
.footer-social-fb{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
}
.footer-social-ig{
  background:radial-gradient(circle at 30% 0,#f97316,#ec4899 35%,#8b5cf6 75%);
}
.footer-social-yt{
  background:linear-gradient(135deg,#ef4444,#b91c1c);
}

.footer-social-btn:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 18px 40px rgba(0,0,0,.8);
  filter:brightness(1.03);
}

/* Texto final */
.footer-copy{
  font-size:.8rem;
  color:#cbd5f5;
  margin:4px 0 0;
}

/* Franja inferior */
.footer-bottom{
  position:relative;
  z-index:1;
  border-top:1px solid rgba(148,163,184,.5);
  background:rgba(15,23,42,.96);
}
.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 0 10px;
  font-size:.8rem;
  color:#9ca3af;
}

/* Responsive */
@media (max-width:960px){
  .footer-inner{
    grid-template-columns:1fr;
  }
  .footer-brand{
    align-items:center;
  }
  .footer-bottom-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}


  /* RESPONSIVE GENERAL */
  @media (max-width:960px){
    .hero{
      padding-top:18px;
    }
    .hero-badge-row{
      grid-template-columns:1fr;
    }
    .hero-left h1{
      font-size:1.7rem;
    }
    .grid-main{
      grid-template-columns:1fr;
    }
    .event-list{
      grid-template-columns:1fr;
    }
    .social-grid{
      grid-template-columns:1fr 1fr;
    }
    .footer-cols{
      grid-template-columns:1fr;
    }
  }

  @media (max-width:720px){
    .nav-inner{
      flex-direction:column;
      align-items:flex-start;
    }
    .nav-menu{
      width:100%;
      overflow:visible !important;
    }
    .hero-left h1{
      font-size:1.5rem;
    }
    .info-grid{
      grid-template-columns:1fr;
    }
    .social-grid{
      grid-template-columns:1fr;
    }
  }

  /* Paginador de noticias */
  .news-pager{
    margin-top:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    font-size:.85rem;
    flex-wrap:wrap;
  }
  .news-pager button{
    border-radius:999px;
    border:1px solid rgba(11,110,207,.25);
    padding:4px 10px;
    cursor:pointer;
    background:#e0edff;
    color:#0b6ecf;
    font-weight:600;
    min-width:32px;
  }
  .news-pager button:hover{
    background:var(--primary);
    color:#fff;
  }
  .news-pager button.active{
    background:var(--primary);
    color:#fff;
  }
  .news-pager button[disabled]{
    opacity:.45;
    cursor:default;
  }

  /* ===== MODAL DE NOTICIAS ===== */
  .news-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.65);
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
    z-index:80;
  }
  .news-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px 10px;
    border-bottom:1px solid #e5e7eb;
    background:linear-gradient(90deg,#0b6ecf,#2563eb);
    color:#fff;
  }
  .news-modal-header h3{
    margin:0;
    font-size:1.1rem;
  }
  .news-modal-close{
    border:none;
    background:rgba(15,23,42,.25);
    color:#fff;
    width:30px;
    height:30px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    cursor:pointer;
  }
  .news-modal-close:hover{
    background:rgba(15,23,42,.45);
  }
  .news-modal-meta{
    font-size:.85rem;
    color:var(--muted);
    margin-bottom:6px;
  }
  .news-modal-body p{
    font-size:.95rem;
    line-height:1.55;
    margin-top:0;
    margin-bottom:8px;
  }

  .news-modal{
    background:transparent;
    border-radius:14px;
    width:900px;
    max-width:95%;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    box-shadow:0 20px 50px rgba(15,23,42,.6);
    overflow:hidden;
  }
  .news-modal-header{
    flex:none;
  }
  .news-modal-body{
    flex:1;
    padding:14px 18px 18px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
  }

  .news-modal-image-wrap{
    position:relative;
    width:100%;
    max-width:100%;
    padding-top:56.25%;
    border-radius:10px;
    overflow:hidden;
    margin-bottom:12px;
    background:#000;
  }
  .news-modal-image-wrap img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }
  .news-modal-image-wrap iframe,
  .news-modal-image-wrap video{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:40%;
    max-width:40%;
    aspect-ratio:16/9;
    height:auto;
    max-height:55vh;
    object-fit:contain;
    border-radius:10px;
    display:block;
  }

  /* === ANIMACIONES HERO === */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeRight {
    from { opacity: 0; transform: translateX(-25px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes fadeLeft {
    from { opacity: 0; transform: translateX(25px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes floatSoft {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }

  @keyframes badgeSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero-left {
    animation: fadeRight 0.9s ease-out forwards;
  }
  .hero-left h1,
  .hero-left h4,
  .hero-left p {
    animation: fadeUp 1.1s ease-out forwards;
  }

  .hero-buttons a {
    animation: fadeUp 1.2s ease-out forwards;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .hero-buttons a:hover {
    transform: translateY(-4px);
    box-shadow: 0px 10px 20px rgba(0,0,0,.18);
  }

  .hero-stat {
    animation: fadeUp 1.3s ease-out forwards;
    transition: transform .20s ease, box-shadow .20s ease;
  }
  .hero-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15,23,42,.18);
  }

  .hero-right-badge {
    position:absolute;
    top:14px;
    left:16px;
    padding:4px 10px;
    background:rgba(15,23,42,.78);
    color:#e5e7eb;
    border-radius:999px;
    font-size:.75rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    z-index:5;
    animation: badgeSlide 0.9s ease-out forwards;
  }

 /* 🔧 Ajustes extra para celulares */
@media (max-width: 960px){
  /* Evitar scroll horizontal raro */
  html, body{
    overflow-x:hidden;
  }

  /* La grilla principal pasa a una sola columna (ya lo tienes, lo reforzamos) */
  .grid-main{
    grid-template-columns:1fr;
    gap:16px;
  }

  /* Menú principal deja de ser fijo para no tapar contenido */
  .nav-bar{
    position:static;
    top:auto;
  }
/* BLOQUE RESPONSIVE DEL SLIDER COMENTADO


  / * HERO: texto + slider en una columna * /
  .hero-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .hero-left{
    order:1;
  }

  .hero-right{
    order:2;
    width:100%;
    margin:12px 0 0;
    border-radius:16px;
  }

  .hero-slider{
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;  / * formato horizontal típico * /
  }

  .hero-slide img{
    width:100%;
    height:auto;
    object-fit:cover;
  }

  
*/
.hero-tag{
    margin-top:8px;
  }
}

/* Ajuste para pantallas muy chicas (teléfonos de 4–5") */
@media (max-width: 480px){
  .hero-left h1{
    font-size:1.5rem;
  }
  .hero-left h4{
    font-size:.9rem;
  }
  .hero-left p{
    font-size:.85rem;
  }
}


  .hero-contact-column{
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .hero-contact-box{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
    border-radius:14px;
    background:#f1f5ff;
    border:1px solid rgba(148,163,184,.45);
    box-shadow:0 8px 18px rgba(15,23,42,.06);
    transform:translateY(0);
    transition:
      background .22s ease,
      color .22s ease,
      box-shadow .22s ease,
      transform .22s ease,
      border-color .22s ease;
  }
  .hero-contact-icon{
    width:34px;
    height:34px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    background:rgba(37,99,235,.06);
  }
  .hero-contact-text{
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .hero-contact-label{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--muted);
  }
  .hero-contact-text strong{
    font-size:.95rem;
    color:#0f172a;
  }
  .hero-contact-hours div{
    font-size:.9rem;
  }

  .hero-contact-box:hover{
    background:linear-gradient(135deg,#2563eb,#0b6ecf);
    border-color:rgba(15,23,42,.2);
    box-shadow:0 12px 26px rgba(15,23,42,.25);
    transform:translateY(-4px);
    color:#f9fafb;
  }
  .hero-contact-box:hover .hero-contact-label{
    color:#dbeafe;
  }
  .hero-contact-box:hover strong,
  .hero-contact-box:hover .hero-contact-hours div{
    color:#ffffff;
  }
  .hero-contact-box:hover .hero-contact-icon{
    background:rgba(15,23,42,.25);
  }

  .hero-contact-box--phone:hover{
    background:linear-gradient(135deg,#16a34a,#15803d);
  }
  .hero-contact-box--address:hover{
    background:linear-gradient(135deg,#0ea5e9,#0369a1);
  }
  .hero-contact-box--hours:hover{
    background:linear-gradient(135deg,#f97316,#ea580c);
  }

  /* ==== TOP BAR ESTILO INSTITUCIONAL ==== */
  .pro-topbar{
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 10px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  }
  .pro-logo{
    width:50px;
    height:50px;
    border-radius:12px;
    background:url('assets/img/escudo_niquen.png') center/cover no-repeat;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
    flex-shrink:0;
  }
  .pro-brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
  }
  .pro-brand .brand-text{
    color:#0f172a;
    font-weight:700;
    line-height:1.1;
  }
  .pro-brand small{
    font-weight:400;
    font-size:.8rem;
    color:#64748b;
  }
  .pro-actions{
    display:flex;
    gap:14px;
    align-items:center;
    flex-wrap:wrap;
  }
  .pro-search{
    position:relative;
  }
  .pro-search input{
    padding:8px 40px 8px 12px;
    border-radius:8px;
    border:1px solid #cbd5e1;
    font-size:.9rem;
    width:210px;
    transition:all .25s;
  }
  .pro-search input:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,0.25);
    outline:none;
  }
  .pro-search button{
    position:absolute;
    right:5px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:#2563eb;
    color:#fff;
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
  }
  .pro-search button:hover{
    background:#1d4ed8;
  }

  .pro-btn{
    background:#2563eb;
    color:#fff;
    padding:8px 16px;
    border-radius:8px;
    font-size:.9rem;
    font-weight:600;
    border:none;
    cursor:pointer;
    transition:.24s;
    text-decoration:none;
  }
  .pro-btn:hover{
    background:#1d4ed8;
  }
  .pro-btn-outline{
    background:transparent;
    border:2px solid #2563eb;
    color:#1e3a8a;
  }
  .pro-btn-outline:hover{
    background:#eff6ff;
    border-color:#1d4ed8;
  }

  @media(max-width:720px){
    .top-bar-inner{
      flex-direction:column;
      align-items:flex-start;
      gap:14px;
    }
    .pro-search input{
      width:100%;
    }
  }

  /* BOTONES TRANSPARENCIA TOPBAR */
  .pro-actions .pro-btn{
    padding: 8px 14px;
    font-weight: 700;
    border-radius: 999px;
    text-align: center;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    border: none;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-icon{
    font-size: 1.1rem;
    line-height: 1;
  }
  .btn-label{
    line-height: 1;
  }

  .transparencia-activa{
    background: #005CA9;
    color: #fff !important;
  }
  .transparencia-activa:hover{
    background: #004481;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
  }
  .solicitud-info{
    background: #00A650;
    color: #fff !important;
  }
  .solicitud-info:hover{
    background: #008C43;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
  }
  .tramites-btn{
    background: var(--primary);
    color: #fff;
  }
  .tramites-btn:hover{
    background: var(--primary-dark);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(37,99,235,.4);
  }
  .pro-actions .pro-btn{
    margin-left: 6px;
  }
  .pro-topbar a,
  .pro-topbar a:hover {
    text-decoration: none;
  }
  .pro-btn,
  .pro-btn:hover{
    text-decoration: none;
  }
  .pro-logo img{
    width: 48px;
    height: auto;
    display: block;
  }

  /* Slider de programas */
.programs-slider-section{
  padding: 50px 0;
  text-align:center;
}
.programs-slider-section h3{
  font-size:1.8rem;
  margin-bottom:20px;
  font-weight:700;
}
.programs-slider{
  display:flex;
  gap:20px;
  overflow-x:hidden;
  white-space:nowrap;
  padding:10px 0;
}

/* CUADROS DE PROGRAMAS */
.program-card{
  background: var(--color, #2563EB);   /* color base */
  color:#fff;
  border-radius:16px;
  padding:25px 30px;
  min-width:220px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  cursor:pointer;

  /* transiciones suaves */
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    filter .25s ease;
}

/* 🎯 EFECTO 3D + CAMBIO COMPLETO DE COLOR */
.program-card:hover,
.program-card:focus-visible{
  transform: translateY(-12px) scale(1.08);   /* efecto 3D real */
  box-shadow:0 20px 40px rgba(0,0,0,.35);

  /* color nuevo al hover SIN el brillo blanco */
  background: var(--hover-color, #1e40af);   /* nuevo color */
  filter: brightness(1.1);
}


.program-icon{
  font-size:42px;
  margin-bottom:10px;
}
.program-title{
  font-size:1.05rem;
  line-height:1.2;
}

  @keyframes modalFade{
    from{opacity:0; transform: scale(.92);}
    to{opacity:1; transform: scale(1);}
  }

  /* === MODALES PROGRAMAS (3D COLOREADOS) === */
.program-modal{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.70);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 3000;
}
.program-modal.show{
  display: flex;
}

/* tarjeta principal del modal */
.program-modal-content{
  --modal-color: #2563eb;
  --modal-color-dark: #1d4ed8;

  width: 100%;
  max-width: 560px;
  border-radius: 22px;
  padding: 22px 22px 20px;
  background:
    radial-gradient(circle at top left,
      rgba(255,255,255,.14),
      transparent 55%)
    ,
    linear-gradient(145deg,
      var(--modal-color),
      var(--modal-color-dark));
  box-shadow:
    0 20px 50px rgba(15,23,42,.8),
    0 0 0 1px rgba(15,23,42,.3);
  position: relative;
  color:#f9fafb;
  animation: modalFade .35s ease-out;
}

/* encabezado con icono */
.program-modal-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}
.program-modal-icon{
  width:52px;
  height:52px;
  border-radius:18px;
  background:rgba(15,23,42,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.program-modal-icon .material-icons{
  font-size:30px;
  color:#f9fafb;
}
.program-modal-titles h2{
  margin:0;
  font-size:1.35rem;
  font-weight:700;
}
.program-modal-subtitle{
  margin:2px 0 0;
  font-size:.88rem;
  opacity:.9;
}

/* cuerpo y pie */
.program-modal-body{
  margin-top:8px;
  font-size:.96rem;
  line-height:1.6;
}
.program-modal-body p{
  margin:0 0 14px;
}
.program-modal-footer{
  margin-top:8px;
}

/* botón principal */
.program-modal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 20px;
  border-radius:999px;
  background:transparent;
  color:var(--modal-color-dark);
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(15,23,42,.45);
  border:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.program-modal-btn:hover{
  transform:translateY(-2px);
  background:#0f172a;
  color:#f9fafb;
  box-shadow:0 14px 32px rgba(15,23,42,.75);
}

/* botón cerrar */
.program-modal-close{
  position:absolute;
  right:14px;
  top:14px;
  background:rgba(15,23,42,.55);
  border:none;
  width:32px;
  height:32px;
  border-radius:999px;
  font-size:1.25rem;
  cursor:pointer;
  color:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(15,23,42,.7);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.program-modal-close:hover{
  background:rgba(15,23,42,.85);
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 10px 24px rgba(15,23,42,.9);
}

/* responsive */
@media (max-width:640px){
  .program-modal-content{
    padding:18px 16px 18px;
    border-radius:18px;
  }
  .program-modal-titles h2{
    font-size:1.15rem;
  }
}


  /* CUADROS PERFILES FACEBOOK */
  .fb-profiles-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 8px;
  }
  .fb-profile-card{
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
  }
  .fb-profile-header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .fb-icon{
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b6ecf;
    color: #ffffff;
    font-size: 1.2rem;
  }
  .fb-profile-header strong{
    display: block;
    color: #0f172a;
  }
  .fb-profile-header small{
    font-size: .8rem;
    color: #64748b;
  }
  @media (max-width: 960px){
    .fb-profiles-grid{
      grid-template-columns: 1fr;
    }
  }

  /* MODAL IMAGEN NÚMEROS */
  .img-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 40px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
  }
  .img-modal-content {
    margin: auto;
    display: block;
    max-width: 95%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 0 26px rgba(255,255,255,0.3);
  }
  .img-modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
  }
  .img-modal-close:hover {
    transform: scale(1.2);
  }
  .programs-slider {
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .programs-slider::-webkit-scrollbar {
    display: none;
  }

  /* 🔵 REVEAL ANIMADO AL HACER SCROLL */
  .reveal-item{
    opacity:0;
    transform:translateY(16px);
    transition:
      opacity .45s ease-out,
      transform .45s ease-out,
      box-shadow .22s ease-out,
      border-color .22s ease-out,
      background .22s ease-out;
  }
  .reveal-item.in-view{
    opacity:1;
    transform:translateY(0);
  }

  /* BOTÓN VOLVER ARRIBA */
  .back-to-top{
    position:fixed;
    right:16px;
    bottom:18px;
    width:42px;
    height:42px;
    border-radius:999px;
    border:none;
    background:#0b6ecf;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(15,23,42,.45);
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease, background .2s ease;
    z-index:90;
  }
  .back-to-top.show{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  .back-to-top:hover{
    background:#074d92;
  }
  .fb-profiles-grid{
  display:flex;
  flex-direction:column;   /* una tarjeta bajo la otra */
  gap:20px;
  margin-top:8px;
}


/* === PANEL LATERAL FACEBOOK (3D) === */
.fb-side-panel{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%) translateX(100%);
  width:340px;
  max-width:90vw;
  background:linear-gradient(145deg,#020617,#0b1120);
  border-radius:20px 0 0 20px;
  box-shadow:0 18px 40px rgba(15,23,42,.75);
  color:#e5e7eb;
  z-index:120;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s;
  border:1px solid rgba(148,163,184,.6);
  overflow:hidden;
}

/* Estado abierto */
.fb-side-panel.fb-open{
  transform:translateY(-50%) translateX(0);
  box-shadow:0 22px 50px rgba(15,23,42,.85);
}

/* Pestaña lateral */
/* Pestaña SIEMPRE visible */
.fb-side-tab{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  width:60px;
  height:180px;
  border-radius:20px 0 0 20px;
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  color:#fff;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 8px 25px rgba(0,0,0,.4);
  border:none;
  z-index:200; /* IMPORTANTÍSIMO */
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.fb-side-panel .fb-side-tab{
  display:none !important;
}

.fb-side-tab .material-icons{
  font-size:26px;
}

.fb-side-tab:hover{
  background:linear-gradient(180deg,#1d4ed8,#1e40af);
  transform:translateY(-50%) translateX(-2px);
}

/* Contenido interno */
.fb-side-content{
  padding:14px 14px 12px;
  max-height:80vh;
  overflow-y:auto;
}

.fb-side-header{
  margin-bottom:8px;
}

.fb-side-header h3{
  margin:0;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#bfdbfe;
}

.fb-side-header p{
  margin:4px 0 0;
  font-size:.85rem;
  color:#9ca3af;
}

/* Tarjetas de perfil */
.fb-profile-card{
  border-radius:14px;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(148,163,184,.6);
  padding:10px 10px 12px;
  margin-top:10px;
  box-shadow:0 10px 26px rgba(15,23,42,.7);
}

.fb-profile-header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:6px;
}

.fb-icon{
  width:34px;
  height:34px;
  border-radius:999px;
  background:#2563eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  box-shadow:0 6px 14px rgba(37,99,235,.8);
}

.fb-profile-header strong{
  display:block;
  font-size:.95rem;
  color:#e5e7eb;
}

.fb-profile-header small{
  font-size:.75rem;
  color:#9ca3af;
}

.fb-profile-card p{
  font-size:.8rem;
  color:#cbd5f5;
  margin:0 0 6px;
}

/* Responsive: en móviles que se pegue abajo */
@media (max-width:720px){
  .fb-side-panel{
    top:auto;
    bottom:0;
    right:0;
    left:0;
    transform:translateY(100%);
    width:100%;
    border-radius:20px 20px 0 0;
  }
  .fb-side-panel.fb-open{
    transform:translateY(0);
  }
  .fb-side-tab{
    left:50%;
    top:-40px;
    transform:translate(-50%,0);
    width:150px;
    height:40px;
    flex-direction:row;
    border-radius:999px;
    box-shadow:0 8px 20px rgba(15,23,42,.7);
  }
}
/* Texto vertical profesional */
.vertical-text{
  writing-mode: vertical-rl;     /* Hace que el texto sea vertical */
  text-orientation: upright;     /* Mantiene las letras rectas, no giradas */
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ===== HUINCHA SUPERIOR TIPO VITACURA ===== */
.top-ribbon{
  width:100%;
  background:#fde047 !important; /* Amarillo claro */
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  font-family:"Outfit","Segoe UI",system-ui,sans-serif;
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
}

/* 🔹 AQUI LE DAMOS ALTURA REAL AL FONDO */
.ribbon-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  padding:16px 0;      /* ⬅ Aumenta o baja este valor para más/menos altura */
}


/* Botones oblicuos */
.ribbon-item{
  flex:1;
  padding:14px 26px;
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:11px;
  position:relative;
  overflow:hidden;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  border-left:1px solid rgba(255,255,255,.18);
   /* 👇 AÑADE ESTO 👇 */
  border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,0.22);

}

/* Elimina CUALQUIER subrayado en el botón */
.ribbon-item,
.ribbon-item * {
  text-decoration:none !important;
}

/* primer y último botón */
.ribbon-item:first-child{
  clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
  border-left:none;
}
.ribbon-item:last-child{
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);
}

/* Colores de cada botón */
.ribbon-item--blue{
  background:linear-gradient(90deg,#0b6ecf,#2563eb);
}
.ribbon-item--green{
  background:linear-gradient(90deg,#22c55e,#16a34a);
}
.ribbon-item--orange{
  background:linear-gradient(90deg,#f97316,#ea580c);
}
.ribbon-item--dark{
  background:linear-gradient(90deg,#111827,#1f2937);
}

/* Título y subtítulo */
/* Título y subtítulo (AGRANDADOS) */
.ribbon-title{
  font-weight:700;
  font-size:14px;   /* antes 11px */
}
.ribbon-sub{
  font-weight:400;
  font-size:12px;   /* antes 10px */
  text-transform:none;
  opacity:.9;
}


/* ==== EFECTO HOVER PROFESIONAL ==== */
.ribbon-item{
  transition:
    transform .20s ease,
    box-shadow .25s ease,
    filter .25s ease,
    background .25s ease;
}

.ribbon-item:hover{
  transform: translateY(-3px);
  filter: brightness(1.20);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

/* ==== ILUMINACIÓN POR COLOR SEGÚN BOTÓN ==== */

/* Botón azul */
.ribbon-item--blue:hover{
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

/* Botón verde */
.ribbon-item--green:hover{
  background: linear-gradient(90deg, #4ade80, #16a34a);
}

/* Botón naranja */
.ribbon-item--orange:hover{
  background: linear-gradient(90deg, #fb923c, #ea580c);
}

/* Botón oscuro */
.ribbon-item--dark:hover{
  background: linear-gradient(90deg, #374151, #1f2937);
}

/* ===== FOOTER ESTILO  ===== */
.footer-pro{
  background: linear-gradient(135deg,#3BA3F5,#1F7CD9);
  color:white;
}

.footer-pro-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  padding:32px 0 20px;
  border-top:1px solid rgba(148,163,184,.3);
  border-bottom:1px solid rgba(148,163,184,.25);
}

.footer-pro-col{
  flex:1;
  min-width:200px;
}

/* Columna brand */
.footer-pro-logo-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}
.footer-pro-logo{
  width:90px;          /* 🔵 Aumenta el tamaño aquí */
  height:90px;
  border-radius:50%;
  overflow:hidden;
  background:#111827;  /* marco */
  display:flex;
  align-items:center;
  justify-content:center;
}

.footer-pro-logo img{
  width:90%;
  height:90%;
  object-fit:contain;   /* 🔵 Para que NO se corte */
}

.footer-pro-brand-text{
  display:flex;
  flex-direction:column;
}
.footer-pro-muni{
  color:white;
  font-size:1.1rem;
  font-weight:600;
}

.footer-pro-sub{
  color:#e5e7eb;
  font-size:.85rem;
}

.footer-pro-info p{
  margin:4px 0;
  color:#d1d5db;
}

/* Enlaces útiles */
.footer-pro-links-wrap h5{
  margin:12px 0 6px;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  /* Azul institucional oscuro (en vez de verde) */
  color:#0a3268;
}

.footer-pro-links{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-pro-links li{
  margin-bottom:4px;
}

.footer-pro-links a{
  /* Texto legible sobre fondo claro */
  color:#0b1729;
  text-decoration:none;
  font-size:.9rem;
}

.footer-pro-links a:hover{
  /* Azul más vivo en hover */
  color:#0052cc;
  text-decoration:underline;
}

/* Contacto */
.footer-pro-contact h4,
.footer-pro-right h4{
  margin:0 0 10px;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  /* Mismo azul institucional para coherencia */
  color:#0a3268;
}

.footer-pro-contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-pro-contact-list li{
  display:flex;
  gap:8px;
}

.footer-pro-icon{
  width:26px;
  height:26px;
  border-radius:999px;
  /* Fondo claro tipo glass para que no choque con el fondo */
  background:rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  /* Icono en azul institucional */
  color:#0a3268;
}


/* Redes + Alcalde */
.footer-pro-social-row{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}
.footer-pro-social{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.6);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration:none;
  color:#fff;
}
.footer-pro-social.fb{ background:#1877f2; }
.footer-pro-social.ig{ background:radial-gradient(circle at 30% 30%,#ffdc80,#f56040,#bc2a8d,#8a3ab9); }
.footer-pro-social.yt{ background:#ff0000; }

.footer-pro-social:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 24px rgba(0,0,0,.8);
  filter:brightness(1.1);
}
.footer-escudo {
  width: 280px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: brightness(1.15) drop-shadow(0 6px 20px rgba(0,0,0,.45));
}
.footer-pro-logo {
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  border-radius:14px;
}




.footer-pro-authority-card{
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:18px;
  background:#FFD326;

  box-shadow:0 12px 30px rgba(0,0,0,.85);
}
.authority-photo{
  width:90px;
  height:90px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid #22c55e;
}
.authority-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.authority-text{
  display:flex;
  flex-direction:column;
}
.authority-role{
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9ca3af;
}
.authority-name{
  font-weight:700;
  font-size:.95rem;
}

/* Franja inferior */
.footer-pro-bottom{
  padding:10px 0 14px;
  background:#1b2121;
}
.footer-pro-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.8rem;
  color:#9ca3af;
}
.footer-pro-bottom-links a{
  color:#e5e7eb;
  text-decoration:none;
}
.footer-pro-bottom-links a:hover{
  text-decoration:underline;
}
.footer-pro-sep{
  margin:0 4px;
}

/* Responsive */
@media (max-width:960px){
  .footer-pro-inner{
    flex-direction:column;
    gap:24px;
  }
  .footer-pro-bottom-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

.hero-contact-column {
  position: relative;
}

/* Logo 3D ESTÁTICO (sin animación) */
.hero-logo-3d {
  width: 240px;
  margin: 0 auto 18px auto;
  perspective: 1000px;
  text-align: center;
}

.hero-logo-3d img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  transform-style: preserve-3d;

  
  
  /* sombra suave 3D */
  box-shadow: 0 18px 35px rgba(0,0,0,0.35);
}

/* CONTENEDOR LOGO + BOTONES */
.hero-top-row{
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

/* Logo 3D estático */
.hero-logo-3d{
  flex: 0 0 45%;
  max-width: 220px;
  margin: 0;
  perspective: 1000px;
  text-align: center;
}
.hero-logo-3d img{
  width: 100%;
  height: auto;
  border-radius: 18px;
  transform-style: preserve-3d;
  
  box-shadow: 0 18px 35px rgba(0,0,0,0.35);
}

/* Columna de botones al costado del logo */
.hero-logo-actions{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Botones 3D animados */
.hero-3d-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: #0f172a;
  background: linear-gradient(135deg, rgba(251,191,36,1), rgba(245,158,11,1));
  box-shadow: 0 10px 18px rgba(0,0,0,0.25);
  border: 1px solid rgba(253,224,71,0.7);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space: nowrap;
}

/* efecto 3D al pasar el mouse */
.hero-3d-btn:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 26px rgba(0,0,0,0.35);
  filter: brightness(1.05);
  text-decoration: none;
}

/* Responsive: bajo cierto ancho, logo arriba y botones debajo */
@media (max-width: 768px){
  .hero-top-row{
    flex-direction: column;
    align-items: center;
  }
  .hero-logo-3d{
    max-width: 280px;
  }
  .hero-logo-actions{
    width: 100%;
    align-items: stretch;
  }
  .hero-3d-btn{
    width: 100%;
  }
}
/* Contenedor del slider: fila horizontal deslizable */
.programs-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* suaviza el scroll en iOS */
}

/* Cada tarjeta ocupa ancho fijo y se alinea al snap */
.program-card {
  flex: 0 0 230px;          /* ancho de cada tarjeta */
  scroll-snap-align: start; /* se “pega” al inicio al soltar el scroll */
}

/* Opcional: ocultar scrollbars en algunos navegadores */
.programs-slider::-webkit-scrollbar {
  height: 6px;
}
.programs-slider::-webkit-scrollbar-track {
  background: transparent;
}
.programs-slider::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.6);
  border-radius: 999px;
}

/* Ajustes para pantallas grandes: si quieres que no se vea tan apretado */
@media (min-width: 1024px) {
  .programs-slider {
    justify-content: flex-start;
  }
  .program-card {
    flex: 0 0 240px;
  }
}
/* Default (PC) – sin scroll, tarjetas completas */
.programs-slider {
  display: flex;
  gap: 16px;
  overflow-x: hidden;     /* ← evita cortes en PC */
  padding: 10px 0;
}

/* Cada tarjeta ocupa tamaño fijo */
.program-card {
  flex: 0 0 240px;
}

/* ---- MODO MÓVIL/TABLET ↓ ---- */
@media (max-width: 992px) {
  .programs-slider {
    overflow-x: auto;               /* ← activa el scroll */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .program-card {
    flex: 0 0 220px;                /* Un poco más compacto para móviles */
    scroll-snap-align: start;
  }

  /* Opcional: ocultar barra de scroll visual */
  .programs-slider::-webkit-scrollbar {
    display: none;
  }
}
/* === ESCRITORIO GRANDE (monitores amplios) === */
.programs-slider {
  display: flex;
  flex-wrap: wrap;         /* si no caben, pasan a segunda fila */
  gap: 16px;
  overflow-x: visible;
  padding: 10px 0;
  justify-content: flex-start;
}

.program-card {
  flex: 1 1 200px;         /* ancho flexible */
  max-width: 260px;
}

/* === TABLET + MÓVIL (incluye iPad) → CARRUSEL HORIZONTAL === */
/* OJO: aquí subimos el corte a 1200px para incluir 1024px del iPad */
@media (max-width: 1200px) {
  .programs-slider {
    flex-wrap: nowrap;               /* todas en una sola fila */
    overflow-x: auto;                /* scroll horizontal */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .program-card {
    flex: 0 0 230px;                 /* ancho fijo por tarjeta */
    scroll-snap-align: start;
  }

  .programs-slider::-webkit-scrollbar {
    display: none;                   /* opcional: ocultar barra */
  }
}
/* Contenedor */
.aside-block .quick-links{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Botones 3D con iconos */
.aside-block .quick-links .btn-3d{
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* icono + texto alineados */
  gap:10px;

  width:100%;
  padding:12px 14px;            /* altura uniforme */

  background:linear-gradient(135deg,#0b6ecf,#2563eb);
  color:#fff;
  font-size:0.9rem;
  font-weight:600;

  border-radius:14px;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.12);
  
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  transition:all .18s ease;
}

/* Tamaño del icono */
.aside-block .quick-links .btn-3d .material-icons{
  font-size:20px;
  color:#fff;
}

/* Hover */
.aside-block .quick-links .btn-3d:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.45);
  background:linear-gradient(135deg,#2563eb,#38bdf8);
}

/* Active */
.aside-block .quick-links .btn-3d:active{
  transform:translateY(1px);
  box-shadow:0 3px 8px rgba(0,0,0,.4);
  background:linear-gradient(135deg,#0f766e,#22c55e);
}
/* Lista de botones 3D debajo de “Tu municipio en línea” */
.municipio-links{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Botones 3D */
.municipio-links .btn-3d{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;

  width:100%;
  padding:12px 14px;

  background:linear-gradient(135deg,#0b6ecf,#2563eb);
  color:#fff;
  font-size:0.9rem;
  font-weight:600;

  border-radius:14px;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.12);
  
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  transition:all .18s ease;
}

/* Tamaño del icono */
.municipio-links .btn-3d .material-icons{
  font-size:20px;
  color:#fff;
}

/* Hover */
.municipio-links .btn-3d:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.45);
  background:linear-gradient(135deg,#2563eb,#38bdf8);
}

/* Clic */
.municipio-links .btn-3d:active{
  transform:translateY(1px);
  box-shadow:0 3px 8px rgba(0,0,0,.4);
  background:linear-gradient(135deg,#0f766e,#22c55e);
}

/* ===== MÓDULO INFORMACIÓN DESTACADA / COMUNIDAD ===== */

.info-comunidad .info-comunidad-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-top:8px;
}

/* Tarjeta base */
.info-item{
  border-radius:16px;
  padding:10px 12px;
  background:linear-gradient(135deg, rgba(15,23,42,.03), rgba(148,163,184,.10));
  box-shadow:0 6px 14px rgba(15,23,42,.10);
  overflow:hidden;
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    max-height .25s ease;
  max-height:88px;              /* estado “recogido” */
}

/* Colores por tipo */
.info-item.color-alcalde{
  background:linear-gradient(135deg, #1d4ed8, #3b82f6);
}
.info-item.color-gas{
  background:linear-gradient(135deg, #15803d, #22c55e);
}
.info-item.color-info{
  background:linear-gradient(135deg, #7c3aed, #a855f7);
}

/* Cuando el mouse pasa por encima */
.info-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(15,23,42,.25);
}

/* Cabecera del cuadro */
.info-item-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

/* Icono circular */
.info-icon{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background:rgba(15,23,42,.18);
  color:#f9fafb;
}

/* Títulos y resumen */
.info-item-text h3{
  margin:0 0 4px;
  font-size:.98rem;
  color:#f9fafb;
}
.info-item-text p{
  margin:0;
  font-size:.82rem;
  color:#e5e7eb;
  text-align:justify;
}

/* Botón Ver detalle */
.info-toggle-btn{
  margin-left:auto;
  align-self:center;
  padding:4px 10px;
  border-radius:999px;
  border:none;
  font-size:.75rem;
  font-weight:600;
  background:rgba(15,23,42,.16);
  color:#f9fafb;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease, transform .18s ease;
}
.info-toggle-btn:hover{
  background:rgba(15,23,42,.26);
  transform:translateY(-1px);
}

/* Cuerpo desplegable */
.info-item-body{
  margin-top:8px;
  padding-top:6px;
  border-top:1px solid rgba(226,232,240,.45);
  font-size:.86rem;
  color:#f9fafb;
  display:none; /* oculto por defecto */
}

/* Párrafos y listas justificados */
.info-item-body p{
  margin:0 0 6px;
  text-align:justify;
}
.info-item-body ul{
  margin:0 0 0 18px;
  padding:0;
}
.info-item-body li{
  margin-bottom:4px;
  text-align:justify;
}

/* Estado expandido */
.info-item.open{
  max-height:260px;    /* se estira al abrir */
}
.info-item.open .info-item-body{
  display:block;
}
/* ===== GRID INFORMACIÓN DESTACADA ===== */
.info-comunidad .info-comunidad-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
  margin-top:8px;
}

/* Tarjeta base (solo título visible) */
.info-item{
  border-radius:16px;
  padding:10px 12px;
  background:linear-gradient(135deg, rgba(15,23,42,.03), rgba(148,163,184,.12));
  box-shadow:0 6px 14px rgba(15,23,42,.12);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Colores distintos por tema */
.info-item.color-alcalde{
  background:linear-gradient(135deg, #1d4ed8, #3b82f6);
}
.info-item.color-gas{
  background:linear-gradient(135deg, #15803d, #22c55e);
}
.info-item.color-info{
  background:linear-gradient(135deg, #7c3aed, #a855f7);
}

.info-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(15,23,42,.30);
}

/* Cabecera de la tarjeta */
.info-item-header{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Icono */
.info-icon{
  flex-shrink:0;
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  background:rgba(15,23,42,.18);
  color:#f9fafb;
}

/* Título visible */
.info-item-title{
  margin:0;
  font-size:.95rem;
  color:#f9fafb;
  flex:1;
}

/* Botón dentro de la tarjeta */
.info-toggle-btn{
  border:none;
  border-radius:999px;
  padding:4px 10px;
  font-size:.75rem;
  font-weight:600;
  background:rgba(15,23,42,.16);
  color:#f9fafb;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease, transform .18s ease;
}
.info-toggle-btn:hover{
  background:rgba(15,23,42,.26);
  transform:translateY(-1px);
}

/* ===== MODALES ===== */

.info-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:120;
}

.info-modal.open{
  display:flex;
}

.info-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.65);
}

/* encabezados de modales con tonos según tema */
.info-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  color:#fff;
}
.info-modal-header.alcaldia{
  background:linear-gradient(90deg,#1d4ed8,#3b82f6);
}
.info-modal-header.gas{
  background:linear-gradient(90deg,#15803d,#22c55e);
}
.info-modal-header.contacto{
  background:linear-gradient(90deg,#7c3aed,#a855f7);
}

.info-modal-header h3{
  margin:0;
  font-size:1.02rem;
}

.info-modal-close{
  border:none;
  background:rgba(15,23,42,.25);
  color:#fff;
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  cursor:pointer;
}

/* Cuerpo del modal */
.info-modal-dialog{
  position:relative;
  width:100%;
  max-width:520px;
  margin:0 18px;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 22px 45px rgba(15,23,42,.45);
  animation:infoModalIn .22s ease-out;
}

.info-modal-body{
  padding:16px 18px 18px;
  font-size:.9rem;
  line-height:1.5;
  color:#0f172a;
}

.info-modal-body p{
  margin:0 0 8px;
  text-align:justify;
}

.info-modal-body ul{
  margin:6px 0 0 18px;
  padding:0;
}
.info-modal-body li{
  margin-bottom:4px;
  text-align:justify;
}

/* Animación */
@keyframes infoModalIn{
  from{opacity:0; transform:translateY(8px) scale(.97);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
/* ===== TARJETA CONTACTO (ASIDE) ===== */
.contacto-card{
  border-radius:14px;
  background:linear-gradient(135deg, rgba(15,23,42,.02), rgba(148,163,184,.10));
  box-shadow:0 6px 14px rgba(15,23,42,.10);
}

.contacto-header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}

.contacto-icon{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#0b6ecf,#2563eb);
  color:#fff;
  font-size:22px;
}

.contacto-header h3{
  margin:0;
  font-size:1rem;
}

.contacto-sub{
  margin:2px 0 0;
  font-size:.8rem;
  color:var(--muted);
}

/* Lista de acciones de contacto */
.contacto-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:8px 0;
}

.contacto-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:10px;
  text-decoration:none;
  background:rgba(255,255,255,.9);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.contacto-item:hover{
  background:#eff6ff;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(15,23,42,.12);
}

.contacto-item-icon{
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background:rgba(37,99,235,.1);
  color:#1d4ed8;
}

.contacto-item-text{
  flex:1;
  display:flex;
  flex-direction:column;
}

.contacto-item-text strong{
  font-size:.86rem;
  line-height:1.2;
}

.contacto-item-text span{
  font-size:.78rem;
  color:var(--muted);
}

/* Chip lateral (Llamar / Escribir / Ver mapa) */
.contacto-chip{
  font-size:.7rem;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  color:#1d4ed8;
  font-weight:600;
  white-space:nowrap;
}

/* Pie con horario */
.contacto-footer{
  margin-top:6px;
  font-size:.78rem;
  color:var(--muted);
}
.contacto-footer p{
  margin:0;
}
/* ===== TARJETA TRÁMITES EN LÍNEA (ASIDE) ===== */
.tramites-card{
  border-radius:14px;
  background:linear-gradient(135deg, rgba(15,23,42,.02), rgba(148,163,184,.10));
  box-shadow:0 6px 14px rgba(15,23,42,.10);
}

.tramites-header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}

.tramites-icon{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#0b6ecf,#2563eb);
  color:#fff;
  font-size:22px;
}

.tramites-header h3{
  margin:0;
  font-size:1rem;
}

.tramites-sub{
  margin:2px 0 0;
  font-size:.8rem;
  color:var(--muted);
}

/* Lista de trámites */
.tramites-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}

.tramite-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:10px;
  text-decoration:none;
  background:rgba(255,255,255,.9);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.tramite-item:hover{
  background:#eff6ff;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(15,23,42,.12);
}

.tramite-icon{
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background:rgba(37,99,235,.1);
  color:#1d4ed8;
}

.tramite-text{
  flex:1;
  display:flex;
  flex-direction:column;
}

.tramite-text strong{
  font-size:.86rem;
  line-height:1.2;
  color:var(--text);
}

.tramite-text span{
  font-size:.78rem;
  color:var(--muted);
}

/* Chip lateral (Ir al trámite / Solicitar / Escribir) */
.tramite-chip{
  font-size:.7rem;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  color:#1d4ed8;
  font-weight:600;
  white-space:nowrap;
}

/* ===== RIBBONS ===== */
.ribbon-item{
   border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  transition:box-shadow .18s ease, transform .18s ease;
}

.ribbon-icon{
  font-size:22px;
  opacity:.9;
}

/* COLORES PERSONALIZADOS */
.ribbon-blue{  background:#2563eb; }
.ribbon-blue:hover{  background:#1d4ed8; }

.ribbon-green{  background:#16a34a; }
.ribbon-green:hover{  background:#0d7a34; }

.ribbon-orange{  background:#f97316; }
.ribbon-orange:hover{  background:#ea5e02; }

.ribbon-purple{  background:#7c3aed; }
.ribbon-purple:hover{  background:#5b21b6; }

.ribbon-red{  background:#dc2626; }
.ribbon-red:hover{  background:#b91c1c; }

.ribbon-dark{  background:#334155; }
.ribbon-dark:hover{  background:#1e293b; }

/* ===== PROGRAMAS SLIDER ===== */
.programs-slider {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}

/* ===============================
   TARJETAS AI — DISEÑO ADAPTATIVO
   SIN AFECTAR EL RESTO DEL SITIO
   =============================== */

/* Contenedor exclusivo */
#ai-smart-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 18px;
  width: 100%;
}

/* Tarjeta (wrapper) */
#ai-smart-cards .ai-card {
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  display: flex;
}

/* Contenido interior */
#ai-smart-cards .ai-card-inner {
  width: 100%;
  height: 100%;
  border: none;
  padding: 18px;
  border-radius: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  color: #fff !important;
  text-align: left;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  background: #0ea5e9; /* Fallback */
  box-sizing: border-box;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Icono */
#ai-smart-cards .ai-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#ai-smart-cards .ai-card-icon .material-icons {
  font-size: 28px;
  color: #fff !important;
}

/* Área de texto */
#ai-smart-cards .ai-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#ai-smart-cards .ai-card-tag {
  font-size: .75rem;
  opacity: .9;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#ai-smart-cards .ai-card-title {
  margin-top: 2px;
  font-size: 1rem;
  font-weight: 600;
}

#ai-smart-cards .ai-card-desc {
  font-size: .82rem;
  opacity: .95;
}

/* Hover */
#ai-smart-cards .ai-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

/* Versión móvil */
@media (max-width: 480px) {
  #ai-smart-cards .ai-card-inner {
    padding: 14px;
    gap: 10px;
  }

  #ai-smart-cards .ai-card-icon {
    width: 40px;
    height: 40px;
  }

  #ai-smart-cards .ai-card-icon .material-icons {
    font-size: 24px;
  }
}


/* ===============================
   BLOQUE: NUESTRAS REDES SOCIALES
   Adaptativo y 3D
   =============================== */

/* ===============================
   TARJETAS REDES SOCIALES CON FONDO
   =============================== */

/* Grid responsivo */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

/* Tarjeta base */
.social-card {
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;  /* texto blanco por defecto */
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: transform .22s ease, box-shadow .22s ease;
}

/* Hover 3D */
.social-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,.30);
}

/* ===== FONDOS POR RED ===== */

/* Instagram */
.social-card--ig {
  background: linear-gradient(135deg, #feda75, #d62976, #962fbf, #4f5bd5);
}

/* Facebook */
.social-card--fb {
  background: linear-gradient(135deg, #1877f2, #1459b8);
}

/* YouTube */
.social-card--yt {
  background: linear-gradient(135deg, #ff0000, #b80000);
}

/* Header */
.social-card-header {
  display:flex;
  align-items:center;
  gap:12px;
}

/* Iconos circulares */
.social-icon {
  width:42px;
  height:42px;
  border-radius:999px;
  background:rgba(0,0,0,.20);
  display:flex;
  align-items:center;
  justify-content:center;
}

.social-icon .material-icons {
  color:#fff;
  font-size:24px;
}

/* Texto */
.social-text {
  margin:0;
  font-size:.9rem;
  opacity:.95;
}

/* Botones */
.social-btn {
  margin-top:auto;
  width:100%;
  text-align:center;
  padding:10px 14px;
  border-radius:12px;
  font-size:.85rem;
  font-weight:600;
  color:#fff;
  text-decoration:none;
  background:rgba(0,0,0,.22);
  transition:.22s;
}

.social-btn:hover {
  background:rgba(0,0,0,.35);
}

/* ===== SELECTOR DE IDIOMA EN NAV ===== */

.nav-menu {
  display: flex;
  align-items: center;
  gap: 16px; /* si ya lo tienes, omite esto */
}

.nav-lang {
  margin-left: auto;         /* empuja el selector hacia la derecha */
  display: flex;
  align-items: center;
}

.lang-switcher {
  display: inline-flex;
  gap: 6px;
}

.lang-btn {
  border: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.75);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.6);
  transition: all 0.18s ease;
}

.lang-btn.is-active {
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
}

.lang-btn:hover {
  transform: translateY(-1px);
}

/* =========================
   MODAL TARJETAS AI (FIX)
   ========================= */
.ai-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99999;
}

.ai-modal-overlay.is-visible{ display:flex; }

.ai-modal{
  width: min(720px, 96vw);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.ai-modal-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: #f1f5f9;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ai-modal-close:hover{ background:#e2e8f0; }

.ai-modal-header{
  padding: 18px 18px 10px 18px;
  border-bottom: 1px solid #e2e8f0;
}
.ai-modal-tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,110,207,.12);
  color: #074d92;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
}
#ai-modal-title{
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.ai-modal-body{
  padding: 14px 18px 18px 18px;
}
#ai-modal-desc{
  margin: 0 0 12px 0;
  color: #334155;
  font-weight: 600;
}

.ai-modal-extra{
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 12px;
  color: #0f172a;
  min-height: 52px;
}

.ai-modal-footer{
  padding: 14px 18px;
  border-top: 1px solid #e2e8f0;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

.ai-modal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  background: #0b6ecf;
  color: #fff !important;
  font-weight: 800;
  border: 0;
}
.ai-modal-btn:hover{ background:#074d92; text-decoration:none; }
/* ===== CLIMA (contenido del modal) ===== */
.wx-card{
  padding:14px;
  border-radius:16px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
}

.wx-now{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:12px;
}

.wx-big{
  font-size:42px;
  font-weight:800;
  line-height:1;
}

.wx-meta{ color:#0f172a; font-size:14px; }
.wx-meta div{ margin:2px 0; }

.wx-forecast{
  padding-top:10px;
  border-top: 1px dashed rgba(15,23,42,.18);
}

.wx-title{
  font-weight:800;
  margin-bottom:8px;
}

.wx-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.08);
  margin-bottom:8px;
}

.wx-day{ font-weight:800; color:#0f172a; }
.wx-temp{ color:#0f172a; }
.wx-rain{ color:#0f172a; font-weight:700; }

.wx-foot{
  margin-top:10px;
  font-size:12px;
  color:#64748b;
}
/* Ítem especial del escudo */
.ribbon-crest{
  background: #ffffff;
  min-width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* Escudo dentro del cuadro */
.ribbon-crest-img{
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.block{
  background:transparent !important;
  border:none !important;
  box-shadow:0 10px 32px rgba(0,0,0,0.30) !important;
  border-radius:18px;
}


.ribbon-item.ribbon-crest {
  width: 280px;
  flex: 0 0 280px;
}
.ribbon-crest-img {
  width: 70%;
}

.ribbon-box{
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 18px;
  display:flex;
  justify-content:center;
  align-items:center;
  height: 140px;
  position: relative;
  left: -280px; /* lo que ya tenías */

  /* 🎛 3D + sombra + transición */
  transform-style: preserve-3d;
  transform: perspective(800px) translateZ(0);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
  cursor: pointer;
}

.ribbon-box img{
  height: 100%;
  width: auto;
  object-fit: contain;
  transform: translateZ(18px); /* imagen “flotando” */
}

/* 🌀 Hover con movimiento */
.ribbon-box:hover{
  transform: perspective(800px)
             translateZ(12px)
             translateY(-6px)
             rotateX(3deg)
             rotateY(-3deg);
  box-shadow: 0 14px 32px rgba(0,0,0,0.28);
  background: #fafafa;
}

/*apariencia telefonos */

/* ============================
   RIBBON RESPONSIVE (MÓVILES)
   ============================ */

/* Tablets y teléfonos en vertical */
@media (max-width: 900px) {

  /* Para que no quede fija tapando cosas en pantallas chicas
     (si la quieres seguir fija, borra esta línea) */
  .top-ribbon{
    position:relative;
  }

  .ribbon-inner{
    flex-wrap:wrap;
    justify-content:center;
    padding:10px 8px;
    gap:10px;                /* separación entre logo y tarjetas */
  }

  /* Logo: ocupa toda la fila, centrado */
  .ribbon-box{
    flex:1 1 100%;
    max-width:260px;
    margin:0 auto 4px auto;
  }

  /* Tarjetas: dos columnas aprox. en pantallas medianas */
  .ribbon-item{
    flex:1 1 calc(50% - 8px);
    min-width:160px;
    clip-path:none;          /* forma rectangular en móvil, más legible */
    border-radius:12px;
  }
}

/* Teléfonos pequeños (ancho muy reducido) */
@media (max-width: 520px) {

  .ribbon-inner{
    flex-direction:column;
    align-items:stretch;
  }

  /* Una tarjeta por fila, a lo ancho del teléfono */
  .ribbon-item{
    flex:1 1 auto;
    width:100%;
  }
}


@media (max-width: 600px){

  .ribbon-inner{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:10px;
  }

  .ribbon-item{
    width:100%;
    min-height:60px;
    border-radius:12px;       /* esquinas suaves */
    clip-path:none !important; /* fuerza rectángulo */
    transform:none !important; /* por si existe skew */
    box-shadow:0 6px 16px rgba(0,0,0,.15);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:12px;
  }

  .ribbon-item img,
  .ribbon-item svg,
  .ribbon-item i{
    margin-right:10px;
  }

  .ribbon-item .label{
    font-size:.85rem;
    font-weight:600;
    line-height:1.2;
  }

  .ribbon-item small{
    font-size:.72rem;
    opacity:.75;
  }

  /* Logo arriba */
  .ribbon-box{
    width:100%;
    max-width:240px;
    margin:0 auto 10px;
  }
}

/* ===== MÓVIL: centrar ESCUDO + tarjetas rectangulares ===== */
@media (max-width: 767px){

  .top-ribbon{
    position:relative;
    width:100%;
  }

  .ribbon-inner{
    max-width:100% !important;
    margin:0 auto !important;
    padding:10px 12px 16px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
  }

  /* ⭐ ESCUDO (ribbon-item ribbon-crest) CENTRADO */
  .ribbon-item.ribbon-crest{
    width:100% !important;
    max-width:320px !important;      /* ← cambia este valor para hacerlo más grande o chico */
    flex:0 0 auto !important;
    margin:0 auto !important;        /* ← esto lo centra */
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    clip-path:none !important;
    border-radius:16px !important;
  }

  .ribbon-crest-img{
    width:100% !important;
    max-width:260px !important;      /* ← este controla el ancho del escudo dentro de la tarjeta */
    height:auto !important;
    display:block !important;
    margin:0 auto !important;
  }

  /* 📌 Tarjetas de colores debajo, a lo ancho y rectangulares */
  .ribbon-item:not(.ribbon-crest){
    width:100% !important;
    max-width:360px !important;
    margin:0 auto !important;
    clip-path:none !important;
    border-radius:14px !important;
    transform:none !important;
  }
}

/* ===== Corrección logo centrado SOLO en móviles ===== */
@media (max-width: 900px){

  .ribbon-box{
    left: 0 !important;          /* elimina desplazamiento negativo del PC */
    margin: 0 auto !important;   /* centra horizontalmente */
    width: 100% !important;
    max-width: 340px !important; /* ajusta ancho del contenedor */
    transform: none !important;  /* evita deformación lateral */
  }

  .ribbon-box img,
  .ribbon-crest-img{
    display:block !important;
    margin:0 auto !important;
    max-width:260px !important;  /* puedes subir a 300 si quieres más grande */
    height:auto !important;
  }
}

/*nuevo estilo de las tarjetas de la huincha*/

.modal-oirs{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.modal-oirs-box{
  background:white;
  padding:24px 32px;
  border-radius:12px;
  width:260px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  text-align:center;
  animation:modalIn .25s ease;
}
.modal-oirs-box h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
  color:#111;
}
.modal-oirs-box p{
  margin:0 0 18px;
  color:#444;
  font-size:14px;
}
.modal-oirs-box button{
  background:#2563eb;
  border:none;
  padding:7px 18px;
  border-radius:8px;
  color:white;
  cursor:pointer;
  font-size:14px;
}
.modal-oirs-box button:hover{
  background:#1d4ed8;
}
@keyframes modalIn{
  from{opacity:0; transform:scale(.92);}
  to{opacity:1; transform:scale(1);}
}

/* Overlay */
  .mni-modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 25, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
  }
  .mni-modal-overlay.is-open{ display: flex; }

  /* Contenedor */
  .mni-modal{
    width: min(920px, 100%);
    max-height: min(84vh, 900px);
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    color: #0f172a;
    transform: translateY(10px) scale(.985);
    opacity: 0;
    transition: all .18s ease;
  }
  .mni-modal-overlay.is-open .mni-modal{
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* Header */
  .mni-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 14px;
    padding: 16px 18px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.65));
    border-bottom: 1px solid rgba(15,23,42,.10);
  }
  .mni-modal-title{
    display:flex;
    align-items:center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .2px;
  }
  .mni-modal-title .mni-badge{
    width: 38px; height: 38px;
    border-radius: 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(2, 132, 199, .12);
    border: 1px solid rgba(2, 132, 199, .18);
  }
  .mni-modal-title .mni-badge span{
    font-size: 22px;
    line-height: 1;
    color: #0369a1;
  }
  .mni-modal-sub{
    margin: 6px 0 0;
    font-size: 13px;
    color: #475569;
    font-weight: 600;
  }

  .mni-modal-close{
    border: 0;
    background: rgba(15,23,42,.06);
    border: 1px solid rgba(15,23,42,.10);
    width: 40px; height: 40px;
    border-radius: 12px;
    cursor: pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition: transform .12s ease, background .12s ease;
  }
  .mni-modal-close:hover{ transform: translateY(-1px); background: rgba(15,23,42,.10); }
  .mni-modal-close:active{ transform: translateY(0px) scale(.98); }

  /* Body */
  .mni-modal-body{
    padding: 16px 18px 18px;
    overflow: auto;
    max-height: calc(84vh - 70px);
  }

  .mni-card{
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 16px;
    padding: 14px 14px;
    box-shadow: 0 12px 26px rgba(2, 20, 60, .10);
  }

  .mni-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 14px;
  }
  @media (max-width: 820px){
    .mni-grid{ grid-template-columns: 1fr; }
  }

  .mni-list{
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
  }
  .mni-list li{
    display:flex;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.55);
    margin-bottom: 10px;
  }
  .mni-dot{
    width: 10px; height: 10px;
    border-radius: 999px;
    margin-top: 6px;
    background: #0284c7;
    flex: 0 0 auto;
  }

  .mni-actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  .mni-btn{
    border: 0;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 800;
    color: #0f172a;
    background: rgba(2, 132, 199, .14);
    border: 1px solid rgba(2, 132, 199, .20);
    box-shadow: 0 10px 22px rgba(2, 20, 60, .10);
    transition: transform .12s ease;
  }
  .mni-btn:hover{ transform: translateY(-1px); }

/*panel con numeros*/

/* =========================================
   DIRECTORIO TELEFÓNICO FLOTANTE 3D
   ========================================= */
.phone-side-panel{
  position:fixed;
  top:50%;
  left:0;
  transform:translateY(-50%) translateX(-100%);
  width:360px;
  max-width:92vw;
  background:linear-gradient(145deg,#0f172a,#020617);
  border-radius:0 22px 22px 0;
  box-shadow:0 20px 45px rgba(15,23,42,.75);
  color:#e5e7eb;
  z-index:130;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  border:1px solid rgba(148,163,184,.45);
  overflow:hidden;
}

.phone-side-panel.phone-open{
  transform:translateY(-50%) translateX(0);
}

.phone-side-tab{
  position:fixed;
  top:50%;
  left:0;
  transform:translateY(-50%);
  width:74px;
  height:240px;
  border:none;
  border-radius:0 22px 22px 0;
  background:linear-gradient(180deg,#06b6d4,#0284c7);
  color:#fff;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:16px;
  gap:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  z-index:201;
  font-weight:800;
  text-transform:uppercase;
}

.phone-tab-icon{
  font-size:28px;
}

.phone-vertical-text{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:.80rem;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
}

/* Encabezado */
.phone-side-header{
  padding:16px 16px 12px;
  background:linear-gradient(135deg,#06b6d4,#0ea5e9);
  border-bottom:1px solid rgba(255,255,255,.15);
}

.phone-side-header h3{
  margin:0;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#ffffff;
}

.phone-side-header p{
  margin:5px 0 0;
  font-size:.82rem;
  color:rgba(255,255,255,.92);
}

/* Contenido */
.phone-side-content{
  padding:14px;
  max-height:78vh;
  overflow-y:auto;
}

/* Tarjeta principal destacada */
.phone-highlight{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(135deg,#164e63,#155e75);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,.10);
}

.phone-highlight-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  background:rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.phone-highlight-icon .material-icons{
  font-size:28px;
  color:#fff;
}

.phone-highlight small{
  display:block;
  color:#bae6fd;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.phone-highlight strong{
  display:block;
  margin-top:2px;
  font-size:1.1rem;
  color:#fff;
}

.phone-highlight a{
  color:#ffffff;
  text-decoration:none;
}

/* =========================================
   LISTA DE TELÉFONOS - CELESTE ALTERNADO
   REEMPLAZA TODO TU BLOQUE ACTUAL
========================================= */

.phone-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* TARJETA BASE */
.phone-card{
  position:relative;
  border-radius:18px;
  padding:14px;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* CELESTE OSCURO */
.phone-card:nth-child(odd){
  background:linear-gradient(135deg,#0284c7,#0369a1);
}

/* CELESTE CLARO */
.phone-card:nth-child(even){
  background:linear-gradient(135deg,#0ea5e9,#38bdf8);
}

/* HOVER */
.phone-card:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 18px 36px rgba(0,0,0,.30);
  border-color:rgba(255,255,255,.35);
  filter:brightness(1.06);
}

.phone-card-top{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}

/* ICONO */
.phone-card-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.phone-card-icon .material-icons{
  color:#fff;
  font-size:24px;
}

/* TEXTO */
.phone-card-info{
  flex:1;
}

.phone-card-info small{
  display:block;
  color:rgba(255,255,255,.88);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:2px;
}

.phone-card-info strong{
  display:block;
  color:#fff;
  font-size:.98rem;
  margin-bottom:4px;
}

.phone-number{
  font-size:1rem;
  font-weight:800;
  color:#ffffff;
  letter-spacing:.02em;
}

/* BOTONES */
.phone-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.phone-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:none;
  border-radius:999px;
  padding:8px 12px;
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.phone-btn:hover{
  transform:translateY(-2px);
}

/* BOTÓN LLAMAR */
.phone-btn-call{
  background:linear-gradient(135deg,#16a34a,#15803d);
  color:#fff;
  box-shadow:0 8px 18px rgba(22,163,74,.30);
}

/* BOTÓN COPIAR */
.phone-btn-copy{
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.30);
}

/* BOTÓN CERRAR */
.phone-panel-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:none;
  border-radius:999px;
  background:rgba(15,23,42,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.2rem;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  transition:background .18s ease, transform .18s ease;
}

.phone-panel-close:hover{
  background:rgba(15,23,42,.65);
  transform:scale(1.05);
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width:720px){

  .phone-side-panel{
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    max-width:100%;
    transform:translateY(100%);
    border-radius:22px 22px 0 0;
  }

  .phone-side-panel.phone-open{
    transform:translateY(0);
  }

  .phone-side-tab{
    top:auto;
    bottom:18px;
    left:14px;
    width:56px;
    height:56px;
    border-radius:999px;
    transform:none;
  }

  .phone-side-tab:hover{
    transform:scale(1.05);
  }

  .phone-vertical-text{
    display:none;
  }

  .phone-card{
    padding:12px;
  }

}

.ux-modal-overlay{
      position:fixed; inset:0; background:rgba(2,6,23,.55);
      backdrop-filter: blur(6px);
      display:none; z-index:9998;
    }
    .ux-modal{
      position:fixed; inset:0; display:none; z-index:9999;
      align-items:center; justify-content:center; padding:18px;
    }
    .ux-modal[aria-hidden="false"], .ux-modal-overlay.is-open{ display:flex; }
    .ux-modal-card{
      width:min(920px, 100%);
      background:rgba(255,255,255,.92);
      border:1px solid rgba(15,23,42,.10);
      border-radius:18px;
      box-shadow:0 20px 60px rgba(0,0,0,.25);
      overflow:hidden;
    }
    .ux-modal-head{
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:12px; padding:18px 18px 10px;
      background:linear-gradient(180deg, rgba(241,245,249,.9), rgba(255,255,255,.7));
    }
    .ux-modal-head h3{ margin:0; font-size:18px; color:#0f172a; }
    .ux-sub{ margin:6px 0 0; color:#475569; font-size:13px; line-height:1.35; }
    .ux-x{
      border:0; background:rgba(15,23,42,.08);
      width:38px; height:38px; border-radius:12px;
      cursor:pointer; font-size:18px;
    }
    .ux-modal-body{ padding:14px 18px 18px; }
    .ux-grid{
      display:grid; grid-template-columns:1fr 1fr; gap:14px;
    }
    @media (max-width: 780px){ .ux-grid{ grid-template-columns:1fr; } }
    .ux-box{
      background:rgba(255,255,255,.75);
      border:1px solid rgba(15,23,42,.10);
      border-radius:16px;
      padding:14px;
    }
    .ux-box h4{ margin:0 0 10px; color:#0f172a; font-size:14px; }
    .ux-box ul{ margin:0; padding-left:18px; color:#0f172a; }
    .ux-box li{ margin:6px 0; color:#0f172a; }
    .ux-src{ display:block; margin-top:10px; color:#64748b; font-size:12px; }
    .ux-modal-foot{
      padding:12px 18px 16px;
      display:flex; justify-content:flex-end; gap:10px;
    }
    .ux-btn{
      border:0; cursor:pointer;
      padding:10px 14px;
      border-radius:14px;
      background:#0b6ecf; color:#fff; font-weight:700;
      box-shadow:0 10px 22px rgba(2, 132, 199, .25);
    }
    .ux-btn:hover{ filter:brightness(.97); transform: translateY(-1px); }

/* ====== Ajusta a tu estilo glass/windows11 ====== */
  .mni-modal-overlay{
    position:fixed; inset:0;
    display:none;
    background: rgba(10, 14, 20, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999;
    padding: 18px;
  }
  .mni-modal-overlay.is-open{ display:flex; align-items:center; justify-content:center; }

  .mni-modal{
    width:min(820px, 96vw);
    max-height: 86vh;
    overflow:auto;
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 18px 60px rgba(0,0,0,.38);
    color: #0b1220;
  }

  .mni-modal-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.22);
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
    position: sticky; top: 0;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .mni-modal-title{
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .2px;
    color:#0b1220;
  }
  .mni-modal-close{
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.32);
    background: rgba(255,255,255,.18);
    cursor: pointer;
    font-size: 18px;
  }
  .mni-modal-close:hover{ background: rgba(255,255,255,.26); transform: translateY(-1px); }

  .mni-modal-body{ padding: 16px 18px 18px; }

  .mni-modal-badges{
    display:flex; flex-wrap:wrap; gap:8px;
    margin-bottom: 12px;
  }
  .mni-badge{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    border: 1px solid rgba(15, 23, 42, .10);
    color:#0f172a;
    font-weight: 700;
  }

  .mni-modal-content{
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 14px;
    padding: 14px 14px;
    line-height: 1.55;
    color:#0b1220;
  }
  .mni-modal-content h4{
    margin: 0 0 8px;
    font-size: 14px;
    color:#0b1220;
  }
  .mni-modal-content ul{ margin: 8px 0 0 18px; }
  .mni-modal-content li{ margin: 6px 0; }

  .mni-modal-actions{
    display:flex; gap:10px; flex-wrap:wrap;
    margin-top: 14px;
    justify-content: flex-end;
  }
  .mni-btn{
    border: 0;
    cursor: pointer;
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 800;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition: transform .12s ease, filter .12s ease;
  }
  .mni-btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
  .mni-btn-primary{
    background: rgba(15, 23, 42, .92);
    color: #fff;
  }
  .mni-btn-secondary{
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(15, 23, 42, .15);
    color:#0b1220;
  }

  .mni-modal-footnote{
    margin-top: 10px;
    font-size: 12px;
    color: rgba(15,23,42,.78);
  }

  /* Títulos dentro del submenu (si quieres usar en el futuro) */
  .nav-submenu .submenu-title{
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: .3px;
    font-weight: 900;
    opacity: .75;
    text-transform: uppercase;
  }

/* ===== FIX: quitar círculo/punto antes de Contacto ===== */
#btnContacto::before,
#btnContacto::after{
  content:none !important;
  display:none !important;
}
li.nav-item.contacto-fix::before,
li.nav-item.contacto-fix::after{
  content:none !important;
  display:none !important;
}

/* ===== Overlay ===== */
.mdl-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:18px;
}

/* ===== Modal Contenedor ===== */
.mdl{
  width:min(520px, 100%);
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 35px 80px rgba(0,0,0,0.35);
  border:1px solid rgba(0,0,0,0.06);
  animation:mdlIn .22s ease;
}

@keyframes mdlIn{
  from{ transform:translateY(-14px) scale(.98); opacity:0;}
  to{ transform:translateY(0) scale(1); opacity:1;}
}

/* ===== Header ===== */
.mdl-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:6px 6px 10px;
  border-bottom:1px solid rgba(0,0,0,0.06);
  margin-bottom:12px;
}

.mdl-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:#0f172a;
  font-size:16px;
}

.mdl-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(26,115,232,.20), rgba(0,123,255,.12));
  border:1px solid rgba(0,123,255,.18);
}

.mdl-close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.10);
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,242,246,0.95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 10px 18px rgba(0,0,0,0.12);
  cursor:pointer;
  color:#111;
  font-size:18px;
  transition:.15s;
}
.mdl-close:hover{ transform:translateY(-1px); }
.mdl-close:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.12),
    0 6px 12px rgba(0,0,0,0.10);
}

/* ===== Body ===== */
.mdl-body{ padding:6px; }

.mdl-subtitle{
  margin:0 0 12px;
  color:#334155;
  font-weight:600;
  line-height:1.4;
  font-size:13px;
}

/* ===== Mensajes pro ===== */
.msg{
  border-radius:14px;
  padding:12px 12px;
  font-weight:800;
  font-size:13px;
  line-height:1.35;
  border:1px solid rgba(0,0,0,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 18px rgba(2,6,23,0.06);
  margin:0 0 12px;
}
.msg.ok{
  background:linear-gradient(180deg, rgba(16,185,129,0.18), rgba(16,185,129,0.10));
  border-color:rgba(16,185,129,0.35);
  color:#065f46;
}
.msg.err{
  background:linear-gradient(180deg, rgba(239,68,68,0.18), rgba(239,68,68,0.10));
  border-color:rgba(239,68,68,0.35);
  color:#7f1d1d;
}

/* ===== Campos ===== */
.field{ margin-bottom:12px; }

.field label{
  display:block;
  font-weight:800;
  margin-bottom:6px;
  color:#0f172a;
  font-size:13px;
}

.field input,
.field textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.14);
  background:rgba(255,255,255,0.98);
  color:#0f172a;
  font-size:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 10px 18px rgba(2,6,23,0.06);
  transition:.15s;
}

.field input::placeholder,
.field textarea::placeholder{
  color:rgba(51,65,85,0.65);
  font-weight:600;
}

.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:rgba(0,123,255,0.55);
  box-shadow:
    0 0 0 4px rgba(0,123,255,0.12),
    0 14px 24px rgba(2,6,23,0.08);
}

/* ===== Acciones / Botones 3D ===== */
.actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.btn-3d{
  flex:1;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.12);
  font-weight:900;
  cursor:pointer;
  transition:.15s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 14px 25px rgba(0,0,0,0.14);
}

.btn-3d:hover{ transform:translateY(-1px); }
.btn-3d:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,0.14),
    0 10px 18px rgba(0,0,0,0.10);
}

.btn-sec{
  background:linear-gradient(180deg, #ffffff, #eef2f7);
  color:#0f172a;
}

.btn-pri{
  border-color:rgba(0,123,255,0.35);
  background:linear-gradient(180deg, #1a73e8, #0b63d6);
  color:#fff;
}

.btn-pri[disabled]{
  opacity:.75;
  cursor:not-allowed;
  transform:none !important;
}

/* Responsive */
@media (max-width:520px){
  .actions{ flex-direction:column; }
  .btn-3d{ width:100%; }
}

.hero-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

/* base */
.hero-modal-content{
  color:#e5e7eb;
  padding:20px 26px 22px;
  border-radius:18px;
  max-width:520px;
  width:92%;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(12px);
  animation:heroModalIn .25s ease-out;
  font-family:inherit;
  border-top:4px solid transparent;
}

/* 🎨 Colores por modal */
.hero-modal-content--phone{
  background:linear-gradient(145deg,#064e3b,#047857);
  border-top-color:#22c55e;
}
.hero-modal-content--address{
  background:linear-gradient(145deg,#0f172a,#1d4ed8);
  border-top-color:#3b82f6;
}
.hero-modal-content--hours{
  background:linear-gradient(145deg,#7c2d12,#c2410c);
  border-top-color:#fb923c;
}

/* Encabezado con icono + texto */
.hero-modal-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.hero-modal-icon{
  width:52px;
  height:52px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}

/* fondos del icono por modal */
.hero-modal-icon--phone{
  background:radial-gradient(circle at 30% 30%, #bbf7d0, #16a34a);
}
.hero-modal-icon--address{
  background:radial-gradient(circle at 30% 30%, #bfdbfe, #2563eb);
}
.hero-modal-icon--hours{
  background:radial-gradient(circle at 30% 30%, #fed7aa, #ea580c);
}

.hero-modal-content h3{
  margin:0 0 2px;
  font-size:1.25rem;
  font-weight:700;
  color:#f9fafb;
}

.hero-modal-content p{
  margin:0 0 10px;
  font-size:.95rem;
}

.hero-modal-content ul{
  margin:0 0 14px 1.1rem;
  padding:0;
  font-size:.95rem;
}

.hero-modal-content li{
  margin-bottom:4px;
}

/* Botón cerrar */
.hero-modal-content button{
  border:none;
  padding:8px 20px;
  border-radius:999px;
  font-size:.9rem;
  cursor:pointer;
  background:linear-gradient(135deg,#f9fafb,#e5e7eb);
  color:#111827;
  box-shadow:0 10px 30px rgba(15,23,42,.45);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.hero-modal-content button:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 36px rgba(15,23,42,.6);
  filter:brightness(1.03);
}

/* Modal con mapa más ancho */
.hero-modal-map{
  max-width:700px;
}

.hero-modal-map-frame{
  margin:6px 0 16px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.45);
}

.hero-modal-map-frame iframe{
  width:100%;
  height:300px;
  border:0;
}

/* Lista de teléfonos con colores por unidad */
.hero-phone-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:6px 0 16px;
}

.hero-phone-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.92rem;
  font-weight:600;
  color:#f9fafb;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}

.hero-phone-label{
  padding-left:4px;
}

/* colores por fila (similar a la imagen) */
.phone-op{
  background:linear-gradient(90deg,#166534,#22c55e);
}
.phone-meson{
  background:linear-gradient(90deg,#b91c1c,#ef4444);
}
.phone-juzgado{
  background:linear-gradient(90deg,#1d4ed8,#2563eb);
}
.phone-secplan{
  background:linear-gradient(90deg,#c2410c,#f97316);
}
.phone-secmun{
  background:linear-gradient(90deg,#6d28d9,#8b5cf6);
}
.phone-riesgo{
  background:linear-gradient(90deg,#0f766e,#14b8a6);
}
.phone-finanzas{
  background:linear-gradient(90deg,#1d4ed8,#1e40af);
}
.phone-obras{
  background:linear-gradient(90deg,#374151,#4b5563);
}

@keyframes heroModalIn{
  from{
    opacity:0;
    transform:translateY(12px) scale(.97);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* El slide no captura clics, solo la imagen */
#heroSlider .hero-slide{
  pointer-events:none;
}

#heroSlider .hero-slide img{
  pointer-events:auto;
  cursor:pointer;
}

.hero-slide-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  cursor:pointer;
}

.hero-slide-link img{
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* ===== SLIDER NUEVO MNI ===== */
  .mni-slider{
    position:relative;
    width:100%;
    aspect-ratio: 5 / 2;
    border-radius:20px;
    overflow:hidden;
    background:radial-gradient(circle at top left,#1d4ed8,#020617 60%);
    box-shadow:0 18px 40px rgba(15,23,42,.6);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }

  .mni-slider-inner{
    position:relative;
    flex:1;
    border-radius:18px;
    overflow:hidden;
    margin:8px 10px 18px;
  }

  .mni-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(.96);
  transition:
    opacity .7s ease,
    transform .7s ease;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  pointer-events:none;      /* los NO activos no reciben click */
}

.mni-slide.is-active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;      /* solo el activo recibe click */
  z-index:1;
}



  .mni-slide-img{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;         /* evita que sobresalga al hacer zoom */
}

.mni-slide-img img{
  width:115%;              /* zoom suave (antes 100%) */
  height:115%;             /* mantiene proporción vertical */
  object-fit:contain;      /* NO recorta contenido */
  object-position:center;  /* centrado */
  transition:transform .6s ease; /* opcional para animar */
}



  .mni-slide-caption{
    padding:6px 10px 0;
    font-size:0.8rem;
    color:#e5e7eb;
    text-shadow:0 1px 2px rgba(0,0,0,.8);
  }

  .mni-slide-caption strong{
    display:block;
    font-size:0.85rem;
    margin-bottom:2px;
    color:#f9fafb;
  }

  /* Efecto hover en el slide activo */
  .mni-slide.is-active:hover .mni-slide-img img{
    transform:scale(1.05);
    filter:brightness(1.08);
  }

  /* Flechas */
  .mni-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:rgba(15,23,42,.85);
    color:#e5e7eb;
    width:32px;
    height:32px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:1.2rem;
    z-index:5;
    box-shadow:0 6px 18px rgba(0,0,0,.5);
    transition:background .2s ease, transform .2s ease;
  }

  .mni-arrow--prev{ left:14px; }
  .mni-arrow--next{ right:14px; }

  .mni-arrow:hover{
    background:rgba(37,99,235,.95);
    transform:translateY(-50%) scale(1.05);
  }

  /* Dots */
  .mni-dots{
    display:flex;
    justify-content:center;
    gap:6px;
    margin:0 0 8px;
  }

  .mni-dot{
    width:8px;
    height:8px;
    border-radius:999px;
    border:none;
    background:rgba(148,163,184,.7);
    cursor:pointer;
    transition:background .2s ease, width .2s ease, transform .2s ease;
  }

  .mni-dot.is-active{
    background:#f9fafb;
    width:18px;
    transform:translateY(-1px);
  }

  @media (max-width:768px){
    .mni-slider{
      aspect-ratio: 4 / 3;
    }
    .mni-slide-caption{
      font-size:0.75rem;
    }
    .mni-slide-caption strong{
      font-size:0.8rem;
    }
  }

.mni-vet-modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.62);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    z-index:99999;
  }
  .mni-vet-modal-backdrop.is-open{
    display:flex;
  }
  .mni-vet-modal{
    width:min(920px, 100%);
    max-height:88vh;
    overflow:auto;
    border-radius:20px;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 24px 60px rgba(0,0,0,.30);
    position:relative;
    animation:mniVetIn .22s ease;
  }
  @keyframes mniVetIn{
    from{opacity:0; transform:translateY(10px) scale(.98);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }
  .mni-vet-close{
    position:absolute;
    top:12px;
    right:12px;
    width:40px;
    height:40px;
    border:none;
    border-radius:12px;
    background:rgba(15,23,42,.08);
    color:#0f172a;
    font-size:22px;
    cursor:pointer;
    z-index:2;
  }
  .mni-vet-head{
    padding:22px 22px 14px;
    background:linear-gradient(135deg,#0f4fb6,#f0c74a);
    color:#fff;
  }
  .mni-vet-head h3{
    margin:0;
    font-size:28px;
    font-weight:900;
  }
  .mni-vet-head p{
    margin:6px 0 0;
    font-size:15px;
    font-weight:700;
  }
  .mni-vet-body{
    padding:18px 22px 20px;
  }
  .mni-vet-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:14px;
  }
  .mni-vet-box{
    background:rgba(248,250,252,.95);
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    padding:14px;
    box-shadow:0 8px 18px rgba(15,23,42,.06);
  }
  .mni-vet-box h4{
    margin:0 0 10px;
    color:#0f172a;
    font-size:16px;
  }
  .mni-vet-box p{
    margin:0;
    color:#334155;
    line-height:1.55;
  }
  .mni-vet-box ul{
    margin:0;
    padding-left:18px;
    color:#334155;
  }
  .mni-vet-box li{
    margin:6px 0;
    line-height:1.45;
  }
  .mni-vet-note{
    margin-top:14px;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(254,240,138,.35);
    border:1px solid rgba(234,179,8,.35);
    color:#713f12;
    font-weight:700;
  }
  .mni-vet-actions{
    padding:0 22px 22px;
    display:flex;
    justify-content:flex-end;
  }
  .mni-vet-btn{
    border:none;
    background:#0b6ecf;
    color:#fff;
    font-weight:800;
    padding:11px 18px;
    border-radius:14px;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(11,110,207,.25);
  }
  @media (max-width: 768px){
    .mni-vet-grid{
      grid-template-columns:1fr;
    }
    .mni-vet-head h3{
      font-size:22px;
      padding-right:40px;
    }
  }

  /* CORRIGE EL BLOQUE DESTACADO SUPERIOR */

/* Panel con más espacio interno */
.phone-side-content{
  padding:18px;
  max-height:78vh;
  overflow-y:auto;
}

/* Tarjeta principal */
.phone-highlight{
  display:flex;
  align-items:center;
  gap:14px;

  padding:16px 16px;
  margin-top:12px;          /* BAJA EL BLOQUE */
  margin-bottom:16px;

  border-radius:18px;
  background:linear-gradient(135deg,#164e63,#155e75);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);

  min-height:78px;          /* MÁS ALTO */
}

/* Icono */
.phone-highlight-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  background:rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.phone-highlight-icon .material-icons{
  font-size:28px;
  color:#fff;
}

/* Texto */
.phone-highlight small{
  display:block;
  font-size:.78rem;
  color:#bae6fd;
  margin-bottom:4px;
  line-height:1.1;
}

.phone-highlight strong{
  display:block;
  font-size:1.18rem;
  line-height:1.1;
}

.phone-highlight a{
  color:#fff;
  text-decoration:none;
}

/* En celular */
@media (max-width:720px){

  .phone-highlight{
    margin-top:8px;
    padding:14px;
    min-height:auto;
  }

  .phone-highlight strong{
    font-size:1rem;
  }

}

.nx7-modal{ position:fixed; inset:0; display:none; z-index:9999; }
  .nx7-modal.is-open{ display:block; }
  .nx7-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(6px); }
  .nx7-modal__dialog{
    position:relative;
    max-width: 780px;
    width:min(780px, calc(100% - 24px));
    margin: 6vh auto;
    border-radius: 16px;
    padding: 18px 18px 14px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 50px rgba(0,0,0,.30);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.6);
  }
  .nx7-modal__close{
    position:absolute; top:10px; right:10px;
    border:none; background:rgba(0,0,0,.06);
    border-radius: 10px; padding:8px; cursor:pointer;
  }
  .nx7-modal__title{
    margin: 0 34px 12px 0;
    display:flex; align-items:center; gap:10px;
    font-size: 18px;
  }
  .nx7-modal__body{ color:#111827; }
  .nx7-muted{ color:#6b7280; margin-top:0; }
  .nx7-info-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px;
    margin-top: 12px;
  }
  .nx7-info-card{
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 14px;
    padding: 12px 12px 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,.10);
  }
  .nx7-info-card h4{ margin:0 0 8px; font-size:14px; color:#0f172a; }
  .nx7-info-card ul{ margin:0; padding-left: 18px; }
  .nx7-info-card li{ margin: 6px 0; }
  .nx7-modal__footer{
    margin-top: 14px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
  }
  .nx7-modal-btn{ min-width: 140px; }

  @media (max-width: 820px){
    .nx7-info-grid{ grid-template-columns: 1fr; }
    .nx7-modal__dialog{ margin: 4vh auto; }
  }
  <style>
  /* ✅ SOLO este botón: alineado a la izquierda */
  .nx7-btn-left{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start; /* 👈 izquierda */
    text-align:left;
    gap:10px;
  }

/* ====== CARD CONTENEDORA (glass) ====== */
.lic-card{
  width: 340px;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Título */
.lic-title{
  margin: 0 0 14px 0;
  font-weight: 900;
  letter-spacing: .4px;
  color:#0b3a74;
}

/* Lista */
.lic-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ====== “PILL” ITEM ====== */
.lic-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  color:#fff;
  position:relative;
  overflow:hidden;
}

/* brillo suave */
.lic-item:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events:none;
}

/* izquierda */
.lic-left{
  display:flex;
  align-items:center;
  gap:10px;
  z-index:1;
}

/* icono circular */
.lic-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  font-size: 20px;
}

/* texto */
.lic-txt{ line-height:1.05; }
.lic-main{ font-weight:900; font-size:14px; }
.lic-sub{ font-weight:800; font-size:14px; opacity:.98; }

/* botón derecha */
.lic-btn{
  z-index:1;
  border:none;
  cursor:pointer;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  font-size: 12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  transition: transform .12s ease, background .12s ease;
}
.lic-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.28); }
.lic-btn:active{ transform: translateY(0); }

/* Colores (similar foto) */
.lic-blue{  background: linear-gradient(90deg,#1f5eff,#2b8bff); }
.lic-green{ background: linear-gradient(90deg,#0e8b45,#2bd36c); }
.lic-purple{background: linear-gradient(90deg,#6a33ff,#9a65ff); }
.lic-violet{background: linear-gradient(90deg,#5b2bd6,#7a42ff); }

/* ====== MODALES (compatibles con tu estructura) ====== */
.info-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.info-modal.open{ display:block; }

.info-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.info-modal-dialog{
  position:relative;
  max-width: 620px;
  width: calc(100% - 24px);
  margin: 6vh auto;
  background: rgba(255,255,255,.86);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  overflow:hidden;
}

.info-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  color:#fff;
}
.info-modal-header h3{ margin:0; font-size: 16px; font-weight: 900; }
.info-modal-close{
  width:38px; height:38px;
  border:none;
  border-radius: 12px;
  background: rgba(255,255,255,.22);
  color:#fff;
  font-size: 22px;
  cursor:pointer;
}

.info-modal-body{
  padding: 14px 16px 16px;
  color:#1f2937;
}
.info-modal-body p{ margin:0 0 10px 0; }
.info-modal-body ul{ margin: 8px 0 0 18px; }
.info-modal-body li{ margin: 6px 0; }

/* Header colores por tipo */
.info-modal-header.alcaldia{ background: linear-gradient(90deg,#1f5eff,#2b8bff); }
.info-modal-header.gas{      background: linear-gradient(90deg,#0e8b45,#2bd36c); }
.info-modal-header.contacto{ background: linear-gradient(90deg,#6a33ff,#9a65ff); }

/* Botón link dentro modal (usa tu btn-3d si ya existe) */
.btn-3d{
  padding:10px 14px;
  border-radius: 12px;
  background: rgba(15,23,42,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  font-weight: 900;
}

/* Fondo oscuro a pantalla completa (ya no lo usamos para ocultar/mostrar) */
  .ld-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    display: flex;              /* se controla el display SOLO desde JS */
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .ld-modal {
    position: relative;
    max-width: 1100px;
    width: 96%;
    max-height: 90vh;
    background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(241,245,255,0.9));
    border-radius: 18px;
    box-shadow:
      0 18px 45px rgba(15,23,42,0.60),
      0 0 0 1px rgba(148,163,184,0.45);
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: ld-modal-in 0.25s ease-out;
  }

  @keyframes ld-modal-in {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .ld-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 2px solid rgba(15,23,42,0.4);
    background: #f9fafb;
    color: #0f172a;
    font-size: 18px;
    line-height: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 12px rgba(15,23,42,0.35);
  }

  .ld-modal-close:hover {
    background: #e5e7eb;
    transform: scale(1.05);
  }

  .ld-modal-image-wrap {
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(59,130,246,0.2), transparent 55%);
    box-shadow: 0 10px 25px rgba(15,23,42,0.4);
    max-height: 72vh;
  }

  .ld-modal-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .ld-modal-footer {
    margin-top: 6px;
    display: flex;
    justify-content: center;
  }

  .ld-modal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #22c55e);
    color: #f9fafb;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow:
      0 10px 25px rgba(37,99,235,0.45),
      0 0 0 1px rgba(15,23,42,0.2);
    transform: translateY(0);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  }

  .ld-modal-button::before {
    content: "🔗";
    font-size: 17px;
  }

  .ld-modal-button:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow:
      0 14px 32px rgba(37,99,235,0.55),
      0 0 0 1px rgba(15,23,42,0.28);
  }

  .ld-modal-button:active {
    transform: translateY(1px) scale(0.99);
    box-shadow:
      0 6px 18px rgba(15,23,42,0.35),
      0 0 0 1px rgba(15,23,42,0.3);
  }

  @media (max-width: 640px) {
    .ld-modal {
      padding: 14px 12px 16px;
      border-radius: 14px;
    }
    .ld-modal-close {
      top: 6px;
      right: 6px;
    }
  }

/* Tarjeta */
.event-card{
  cursor:pointer;
  overflow:hidden;
  border-radius:14px;

  /* proporción ideal para tus banners */
  aspect-ratio:16/6.5;

  background:#0b1e35;
}

/* Imagen */
.event-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;

  /* zoom justo para ocultar bordes blancos */
  transform: scale(1.06);
  transition: transform .35s ease;
}

/* Hover suave y profesional */
.event-card:hover .event-photo{
  transform: scale(1.10);
}
.pago-img{
  object-position:center 52%;
}

/* =========================
   CONTENEDOR PRINCIPAL
========================= */
.patrimonio-neon-wrap{
  position:relative;

  margin-bottom:24px;

  border-radius:24px;

  padding:4px;

  overflow:visible;

  background:
    linear-gradient(
      90deg,
      #00e5ff,
      #0b6ecf,
      #7c3aed,
      #fbbf24,
      #00ffb3,
      #00e5ff
    );

  background-size:400% 400%;

  animation:
    neonMove 5s linear infinite;

  box-shadow:
    0 0 10px rgba(0,229,255,.55),
    0 0 22px rgba(11,110,207,.40),
    0 0 34px rgba(124,58,237,.35);
}

/* =========================
   EFECTO EXTERIOR
========================= */
.patrimonio-neon-border{
  position:absolute;

  inset:-5px;

  border-radius:28px;

  background:
    linear-gradient(
      90deg,
      #00e5ff,
      #0b6ecf,
      #7c3aed,
      #fbbf24,
      #00ffb3,
      #00e5ff
    );

  background-size:400% 400%;

  filter:blur(16px);

  opacity:.95;

  z-index:0;

  animation:
    neonMove 5s linear infinite,
    neonGlow 2s ease-in-out infinite;
}

/* =========================
   LINK IMAGEN
========================= */
.patrimonio-link{
  position:relative;

  z-index:2;

  display:block;

  overflow:hidden;

  border-radius:20px;

  background:#fff;

  border:2px solid rgba(255,255,255,.10);
}

/* =========================
   IMAGEN
========================= */
.patrimonio-img{
  width:100%;

  display:block;

  transition:
    transform .35s ease,
    filter .35s ease;
}

.patrimonio-img:hover{
  transform:scale(1.02);

  filter:
    brightness(1.05)
    saturate(1.08);
}

/* =========================
   MODAL
========================= */
.patrimonio-modal{
  display:none;

  position:fixed;

  inset:0;

  z-index:99999;

  background:rgba(0,0,0,.90);

  backdrop-filter:blur(8px);

  align-items:center;
  justify-content:center;

  padding:20px;
}

/* =========================
   BOTÓN CERRAR
========================= */
.patrimonio-close{
  position:absolute;

  top:15px;
  right:25px;

  font-size:58px;

  color:#fff;

  cursor:pointer;

  font-weight:bold;

  z-index:100000;

  transition:
    transform .2s ease,
    color .2s ease;
}

.patrimonio-close:hover{
  transform:scale(1.12);

  color:#fbbf24;
}

/* =========================
   IMAGEN MODAL
========================= */
.patrimonio-modal-img{
  max-width:95%;

  max-height:92vh;

  border-radius:24px;

  cursor:pointer;

  transition:transform .25s ease;

  box-shadow:
    0 0 30px rgba(255,255,255,.16),
    0 0 70px rgba(0,229,255,.14);
}

.patrimonio-modal-img:hover{
  transform:scale(1.01);
}

/* =========================
   BOTÓN BASES
========================= */
.patrimonio-btn{
  position:absolute;

  bottom:35px;
  left:50%;

  transform:translateX(-50%);

  background:
    linear-gradient(
      135deg,
      #0b6ecf,
      #003b8f
    );

  color:#fff;

  padding:15px 30px;

  border-radius:999px;

  font-size:18px;
  font-weight:bold;

  text-decoration:none;

  z-index:100001;

  box-shadow:
    0 12px 28px rgba(0,0,0,.45);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.patrimonio-btn:hover{
  transform:
    translateX(-50%)
    scale(1.05);

  background:
    linear-gradient(
      135deg,
      #0f7ef0,
      #0b6ecf
    );

  box-shadow:
    0 18px 38px rgba(0,0,0,.55);
}

/* =========================
   ANIMACIONES
========================= */
@keyframes neonMove{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }

}

@keyframes neonGlow{

  0%{
    opacity:.75;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:.75;
  }

}

/* ===== BANNER ===== */
#bannerLeyKarin{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  border:1px solid rgba(0,0,0,.08);
  margin-bottom:18px;
  cursor:pointer;
  width:100%;
}

.banner-karin-img{
  width:100%;
  display:block;
  transition:transform .3s ease;
}

#bannerLeyKarin:hover .banner-karin-img{
  transform:scale(1.04);
}

/* ===== MODAL FONDO ===== */
#modalKarin{
  display:none;
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.68);
  z-index:99999;
  justify-content:center;
  align-items:center;
  padding:18px;
  box-sizing:border-box;
}

/* ===== CAJA MODAL ===== */
#modalKarinBox{
  position:relative;
  width:100%;
  max-width:1000px;
  height:92vh;
  max-height:92vh;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
  animation:zoomModalKarin .25s ease;
}

/* ===== BOTÓN CERRAR ===== */
#cerrarModalKarinBtn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:20;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#e53935;
  color:#fff;
  font-size:22px;
  font-weight:bold;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}

/* ===== IFRAME ===== */
#iframeKarin{
  width:100%;
  height:100%;
  border:none;
  display:block;
  background:#fff;
}

/* ===== ANIMACIÓN ===== */
@keyframes zoomModalKarin{
  from{
    transform:scale(.94);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

/* ===== TABLET ===== */
@media (max-width: 991px){
  #modalKarin{
    padding:12px;
  }

  #modalKarinBox{
    max-width:100%;
    height:94vh;
    max-height:94vh;
    border-radius:14px;
  }
}

/* ===== TELÉFONOS ===== */
@media (max-width: 768px){
  #bannerLeyKarin{
    border-radius:12px;
    margin-bottom:14px;
  }

  #bannerLeyKarin:hover .banner-karin-img{
    transform:none;
  }

  #modalKarin{
    padding:0;
    align-items:flex-end;
  }

  #modalKarinBox{
    width:100%;
    max-width:100%;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  #iframeKarin{
    width:100%;
    height:100%;
    min-height:100dvh;
  }

  #cerrarModalKarinBtn{
    top:8px;
    right:8px;
    width:40px;
    height:40px;
    font-size:20px;
  }
}

/* ===== TELÉFONOS PEQUEÑOS ===== */
@media (max-width: 480px){
  #cerrarModalKarinBtn{
    width:38px;
    height:38px;
    font-size:18px;
    top:6px;
    right:6px;
  }
}

/* Lista botones (no invade tu sitio) */
  .quick-links{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
  .quick-links li{ margin:0; }
  .btn-3d{ width:100%; border:0; cursor:pointer; display:flex; align-items:center; gap:10px; justify-content:flex-start; }

  /* Modal (prefijo único mniui-) */
  .mniui-modal{ position:fixed; inset:0; display:none; z-index:9999; }
  .mniui-modal[aria-hidden="false"]{ display:block; }
  .mniui-modal__backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
  }
  .mniui-modal__panel{
    position:relative;
    width:min(920px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    margin:12px auto;
    border-radius:18px;
    overflow:hidden;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 60px rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.45);
  }
  .mniui-modal__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 16px;
    background: linear-gradient(135deg, rgba(11,110,207,.10), rgba(251,191,36,.10));
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .mniui-modal__titlewrap{ display:flex; gap:12px; align-items:center; }
  .mniui-modal__icon{
    width:44px; height:44px;
    border-radius:14px;
    display:grid; place-items:center;
    background: rgba(11,110,207,.12);
    border: 1px solid rgba(11,110,207,.18);
  }
  .mniui-modal__title{ margin:0; font-size:1.05rem; }
  .mniui-modal__subtitle{ font-size:.85rem; opacity:.8; margin-top:2px; }

  .mniui-modal__close{
    width:42px; height:42px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.7);
    cursor:pointer;
    display:grid; place-items:center;
  }

  .mniui-modal__body{
    padding:14px 16px 16px;
    overflow:auto;
    max-height: calc(100vh - 190px);
  }

  .mniui-modal__content{ display:grid; gap:12px; }

  .mniui-card{
    border-radius:16px;
    padding:12px 14px;
    background: rgba(255,255,255,.78);
    border:1px solid rgba(0,0,0,.06);
  }
  .mniui-card h5{ margin:0 0 8px; font-size:.98rem; }

  .mniui-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:8px;
    font-size:.95rem;
  }
  .mniui-item{
    border-radius:14px;
    padding:10px 12px;
    background: rgba(0,0,0,.03);
    border:1px solid rgba(0,0,0,.06);
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
  }
  .mniui-item strong{ font-weight:800; }
  .mniui-item a{
    text-decoration:none;
    font-weight:800;
  }
  .mniui-item a:hover{ text-decoration:underline; }

  .mniui-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  .mniui-linkbtn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.70);
    text-decoration:none;
    color: inherit;
    font-weight:800;
  }
  .mniui-linkbtn:hover{ filter:brightness(1.02); }

  .mniui-note{
    margin:0;
    font-size:.9rem;
    opacity:.85;
    line-height:1.35;
  }

  @media (max-width: 680px){
    .mniui-grid{ grid-template-columns: 1fr; }
  }

/* Asegurar click */
  .tramite-item{ cursor:pointer; }
  .tramite-item *{ pointer-events:auto; }

  /* Backdrop */
  .mni-modal-backdrop{
    position:fixed; inset:0;
    background:rgba(2, 8, 23, .55);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    z-index:9999;
  }
  .mni-modal-backdrop.is-open{ display:flex; }

  /* Card */
  .mni-modal{
    width:min(720px, 100%);
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.55);
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.28);
    overflow:hidden;
    transform:translateY(10px);
    opacity:0;
    transition:.18s ease;
    backdrop-filter: blur(10px);
    outline:none;
  }
  .mni-modal-backdrop.is-open .mni-modal{
    transform:translateY(0);
    opacity:1;
  }

  /* Header */
  .mni-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px 10px 18px;
    border-bottom:1px solid rgba(15,23,42,.10);
    background:linear-gradient(180deg, rgba(219,234,254,.75), rgba(255,255,255,.35));
  }
  .mni-modal-title{
    display:flex;
    gap:10px;
    align-items:center;
  }
  .mni-modal-title .material-icons{
    font-size:26px;
    color:#0b6ecf;
  }
  .mni-modal-title h4{
    margin:0;
    font-size:18px;
    line-height:1.2;
    color:#0f172a;
  }
  .mni-modal-title p{
    margin:4px 0 0;
    font-size:13px;
    color:#475569;
  }

  .mni-modal-close{
    border:none;
    background:rgba(15,23,42,.06);
    color:#0f172a;
    border-radius:12px;
    padding:8px;
    cursor:pointer;
    transition:.15s ease;
    display:grid;
    place-items:center;
  }
  .mni-modal-close:hover{ background:rgba(15,23,42,.10); transform:translateY(-1px); }
  .mni-modal-close .material-icons{ font-size:20px; }

  /* Body */
  .mni-modal-body{
    padding:14px 18px 18px 18px;
    color:#0f172a;
  }
  .mni-modal-body .mni-lead{
    margin:0 0 10px 0;
    font-size:14px;
    color:#0f172a;
  }

  .mni-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin-top:12px;
  }
  .mni-card{
    background:rgba(255,255,255,.80);
    border:1px solid rgba(15,23,42,.10);
    border-radius:14px;
    padding:12px;
  }
  .mni-card h5{
    margin:0 0 8px 0;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#0b6ecf;
  }
  .mni-card h5 .material-icons{ font-size:18px; }
  .mni-card ul{
    margin:0;
    padding-left:18px;
    color:#0f172a;
    font-size:13.5px;
    line-height:1.45;
  }
  .mni-card li{ margin:6px 0; }

  .mni-note{
    margin-top:12px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(251,191,36,.18);
    border:1px solid rgba(251,191,36,.35);
    color:#0f172a;
    font-size:13.5px;
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  .mni-note .material-icons{ font-size:18px; color:#b45309; margin-top:1px; }

  .mni-actions{
    margin-top:14px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .mni-btn{
    border:none;
    cursor:pointer;
    border-radius:12px;
    padding:10px 12px;
    font-weight:700;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:.15s ease;
  }
  .mni-btn.ghost{
    background:rgba(15,23,42,.06);
    color:#0f172a;
  }
  .mni-btn.ghost:hover{ background:rgba(15,23,42,.10); }

  .mni-btn.primary{
    background:#0b6ecf;
    color:#fff;
  }
  .mni-btn.primary:hover{ filter:brightness(.95); transform:translateY(-1px); }

  @media (max-width: 640px){
    .mni-grid{ grid-template-columns:1fr; }
    .mni-modal{ border-radius:16px; }
  }

/* Asegurar click */
  .tramite-item{ cursor:pointer; }
  .tramite-item *{ pointer-events:auto; }

  /* Backdrop */
  .mni-modal-backdrop{
    position:fixed; inset:0;
    background:rgba(2, 8, 23, .55);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    z-index:9999;
  }
  .mni-modal-backdrop.is-open{ display:flex; }

  /* Card */
  .mni-modal{
    width:min(720px, 100%);
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.55);
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.28);
    overflow:hidden;
    transform:translateY(10px);
    opacity:0;
    transition:.18s ease;
    backdrop-filter: blur(10px);
    outline:none;
  }
  .mni-modal-backdrop.is-open .mni-modal{
    transform:translateY(0);
    opacity:1;
  }

  /* Header */
  .mni-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px 10px 18px;
    border-bottom:1px solid rgba(15,23,42,.10);
    background:linear-gradient(180deg, rgba(219,234,254,.75), rgba(255,255,255,.35));
  }
  .mni-modal-title{
    display:flex;
    gap:10px;
    align-items:center;
  }
  .mni-modal-title .material-icons{
    font-size:26px;
    color:#0b6ecf;
  }
  .mni-modal-title h4{
    margin:0;
    font-size:18px;
    line-height:1.2;
    color:#0f172a;
  }
  .mni-modal-title p{
    margin:4px 0 0;
    font-size:13px;
    color:#475569;
  }

  .mni-modal-close{
    border:none;
    background:rgba(15,23,42,.06);
    color:#0f172a;
    border-radius:12px;
    padding:8px;
    cursor:pointer;
    transition:.15s ease;
    display:grid;
    place-items:center;
  }
  .mni-modal-close:hover{ background:rgba(15,23,42,.10); transform:translateY(-1px); }
  .mni-modal-close .material-icons{ font-size:20px; }

  /* Body */
  .mni-modal-body{
    padding:14px 18px 18px 18px;
    color:#0f172a;
  }
  .mni-modal-body .mni-lead{
    margin:0 0 10px 0;
    font-size:14px;
    color:#0f172a;
  }

  .mni-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin-top:12px;
  }
  .mni-card{
    background:rgba(255,255,255,.80);
    border:1px solid rgba(15,23,42,.10);
    border-radius:14px;
    padding:12px;
  }
  .mni-card h5{
    margin:0 0 8px 0;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#0b6ecf;
  }
  .mni-card h5 .material-icons{ font-size:18px; }
  .mni-card ul{
    margin:0;
    padding-left:18px;
    color:#0f172a;
    font-size:13.5px;
    line-height:1.45;
  }
  .mni-card li{ margin:6px 0; }

  .mni-note{
    margin-top:12px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(251,191,36,.18);
    border:1px solid rgba(251,191,36,.35);
    color:#0f172a;
    font-size:13.5px;
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  .mni-note .material-icons{ font-size:18px; color:#b45309; margin-top:1px; }

  .mni-actions{
    margin-top:14px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .mni-btn{
    border:none;
    cursor:pointer;
    border-radius:12px;
    padding:10px 12px;
    font-weight:700;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:.15s ease;
  }
  .mni-btn.ghost{
    background:rgba(15,23,42,.06);
    color:#0f172a;
  }
  .mni-btn.ghost:hover{ background:rgba(15,23,42,.10); }

  @media (max-width: 640px){
    .mni-grid{ grid-template-columns:1fr; }
    .mni-modal{ border-radius:16px; }
  }

.loader{
    width:34px;
    height:34px;
    border:4px solid #cbd5e1;
    border-top-color:#2563eb;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
    margin:0 auto;
}
@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* HERO de imagen en modal (PC se mantiene igual) */
.program-modal-hero{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
  background:#0b1e35;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.program-modal-hero img{
  width:100%;
  height:auto;
  display:block;
}

/* Acciones al final del modal */
.program-modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}


/* =========================
   SOLO TELÉFONOS
========================= */
@media (max-width:768px){

  /* modal más pequeño */
  .program-modal-content{
    width:95%;
    max-height:85vh;
    margin:auto;
    border-radius:18px;
    overflow-y:auto;
  }

  /* banner menos alto */
  .program-modal-hero img{
    max-height:150px;
    object-fit:cover;
  }

  /* texto más compacto */
  .program-modal-body{
    font-size:14px;
  }

  /* botones ocupan todo el ancho */
  .program-modal-actions{
    flex-direction:column;
  }

  .program-modal-actions .btn-3d,
  .program-modal-actions a{
    width:100%;
    justify-content:center;
  }

}

/* ==========================================================
   CORRECCIÓN FINAL SLIDER SIN BORDES AZULES
   Este bloque debe quedar SIEMPRE al final del CSS
   ========================================================== */

/* Fondo exterior blanco para que no aparezca el celeste alrededor del slider */
html,
body{
  background:transparent !important;
  background-image:none !important;
}

/* El hero y sus contenedores no deben pintar fondo celeste ni sombra */
.hero,
.hero .container,
.hero-grid{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:none !important;
  outline:none !important;
}

/* Reset fuerte de todos los estilos antiguos del slider */
.hero-right,
.hero-slider,
.hero-slide,
.hero-slide img,
.hero-slide-caption,
.hero-slide-caption h3,
.hero-slide-caption p,
.hero-slider-arrow,
.hero-slider-dots,
.hero-slider-dots button,
.hero-right-badge{
  box-sizing:border-box !important;
}

/* Contenedor externo limpio */
.hero-right{
  position:relative !important;
  width:100% !important;
  display:block !important;
  margin-top:90px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  overflow:hidden !important;
  border-radius:0 !important;
}

/* Slider sin marco exterior ni halo */
.hero-slider{
  position:relative !important;
  width:100% !important;
  height:360px !important;
  display:block !important;
  overflow:hidden !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Slides */
.hero-slide{
  position:absolute !important;
  inset:0 !important;
  display:none !important;
  width:100% !important;
  height:100% !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.hero-slide.is-active{
  display:grid !important;
  grid-template-columns:64% 36% !important;
}

/* Elimina overlays antiguos */
.hero-slide::before,
.hero-slide::after{
  content:none !important;
  display:none !important;
}

/* Imagen */
.hero-slide img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  filter:none !important;
}

/* Panel derecho */
.hero-slide-caption{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:5 !important;
  max-width:none !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  padding:34px 36px !important;
  background:transparent !important;
  background-image:none !important;
  color:#0f172a !important;
  border:0 !important;
  border-left:1px solid #e5e7eb !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Etiqueta */
.hero-slide-caption::before{
  content:"Información municipal" !important;
  display:inline-flex !important;
  width:max-content !important;
  margin-bottom:16px !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  background:#eef6ff !important;
  border:1px solid #bfdbfe !important;
  color:#0f4fb6 !important;
  font-size:11px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
  box-shadow:none !important;
}

.hero-slide-caption::after{
  content:"Ver información" !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  padding:11px 17px !important;
  border-radius:13px !important;
  background:#0f4fb6 !important;
  color:#ffffff !important;
  font-size:14px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

/* Textos */
.hero-slide-caption h3{
  display:block !important;
  margin:0 0 12px !important;
  padding:0 !important;
  font-size:34px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  color:#0f172a !important;
  text-shadow:none !important;
}

.hero-slide-caption p{
  display:block !important;
  margin:0 0 22px !important;
  padding:0 !important;
  font-size:15px !important;
  line-height:1.55 !important;
  color:#475569 !important;
  text-shadow:none !important;
}

/* Badge superior sin halo exterior */
.hero-right-badge{
  position:absolute !important;
  top:14px !important;
  left:16px !important;
  z-index:30 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 16px !important;
  border-radius:999px !important;
  background:#0f4fb6 !important;
  color:#ffffff !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  animation:none !important;
}

/* Flechas */
.hero-slider-arrow{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:40 !important;
  width:46px !important;
  height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  border:0 !important;
  outline:0 !important;
  background:#0f4fb6 !important;
  color:#ffffff !important;
  font-size:26px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.hero-slider-arrow.prev{
  left:16px !important;
}

.hero-slider-arrow.next{
  right:16px !important;
}

.hero-slider-arrow:hover{
  background:#073b8e !important;
  box-shadow:none !important;
}

/* Dots */
.hero-slider-dots{
  position:absolute !important;
  left:50% !important;
  bottom:14px !important;
  transform:translateX(-50%) !important;
  z-index:40 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.hero-slider-dots button{
  width:9px !important;
  height:9px !important;
  display:block !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:999px !important;
  background:#94a3b8 !important;
  cursor:pointer !important;
  box-shadow:none !important;
}

.hero-slider-dots button.is-active{
  width:30px !important;
  background:#fbbf24 !important;
  box-shadow:none !important;
}

/* Responsive */
@media(max-width:900px){

  .hero-right{
    margin-top:20px !important;
  }

  .hero-slider{
    height:500px !important;
  }

  .hero-slide.is-active{
    grid-template-columns:1fr !important;
    grid-template-rows:58% 42% !important;
  }

  .hero-slide-caption{
    padding:22px !important;
    border-left:0 !important;
    border-top:1px solid #e5e7eb !important;
  }

  .hero-slide-caption h3{
    font-size:24px !important;
  }

  .hero-slide-caption p{
    font-size:14px !important;
  }

  .hero-slider-arrow{
    width:38px !important;
    height:38px !important;
    font-size:22px !important;
  }
}


/* ==========================================================
   FIX SEGURO: MENÚ SOBRE CONTENIDO, MODALES SOBRE MENÚ
   No modifica la posición interna del slider.
   ========================================================== */

/* Huincha superior */
.top-ribbon{
  z-index:8000 !important;
}

/* Menú principal: sobre slider/contenido, bajo modales */
.nav-bar{
  position:fixed !important;
  top:170px !important;
  left:0 !important;
  width:100% !important;
  z-index:9000 !important;
  overflow:visible !important;
}

.nav-inner,
.nav-menu,
.nav-item,
.nav-item.has-sub{
  position:relative !important;
  overflow:visible !important;
  z-index:9001 !important;
}

/* Submenús */
.nav-submenu{
  position:absolute !important;
  top:100% !important;
  left:0 !important;
  min-width:240px !important;
  background:#ffffff !important;
  border-radius:0 0 14px 14px !important;
  box-shadow:0 18px 40px rgba(15,23,42,.35) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  padding:8px 0 !important;
  margin:0 !important;
  display:none;
  z-index:9500 !important;
}

.nav-item.has-sub:hover > .nav-submenu,
.nav-item.has-sub:focus-within > .nav-submenu{
  display:block !important;
}

.nav-submenu li a,
.nav-submenu li button{
  display:block !important;
  width:100% !important;
  padding:10px 16px !important;
  color:#111827 !important;
  background:transparent !important;
  text-align:left !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  border:0 !important;
  font:inherit !important;
}

.nav-submenu li a:hover,
.nav-submenu li button:hover{
  background:#eff6ff !important;
  color:#074d92 !important;
}

/* Slider/contenido: mantener funcionamiento original, solo debajo del menú */
.hero,
.hero-grid,
.hero-left,
.hero-right,
.mni-slider,
.mni-slider-inner,
.main-content,
.grid-main{
  z-index:auto !important;
}

/* Restauración explícita del slider MNI */
.mni-slider{
  position:relative !important;
  overflow:hidden !important;
}

.mni-slider-inner{
  position:relative !important;
  overflow:hidden !important;
}

.mni-slide{
  position:absolute !important;
  inset:0 !important;
}

.mni-slide.is-active{
  opacity:1 !important;
  transform:scale(1) !important;
  pointer-events:auto !important;
  z-index:2 !important;
}

/* Modales y popups siempre sobre menú */
.swal2-container,
.news-modal-overlay,
.news-modal,
.program-modal,
.program-modal-content,
.img-modal,
.img-modal-content,
.modal,
.modal-backdrop,
.popup-overlay,
.mni-modal-overlay,
.ux-modal-overlay,
.ux-modal,
.mdl-overlay,
#modalOIRS,
#mniModalPladeco{
  z-index:100000 !important;
}

/* Responsive: no cortar submenús */
@media (max-width:960px){
  .nav-bar{
    position:fixed !important;
    top:170px !important;
    overflow:visible !important;
  }

  .nav-menu{
    overflow:visible !important;
  }
}

/* ==========================================================
   CORRECCIÓN MENÚ MÓVIL + MODALES INDEPENDIENTES
   Archivo agregado para teléfonos/tablets.
   Mantiene intacto el menú de escritorio.
   ========================================================== */

@media (max-width:1024px){
  .nav-bar{ display:none !important; }

  body.mni-mobile-lock{
    overflow:hidden !important;
    touch-action:none;
  }

  .mni-mobile-menu-shell{
    display:block !important;
    position:sticky;
    top:0;
    z-index:999990;
    width:100%;
    padding:10px 12px;
    background:linear-gradient(135deg,#002f5f,#005aa7);
    box-shadow:0 12px 28px rgba(15,23,42,.22);
    border-bottom:1px solid rgba(255,255,255,.18);
  }

  .mni-mobile-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
  }

  .mni-mobile-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    color:#fff !important;
    text-decoration:none !important;
  }

  .mni-mobile-brand img{
    width:42px;
    height:42px;
    object-fit:contain;
    border-radius:12px;
    background:rgba(255,255,255,.12);
    padding:4px;
  }

  .mni-mobile-brand-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.15;
  }

  .mni-mobile-brand-text strong{
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mni-mobile-brand-text span{
    font-size:11px;
    font-weight:700;
    color:#dbeafe;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mni-mobile-open{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:15px;
    background:rgba(255,255,255,.12);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px rgba(0,0,0,.20);
  }

  .mni-mobile-open .material-icons{ font-size:30px; }

  .mni-mobile-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:999991;
    background:rgba(2,6,23,.62);
    backdrop-filter:blur(5px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
  }

  .mni-mobile-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
  }

  .mni-mobile-drawer{
    display:flex;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:999992;
    flex-direction:column;
    width:min(92vw,420px);
    background:linear-gradient(180deg,#ffffff,#f5f8fc);
    box-shadow:-22px 0 55px rgba(15,23,42,.30);
    transform:translateX(105%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
    border-left:1px solid rgba(15,23,42,.08);
  }

  .mni-mobile-drawer.is-open{ transform:translateX(0); }

  .mni-mobile-head{
    padding:18px 18px 14px;
    background:linear-gradient(135deg,#003b73,#005aa7);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .mni-mobile-head-title{
    display:flex;
    flex-direction:column;
    gap:3px;
  }

  .mni-mobile-head-title strong{
    font-size:18px;
    font-weight:950;
  }

  .mni-mobile-head-title span{
    color:#dbeafe;
    font-size:12px;
    font-weight:700;
  }

  .mni-mobile-close{
    width:42px;
    height:42px;
    border:0;
    border-radius:14px;
    background:rgba(255,255,255,.16);
    color:#fff;
    cursor:pointer;
    display:grid;
    place-items:center;
  }

  .mni-mobile-content{
    padding:14px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    flex:1;
  }

  .mni-mobile-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:18px;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    overflow:hidden;
    margin-bottom:12px;
  }

  .mni-mobile-link,
  .mni-mobile-section-btn{
    width:100%;
    min-height:54px;
    padding:13px 15px;
    border:0;
    background:#fff;
    color:#0f172a !important;
    text-decoration:none !important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    text-align:left;
  }

  .mni-mobile-link-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }

  .mni-mobile-ico{
    width:36px;
    height:36px;
    flex:0 0 36px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:#eef5ff;
    color:#005aa7;
  }

  .mni-mobile-section-btn .mni-chevron{
    color:#64748b;
    transition:transform .22s ease;
  }

  .mni-mobile-section.is-open .mni-chevron{
    transform:rotate(180deg);
  }

  .mni-mobile-submenu{
    display:none;
    padding:0 12px 12px 63px;
    background:#fff;
  }

  .mni-mobile-section.is-open .mni-mobile-submenu{
    display:grid;
    gap:7px;
  }

  .mni-mobile-submenu a,
  .mni-mobile-submenu button{
    display:block;
    width:100%;
    padding:11px 12px;
    border-radius:13px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    color:#0f172a !important;
    text-decoration:none !important;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    text-align:left;
  }

  .mni-mobile-quick{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:12px 0 16px;
  }

  .mni-mobile-quick a{
    min-height:74px;
    padding:12px;
    border-radius:18px;
    text-decoration:none !important;
    color:#fff !important;
    background:linear-gradient(135deg,#005aa7,#003b73);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    box-shadow:0 10px 20px rgba(0,90,167,.20);
    font-weight:900;
  }

  .mni-mobile-quick a span{
    color:#dbeafe;
    font-size:12px;
    font-weight:700;
  }
}

@media (min-width:1025px){
  .mni-mobile-menu-shell,
  .mni-mobile-drawer,
  .mni-mobile-backdrop,
  .mni-phone-modal-overlay{
    display:none !important;
  }
}

/* ===== MODAL INDEPENDIENTE SOLO PARA TELÉFONOS/TABLETS ===== */
.mni-phone-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000005;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(7px);
  padding:18px;
  align-items:center;
  justify-content:center;
}

.mni-phone-modal-overlay.is-open{
  display:flex;
}

.mni-phone-modal{
  width:min(94vw,760px);
  max-height:86vh;
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 30px 70px rgba(0,0,0,.42);
  display:flex;
  flex-direction:column;
  animation:mniPhoneModalIn .22s ease-out;
}

@keyframes mniPhoneModalIn{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.mni-phone-modal-head{
  padding:18px 18px 14px;
  background:linear-gradient(135deg,#003b73,#005aa7);
  color:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.mni-phone-modal-title{
  margin:0;
  font-size:20px;
  line-height:1.15;
  font-weight:950;
}

.mni-phone-modal-sub{
  margin:5px 0 0;
  color:#dbeafe;
  font-size:13px;
  font-weight:700;
}

.mni-phone-modal-close{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border:0;
  border-radius:14px;
  background:rgba(255,255,255,.16);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
}

.mni-phone-modal-body{
  padding:18px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  color:#0f172a;
}

.mni-phone-modal-body h4{
  margin:0 0 9px;
  color:#003b73;
  font-size:16px;
}

.mni-phone-modal-body p{
  margin:0 0 12px;
  line-height:1.58;
  color:#334155;
  font-size:15px;
}

.mni-phone-modal-body ul{
  margin:0 0 14px;
  padding-left:18px;
  color:#334155;
  line-height:1.6;
  font-size:15px;
}

.mni-phone-modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.mni-phone-modal-btn{
  border:0;
  border-radius:14px;
  padding:11px 16px;
  background:linear-gradient(135deg,#005aa7,#003b73);
  color:#fff !important;
  font-weight:900;
  text-decoration:none !important;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:520px){
  .mni-phone-modal-overlay{ padding:10px; }
  .mni-phone-modal{ width:100%; max-height:90vh; border-radius:20px; }
  .mni-phone-modal-title{ font-size:18px; }
  .mni-phone-modal-body{ padding:15px; }
  .mni-phone-modal-actions{ flex-direction:column; }
  .mni-phone-modal-btn{ width:100%; }
}




/* ==========================================================
   MENU MOVIL + MODALES MOVILES
   ========================================================== */

.mobile-menu-btn{
  display:none;
  position:fixed;
  top:18px;
  right:18px;
  z-index:999999;
  width:52px;
  height:52px;
  border:none;
  border-radius:14px;
  background:#0b6ecf;
  color:#fff;
  font-size:26px;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
}

.mobile-menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  z-index:999997;
  opacity:0;
  visibility:hidden;
  transition:.25s;
}

.mobile-menu-overlay.active{
  opacity:1;
  visibility:visible;
}

.mobile-menu{
  position:fixed;
  top:0;
  left:-340px;
  width:320px;
  height:100vh;
  background:#0f172a;
  z-index:999998;
  overflow-y:auto;
  transition:left .3s ease;
  padding:20px 0 80px;
  box-shadow:0 0 40px rgba(0,0,0,.45);
}

.mobile-menu.active{
  left:0;
}

.mobile-menu-header{
  padding:0 18px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
}

.mobile-menu-title{
  color:#fff;
  font-size:1.1rem;
  font-weight:700;
}

.mobile-menu-item{
  border-bottom:1px solid rgba(255,255,255,.06);
}

.mobile-menu-link{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:15px 18px;
  color:#fff;
  background:none;
  border:none;
  font-size:.95rem;
  text-align:left;
  cursor:pointer;
}

.mobile-menu-link:hover{
  background:rgba(255,255,255,.06);
}

.mobile-submenu{
  display:none;
  background:#111827;
}

.mobile-submenu.active{
  display:block;
}

.mobile-submenu a,
.mobile-submenu button{
  display:block;
  width:100%;
  padding:13px 22px;
  background:none;
  border:none;
  color:#cbd5e1;
  text-align:left;
  cursor:pointer;
  font-size:.9rem;
}

.mobile-submenu a:hover,
.mobile-submenu button:hover{
  background:rgba(255,255,255,.05);
  color:#fff;
}

.mobile-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  z-index:9999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.mobile-modal.active{
  display:flex;
}

.mobile-modal-content{
  width:100%;
  max-width:520px;
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:18px;
  padding:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.mobile-modal-close{
  margin-top:14px;
  padding:10px 16px;
  border:none;
  border-radius:10px;
  background:#0b6ecf;
  color:#fff;
  cursor:pointer;
}

@media (max-width: 920px){

  .mobile-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .nav-bar .nav-menu{
    display:none !important;
  }

  .nav-inner{
    min-height:65px;
  }

}

@media (min-width: 921px){

  .mobile-menu,
  .mobile-menu-overlay,
  .mobile-menu-btn,
  .mobile-modal{
    display:none !important;
  }

}