:root {
    --vs-color-ink: #07111f;
    --vs-color-ink-soft: #172235;
    --vs-color-muted: #607086;
    --vs-color-subtle: #8a98aa;
    --vs-color-line: #dde5ee;
    --vs-color-line-strong: #c5d0dd;
    --vs-color-page: #f6f8fb;
    --vs-color-surface: #ffffff;
    --vs-color-surface-soft: #f9fbfd;
    --vs-color-surface-elevated: rgba(255, 255, 255, 0.88);
    --vs-color-brand: #164e63;
    --vs-color-brand-strong: #0f3a4a;
    --vs-color-brand-soft: #e7f3f6;
    --vs-color-accent: #b88a44;
    --vs-color-accent-soft: #f5eee3;
    --vs-color-success: #16836a;
    --vs-color-warning: #b7791f;
    --vs-color-danger: #b42318;

    --vs-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --vs-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --vs-letter-tight: 0;
    --vs-letter-wide: 0.035em;

    --vs-space-1: 0.25rem;
    --vs-space-2: 0.5rem;
    --vs-space-3: 0.75rem;
    --vs-space-4: 1rem;
    --vs-space-5: 1.25rem;
    --vs-space-6: 1.5rem;
    --vs-space-8: 2rem;
    --vs-space-10: 2.5rem;
    --vs-space-12: 3rem;
    --vs-space-16: 4rem;

    --vs-radius-xs: 0.375rem;
    --vs-radius-sm: 0.5rem;
    --vs-radius-md: 0.75rem;
    --vs-radius-lg: 1rem;
    --vs-radius-xl: 1.25rem;
    --vs-radius-pill: 999px;

    --vs-shadow-xs: 0 1px 2px rgba(7, 17, 31, 0.06);
    --vs-shadow-sm: 0 8px 20px rgba(7, 17, 31, 0.07);
    --vs-shadow-md: 0 18px 42px rgba(7, 17, 31, 0.11);
    --vs-shadow-focus: 0 0 0 4px rgba(22, 78, 99, 0.16);

    --vs-transition-fast: 140ms ease;
    --vs-transition-base: 220ms ease;
}

html {
    color-scheme: light;
}

body {
    font-family: var(--vs-font-sans);
    color: var(--vs-color-ink);
    background:
        radial-gradient(circle at top left, rgba(22, 78, 99, 0.07), transparent 34rem),
        var(--vs-color-page);
    letter-spacing: var(--vs-letter-tight);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection {
    color: var(--vs-color-surface);
    background: var(--vs-color-brand);
}

:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--vs-shadow-focus);
}

.vs-shell {
    width: min(100% - 2rem, 80rem);
    margin-inline: auto;
}

.vs-section {
    padding-block: clamp(var(--vs-space-8), 5vw, var(--vs-space-16));
}

.vs-eyebrow {
    color: var(--vs-color-brand);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: var(--vs-letter-wide);
    text-transform: uppercase;
}

.vs-title {
    color: var(--vs-color-ink);
    font-family: var(--vs-font-display);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.02;
}

.vs-copy {
    color: var(--vs-color-muted);
    line-height: 1.7;
}

.vs-surface {
    background: var(--vs-color-surface);
    border: 1px solid var(--vs-color-line);
    box-shadow: var(--vs-shadow-xs);
}

.vs-card {
    background: var(--vs-color-surface);
    border: 1px solid rgba(197, 208, 221, 0.8);
    border-radius: var(--vs-radius-lg);
    box-shadow: var(--vs-shadow-xs);
    transition:
        border-color var(--vs-transition-base),
        box-shadow var(--vs-transition-base),
        transform var(--vs-transition-base);
}

.vs-card:hover {
    border-color: rgba(22, 78, 99, 0.24);
    box-shadow: var(--vs-shadow-sm);
    transform: translateY(-2px);
}

.vs-card-quiet {
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(221, 229, 238, 0.88);
    border-radius: var(--vs-radius-md);
}

