/* ==========================================================================
   AeroVuela — Overrides unificados
   Orden: 1) Variables  2) Base  3) Header  4) Menú  5) Hero  6) Buscador  7) Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
    --av-blue:         #186cdf;
    --av-blue-hover:   #1a73e8;
    --av-green:        #16a34a;
    --av-line-gray:    #8a94a6;
    --av-text:         #17243b;
    --av-text-muted:   #7b8aa3;
    --av-text-soft:    #6b7a94;
    --av-border:       #e6e9ef;
    --av-border-soft:  #eceff5;
    --av-border-input: #dfe3ec;
    --av-bg-soft:      #f7f9fc;
    --av-max:          1200px;
    --av-radius:       10px;
}

/* --------------------------------------------------------------------------
   2. Base / contenedores centrados
   -------------------------------------------------------------------------- */
.header-vtb .c-nav-md > .container,
.header-vtb .cMenu > .container,
.c-box-home .container,
.c-box-home.av-hero-search .av-flight-booker-wrap {
    max-width: var(--av-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.header-vtb > nav:first-child,
.header-vtb > nav:first-child .container {
    overflow: visible !important;
}

/* --------------------------------------------------------------------------
   3. Fila 1: logo + tagline + acciones
   -------------------------------------------------------------------------- */
.header-vtb .c-nav-md > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 118px !important;
}

/* --- Marca --- */
.header-vtb .navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.header-vtb .navbar-brand .logo-tb {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 260px !important;
    height: 72px !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
}

.av-brand-tagline {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    padding-left: 16px !important;
    border-left: 1px solid var(--av-border) !important;
}
.av-brand-tagline span {
    font-size: 15px !important;
    color: var(--av-text-muted) !important;
    font-weight: 400 !important;
}
.av-brand-tagline strong {
    font-size: 22px !important;
    color: var(--av-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
}

/* --- Columna de acciones --- */
.header-vtb .c-nav-md .navbar-collapse {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    margin-left: auto !important;
}

/* Links planos (Español-COP, Iniciar sesión) */
.av-top-link,
.av-login {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 0 !important;
    background: none !important;
    border: 0 !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--av-text) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
.av-top-link:hover,
.av-login:hover { color: var(--av-blue-hover) !important; }

.av-top-link .av-chevron-down { font-size: 10px; color: var(--av-text-muted); }
.av-login .av-hamburger { font-size: 18px; line-height: 1; }

.av-flag {
    display: inline-block !important;
    width: 20px !important;
    height: 14px !important;
    border-radius: 2px !important;
    flex: 0 0 20px !important;
    background: linear-gradient(180deg, #fcd116 0 50%, #003893 50% 75%, #ce1126 75% 100%) !important;
}

/* --------------------------------------------------------------------------
   4. Dropdowns reutilizables (Ayuda / Teléfonos)
   -------------------------------------------------------------------------- */
.av-help-wrap,
.av-phones-wrap {
    position: relative !important;
    margin-left: 0 !important;
}
.av-phones-wrap { margin-left: 0 !important; }

.av-help-btn,
.av-phones-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 14px !important;
    background: #fff !important;
    border: 1px solid var(--av-border) !important;
    border-radius: var(--av-radius) !important;
    font: inherit !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--av-text) !important;
    cursor: pointer !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.av-help-wrap:hover .av-help-btn,
.av-phones-wrap:hover .av-phones-btn {
    border-color: #c8d0dd !important;
    box-shadow: 0 4px 14px rgba(15, 30, 70, .08) !important;
}
.av-phones-btn .icon-phone { font-size: 17px; color: var(--av-text); }
.av-phones-btn strong { font-weight: 700; color: var(--av-text); }

.av-chevron-down {
    display: inline-block !important;
    font-size: 10px !important;
    color: var(--av-text-muted) !important;
    transition: transform .28s ease !important;
}
.av-help-wrap:hover  .av-chevron-down,
.av-phones-wrap:hover .av-chevron-down { transform: rotate(180deg) !important; }

.av-help-dropdown,
.av-phones-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(15, 30, 70, .15), 0 0 0 1px rgba(15, 30, 70, .05) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) scale(.97) !important;
    transform-origin: top right !important;
    transition: opacity .22s, visibility .22s, transform .28s cubic-bezier(.34, 1.35, .64, 1) !important;
    pointer-events: none !important;
}
.av-help-dropdown::before,
.av-phones-dropdown::before {
    content: "" !important;
    position: absolute !important;
    top: -14px !important; left: 0 !important; right: 0 !important;
    height: 14px !important;
}
.av-help-wrap:hover .av-help-dropdown,
.av-phones-wrap:hover .av-phones-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

