/*
Theme Name: Australis
Theme URI:
Author: Sociedad Desarrollo Emocional
Author URI:
Description: Tema personalizado para Sociedad Desarrollo Emocional - Plataforma de cursos
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: australis
*/

/* ========================================
   Variables CSS Globales
======================================== */
:root {
    /* Colores Principales */
    --purple-base: #5B318C;
    --purple-2: #7754A0;
    --purple-3: #402262;
    --blanco: #FFF;
    --negro: #000;

    /* Variables con nomenclatura de diseño */
    --Purple-1: #EFEAF4;
    --Purple-2: #7754A0;
    --Purple-base: #5B318C;
    --Negro: #353535;
    --Blanco: #FFF;
    --Verde-2: #9BC097;
    --Verde-base: #53924B;

    /* Colores de Texto */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-light: #999999;

    /* Espaciado */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 0 6.6px 0 #5B318C;
    --shadow-btn-primary: 0 -2px 6px 0 #7754A0 inset;
}

/* ========================================
   Base Scroll Behavior
======================================== */
html {
    scroll-behavior: smooth;
}

/* ========================================
   CSS Reset y Base
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--blanco);
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   Header
======================================== */
.site-header {
    background: var(--blanco);
    box-shadow: var(--shadow-hover);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.site-logo {
    flex-shrink: 0;
}

.site-logo img,
.site-logo a img {
    width: 104px;
    height: 52px;
    aspect-ratio: 2/1;
    display: block;
}

.site-logo .custom-logo-link {
    display: block;
    line-height: 0;
}

.site-logo .logo-text {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Navegación Principal */
.main-navigation {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.main-navigation .main-menu {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation > ul > li > a {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 15px;
    padding: 10px 0;
    display: block;
    transition: color 0.3s ease;
}

.main-navigation > ul > li > a:hover {
    color: var(--purple-base);
}

/* Mega Menu */
.site-header {
    position: relative;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 400px;
    background: var(--blanco);
    box-shadow: 0 6.6px 6.6px 0 #5B318C;
    display: none;
    z-index: 999;
}

.site-header.mega-menu-active .mega-menu {
    display: block;
}

.mega-menu-content {
    display: flex;
    padding: 40px 60px;
    gap: 0;
    height: 100%;
}

.mega-menu-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex: 1 1 auto;
    align-self: stretch;
    border-right: 1px solid var(--purple-2);
    gap: 180px;
    padding-right: 40px;
}

.mega-menu-categories {
    flex: 0 0 auto;
    min-width: 160px;
}

.mega-menu-courses {
    flex: 1;
}

.mega-menu-column-title {
    font-family: Urbanist, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--purple-base);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--purple-1);
}

.mega-menu-categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mega-menu-courses ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 12px 28px;
}

.mega-menu-courses li.mega-menu-view-all a {
    color: var(--purple-base);
    font-weight: 600;
}

.mega-menu-categories li a,
.mega-menu-courses li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 0;
    transition: color 0.3s ease;
    text-decoration: none;
}

.mega-menu-categories li a:hover,
.mega-menu-courses li a:hover {
    color: var(--purple-base);
}

.mega-menu-categories li a svg,
.mega-menu-courses li a svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.mega-menu-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex: 0 0 320px;
    align-self: stretch;
    padding-left: 40px;
}

.mega-menu-right .video-title {
    color: var(--Negro, #353535);
    text-align: center;
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

.mega-menu-video-container {
    width: 100%;
    height: 240px;
    border-radius: 10px;
    box-shadow: 0 0 6.6px 0 #5B318C;
    overflow: hidden;
    position: relative;
}

.mega-menu-video-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(0deg, rgba(55, 45, 66, 0.46) 0%, rgba(55, 45, 66, 0.46) 100%);
    z-index: 1;
    pointer-events: none;
}

.mega-menu-video-container .video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
}

.mega-menu-video-container .video-placeholder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-menu-column {
    flex: 1;
}

/* Columnas de Categorías y Cursos */
.categories-column,
.courses-column {
    padding: 20px 30px;
}

.category-list,
.course-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.category-list li a,
.course-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.category-list li a:hover,
.course-list li a:hover {
    color: var(--purple-base);
}

.category-list li a svg,
.course-list li a svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Columna de Video */
.video-column {
    border-left: 1px solid var(--purple-2);
    padding: 0 40px;
    display: flex;
    align-items: stretch;
}

.video-container {
    display: flex;
    padding: 40px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 50px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 10px;
    background: linear-gradient(0deg, rgba(55, 45, 66, 0.46) 0%, rgba(55, 45, 66, 0.46) 100%);
    box-shadow: var(--shadow-hover);
}

