/*=========================================
LATIDO MAPAS ACTIVOS
=========================================*/

@keyframes bvHeartbeat {

    0%{
        transform:scale(1);
        filter:drop-shadow(0 0 0 rgba(0,42,108,0));
    }

    20%{
        transform:scale(1.04);
    }

    40%{
        transform:scale(1.09);
        filter:drop-shadow(0 0 18px rgba(0,42,108,.45));
    }

    60%{
        transform:scale(1.04);
    }

    100%{
        transform:scale(1);
        filter:drop-shadow(0 0 0 rgba(0,42,108,0));
    }

}

/* Solo regiones clickeables */

.bv-pulse{

    animation:bvHeartbeat 2.3s ease-in-out infinite;

    transform-origin:center;

    transform-box:fill-box;

    cursor:pointer;

}

/* Al pasar el mouse se detiene el latido
   y se usa el hover normal */

.bv-pulse:hover{

    animation:none;

}
/*==================================================
LEYENDA MAPA
==================================================*/

.bv-map-legend{

    position:absolute;

    top:30px;
    right:30px;

    z-index:50;

    min-width:250px;

    padding:18px 22px;

    background:rgba(255,255,255,.94);

    border:1px solid rgba(0,42,108,.10);

    border-radius:16px;

    box-shadow:
        0 12px 35px rgba(0,42,108,.15);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

}


/*==================================================
TÍTULO LEYENDA
==================================================*/

.bv-map-legend-title{

    margin-bottom:12px;

    color:#002A6C;

    font-size:15px;

    font-weight:700;

}


/*==================================================
ITEM LEYENDA
==================================================*/

.bv-map-legend-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:#4f5f6b;

    font-size:13px;

    line-height:1.4;

}


/*==================================================
COLOR LEYENDA
==================================================*/

.bv-map-legend-color{

    display:block;

    width:20px;
    height:20px;

    flex:0 0 20px;

    background:#002A6C;

    border-radius:5px;

    box-shadow:
        0 4px 10px rgba(0,42,108,.25);

}


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

@media(max-width:768px){

    .bv-map-legend{

        top:15px;
        right:15px;

        min-width:auto;
        max-width:210px;

        padding:12px 15px;

        border-radius:12px;

    }


    .bv-map-legend-title{

        margin-bottom:8px;

        font-size:13px;

    }


    .bv-map-legend-item{

        gap:8px;

        font-size:11px;

    }


    .bv-map-legend-color{

        width:16px;
        height:16px;

        flex-basis:16px;

    }

}


@media(max-width:576px){

    .bv-map-legend{

        top:10px;
        right:10px;

        max-width:175px;

        padding:10px 12px;

    }


    .bv-map-legend-title{

        font-size:12px;

    }


    .bv-map-legend-item{

        font-size:10px;

    }

}
/*==================================================
MAPAS DE PAÍSES
==================================================*/

#bv-map.country-map{

    display:block;

    width:100%;

    height:auto;

    margin:0 auto;

    transform-origin:center center;

}


/*==================================================
MÉXICO
AJUSTE ESPECÍFICO POR GEOMETRÍA DEL SVG
==================================================*/

#bv-map.country-map.mexico{

    transform:translateX(280px);

}


/SEDES/
/* =========================
   RESET
========================= */
.sede-card *,
.sede-card *::before,
.sede-card *::after {
  box-sizing: border-box;
}

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

/* =========================
   CONTENEDOR
========================= */
.sede-card {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: stretch; /* 🔥 CLAVE */

  width: 100%;
  max-width: 1100px;
  margin: 30px auto;

  border-radius: 20px;
  overflow: hidden;
  background: #0d3472;

  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
/* HOVER */
.sede-card:hover {
  transform: scale(1.03); /* 🔥 efecto de crecimiento */
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}

/* =========================
   CONTENIDO
========================= */
.sede-content {
  padding: 40px;
  color: white;

  display: flex; /* 🔥 PRO */
  flex-direction: column;
  justify-content: center; /* centra vertical */
}

/* TITULO */
.sede-content h2 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #ffffff;
}

/* TEXTO (CORREGIDO) */
.sede-content p {
  font-size: 16px;
  line-height: 1.6;

  max-height: 6.4em;
  overflow: hidden;
}

