/* ==========================================
   CD-SYSTEM BASE - DEMO ACCOUNTING-1
   Bold Edge Dark Mode — "OLED Energy"
   Compañía Digital 2026
   ========================================== */

/* === Dark Mode Foundation === */
html, body {
    background-color: var(--secondary) !important;
    color: var(--light);
}

body .main,
body > .main,
#header {
    background-color: transparent;
}

/* Header sticky: dark background when scrolled */
#header .header-body {
    background: transparent !important;
    border-bottom: 1px solid var(--primary-rgba-10) !important;
    transition: background 0.3s ease;
}

#header.header-effect-shrink .header-body {
    background: var(--secondary-rgba-100) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Nav links styling */
#header .header-nav-main nav > ul > li > a,
#header .header-nav-main nav > ul > li > a.dropdown-item {
    color: var(--light) !important;
    font-weight: 700 !important;
    font-size: 0.85em !important;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

#header .header-nav-main nav > ul > li > a:hover,
#header .header-nav-main nav > ul > li > a.active {
    color: var(--primary) !important;
}

/* Mobile nav toggle */
#header .header-btn-collapse-nav {
    background-color: var(--primary) !important;
    color: var(--secondary) !important;
    border: none !important;
}

/* Mobile nav dropdown */
#header .header-nav-main nav {
    background-color: var(--dark) !important;
}

@media (max-width: 991px) {
    #header .header-nav-main nav > ul > li {
        border-bottom: 1px solid var(--light-rgba-10);
    }

    #header .header-nav-main nav > ul > li > a {
        padding: 12px 20px !important;
    }
}

/* Dropdown menus */
#header .dropdown-menu {
    background-color: var(--dark) !important;
    border: 1px solid var(--primary-rgba-10) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

#header .dropdown-menu li a {
    color: var(--light) !important;
}

#header .dropdown-menu li a:hover {
    background-color: var(--primary) !important;
    color: var(--secondary) !important;
}

/* Typography - Respetar clases text-X del tema Porto */
/* Las clases text-X del tema Porto tienen !important, así que no las sobrescribimos */
/* Solo definimos estilos base para cuando NO se usa una clase text-X */

/* Asegurar que todos los headings tengan text-transform: none por defecto */
h1, h2, h3, h4, h5, h6 {
    text-transform: none;
}

/* IMPORTANTE: Cuando se usa una clase text-X, el tema Porto ya define el tamaño con !important */
/* NO debemos sobrescribir font-size cuando hay una clase text-X */
/* Solo aplicamos estilos base cuando NO hay clase text-X */
h1:not([class*="text-"]) {
    font-size: 3.2em;
    font-weight: 700;
    line-height: 1.3;
}

h2:not([class*="text-"]) {
    font-size: 2.4em;
    font-weight: 600;
    line-height: 1.3;
}

h3:not([class*="text-"]) {
    font-size: 1.8em;
    font-weight: 600;
    line-height: 1.3;
}

h4:not([class*="text-"]) {
    font-size: 1.4em;
    font-weight: 600;
    line-height: 1.3;
}

h5:not([class*="text-"]) {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.3;
}

h6:not([class*="text-"]) {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.3;
}

/* Asegurar que las clases text-X del tema Porto NO sean sobrescritas */
/* El tema ya tiene !important en font-size, así que respetamos eso */
/* Solo ajustamos text-transform y line-height para consistencia */

/* Asegurar que las clases text-X del tema Porto tengan prioridad absoluta */
/* El tema ya tiene !important en font-size, pero aseguramos text-transform y line-height */
/* IMPORTANTE: No sobrescribimos font-size, el tema Porto ya lo tiene con !important */

.text-2, .text-3, .text-4, .text-5, .text-6, .text-7, .text-8, .text-9, .text-10, .text-11,
.text-2-5, .text-4-5 {
    text-transform: none !important;
}