.vs-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    color: var(--vs-color-brand);
    background: var(--vs-color-brand-soft);
    border: 1px solid rgba(22, 78, 99, 0.12);
    border-radius: var(--vs-radius-md);
    transition:
        color var(--vs-transition-base),
        background-color var(--vs-transition-base),
        border-color var(--vs-transition-base),
        box-shadow var(--vs-transition-base),
        transform var(--vs-transition-base);
}

.vs-icon-tile-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    color: var(--vs-color-brand);
    background: var(--vs-color-brand-soft);
    border: 1px solid rgba(22, 78, 99, 0.12);
    border-radius: var(--vs-radius-md);
    box-shadow: 0 10px 24px rgba(22, 78, 99, 0.08);
}

.vs-icon-tile svg {
    transition: transform var(--vs-transition-base);
}

.vs-icon-tile-static svg {
    transform: none;
}

.vs-icon-tile [class*="text-blue-"] {
    color: currentColor !important;
}

.vs-icon-tile-static [class*="text-blue-"] {
    color: currentColor !important;
}

.vs-icon-tile-static.bg-white\/12 {
    color: var(--vs-color-surface) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none;
}

.vs-card:hover .vs-icon-tile,
.service-card:hover .vs-icon-tile,
.group:hover .vs-icon-tile {
    color: var(--vs-color-surface);
    background: var(--vs-color-brand);
    border-color: var(--vs-color-brand);
    box-shadow: 0 12px 28px rgba(22, 78, 99, 0.2);
    transform: translateY(-2px);
}

.vs-card:hover .vs-icon-tile svg,
.service-card:hover .vs-icon-tile svg,
.group:hover .vs-icon-tile svg {
    transform: translate3d(1px, -1px, 0);
}

.vs-badge-on-media {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.28rem 0.62rem;
    color: var(--vs-color-surface);
    background: rgba(7, 17, 31, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--vs-radius-pill);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: var(--vs-letter-wide);
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.vs-button,
.vs-button-primary,
.vs-button-secondary,
.vs-button-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vs-space-2);
    min-height: 2.75rem;
    padding: 0.78rem 1.15rem;
    border-radius: var(--vs-radius-md);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--vs-transition-fast),
        border-color var(--vs-transition-fast),
        color var(--vs-transition-fast),
        box-shadow var(--vs-transition-fast),
        transform var(--vs-transition-fast);
}

.vs-button:hover,
.vs-button-primary:hover,
.vs-button-secondary:hover,
.vs-button-ghost:hover {
    transform: translateY(-1px);
}

.vs-button-primary {
    color: var(--vs-color-surface);
    background: var(--vs-color-brand);
    border: 1px solid var(--vs-color-brand);
    box-shadow: 0 10px 24px rgba(22, 78, 99, 0.18);
}

.vs-button-primary:hover {
    background: var(--vs-color-brand-strong);
    border-color: var(--vs-color-brand-strong);
}

.vs-button-secondary {
    color: var(--vs-color-brand-strong);
    background: var(--vs-color-brand-soft);
    border: 1px solid rgba(22, 78, 99, 0.14);
}

.vs-button-secondary:hover {
    background: #dceff3;
    border-color: rgba(22, 78, 99, 0.24);
}

.vs-button-ghost {
    color: var(--vs-color-ink-soft);
    background: transparent;
    border: 1px solid transparent;
}

.vs-button-ghost:hover {
    color: var(--vs-color-brand-strong);
    background: rgba(22, 78, 99, 0.07);
}

.vs-segmented {
    display: inline-flex;
    align-items: center;
    gap: var(--vs-space-1);
    width: fit-content;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--vs-color-line);
    border-radius: var(--vs-radius-lg);
    box-shadow: var(--vs-shadow-xs);
}

.vs-segmented-option {
    min-height: 2.5rem;
    padding-inline: 1rem;
    color: var(--vs-color-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--vs-radius-md);
    font-weight: 800;
    transition:
        color var(--vs-transition-fast),
        background-color var(--vs-transition-fast),
        border-color var(--vs-transition-fast),
        box-shadow var(--vs-transition-fast);
}