/* LISTA */
.sede-content ul {
  padding-left: 18px;
  margin-bottom: 20px;
}

.sede-content ul li {
  margin-bottom: 6px;
  font-size: 14px;
  color: #c6d9d9;
}

/* =========================
   BADGES
========================= */
.badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

.badge.red { background: #FF7A7A; color: #002A6C; }
.badge.blue { background: #91BAFF; color: #002A6C; }
.badge.green { background: #DEFFD5; color: #002A6C; }
.badge.yellow { background: #FFF59F; color: #002A6C; }

/* =========================
   BOTONES
========================= */
.sede-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 22px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn.primary {
  background: #ffffff;
  color: #0d3472;
}

.btn.secondary {
  border: 2px solid white;
  color: white;
}

.btn:hover {
  transform: scale(1.05);
}

/* =========================
   IMAGEN (FIX REAL)
========================= */
/* =========================
   IMAGEN / VIDEO
========================= */
.sede-img{
    position:relative;
    overflow:hidden;
    height:320px; /* altura deseada */
}

.sede-img video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .sede-card {
    grid-template-columns: 1fr;
  }

  .sede-img img {
    height: 220px;
  }

  .sede-content {
    padding: 25px;
  }
}

/*==================================================
BIVETT MAP
VERSIÓN 2.0
==================================================*/

/*==================================================
VARIABLES
==================================================*/

:root{

    --bv-primary:#002A6C;
    --bv-primary-light:#00296bbf;
    --bv-active:#C0E0E5;

    --bv-white:#FFFFFF;

    --bv-panel-width:1000px;

    --bv-radius:28px;

    --bv-speed:.35s;

    --bv-shadow:
        0 25px 60px rgba(0,42,108,.18);

}

/*==================================================
RESET
==================================================*/

.bv-map-viewer *,
.bv-map-viewer *::before,
.bv-map-viewer *::after{

    box-sizing:border-box;

}

/*==================================================
CONTENEDOR GENERAL
==================================================*/

.bv-map-viewer{

    position:relative;

    width:100%;

    max-width:1700px;

    margin:auto;

    overflow:visible;

}

/*==================================================
CONTENEDOR MAPA
==================================================*/

.bv-map-stage{

    position:relative;

    width:100%;

}

/*==================================================
SVG
==================================================*/

#bv-map{

    display:block;

    width:100%;

    height:auto;

    border:none;

}



/*==================================================
BOTÓN VOLVER
==================================================*/

#bv-back{

    position:absolute;

    top:30px;
    left:30px;

    padding:14px 26px;

    border:none;
    border-radius:40px;

    background:var(--bv-primary);

    color:#FFF;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    transform:translateY(-10px);

    pointer-events:none;

    z-index:500;

    box-shadow:
        0 12px 30px rgba(0,42,108,.25);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


#bv-back.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;

}


#bv-back:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 36px rgba(0,42,108,.35);

}


#bv-back:active{

    transform:scale(.96);

}

/*==================================================
PANEL LATERAL
==================================================*/

.bv-region-panel{

    position:absolute;

    right:40px;

    top:50%;

    transform:translateY(-50%);

    width:var(--bv-panel-width);

    max-width:92%;

    background:#FFF;

    border-radius:var(--bv-radius);

    overflow:hidden;

    box-shadow:var(--bv-shadow);

    opacity:0;

    visibility:hidden;

    transition:all var(--bv-speed);

    z-index:100;

}

.bv-region-panel.show{

    opacity:1;

    visibility:visible;

}

/*==================================================
BOTÓN CERRAR
==================================================*/

.bv-close-panel{

    position:absolute;

    top:18px;

    right:18px;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:var(--bv-primary);

    color:#FFF;

    cursor:pointer;

    font-size:20px;

}

/*==================================================
CABECERA
==================================================*/

.bv-region-header{

    padding:

        45px

        45px

        20px;

}

.bv-region-type{

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background:var(--bv-active);

    color:var(--bv-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

#bv-region-title{

    margin-top:18px;

    color:var(--bv-primary);

    font-size:34px;

    line-height:1.2;

}

#bv-region-description{

    margin-top:12px;

    color:#666;

    line-height:1.7;

}

/*==================================================
CONTENIDO
==================================================*/