/* Line-height específicos para elementos con clases text-X (igual a lacompany) */
/* Estos line-heights complementan los tamaños del tema Porto y aseguran consistencia */
/* Aplicamos a cualquier elemento que tenga la clase text-X, incluso si es un h1, h2, etc. */
h1.text-11, h2.text-11, h3.text-11, h4.text-11, h5.text-11, h6.text-11,
.text-11 {
    line-height: 1.2 !important;
}

h1.text-10, h2.text-10, h3.text-10, h4.text-10, h5.text-10, h6.text-10,
.text-10 {
    line-height: 1.2 !important;
}

h1.text-9, h2.text-9, h3.text-9, h4.text-9, h5.text-9, h6.text-9,
.text-9 {
    line-height: 1.2 !important;
}

h1.text-8, h2.text-8, h3.text-8, h4.text-8, h5.text-8, h6.text-8,
.text-8 {
    line-height: 1.3 !important;
}

h1.text-7, h2.text-7, h3.text-7, h4.text-7, h5.text-7, h6.text-7,
.text-7 {
    line-height: 1.3 !important;
}

h1.text-6, h2.text-6, h3.text-6, h4.text-6, h5.text-6, h6.text-6,
.text-6 {
    line-height: 1.3 !important;
}

h1.text-5, h2.text-5, h3.text-5, h4.text-5, h5.text-5, h6.text-5,
.text-5 {
    line-height: 1.3 !important;
}

h1.text-4, h2.text-4, h3.text-4, h4.text-4, h5.text-4, h6.text-4,
.text-4, .text-4-5 {
    line-height: 1.4 !important;
}

h1.text-3, h2.text-3, h3.text-3, h4.text-3, h5.text-3, h6.text-3,
.text-3 {
    line-height: 1.4 !important;
}

h1.text-2, h2.text-2, h3.text-2, h4.text-2, h5.text-2, h6.text-2,
.text-2, .text-2-5 {
    line-height: 1.4 !important;
}

/* Asegurar que los párrafos con lh-base tengan el line-height correcto */
.lh-base {
    line-height: 1.5 !important;
}

/* Asegurar que los elementos con lh-1 tengan line-height 1 */
.lh-1 {
    line-height: 1 !important;
}

/* ==========================================
   HERO SECTION - WELCOME PAGE
   ========================================== */

/* Badge "FILOSOFÍA DEL INFINITO" - Estilos exactos como lacompany */
/* Usar var(--secondary) del tema Porto, no color hardcodeado */
.section.bg-light.position-relative .badge.text-secondary.rounded-pill {
    font-size: 0.95em !important; /* text-2-5 = 0.95em según tema Porto */
    font-weight: 600 !important; /* font-weight-semibold */
    padding: 0 !important; /* Sin padding en el badge externo */
    border-width: 1px !important;
    border-color: var(--secondary) !important; /* Usar variable del tema como lacompany */
    background-color: transparent !important;
    color: var(--secondary) !important; /* Usar variable del tema */
    border-radius: 50px !important; /* rounded-pill */
}

/* Padding interno en el span interno - py-1 px-2 de Bootstrap */
.section.bg-light.position-relative .badge.text-secondary.rounded-pill .d-inline-flex {
    padding: 0.25rem 0.5rem !important; /* py-1 px-2 de Bootstrap = 4px 8px */
    display: inline-flex !important;
    align-items: center !important;
}