.vs-segmented-option:hover {
    color: var(--vs-color-brand-strong);
    background: rgba(22, 78, 99, 0.07);
}

.vs-segmented-option.bg-blue-600,
.vs-segmented-option.active {
    color: var(--vs-color-surface);
    background: var(--vs-color-brand) !important;
    border-color: var(--vs-color-brand);
    box-shadow: 0 8px 18px rgba(22, 78, 99, 0.18);
}

.vs-field {
    width: 100%;
    min-height: 3rem;
    color: var(--vs-color-ink);
    background: var(--vs-color-surface-soft);
    border: 1px solid var(--vs-color-line);
    border-radius: var(--vs-radius-md);
    transition:
        background-color var(--vs-transition-fast),
        border-color var(--vs-transition-fast),
        box-shadow var(--vs-transition-fast);
}

.vs-field:hover {
    border-color: var(--vs-color-line-strong);
    background: var(--vs-color-surface);
}

.vs-field:focus,
.vs-field:focus-visible {
    border-color: var(--vs-color-brand);
    background: var(--vs-color-surface);
    box-shadow: var(--vs-shadow-focus);
    outline: none;
}

.vs-label {
    display: block;
    margin-bottom: var(--vs-space-2);
    color: var(--vs-color-subtle);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: var(--vs-letter-wide);
    text-transform: uppercase;
}

.vs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--vs-space-1);
    width: fit-content;
    min-height: 1.5rem;
    padding: 0.25rem 0.55rem;
    color: var(--vs-color-brand-strong);
    background: var(--vs-color-brand-soft);
    border: 1px solid rgba(22, 78, 99, 0.12);
    border-radius: var(--vs-radius-pill);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: var(--vs-letter-wide);
    text-transform: uppercase;
}

.vs-badge-accent {
    color: #704c18;
    background: var(--vs-color-accent-soft);
    border-color: rgba(184, 138, 68, 0.18);
}

.vs-state-success {
    color: var(--vs-color-success);
    background: rgba(22, 131, 106, 0.1);
}

.vs-state-warning {
    color: var(--vs-color-warning);
    background: rgba(183, 121, 31, 0.11);
}

.vs-state-danger {
    color: var(--vs-color-danger);
    background: rgba(180, 35, 24, 0.1);
}

.vs-nav {
    display: flex;
    align-items: center;
    gap: var(--vs-space-3);
    color: var(--vs-color-ink-soft);
    font-size: 0.875rem;
    font-weight: 750;
}

.vs-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--vs-space-2);
    min-height: 2.5rem;
    padding: 0.5rem 0.7rem;
    color: inherit;
    border-radius: var(--vs-radius-pill);
    text-decoration: none;
    transition:
        color var(--vs-transition-fast),
        background-color var(--vs-transition-fast);
}

.vs-nav-link:hover,
.vs-nav-link[aria-current="page"] {
    color: var(--vs-color-brand-strong);
    background: rgba(22, 78, 99, 0.07);
}

.vs-footer {
    color: rgba(255, 255, 255, 0.76);
    background:
        linear-gradient(180deg, #07111f 0%, #030711 100%);
}

.vs-footer-link {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition: color var(--vs-transition-fast), opacity var(--vs-transition-fast);
}

.vs-footer-link:hover {
    color: var(--vs-color-surface);
}

/* Compatibility layer: legacy Tailwind blues now render as ViajeStudio premium tones. */
.text-blue-600,
.hover\:text-blue-600:hover {
    color: var(--vs-color-brand) !important;
}

.text-blue-700,
.text-blue-800 {
    color: var(--vs-color-brand-strong) !important;
}

.bg-blue-50,
.bg-blue-100 {
    background-color: var(--vs-color-brand-soft) !important;
}

.bg-blue-600,
.bg-blue-700,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background-color: var(--vs-color-brand) !important;
}

