@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Poppins:wght@400;500;600&display=swap');

/* ======================================= */
/* VARIABLES DE MARCA BID         */
/* ======================================= */
:root{
  /* Colores Principales (Brand Guidelines) */
  --blue:#338AC2; /* Azul Secundario */
  --blue-dark:#0069A8; /* Azul Marino (Principal) */
  --yellow:#F6A31F; /* Naranja/Amarillo (Acento OFICIAL) */
  --sand:#F4DCC1; /* Color de Fondo Suave (Para secciones Light) */
  --soft-bg: #f8f8f8; /* Fondo más limpio para secciones suaves */

  /* Colores Base */
  --light:#ffffff;
  --dark:#1f1f1f;

  /* Tipografía */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;
    --body:rgba(243, 243, 243, 1);
 
}

body{
  font-family:var(--font-body);
  color:var(--dark);
  line-height:1.6;
  background-color: var(--body);
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--dark);
}

.h1-hero{
  font-weight:900;
  font-size:3.5rem;
}

.gradient-page {
    background: linear-gradient(180deg, #0000, var(--light)), linear-gradient(100deg, var(--sand), var(--light));
}

.gradient-map{
   background: linear-gradient(180deg, #0000, var(--light)), linear-gradient(100deg, #a41bff, #00c3ff); 
}

/* ======================================= */
/* HEADER & NAV               */
/* ======================================= */
/* HEADER & NAV */
.header{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,.05);
  transition: all .3s ease;
}

.brand{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:1.4rem;
  color:var(--blue-dark);
  text-transform:uppercase;
  display: flex; /* Para alinear el ícono */
  align-items: center;
  gap: 8px; /* Espacio entre ícono y texto */
}

.brand i {
    color: var(--blue-dark); /* Color del ícono de pin de mapa */
    font-size: 1.6rem;
}

.header nav a{
  color:var(--dark);
  text-decoration:none;
  font-weight:500;
  transition:color .3s;
}

.header nav a:hover{
  color:var(--yellow);
}

.lang-switch{
  font-size:.85rem;
  cursor:pointer;
  font-weight:600;
  color:var(--light); /* Texto blanco */
  background: var(--blue-dark); /* Fondo azul */
  padding: 5px 10px;
  border-radius: 4px;
  transition: background .3s;
}

.lang-switch:hover{
    background: var(--blue);
}

.menu-toggle{
  background:none;
  border:none;
  font-size:2rem;
  color:var(--blue-dark);
}

.btn-yellow{
  background:var(--yellow);
  border-radius:40px;
  padding:.4rem 1.2rem;
  color:var(--dark);
  font-weight:600;
  border:2px solid var(--yellow);
  transition:background .3s, transform .3s;
}

.btn-yellow:hover{
  background:transparent;
  border:2px solid var(--yellow);
  color:var(--dark);
  transform:translateY(-2px);
}

/* --- MENÚ LATERAL MÓVIL (Offcanvas Estilizado) --- */
.offcanvas-end {
  background-color: var(--blue-dark);
  color: var(--light);
  width: 280px;
}

.offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
}

.offcanvas-title {
  color: var(--light);
  font-family: var(--font-heading);
  font-weight: 700;
}

.offcanvas-body {
  padding: 0;
}

.offcanvas-body .mobile-nav-link {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--light);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.3s;
}

.offcanvas-body .mobile-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--yellow);
}

.btn-mobile-participa {
  display: block;
  width: 90%;
  margin: 20px auto;
  background: var(--yellow);
  color: var(--dark);
  font-weight: 600;
  border-radius: 50px;
}
/* ----------------------------------------------- */

/* ======================================= */
/* HERO                    */
/* ======================================= */
.hero{
  height:100vh;
  /* Imagen de Hero de orden y calidad */
  background:url('images/hero-min.jpg') center center no-repeat;
  background-size:cover;
  position:relative;
  display:flex;
  align-items:center;
  color:var(--light);
}

.hero::after{
  content:'';
  position:absolute;
  inset:0;
  /* Overlay azul oscuro intenso para alto contraste (similar a la captura) */
  background:rgba(0, 105, 168, 0.65); 
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:900px;
  text-align:center;
  margin:0 auto;
}