/* Título Principal Hero - Ajustes para división en DOS líneas exactamente como lacompany */
/* CRÍTICO: NO sobrescribir font-size, usar el tamaño por defecto del tema Porto */
/* Solo controlar el ancho máximo para forzar la división en 2 líneas */
.section.bg-light.position-relative h1.text-color-dark.font-weight-extra-bold {
    /* NO sobrescribir font-size - dejar que use el tamaño por defecto del tema Porto */
    font-weight: 800 !important; /* font-weight-extra-bold como en lacompany */
    line-height: 1.2 !important; /* Interlineado ajustado */
    max-width: 900px !important; /* Ancho máximo para forzar 2 líneas */
    margin: 0 auto 1rem auto !important; /* Centrado con margin auto */
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-align: center !important;
    padding: 0 !important; /* Sin padding, el contenedor ya lo maneja */
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* Contenedor col-lg-8 - Asegurar que use todo el ancho disponible */
.section.bg-light.position-relative .container .row .col-lg-8 {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Contenedor flex - SIN padding lateral adicional para maximizar ancho del texto */
.section.bg-light.position-relative .d-flex.flex-column.align-items-center.justify-content-center {
    width: 100%;
    max-width: 100%;
    padding: 0 !important; /* SIN padding lateral para dar máximo ancho al texto */
}

/* Asegurar que el h1 tenga el ancho completo del contenedor pero respete max-width */
.section.bg-light.position-relative .d-flex.flex-column.align-items-center h1 {
    width: 100%;
    max-width: 900px !important; /* Mismo max-width que el h1 para consistencia */
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Subtítulo Hero - text-4-5 */
.section.bg-light.position-relative p.text-4-5 {
    font-size: 1.35em !important; /* text-4-5 = 1.35em según tema Porto */
    font-weight: 300 !important; /* font-weight-light */
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.7) !important; /* Light text for dark mode */
    margin-bottom: 2rem !important;
    padding: 0 !important; /* Sin padding lateral, igual que el h1 */
    text-align: center !important;
    width: 100%;
}

/* Espaciado entre badge y título - Ajustado para coincidir con lacompany */
.section.bg-light.position-relative .appear-animation.mb-3:first-of-type {
    margin-bottom: 1.5rem !important;
}

/* Espaciado entre título y subtítulo - Ajustado */
.section.bg-light.position-relative h1.mb-3 {
    margin-bottom: 1.5rem !important;
}

/* Espaciado entre subtítulo y botones */
.section.bg-light.position-relative p.mb-4 {
    margin-bottom: 2rem !important;
}

/* Header Styles */
#header .header-top {
    border-bottom-width: 1px;
    border-bottom-color: rgba(255,255,255,0.1);
}

#header .header-nav-main {
    background: transparent;
}

/* Header Navigation - Tamaño exacto como lacompany */
#header .header-nav-main nav > ul > li > a {
    text-transform: none;
    font-size: 0.95em !important; /* Ajustado para coincidir con lacompany */
    font-weight: 700 !important; /* Bold como en lacompany */
    padding: 1.2rem 1rem;
    transition: all 0.3s ease;
    letter-spacing: 0.02em; /* Ligero espaciado entre letras */
}

#header .header-nav-main nav > ul > li > a:hover {
    color: var(--primary);
}

#header .header-nav-main nav > ul > li.active > a {
    color: var(--primary);
    font-weight: 700 !important;
}

/* Dropdown Styles - Dark background with light text */
#header .header-nav-main.header-nav-main-dropdown-modern nav > ul > li.dropdown .dropdown-menu {
    border: 1px solid rgba(255,255,255,0.1);
    background-color: var(--dark);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    border-radius: 8px;
}

#header .header-nav-main.header-nav-main-dropdown-modern nav > ul > li.dropdown .dropdown-menu li a {
    font-weight: 500;
    color: var(--light);
    padding: 0.8rem 1.5rem;
    transition: all 0.3s ease;
}

#header .header-nav-main.header-nav-main-dropdown-modern nav > ul > li.dropdown .dropdown-menu li a:hover {
    background-color: var(--primary);
    color: var(--light);
}

/* Button Styles */
.btn {
    font-weight: 600;
    text-transform: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--primary-rgba-20);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1em;
}

/* Card Styles - Dark mode */
.card {
    border: none;
    border-radius: 12px;
    background: var(--dark);
    color: var(--light);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px var(--primary-rgba-20);
}

