/*============================================================================================*/
/* REDESIGN MM CONSULTOR LEGAL WEB v2 - Override sobre template Udema                       */
/* Paleta: Púrpura #662d91, Gradiente #480048→#C04848, Azul #3f9fff, Oscuro #121921         */
/*============================================================================================*/

:root {
    --primary-purple: #662d91;
    --primary-purple-light: #7c3fad;
    --primary-dark: #480048;
    --primary-warm: #C04848;
    --accent-blue: #3f9fff;
    --dark-bg: #121921;
    --text-dark: #1f2937;
    --text-body: #4b5563;
    --text-muted: #9ca3af;
    --text-light: rgba(255, 255, 255, 0.85);
    --border-light: #e5e7eb;
    --border-subtle: #f0edf5;
    --bg-subtle: #f9fafb;
    --bg-warm: #faf8fc;
    --bg-purple-soft: #f4f0f9;
    --white: #ffffff;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 40px -5px rgba(0,0,0,0.12);
    --shadow-card: 0 1px 3px rgba(102,45,145,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 12px 28px rgba(102,45,145,0.12), 0 4px 8px rgba(0,0,0,0.04);
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --transition-fast: all 0.2s cubic-bezier(0.4,0,0.2,1);
    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: all 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* ===== GLOBAL ===== */
body { color: var(--text-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1,h2,h3,h4,h5,h6 { color: var(--text-dark); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
p { line-height: 1.75; color: var(--text-body); font-size: 15px; }
a { transition: var(--transition-fast); }

/*============================================================================================*/
/* 1. HEADER - fondo visible en estado inicial + sticky                                       */
/*============================================================================================*/
header.header {
    padding: 16px 40px;
    transition: var(--transition);
    background: var(--dark-bg) !important;
}
header.header.sticky {
    background: var(--dark-bg) !important;
    padding: 10px 40px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.25);
}
@media (max-width: 991px) {
    header.header {
        padding: 14px 15px 5px 15px;
    }
    header.header.sticky { padding: 10px 15px 5px 15px; }
}

/* Nav links */
@media only screen and (min-width: 992px) {
    .main-menu > ul > li span > a {
        font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
        padding: 0 14px 15px 14px;
        color: #fff !important;
        text-shadow: 0 1px 4px rgba(0,0,0,0.3);
        position: relative;
    }
    .main-menu > ul > li span > a::after {
        content: ''; position: absolute; bottom: 6px; left: 50%;
        width: 0; height: 2px;
        background: var(--primary-warm);
        transition: var(--transition); transform: translateX(-50%);
        border-radius: 2px;
    }
    .main-menu > ul > li span:hover > a { opacity: 1 !important; }
    .main-menu > ul > li span:hover > a::after { width: 50%; }
}

/* Login link */
ul#top_menu li a.login {
    color: #fff !important; font-weight: 600; font-size: 13px;
    letter-spacing: 1px; padding: 8px 16px; border-radius: var(--radius-xs);
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
ul#top_menu li a.login:hover { background: rgba(255,255,255,0.12); opacity: 1 !important; }
ul#top_menu li a.login:before { color: #fff !important; }

/* Botón principal header - TEXTO BLANCO */
ul#top_menu li a.btn_1 {
    background: linear-gradient(135deg, var(--primary-warm) 0%, var(--primary-purple) 100%) !important;
    color: #fff !important;
    padding: 11px 26px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
    border-radius: var(--radius-full) !important; border: none;
    box-shadow: 0 3px 12px rgba(192,72,72,0.35);
    text-shadow: none;
}
ul#top_menu li a.btn_1:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(192,72,72,0.45) !important;
    background: linear-gradient(135deg, #d45555 0%, #7a35a8 100%) !important;
    color: #fff !important; opacity: 1 !important;
}

/*============================================================================================*/
/* 2. SECTION TITLES                                                                          */
/*============================================================================================*/
.main_title_2 { margin-bottom: 55px; }
.main_title_2 span { width: 80px; height: 3px; background-color: var(--border-light); border-radius: 3px; }
.main_title_2 span em { width: 40px; height: 3px; background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm)); border-radius: 3px; }
.main_title_2 h2 { margin: 22px 0 0 0; font-size: 30px; font-weight: 700; color: var(--text-dark); letter-spacing: -0.02em; }
.main_title_2 p { font-size: 16px; font-weight: 400; color: var(--text-muted); margin-top: 10px; line-height: 1.6; }
@media (max-width: 767px) {
    .main_title_2 { margin-bottom: 30px; }
    .main_title_2 h2 { font-size: 24px; }
    .main_title_2 p { font-size: 14px; }
}

/*============================================================================================*/
/* 3. GLOBAL BUTTONS                                                                          */
/*============================================================================================*/
a.btn_1, .btn_1 {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-warm) 100%);
    border: none; padding: 13px 30px; font-weight: 700; font-size: 14px;
    letter-spacing: 0.3px; color: #fff !important;
    border-radius: var(--radius-sm); transition: var(--transition);
    box-shadow: 0 3px 10px rgba(102,45,145,0.25);
}
a.btn_1:hover, .btn_1:hover {
    background: linear-gradient(135deg, #7a35a8 0%, #d45555 100%);
    color: #fff !important; transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,45,145,0.35);
}
a.btn_1.rounded, .btn_1.rounded { border-radius: var(--radius-full) !important; }
a.btn_1.outline, .btn_1.outline { border: 2px solid var(--primary-purple); color: var(--primary-purple) !important; background: transparent; box-shadow: none; }
a.btn_1.outline:hover, .btn_1.outline:hover { background: var(--primary-purple); color: #fff !important; box-shadow: 0 4px 15px rgba(102,45,145,0.3); }

/*============================================================================================*/
/* 4. HERO SECTIONS                                                                           */
/*============================================================================================*/
#hero_in.general {
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--primary-dark) 60%, var(--primary-warm) 100%);
    position: relative; overflow: hidden;
}
#hero_in.general::before {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#hero_in .wrapper { position: relative; z-index: 1; }
#hero_in .wrapper h1 { font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }

