/*==================================================
URBAN BEAST GYM
CLASES.CSS
PARTE 1
HERO + INTRO + CLASES
==================================================*/


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

.hero-classes{

    position:relative;

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:
    url("../img/clases.png") center center / cover no-repeat;

}

.hero-classes::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.55),
        rgba(0,0,0,.85)
    );

}

.overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(225,6,0,.25),
    transparent 45%);

}

.hero-classes-content{

    position:relative;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    width:100%;

}

.classes-title img{

    width:min(850px,90vw);

    margin-bottom:45px;

    filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));

}

.hero-classes-buttons{

    display:flex;

    gap:25px;

}

@media(max-width:768px){

.hero-classes{

    height:75vh;

}

.classes-title img{

    width:95%;

}

.hero-classes-buttons{

    flex-direction:column;

    width:90%;

}

.hero-classes-buttons a{

    width:100%;

}

}

/*==================================================
INTRO
==================================================*/

.classes-intro{

    background:#080808;

    text-align:center;

    padding:90px 8%;

}

.classes-intro h2{

    font-family:'Bebas Neue';

    font-size:65px;

    letter-spacing:3px;

    margin-bottom:25px;

}

.classes-intro p{

    max-width:900px;

    margin:auto;

    color:#c5c5c5;

    font-size:18px;

    line-height:1.9;

}


/*==================================================
SECCIÓN
==================================================*/

.classes-section{

    background:#050505;

    padding:100px 8%;

}

.classes-heading{

    display:flex;

    justify-content:center;

    margin-bottom:70px;

}

.classes-heading img{

    width:100%;

    max-width:650px;

    transition:.45s;

}

.classes-heading img:hover{

    transform:scale(1.02);

    filter:drop-shadow(0 0 30px rgba(225,6,0,.40));

}


/*==================================================
CARD
==================================================*/

.class-card{

    display:grid;

    grid-template-columns:60% 40%;

    gap:80px;

    align-items:center;

    margin-bottom:120px;

}

.class-card.reverse{

    direction:rtl;

}

.class-card.reverse>*{

    direction:ltr;

}


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

.class-image{

    overflow:hidden;

    border-radius:30px;

    height:620px;

    display:flex;

    align-items:center;

    justify-content:center;

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

}

.class-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.6s;

}

.class-image:hover img{

    transform:scale(1.08);

}


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

.class-content{

    color:#fff;

}

.class-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(225,6,0,.18);

    color:#ff4747;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

    letter-spacing:1px;

}

.class-content h2{

    font-family:'Bebas Neue';

    font-size:75px;

    letter-spacing:3px;

    margin-bottom:20px;

}

.class-content p{

    color:#c8c8c8;

    line-height:1.9;

    font-size:18px;

    margin-bottom:30px;

}


/*==================================================
LISTA
==================================================*/

.class-content ul{

    list-style:none;

    margin-bottom:35px;

}

.class-content ul li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

    color:#ddd;

    font-size:17px;

}

.class-content ul li i{

    color:var(--red);

    font-size:20px;

}


/*==================================================
BOX PRÓXIMAMENTE
==================================================*/

.upcoming{

    position:relative;

    border:2px solid rgba(225,6,0,.35);

    border-radius:28px;

    padding:45px;

    background:linear-gradient(
        180deg,
        #121212,
        #070707
    );

}

.coming-soon{

    position:absolute;

    top:25px;

    right:-55px;

    width:200px;

    text-align:center;

    padding:10px;

    background:var(--red);

    color:#fff;

    font-size:15px;

    font-weight:700;

    transform:rotate(45deg);

    letter-spacing:1px;

}
/*==================================================
URBAN BEAST GYM
CLASES.CSS
PARTE 2
HORARIOS + CTA + EFECTOS + RESPONSIVE
==================================================*/


/*==================================================
HORARIOS PREMIUM
==================================================*/