.card-body {
    padding: 2rem;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

/* Progress Bars */
.progress {
    height: 8px;
    border-radius: 4px;
    background-color: rgba(255,255,255,0.2);
    overflow: visible;
}

.progress-bar {
    border-radius: 4px;
    position: relative;
    transition: width 1.5s ease;
}

.progress-bar-tooltip {
    position: absolute;
    top: -30px;
    right: 0;
    background: var(--primary);
    color: var(--light);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
}

/* Feature Cards - Dark mode */
.feature-card {
    background: var(--dark);
    color: var(--light);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px var(--primary-rgba-20);
}

.feature-card .icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--light);
    font-size: 2em;
}

/* Stats Section - Dark mode */
.stats-section {
    background: var(--dark);
    padding: 4rem 0;
}

.stat-item {
    text-align: center;
    padding: 2rem;
}

.stat-number {
    font-size: 3em;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1em;
    color: var(--light);
    font-weight: 500;
}

/* Newsletter Form - Dark mode */
.newsletter-form {
    background: var(--dark);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.newsletter-form .form-control {
    border: 2px solid rgba(255,255,255,0.15);
    background-color: rgba(255,255,255,0.05);
    color: var(--light);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    font-size: 1.1em;
    transition: all 0.3s ease;
}

.newsletter-form .form-control::placeholder {
    color: rgba(255,255,255,0.4);
}

.newsletter-form .form-control:focus {
    border-color: var(--primary);
    background-color: rgba(255,255,255,0.08);
    color: var(--light);
    box-shadow: 0 0 0 0.2rem var(--primary-rgba-20);
}

/* Footer */
#footer {
    background: var(--dark);
    color: var(--light);
}

#footer h5 {
    color: var(--light);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

#footer a {
    color: rgba(255,255,255,0.8);
    transition: all 0.3s ease;
}

#footer a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Social Icons */
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 991px) {
    h1 { font-size: 2.5em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.5em; }

    #header .header-nav-main nav > ul > li > a {
        padding: 1rem 0.8rem;
        font-size: 1em;
    }
}

@media (max-width: 767px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.4em; }

    .card-body {
        padding: 1.5rem;
    }

    .feature-card {
        padding: 1.5rem;
    }
}

/* Animation Classes */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Variables — inherited from skin, only non-skin extras here */
:root {
    --primary-dark: var(--primary-200);
    --success: #28A745;
    --warning: #FFC107;
    --danger: #DC3545;
    --info: #17A2B8;
}

/* ========================================
   SERVICE CARDS - HOVER ANIMATIONS
   ======================================== */

/* Tarjetas de servicios */
.service-card {
    min-height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    cursor: pointer;
}

.service-card-clickable {
    position: relative;
}

.service-card-clickable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: all 0.3s ease;
    border-radius: inherit;
}

.service-card:hover,
.service-card-clickable:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 20px var(--primary-rgba-20);
}

.service-card-clickable:hover::before {
    background: rgba(0, 0, 0, 0.1);
}