/*============================================================================================*/
/* 5. SERVICIOS CAROUSEL - Cards con bordes, título pill visible                              */
/*============================================================================================*/
#carousel .item { padding: 10px; }

#carousel .item a {
    display: block; background: var(--white);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle);
    transition: var(--transition); text-decoration: none;
}
#carousel .item a:hover {
    box-shadow: var(--shadow-card-hover); transform: translateY(-4px);
    border-color: rgba(102,45,145,0.15);
}
#carousel .item a img {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%; object-fit: contain; background: var(--bg-subtle);
    transition: var(--transition-slow); padding: 10px;
}
#carousel .item a:hover img { transform: scale(1.04); }

/* Título del servicio - posición estática, pill visible siempre */
#carousel .item .title {
    position: relative !important; bottom: auto !important; left: auto !important;
    text-align: center; width: 100%; padding: 18px 14px;
    background: var(--white);
}
#carousel .item .title h4 {
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm)) !important;
    display: inline-block;
    border-radius: var(--radius-full) !important;
    color: #fff !important; padding: 10px 24px; margin: 0;
    font-size: 13px !important; font-weight: 700; letter-spacing: 0.3px;
    opacity: 1 !important;
    box-shadow: 0 3px 10px rgba(102,45,145,0.2);
}

/* Items del carousel */
#carousel .owl-item { opacity: 0.55; transform: scale(0.9); transition: var(--transition) !important; }
#carousel .owl-item.active.center { opacity: 1; transform: scale(1); }
#carousel .owl-item.active.center .item .title h4 { opacity: 1 !important; }

/* CAROUSEL ARROWS - grandes y visibles */
.owl-prev, .owl-next {
    background: var(--white) !important;
    width: 46px !important; height: 46px !important;
    border-radius: 50% !important;
    box-shadow: var(--shadow-lg) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: var(--transition) !important;
    top: 50% !important; margin-top: -23px !important;
    border: 2px solid var(--border-light) !important;
    opacity: 1 !important;
}
.owl-prev { margin-left: -8px !important; left: 0 !important; }
.owl-next { right: 0px !important; margin-right: -8px !important; }
.owl-prev:hover, .owl-next:hover {
    background: var(--primary-purple) !important; border-color: var(--primary-purple) !important;
    box-shadow: 0 4px 16px rgba(102,45,145,0.35) !important;
}
.owl-prev i, .owl-next i { transform: none !important; color: var(--primary-purple) !important; font-size: 18px !important; }
.owl-prev:hover i, .owl-next:hover i { color: #fff !important; }

/* CAROUSEL DOTS */
.owl-dots { margin-top: 24px !important; }
.owl-dots .owl-dot span { background: var(--border-light) !important; transition: var(--transition) !important; width: 10px !important; height: 10px !important; }
.owl-dots .owl-dot.active span { background: var(--primary-purple) !important; width: 28px !important; border-radius: 6px !important; }

/*============================================================================================*/
/* 6. BOX GRID / COURSE CARDS                                                                 */
/*============================================================================================*/
.box_grid {
    background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle);
    transition: var(--transition); margin-bottom: 30px;
}
.box_grid:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-5px); border-color: rgba(102,45,145,0.12); }
.box_grid figure { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; margin-bottom: 0; }
.box_grid figure a img { transition: var(--transition-slow); }
.box_grid figure a:hover img { transform: scale(1.06); }
.box_grid .wrapper { padding: 24px 20px; min-height: auto; }
.box_grid .wrapper h3 { font-size: 16px; font-weight: 700; margin: 10px 0; letter-spacing: 0; line-height: 1.45; color: var(--text-dark); }
.box_grid small { color: var(--text-body); font-weight: 500; font-size: 13px; }
.box_grid .rating small { font-size: 12px; color: var(--text-muted); line-height: 1.8; }
.box_grid .rating small strong { color: var(--text-dark); font-weight: 600; }
.box_grid ul { padding: 18px 20px; border-top: 1px solid var(--border-light); margin: 0; }
.box_grid ul li:last-child a {
    background: transparent; border: 2px solid var(--primary-purple);
    color: var(--primary-purple); padding: 9px 26px;
    font-weight: 700; font-size: 13px; line-height: 1;
    border-radius: var(--radius-full); transition: var(--transition);
}
.box_grid ul li:last-child a:hover {
    background: var(--primary-purple); color: #fff;
    box-shadow: 0 4px 14px rgba(102,45,145,0.3); transform: translateY(-1px);
}

/*============================================================================================*/
/* 7. PUBLICACIONES / BLOG CARDS - layout horizontal con imagen contenida                    */
/*============================================================================================*/
.bg_color_1 { background-color: var(--bg-warm) !important; }

a.box_news {
    position: relative; display: flex; align-items: stretch;
    background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle);
    transition: var(--transition); text-decoration: none; color: var(--text-body);
    margin-bottom: 28px; min-height: auto; padding-left: 0;
}
a.box_news:hover {
    box-shadow: var(--shadow-card-hover); transform: translateY(-4px);
    border-color: rgba(102,45,145,0.12); text-decoration: none; color: var(--text-body);
}

/* Imagen de la publicación */
a.box_news figure {
    width: 220px; min-width: 220px; height: auto; min-height: 180px;
    overflow: hidden; position: relative; flex-shrink: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    margin-bottom: 0;
}
a.box_news figure img {
    width: 100% !important; height: 100% !important; object-fit: cover;
    position: absolute !important; top: 0 !important; left: 0 !important;
    transform: scale(1) !important; transition: var(--transition-slow);
    max-width: none;
}
a.box_news:hover figure img { transform: scale(1.06) !important; }