.bv-region-content{

    padding:0 30px 30px;

    max-height:70vh;

    overflow-y:auto;

}

/*==================================================
SCROLL
==================================================*/

.bv-region-content::-webkit-scrollbar{

    width:7px;

}

.bv-region-content::-webkit-scrollbar-thumb{

    background:#d8d8d8;

    border-radius:10px;

}

/*==================================================
BANNERS
==================================================*/

.bv-banner-region{

    display:none;

}

.bv-banner-region.active{

    display:block;

}
/*==================================================
SVG
==================================================*/

#bv-map path,
#bv-map polygon,
#bv-map g{

    transition:
        fill .35s ease,
        transform .30s ease,
        filter .30s ease;

    transform-origin:center;

    transform-box:fill-box;

}

/*==================================================
HOVER GENERAL
==================================================*/

#bv-map path:hover,
#bv-map polygon:hover{

    cursor:pointer;

    transform:scale(1.05);

    filter:drop-shadow(0 8px 18px rgba(0,42,108,.25));

}

/*==================================================
COLORES DEL MAPA
(El JS añadirá estas clases)
==================================================*/

.bv-active{

    fill:#C0E0E5 !important;

}

.bv-secondary{

    fill:#00296bbf !important;

}

.bv-default{

    fill:#002A6C !important;

}

/*==================================================
ANIMACIÓN PANEL
==================================================*/

@keyframes bvPanelOpen{

    from{

        opacity:0;

        transform:
            translateY(-50%)
            translateX(40px);

    }

    to{

        opacity:1;

        transform:
            translateY(-50%)
            translateX(0);

    }

}

.bv-region-panel.show{

    animation:bvPanelOpen .35s ease;

}

/*==================================================
ANIMACIÓN BANNER
==================================================*/

@keyframes bvBanner{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.bv-banner-region.active{

    animation:bvBanner .35s ease;

}

/*==================================================
PAÍSES / REGIONES ACTIVAS
==================================================*/

.bv-country-selected{

    filter:

        drop-shadow(0 0 14px rgba(192,224,229,.65));

}

.bv-country-secondary{

    filter:

        drop-shadow(0 0 12px rgba(0,41,107,.35));

}



/*==================================================
ESTADO VACÍO
==================================================*/

.sede-coming,

.bv-country-info{

    padding:35px;

    text-align:center;

    border-radius:22px;

    background:#F7FAFC;

}

.sede-coming h2,

.bv-country-info h2{

    color:#002A6C;

    margin-bottom:12px;

}

.sede-coming p,

.bv-country-info p{

    color:#5b6770;

    line-height:1.7;

}

/*==================================================
INTEGRACIÓN CON LAS TARJETAS
==================================================*/

.bv-banner-region .sede-card{

    margin:22px 0;

}

.bv-banner-region .sede-card:first-child{

    margin-top:0;

}

.bv-banner-region .sede-card:last-child{

    margin-bottom:0;

}

/*==================================================
SCROLL SUAVE
==================================================*/

html{

    scroll-behavior:smooth;

}

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

@media(max-width:1200px){

    .bv-region-panel{

        width:430px;

    }

}

@media(max-width:1024px){


    #bv-map.mexico{

        transform:translateX(120px);

    }


    .bv-region-panel{

        position:relative;

        top:auto;

        right:auto;

        transform:none;

        width:100%;

        max-width:none;

        margin-top:30px;

    }

    .bv-region-panel.show{

        animation:none;

    }

}

@media(max-width:768px){

    #bv-map.mexico{

        transform:none;

        width:140%;

        margin-left:-20%;

    }


    #bv-back{

        left:15px;

        top:15px;

        padding:12px 20px;

    }

    .bv-region-header{

        padding:30px;

    }

    .bv-region-content{

        padding:0 20px 25px;

    }

    #bv-region-title{

        font-size:28px;

    }

    #bv-region-description{

        font-size:15px;

    }

    .bv-marker{

        width:28px;

    }

}

@media(max-width:576px){
    #bv-map.mexico{

        width:170%;

        margin-left:-35%;

        transform:none;

    }


    .bv-region-header{

        padding:22px;

    }

    .bv-region-content{

        padding:0 15px 20px;

    }

    #bv-back{

        font-size:13px;

        padding:10px 16px;

    }

}