/* --- Buscador Premium --- */
.hero-search{
  background:var(--light);
  padding:8px;
  border-radius:50px;
  display:flex;
  margin-top:40px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.hero-search input{
  border:none;
  padding:8px 20px;
  font-size:1.1rem;
  color:var(--dark);
  flex-grow:1;
}

.hero-search input:focus{
  box-shadow:none;
  outline:none;
}

.hero-search button{
  background:var(--blue-dark);
  color:var(--light);
  padding:12px 25px;
  border-radius:50px;
  border:none;
  font-weight:600;
  transition:background .3s;
}

.hero-search button:hover{
  background:var(--blue);
}

/* ... (Se asume que las variables de marca están definidas) ... */

/* ----------------------------------------------- */
/* SECCIÓN EXPLORA EL DISTRITO (CATEGORIES)        */
/* ----------------------------------------------- */

/* Tarjeta contenedora */
.category-card{
  height:260px;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  position:relative;
  /* Configuración Flex para mover el contenido al fondo */
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow:hidden;
  transition:transform .3s;
  text-decoration: none;
}

.category-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 20px rgba(0,0,0,.1);
}

/* Overlay azul oscuro (Estilo de la Captura) */
.category-card::after{
  content:"";
  position:absolute;
  inset:0;
  /* Overlay oscuro para alto contraste */
  background:linear-gradient(to top, rgba(0, 30, 70, 0.9), rgba(0, 30, 70, 0.4));
  transition: background .3s;
}

/* Contenido de la tarjeta (Títulos/Explorar) */
.category-card-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    padding-top: 5px; /* Ajuste para acercar el texto al badge */
    color: var(--light);
}

/* Etiqueta de Conteo (Badge '45+') */
.category-card-badge {
    position: absolute;
    top: 30px;
    left: 20px;
    background: var(--yellow); /* Naranja OFICIAL de acento */
    color: var(--dark);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 3;
}

/* Título de la categoría */
.category-card-content span{
  color:var(--light);
  font-size:1.4rem;
  font-weight:700;
  display: block;
  line-height: 1.2;
}

/* Texto "Explorar ->" */
.category-card-content small {
  color: var(--light);
  opacity: 0.8; /* Ligeramente más opaco para el subtexto */
  font-size: 0.9rem;
  font-weight: 500;
  display: block;
  margin-top: 5px;
}
/* ... (El resto del CSS se mantiene igual) ... */
/* -------------------------- */

/* ... (Se asume que las variables de marca están definidas: --blue-dark, --yellow, --light) ... */

/* SECTIONS */
.section{
  padding:90px 0;
}

.section-soft{
   
}

/* ... (Se asume que las variables de marca están definidas: --blue-dark, --yellow, --light, --font-heading) ... */

/* ----------------------------------------------- */
/* STATS (Bloque 2 - Diseño de la Captura)         */
/* ----------------------------------------------- */

.stats-container-bg {
    /* Fondo con una imagen de olas o agua profunda */
    background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e') center center no-repeat;
    background-size: cover;
    padding: 40px 30px; /* Más padding para que el contenido respire */
    border-radius: 20px; /* Esquinas redondeadas como la captura */
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25); /* Sombra fuerte */
}

/* Overlay azul oscuro con transparencia para que la imagen de fondo se vea */
.stats-container-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 50, 100, 0.85); /* Azul oscuro opaco */
    z-index: 0;
    border-radius: 20px;
}

.stats-card-v2{
  color:var(--light);
  /* Remover el display:flex para que los col-12 funcionen como bloques */
  text-align:center; /* El texto se alinea a la izquierda dentro del col-12 */
  position:relative;
  z-index:1;
  padding: 15px 0; /* Espaciado entre las métricas */
}

.stats-card-v2 strong{
  font-family: var(--font-heading);
  font-size:3.5rem; /* Números muy grandes para impacto */
  color:var(--yellow); /* Color Naranja/Amarillo de acento */
  font-weight:900;
  line-height:1;
  display: block;
}

.stats-card-v2 span{
  font-size:1.1rem; /* Texto secundario más grande y legible */
  color:var(--light); 
  opacity: 0.85; 
  display:block;
  font-weight: 500;
  margin-top: 5px;
}