/* Texto contenido de la publicación */
a.box_news ul { margin: 0; padding: 0 0 6px 0; border-top: none; }
a.box_news ul li {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: var(--primary-purple); letter-spacing: 0.5px;
}
a.box_news ul li:after { color: var(--text-muted); }
a.box_news h4 {
    font-size: 17px; font-weight: 700; color: var(--text-dark);
    line-height: 1.45; margin-bottom: 8px; transition: var(--transition-fast);
    padding: 0;
}
a.box_news:hover h4 { color: var(--primary-purple); }
a.box_news p {
    font-size: 14px; color: var(--text-muted); line-height: 1.65; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Responsive publicaciones */
@media (max-width: 767px) {
    a.box_news {
        flex-direction: column; padding-left: 0;
    }
    a.box_news figure {
        width: 100% !important; min-width: 100% !important;
        height: 200px; min-height: 200px;
        position: relative;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    a.box_news figure img {
        position: relative !important; width: 100% !important; height: 100% !important;
    }
    a.box_news ul, a.box_news h4, a.box_news p {
        padding-left: 16px; padding-right: 16px;
    }
    a.box_news ul { padding-top: 16px; }
    a.box_news p { padding-bottom: 20px; }
}

/* Desktop: contenido al lado de la imagen */
@media (min-width: 768px) {
    a.box_news ul, a.box_news h4, a.box_news p {
        padding-left: 24px; padding-right: 24px;
    }
    a.box_news ul { padding-top: 24px; }
    a.box_news p { padding-bottom: 24px; }
}

/*============================================================================================*/
/* 8. DOCUMENT CARDS - con bordes, espacio y jerarquía                                       */
/*============================================================================================*/
.doc-card {
    background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle);
    transition: var(--transition); margin-bottom: 30px; text-align: left;
}
.doc-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-5px); border-color: rgba(102,45,145,0.12); }

.doc-card .doc-icon-area {
    background: linear-gradient(145deg, var(--bg-purple-soft) 0%, #ece6f3 100%);
    padding: 40px 24px; text-align: center; position: relative;
    border-bottom: 1px solid var(--border-subtle);
}
.doc-card .doc-icon-area .doc-icon {
    width: 76px; height: 76px; margin: 0 auto;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
    border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 24px rgba(102,45,145,0.3);
}
.doc-card .doc-icon-area .doc-icon i { font-size: 32px; color: #fff; }

.doc-card .doc-icon-area .doc-price {
    position: absolute; top: 16px; right: 16px;
    background: var(--primary-purple); color: #fff;
    padding: 6px 16px; border-radius: var(--radius-full);
    font-size: 12px; font-weight: 800; letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(102,45,145,0.3);
}

.doc-card .doc-body { padding: 24px 24px 20px; }
.doc-card .doc-body h4 {
    font-size: 15px; font-weight: 700; color: var(--text-dark);
    margin: 0 0 16px 0; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.doc-card .doc-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.doc-card .doc-meta .doc-author-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #fff; font-weight: 700; flex-shrink: 0;
}
.doc-card .doc-meta span { font-size: 13px; color: var(--text-body); line-height: 1.3; }
.doc-card .doc-meta span strong { color: var(--text-dark); font-weight: 600; }

.doc-card .doc-date { font-size: 12px; color: var(--text-muted); margin-bottom: 0; display: flex; align-items: center; gap: 6px; }
.doc-card .doc-date i { font-size: 12px; color: var(--text-muted); }

.doc-card .doc-footer {
    padding: 20px 24px; border-top: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.doc-card .doc-footer .btn-doc {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; padding: 10px 22px; border-radius: var(--radius-full);
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: var(--transition); cursor: pointer; line-height: 1; white-space: nowrap;
}
.doc-card .doc-footer .btn-doc i { font-size: 13px; }

.doc-card .doc-footer .btn-doc-view {
    color: var(--primary-purple); border: 2px solid var(--primary-purple); background: transparent;
}
.doc-card .doc-footer .btn-doc-view:hover {
    background: var(--primary-purple); color: #fff;
    box-shadow: 0 4px 14px rgba(102,45,145,0.3); transform: translateY(-1px);
}
.doc-card .doc-footer .btn-doc-buy {
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
    color: #fff; border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(102,45,145,0.25);
}
.doc-card .doc-footer .btn-doc-buy:hover {
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,45,145,0.4);
}
.doc-card .doc-footer .btn-doc-bought {
    color: #059669; background: #ecfdf5; border: 2px solid #d1fae5;
    cursor: default; font-size: 12px; padding: 8px 16px; font-weight: 700;
}

/*============================================================================================*/
/* 9. ESCRITOS SECTION HEADER                                                                 */
/*============================================================================================*/
.docs-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 36px; padding-bottom: 18px; border-bottom: 2px solid var(--border-light);
}
.docs-section-header h2 { font-size: 26px; font-weight: 700; color: var(--text-dark); margin: 0; }
.docs-section-header .btn-ver-todos {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
    color: #fff; padding: 11px 26px; border-radius: var(--radius-full);
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: var(--transition); box-shadow: 0 3px 10px rgba(102,45,145,0.25);
}
.docs-section-header .btn-ver-todos:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,45,145,0.4); color: #fff; }
.docs-section-header .btn-ver-todos i { font-size: 12px; transition: transform 0.2s ease; }
.docs-section-header .btn-ver-todos:hover i { transform: translateX(3px); }

/*============================================================================================*/
/* 10. SIDEBAR / SEARCH                                                                       */
/*============================================================================================*/
.widget .form-control {
    border: 2px solid var(--border-light); border-radius: var(--radius-sm);
    padding: 12px 16px; font-size: 14px; transition: var(--transition);
    background: var(--white); color: var(--text-dark);
}
.widget .form-control:focus { border-color: var(--primary-purple); box-shadow: 0 0 0 4px rgba(102,45,145,0.08); outline: none; }
.widget .form-control::placeholder { color: var(--text-muted); }

/*============================================================================================*/
/* 11. EMPTY STATE                                                                            */
/*============================================================================================*/
.empty-state {
    text-align: center; padding: 80px 20px;
    background: var(--bg-subtle); border-radius: var(--radius-lg);
    border: 2px dashed var(--border-light);
}
.empty-state i { font-size: 52px; color: var(--border-light); margin-bottom: 20px; display: block; }
.empty-state h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.empty-state p { font-size: 14px; color: var(--text-muted); margin: 0; }

