.casino-map-container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 8px;

    background: linear-gradient(
        145deg,
        #1a1a1a,
        #0a0a0a
    );

    border: 2px solid #5a0b0b;
    border-radius: 20px;

    box-shadow:
        0 0 20px rgba(179, 0, 0, 0.5),
        inset 0 0 15px rgba(255, 255, 255, 0.05);

    overflow: hidden;
}
.casino-map-container {
    width: 85%;
    max-width: 1000px;
    margin: 60px auto;

    padding: 12px;

    background: linear-gradient(145deg, #111, #050505);

    border: 2px solid #6c1111;
    border-radius: 25px;

    box-shadow:
        0 0 20px rgba(255,0,0,.3),
        0 0 40px rgba(255,0,0,.15);

    overflow: hidden;
}

#casino-map {
    height: 500px;
    width: 100%;
    border-radius: 18px;
}

/* Personalización del popup */
.leaflet-popup-content-wrapper {
    background: #111;
    color: white;
    border: 1px solid #780c0c;
}

.leaflet-popup-tip {
    background: #111;
}

/* =========================================================
   RULETA VIP — variables de marca
   ========================================================= */
:root{
  --rojo: #900;
  --negro: #0a0a0a;
  --dorado-claro: #e6c58f;
  --dorado: #caa472;
  --dorado-oscuro: #8b5a2b;
  --marron: #5a3a1a;
  --texto-claro: #f3e6c9;
}
 
/* =======================================================
   TARJETAS
======================================================= */

.sede-card{
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 18px;
    background: linear-gradient(180deg,#181818,#0d0d0d);
    border: 1px solid rgba(255,255,255,.08);
    transition: .35s ease;
}

.sede-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,.08) 50%,
        transparent 70%
    );
    transform:translateX(-150%);
    transition:.8s;
}

.sede-card:hover::before{
    transform:translateX(150%);
}

.sede-card:hover{

    transform:translateY(-8px) scale(1.03);

    border-color:#900;

    box-shadow:
    0 0 20px rgba(153,0,0,.35),
    0 15px 45px rgba(0,0,0,.55);

}

.sede-card h3{

    transition:.3s;

}

.sede-card:hover h3{

    color:#d4af37;

}

/* =======================================================
   MODAL
======================================================= */

.modal-sede{
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,.82);
    backdrop-filter: blur(12px);

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 40px 20px;

    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    transition: .35s;

    z-index: 999999;
}

.modal-sede.active{
    opacity: 1;
    visibility: visible;
}

.modal-sede.active{

    opacity:1;

    visibility:visible;

}

/* =======================================================
   VENTANA
======================================================= */

.modal-content{

    width:min(900px,92vw);

    background:linear-gradient(
        180deg,
        #1b1b1b,
        #090909
    );

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(212,175,55,.25);

    box-shadow:
    0 25px 70px rgba(0,0,0,.75);

    transform:
        translateY(40px)
        scale(.9);

    transition:.35s;

}

.modal-sede.active .modal-content{

    transform:
        translateY(0)
        scale(1);

}

/* =======================================================
   IMAGEN
======================================================= */

.modal-img{

    position:relative;

    width:100%;

    height:420px;

    overflow:hidden;

}

.modal-img img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.modal-img::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent 45%,
        rgba(0,0,0,.95)
    );

}

/* =======================================================
   INFORMACIÓN
======================================================= */

.modal-info{

    padding:35px;

    text-align:center;

}

.modal-info h2{

    color:#d4af37;

    font-size:42px;

    margin-bottom:18px;

    font-family:"Big Shoulders Display",sans-serif;

    letter-spacing:2px;

}

.modal-info p{

    color:#ddd;

    line-height:1.8;

    font-size:15px;

    margin-bottom:30px;

}

/* =======================================================
   BOTÓN MAPS
======================================================= */

.btn-maps{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 34px;

    border-radius:999px;

    background:#900;

    color:white;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-maps:hover{

    background:#b30000;

    transform:translateY(-3px);

    box-shadow:
    0 0 20px rgba(153,0,0,.45);

}

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

.modal-close{

    position:absolute;

    top:18px;

    right:18px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

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

    color:white;

    font-size:30px;

    cursor:pointer;

    transition:.3s;

    z-index:20;

}

.modal-close:hover{

    background:#900;

    transform:rotate(90deg);

}

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

@media(max-width:768px){

.modal-content{
    width: 560px;
    max-width: 90vw;
    max-height: 85vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #111;

    border-radius: 18px;

    border: 1px solid rgba(212,175,55,.2);

    box-shadow: 0 25px 60px rgba(0,0,0,.7);
}

.modal-img{
    height: 220px;
    flex-shrink: 0;
}

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


.modal-info{
    padding:22px;
    overflow-y:auto;
}

.modal-info h2{

    font-size:34px;
    margin-bottom:12px;
}

.modal-info p{

    font-size:14px;
    line-height:1.6;
    margin-bottom:22px;
}

.btn-maps{

    padding:12px 26px;
    font-size:14px;
}

.btn-maps{

    width:100%;

}

}

.sede-card {
    display: flex;
    flex-direction: column;
}

.sede-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 18px 18px 0 0;
}

.sede-card h3,
.sede-card p {
    padding: 0 16px;
}

.sede-card p:last-child {
    padding-bottom: 16px;
}