.schedule{

    position:relative;

    background:url("../img/tres.png") center center/cover fixed;

    overflow:hidden;

    padding:0 8% 30px;   /* Antes 20px */
}

.schedule::before{

    content:"";

    position:absolute;

    inset:0;

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

}

.schedule .container{

    position:relative;

    z-index:2;

}


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

.schedule-title{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:-40px;
}

.schedule-title img{

    width:100%;
    max-width:650px;

    transform:translateY(-90px);   /* Antes -70px */

    display:block;

    transition:.4s;

}

.schedule-title img:hover{

    transform:translateY(-70px) scale(1.02);

    filter:drop-shadow(0 0 25px rgba(225,6,0,.40));

}


/*=====================================
TABLA
======================================*/

.schedule-table{

    position:relative;

    top:-40px;          /* Súbela */

    max-width:900px;

    margin:0 auto;

    overflow:hidden;

    border-radius:25px;

    background:rgba(10,10,10,.92);

    backdrop-filter:blur(10px);

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

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

    transition:.4s;

}

.schedule-table:hover{

    box-shadow:0 20px 55px rgba(225,6,0,.25);

}

.schedule-table table{

    width:100%;

    border-collapse:collapse;

}


/*=====================================
ENCABEZADO
======================================*/

.schedule-table thead{

    background:linear-gradient(180deg,#ff2b2b,#b30000);

}

.schedule-table th{

    padding:22px 15px;

    text-align:center;

    color:#fff;

    font-family:'Bebas Neue',sans-serif;

    font-size:28px;

    letter-spacing:2px;

}


/*=====================================
CUERPO
======================================*/

.schedule-table td{

    padding:22px 15px;

    text-align:center;

    color:#ddd;

    font-size:18px;

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

}

.schedule-table tbody tr{

    transition:.35s;

}

.schedule-table tbody tr:hover{

    background:rgba(225,6,0,.10);

}

.schedule-table tbody td:first-child{

    font-weight:700;

    color:#fff;

    background:#121212;

}


/*=====================================
CLASES
======================================*/

.spin,
.dance{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(225,6,0,.18);

    border:1px solid rgba(225,6,0,.40);

    color:#fff;

    font-weight:600;

}

.box-coming{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

    background:linear-gradient(180deg,#ff2b2b,#b30000);

    color:#fff;

    font-weight:700;

    letter-spacing:1px;

    box-shadow:0 0 20px rgba(225,6,0,.35);

}

/*=====================================
EFECTOS
======================================*/

.spin:hover,
.dance:hover,
.box-coming:hover{

    transform:translateY(-3px);

    box-shadow:0 0 20px rgba(225,6,0,.40);

}


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

@media(max-width:992px){

    .schedule-table{

        overflow-x:auto;

    }

    .schedule-table table{

        min-width:900px;

    }

}

@media(max-width:768px){

    .schedule{

        padding:70px 5%;

    }

    .schedule-title img{

        max-width:95%;

    }

    .schedule-table th{

        font-size:22px;

        padding:18px 12px;

    }

    .schedule-table td{

        font-size:16px;

        padding:18px 12px;

    }

}

/*==================================================
TABLA
==================================================*/

.schedule-table{

    max-width:900px;

    margin:auto;

    overflow:hidden;

    border-radius:25px;

    background:rgba(10,10,10,.92);

    backdrop-filter:blur(10px);

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

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

}

.schedule-table table{

    width:100%;

    border-collapse:collapse;

}

.schedule-table th{

    background:linear-gradient(180deg,#ff2b2b,#a80000);

    color:#fff;

    font-size:20px;

    padding:22px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.schedule-table td{

    padding:22px;

    color:#ddd;

    text-align:center;

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

    font-size:17px;

}

.schedule-table tbody tr{

    transition:.35s;

}

.schedule-table tbody tr:hover{

    background:rgba(225,6,0,.12);

}


/*==================================================
CTA FINAL
==================================================*/

.classes-final{

    position:relative;

    background:url("../img/fondo.jpg") center center/cover fixed;

    padding:35px 8%;

    overflow:hidden;

}

.classes-final::before{

    content:"";

    position:absolute;

    inset:0;

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

}

.classes-final .container{

    position:relative;

    z-index:2;

}

.classes-final-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}


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

.classes-final-image{

    width:100%;

    max-width:1500px;

    height:260px;

    background:url("../img/unete-clases.png") center center no-repeat;

    background-size:contain;

    margin-bottom:10px;

    transition:.45s;

    filter:drop-shadow(0 0 25px rgba(225,6,0,.35));

}

.classes-final-image:hover{

    transform:scale(1.02);

    filter:drop-shadow(0 0 45px rgba(225,6,0,.45));

}


/*==================================================
BOTONES
==================================================*/

.classes-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin-top:-40px;

    position:relative;

    z-index:10;

}

.classes-buttons .btn-red,

.classes-buttons .btn-transparent{

    min-width:180px;

    height:48px;

    padding:10px 24px;

    font-size:15px;

}


/*==================================================
HOVERS
==================================================*/

.class-card{

    transition:.45s;

}

.class-card:hover{

    transform:translateY(-10px);

}

.class-image img{

    transition:.6s;

}

.class-image:hover img{

    transform:scale(1.08);

}

.schedule-table{

    transition:.4s;

}

.schedule-table:hover{

    box-shadow:

    0 20px 55px rgba(225,6,0,.25);

}


/*==================================================
ANIMACIONES
==================================================*/

.class-tag{

    animation:pulseRed 2.8s infinite;

}

@keyframes pulseRed{

    0%{

        box-shadow:0 0 0 rgba(225,6,0,0);

    }

    50%{

        box-shadow:0 0 18px rgba(225,6,0,.35);

    }

    100%{

        box-shadow:0 0 0 rgba(225,6,0,0);

    }

}


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

@media(max-width:992px){

.class-card{

    grid-template-columns:1fr;

    gap:45px;

}

.class-card.reverse{

    direction:ltr;

}

.class-content{

    text-align:center;

}

.class-content ul{

    display:inline-block;

    text-align:left;

}

.classes-buttons{

    flex-direction:column;

}

}


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

@media(max-width:768px){

.hero-classes{

    text-align:center;

}

.hero-classes-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-classes-buttons a{

    width:230px;

}

.classes-intro h2{

    font-size:42px;

}

.class-content h2{

    font-size:52px;

}

.class-content p{

    font-size:16px;

}

.schedule-table{

    overflow-x:auto;

}

.schedule-table table{

    min-width:600px;

}

.classes-final-image{

    height:180px;

}

.classes-buttons{

    margin-top:5px;

}

}


/*==================================================
CELULARES PEQUEÑOS
==================================================*/

@media(max-width:480px){

.classes-intro h2{

    font-size:34px;

}

.class-content h2{

    font-size:42px;

}

.class-tag{

    font-size:12px;

}

.coming-soon{

    width:170px;

    right:-45px;

    font-size:12px;

}

.classes-final-image{

    height:140px;

}

}
/*=====================================
IMAGEN INFORMACIÓN
======================================*/

.contact-info-image{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:0;

}

.contact-info-image img{

    width:100%;

    max-width:1500px;

    height:auto;

    display:block;

    transition:.45s ease;

    filter:drop-shadow(0 0 30px rgba(225,6,0,.30));

}

.contact-info-image img:hover{

    transform:scale(1.02);

    filter:drop-shadow(0 0 45px rgba(225,6,0,.45));

}
/*=====================================
IMÁGENES MÁS PEQUEÑAS EN CELULAR
======================================*/

@media (max-width:768px){

.class-image{

    width:90%;
    max-width:320px;
    height:auto;

    margin:0 auto 25px;

    border-radius:25px;

}

.class-image img{

    width:100%;
    height:auto;

    object-fit:contain;

}

}