.service-card-clickable:hover .service-arrow {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* Animación suave para links */
a .service-card-clickable {
    text-decoration: none !important;
}

a:hover .service-card-clickable h2,
a:hover .service-card-clickable p {
    color: inherit !important;
}

.service-card-01 {
    background-image: url('../../../cd-project/img/homepage/desarrollo_web.png');
}

.service-card-02 {
    background-image: url('../../../cd-project/img/homepage/identidad_visual.png');
}

.service-card-03 {
    background-image: url('../../../cd-project/img/homepage/automatizaciones.png');
}

.service-card-04 {
    background-image: url('../../../cd-project/img/homepage/diagnostico.jpg');
}

.service-card-05 {
    background-image: url('../../../cd-project/img/homepage/capacitancion_interna.jpg');
}

.service-arrow {
    width: 35px;
    height: 35px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

/* ========================================
   FEATURE CARDS - HOVER ANIMATIONS
   ======================================== */

/* Tarjetas de características - Override del base */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px var(--primary-rgba-20) !important;
    z-index: 10;
}

.feature-card .card-body {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 2rem;
}

.feature-card .text-5 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.feature-card .card-title {
    line-height: 1.3;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.feature-card .card-text {
    line-height: 1.4;
    font-size: 0.9rem;
}

/* ========================================
   PROJECT CARDS - HOVER ANIMATIONS
   ======================================== */

/* Fix para las tarjetas de proyectos con animaciones hover */
.project-card {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-10px);
    z-index: 10;
    box-shadow: 0 0 20px var(--primary-rgba-20) !important;
}

/* Asegurar que los botones dentro de las tarjetas sean clickeables */
.project-card .btn {
    position: relative;
    z-index: 15;
    pointer-events: auto;
}

.project-card .card-body {
    position: relative;
    z-index: 5;
}

/* Fix específico para las clases conflictivas */
.anim-hover-translate-top-10px {
    position: relative;
    z-index: 1;
}

.anim-hover-translate-top-10px:hover {
    transform: translateY(-10px) !important;
    z-index: 10;
    box-shadow: 0 0 20px var(--primary-rgba-20) !important;
}

/* Asegurar que los enlaces dentro de las tarjetas funcionen */
.project-card a,
.anim-hover-translate-top-10px a {
    position: relative;
    z-index: 20;
    text-decoration: none;
}

.project-card a:hover,
.anim-hover-translate-top-10px a:hover {
    text-decoration: none;
}

/* Fix para botones específicos */
.btn-outline-primary {
    position: relative;
    z-index: 25;
    pointer-events: auto;
}

/* Asegurar que las transiciones no interfieran con los clics */
.transition-3ms {
    transition: all 0.3s ease;
}

/* Fix para el problema de z-index en hover */
.box-shadow-1-hover:hover {
    z-index: 10;
}

/* ========================================
   ACCORDION/FAQ STYLES - PADDING & COLORS
   ======================================== */

/* Estilos para acordeones con padding y colores correctos */
.accordion-modern-status-primary.accordion-modern-status > .card .card-header a:not(.collapsed) {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
    padding: 12px 16px !important;
    border-radius: 0.25rem 0.25rem 0 0 !important;
}

.accordion-modern-status-primary.accordion-modern-status > .card:hover .card-header a.collapsed {
    color: var(--primary) !important;
}

.accordion-modern-status-primary.accordion-modern-status > .card .card-header a {
    padding: 12px 16px !important;
    transition: all 0.3s ease;
    display: block !important;
}

.accordion-modern-status-primary.accordion-modern-status > .card .card-header a.collapsed {
    background-color: var(--dark) !important;
    color: var(--light) !important;
}

.accordion-modern-status-primary.accordion-modern-status > .card .card-body {
    padding: 16px !important;
    padding-top: 0 !important;
}

.accordion-modern-status-primary.accordion-modern-status > .card .card-header {
    padding: 0 !important;
    border-bottom: 0 !important;
}

/* Asegurar que el contenido del collapse tenga padding correcto */
.accordion-modern-status-primary .collapse.show .card-body,
.accordion-modern-status-primary .collapse .card-body {
    padding: 16px !important;
    padding-top: 0 !important;
}

/* Asegurar que el card-body tenga el padding correcto cuando está expandido */
.accordion-modern-status-primary .card .collapse.show + .card-body,
.accordion-modern-status-primary .card .collapse.show ~ .card-body,
.accordion-modern-status-primary .card .collapse:not(.show) + .card-body {
    padding: 16px !important;
}

/* ========================================
   TOGGLE/FAQ STYLES - WELCOME PAGE
   ======================================== */

/* Toggle con outline personalizado */
.toggle-outline-primary .toggle {
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 0;
    margin-bottom: 10px;
}

.toggle-outline-primary .toggle > .toggle-title {
    color: var(--light) !important;
    padding: 12px 16px;
    margin: 0;
    border: none;
}

.toggle-outline-primary .toggle.active {
    border-color: var(--primary) !important;
    background-color: transparent !important;
}

.toggle-outline-primary .toggle.active > .toggle-title {
    color: var(--primary) !important;
    background-color: transparent !important;
}

.toggle-outline-primary .toggle > .toggle-title:hover {
    color: var(--primary);
}

.toggle-outline-primary .toggle.active > .toggle-content {
    padding: 0 16px 16px 16px;
}

/* ========================================
   MARQUEE LOGOS
   ======================================== */

/* Marquee de logos */
.custom-marquee-1 {
    overflow: hidden;
    white-space: nowrap;
}

.custom-marquee-1 .d-flex {
    display: inline-flex !important;
    white-space: nowrap;
}

/* ========================================
   SERVICE NAVIGATION TABS - SINGLE LINE RESPONSIVE
   ======================================== */

/* Service Navigation Tabs */
.service-nav-tabs {
    position: relative;
    z-index: 10;
}

/* Container for responsive navigation */
.service-nav-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding: 0 10px;
}