.video-title {
    color: var(--text-primary);
    text-align: center;
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

.video-wrapper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.video-wrapper img,
.video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

/* Menu item con mega menu - Icono flecha */
.mega-menu-item > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.mega-menu-item:hover > a::after {
    transform: rotate(180deg);
}

/* Header Actions (Derecha) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ========================================
   Botones
======================================== */
.header-actions .btn,
.btn {
    display: inline-flex !important;
    padding: 16px 20px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-family: Urbanist, sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
    flex-wrap: nowrap !important;
}

/* Botón Primario */
.header-actions .btn-primary,
.btn-primary {
    border-radius: 8px !important;
    border: 1px solid var(--purple-2) !important;
    background: var(--purple-base) !important;
    color: var(--blanco) !important;
}

.btn-primary svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

.btn-primary:hover {
    background: var(--purple-2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(91, 49, 140, 0.3);
}

/* Botón Secundario/Outline */
.header-actions .btn-outline,
.header-actions .btn-secondary,
.btn-outline,
.btn-secondary {
    border-radius: 8px !important;
    border: 1px solid var(--Purple-base, #5B318C) !important;
    background: transparent !important;
    color: var(--purple-base) !important;
    box-shadow: 0 0 6.6px 0 #5B318C !important;
    transition: all 0.3s ease !important;
}

.btn-outline:hover,
.btn-secondary:hover {
    background: var(--purple-base) !important;
    color: var(--blanco) !important;
    box-shadow: 0 0 10px 0 #5B318C !important;
}

.btn-tertiary {
    display: flex !important;
    padding: 16px 20px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 8px !important;
    border: 1px solid #EFEAF4 !important;
    background: transparent !important;
    color: #EFEAF4 !important;
    text-align: center !important;
    font-family: Urbanist !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.btn-tertiary:hover {
    background: #EFEAF4 !important;
    color: var(--purple-base) !important;
    border-color: #EFEAF4 !important;
}

/* Tamaños de botones */
.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.btn-lg {
    padding: 14px 32px;
    font-size: 16px;
}

/* Botón de Carrito */
.cart-button {
    position: relative;
    display: flex;
    width: 52px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    aspect-ratio: 1/1;
    border-radius: 12px;
    border: 1px solid var(--purple-2);
    background: var(--purple-base);
    box-shadow: 0 -2px 6px 0 #7754A0 inset;
    color: var(--blanco);
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-button:hover {
    background: var(--purple-2);
    transform: translateY(-1px);
}

.cart-button svg {
    width: 20px;
    height: 20px;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botón de Mensajes */
.messages-button {
    position: relative;
    display: flex;
    width: 52px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1/1;
    border-radius: 12px;
    border: 1px solid var(--purple-2);
    background: var(--purple-base);
    box-shadow: 0 -2px 6px 0 #7754A0 inset;
    color: var(--blanco);
    cursor: pointer;
    transition: all 0.3s ease;
}

.messages-button:hover {
    background: var(--purple-2);
    transform: translateY(-1px);
}

.messages-button svg {
    width: 20px;
    height: 20px;
}

.messages-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle svg {
    display: block;
    width: 27px;
    height: 27px;
}

.mobile-menu-toggle svg path:first-child {
    fill: #5B318C;
    opacity: 0.5;
}

/* Mobile Menu Desplegable */
.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    background: #EFEAF4;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 80px);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 0 16px 16px 16px;
}

.mobile-menu.active {
    display: block;
    opacity: 1;
}

.mobile-menu-section {
    padding-top: 16px;
}

.mobile-menu-section-header {
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(91, 49, 140, 0.2);
    margin-bottom: 8px;
}

/* Mobile Dropdown Academias */
.mobile-menu-dropdown {
    border-bottom: 1px solid rgba(91, 49, 140, 0.2);
}

.mobile-menu .mobile-menu-dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    margin: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.mobile-menu .mobile-menu-dropdown-toggle:hover,
.mobile-menu .mobile-menu-dropdown-toggle:focus {
    background: transparent !important;
    outline: none !important;
}

.mobile-menu-dropdown-arrow {
    transition: transform 0.3s ease;
    color: var(--purple-base);
    flex-shrink: 0;
}

.mobile-menu-dropdown.open .mobile-menu-dropdown-arrow {
    transform: rotate(180deg);
}

.mobile-menu-dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0;
}

.mobile-menu-dropdown.open .mobile-menu-dropdown-content {
    max-height: 800px;
    padding-bottom: 12px;
}

.mobile-menu-subsection {
    margin-bottom: 8px;
}

.mobile-menu-subsection-title {
    font-family: Urbanist, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--purple-base);
    padding: 8px 0 4px;
    opacity: 0.7;
}

.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-academias .menu-item {
    margin: 0;
}

.mobile-menu-academias .menu-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    color: var(--text-primary);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-menu-academias .menu-item a:hover {
    color: var(--purple-base);
}

.mobile-menu-academias .menu-item a svg {
    color: #5B318C;
    opacity: 0.6;
}

.mobile-menu-main {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(91, 49, 140, 0.2);
}

.mobile-menu-main .menu-item a {
    display: block;
    padding: 12px 0;
    color: var(--text-primary);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-menu-main .menu-item a:hover {
    color: var(--purple-base);
}

.mobile-menu-divider {
    height: 1px;
    background: rgba(91, 49, 140, 0.2);
    margin: 12px 0;
}

.mobile-menu-account {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-menu-account-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--text-primary);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.mobile-menu-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #5B318C;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-menu-avatar-placeholder {
    background: rgba(91, 49, 140, 0.3);
    color: #5B318C;
}

.mobile-menu-logout,
.mobile-menu-register {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: #5B318C;
    color: white;
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.mobile-menu-logout:hover,
.mobile-menu-register:hover {
    background: #7754A0;
}

/* ========================================
   Main Content
======================================== */
.site-main {
    min-height: calc(100vh - 200px);
}

/* ========================================
   Footer
======================================== */
.site-footer {
    background: var(--Purple-2, #7754A0);
    display: flex;
    width: 100%;
    padding: 40px 100px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.footer-main {
    width: 100%;
}

.footer-row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

/* Newsletter Section */
.footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 520px;
}

.newsletter-header {
    display: flex;
    gap: 40px;
    align-items: center;
}

.footer-logo {
    width: 78px;
    height: 87px;
    object-fit: cover;
}

.newsletter-text {
    flex: 1;
    max-width: 480px;
    color: var(--blanco);
    font-family: Urbanist, sans-serif;
}

.newsletter-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}

.newsletter-subtitle {
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
}

.newsletter-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletter-form {
    display: flex;
    gap: 16px;
}

.newsletter-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    border: 1px solid var(--blanco);
    padding: 12px;
    color: var(--blanco);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    line-height: 20px;
}

.newsletter-input::placeholder {
    color: var(--blanco);
    opacity: 0.7;
}

.newsletter-button {
    background: var(--blanco);
    border-radius: 8px;
    border: 1px solid var(--Purple-1);
    padding: 16px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: var(--purple-base);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    box-shadow: 0 0 6.6px 0 #5B318C;
    transition: all 0.3s ease;
}

.newsletter-button:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--purple-base);
}

.newsletter-button svg {
    width: 20px;
    height: 20px;
}

.newsletter-disclaimer {
    color: var(--blanco);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
}

.newsletter-disclaimer a {
    color: var(--blanco);
    text-decoration: underline;
}

/* Social Section */
.footer-social {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-title {
    color: var(--blanco);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin: 0;
}

.social-icons {
    display: flex;
    gap: 20px;
}

.social-icons a {
    color: var(--blanco);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Navigation Columns */
.footer-nav-column {
    padding: 0 20px;
    flex: 1;
}

.footer-nav-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-nav-column ul li {
    padding: 8px 0;
}

.footer-nav-column ul li a {
    color: var(--blanco);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav-column ul li a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.footer-nav-column ul li:first-child a {
    font-weight: 700;
}

/* Contact Column */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-header {
    padding: 8px 0;
    color: var(--blanco);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

a.contact-item {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

a.contact-item:hover {
    opacity: 0.8;
}

.contact-label {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    color: var(--blanco);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
}

.contact-label svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.contact-value {
    color: var(--blanco);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

/* Scroll to Top Button */
.scroll-to-top {
    background: var(--blanco);
    border-radius: 50px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6.6px 0 #5B318C;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
}

.scroll-to-top:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
    box-shadow: 0 0 12px 0 #5B318C;
}

.scroll-to-top:active {
    transform: scale(0.95);
}

.scroll-to-top svg {
    width: 24px;
    height: 24px;
    color: var(--purple-base);
    transition: color 0.3s ease;
}

.scroll-to-top:hover svg {
    color: var(--purple-base);
}

/* Hide mobile scroll-to-top on desktop */
.scroll-to-top-mobile {
    display: none;
}

/* Footer Bottom */
.footer-bottom-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.footer-divider {
    width: 100%;
    height: 1px;
    background: var(--blanco);
    border: 1px solid var(--blanco);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.footer-copyright {
    color: var(--blanco);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    color: var(--blanco);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   Home Page
======================================== */
.hero-section {
    display: flex;
    width: 100%;
    height: 872px;
    padding: 190px 100px 49px 100px;
    align-items: center;
    gap: 50px;
    background: url('assets/images/Home/hero_bg.webp') lightgray center / cover no-repeat;
    background-size: cover;
    background-position: center;
}

.hero-content-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.hero-content-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.hero-image {
    width: 75%;
    height: auto;
    object-fit: contain;
}

.hero-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    margin: 0;
}

.hero-description {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* ========================================
   Courses Section (Home Page)
======================================== */
.courses-section {
    padding: 80px 100px;
    background: url('assets/images/Home/bg_home_01.png') center/cover no-repeat;
    background-color: #f9fafb;
    position: relative;
}

.courses-container {
    width: 100%;
}

.courses-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 50px;
}

.courses-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title {
    font-family: Urbanist, sans-serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    color: var(--Purple-base, #5B318C);
    margin: 0;
}

.section-description {
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    color: var(--Negro, #353535);
    margin: 0;
}

.courses-header-action {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 386px);
    gap: 30px;
    margin-bottom: 40px;
    justify-content: center;
}

/* Course Card */
.course-card {
    display: flex;
    width: 386px;
    height: 361px;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 16px;
    background-color: #e5e5e5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 0;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Course Badges (Top) */
.course-badges {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-bottom: 100px;
}

.course-duration-badge {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: var(--Rojo-base, #BA225B);
    color: var(--Blanco, #FFF);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.add-to-cart-btn {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 8px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 1/1;
    border-radius: 8px;
    background: var(--Blanco, #FFF);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-to-cart-btn:hover {
    background: var(--Purple-base, #5B318C);
    color: var(--Blanco, #FFF);
}

.add-to-cart-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Course Content (Bottom) */
.course-content {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Blanco, #FFF);
    position: relative;
    z-index: 1;
    min-height: 180px;
    flex-shrink: 0;
    margin-top: auto;
}

.course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.course-title {
    margin: 0;
    flex: 0 1 auto;
    max-width: 60%;
}

.course-title a {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.3s ease;
}

.course-title a:hover {
    color: var(--Purple-base, #5B318C);
}

.course-price {
    color: var(--Verde-base, #53924B) !important;
    font-family: Urbanist, sans-serif;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 24px;
    white-space: nowrap;
    margin-left: auto;
    text-align: right;
}

.course-excerpt {
    color: var(--Negro, #353535);
    font-family: Urbanist;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 28px;
}

.course-link {
    display: inline-flex;
    padding: 8px 24px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.course-link:hover {
    color: var(--Purple-base, #5B318C);
}

.course-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.courses-cta {
    text-align: center;
    margin-top: 40px;
}

/* ========================================
   About Section (Quiénes Somos)
======================================== */
.about-section {
    background: url('assets/images/Home/bg_home_02.png') center/cover no-repeat;
    background-color: #f9fafb;
    position: relative;
}

.about-container {
    padding: 123px 100px;
}

.about-card {
    display: flex;
    padding: 40px 87px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 24px;
    background: url('assets/images/Home/hero_bg.webp') lightgray 0px -446.277px / 108.149% 279.969% no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

.about-content-left {
    flex: 1;
    max-width: 600px;
}

.about-content-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    margin: 0 0 20px 0;
}

.about-description {
    color: var(--Negro, #353535);
    font-family: Urbanist;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin: 0 0 32px 0;
}

.about-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.about-image {
    max-width: 100%;
    max-height: 470px;
    height: auto;
    display: block;
}

/* Quienes Somos Final CTA Section - Custom Background */
.quienes-final-cta-section {
    background: url('assets/images/Home/bg_home_03.png') center/cover no-repeat;
    transform: rotate(180deg);
}

.quienes-final-cta-section .about-container {
    transform: rotate(180deg);
}

/* ========================================
   Certifications Section
======================================== */
.certifications-section {
    background: url('assets/images/Home/bg_home_03.png') center/cover no-repeat;
    background-color: #f9fafb;
    position: relative;
}

.certifications-container {
    padding: 123px 100px;
}

.certifications-title {
    color: var(--Purple-base, #5B318C);
    text-align: center;
    font-family: Urbanist;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    margin: 0 0 20px 0;
}

.certifications-subtitle {
    color: #5D5A6F;
    text-align: center;
    font-family: Urbanist;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin: 0 0 60px 0;
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    align-items: start;
}

.certification-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 280px;
    margin: 0 auto;
}

.certification-image {
    width: 180px;
    height: 180px;
    aspect-ratio: 1/1;
    display: block;
    object-fit: cover;
}

.certification-card-title {
    color: #1E1E1E;
    text-align: center;
    font-family: Urbanist;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
}

.certification-card-description {
    color: #1E1E1E;
    text-align: center;
    font-family: Urbanist;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

/* CTA Section */
.cta-section {
    padding: 50px 100px;
    background: linear-gradient(to bottom, #EFEAF4 0%, #FFFFFF 20%, #FFFFFF 80%, #EFEAF4 100%);
}

.cta-container {
    width: 100%;
    max-width: 100%;
}

.cta-section .certification-video-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.certification-video-card {
    display: flex;
    width: 1240px;
    height: 462px;
    padding: 40px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 50px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 0 6.6px 0 #5B318C;
    margin: 60px auto 0;
}

.certification-video-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(55, 45, 66, 0.65) 0%, rgba(55, 45, 66, 0.45) 100%);
    z-index: 1;
    pointer-events: none;
}

.certification-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.certification-video-content {
    position: relative;
    z-index: 2;
}

.certification-video-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.certification-video-left {
    display: flex;
    width: 688px;
    padding: 38px 39px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 16px;
    background: rgba(89, 89, 89, 0.45);
}

.certification-video-right {
    flex: 1;
}

.certification-video-title {
    color: var(--Blanco, #FFF);
    font-family: Urbanist;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    margin: 0;
}

.certification-video-description {
    color: var(--Blanco, #FFF);
    font-family: Urbanist;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

.certification-video-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 10px;
}

/* ========================================
   Testimonials Section
======================================== */
.testimonials-section {
    background: url('assets/images/Home/bg_home_04.png') center/cover no-repeat;
    padding: 80px 100px;
}

.testimonials-container {
    width: 100%;
    text-align: center;
}

.testimonials-title {
    color: var(--Purple-base, #5B318C);
    text-align: center;
    font-family: Urbanist;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    margin: 0 0 16px 0;
}

.testimonials-subtitle {
    color: var(--Negro, #353535);
    text-align: center;
    font-family: Urbanist;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin: 0 0 60px 0;
}

/* Testimonials Carousel */
.testimonials-carousel-wrapper {
    display: flex;
    gap: 20px;
    justify-content: center;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
}

.testimonial-column {
    width: 397px;
    height: 800px;
    position: relative;
    overflow: hidden;
}

/* Fade effect at top and bottom */
.testimonial-column::before,
.testimonial-column::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 150px;
    z-index: 2;
    pointer-events: none;
}

.testimonial-column::before {
    top: 0;
    background: linear-gradient(180deg, #EFEAF4 0%, rgba(239, 234, 244, 0) 100%);
}

.testimonial-column::after {
    bottom: 0;
    background: linear-gradient(0deg, #EFEAF4 0%, rgba(239, 234, 244, 0) 100%);
}

.testimonial-track {
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: scrollUp 60s linear infinite;
}

.testimonial-track-reverse {
    animation: scrollDown 60s linear infinite;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Pause animation on hover */
.testimonial-track:hover {
    animation-play-state: paused;
}

.testimonial-card {
    display: flex;
    width: 397px;
    height: 474px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
}

.testimonial-card-content {
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    height: 100%;
    border-radius: 24px;
    background: var(--Blanco, #FFF);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
}

.testimonial-text {
    color: var(--Negro, #353535);
    font-family: Urbanist;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin: 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #D9D9D9;
}

/* When avatar image is broken, show as circle */
.testimonial-avatar.avatar-broken {
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
}

.testimonial-author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-name {
    color: var(--Negro, #353535);
    font-family: Urbanist;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
}

.testimonial-role {
    color: var(--Negro, #353535);
    font-family: Urbanist;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin: 0;
    opacity: 0.7;
}

/* ========================================
   Blog Section
======================================== */
.blog-section {
    background: url('assets/images/Home/bg_home_05.png') center/cover no-repeat;
    padding: 80px 100px;
    position: relative;
}

/* Gradient overlay - fade from center to top and bottom */
.blog-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #EFEAF4 0%, transparent 25%, transparent 75%, #EFEAF4 100%);
    pointer-events: none;
    z-index: 1;
}

.blog-container {
    width: 100%;
    position: relative;
    z-index: 2;
}

.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 50px;
}

.blog-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: stretch;
}

.blog-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    align-self: stretch;
    margin: 0;
}

.blog-subtitle {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    align-self: stretch;
    margin: 0;
}

.blog-header-action {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

/* Blog Carousel Wrapper */
.blog-carousel-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Blog Carousel Track - limits visible area */
.blog-carousel-track {
    overflow: hidden;
    width: 100%;
}

/* Blog Cards Container */
.blog-cards-container {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
}

/* Blog Card */
.blog-card {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #EFEAF4;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 400px;
    flex-shrink: 0;
}

/* Blog Card Image */
.blog-card-image {
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-end;
    height: 221px;
    background: linear-gradient(135deg, #E8DFF5 0%, #D4C5E8 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.blog-card-date-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 1;
}

.blog-card-date {
    background: var(--Blanco, #FFF);
    border-radius: 100px;
    padding: 8px 16px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

/* Blog Card Content */
.blog-card-content {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
}

.blog-card-title {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.blog-card-description {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    width: 380px;
    margin: 0;
}

.blog-card-link {
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    transition: all 0.3s ease;
}

.blog-card-link:hover {
    background: rgba(91, 49, 140, 0.05);
}

.blog-card-link svg {
    flex-shrink: 0;
}

/* Blog Carousel Controls */
.blog-carousel-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    position: relative;
}

/* Blog Carousel Buttons */
.blog-carousel-btn {
    border-radius: 8px;
    border: 1px solid var(--Purple-base, #5B318C);
    background: var(--Blanco, #FFF);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-carousel-btn:hover:not(:disabled) {
    background: rgba(91, 49, 140, 0.05);
}

.blog-carousel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.blog-carousel-btn svg {
    display: block;
}

/* Blog Carousel Pagination */
.blog-carousel-pagination {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Blog Carousel Dots */
.blog-carousel-dot {
    width: 7.602px;
    height: 7.602px;
    border-radius: 50%;
    background: var(--Purple-base, #5B318C);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.blog-carousel-dot.active {
    width: 7.602px;
    height: 7.602px;
}

.blog-carousel-dot.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--Purple-base, #5B318C);
    background: transparent;
}

/* ========================================
   Final CTA Section
======================================== */
.final-cta-section {
    display: flex;
    width: 100%;
    height: 872px;
    padding: 190px 100px 49px 100px;
    align-items: center;
    gap: 50px;
    background: url('assets/images/Home/hero_bg.webp') lightgray center / cover no-repeat;
    background-size: cover;
    background-position: center;
}

.final-cta-content-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.final-cta-content-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.final-cta-image {
    width: 75%;
    height: auto;
    object-fit: contain;
}

.final-cta-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    margin: 0;
}

.final-cta-description {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

.final-cta-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* ========================================
   Blog Page
======================================== */

/* Blog Hero Section */
.blog-hero-section {
    display: flex;
    width: 100%;
    padding: 120px 100px;
    align-items: center;
    background: url('assets/images/Home/hero_bg.webp') lightgray center / cover no-repeat;
    background-size: cover;
    background-position: center;
}

.blog-hero-container {
    width: 100%;
}

/* Blog Breadcrumb */
.blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.breadcrumb-back-btn {
    display: flex;
    width: 30px;
    height: 30px;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--Purple-base, #5B318C);
    transition: all 0.3s ease;
    text-decoration: none;
}

.breadcrumb-back-btn:hover {
    background: var(--Purple-2, #7C4BA3);
    transform: scale(1.05);
}

.breadcrumb-trail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-link {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.breadcrumb-link:hover {
    opacity: 0.8;
}

.breadcrumb-separator {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.breadcrumb-current {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.blog-hero-heading {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    margin: 40px 0 0 0;
    max-width: 90%;
}

.blog-hero-description {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin: 16px 0 0 0;
    max-width: 90%;
    text-align: justify;
}

.blog-hero-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 600;
    line-height: 72px;
    margin: 0 0 24px 0;
    text-align: center;
}

.blog-hero-subtitle {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
    text-align: center;
}

/* Blog Filters Section */
.blog-filters-section {
    padding: 60px 100px 0 100px;
    background: var(--Blanco, #FFF);
}

.blog-filters-container {
    width: 100%;
}

.blog-filters-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

/* Category Filters */
.blog-category-filters {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

/* Hide mobile dropdown on desktop */
.blog-category-filters-mobile {
    display: none;
}

/* Mobile category dropdown */
.blog-category-mobile-dropdown {
    position: relative;
    width: 100%;
}

.blog-category-mobile-btn {
    width: 100%;
    padding: 12px 40px 12px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--Blanco, #FFF);
    border-radius: 8px;
    border: 1px solid var(--Purple-base, #5B318C);
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-category-mobile-btn:hover {
    border-color: var(--Purple-2, #7C4BA3);
}

.blog-category-mobile-btn svg {
    width: 12px;
    height: 14px;
    flex-shrink: 0;
}

.blog-category-mobile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--Blanco, #FFF);
    border-radius: 8px;
    border: 1px solid var(--Purple-1, #EFEAF4);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    overflow: hidden;
}

.blog-category-mobile-menu.active {
    display: block;
}

.blog-category-mobile-option {
    display: block;
    padding: 14px 20px;
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    transition: background 0.3s ease;
    border-bottom: 1px solid var(--Purple-1, #EFEAF4);
}

.blog-category-mobile-option:last-child {
    border-bottom: none;
}

.blog-category-mobile-option:hover {
    background: var(--Purple-1, #EFEAF4);
}

.blog-category-mobile-option.active {
    background: var(--Purple-2, #7C4BA3);
    color: var(--Blanco, #FFF);
}

.blog-filter-btn {
    background: var(--Blanco, #FFF);
    border-radius: 8px;
    border: 1px solid var(--Purple-base, #5B318C);
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: var(--Purple-base, #5B318C);
    text-align: center;
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.blog-filter-btn:hover {
    background: var(--Purple-1, #EFEAF4);
}

.blog-filter-btn.active {
    background: var(--Purple-2, #7C4BA3);
    border-color: var(--Purple-3, #672F99);
    color: var(--Blanco, #FFF);
}

/* Sort Dropdown */
.blog-sort-wrapper {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
}

.blog-sort-label {
    color: var(--Negro, #353535);
    text-align: left;
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.blog-sort-dropdown {
    position: relative;
}

.blog-sort-btn {
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.blog-sort-btn svg {
    width: 12px;
    height: 14px;
}

.blog-sort-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--Blanco, #FFF);
    border-radius: 8px;
    border: 1px solid var(--Purple-1, #EFEAF4);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    z-index: 10;
    margin-top: 4px;
}

.blog-sort-menu.active {
    display: block;
}

.blog-sort-option {
    display: block;
    padding: 12px 16px;
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.blog-sort-option:hover {
    background: var(--Purple-1, #EFEAF4);
}

.blog-sort-option.active {
    background: var(--Purple-2, #7C4BA3);
    color: var(--Blanco, #FFF);
}

/* Blog Posts Section */
.blog-posts-section {
    padding: 40px 100px 80px 100px;
    background: var(--Blanco, #FFF);
}

.blog-posts-container {
    width: 100%;
}

/* Blog Posts Grid */
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.blog-post-card {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: var(--Blanco, #FFF);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.12);
}

.blog-post-image {
    position: relative;
    width: 100%;
    height: 240px;
    background: linear-gradient(180deg, #EFEAF4 0%, #D4C5E8 100%);
    overflow: hidden;
}

.blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post-placeholder-img {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #EFEAF4 0%, #D4C5E8 100%);
}

.blog-post-date-wrapper {
    position: absolute;
    top: 16px;
    right: 16px;
}

.blog-post-date {
    display: inline-flex;
    padding: 8px 16px;
    border-radius: 100px;
    background: var(--Blanco, #FFF);
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.blog-post-content {
    display: flex;
    padding: 24px;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.blog-post-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.blog-post-category {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--Purple-1, #EFEAF4);
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-post-category:hover {
    background: var(--Purple-base, #5B318C);
    color: var(--Blanco, #FFF);
}

.blog-post-title {
    margin: 0;
}

.blog-post-title a {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-post-title a:hover {
    color: var(--Purple-base, #5B318C);
}

.blog-post-excerpt {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    flex: 1;
}

.blog-post-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.blog-post-link:hover {
    color: var(--Purple-base, #5B318C);
}

.blog-post-link svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.blog-post-link:hover svg {
    transform: translateX(4px);
}

/* Blog Pagination */
/* Blog Pagination */
.blog-pagination {
    margin-top: 60px;
}

.blog-pagination-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.blog-pagination-info {
    color: var(--Negro, #353535);
    text-align: left;
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.blog-pagination-numbers {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.blog-page-number {
    background: transparent;
    border-radius: 100px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Negro, #353535);
    text-align: center;
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.blog-page-number:hover {
    background: var(--Purple-1, #EFEAF4);
}

.blog-page-number.active {
    background: var(--Purple-base, #5B318C);
    color: var(--Blanco, #FFF);
}

.blog-page-ellipsis {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.blog-page-next {
    border-radius: 100px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-page-next:hover {
    background: var(--Purple-1, #EFEAF4);
}

.blog-page-next svg {
    width: 24px;
    height: 24px;
}

/* No Posts Found */
.blog-no-posts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.blog-no-posts .no-results-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.blog-no-posts h3 {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    margin: 0 0 16px 0;
}

.blog-no-posts p {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin: 0 0 32px 0;
}

/* ========================================
   Contact Page
======================================== */

/* Contact Hero Section */
.contact-hero-section {
    display: flex;
    width: 100%;
    padding: 120px 100px;
    align-items: center;
    background: url('assets/images/Home/hero_bg.webp') lightgray center / cover no-repeat;
}

.contact-hero-container {
    width: 100%;
}

/* Contact Breadcrumb */
.contact-breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.contact-breadcrumb .breadcrumb-back-btn {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(--Purple-base, #5B318C);
    text-decoration: none;
}

.contact-breadcrumb .breadcrumb-trail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.contact-breadcrumb .breadcrumb-link {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
}

.contact-breadcrumb .breadcrumb-link:hover {
    color: var(--Purple-base, #5B318C);
}

.contact-breadcrumb .breadcrumb-separator {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.contact-breadcrumb .breadcrumb-current {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

/* Contact Hero Content */
.contact-hero-heading {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 52px;
    margin: 40px 0 0 0;
    max-width: 90%;
}

.contact-hero-description {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    margin: 16px 0 0 0;
    max-width: 90%;
}

/* Contact Form Section */
.contact-form-section {
    display: flex;
    width: 100%;
    padding: 120px 100px;
    align-items: center;
    background: linear-gradient(to bottom, #EFEAF4, #FFF 10%, #FFF 90%, #EFEAF4);
}

.contact-form-container {
    width: 100%;
}

.contact-form-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

/* Left Column - Contact Info */
.contact-info-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 0 0 40%;
}

.contact-info-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    margin: 0;
}

.contact-info-subtitle {
    color: var(--Black, #3F3F3F);
    font-family: Urbanist, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

/* Contact Cards */
.contact-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Contact Addresses Wrapper */
.contact-addresses-wrapper {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
}

.contact-card-address {
    flex: 1;
    width: 50%;
}

.contact-card {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 10px;
    border: 2px solid var(--Purple-1, #EFEAF4);
    background: var(--Blanco, #FFF);
    box-shadow: 0 0 6.6px 0 #5B318C;
}

/* Row 1: Icon + Title */
.contact-card-row-1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-card-row-1 svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.contact-card-title {
    color: var(--Black, #3F3F3F);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    margin: 0;
}

/* Row 2-3: Labels and Values */
.contact-card-row-2-3 {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 60%;
    justify-content: space-between;
}

.contact-card-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-card-label-small {
    color: var(--Black, #3F3F3F);
    font-family: Urbanist, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
}

.contact-card-value-small {
    color: var(--Black, #3F3F3F);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 18px;
    text-decoration: none;
}

.contact-card-value-small:hover {
    color: var(--Purple-base, #5B318C);
}

/* Card 3 - Address Text */
.contact-card-address {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 18px;
    margin: 0;
    width: 100%;
}

/* Card 3 - Map Image */
.contact-card-map-link {
    display: block;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.contact-card-map-link:hover {
    opacity: 0.9;
}

.contact-card-map {
    width: 100%;
    height: 150px;
    align-self: stretch;
    border-radius: 5px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Old card structure (for cards 2 and 3) */
.contact-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.contact-card-icon svg {
    width: 24px;
    height: 24px;
}

.contact-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.contact-card-label {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
}

.contact-card-value {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
    text-decoration: none;
}

.contact-card-value:hover {
    color: var(--Purple-base, #5B318C);
}

/* Right Column - Contact Form */
.contact-form-column {
    display: flex;
    flex: 0 0 60%;
}

.contact-form-card {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
    border-radius: 20px;
    background: var(--Purple-1, #EFEAF4);
}

.contact-form-title {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.contact-form-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.contact-form-label {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
}

.contact-form-input {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Purple-1, #EFEAF4);
    background: var(--Blanco, #FFF);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    color: var(--Negro, #353535);
    outline: none;
    transition: border-color 0.3s ease;
}

.contact-form-input:focus {
    border-color: var(--Purple-base, #5B318C);
}

.contact-form-input::placeholder {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

/* Select options */
.contact-form-input option,
.contact-form-phone-select option {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

/* Phone Input with Country Code */
.contact-form-phone-wrapper {
    display: flex;
    gap: 8px;
    align-self: stretch;
}

.contact-form-phone-select {
    display: flex;
    padding: 12px;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--Purple-1, #EFEAF4);
    background: var(--Blanco, #FFF);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    color: var(--Negro, #353535);
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s ease;
    min-width: 80px;
}

.contact-form-phone-select:focus {
    border-color: var(--Purple-base, #5B318C);
}

.contact-form-phone-input {
    flex: 1;
}

/* Textarea */
.contact-form-textarea {
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Purple-1, #EFEAF4);
    background: var(--Blanco, #FFF);
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    color: var(--Negro, #353535);
    outline: none;
    transition: border-color 0.3s ease;
    height: 166px;
    resize: none;
}

.contact-form-textarea:focus {
    border-color: var(--Purple-base, #5B318C);
}

.contact-form-textarea::placeholder {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

/* Checkbox */
.contact-form-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-form-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 1px solid var(--Purple-2, #7754A0);
    background: var(--Blanco, #FFF);
    cursor: pointer;
    flex-shrink: 0;
}

.contact-form-checkbox-label {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: underline;
    cursor: pointer;
}

/* Submit Button */
.contact-form-submit {
    display: flex;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    border: none;
    cursor: pointer;
}

/* Contact FAQ Section */
.contact-faq-section {
    display: flex;
    width: 100%;
    padding: 120px 100px;
    background: url('assets/images/Home/bg_home_03.png') lightgray center / cover no-repeat;
}

.contact-faq-container {
    width: 100%;
}

.contact-faq-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
}

/* Left Column - FAQ Info */
.contact-faq-info-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 0 0 40%;
}

.contact-faq-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 52px;
    margin: 0;
}

.contact-faq-subtitle {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

/* Right Column - FAQ Items */
.contact-faq-items-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 0 0 60%;
}

/* FAQ Accordion Item */
.faq-item {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-radius: 20px;
    border: 2px solid var(--Purple-1, #EFEAF4);
    background: var(--Blanco, #FFF);
    box-shadow: 0 0 6.6px 0 #5B318C;
    overflow: hidden;
}

.faq-question {
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.faq-question-text {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    flex: 1;
}

.faq-arrow {
    width: 67px;
    height: 67px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.faq-question[aria-expanded="true"] .faq-arrow {
    transform: rotate(0deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 20px;
}

.faq-question[aria-expanded="true"] + .faq-answer {
    max-height: 500px;
    padding: 0 20px 20px 20px;
}

.faq-answer-text {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

/* Quienes Somos Hero Section */
.quienes-hero-section {
    display: flex;
    width: 100%;
    padding: 120px 100px;
    background: url('assets/images/Home/hero_bg.webp') lightgray center / cover no-repeat;
}

.quienes-hero-container {
    width: 100%;
}

.quienes-hero-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}

/* Left Column - Content */
.quienes-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1;
}

.quienes-hero-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 52px;
    margin: 0;
    max-width: 80%;
}

.quienes-hero-subtitle {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
    max-width: 80%;
}

/* Right Column - Image */
.quienes-hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.quienes-hero-image img {
    max-width: 80%;
    height: auto;
    object-fit: contain;
}

/* Nuestros Cursos Section */
.quienes-cursos-section {
    display: flex;
    width: 100%;
    padding: 180px 100px;
    background: url('assets/images/Home/bg_home_02.png') lightgray center / cover no-repeat;
}

.quienes-cursos-container {
    width: 100%;
}

.quienes-cursos-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}

/* Left Column - Content */
.quienes-cursos-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1;
}

.quienes-cursos-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    margin: 0;
}

.quienes-cursos-subtitle {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
    align-self: stretch;
}

.quienes-cursos-text {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

/* Right Column - Video */
.quienes-cursos-video {
    display: flex;
    height: 410px;
    flex: 1 0 0;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 0 6.6px 0 #5B318C;
}

.quienes-cursos-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Misión y Visión Section */
.quienes-mision-vision-section {
    display: flex;
    width: 100%;
    padding: 350px 100px;
    background: url('assets/images/Home/bg_home_02.png') lightgray center / cover no-repeat;
}

.quienes-mision-vision-container {
    width: 100%;
}

.quienes-mision-vision-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    margin-top: 60px;
}

.mision-vision-card {
    display: flex;
    height: 173px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid var(--Purple-1, #EFEAF4);
    background: var(--Purple-1, #EFEAF4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mision-vision-image {
    height: 85%;
    width: auto;
    object-fit: contain;
}

.mision-vision-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.mision-vision-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    margin: 0;
}

.mision-vision-text {
    color: #1E1E1E;
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

/* Cómo Enseñamos Section */
.quienes-como-ensenamos-section {
    display: flex;
    width: 100%;
    padding: 80px 100px;
    background: url('assets/images/Home/bg_home_01.png') lightgray center / cover no-repeat;
}

.quienes-como-ensenamos-container {
    width: 100%;
}

.quienes-como-ensenamos-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}

/* Left Column - Video */
.quienes-como-ensenamos-video {
    display: flex;
    height: 410px;
    flex: 1 0 0;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 0 6.6px 0 #5B318C;
    position: relative;
}

.quienes-como-ensenamos-video::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(0deg, rgba(55, 45, 66, 0.46) 0%, rgba(55, 45, 66, 0.46) 100%);
    pointer-events: none;
}

.quienes-como-ensenamos-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right Column - Content */
.quienes-como-ensenamos-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1;
}

.quienes-como-ensenamos-title {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    margin: 0;
}

.quienes-como-ensenamos-text {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

/* Certificaciones Section */
.quienes-certificaciones-section {
    display: flex;
    width: 100%;
    padding: 120px 100px;
    background: url('assets/images/Home/bg_home_04.png') lightgray center / cover no-repeat;
    transform: scaleX(-1);
}

.quienes-certificaciones-container {
    width: 100%;
    transform: scaleX(-1);
}

.quienes-certificaciones-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.quienes-certificaciones-title {
    color: var(--Purple-base, #5B318C);
    text-align: center;
    font-family: Urbanist, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    margin: 0;
}

.quienes-certificaciones-subtitle {
    color: #5D5A6F;
    text-align: center;
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

.quienes-certificaciones-grid {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 80px;
    margin-top: 60px;
}

.quienes-certification-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex: 1;
    max-width: 380px;
}

.quienes-certification-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.quienes-certification-card-title {
    color: var(--Purple-base, #5B318C);
    text-align: center;
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    margin: 0;
}

.quienes-certification-card-description {
    color: #5D5A6F;
    text-align: center;
    font-family: Urbanist, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

/* ========================================
   Courses Catalog Page
======================================== */
.courses-catalog-page .page-header {
    display: flex;
    width: 100%;
    padding: 120px 100px 80px 100px;
    background: url('assets/images/Home/hero_bg.webp') lightgray center / cover no-repeat;
}

.courses-catalog-page .page-header .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.courses-catalog-page .page-header h1 {
    color: var(--Purple-base, #5B318C);
    font-family: Urbanist, sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 52px;
    margin: 0;
}

.courses-catalog-page .page-header p {
    color: var(--Negro, #353535);
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
    max-width: 800px;
}

/* ========================================
   Shop / WooCommerce Styles
======================================== */
/* Mobile filter button - hidden by default on desktop */
.mobile-filter-btn {
    display: none;
    border-radius: 4px;
    border: 1px solid var(--Purple-2, #7754A0);
    background: var(--Purple-base, #5B318C);
    box-shadow: 0 -2px 6px 0 #7754A0 inset;
    width: 32px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    aspect-ratio: 1/1;
    cursor: pointer;
}

.mobile-filter-btn svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   Responsive
======================================== */
@media (max-width: 992px) {
    .header-container {
        padding: 0 20px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "menu logo cart";
        align-items: center;
        gap: 15px;
    }

    .mobile-menu-toggle {
        display: flex;
        grid-area: menu;
        order: 1;
    }

    .site-logo {
        grid-area: logo;
        order: 2;
        justify-self: center;
    }

    .header-actions {
        grid-area: cart;
        order: 3;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .main-navigation {
        display: none;
    }

    .header-actions .btn,
    .header-actions .btn-outline,
    .header-actions .btn-primary,
    .header-actions button,
    .header-actions a.btn {
        display: none !important;
    }

    .header-actions .messages-button {
        display: none !important;
    }

    .header-actions .cart-button {
        display: flex !important;
    }
}

@media (max-width: 992px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-section {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "description"
            "image"
            "buttons";
        height: auto;
        padding: 40px 20px;
        gap: 24px;
    }

    .hero-content-left {
        width: 100%;
        display: contents;
    }

    .hero-content-right {
        grid-area: image;
        width: 100%;
    }

    .hero-title {
        grid-area: title;
    }

    .hero-description {
        grid-area: description;
    }

    .hero-buttons {
        grid-area: buttons;
    }

    .hero-title {
        font-size: 24px;
        line-height: 30px;
        text-align: left;
    }

    .hero-description {
        font-size: 16px;
        line-height: 22px;
        text-align: left;
    }

    .hero-image {
        width: 100%;
        max-width: 100%;
    }

    .hero-buttons {
        display: flex;
        flex-direction: row;
        gap: 12px;
        width: 100%;
    }

    .hero-buttons .btn {
        flex: 1;
        font-size: 14px;
        padding: 12px 16px;
        justify-content: center;
        white-space: nowrap;
    }

    .hero-buttons .btn svg {
        width: 13px;
        height: 13px;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    /* Courses Section Mobile */
    .courses-section {
        padding: 40px 20px;
    }

    .courses-container {
        display: flex;
        flex-direction: column;
    }

    .courses-header {
        display: contents;
    }

    .courses-header-content {
        gap: 12px;
        order: 1;
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
    }

    .section-title {
        font-size: 24px;
        line-height: 30px;
    }

    .section-description {
        font-size: 16px;
        line-height: 22px;
    }

    .courses-grid {
        order: 2;
    }

    .courses-header-action {
        order: 3;
        width: 100%;
        margin-top: 0;
        display: flex;
    }

    .courses-header-action .btn {
        width: 100%;
        justify-content: center;
    }

    /* Convertir grid en carrusel horizontal */
    .courses-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        margin-bottom: 24px;
        padding: 0 0 16px 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        grid-template-columns: none;
    }

    .courses-grid::-webkit-scrollbar {
        height: 4px;
    }

    .courses-grid::-webkit-scrollbar-track {
        background: #EFEAF4;
        border-radius: 4px;
    }

    .courses-grid::-webkit-scrollbar-thumb {
        background: #7754A0;
        border-radius: 4px;
    }

    /* Course Card Mobile */
    .course-card {
        width: 181px;
        height: 255px;
        min-width: 181px;
        padding: 4px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .course-badges {
        margin-bottom: 60px;
    }

    .course-duration-badge {
        font-size: 8px;
        padding: 3px 6px;
    }

    .add-to-cart-btn {
        width: 20px;
        height: 20px;
        padding: 3px;
    }

    .add-to-cart-btn svg {
        width: 10px;
        height: 10px;
    }

    .course-content {
        padding: 6px 8px;
        gap: 4px;
        min-height: 90px;
        display: flex;
        flex-direction: column;
    }

    .course-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        width: 100%;
    }

    .course-title {
        max-width: 100%;
        width: 100%;
    }

    .course-title a {
        color: #353535;
        font-family: Urbanist, sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .course-price {
        color: #53924B !important;
        font-family: Urbanist, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 12px !important;
        text-align: left !important;
        align-self: flex-start !important;
        margin-left: 0 !important;
        white-space: normal !important;
    }

    .course-excerpt {
        color: #353535 !important;
        font-family: Urbanist, sans-serif !important;
        font-size: 7px !important;
        font-weight: 400 !important;
        line-height: 9px !important;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: auto !important;
    }

    .course-link {
        font-size: 9px;
        padding: 4px 8px;
        align-self: stretch;
        text-align: center;
    }

    .course-link svg {
        width: 10px;
        height: 10px;
    }

    /* About Section Mobile */
    .about-section {
        padding: 40px 20px;
        background: none;
    }

    .about-container {
        padding: 0;
    }

    .about-card {
        display: flex;
        flex-direction: column;
        padding: 40px 20px;
        border-radius: 24px;
        min-height: auto;
        gap: 24px;
    }

    .about-content-left {
        display: contents;
    }

    .about-content-right {
        order: 3;
    }

    .about-title {
        order: 1;
        font-size: 24px;
        line-height: 30px;
        text-align: left;
    }

    .about-description {
        order: 2;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        margin-bottom: 0;
    }

    .about-buttons {
        order: 4;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        gap: 12px;
    }

    .about-buttons .btn {
        flex: 1;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .about-image {
        max-height: 280px;
        width: auto;
        margin: 0 auto;
    }

    /* Certifications Section Mobile */
    .certifications-section {
        padding: 40px 20px;
    }

    .certifications-container {
        padding: 0;
    }

    .certifications-title {
        font-size: 24px;
        line-height: 30px;
        text-align: center;
        margin-bottom: 16px;
    }

    .certifications-subtitle {
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        margin-bottom: 32px;
    }

    .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .certification-card {
        max-width: 100%;
        gap: 8px;
    }

    .certification-image {
        width: 100px;
        height: 100px;
    }

    .certification-card-title {
        font-size: 14px;
        line-height: 18px;
    }

    .certification-card-description {
        font-size: 10px;
        line-height: 14px;
    }

    /* CTA Section Mobile */
    .cta-section {
        padding: 40px 20px;
        background: #FFFFFF;
    }

    .cta-container {
        padding: 0;
    }

    .certification-video-card {
        width: 100%;
        height: auto;
        min-height: 300px;
        padding: 24px;
        border-radius: 24px;
        margin: 0;
    }

    .certification-video-box {
        flex-direction: column;
    }

    .certification-video-left {
        width: 100%;
        padding: 20px;
        gap: 12px;
    }

    .certification-video-right {
        display: none;
    }

    .certification-video-title {
        font-size: 24px;
        line-height: 30px;
        text-align: left;
    }

    .certification-video-description {
        font-size: 14px;
        line-height: 20px;
        text-align: left;
    }

    .certification-video-buttons {
        flex-direction: row;
        width: 100%;
        gap: 12px;
    }

    .certification-video-buttons .btn {
        flex: 1;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Testimonials Section Mobile */
    .testimonials-section {
        padding: 40px 20px;
    }

    .testimonials-title {
        font-size: 24px;
        line-height: 30px;
        text-align: center;
        margin-bottom: 12px;
    }

    .testimonials-subtitle {
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        margin-bottom: 24px;
    }

    /* Convert vertical columns to horizontal carousel */
    .testimonials-carousel-wrapper {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;
        padding-bottom: 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        max-width: 100%;
    }

    .testimonials-carousel-wrapper::-webkit-scrollbar {
        height: 4px;
    }

    .testimonials-carousel-wrapper::-webkit-scrollbar-track {
        background: #EFEAF4;
        border-radius: 4px;
    }

    .testimonials-carousel-wrapper::-webkit-scrollbar-thumb {
        background: #7754A0;
        border-radius: 4px;
    }

    .testimonial-column {
        display: none;
    }

    /* Show only first column and make it horizontal */
    .testimonial-column:first-child {
        display: flex;
        width: auto;
        height: auto;
        overflow: visible;
    }

    .testimonial-column:first-child::before,
    .testimonial-column:first-child::after {
        display: none;
    }

    .testimonial-track {
        display: flex;
        flex-direction: row;
        gap: 16px;
        animation: none;
    }

    .testimonial-card {
        width: 280px;
        min-width: 280px;
        height: auto;
        scroll-snap-align: start;
    }

    .testimonial-card-content {
        padding: 20px;
        gap: 12px;
        height: 100%;
    }

    .testimonial-author {
        gap: 10px;
    }

    .testimonial-avatar {
        width: 40px;
        height: 40px;
    }

    .testimonial-name {
        font-size: 14px;
        line-height: 18px;
    }

    .testimonial-role {
        font-size: 12px;
        line-height: 16px;
    }

    .testimonial-text {
        font-size: 12px;
        line-height: 18px;
    }

    /* Blog Section Mobile */
    .blog-section {
        padding: 40px 20px;
    }

    .blog-container {
        display: flex;
        flex-direction: column;
    }

    .blog-header {
        display: contents;
    }

    .blog-header-content {
        order: 1;
        gap: 12px;
        margin-bottom: 24px;
    }

    .blog-title {
        font-size: 24px;
        line-height: 30px;
        text-align: left;
    }

    .blog-subtitle {
        font-size: 14px;
        line-height: 20px;
        text-align: left;
    }

    .blog-carousel-wrapper {
        order: 2;
        gap: 24px;
    }

    .blog-carousel-track {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 8px;
    }

    .blog-carousel-track::-webkit-scrollbar {
        height: 4px;
    }

    .blog-carousel-track::-webkit-scrollbar-track {
        background: #EFEAF4;
        border-radius: 4px;
    }

    .blog-carousel-track::-webkit-scrollbar-thumb {
        background: #7754A0;
        border-radius: 4px;
    }

    .blog-cards-container {
        gap: 16px;
    }

    .blog-card {
        width: 260px;
        min-width: 260px;
        scroll-snap-align: start;
    }

    .blog-card-image {
        height: 120px;
    }

    .blog-card-date {
        font-size: 10px;
        padding: 4px 8px;
    }

    .blog-card-content {
        padding: 12px;
        gap: 8px;
    }

    .blog-card-title {
        font-size: 14px;
        line-height: 18px;
    }

    .blog-card-description {
        font-size: 11px;
        line-height: 16px;
        -webkit-line-clamp: 2;
    }

    .blog-card-link {
        font-size: 12px;
    }

    .blog-card-link svg {
        width: 14px;
        height: 14px;
    }

    /* Hide desktop carousel controls */
    .blog-carousel-controls {
        display: none;
    }

    /* Button below carousel */
    .blog-header-action {
        order: 3;
        width: 100%;
        margin-top: 0;
    }

    .blog-header-action .btn {
        width: 100%;
        justify-content: center;
    }

    /* Final CTA Section Mobile */
    .final-cta-section {
        flex-direction: column;
        height: auto;
        padding: 40px 20px;
        gap: 24px;
    }

    .final-cta-content-left {
        display: contents;
    }

    .final-cta-title {
        order: 1;
        font-size: 24px;
        line-height: 30px;
        text-align: left;
    }

    .final-cta-description {
        order: 2;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
    }

    .final-cta-content-right {
        order: 3;
        width: 100%;
    }

    .final-cta-image {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        display: block;
    }

    .final-cta-buttons {
        order: 4;
        flex-direction: row;
        width: 100%;
        gap: 12px;
    }

    .final-cta-buttons .btn {
        flex: 1;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Footer Mobile */
    .site-footer {
        padding: 40px 20px;
        gap: 40px;
    }

    .footer-row {
        flex-direction: column;
        gap: 24px;
    }

    .footer-newsletter {
        width: 100%;
        gap: 20px;
    }

    /* Logo and scroll-to-top row */
    .newsletter-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
    }

    .footer-logo {
        width: 140px;
        height: auto;
    }

    /* Show mobile scroll-to-top, hide desktop one */
    .scroll-to-top-mobile {
        display: flex !important;
        width: 36px;
        height: 36px;
        padding: 8px;
        transform: rotate(-90deg);
    }

    .scroll-to-top-mobile svg {
        width: 20px;
        height: 20px;
    }

    .footer-row > .scroll-to-top {
        display: none !important;
    }

    /* Newsletter text */
    .newsletter-text {
        display: block;
    }

    .newsletter-title,
    .newsletter-subtitle {
        font-size: 20px;
        line-height: 26px;
        display: inline;
    }

    .newsletter-form-wrapper {
        gap: 16px;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 16px;
    }

    .newsletter-input {
        width: 100%;
        height: 64px;
        font-size: 16px;
    }

    .newsletter-button {
        width: 100%;
        height: auto;
        padding: 16px 20px;
    }

    .newsletter-disclaimer {
        font-size: 12px;
        line-height: 16px;
    }

    .footer-social {
        order: 3;
        align-items: center;
        gap: 10px;
    }

    .social-title {
        font-size: 12px;
    }

    .social-icons {
        gap: 20px;
    }

    /* Navigation columns */
    .footer-nav-column {
        padding: 0;
        width: 100%;
    }

    .footer-nav-column ul {
        gap: 0;
    }

    .footer-nav-column ul li {
        padding: 8px 0;
    }

    .footer-nav-column ul li a {
        font-size: 14px;
        line-height: 18px;
    }

    /* Contact column */
    .footer-contact {
        width: 100%;
        gap: 10px;
    }

    .contact-header {
        font-size: 14px;
    }

    .contact-label {
        font-size: 12px;
        line-height: 16px;
    }

    .contact-label svg {
        width: 14px;
        height: 14px;
    }

    .contact-value {
        font-size: 14px;
        line-height: 18px;
    }

    /* Footer bottom */
    .footer-bottom-wrapper {
        gap: 10px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-copyright {
        width: 100%;
        text-align: center;
        font-size: 12px;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: flex-start;
    }

    .footer-links a {
        font-size: 12px;
    }

    /* Auth Modals Mobile */
    .auth-modal-content {
        padding: 40px 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
    }

    .auth-modal-content-register {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh !important;
    }

    .auth-modal-close {
        top: 16px !important;
        right: 16px !important;
    }

    .auth-modal-logo img {
        max-width: 120px !important;
    }

    .auth-modal-title {
        font-size: 22px !important;
        line-height: 28px !important;
        margin-bottom: 8px !important;
    }

    .auth-modal-subtitle {
        font-size: 13px !important;
        line-height: 18px !important;
        margin-bottom: 20px !important;
    }

    .auth-form {
        gap: 16px !important;
    }

    .auth-form-group label {
        font-size: 12px !important;
    }

    .auth-form-group input {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    /* Register form - single column on mobile */
    .auth-form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .auth-form-checkbox span {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    .auth-form-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .auth-form-buttons .btn {
        width: 100% !important;
    }

    .auth-forgot-link {
        font-size: 14px !important;
    }

    /* Hide decorative bubbles on mobile */
    .auth-modal-content::before,
    .auth-modal-content::after,
    .auth-form::before,
    .auth-form::after {
        display: none;
    }

    /* Blog Hero Mobile */
    .blog-hero-section {
        padding: 80px 20px 60px 20px !important;
    }

    .blog-breadcrumb {
        gap: 12px !important;
    }

    .breadcrumb-back-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 10px !important;
    }

    .breadcrumb-back-btn svg {
        width: 12px !important;
        height: 12px !important;
    }

    .breadcrumb-trail {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .blog-hero-heading {
        font-size: 32px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
        margin: 24px 0 0 0 !important;
        max-width: 100% !important;
    }

    .blog-hero-description {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 400 !important;
        margin: 12px 0 0 0 !important;
        max-width: 100% !important;
    }

    /* Blog Filters Mobile */
    .blog-filters-section {
        padding: 40px 20px 0 20px !important;
    }

    .blog-filters-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
    }

    /* Hide desktop buttons, show mobile dropdown */
    .blog-category-filters-desktop {
        display: none !important;
    }

    .blog-category-filters-mobile {
        display: block !important;
        width: 100%;
    }

    .blog-category-mobile-btn {
        padding: 14px 40px 14px 20px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .blog-category-mobile-option {
        padding: 14px 20px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .blog-sort-wrapper {
        width: 100%;
        justify-content: space-between !important;
    }

    .blog-sort-label {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .blog-sort-btn {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    /* Blog Posts Grid Mobile */
    .blog-posts-section {
        padding: 30px 20px 60px 20px !important;
    }

    .blog-posts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        margin-bottom: 40px !important;
    }

    .blog-post-card {
        border-radius: 16px !important;
    }

    .blog-post-image {
        height: 140px !important;
    }

    .blog-post-date-wrapper {
        padding: 8px !important;
    }

    .blog-post-date {
        padding: 4px 10px !important;
        font-size: 10px !important;
        line-height: 14px !important;
    }

    .blog-post-content {
        padding: 12px !important;
        gap: 8px !important;
    }

    .blog-post-categories {
        gap: 6px !important;
    }

    .blog-post-category {
        padding: 4px 10px !important;
        font-size: 10px !important;
        line-height: 14px !important;
    }

    .blog-post-title a {
        font-size: 14px !important;
        line-height: 18px !important;
        font-weight: 600 !important;
    }

    .blog-post-excerpt {
        font-size: 11px !important;
        line-height: 15px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .blog-post-link {
        font-size: 11px !important;
        line-height: 14px !important;
        gap: 4px !important;
    }

    .blog-post-link svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Blog Pagination Mobile */
    .blog-pagination {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: center !important;
    }

    .pagination-info {
        font-size: 12px !important;
    }

    .pagination-numbers {
        font-size: 12px !important;
    }

    .pagination-numbers a,
    .pagination-numbers span {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* Single Post Mobile */
    .single-post-hero-section .single-post-hero-container {
        padding: 80px 20px 40px 20px !important;
    }

    .single-post-breadcrumb {
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .breadcrumb-back-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 10px !important;
    }

    .breadcrumb-back-btn svg {
        width: 12px !important;
        height: 12px !important;
    }

    .breadcrumb-trail {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .article-layout {
        flex-direction: column !important;
        gap: 30px !important;
        margin-top: 24px !important;
    }

    .article-column {
        width: 100% !important;
    }

    .article-title {
        font-size: 32px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
        margin: 0 0 12px 0 !important;
    }

    .article-description {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 400 !important;
        margin: 0 0 16px 0 !important;
    }

    .article-badges {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .badge-category {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }

    .badge-date {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }

    .badge-date svg {
        width: 16px !important;
        height: 16px !important;
    }

    .badge-share {
        width: 36px !important;
        height: 36px !important;
        padding: 10px !important;
    }

    .badge-share svg {
        width: 14px !important;
        height: 14px !important;
    }

    .article-featured-image {
        height: 200px !important;
        margin-top: 24px !important;
        border-radius: 8px !important;
    }

    .article-content {
        font-size: 14px !important;
        line-height: 18px !important;
        margin-top: 20px !important;
    }

    /* Recommendations Aside Mobile - Carousel */
    .recommendations-aside {
        width: 100% !important;
        padding: 24px 0 24px 0 !important;
        gap: 0 !important;
        border-radius: 16px !important;
        background: var(--Purple-1, #EFEAF4) !important;
    }

    .recommendations-aside h3 {
        font-size: 20px !important;
        line-height: 24px !important;
        margin: 0 0 16px 20px !important;
        padding: 0 !important;
    }

    .recommendations-carousel-wrapper {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 20px 16px 20px;
        width: 100%;
        align-items: stretch;
    }

    .recommendations-carousel-wrapper::-webkit-scrollbar {
        display: none;
    }

    .recommended-post-card {
        flex-direction: column !important;
        padding: 10px !important;
        gap: 12px !important;
        border-radius: 16px !important;
        min-width: 280px !important;
        width: 280px !important;
        min-height: 340px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        display: flex !important;
    }

    .rec-post-image {
        width: 100% !important;
        height: 140px !important;
        border-radius: 8px !important;
    }

    .rec-post-content {
        gap: 8px !important;
    }

    .rec-post-badges {
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    .rec-post-date-badge {
        padding: 4px 12px !important;
        font-size: 10px !important;
        line-height: 14px !important;
    }

    .rec-post-category-badge {
        padding: 4px 12px !important;
        font-size: 10px !important;
        line-height: 14px !important;
    }

    .rec-post-title {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .rec-post-subtitle {
        font-size: 11px !important;
        line-height: 15px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .rec-post-link {
        font-size: 11px !important;
        line-height: 14px !important;
        padding: 6px !important;
    }

    .rec-post-link svg {
        width: 14px !important;
        height: 14px !important;
    }

    .view-all-btn {
        width: calc(100% - 40px) !important;
        padding: 14px 18px !important;
        font-size: 14px !important;
        line-height: 18px !important;
        margin: 0 20px !important;
        align-self: center !important;
    }

    /* Single Post Navigation Mobile */
    .single-post-content-section .single-post-content-container {
        padding: 30px 20px !important;
    }

    .post-navigation-wrapper {
        display: flex;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .post-nav-link {
        gap: 8px !important;
    }

    .post-nav-link svg {
        width: 20px !important;
        height: 20px !important;
    }

    .post-nav-label {
        font-size: 12px !important;
    }

    .post-nav-title {
        font-size: 14px !important;
    }

    /* Related Posts Mobile */
    .related-posts-section {
        padding: 40px 20px !important;
    }

    .related-posts-container {
        padding: 0 !important;
    }

    .related-posts-title {
        font-size: 24px !important;
        line-height: 30px !important;
        margin-bottom: 20px !important;
    }

    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .related-post-card {
        border-radius: 16px !important;
    }

    .related-post-image {
        height: 140px !important;
    }

    .related-post-date-wrapper {
        padding: 8px !important;
    }

    .related-post-date {
        padding: 4px 10px !important;
        font-size: 10px !important;
        line-height: 14px !important;
    }

    .related-post-content {
        padding: 12px !important;
        gap: 8px !important;
    }

    .related-post-category {
        padding: 4px 10px !important;
        font-size: 10px !important;
        line-height: 14px !important;
    }

    .related-post-title a {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .related-post-excerpt {
        font-size: 11px !important;
        line-height: 15px !important;
    }

    .related-post-link {
        font-size: 11px !important;
        line-height: 14px !important;
        gap: 4px !important;
    }

    .related-post-link svg {
        width: 14px !important;
        height: 14px !important;
    }

    .related-posts-action {
        margin-top: 20px !important;
        text-align: center;
    }

    .related-posts-action .btn {
        padding: 14px 20px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    /* Contact Hero Mobile */
    .contact-hero-section {
        padding: 80px 20px 60px 20px !important;
    }

    .contact-breadcrumb {
        gap: 12px !important;
    }

    .contact-breadcrumb .breadcrumb-back-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 10px !important;
    }

    .contact-breadcrumb .breadcrumb-back-btn svg {
        width: 12px !important;
        height: 12px !important;
    }

    .contact-breadcrumb .breadcrumb-trail {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .contact-hero-heading {
        font-size: 32px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
        margin: 24px 0 0 0 !important;
        max-width: 100% !important;
    }

    .contact-hero-description {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 400 !important;
        margin: 12px 0 0 0 !important;
        max-width: 100% !important;
    }

    /* Contact Form Section Mobile */
    .contact-form-section {
        padding: 40px 20px !important;
    }

    .contact-form-wrapper {
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* Contact Info Column */
    .contact-info-column {
        width: 100% !important;
        gap: 20px !important;
    }

    .contact-info-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .contact-info-subtitle {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    .contact-cards {
        gap: 16px !important;
    }

    .contact-card {
        padding: 20px !important;
    }

    .contact-addresses-wrapper {
        flex-direction: column !important;
    }

    .contact-card-address {
        width: 100% !important;
    }

    .contact-card-title {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .contact-card-value-small {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .contact-card-address {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    /* Contact Form Column */
    .contact-form-column {
        width: 100% !important;
        flex: none !important;
    }

    .contact-form-card {
        padding: 24px 20px !important;
    }

    .contact-form-title {
        font-size: 20px !important;
        line-height: 26px !important;
        margin-bottom: 20px !important;
    }

    .contact-form {
        gap: 16px !important;
    }

    /* Form rows - single column except phone */
    .contact-form-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Keep phone wrapper as row (país + teléfono) */
    .contact-form-row:nth-child(2) {
        flex-direction: column !important;
    }

    .contact-form-row:nth-child(2) .contact-form-field:last-child {
        width: 100% !important;
    }

    .contact-form-phone-wrapper {
        display: grid !important;
        grid-template-columns: 100px 1fr !important;
        gap: 8px !important;
    }

    .contact-form-field {
        width: 100% !important;
    }

    .contact-form-label {
        font-size: 14px !important;
        line-height: 18px !important;
        margin-bottom: 6px !important;
    }

    .contact-form-input,
    .contact-form-textarea {
        font-size: 14px !important;
        padding: 12px 14px !important;
    }

    .contact-form-phone-select {
        font-size: 14px !important;
        padding: 12px 8px !important;
    }

    .contact-form-checkbox-label {
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .contact-form-submit {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    /* Contact FAQ Section Mobile */
    .contact-faq-section {
        padding: 40px 20px !important;
    }

    .contact-faq-wrapper {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .contact-faq-info-column {
        width: 100% !important;
        gap: 12px !important;
    }

    .contact-faq-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .contact-faq-subtitle {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    .contact-faq-items-column {
        width: 100% !important;
    }

    .faq-item {
        border-radius: 16px !important;
        border-width: 1px !important;
    }

    .faq-question {
        padding: 16px !important;
        gap: 12px !important;
    }

    .faq-question-text {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    .faq-arrow {
        width: 40px !important;
        height: 40px !important;
    }

    .faq-answer {
        padding: 0 16px !important;
    }

    .faq-question[aria-expanded="true"] + .faq-answer {
        padding: 0 16px 16px 16px !important;
    }

    .faq-answer-text {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    /* Quienes Somos Hero Mobile */
    .quienes-hero-section {
        padding: 80px 20px 60px 20px !important;
    }

    .quienes-hero-wrapper {
        flex-direction: column !important;
        gap: 32px !important;
    }

    .quienes-hero-content {
        gap: 16px !important;
    }

    .quienes-hero-title {
        font-size: 32px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
        max-width: 100% !important;
    }

    .quienes-hero-subtitle {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 400 !important;
        max-width: 100% !important;
    }

    .quienes-hero-image {
        width: 100% !important;
    }

    .quienes-hero-image img {
        max-width: 100% !important;
    }

    /* Quienes Somos - Lo Que Hacemos Section Mobile */
    .quienes-cursos-section {
        padding: 60px 20px !important;
    }

    .quienes-cursos-wrapper {
        flex-direction: column !important;
        gap: 32px !important;
    }

    .quienes-cursos-content {
        gap: 16px !important;
        width: 100% !important;
    }

    .quienes-cursos-title {
        font-size: 32px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
    }

    .quienes-cursos-text {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 400 !important;
    }

    .quienes-cursos-video {
        width: 100% !important;
        height: 250px !important;
        flex: none !important;
    }

    .quienes-cursos-video-player,
    .quienes-cursos-image {
        width: 100% !important;
        height: 100% !important;
        border-radius: 20px !important;
    }

    /* Misión y Visión Cards Mobile */
    .quienes-mision-vision-wrapper {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .mision-vision-card {
        width: 100% !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 24px 20px !important;
        gap: 16px !important;
    }

    .mision-vision-image {
        width: 80px !important;
        height: 80px !important;
    }

    .mision-vision-content {
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .mision-vision-title {
        font-size: 20px !important;
        line-height: 26px !important;
        text-align: center !important;
    }

    .mision-vision-text {
        font-size: 14px !important;
        line-height: 18px !important;
        text-align: center !important;
    }

    /* Quienes Somos - Cómo Enseñamos Section Mobile */
    .quienes-como-ensenamos-section {
        padding: 60px 20px !important;
    }

    .quienes-como-ensenamos-wrapper {
        flex-direction: column !important;
        gap: 32px !important;
    }

    .quienes-como-ensenamos-content {
        order: 1 !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .quienes-como-ensenamos-video {
        order: 2 !important;
        width: 100% !important;
        height: 250px !important;
        flex: none !important;
    }

    .quienes-como-ensenamos-title {
        font-size: 32px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
    }

    .quienes-como-ensenamos-text {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 400 !important;
    }

    .quienes-como-ensenamos-video-player,
    .quienes-como-ensenamos-image {
        width: 100% !important;
        height: 100% !important;
        border-radius: 20px !important;
    }

    /* Quienes Somos - Certificaciones Section Mobile */
    .quienes-certificaciones-section {
        padding: 60px 20px !important;
    }

    .quienes-certificaciones-content {
        gap: 16px !important;
    }

    .quienes-certificaciones-title {
        font-size: 32px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
    }

    .quienes-certificaciones-subtitle {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 400 !important;
    }

    .quienes-certificaciones-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        margin-top: 32px !important;
    }

    .quienes-certification-card {
        max-width: 100% !important;
        gap: 12px !important;
    }

    .quienes-certification-card:nth-child(3) {
        grid-column: 1 / -1 !important;
        max-width: 300px !important;
        justify-self: center !important;
    }

    .quienes-certification-image {
        width: 80px !important;
        height: 80px !important;
    }

    .quienes-certification-card-title {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    .quienes-certification-card-description {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    /* Courses Catalog Page Header */
    .courses-catalog-page .page-header {
        padding: 80px 20px 60px 20px !important;
    }

    .courses-catalog-page .page-header h1 {
        font-size: 32px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
    }

    .courses-catalog-page .page-header p {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 400 !important;
    }

    /* Shop Hero Section */
    .shop-hero-section {
        padding: 60px 20px !important;
    }

    .shop-hero-heading {
        font-size: 32px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
    }

    .shop-hero-description {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 400 !important;
    }

    /* Shop Main Wrapper */
    .australis-woocommerce-wrapper {
        padding: 40px 20px !important;
    }

    /* Hide sidebar in mobile */
    .shop-sidebar {
        display: none !important;
    }

    /* Show filter button in mobile */
    .mobile-filter-btn {
        display: flex !important;
    }

    /* Shop with sidebar layout */
    .shop-with-sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* Course search wrapper */
    .course-search-wrapper {
        margin-bottom: 24px !important;
    }

    .course-search-form {
        display: flex !important;
        gap: 8px !important;
    }

    .course-search-form input {
        flex: 1 !important;
    }

    .course-search-btn {
        padding: 12px 16px !important;
    }

    .course-search-btn span {
        display: none !important;
    }

    /* Products grid - 2 columns */
    .products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Shop FAQ Section */
    .shop-faq-section {
        padding: 60px 20px !important;
    }

    .shop-faq-wrapper {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .shop-faq-title {
        font-size: 32px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
        margin-bottom: 16px !important;
    }

    .shop-faq-subtitle {
        font-size: 20px !important;
        line-height: 24px !important;
    }

    .faq-item {
        padding: 16px !important;
    }

    .faq-question-text {
        font-size: 16px !important;
        line-height: 20px !important;
        padding-right: 10px !important;
    }

    .faq-arrow {
        width: 24px !important;
        height: 24px !important;
    }

    .faq-answer-text {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    /* Course Info Icons Section */
    .course-info-icons-card {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: space-between !important;
    }

    .info-icon-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        flex: 0 0 calc(20% - 10px) !important;
        min-width: 0 !important;
    }

    .info-icon-item svg {
        width: 20px !important;
        height: 20px !important;
    }

    .info-icon-label {
        color: var(--Negro, #353535) !important;
        text-align: center !important;
        font-family: Urbanist !important;
        font-size: 8px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
    }

    .info-icon-value {
        color: var(--Negro, #353535) !important;
        text-align: center !important;
        font-family: Urbanist !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 300 !important;
        line-height: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
    }

    /* Course Right Column - Learning Objectives */
    .course-right-column {
        padding: 0 !important;
    }

    .objectives-list {
        padding-left: 0 !important;
    }

    .objective-item {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .objective-item span {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .section-title {
        font-size: 18px !important;
        line-height: 22px !important;
    }

    /* Course Main Section */
    .course-main-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Instructor Section - Sidebar Menu and Tab Content */
    .download-program-btn {
        width: 100% !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
        line-height: 20px !important;
    }

    .payment-card {
        padding: 16px !important;
    }

    .installment-price {
        font-size: 20px !important;
        line-height: 24px !important;
    }

    .total-price {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .tab-main-title {
        font-size: 20px !important;
        line-height: 24px !important;
    }

    .tab-description {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .learning-objectives-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .objective-item-tab {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .schedule-item {
        padding: 12px !important;
    }

    .schedule-day {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .schedule-time {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    .program-item-header {
        padding: 12px !important;
    }

    .program-item-title {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .program-item-text {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .topic-item {
        font-size: 13px !important;
        line-height: 17px !important;
        padding: 8px 12px !important;
    }

    .buy-button {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px 20px !important;
    }

    .free-class-card {
        padding: 16px !important;
    }

    .free-class-title {
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .free-class-btn {
        width: 100% !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
    }

    .sidebar-menu-item {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    .tab-content-area {
        padding: 16px 10px !important;
    }

    /* Mobile Filters Modal */
    .mobile-filters-modal {
        backdrop-filter: blur(2px);
    }

    .mobile-filters-body {
        -webkit-overflow-scrolling: touch;
    }

    .accordion-item-mobile:active {
        background: var(--Purple-1, #EFEAF4) !important;
    }

    .clear-filters-btn:active {
        background: var(--Purple-1, #EFEAF4) !important;
    }

    #apply-filters-btn:active {
        background: var(--Purple-2, #7754A0) !important;
    }

    .filter-chip:active {
        opacity: 0.8;
    }
}

/* ========================================
   Auth Modals (Login/Register)
======================================== */
.auth-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.auth-modal.active {
    display: flex;
    opacity: 1;
}

.auth-modal-content {
    background: var(--blanco);
    border-radius: 20px;
    padding: 60px 40px;
    max-width: 655px;
    width: 90%;
    height: auto;
    min-height: 655px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.3s ease;
    overflow: hidden;
}

/* Register Modal specific styles */
.auth-modal-content-register {
    max-width: 900px;
    width: 90%;
    height: auto;
    min-height: 700px;
}

/* Decorative background circles */
.auth-modal-content::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: rgba(239, 234, 244, 0.5);
    border-radius: 50%;
    top: -40px;
    left: -40px;
    z-index: 0;
    pointer-events: none;
    animation: floatBubble1 8s ease-in-out infinite;
}

.auth-modal-content::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: rgba(239, 234, 244, 0.5);
    border-radius: 50%;
    bottom: -30px;
    right: -30px;
    z-index: 0;
    pointer-events: none;
    animation: floatBubble2 10s ease-in-out infinite;
}

/* Bubble float animations */
@keyframes floatBubble1 {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(10px, -15px);
    }
    50% {
        transform: translate(-5px, -10px);
    }
    75% {
        transform: translate(15px, -5px);
    }
}

@keyframes floatBubble2 {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(-12px, 8px);
    }
    66% {
        transform: translate(8px, -10px);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.auth-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    z-index: 10;
}

.auth-modal-close:hover {
    color: var(--purple-base);
}

.auth-modal-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.auth-modal-logo img {
    max-width: 200px;
    height: auto;
}

.auth-modal-title {
    color: var(--purple-base);
    text-align: center;
    font-family: Urbanist;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.auth-modal-subtitle {
    color: #353535;
    text-align: center;
    font-family: Urbanist;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

/* Additional decorative circles */
.auth-form::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: rgba(239, 234, 244, 0.5);
    border-radius: 50%;
    top: 50%;
    right: -20px;
    z-index: -1;
    pointer-events: none;
    animation: floatBubble5 11s ease-in-out infinite;
}

.auth-form::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: rgba(239, 234, 244, 0.5);
    border-radius: 50%;
    top: 20%;
    left: -15px;
    z-index: -1;
    pointer-events: none;
    animation: floatBubble6 6s ease-in-out infinite;
}

@keyframes floatBubble5 {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(10px, -15px);
    }
    66% {
        transform: translate(-8px, 12px);
    }
}

@keyframes floatBubble6 {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-10px, 8px);
    }
    75% {
        transform: translate(12px, -6px);
    }
}

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-form-group label {
    color: var(--purple-3);
    font-family: Urbanist;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.auth-form-group input {
    padding: 12px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-family: Urbanist;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-form-group input:focus {
    outline: none;
    border-color: var(--purple-base);
    box-shadow: 0 0 0 3px rgba(91, 49, 140, 0.1);
}

.auth-form-group input.error {
    border-color: #E53E3E;
}

/* Password field with toggle */
.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper input {
    width: 100%;
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    z-index: 2;
}

.password-toggle:hover {
    opacity: 0.7;
}

.password-toggle svg {
    display: block;
}

/* Forgot password link */
.auth-forgot-link {
    display: inline-block;
    background: none;
    border: none;
    color: var(--purple-base);
    text-align: center;
    font-family: Urbanist;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin-top: 16px;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    transition: opacity 0.2s;
}

.auth-forgot-link:hover {
    opacity: 0.7;
}

.auth-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -8px;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.auth-checkbox input {
    cursor: pointer;
}

.auth-checkbox span {
    color: var(--text-secondary);
    font-family: Urbanist;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.auth-forgot-password {
    color: var(--purple-base);
    font-family: Urbanist;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    transition: color 0.2s;
}

.auth-forgot-password:hover {
    color: var(--purple-2);
}

.auth-form-message {
    padding: 12px 16px;
    border-radius: 8px;
    font-family: Urbanist;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    display: none;
}

.auth-form-message.success {
    display: block;
    background-color: #C6F6D5;
    color: #22543D;
    border: 1px solid #9AE6B4;
}

.auth-form-message.error {
    display: block;
    background-color: #FED7D7;
    color: #742A2A;
    border: 1px solid #FC8181;
}

.btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Register form - 2 column layout */
.auth-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Checkbox for terms and conditions */
.auth-form-checkbox {
    margin-top: 8px;
}

.auth-form-checkbox .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.auth-form-checkbox input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.auth-form-checkbox span {
    color: var(--Negro, #353535);
    font-family: Urbanist;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* Buttons row for register form */
.auth-form-buttons {
    display: flex;
    gap: 40px;
    margin-top: 8px;
}

.auth-form-buttons .btn {
    flex: 1;
}

/* Form view transitions - Carousel style */
.auth-form-view {
    position: absolute;
    width: 100%;
    left: 0;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.auth-form-view.active {
    position: relative;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.auth-form-view.slide-out-left {
    transform: translateX(-100%);
    opacity: 0;
}

.auth-form-view.slide-in-right {
    transform: translateX(0);
    opacity: 1;
}

.auth-switch-text {
    text-align: center;
    color: var(--text-secondary);
    font-family: Urbanist;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 8px;
}

.auth-switch-link {
    background: none;
    border: none;
    color: var(--purple-base);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.auth-switch-link:hover {
    color: var(--purple-2);
    text-decoration: underline;
}

/* ============================================================
   LearnDash Lesson & Topic Pages
   ============================================================ */

/* Main wrapper – only target the outermost wrapper */
.learndash-wrapper.learndash-wrapper--topic,
.learndash-wrapper.learndash-wrapper--lesson {
    font-family: Urbanist, sans-serif;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 40px;
    overflow: visible !important;
    height: auto !important;
}

/* Inner shortcode wrappers should not inherit outer padding */
.learndash-wrapper .learndash-wrapper {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Fallback for other learndash-wrapper contexts (courses, etc.) */
.learndash-wrapper:not(.learndash-wrapper--topic):not(.learndash-wrapper--lesson) {
    font-family: Urbanist, sans-serif;
}

/* Infobar / Breadcrumbs + Status */
.learndash-wrapper .ld-lesson-status,
.learndash-wrapper .ld-topic-status {
    background: #f9f7fc;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
    border: 1px solid #e8e0f0;
}

.learndash-wrapper .ld-breadcrumbs {
    margin-bottom: 8px;
}

.learndash-wrapper .ld-breadcrumbs-segments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
    color: #888;
}

.learndash-wrapper .ld-breadcrumbs-segments a {
    color: #5B318C;
    text-decoration: none;
}

.learndash-wrapper .ld-breadcrumbs-segments a:hover {
    text-decoration: underline;
}

/* Status badge */
.learndash-wrapper .ld-status {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 14px;
    border-radius: 20px;
}

.learndash-wrapper .ld-status.ld-status-progress,
.learndash-wrapper .ld-status.ld-primary-background {
    background: linear-gradient(135deg, #5B318C, #7C3AED) !important;
    color: #fff !important;
}

.learndash-wrapper .ld-status.ld-status-complete,
.learndash-wrapper .ld-status.ld-secondary-background {
    background: #22c55e !important;
    color: #fff !important;
}

/* Progress bar */
.learndash-wrapper .ld-progress {
    margin-bottom: 0;
}

.learndash-wrapper .ld-progress-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.learndash-wrapper .ld-progress-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}

.learndash-wrapper .ld-progress-percentage,
.learndash-wrapper .ld-progress-percentage.ld-secondary-color {
    font-size: 12px;
    font-weight: 700;
    color: #5B318C !important;
}

.learndash-wrapper .ld-progress-bar {
    height: 6px;
    background: #e8e0f0;
    border-radius: 3px;
    overflow: hidden;
}

.learndash-wrapper .ld-progress-bar-percentage,
.learndash-wrapper .ld-progress-bar-percentage.ld-secondary-background {
    background: linear-gradient(90deg, #5B318C, #7C3AED) !important;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Content List Header (Contenido de la Lección) */
.learndash-wrapper .ld-table-list-header,
.learndash-wrapper .ld-table-list-header.ld-primary-background {
    background: linear-gradient(135deg, #5B318C 0%, #7C3AED 100%) !important;
    border-radius: 12px 12px 0 0;
    padding: 16px 24px;
}

.learndash-wrapper .ld-table-list-title .ld-text {
    font-size: 16px;
    font-weight: 600;
}

.learndash-wrapper .ld-lesson-list-progress,
.learndash-wrapper .ld-lesson-list-steps {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Content List Container */
.learndash-wrapper .ld-table-list {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e8e0f0;
    margin-bottom: 24px;
}

/* Topic list items */
.learndash-wrapper .ld-table-list-items {
    background: #fff;
}

.learndash-wrapper .ld-table-list-item {
    border-bottom: 1px solid #f0ebf5;
    transition: background 0.2s;
}

.learndash-wrapper .ld-table-list-item:last-child {
    border-bottom: none;
}

.learndash-wrapper .ld-table-list-item:hover {
    background: #faf8fc;
}

.learndash-wrapper .ld-table-list-item-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    text-decoration: none;
    color: #353535;
    font-size: 15px;
    font-weight: 400;
}

.learndash-wrapper .ld-table-list-item-preview:hover {
    color: #5B318C !important;
}

/* Status icons (circles) */
.learndash-wrapper .ld-status-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.learndash-wrapper .ld-status-icon.ld-status-incomplete {
    background: transparent;
    border: 2px solid #d1c4e9;
}

.learndash-wrapper .ld-status-icon.ld-status-complete,
.learndash-wrapper .ld-status-icon.ld-status-complete.ld-secondary-background {
    background: #22c55e !important;
    border: none;
}

.learndash-wrapper .ld-status-icon.ld-status-in-progress {
    background: transparent;
    border: 2px solid #5B318C;
}

/* Content Actions (Volver al Curso / Navigation) */
.learndash-wrapper .ld-content-actions {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 32px 0 40px !important;
    margin-top: 16px;
    margin-bottom: 0;
    overflow: visible !important;
    gap: 16px;
    height: auto !important;
}

.learndash-wrapper .ld-content-action {
    overflow: visible !important;
    flex-shrink: 0;
    padding: 8px !important;
}

/* LD Navigation shortcode wrapper – needs proper spacing */
.learndash-wrapper [class*="learndash-shortcode-wrap-ld_navigation"] {
    overflow: visible !important;
    padding: 0 0 20px 0 !important;
    margin-bottom: 20px;
}

/* Back to Lesson / Step-back link (outlined style) */
.learndash-wrapper .ld-content-action a.ld-course-step-back,
.learndash-wrapper a.ld-course-step-back {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: #5B318C !important;
    font-family: Urbanist, sans-serif;
    font-size: 14px !important;
    font-weight: 600;
    text-decoration: none !important;
    padding: 12px 32px !important;
    margin: 0 !important;
    width: auto !important;
    border: 2px solid #d1c4e9 !important;
    border-radius: 8px;
    background: #fff !important;
    transition: all 0.2s;
    white-space: nowrap;
    box-sizing: border-box;
}

.learndash-wrapper .ld-content-action a.ld-course-step-back:hover,
.learndash-wrapper a.ld-course-step-back:hover {
    background: #f9f7fc !important;
    border-color: #5B318C !important;
}

/* Primary filled buttons (.ld-button) – white text on purple */
.learndash-wrapper .ld-content-action a.ld-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none !important;
    border: none !important;
    padding: 12px 28px;
}

.learndash-wrapper .ld-content-action a.ld-button .ld-icon,
.learndash-wrapper .ld-content-action a.ld-button .ld-text {
    color: #fff !important;
}

/* Navigation arrows in step-back link */
.learndash-wrapper .ld-content-action .ld-course-step-back .ld-icon {
    color: #5B318C;
}

/* Primary color overrides */
.learndash-wrapper .ld-primary-color,
.learndash-wrapper a.ld-primary-color {
    color: #5B318C !important;
}

.learndash-wrapper .ld-primary-color-hover:hover {
    color: #5B318C !important;
}

/* Tabs (if present) */
.learndash-wrapper .ld-tabs-navigation {
    border-bottom: 2px solid #e8e0f0;
    margin-bottom: 20px;
}

.learndash-wrapper .ld-tab {
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    color: #888;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.learndash-wrapper .ld-tab.ld-active {
    color: #5B318C;
    border-bottom-color: #5B318C;
}

/* Page title */
body.single-sfwd-lessons .entry-title,
body.single-sfwd-topic .entry-title {
    font-family: Urbanist, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #353535;
    margin-bottom: 20px;
    text-align: center;
}

/* ============================================================
   LearnDash Modern Theme – Purple Brand Override
   ============================================================ */

/* Override CSS variables at root level for LearnDash */
.learndash-wrapper {
    --ld-color-primitives-blue-500: #5B318C;
    --ld-color-brand-primary: #5B318C;
    --ld-color-button-bg: #5B318C;
    --ld-color-button-bg-hover: #7C3AED;
    --ld-color-button-secondary-border: #5B318C;
    --ld-color-field-border-active: #5B318C;
}

/* Navigation container – prevent cutoff */
.learndash-wrapper .ld-navigation {
    overflow: visible;
    padding-bottom: 32px;
    margin-bottom: 20px;
}

.learndash-wrapper .ld-navigation__previous,
.learndash-wrapper .ld-navigation__next,
.learndash-wrapper .ld-navigation__progress,
.learndash-wrapper .ld-navigation__back-to-course {
    overflow: visible;
}

/* Mark Complete button – purple filled */
.learndash-wrapper .ld-navigation__progress-mark-complete-button,
.learndash-wrapper .ld-navigation__progress-mark-complete-button:active,
.learndash-wrapper .ld-navigation__progress-mark-complete-button:focus,
.learndash-wrapper .ld-navigation__progress-mark-complete-button:hover,
.learndash-wrapper .ld-navigation__progress-mark-complete-button:focus-visible {
    background-color: #5B318C !important;
    color: #fff !important;
    font-family: Urbanist, sans-serif;
    border-radius: 8px;
}

.learndash-wrapper .ld-navigation__progress-mark-complete-button:hover {
    background-color: #7C3AED !important;
}

.learndash-wrapper .ld-navigation__progress-mark-complete-button:focus {
    outline-color: #5B318C !important;
}

/* Next button (filled purple) */
.learndash-wrapper .ld-navigation__next-link--just-completed,
.learndash-wrapper .ld-navigation__next-link--just-completed:active,
.learndash-wrapper .ld-navigation__next-link--just-completed:focus,
.learndash-wrapper .ld-navigation__next-link--just-completed:hover,
.learndash-wrapper .ld-navigation__next-link--just-completed:focus-visible,
.learndash-wrapper .ld-navigation__next-link--no-user,
.learndash-wrapper .ld-navigation__next-link--no-user:active,
.learndash-wrapper .ld-navigation__next-link--no-user:focus,
.learndash-wrapper .ld-navigation__next-link--no-user:hover,
.learndash-wrapper .ld-navigation__next-link--no-user:focus-visible {
    background-color: #5B318C !important;
    color: #fff !important;
    font-family: Urbanist, sans-serif;
    border-radius: 8px;
}

.learndash-wrapper .ld-navigation__next-link--just-completed:hover,
.learndash-wrapper .ld-navigation__next-link--no-user:hover {
    background-color: #7C3AED !important;
}

.learndash-wrapper .ld-navigation__next-link--just-completed:focus,
.learndash-wrapper .ld-navigation__next-link--no-user:focus {
    outline-color: #5B318C !important;
}

/* Previous + Back to Course buttons (outlined) */
.learndash-wrapper .ld-navigation__previous-link,
.learndash-wrapper .ld-navigation__previous-link:active,
.learndash-wrapper .ld-navigation__previous-link:focus,
.learndash-wrapper .ld-navigation__previous-link:hover,
.learndash-wrapper .ld-navigation__previous-link:focus-visible,
.learndash-wrapper .ld-navigation__back-to-course-link,
.learndash-wrapper .ld-navigation__back-to-course-link:active,
.learndash-wrapper .ld-navigation__back-to-course-link:focus,
.learndash-wrapper .ld-navigation__back-to-course-link:hover,
.learndash-wrapper .ld-navigation__back-to-course-link:focus-visible {
    background-color: #fff !important;
    color: #5B318C !important;
    border: 2px solid #d1c4e9 !important;
    font-family: Urbanist, sans-serif;
    border-radius: 8px;
}

.learndash-wrapper .ld-navigation__previous-link:hover,
.learndash-wrapper .ld-navigation__back-to-course-link:hover {
    background-color: #f9f7fc !important;
    border-color: #5B318C !important;
    color: #5B318C !important;
}

.learndash-wrapper .ld-navigation__previous-link:focus,
.learndash-wrapper .ld-navigation__back-to-course-link:focus {
    outline-color: #d1c4e9 !important;
}

/* Navigation SVG icons – purple */
.learndash-wrapper .ld-navigation__previous-link svg,
.learndash-wrapper .ld-navigation__back-to-course-link svg {
    color: #5B318C !important;
}

.learndash-wrapper .ld-navigation__next-link--just-completed svg,
.learndash-wrapper .ld-navigation__next-link--no-user svg,
.learndash-wrapper .ld-navigation__progress-mark-complete-button svg {
    color: #fff !important;
}

/* Completed progress section – purple accents */
.learndash-wrapper .ld-navigation__progress-completed-action,
.learndash-wrapper .ld-navigation__progress-timer,
.learndash-wrapper .ld-navigation__icon--lesson-complete {
    color: #5B318C !important;
}

/* Mark Incomplete link */
.learndash-wrapper .ld-navigation__progress-mark-incomplete-button,
.learndash-wrapper .ld-navigation__progress-mark-incomplete-button:hover {
    color: #5B318C !important;
}

/* Next link default state (secondary) */
.learndash-wrapper .ld-navigation__next-link,
.learndash-wrapper .ld-navigation__next-link:active,
.learndash-wrapper .ld-navigation__next-link:focus,
.learndash-wrapper .ld-navigation__next-link:hover,
.learndash-wrapper .ld-navigation__next-link:focus-visible {
    font-family: Urbanist, sans-serif;
    border-radius: 8px;
}

.learndash-wrapper .ld-navigation__next-link:hover {
    border-color: #5B318C !important;
    color: #5B318C !important;
}

/* Legacy mark complete button override */
.learndash-wrapper input.learndash_mark_complete_button,
.learndash-wrapper input[type="submit"].learndash_mark_complete_button {
    background: linear-gradient(135deg, #5B318C, #7C3AED) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px;
    font-family: Urbanist, sans-serif;
    font-weight: 600;
    padding: 12px 40px 12px 20px !important;
    cursor: pointer;
    transition: opacity 0.2s;
}

.learndash-wrapper input.learndash_mark_complete_button:hover,
.learndash-wrapper input[type="submit"].learndash_mark_complete_button:hover {
    opacity: 0.9;
}

/* Mark complete form – ensure the ::after checkmark icon has space */
.learndash-wrapper .sfwd-mark-complete,
.learndash-wrapper #sfwd-mark-complete {
    position: relative;
    overflow: visible !important;
}

.learndash-wrapper .sfwd-mark-complete::after,
.learndash-wrapper #sfwd-mark-complete::after {
    right: 0.75em !important;
    color: #fff !important;
}

/* Ensure all LD containers don't clip content */
body.single-sfwd-topic,
body.single-sfwd-lessons {
    overflow: visible !important;
}

body.single-sfwd-topic .site-main,
body.single-sfwd-lessons .site-main {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
}

body.single-sfwd-topic .content-area,
body.single-sfwd-lessons .content-area {
    overflow: visible !important;
    height: auto !important;
}

body.single-sfwd-topic .container,
body.single-sfwd-lessons .container {
    overflow: visible !important;
    height: auto !important;
}

body.single-sfwd-topic article,
body.single-sfwd-lessons article {
    overflow: visible !important;
    height: auto !important;
}

body.single-sfwd-topic .entry-content,
body.single-sfwd-lessons .entry-content {
    overflow: visible !important;
    height: auto !important;
    padding-bottom: 20px;
}

/* LearnDash post wrapper – this is the critical container that wraps everything */
.learndash.learndash_post_sfwd-topic,
.learndash.learndash_post_sfwd-lessons,
.learndash[class*="learndash_post_"],
[id^="learndash_post_"],
.learndash.user_has_access {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.single-sfwd-topic .learndash-wrapper,
body.single-sfwd-lessons .learndash-wrapper {
    overflow: visible !important;
    height: auto !important;
    padding-bottom: 40px;
}

body.single-sfwd-topic #learndash-content,
body.single-sfwd-lessons #learndash-content,
body.single-sfwd-topic .learndash-content-body,
body.single-sfwd-lessons .learndash-content-body {
    overflow: visible !important;
    height: auto !important;
}

body.single-sfwd-topic .site-content,
body.single-sfwd-lessons .site-content {
    overflow: visible !important;
    height: auto !important;
}

.learndash-wrapper .ld-lesson-status,
.learndash-wrapper .ld-topic-status {
    overflow: visible !important;
}