/*============================================================================================*/
/* 12. PAGINATION                                                                             */
/*============================================================================================*/
.pagination { gap: 4px; }
.pagination .page-link, .pagination li a, .pagination li span {
    border: 1px solid var(--border-light) !important; border-radius: var(--radius-sm) !important;
    padding: 8px 14px; font-weight: 600; color: var(--text-body);
    transition: var(--transition-fast); font-size: 14px; background: var(--white);
}
.pagination .page-item.active .page-link, .pagination li.active a, .pagination li.active span {
    background: var(--primary-purple) !important; color: #fff !important;
    border-color: var(--primary-purple) !important; box-shadow: 0 2px 8px rgba(102,45,145,0.25);
}
.pagination .page-link:hover, .pagination li a:hover {
    background: var(--bg-purple-soft) !important; color: var(--primary-purple) !important;
    border-color: rgba(102,45,145,0.2) !important;
}

/*============================================================================================*/
/* 13. GRID ITEM (categorías)                                                                 */
/*============================================================================================*/
a.grid_item {
    display: block; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle);
    transition: var(--transition); margin-bottom: 30px;
}
a.grid_item:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-5px); border-color: rgba(102,45,145,0.12); }
a.grid_item figure { border-radius: var(--radius-lg); overflow: hidden; }
a.grid_item figure .info h3 { font-size: 18px; font-weight: 700; }

/*============================================================================================*/
/* 14. FLOATING BUTTONS                                                                       */
/*============================================================================================*/
.sos-btn {
    position: fixed; bottom: 90px; right: 20px;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; cursor: pointer; z-index: 999;
    box-shadow: 0 4px 20px rgba(220,38,38,0.4);
    transition: var(--transition); animation: sos-pulse 2s ease-in-out infinite;
}
.sos-btn:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(220,38,38,0.5); }
@keyframes sos-pulse {
    0%,100% { box-shadow: 0 4px 20px rgba(220,38,38,0.4); }
    50% { box-shadow: 0 4px 35px rgba(220,38,38,0.65); }
}
.whatsapp-btn {
    position: fixed; bottom: 20px; right: 20px;
    width: 56px; height: 56px; border-radius: 50%; background: #25D366;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 28px; z-index: 999;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4); transition: var(--transition);
}
.whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(37,211,102,0.5); }

/*============================================================================================*/
/* 15. FOOTER                                                                                 */
/*============================================================================================*/
footer { background: var(--dark-bg) !important; color: var(--text-light); padding: 0; }
footer .footer-main { padding: 64px 0 44px; }
footer .footer-brand { margin-bottom: 16px; }
footer .footer-brand img { max-height: 42px; filter: brightness(1.15); }

footer .footer-title {
    font-size: 14px; font-weight: 700; color: #fff;
    margin-bottom: 22px; text-transform: uppercase; letter-spacing: 1.2px;
    position: relative; padding-bottom: 14px;
}
footer .footer-title::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 32px; height: 3px;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
    border-radius: 3px;
}
footer ul.footer-links { list-style: none; padding: 0; margin: 0; }
footer ul.footer-links li { margin-bottom: 10px; }
footer ul.footer-links li a {
    color: rgba(255,255,255,0.55); text-decoration: none; font-size: 14px;
    transition: var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; opacity: 1;
}
footer ul.footer-links li a:hover { color: #fff; opacity: 1; transform: translateX(4px); }
footer ul.footer-links li a i { font-size: 13px; width: 18px; color: var(--primary-warm); margin-right: 0; }

footer .footer-social { display: flex; gap: 10px; margin-top: 20px; }
footer .footer-social a {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6); text-decoration: none;
    transition: var(--transition); font-size: 15px;
}
footer .footer-social a:hover {
    background: var(--primary-purple); border-color: var(--primary-purple);
    color: #fff; transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(102,45,145,0.35);
}
footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 22px 0; text-align: center;
}
footer .footer-bottom p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.35); }

/*============================================================================================*/
/* 16. MODALS                                                                                 */
/*============================================================================================*/
.modal-content { border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-xl); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--border-light); padding: 22px 28px; background: var(--bg-subtle); }
.modal-header .modal-title { font-weight: 700; font-size: 18px; color: var(--text-dark); }
.modal-body { padding: 28px; }
.modal-footer { border-top: 1px solid var(--border-light); padding: 18px 28px; background: var(--bg-subtle); }
.modal-footer .btn-primary {
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
    border: none; border-radius: var(--radius-sm); padding: 11px 28px;
    font-weight: 700; font-size: 14px; color: #fff;
}
.modal-footer .btn-secondary { border-radius: var(--radius-sm); font-weight: 600; padding: 11px 24px; }
.swal2-popup { border-radius: var(--radius-lg) !important; }
.swal2-confirm { background: var(--primary-purple) !important; border-radius: var(--radius-sm) !important; font-weight: 700 !important; }

/*============================================================================================*/
/* 17. RESPONSIVE                                                                             */
/*============================================================================================*/
@media (max-width: 767px) {
    .docs-section-header { flex-direction: column; align-items: flex-start; gap: 14px; }
    .docs-section-header h2 { font-size: 22px; }
    .doc-card .doc-footer { flex-direction: column; gap: 10px; }
    .doc-card .doc-footer .btn-doc { width: 100%; justify-content: center; }
    footer .footer-main { padding: 40px 0 20px; }
}

/*============================================================================================*/
/* 18. SECTION BACKGROUNDS & SPACING - Identidad visual por sección                          */
/*============================================================================================*/

/* Fondo general de la página */
body.nineteen {
    background: #f3f4f6;
}

/* Cada sección tiene su propio fondo y espacio */
.section-block {
    padding: 70px 0;
    position: relative;
}
.section-block:first-child { padding-top: 80px; }