/* Pequeño ajuste para forzar la alineación a la izquierda si el HTML tiene col-4/col-12 anidados */
.stats-container-bg .row.text-center {
    text-align: center!important;
}
/* CATEGORIES (Explora el Distrito) */
.category-card{
  height:260px;
  border-radius:24px;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  flex-direction: column;
  justify-content: center;
  overflow:hidden;
  transition:transform .3s;
  text-decoration: none;
}

.category-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 30px rgba(0,0,0,.15);
}

.category-card::after{
  content:"";
  position:absolute;
  inset:0;
  /* Overlay azul oscuro sólido de la captura (ajustado para alto contraste) */
  background:linear-gradient(to top, rgba(0, 30, 70, 0.9), rgba(0, 30, 70, 0.5));
  transition: background .3s;
}
.category-card:hover::after{
  /* Azul de la marca en hover */
  background:linear-gradient(to top, rgba(0, 105, 168, 0.9), rgba(0, 105, 168, 0.5));
}

.category-card-content {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.category-card-badge {
    position: absolute;
    top: -20px;
    left: 20px;
    background: var(--yellow); /* Color de acento para la etiqueta */
    color: var(--dark);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 3;
}

.category-card-content span{
  color:var(--light);
  font-size:1.4rem;
  font-weight:700;
  display: block;
  margin-bottom: 5px;
}

.category-card-content small {
    color: var(--light);
    opacity: 0.9;
    font-size: 0.9rem;
    display: block;
    margin-top: 5px;
    font-weight: 500;
}

/* DISTRICT IN ACTION CARDS V3 (LO QUE HACEMOS) */
.action-icon-card {
    background: var(--light);
    border-radius: 18px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,.05);
    border-top: 5px solid transparent;
    transition: transform .3s, border-top-color .3s;
    height: 100%;
}
.action-icon-card:hover {
    transform: translateY(-5px);
    border-top-color: var(--blue-dark);
}

.action-icon-card i {
    font-size: 2.5rem;
    color: var(--yellow);
    margin-bottom: 15px;
}

/* ... (El resto del CSS se mantiene igual) ... */

/* ======================================= */
/* 5. LO QUE HACEMOS (DISEÑO MODULAR)      */
/* ======================================= */

.action-module-card {
    height: 100%;
    min-height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 16px; /* Redondeo de las esquinas */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* Alinear contenido abajo */
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
}

.action-module-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Overlay para todas las tarjetas */
.action-module-card::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Degradado oscuro para alto contraste */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.3)); 
    z-index: 1;
}

/* Contenido de la tarjeta */
.action-module-card .action-content {
    position: relative;
    z-index: 2;
    padding: 25px;
}

/* Bloque Grande (Seguridad & Limpieza) */
.action-main {
    min-height: 516px; /* Debe ser el doble de la pequeña + el gap, o usar flexbox */
}

