/*
 * AUDASSIA - Estilos Personalizados Definitivos
 * Este archivo contiene TODOS los estilos custom necesarios
 */

/* ========================================
   IMPORTAR FUENTES - DEBE IR PRIMERO
======================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ========================================
   VARIABLES DE COLOR
======================================== */
:root {
    --audassia-dark-blue: #000133;
    --audassia-medium-blue: #062a75;
    --audassia-light-blue: #30bced;
    --audassia-white: #ffffff;
    --audassia-light-gray: #f8f9fa;
    --audassia-medium-gray: #6c757d;
    --audassia-dark-gray: #343a40;
    --audassia-gradient-primary: linear-gradient(135deg, var(--audassia-dark-blue) 0%, var(--audassia-medium-blue) 50%, var(--audassia-light-blue) 100%);
}

/* ========================================
   TIPOGRAFÍA MONTSERRAT
======================================== */

body {
    font-family: 'Montserrat', Arial, sans-serif !important;
    color: var(--audassia-dark-blue);
}

h1, h2, h3, .main-title, .page-title, .block-heading h2, .section-title {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 700 !important;
    color: var(--audassia-dark-blue) !important;
}

h4, h5, h6, .subtitle, .block-sub-heading, .service-title {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 800 !important;
    color: var(--audassia-medium-blue) !important;
}

.content-sub-title {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 600 !important;
    color: var(--audassia-light-blue) !important;
}

p, .content-text, .description, .service-description, li {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 400 !important;
    color: var(--audassia-dark-gray);
}

/* Textos destacados */
h1 span, h2 span, h3 span, .main-title span, .section-title span {
    color: var(--audassia-light-blue) !important;
    font-weight: 800 !important;
}

strong, b {
    color: var(--audassia-medium-blue) !important;
    font-weight: 700 !important;
}

/* ========================================
   ESPACIADO ESTANDARIZADO PARA SECCIONES
======================================== */
.section-spacing {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

@media (min-width: 768px) {
    .section-spacing {
        padding-top: 120px !important;
        padding-bottom: 120px !important;
    }
}

/* Colores de fondo para secciones */
.section-primary {
    background: var(--audassia-white);
}

.section-alternate {
    background: var(--audassia-light-gray);
}

.section-dark {
    background: var(--audassia-dark-blue);
    color: var(--audassia-white);
}

/* Sección Nuestra Filosofía - Mostrar imagen completa */
#work-section.work-block {
    min-height: 950px !important;
    position: relative !important;
    padding: 80px 0 200px 0 !important;
    overflow: hidden !important;
}

#work-section .bg-stretch {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

#work-section .bg-stretch img,
#work-section .bg-stretch picture,
#work-section .bg-stretch picture img {
    position: absolute !important;
    top: 150px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 150px) !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
}

#work-section .container {
    position: relative !important;
    z-index: 2 !important;
}

@media (min-width: 768px) {
    #work-section.work-block {
        min-height: 1050px !important;
        padding: 100px 0 200px 0 !important;
    }
}

@media (min-width: 992px) {
    #work-section.work-block {
        min-height: 1150px !important;
        padding: 120px 0 200px 0 !important;
    }
}

/* ========================================
   HEADER - COMPORTAMIENTO TRANSPARENTE
======================================== */

/* Estado inicial: Header transparente */
#waituk-main-header:not(.sticky-nav),
.main-header:not(.sticky-nav) {
    background: transparent !important;
    background-color: transparent !important;
}

#waituk-main-header:not(.sticky-nav) #nav-section,
#waituk-main-header:not(.sticky-nav) .bottom-header,
#waituk-main-header:not(.sticky-nav) .mega-menus,
#waituk-main-header:not(.sticky-nav) .navbar {
    background: transparent !important;
    background-color: transparent !important;
}

/* Logo blanco visible siempre */
#waituk-main-header .navbar-brand img:first-child {
    display: block !important;
}

#waituk-main-header .navbar-brand img:last-child {
    display: none !important;
}

/* Enlaces del menú en blanco */
#waituk-main-header .navbar .navbar-nav > li > a {
    color: #ffffff !important;
}