@media (max-width: 991px) {
    .section-block { padding: 45px 0; }
    .section-block:first-child { padding-top: 50px; }
}

/* Fondo blanco */
.section-white {
    background: var(--white);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

/* Fondo gris suave */
.section-light {
    background: var(--bg-subtle);
}

/* Fondo púrpura muy suave */
.section-warm {
    background: var(--bg-warm);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

/* Fondo púrpura soft más marcado */
.section-accent {
    background: linear-gradient(180deg, var(--bg-purple-soft) 0%, #ede8f4 100%);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

/* Fondo oscuro (para sección tipo CTA o especial) */
.section-dark {
    background: var(--dark-bg);
    color: var(--text-light);
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.65); }
.section-dark .main_title_2 span { background-color: rgba(255,255,255,0.15); }
.section-dark .main_title_2 span em { background: linear-gradient(135deg, var(--primary-warm), #e8a0a0); }
.section-dark .main_title_2 p { color: rgba(255,255,255,0.55); }

/* Override bg_color_1 (publicaciones) */
.bg_color_1 {
    background-color: var(--bg-warm) !important;
    padding: 70px 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

@media (max-width: 991px) {
    .bg_color_1 { padding: 45px 0; }
}

/* Spacing overrides */
.margin_120_95 { padding-top: 0; padding-bottom: 0; }
.margin_60_35 { padding-top: 0; padding-bottom: 0; }
.margin_30_95 { padding-top: 0; padding-bottom: 0; }

@media (max-width: 991px) {
    .margin_120_95 { padding-top: 0; padding-bottom: 0; }
    .margin_60_35 { padding-top: 0; padding-bottom: 0; }
}


/*============================================================================================*/
/* REDESIGN UPDATE v3 — MM CONSULTOR LEGAL WEB                                              */
/* ─────────────────────────────────────────────────────────────────────────────────────────  */
/*  PUNTO 1: Hero Slider (navegación custom, tipografía, overlay profesional)                */
/*           CTA de Transición + Botón Flotante mejorado                                     */
/*  PUNTO 2: CTAs condicionales para documentos y cursos (usuario no logueado)               */
/*                                                                                           */
/*  INSTRUCCIÓN: Agregar este contenido al FINAL del archivo redesign.css existente.         */
/*  NO reemplazar — este archivo EXTIENDE el redesign.css actual.                            */
/*============================================================================================*/


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  PUNTO 1A — HERO SLIDER: OVERLAY + TIPOGRAFÍA PROFESIONAL                               ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

/* ── Overlay oscuro sobre la imagen para legibilidad ── */
#full-slider-wrapper {
    position: relative;
}

/* Oscurecer imagen de fondo del slide para contraste */
.ls-slide .ls-bg {
    filter: brightness(0.4) contrast(1.1) !important;
}

/* ── Tipografía del Hero — Jerarquía profesional ── */

/* Título principal del slide (h3) */
#layerslider .slide_typo,
#layerslider h3.ls-l.slide_typo {
    font-family: 'Poppins', sans-serif !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 8px 30px rgba(0, 0, 0, 0.15) !important;
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    transform: translateX(-50%) !important;
}

/* Subtítulo / descripción del slide (p) */
#layerslider .slide_typo_2,
#layerslider p.ls-l.slide_typo_2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: 0.01em !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25) !important;
    text-align: center !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    transform: translateX(-50%) !important;
}

/* Botón CTA del slide */
#layerslider a.ls-l.btn_1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 16px 40px !important;
    border-radius: var(--radius-full) !important;
    background: linear-gradient(135deg, var(--primary-warm) 0%, var(--primary-purple) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow:
        0 4px 15px rgba(192, 72, 72, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.15) !important;
    text-shadow: none !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateX(-50%) !important;
}

#layerslider a.ls-l.btn_1:hover {
    transform: translateX(-50%) translateY(-3px) !important;
    box-shadow:
        0 8px 28px rgba(192, 72, 72, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.15) !important;
    background: linear-gradient(135deg, #d45555 0%, #7a35a8 100%) !important;
}

/* ── Responsive Hero Tipografía ── */
@media (max-width: 991px) {
    #layerslider .slide_typo,
    #layerslider h3.ls-l.slide_typo {
        font-size: 32px !important;
        max-width: 90% !important;
        line-height: 1.2 !important;
    }

    #layerslider .slide_typo_2,
    #layerslider p.ls-l.slide_typo_2 {
        font-size: 15px !important;
        max-width: 85% !important;
    }

    #layerslider a.ls-l.btn_1 {
        font-size: 14px !important;
        padding: 14px 32px !important;
    }
}

@media (max-width: 575px) {
    #layerslider .slide_typo,
    #layerslider h3.ls-l.slide_typo {
        font-size: 24px !important;
        max-width: 95% !important;
        letter-spacing: -0.02em !important;
    }

    #layerslider .slide_typo_2,
    #layerslider p.ls-l.slide_typo_2 {
        font-size: 13px !important;
        max-width: 92% !important;
        line-height: 1.6 !important;
    }

    #layerslider a.ls-l.btn_1 {
        font-size: 13px !important;
        padding: 12px 28px !important;
    }
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  PUNTO 1B — NAVEGACIÓN CUSTOM DEL SLIDER (HTML/CSS/JS)                                  ║
  ╠═══════════════════════════════════════════════════════════════════════════════════════════╣
  ║  Esta navegación NO depende del skin de LayerSlider.                                     ║
  ║  Se crea con HTML propio + este CSS + un pequeño JS.                                     ║
  ║  Ver GUIA-IMPLEMENTACION.md para el HTML y JS que se debe agregar.                       ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

/* ── Contenedor de navegación custom ── */
.slider-nav-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* No bloquear interacción con el slider */
    z-index: 100;
}

/* ── Flechas Prev / Next ── */
.slider-nav-custom .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all; /* Reactivar clics solo en las flechas */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.75;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    z-index: 101;
}