/* Ayuda */
.av-help-dropdown { min-width: 260px !important; padding: 10px 0 !important; }
.av-help-item {
    display: block !important;
    padding: 12px 20px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--av-text) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .15s, color .15s !important;
}
.av-help-item:hover { background: #f5f7fb !important; color: var(--av-blue-hover) !important; }

/* Teléfonos */
.av-phones-dropdown { width: 500px !important; max-width: calc(100vw - 32px) !important; padding: 22px 24px 20px !important; }
.av-phones-header   { font-size: 15.5px !important; font-weight: 700 !important; color: var(--av-text) !important; margin-bottom: 10px !important; }
.av-phones-main     { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -0.6px !important; color: var(--av-text) !important; padding-bottom: 16px !important; margin-bottom: 16px !important; border-bottom: 1px solid #eef1f6 !important; line-height: 1.1 !important; }
.av-phones-main a   { color: inherit !important; text-decoration: none !important; }
.av-phones-main a:hover { color: var(--av-blue-hover) !important; }
.av-phones-subtitle { font-size: 13px !important; font-weight: 700 !important; color: var(--av-text) !important; margin-bottom: 12px !important; }
.av-phones-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 28px !important;
    row-gap: 10px !important;
    margin-bottom: 20px !important;
}
.av-phones-row    { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; font-size: 13px !important; }
.av-phones-city   { color: var(--av-text-soft) !important; font-weight: 500 !important; white-space: nowrap !important; }
.av-phones-number { color: var(--av-blue-hover) !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; }
.av-phones-number:hover { text-decoration: underline !important; }

.av-phones-callme {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    margin-bottom: 14px !important;
    background: #fff !important;
    border: 1px solid var(--av-border) !important;
    border-radius: var(--av-radius) !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--av-text) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s !important;
}
.av-phones-callme:hover { background: var(--av-bg-soft) !important; border-color: #c8d0dd !important; }
.av-phones-callme .icon-support-agent { font-size: 18px !important; }

.av-phones-socials { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.av-social-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    border: 1px solid var(--av-border) !important;
    border-radius: var(--av-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s !important;
}
.av-social-btn:hover { background: var(--av-bg-soft) !important; border-color: #c8d0dd !important; }
.av-social-btn.av-wa { color: var(--av-text) !important; }
.av-social-btn.av-ms { color: #006aff !important; }
.av-social-btn .icon-whatsapp  { color: #25d366 !important; font-size: 18px; }
.av-social-btn .icon-messenger { color: #0084ff !important; font-size: 18px; }

/* --------------------------------------------------------------------------
   5. Fila 2: menú principal
   -------------------------------------------------------------------------- */
.header-vtb .cMenu {
    background: #fff !important;
    border-bottom: 1px solid var(--av-border-soft) !important;
    padding: 0 !important;
}
.header-vtb .cMenu > .container {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
}
.header-vtb .cMenu .av-main-menu,
.header-vtb .cMenu .nav-first {
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.header-vtb .cMenu .av-menu-item,
.header-vtb .cMenu .list-group-item {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    float: none !important;
}
.header-vtb .cMenu .av-menu-item .desktop {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 54px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--av-text) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    position: relative !important;
}
.header-vtb .cMenu .av-menu-item .desktop > i,
.header-vtb .cMenu .av-menu-item .desktop > span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* Badges verdes encima */
.header-vtb .cMenu .av-menu-item.av-badge-item { padding-top: 14px !important; }
.header-vtb .cMenu .av-menu-item.av-badge-item > small {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--av-green) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* Iconos grises, excepto el avión */
.header-vtb .cMenu .nav-icon-hotel,
.header-vtb .cMenu .nav-icon-packages,
.header-vtb .cMenu .nav-icon-disney,
.header-vtb .cMenu .icon-sell {
    filter: grayscale(1) brightness(.75) opacity(.75) !important;
}
.header-vtb .cMenu .nav-icon-flights { filter: none !important; }

/* Línea hover (gris, crece desde el centro) */
.header-vtb .cMenu .av-menu-item .desktop::after {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 0 !important;
    top: auto !important;
    height: 4px !important;
    background: var(--av-line-gray) !important;
    border-radius: 4px 4px 0 0 !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform .25s ease !important;
    pointer-events: none !important;
}
.header-vtb .cMenu .av-menu-item .desktop:hover::after,
.header-vtb .cMenu .av-menu-item:hover .desktop::after { transform: scaleX(1) !important; }

/* Ítem activo (azul fijo) */
.header-vtb .cMenu .av-active .desktop { color: var(--av-blue) !important; }
.header-vtb .cMenu .av-active .desktop::after {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 0 !important;
    top: auto !important;
    height: 4px !important;
    background: var(--av-blue) !important;
    border-radius: 4px 4px 0 0 !important;
    transform: scaleX(1) !important;
    transition: none !important;
    pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   6. Hero + Buscador
   -------------------------------------------------------------------------- */
.c-box-home.av-hero-search {
    position: relative !important;
    overflow: visible !important;
    background: #fff !important;
    min-height: 520px !important;
    padding-bottom: 0 !important;
}
.c-box-home.av-hero-search::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 92px !important;
    left: 0 !important;
    width: 100% !important;
    height: 426px !important;
    background: url("../images/PHDesk-GRAL-BTS26-1920x426-CO.webp") center center / cover no-repeat !important;
    pointer-events: none !important;
}
.c-box-home.av-hero-search > .container,
.c-box-home.av-hero-search .av-flight-booker-wrap {
    position: relative !important;
    z-index: 3 !important;
}

/* ---- Tarjeta del buscador: una sola fila + tipo de vuelo abajo ---- */
.search {
    display: grid !important;
    grid-template-columns: 1.15fr auto 1.15fr 1.25fr 0.9fr auto !important;
    grid-template-areas:
        "origin  swap    dest    dates   pax     action"
        "filters filters filters filters filters filters" !important;
    column-gap: 10px !important;
    row-gap: 12px !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #eef1f6 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(15, 30, 70, .10) !important;
    padding: 16px 18px !important;
}

/* --- Fila 1: campos --- */
.search .search__inputs,
.search .search__details,
.search .search__action { display: contents !important; }

.search .search__route { display: contents !important; }
.search .search__route > .smartbox:nth-child(1)   { grid-area: origin !important; }
.search .search__route > .smartbox:nth-child(2)   { grid-area: dest   !important; }
.search .search__route > .search__swap            { grid-area: swap   !important; }
.search .search__details > .smartbox:nth-child(1) { grid-area: dates  !important; }
.search .search__details > .smartbox:nth-child(2) { grid-area: pax    !important; }
.search .search__action                           { grid-area: action !important; display: block !important; }

/* --- Botón swap: círculo azul pequeño --- */
.search .search__swap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--av-blue-hover) !important;
    cursor: pointer !important;
    transition: background .15s, color .15s !important;
}
.search .search__swap:hover {
    background: #eaf1fd !important;
}
.search .search__swap .search__swap-icon,
.search .search__swap [class*="icons-"] {
    font-size: 18px !important;
    color: var(--av-blue-hover) !important;
}

/* --- Fila 2: tipo de vuelo --- */
.search .search__filters {
    grid-area: filters !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding-top: 2px !important;
}
.search .search__filters .group {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.search .search__filters .group__legend {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--av-text) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    float: none !important;
    border: 0 !important;
}
.search .group__legend {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--av-text) !important;
    margin: 0 !important;
}
.search .group__list {
    display: flex !important;
    gap: 22px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.search .option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}
.search .option__check {
    accent-color: var(--av-blue-hover) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}
.search .option__pill {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--av-text) !important;
}

/* --- Inputs con borde y altura fija --- */
.search .smartbox { width: 100% !important; height: 100% !important; }
.search .smartbox__trigger {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 58px !important;
    padding: 8px 14px !important;
    background: #fff !important;
    border: 1px solid var(--av-border-input) !important;
    border-radius: var(--av-radius) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.search .smartbox__trigger:hover        { border-color: #b9c4d8 !important; }
.search .smartbox__trigger:focus-within { border-color: var(--av-blue-hover) !important; box-shadow: 0 0 0 3px rgba(26,115,232,.12) !important; }

.search .field {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}
.search .field__icon {
    color: var(--av-text-muted) !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
}
.search .field__icon [class*="icons-"] { font-size: 20px !important; }
.search .field__data {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}
.search .field__label {
    font-size: 11.5px !important;
    color: var(--av-text-muted) !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
}
.search .field__input {
    border: 0 !important;
    outline: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--av-text) !important;
    width: 100% !important;
    line-height: 1.2 !important;
    height: auto !important;
}
.search .field__input::placeholder {
    color: #a7b0c0 !important;
    font-weight: 400 !important;
}

/* --- Botón Buscar --- */
.search .search__btn,
.search .btnPrimary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 58px !important;
    padding: 0 26px !important;
    background: var(--av-blue-hover) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--av-radius) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(26,115,232,.25) !important;
    white-space: nowrap !important;
    transition: filter .15s !important;
}
.search .search__btn:hover { filter: brightness(1.06) !important; }

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .search {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "origin  dest"
            "dates   pax"
            "filters filters"
            "action  action" !important;
    }
    .search .search__route > .search__swap { display: none !important; }
    .search .search__btn { width: 100% !important; }
}