.action-main h3 {
    font-size: 2.5rem; /* Título principal grande */
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.action-main p {
    font-size: 1.1rem;
    font-weight: 400;
}

/* Bloques Pequeños */
.action-small {
    min-height: 250px;
}

.action-small-content i {
    font-size: 2rem;
    color: var(--yellow); /* Íconos de acento */
    margin-bottom: 10px;
    display: block;
}

.action-small-content h5 {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Ajuste para que el bloque grande ocupe el espacio completo en móvil */
@media (max-width: 992px) {
    .action-main {
        min-height: 350px;
        margin-bottom: 15px;
    }
}

/* MAP PREVIEW CARD */
.map-preview-section .map-card-preview {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex; /* Asegura que la tarjeta use flexbox en el interior */
}

.map-card-preview .map-placeholder {
    /* La imagen de fondo es el mapa visual */
    min-height: 400px; 
    background-size: cover;
    background-position: center;
}

.map-card-preview .map-info {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente el contenido */
}

.map-card-preview .map-info h2 {
    color: var(--blue-dark); /* Color de marca para el título */
    font-weight: 700;
}

/* En dispositivos móviles, el mapa se ve encima de la información */
@media (max-width: 992px) {
    .map-card-preview {
        flex-direction: column;
    }
}

/* MAP SECTION (Block 4) */
.map-preview-section{
  padding:0;
}

.map-card-preview{
  background:var(--sand);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.map-placeholder{
  height:400px;
  background:url('https://maps.googleapis.com/maps/api/staticmap?center=Cabo+San+Lucas,+Playa+El+Médano&zoom=14&size=600x400&maptype=roadmap&markers=color:blue%7Clabel:P%7CPlaya+El+Médano&key=YOUR_API_KEY') center center no-repeat;
  background-size:cover;
  border-bottom:1px solid rgba(0,0,0,.1);
}

.map-info{
  padding:30px;
}

.map-info h2{
  color:var(--blue-dark);
}

/* CTA BLOCK (Community Block 7) */
.cta-block{
  padding:40px;
  border-radius:20px;
  text-align:center;
  background:var(--sand);
  border:1px solid rgba(0,0,0,.05);
  transition:background .3s;
}

.cta-block h3{
  font-size:1.8rem;
  color:var(--dark);
}

/* ... (El resto del CSS se mantiene igual) ... */

/* ======================================= */
/* 8. COMUNIDAD DIGITAL (SOCIAL SECTION)   */
/* ======================================= */

/* --- Social Photo Grid --- */
.social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 120px); /* Altura de fila fija para las imágenes pequeñas */
    gap: 10px;
}

.grid-item {
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
}

.grid-item:hover {
    transform: scale(1.03);
}

/* Primera imagen principal que abarca dos filas */
.grid-main {
    grid-row: span 2; 
    height: 100%; /* Ocupa las dos filas */
}

/* Las imágenes small son las que ocupan 1/3 de ancho y 1 fila de alto */
.grid-small {
    height: 100%; 
}

/* --- Tarjeta de Compartir (Share Card) --- */
.share-card {
    background: var(--yellow); /* Fondo Naranja/Amarillo */
    padding: 30px;
    border-radius: 12px;
    color: var(--dark);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.share-card .hashtag {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 900;
}

.share-card i {
    color: var(--dark);
}

/* --- Tarjeta de Seguir (Follow Card) --- */
.follow-card {
    background: var(--blue-dark); /* Fondo Azul Marino */
    border-radius: 12px;
}

.follow-card .profile-pic {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
}

/* --- Íconos de Redes Sociales Flotantes (Botones Circulares) --- */
.social-icons-floating .social-icon-btn {
    width: 40px;
    height: 40px;
    background: var(--dark);
    color: var(--light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: transform .3s, background .3s;
}

.social-icons-floating .social-icon-btn:hover {
    transform: translateY(-3px);
}

.social-icons-floating .instagram { background: #E4405F; }
.social-icons-floating .facebook { background: #1877F2; }
.social-icons-floating .twitter { background: #1DA1F2; }
.social-icons-floating .linkedin { background: #0A66C2; }


/* Ajuste responsive para el grid social */
@media (max-width: 767px) {
    .social-grid {
        grid-template-columns: 1fr 1fr; /* 2 columnas en móvil */
        grid-template-rows: repeat(3, 150px);
    }
    .grid-main {
        grid-row: span 3;
    }
}

/* FOOTER (Estilo Institucional) */
.footer{
  background:var(--dark); /* Fondo Negro Institucional */
  color:var(--light);
  padding:50px 0;
  font-size:.9rem;
}

.footer h5{
  color:var(--yellow); /* Títulos en Naranja de Acento */
  font-weight:700;
  margin-bottom:15px;
}

.footer a{
  color:rgba(255, 255, 255, 0.7);
  text-decoration:none;
  display:block;
  margin-bottom:8px;
  transition:color .3s;
}

.footer a:hover{
  color:var(--yellow);
}

.footer .social-icons a{
  display:inline-block;
  font-size:1.5rem;
  margin-right:15px;
  color:var(--light);
}

/* 1. Sombras más elegantes (Glassmorphism sutil) */
.category-card, .stats-container-bg, .action-module-card, .map-card-preview {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* 2. Tipografía más legible en parrafos largos */
p {
    opacity: 0.85; /* Evita el negro puro, cansa menos la vista */
    font-weight: 400;
}

/* 3. Ajuste del Gradiente de las tarjetas para asegurar lectura */
.category-card::after {
    background: linear-gradient(to top, rgba(0, 30, 70, 0.95) 10%, rgba(0, 30, 70, 0.5) 50%, transparent 100%);
}

/* 4. Refinamiento del Hero en Móvil */
@media (max-width: 768px) {
    .h1-hero {
        font-size: 2.2rem; /* Más controlado en celular */
    }
    .hero-search {
        margin-top: 20px;
        padding: 5px; /* Menos padding en móvil */
    }
    .hero-search button {
        padding: 10px 15px; /* Botón más compacto */
    }
}

@media (max-width: 991px) {
  .hero{
    height:auto;
    padding-top:150px;
    padding-bottom:50px;
  }
  .h1-hero{
    font-size:2.5rem;
  }
}

/* ======================================= */
/* BUSCADOR INTELIGENTE (Distrito Medano)  */
/* ======================================= */

/* Contenedor de resultados flotante */
.search-results-dropdown {
    position: absolute;
    top: 100%; /* Justo debajo del input */
    left: 15px; /* Alineado con el padding del input */
    right: 15px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px); /* Efecto vidrio */
    border-radius: 20px;
    margin-top: 15px;
    padding: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: slideDown 0.3s ease-out;
}

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

/* Item individual de resultado */
.search-result-item {
    display: flex;
    align-items: center; /* Alinea verticalmente al centro */
    padding: 12px 15px;
    gap: 15px; /* Espacio constante entre foto e info */
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.search-result-item:hover {
    background: var(--soft-bg); /* O un color muy suave */
}

.search-result-item:last-child {
    border-bottom: none;
}

/* Imagen miniatura */
/* Contenedor de la información (Nombre y Dirección) */
.result-info {
    flex: 1; /* Esto empuja al rating hacia la derecha */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.result-info h6 {
    margin: 0;
    color: var(--blue-dark);
    font-weight: 700;
    font-size: 1rem;
}

.result-info p {
    margin: 0;
    font-size: 0.85rem;
    color: #888;
    /* Limita a una línea si la dirección es muy larga */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Badge de Rating alineado a la derecha */
.rating-badge {
    white-space: nowrap; /* Evita que el rating se rompa en dos líneas */
    font-weight: 600;
    color: var(--blue-dark);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

/* Ajuste de la miniatura */
.result-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0; /* Evita que la imagen se aplaste */
}

/* Scrollbar bonito */
.search-results-dropdown::-webkit-scrollbar {
    width: 6px;
}
.search-results-dropdown::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.1);
    border-radius: 10px;
}


/* Estilos para la nueva sección de acciones */
.action-banner-card {
    height: 100%;
    min-height: 450px;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.action-banner-card:hover {
    transform: scale(1.01);
}

.action-banner-content {
    position: relative;
    z-index: 2;
}

.event-mini-card {
    display: flex;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.event-mini-card:hover {
    background: var(--blue-dark);
    color: white !important;
    transform: translateX(10px);
}

.event-mini-card:hover p {
    color: rgba(255,255,255,0.7) !important;
}

.event-icon {
    width: 50px;
    height: 50px;
    background: var(--soft-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--blue-dark);
    margin-right: 20px;
    transition: all 0.3s ease;
}

.event-mini-card:hover .event-icon {
    background: rgba(255,255,255,0.2);
    color: white;
}

.event-text h5 { margin: 0; font-size: 1.1rem; }
.event-text p { margin: 0; font-size: 0.9rem; color: #777; }

/* Contenedor del Feed de FB */
.fb-feed-wrapper {
    background: #fff;
    padding: 10px;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    max-width: 500px; /* Evita que se estire demasiado en pantallas gigantes */
    margin: 0 auto;
}

/* Ajustes para la foto de perfil en la tarjeta de seguir */
.profile-pic-wrapper {
    width: 55px;
    height: 55px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.profile-pic {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Efecto Hover en iconos flotantes */
.social-icon-btn {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: white;
    color: var(--blue-dark);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.social-icon-btn:hover {
    transform: translateY(-5px);
    background: var(--blue-dark);
    color: white;
}
/* ============================= */
/* CATEGORIAS PAGE ONLY STYLES  */
/* ============================= */

.cat-page {
  font-family: 'Poppins', sans-serif;
  background: #f8f9fb;
  color: #1c1c1c;
}

/* TITULO */
.cat-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #123c7b;
}

/* BUSCADOR */
.cat-search {
  border-radius: 50px;
  padding: 14px 22px;
  font-size: 1rem;
}

/* LISTADO */
.cat-list {
  padding-bottom: 2rem;
}

.cat-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  margin-bottom: 1.5rem;
}

.cat-card:hover {
  transform: translateY(-3px);
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0,0,0,.15);
}

/* --- ESTILOS ESPECÍFICOS PARA LA LISTA DE CATEGORÍAS --- */

.card-horizontal {
    display: flex;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 15px;
    height: 100px; /* Altura fija para uniformidad */
}

.card-horizontal:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--blue);
}

.result-thumb-cat {
    width: 100px;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.result-info-cat {
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    min-width: 0; /* Permite que el texto se corte con puntos suspensivos */
}

.result-info-cat h6 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    color: var(--blue-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-info-cat p {
    margin: 0 0 5px 0;
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-info-cat .badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    background-color: #f8f9fa !important;
    border: 1px solid #eee;
}

/* Ajuste para el contenedor de la lista en categorias.html */
#categoryList {
    max-height: calc(100vh - 250px); /* Ajusta la altura para que coincida con el mapa */
    overflow-y: auto;
    padding-right: 10px;
}

/* Scrollbar elegante para la lista */
#categoryList::-webkit-scrollbar {
    width: 6px;
}
#categoryList::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.event-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.bg-blue-dark { background-color: var(--blue-dark); }
.bg-yellow { background-color: var(--yellow); }

.event-mini-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-mini-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* --- LISTADO DIRECTO DE ASOCIADOS --- */

.simple-associate-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #eee;
    text-decoration: none !important;
    height: 100%;
    transition: all 0.3s ease;
    text-align: center;
}

.simple-associate-card h6 {
    color: var(--blue-dark);
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.simple-associate-card span {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.simple-associate-card:hover {
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,105,168,0.2);
}

.simple-associate-card:hover h6 {
    color: #ffffff;
}

.simple-associate-card:hover span {
    color: rgba(255,255,255,0.7);
}

.border-socio {
    border-left: 5px solid var(--blue-dark) !important;
    background-color: #f0f7ff !important; /* Un azul muy claro de fondo */
}

.bi-patch-check-fill {
    margin-left: 5px;
    font-size: 1.1rem;
}

/* Ajuste para móviles: 2 tarjetas por fila */
@media (max-width: 576px) {
    .simple-associate-card {
        padding: 15px 10px;
    }
    .simple-associate-card h6 {
        font-size: 0.9rem;
    }
}

/* ============================= */
/* IMAGEN CARD ALTURA FIJA      */
/* ============================= */

.cat-card .col-md-4 {
  height: 150px;              /* Ajustable: 140–180 según gusto */
  overflow: hidden;
}

.cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 🔥 clave */
  display: block;
}


.cat-card-body {
  padding: 1.25rem 1.5rem;
}

.cat-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #123c7b;
  margin-bottom: .3rem;
}

.cat-address {
  font-size: .9rem;
  color: #666;
}

.cat-rating {
  display: inline-block;
  background: #ffc107;
  color: #000;
  font-size: .75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: .5rem;
}

/* MAPA */
.cat-map {
  height: 100%;
  min-height: 650px;
  border-left: 1px solid #eaeaea;
}

#map {
  height: 650px;
  width: 100%;
}


/* ============================= */
/* LISTADO CON SCROLL           */
/* ============================= */

#categoryList {
  max-height: calc(100vh - 160px); /* Ajusta según header/título */
  overflow-y: auto;
  padding-right: 10px;
}

/* Scroll bonito */
#categoryList::-webkit-scrollbar {
  width: 6px;
}

#categoryList::-webkit-scrollbar-thumb {
  background: #cfd6e4;
  border-radius: 10px;
}

#categoryList::-webkit-scrollbar-track {
  background: transparent;
}

/* Card activa desde el mapa */
.cat-card.is-active {
  border: 2px solid #123c7b;
  box-shadow: 0 18px 45px rgba(18,60,123,.25);
}


@media (max-width: 991px) {
  .cat-map {
    min-height: 400px;
    border-left: none;
  }
}

.perfil-page {
  font-family: 'Poppins', sans-serif;
  background: #f6f8fb;
}

h1,h3,h4,h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #123c7b;
}

/* HERO */
.perfil-hero {
  height: 420px;
  position: relative;
}

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

.perfil-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.2));
}