.border-blue-400,
.focus\:border-blue-400:focus {
    border-color: var(--vs-color-brand) !important;
}

.from-blue-600 {
    --tw-gradient-from: var(--vs-color-brand) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(22, 78, 99, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-700 {
    --tw-gradient-to: var(--vs-color-brand-strong) var(--tw-gradient-to-position);
}

/* Autocompletados: neutraliza estilos inline antiguos y azul heredado. */
.autocomplete-suggestions {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(22, 78, 99, 0.12) !important;
    border-radius: var(--vs-radius-lg) !important;
    box-shadow: var(--vs-shadow-md) !important;
    overflow: hidden !important;
    z-index: 2147482500 !important;
}

.autocomplete-suggestion {
    color: var(--vs-color-ink) !important;
    background: transparent !important;
    transition:
        color var(--vs-transition-fast),
        background-color var(--vs-transition-fast);
}

.autocomplete-suggestion strong {
    color: var(--vs-color-brand-strong) !important;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion:focus,
.autocomplete-suggestion:active,
.autocomplete-suggestion[aria-selected="true"],
.autocomplete-suggestion.selected,
.autocomplete-suggestion.active {
    color: var(--vs-color-brand-strong) !important;
    background: var(--vs-color-brand-soft) !important;
}

header {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

header nav a,
header nav button {
    border-radius: var(--vs-radius-pill);
    transition:
        color var(--vs-transition-fast),
        background-color var(--vs-transition-fast);
}

header nav a:hover,
header nav button:hover {
    background: rgba(22, 78, 99, 0.07);
}

.dropdown-content {
    border-color: var(--vs-color-line);
    box-shadow: var(--vs-shadow-md);
}

.mobile-menu {
    border-color: var(--vs-color-line);
    box-shadow: var(--vs-shadow-md);
}

footer {
    background:
        linear-gradient(180deg, #07111f 0%, #030711 100%);
}

footer a {
    transition: color var(--vs-transition-fast), opacity var(--vs-transition-fast);
}

footer a:hover {
    color: var(--vs-color-surface);
    opacity: 1;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 198px;
    width: 198px;
    min-width: 198px;
    text-decoration: none;
}

.brand-logo img {
    display: block;
    width: 198px;
    height: auto;
    max-height: 47px;
}

.footer-brand-logo img {
    width: 190px;
    max-height: 46px;
}

.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: 0.32rem;
    color: currentColor;
    vertical-align: -0.125rem;
}

header nav a,
header nav button,
.mobile-menu a,
.menu-label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

header > div {
    gap: 1rem;
}

header nav.hidden {
    flex: 0 1 auto;
    min-width: 0;
}

.mobile-menu button {
    align-items: center;
}

.mobile-menu button .menu-label {
    min-width: 0;
}

.mobile-menu .menu-icon,
.dropdown-content .menu-icon {
    width: 1rem;
}

@media (max-width: 380px) {
    .brand-logo {
        flex-basis: 150px;
        width: 150px;
        min-width: 150px;
    }

    .brand-logo img {
        width: 150px;
    }
}

@media (min-width: 768px) {
    .brand-logo {
        flex-basis: 198px;
        width: 198px;
        min-width: 198px;
    }

    .brand-logo img {
        width: 198px;
        max-height: 47px;
    }
}

@media (min-width: 1280px) and (max-width: 1500px) {
    header nav.hidden.xl\:flex {
        gap: 0.3rem;
        font-size: 0.75rem;
    }

    header nav.hidden.xl\:flex .menu-icon {
        width: 0.9rem;
        margin-right: 0.08rem;
    }

    header nav.hidden.xl\:flex .vs-nav-link {
        min-height: 2.25rem;
        padding: 0.38rem 0.42rem;
        gap: 0.25rem;
    }
}

/* Calendarios ViajeStudio: capa visual y de prioridad global */
.fechas-wrapper,
#fechas-vuelta-container {
    position: relative;
    z-index: 80;
    overflow: visible;
}

.vs-card:has(.calendar-container:not(.hidden)),
.vs-card:has(.date-pill:hover) {
    position: relative;
    z-index: 1300;
    overflow: visible;
}

.calendar-container {
    z-index: 2147483000 !important;
    min-width: min(22rem, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem);
    color: var(--vs-color-ink) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 252, 0.98)) !important;
    border: 1px solid rgba(22, 78, 99, 0.16) !important;
    border-radius: var(--vs-radius-lg) !important;
    box-shadow: var(--vs-shadow-lg) !important;
    backdrop-filter: blur(18px);
    overflow: visible !important;
}

.calendar-container.hidden {
    display: none !important;
}

.calendar-header {
    color: var(--vs-color-ink) !important;
    font-weight: 850 !important;
}

.calendar-header button,
.calendar-container button[id^="prev-month"],
.calendar-container button[id^="next-month"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    min-height: 2.1rem;
    color: var(--vs-color-brand) !important;
    background: var(--vs-color-brand-soft) !important;
    border: 1px solid rgba(22, 78, 99, 0.12) !important;
    border-radius: var(--vs-radius-pill) !important;
    transition:
        color var(--vs-transition-fast),
        background-color var(--vs-transition-fast),
        border-color var(--vs-transition-fast),
        transform var(--vs-transition-fast);
}

.calendar-header button:hover,
.calendar-container button[id^="prev-month"]:hover,
.calendar-container button[id^="next-month"]:hover {
    color: var(--vs-color-surface) !important;
    background: var(--vs-color-brand) !important;
    border-color: var(--vs-color-brand) !important;
    transform: translateY(-1px);
}

.calendar-weekdays {
    color: var(--vs-color-muted) !important;
    letter-spacing: var(--vs-letter-wide);
    text-transform: uppercase;
}

.calendar-day {
    color: var(--vs-color-ink) !important;
    border: 1px solid transparent;
    border-radius: var(--vs-radius-pill) !important;
}

.calendar-day:hover:not(.disabled) {
    color: var(--vs-color-brand-strong) !important;
    background: var(--vs-color-brand-soft) !important;
    border-color: rgba(22, 78, 99, 0.12);
    border-radius: var(--vs-radius-pill) !important;
}

.calendar-day.selected,
.calendar-day.selected-start,
.calendar-day.selected-end,
.calendar-day.single-selected {
    color: var(--vs-color-surface) !important;
    background: var(--vs-color-brand) !important;
    border-color: var(--vs-color-brand) !important;
    border-radius: var(--vs-radius-pill) !important;
    box-shadow: 0 10px 22px rgba(22, 78, 99, 0.2);
}

.calendar-day.in-range {
    color: var(--vs-color-brand-strong) !important;
    background: rgba(22, 78, 99, 0.11) !important;
    border-color: rgba(22, 78, 99, 0.08);
    border-radius: var(--vs-radius-pill) !important;
}

.calendar-day.other-month {
    color: rgba(100, 116, 139, 0.45) !important;
}

.calendar-day.disabled {
    color: rgba(100, 116, 139, 0.32) !important;
    background: transparent !important;
}

.date-pill {
    position: relative;
}

.date-pill:hover {
    border-color: rgba(22, 78, 99, 0.2) !important;
    background: var(--vs-color-brand-soft) !important;
}

.calendar-container button[id^="clear-dates"],
.calendar-container button[id^="clear-return"] {
    color: var(--vs-color-muted) !important;
}

.calendar-container button[id^="clear-dates"]:hover,
.calendar-container button[id^="clear-return"]:hover {
    color: var(--vs-color-brand-strong) !important;
}

.calendar-container button[id^="close-calendar"],
.calendar-container button[id^="close-return"] {
    color: var(--vs-color-surface) !important;
    background: var(--vs-color-brand) !important;
    border: 1px solid var(--vs-color-brand) !important;
    border-radius: var(--vs-radius-pill) !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.75rem !important;
    font-weight: 850 !important;
}