.slider-nav-custom .slider-arrow:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    opacity: 1;
    transform: translateY(-50%) scale(1.06);
}

.slider-nav-custom .slider-arrow:active {
    transform: translateY(-50%) scale(0.96);
    background: rgba(255, 255, 255, 0.3);
}

.slider-nav-custom .slider-arrow-prev {
    left: 24px;
}

.slider-nav-custom .slider-arrow-next {
    right: 24px;
}

/* Íconos de las flechas con Font Awesome */
.slider-nav-custom .slider-arrow i {
    font-size: 18px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

/* ── Dots de navegación ── */
.slider-nav-custom .slider-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: all;
    z-index: 101;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.slider-nav-custom .slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    outline: none;
    display: block;
}

.slider-nav-custom .slider-dot:hover {
    background: rgba(255, 255, 255, 0.55);
    transform: scale(1.15);
}

.slider-nav-custom .slider-dot.active {
    background: #fff;
    border-color: #fff;
    width: 26px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

/* ── Barra de progreso en la base del slider ── */
#full-slider-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        var(--primary-purple) 0%,
        var(--primary-warm) 50%,
        var(--primary-purple) 100%);
    opacity: 0.6;
    z-index: 50;
}

/* ── Ocultar navegación nativa de LayerSlider (por si aparece duplicada) ── */
.ls-nav-prev,
.ls-nav-next,
.ls-bottom-nav-wrapper {
    display: none !important;
}

/* ── Responsive navegación ── */
@media (max-width: 767px) {
    .slider-nav-custom .slider-arrow {
        width: 40px;
        height: 40px;
    }

    .slider-nav-custom .slider-arrow-prev { left: 12px; }
    .slider-nav-custom .slider-arrow-next { right: 12px; }

    .slider-nav-custom .slider-arrow i {
        font-size: 15px;
    }

    .slider-nav-custom .slider-dots {
        bottom: 16px;
        padding: 6px 12px;
        gap: 6px;
    }

    .slider-nav-custom .slider-dot {
        width: 8px;
        height: 8px;
    }

    .slider-nav-custom .slider-dot.active {
        width: 22px;
    }
}

@media (max-width: 575px) {
    .slider-nav-custom .slider-arrow {
        width: 36px;
        height: 36px;
        opacity: 0.6;
    }

    .slider-nav-custom .slider-arrow-prev { left: 8px; }
    .slider-nav-custom .slider-arrow-next { right: 8px; }
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  PUNTO 1C — BLOQUE CTA DE TRANSICIÓN                                                    ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

.cta-transition {
    padding: 72px 0 !important;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(102, 45, 145, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(192, 72, 72, 0.03) 0%, transparent 60%),
        var(--bg-subtle) !important;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

/* Línea decorativa superior */
.cta-transition::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
    border-radius: 0 0 3px 3px;
}

.cta-transition .main_title_2 {
    margin-bottom: 36px !important;
}

.cta-transition .main_title_2 h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.cta-transition .main_title_2 p {
    font-size: 16px !important;
    color: var(--text-body) !important;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7 !important;
}

/* ── Botones del CTA ── */
.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-buttons .btn_1.rounded {
    padding: 15px 36px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    min-width: 200px;
    text-align: center;
}

.cta-buttons .btn_1.outline {
    background: transparent !important;
    border: 2px solid var(--primary-purple) !important;
    color: var(--primary-purple) !important;
    box-shadow: none !important;
}

.cta-buttons .btn_1.outline:hover {
    background: var(--primary-purple) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(102, 45, 145, 0.3) !important;
}

/* ── Responsive CTA ── */
@media (max-width: 575px) {
    .cta-transition {
        padding: 48px 0 !important;
    }

    .cta-transition .main_title_2 h2 {
        font-size: 22px !important;
    }

    .cta-transition .main_title_2 p {
        font-size: 14px !important;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .cta-buttons .btn_1.rounded {
        width: 100%;
        min-width: auto;
        padding: 14px 28px !important;
    }
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  PUNTO 1D — BOTÓN FLOTANTE "CREAR CUENTA" (mejorado)                                    ║
  ╠═══════════════════════════════════════════════════════════════════════════════════════════╣
  ║  NOTA: Reemplazar los estilos inline del master.blade.php por esta clase.                ║
  ║  El botón solo debe mostrarse si el usuario NO está logueado.                            ║
  ║  En Blade usar: @guest <a href="/register" class="floating-cta">...</a> @endguest        ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

.floating-cta {
    position: fixed;
    right: 24px;
    bottom: 160px;
    z-index: 998;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-warm) 100%);
    color: #fff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    box-shadow:
        0 6px 20px rgba(102, 45, 145, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: floating-cta-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2s both;
}

.floating-cta::before {
    content: '\f234';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 13px;
}

.floating-cta:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 10px 30px rgba(102, 45, 145, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.1);
    color: #fff !important;
    text-decoration: none !important;
}

.floating-cta:active {
    transform: translateY(-1px) scale(0.98);
}

@keyframes floating-cta-entrance {
    0% { opacity: 0; transform: translateX(80px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Pulso sutil */
.floating-cta::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
    z-index: -1;
    opacity: 0;
    animation: floating-cta-pulse 4s ease-in-out 4s infinite;
}

@keyframes floating-cta-pulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.08); }
}

@media (max-width: 767px) {
    .floating-cta {
        right: 16px;
        bottom: 150px;
        padding: 12px 20px;
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    .floating-cta {
        width: 50px;
        height: 50px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        font-size: 0;
    }

    .floating-cta::before {
        font-size: 18px;
        margin: 0;
    }
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  PUNTO 2A — CTAs CONDICIONALES: DOCUMENTOS (usuario no logueado)                         ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

/* Footer de la doc-card para visitantes */
.doc-card .doc-footer-guest {
    justify-content: center !important;
    padding: 18px 24px;
    background: linear-gradient(180deg, transparent 0%, rgba(102, 45, 145, 0.03) 100%);
}

.doc-card .doc-footer .btn-doc-register {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-warm) 100%);
    color: #fff !important;
    border: 2px solid transparent;
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    box-shadow: 0 3px 12px rgba(102, 45, 145, 0.25);
    text-decoration: none;
}