.perfil-hero-content {
  position: absolute;
  bottom: 30px;
  color: #fff;
}

.perfil-rating {
  font-size: .9rem;
}

/* FEATURES */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature {
  background: #e9f1ff;
  color: #123c7b;
  font-size: .75rem;
  padding: 6px 12px;
  border-radius: 20px;
}

/* HORARIOS */
.perfil-horario {
  list-style: none;
  padding: 0;
}

.perfil-horario li {
  font-size: .9rem;
}

/* GALERIA */
.perfil-galeria {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}

.perfil-galeria img {
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
}

/* REVIEWS */
.reviews-scroll {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}

.review {
  background: #fff;
  padding: 1rem;
  border-radius: 14px;
  margin-bottom: 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* SIDEBAR */
.perfil-sidebar {
  position: sticky;
  top: 90px;
}

.contact-card {
  background: #fff;
  padding: 1.2rem;
  border-radius: 18px;
  margin-bottom: 1rem;
  box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

.contact-card div {
  font-size: .85rem;
  margin-bottom: .4rem;
}

.contact-actions {
  margin-top: .7rem;
}

.perfil-sidebar #map {
  height: 380px;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.logo {
    max-width: 7rem;
    height: auto;
}

/* GRID MODULAR QUIÉNES SOMOS */
.about-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    position: relative;
}

.about-img-item img {
    width: auto;
    max-height:  200px; /* Altura base */
    object-fit: cover;
    transition: transform 0.3s ease;
}

.about-img-item:hover img {
    transform: scale(1.02);
}

/* Ajustes de posición para el efecto asimétrico */
.about-img-item.item-1 {
    grid-column: 1 / 2;
    margin-top: 0px;
    padding-bottom: 20px;
}

.about-img-item.item-2 {
    grid-column: 2 / 3;
}

.about-img-item.item-3 {
    grid-column: 1 / 2;
    margin-top: 10px; /* Sube la imagen para traslapar ligeramente */
}

.about-img-item.item-4 {
    grid-column: 2 / 3;
    margin-top: 10px;
}

/* --- ESTILOS LÍNEA DE TIEMPO (NUESTRA HISTORIA) --- */
.timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 0;
}