/* ========================================
   MÓVIL - HEADER CON SCROLL
======================================== */
@media (max-width: 767px) {
    /* Fondo azul al hacer scroll */
    #waituk-main-header.sticky-nav {
        background: #062a75 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }

    #waituk-main-header.sticky-nav #nav-section,
    #waituk-main-header.sticky-nav .bottom-header,
    #waituk-main-header.sticky-nav .mega-menus,
    #waituk-main-header.sticky-nav .navbar {
        background: #062a75 !important;
        background-color: #062a75 !important;
    }

    /* Icono del menú hamburguesa completamente blanco sin contorno */
    #waituk-main-header .navbar-toggler {
        border: none !important;
        background: transparent !important;
        padding: 8px !important;
    }

    #waituk-main-header .navbar-toggler:focus,
    #waituk-main-header .navbar-toggler:active {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    #waituk-main-header .navbar-toggler .navbar-toggler-icon {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        width: 24px !important;
        height: 2px !important;
        position: relative !important;
        display: block !important;
    }

    #waituk-main-header .navbar-toggler .navbar-toggler-icon:before,
    #waituk-main-header .navbar-toggler .navbar-toggler-icon:after {
        content: '' !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        width: 24px !important;
        height: 2px !important;
        position: absolute !important;
        left: 0 !important;
        display: block !important;
    }

    #waituk-main-header .navbar-toggler .navbar-toggler-icon:before {
        top: -8px !important;
    }

    #waituk-main-header .navbar-toggler .navbar-toggler-icon:after {
        top: 8px !important;
    }

    /* Panel del menú desplegable con fondo azul y estilo mejorado */
    #waituk-main-header .navbar-collapse {
        background: #062a75 !important;
        background-color: #062a75 !important;
        padding: 20px 0 !important;
        margin-top: 10px !important;
        border-radius: 0 0 8px 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    #waituk-main-header .navbar-collapse.show,
    #waituk-main-header .navbar-collapse.collapsing {
        background: #062a75 !important;
        background-color: #062a75 !important;
    }

    /* Links del menú con mejor espaciado y hover */
    #waituk-main-header .navbar-collapse .navbar-nav {
        padding: 0 15px !important;
    }

    #waituk-main-header .navbar-collapse .navbar-nav > li {
        margin: 5px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    #waituk-main-header .navbar-collapse .navbar-nav > li:last-child {
        border-bottom: none !important;
    }

    #waituk-main-header .navbar-collapse .navbar-nav > li > a {
        color: #ffffff !important;
        padding: 12px 15px !important;
        display: block !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        border-radius: 4px !important;
    }

    #waituk-main-header .navbar-collapse .navbar-nav > li > a:hover {
        background: rgba(48, 188, 237, 0.2) !important;
        padding-left: 20px !important;
        transform: translateX(5px) !important;
    }

    /* Conceptos clave */
    .information-block .info-block {
        padding: 30px 15px !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .information-block .info-block:last-child {
        border-bottom: none;
    }
}

/* ========================================
   DESKTOP - HEADER CON SCROLL
======================================== */
@media (min-width: 768px) {
    /* Fondo oscuro al hacer scroll */
    #waituk-main-header.sticky-nav {
        background: rgba(0, 1, 51, 0.95) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }

    #waituk-main-header.sticky-nav #nav-section,
    #waituk-main-header.sticky-nav .bottom-header,
    #waituk-main-header.sticky-nav .mega-menus,
    #waituk-main-header.sticky-nav .navbar {
        background: rgba(0, 1, 51, 0.95) !important;
        background-color: rgba(0, 1, 51, 0.95) !important;
    }
}

/* ========================================
   SECCIÓN FEATURES / CONCEPTOS CLAVE
======================================== */

/* Quitar overlay azul de la sección */
.information-block.parallax:before {
    display: none !important;
}