@media (max-width: 991.98px) {
    .av-phones-btn span:not(.av-chevron-down),
    .av-phones-btn strong { display: none !important; }
    .av-phones-btn { padding: 10px 12px !important; }
    .av-help-btn   { padding: 10px 14px !important; }
}

@media (max-width: 767.98px) {
    .header-vtb .c-nav-md > .container { min-height: 68px !important; }
    .header-vtb .navbar-brand .logo-tb {
        height: 48px !important;
        max-width: 200px !important;
    }
    .av-brand-tagline,
    .av-top-link,
    .av-login,
    .av-help-wrap,
    .av-phones-wrap,
    .header-vtb .c-nav-md .navbar-collapse { display: none !important; }

    .header-vtb .cMenu {
        display: block !important;
        height: 62px !important;
        overflow: hidden !important;
    }
    .header-vtb .cMenu > .container {
        width: 100% !important;
        max-width: 100% !important;
        height: 62px !important;
        padding: 0 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .header-vtb .cMenu > .container::-webkit-scrollbar { display: none !important; }
    .header-vtb .cMenu .d-flex,
    .header-vtb .cMenu .av-main-menu {
        width: max-content !important;
        min-width: max-content !important;
        height: 62px !important;
        align-items: center !important;
    }
    .header-vtb .cMenu .av-menu-item .desktop { height: 62px !important; }
    .header-vtb .cMenu .av-badge-item > small { display: none !important; }
    .header-vtb .header-mobile { display: none !important; }

    .c-box-home.av-hero-search {
        background-image: none !important;
        background-color: #fff !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }
    .c-box-home.av-hero-search::before { content: none !important; }
    .c-box-home.av-hero-search::after {
        content: "";
        display: block;
        width: 100%;
        height: 235px;
        margin: 0;
        background:
            linear-gradient(180deg, rgba(8,36,82,.03), rgba(8,36,82,.18)),
            url("../images/PHDesk-GRAL-BTS26-1920x426-CO.webp") center / cover no-repeat;
    }

    .search {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "filters"
            "origin"
            "dest"
            "dates"
            "pax"
            "action" !important;
    }
    .search .search__route > .search__swap {
        display: inline-flex !important;
        justify-self: center !important;
        margin: -6px 0 !important;
    }
    .search .search__btn { width: 100% !important; }
}

@media (max-width: 560px) {
    .av-phones-dropdown {
        width: calc(100vw - 24px) !important;
        right: -60px !important;
        padding: 18px 16px !important;
    }
    .av-phones-grid { grid-template-columns: 1fr !important; }
    .av-phones-main { font-size: 26px !important; }
}

@media (max-width: 380px) {
    .c-box-home.av-hero-search::after { height: 205px !important; }
}