.doc-card .doc-footer .btn-doc-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 45, 145, 0.4);
    background: linear-gradient(135deg, #7a35a8 0%, #d45555 100%);
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  PUNTO 2B — CTAs CONDICIONALES: CURSOS (usuario no logueado)                             ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

/* CTA guest en cards de cursos */
.box_grid ul li a.course-cta-guest {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-warm) 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 26px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: var(--transition) !important;
    box-shadow: 0 3px 12px rgba(102, 45, 145, 0.25) !important;
}

.box_grid ul li a.course-cta-guest:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 45, 145, 0.4) !important;
    background: linear-gradient(135deg, #7a35a8 0%, #d45555 100%) !important;
}

.box_grid ul li a.course-cta-guest i {
    font-size: 12px;
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  PUNTO 2C — BANNER INFORMATIVO: SECCIÓN DOCUMENTOS (para visitantes)                     ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

.docs-guest-banner {
    margin-bottom: 36px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        rgba(102, 45, 145, 0.06) 0%,
        rgba(192, 72, 72, 0.04) 100%);
    border: 1px solid rgba(102, 45, 145, 0.12);
    overflow: hidden;
    position: relative;
}

.docs-guest-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-purple), var(--primary-warm));
    border-radius: 4px 0 0 4px;
}

.docs-guest-banner-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px 24px 32px;
}

.docs-guest-banner-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(102, 45, 145, 0.3);
}

.docs-guest-banner-icon i {
    color: #fff;
    font-size: 18px;
}

.docs-guest-banner-text {
    flex: 1;
}

.docs-guest-banner-text h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.docs-guest-banner-text p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.docs-guest-banner .btn_1 {
    white-space: nowrap;
    padding: 12px 28px !important;
    font-size: 13px !important;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .docs-guest-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px 20px;
    }

    .docs-guest-banner::before {
        width: 100%;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }

    .docs-guest-banner .btn_1 {
        width: 100%;
        text-align: center;
    }
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  REAJUSTE DE POSICIÓN DE BOTONES FLOTANTES                                              ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

.whatsapp-btn {
    bottom: 24px !important;
    right: 24px !important;
}

.sos-btn {
    bottom: 92px !important;
    right: 24px !important;
}

.floating-cta {
    bottom: 100px;
    right: 24px;
}

@media (max-width: 767px) {
    .whatsapp-btn {
        bottom: 16px !important;
        right: 16px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
    }

    .sos-btn {
        bottom: 78px !important;
        right: 16px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 18px !important;
    }

    .floating-cta {
        bottom: 140px;
        right: 16px;
    }
}


/*============================================================================================*/
/* HERO — BOOTSTRAP 5 CAROUSEL                                                              */
/* ─────────────────────────────────────────────────────────────────────────────────────────  */
/* Reemplaza TODOS los estilos anteriores del hero LayerSlider.                              */
/*                                                                                           */
/* INSTRUCCIÓN:                                                                              */
/* 1. En redesign.css, ELIMINAR las secciones:                                               */
/*    - "PUNTO 1A — HERO SLIDER: OVERLAY + TIPOGRAFÍA PROFESIONAL"                           */
/*    - "PUNTO 1B — NAVEGACIÓN CUSTOM DEL SLIDER"                                            */
/*    - "FIX — HERO SLIDER: CENTRADO FORZADO"                                                */
/*    - "FIX — ELIMINAR FLASH DE CONTENIDO"                                                  */
/* 2. Pegar ESTE archivo al final del redesign.css                                           */
/*============================================================================================*/


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  1. ESTRUCTURA DEL SLIDE                                                                 ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

#full-slider-wrapper {
    position: relative;
}

/* Barra decorativa inferior */
#full-slider-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-purple) 0%, var(--primary-warm) 50%, var(--primary-purple) 100%);
    opacity: 0.6;
    z-index: 10;
}

#heroCarousel {
    overflow: hidden;
}

/* Cada slide */
.hero-slide {
    position: relative;
    height: 720px;
    overflow: hidden;
}

/* ── Imagen de fondo ── */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 6s ease-out;
    will-change: transform;
}

/* Ken Burns: zoom suave mientras el slide está activo */
.carousel-item.active .hero-slide-bg {
    transform: scale(1.08);
}

/* ── Overlay oscuro ── */
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(18, 25, 33, 0.55) 0%,
        rgba(18, 25, 33, 0.65) 40%,
        rgba(72, 0, 72, 0.4) 100%
    );
    z-index: 1;
}

/* ── Contenido centrado ── */
.hero-slide-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    text-align: center;
}

.hero-text-wrapper {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 20px;
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  2. TIPOGRAFÍA DEL HERO                                                                  ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

.hero-title {
    font-family: 'Poppins', sans-serif;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 20px 0;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 8px 30px rgba(0, 0, 0, 0.12);
}

.hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 32px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.hero-cta .btn_1 {
    font-size: 15px;
    padding: 16px 42px;
    box-shadow:
        0 4px 15px rgba(192, 72, 72, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.12);
}

.hero-cta .btn_1:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 28px rgba(192, 72, 72, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.12);
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  3. ANIMACIONES DE ENTRADA DEL CONTENIDO                                                 ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

/* Estado inicial: oculto y desplazado hacia abajo */
.hero-slide .hero-title,
.hero-slide .hero-subtitle,
.hero-slide .hero-cta {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cuando el slide está activo: visible con cascade timing */
.carousel-item.active .hero-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.carousel-item.active .hero-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}

.carousel-item.active .hero-cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  4. FLECHAS PREV / NEXT                                                                  ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

/* Anular estilos default de Bootstrap */
.hero-arrow {
    width: 70px;
    opacity: 1;
    z-index: 5;
}

.hero-arrow:hover {
    opacity: 1;
}

.hero-arrow:focus {
    outline: none;
    box-shadow: none;
}

/* Ocultar ícono default de Bootstrap */
.hero-arrow .carousel-control-prev-icon,
.hero-arrow .carousel-control-next-icon {
    display: none;
}

/* Ícono custom */
.hero-arrow-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
    font-size: 16px;
}

