/* =========================================
   HELLO CLASS LANDING
   ========================================= */

:root{
    --hc-primary:#2f0c67;
    --hc-secondary:#581fa2;
    --hc-accent:#ffc107;
    --hc-light:#f8f5ff;
}

/* ===== BANNER ===== */

.banner-section{
    background: linear-gradient(
        135deg,
        #2f0c67 0%,
        #3d1483 45%,
        #581fa2 100%
    );
}

/* ===== COLORES ===== */

.text-hc-primary{
    color: var(--hc-primary) !important;
}

.text-hc-secondary{
    color: var(--hc-secondary) !important;
}

.bg-hc-light{
    background-color: var(--hc-light) !important;
}

/* ===== CARDS ===== */

.custom-card{
    border: none !important;
    border-radius: 20px !important;
    transition: all .3s ease;
}

.custom-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.course-card{
    background: #fff;
    border: 1px solid rgba(88,31,162,.12) !important;
}

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

.btn-hc{
    background: var(--hc-accent);
    color: var(--hc-primary);
    border: none;
    font-weight: 600;
}

.btn-hc:hover{
    background: #ffcf33;
    color: var(--hc-primary);
}

/* ===== BENEFICIOS ===== */

.benefit-icon{
    color: var(--hc-secondary);
}

/* ===== SOBRE MÍ ===== */

.profile-img{
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid #fff;
}

/* ===== AULA VIRTUAL ===== */

.aula-img{
    max-width: 500px;
    width: 100%;
}

.bg-hc-light{
    background-color: #f7f2ff !important;
} 

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

.cta-section{
    background: linear-gradient(
        135deg,
        var(--hc-primary),
        var(--hc-secondary)
    );
    color: #fff;
}

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

.menu-cabecera a{
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.menu-cabecera a:hover{
    text-decoration: none !important;
}

.menu-cabecera a:focus,
.menu-cabecera a:active{
    outline: none !important;
    box-shadow: none !important;
}

/* ===== FIXES WORDPRESS ===== */

.hero-img:hover,
.hero-img:focus,
.profile-img:hover,
.profile-img:focus{
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.header-img{
    border: solid 10px #fff !important;
    border-radius: 50% !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.header-img:hover,
.header-img:focus,
a:hover > .header-img,
a:focus > .header-img{
    border: solid 10px #fff !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.text-hc-secondary{
    color: #581fa2 !important;
}

.hc-cta{
    background: linear-gradient(
        135deg,
        #2f0c67 0%,
        #3d1483 45%,
        #581fa2 100%
    );
} 

.hc-cta{
    background: linear-gradient(
        120deg,
        #2f0c67 0%,
        #581fa2 50%,
        #7a36d9 100%
    );
}

.btn-warning:focus,
.btn-warning:active,
.btn-warning:active:focus,
.btn-warning:hover,
.btn-warning:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
/* ===== RESPONSIVE ===== */


@media (min-width: 768px){
    .border-end-md{
        border-right: 1px solid rgba(88, 31, 162, .15) !important;
    }
}

/* ===== FIXES PARA TEMAS DE WORDPRESS ===== */
.landingbanner-image:hover,
.landingbanner-image:focus,
.profile-img:hover,
.profile-img:focus {
    outline: none !important;
    text-decoration: none !important;
}

.landingbanner-image:hover,
.landingbanner-image:focus {
    border: none !important;
    box-shadow: none !important;
}

/* ===== FIXES PARA TEMAS DE WORDPRESS ===== */
.landingbanner-image:hover,
.landingbanner-image:focus,
.profile-img:hover,
.profile-img:focus {
    outline: none !important;
    text-decoration: none !important;
}

.landingbanner-image:hover,
.landingbanner-image:focus {
    border: none !important;
    box-shadow: none !important;
}

/* ===== FIXES PARA IMAGEN DEL HEADER ===== */

.header-img,
.header-img:hover,
.header-img:focus,
.header-img img,
.header-img img:hover,
.header-img img:focus,
a:hover > .header-img,
a:focus > .header-img,
.header-img *:hover,
.header-img *:focus,
a:has(.header-img):hover,
a:has(.header-img):focus {
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.header-img a:hover,
.header-img a:focus {
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}