/* Elemento 1 - Ahorro de tiempo (Azul oscuro principal) */
.information-block .info-block-v2.block-1 {
    background: linear-gradient(135deg, var(--audassia-dark-blue), #001a47) !important;
    color: white !important;
}

.information-block .info-block-v2.block-1 h3 {
    color: var(--audassia-light-blue) !important;
}

.information-block .info-block-v2.block-1 p {
    color: white !important;
}

/* Elemento 2 - Optimización del presupuesto (Azul medio) */
.information-block .info-block-v2.block-2 {
    background: linear-gradient(135deg, var(--audassia-medium-blue), #0a3a8a) !important;
    color: white !important;
}

.information-block .info-block-v2.block-2 h3 {
    color: var(--audassia-light-blue) !important;
}

.information-block .info-block-v2.block-2 p {
    color: white !important;
}

/* Elemento 3 - (Azul claro) */
.information-block .info-block-v2.block-3 {
    background: linear-gradient(135deg, var(--audassia-light-blue), #1ac7f0) !important;
    color: white !important;
}

.information-block .info-block-v2.block-3 h3 {
    color: var(--audassia-dark-blue) !important;
}

.information-block .info-block-v2.block-3 p {
    color: white !important;
}

/* Elemento 4 - Resultados profesionales (Gradiente combinado) */
.information-block .info-block-v2.block-4 {
    background: linear-gradient(135deg, var(--audassia-medium-blue), var(--audassia-light-blue)) !important;
    color: white !important;
}

.information-block .info-block-v2.block-4 h3 {
    color: white !important;
}

.information-block .info-block-v2.block-4 p {
    color: white !important;
}

/* Efectos hover para todos los elementos */
.information-block .info-block-v2:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 1, 51, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* Iconos de conceptos clave */
.conceptos-icon {
    color: white;
}

/* Responsive para tablet */
@media (max-width: 991px) {
    .information-block .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .info-block-v2 {
        margin-bottom: 1.5rem !important;
        padding: 25px 15px !important;
    }
}

/* Responsive para móvil */
@media (max-width: 767px) {
    .information-block .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .info-block-v2 {
        margin-bottom: 2rem !important;
        padding: 20px 10px !important;
    }
}

/* ========================================
   SECCIÓN TIPOS DE EVENTOS
======================================== */
.evento-icon-wrapper {
    min-width: 40px;
}

.evento-icon {
    color: var(--audassia-light-blue);
    font-size: 20px;
}

.evento-title {
    color: var(--audassia-medium-blue);
}

/* ========================================
   BOTONES
======================================== */
.btn, .btn-primary, .main-btn, .cta-button {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 700 !important;
    background: var(--audassia-gradient-primary) !important;
    border: none !important;
    color: var(--audassia-white) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    white-space: normal !important;
    line-height: 1.3 !important;
    padding: 12px 20px !important;
}

.btn:hover, .btn-primary:hover, .main-btn:hover, .cta-button:hover {
    color: var(--audassia-white) !important;
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Botones en móvil: permitir texto en 2 líneas */
@media (max-width: 767px) {
    .btn, .btn-primary, .main-btn, .cta-button {
        white-space: normal !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        min-height: 45px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ========================================
   FOOTER
======================================== */
.main-footer, footer {
    background: var(--audassia-medium-blue) !important;
    color: var(--audassia-white);
}

.footer-main {
    background: var(--audassia-medium-blue) !important;
}

.main-footer h1, .main-footer h2, .main-footer h3, .main-footer h4, .main-footer h5, .main-footer h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: var(--audassia-white) !important;
}

.main-footer a, footer a {
    color: var(--audassia-light-blue) !important;
    transition: all 0.3s ease;
    font-weight: 600 !important;
}

.main-footer a:hover, footer a:hover {
    color: var(--audassia-white) !important;
    text-decoration: none !important;
}

/* Navegación del footer */
.footer-nav ul {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.footer-nav ul li {
    margin: 0 !important;
    position: relative !important;
}

.footer-nav ul li:not(:last-child):after {
    content: "|" !important;
    color: var(--audassia-light-blue) !important;
    margin: 0 15px !important;
    font-weight: 300 !important;
}

.footer-nav ul li a {
    padding: 5px 0 !important;
    color: var(--audassia-white) !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    letter-spacing: 1px !important;
    position: relative !important;
    background: none !important;
    border: none !important;
}

.footer-nav ul li a:before {
    content: '' !important;
    position: absolute !important;
    width: 0 !important;
    height: 2px !important;
    bottom: -3px !important;
    left: 50% !important;
    background: var(--audassia-light-blue) !important;
    transition: all 0.3s ease !important;
    transform: translateX(-50%) !important;
}

.footer-nav ul li a:hover:before {
    width: 100% !important;
}

.footer-nav ul li a:hover {
    color: var(--audassia-light-blue) !important;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* Sección inferior del footer */
.footer-bottom {
    background: rgba(0, 1, 51, 0.9) !important;
    border-top: 2px solid var(--audassia-light-blue) !important;
    padding: 20px 0 !important;
}

.footer-bottom p {
    color: var(--audassia-white) !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Logo del footer */
.footer-logo img {
    max-height: 120px !important;
    width: auto !important;
    filter: brightness(1.1) !important;
    margin-bottom: 20px !important;
}