/* =========================
   STRIKEZONE MMA
========================= */

:root{
    
   
    --bg-primary: #080B11;
    --bg-secondary: #252A31; 

   /*  --bg-primary: #080B11;
    --bg-secondary: #20242B; */
  
    

    --gold: #C9A227;
    --gold-light: #E0C15A;

    --white: #FFFFFF;
    --gray: #B8B8B8;
}

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

html{
    scroll-behavior: smooth;
}

body{
    background: var(--bg-primary);
    color: var(--white);

    font-family: Arial, Helvetica, sans-serif;

    overflow-x: hidden;
}

section{
    overflow: hidden;
}

/* =========================
   NAVBAR
========================= */

.navbar{
    background: rgba(8,11,17,.92) !important;

    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(201,162,39,.12);
}

.navbar-brand{
    font-weight: 800;
    letter-spacing: .5px;
}

.navbar-brand img{
    height: 55px;
}

.nav-link{
    color: white !important;
    transition: .3s;
}

.nav-link:hover{
    color: var(--gold) !important;
}

/* =========================
   HERO
========================= */

.hero{
    min-height: 70vh;

    background:
        linear-gradient(
            rgba(8,11,17,.55),
            rgba(8,11,17,.75)
        ),
        url('../img/hero.png');

    background-size: cover;
    background-position: center 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero .container{
    transform: translateY(-70px);
}

.hero-logo{
    width: 600px;
    max-width: 95%;
    padding-top: 130px;

    filter: drop-shadow(
        0 0 20px rgba(255,255,255,.08)
    );
}

.hero-line{
    width: 440px;
    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );

    margin: 30px auto;
}

.hero-disciplines {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.hero-description {
    color: rgba(255,255,255,0.85);
    font-size: 1.4rem;
    max-width: 900px;
    margin: 0 auto 1.5rem auto;
}

.lead{
    color: var(--gray);

    font-size: 1.25rem;
    font-weight: 500;

    letter-spacing: .5px;
}

/* =========================
   BOTON PRINCIPAL
========================= */

.btn-strike{
    background: linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

    color: #111;

    font-weight: 800;

    border: none;
    border-radius: 999px;

    padding: 18px 42px;

    font-size: 1.1rem;
    letter-spacing: .5px;

    box-shadow:
        0 0 25px rgba(201,162,39,.25);

    transition: .3s;
}

.btn-strike:hover{
    transform: translateY(-3px);

    box-shadow:
        0 0 35px rgba(201,162,39,.35);
}

/* =========================
   SECCIONES
========================= */

.section-dark{
    background: var(--bg-secondary);

    padding: 90px 0;
}

.section-black{
    background: var(--bg-primary);

    padding: 90px 0;
}

.section-title{
    text-align: center;

    font-size: 2rem;

    font-weight: 900;

    letter-spacing: 2px;

    margin-bottom: 60px;
}

.section-title::after{
    content: "";

    display: block;

    width: 80px;
    height: 3px;

    background: var(--gold);

    margin: 15px auto 0;
}

/* =========================
   TARJETAS
========================= */


.strike-card{
   /* background:#2F3948; */
    background: #EAEAEA;

    border:1px solid rgba(255,255,255,.08);

    color:white;

    border-radius:20px;

    cursor:pointer;

}



.plan-highlight{
    font-weight:700 !important;
    color:#4B5563 !important;
}

.strike-card:hover{
    transform: translateY(-6px);

    border-color: var(--gold);

    box-shadow:
        0 15px 30px rgba(0,0,0,.35);
}

.strike-card .card-body{
    padding: 35px;
  
}

.strike-card h4{
    font-weight: 800;
    margin-bottom: 15px;
    color:#1A1A1A;
}

.strike-card p{
    color:#4B5563;
}


.featured{
    border: 2px solid var(--gold);
}

/* =========================
   PRECIOS
========================= */

.price{
    color: var(--gold);

    font-size: 2.2rem;

    font-weight: 900;

    margin: 15px 0;
}

/* =========================
   FOOTER
========================= */

footer{
    background: #05070A;

    padding: 30px 0;

    border-top: 1px solid rgba(201,162,39,.12);

    color: var(--gray);

    text-align: center;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .hero .container{
        transform: translateY(-40px);
    }

    .hero-logo{
        width: 420px;
    }

    .lead{
        font-size: 1.05rem;
    }

    .btn-strike{
        padding: 16px 36px;
        font-size: 1rem;
    }

}
    
.producto-img{

    width:100%;

    height:350px;

    object-fit:contain;

    background:white;

    padding:20px;

    cursor:pointer;

    display:block;
    margin:0 auto;

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

}


.producto-img:hover{

    transform:scale(1);

    filter:brightness(1.05);

}


.modal-content{

    background:#FFFFFF;

    color:#111;

    border:none;

    border-radius:20px;

    overflow:hidden;

}

.modal-header{

    border-bottom:1px solid #E5E7EB;

}

.modal-title{

    color:var(--gold);

    font-weight:800;

    letter-spacing:.5px;

}

.modal-subtitle{
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 12px;
}

.contact-info{
    font-size: 1.3rem;
    line-height: 2.4;
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
}

.contact-info div{
    margin-bottom: 18px;
}

iframe{
    box-shadow:
        0 10px 25px rgba(0,0,0,.30);
}

/* =========================
   CONTACTO
========================= */

#contacto a{

    color:var(--gold);

    text-decoration:none;

}

#contacto a:hover{

    color:var(--gold-light);

}

iframe{

    box-shadow:
        0 10px 25px rgba(0,0,0,.30);

}

.horarios-img{
    width: 100%;
    max-width: 750px;

    display: block;
    margin: 0 auto;

    border-radius: 20px;

    cursor: pointer;

    transition: .3s;

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

}

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

.old-price{

    color:var(--gold);

    text-decoration:line-through;

    font-size:1.5rem;

    font-weight:600;

    margin-bottom:5px;

}

.price{

    color:var(--gold);

    font-size:2.2rem;

    font-weight:900;

}

.sale-badge{

    position:absolute;

    top:15px;
    right:15px;

    background:#C9A227;

    color:#111;

    font-weight:800;

    padding:8px 14px;

    border-radius:999px;

    font-size:.8rem;

}

.leer-mas{
    color: var(--gold);
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    margin-top: 10px;
    transition: .3s;
}

.leer-mas:hover{
    color: var(--gold-light);
    transform: translateX(4px);
}

.custom-modal-header{
    border-bottom: 2px solid #c89b1f;
    padding: 1.25rem 1.5rem;
}

.custom-modal-header .modal-title{
    color: #c89b1f;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}