/* Línea vertical central */
.timeline-container::before {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--yellow); /* Naranja de marca */
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    margin-bottom: 20px;
}

/* Posicionamiento alternado */
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; text-align: left; }

/* El punto conector */
.timeline-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--yellow);
    border: 4px solid #fff;
    border-radius: 50%;
    top: 40px;
    z-index: 10;
}

.timeline-item:nth-child(odd) .timeline-dot { right: -10px; }
.timeline-item:nth-child(even) .timeline-dot { left: -10px; }

/* Tarjetas de contenido */
.timeline-content {
    transition: transform 0.3s ease;
}

.timeline-content:hover {
    transform: scale(1.02);
}

/* --- ESTILOS ADN Y VISIÓN --- */
.adn-card {
    transition: all 0.3s ease;
    border-radius: 16px !important;
}

.adn-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
}

.adn-icon {
    width: 60px;
    height: 60px;
    background-color: var(--yellow); /* Color de acento BID */
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 24px;
}

/* --- ESTILOS EXPERIENCIA DEL DISTRITO (GLASSMORPHISM) --- */
.experience-glass-card {
    background: rgba(255, 255, 255, 0.1); /* Blanco translúcido */
    backdrop-filter: blur(10px); /* Efecto desenfoque de fondo */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.experience-glass-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
}