.service-nav-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Responsive navigation list */
.service-nav-responsive {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    min-width: max-content;
    gap: 8px;
    padding: 0;
    margin: 0;
}

/* Base styles for navigation links - Dark mode */
.service-nav-responsive .nav-link {
    color: rgba(255,255,255,0.6);
    background-color: var(--dark);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-block;

    /* Responsive sizing */
    font-size: clamp(0.75rem, 2vw, 0.95rem);
    padding: clamp(6px, 1.5vw, 12px) clamp(12px, 3vw, 20px);
}

.service-nav-responsive .nav-link:hover {
    color: var(--light);
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-2px);
    text-decoration: none;
}

.service-nav-responsive .nav-link.active {
    color: var(--light);
    background-color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--primary-rgba-20);
}

/* Responsive breakpoints for better control */
@media (min-width: 1200px) {
    .service-nav-responsive .nav-link {
        font-size: 0.9rem;
        padding: 10px 18px;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .service-nav-responsive .nav-link {
        font-size: 0.85rem;
        padding: 8px 16px;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .service-nav-responsive .nav-link {
        font-size: 0.8rem;
        padding: 7px 14px;
    }
}

@media (max-width: 767px) {
    .service-nav-container {
        padding: 0 5px;
    }

    .service-nav-responsive {
        gap: 6px;
        justify-content: flex-start;
    }

    .service-nav-responsive .nav-link {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

@media (max-width: 576px) {
    .service-nav-responsive .nav-link {
        font-size: 0.7rem;
        padding: 5px 10px;
    }
}

/* ========================================
   SERVICE PACKAGE CARDS - FIGMA DESIGN
   ======================================== */

/* Service Package Cards - Dark mode */
.service-package-card-left,
.service-package-card-right {
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 400px; /* Ensure consistent height for alignment */
}

/* Remove background from delivery info */
.delivery-info {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.service-package-card-left:hover,
.service-package-card-right:hover {
    box-shadow: 0 0 20px var(--primary-rgba-20) !important;
    transform: translateY(-2px);
}

/* Badge Styling */
.service-package-card-left .badge {
    font-size: 0.875rem;
    padding: 8px 16px;
}

/* Price Styling */
.price-display {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* Bullet Points */
.bullet-point {
    margin-top: 8px;
}

/* Button Styling - Rounded Pills */
.btn.rounded-pill {
    border-radius: 25px !important;
    font-size: 0.875rem;
    padding: 8px 20px;
    transition: all 0.3s ease;
}

.btn.btn-outline-secondary.rounded-pill {
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
}

.btn.btn-outline-secondary.rounded-pill:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
    color: var(--light);
}

.btn.btn-secondary.rounded-pill {
    background-color: var(--secondary) !important; /* Usar variable del tema */
    border-color: var(--secondary) !important;
    color: var(--light) !important;
}

.btn.btn-secondary.rounded-pill:hover {
    background-color: var(--secondary-100) !important; /* Hover usando variable del tema */
    border-color: var(--secondary-100) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ========================================
   BUTTON ROUNDED - HERO BUTTONS
   ======================================== */

/* Botones redondeados para hero section (igual a lacompany) */
.btn-rounded {
    border-radius: 35px !important;
    transition: all 0.3s ease;
}

/* Botón secundario redondeado (Agendá una reunión) - Usar var(--secondary) del tema */
.btn-rounded.btn-secondary {
    background-color: var(--secondary) !important; /* Usar variable del tema como lacompany */
    border-color: var(--secondary) !important;
    color: var(--light) !important;
    font-weight: 700 !important; /* font-weight-bold */
    padding: 12px 24px;
    border-width: 0 !important; /* Sin borde, solo fondo */
}

.btn-rounded.btn-secondary:hover {
    background-color: var(--secondary-100) !important; /* Hover usando variable del tema */
    border-color: var(--secondary-100) !important;
    color: var(--light) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Botón outline light redondeado (Ver casos reales) - Borde más marcado como en lacompany */
.btn-outline.btn-rounded.btn-light {
    background-color: transparent !important;
    border: 2px solid var(--secondary) !important; /* Borde más marcado (2px) usando variable del tema */
    color: var(--secondary) !important; /* Texto usando variable del tema */
    font-weight: 700 !important; /* font-weight-bold */
    padding: 12px 24px;
}

.btn-outline.btn-rounded.btn-light:hover {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Fondo sutil al hover en dark mode */
    border-color: var(--secondary) !important;
    color: var(--secondary) !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments for service packages */
@media (max-width: 991px) {
    .service-package-card-left,
    .service-package-card-right {
        margin-bottom: 20px;
    }

    .d-flex.gap-2 {
        flex-direction: column;
        gap: 10px !important;
    }

    .d-flex.align-items-center.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 20px;
    }
}

/* ========================================
   BOLD EDGE DARK MODE — GLOBAL OVERRIDES
   Porto Light-Mode Classes → Dark Mode
   Applies to ALL shared module views
   ======================================== */

/* === Backgrounds === */
.bg-color-grey-scale-1,
.bg-color-grey-scale-2,
.custom-bg-color-grey-1 {
    background-color: var(--secondary) !important;
}

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

.bg-white {
    background-color: var(--dark) !important;
}

/* === Text Colors === */
.text-color-dark {
    color: var(--light) !important;
}

.text-dark {
    color: var(--light) !important;
}

.text-color-grey,
.text-muted {
    color: var(--quaternary) !important;
}

.text-color-default {
    color: var(--quaternary) !important;
}

/* === Cards & Panels === */
.card {
    background-color: var(--dark) !important;
    border-color: var(--primary-rgba-10) !important;
}

.card-header {
    background-color: var(--dark) !important;
    border-bottom-color: var(--light-rgba-10) !important;
}

.card-body {
    color: var(--quaternary);
}

/* Card info panels (sidebar) */
.bg-color-grey-scale-1.card-header,
.card-header.bg-color-grey-scale-1 {
    background-color: var(--primary-rgba-10) !important;
}

/* === Badges & Tags === */
.badge.bg-color-grey-scale-2 {
    background-color: var(--dark) !important;
    color: var(--light) !important;
    border: 1px solid var(--primary-rgba-20);
}

.badge.bg-color-grey-scale-2.text-color-dark {
    color: var(--light) !important;
}

/* === Borders === */
.border-color-grey-scale-2,
.border-bottom.border-color-grey-scale-2 {
    border-color: var(--light-rgba-10) !important;
}

.border-bottom-light {
    border-bottom-color: var(--light-rgba-10) !important;
}

/* === Shadows (replace grey with cyan glow) === */
.shadow-modern {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4) !important;
}

/* === Project Detail Specifics === */
.project-external-link-card {
    background-color: var(--dark) !important;
    border: 1px solid var(--primary-rgba-10) !important;
}

.project-external-link-card .text-color-dark {
    color: var(--light) !important;
}

.project-external-link-card .text-color-grey {
    color: var(--quaternary) !important;
}

.project-info-card {
    background-color: var(--dark) !important;
    border: 1px solid var(--primary-rgba-10) !important;
}

.project-sidebar-sticky .card {
    background-color: var(--dark) !important;
}

/* === Service Detail Specifics === */
.service-nav-responsive .nav-link {
    background-color: var(--dark) !important;
    color: var(--quaternary) !important;
    border-color: var(--primary-rgba-10) !important;
}

.service-nav-responsive .nav-link:hover {
    color: var(--light) !important;
    background-color: var(--primary-rgba-10) !important;
    border-color: var(--primary) !important;
}

.service-nav-responsive .nav-link.active {
    color: var(--secondary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px var(--primary-rgba-30) !important;
}

/* === FAQ Module Page === */
.faq-item,
.faq-question {
    background-color: var(--dark) !important;
    color: var(--light) !important;
    border-color: var(--primary-rgba-10) !important;
}

.faq-answer,
.faq-content {
    color: var(--quaternary) !important;
}

/* === Accordion Overrides (all modules) === */
.accordion .card {
    background-color: var(--dark) !important;
    border-color: var(--light-rgba-10) !important;
}

.accordion .card-header a {
    color: var(--light) !important;
    background-color: var(--dark) !important;
}

.accordion .card-header a:not(.collapsed) {
    background-color: var(--primary) !important;
    color: var(--secondary) !important;
}

.accordion .card-body {
    color: var(--quaternary) !important;
}

/* === Form Elements (shared across modules) === */
.form-control {
    background-color: var(--dark) !important;
    color: var(--light) !important;
    border-color: var(--light-rgba-10) !important;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem var(--primary-rgba-20) !important;
}

.form-control::placeholder {
    color: var(--quaternary) !important;
    opacity: 0.6;
}

.form-label {
    color: var(--quaternary) !important;
}

select.form-control {
    background-color: var(--dark) !important;
    color: var(--light) !important;
}

/* === Dividers === */
.divider hr {
    border-color: var(--primary-rgba-20) !important;
}

/* === Page body background === */
.main,
div[role="main"] {
    background-color: var(--secondary);
}

/* === Container width standardization (1440px for all content) === */
/* Force shared module views to use wider container */
.main .container:not(.container-xl-custom) {
    max-width: 1440px;
}

/* === List Icons (contact, about sidebar) === */
.list-icons-style-2 li i {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* === Breadcrumb overrides === */
.breadcrumb {
    background: transparent !important;
}

.breadcrumb li a {
    color: var(--primary) !important;
}

.breadcrumb li.active {
    color: var(--quaternary) !important;
}

/* === Pagination === */
.pagination .page-link {
    background-color: var(--dark) !important;
    border-color: var(--primary-rgba-10) !important;
    color: var(--quaternary) !important;
}

.pagination .page-link:hover {
    background-color: var(--primary-rgba-10) !important;
    color: var(--primary) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--secondary) !important;
}

/* === Buttons global refinements === */
.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary) !important;
    color: var(--secondary) !important;
}

.btn-modern {
    border-radius: 6px;
}

/* === Links global === */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary--100);
}

/* === Highlight animation (about page) === */
.highlight-animated {
    --highlight-bg: var(--primary);
    --highlight-opacity: 0.15;
}

/* === Section spacing fix (no white gaps) === */
section.section {
    background-color: var(--secondary);
}

/* === Blog cards in module views === */
.post-card,
.blog-card {
    background-color: var(--dark) !important;
    border-color: var(--primary-rgba-10) !important;
}

/* === Gallery module === */
.gallery-item {
    background-color: var(--dark) !important;
}

/* === Empty states === */
.no-results,
.empty-state {
    color: var(--quaternary) !important;
}