.hero-arrow:hover .hero-arrow-icon {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    transform: scale(1.08);
}

.hero-arrow:active .hero-arrow-icon {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.3);
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  5. INDICADORES / DOTS                                                                   ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

.hero-indicators {
    z-index: 5;
    margin-bottom: 28px;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.hero-indicators button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 2px !important;
    padding: 0 !important;
    text-indent: 0 !important;
}

.hero-indicators button:hover {
    background-color: rgba(255, 255, 255, 0.55) !important;
    transform: scale(1.15);
}

.hero-indicators button.active {
    background-color: #fff !important;
    border-color: #fff !important;
    width: 28px !important;
    border-radius: 6px !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  6. RESPONSIVE                                                                           ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

@media (max-width: 991px) {
    .hero-slide {
        height: 600px;
    }

    .hero-title {
        font-size: 34px;
    }

    .hero-subtitle {
        font-size: 15px;
        max-width: 500px;
    }

    .hero-cta .btn_1 {
        font-size: 14px;
        padding: 14px 34px;
    }
}

@media (max-width: 767px) {
    .hero-slide {
        height: 520px;
    }

    .hero-title {
        font-size: 28px;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    .hero-subtitle {
        font-size: 14px;
        max-width: 90%;
        line-height: 1.6;
        margin-bottom: 28px;
    }

    .hero-cta .btn_1 {
        font-size: 13px;
        padding: 13px 30px;
    }

    .hero-arrow {
        width: 50px;
    }

    .hero-arrow-icon {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .hero-indicators {
        margin-bottom: 18px;
        padding: 6px 12px;
        gap: 4px;
    }

    .hero-indicators button {
        width: 8px !important;
        height: 8px !important;
    }

    .hero-indicators button.active {
        width: 22px !important;
    }
}

@media (max-width: 480px) {
    .hero-slide {
        height: 480px;
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-subtitle {
        font-size: 13px;
    }

    .hero-text-wrapper {
        padding: 0 16px;
    }

    .hero-arrow-icon {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}


/*╔═══════════════════════════════════════════════════════════════════════════════════════════╗
  ║  7. OVERRIDE: Ocultar LayerSlider si quedó algo residual                                 ║
  ╚═══════════════════════════════════════════════════════════════════════════════════════════╝*/

#layerslider {
    display: none !important;
}

/* Ocultar navegación custom anterior si quedó */
.slider-nav-custom {
    display: none !important;
}

.ls-nav-prev,
.ls-nav-next,
.ls-bottom-nav-wrapper {
    display: none !important;
}






























/*============================================================================================*/
/* FIX — HERO SLIDER: CENTRADO FORZADO + OVERRIDE POSICIONAMIENTO LAYERSLIDER              */
/* Agregar al final del redesign.css (después del update v3)                                */
/*============================================================================================*/

/* ── Forzar centrado de todos los elementos del slide ── */
/* LayerSlider usa posición absoluta con left:50%, pero no aplica translateX(-50%)
   correctamente en todos los casos. Forzamos centrado real. */

/* #layerslider .ls-slide .ls-l {
    text-align: center !important;
} */

/* Título — centrado absoluto */
/* #layerslider .slide_typo,
#layerslider h3.ls-l.slide_typo {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    text-align: center !important;
    padding: 0 10% !important;
    box-sizing: border-box !important;
} */

/* Subtítulo — centrado absoluto */
/* #layerslider .slide_typo_2,
#layerslider p.ls-l.slide_typo_2 {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    text-align: center !important;
    padding: 0 15% !important;
    box-sizing: border-box !important;
} */

/* Botón CTA — centrado */
/* #layerslider a.ls-l.btn_1 {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    transform: none !important;
    text-align: center !important;
    margin: 0 auto !important;
    display: table !important;
} */

/* ── Responsive centrado ── */
/* @media (max-width: 991px) {
    #layerslider .slide_typo,
    #layerslider h3.ls-l.slide_typo {
        padding: 0 8% !important;
    }

    #layerslider .slide_typo_2,
    #layerslider p.ls-l.slide_typo_2 {
        padding: 0 10% !important;
    }
}

@media (max-width: 575px) {
    #layerslider .slide_typo,
    #layerslider h3.ls-l.slide_typo {
        padding: 0 5% !important;
    }

    #layerslider .slide_typo_2,
    #layerslider p.ls-l.slide_typo_2 {
        padding: 0 6% !important;
    }
} */
/*============================================================================================*/
/* FIX — ELIMINAR FLASH DE CONTENIDO EN TRANSICIÓN DE SLIDES                                */
/* El problema: al cambiar de slide, el contenido del nuevo slide aparece visible            */
/* por un instante antes de que LayerSlider aplique las animaciones de entrada.               */
/*                                                                                           */
/* Agregar al final del redesign.css (después del fix de centrado)                           */
/*============================================================================================*/

/* ── Ocultar layers por defecto hasta que LayerSlider los anime ── */
/* LayerSlider añade la clase .ls-active al slide activo.
   Los layers (.ls-l) dentro de slides NO activos deben estar ocultos. */
/*
#layerslider .ls-slide .ls-l {
    opacity: 0 !important;
    visibility: hidden !important;
} */

/* Cuando LayerSlider activa la animación, añade estilos inline de opacity.
   Usamos un selector que detecta cuando LayerSlider ha tomado control del layer
   (le agrega style con opacity) para devolver la visibilidad. */

/* #layerslider .ls-slide .ls-l[style*="opacity"] {
    visibility: visible !important;
} */

/* ── Asegurar que el slide activo siempre muestre el fondo ── */
/* #layerslider .ls-slide .ls-bg {
    opacity: 1 !important;
    visibility: visible !important;
} */