/* --- ESTILOS MIRANDO HACIA ADELANTE --- */
.future-icon-circle {
    min-width: 50px;
    height: 50px;
    background-color: var(--yellow); /* Color de acento BID */
    color: var(--dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-top: 5px; /* Alineación con el primer renglón del texto */
    flex-shrink: 0;
}

/* Ajuste del Hero para que el contenido siempre sea visible */
#experiencia .perfil-hero-content {
    position: relative;
    z-index: 2;
    bottom: 0 !important; /* Resetea el posicionamiento de la clase original perfil-hero-content */
}

/* --- MEJORAS PÁGINA ACCIONES --- */

/* Hero Altura Especial */
.hero-small {
    height: 60vh !important;
    min-height: 500px;
}

/* Badge Flotante en Tarjetas */
.action-module-card .category-card-badge {
    background: var(--yellow);
    color: var(--dark);
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 8px;
}

/* Glassmorphism para descripción en Hover */
.action-module-card:hover .action-content {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    transition: all 0.4s ease;
}

/* Iconografía de Futuro */
.future-icon-circle {
    width: 45px;
    height: 45px;
    background-color: var(--yellow);
    color: var(--dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Efecto de degradado en la página de Nosotros/Acciones */
.gradient-page {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(246, 163, 31, 0.05) 100%);
}

/* Ajuste de tipografía para lectura fluida */
.lead {
    line-height: 1.8;
}

/* Cards de Acciones pequeñas */
.action-small {
    min-height: 220px !important;
}

/* Estilo para el Badge de Etapa Inicial */
.badge.bg-primary {
    background-color: var(--blue-dark) !important;
    font-weight: 600;
    letter-spacing: 1px;
}

/* --- MEJORA DE LA TARJETA DE VISIÓN --- */
.vision-card {
    background: var(--blue-dark); /* Azul marino profundo del BID */
    border-radius: 28px; /* Bordes redondeados pronunciados según diseño */
    padding: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.vision-card:hover {
    transform: translateY(-5px);
}

.vision-title {
    color: rgba(255, 255, 255, 0.5); /* Título sutil en color blanco tenue */
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.8rem;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.vision-text {
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 35px;
    font-weight: 400;
}

/* Resaltado de conceptos clave */
.vision-text strong {
    font-weight: 700;
    color: #ffffff;
}

/* Botón translúcido de la captura */
.btn-vision {
    display: inline-block;
    width: 100%;
    padding: 16px 30px;
    background: rgba(255, 255, 255, 0.08); /* Fondo semi-transparente */
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-vision:hover {
    background: var(--yellow);
    color: var(--dark);
    border-color: var(--yellow);
}

/* --- ESTILOS PÁGINA NEGOCIOS --- */

/* Contenedor de iconos para beneficios */
.biz-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(246, 163, 31, 0.1); /* Naranja muy suave */
    color: var(--yellow);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Tarjetas de beneficios */
.biz-card {
    transition: all 0.3s ease;
    border-radius: 20px !important;
}

.biz-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Ajuste del botón en Negocios */
.btn-yellow {
    background-color: var(--yellow);
    color: var(--dark);
    font-weight: 700;
    border-radius: 50px;
    border: none;
    transition: all 0.3s ease;
}

.btn-yellow:hover {
    background-color: var(--blue-dark);
    color: white;
    transform: scale(1.05);
}

/* Tipografía Lead para B2B */
.lead {
    font-weight: 400;
    line-height: 1.7;
}

/* Estilo para listas de beneficios */
.text-primary {
    color: var(--blue-dark) !important;
}

/* --- ESTILOS PÁGINA NOTICIAS --- */

.news-card {
    transition: all 0.3s ease;
    border-radius: 16px !important;
    overflow: hidden;
}

.news-card img {
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

.news-card:hover img {
    transform: scale(1.05);
}

.news-card .card-body {
    background: #fff;
}

.news-card h4 {
    font-size: 1.25rem;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.news-card .text-primary {
    color: var(--blue-dark) !important;
    letter-spacing: 1px;
    font-size: 0.75rem;
}



/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    #experiencia {
        background-attachment: scroll; /* Desactiva fixed en móviles para mejor rendimiento */
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .timeline-container::before { left: 31px; }
    .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; text-align: left !important; }
    .timeline-item:nth-child(even) { left: 0; }
    .timeline-dot { left: 21px !important; }
}

/* Responsive para tabletas y móviles */
@media (max-width: 768px) {
    .about-image-grid {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
    }
    .about-img-item {
        margin-top: 0 !important;
    }
}