/* =========================================================
   VELOX MVC - PREMIUM LANDING PAGE
========================================================= */

:root {
    --velox-primary: var(--velox-primary-config, #6d28d9);
    --velox-primary-light: #8b5cf6;
    --velox-primary-dark: #4c1d95;

    --velox-dark: #09090b;
    --velox-dark-soft: #111114;
    --velox-text: #18181b;
    --velox-muted: #71717a;
    --velox-border: #e4e4e7;
    --velox-background: #f8f8fa;
    --velox-success: #10b981;

    --velox-font:
            var(
                    --font-sans,
                    "Chillax",
                    "Helvetica Neue",
                    Arial,
                    sans-serif
            );
}


html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    font-family: var(--velox-font) !important;
}



/* =========================================================
   NAVBAR
========================================================= */

.public-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;

    padding: 1.2rem 0;

    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.4);

    transition:
            background 0.3s ease,
            padding 0.3s ease,
            box-shadow 0.3s ease;
}

.public-navbar.navbar-scrolled {
    padding: 0.75rem 0;

    background: rgba(255, 255, 255, 0.94);

    box-shadow:
            0 10px 35px rgba(15, 23, 42, 0.08);
}

.velox-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    color: #111827 !important;

    font-size: 1.35rem;
    font-weight: 800;

    letter-spacing: -0.7px;

    text-decoration: none;
}

.velox-brand small {
    display: inline-block;

    margin-left: 3px;

    color: var(--velox-primary-light);

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.5px;
}

.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 12px;

    color: white;

    background:
            linear-gradient(
                    135deg,
                    #7c3aed,
                    #2563eb
            );

    box-shadow:
            0 8px 22px rgba(109, 40, 217, 0.3);

    transform: rotate(-5deg);

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
}

.velox-brand:hover .brand-mark {
    transform: rotate(0deg) scale(1.08);

    box-shadow:
            0 10px 30px rgba(109, 40, 217, 0.4);
}

/* Logo cargado desde Settings: limitar tamaño y evitar desbordes. */
.velox-brand .brand-mark .brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 4px;
    object-fit: contain;
    object-position: center;
    border-radius: inherit;
    transform: none;
}

.velox-brand:has(.brand-logo) .brand-mark {
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
    transform: none;
}

.velox-brand:has(.brand-logo):hover .brand-mark {
    transform: scale(1.04);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

.login-brand .brand-icon .brand-logo,
.mobile-brand .brand-icon .brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    object-fit: contain;
    object-position: center;
    border-radius: inherit;
}

.login-brand .brand-icon:has(.brand-logo),
.mobile-brand .brand-icon:has(.brand-logo) {
    overflow: hidden;
    background: #ffffff;
}

.public-navbar .nav-link {
    position: relative;
    transition:
            color 0.25s ease,
            transform 0.25s ease;
}

.public-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--velox-primary);
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.public-navbar .nav-link:hover {
    color: var(--velox-primary) !important;
}

.public-navbar .nav-link:hover::after,
.public-navbar .nav-link.active {
    color: var(--velox-primary);
    font-weight: 700;
}

/* =========================================================
   RESERVATION NAV LINK
========================================================= */

.public-navbar .reservation-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.public-navbar .reservation-nav-link.active {
    color: var(--velox-primary);
}


/* =========================================================
   LOGIN ACTIVE
========================================================= */

.public-navbar .btn-velox-primary.active {
    transform: translateY(-1px);
}

/* =========================================================
   VELOX NAVBAR DROPDOWN
========================================================= */

.public-navbar .dropdown-menu.velox-dropdown {
    min-width: 280px;
    padding: 0.65rem;
    margin-top: 0.75rem;
    border: 1px solid var(--velox-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(9, 9, 11, 0.12);
    animation: veloxDropdownIn 0.2s ease-out;
}


/* =========================================================
   DROPDOWN ITEM
========================================================= */

.public-navbar .velox-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;

    padding: 0.75rem 0.85rem;

    border-radius: 11px;

    color: var(--velox-text);

    transition:
            background-color 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
}


/* =========================================================
   ICON
========================================================= */

.public-navbar .velox-dropdown .dropdown-item > i {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: rgba(109, 40, 217, 0.08);

    color: var(--velox-primary);

    font-size: 0.9rem;

    transition:
            background-color 0.2s ease,
            color 0.2s ease;
}


/* =========================================================
   TEXT
========================================================= */

.public-navbar .velox-dropdown .dropdown-item span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.public-navbar .velox-dropdown .dropdown-item strong {
    font-size: 0.9rem;
    font-weight: 600;
}

.public-navbar .velox-dropdown .dropdown-item small {
    font-size: 0.72rem;
    color: var(--velox-muted);
}


/* =========================================================
   HOVER
========================================================= */

.public-navbar .velox-dropdown .dropdown-item:hover {
    background: rgba(109, 40, 217, 0.07);
    color: var(--velox-primary);
    transform: translateX(3px);
}

.public-navbar .velox-dropdown .dropdown-item:hover > i {
    background: var(--velox-primary);
    color: #ffffff;
}


/* =========================================================
   ACTIVE ITEM
========================================================= */

.public-navbar .velox-dropdown .dropdown-item.active {
    background: var(--velox-primary);
    color: #ffffff;
}

.public-navbar .velox-dropdown .dropdown-item.active small {
    color: rgba(255, 255, 255, 0.75);
}

.public-navbar .velox-dropdown .dropdown-item.active > i {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}


/* =========================================================
   DROPDOWN TOGGLE
========================================================= */

.public-navbar .nav-link.dropdown-toggle {
    display: inline-flex;
    align-items: center;
}

.public-navbar .nav-link.dropdown-toggle::after {
    margin-left: 0.45rem;
    vertical-align: middle;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes veloxDropdownIn {

    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .public-navbar .dropdown-menu.velox-dropdown {
        width: 100%;
        min-width: 0;
        margin-top: 0.35rem;
        border-radius: 13px;
        box-shadow: none;
    }

    .public-navbar .velox-dropdown .dropdown-item {
        padding: 0.7rem;
    }

}

.btn-velox-primary {
    display: inline-flex;
    align-items: center;

    padding: 0.7rem 1.2rem;

    border: 0;
    border-radius: 12px;

    color: white !important;

    background:
            linear-gradient(
                    135deg,
                    #111827,
                    #1f2937
            );

    font-size: 0.85rem;
    font-weight: 700;

    box-shadow:
            0 8px 20px rgba(17, 24, 39, 0.18);

    transition:
            transform 0.25s ease,
            box-shadow 0.25s ease;
}

.btn-velox-primary:hover {
    transform: translateY(-2px);

    box-shadow:
            0 12px 28px rgba(17, 24, 39, 0.25);
}


/* =========================================================
   HERO
========================================================= */

.velox-hero {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    color: white;

    background:
            radial-gradient(
                    circle at 80% 20%,
                    rgba(124, 58, 237, 0.3),
                    transparent 35%
            ),
            radial-gradient(
                    circle at 20% 80%,
                    rgba(37, 99, 235, 0.2),
                    transparent 35%
            ),
            #070711;
}

.hero-grid {
    position: absolute;
    inset: 0;

    opacity: 0.18;

    background-image:
            linear-gradient(
                    rgba(255,255,255,0.05) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255,255,255,0.05) 1px,
                    transparent 1px
            );

    background-size: 55px 55px;

    mask-image:
            linear-gradient(
                    to bottom,
                    black,
                    transparent
            );
}

.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    animation: glowMove 9s ease-in-out infinite alternate;
}

.hero-glow-1 {
    top: 10%;
    right: 5%;

    width: 350px;
    height: 350px;

    background: rgba(124, 58, 237, 0.2);
}

.hero-glow-2 {
    bottom: 0;
    left: 5%;

    width: 300px;
    height: 300px;

    background: rgba(37, 99, 235, 0.18);

    animation-delay: -4s;
}

@keyframes glowMove {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(30px, -25px, 0) scale(1.15);
    }
}


/* Floating shapes */

.floating-shape {
    position: absolute;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 50%;

    pointer-events: none;

    animation:
            floatShape 10s ease-in-out infinite;
}

.shape-one {
    top: 20%;
    left: 5%;

    width: 60px;
    height: 60px;
}

.shape-two {
    right: 3%;
    bottom: 20%;

    width: 100px;
    height: 100px;

    animation-delay: -3s;
}

.shape-three {
    top: 35%;
    right: 40%;

    width: 30px;
    height: 30px;

    animation-delay: -6s;
}

@keyframes floatShape {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-25px) rotate(180deg);
    }
}


/* Hero content */

.hero-badge {
    display: inline-flex;
    align-items: center;

    padding: 0.55rem 0.9rem;

    margin-bottom: 1.5rem;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 100px;

    color: rgba(255,255,255,0.9);

    background: rgba(255,255,255,0.06);

    backdrop-filter: blur(10px);

    font-size: 0.78rem;
    font-weight: 600;
}

.pulse-dot {
    width: 7px;
    height: 7px;

    margin-right: 0.6rem;

    border-radius: 50%;

    background: #34d399;

    box-shadow:
            0 0 0 5px rgba(52,211,153,0.1);

    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0% {
        box-shadow:
                0 0 0 0 rgba(52,211,153,0.4);
    }

    70% {
        box-shadow:
                0 0 0 8px rgba(52,211,153,0);
    }

    100% {
        box-shadow:
                0 0 0 0 rgba(52,211,153,0);
    }
}

.hero-title {
    max-width: 850px;

    margin-bottom: 1.5rem;

    font-size: clamp(
            3rem,
            6vw,
            5.8rem
    );

    line-height: 0.98;

    font-weight: 800;

    letter-spacing: -4px;
}

.hero-title span {
    display: block;

    color: transparent;

    background:
            linear-gradient(
                    90deg,
                    #a78bfa,
                    #60a5fa,
                    #c084fc
            );

    background-clip: text;
    -webkit-background-clip: text;

    background-size: 200% auto;

    animation: gradientText 5s linear infinite;
}

@keyframes gradientText {
    to {
        background-position: 200% center;
    }
}

.hero-actions {
    display: flex;

    gap: 1rem;

    flex-wrap: wrap;
}

.btn-hero-primary,
.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.8rem;

    min-height: 56px;

    padding: 0.9rem 1.5rem;

    border-radius: 14px;

    font-weight: 700;

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            background 0.3s ease;
}

.btn-hero-primary {
    color: white;

    border: 0;

    background:
            linear-gradient(
                    135deg,
                    #7c3aed,
                    #2563eb
            );

    box-shadow:
            0 12px 35px rgba(99, 102, 241, 0.3);
}

.btn-hero-primary:hover {
    color: white;

    transform: translateY(-3px);

    box-shadow:
            0 18px 45px rgba(99, 102, 241, 0.45);
}

.btn-hero-secondary {
    color: white;

    border: 1px solid rgba(255,255,255,0.14);

    background: rgba(255,255,255,0.05);
}

.btn-hero-secondary:hover {
    color: white;

    background: rgba(255,255,255,0.1);

    transform: translateY(-3px);
}

.btn-hero-secondary i {
    font-size: 0.7rem;
}

.hero-trust {
    display: flex;

    flex-wrap: wrap;

    gap: 1.4rem;

    margin-top: 2rem;

    color: rgba(255,255,255,0.45);

    font-size: 0.75rem;
}

.trust-item {
    display: flex;
    align-items: center;

    gap: 0.45rem;
}

.trust-item i {
    color: var(--velox-primary-light);
}


/* =========================================================
   HERO DASHBOARD
========================================================= */

.hero-dashboard {
    position: relative;

    width: 100%;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 24px;

    overflow: hidden;

    background:
            linear-gradient(
                    145deg,
                    rgba(255,255,255,0.1),
                    rgba(255,255,255,0.03)
            );

    box-shadow:
            0 40px 100px rgba(0,0,0,0.5),
            inset 0 1px 0 rgba(255,255,255,0.08);

    backdrop-filter: blur(25px);

    transform:
            perspective(1200px)
            rotateY(-5deg)
            rotateX(3deg);

    animation: dashboardFloat 6s ease-in-out infinite;
}

@keyframes dashboardFloat {
    0%,
    100% {
        transform:
                perspective(1200px)
                rotateY(-5deg)
                rotateX(3deg)
                translateY(0);
    }

    50% {
        transform:
                perspective(1200px)
                rotateY(-3deg)
                rotateX(2deg)
                translateY(-12px);
    }
}

.dashboard-glow {
    position: absolute;

    top: -100px;
    right: -80px;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background: rgba(124,58,237,0.25);

    filter: blur(70px);
}

.dashboard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1rem 1.2rem;

    border-bottom: 1px solid rgba(255,255,255,0.08);

    background: rgba(255,255,255,0.03);
}

.dashboard-dots {
    display: flex;

    gap: 5px;
}

.dashboard-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: rgba(255,255,255,0.25);
}

.dashboard-title {
    color: rgba(255,255,255,0.6);

    font-size: 0.7rem;
}

.dashboard-status {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #6ee7b7;

    font-size: 0.65rem;
}

.dashboard-status span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #34d399;
}

.dashboard-body {
    padding: 1.4rem;
}

.dashboard-welcome small {
    color: rgba(255,255,255,0.4);

    font-size: 0.65rem;
}

.dashboard-welcome h4 {
    margin: 0.2rem 0 1.3rem;

    color: white;

    font-size: 1rem;
}

.dashboard-cards {
    display: grid;

    gap: 0.6rem;
}

.mini-card {
    display: flex;
    align-items: center;

    gap: 0.7rem;

    padding: 0.7rem;

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 12px;

    background: rgba(255,255,255,0.04);
}

.mini-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 10px;

    color: #a78bfa;

    background: rgba(139,92,246,0.12);

    font-size: 0.75rem;
}

.mini-card-icon.dark {
    color: #60a5fa;

    background: rgba(37,99,235,0.12);
}

.mini-card-icon.purple {
    color: #f0abfc;

    background: rgba(217,70,239,0.12);
}

.mini-card div:nth-child(2) {
    flex: 1;
}

.mini-card small {
    display: block;

    color: rgba(255,255,255,0.4);

    font-size: 0.55rem;
}

.mini-card strong {
    display: block;

    margin-top: 2px;

    color: white;

    font-size: 0.8rem;
}

.positive {
    color: #34d399;

    font-size: 0.55rem;
}

.dashboard-chart {
    margin-top: 1rem;

    padding: 1rem;

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 14px;

    background: rgba(255,255,255,0.025);
}

.chart-header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 1rem;
}

.chart-header small {
    display: block;

    color: rgba(255,255,255,0.4);

    font-size: 0.55rem;
}

.chart-header strong {
    color: #a78bfa;

    font-size: 0.8rem;
}

.chart-header span {
    color: rgba(255,255,255,0.3);

    font-size: 0.5rem;
}

.fake-chart {
    position: relative;

    display: flex;
    align-items: end;

    justify-content: space-between;

    height: 100px;

    padding-top: 15px;
}

.chart-bar {
    width: 7%;

    border-radius: 4px 4px 0 0;

    background:
            linear-gradient(
                    to top,
                    rgba(124,58,237,0.2),
                    var(--velox-primary-light)
            );

    animation: chartGrow 1.5s ease both;
}

.bar-1 { height: 35%; }
.bar-2 { height: 50%; }
.bar-3 { height: 40%; }
.bar-4 { height: 70%; }
.bar-5 { height: 55%; }
.bar-6 { height: 85%; }
.bar-7 { height: 72%; }

@keyframes chartGrow {
    from {
        transform: scaleY(0);
        transform-origin: bottom;
    }

    to {
        transform: scaleY(1);
    }
}

.chart-line {
    position: absolute;

    left: 0;
    right: 0;
    top: 35%;

    border-top: 1px dashed rgba(255,255,255,0.08);
}


/* Scroll */

.scroll-indicator {
    position: absolute;

    bottom: 25px;
    left: 50%;

    display: flex;
    align-items: center;

    gap: 0.7rem;

    color: rgba(255,255,255,0.35);

    font-size: 0.65rem;

    text-decoration: none;

    transform: translateX(-50%);
}

.scroll-indicator span {
    display: block;

    width: 20px;
    height: 32px;

    border: 1px solid rgba(255,255,255,0.2);

    border-radius: 20px;

    position: relative;
}

.scroll-indicator span::after {
    content: "";

    position: absolute;

    top: 6px;
    left: 50%;

    width: 3px;
    height: 6px;

    border-radius: 10px;

    background: white;

    transform: translateX(-50%);

    animation: scrollDot 1.8s infinite;
}

@keyframes scrollDot {
    from {
        transform:
                translate(-50%, 0);
        opacity: 1;
    }

    to {
        transform:
                translate(-50%, 12px);
        opacity: 0;
    }
}


/* =========================================================
   SECTIONS
========================================================= */

.section-light,
.metrics-section,
.testimonials-section,
.contact-section {
    padding: 7rem 0;
}

.services-section {
    background: #f8fafc;
}

.section-heading {
    max-width: 720px;

    margin-left: auto;
    margin-right: auto;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 0.5rem;

    margin-bottom: 1rem;

    color: #7c3aed;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.section-eyebrow.light {
    color: #a78bfa;
}

.section-heading h2 {
    margin-bottom: 1rem;

    color: #111827;

    font-size: clamp(
            2.2rem,
            4vw,
            3.4rem
    );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;
}

.section-heading h2 span {
    color: #7c3aed;
}

.section-heading p {
    margin: 0;

    color: #6b7280;

    line-height: 1.8;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card {
    position: relative;

    height: 100%;

    padding: 2rem;

    border: 1px solid #e5e7eb;

    border-radius: 22px;

    background: white;

    overflow: hidden;

    transition:
            transform 0.35s ease,
            box-shadow 0.35s ease,
            border-color 0.35s ease;
}

.service-card::before {
    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background: rgba(124,58,237,0.05);

    transition: transform 0.5s ease;
}

.service-card:hover {
    transform: translateY(-10px);

    border-color: rgba(124,58,237,0.2);

    box-shadow:
            0 25px 60px rgba(15,23,42,0.1);
}

.service-card:hover::before {
    transform: scale(1.8);
}

.service-number {
    position: absolute;

    top: 1.5rem;
    right: 1.5rem;

    color: #e5e7eb;

    font-size: 0.7rem;
    font-weight: 800;
}

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 1.5rem;

    border-radius: 16px;

    font-size: 1.25rem;
}

.service-icon.purple {
    color: #7c3aed;
    background: #f3e8ff;
}

.service-icon.blue {
    color: #2563eb;
    background: #dbeafe;
}

.service-icon.green {
    color: #059669;
    background: #d1fae5;
}

.service-icon.orange {
    color: #ea580c;
    background: #ffedd5;
}

.service-icon.cyan {
    color: #0891b2;
    background: #cffafe;
}

.service-icon.pink {
    color: #db2777;
    background: #fce7f3;
}

.service-card h4 {
    margin-bottom: 0.8rem;

    color: #111827;

    font-size: 1.15rem;
    font-weight: 750;

    letter-spacing: -0.4px;
}

.service-card p {
    margin-bottom: 1.5rem;

    color: #6b7280;

    font-size: 0.88rem;
    line-height: 1.75;
}

.service-card a {
    display: inline-flex;
    align-items: center;

    gap: 0.5rem;

    color: #111827;

    font-size: 0.8rem;
    font-weight: 700;

    text-decoration: none;
}

.service-card a i {
    transition: transform 0.25s ease;
}

.service-card:hover a i {
    transform: translateX(5px);
}


/* =========================================================
   VALUE SECTION
========================================================= */

.value-section {
    position: relative;

    padding: 8rem 0;

    overflow: hidden;

    color: white;

    background:
            radial-gradient(
                    circle at 80% 50%,
                    rgba(124,58,237,0.2),
                    transparent 35%
            ),
            #09090f;
}

.value-grid {
    position: absolute;
    inset: 0;

    opacity: 0.15;

    background-image:
            linear-gradient(
                    rgba(255,255,255,0.04) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255,255,255,0.04) 1px,
                    transparent 1px
            );

    background-size: 50px 50px;
}

.value-title {
    margin-bottom: 1.5rem;

    font-size: clamp(
            2.8rem,
            5vw,
            4.8rem
    );

    line-height: 1;

    letter-spacing: -3px;
}

.value-title span {
    color: #a78bfa;
}

.value-description {
    max-width: 550px;

    margin-bottom: 2rem;

    color: rgba(255,255,255,0.55);

    font-size: 1rem;
    line-height: 1.8;
}

.value-list {
    display: flex;

    flex-direction: column;

    gap: 1.5rem;
}

.value-item {
    display: flex;

    gap: 1rem;
}

.value-check {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(167,139,250,0.25);

    border-radius: 10px;

    color: #a78bfa;

    background: rgba(124,58,237,0.12);

    font-size: 0.7rem;
}

.value-item strong {
    display: block;

    margin-bottom: 0.25rem;

    color: white;

    font-size: 0.9rem;
}

.value-item p {
    margin: 0;

    color: rgba(255,255,255,0.42);

    font-size: 0.78rem;

    line-height: 1.6;
}


/* Visual */

.value-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 520px;
}

.value-orbit {
    position: absolute;

    border: 1px solid rgba(139,92,246,0.2);

    border-radius: 50%;
}

.orbit-one {
    width: 340px;
    height: 340px;

    animation: orbitRotate 20s linear infinite;
}

.orbit-two {
    width: 470px;
    height: 470px;

    border-color: rgba(96,165,250,0.1);

    animation:
            orbitRotate 30s linear infinite reverse;
}

@keyframes orbitRotate {
    to {
        transform: rotate(360deg);
    }
}

.value-center {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 120px;
    height: 120px;

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 35px;

    color: white;

    background:
            linear-gradient(
                    135deg,
                    #7c3aed,
                    #2563eb
            );

    box-shadow:
            0 0 70px rgba(124,58,237,0.4);

    font-size: 2rem;

    animation: centerPulse 4s ease-in-out infinite;
}

@keyframes centerPulse {
    50% {
        box-shadow:
                0 0 100px rgba(124,58,237,0.6);
    }
}

.value-floating {
    position: absolute;
    z-index: 3;

    display: flex;
    align-items: center;

    gap: 0.5rem;

    padding: 0.7rem 1rem;

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 12px;

    color: rgba(255,255,255,0.8);

    background: rgba(255,255,255,0.06);

    backdrop-filter: blur(15px);

    font-size: 0.65rem;

    animation: floatingCard 5s ease-in-out infinite;
}

.value-floating i {
    color: #a78bfa;
}

.value-floating-1 {
    top: 25%;
    left: 5%;
}

.value-floating-2 {
    top: 20%;
    right: 5%;

    animation-delay: -1s;
}

.value-floating-3 {
    right: 5%;
    bottom: 22%;

    animation-delay: -2s;
}

.value-floating-4 {
    bottom: 18%;
    left: 5%;

    animation-delay: -3s;
}

@keyframes floatingCard {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}


/* =========================================================
   METRICS
========================================================= */

.metrics-section {
    background: white;
}

.metric-card {
    padding: 2rem 1rem;

    text-align: center;

    border: 1px solid #e5e7eb;

    border-radius: 20px;

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-7px);

    box-shadow:
            0 20px 50px rgba(15,23,42,0.08);
}

.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0 auto 1rem;

    border-radius: 14px;

    color: #7c3aed;

    background: #f3e8ff;
}

.metric-value {
    color: #111827;

    font-size: clamp(
            2rem,
            4vw,
            3rem
    );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;
}

.metric-label {
    margin-top: 0.6rem;

    color: #6b7280;

    font-size: 0.75rem;
}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials-section {
    background: #f8fafc;
}

.testimonial-card {
    position: relative;

    height: 100%;

    padding: 2.5rem;

    border: 1px solid #e5e7eb;

    border-radius: 24px;

    background: white;

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-7px);

    box-shadow:
            0 25px 60px rgba(15,23,42,0.09);
}

.testimonial-stars {
    margin-bottom: 1.3rem;

    color: #f59e0b;

    font-size: 0.75rem;
}

.testimonial-card blockquote {
    margin-bottom: 2rem;

    color: #374151;

    font-size: 1.05rem;

    line-height: 1.8;

    font-weight: 500;
}

.testimonial-author {
    display: flex;
    align-items: center;

    gap: 0.8rem;
}

.author-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 14px;

    color: white;

    background: #111827;

    font-size: 0.75rem;
    font-weight: 800;
}

.author-avatar.purple {
    background:
            linear-gradient(
                    135deg,
                    #7c3aed,
                    #2563eb
            );
}

.testimonial-author strong {
    display: block;

    color: #111827;

    font-size: 0.8rem;
}

.testimonial-author small {
    display: block;

    margin-top: 2px;

    color: #9ca3af;

    font-size: 0.7rem;
}


/* =========================================================
   CTA
========================================================= */

.cta-section {
    position: relative;

    padding: 4rem 0;

    overflow: hidden;

    background: #f8fafc;
}

.cta-glow {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 600px;
    height: 300px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(124,58,237,0.15),
                    transparent 70%
            );

    transform: translate(-50%, -50%);

    filter: blur(30px);
}

.cta-card {
    position: relative;

    padding: 5rem 3rem;

    overflow: hidden;

    border-radius: 30px;

    text-align: center;

    color: white;

    background:
            radial-gradient(
                    circle at 20% 20%,
                    rgba(139,92,246,0.3),
                    transparent 30%
            ),
            radial-gradient(
                    circle at 80% 80%,
                    rgba(37,99,235,0.3),
                    transparent 30%
            ),
            #09090f;

    box-shadow:
            0 30px 80px rgba(15,23,42,0.2);
}

.cta-content {
    max-width: 750px;

    margin: auto;
}

.cta-card h2 {
    margin-bottom: 1rem;

    font-size: clamp(
            2.3rem,
            5vw,
            4.2rem
    );

    line-height: 1;

    letter-spacing: -2.5px;
}

.cta-card h2 span {
    display: block;

    color: #a78bfa;
}

.cta-card p {
    max-width: 550px;

    margin: 0 auto 2rem;

    color: rgba(255,255,255,0.5);

    line-height: 1.8;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    background: white;
}

.contact-info {
    height: 100%;

    padding: 2rem 0;
}

.contact-info h3 {
    margin-bottom: 1rem;

    color: #111827;

    font-size: 2rem;

    font-weight: 800;

    letter-spacing: -1px;
}

.contact-info h3 span {
    color: #7c3aed;
}

.contact-info > p {
    max-width: 450px;

    margin-bottom: 2.5rem;

    color: #6b7280;

    line-height: 1.8;
}

.contact-detail {
    display: flex;
    align-items: center;

    gap: 1rem;

    margin-bottom: 1.5rem;
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    border-radius: 13px;

    color: #7c3aed;

    background: #f3e8ff;
}

.contact-detail small {
    display: block;

    margin-bottom: 3px;

    color: #9ca3af;

    font-size: 0.65rem;
}

.contact-detail strong {
    display: block;

    color: #374151;

    font-size: 0.8rem;
}

.contact-socials {
    display: flex;

    gap: 0.7rem;

    margin-top: 2.5rem;
}

.contact-socials a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    color: #6b7280;

    text-decoration: none;

    transition:
            color 0.25s ease,
            background 0.25s ease,
            transform 0.25s ease;
}

.contact-socials a:hover {
    color: white;

    background: #111827;

    transform: translateY(-3px);
}

.contact-form {
    height: 100%;

    padding: 2.5rem;

    border: 1px solid #e5e7eb;

    border-radius: 24px;

    background: #f8fafc;

    box-shadow:
            0 20px 60px rgba(15,23,42,0.05);
}

.contact-form label {
    display: block;

    margin-bottom: 0.5rem;

    color: #374151;

    font-size: 0.72rem;
    font-weight: 700;
}

.input-wrapper {
    position: relative;
}


.contact-form input,
.contact-form textarea {
    width: 100%;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    outline: none;

    color: #111827;

    background: white;

    font-size: 0.8rem;

    transition:
            border-color 0.25s ease,
            box-shadow 0.25s ease;
}

.contact-form input {
    height: 52px;

    padding: 0 1rem 0 2.8rem;
}

.contact-form textarea {
    padding: 1rem;

    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--velox-primary-light);

    box-shadow:
            0 0 0 4px rgba(139,92,246,0.1);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #b0b7c3;
}

.btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.7rem;

    width: 100%;

    min-height: 54px;

    border: 0;
    border-radius: 13px;

    color: white;

    background:
            linear-gradient(
                    135deg,
                    #111827,
                    #1f2937
            );

    font-weight: 700;

    transition:
            transform 0.25s ease,
            box-shadow 0.25s ease;
}

.btn-submit:hover {
    color: white;

    transform: translateY(-2px);

    box-shadow:
            0 12px 30px rgba(17,24,39,0.2);
}


/* =========================================================
   FOOTER
========================================================= */

.velox-footer {
    padding: 4rem 0 1.5rem;

    color: white;

    background: #09090f;
}

.footer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 3rem;

    padding-bottom: 3rem;
}

.footer-brand {
    color: white !important;
}

.footer-main > div:first-child > p {
    max-width: 300px;

    margin-top: 1rem;

    color: rgba(255,255,255,0.4);

    font-size: 0.75rem;

    line-height: 1.7;
}

.footer-links {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 1.5rem;
}

.footer-links a {
    color: rgba(255,255,255,0.5);

    font-size: 0.75rem;

    text-decoration: none;

    transition: color 0.25s ease;
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;

    gap: 1rem;

    padding-top: 1.5rem;

    border-top: 1px solid rgba(255,255,255,0.08);

    color: rgba(255,255,255,0.3);

    font-size: 0.65rem;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .public-navbar .navbar-collapse {
        margin-top: 1rem;

        padding: 1rem;

        border: 1px solid #e5e7eb;

        border-radius: 18px;

        background: rgba(255,255,255,0.98);

        box-shadow:
                0 20px 50px rgba(15,23,42,0.1);
    }

    .public-navbar .nav-link {
        padding: 0.75rem !important;
    }

    .public-navbar .nav-link::after {
        display: none;
    }

    .hero-title {
        letter-spacing: -2.5px;
    }

    .hero-dashboard {
        max-width: 600px;

        margin: 0 auto;
    }

    .value-visual {
        height: 450px;
    }

    .orbit-one {
        width: 280px;
        height: 280px;
    }

    .orbit-two {
        width: 380px;
        height: 380px;
    }
}


@media (max-width: 767.98px) {

    .section-light,
    .metrics-section,
    .testimonials-section,
    .contact-section {
        padding: 5rem 0;
    }

    .velox-hero {
        min-height: auto;
    }

    .velox-hero .row {
        min-height: auto !important;
        padding-top: 8rem !important;
        padding-bottom: 5rem !important;
    }

    .hero-title {
        font-size: clamp(
                2.8rem,
                13vw,
                4rem
        );

        letter-spacing: -2px;
    }

    .hero-description {
        font-size: 1rem;

        line-height: 1.7;
    }

    .hero-actions {
        flex-direction: column;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
    }

    .hero-trust {
        flex-direction: column;

        gap: 0.7rem;
    }

    .hero-dashboard {
        transform: none;

        animation: none;
    }

    .dashboard-body {
        padding: 1rem;
    }

    .mini-card {
        padding: 0.6rem;
    }

    .scroll-indicator {
        display: none;
    }

    .value-section {
        padding: 5rem 0;
    }

    .value-title {
        font-size: 3rem;

        letter-spacing: -2px;
    }

    .value-visual {
        height: 350px;

        margin-top: 1rem;
    }

    .orbit-one {
        width: 220px;
        height: 220px;
    }

    .orbit-two {
        width: 300px;
        height: 300px;
    }

    .value-center {
        width: 90px;
        height: 90px;

        border-radius: 26px;
    }

    .value-floating {
        padding: 0.55rem 0.7rem;

        font-size: 0.55rem;
    }

    .value-floating-1 {
        left: 0;
    }

    .value-floating-2 {
        right: 0;
    }

    .value-floating-3 {
        right: 0;
    }

    .value-floating-4 {
        left: 0;
    }

    .cta-card {
        padding: 3.5rem 1.5rem;
    }

    .cta-card h2 {
        letter-spacing: -1.5px;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .footer-main {
        flex-direction: column;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .footer-bottom {
        flex-direction: column;
    }
}


@media (max-width: 420px) {

    .velox-brand {
        font-size: 1.15rem;
    }

    .brand-mark {
        width: 34px;
        height: 34px;
    }

    .hero-title {
        font-size: 2.6rem;
    }

    .hero-badge {
        font-size: 0.65rem;
    }

    .dashboard-topbar {
        padding: 0.8rem;
    }

    .dashboard-body {
        padding: 0.8rem;
    }

    .dashboard-chart {
        padding: 0.7rem;
    }

    .section-heading h2 {
        font-size: 2.2rem;
    }

    .service-card {
        padding: 1.5rem;
    }

    .testimonial-card {
        padding: 1.5rem;
    }

    .metric-card {
        padding: 1.5rem 0.5rem;
    }

    .metric-value {
        font-size: 1.9rem;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}

/* ================================================================
   PAGE
================================================================ */

.velox-login-page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
            radial-gradient(
                    circle at 10% 10%,
                    rgba(109, 40, 217, 0.08),
                    transparent 35%
            ),
            radial-gradient(
                    circle at 90% 90%,
                    rgba(139, 92, 246, 0.06),
                    transparent 35%
            ),
            #f7f7f9;

    font-family: var(--font-sans, var(--velox-font, 'Chillax', 'Helvetica Neue', Arial, sans-serif));

    padding: 40px 20px;
}


/* ================================================================
   BACKGROUND
================================================================ */

.login-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-grid {
    position: absolute;
    inset: 0;

    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.025) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(0, 0, 0, 0.025) 1px,
                    transparent 1px
            );

    background-size: 45px 45px;

    mask-image: linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
    );
}


/* ================================================================
   FLOATING ORBS
================================================================ */

.bg-orb {
    position: absolute;
    border-radius: 50%;

    filter: blur(80px);

    opacity: 0.35;

    animation:
            veloxFloat 12s ease-in-out infinite;
}

.bg-orb-1 {
    width: 350px;
    height: 350px;

    background: rgba(124, 58, 237, 0.20);

    top: -150px;
    left: -100px;
}

.bg-orb-2 {
    width: 280px;
    height: 280px;

    background: rgba(99, 102, 241, 0.15);

    right: -80px;
    bottom: -100px;

    animation-delay: -4s;
}

.bg-orb-3 {
    width: 180px;
    height: 180px;

    background: rgba(168, 85, 247, 0.12);

    top: 40%;
    right: 20%;

    animation-delay: -8s;
}

@keyframes veloxFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(
                20px,
                -25px,
                0
        );
    }
}


/* ================================================================
   CONTAINER
================================================================ */

.login-container {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    display: flex;
    justify-content: center;
    margin-top: 70px;
}


/* ================================================================
   MAIN CARD
================================================================ */

.login-card {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(420px, 0.95fr)
        minmax(430px, 1.05fr);

    background: #ffffff;

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
            0 40px 100px rgba(0, 0, 0, 0.10),
            0 10px 30px rgba(0, 0, 0, 0.04);

    animation:
            loginCardAppear 0.8s
            cubic-bezier(.16, 1, .3, 1)
            forwards;
}

@keyframes loginCardAppear {

    from {
        opacity: 0;
        transform:
                translateY(25px)
                scale(0.97);
    }

    to {
        opacity: 1;
        transform:
                translateY(0)
                scale(1);
    }
}


/* ================================================================
   LEFT SHOWCASE
================================================================ */

.login-showcase {
    position: relative;

    min-height: 720px;

    overflow: hidden;

    color: #ffffff;

    background:
            radial-gradient(
                    circle at 80% 10%,
                    rgba(139, 92, 246, 0.35),
                    transparent 30%
            ),
            radial-gradient(
                    circle at 10% 90%,
                    rgba(79, 70, 229, 0.25),
                    transparent 35%
            ),
            linear-gradient(
                    145deg,
                    #09090b 0%,
                    #111113 55%,
                    #1b102b 100%
            );
}


/* Grid */
.login-showcase::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.18;

    background-image:
            linear-gradient(
                    rgba(255,255,255,.06) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255,255,255,.06) 1px,
                    transparent 1px
            );

    background-size: 40px 40px;
}


/* Glow */
.showcase-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    top: -180px;
    right: -160px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(139, 92, 246, 0.25),
                    transparent 70%
            );

    filter: blur(20px);

    animation:
            showcaseGlow 8s ease-in-out infinite;
}

@keyframes showcaseGlow {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}


/* ================================================================
   SHOWCASE CONTENT
================================================================ */

.showcase-content {
    position: relative;
    z-index: 2;

    height: 100%;

    min-height: 720px;

    display: flex;
    flex-direction: column;

    padding: 48px;
}


/* ================================================================
   BRAND
================================================================ */

.login-brand,
.mobile-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
            linear-gradient(
                    135deg,
                    var(--velox-primary-light),
                    #5b21b6
            );

    box-shadow:
            0 8px 25px
            rgba(124, 58, 237, 0.35);

    font-size: 21px;
    font-weight: 800;

    color: #ffffff;

    position: relative;
    overflow: hidden;
}

.brand-icon::after {
    content: "";

    position: absolute;

    width: 60px;
    height: 10px;

    background: rgba(255,255,255,.25);

    transform: rotate(-45deg)
    translateX(-60px);

    animation:
            logoShine 4s ease-in-out infinite;
}

@keyframes logoShine {

    0% {
        transform:
                rotate(-45deg)
                translateX(-70px);
    }

    35%,
    100% {
        transform:
                rotate(-45deg)
                translateX(80px);
    }
}

.brand-text {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.brand-name {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.7px;
}

.brand-version {
    font-size: 12px;
    font-weight: 600;

    color: #a78bfa;

    letter-spacing: 1px;
}


/* ================================================================
   SHOWCASE MAIN
================================================================ */

.showcase-main {
    margin-top: auto;
    margin-bottom: auto;

    max-width: 500px;
}

.showcase-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 12px;

    border-radius: 100px;

    background:
            rgba(255,255,255,0.07);

    border:
            1px solid rgba(255,255,255,0.10);

    color: #c4b5fd;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #a78bfa;

    box-shadow:
            0 0 0 4px
            rgba(167,139,250,.12);

    animation:
            badgePulse 2s infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        box-shadow:
                0 0 0 4px
                rgba(167,139,250,.12);
    }

    50% {
        box-shadow:
                0 0 0 8px
                rgba(167,139,250,0);
    }
}


/* ================================================================
   SHOWCASE TITLE
================================================================ */

.showcase-main h1 {
    margin: 24px 0 18px;

    font-size: clamp(
            2.5rem,
            4vw,
            3.7rem
    );

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 800;
}

.showcase-main h1 span {
    display: block;

    background:
            linear-gradient(
                    90deg,
                    #ffffff,
                    #c4b5fd
            );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}

.showcase-main > p {
    margin-bottom: 32px;

    color: #a1a1aa;

    font-size: 15px;

    line-height: 1.75;

    max-width: 450px;
}


/* ================================================================
   FEATURES
================================================================ */

.showcase-features {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.showcase-feature {
    display: flex;
    align-items: center;
    gap: 13px;

    transition:
            transform .3s ease;
}

.showcase-feature:hover {
    transform: translateX(6px);
}

.feature-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    background:
            rgba(139, 92, 246, 0.12);

    border:
            1px solid
            rgba(139, 92, 246, 0.18);

    color: #a78bfa;

    font-size: 14px;
}

.showcase-feature strong,
.showcase-feature span {
    display: block;
}

.showcase-feature strong {
    font-size: 13px;

    color: #f4f4f5;

    margin-bottom: 2px;
}

.showcase-feature span {
    font-size: 11px;

    color: #71717a;
}


/* ================================================================
   STATS
================================================================ */

.showcase-bottom {
    display: flex;
    align-items: center;

    gap: 25px;

    padding-top: 30px;

    border-top:
            1px solid
            rgba(255,255,255,.08);
}

.mini-stat strong,
.mini-stat span {
    display: block;
}

.mini-stat strong {
    font-size: 20px;

    font-weight: 750;

    color: #ffffff;
}

.mini-stat span {
    margin-top: 3px;

    font-size: 9px;

    color: #71717a;

    text-transform: uppercase;

    letter-spacing: .8px;
}

.stat-divider {
    width: 1px;
    height: 30px;

    background:
            rgba(255,255,255,.10);
}


/* ================================================================
   RIGHT FORM PANEL
================================================================ */

.login-form-panel {
    display: flex;
    align-items: center;

    background: #ffffff;

    padding: 60px 70px;
}

.login-form-content {
    width: 100%;
    max-width: 420px;

    margin: auto;
}


/* ================================================================
   MOBILE BRAND
================================================================ */

.mobile-brand {
    display: none;

    margin-bottom: 45px;
}


/* ================================================================
   HEADER
================================================================ */

.login-header {
    margin-bottom: 38px;
}

.login-welcome {
    display: block;

    margin-bottom: 9px;

    color: var(--velox-primary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.login-header h2 {
    margin: 0 0 9px;

    color: #18181b;

    font-size: 34px;

    line-height: 1.15;

    letter-spacing: -1.4px;

    font-weight: 800;
}

.login-header p {
    margin: 0;

    color: #71717a;

    font-size: 13px;

    line-height: 1.65;
}


/* ================================================================
   FORM FIELD
================================================================ */

.login-field {
    margin-bottom: 24px;
}

.login-field label {
    display: block;

    margin-bottom: 8px;

    color: #3f3f46;

    font-size: 12px;

    font-weight: 650;
}

.field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;
}

.field-header label {
    margin-bottom: 0;
}


/* ================================================================
   INPUT
================================================================ */

.input-wrapper {
    position: relative;

    display: flex;
    align-items: center;

    height: 54px;

    border:
            1px solid #e4e4e7;

    border-radius: 13px;

    background: #fafafa;

    transition:
            border-color .25s ease,
            box-shadow .25s ease,
            background .25s ease,
            transform .25s ease;
}

.input-wrapper:focus-within {
    background: #ffffff;

    border-color:
            var(--velox-primary-light);

    box-shadow:
            0 0 0 4px
            rgba(109,40,217,.08);

    transform: translateY(-1px);
}

.input-icon {
    width: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #a1a1aa;

    font-size: 14px;

    transition:
            color .25s ease;
}

.input-wrapper:focus-within .input-icon {
    color: var(--velox-primary);
}

.login-input {
    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #18181b;

    font-size: 13px;

    padding: 0 10px 0 2px;

    min-width: 0;
}

.login-input::placeholder {
    color: #a1a1aa;
}

.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #18181b;

    -webkit-box-shadow:
            0 0 0 1000px #ffffff inset;
}


/* ================================================================
   INPUT STATUS
================================================================ */

.input-status {
    display: none;

    width: 42px;

    color: var(--velox-success);

    font-size: 12px;

    text-align: center;
}

.login-input:valid:not(:placeholder-shown)
~ .input-status {
    display: block;
}


/* ================================================================
   PASSWORD BUTTON
================================================================ */

.btn-toggle-password {
    width: 45px;
    height: 100%;

    border: none;

    background: transparent;

    color: #a1a1aa;

    cursor: pointer;

    transition:
            color .2s ease;
}

.btn-toggle-password:hover {
    color: #52525b;
}


/* ================================================================
   FORGOT PASSWORD
================================================================ */

.forgot-password-link {
    color: var(--velox-primary);

    font-size: 11px;

    font-weight: 650;

    text-decoration: none;

    transition:
            color .2s ease;
}

.forgot-password-link:hover {
    color: var(--velox-primary-dark);

    text-decoration: underline;
}


/* ================================================================
   REMEMBER
================================================================ */

.login-options {
    margin-top: -4px;

    margin-bottom: 27px;
}

.remember-me {
    display: inline-flex !important;
    align-items: center;

    gap: 9px;

    margin: 0 !important;

    cursor: pointer;

    color: #71717a !important;

    font-size: 11px !important;

    font-weight: 500 !important;
}

.remember-me input {
    display: none;
}

.custom-checkbox {
    width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
            1px solid #d4d4d8;

    border-radius: 5px;

    background: #ffffff;

    transition:
            all .2s ease;

    font-size: 9px;

    color: transparent;
}

.remember-me input:checked
+ .custom-checkbox {
    border-color:
            var(--velox-primary);

    background:
            var(--velox-primary);

    color: #ffffff;
}


/* ================================================================
   LOGIN BUTTON
================================================================ */

.btn-login-submit {
    position: relative;

    width: 100%;
    height: 56px;

    border: none;

    border-radius: 14px;

    background:
            linear-gradient(
                    135deg,
                    #18181b,
                    #27272a
            );

    color: #ffffff;

    cursor: pointer;

    font-size: 12px;

    font-weight: 750;

    letter-spacing: .4px;

    overflow: hidden;

    box-shadow:
            0 10px 25px
            rgba(24,24,27,.18);

    transition:
            transform .25s ease,
            box-shadow .25s ease;
}

.btn-login-submit::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    110deg,
                    transparent 25%,
                    rgba(255,255,255,.15) 50%,
                    transparent 75%
            );

    transform:
            translateX(-120%);

    transition:
            transform .7s ease;
}

.btn-login-submit:hover {
    transform: translateY(-2px);

    box-shadow:
            0 15px 30px
            rgba(24,24,27,.23);
}

.btn-login-submit:hover::before {
    transform:
            translateX(120%);
}

.btn-login-submit:active {
    transform: translateY(0);
}

.btn-login-content {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;
}

.btn-login-content i {
    transition:
            transform .25s ease;
}

.btn-login-submit:hover
.btn-login-content i {
    transform: translateX(4px);
}

.btn-login-loading {
    display: none;

    align-items: center;
    justify-content: center;

    gap: 10px;
}

.btn-login-submit.loading
.btn-login-content {
    display: none;
}

.btn-login-submit.loading
.btn-login-loading {
    display: flex;
}


/* ================================================================
   SECURITY
================================================================ */

.login-security {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 25px;

    padding: 12px 14px;

    border:
            1px solid #f0f0f2;

    border-radius: 11px;

    background: #fafafa;
}

.security-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;

    background:
            rgba(16,185,129,.08);

    color: #10b981;

    font-size: 11px;
}

.login-security strong,
.login-security span {
    display: block;
}

.login-security strong {
    color: #3f3f46;

    font-size: 10px;

    font-weight: 700;
}

.login-security span {
    margin-top: 2px;

    color: #a1a1aa;

    font-size: 9px;
}


/* ================================================================
   FOOTER
================================================================ */

.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 30px;

    color: #a1a1aa;

    font-size: 9px;
}

.footer-separator {
    color: #d4d4d8;
}


/* ================================================================
   RESPONSIVE - TABLET
================================================================ */

@media (max-width: 991.98px) {

    .velox-login-page {
        padding: 25px 15px;
    }

    .login-card {
        grid-template-columns:
            1fr 1fr;
    }

    .login-showcase {
        min-height: 650px;
    }

    .showcase-content {
        min-height: 650px;

        padding: 38px;
    }

    .showcase-main h1 {
        font-size: 2.5rem;
    }

    .login-form-panel {
        padding: 45px 35px;
    }

}


/* ================================================================
   RESPONSIVE - MOBILE
================================================================ */

@media (max-width: 767.98px) {

    .velox-login-page {
        min-height: 100vh;

        padding:
                20px 14px;
    }

    .login-container {
        padding: 0;
    }

    .login-card {
        display: block;

        border-radius: 22px;

        box-shadow:
                0 25px 60px
                rgba(0,0,0,.10);
    }

    .login-showcase {
        display: none;
    }

    .login-form-panel {
        min-height: calc(100vh - 40px);

        padding:
                38px 24px 28px;
    }

    .login-form-content {
        max-width: 100%;
    }

    .mobile-brand {
        display: flex;
    }

    .login-header {
        margin-bottom: 32px;
    }

    .login-header h2 {
        font-size: 30px;
    }

    .login-footer {
        flex-wrap: wrap;
    }

}


/* ================================================================
   RESPONSIVE - SMALL MOBILE
================================================================ */

@media (max-width: 380px) {

    .velox-login-page {
        padding: 10px;
    }

    .login-form-panel {
        min-height: calc(100vh - 20px);

        padding:
                30px 20px 22px;
    }

    .mobile-brand {
        margin-bottom: 35px;
    }

    .login-header h2 {
        font-size: 27px;
    }

    .login-header p {
        font-size: 12px;
    }

    .field-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;
    }

    .login-field {
        margin-bottom: 21px;
    }

}


/* ================================================================
   ACCESSIBILITY
================================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

}

/* ================================================================
   PASSWORD INPUT ICON - FIX
================================================================ */

.input-wrapper .input-icon {
    width: 50px;
    min-width: 50px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #a1a1aa;

    font-size: 14px;

    line-height: 1;

    overflow: visible;
}

.input-wrapper .input-icon i {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    line-height: 1;

    font-size: 14px;

    font-style: normal;

    transform: none;
}

.input-wrapper:focus-within .input-icon {
    color: var(--velox-primary);
}


/* ================================================================
   PASSWORD ICON
================================================================ */

.password-icon {
    padding-left: 1px;
}

.password-icon i {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}


/* ============================================================
   HERO RESERVAS
   RED + BLACK PREMIUM
============================================================ */

.reservation-hero {
    position: relative;

    min-height: 560px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
            #090909;

    color: #fff;

    isolation: isolate;
}


/* ============================================================
   FONDO
============================================================ */

.reservation-hero-background {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    background: #090909;
}


.reservation-hero-background-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform:
            scale(1.015);

    transition:
            opacity 0.45s ease,
            transform 0.8s ease;
}


/* ============================================================
   PLACEHOLDER
============================================================ */

.reservation-hero-background-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
            radial-gradient(
                    circle at 75% 30%,
                    rgba(176, 24, 32, .20),
                    transparent 32%
            ),
            linear-gradient(
                    135deg,
                    #090909 0%,
                    #141414 50%,
                    #090909 100%
            );

    color:
            rgba(255,255,255,.18);

    font-size:
            5rem;
}


/* ============================================================
   OVERLAY PRINCIPAL
============================================================ */

.reservation-hero-background-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
            linear-gradient(
                    90deg,
                    rgba(0,0,0,.94) 0%,
                    rgba(0,0,0,.84) 34%,
                    rgba(0,0,0,.58) 62%,
                    rgba(0,0,0,.48) 100%
            );
}


/* ============================================================
   OVERLAY ROJO
============================================================ */

.reservation-hero::before {
    content: "";

    position: absolute;

    inset:
            auto -8% -42% auto;

    width:
            58vw;

    height:
            58vw;

    max-width:
            850px;

    max-height:
            850px;

    border-radius:
            50%;

    background:
            radial-gradient(
                    circle,
                    rgba(190, 24, 35, .26) 0%,
                    rgba(190, 24, 35, .10) 34%,
                    transparent 70%
            );

    filter:
            blur(10px);

    pointer-events:
            none;

    z-index:
            -1;
}


/* ============================================================
   LÍNEA ROJA SUPERIOR
============================================================ */

.reservation-hero::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background:
            linear-gradient(
                    90deg,
                    transparent 0%,
                    #7f1d1d 15%,
                    #dc2626 50%,
                    #7f1d1d 85%,
                    transparent 100%
            );

    box-shadow:
            0 0 25px rgba(220, 38, 38, .35);

    pointer-events:
            none;

    z-index:
            10;
}


/* ============================================================
   CONTENIDO
============================================================ */

.reservation-hero .hero-content {
    position: relative;

    z-index: 5;

    width:
            min(
                    1180px,
                    calc(100% - 40px)
            );

    margin:
            0 auto;

    padding:
            82px 0 105px;

    margin-top:
            90px;
}


/* ============================================================
   CONTENEDOR INTERNO
============================================================ */

.reservation-hero-content-inner {
    width: 100%;

    max-width: 980px;
}


/* ============================================================
   EYEBROW
============================================================ */

.reservation-hero .hero-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
            8px 13px;

    border:
            1px solid
            rgba(220,38,38,.30);

    border-radius:
            999px;

    background:
            rgba(127,29,29,.16);

    color:
            #fca5a5;

    font-size:
            .70rem;

    font-weight:
            800;

    letter-spacing:
            .16em;

    text-transform:
            uppercase;

    backdrop-filter:
            blur(12px);

    box-shadow:
            inset 0 1px 0
            rgba(255,255,255,.04);
}


.reservation-hero .hero-eyebrow::before {
    content: "";

    width:
            7px;

    height:
            7px;

    flex:
            0 0 7px;

    border-radius:
            50%;

    background:
            #ef4444;

    box-shadow:
            0 0 0 5px
            rgba(239,68,68,.10),

            0 0 16px
            rgba(239,68,68,.75);
}


/* ============================================================
   TÍTULO
============================================================ */

.reservation-hero .hero-title {
    max-width:
            900px;

    margin:
            20px 0 17px;

    color:
            #fff;

    font-family:
            "Playfair Display",
            Georgia,
            serif;

    font-size:
            clamp(
                    3rem,
                    6vw,
                    6.2rem
            );

    font-weight:
            700;

    line-height:
            .94;

    letter-spacing:
            -.055em;

    text-wrap:
            balance;

    text-shadow:
            0 10px 35px
            rgba(0,0,0,.28);
}


/* ============================================================
   DESCRIPCIÓN
============================================================ */

.reservation-hero .hero-description {
    max-width:
            700px;

    margin:
            0 0 28px;

    color:
            rgba(255,255,255,.72);

    font-size:
            1rem;

    line-height:
            1.7;
}


/* ============================================================
   CONTACTO
============================================================ */

.reservation-hero-contact {
    display:
            grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                    0,
                    1fr
            )
        );

    gap:
            10px;

    max-width:
            980px;
}


.reservation-hero-contact-item {
    display:
            flex;

    align-items:
            center;

    gap:
            10px;

    min-width:
            0;

    padding:
            12px 13px;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    .11
            );

    border-radius:
            14px;

    background:
            rgba(
                    10,
                    10,
                    10,
                    .38
            );

    backdrop-filter:
            blur(
                    14px
            );

    box-shadow:
            inset
            0 1px 0
            rgba(
                    255,
                    255,
                    255,
                    .035
            );
}


.reservation-hero-contact-icon {
    width:
            36px;

    height:
            36px;

    flex:
            0 0 36px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    border-radius:
            10px;

    background:
            linear-gradient(
                    135deg,
                    #991b1b,
                    #dc2626
            );

    color:
            #fff;

    font-size:
            .72rem;

    box-shadow:
            0 8px 20px
            rgba(
                    127,
                    29,
                    29,
                    .28
            );
}


.reservation-hero-contact-item > div:last-child {
    min-width:
            0;

    display:
            flex;

    flex-direction:
            column;

    gap:
            3px;
}


.reservation-hero-contact-item span {
    color:
            rgba(
                    255,
                    255,
                    255,
                    .44
            );

    font-size:
            .58rem;

    font-weight:
            800;

    text-transform:
            uppercase;

    letter-spacing:
            .10em;
}


.reservation-hero-contact-item strong {
    display:
            block;

    overflow:
            hidden;

    color:
            #fff;

    font-size:
            .75rem;

    font-weight:
            700;

    line-height:
            1.35;

    white-space:
            nowrap;

    text-overflow:
            ellipsis;
}


/* ============================================================
   GALERÍA
============================================================ */

.reservation-hero-gallery {
    display:
            flex;

    align-items:
            center;

    gap:
            10px;

    width:
            fit-content;

    max-width:
            100%;

    margin-top:
            22px;

    padding:
            6px;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    .08
            );

    border-radius:
            15px;

    background:
            rgba(
                    0,
                    0,
                    0,
                    .28
            );

    backdrop-filter:
            blur(
                    14px
            );
}


.reservation-hero-thumbnails {
    display:
            flex;

    align-items:
            center;

    gap:
            8px;

    max-width:
            calc(
                    100vw - 150px
            );

    overflow-x:
            auto;

    padding:
            2px 1px;

    scrollbar-width:
            thin;
}


.reservation-hero-thumbnail {
    position:
            relative;

    width:
            84px;

    height:
            58px;

    flex:
            0 0 84px;

    padding:
            0;

    overflow:
            hidden;

    border:
            2px solid
            rgba(
                    255,
                    255,
                    255,
                    .13
            );

    border-radius:
            10px;

    background:
            #111;

    cursor:
            pointer;

    transition:
            transform .22s ease,
            border-color .22s ease,
            box-shadow .22s ease;
}


.reservation-hero-thumbnail:hover {
    transform:
            translateY(-2px);

    border-color:
            rgba(
                    255,
                    255,
                    255,
                    .55
            );

    box-shadow:
            0 8px 22px
            rgba(
                    0,
                    0,
                    0,
                    .25
            );
}


.reservation-hero-thumbnail.is-active {
    border-color:
            #ef4444;

    box-shadow:
            0 0 0 2px
            rgba(
                    239,
                    68,
                    68,
                    .16
            );
}


.reservation-hero-thumbnail.is-favorite {
    border-color:
            #dc2626;
}


.reservation-hero-thumbnail img {
    width:
            100%;

    height:
            100%;

    display:
            block;

    object-fit:
            cover;
}


.reservation-hero-thumbnail-star {
    position:
            absolute;

    top:
            4px;

    right:
            4px;

    width:
            19px;

    height:
            19px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    border-radius:
            50%;

    background:
            rgba(
                    0,
                    0,
                    0,
                    .72
            );

    color:
            #facc15;

    font-size:
            .52rem;
}


.reservation-hero-gallery-arrow {
    width:
            34px;

    height:
            34px;

    flex:
            0 0 34px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    padding:
            0;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    .14
            );

    border-radius:
            50%;

    background:
            rgba(
                    0,
                    0,
                    0,
                    .34
            );

    color:
            #fff;

    cursor:
            pointer;

    transition:
            background .2s ease,
            border-color .2s ease,
            transform .2s ease;
}


.reservation-hero-gallery-arrow:hover {
    background:
            #b91c1c;

    border-color:
            #ef4444;

    transform:
            translateY(-1px);
}


/* ============================================================
   FADE DE ENTRADA
============================================================ */

.reservation-hero-content-inner {
    animation:
            reservationHeroIn
            .65s
            ease-out
            both;
}


@keyframes reservationHeroIn {

    from {
        opacity: 0;

        transform:
                translateY(
                        16px
                );
    }

    to {
        opacity: 1;

        transform:
                translateY(
                        0
                );
    }
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .reservation-hero {
        min-height:
                540px;
    }


    .reservation-hero .hero-content {
        padding:
                72px 0
                90px;

        margin-top:
                70px;
    }


    .reservation-hero-contact {
        grid-template-columns:
            1fr;

        max-width:
                580px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .reservation-hero {
        min-height:
                650px;
    }


    .reservation-hero .hero-content {
        width:
                calc(
                        100% - 32px
                );

        padding:
                58px 0
                95px;

        margin-top:
                45px;
    }


    .reservation-hero .hero-title {
        max-width:
                100%;

        font-size:
                2.8rem;

        line-height:
                .97;
    }


    .reservation-hero .hero-description {
        font-size:
                .91rem;

        line-height:
                1.6;
    }


    .reservation-hero-contact {
        grid-template-columns:
            1fr;
    }


    .reservation-hero-contact-item {
        padding:
                11px;
    }


    .reservation-hero-gallery {
        width:
                100%;

        max-width:
                100%;
    }


    .reservation-hero-thumbnails {
        flex:
                1;

        max-width:
                none;
    }


    .reservation-hero-thumbnail {
        width:
                72px;

        flex-basis:
                72px;

        height:
                54px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

    .reservation-hero {
        min-height:
                680px;
    }


    .reservation-hero .hero-title {
        font-size:
                2.35rem;
    }


    .reservation-hero-gallery-arrow {
        width:
                31px;

        height:
                31px;

        flex-basis:
                31px;
    }


    .reservation-hero-thumbnail {
        width:
                68px;

        flex-basis:
                68px;

        height:
                50px;
    }

}

/* ============================================================
   MAIN WRAPPER
   ============================================================ */

.reservation-wrapper {
    position: relative;
    z-index: 5;

    width: min(1180px, calc(100% - 32px));

    margin: -75px auto 80px;
}


/* ============================================================
   MAIN CARD
   ============================================================ */

.reservation-card {
    position: relative;

    overflow: hidden;

    background: var(--reservation-card);

    border: 1px solid var(--reservation-border);

    border-radius: 22px;

    box-shadow:
            0 25px 70px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
            border-color 0.3s ease,
            box-shadow 0.3s ease;
}

.reservation-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(32, 199, 183, 0.45),
                    transparent
            );

    pointer-events: none;
}

.reservation-card:hover {
    border-color: rgba(32, 199, 183, 0.15);

    box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.42),
            0 0 0 1px rgba(32, 199, 183, 0.025);
}

.reservation-content {
    padding: 38px;
}


/* ============================================================
   VELOX — RESERVATION STEPPER
============================================================ */

.reservation-steps {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto 15px;

    padding: 0 8px;
}


/* ============================================================
   STEP
============================================================ */

.reservation-step {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 120px;

    color: #66758a;

    text-align: center;

    transition:
            color 0.3s ease,
            transform 0.3s ease;
}


/* ============================================================
   INDICATOR
============================================================ */

.step-indicator {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-bottom: 11px;

    border-radius: 50%;

    background:
            linear-gradient(
                    145deg,
                    rgba(255,255,255,.055),
                    rgba(255,255,255,.025)
            );

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
            0 8px 25px rgba(0,0,0,.22),
            inset 0 1px 0 rgba(255,255,255,.04);

    transition:
            all .3s ease;
}


/* Número */

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #FFF;

    font-size: .82rem;
    font-weight: 800;

    transition:
            color .3s ease,
            background .3s ease;
}


/* ============================================================
   LABEL
============================================================ */

.step-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 3px;
}

.step-label {
    color: #718198;

    font-size: .78rem;
    font-weight: 700;

    letter-spacing: .01em;

    transition:
            color .3s ease;
}

.step-description {
    color: #46566b;

    font-size: .67rem;
    font-weight: 500;

    white-space: nowrap;

    transition:
            color .3s ease;
}


/* ============================================================
   LÍNEA
============================================================ */

.step-line {
    position: relative;
    flex: 1;
    height: 2px;
    margin-top: 22px;

    background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--bt-red) 12%, transparent),
            color-mix(in srgb, var(--bt-red) 6%, transparent)
    );

    overflow: hidden;

    box-shadow:
            0 0 10px color-mix(in srgb, var(--bt-red) 10%, transparent);

}

.step-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;

    background: linear-gradient(
            90deg,
            var(--bt-red),
            color-mix(in srgb, var(--bt-red) 70%, #fff 30%)
    );

    box-shadow:
            0 0 8px color-mix(in srgb, var(--bt-red) 45%, transparent);

    transition: width 0.4s ease;
}

/* Progreso */

.step-line-progress {
    position: absolute;

    top: 0;
    left: 0;

    width: 0%;
    height: 100%;

    background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--bt-red) 70%, #000 30%),
            var(--bt-red)
    );

    box-shadow:
            0 0 8px color-mix(in srgb, var(--bt-red) 40%, transparent),
            0 0 18px color-mix(in srgb, var(--bt-red) 28%, transparent),
            0 0 30px color-mix(in srgb, var(--bt-red) 12%, transparent);

    transition: width .45s ease;
}


/* ============================================================
   ACTIVE
============================================================ */

.reservation-step.active {
    color: var(--bt-red);
}

.reservation-step.active .step-indicator {
    background: linear-gradient(
            145deg,
            rgba(220, 38, 38, .18),
            rgba(220, 38, 38, .07)
    );

    border-color: rgba(220, 38, 38, .55);

    box-shadow:
            0 0 0 5px rgba(220, 38, 38, .06),
            0 10px 30px rgba(220, 38, 38, .16),
            inset 0 1px 0 rgba(255, 255, 255, .06);

    transform: translateY(-2px);
}

.reservation-step.active .step-number {
    color: var(--bt-red);
}

.reservation-step.active .step-label {
    color: #ffffff;
}

.reservation-step.active .step-description {
    color: #7fded5;
}


/* ============================================================
   COMPLETED
============================================================ */

.reservation-step.completed .step-indicator {
    background: linear-gradient(
            145deg,
            var(--bt-red),
            color-mix(in srgb, var(--bt-red) 65%, #000 35%)
    );

    border-color: var(--bt-red);

    box-shadow:
            0 8px 25px color-mix(in srgb, var(--bt-red) 24%, transparent),
            0 0 30px color-mix(in srgb, var(--bt-red) 18%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, .10);
}

.reservation-step.completed .step-number {
    color: #031615;
}

.reservation-step.completed .step-label {
    color: #cbd7e4;
}

.reservation-step.completed .step-description {
    color: #607187;
}

.reservation-step.completed + .step-line .step-line-progress {
    width: 100%;
}

/* ================================================================
   INFORMACIÓN PÚBLICA DE LA SEDE
================================================================ */

.public-branch-information {
    margin-top: 10px;
    padding: 12px;
    border-radius: 20px;
    background:
            rgba(255, 255, 255, .035);
    border:
            1px solid rgba(255, 255, 255, .07);
    box-shadow:
            0 15px 40px rgba(0, 0, 0, .12);
    animation:
            publicBranchInformationAppear
            .35s
            ease
            both;
}


@keyframes publicBranchInformationAppear {

    from {

        opacity: 0;

        transform:
                translateY(8px);
    }

    to {

        opacity: 1;

        transform:
                translateY(0);
    }
}


/* ================================================================
   HEADER
================================================================ */

.public-branch-information-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;
}


.public-branch-information-icon {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
            rgba(167, 139, 250, .12);

    color:
            #a78bfa;

    font-size: 17px;
}


.public-branch-information-eyebrow {

    display: block;

    margin-bottom: 4px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;

    opacity: .45;
}


.public-branch-information-title {

    margin: 0;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -.02em;
}


/* ================================================================
   INFORMATION GRID
================================================================ */

.public-branch-information-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 20px;
}


.public-branch-information-item {

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 0;

    padding: 12px;

    border-radius: 14px;

    background:
            rgba(255, 255, 255, .025);

    border:
            1px solid rgba(255, 255, 255, .045);
}


.public-branch-information-item-icon {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
            rgba(255, 255, 255, .045);

    font-size: 12px;

    opacity: .7;
}


.public-branch-information-item > div:last-child {

    min-width: 0;
}


.public-branch-information-item span {

    display: block;

    margin-bottom: 3px;

    font-size: 10px;

    opacity: .45;
}


.public-branch-information-item strong {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 600;
}


/* ================================================================
   HORARIOS
================================================================ */

.public-branch-hours {

    padding-top: 18px;

    border-top:
            1px solid rgba(255, 255, 255, .06);
}


.public-branch-hours-header {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;
}


.public-branch-hours-icon {

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
            rgba(255, 255, 255, .045);

    font-size: 12px;

    opacity: .7;
}


/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 700px) {

    .public-branch-information {

        padding: 17px;
    }


    .public-branch-information-grid {

        grid-template-columns: 1fr;
    }


    .public-branch-information-title {

        font-size: 17px;
    }
}

/* ============================================================
   SECTION TITLES
   ============================================================ */

.reservation-page .section-title {
    color: #ffffff;
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.reservation-page .section-description {
    color: var(--reservation-text-soft);
    font-size: 0.92rem;
    line-height: 1.6;
}

.reservation-page .custom-input {
    min-height: 50px;

    padding: 0.7rem 0.9rem;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 13px;

    background: rgba(255, 255, 255, .035);

    color: #ffffff;

    font-family: var(--font-sans, var(--velox-font, 'Chillax', 'Helvetica Neue', Arial, sans-serif));
    font-size: 0.92rem;

    box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, 0.25);

    transition:
            border-color 0.25s ease,
            box-shadow 0.25s ease,
            background 0.25s ease;
}

.reservation-page .custom-input:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.reservation-page .custom-input:focus {
    color: #ffffff;

    background: rgba(255,255,255,.035);

    border-color: var(--bt-red);

    box-shadow:
            0 0 0 4px rgba(32, 199, 183, 0.08),
            0 10px 30px rgba(0, 0, 0, 0.18);

    outline: none;
}

.reservation-page .form-label-custom {
    color: #dce5ef;

    font-size: 0.82rem;
    font-weight: 600;

    margin-bottom: 9px;
}

.reservation-page .people-selector {
    display: flex;
    align-items: center;

    min-height: 50px;

    overflow: hidden;

    border: 1px solid var(--bt-red);

    border-radius: 13px;

    background: rgba(255,255,255,.035);
}

.reservation-page .people-button {
    width: 45px;
    height: 48px;

    border: 0;

    background: transparent;

    color: #a9b6c8;

    font-size: 1.25rem;

    cursor: pointer;

    transition:
            background 0.2s ease,
            color 0.2s ease;
}

.reservation-page .people-button:hover {
    background: rgba(32, 199, 183, 0.08);

    color: var(--reservation-primary);
}

.reservation-page .people-value {
    flex: 1;

    text-align: center;

    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 800;
}

/* ============================================================
   FORM
   ============================================================ */

.form-label-custom {
    display: block;

    margin-bottom: 9px;

    color: #3f3f46;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.02em;
}

.custom-input:hover {
    border-color: #a1a1aa;
}

.custom-input:focus {
    border-color: var(--reservation-primary);

    background: #fff;

    box-shadow:
            0 0 0 4px rgba(109, 40, 217, 0.10);

    outline: none;
}

.custom-input::placeholder {
    color: #a1a1aa;
}

/* =========================================================
   BURGERTOWN - SELECT DE SEDE
   ========================================================= */

.branch-select-wrapper {
    position: relative;
    width: 100%;
}


/* SELECT */

.branch-select-wrapper .custom-input {
    width: 100%;

    min-height: 52px;

    padding: 0 48px 0 16px;

    border-radius: 13px;

    border: 1px solid rgba(255, 255, 255, .10);

    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, .045),
                    rgba(255, 255, 255, .02)
            );

    color: #fff;

    font-size: .92rem;
    font-weight: 600;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;

    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            background .2s ease,
            transform .2s ease;
}


/* HOVER */

.branch-select-wrapper .custom-input:hover {
    border-color: color-mix(
            in srgb,
            var(--bt-red) 40%,
            transparent
    );

    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, .055),
                    rgba(255, 255, 255, .025)
            );
}


/* FOCUS */

.branch-select-wrapper .custom-input:focus {
    border-color: var(--bt-red);

    outline: none;

    box-shadow:
            0 0 0 4px color-mix(
                    in srgb,
                    var(--bt-red) 10%,
                    transparent
            ),
            0 0 25px color-mix(
                    in srgb,
                    var(--bt-red) 12%,
                    transparent
            );
}


/* FLECHA */

.branch-select-icon {
    position: absolute;

    top: 50%;
    right: 17px;

    transform: translateY(-50%);

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: color-mix(
            in srgb,
            var(--bt-red) 10%,
            transparent
    );

    color: var(--bt-red);

    pointer-events: none;

    transition:
            background .2s ease,
            transform .2s ease,
            box-shadow .2s ease;
}


/* AL ENFOCAR */

.branch-select-wrapper:focus-within .branch-select-icon {
    background: color-mix(
            in srgb,
            var(--bt-red) 18%,
            transparent
    );

    box-shadow:
            0 0 14px color-mix(
                    in srgb,
                    var(--bt-red) 20%,
                    transparent
            );

    transform: translateY(-50%);
}


/* ICONO */

.branch-select-icon i {
    font-size: .72rem;
}


/* OPCIONES */

.branch-select-wrapper .custom-input option {
    background: #0b0b0d;
    color: #fff;

    font-size: .9rem;
    font-weight: 600;
}


/* PLACEHOLDER */

.branch-select-wrapper .custom-input option[value=""] {
    color: rgba(255, 255, 255, .45);
}

/* ============================================================
   PEOPLE SELECTOR
   ============================================================ */

.people-selector {
    display: flex;
    align-items: center;

    min-height: 50px;

    overflow: hidden;

    border: 1px solid #d4d4d8;
    border-radius: 12px;

    background: #fff;
}

.people-button {
    width: 45px;
    height: 48px;

    border: 0;

    background: transparent;

    color: #52525b;

    font-size: 1.25rem;
    font-weight: 500;

    cursor: pointer;

    transition:
            background 0.2s ease,
            color 0.2s ease;
}

.people-button:hover {
    background: #f4f4f5;
    color: var(--reservation-primary);
}

.people-button:active {
    transform: scale(0.94);
}

.people-value {
    flex: 1;

    text-align: center;

    color: #18181b;

    font-size: 0.95rem;
    font-weight: 800;
}


/* ============================================================
   SEARCH BUTTON
   ============================================================ */

.btn-search {
    min-height: 50px;
    border: 0;
    border-radius: 12px;

    background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--bt-red) 88%, #000 12%),
            var(--bt-red)
    );

    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;

    box-shadow:
            0 8px 18px color-mix(in srgb, var(--bt-red) 22%, transparent),
            0 0 0 1px color-mix(in srgb, var(--bt-red) 25%, transparent),
            0 0 28px color-mix(in srgb, var(--bt-red) 14%, transparent);

    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            filter 0.2s ease;
}

.btn-search:hover {
    transform: translateY(-2px);

    box-shadow:
            0 12px 28px color-mix(in srgb, var(--bt-red) 32%, transparent),
            0 0 0 1px color-mix(in srgb, var(--bt-red) 45%, transparent),
            0 0 38px color-mix(in srgb, var(--bt-red) 24%, transparent);

    filter: brightness(1.08);
}

.btn-search:active {
    transform: translateY(0);
}


/* ============================================================
   AVAILABILITY
   ============================================================ */

.availability-container {
    display: none;

    margin-top: 42px;
    padding-top: 36px;

    border-top: 1px solid #eeeeef;
}

.availability-container.visible {
    display: block;

    animation: reservationFadeUp 0.45s ease both;
}

.availability-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}

.selected-info {
    color: var(--reservation-muted);

    font-size: 0.83rem;
    font-weight: 600;

    text-transform: capitalize;
}


/* ============================================================
   TIME GROUPS
   ============================================================ */

.time-group {
    margin-bottom: 30px;
}

.time-group:last-child {
    margin-bottom: 0;
}

.time-group-title {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 14px;

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.time-group-title::after {
    content: "";

    height: 1px;

    flex: 1;

    background: #e4e4e7;
}

.time-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(145px, 1fr));

    gap: 12px;
}


/* ============================================================
   TIME SLOT
   ============================================================ */

/* ============================================================
   VELOX — HORARIOS DISPONIBLES
   DARK PREMIUM TIME SLOTS
============================================================ */

.time-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(210px, 1fr));

    gap: 14px;
}


/* ============================================================
   TIME SLOT
============================================================ */

.time-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    min-height: 142px;

    padding: 20px 20px 18px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 18px;

    background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--bt-red) 88%, #000 12%),
            var(--bt-red)
    );

    color: #ffffff;

    text-align: left;
    cursor: pointer;

    box-shadow:
            0 14px 35px rgba(0, 0, 0, 0.28),
            0 0 18px color-mix(
                    in srgb,
                    var(--bt-red) 6%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, 0.025);

    transition:
            transform 0.3s cubic-bezier(.2, .8, .2, 1),
            border-color 0.3s ease,
            background 0.3s ease,
            box-shadow 0.3s ease;
}


/* ============================================================
   LÍNEA SUPERIOR
============================================================ */

.time-slot::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 2px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(32, 199, 183, 0.65),
                    transparent
            );

    opacity: 0.45;

    transform: scaleX(0.35);

    transition:
            opacity 0.3s ease,
            transform 0.3s ease;
}


/* ============================================================
   GLOW DECORATIVO
============================================================ */

.time-slot::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -75px;
    right: -55px;

    border-radius: 50%;

    background:
            rgba(32, 199, 183, 0.075);

    filter: blur(35px);

    pointer-events: none;

    opacity: 0.7;

    transition:
            opacity 0.3s ease,
            transform 0.3s ease;
}


/* ============================================================
   HOVER
============================================================ */

.time-slot:hover {
    transform: translateY(-4px);

    box-shadow:
            0 12px 28px color-mix(in srgb, var(--bt-red) 32%, transparent),
            0 0 0 1px color-mix(in srgb, var(--bt-red) 45%, transparent),
            0 0 38px color-mix(in srgb, var(--bt-red) 24%, transparent);

    filter: brightness(1.08);
}


.time-slot:hover::before {
    opacity: 1;

    transform: scaleX(1);
}


.time-slot:hover::after {
    opacity: 1;

    transform: scale(1.15);
}


/* ============================================================
   HORA PRINCIPAL
============================================================ */

.time-slot-time {
    position: relative;

    z-index: 2;

    margin-bottom: 5px;

    color: #ffffff;

    font-family: var(--font-sans, var(--velox-font, 'Chillax', 'Helvetica Neue', Arial, sans-serif));

    font-size: 1.22rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.02em;
}


/* ============================================================
   RANGO DEL HORARIO
============================================================ */

.time-slot-duration {
    position: relative;

    z-index: 2;

    margin-top: 0;

    color: #FFFFFF;

    font-size: 0.73rem;

    font-weight: 600;

    letter-spacing: 0.01em;
}


/* ============================================================
   DISPONIBILIDAD
============================================================ */

.time-slot-availability {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    margin-top: 17px;

    padding-top: 13px;

    border-top:
            1px solid rgba(255, 255, 255, 0.065);
}


.time-slot-availability-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    border-radius: 8px;

    border:
            1px solid #FFFFFF;

    color: #FFFFFF;

    font-size: 0.72rem;

    transition:
            background 0.3s ease,
            border-color 0.3s ease,
            transform 0.3s ease;
}


.time-slot:hover .time-slot-availability-icon {
    border-color:
            #FFFFFF;

    transform: scale(1.05);
}


.time-slot-availability-text {
    color: #FFFFFF;

    font-size: 0.70rem;

    font-weight: 600;

    line-height: 1.3;
}


.time-slot-availability-text::first-letter {
    color: #ffffff;
}


/* ============================================================
   SELECTED
============================================================ */

.time-slot.selected {
    border-color: var(--bt-red);

    background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--bt-red) 22%, #140609),
            color-mix(in srgb, var(--bt-red) 10%, #090304)
    );

    box-shadow:
            0 12px 30px color-mix(
                    in srgb,
                    var(--bt-red) 20%,
                    transparent
            ),
            0 0 30px color-mix(
                    in srgb,
                    var(--bt-red) 14%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
}


.time-slot.selected::before {
    opacity: 1;

    transform: scaleX(1);
}


.time-slot.selected::after {
    opacity: 1;
}


.time-slot.selected .time-slot-time {
    color: var(--bt-red);
}


.time-slot.selected .time-slot-duration {
    color: #82bdb8;
}


/* ============================================================
   FOCUS — ACCESIBILIDAD
============================================================ */

.time-slot:focus-visible {
    outline: none;

    border-color:
            rgba(32, 199, 183, 0.65);

    box-shadow:
            0 0 0 4px rgba(32, 199, 183, 0.10),
            0 15px 40px rgba(0, 0, 0, 0.30);
}


/* ============================================================
   ACTIVE
============================================================ */

.time-slot:active {
    transform: translateY(-2px);
}

/* ============================================================
   LOADING
   ============================================================ */

.loading-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    min-height: 150px;

    padding: 30px;

    border: 1px dashed #d4d4d8;
    border-radius: 16px;

    background: #fafafa;

    color: #71717a;

    font-size: 0.88rem;
    font-weight: 600;
}

.loading-box .spinner {
    width: 22px;
    height: 22px;

    border: 3px solid #e4e4e7;
    border-top-color: var(--reservation-primary);

    border-radius: 50%;

    animation: reservationSpin 0.75s linear infinite;
}


/* ============================================================
   EMPTY / ERROR
   ============================================================ */

.empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 220px;

    padding: 40px 20px;

    border: 1px dashed #d4d4d8;
    border-radius: 18px;

    background: rgba(255, 255, 255, .035);

    text-align: center;
}

.empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 17px;

    border-radius: 50%;

    background: var(--bt-red);

    color: #FFFFFF;

    font-size: 1.35rem;
}

/* =========================================================
   BURGERTOWN - DATE PICKER PREMIUM
   ========================================================= */

.flatpickr-calendar {
    background: #0b0b0d !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 18px !important;

    box-shadow:
            0 20px 60px rgba(0, 0, 0, .55),
            0 0 0 1px rgba(255, 255, 255, .03),
            0 0 35px color-mix(
                    in srgb,
                    var(--bt-red) 10%,
                    transparent
            ) !important;

    overflow: hidden;
    padding: 10px;

    font-family: inherit;
}


/* =========================================================
   HEADER
   ========================================================= */

.flatpickr-months {
    background: #0b0b0d !important;
    padding: 8px 6px 4px;
}

.flatpickr-months .flatpickr-month {
    background: transparent !important;
    color: #fff !important;
    height: 42px;
}

.flatpickr-current-month {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #fff !important;
}

.flatpickr-current-month .cur-month {
    color: #fff !important;
}

.flatpickr-current-month .numInputWrapper {
    color: #fff !important;
}


/* =========================================================
   FLECHAS
   ========================================================= */

.flatpickr-prev-month,
.flatpickr-next-month {
    top: 12px !important;

    width: 34px !important;
    height: 34px !important;

    border-radius: 10px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    width: 12px !important;
    height: 12px !important;
    fill: #fff !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: color-mix(
            in srgb,
            var(--bt-red) 14%,
            transparent
    );

    color: var(--bt-red);

    transform: translateY(-1px);
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--bt-red) !important;
}


/* =========================================================
   DÍAS DE LA SEMANA
   ========================================================= */

.flatpickr-weekdays {
    background: transparent !important;
    margin-top: 4px;
}

span.flatpickr-weekday {
    background: transparent !important;

    color: rgba(255, 255, 255, .42) !important;

    font-size: .68rem !important;
    font-weight: 800 !important;

    text-transform: uppercase;
}


/* =========================================================
   CONTENEDOR DE DÍAS
   ========================================================= */

.flatpickr-days {
    width: 100% !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   DÍAS
   ========================================================= */

.flatpickr-day {
    color: rgba(255, 255, 255, .88) !important;

    border-radius: 10px !important;

    font-size: .82rem !important;
    font-weight: 700 !important;

    height: 38px !important;
    line-height: 38px !important;

    transition:
            background .18s ease,
            color .18s ease,
            box-shadow .18s ease,
            transform .18s ease;
}


/* DÍA HOVER */

.flatpickr-day:hover {
    background: color-mix(
            in srgb,
            var(--bt-red) 12%,
            transparent
    ) !important;

    border-color: transparent !important;

    color: #fff !important;

    transform: translateY(-1px);
}


/* HOY */

.flatpickr-day.today {
    border-color: color-mix(
            in srgb,
            var(--bt-red) 55%,
            transparent
    ) !important;

    color: var(--bt-red) !important;
}

.flatpickr-day.today:hover {
    background: color-mix(
            in srgb,
            var(--bt-red) 12%,
            transparent
    ) !important;

    color: #fff !important;
}


/* FECHA SELECCIONADA */

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: linear-gradient(
            145deg,
            var(--bt-red),
            color-mix(
                    in srgb,
                    var(--bt-red) 70%,
                    #000 30%
            )
    ) !important;

    border-color: var(--bt-red) !important;

    color: #fff !important;

    box-shadow:
            0 8px 20px color-mix(
                    in srgb,
                    var(--bt-red) 28%,
                    transparent
            ),
            0 0 18px color-mix(
                    in srgb,
                    var(--bt-red) 16%,
                    transparent
            );
}


/* SELECCIONADO HOVER */

.flatpickr-day.selected:hover {
    filter: brightness(1.08);

    transform: translateY(-1px);

    box-shadow:
            0 10px 25px color-mix(
                    in srgb,
                    var(--bt-red) 35%,
                    transparent
            ),
            0 0 25px color-mix(
                    in srgb,
                    var(--bt-red) 20%,
                    transparent
            );
}


/* =========================================================
   FECHAS DESHABILITADAS
   ========================================================= */

.flatpickr-day.disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, .16) !important;
}


/* =========================================================
   INPUT
   ========================================================= */

.flatpickr-input {
    cursor: pointer;
}


/* Input visible generado por Flatpickr */

input.flatpickr-input.form-control {
    background: rgba(255, 255, 255, .035) !important;

    border: 1px solid rgba(255, 255, 255, .10) !important;

    color: #fff !important;

    min-height: 50px;

    border-radius: 12px;

    padding-right: 45px;

    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            background .2s ease;
}

input.flatpickr-input.form-control:hover {
    border-color: color-mix(
            in srgb,
            var(--bt-red) 35%,
            transparent
    ) !important;
}

input.flatpickr-input.form-control:focus {
    background: rgba(255, 255, 255, .045) !important;

    border-color: var(--bt-red) !important;

    box-shadow:
            0 0 0 4px color-mix(
                    in srgb,
                    var(--bt-red) 10%,
                    transparent
            ),
            0 0 25px color-mix(
                    in srgb,
                    var(--bt-red) 8%,
                    transparent
            ) !important;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

input.flatpickr-input::placeholder {
    color: rgba(255, 255, 255, .38);
}


/* =========================================================
   ANIMACIÓN
   ========================================================= */

.flatpickr-calendar.open {
    animation: burgerTownCalendarIn .22s ease-out;
}

@keyframes burgerTownCalendarIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .flatpickr-calendar {
        border-radius: 16px !important;
        width: calc(100vw - 30px) !important;
        max-width: 360px;
    }

    .flatpickr-day {
        height: 36px !important;
        line-height: 36px !important;
    }

}

.empty-box h5 {
    margin: 0 0 7px;

    color: #FFFFFF;

    font-size: 1rem;
    font-weight: 800;
}

.empty-box p {
    max-width: 440px;

    margin: 0;

    color: #FFFFFF;

    font-size: 0.83rem;
    line-height: 1.6;
}


/* ============================================================
   VELOX — RESUMEN DE RESERVA
   DARK PREMIUM / RESPONSIVE
============================================================ */

.reservation-summary {
    position: relative;
    display: none;
    width: 100%;

    margin-top: 24px;
    padding: 22px 24px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.075);

    border-radius: 18px;

    background: rgba(255,255,255,.035);

    box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.025);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-sizing: border-box;
}

.reservation-summary.visible {
    display: block;

    animation: reservationFadeUp 0.4s ease both;
}


/* ============================================================
   LÍNEA SUPERIOR
============================================================ */

.reservation-summary::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 2px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    var(--bt-red),
                    transparent
            );

    opacity: 0.75;
}


/* ============================================================
   GLOW DECORATIVO
============================================================ */

.reservation-summary::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    top: -100px;
    right: -55px;

    border-radius: 50%;

    background: rgba(32, 199, 183, 0.055);

    filter: blur(40px);

    pointer-events: none;
}


/* ============================================================
   TÍTULO
============================================================ */

.reservation-summary .summary-title {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    margin: 0 0 17px;

    padding: 0 0 16px;

    color: #ffffff;

    font-family: var(--font-sans, var(--velox-font, 'Chillax', 'Helvetica Neue', Arial, sans-serif));

    font-size: 0.92rem;

    font-weight: 800;

    line-height: 1.3;

    border-bottom:
            1px solid rgba(255, 255, 255, 0.065);

    box-sizing: border-box;
}


/* Icono del título */

.reservation-summary .summary-title::before {
    content: "\f570";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    margin-right: 10px;

    border-radius: 9px;

    background:
            rgba(32, 199, 183, 0.09);

    border:
            1px solid rgba(32, 199, 183, 0.14);

    color: var(--bt-red);

    font-family: "Font Awesome 6 Free";

    font-size: 0.72rem;

    font-weight: 900;
}


/* ============================================================
   FILAS
============================================================ */

.reservation-summary .summary-row {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(85px, 0.35fr)
        minmax(0, 1fr);

    align-items: center;

    width: 100%;

    min-height: 45px;

    margin: 0;

    padding: 10px 0;

    border-bottom:
            1px solid rgba(255, 255, 255, 0.055);

    box-sizing: border-box;
}


/* Última fila */

.reservation-summary .summary-row:last-child {
    border-bottom: none;

    padding-bottom: 0;
}


/* ============================================================
   LABEL
============================================================ */

.reservation-summary .summary-label {
    display: flex;

    align-items: center;

    min-width: 0;

    color: #FFFFFF;

    font-family: var(--font-sans, var(--velox-font, 'Chillax', 'Helvetica Neue', Arial, sans-serif));

    font-size: 0.72rem;

    font-weight: 600;

    line-height: 1.4;

    white-space: nowrap;
}


/* Iconos */

.reservation-summary .summary-label::before {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 18px;

    margin-right: 7px;

    flex: 0 0 18px;

    color: var(--bt-red);

    font-family: "Font Awesome 6 Free";

    font-size: 0.65rem;

    font-weight: 900;

    opacity: 0.8;
}


/* Sede */

.reservation-summary .summary-row:nth-child(2)
.summary-label::before {
    content: "\f3c5";
}


/* Fecha */

.reservation-summary .summary-row:nth-child(3)
.summary-label::before {
    content: "\f133";
}


/* Horario */

.reservation-summary .summary-row:nth-child(4)
.summary-label::before {
    content: "\f017";
}


/* Personas */

.reservation-summary .summary-row:nth-child(5)
.summary-label::before {
    content: "\f0c0";
}


/* ============================================================
   VALORES
============================================================ */

.reservation-summary .summary-value {
    display: block;

    min-width: 0;

    margin: 0;

    overflow-wrap: anywhere;
    word-break: normal;

    color: #e9f0f7;

    font-family: var(--font-sans, var(--velox-font, 'Chillax', 'Helvetica Neue', Arial, sans-serif));

    font-size: 0.76rem;

    font-weight: 700;

    line-height: 1.45;

    text-align: right;
}


/* Horario destacado */

.reservation-summary #summaryTime {
    color: #FFFFFF;

    font-weight: 800;
}


/* ============================================================
   HOVER
============================================================ */

.reservation-summary:hover {
    border-color:
            rgba(32, 199, 183, 0.14);

    box-shadow:
            0 20px 48px rgba(0, 0, 0, 0.30),
            0 0 30px rgba(32, 199, 183, 0.025),
            inset 0 1px 0 rgba(255, 255, 255, 0.03);
}


/* ============================================================
   RESPONSIVE — TABLET
============================================================ */

@media (max-width: 768px) {

    .reservation-summary {
        padding: 20px;
    }

    .reservation-summary .summary-row {
        grid-template-columns:
            minmax(90px, 0.40fr)
            minmax(0, 1fr);
    }
}


/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 576px) {

    .reservation-summary {
        margin-top: 20px;

        padding: 18px;

        border-radius: 16px;
    }


    .reservation-summary .summary-title {
        margin-bottom: 12px;

        padding-bottom: 14px;

        font-size: 0.86rem;
    }


    .reservation-summary .summary-row {
        grid-template-columns:
            1fr;

        align-items: flex-start;

        gap: 5px;

        min-height: auto;

        padding: 11px 0;
    }


    .reservation-summary .summary-label {
        font-size: 0.68rem;
    }


    .reservation-summary .summary-value {
        width: 100%;

        padding-left: 25px;

        font-size: 0.74rem;

        text-align: left;
    }


    .reservation-summary #summaryTime {
        font-size: 0.78rem;
    }
}

/* ============================================================
   CUSTOMER SECTION
   ============================================================ */

.customer-section {
    display: none;

    margin-top: 35px;
    padding-top: 35px;

    border-top: 1px solid var(--bt-red);
}

.customer-section.visible {
    display: block;

    animation: reservationFadeUp 0.45s ease both;
}

.customer-section .section-title {
    margin-bottom: 4px;
}


/* ============================================================
   VELOX — CONFIRMAR RESERVA
   MISMO ESTILO QUE "CONSULTAR RESERVA"
============================================================ */

.btn-confirm {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 50px;

    padding: 0.75rem 1.25rem;

    border: 0;

    border-radius: 12px;

    background: linear-gradient(135deg,
    color-mix(in srgb, var(--bt-red) 88%, #000 12%), var(--bt-red));

    color: #FFFFFF;

    font-family: var(--font-sans, var(--velox-font, 'Chillax', 'Helvetica Neue', Arial, sans-serif));

    font-size: 0.9rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.01em;

    cursor: pointer;

    box-shadow: 0 8px 18px
    color-mix(in srgb, var(--bt-red) 22%, transparent), 0 0 0 1px
    color-mix(in srgb, var(--bt-red) 25%, transparent), 0 0 28px
    color-mix(in srgb, var(--bt-red) 14%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}


/* ============================================================
   ICONO
============================================================ */

.btn-confirm i {
    font-size: 1rem;

    transition:
            transform 0.2s ease;
}


/* ============================================================
   HOVER
============================================================ */

.btn-confirm:hover {
    transform: translateY(-2px);

    box-shadow:
            0 12px 28px color-mix(in srgb, var(--bt-red) 32%, transparent),
            0 0 0 1px color-mix(in srgb, var(--bt-red) 45%, transparent),
            0 0 38px color-mix(in srgb, var(--bt-red) 24%, transparent);

    filter: brightness(1.08);
}


.btn-confirm:hover i {
    transform: scale(1.08);
}


/* ============================================================
   ACTIVE
============================================================ */

.btn-confirm:active {
    transform: translateY(0);

    box-shadow:
            0 7px 18px rgba(32, 199, 183, 0.18);
}


/* ============================================================
   FOCUS — ACCESIBILIDAD
============================================================ */

.btn-confirm:focus-visible {
    outline: none;

    box-shadow:
            0 0 0 4px rgba(32, 199, 183, 0.12),
            0 10px 28px rgba(32, 199, 183, 0.20);
}


/* ============================================================
   DISABLED
============================================================ */

.btn-confirm:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;

    filter: grayscale(0.15);

    box-shadow: none;
}


/* ============================================================
   VELOX — RESERVATION SUCCESS
   PREMIUM CONFIRMATION
============================================================ */

.success-container {
    display: none;

    position: relative;

    width: 100%;

    padding: 20px 0 40px;

    text-align: center;

    opacity: 0;

    visibility: hidden;

    transform: translateY(12px);
}

/* ============================================================
   VISIBLE
============================================================ */

.success-container.visible {
    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    animation:
            successContainerIn 0.45s ease both;
}



/* ============================================================
   ANIMACIÓN
============================================================ */

@keyframes successContainerIn {

    from {
        opacity: 0;

        transform: translateY(14px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}

/* ============================================================
   CARD
============================================================ */

.success-card {
    position: relative;

    width: min(100%, 560px);

    padding: 46px 42px 40px;

    overflow: hidden;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 24px;

    background: rgba(255,255,255,.035);

    box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


/* ============================================================
   DECORACIÓN SUPERIOR
============================================================ */

.success-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;
    right: 10%;

    height: 2px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    var(--bt-red),
                    transparent
            );

    opacity: 0.65;
}


/* ============================================================
   GLOW
============================================================ */

.success-card::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -130px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
            rgba(32, 199, 183, 0.07);

    filter: blur(50px);

    pointer-events: none;
}


/* ============================================================
   ICONO DE ÉXITO
============================================================ */

.success-icon-wrapper {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 24px;
}


.success-icon {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    border-radius: 50%;

    background:
            linear-gradient(
                    135deg,
                    color-mix(in srgb, var(--bt-red) 88%, #000 12%),
                    var(--bt-red)
            );

    border:
            1px solid var(--bt-red);

    color: #FFFFFF;

    font-size: 2rem;

    box-shadow:
            0 8px 18px color-mix(in srgb, var(--bt-red) 22%, transparent),
            0 0 0 1px color-mix(in srgb, var(--bt-red) 25%, transparent),
            0 0 28px color-mix(in srgb, var(--bt-red) 14%, transparent);

    animation:
            successIconIn 0.55s cubic-bezier(.2,.8,.2,1);
}


.success-icon::after {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 1px solid rgba(32, 199, 183, 0.12);

    animation:
            successPulse 2.5s ease-out infinite;
}


@keyframes successIconIn {

    0% {
        opacity: 0;

        transform:
                scale(0.55)
                rotate(-15deg);
    }

    70% {
        transform:
                scale(1.08)
                rotate(2deg);
    }

    100% {
        opacity: 1;

        transform:
                scale(1)
                rotate(0);
    }
}


@keyframes successPulse {

    0% {
        opacity: 0.7;

        transform: scale(0.9);
    }

    70% {
        opacity: 0;

        transform: scale(1.25);
    }

    100% {
        opacity: 0;

        transform: scale(1.25);
    }
}


/* ============================================================
   TÍTULO
============================================================ */

.success-title {
    position: relative;

    z-index: 2;

    margin: 0 0 12px;

    color: #ffffff;

    font-family: var(--font-sans, var(--velox-font, 'Chillax', 'Helvetica Neue', Arial, sans-serif));

    font-size: 1.65rem;

    font-weight: 800;

    letter-spacing: -0.035em;
}


/* ============================================================
   MENSAJE
============================================================ */

.success-message {
    position: relative;

    z-index: 2;

    max-width: 430px;

    margin: 0 auto 28px;

    color: #9cabbc;

    font-size: 0.86rem;

    line-height: 1.7;
}


/* ============================================================
   CÓDIGO DE RESERVA
============================================================ */

.reservation-code-container {
    position: relative;

    z-index: 2;

    padding: 20px 20px 18px;

    border:
            1px solid rgba(32, 199, 183, 0.14);

    border-radius: 16px;

    background:
            rgba(255,255,255,.035);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* Label */

.reservation-code-label {
    display: block;

    margin-bottom: 9px;

    color: #FFFFFF;

    font-size: 0.63rem;

    font-weight: 800;

    letter-spacing: 0.14em;
}


/* Código */

.success-card .reservation-code {
    display: block;

    color: #FFFFFF;

    font-family:
            "DM Sans",
            monospace;

    font-size: 1.45rem;

    font-weight: 900;

    letter-spacing: 0.10em;

    line-height: 1.3;

    text-shadow:
            0 0 22px rgba(32, 199, 183, 0.14);
}


/* Ayuda */

.reservation-code-hint {
    display: block;

    margin-top: 7px;

    color: #FFFFFF;

    font-size: 0.66rem;

    font-weight: 500;
}


/* ============================================================
   AVISO
============================================================ */

.success-notice {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin: 22px auto 26px;

    color: #FFFFFF;

    font-size: 0.70rem;

    line-height: 1.5;
}


.success-notice i {
    flex: 0 0 auto;

    color: var(--bt-red);

    font-size: 1.2rem;
}


/* ============================================================
   BOTÓN NUEVA RESERVA
============================================================ */

.btn-new-reservation {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;

    min-height: 50px;

    padding: 0.75rem 1.25rem;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    background:
            linear-gradient(
                    135deg,
                    color-mix(in srgb, var(--bt-red) 88%, #000 12%),
                    var(--bt-red)
            );

    color: #dce5ef;

    font-family: var(--font-sans, var(--velox-font, 'Chillax', 'Helvetica Neue', Arial, sans-serif));

    font-size: 0.82rem;

    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 8px 18px
    color-mix(in srgb, var(--bt-red) 22%, transparent), 0 0 0 1px
    color-mix(in srgb, var(--bt-red) 25%, transparent), 0 0 28px
    color-mix(in srgb, var(--bt-red) 14%, transparent);

    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}


.btn-new-reservation i {
    color: #FFFFFF;

    font-size: 0.95rem;

    transition:
            transform 0.35s ease;
}


.btn-new-reservation:hover {
    transform: translateY(-2px);

    box-shadow:
            0 12px 28px color-mix(in srgb, var(--bt-red) 32%, transparent),
            0 0 0 1px color-mix(in srgb, var(--bt-red) 45%, transparent),
            0 0 38px color-mix(in srgb, var(--bt-red) 24%, transparent);

    filter: brightness(1.08);
}


.btn-new-reservation:hover i {
    transform: rotate(180deg);
}


.btn-new-reservation:active {
    transform: translateY(0);
}


/* ============================================================
   FOCUS
============================================================ */

.btn-new-reservation:focus-visible {
    outline: none;

    box-shadow:
            0 0 0 4px rgba(32, 199, 183, 0.10),
            0 12px 30px rgba(0, 0, 0, 0.22);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 576px) {

    .success-container {
        padding:
                10px
                0
                30px;
    }

    .success-card {
        padding:
                36px 22px
                30px;

        border-radius: 20px;
    }

    .success-icon {
        width: 68px;
        height: 68px;

        font-size: 1.75rem;
    }

    .success-title {
        font-size: 1.4rem;
    }

    .success-message {
        font-size: 0.80rem;
    }

    .success-card .reservation-code {
        font-size: 1.20rem;

        letter-spacing: 0.07em;
    }

    .success-notice {
        align-items: flex-start;

        text-align: left;
    }
}


/* ============================================================
   TOAST
   ============================================================ */

.reservation-toast {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 9999;

    max-width: 360px;

    padding: 14px 18px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;

    background: rgba(24, 24, 27, 0.96);

    color: #fff;

    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;

    box-shadow:
            0 18px 40px rgba(0, 0, 0, 0.22);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;

    backdrop-filter: blur(12px);
}

.reservation-toast.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes reservationSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes reservationFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reservationSuccess {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ============================================================
   RESPONSIVE TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .reservation-hero {
        min-height: 350px;
    }

    .reservation-hero .hero-content {
        padding: 70px 0;
    }

    .reservation-wrapper {
        margin-top: -55px;
    }

    .reservation-content {
        padding: 30px;
    }

    .reservation-steps .step span:last-child {
        display: none;
    }

    .reservation-steps .step {
        gap: 0;
    }

    .reservation-steps .step-number {
        width: 36px;
        height: 36px;
    }

    .reservation-steps .step-line {
        margin: 0 10px;
    }
}


/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .reservation-hero {
        min-height: 390px;
    }

    .reservation-hero .hero-content {
        width: min(100% - 32px, 1180px);

        padding: 65px 0;
    }

    .reservation-hero .hero-title {
        font-size: 2.65rem;
    }

    .reservation-hero .hero-description {
        font-size: 0.94rem;
    }

    .reservation-wrapper {
        width: calc(100% - 20px);

        margin-top: -50px;
        margin-bottom: 40px;
    }

    .reservation-card {
        border-radius: 20px;
    }

    .reservation-content {
        padding: 23px 18px;
    }

    .reservation-steps {
        margin-bottom: 32px;
    }

    .reservation-steps .step-number {
        width: 32px;
        height: 32px;
    }

    .reservation-steps .step-line {
        margin: 0 6px;
    }

    .reservation-page .section-title {
        font-size: 1.45rem;
    }

    .time-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .time-slot {
        min-height: 72px;
    }

    .summary-row {
        align-items: flex-start;
    }

    .summary-value {
        max-width: 60%;

        text-align: right;
    }

    .btn-confirm {
        width: 100%;
    }

    .success-container {
        padding: 55px 18px 65px;
    }

    .reservation-toast {
        right: 15px;
        bottom: 15px;
        left: 15px;

        max-width: none;
    }
}


/* ============================================================
   RESPONSIVE SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .reservation-hero {
        min-height: 370px;
    }

    .reservation-hero .hero-title {
        font-size: 2.25rem;
    }

    .reservation-hero .hero-description {
        font-size: 0.88rem;
    }

    .reservation-content {
        padding: 20px 15px;
    }

    .reservation-steps .step-number {
        width: 29px;
        height: 29px;
    }

    .reservation-steps .step-line {
        margin: 0 4px;
    }

    .time-grid {
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }

    .time-slot {
        min-height: 68px;

        padding: 11px;
    }

    .time-slot-time {
        font-size: 0.9rem;
    }

    .time-slot-duration {
        font-size: 0.67rem;
    }

    .reservation-summary {
        padding: 19px;
    }

    .success-icon {
        width: 72px;
        height: 72px;

        font-size: 1.9rem;
    }

    .reservation-code {
        min-width: 180px;

        font-size: 1rem;
    }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .reservation-page *,
    .reservation-page *::before,
    .reservation-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   WRAPPER
============================================================ */

.reservation-search-wrapper {
    position: relative;
    z-index: 2;

    max-width: 1000px;
    margin: 0 auto;

    transition:
            transform 0.6s ease,
            opacity 0.6s ease;
}


/* ============================================================
   HEADING
============================================================ */

.reservation-search-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 38px;
}


.reservation-search-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 15px;

    border: 1px solid rgba(32, 199, 183, 0.18);

    border-radius: 999px;

    background: rgba(32, 199, 183, 0.06);

    color: var(--velox-primary);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;

    margin-bottom: 20px;
}


.reservation-search-eyebrow i {
    font-size: 0.72rem;
}


.reservation-search-heading h1 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: clamp(2.2rem, 4vw, 3.5rem);

    font-weight: 700;

    letter-spacing: -0.045em;

    line-height: 1.05;
}


.reservation-search-heading p {
    max-width: 650px;

    margin: 0 auto;

    color: var(--velox-text-soft);

    font-size: 1rem;

    line-height: 1.75;
}


/* ============================================================
   SEARCH CARD
============================================================ */

.reservation-search-card {
    position: relative;
    padding: 34px;

    background:
            linear-gradient(
                    145deg,
                    rgba(10, 10, 12, 0.82),
                    rgba(5, 5, 7, 0.72)
            );

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 22px;

    box-shadow:
            0 25px 70px rgba(0, 0, 0, 0.42),
            0 0 30px color-mix(
                    in srgb,
                    var(--bt-red) 5%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, 0.045);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
            border-color 0.3s ease,
            box-shadow 0.3s ease,
            transform 0.3s ease;
}


.reservation-search-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(32, 199, 183, 0.45),
                    transparent
            );
}


.reservation-search-card:hover {
    border-color: color-mix(
            in srgb,
            var(--bt-red) 25%,
            transparent
    );

    box-shadow:
            0 28px 80px rgba(0, 0, 0, 0.48),
            0 0 35px color-mix(
                    in srgb,
                    var(--bt-red) 9%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, 0.055);

    transform: translateY(-2px);
}


/* ============================================================
   LABEL
============================================================ */

.reservation-search-card .form-label {
    color: #dce5ef;

    font-size: 0.82rem;

    font-weight: 600;

    margin-bottom: 9px;
}


/* ============================================================
   INPUT
============================================================ */

.reservation-search-input {
    position: relative;
}


.reservation-search-input > i {
    position: absolute;

    left: 17px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    color: var(--velox-primary);

    font-size: 0.95rem;

    pointer-events: none;
}


.reservation-search-input .form-control {
    height: 55px;

    padding: 0 18px 0 48px;

    color: #ffffff;

    background: rgba(5, 15, 27, 0.82);

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 13px;

    font-size: 0.95rem;

    box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, 0.25);

    transition:
            border-color 0.25s ease,
            box-shadow 0.25s ease,
            background 0.25s ease;
}


.reservation-search-input .form-control::placeholder {
    color: #617086;
}


.reservation-search-input .form-control:hover {
    border-color: rgba(255, 255, 255, 0.15);
}


.reservation-search-input .form-control:focus {
    color: #ffffff;

    background: rgba(5, 15, 27, 0.95);

    border-color: rgba(32, 199, 183, 0.55);

    box-shadow:
            0 0 0 4px rgba(32, 199, 183, 0.08),
            0 10px 30px rgba(0, 0, 0, 0.18);
}


/* ============================================================
   VALIDACIÓN
============================================================ */

.reservation-search-input .form-control.is-valid {
    border-color: var(--bt-red);

    background-image: none;

    box-shadow:
            0 0 0 3px rgba(56, 211, 159, 0.06);
}


.reservation-search-input .form-control.is-invalid {
    border-color: rgba(255, 107, 122, 0.65);

    background-image: none;

    box-shadow:
            0 0 0 3px rgba(255, 107, 122, 0.06);
}


.reservation-search-card .invalid-feedback {
    color: #ff8793;

    font-size: 0.78rem;

    margin-top: 8px;
}


/* ============================================================
   ACTIONS
============================================================ */

.reservation-search-actions {
    display: flex;

    justify-content: center;

    margin-top: 25px;
}


.reservation-search-button {
    min-width: 225px;

    height: 52px;

    padding: 0 25px;

    border: 0;

    border-radius: 12px;

    background:
            linear-gradient(
                    135deg,
                    var(--velox-primary),
                    var(--velox-primary-dark)
            );

    color: #031615;

    font-size: 0.86rem;

    font-weight: 700;

    box-shadow:
            0 10px 28px rgba(32, 199, 183, 0.20);

    transition:
            transform 0.25s ease,
            box-shadow 0.25s ease,
            filter 0.25s ease;
}


.reservation-search-button:hover {
    color: #031615;

    transform: translateY(-2px);

    filter: brightness(1.06);

    box-shadow:
            0 14px 35px rgba(32, 199, 183, 0.28);
}


.reservation-search-button:active {
    transform: translateY(0);
}


.reservation-search-button:disabled {
    opacity: 0.7;

    transform: none;

    cursor: not-allowed;
}


/* ============================================================
   HINT
============================================================ */

.reservation-search-hint {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 19px;

    color: var(--velox-text-muted);

    font-size: 0.75rem;

    line-height: 1.5;

    text-align: center;
}


.reservation-search-hint i {
    color: #60758e;
}


.reservation-search-hint strong {
    color: #9aaabd;

    font-weight: 600;
}


/* ============================================================
   RESULTS SECTION
============================================================ */

.reservation-search-results-section {
    position: relative;

    padding: 20px 0 100px;

    opacity: 0;

    transform: translateY(25px);

    transition:
            opacity 0.6s ease,
            transform 0.6s ease;
}


.reservation-search-results-section.results-visible {
    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   RESULTS HEADER
============================================================ */

.reservation-results-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}


.reservation-results-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: var(--velox-primary);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.reservation-results-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 1.7rem;

    font-weight: 700;

    letter-spacing: -0.025em;
}


.reservation-results-count {
    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding: 6px 13px;

    border-radius: 999px;

    color: #b8c6d6;

    background: rgba(255, 255, 255, 0.045);

    border: 1px solid rgba(255, 255, 255, 0.07);

    font-size: 0.72rem;

    font-weight: 600;
}


/* ============================================================
   BURGER TOWN
   RESERVATION RESULT CARD
   RED / BLACK PREMIUM
============================================================ */

.reservation-result-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 365px;

    padding: 24px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;

    background:
            linear-gradient(
                    145deg,
                    rgba(14, 14, 15, .90),
                    rgba(6, 6, 7, .96)
            );

    color: #fff;

    box-shadow:
            0 22px 55px rgba(0, 0, 0, .42),
            0 0 25px color-mix(
                    in srgb,
                    var(--bt-red) 4%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, .035);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
            transform .3s cubic-bezier(.2,.8,.2,1),
            border-color .3s ease,
            box-shadow .3s ease;
}


/* ============================================================
   BRILLO SUPERIOR
============================================================ */

.reservation-result-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    color-mix(
                            in srgb,
                            var(--bt-red) 70%,
                            transparent
                    ),
                    transparent
            );

    box-shadow:
            0 0 15px color-mix(
                    in srgb,
                    var(--bt-red) 20%,
                    transparent
            );

    opacity: .75;
}


/* ============================================================
   GLOW AMBIENTAL
============================================================ */

.reservation-result-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -120px;
    right: -70px;

    border-radius: 50%;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 7%,
                    transparent
            );

    filter: blur(55px);

    pointer-events: none;
}


/* ============================================================
   HOVER
============================================================ */

.reservation-result-card:hover {
    transform: translateY(-5px);

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 28%,
                    transparent
            );

    box-shadow:
            0 28px 65px rgba(0, 0, 0, .50),
            0 0 35px color-mix(
                    in srgb,
                    var(--bt-red) 9%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, .045);
}


/* ============================================================
   TOP
============================================================ */

.reservation-result-card-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 22px;
}


/* ============================================================
   CÓDIGO
============================================================ */

.reservation-result-code {

    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding: 6px 11px;

    border: 1px solid
    color-mix(
            in srgb,
            var(--bt-red) 20%,
            transparent
    );

    border-radius: 8px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 6%,
                    transparent
            );

    color: #fff;

    font-size: .68rem;

    font-weight: 900;

    letter-spacing: .08em;

    box-shadow:
            0 0 15px color-mix(
                    in srgb,
                    var(--bt-red) 5%,
                    transparent
            );
}


/* ============================================================
   ESTADO
============================================================ */

.reservation-result-status {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 30px;

    padding: 6px 11px;

    border-radius: 999px;

    font-size: .65rem;

    font-weight: 800;

    white-space: nowrap;
}


.reservation-result-status i {
    font-size: .65rem;
}


/* CONFIRMADA */

.reservation-status-success {

    color:
            color-mix(
                    in srgb,
                    var(--bt-red) 85%,
                    #fff 15%
            );

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 8%,
                    transparent
            );

    border: 1px solid
    color-mix(
            in srgb,
            var(--bt-red) 20%,
            transparent
    );

    box-shadow:
            0 0 15px color-mix(
                    in srgb,
                    var(--bt-red) 6%,
                    transparent
            );
}


.reservation-status-success i {
    color: var(--bt-red);

    filter:
            drop-shadow(
                    0 0 6px
                    color-mix(
                            in srgb,
                            var(--bt-red) 35%,
                            transparent
                    )
            );
}


/* ============================================================
   ICONO PRINCIPAL
============================================================ */

.reservation-result-icon {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 17px;

    border-radius: 14px;

    border: 1px solid
    color-mix(
            in srgb,
            var(--bt-red) 22%,
            transparent
    );

    background:
            linear-gradient(
                    145deg,
                    color-mix(
                            in srgb,
                            var(--bt-red) 12%,
                            transparent
                    ),
                    rgba(255, 255, 255, .025)
            );

    color: var(--bt-red);

    box-shadow:
            0 10px 25px rgba(0, 0, 0, .28),
            0 0 22px color-mix(
                    in srgb,
                    var(--bt-red) 8%,
                    transparent
            );
}


.reservation-result-icon i {

    color: var(--bt-red);

    font-size: 1.25rem;

    filter:
            drop-shadow(
                    0 0 8px
                    color-mix(
                            in srgb,
                            var(--bt-red) 28%,
                            transparent
                    )
            );
}


/* ============================================================
   MAIN
============================================================ */

.reservation-result-main {

    position: relative;

    z-index: 2;

    margin-bottom: 22px;
}


.reservation-result-main h3 {

    margin: 0 0 9px;

    color: #fff;

    font-size: 1.03rem;

    font-weight: 900;

    letter-spacing: -.025em;

    line-height: 1.35;
}


/* ============================================================
   HORARIO
============================================================ */

.reservation-result-time {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    color:
            rgba(255, 255, 255, .55);

    font-size: .78rem;

    font-weight: 700;
}


.reservation-result-time i {

    color: var(--bt-red);

    font-size: .78rem;
}


/* ============================================================
   DETALLES
============================================================ */

.reservation-result-details {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 13px;

    padding: 17px 0;

    border-top:
            1px solid rgba(255, 255, 255, .055);

    border-bottom:
            1px solid rgba(255, 255, 255, .055);
}


/* ============================================================
   DETAIL
============================================================ */

.reservation-result-detail {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    min-width: 0;
}


.reservation-result-detail > i {

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 9px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 7%,
                    transparent
            );

    color: var(--bt-red);

    font-size: .72rem;
}


.reservation-result-detail > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


/* LABEL */

.reservation-result-detail small {

    color:
            rgba(255, 255, 255, .34);

    font-size: .60rem;

    font-weight: 700;

    letter-spacing: .05em;

    text-transform: uppercase;
}


/* VALOR */

.reservation-result-detail strong {

    overflow: hidden;

    color:
            rgba(255, 255, 255, .82);

    font-size: .74rem;

    font-weight: 700;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   CANCELAR
============================================================ */

.reservation-result-cancel {

    position: relative;

    z-index: 3;

    margin-top: 15px;

    padding-top: 14px;

    border-top:
            1px solid rgba(255, 255, 255, .055);
}


.reservation-cancel-button {

    width: 100%;

    min-height: 39px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border-radius: 10px;

    border: 1px solid
    color-mix(
            in srgb,
            var(--bt-red) 20%,
            transparent
    );

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 5%,
                    transparent
            );

    color:
            color-mix(
                    in srgb,
                    var(--bt-red) 80%,
                    #fff 20%
            );

    font-family: inherit;

    font-size: .68rem;

    font-weight: 800;

    cursor: pointer;

    transition:
            background .25s ease,
            border-color .25s ease,
            color .25s ease,
            transform .25s ease,
            box-shadow .25s ease;
}


.reservation-cancel-button i {
    color: inherit;
}


.reservation-cancel-button:hover {

    transform: translateY(-1px);

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 11%,
                    transparent
            );

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 38%,
                    transparent
            );

    color: #fff;

    box-shadow:
            0 8px 22px color-mix(
                    in srgb,
                    var(--bt-red) 12%,
                    transparent
            );
}


.reservation-cancel-button:active {

    transform: translateY(0);
}


.reservation-cancel-button:disabled {

    opacity: .55;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ============================================================
   FOOTER
============================================================ */

.reservation-result-footer {

    position: relative;

    z-index: 2;

    margin-top: auto;

    padding-top: 16px;
}


.reservation-result-footer span {

    display: flex;

    align-items: center;

    gap: 8px;

    overflow: hidden;

    color:
            rgba(255, 255, 255, .30);

    font-size: .62rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.reservation-result-footer i {

    flex-shrink: 0;

    color:
            color-mix(
                    in srgb,
                    var(--bt-red) 65%,
                    transparent
            );

    font-size: .68rem;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 575.98px) {

    .reservation-result-card {

        min-height: auto;

        padding: 20px;

        border-radius: 17px;
    }

    .reservation-result-card-top {

        margin-bottom: 18px;
    }

    .reservation-result-main h3 {

        font-size: .95rem;
    }

    .reservation-result-code,
    .reservation-result-status {

        font-size: .60rem;
    }

    .reservation-result-icon {

        width: 50px;
        height: 50px;
    }

}


/* ============================================================
   CANCELACIÓN DE RESERVA
============================================================ */

.reservation-result-cancel {
    position: relative;

    z-index: 3;

    margin-top: 15px;

    padding-top: 14px;

    border-top: 1px solid rgba(255, 255, 255, 0.055);
}


.reservation-cancel-button {
    width: 100%;

    height: 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    border-radius: 10px;

    border: 1px solid rgba(255, 107, 122, 0.17);

    background: rgba(255, 107, 122, 0.045);

    color: #ff8793;

    font-family: inherit;

    font-size: 0.7rem;

    font-weight: 600;

    cursor: pointer;

    transition:
            background 0.25s ease,
            border-color 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease;
}


.reservation-cancel-button:hover {
    background: rgba(255, 107, 122, 0.09);

    border-color: rgba(255, 107, 122, 0.32);

    color: #ff9ba5;

    transform: translateY(-1px);

    box-shadow:
            0 7px 20px rgba(255, 107, 122, 0.07);
}


.reservation-cancel-button:active {
    transform: translateY(0);
}


.reservation-cancel-button:disabled {
    opacity: 0.6;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ============================================================
   RESERVA CANCELADA
============================================================ */

.reservation-card-cancelled {
    border-color: rgba(255, 107, 122, 0.16);
}


.reservation-card-cancelled::before {
    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 107, 122, 0.55),
                    transparent
            );
}


.reservation-card-cancelled .reservation-result-icon {
    background:
            linear-gradient(
                    145deg,
                    rgba(255, 107, 122, 0.13),
                    rgba(255, 107, 122, 0.04)
            );

    border-color:
            rgba(255, 107, 122, 0.14);

    color: #ff7f8b;
}


.reservation-cancelled-label {
    width: 100%;

    min-height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    border-radius: 10px;

    color: #ff8793;

    background: rgba(255, 107, 122, 0.045);

    border: 1px solid rgba(255, 107, 122, 0.11);

    font-size: 0.7rem;

    font-weight: 600;
}


.reservation-cancelled-label i {
    font-size: 0.72rem;
}

/* ============================================================
   VELOX — RESERVAS
   DARK PREMIUM THEME
============================================================ */

html:has(.reservation-page),
body:has(.reservation-page) {
    background: #000000;
}

body:has(.reservation-page) {
    margin: 0;
}

.reservation-page {
    --reservation-primary: var(--bt-red);
    --reservation-primary-light: #38d6c7;
    --reservation-primary-dark: #129d91;

    --reservation-bg: #07111f;
    --reservation-bg-secondary: #0b1728;

    --reservation-text: #f4f7fb;
    --reservation-text-soft: #a9b6c8;
    --reservation-text-muted: #718198;

    --reservation-border: rgba(255, 255, 255, 0.08);
    --reservation-border-hover: rgba(255, 255, 255, 0.16);

    min-height: 100vh;

    background: #000000;

    color: var(--reservation-text);

    font-family: var(--font-sans, var(--velox-font, 'Chillax', 'Helvetica Neue', Arial, sans-serif));
}

/* =========================================================
   PUBLIC BRANCH BUSINESS HOURS
========================================================= */

.public-branch-hours {
    margin-top: 22px;
    padding: 20px;
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
}

.public-branch-hours-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.public-branch-hours-header strong {
    display: block;
    font-size: 15px;
    margin-top: 3px;
}

.public-branch-hours-header > i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(167,139,250,.12);
}

.public-branch-hours-eyebrow {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    opacity: .5;
}

.public-branch-hours-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 6px 25px;
}

.public-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 9px 0;
    border-bottom:
            1px solid rgba(255,255,255,.05);
    font-size: 12px;
}

.public-hours-row span {
    opacity: .62;
}

.public-hours-row strong {
    font-weight: 650;
}

.public-hours-loading,
.public-hours-error {
    padding: 15px 0;
    text-align: center;
    font-size: 12px;
    opacity: .55;
}


@media (max-width: 700px) {

    .public-branch-hours-list {
        grid-template-columns: 1fr;
    }

}

/* ============================================================
   VELOX — RESERVATION WIZARD
   ONE STEP AT A TIME
============================================================ */


/*
|--------------------------------------------------------------------------
| TRANSICIÓN GENERAL
|--------------------------------------------------------------------------
*/

#bookingForm {
    position: relative;
}


/*
|--------------------------------------------------------------------------
| PASO 1
| Sede + fecha + personas
|--------------------------------------------------------------------------
*/

#bookingForm.reservation-wizard-step-1
> section:first-child {

    display: block;

    animation:
            reservationWizardIn
            .4s
            ease
            both;
}


/*
|--------------------------------------------------------------------------
| PASO 2
| Horarios
|--------------------------------------------------------------------------
*/

#bookingForm.reservation-wizard-step-2
> section:first-child {

    display: none !important;
}


#bookingForm.reservation-wizard-step-2
#availabilityContainer {

    display: block;

    margin-top: 0;

    padding-top: 0;

    border-top: 0;

    animation:
            reservationWizardIn
            .4s
            ease
            both;
}


#bookingForm.reservation-wizard-step-2
#availabilityContainer
.availability-header {

    display: flex;
}


#bookingForm.reservation-wizard-step-2
#availabilityContent {

    display: block;
}


/*
|--------------------------------------------------------------------------
| OCULTAR RESUMEN Y DATOS EN PASO 2
|--------------------------------------------------------------------------
*/

#bookingForm.reservation-wizard-step-2
#reservationSummary {

    display: none !important;
}


#bookingForm.reservation-wizard-step-2
#customerSection {

    display: none !important;
}


/*
|--------------------------------------------------------------------------
| PASO 3
| Datos del cliente
|--------------------------------------------------------------------------
*/

#bookingForm.reservation-wizard-step-3
> section:first-child {

    display: none !important;
}


#bookingForm.reservation-wizard-step-3
#availabilityContainer {

    display: block;

    margin-top: 0;

    padding-top: 0;

    border-top: 0;

    animation:
            reservationWizardIn
            .4s
            ease
            both;
}


/*
|--------------------------------------------------------------------------
| OCULTAR HORARIOS EN PASO 3
|--------------------------------------------------------------------------
*/

#bookingForm.reservation-wizard-step-3
#availabilityContainer
.availability-header {

    display: none !important;
}


#bookingForm.reservation-wizard-step-3
#availabilityContent {

    display: none !important;
}


/*
|--------------------------------------------------------------------------
| MOSTRAR RESUMEN EN PASO 3
|--------------------------------------------------------------------------
*/

#bookingForm.reservation-wizard-step-3
#reservationSummary {

    display: block;

    margin-top: 0;

    animation:
            reservationWizardIn
            .4s
            ease
            both;
}


/*
|--------------------------------------------------------------------------
| MOSTRAR DATOS DEL CLIENTE EN PASO 3
|--------------------------------------------------------------------------
*/

#bookingForm.reservation-wizard-step-3
#customerSection {

    display: block;

    margin-top: 24px;

    padding-top: 24px;

    animation:
            reservationWizardIn
            .45s
            ease
            both;
}


/*
|--------------------------------------------------------------------------
| PASO 4
|--------------------------------------------------------------------------
*/

#bookingForm.reservation-wizard-step-4 {

    display: none !important;
}


/*
|--------------------------------------------------------------------------
| ANIMACIÓN
|--------------------------------------------------------------------------
*/

@keyframes reservationWizardIn {

    from {

        opacity: 0;

        transform:
                translateY(18px);

    }

    to {

        opacity: 1;

        transform:
                translateY(0);

    }

}


/*
|--------------------------------------------------------------------------
| MEJORAR TRANSICIÓN DEL CONTENEDOR
|--------------------------------------------------------------------------
*/

.reservation-card {

    transition:
            min-height
            .35s
            ease;
}


/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    #bookingForm.reservation-wizard-step-2
    #availabilityContainer,
    #bookingForm.reservation-wizard-step-3
    #availabilityContainer {

        margin-top: 0;

        padding-top: 0;
    }


    #bookingForm.reservation-wizard-step-3
    #customerSection {

        margin-top: 18px;

        padding-top: 18px;
    }

}

/* ============================================================
   VELOX — WIZARD NAVIGATION
============================================================ */

.reservation-wizard-navigation {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    margin-top: 22px;

    padding-top: 18px;

    border-top:
            1px solid
            rgba(255, 255, 255, 0.055);
}


/* ============================================================
   BOTÓN ATRÁS
============================================================ */

.btn-wizard-back {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 44px;

    padding:
            10px 18px;

    border:
            1px solid
            rgba(255, 255, 255, 0.09);

    border-radius: 10px;

    background: linear-gradient(135deg,
    color-mix(in srgb, var(--bt-red) 88%, #000 12%), var(--bt-red));

    color:
            #FFFFFF;

    font-family:
            var(
                    --velox-font,
                    'Inter',
                    sans-serif
            );

    font-size:
            0.78rem;

    font-weight:
            700;

    cursor:
            pointer;

    box-shadow: 0 8px 18px
    color-mix(in srgb, var(--bt-red) 22%, transparent), 0 0 0 1px
    color-mix(in srgb, var(--bt-red) 25%, transparent), 0 0 28px
    color-mix(in srgb, var(--bt-red) 14%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}


.btn-wizard-back i {

    font-size:
            0.72rem;

    transition:
            transform
            0.2s
            ease;
}


.btn-wizard-back:hover {

    transform: translateY(-2px);

    box-shadow:
            0 12px 28px color-mix(in srgb, var(--bt-red) 32%, transparent),
            0 0 0 1px color-mix(in srgb, var(--bt-red) 45%, transparent),
            0 0 38px color-mix(in srgb, var(--bt-red) 24%, transparent);

    filter: brightness(1.08);
}


.btn-wizard-back:hover i {

    transform:
            translateX(-3px);
}


.btn-wizard-back:active {

    transform:
            translateX(0);
}


/* ============================================================
   VISIBILIDAD
============================================================ */

#step2Navigation,
#step3Navigation {

    display: none;
}


/*
|--------------------------------------------------------------------------
| PASO 2
|--------------------------------------------------------------------------
*/

#bookingForm.reservation-wizard-step-2
#step2Navigation {

    display: flex;

    animation:
            reservationWizardIn
            .35s
            ease
            both;
}


/*
|--------------------------------------------------------------------------
| PASO 3
|--------------------------------------------------------------------------
*/

#bookingForm.reservation-wizard-step-3
#step3Navigation {

    display: flex;

    animation:
            reservationWizardIn
            .35s
            ease
            both;
}


/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 576px) {

    .reservation-wizard-navigation {

        margin-top: 18px;

        padding-top: 15px;
    }


    .btn-wizard-back {

        width: 100%;
    }

}

/* =========================================================
   BURGER TOWN
   HOME — HERO SLIDER
========================================================= */

.bt-hero-slider {

    /*
     * Como el Header ahora es FIXED,
     * dejamos espacio para él.
     */
    margin-top: var(--bt-header-height);

    position: relative;
    width: 100%;
    height: clamp(
            360px,
            36.458vw,
            700px
    );

    overflow: hidden;
    background: #111;
    isolation: isolate;
}


/* =========================================================
   SLIDER
========================================================= */

.bt-hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.bt-hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
            opacity 0.6s ease,
            visibility 0.6s ease;

    overflow: hidden;
}

.bt-hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.bt-hero-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.bt-hero-slide-image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: fill;
    object-position: center center;

    transform: none;

    user-select: none;
    -webkit-user-drag: none;
}

/* =========================================================
   CTA
========================================================= */

.bt-hero-slide-action {

    position: absolute;

    left: 50%;

    bottom: 7.5%;

    transform:
            translateX(-50%);

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: max-content;

    max-width:
            calc(100% - 40px);
}


/* =========================================================
   RESERVATION BUTTON
========================================================= */

.bt-reserve-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 194px;

    min-height: 52px;

    padding: 0 28px;

    border:
            2px solid
            #AD1A19;

    border-radius: 999px;

    background: #AD1A19;

    color: #FFFFFF;

    font-size: 0.78rem;

    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.85px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    white-space: nowrap;

    box-shadow:
            0 8px 24px
            rgba(
                    0,
                    0,
                    0,
                    0.28
            );

    cursor: pointer;

    transition:
            transform 0.25s ease,
            background-color 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease;
}


.bt-reserve-button:hover {

    background: #FFFFFF;

    border-color: #FFFFFF;

    color: #AD1A19;

    transform:
            translateY(-3px);

    box-shadow:
            0 14px 32px
            rgba(
                    0,
                    0,
                    0,
                    0.32
            );
}


.bt-reserve-button:focus-visible {

    outline:
            3px solid
            rgba(
                    255,
                    255,
                    255,
                    0.9
            );

    outline-offset: 4px;
}


/* =========================================================
   DOTS
========================================================= */

.bt-hero-dots {

    position: absolute;

    left: 50%;

    bottom: 18px;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transform:
            translateX(-50%);
}


/* =========================================================
   DOT
========================================================= */

.bt-hero-dot {

    width: 9px;

    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 999px;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.55
            );

    cursor: pointer;

    appearance: none;

    transition:
            width 0.3s ease,
            background-color 0.3s ease,
            transform 0.3s ease;
}


.bt-hero-dot:hover {

    background: #FFFFFF;

    transform:
            scale(1.1);
}


.bt-hero-dot.active {

    width: 28px;

    background: #FFCA05;
}


.bt-hero-dot:focus-visible {

    outline:
            2px solid
            #FFFFFF;

    outline-offset: 4px;
}


/* =========================================================
   ARROWS
========================================================= */

.bt-hero-arrow {

    position: absolute;

    top: 50%;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    padding: 0;

    border:
            2px solid
            #AD1A19;

    border-radius: 50%;

    background: #AD1A19;

    color: #FFFFFF;

    cursor: pointer;

    transform:
            translateY(-50%);

    appearance: none;

    box-shadow:
            0 6px 20px
            rgba(
                    0,
                    0,
                    0,
                    0.18
            );

    transition:
            background-color 0.25s ease,
            border-color 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease;
}


.bt-hero-arrow:hover {

    background: #FFFFFF;

    border-color: #FFFFFF;

    color: #AD1A19;

    transform:
            translateY(-50%)
            scale(1.06);

    box-shadow:
            0 10px 26px
            rgba(
                    0,
                    0,
                    0,
                    0.25
            );
}


.bt-hero-arrow:focus-visible {

    outline:
            3px solid
            rgba(
                    255,
                    255,
                    255,
                    0.9
            );

    outline-offset: 4px;
}


.bt-hero-arrow i {

    font-size: 0.78rem;

    line-height: 1;
}


.bt-hero-arrow-prev {

    left: 28px;
}


.bt-hero-arrow-next {

    right: 28px;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .bt-hero-slide-action {

        bottom: 8%;
    }


    .bt-reserve-button {

        min-width: 205px;

        min-height: 55px;

        font-size: 0.82rem;
    }


    .bt-hero-arrow {

        width: 50px;

        height: 50px;
    }


    .bt-hero-arrow-prev {

        left: 32px;
    }


    .bt-hero-arrow-next {

        right: 32px;
    }


    .bt-hero-dots {

        bottom: 24px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (
min-width: 768px
) and (
max-width: 1199.98px
) {

    .bt-hero-slide-action {

        bottom: 8%;
    }


    .bt-reserve-button {

        min-width: 185px;

        min-height: 50px;

        font-size: 0.75rem;
    }


    .bt-hero-arrow {

        width: 43px;

        height: 43px;
    }


    .bt-hero-arrow-prev {

        left: 18px;
    }


    .bt-hero-arrow-next {

        right: 18px;
    }


    .bt-hero-dots {

        bottom: 18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    /*
     * Los dos banners móviles son 1250x1000.
     *
     * Por lo tanto NO usamos cover.
     * Se muestran completos.
     */

    .bt-hero-slide-image {

        width: 100%;

        height: auto;

        object-fit: initial;
    }


    .bt-hero-slide-action {

        bottom: 9%;

        width: 100%;

        max-width: none;

        padding: 0 20px;

        box-sizing: border-box;
    }


    .bt-reserve-button {

        min-width: 175px;

        min-height: 48px;

        padding: 0 20px;

        font-size: 0.7rem;

        letter-spacing: 0.7px;
    }


    .bt-hero-arrow {

        width: 35px;

        height: 35px;

        border-width: 1.5px;
    }


    .bt-hero-arrow-prev {

        left: 9px;
    }


    .bt-hero-arrow-next {

        right: 9px;
    }


    .bt-hero-arrow i {

        font-size: 0.6rem;
    }


    .bt-hero-dots {

        bottom: 12px;

        gap: 7px;
    }


    .bt-hero-dot {

        width: 7px;

        height: 7px;
    }


    .bt-hero-dot.active {

        width: 22px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .bt-hero-slide-action {

        bottom: 9%;

        padding: 0 15px;
    }


    .bt-reserve-button {

        min-width: 160px;

        min-height: 46px;

        font-size: 0.66rem;

        letter-spacing: 0.65px;
    }


    .bt-hero-arrow {

        width: 33px;

        height: 33px;
    }


    .bt-hero-arrow-prev {

        left: 7px;
    }


    .bt-hero-arrow-next {

        right: 7px;
    }

}


/* =========================================================
   TOUCH
========================================================= */

@media (
hover: none
) and (
pointer: coarse
) {

    .bt-reserve-button:hover {

        transform: none;

        background: #AD1A19;

        border-color: #AD1A19;

        color: #FFFFFF;

        box-shadow:
                0 8px 24px
                rgba(
                        0,
                        0,
                        0,
                        0.28
                );
    }


    .bt-hero-arrow:hover {

        transform:
                translateY(-50%);

        background: #AD1A19;

        border-color: #AD1A19;

        color: #FFFFFF;

        box-shadow:
                0 6px 20px
                rgba(
                        0,
                        0,
                        0,
                        0.18
                );
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
prefers-reduced-motion: reduce
) {

    .bt-hero-slide,
    .bt-reserve-button,
    .bt-hero-arrow,
    .bt-hero-dot {

        transition: none !important;
    }

}

/* =========================================================
   BURGER TOWN
   TOP BAR + HEADER
   FIXED / SCROLL EFFECT
========================================================= */

:root {

    /*
     * Alturas oficiales del Header.
     *
     * El Hero utiliza estas variables para comenzar
     * exactamente debajo del Header.
     */
    --bt-topbar-height: 34px;
    --bt-navbar-height: 88px;
    --bt-header-height: 122px;

    --bt-red: #AD1A19;
    --bt-red-dark: #8F1514;

    --bt-black: #000000;
    --bt-white: #FFFFFF;
}


/* =========================================================
   HEADER ROOT
========================================================= */

.bt-site-header {

    /*
     * FIXED:
     * permanece visible mientras hacemos scroll.
     */
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1100;

    width: 100%;

    height: var(--bt-header-height);

    /*
     * Estado inicial:
     * NEGRO COMPLETAMENTE SÓLIDO.
     */
    background: #000000;

    box-shadow: none;

    transition:
            background-color 0.35s ease,
            box-shadow 0.35s ease,
            backdrop-filter 0.35s ease,
            -webkit-backdrop-filter 0.35s ease;

}


/* =========================================================
   HEADER SCROLLED
========================================================= */

.bt-site-header.is-scrolled {

    /*
     * Al comenzar a bajar:
     * negro ligeramente transparente.
     */
    background:
            rgba(
                    0,
                    0,
                    0,
                    0.82
            );

    /*
     * Efecto glass.
     */
    backdrop-filter:
            blur(10px)
            saturate(100%);

    -webkit-backdrop-filter:
            blur(16px)
            saturate(120%);

    box-shadow:
            0 8px 30px
            rgba(
                    0,
                    0,
                    0,
                    0.32
            );

}


/* =========================================================
   TOP PROMOTIONAL BAR
========================================================= */

.bt-top-bar {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    height: var(--bt-topbar-height);

    min-height: var(--bt-topbar-height);

    padding: 0 20px;

    /*
     * El Header arriba es completamente negro.
     */
    background: var(--bt-red);

    color: #FFFFFF;

    overflow: hidden;

    border-bottom:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    0.06
            );

    transition:
            background-color 0.35s ease,
            border-color 0.35s ease;
}


/* =========================================================
   TOP BAR SCROLLED
========================================================= */

.bt-site-header.is-scrolled
.bt-top-bar {

    background:var(--bt-red);

    border-bottom-color:
            rgba(
                    255,
                    255,
                    255,
                    0.035
            );
}


/* =========================================================
   TOP BAR TRACK
========================================================= */

.bt-top-bar-track {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;

    text-align: center;
}


/* =========================================================
   TOP BAR TEXT
========================================================= */

.bt-top-bar-text {

    font-size: 0.72rem;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: 0.35px;

    color: #FFFFFF;
}


.bt-top-bar-text strong {

    font-weight: 900;

    color: #FFCA05;
}


/* =========================================================
   TOP BAR ICON
========================================================= */

.bt-top-bar-icon {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 0.75rem;

    line-height: 1;
}


/* =========================================================
   MAIN NAVBAR
========================================================= */

.bt-navbar {

    position: relative;

    width: 100%;

    height: var(--bt-navbar-height);

    background: transparent;

    border-bottom:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    0.055
            );

    transition:
            height 0.3s ease,
            border-color 0.35s ease;
}


/* =========================================================
   NAVBAR CONTAINER
========================================================= */

.bt-navbar-container {

    display: flex;

    align-items: center;

    width:
            min(
                    calc(100% - 64px),
                    1440px
            );

    height: 100%;

    margin: 0 auto;

    gap: 34px;
}


/* =========================================================
   LOGO
========================================================= */

.bt-navbar-brand {

    display: flex;

    align-items: center;

    flex: 0 0 auto;

    height: 100%;

    color: #FFFFFF;

    text-decoration: none;

    transition:
            opacity 0.25s ease,
            transform 0.25s ease;
}


.bt-navbar-brand:hover {

    color: #FFFFFF;

    opacity: 0.92;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.bt-navbar-logo {

    display: block;

    width: auto;

    max-width: 175px;

    max-height: 64px;

    object-fit: contain;

    object-position: left center;
}


/* =========================================================
   LOGO FALLBACK
========================================================= */

.bt-navbar-logo-fallback {

    color: #FFFFFF;

    font-size: 1.25rem;

    font-weight: 900;

    letter-spacing: -0.5px;

    text-transform: uppercase;
}


/* =========================================================
   NAVIGATION
========================================================= */

.bt-navbar-menu {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 1;

    height: 100%;

    gap: 5px;
}


/* =========================================================
   NAV LINK
========================================================= */

.bt-nav-link {

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 14px;

    border: 0;

    background: transparent;

    color: #FFFFFF;

    font-size: 0.78rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.35px;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    transition:
            color 0.2s ease,
            background-color 0.2s ease;
}


.bt-nav-link::after {

    content: "";

    position: absolute;

    left: 14px;
    right: 14px;

    bottom: 4px;

    height: 3px;

    border-radius: 999px;

    background: var(--bt-red);

    transform: scaleX(0);

    transform-origin: center;

    transition:
            transform 0.25s ease;
}


.bt-nav-link:hover {

    color: var(--bt-red);
}


.bt-nav-link:hover::after,
.bt-nav-link.active::after {

    transform: scaleX(1);
}


.bt-nav-link.active {

    color: var(--bt-red);
}


/* =========================================================
   DROPDOWNS
========================================================= */

.bt-nav-dropdown {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;
}


.bt-nav-dropdown-toggle {

    gap: 7px;
}


.bt-nav-dropdown-toggle i {

    font-size: 0.55rem;

    transition:
            transform 0.2s ease;
}


.bt-nav-dropdown:hover
.bt-nav-dropdown-toggle i {

    transform:
            rotate(180deg);
}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.bt-nav-dropdown-menu {

    position: absolute;

    top: calc(100% - 1px);

    left: 50%;

    min-width: 235px;

    padding: 10px;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    0.08
            );

    border-radius: 14px;

    background:
            rgba(
                    5,
                    5,
                    5,
                    0.98
            );

    box-shadow:
            0 18px 50px
            rgba(
                    0,
                    0,
                    0,
                    0.45
            );

    opacity: 0;

    visibility: hidden;

    transform:
            translate(
                    -50%,
                    10px
            );

    transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;

    pointer-events: none;

    z-index: 100;
}


.bt-nav-dropdown:hover
.bt-nav-dropdown-menu,
.bt-nav-dropdown.is-open
.bt-nav-dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
            translate(
                    -50%,
                    0
            );

    pointer-events: auto;
}


/* =========================================================
   DROPDOWN ITEM
========================================================= */

.bt-nav-dropdown-item {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 11px 12px;

    border-radius: 10px;

    color:
            rgba(
                    255,
                    255,
                    255,
                    0.82
            );

    font-size: 0.76rem;

    font-weight: 700;

    text-decoration: none;

    transition:
            background-color 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
}


.bt-nav-dropdown-item:hover {

    transform: translateY(-2px);

    box-shadow:
            0 12px 28px color-mix(in srgb, var(--bt-red) 32%, transparent),
            0 0 0 1px color-mix(in srgb, var(--bt-red) 45%, transparent),
            0 0 38px color-mix(in srgb, var(--bt-red) 24%, transparent);

    filter: brightness(1.08);
}


.bt-nav-dropdown-item i {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 8px;

    background:
            rgba(
                    173,
                    26,
                    25,
                    0.10
            );

    color: var(--bt-red);

    font-size: 0.75rem;
}


/* =========================================================
   HEADER RESERVATION BUTTON
========================================================= */

.bt-header-reserve {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    gap: 9px;

    min-width: 142px;

    min-height: 44px;

    padding: 0 18px;

    border:
            2px solid
            var(--bt-red);

    border-radius: 999px;

    background: var(--bt-red);

    color: #FFFFFF;

    font-size: 0.72rem;

    font-weight: 900;

    letter-spacing: 0.5px;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
            0 7px 20px
            rgba(
                    173,
                    26,
                    25,
                    0.18
            );

    transition:
            background-color 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease,
            box-shadow 0.2s ease;
}


.bt-header-reserve:hover {

    transform: translateY(-2px);

    box-shadow:
            0 12px 28px color-mix(in srgb, var(--bt-red) 32%, transparent),
            0 0 0 1px color-mix(in srgb, var(--bt-red) 45%, transparent),
            0 0 38px color-mix(in srgb, var(--bt-red) 24%, transparent);

    filter: brightness(1.08);
}


.bt-header-reserve i {

    font-size: 0.65rem;

    transition:
            transform 0.2s ease;
}


.bt-header-reserve:hover i {

    transform:
            translateX(3px);
}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

.bt-navbar-toggle {

    display: none;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.bt-navbar-toggle span {

    display: block;

    width: 23px;

    height: 2px;

    border-radius: 999px;

    background: #FFFFFF;

    transition:
            transform 0.25s ease,
            opacity 0.25s ease;
}


.bt-navbar-toggle.is-open
span:nth-child(1) {

    transform:
            translateY(7px)
            rotate(45deg);
}


.bt-navbar-toggle.is-open
span:nth-child(2) {

    opacity: 0;
}


.bt-navbar-toggle.is-open
span:nth-child(3) {

    transform:
            translateY(-7px)
            rotate(-45deg);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1440px) {

    :root {

        --bt-navbar-height: 92px;

        --bt-header-height: 126px;
    }


    .bt-navbar-container {

        width:
                min(
                        calc(100% - 80px),
                        1480px
                );

        gap: 42px;
    }


    .bt-navbar-logo {

        max-width: 190px;

        max-height: 90px;
    }


    .bt-nav-link {

        padding: 0 16px;

        font-size: 0.8rem;
    }


    .bt-header-reserve {

        min-width: 150px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (
min-width: 1100px
) and (
max-width: 1439.98px
) {

    .bt-navbar-container {

        width:
                min(
                        calc(100% - 48px),
                        1360px
                );

        gap: 24px;
    }


    .bt-navbar-logo {

        max-width: 160px;
    }


    .bt-nav-link {

        padding: 0 10px;

        font-size: 0.74rem;
    }


    .bt-header-reserve {

        min-width: 135px;

        padding: 0 15px;

        font-size: 0.68rem;
    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 1099.98px) {

    :root {

        --bt-navbar-height: 76px;

        --bt-header-height: 110px;
    }


    .bt-navbar-container {

        width:
                calc(100% - 32px);

        gap: 0;
    }


    .bt-navbar-logo {

        max-width: 145px;

        max-height: 56px;
    }


    .bt-navbar-menu {

        position: absolute;

        top: 100%;

        left: 16px;
        right: 16px;

        display: flex;

        align-items: stretch;
        justify-content: flex-start;

        flex-direction: column;

        height: auto;

        padding: 12px;

        border:
                1px solid
                rgba(
                        255,
                        255,
                        255,
                        0.08
                );

        border-radius: 16px;

        background:
                rgba(
                        5,
                        5,
                        5,
                        0.98
                );

        box-shadow:
                0 20px 50px
                rgba(
                        0,
                        0,
                        0,
                        0.45
                );

        opacity: 0;

        visibility: hidden;

        transform:
                translateY(-10px);

        transition:
                opacity 0.25s ease,
                visibility 0.25s ease,
                transform 0.25s ease;

        pointer-events: none;

        z-index: 100;
    }


    .bt-navbar-menu.is-open {

        opacity: 1;

        visibility: visible;

        transform:
                translateY(0);

        pointer-events: auto;
    }


    .bt-nav-link {

        justify-content: flex-start;

        width: 100%;

        min-height: 48px;

        padding: 0 14px;

        border-radius: 10px;
    }


    .bt-nav-link::after {

        display: none;
    }


    .bt-nav-link:hover,
    .bt-nav-link.active {

        background:
                rgba(
                        173,
                        26,
                        25,
                        0.14
                );

        color: #FFFFFF;
    }


    .bt-nav-dropdown {

        width: 100%;

        height: auto;

        flex-direction: column;

        align-items: stretch;
    }


    .bt-nav-dropdown-toggle {

        justify-content: space-between;
    }


    .bt-nav-dropdown-menu {

        position: static;

        width: 100%;

        min-width: 0;

        padding: 4px 8px;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        transform: none;

        pointer-events: auto;

        display: none;

    }


    .bt-nav-dropdown.is-open
    .bt-nav-dropdown-menu {

        display: block;
    }


    .bt-header-reserve {

        display: none;
    }


    .bt-navbar-toggle {

        display: flex;

        margin-left: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    :root {

        --bt-topbar-height: 32px;

        --bt-navbar-height: 70px;

        --bt-header-height: 102px;
    }


    .bt-top-bar {

        padding: 0 12px;
    }


    .bt-top-bar-text {

        font-size: 0.62rem;

        letter-spacing: 0.2px;
    }


    .bt-top-bar-icon {

        font-size: 0.65rem;
    }


    .bt-navbar-container {

        width:
                calc(100% - 24px);
    }


    .bt-navbar-logo {

        max-width: 130px;

        max-height: 52px;
    }


    .bt-navbar-menu {

        left: 12px;

        right: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    :root {

        --bt-topbar-height: 32px;

        --bt-navbar-height: 66px;

        --bt-header-height: 98px;
    }


    .bt-top-bar-icon {

        display: none;
    }


    .bt-top-bar-text {

        font-size: 0.58rem;
    }


    .bt-navbar-logo {

        max-width: 118px;
    }


    .bt-navbar {

        height: var(--bt-navbar-height);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bt-site-header,
    .bt-top-bar,
    .bt-navbar,
    .bt-nav-link,
    .bt-nav-link::after,
    .bt-nav-dropdown-menu,
    .bt-header-reserve,
    .bt-navbar-toggle span {

        transition: none !important;
    }

}

/* =========================================================
   BURGER TOWN
   RECONOCIMIENTOS
   ========================================================= */

.bt-awards-section {
    position: relative;

    width: 100%;

    padding: 95px 0 82px;

    background: #000;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   AMBIENT LIGHT
   ========================================================= */

.bt-awards-section::before {
    content: "";

    position: absolute;

    top: -180px;
    left: 50%;

    width: 620px;
    height: 360px;

    transform: translateX(-50%);

    background:
            radial-gradient(
                    ellipse,
                    rgba(255, 198, 50, 0.10) 0%,
                    rgba(255, 198, 50, 0.035) 38%,
                    transparent 72%
            );

    pointer-events: none;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.bt-awards-container {
    position: relative;

    z-index: 1;

    width: min(
            calc(100% - 48px),
            1480px
    );

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.bt-awards-header {
    max-width: 720px;

    margin: 0 auto 52px;

    text-align: center;
}


.bt-awards-eyebrow {
    display: inline-block;

    margin-bottom: 14px;

    color: #ffca05;

    font-size: 0.85rem;

    font-weight: 900;

    letter-spacing: 2.8px;

    text-transform: uppercase;
}


.bt-awards-title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 6vw, 45px);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -1.5px;
}


.bt-awards-description {
    max-width: 620px;

    margin: 18px auto 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.7;
}


/* =========================================================
   SLIDER
   ========================================================= */

.bt-awards-slider {
    position: relative;

    width: 100%;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.bt-awards-viewport {
    width: 100%;
    padding: 20px;
    overflow: hidden;
}


/* =========================================================
   TRACK
   ========================================================= */

.bt-awards-track {
    display: flex;

    align-items: stretch;

    gap: 18px;

    will-change: transform;

    transition:
            transform 0.8s cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            );
}


/* =========================================================
   CARD
   ========================================================= */

.bt-award-card {
    position: relative;

    flex: 0 0 calc(
            (100% - 72px) / 5
    );

    min-width: 0;

    padding: 4px;

    box-sizing: border-box;

    cursor: pointer;
}


/* =========================================================
   CARD INNER
   ========================================================= */

.bt-award-card-inner {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: flex-start;

    flex-direction: column;

    height: 100%;

    padding: 18px 12px 24px;

    border: 1px solid rgba(
            255,
            202,
            5,
            0.10
    );

    border-radius: 18px;

    background:
            linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.025),
                    rgba(255, 255, 255, 0.008)
            );

    overflow: hidden;

    transition:
            transform 0.45s cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ),
            border-color 0.4s ease,
            box-shadow 0.4s ease,
            background-color 0.4s ease;
}


/* =========================================================
   GOLD LIGHT BORDER
   ========================================================= */

.bt-award-card-inner::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
            linear-gradient(
                    135deg,
                    transparent 25%,
                    rgba(255, 202, 5, 0.28),
                    transparent 75%
            );

    opacity: 0;

    transform:
            translateX(-100%);

    transition:
            transform 0.75s ease,
            opacity 0.3s ease;

    pointer-events: none;
}


/* =========================================================
   HOVER SHINE
   ========================================================= */

.bt-award-card-inner::after {
    content: "";

    position: absolute;

    top: -30%;
    left: -80%;

    width: 45%;
    height: 160%;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.16),
                    transparent
            );

    transform:
            rotate(18deg)
            translateX(0);

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.bt-award-card:hover
.bt-award-card-inner {

    transform:
            translateY(-10px)
            scale(1.015);

    border-color:
            rgba(255, 202, 5, 0.58);

    background:
            linear-gradient(
                    180deg,
                    rgba(255, 202, 5, 0.055),
                    rgba(255, 255, 255, 0.012)
            );

    box-shadow:
            0 20px 55px rgba(0, 0, 0, 0.55),
            0 0 35px rgba(255, 202, 5, 0.10),
            inset 0 0 30px rgba(255, 202, 5, 0.025);
}


.bt-award-card:hover
.bt-award-card-inner::before {

    opacity: 1;

    transform:
            translateX(100%);
}


.bt-award-card:hover
.bt-award-card-inner::after {

    opacity: 1;

    animation:
            btAwardShine 0.85s ease forwards;
}


/* =========================================================
   BADGE
   ========================================================= */

.bt-award-badge {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    aspect-ratio: 1 / 0.86;

    margin-bottom: 12px;

    overflow: visible;
}


.bt-award-badge::before {
    content: "";

    position: absolute;

    width: 62%;

    height: 62%;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(255, 202, 5, 0.15),
                    transparent 70%
            );

    filter: blur(14px);

    opacity: 0.45;

    transition:
            opacity 0.45s ease,
            transform 0.45s ease;
}


.bt-award-badge img {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    max-width: 220px;
    max-height: 220px;

    object-fit: contain;

    filter:
            drop-shadow(
                    0 10px 15px rgba(0, 0, 0, 0.35)
            );

    transform:
            scale(1)
            rotate(0deg);

    transition:
            transform 0.55s cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ),
            filter 0.45s ease;
}


/* =========================================================
   BADGE HOVER
   ========================================================= */

.bt-award-card:hover
.bt-award-badge img {

    transform:
            scale(1.08)
            rotate(-1.5deg);

    filter:
            drop-shadow(
                    0 15px 28px rgba(0, 0, 0, 0.45)
            )
            drop-shadow(
                    0 0 15px rgba(255, 202, 5, 0.22)
            );
}


.bt-award-card:hover
.bt-award-badge::before {

    opacity: 0.9;

    transform: scale(1.25);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.bt-award-content {
    position: relative;

    z-index: 2;

    width: 100%;

    text-align: center;
}


.bt-award-content h3 {
    margin: 0;

    color: #ffffff;

    font-size: 0.88rem;

    font-weight: 900;

    line-height: 1.25;

    letter-spacing: -0.2px;
}


.bt-award-content p {
    margin: 8px 0 0;

    color: rgba(
            255,
            255,
            255,
            0.62
    );

    font-size: 0.72rem;

    font-weight: 500;

    line-height: 1.4;
}


/* =========================================================
   DOTS
   ========================================================= */

.bt-awards-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 34px;
}


.bt-awards-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 999px;

    background:
            rgba(255, 255, 255, 0.28);

    cursor: pointer;

    appearance: none;

    transition:
            width 0.3s ease,
            background-color 0.3s ease,
            transform 0.3s ease,
            box-shadow 0.3s ease;
}


.bt-awards-dot:hover {
    background: #ffffff;

    transform: scale(1.15);
}


.bt-awards-dot.active {
    width: 30px;

    background: #ffca05;

    box-shadow:
            0 0 12px rgba(
                    255,
                    202,
                    5,
                    0.35
            );
}


/* =========================================================
   ANIMATION SHINE
   ========================================================= */

@keyframes btAwardShine {

    0% {
        transform:
                rotate(18deg)
                translateX(0);
    }

    100% {
        transform:
                rotate(18deg)
                translateX(500%);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .bt-award-card {
        flex-basis: calc(
                (100% - 36px) / 3
        );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .bt-awards-section {
        padding: 70px 0 60px;
    }


    .bt-awards-container {
        width: calc(
                100% - 30px
        );
    }


    .bt-awards-header {
        margin-bottom: 35px;
    }


    .bt-awards-title {
        font-size: 2rem;
    }


    .bt-awards-description {
        font-size: 0.78rem;
    }


    .bt-awards-track {
        gap: 12px;
    }


    .bt-award-card {
        flex-basis: calc(
                (100% - 12px) / 2
        );
    }


    .bt-award-card-inner {
        padding: 14px 10px 20px;
    }


    .bt-award-content h3 {
        font-size: 0.76rem;
    }


    .bt-award-content p {
        font-size: 0.66rem;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .bt-award-card {
        flex-basis: 82%;
    }


    .bt-award-card-inner {
        padding: 16px 12px 22px;
    }


    .bt-award-badge {
        aspect-ratio: 1 / 0.9;
    }


    .bt-award-content h3 {
        font-size: 0.82rem;
    }


    .bt-award-content p {
        font-size: 0.68rem;
    }

}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .bt-award-card:hover
    .bt-award-card-inner {

        transform: none;

        border-color:
                rgba(255, 202, 5, 0.10);

        background:
                linear-gradient(
                        180deg,
                        rgba(255, 255, 255, 0.025),
                        rgba(255, 255, 255, 0.008)
                );

        box-shadow: none;
    }


    .bt-award-card:hover
    .bt-award-badge img {

        transform: none;

        filter:
                drop-shadow(
                        0 10px 15px rgba(0, 0, 0, 0.35)
                );
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bt-award-card-inner,
    .bt-award-badge img,
    .bt-awards-dot {
        transition: none !important;
    }


    .bt-award-card-inner::after {
        animation: none !important;
    }

}

/* =========================================================
   BURGER TOWN
   PLAYLIST 1
========================================================= */

.bt-playlist-section {
    position: relative;

    width: 100%;

    padding: 0 0 70px;

    background: #000;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.bt-playlist-container {
    width: min(100%, 1400px);

    margin: 0 auto;

    padding: 0 30px;
}


/* =========================================================
   HEADER
========================================================= */

.bt-playlist-header {
    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 14px;
}


.bt-playlist-eyebrow {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: rgba(255, 255, 255, 0.92);

    font-family: inherit;

    font-size: 15px;
    font-weight: 500;

    letter-spacing: 0.01em;

    line-height: 1.2;
}


/* =========================================================
   VIEWPORT
========================================================= */

.bt-playlist-viewport {
    width: 100%;

    overflow: hidden;
}


/* =========================================================
   TRACK
========================================================= */

.bt-playlist-track {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;
    padding: 10px;
    width: 100%;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.bt-playlist-card {
    position: relative;

    width: 100%;

    aspect-ratio: 0.675 / 1;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.28);

    border-radius: 8px;

    background: #080808;

    isolation: isolate;

    box-shadow:
            0 12px 35px rgba(0, 0, 0, 0.30);

    transition:
            transform 0.35s cubic-bezier(.22,.61,.36,1),
            border-color 0.35s ease,
            box-shadow 0.35s ease;
}


/* =========================================================
   VIDEO
========================================================= */

.bt-playlist-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    background: #080808;

    pointer-events: none;
}


/* =========================================================
   OVERLAY
========================================================= */

.bt-playlist-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
            linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0.04) 0%,
                    rgba(0, 0, 0, 0) 45%,
                    rgba(0, 0, 0, 0.20) 100%
            );

    opacity: 0.85;

    transition:
            opacity 0.35s ease;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .bt-playlist-card:hover {
        transform: translateY(-4px);

        border-color:
                rgba(255, 255, 255, 0.65);

        box-shadow:
                0 18px 45px rgba(0, 0, 0, 0.45);
    }

    .bt-playlist-card:hover::after {
        opacity: 0.35;
    }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1440px) {

    .bt-playlist-container {
        max-width: 1400px;
    }

    .bt-playlist-track {
        gap: 12px;
    }

    .bt-playlist-card {
        border-radius: 8px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (max-width: 1199px) {

    .bt-playlist-container {
        padding: 0 24px;
    }

    .bt-playlist-track {
        gap: 10px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .bt-playlist-section {
        padding: 30px 0 55px;
    }

    .bt-playlist-track {
        grid-template-columns:
            repeat(5, minmax(150px, 1fr));

        gap: 10px;
    }

    .bt-playlist-card {
        border-radius: 7px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .bt-playlist-section {
        padding: 28px 0 48px;
    }

    .bt-playlist-container {
        padding: 0;
    }

    .bt-playlist-header {
        padding: 0 18px;

        margin-bottom: 14px;
    }

    /*
     * En móvil los 5 videos mantienen su tamaño.
     * Se permite desplazamiento horizontal.
     */
    .bt-playlist-viewport {
        overflow-x: auto;
        overflow-y: hidden;

        padding:
                0 18px
                8px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior-x: contain;

        scroll-snap-type: x mandatory;
    }

    .bt-playlist-viewport::-webkit-scrollbar {
        display: none;
    }

    .bt-playlist-track {
        display: flex;

        width: max-content;

        gap: 10px;
    }

    .bt-playlist-card {
        flex: 0 0 210px;

        width: 210px;

        aspect-ratio: 0.675 / 1;

        scroll-snap-align: start;

        border-radius: 8px;
    }
}


/* =========================================================
   MOBILE SMALL
========================================================= */

@media (max-width: 420px) {

    .bt-playlist-card {
        flex-basis: 195px;

        width: 195px;
    }
}

/* =========================================================
   BURGER TOWN
   BURGER MASTER FEATURE
========================================================= */

.bt-burger-master-section {

    position: relative;

    width: 100%;

    min-height: 760px;

    padding: 40px 55px 0;

    background:
            radial-gradient(
                    circle at 72% 50%,
                    rgba(173, 26, 25, 0.11),
                    transparent 30%
            ),
            #000;

    color: #fff;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   AMBIENT LIGHT
========================================================= */

.bt-burger-master-section::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 62%;

    width: 650px;
    height: 650px;

    transform:
            translate(-50%, -50%);

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(173, 26, 25, 0.13),
                    rgba(173, 26, 25, 0.035) 38%,
                    transparent 70%
            );

    filter: blur(20px);

    pointer-events: none;

    z-index: -1;

    animation:
            btBurgerMasterAmbient
            7s
            ease-in-out
            infinite;
}


/* =========================================================
   CONTAINER
========================================================= */

.bt-burger-master-container {

    position: relative;

    z-index: 2;

    width:
            min(
                    calc(100% - 100px),
                    1450px
            );

    min-height: 540px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(520px, 1fr);

    align-items: center;

    gap: clamp(
            70px,
            9vw,
            150px
    );
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.bt-burger-master-content {

    position: relative;

    max-width: 510px;

    padding-left: 30px;
}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.bt-burger-master-content::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 3px;

    height: 100px;

    background:
            linear-gradient(
                    to bottom,
                    #AD1A19,
                    rgba(173,26,25,0)
            );

    border-radius: 999px;

    opacity: 0.9;
}


/* =========================================================
   EYEBROW
========================================================= */

.bt-burger-master-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 30px;

    color: #ffca05;

    font-size: 0.85rem;

    font-weight: 900;

    letter-spacing: 2.3px;

    line-height: 1.4;

    text-transform: uppercase;

    opacity: 0;

    transform:
            translateX(-25px);

    animation:
            btBurgerMasterContentIn
            0.85s
            cubic-bezier(.22,1,.36,1)
            0.15s
            forwards;
}


.bt-burger-master-eyebrow::before {

    content: "";

    width: 34px;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    #AD1A19,
                    #ffca05
            );
}


/* =========================================================
   BURGER TOWN BRAND
========================================================= */

.bt-burger-master-brand {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: max-content;
    max-width: 100%;

    margin-bottom: 28px;

    opacity: 0;

    transform: translateX(-30px);

    animation:
            btBurgerMasterContentIn
            0.9s
            cubic-bezier(.22,1,.36,1)
            0.28s
            forwards;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.bt-burger-master-logo {

    display: block;

    width: min(
            330px,
            100%
    );

    height: auto;

    object-fit: contain;

    filter:
            drop-shadow(
                    0 14px 24px
                    rgba(0,0,0,0.55)
            );
}


/* =========================================================
   TEXT OVER IMAGE
========================================================= */

.bt-burger-master-brand-text {

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
            translate(-50%, -50%);

    z-index: 3;

    color: #ffffff;

    font-family: inherit;

    font-size: clamp(42px, 6vw, 45px);

    font-weight: 900;

    line-height: 1;

    letter-spacing: -1.5px;

    white-space: nowrap;

    text-align: center;

    text-shadow:
            0 3px 8px
            rgba(0,0,0,0.85),

            0 0 18px
            rgba(0,0,0,0.45);

    pointer-events: none;
}


/* =========================================================
   SUBTLE TEXT GLOW
========================================================= */

.bt-burger-master-brand-text::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -10px;

    width: 55%;

    height: 2px;

    transform:
            translateX(-50%);

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    #AD1A19,
                    #ffca05,
                    #AD1A19,
                    transparent
            );

    opacity: 0.85;

    filter:
            blur(0.3px);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .bt-burger-master-brand:hover
    .bt-burger-master-brand-text {

        text-shadow:
                0 4px 12px
                rgba(0,0,0,0.95),

                0 0 25px
                rgba(255,202,5,0.18);

        transition:
                text-shadow 0.35s ease;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .bt-burger-master-logo {

        width: 245px;
    }

    .bt-burger-master-brand-text {

        font-size: 2rem;

        letter-spacing: -1px;
    }

}


@media (max-width: 420px) {

    .bt-burger-master-logo {

        width: 210px;
    }

    .bt-burger-master-brand-text {

        font-size: 1.85rem;
    }

}

/* =========================================================
   DESCRIPTION
========================================================= */

.bt-burger-master-description {

    max-width: 440px;

    margin: 0 0 36px;

    color:
            rgba(
                    255,
                    255,
                    255,
                    0.66
            );

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.85;

    letter-spacing: 0.1px;

    opacity: 0;

    transform:
            translateX(-25px);

    animation:
            btBurgerMasterContentIn
            0.85s
            cubic-bezier(.22,1,.36,1)
            0.4s
            forwards;
}


/* =========================================================
   BUTTON
========================================================= */

.bt-burger-master-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    min-width: 190px;

    min-height: 52px;

    padding:
            0 25px;

    border:
            1px solid
            #AD1A19;

    border-radius: 999px;

    background:
            #AD1A19;

    color: #fff;

    font-size: 0.72rem;

    font-weight: 900;

    letter-spacing: 0.9px;

    text-decoration: none;

    overflow: hidden;

    box-shadow:
            0 12px 30px
            rgba(173,26,25,0.20);

    opacity: 0;

    transform:
            translateX(-25px);

    animation:
            btBurgerMasterContentIn
            0.85s
            cubic-bezier(.22,1,.36,1)
            0.52s
            forwards;

    transition:
            transform 0.35s
            cubic-bezier(.22,1,.36,1),
            background-color 0.35s ease,
            box-shadow 0.35s ease,
            color 0.35s ease;
}


.bt-burger-master-button::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 80%;

    height: 100%;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(255,255,255,0.25),
                    transparent
            );

    transform:
            skewX(-20deg);

    transition:
            left 0.65s
            ease;
}


.bt-burger-master-button span,
.bt-burger-master-button i {

    position: relative;

    z-index: 2;
}


.bt-burger-master-button i {

    font-size: 0.7rem;

    transition:
            transform 0.3s ease;
}


.bt-burger-master-button:hover {

    color: #AD1A19;

    background: #fff;

    border-color: #fff;

    transform:
            translateY(-4px);

    box-shadow:
            0 18px 40px
            rgba(0,0,0,0.40);
}


.bt-burger-master-button:hover::before {

    left: 140%;
}


.bt-burger-master-button:hover i {

    transform:
            translateX(5px);
}


/* =========================================================
   SLIDER
========================================================= */

.bt-burger-master-slider {

    position: relative;

    width: 100%;

    max-width: 650px;

    margin-left: auto;
}


/* =========================================================
   IMAGE VIEWPORT
========================================================= */

.bt-burger-master-viewport {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 28px;

    background: #0b0b0b;

    box-shadow:
            0 35px 90px
            rgba(0,0,0,0.65);
}


/* =========================================================
   PREMIUM BORDER
========================================================= */

.bt-burger-master-viewport::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 5;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    0.12
            );

    border-radius: inherit;

    pointer-events: none;
}


/* =========================================================
   IMAGE GLOW
========================================================= */

.bt-burger-master-viewport::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    background:
            linear-gradient(
                    135deg,
                    rgba(0,0,0,0.25),
                    transparent 38%,
                    transparent 68%,
                    rgba(173,26,25,0.16)
            );

    pointer-events: none;
}


/* =========================================================
   TRACK
========================================================= */

.bt-burger-master-track {

    position: relative;

    width: 100%;

    height: 100%;
}


/* =========================================================
   SLIDE
========================================================= */

.bt-burger-master-slide {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    visibility: hidden;

    transform:
            scale(1.035);

    transition:
            opacity 0.9s
            cubic-bezier(.22,1,.36,1),
            transform 5s
            cubic-bezier(.22,1,.36,1),
            visibility 0.9s ease;

    pointer-events: none;

    cursor: pointer;
}


.bt-burger-master-slide.active {

    opacity: 1;

    visibility: visible;

    transform:
            scale(1);

    z-index: 2;

    pointer-events: auto;
}


.bt-burger-master-slide img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;

    -webkit-user-drag: none;
}


/* =========================================================
   IMAGE ACTIVE ZOOM
========================================================= */

.bt-burger-master-slide.active img {

    animation:
            btBurgerMasterImageZoom
            5.8s
            cubic-bezier(.22,1,.36,1)
            forwards;
}


/* =========================================================
   ARROWS
========================================================= */

.bt-burger-master-arrow {

    position: absolute;

    top: 50%;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    padding: 0;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    0.25
            );

    border-radius: 50%;

    background:
            rgba(
                    0,
                    0,
                    0,
                    0.45
            );

    backdrop-filter:
            blur(10px);

    color: #fff;

    cursor: pointer;

    transform:
            translateY(-50%);

    transition:
            background-color 0.3s ease,
            border-color 0.3s ease,
            transform 0.3s ease,
            box-shadow 0.3s ease;
}


.bt-burger-master-prev {

    left: 18px;
}


.bt-burger-master-next {

    right: 18px;
}


.bt-burger-master-arrow:hover {

    background: #AD1A19;

    border-color: #AD1A19;

    transform:
            translateY(-50%)
            scale(1.08);

    box-shadow:
            0 10px 28px
            rgba(0,0,0,0.35);
}


.bt-burger-master-arrow i {

    font-size: 0.72rem;
}


/* =========================================================
   DOTS
========================================================= */

.bt-burger-master-dots {

    position: absolute;

    left: 50%;

    bottom: 20px;

    z-index: 12;

    display: flex;

    align-items: center;

    gap: 7px;

    transform:
            translateX(-50%);

    padding:
            8px 11px;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    0.12
            );

    border-radius: 999px;

    background:
            rgba(
                    0,
                    0,
                    0,
                    0.42
            );

    backdrop-filter:
            blur(10px);
}


.bt-burger-master-dot {

    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 999px;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.42
            );

    cursor: pointer;

    transition:
            width 0.35s ease,
            background-color 0.35s ease,
            box-shadow 0.35s ease;
}


.bt-burger-master-dot.active {

    width: 27px;

    background:
            #ffca05;

    box-shadow:
            0 0 12px
            rgba(
                    255,
                    202,
                    5,
                    0.45
            );
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes btBurgerMasterContentIn {

    from {

        opacity: 0;

        transform:
                translateX(-30px);
    }

    to {

        opacity: 1;

        transform:
                translateX(0);
    }
}


@keyframes btBurgerMasterImageZoom {

    from {

        transform:
                scale(1);
    }

    to {

        transform:
                scale(1.045);
    }
}


@keyframes btBurgerMasterAmbient {

    0%,
    100% {

        opacity: 0.75;

        transform:
                translate(-50%, -50%)
                scale(1);
    }

    50% {

        opacity: 1;

        transform:
                translate(-50%, -50%)
                scale(1.08);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .bt-burger-master-section {

        min-height: auto;

        padding:
                90px 0;
    }


    .bt-burger-master-container {

        width:
                min(
                        calc(100% - 60px),
                        900px
                );

        grid-template-columns:
            1fr 1fr;

        gap: 50px;
    }


    .bt-burger-master-content {

        padding-left: 22px;
    }


    .bt-burger-master-logo {

        width: 270px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .bt-burger-master-section {

        padding:
                75px 0
                65px;
    }


    .bt-burger-master-container {

        width:
                calc(100% - 32px);

        display: flex;

        flex-direction: column;

        gap: 48px;

        align-items: stretch;
    }


    .bt-burger-master-content {

        max-width: none;

        padding-left: 20px;

        order: 1;
    }


    .bt-burger-master-content::before {

        height: 85px;
    }


    .bt-burger-master-eyebrow {

        margin-bottom: 22px;

        font-size: 0.63rem;

        letter-spacing: 1.8px;
    }


    .bt-burger-master-brand {

        margin-bottom: 22px;
    }


    .bt-burger-master-logo {

        width: 245px;
    }


    .bt-burger-master-description {

        margin-bottom: 28px;

        font-size: 0.82rem;

        line-height: 1.7;
    }


    .bt-burger-master-button {

        min-height: 50px;

        padding:
                0 21px;

        font-size: 0.68rem;
    }


    .bt-burger-master-slider {

        order: 2;

        max-width: none;
    }


    .bt-burger-master-viewport {

        border-radius: 22px;
    }


    .bt-burger-master-arrow {

        width: 40px;
        height: 40px;
    }


    .bt-burger-master-prev {

        left: 12px;
    }


    .bt-burger-master-next {

        right: 12px;
    }


    .bt-burger-master-dots {

        bottom: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .bt-burger-master-container {

        width:
                calc(100% - 24px);

        gap: 38px;
    }


    .bt-burger-master-content {

        padding-left: 16px;
    }


    .bt-burger-master-eyebrow {

        font-size: 0.57rem;

        letter-spacing: 1.4px;
    }


    .bt-burger-master-logo {

        width: 210px;
    }


    .bt-burger-master-description {

        font-size: 0.78rem;
    }


    .bt-burger-master-arrow {

        width: 36px;
        height: 36px;
    }


    .bt-burger-master-arrow i {

        font-size: 0.62rem;
    }

}


/* =========================================================
   TOUCH
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .bt-burger-master-button:hover {

        color: #fff;

        background: #AD1A19;

        border-color: #AD1A19;

        transform: none;

        box-shadow:
                0 12px 30px
                rgba(173,26,25,0.20);
    }


    .bt-burger-master-button:hover i {

        transform: none;
    }


    .bt-burger-master-arrow:hover {

        background:
                rgba(
                        0,
                        0,
                        0,
                        0.45
                );

        border-color:
                rgba(
                        255,
                        255,
                        255,
                        0.25
                );

        transform:
                translateY(-50%);

        box-shadow: none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bt-burger-master-section::before,
    .bt-burger-master-eyebrow,
    .bt-burger-master-brand,
    .bt-burger-master-description,
    .bt-burger-master-button,
    .bt-burger-master-slide.active img {

        animation: none !important;
    }


    .bt-burger-master-slide,
    .bt-burger-master-button,
    .bt-burger-master-arrow,
    .bt-burger-master-dot {

        transition: none !important;
    }

}


/* =========================================================
   BURGER TOWN
   ¿QUÉ SE TE ANTOJA HOY?
========================================================= */

.bt-cravings-section {

    position: relative;

    width: 100%;

    padding:
            130px 0
            130px;

    background:
            radial-gradient(
                    circle at 50% 0%,
                    rgba(173, 26, 25, 0.08),
                    transparent 32%
            ),
            #000;

    color: #fff;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.bt-cravings-section::before {

    content: "";

    position: absolute;

    top: -180px;
    left: 50%;

    width: 700px;
    height: 380px;

    transform:
            translateX(-50%);

    background:
            radial-gradient(
                    ellipse,
                    rgba(173, 26, 25, 0.16),
                    transparent 70%
            );

    filter: blur(30px);

    pointer-events: none;

    z-index: -1;

    animation:
            btCravingsAmbient
            8s
            ease-in-out
            infinite;
}


/* =========================================================
   CONTAINER
========================================================= */

.bt-cravings-container {

    position: relative;

    z-index: 2;

    width:
            min(
                    calc(100% - 70px),
                    1400px
            );

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.bt-cravings-header {

    display: flex;

    justify-content: center;

    margin-bottom: 48px;

    text-align: center;
}


/* =========================================================
   TITLE
========================================================= */

.bt-cravings-title {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 0;

    color: #fff;

    font-size: clamp(42px, 6vw, 45px);

    font-weight: 900;

    line-height: 1;

    letter-spacing: -1.8px;

    text-transform: none;

    opacity: 0;

    transform:
            translateY(25px);

    animation:
            btCravingsTitleIn
            0.85s
            cubic-bezier(.22,1,.36,1)
            forwards;
}


/* =========================================================
   TITLE DECORATION
========================================================= */

.bt-cravings-title::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -18px;

    width: 85px;
    height: 3px;

    transform:
            translateX(-50%);

    border-radius: 999px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    #AD1A19,
                    #ffca05,
                    #AD1A19,
                    transparent
            );

    box-shadow:
            0 0 18px
            rgba(173,26,25,0.35);
}


/* =========================================================
   FIRE
========================================================= */

.bt-cravings-fire {

    display: inline-block;

    font-size:
            clamp(
                    1.2rem,
                    2vw,
                    1.7rem
            );

    transform-origin:
            center bottom;

    animation:
            btCravingsFire
            1.6s
            ease-in-out
            infinite;
}


/* =========================================================
   GRID
========================================================= */

.bt-cravings-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;

    width: 100%;
}


/* =========================================================
   CARD
========================================================= */

.bt-craving-card {

    position: relative;

    min-width: 0;

    border-radius: 22px;

    overflow: hidden;

    background: #090909;

    box-shadow:
            0 20px 60px
            rgba(0,0,0,0.35);

    opacity: 0;

    transform:
            translateY(45px);

    animation:
            btCravingCardIn
            0.9s
            cubic-bezier(.22,1,.36,1)
            forwards;

    transition:
            transform 0.5s
            cubic-bezier(.22,1,.36,1),
            box-shadow 0.5s ease;
}


/*
 * Entrada escalonada
 */

.bt-craving-card:nth-child(1) {
    animation-delay: 0.12s;
}

.bt-craving-card:nth-child(2) {
    animation-delay: 0.22s;
}

.bt-craving-card:nth-child(3) {
    animation-delay: 0.32s;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.bt-craving-image {

    position: relative;

    width: 100%;

    aspect-ratio: 1.42 / 1;

    overflow: hidden;

    background: #111;
}


/* =========================================================
   IMAGE
========================================================= */

.bt-craving-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
            scale(1.001);

    user-select: none;

    -webkit-user-drag: none;

    transition:
            transform 1s
            cubic-bezier(.22,1,.36,1),
            filter 0.6s ease;
}


/* =========================================================
   OVERLAY
========================================================= */

.bt-craving-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
            linear-gradient(
                    to bottom,
                    rgba(0,0,0,0.02) 10%,
                    rgba(0,0,0,0.04) 42%,
                    rgba(0,0,0,0.58) 100%
            );

    transition:
            background 1.4s ease;
}


/* =========================================================
   FLAME EFFECT
========================================================= */

.bt-craving-image::before {

    content: "";

    position: absolute;

    z-index: 3;

    left: -12%;
    bottom: -25%;

    width: 64%;
    height: 72%;

    /*
     * Forma orgánica de llama
     */
    background:
            radial-gradient(
                    ellipse at 50% 100%,
                    rgba(255, 45, 25, 0.95) 0%,
                    rgba(190, 20, 18, 0.92) 38%,
                    rgba(173, 26, 25, 0.72) 58%,
                    rgba(173, 26, 25, 0) 78%
            );

    filter:
            blur(2px);

    opacity: 0;

    transform:
            translateY(35px)
            rotate(-8deg)
            scale(0.82);

    transform-origin:
            bottom center;

    border-radius:
            65%
            35%
            55%
            45%
        /
        55%
            65%
            35%
            45%;

    pointer-events: none;

    transition:
            opacity 1.2s ease,
            transform 2.4s cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   SECONDARY FLAME
========================================================= */

.bt-craving-image::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 4%;
    bottom: -20%;
    width: 38%;
    height: 58%;
    background: radial-gradient(ellipse at 50% 100%, #ff0200, rgb(243 13 11 / 33%) 48%, #f3000000 76%);
    filter: blur(12px);
    opacity: 0;
    transform: translateY(25px) rotate(12deg) scale(0.7);
    transform-origin: bottom center;
    border-radius: 55% 45% 60% 40% / 60% 55% 45% 40%;
    pointer-events: none;
    transition: opacity 1.4s ease 0.08s, transform 2.7s cubic-bezier(.22, 1, .36, 1) 0.08s;
}


/* =========================================================
   HOVER — FLAMES
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .bt-craving-card:hover
    .bt-craving-image::before {

        opacity: 1;

        transform:
                translateY(0)
                rotate(-4deg)
                scale(1);
    }


    .bt-craving-card:hover
    .bt-craving-image::after {

        opacity: 0.85;

        transform:
                translateY(0)
                rotate(7deg)
                scale(1);
    }


    /*
     * Movimiento interno MUY lento
     */

    .bt-craving-card:hover
    .bt-craving-image::before {

        animation:
                btCravingFlameMove
                3.8s
                ease-in-out
                infinite alternate;
    }


    .bt-craving-card:hover
    .bt-craving-image::after {

        animation:
                btCravingFlameMoveSecondary
                4.6s
                ease-in-out
                infinite alternate;
    }


    /*
     * Imagen más lenta
     */

    .bt-craving-card:hover
    .bt-craving-image img {

        transform:
                scale(1.045);

        filter:
                saturate(1.08)
                contrast(1.03);
    }

}

/* =========================================================
   CONTENT
========================================================= */

.bt-craving-content {

    position: absolute;

    z-index: 5;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 25px;

    text-align: center;
}


/* =========================================================
   CATEGORY
========================================================= */

.bt-craving-category {

    color: #fff;

    font-size:
            clamp(
                    1.35rem,
                    2.2vw,
                    2rem
            );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.8px;

    text-shadow:
            0 4px 15px
            rgba(0,0,0,0.8);

    transform:
            translateY(15px);

    transition:
            transform 0.5s
            cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   PRICE
========================================================= */

.bt-craving-price {

    margin-top: 13px;

    color:
            rgba(
                    255,
                    255,
                    255,
                    0.82
            );

    font-size: 0.72rem;

    font-weight: 600;

    letter-spacing: 0.4px;

    opacity: 0;

    transform:
            translateY(10px);

    transition:
            opacity 0.4s ease 0.04s,
            transform 0.5s
            cubic-bezier(.22,1,.36,1)
            0.04s;
}


/* =========================================================
   BUTTON
========================================================= */

.bt-craving-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 118px;

    min-height: 45px;

    margin-top: 17px;

    padding:
            0 19px;

    border:
            1px solid
            #AD1A19;

    border-radius: 999px;

    background:
            #AD1A19;

    color: #fff;

    font-size: 0.68rem;

    font-weight: 900;

    letter-spacing: 0.7px;

    text-decoration: none;

    box-shadow:
            0 10px 25px
            rgba(0,0,0,0.28);

    opacity: 0;

    transform:
            translateY(15px);

    transition:
            opacity 0.4s ease 0.08s,
            transform 0.5s
            cubic-bezier(.22,1,.36,1)
            0.08s,
            background-color 0.3s ease,
            color 0.3s ease,
            box-shadow 0.3s ease;
}


.bt-craving-button i {

    font-size: 0.62rem;

    transition:
            transform 0.3s ease;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .bt-craving-card:hover {

        transform:
                translateY(-8px);

        box-shadow:
                0 35px 85px
                rgba(0,0,0,0.60);
    }


    .bt-craving-card:hover
    .bt-craving-image img {

        transform:
                scale(1.075);

        filter:
                saturate(1.08)
                contrast(1.04);
    }


    .bt-craving-card:hover
    .bt-craving-image::before {

        animation:
                btCravingLightSweep
                0.9s
                ease
                forwards;
    }


    .bt-craving-card:hover
    .bt-craving-overlay {

        background:
                linear-gradient(
                        to bottom,
                        rgba(0,0,0,0.02) 8%,
                        rgba(0,0,0,0.02) 38%,
                        rgba(70,0,0,0.42) 100%
                );
    }


    .bt-craving-card:hover
    .bt-craving-category {

        transform:
                translateY(-3px);
    }


    .bt-craving-card:hover
    .bt-craving-price {

        opacity: 1;

        transform:
                translateY(0);
    }


    .bt-craving-card:hover
    .bt-craving-button {

        opacity: 1;

        transform:
                translateY(0);
    }


    .bt-craving-button:hover {

        background: #fff;

        border-color: #fff;

        color: #AD1A19;

        box-shadow:
                0 15px 35px
                rgba(0,0,0,0.4);
    }


    .bt-craving-button:hover i {

        transform:
                translateX(4px);
    }

}


/* =========================================================
   DESKTOP DEFAULT
========================================================= */

@media (min-width: 992px) {

    /*
     * En desktop mostramos la información
     * siempre de forma elegante.
     */

    .bt-craving-price,
    .bt-craving-button {

        opacity: 1;

        transform:
                translateY(0);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .bt-cravings-section {

        padding:
                130px 0
                130px;
    }


    .bt-cravings-container {

        width:
                calc(100% - 42px);
    }


    .bt-cravings-grid {

        gap: 18px;
    }


    .bt-craving-image {

        aspect-ratio: 1.15 / 1;
    }


    .bt-craving-content {

        padding: 18px;
    }


    .bt-craving-category {

        font-size: 1.35rem;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .bt-cravings-section {

        padding:
                70px 0
                65px;
    }


    .bt-cravings-container {

        width:
                calc(100% - 30px);
    }


    .bt-cravings-header {

        margin-bottom: 38px;
    }


    .bt-cravings-title {

        gap: 7px;

        font-size: 2rem;

        letter-spacing:
                -1px;
    }


    .bt-cravings-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .bt-craving-card {

        border-radius: 18px;
    }


    .bt-craving-image {

        aspect-ratio: 1.45 / 1;
    }


    .bt-craving-category {

        font-size: 1.7rem;

        transform: none;
    }


    .bt-craving-price {

        opacity: 1;

        transform: none;
    }


    .bt-craving-button {

        opacity: 1;

        transform: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .bt-cravings-container {

        width:
                calc(100% - 22px);
    }


    .bt-craving-image {

        aspect-ratio: 1.35 / 1;
    }


    .bt-craving-content {

        padding: 15px;
    }


    .bt-craving-category {

        font-size: 1.5rem;
    }


    .bt-craving-price {

        font-size: 0.68rem;
    }


    .bt-craving-button {

        min-height: 42px;

        min-width: 110px;

        font-size: 0.64rem;
    }

}


/* =========================================================
   TOUCH
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .bt-craving-card:active {

        transform:
                scale(0.985);
    }


    .bt-craving-card:active
    .bt-craving-image img {

        transform:
                scale(1.035);
    }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes btCravingsTitleIn {

    from {

        opacity: 0;

        transform:
                translateY(25px);
    }

    to {

        opacity: 1;

        transform:
                translateY(0);
    }
}


@keyframes btCravingCardIn {

    from {

        opacity: 0;

        transform:
                translateY(45px);
    }

    to {

        opacity: 1;

        transform:
                translateY(0);
    }
}


@keyframes btCravingsFire {

    0%,
    100% {

        transform:
                translateY(0)
                rotate(-2deg)
                scale(1);
    }

    50% {

        transform:
                translateY(-3px)
                rotate(2deg)
                scale(1.08);
    }
}


@keyframes btCravingsAmbient {

    0%,
    100% {

        opacity: 0.65;

        transform:
                translateX(-50%)
                scale(1);
    }

    50% {

        opacity: 1;

        transform:
                translateX(-50%)
                scale(1.08);
    }
}


@keyframes btCravingLightSweep {

    0% {

        transform:
                rotate(18deg)
                translateX(-180%);
    }

    100% {

        transform:
                rotate(18deg)
                translateX(520%);
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bt-cravings-section::before,
    .bt-cravings-title,
    .bt-cravings-fire,
    .bt-craving-card,
    .bt-craving-image::before {

        animation: none !important;
    }


    .bt-craving-card,
    .bt-craving-image img,
    .bt-craving-category,
    .bt-craving-price,
    .bt-craving-button {

        transition: none !important;
    }

}

/* =========================================================
   FLAME ANIMATIONS
========================================================= */

@keyframes btCravingFlameMove {

    0% {

        transform:
                translateY(3px)
                translateX(-2px)
                rotate(-5deg)
                scale(1);
    }

    50% {

        transform:
                translateY(-7px)
                translateX(8px)
                rotate(-1deg)
                scale(1.04);
    }

    100% {

        transform:
                translateY(2px)
                translateX(15px)
                rotate(4deg)
                scale(0.98);
    }
}


@keyframes btCravingFlameMoveSecondary {

    0% {

        transform:
                translateY(2px)
                translateX(0)
                rotate(7deg)
                scale(1);
    }

    50% {

        transform:
                translateY(-9px)
                translateX(9px)
                rotate(12deg)
                scale(1.06);
    }

    100% {

        transform:
                translateY(1px)
                translateX(17px)
                rotate(4deg)
                scale(0.97);
    }
}

/* =========================================================
   PLAN PERFECTO - CARRUSEL
   ========================================================= */

#plan-perfecto {
    position: relative;
    overflow: hidden;
    background: #000;
    padding: 50px 0 90px;
}

/* Área visible del carrusel */

.bt-plan-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0 45px;
}

/* Track */

.bt-plan-track {
    display: flex;
    align-items: center;
    gap: 46px;
    width: max-content;

    transform: translate3d(0, 0, 0);

    transition:
            transform 950ms cubic-bezier(.22, .61, .36, 1);

    will-change: transform;
}

.bt-plan-track.no-transition {
    transition: none !important;
}

/* =========================================================
   EL PLAN PERFECTO — HEADER
========================================================= */

.bt-plan-header {
    position: relative;

    width: 100%;
    min-height: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 55px 24px;

    text-align: center;

    background-color: #000;

    background-image: url("/burgertown/assets/img/public/title-bg.webp");
    background-repeat: no-repeat;

    /* Imagen mucho más pequeña */
    background-size: 420px auto;
    background-position: center center;

    overflow: hidden;
}


/* =========================================================
   OVERLAY MUY SUTIL
========================================================= */

.bt-plan-header::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
            radial-gradient(
                    circle at center,
                    rgba(0, 0, 0, 0.05),
                    rgba(0, 0, 0, 0.65) 75%
            );

    pointer-events: none;
}


/* =========================================================
   EYEBROW
========================================================= */

.bt-plan-eyebrow {
    position: relative;
    z-index: 2;

    margin-bottom: 14px;

    font-size: .85rem;
    font-weight: 800;

    letter-spacing: 0.28em;
    text-transform: uppercase;

    color: #ffffff;
}


/* =========================================================
   TITLE
========================================================= */

.bt-plan-title {
    position: relative;
    z-index: 2;

    margin: 0;

    max-width: 900px;

    font-size: clamp(42px, 6vw, 45px);
    line-height: 0.95;

    font-weight: 900;

    letter-spacing: -0.045em;

    color: #ffffff;

    text-shadow:
            0 4px 20px rgba(0, 0, 0, 0.55);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.bt-plan-description {
    position: relative;
    z-index: 2;

    max-width: 600px;

    margin: 20px auto 0;

    font-size: 1rem;
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .bt-plan-header {
        min-height: 240px;

        background-size: 360px auto;
    }

    .bt-plan-title {
        font-size: 2rem;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .bt-plan-header {
        min-height: 220px;

        padding: 50px 20px;

        background-size: 280px auto;
    }

    .bt-plan-eyebrow {
        font-size: 10px;
    }

    .bt-plan-title {
        font-size: 2rem;
    }

    .bt-plan-description {
        max-width: 90%;

        margin-top: 16px;

        font-size: 14px;
    }
}

/* =========================================================
   SLIDES
   ========================================================= */

.bt-plan-slide {
    position: relative;

    flex: 0 0 340px;

    width: 285px;
    height: 500px;

    border-radius: 22px;

    overflow: hidden;

    opacity: .35;

    transform:
            scale(.82);

    filter:
            brightness(.48)
            saturate(.75);

    cursor: pointer;

    border: 1px solid rgba(255, 255, 255, .08);

    transition:
            transform 900ms cubic-bezier(.22, .61, .36, 1),
            opacity 900ms ease,
            filter 900ms ease,
            border-color 900ms ease,
            box-shadow 900ms ease;
}

/* Imagen */

.bt-plan-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
            transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

/* =========================================================
   IMAGEN CENTRAL / ACTIVA
   ========================================================= */

.bt-plan-slide.is-active {
    transform:
            scale(1);

    opacity: 1;

    filter:
            brightness(1)
            saturate(1);

    border-color:
            rgba(214, 31, 31, .75);

    box-shadow:
            0 0 0 1px rgba(214, 31, 31, .25),
            0 20px 60px rgba(0, 0, 0, .55);
}

.bt-plan-slide.is-active img {
    transform: scale(1.015);
}

/* Hover */

@media (hover: hover) and (pointer: fine) {

    .bt-plan-slide:not(.is-active):hover {
        opacity: .7;

        filter:
                brightness(.7)
                saturate(.9);

        transform:
                scale(.87);
    }

    .bt-plan-slide.is-active:hover img {
        transform: scale(1.045);
    }

}

/* =========================================================
   OSCURECIMIENTO LATERAL
   ========================================================= */

.bt-plan-slide::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, .05),
                    rgba(0, 0, 0, .35)
            );

    pointer-events: none;

    transition:
            opacity 700ms ease;
}

.bt-plan-slide.is-active::after {
    opacity: .15;
}

/* =========================================================
   FLECHAS
   ========================================================= */

.bt-plan-prev,
.bt-plan-next {
    position: absolute;

    top: 50%;
    z-index: 10;

    width: 50px;
    height: 50px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: rgba(0, 0, 0, .72);

    color: #fff;

    font-size: 25px;

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition:
            background .3s ease,
            transform .3s ease,
            opacity .3s ease;
}

.bt-plan-prev {
    left: 10.5%;
}

.bt-plan-next {
    right: 10.5%;
}

.bt-plan-prev:hover,
.bt-plan-next:hover {
    background: #d61f1f;

    transform:
            translateY(-50%)
            scale(1.08);
}

/* =========================================================
   DOTS
   ========================================================= */

.bt-plan-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 8px;
}

.bt-plan-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, .25);

    cursor: pointer;

    transition:
            width .45s ease,
            background .45s ease,
            border-radius .45s ease;
}

.bt-plan-dot.is-active {
    width: 28px;

    border-radius: 20px;

    background: #d61f1f;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .bt-plan-slide {
        flex-basis: 260px;
        width: 260px;
        height: 390px;
    }

    .bt-plan-track {
        gap: 32px;
    }

    .bt-plan-prev {
        left: 5%;
    }

    .bt-plan-next {
        right: 5%;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #plan-perfecto {
        padding: 75px 0 65px;
    }

    .bt-plan-viewport {
        padding: 10px 0 35px;
    }

    .bt-plan-track {
        gap: 18px;
    }

    .bt-plan-slide {
        flex-basis: 220px;

        width: 220px;
        height: 330px;

        border-radius: 18px;

        transform: scale(.82);
    }

    .bt-plan-slide.is-active {
        transform: scale(1);
    }

    .bt-plan-prev,
    .bt-plan-next {
        width: 42px;
        height: 42px;

        font-size: 20px;
    }

    .bt-plan-prev {
        left: 15px;
    }

    .bt-plan-next {
        right: 15px;
    }

}


/* =========================================================
   BURGER TOWN
   MÉTRICAS
========================================================= */

.bt-metrics {
    position: relative;

    width: 100%;

    background: #f4efe5;

    overflow: hidden;
}


/* =========================================================
   CONTENEDOR
========================================================= */

.bt-metrics-inner {
    width: min(1440px, calc(100% - 72px));

    margin: 0 auto;

    padding: 85px 0 95px;
}


/* =========================================================
   HEADER
========================================================= */

.bt-metrics-header {
    display: flex;

    justify-content: center;

    margin-bottom: 58px;
}

.bt-metrics-title {
    max-width: 1400px;

    margin: 0;

    text-align: center;

    font-size: clamp(42px, 6vw, 45px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -0.045em;

    color: #080808;
}


/* =========================================================
   GRID
========================================================= */

.bt-metrics-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
========================================================= */

.bt-metric-card {
    position: relative;

    min-height: 250px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 34px 28px;

    text-align: center;

    background: rgba(255, 255, 255, 0.48);

    border: 1px solid rgba(8, 8, 8, 0.12);

    border-radius: 22px;

    box-shadow:
            0 8px 24px rgba(20, 15, 10, 0.025);

    transition:
            transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease,
            background .3s ease;

    cursor: pointer;
}


/* =========================================================
   ICONO
========================================================= */

.bt-metric-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 14px;

    background: rgba(180, 0, 0, 0.09);

    color: var(--bt-red);;

    font-size: 19px;

    transition:
            transform .3s ease,
            background .3s ease,
            color .3s ease;
}


/* =========================================================
   NÚMERO
========================================================= */

.bt-metric-number {
    margin: 0;

    font-size: clamp(48px, 4vw, 62px);

    line-height: .9;

    font-weight: 900;

    letter-spacing: -0.06em;

    color: #080808;

    white-space: nowrap;
}

.bt-metric-number span {
    font-size: .58em;

    margin-left: 2px;
}


/* =========================================================
   LABEL
========================================================= */

.bt-metric-label {
    max-width: 210px;

    margin-top: 13px;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;

    color: rgba(8, 8, 8, .58);
}


/* =========================================================
   HOVER PREMIUM
========================================================= */

.bt-metric-card {
    overflow: hidden;

    transition:
            transform .45s cubic-bezier(.22, 1, .36, 1),
            background .45s ease,
            border-color .45s ease,
            box-shadow .45s ease;
}


/* Brillo interno */

.bt-metric-card::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -120px;
    right: -100px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(255, 70, 70, .28) 0%,
                    rgba(180, 0, 0, .12) 35%,
                    transparent 70%
            );

    opacity: 0;

    transform: scale(.7);

    transition:
            opacity .5s ease,
            transform .6s cubic-bezier(.22, 1, .36, 1);

    pointer-events: none;
}


/* Línea/brillo inferior */

.bt-metric-card::after {
    content: "";

    position: absolute;

    left: 12%;
    right: 12%;
    bottom: 0;

    height: 3px;

    border-radius: 10px;

    background: #ffffff;

    transform:
            scaleX(0);

    transform-origin: center;

    transition:
            transform .45s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   ACTIVACIÓN
========================================================= */

.bt-metric-card:hover {

    transform:
            translateY(-10px)
            rotateX(2deg)
            rotateY(-1deg);

    background:
            linear-gradient(
                    145deg,
                    #c41414 0%,
                    #a90000 55%,
                    #870000 100%
            );

    border-color:
            rgba(255, 255, 255, .18);

    box-shadow:
            0 25px 55px rgba(125, 0, 0, .28),
            0 8px 20px rgba(0, 0, 0, .12);
}


/* Activar brillo */

.bt-metric-card:hover::before {
    opacity: 1;

    transform: scale(1.15);
}


/* Activar línea */

.bt-metric-card:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   CONTENIDO
========================================================= */

.bt-metric-card .bt-metric-icon,
.bt-metric-card .bt-metric-number,
.bt-metric-card .bt-metric-label {
    position: relative;

    z-index: 2;

    transition:
            color .35s ease,
            transform .45s cubic-bezier(.22, 1, .36, 1);
}


/* Icono */

.bt-metric-card:hover .bt-metric-icon {

    transform:
            translateY(-4px)
            rotate(-6deg);

    background: rgba(255, 255, 255, .18);

    color: #ffffff;

    box-shadow:
            0 8px 20px rgba(0, 0, 0, .12);
}


/* Número */

.bt-metric-card:hover .bt-metric-number {

    transform:
            translateY(-3px);

    color: #ffffff;
}


/* Texto */

.bt-metric-card:hover .bt-metric-label {

    transform:
            translateY(-2px);

    color:
            rgba(255, 255, 255, .82);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .bt-metrics-inner {
        width: min(100% - 48px, 900px);
    }

    .bt-metrics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .bt-metric-card {
        min-height: 230px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .bt-metrics-inner {
        width: calc(100% - 32px);

        padding: 65px 0 70px;
    }

    .bt-metrics-header {
        margin-bottom: 38px;
    }

    .bt-metrics-title {
        font-size: 34px;

        line-height: 1.02;
    }

    .bt-metrics-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .bt-metric-card {
        min-height: 215px;

        padding: 30px 20px;

        border-radius: 20px;
    }

    .bt-metric-number {
        font-size: 52px;
    }
}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 400px) {

    .bt-metrics-inner {
        width: calc(100% - 24px);
    }

    .bt-metrics-title {
        font-size: 30px;
    }

    .bt-metric-card {
        min-height: 205px;
    }
}

/* =========================================================
   BURGER TOWN
   SEDES
========================================================= */

.bt-locations {
    position: relative;

    width: 100%;

    background:
            radial-gradient(
                    circle at 50% 15%,
                    rgba(180, 0, 0, .12),
                    transparent 35%
            ),
            #050505;

    color: #fff;

    overflow: hidden;
}


/* =========================================================
   DECORACIÓN DE FONDO
========================================================= */

.bt-locations::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -350px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(180, 0, 0, .16),
                    transparent 68%
            );

    pointer-events: none;
}

.bt-locations::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    90deg,
                    rgba(255,255,255,.018) 1px,
                    transparent 1px
            );

    background-size: 80px 80px;

    opacity: .25;

    pointer-events: none;
}


/* =========================================================
   CONTENEDOR
========================================================= */

.bt-locations-inner {
    position: relative;

    z-index: 2;

    width: min(
            1480px,
            calc(100% - 80px)
    );

    margin: 0 auto;

    padding: 105px 0 80px;
}


/* =========================================================
   HEADER
========================================================= */

.bt-locations-header {
    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    margin-bottom: 55px;
}


/* =========================================================
   EYEBROW
========================================================= */

.bt-locations-eyebrow {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    font-size: .85rem;

    font-weight: 800;

    letter-spacing: .26em;

    text-transform: uppercase;

    color: rgba(255,255,255,.72);
}

.bt-locations-eyebrow::before,
.bt-locations-eyebrow::after {
    content: "";

    width: 24px;
    height: 1px;

    background: #b40000;
}


/* =========================================================
   TÍTULO
========================================================= */

.bt-locations-title {
    margin: 0;

    font-size: clamp(42px, 6vw, 45px);

    line-height: .9;

    font-weight: 900;

    letter-spacing: -.055em;

    color: #fff;
}

.bt-locations-title span {
    color: #b40000;

    text-shadow:
            0 0 35px rgba(180,0,0,.18);
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.bt-locations-description {
    max-width: 560px;

    margin: 22px auto 0;

    font-size: 1rem;

    line-height: 1.6;

    color: rgba(255,255,255,.58);
}


/* =========================================================
   VIEWPORT
========================================================= */

.bt-locations-viewport {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 20px 0;
}


/* =========================================================
   TRACK
========================================================= */

.bt-locations-track {
    display: flex;

    gap: 16px;

    width: 100%;

    transition:
            transform .75s cubic-bezier(.22,1,.36,1);

    will-change: transform;
}


/* =========================================================
   CARD
========================================================= */

.bt-location-card {
    position: relative;

    flex: 0 0 calc(
            (100% - 48px) / 4
    );

    height: 500px;

    overflow: hidden;

    border-radius: 20px;

    background: #111;

    cursor: pointer;

    transform: translateZ(0);

    transition:
            transform .6s cubic-bezier(.22,1,.36,1),
            box-shadow .6s ease;
}


/* =========================================================
   IMAGEN
========================================================= */

.bt-location-image {
    position: absolute;

    inset: 0;

    overflow: hidden;
}

.bt-location-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform:
            scale(1.01);

    transition:
            transform 1.1s cubic-bezier(.22,1,.36,1),
            filter 1s ease;
}


/* =========================================================
   OVERLAY
========================================================= */

.bt-location-overlay {
    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    to bottom,
                    rgba(0,0,0,.05) 10%,
                    rgba(0,0,0,.15) 35%,
                    rgba(0,0,0,.88) 100%
            );

    transition:
            background .7s ease;
}


/* =========================================================
   ROJO DINÁMICO
========================================================= */

.bt-location-card::before {
    content: "";

    position: absolute;

    z-index: 1;

    width: 320px;
    height: 320px;

    right: -180px;
    top: -180px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(220,0,0,.65),
                    rgba(180,0,0,.18) 45%,
                    transparent 70%
            );

    opacity: 0;

    transform: scale(.5);

    transition:
            opacity .7s ease,
            transform .8s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   CONTENIDO
========================================================= */

.bt-location-content {
    position: absolute;

    z-index: 3;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 34px 30px;

    transform:
            translateY(14px);

    transition:
            transform .6s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   NÚMERO
========================================================= */

.bt-location-number {
    display: block;

    margin-bottom: 13px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .18em;

    color: #e00000;

    opacity: .9;
}


/* =========================================================
   NOMBRE
========================================================= */

.bt-location-name {
    margin: 0;

    font-size: clamp(
            25px,
            2vw,
            34px
    );

    line-height: .95;

    font-weight: 800;

    letter-spacing: -.035em;

    color: #fff;
}

.bt-location-name strong {
    display: block;

    color: #fff;

    font-weight: 900;
}


/* =========================================================
   DIRECCIÓN
========================================================= */

.bt-location-address {
    max-width: 250px;

    margin: 15px 0 22px;

    font-size: 12px;

    line-height: 1.5;

    color: rgba(255,255,255,.68);
}


/* =========================================================
   BOTÓN
========================================================= */

.bt-location-button {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    border-radius: 100px;

    background: #d00000;

    color: #fff;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .05em;

    text-decoration: none;

    box-shadow:
            0 8px 20px rgba(180,0,0,.25);

    transition:
            background .3s ease,
            transform .3s ease,
            box-shadow .3s ease,
            gap .3s ease;
}

.bt-location-button i {
    font-size: 10px;

    transition:
            transform .3s ease;
}


/* =========================================================
   HOVER CARD
========================================================= */

.bt-location-card:hover {

    transform:
            translateY(-10px)
            scale(1.015);

    box-shadow:
            0 30px 70px rgba(0,0,0,.55),
            0 0 0 1px rgba(210,0,0,.25);
}


/* =========================================================
   HOVER IMAGEN
========================================================= */

.bt-location-card:hover
.bt-location-image img {

    transform:
            scale(1.12);

    filter:
            saturate(1.15)
            contrast(1.06)
            brightness(.82);
}


/* =========================================================
   HOVER OVERLAY
========================================================= */

.bt-location-card:hover
.bt-location-overlay {

    background:
            linear-gradient(
                    to bottom,
                    rgba(180,0,0,.08) 0%,
                    rgba(0,0,0,.18) 35%,
                    rgba(0,0,0,.94) 100%
            );
}


/* =========================================================
   HOVER ROJO
========================================================= */

.bt-location-card:hover::before {

    opacity: 1;

    transform:
            scale(1.2);
}


/* =========================================================
   HOVER CONTENIDO
========================================================= */

.bt-location-card:hover
.bt-location-content {

    transform:
            translateY(0);
}


/* =========================================================
   HOVER NÚMERO
========================================================= */

.bt-location-card:hover
.bt-location-number {

    color: #ff3030;
}


/* =========================================================
   HOVER BOTÓN
========================================================= */

.bt-location-button:hover {

    background: #fff;

    color: #b40000;

    transform:
            translateY(-3px);

    box-shadow:
            0 12px 30px rgba(0,0,0,.35);

    gap: 14px;
}

.bt-location-button:hover i {

    transform:
            translateX(3px);
}


/* =========================================================
   CONTROLES
========================================================= */

.bt-locations-controls {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 24px;

    margin-top: 34px;
}

.bt-location-arrow {

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255,255,255,.2);

    border-radius: 50%;

    background: rgba(255,255,255,.03);

    color: #fff;

    cursor: pointer;

    transition:
            background .3s ease,
            border-color .3s ease,
            transform .3s ease;
}

.bt-location-arrow:hover {

    background: #b40000;

    border-color: #b40000;

    transform:
            scale(1.1);
}


/* =========================================================
   DOTS
========================================================= */

.bt-location-dots {

    display: flex;

    align-items: center;

    gap: 7px;
}

.bt-location-dot {

    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.3);

    cursor: pointer;

    transition:
            width .3s ease,
            background .3s ease;
}

.bt-location-dot.is-active {

    width: 25px;

    background: #d00000;

    border-radius: 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .bt-locations-inner {
        width: calc(100% - 48px);

        padding-top: 85px;
    }

    .bt-locations-track {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }

    .bt-location-card {
        flex: 0 0 calc(
                (100% - 16px) / 2
        );

        height: 460px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .bt-locations-inner {

        width: calc(100% - 28px);

        padding:
                70px 0
                55px;
    }

    .bt-locations-header {
        margin-bottom: 35px;
    }

    .bt-locations-title {

        font-size: 48px;
    }

    .bt-locations-description {

        max-width: 330px;

        font-size: 13px;
    }

    .bt-location-track {
        gap: 14px;
    }

    .bt-location-card {
        flex: 0 0 min(82vw, 330px);

        height: 430px;
    }

    .bt-location-content {

        padding: 27px 23px;
    }

    .bt-location-name {

        font-size: 27px;
    }

    .bt-locations-controls {

        margin-top: 25px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bt-location-card,
    .bt-location-image img,
    .bt-location-content,
    .bt-location-button,
    .bt-location-card::before {

        transition: none !important;
    }
}

/* =========================================================
   BURGER TOWN
   PREGUNTAS FRECUENTES
========================================================= */

.bt-faq {
    position: relative;

    width: 100%;

    color: #fff;

    overflow: hidden;

    background:
            var(--bt-red)
}


/* =========================================================
   TEXTURA
========================================================= */

.bt-faq::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    90deg,
                    rgba(255,255,255,.035) 1px,
                    transparent 1px
            );

    background-size: 90px 90px;

    opacity: .18;

    pointer-events: none;
}


/* =========================================================
   DECORACIÓN
========================================================= */

.bt-faq::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    top: -420px;
    right: -180px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(255,255,255,.12),
                    transparent 68%
            );

    pointer-events: none;
}


/* =========================================================
   CONTENEDOR
========================================================= */

.bt-faq-inner {
    position: relative;

    z-index: 2;

    width: min(
            1230px,
            calc(100% - 60px)
    );

    margin: 0 auto;

    padding: 90px 0 90px;
}


/* =========================================================
   HEADER
========================================================= */

.bt-faq-header {
    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    margin-bottom: 65px;
}


/* =========================================================
   EYEBROW
========================================================= */

.bt-faq-eyebrow {
    margin-bottom: 16px;

    font-size: .85rem;

    font-weight: 900;

    letter-spacing: .3em;

    text-transform: uppercase;

    color: rgba(255,255,255,.72);
}


/* =========================================================
   TITLE
========================================================= */

.bt-faq-title {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin: 0;

    font-size: clamp(42px, 6vw, 45px);

    line-height: .92;

    font-weight: 900;

    letter-spacing: -.055em;

    color: #fff;
}

.bt-faq-title span {
    font-size: .55em;

    filter:
            drop-shadow(
                    0 4px 8px rgba(0,0,0,.18)
            );
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.bt-faq-description {
    max-width: 530px;

    margin: 22px auto 0;

    font-size: 1rem;

    line-height: 1.6;

    color: rgba(255,255,255,.72);
}


/* =========================================================
   LISTA
========================================================= */

.bt-faq-list {
    border-top:
            1px solid rgba(255,255,255,.22);
}


/* =========================================================
   ITEM
========================================================= */

.bt-faq-item {
    position: relative;

    border-bottom:
            1px solid rgba(255,255,255,.22);

    overflow: hidden;

    transition:
            background .45s ease;

    padding: 0 20px;
}


/* =========================================================
   ITEM ABIERTO
========================================================= */

.bt-faq-item.is-open {
    background:
            rgba(255,255,255,.055);
}


/* =========================================================
   PREGUNTA
========================================================= */

.bt-faq-question {
    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 20px 5px;

    border: 0;

    background: transparent;

    color: #fff;

    text-align: left;

    cursor: pointer;
}


/* =========================================================
   PARTE IZQUIERDA
========================================================= */

.bt-faq-question-left {
    display: flex;

    align-items: center;

    gap: 28px;

    min-width: 0;
}


/* =========================================================
   NÚMERO
========================================================= */

.bt-faq-number {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
            1px solid rgba(255,255,255,.3);

    border-radius: 50%;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .05em;

    color: rgba(255,255,255,.72);

    transition:
            background .4s ease,
            border-color .4s ease,
            color .4s ease,
            transform .5s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   TEXTO
========================================================= */

.bt-faq-question-text {
    font-size: clamp(
            19px,
            2vw,
            27px
    );

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.025em;

    transition:
            transform .5s cubic-bezier(.22,1,.36,1),
            color .35s ease;
}


/* =========================================================
   ICONO
========================================================= */

.bt-faq-icon {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
            1px solid rgba(255,255,255,.28);

    border-radius: 50%;

    transition:
            background .4s ease,
            border-color .4s ease,
            transform .55s cubic-bezier(.22,1,.36,1);
}

.bt-faq-icon i {
    font-size: 12px;

    transition:
            transform .55s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   RESPUESTA
========================================================= */

.bt-faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
            grid-template-rows
            .65s cubic-bezier(.22,1,.36,1);
}

.bt-faq-answer-inner {
    min-height: 0;

    overflow: hidden;

    opacity: 0;

    transform:
            translateY(-12px);

    transition:
            opacity .35s ease,
            transform .55s cubic-bezier(.22,1,.36,1);
}

.bt-faq-answer p {
    max-width: 900px;

    margin: 0;

    padding:
            0 82px 30px;

    font-size: 14px;

    line-height: 1.75;

    color: rgba(255,255,255,.76);
}


/* =========================================================
   ABIERTO
========================================================= */

.bt-faq-item.is-open
.bt-faq-answer {
    grid-template-rows: 1fr;
}

.bt-faq-item.is-open
.bt-faq-answer-inner {
    opacity: 1;

    transform:
            translateY(0);
}


/* =========================================================
   ICONO ABIERTO
========================================================= */

.bt-faq-item.is-open
.bt-faq-icon {
    background: #fff;

    border-color: #fff;

    color: #b40000;

    transform:
            rotate(180deg);
}

.bt-faq-item.is-open
.bt-faq-icon i {
    transform:
            rotate(45deg);
}


/* =========================================================
   NÚMERO ABIERTO
========================================================= */

.bt-faq-item.is-open
.bt-faq-number {
    background: #fff;

    border-color: #fff;

    color: #b40000;

    transform:
            scale(1.08);
}


/* =========================================================
   HOVER
========================================================= */

.bt-faq-question:hover
.bt-faq-question-text {
    transform:
            translateX(6px);
}

.bt-faq-question:hover
.bt-faq-number {
    border-color: #fff;

    color: #fff;

    transform:
            scale(1.06);
}

/* =========================================================
   FAQ ABIERTO + HOVER
   Mantener número rojo sobre fondo blanco
========================================================= */

.bt-faq-item.is-open
.bt-faq-question:hover
.bt-faq-number {
    background: #fff;

    border-color: #fff;

    color: #b40000;

    transform: scale(1.08);
}

.bt-faq-question:hover
.bt-faq-icon {
    border-color: #fff;

    transform:
            scale(1.08);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .bt-faq-inner {
        width: calc(100% - 42px);

        padding:
                85px 0
                90px;
    }

    .bt-faq-header {
        margin-bottom: 50px;
    }

    .bt-faq-question-left {
        gap: 20px;
    }

    .bt-faq-answer p {
        padding-left: 62px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .bt-faq-inner {
        width: calc(100% - 28px);

        padding:
                70px 0
                75px;
    }

    .bt-faq-header {
        margin-bottom: 40px;
    }

    .bt-faq-title {
        gap: 8px;

        font-size: 40px;

        line-height: .95;
    }

    .bt-faq-description {
        max-width: 330px;

        font-size: 13px;
    }

    .bt-faq-question {
        gap: 15px;

        padding: 22px 4px;
    }

    .bt-faq-question-left {
        gap: 14px;
    }

    .bt-faq-number {
        width: 34px;
        height: 34px;

        font-size: 9px;
    }

    .bt-faq-question-text {
        font-size: 17px;
    }

    .bt-faq-icon {
        width: 34px;
        height: 34px;
    }

    .bt-faq-answer p {
        padding:
                0 48px 25px;

        font-size: 13px;
    }
}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 400px) {

    .bt-faq-title {
        font-size: 34px;
    }

    .bt-faq-question-text {
        font-size: 15px;
    }

    .bt-faq-answer p {
        padding-left: 48px;
    }
}


/* =========================================================
   REDUCIR MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bt-faq *,
    .bt-faq *::before,
    .bt-faq *::after {
        transition: none !important;
    }
}

/* =========================================================
   SEDE SIN IMAGEN
========================================================= */

.bt-location-image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
            linear-gradient(
                    135deg,
                    #171717,
                    #2a2a2a
            );

    color: rgba(255, 255, 255, .35);

    font-size: 3rem;
}

/* ============================================================
   HERO RESERVAS - SEDE SELECCIONADA
============================================================ */

.reservation-hero .hero-content {
    display: grid;

    grid-template-columns:
        minmax(300px, 430px)
        minmax(0, 1fr);

    align-items: center;

    gap: 55px;
}


/* ============================================================
   IMAGEN
============================================================ */

.reservation-hero-image-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 24px;

    border: 1px solid rgba(255,255,255,.13);

    background:
            rgba(255,255,255,.04);

    box-shadow:
            0 25px 70px rgba(0,0,0,.35);
}


.reservation-hero-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.reservation-hero-image-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
            linear-gradient(
                    135deg,
                    #18181b,
                    #27272a
            );

    color:
            rgba(255,255,255,.25);

    font-size: 4rem;
}


/* ============================================================
   INFORMACIÓN
============================================================ */

.reservation-hero-info {
    min-width: 0;
}


.reservation-hero .hero-title {
    max-width: 760px;

    margin:
            22px 0 18px;

    font-size: clamp(42px, 6vw, 45px);
    line-height:
            .98;

    letter-spacing:
            -.045em;

    text-wrap:
            balance;
}


.reservation-hero .hero-description {
    max-width: 700px;

    margin-bottom: 26px;

    font-size: .98rem;
}


/* ============================================================
   DATOS DE CONTACTO
============================================================ */

.reservation-hero-contact {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;

    max-width: 820px;
}


.reservation-hero-contact-item {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    padding: 12px;

    border:
            1px solid
            rgba(255,255,255,.10);

    border-radius: 14px;

    background:
            rgba(255,255,255,.045);

    backdrop-filter:
            blur(10px);
}


.reservation-hero-contact-icon {
    flex:
            0 0 34px;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
            rgba(124,58,237,.16);

    color:
            #c4b5fd;

    font-size: .72rem;
}


.reservation-hero-contact-item > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.reservation-hero-contact-item span {
    color:
            rgba(255,255,255,.48);

    font-size: .62rem;

    font-weight: 700;

    text-transform:
            uppercase;

    letter-spacing:
            .08em;
}


.reservation-hero-contact-item strong {
    display: block;

    overflow: hidden;

    color: #fff;

    font-size: .74rem;

    font-weight: 700;

    line-height: 1.35;

    text-overflow: ellipsis;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .reservation-hero .hero-content {

        grid-template-columns:
            280px
            minmax(0, 1fr);

        gap: 30px;

    }


    .reservation-hero-contact {

        grid-template-columns:
            1fr;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .reservation-hero .hero-content {

        display:
                flex;

        flex-direction:
                column;

        align-items:
                stretch;

        gap:
                24px;

        padding:
                55px 0 65px;

    }


    .reservation-hero-image-wrapper {

        max-width:
                100%;

        aspect-ratio:
                16 / 10;

    }


    .reservation-hero .hero-title {

        margin-top:
                18px;

        font-size:
                2.4rem;

    }


    .reservation-hero .hero-description {

        font-size:
                .9rem;

    }


    .reservation-hero-contact {

        grid-template-columns:
            1fr;

    }

}

/* ============================================================
   HERO RESERVAS
   FAVORITA COMO FONDO + MINIATURAS
============================================================ */

.reservation-hero {
    position: relative;

    min-height:
            520px;

    overflow:
            hidden;

    isolation:
            isolate;

    background:
            #111;
}


/* ============================================================
   FONDO
============================================================ */

.reservation-hero-background {
    position:
            absolute;

    inset:
            0;

    z-index:
            -2;

    overflow:
            hidden;
}


.reservation-hero-background-image {
    width:
            100%;

    height:
            100%;

    display:
            block;

    object-fit:
            cover;

    object-position:
            center;
}


.reservation-hero-background-overlay {
    position:
            absolute;

    inset:
            0;

    background:
            linear-gradient(
                    90deg,
                    rgba(0,0,0,.88) 0%,
                    rgba(0,0,0,.68) 42%,
                    rgba(0,0,0,.32) 100%
            );

    z-index:
            1;
}


.reservation-hero-background-placeholder {
    width:
            100%;

    height:
            100%;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    background:
            linear-gradient(
                    135deg,
                    #171717,
                    #292929
            );

    color:
            rgba(255,255,255,.22);

    font-size:
            5rem;
}


/* ============================================================
   CONTENIDO
============================================================ */

.reservation-hero .hero-content {
    display:
            flex;

    align-items:
            center;

    min-height:
            520px;

    padding:
            70px 0 95px;
}


.reservation-hero-content-inner {
    width:
            100%;

    max-width:
            1180px;

    margin:
            0 auto;

    padding:
            0 30px;
}


/* ============================================================
   TEXTO
============================================================ */

.reservation-hero .hero-description {
    max-width:
            680px;

    margin-bottom:
            28px;

    color:
            rgba(255,255,255,.78);

    font-size:
            1rem;

    line-height:
            1.6;
}


/* ============================================================
   CONTACTO
============================================================ */

.reservation-hero-contact {
    display:
            grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                    0,
                    1fr
            )
        );

    gap:
            10px;

    max-width:
            950px;
}


.reservation-hero-contact-item {
    display:
            flex;

    align-items:
            center;

    gap:
            10px;

    min-width:
            0;

    padding:
            12px 13px;

    border:
            1px solid
            rgba(255,255,255,.12);

    border-radius:
            14px;

    background:
            rgba(0,0,0,.24);

    backdrop-filter:
            blur(12px);
}


.reservation-hero-contact-icon {
    width:
            36px;

    height:
            36px;

    flex:
            0 0 36px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    border-radius:
            10px;

    background:
            rgba(255,255,255,.10);

    color:
            #fff;
}


.reservation-hero-contact-item > div:last-child {
    min-width:
            0;

    display:
            flex;

    flex-direction:
            column;

    gap:
            3px;
}


.reservation-hero-contact-item span {
    color:
            rgba(255,255,255,.48);

    font-size:
            .61rem;

    font-weight:
            800;

    text-transform:
            uppercase;

    letter-spacing:
            .08em;
}


.reservation-hero-contact-item strong {
    display:
            block;

    overflow:
            hidden;

    color:
            #fff;

    font-size:
            .76rem;

    line-height:
            1.35;

    white-space:
            nowrap;

    text-overflow:
            ellipsis;
}


/* ============================================================
   GALERÍA
============================================================ */

.reservation-hero-gallery {
    display:
            flex;

    align-items:
            center;

    gap:
            10px;

    width:
            fit-content;

    max-width:
            100%;

    margin-top:
            22px;
}


.reservation-hero-thumbnails {
    display:
            flex;

    align-items:
            center;

    gap:
            8px;

    max-width:
            calc(
                    100vw - 130px
            );

    overflow-x:
            auto;

    padding:
            4px;

    scrollbar-width:
            thin;
}


.reservation-hero-thumbnail {
    position:
            relative;

    width:
            82px;

    height:
            58px;

    flex:
            0 0 82px;

    padding:
            0;

    border:
            2px solid
            rgba(255,255,255,.18);

    border-radius:
            10px;

    overflow:
            hidden;

    background:
            rgba(0,0,0,.3);

    cursor:
            pointer;

    transition:
            .2s ease;
}


.reservation-hero-thumbnail:hover {
    transform:
            translateY(
                    -2px
            );

    border-color:
            rgba(255,255,255,.65);
}


.reservation-hero-thumbnail.is-active {
    border-color:
            #fff;

    box-shadow:
            0 0 0 2px
            rgba(255,255,255,.18);
}


.reservation-hero-thumbnail.is-favorite {
    border-color:
            rgba(
                    255,
                    207,
                    74,
                    .85
            );
}


.reservation-hero-thumbnail img {
    width:
            100%;

    height:
            100%;

    display:
            block;

    object-fit:
            cover;
}


.reservation-hero-thumbnail-star {
    position:
            absolute;

    top:
            4px;

    right:
            4px;

    width:
            19px;

    height:
            19px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    border-radius:
            50%;

    background:
            rgba(0,0,0,.68);

    color:
            #facc15;

    font-size:
            .55rem;
}


.reservation-hero-gallery-arrow {
    width:
            36px;

    height:
            36px;

    flex:
            0 0 36px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    border:
            1px solid
            rgba(255,255,255,.20);

    border-radius:
            50%;

    background:
            rgba(0,0,0,.25);

    color:
            #fff;

    cursor:
            pointer;

    backdrop-filter:
            blur(8px);

    transition:
            .2s ease;
}


.reservation-hero-gallery-arrow:hover {
    background:
            rgba(255,255,255,.12);

    border-color:
            rgba(255,255,255,.45);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .reservation-hero-contact {

        grid-template-columns:
            1fr;

        max-width:
                520px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .reservation-hero {

        min-height:
                650px;
    }


    .reservation-hero .hero-content {

        min-height:
                650px;

        padding:
                55px 0 80px;

        align-items:
                flex-end;
    }


    .reservation-hero-content-inner {

        padding:
                0 20px;
    }


    .reservation-hero .hero-title {

        font-size:
                2.7rem;
    }


    .reservation-hero-contact {

        grid-template-columns:
            1fr;
    }


    .reservation-hero-gallery {

        width:
                100%;
    }


    .reservation-hero-thumbnails {

        flex:
                1;

        max-width:
                none;
    }


    .reservation-hero-thumbnail {

        width:
                74px;

        flex-basis:
                74px;
    }

}


/* ============================================================
   BURGER TOWN
   CONSULTAR RESERVA
   RED / BLACK PREMIUM
============================================================ */


/* ============================================================
   PÁGINA
============================================================ */

.reservation-search-page {
    --search-red: var(--bt-red);
    --search-bg: #050505;
    --search-bg-soft: #0b0b0c;
    --search-card: rgba(10, 10, 11, .78);
    --search-border: rgba(255, 255, 255, .08);
    --search-text: #ffffff;
    --search-text-soft: rgba(255, 255, 255, .58);
    --search-text-muted: rgba(255, 255, 255, .36);

    min-height: 100vh;

    background:
            radial-gradient(
                    circle at 12% 5%,
                    color-mix(
                            in srgb,
                            var(--search-red) 10%,
                            transparent
                    ),
                    transparent 28%
            ),
            radial-gradient(
                    circle at 88% 8%,
                    color-mix(
                            in srgb,
                            var(--search-red) 7%,
                            transparent
                    ),
                    transparent 26%
            ),
            linear-gradient(
                    180deg,
                    #040404 0%,
                    #080808 48%,
                    #030303 100%
            );

    color: var(--search-text);
}


html:has(.reservation-search-page),
body:has(.reservation-search-page) {
    background: #040404;
}


body:has(.reservation-search-page) {
    margin: 0;
}


/* ============================================================
   HERO
============================================================ */

.reservation-search-hero {
    position: relative;

    padding: 160px 20px 65px;

    overflow: hidden;

    background:
            radial-gradient(
                    circle at 50% 0%,
                    color-mix(
                            in srgb,
                            var(--search-red) 11%,
                            transparent
                    ),
                    transparent 38%
            );
}


/* glow superior */

.reservation-search-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -340px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
            color-mix(
                    in srgb,
                    var(--search-red) 12%,
                    transparent
            );

    filter: blur(100px);

    pointer-events: none;
}


/* línea roja */

.reservation-search-hero::after {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;
    right: 10%;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    color-mix(
                            in srgb,
                            var(--search-red) 65%,
                            transparent
                    ),
                    transparent
            );

    box-shadow:
            0 0 18px color-mix(
                    in srgb,
                    var(--search-red) 20%,
                    transparent
            );
}


/* ============================================================
   WRAPPER
============================================================ */

.reservation-search-wrapper {
    position: relative;

    z-index: 2;

    max-width: 960px;

    margin: 0 auto;
}


/* ============================================================
   HEADER
============================================================ */

.reservation-search-heading {
    max-width: 760px;

    margin: 0 auto 42px;

    text-align: center;
}


/* eyebrow */

.reservation-search-eyebrow {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 8px 15px;

    margin-bottom: 18px;

    border: 1px solid
    color-mix(
            in srgb,
            var(--search-red) 28%,
            transparent
    );

    border-radius: 999px;

    background:
            color-mix(
                    in srgb,
                    var(--search-red) 8%,
                    transparent
            );

    color: var(--search-red);

    font-size: .69rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;

    box-shadow:
            0 0 20px color-mix(
                    in srgb,
                    var(--search-red) 7%,
                    transparent
            );
}


.reservation-search-eyebrow i {
    color: var(--search-red);
}


/* título */

.reservation-search-heading h1 {

    margin: 0 0 14px;

    color: #fff;

    font-size: clamp(42px, 6vw, 45px);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -.05em;
}


/* palabra destacada */

.reservation-search-heading h1 span {
    color: var(--search-red);
}


/* descripción */

.reservation-search-heading p {

    max-width: 650px;

    margin: 0 auto;

    color: var(--search-text-soft);

    font-size: .95rem;

    line-height: 1.75;
}


/* ============================================================
   SEARCH CARD
============================================================ */

.reservation-search-card {

    position: relative;

    padding: 34px;

    overflow: hidden;

    border: 1px solid var(--search-border);

    border-radius: 22px;

    background:
            linear-gradient(
                    145deg,
                    rgba(12, 12, 13, .82),
                    rgba(5, 5, 6, .72)
            );

    box-shadow:
            0 30px 80px rgba(0, 0, 0, .48),
            0 0 35px color-mix(
                    in srgb,
                    var(--search-red) 5%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, .035);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    transition:
            border-color .3s ease,
            box-shadow .3s ease,
            transform .3s ease;
}


/* línea superior */

.reservation-search-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 8%;
    right: 8%;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    color-mix(
                            in srgb,
                            var(--search-red) 70%,
                            transparent
                    ),
                    transparent
            );

    box-shadow:
            0 0 15px color-mix(
                    in srgb,
                    var(--search-red) 22%,
                    transparent
            );
}


/* glow */

.reservation-search-card::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -150px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
            color-mix(
                    in srgb,
                    var(--search-red) 7%,
                    transparent
            );

    filter: blur(60px);

    pointer-events: none;
}


.reservation-search-card:hover {

    transform: translateY(-2px);

    border-color:
            color-mix(
                    in srgb,
                    var(--search-red) 24%,
                    transparent
            );

    box-shadow:
            0 35px 90px rgba(0, 0, 0, .55),
            0 0 40px color-mix(
                    in srgb,
                    var(--search-red) 9%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, .045);
}


/* ============================================================
   LABELS
============================================================ */

.reservation-search-card .form-label {

    color: rgba(255, 255, 255, .78);

    font-size: .78rem;

    font-weight: 700;

    margin-bottom: 8px;
}


/* ============================================================
   INPUT CON ICONO
============================================================ */

.reservation-search-input {
    position: relative;
}


.reservation-search-input > i {

    position: absolute;

    left: 17px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    color: var(--search-red);

    font-size: .9rem;

    pointer-events: none;

    filter:
            drop-shadow(
                    0 0 7px
                    color-mix(
                            in srgb,
                            var(--search-red) 32%,
                            transparent
                    )
            );
}


/* ============================================================
   INPUT
============================================================ */

.reservation-search-input .form-control {

    height: 54px;

    padding:
            0 18px 0 48px;

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, .09);

    background:
            rgba(255, 255, 255, .035);

    color: #fff;

    font-size: .9rem;

    box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, .30);

    transition:
            border-color .25s ease,
            box-shadow .25s ease,
            background .25s ease;
}


.reservation-search-input .form-control::placeholder {
    color: rgba(255, 255, 255, .30);
}


.reservation-search-input .form-control:hover {

    border-color:
            rgba(255, 255, 255, .15);
}


.reservation-search-input .form-control:focus {

    background:
            rgba(255, 255, 255, .045);

    color: #fff;

    border-color: var(--search-red);

    box-shadow:
            0 0 0 4px color-mix(
                    in srgb,
                    var(--search-red) 9%,
                    transparent
            ),
            0 10px 30px rgba(0, 0, 0, .25),
            0 0 22px color-mix(
                    in srgb,
                    var(--search-red) 8%,
                    transparent
            );
}


/* ============================================================
   BOTÓN BUSCAR
============================================================ */

.reservation-search-actions {

    display: flex;

    justify-content: center;

    margin-top: 24px;
}


.reservation-search-button {

    min-width: 230px;

    height: 52px;

    padding: 0 26px;

    border: 0;

    border-radius: 12px;

    background:
            linear-gradient(
                    135deg,
                    color-mix(
                            in srgb,
                            var(--search-red) 82%,
                            #000 18%
                    ),
                    var(--search-red)
            );

    color: #fff;

    font-size: .84rem;

    font-weight: 800;

    box-shadow:
            0 10px 25px color-mix(
                    in srgb,
                    var(--search-red) 22%,
                    transparent
            ),
            0 0 22px color-mix(
                    in srgb,
                    var(--search-red) 10%,
                    transparent
            );

    transition:
            transform .2s ease,
            box-shadow .2s ease,
            filter .2s ease;
}


.reservation-search-button:hover {

    color: #fff;

    transform: translateY(-2px);

    filter: brightness(1.07);

    box-shadow:
            0 14px 32px color-mix(
                    in srgb,
                    var(--search-red) 30%,
                    transparent
            ),
            0 0 30px color-mix(
                    in srgb,
                    var(--search-red) 17%,
                    transparent
            );
}


.reservation-search-button:active {
    transform: translateY(0);
}


/* ============================================================
   HINT
============================================================ */

.reservation-search-hint {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 18px;

    color: var(--search-text-muted);

    font-size: .7rem;

    line-height: 1.5;

    text-align: center;
}


.reservation-search-hint i {
    color: var(--search-red);
}


.reservation-search-hint strong {
    color: rgba(255, 255, 255, .60);
}


/* ============================================================
   RESULTADOS
============================================================ */

.reservation-search-results-section {

    position: relative;

    padding: 35px 0 90px;
}


/* ============================================================
   CABECERA RESULTADOS
============================================================ */

.reservation-results-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 26px;

    padding-bottom: 18px;

    border-bottom:
            1px solid rgba(255, 255, 255, .07);
}


.reservation-results-eyebrow {

    display: block;

    margin-bottom: 6px;

    color: var(--search-red);

    font-size: .64rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.reservation-results-header h2 {

    margin: 0;

    color: #fff;

    font-size: 1.55rem;

    font-weight: 900;

    letter-spacing: -.03em;
}


.reservation-results-count {

    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding: 6px 13px;

    border-radius: 999px;

    color: rgba(255, 255, 255, .65);

    background:
            color-mix(
                    in srgb,
                    var(--search-red) 7%,
                    transparent
            );

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--search-red) 18%,
                    transparent
            );

    font-size: .69rem;

    font-weight: 700;
}


/* ============================================================
   CARDS DE RESERVA
============================================================ */

.reservation-result-card {

    position: relative;

    height: 100%;

    min-height: 365px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding: 22px;

    border: 1px solid rgba(255, 255, 255, .07);

    border-radius: 19px;

    background:
            linear-gradient(
                    155deg,
                    rgba(14, 14, 15, .88),
                    rgba(6, 6, 7, .94)
            );

    box-shadow:
            0 18px 45px rgba(0, 0, 0, .34),
            0 0 18px color-mix(
                    in srgb,
                    var(--search-red) 3%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, .025);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
            transform .3s ease,
            border-color .3s ease,
            box-shadow .3s ease;
}


.reservation-result-card:hover {

    transform: translateY(-4px);

    border-color:
            color-mix(
                    in srgb,
                    var(--search-red) 25%,
                    transparent
            );

    box-shadow:
            0 24px 55px rgba(0, 0, 0, .48),
            0 0 30px color-mix(
                    in srgb,
                    var(--search-red) 8%,
                    transparent
            );
}


/* línea lateral */

.reservation-result-card::before {

    content: "";

    position: absolute;

    top: 18px;
    left: 0;

    width: 2px;
    height: 58px;

    border-radius: 999px;

    background: var(--search-red);

    box-shadow:
            0 0 14px color-mix(
                    in srgb,
                    var(--search-red) 35%,
                    transparent
            );
}


/* ============================================================
   ICONOS DE RESULTADOS
============================================================ */

.reservation-result-card i {
    color: var(--search-red);
}


/* ============================================================
   CANCELAR
============================================================ */

.reservation-cancel-button {

    border-color:
            color-mix(
                    in srgb,
                    var(--search-red) 20%,
                    transparent
            );

    background:
            color-mix(
                    in srgb,
                    var(--search-red) 5%,
                    transparent
            );

    color:
            color-mix(
                    in srgb,
                    var(--search-red) 80%,
                    #fff 20%
            );
}


.reservation-cancel-button:hover {

    background:
            color-mix(
                    in srgb,
                    var(--search-red) 10%,
                    transparent
            );

    border-color:
            color-mix(
                    in srgb,
                    var(--search-red) 35%,
                    transparent
            );

    color: #fff;

    box-shadow:
            0 8px 22px color-mix(
                    in srgb,
                    var(--search-red) 12%,
                    transparent
            );
}


/* ============================================================
   MENSAJES
============================================================ */

.reservation-search-message-error {

    color: #ff9a9a;

    background:
            rgba(180, 20, 20, .08);

    border:
            1px solid
            rgba(220, 40, 40, .16);
}


.reservation-search-message-info {

    color: rgba(255, 255, 255, .58);

    background:
            rgba(255, 255, 255, .025);

    border:
            1px solid
            rgba(255, 255, 255, .07);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767.98px) {

    .reservation-search-hero {
        padding: 90px 16px 45px;
    }

    .reservation-search-heading {
        margin-bottom: 28px;
    }

    .reservation-search-heading h1 {
        font-size: 2.25rem;
    }

    .reservation-search-heading p {
        font-size: .86rem;
    }

    .reservation-search-card {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .reservation-search-button {
        width: 100%;
    }

    .reservation-results-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .reservation-result-card {
        min-height: auto;
        padding: 19px;
        border-radius: 17px;
    }
}

/* ============================================================
   BURGER TOWN
   MENU PAGE
   PDF EXPERIENCE
============================================================ */

.bt-menu-page {
    position: relative;

    min-height: 100vh;

    background:
            radial-gradient(
                    circle at 50% 0%,
                    color-mix(
                            in srgb,
                            var(--bt-red) 8%,
                            transparent
                    ),
                    transparent 32%
            ),
            linear-gradient(
                    180deg,
                    #030303 0%,
                    #070707 45%,
                    #030303 100%
            );

    color: #fff;
}


/* ============================================================
   HERO
============================================================ */

.bt-menu-hero {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 470px;

    padding:
            160px 24px 30px;

    overflow: hidden;

    text-align: center;
}


.bt-menu-hero::before {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    top: -430px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 12%,
                    transparent
            );

    filter: blur(110px);

    pointer-events: none;
}


.bt-menu-hero::after {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;
    right: 10%;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    color-mix(
                            in srgb,
                            var(--bt-red) 75%,
                            transparent
                    ),
                    transparent
            );

    box-shadow:
            0 0 18px
            color-mix(
                    in srgb,
                    var(--bt-red) 20%,
                    transparent
            );
}


.bt-menu-hero-content {
    position: relative;

    z-index: 2;

    max-width: 860px;
}


.bt-menu-eyebrow {

    display: inline-flex;

    align-items: center;

    padding: 8px 16px;

    margin-bottom: 20px;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--bt-red) 28%,
                    transparent
            );

    border-radius: 999px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 7%,
                    transparent
            );

    color: var(--bt-red);

    font-size: .68rem;

    font-weight: 900;

    letter-spacing: .15em;

    text-transform: uppercase;

    box-shadow:
            0 0 20px
            color-mix(
                    in srgb,
                    var(--bt-red) 7%,
                    transparent
            );
}


.bt-menu-title {

    margin: 0;

    color: #fff;

    font-size: clamp(42px, 6vw, 50px);

    font-weight: 900;

    line-height: .95;

    letter-spacing: -.055em;
}


.bt-menu-title span {
    display: block;

    color: var(--bt-red);

    text-shadow:
            0 0 30px
            color-mix(
                    in srgb,
                    var(--bt-red) 18%,
                    transparent
            );
}


.bt-menu-description {

    max-width: 580px;

    margin:
            24px auto 0;

    color:
            rgba(255, 255, 255, .56);

    font-size: .98rem;

    line-height: 1.7;
}


/* ============================================================
   HERO BUTTONS
============================================================ */

.bt-menu-hero-actions {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 30px;

    flex-wrap: wrap;
}


.bt-menu-primary-button,
.bt-menu-secondary-button {

    min-height: 48px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 22px;

    border-radius: 12px;

    text-decoration: none;

    font-size: .76rem;

    font-weight: 800;

    transition:
            transform .2s ease,
            box-shadow .2s ease,
            border-color .2s ease,
            background .2s ease;
}


.bt-menu-primary-button {

    background:
            linear-gradient(
                    135deg,
                    color-mix(
                            in srgb,
                            var(--bt-red) 80%,
                            #000 20%
                    ),
                    var(--bt-red)
            );

    color: #fff;

    box-shadow:
            0 10px 25px
            color-mix(
                    in srgb,
                    var(--bt-red) 22%,
                    transparent
            );
}


.bt-menu-primary-button:hover {

    color: #fff;

    transform:
            translateY(-2px);

    box-shadow:
            0 15px 32px
            color-mix(
                    in srgb,
                    var(--bt-red) 30%,
                    transparent
            );
}


.bt-menu-secondary-button {

    border:
            1px solid
            rgba(255, 255, 255, .10);

    background:
            rgba(255, 255, 255, .035);

    color:
            rgba(255, 255, 255, .78);

    backdrop-filter:
            blur(12px);

    -webkit-backdrop-filter:
            blur(12px);
}


.bt-menu-secondary-button i {

    color: var(--bt-red);
}


.bt-menu-secondary-button:hover {

    color: #fff;

    transform:
            translateY(-2px);

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 28%,
                    transparent
            );

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 7%,
                    transparent
            );

    box-shadow:
            0 10px 25px
            rgba(0, 0, 0, .28);
}


/* ============================================================
   DOCUMENT SECTION
============================================================ */

.bt-menu-document-section {

    position: relative;

    width:
            min(
                    1180px,
                    calc(100% - 32px)
            );

    margin: 0 auto;

    padding:
            30px 0 90px;
}


/* ============================================================
   HEADER
============================================================ */

.bt-menu-document-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 22px;
}


.bt-menu-document-eyebrow {

    display: block;

    margin-bottom: 6px;

    color: var(--bt-red);

    font-size: .65rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.bt-menu-document-header h2 {

    margin: 0;

    color: #fff;

    font-size: 2rem;

    font-weight: 900;

    letter-spacing: -.035em;
}


.bt-menu-document-header p {

    margin: 8px 0 0;

    color:
            rgba(255, 255, 255, .48);

    font-size: .78rem;
}


/* ============================================================
   PDF BUTTON
============================================================ */

.bt-menu-pdf-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding: 0 17px;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--bt-red) 20%,
                    transparent
            );

    border-radius: 10px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 5%,
                    transparent
            );

    color:
            rgba(255, 255, 255, .78);

    text-decoration: none;

    font-size: .69rem;

    font-weight: 800;

    transition:
            transform .2s ease,
            border-color .2s ease,
            background .2s ease,
            box-shadow .2s ease;
}


.bt-menu-pdf-button i {

    color: var(--bt-red);
}


.bt-menu-pdf-button:hover {

    color: #fff;

    transform:
            translateY(-2px);

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 38%,
                    transparent
            );

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 9%,
                    transparent
            );

    box-shadow:
            0 10px 25px
            color-mix(
                    in srgb,
                    var(--bt-red) 10%,
                    transparent
            );
}


/* ============================================================
   PDF CARD
============================================================ */

.bt-menu-pdf-card {

    position: relative;

    overflow: hidden;

    border:
            1px solid
            rgba(255, 255, 255, .08);

    border-radius: 20px;

    background:
            linear-gradient(
                    145deg,
                    rgba(13, 13, 14, .90),
                    rgba(5, 5, 6, .95)
            );

    box-shadow:
            0 30px 80px
            rgba(0, 0, 0, .48),
            0 0 30px
            color-mix(
                    in srgb,
                    var(--bt-red) 4%,
                    transparent
            ),
            inset 0 1px 0
            rgba(255, 255, 255, .03);

    backdrop-filter:
            blur(20px);

    -webkit-backdrop-filter:
            blur(20px);
}


/* línea superior */

.bt-menu-pdf-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 8%;
    right: 8%;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    color-mix(
                            in srgb,
                            var(--bt-red) 65%,
                            transparent
                    ),
                    transparent
            );

    box-shadow:
            0 0 15px
            color-mix(
                    in srgb,
                    var(--bt-red) 20%,
                    transparent
            );
}


/* ============================================================
   TOOLBAR
============================================================ */

.bt-menu-pdf-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 50px;

    padding:
            0 18px;

    border-bottom:
            1px solid
            rgba(255, 255, 255, .06);

    background:
            rgba(255, 255, 255, .018);
}


.bt-menu-pdf-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
            rgba(255, 255, 255, .68);

    font-size: .68rem;

    font-weight: 700;
}


.bt-menu-pdf-status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--bt-red);

    box-shadow:
            0 0 10px
            color-mix(
                    in srgb,
                    var(--bt-red) 45%,
                    transparent
            );
}


.bt-menu-pdf-pages {

    color:
            rgba(255, 255, 255, .30);

    font-size: .64rem;

    font-weight: 700;
}


/* ============================================================
   PDF VIEWER
============================================================ */

.bt-menu-pdf-viewer {

    position: relative;

    width: 100%;

    height: 900px;

    background:
            #111;
}


.bt-menu-pdf-viewer iframe {

    display: block;

    width: 100%;

    height: 100%;

    border: 0;

    background: #111;
}


/* ============================================================
   CTA
============================================================ */

.bt-menu-cta {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 420px;

    padding: 90px 24px;

    overflow: hidden;

    text-align: center;

    border-top:
            1px solid
            rgba(255, 255, 255, .05);

    background:
            linear-gradient(
                    180deg,
                    #050505,
                    #090909
            );
}


.bt-menu-cta-glow {

    position: absolute;

    width: 450px;
    height: 450px;

    top: -250px;
    left: 50%;

    transform:
            translateX(-50%);

    border-radius: 50%;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 10%,
                    transparent
            );

    filter: blur(90px);
}


.bt-menu-cta-content {

    position: relative;

    z-index: 2;

    max-width: 700px;
}


.bt-menu-cta-eyebrow {

    display: block;

    margin-bottom: 13px;

    color: var(--bt-red);

    font-size: .65rem;

    font-weight: 900;

    letter-spacing: .14em;
}


.bt-menu-cta h2 {

    margin: 0;

    color: #fff;

    font-size:
            clamp(
                    2.2rem,
                    5vw,
                    4rem
            );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -.045em;
}


.bt-menu-cta h2 span {

    color: var(--bt-red);

    text-shadow:
            0 0 25px
            color-mix(
                    in srgb,
                    var(--bt-red) 16%,
                    transparent
            );
}


.bt-menu-cta p {

    max-width: 560px;

    margin: 18px auto 25px;

    color:
            rgba(255, 255, 255, .50);

    font-size: .88rem;

    line-height: 1.7;
}


.bt-menu-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 50px;

    padding: 0 24px;

    border-radius: 12px;

    background:
            linear-gradient(
                    135deg,
                    color-mix(
                            in srgb,
                            var(--bt-red) 82%,
                            #000 18%
                    ),
                    var(--bt-red)
            );

    color: #fff;

    text-decoration: none;

    font-size: .76rem;

    font-weight: 800;

    box-shadow:
            0 12px 28px
            color-mix(
                    in srgb,
                    var(--bt-red) 22%,
                    transparent
            );

    transition:
            transform .2s ease,
            box-shadow .2s ease,
            filter .2s ease;
}


.bt-menu-cta-button:hover {

    color: #fff;

    transform:
            translateY(-2px);

    filter:
            brightness(1.07);

    box-shadow:
            0 16px 35px
            color-mix(
                    in srgb,
                    var(--bt-red) 30%,
                    transparent
            );
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767.98px) {

    .bt-menu-hero {

        min-height: 410px;

        padding:
                95px 18px 65px;
    }


    .bt-menu-title {

        font-size:
                clamp(
                        2.7rem,
                        14vw,
                        4rem
                );
    }


    .bt-menu-description {

        font-size: .86rem;
    }


    .bt-menu-hero-actions {

        flex-direction: column;

        width: 100%;
    }


    .bt-menu-primary-button,
    .bt-menu-secondary-button {

        width: 100%;

        max-width: 300px;
    }


    .bt-menu-document-section {

        width:
                calc(100% - 20px);

        padding-bottom: 55px;
    }


    .bt-menu-document-header {

        align-items: flex-start;

        flex-direction: column;
    }


    .bt-menu-pdf-button {

        width: 100%;
    }


    .bt-menu-pdf-card {

        border-radius: 15px;
    }


    .bt-menu-pdf-viewer {

        height: 720px;
    }


    .bt-menu-pdf-toolbar {

        min-height: 44px;

        padding:
                0 13px;
    }


    .bt-menu-cta {

        min-height: 350px;

        padding:
                70px 18px;
    }
}

/* ============================================================
   BURGER TOWN
   SEDES PUBLIC PAGE
   RED / BLACK PREMIUM
============================================================ */

.bt-branches-page {

    position: relative;

    min-height: 100vh;

    background:
            radial-gradient(
                    circle at 15% 5%,
                    color-mix(
                            in srgb,
                            var(--bt-red) 7%,
                            transparent
                    ),
                    transparent 28%
            ),
            radial-gradient(
                    circle at 85% 25%,
                    color-mix(
                            in srgb,
                            var(--bt-red) 5%,
                            transparent
                    ),
                    transparent 25%
            ),
            #040404;

    color: #fff;
}


/* ============================================================
   HERO
============================================================ */

.bt-branches-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    background: #050505;
}


.bt-branches-hero-background {

    position: absolute;

    inset: 0;

    z-index: 0;
}


.bt-branches-hero-image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
            opacity .45s ease,
            transform .8s ease;
}


.bt-branches-hero-background:hover
.bt-branches-hero-image {

    transform: scale(1.015);
}


.bt-branches-hero-overlay {

    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    180deg,
                    rgba(0, 0, 0, .25) 0%,
                    rgba(0, 0, 0, .38) 32%,
                    rgba(0, 0, 0, .88) 78%,
                    #040404 100%
            );
}


.bt-branches-hero::after {

    content: "";

    position: absolute;

    left: 8%;
    right: 8%;

    bottom: 0;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    color-mix(
                            in srgb,
                            var(--bt-red) 70%,
                            transparent
                    ),
                    transparent
            );

    box-shadow:
            0 0 18px
            color-mix(
                    in srgb,
                    var(--bt-red) 18%,
                    transparent
            );
}


.bt-branches-hero-placeholder {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
            radial-gradient(
                    circle,
                    rgba(255,255,255,.045),
                    transparent 45%
            );

    color:
            rgba(255,255,255,.18);

    font-size: 3rem;
}


.bt-branches-hero-placeholder[hidden] {

    display: none;
}


/* ============================================================
   HERO CONTENT
============================================================ */

.bt-branches-hero-content {

    position: relative;

    z-index: 2;

    width:
            min(
                    1180px,
                    calc(100% - 32px)
            );

    margin: 0 auto;

    padding:
            70px 0 45px;
}


.bt-branches-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
            8px 14px;

    margin-bottom: 16px;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--bt-red) 30%,
                    transparent
            );

    border-radius: 999px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 8%,
                    transparent
            );

    color: var(--bt-red);

    font-size: .66rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.bt-branches-hero-content h1 {

    max-width: 850px;

    margin: 0;

    color: #fff;

    font-size: clamp(42px, 6vw, 50px);

    font-weight: 900;

    line-height: .95;

    letter-spacing: -.055em;

    text-shadow:
            0 8px 40px rgba(0,0,0,.55);
}


.bt-branches-hero-content p {

    max-width: 620px;

    margin: 20px 0 0;

    color:
            rgba(255,255,255,.66);

    font-size: .92rem;

    line-height: 1.7;
}


/* ============================================================
   SELECTOR
============================================================ */

.bt-branches-selector {

    width:
            min(
                    460px,
                    100%
            );

    margin-top: 27px;
}


.bt-branches-selector-label {

    display: block;

    margin-bottom: 8px;

    color:
            rgba(255,255,255,.62);

    font-size: .70rem;

    font-weight: 800;

    letter-spacing: .05em;

    text-transform: uppercase;
}


/* ============================================================
   HERO CONTACT
============================================================ */

.bt-branches-hero-contact {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 19px;
}


.bt-branches-hero-contact[hidden] {

    display: none;
}


.bt-branches-hero-contact-item {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 36px;

    padding:
            0 12px;

    border:
            1px solid
            rgba(255,255,255,.09);

    border-radius: 10px;

    background:
            rgba(0,0,0,.28);

    color:
            rgba(255,255,255,.72);

    font-size: .68rem;

    backdrop-filter:
            blur(12px);

    -webkit-backdrop-filter:
            blur(12px);
}


.bt-branches-hero-contact-item i {

    color: var(--bt-red);
}


/* ============================================================
   GALERÍA
============================================================ */

.bt-branches-gallery {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 22px;

    overflow: hidden;
}


.bt-branches-gallery[hidden] {

    display: none;
}


.bt-branches-thumbnails {

    display: flex;

    align-items: center;

    gap: 8px;

    overflow-x: auto;

    max-width: 620px;

    padding:
            3px 1px 7px;

    scrollbar-width: none;
}


.bt-branches-thumbnails::-webkit-scrollbar {

    display: none;
}


.bt-branches-thumbnail {

    position: relative;

    flex: 0 0 68px;

    width: 68px;
    height: 48px;

    overflow: hidden;

    padding: 0;

    border:
            1px solid
            rgba(255,255,255,.13);

    border-radius: 10px;

    background:
            rgba(0,0,0,.45);

    cursor: pointer;

    opacity: .68;

    transition:
            transform .2s ease,
            opacity .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
}


.bt-branches-thumbnail:hover {

    opacity: 1;

    transform:
            translateY(-1px);
}


.bt-branches-thumbnail.is-active {

    opacity: 1;

    border-color:
            var(--bt-red);

    box-shadow:
            0 0 18px
            color-mix(
                    in srgb,
                    var(--bt-red) 20%,
                    transparent
            );
}


.bt-branches-thumbnail img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.bt-branches-thumbnail > span {

    position: absolute;

    top: 4px;
    right: 4px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background:
            rgba(0,0,0,.64);

    color: var(--bt-red);

    font-size: .52rem;
}


.bt-branches-gallery-arrow {

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
            1px solid
            rgba(255,255,255,.10);

    border-radius: 10px;

    background:
            rgba(0,0,0,.35);

    color: #fff;

    cursor: pointer;

    backdrop-filter:
            blur(12px);

    -webkit-backdrop-filter:
            blur(12px);

    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease,
            transform .2s ease;
}


.bt-branches-gallery-arrow:hover {

    transform:
            translateY(-1px);

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 10%,
                    transparent
            );

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 28%,
                    transparent
            );

    color:
            var(--bt-red);
}


/* ============================================================
   CONTAINER
============================================================ */

.bt-branches-container {

    width:
            min(
                    1180px,
                    calc(100% - 32px)
            );

    margin: 0 auto;
}


/* ============================================================
   INFORMATION
============================================================ */

.bt-branches-information-section {

    padding:
            90px 0 35px;
}


.bt-branches-section-header {

    max-width: 700px;

    margin-bottom: 30px;
}


.bt-branches-section-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--bt-red);

    font-size: .65rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.bt-branches-section-header h2 {

    margin: 0;

    color: #fff;

    font-size:
            clamp(
                    2rem,
                    4vw,
                    3rem
            );

    font-weight: 900;

    letter-spacing: -.045em;
}


.bt-branches-section-header p {

    margin: 10px 0 0;

    color:
            rgba(255,255,255,.46);

    font-size: .82rem;

    line-height: 1.7;
}


/* ============================================================
   INFO GRID
============================================================ */

.bt-branches-info-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.bt-branches-info-card {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    min-height: 95px;

    padding: 18px;

    border:
            1px solid
            rgba(255,255,255,.07);

    border-radius: 16px;

    background:
            linear-gradient(
                    145deg,
                    rgba(13,13,14,.82),
                    rgba(7,7,8,.90)
            );

    box-shadow:
            0 15px 38px
            rgba(0,0,0,.28),
            inset 0 1px 0
            rgba(255,255,255,.03);

    transition:
            transform .25s ease,
            border-color .25s ease,
            box-shadow .25s ease;
}


.bt-branches-info-card:hover {

    transform:
            translateY(-2px);

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 20%,
                    transparent
            );

    box-shadow:
            0 20px 45px
            rgba(0,0,0,.36),
            0 0 22px
            color-mix(
                    in srgb,
                    var(--bt-red) 5%,
                    transparent
            );
}


.bt-branches-info-icon {

    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 8%,
                    transparent
            );

    color: var(--bt-red);
}


.bt-branches-info-card span {

    display: block;

    margin-bottom: 5px;

    color:
            rgba(255,255,255,.33);

    font-size: .60rem;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.bt-branches-info-card strong {

    display: block;

    color:
            rgba(255,255,255,.82);

    font-size: .76rem;

    font-weight: 700;

    line-height: 1.45;
}


/* ============================================================
   HOURS
============================================================ */

.bt-branches-hours-card {

    margin-top: 18px;

    padding: 22px;

    border:
            1px solid
            rgba(255,255,255,.07);

    border-radius: 18px;

    background:
            linear-gradient(
                    145deg,
                    rgba(14,14,15,.84),
                    rgba(6,6,7,.92)
            );

    box-shadow:
            0 18px 45px
            rgba(0,0,0,.32),
            inset 0 1px 0
            rgba(255,255,255,.025);
}


.bt-branches-hours-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}


.bt-branches-hours-icon {

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 8%,
                    transparent
            );

    color: var(--bt-red);

    font-size: .95rem;
}


.bt-branches-hours-header span {

    display: block;

    margin-bottom: 3px;

    color: var(--bt-red);

    font-size: .60rem;

    font-weight: 900;

    letter-spacing: .10em;
}


.bt-branches-hours-header h3 {

    margin: 0;

    color: #fff;

    font-size: .95rem;

    font-weight: 800;
}


.bt-branches-hours-list {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;
}


.bt-branches-hours-row {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    min-height: 42px;

    padding:
            0 12px;

    border:
            1px solid
            rgba(255,255,255,.05);

    border-radius: 10px;

    background:
            rgba(255,255,255,.018);
}


.bt-branches-hours-row span {

    color:
            rgba(255,255,255,.48);

    font-size: .69rem;

    font-weight: 700;
}


.bt-branches-hours-row strong {

    color:
            rgba(255,255,255,.82);

    font-size: .68rem;

    font-weight: 800;
}


.bt-branches-loading,
.bt-branches-hours-error {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 80px;

    color:
            rgba(255,255,255,.38);

    font-size: .70rem;
}


.bt-branches-hours-error i {

    color:
            var(--bt-red);
}


/* ============================================================
   MAP
============================================================ */

.bt-branches-map-section {

    padding:
            60px 0 95px;
}


.bt-branches-map-card {

    overflow: hidden;

    border:
            1px solid
            rgba(255,255,255,.08);

    border-radius: 20px;

    background:
            #080808;

    box-shadow:
            0 25px 70px
            rgba(0,0,0,.46),
            inset 0 1px 0
            rgba(255,255,255,.03);
}


.bt-branches-map-wrapper {

    position: relative;

    height: 470px;

    background:
            #111;
}


.bt-branches-map-wrapper iframe {

    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    filter:
            grayscale(.15)
            contrast(1.05);
}


.bt-branches-map-loading {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    background:
            rgba(5,5,5,.74);

    color:
            rgba(255,255,255,.56);

    font-size: .75rem;

    backdrop-filter:
            blur(5px);
}


.bt-branches-map-loading[hidden] {

    display: none;
}


.bt-branches-map-info {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 22px;
}


.bt-branches-map-info-icon {

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 8%,
                    transparent
            );

    color: var(--bt-red);
}


.bt-branches-map-info-content > span {

    display: block;

    margin-bottom: 5px;

    color: var(--bt-red);

    font-size: .59rem;

    font-weight: 900;

    letter-spacing: .10em;
}


.bt-branches-map-info-content h3 {

    margin: 0;

    color: #fff;

    font-size: .95rem;

    font-weight: 900;
}


.bt-branches-map-info-content p {

    margin:
            5px 0 12px;

    color:
            rgba(255,255,255,.45);

    font-size: .68rem;
}


.bt-branches-map-link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
            rgba(255,255,255,.72);

    text-decoration: none;

    font-size: .67rem;

    font-weight: 800;

    transition:
            color .2s ease;
}


.bt-branches-map-link i {

    color: var(--bt-red);
}


.bt-branches-map-link:hover {

    color: #fff;
}


/* ============================================================
   CTA
============================================================ */

.bt-branches-cta {

    position: relative;

    min-height: 410px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
            85px 24px;

    overflow: hidden;

    text-align: center;

    border-top:
            1px solid
            rgba(255,255,255,.05);

    background:
            linear-gradient(
                    180deg,
                    #040404,
                    #090909
            );
}


.bt-branches-cta-glow {

    position: absolute;

    width: 450px;
    height: 450px;

    top: -280px;
    left: 50%;

    transform:
            translateX(-50%);

    border-radius: 50%;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 10%,
                    transparent
            );

    filter: blur(90px);
}


.bt-branches-cta-content {

    position: relative;

    z-index: 2;

    max-width: 720px;
}


.bt-branches-cta-eyebrow {

    display: block;

    margin-bottom: 10px;

    color: var(--bt-red);

    font-size: .63rem;

    font-weight: 900;

    letter-spacing: .14em;
}


.bt-branches-cta h2 {

    margin: 0;

    color: #fff;

    font-size:
            clamp(
                    2.2rem,
                    5vw,
                    4rem
            );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -.045em;
}


.bt-branches-cta h2 span {

    color: var(--bt-red);

    text-shadow:
            0 0 25px
            color-mix(
                    in srgb,
                    var(--bt-red) 15%,
                    transparent
            );
}


.bt-branches-cta p {

    max-width: 560px;

    margin:
            17px auto 25px;

    color:
            rgba(255,255,255,.48);

    font-size: .84rem;

    line-height: 1.7;
}


.bt-branches-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 50px;

    padding:
            0 25px;

    border-radius: 12px;

    background:
            linear-gradient(
                    135deg,
                    color-mix(
                            in srgb,
                            var(--bt-red) 82%,
                            #000 18%
                    ),
                    var(--bt-red)
            );

    color: #fff;

    text-decoration: none;

    font-size: .75rem;

    font-weight: 800;

    box-shadow:
            0 12px 28px
            color-mix(
                    in srgb,
                    var(--bt-red) 22%,
                    transparent
            );

    transition:
            transform .2s ease,
            box-shadow .2s ease,
            filter .2s ease;
}


.bt-branches-cta-button:hover {

    color: #fff;

    transform:
            translateY(-2px);

    filter:
            brightness(1.06);

    box-shadow:
            0 16px 35px
            color-mix(
                    in srgb,
                    var(--bt-red) 30%,
                    transparent
            );
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767.98px) {

    .bt-branches-hero {

        min-height: 620px;
    }


    .bt-branches-hero-content {

        width:
                calc(100% - 20px);

        padding:
                85px 0 30px;
    }


    .bt-branches-hero-content h1 {

        font-size:
                clamp(
                        2.45rem,
                        13vw,
                        4rem
                );
    }


    .bt-branches-hero-content p {

        font-size: .82rem;
    }


    .bt-branches-gallery {

        width: 100%;
    }


    .bt-branches-thumbnails {

        max-width: none;

        flex: 1;
    }


    .bt-branches-thumbnail {

        flex-basis: 60px;

        width: 60px;
        height: 44px;
    }


    .bt-branches-container {

        width:
                calc(100% - 20px);
    }


    .bt-branches-information-section {

        padding-top: 65px;
    }


    .bt-branches-info-grid {

        grid-template-columns:
            1fr;
    }


    .bt-branches-hours-list {

        grid-template-columns:
            1fr;
    }


    .bt-branches-map-section {

        padding-bottom: 65px;
    }


    .bt-branches-map-wrapper {

        height: 360px;
    }


    .bt-branches-map-info {

        padding: 18px;
    }


    .bt-branches-cta {

        min-height: 360px;

        padding:
                70px 18px;
    }

}


/* ============================================================
   BURGER TOWN
   FOOTER
   PREMIUM RED / BLACK
============================================================ */

.bt-site-footer {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
            70px 24px 20px;

    color: #fff;

    background:

            linear-gradient(
                    90deg,
                    rgba(180, 0, 0, .045) 1px,
                    transparent 1px
            ),

            linear-gradient(
                    rgba(180, 0, 0, .045) 1px,
                    transparent 1px
            ),

            #0b0506;

    background-size:
            88px 88px;

    border-top:
            1px solid
            rgba(255,255,255,.06);
}


/* ============================================================
   GLOW
============================================================ */

.bt-site-footer::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -350px;
    left: 50%;

    transform:
            translateX(-50%);

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(190,0,0,.12),
                    transparent 68%
            );

    filter:
            blur(90px);

    pointer-events: none;
}


/* ============================================================
   INNER
============================================================ */

.bt-footer-inner {

    position: relative;

    z-index: 2;

    width:
            min(
                    1180px,
                    calc(100% - 20px)
            );

    margin: 0 auto;
}


/* ============================================================
   NEWSLETTER
============================================================ */

.bt-footer-newsletter {

    max-width: 650px;

    margin:
            0 auto 60px;

    text-align: center;
}


.bt-footer-newsletter-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--bt-red);

    font-size: .85rem;

    font-weight: 900;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.bt-footer-newsletter h2 {

    margin: 0;

    color: #fff;

    font-size:
            clamp(
                    1.9rem,
                    4vw,
                    2.8rem
            );

    font-weight: 900;

    letter-spacing: -.045em;
}


.bt-footer-newsletter p {

    margin:
            10px 0 20px;

    color:
            rgba(255,255,255,.46);

    font-size: 1rem;
}


/* ============================================================
   NEWSLETTER FORM
============================================================ */

.bt-footer-newsletter-form {

    display: flex;

    align-items: center;

    gap: 9px;

    width:
            min(
                    530px,
                    100%
            );

    margin: 0 auto;
}


.bt-footer-newsletter-input {

    position: relative;

    flex: 1;
}


.bt-footer-newsletter-input i {

    position: absolute;

    top: 50%;
    left: 16px;

    transform:
            translateY(-50%);

    color:
            rgba(255,255,255,.28);

    font-size: .72rem;

    pointer-events: none;
}


.bt-footer-newsletter-input input {

    width: 100%;

    height: 43px;

    padding:
            0 16px 0 40px;

    border:
            1px solid
            rgba(255,255,255,.14);

    border-radius: 999px;

    outline: none;

    background:
            rgba(0,0,0,.34);

    color: #fff;

    font-size: .67rem;

    transition:
            border-color .25s ease,
            box-shadow .25s ease;
}


.bt-footer-newsletter-input input::placeholder {

    color:
            rgba(255,255,255,.27);
}


.bt-footer-newsletter-input input:focus {

    border-color:
            rgba(220,0,0,.48);

    box-shadow:
            0 0 0 4px
            rgba(220,0,0,.07);
}


.bt-footer-newsletter-form button {

    flex: 0 0 auto;

    height: 43px;

    padding:
            0 20px;

    border: 0;

    border-radius: 999px;

    background:
            var(--bt-red);

    color: #fff;

    font-size: .63rem;

    font-weight: 900;

    letter-spacing: .04em;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
            0 9px 24px
            rgba(190,0,0,.22);

    transition:
            transform .2s ease,
            filter .2s ease,
            box-shadow .2s ease;
}


.bt-footer-newsletter-form button:hover {

    transform:
            translateY(-2px);

    filter:
            brightness(1.07);

    box-shadow:
            0 13px 30px
            rgba(190,0,0,.30);
}


/* ============================================================
   FOOTER MAIN
============================================================ */

.bt-footer-main {

    display: grid;

    grid-template-columns:
        1.45fr
        1fr
        1fr
        1fr;

    gap: 55px;

    padding-bottom: 42px;
}


/* ============================================================
   BRAND
============================================================ */

.bt-footer-brand-column {

    min-width: 0;
}


.bt-footer-logo {

    display: inline-flex;

    align-items: center;

    min-height: 65px;

    text-decoration: none;

    color: #fff;
}


.bt-footer-logo img {

    display: block;

    width: auto;

    max-width: 145px;

    max-height: 75px;

    object-fit: contain;
}


.bt-footer-logo span {

    color: #fff;

    font-size: 1.15rem;

    font-weight: 900;

    letter-spacing: -.02em;
}


.bt-footer-brand-description {

    max-width: 300px;

    margin:
            12px 0 21px;

    color:
            rgba(255,255,255,.36);

    font-size: .76rem;

    line-height: 1.7;
}


/* ============================================================
   CONTACTO
============================================================ */

.bt-footer-contact {

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-bottom: 19px;
}


.bt-footer-contact a {

    display: flex;

    align-items: center;

    gap: 9px;

    color:
            rgba(255,255,255,.42);

    text-decoration: none;

    font-size: .75rem;

    transition:
            color .2s ease,
            transform .2s ease;
}


.bt-footer-contact a i {

    flex: 0 0 16px;

    color: var(--bt-red);

    font-size: .73rem;
}


.bt-footer-contact a:hover {

    color: #fff;

    transform:
            translateX(2px);
}


/* ============================================================
   REDES
============================================================ */

.bt-footer-socials {

    display: flex;

    gap: 8px;
}


.bt-footer-socials a {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
            1px solid
            rgba(255,255,255,.14);

    border-radius: 50%;

    background:
            rgba(255,255,255,.02);

    color:
            rgba(255,255,255,.65);

    text-decoration: none;

    font-size: .65rem;

    transition:
            transform .2s ease,
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}


.bt-footer-socials a:hover {

    transform:
            translateY(-2px);

    background:
            rgba(190,0,0,.10);

    border-color:
            rgba(220,0,0,.34);

    color: #fff;
}


/* ============================================================
   COLUMNS
============================================================ */

.bt-footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
}


.bt-footer-column h3 {

    margin:
            0 0 7px;

    color: #fff;

    font-size: 1.05rem;

    font-weight: 900;

    letter-spacing: -.025em;
}


.bt-footer-column > a {

    color:
            rgba(255,255,255,.40);

    text-decoration: none;

    font-size: .75rem;

    line-height: 1.45;

    transition:
            color .2s ease,
            transform .2s ease;
}


.bt-footer-column > a:hover {

    color: #fff;

    transform:
            translateX(2px);
}


/* ============================================================
   SEDES FOOTER
============================================================ */

.bt-footer-branches {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 9px;
}


.bt-footer-branches a {

    color:
            rgba(255,255,255,.40);

    text-decoration: none;

    font-size: .75rem;

    line-height: 1.4;

    transition:
            color .2s ease,
            transform .2s ease;
}


.bt-footer-branches a:hover {

    color: #fff;

    transform:
            translateX(2px);
}


.bt-footer-loading {

    color:
            rgba(255,255,255,.25);

    font-size: .64rem;
}


/* ============================================================
   BOTTOM
============================================================ */

.bt-footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-top: 17px;

    border-top:
            1px solid
            rgba(255,255,255,.07);

    color:
            rgba(255,255,255,.26);

    font-size: .60rem;
}


.bt-footer-made strong {

    color:
            rgba(255,255,255,.52);
}


/* ============================================================
   BACK TOP
============================================================ */

.bt-footer-back-top {

    position: fixed;

    right: 24px;
    bottom: 22px;

    z-index: 999;

    width: 39px;
    height: 39px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 50%;

    background:
            var(--bt-red);

    color: #fff;

    box-shadow:
            0 10px 25px
            rgba(0,0,0,.35),
            0 0 20px
            rgba(200,0,0,.18);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform:
            translateY(10px);

    transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;
}


.bt-footer-back-top.is-visible {

    opacity: 1;

    visibility: visible;

    transform:
            translateY(0);
}


.bt-footer-back-top:hover {

    filter:
            brightness(1.08);

    transform:
            translateY(-2px);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991.98px) {

    .bt-footer-main {

        grid-template-columns:
            1fr 1fr 1fr;

        gap: 35px;
    }


    .bt-footer-brand-column {

        grid-column:
                1 / -1;
    }

}


@media (max-width: 767.98px) {

    .bt-site-footer {

        padding:
                60px 15px 18px;
    }


    .bt-footer-newsletter-form {

        flex-direction:
                column;

        align-items:
                stretch;
    }


    .bt-footer-newsletter-form button {

        width: 100%;
    }


    .bt-footer-main {

        grid-template-columns:
            1fr 1fr;

        gap: 32px 24px;
    }


    .bt-footer-brand-column {

        grid-column:
                1 / -1;
    }


    .bt-footer-bottom {

        flex-direction:
                column;

        align-items:
                flex-start;
    }


    .bt-footer-back-top {

        right: 15px;
        bottom: 15px;
    }

}


@media (max-width: 430px) {

    .bt-footer-main {

        grid-template-columns:
            1fr;
    }


    .bt-footer-brand-column {

        grid-column:
                auto;
    }

}

/* ============================================================
   BURGER TOWN
   PÁGINA HAMBURGUESAS
============================================================ */

.bt-burgers-page {

    position: relative;

    min-height: 100vh;

    background:
            radial-gradient(
                    circle at 50% 0%,
                    color-mix(
                            in srgb,
                            var(--bt-red) 7%,
                            transparent
                    ),
                    transparent 34%
            ),
            #040404;

    color: #fff;
}


/* ============================================================
   CONTAINER
============================================================ */

.bt-burgers-container {

    width:
            min(
                    1180px,
                    calc(100% - 32px)
            );

    margin: 0 auto;
}


/* ============================================================
   HERO
============================================================ */

.bt-burgers-hero {

    position: relative;

    min-height: 660px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #050505;

    margin-top: 120px;
}


.bt-burgers-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;
}


.bt-burgers-hero-bg img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    filter:
            saturate(.92)
            contrast(1.05);
}


.bt-burgers-hero-glow {

    position: absolute;

    width: 460px;
    height: 460px;

    right: 8%;
    top: 12%;

    border-radius: 50%;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 11%,
                    transparent
            );

    filter:
            blur(100px);

    pointer-events: none;

    z-index: 1;
}


.bt-burgers-hero::after {

    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 0;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    var(--bt-red),
                    transparent
            );

    box-shadow:
            0 0 18px
            color-mix(
                    in srgb,
                    var(--bt-red) 25%,
                    transparent
            );
}


.bt-burgers-hero-content {

    position: relative;
    z-index: 3;
    margin: 0 auto;
    padding: 120px 0 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    width: 100%;
}


.bt-burgers-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: var(--bt-red);

    font-size: .67rem;

    font-weight: 900;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.bt-burgers-dot {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
            var(--bt-red);

    box-shadow:
            0 0 9px
            color-mix(
                    in srgb,
                    var(--bt-red) 50%,
                    transparent
            );
}


.bt-burgers-title {

    max-width: 780px;

    margin: 0;

    color: #fff;

    font-size:
            clamp(
                    3rem,
                    7vw,
                    6.2rem
            );

    font-weight: 900;

    line-height: .91;

    letter-spacing: -.06em;
}


.bt-burgers-title span {

    display: block;

    color: var(--bt-red);

    text-shadow:
            0 0 32px
            color-mix(
                    in srgb,
                    var(--bt-red) 17%,
                    transparent
            );
}


.bt-burgers-hero-description {

    max-width: 610px;

    margin: 24px 0 0;

    color:
            rgba(255,255,255,.62);

    font-size: .91rem;

    line-height: 1.8;
}


.bt-burgers-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 30px;
}


/* ============================================================
   BUTTONS
============================================================ */

.bt-burgers-primary-button,
.bt-burgers-secondary-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding:
            0 21px;

    border-radius: 12px;

    text-decoration: none;

    font-size: .73rem;

    font-weight: 800;

    transition:
            transform .2s ease,
            box-shadow .2s ease,
            border-color .2s ease,
            background .2s ease;
}


.bt-burgers-primary-button {

    background:
            linear-gradient(
                    135deg,
                    color-mix(
                            in srgb,
                            var(--bt-red) 82%,
                            #000 18%
                    ),
                    var(--bt-red)
            );

    color: #fff;

    box-shadow:
            0 12px 30px
            color-mix(
                    in srgb,
                    var(--bt-red) 22%,
                    transparent
            );
}


.bt-burgers-primary-button:hover {

    color: #fff;

    transform:
            translateY(-2px);

    box-shadow:
            0 16px 36px
            color-mix(
                    in srgb,
                    var(--bt-red) 30%,
                    transparent
            );
}


.bt-burgers-secondary-button {

    border:
            1px solid
            rgba(255,255,255,.11);

    background:
            rgba(255,255,255,.035);

    color:
            rgba(255,255,255,.78);

    backdrop-filter:
            blur(12px);
}


.bt-burgers-secondary-button i {

    color:
            var(--bt-red);
}


.bt-burgers-secondary-button:hover {

    color: #fff;

    transform:
            translateY(-2px);

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 28%,
                    transparent
            );

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 7%,
                    transparent
            );
}


/* ============================================================
   INTRO
============================================================ */

.bt-burgers-intro {

    padding:
            95px 0 45px;
}


.bt-burgers-intro-grid {

    display: grid;

    grid-template-columns:
        1.3fr .7fr;

    gap: 70px;

    align-items: center;
}


.bt-burgers-section-eyebrow {

    display: block;

    margin-bottom: 9px;

    color:
            var(--bt-red);

    font-size: .85rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.bt-burgers-intro-copy h2,
.bt-burgers-section-header h2 {

    margin: 0;

    color: #fff;

    font-size:
            clamp(
                    2rem,
                    4vw,
                    3.4rem
            );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -.05em;
}


.bt-burgers-intro-copy h2 span,
.bt-burgers-section-header h2 span {

    color:
            var(--bt-red);
}


.bt-burgers-intro-copy > p {

    max-width: 650px;

    margin:
            18px 0 0;

    color:
            rgba(255,255,255,.48);

    font-size: 1rem;

    line-height: 1.8;
}


.bt-burgers-feature-list {

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-top: 23px;
}


.bt-burgers-feature-list div {

    display: flex;

    align-items: center;

    gap: 11px;

    color:
            rgba(255,255,255,.68);

    font-size: .9rem;

    font-weight: 700;
}


.bt-burgers-feature-list i {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 8%,
                    transparent
            );

    color:
            var(--bt-red);

    font-size: .7rem;
}


.bt-burgers-intro-card-label {

    color:
            var(--bt-red);

    font-size: .60rem;

    font-weight: 900;

    letter-spacing: .13em;
}


.bt-burgers-intro-card strong {

    display: block;

    margin-top: 9px;

    color: #fff;

    font-size: 2rem;

    font-weight: 900;

    line-height: .95;
}


.bt-burgers-intro-card strong span {

    color:
            var(--bt-red);
}


.bt-burgers-intro-card p {

    margin:
            13px 0 0;

    color:
            rgba(255,255,255,.42);

    font-size: .70rem;

    line-height: 1.65;
}



.bt-burgers-category-nav {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    scrollbar-width: none;
}


.bt-burgers-category-nav::-webkit-scrollbar {

    display: none;
}


.bt-burgers-category-nav a {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    min-height: 36px;

    padding:
            0 14px;

    border:
            1px solid
            rgba(255,255,255,.09);

    border-radius: 999px;

    background:
            rgba(255,255,255,.025);

    color:
            rgba(255,255,255,.48);

    text-decoration: none;

    font-size: .65rem;

    font-weight: 800;

    transition:
            color .2s ease,
            border-color .2s ease,
            background .2s ease;
}


.bt-burgers-category-nav a:hover,
.bt-burgers-category-nav a.is-active {

    color: #fff;

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 28%,
                    transparent
            );

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 8%,
                    transparent
            );
}


/* ============================================================
   SECTIONS
============================================================ */
.bt-recommendation-section,
.bt-burgers-products-section,
.bt-burgers-classic-section {

    padding:
            85px 0;
}


.bt-burgers-classic-section {

    background:
            linear-gradient(
                    180deg,
                    transparent,
                    rgba(255,255,255,.012),
                    transparent
            );
}


.bt-burgers-section-header {

    margin-bottom: 32px;
    text-align: center;
}


.bt-burgers-section-header p {

    margin:
            12px 0 0;

    color:
            rgba(255,255,255,.44);

    font-size: .80rem;

    line-height: 1.7;
}


/* ============================================================
   FEATURED BURGERS
============================================================ */

.bt-burgers-featured-grid {

    display: grid;
    cursor: pointer;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 15px;
}


.bt-burger-featured-card {

    position: relative;

    min-height: 410px;

    display: flex;

    flex-direction: column;

    padding: 23px;

    overflow: hidden;

    border:
            1px solid
            rgba(255,255,255,.07);

    border-radius: 19px;

    background:
            linear-gradient(
                    145deg,
                    rgba(15,15,16,.88),
                    rgba(6,6,7,.95)
            );

    box-shadow:
            0 18px 45px
            rgba(0,0,0,.32),
            inset 0 1px 0
            rgba(255,255,255,.025);

    transition:
            transform .3s ease,
            border-color .3s ease,
            box-shadow .3s ease;
}


.bt-burger-featured-card:hover,
.bt-burger-featured-card.featured {

    transform:
            translateY(-4px);

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 28%,
                    transparent
            );

    box-shadow:
            0 25px 58px
            rgba(0,0,0,.44),
            0 0 30px
            color-mix(
                    in srgb,
                    var(--bt-red) 7%,
                    transparent
            );
}


.bt-burger-featured-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    color-mix(
                            in srgb,
                            var(--bt-red) 70%,
                            transparent
                    ),
                    transparent
            );
}


.bt-burger-featured-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.bt-burger-index {

    color:
            rgba(255,255,255,.25);

    font-size: .62rem;

    font-weight: 900;

    letter-spacing: .08em;
}


.bt-burger-badge {

    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding:
            0 9px;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--bt-red) 22%,
                    transparent
            );

    border-radius: 999px;

    color:
            var(--bt-red);

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 6%,
                    transparent
            );

    font-size: .52rem;

    font-weight: 900;

    letter-spacing: .08em;
}


.bt-burger-featured-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
            30px 0 22px;

    border-radius: 15px;

    background:
            linear-gradient(
                    145deg,
                    color-mix(
                            in srgb,
                            var(--bt-red) 12%,
                            transparent
                    ),
                    rgba(255,255,255,.025)
            );

    color:
            var(--bt-red);

    box-shadow:
            0 0 24px
            color-mix(
                    in srgb,
                    var(--bt-red) 8%,
                    transparent
            );
}


.bt-burger-featured-icon i {

    font-size: 1.28rem;
}


.bt-burger-featured-card h3 {

    margin: 0;

    color: #fff;

    font-size: 1.45rem;

    font-weight: 900;

    letter-spacing: -.035em;
}


.bt-burger-featured-card p {

    min-height: 66px;

    margin:
            11px 0 20px;

    color:
            rgba(255,255,255,.44);

    font-size: .70rem;

    line-height: 1.7;
}


.bt-burger-price-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;

    margin-top: auto;

    padding-top: 16px;

    border-top:
            1px solid
            rgba(255,255,255,.06);
}


.bt-burger-price-row div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.bt-burger-price-row small {

    color:
            rgba(255,255,255,.28);

    font-size: .53rem;

    font-weight: 800;

    letter-spacing: .08em;
}


.bt-burger-price-row strong {

    color:
            rgba(255,255,255,.90);

    font-size: .88rem;

    font-weight: 900;
}


.bt-burger-card-button {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top: 18px;

    min-height: 39px;

    padding:
            0 12px;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--bt-red) 18%,
                    transparent
            );

    border-radius: 10px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 5%,
                    transparent
            );

    color:
            rgba(255,255,255,.72);

    text-decoration: none;

    font-size: .62rem;

    font-weight: 800;

    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}


.bt-burger-card-button i {

    color:
            var(--bt-red);
}


.bt-burger-card-button:hover {

    color: #fff;

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 35%,
                    transparent
            );

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 9%,
                    transparent
            );
}


/* ============================================================
   CLASSIC GRID
============================================================ */

.bt-burgers-classic-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.bt-burger-classic-card {

    position: relative;

    padding:
            20px;

    border:
            1px solid
            rgba(255,255,255,.065);

    border-radius: 15px;

    background:
            linear-gradient(
                    145deg,
                    rgba(13,13,14,.82),
                    rgba(7,7,8,.92)
            );

    box-shadow:
            0 12px 32px
            rgba(0,0,0,.25);

    transition:
            border-color .25s ease,
            transform .25s ease,
            box-shadow .25s ease;
}


.bt-burger-classic-card:hover {

    transform:
            translateY(-2px);

    border-color:
            color-mix(
                    in srgb,
                    var(--bt-red) 20%,
                    transparent
            );

    box-shadow:
            0 18px 38px
            rgba(0,0,0,.34);
}


.bt-burger-classic-header {

    display: flex;

    align-items: center;

    gap: 11px;
}


.bt-burger-classic-header > span {

    flex: 0 0 29px;

    width: 29px;
    height: 29px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 7%,
                    transparent
            );

    color:
            var(--bt-red);

    font-size: .54rem;

    font-weight: 900;
}


.bt-burger-classic-header h3 {

    margin: 0;

    color: #fff;

    font-size: .90rem;

    font-weight: 900;

    letter-spacing: -.015em;
}


.bt-burger-classic-card > p {

    min-height: 52px;

    margin:
            12px 0 15px;

    color:
            rgba(255,255,255,.42);

    font-size: .67rem;

    line-height: 1.65;
}


.bt-burger-classic-prices {

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top: 13px;

    border-top:
            1px solid
            rgba(255,255,255,.055);
}


.bt-burger-classic-prices span {

    display: flex;

    align-items: center;

    gap: 7px;

    color:
            rgba(255,255,255,.78);

    font-size: .68rem;

    font-weight: 900;
}


.bt-burger-classic-prices small {

    color:
            var(--bt-red);

    font-size: .48rem;

    font-weight: 900;

    letter-spacing: .06em;
}


/* ============================================================
   NOTES
============================================================ */

.bt-burgers-notes-section {

    padding:
            20px 0 85px;
}


.bt-burgers-notes-card {

    display: flex;

    align-items: center;

    gap: 18px;

    padding:
            26px;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--bt-red) 18%,
                    transparent
            );

    border-radius: 19px;

    background:
            linear-gradient(
                    145deg,
                    color-mix(
                            in srgb,
                            var(--bt-red) 7%,
                            #0a0a0a
                    ),
                    #060606
            );

    box-shadow:
            0 22px 55px
            rgba(0,0,0,.35);
}


.bt-burgers-notes-icon {

    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 11%,
                    transparent
            );

    color:
            var(--bt-red);
}


.bt-burgers-notes-card > div:last-child span {

    display: block;

    margin-bottom: 6px;

    color:
            var(--bt-red);

    font-size: .57rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.bt-burgers-notes-card h2 {

    margin: 0;

    color: #fff;

    font-size: 1.25rem;

    font-weight: 900;
}


.bt-burgers-notes-card h2 strong {

    color:
            var(--bt-red);
}


.bt-burgers-notes-card p {

    margin:
            7px 0 0;

    color:
            rgba(255,255,255,.43);

    font-size: .68rem;
}


/* ============================================================
   CTA
============================================================ */

.bt-burgers-cta {

    position: relative;

    min-height: 390px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
            80px 20px;

    overflow: hidden;

    text-align: center;

    border-top:
            1px solid
            rgba(255,255,255,.05);

    background:
            linear-gradient(
                    180deg,
                    #040404,
                    #090909
            );
}


.bt-burgers-cta-glow {

    position: absolute;

    width: 450px;
    height: 450px;

    top: -300px;
    left: 50%;

    transform:
            translateX(-50%);

    border-radius: 50%;

    background:
            color-mix(
                    in srgb,
                    var(--bt-red) 10%,
                    transparent
            );

    filter:
            blur(95px);
}


.bt-burgers-cta-content {

    position: relative;

    z-index: 2;

    max-width: 700px;
}


.bt-burgers-cta-content > span {

    display: block;

    margin-bottom: 10px;

    color:
            var(--bt-red);

    font-size: .62rem;

    font-weight: 900;

    letter-spacing: .14em;
}


.bt-burgers-cta h2 {

    margin: 0;

    color: #fff;

    font-size:
            clamp(
                    2.1rem,
                    5vw,
                    3.8rem
            );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -.05em;
}


.bt-burgers-cta h2 strong {

    display: block;

    color:
            var(--bt-red);

    text-shadow:
            0 0 25px
            color-mix(
                    in srgb,
                    var(--bt-red) 15%,
                    transparent
            );
}


.bt-burgers-cta-content p {

    margin:
            15px auto 25px;

    color:
            rgba(255,255,255,.45);

    font-size: .80rem;
}


.bt-burgers-cta-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991.98px) {

    .bt-burgers-intro-grid {

        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .bt-burgers-featured-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .bt-burger-featured-card:last-child {

        grid-column:
                1 / -1;

        width:
                calc(
                        50% - 7px
                );

        margin: 0 auto;
    }

}


@media (max-width: 767.98px) {

    .bt-burgers-container {

        width:
                calc(100% - 20px);
    }


    .bt-burgers-hero {

        min-height: 590px;
    }


    .bt-burgers-hero-content {

        width:
                calc(100% - 20px);

        padding:
                90px 0 60px;
    }


    .bt-burgers-title {

        font-size:
                clamp(
                        2.75rem,
                        14vw,
                        4.5rem
                );
    }


    .bt-burgers-featured-grid {

        grid-template-columns:
            1fr;
    }


    .bt-burger-featured-card:last-child {

        grid-column:
                auto;

        width: 100%;

        margin: 0;
    }


    .bt-burgers-classic-grid {

        grid-template-columns:
            1fr;
    }


    .bt-burgers-products-section,
    .bt-burgers-classic-section {

        padding:
                65px 0;
    }


    .bt-burgers-notes-card {

        align-items:
                flex-start;

        padding: 21px;
    }


    .bt-burgers-cta {

        min-height:
                350px;
    }

}

/* ============================================================
   FOOTER LOCATION SLIDER
   TRANSFORM BASED
============================================================ */

#sedes-burgertown-footer
.bt-locations-viewport {

    position: relative;

    width: 100%;

    overflow: hidden;
}


#sedes-burgertown-footer
.bt-locations-track {

    display: flex;

    align-items: stretch;

    flex-wrap: nowrap;

    gap: 18px;

    width: max-content;

    min-width: 100%;

    will-change: transform;

    transform:
            translate3d(0, 0, 0);

}


#sedes-burgertown-footer
.bt-location-card {

    position: relative;

    flex:
            0 0 390px;

    width: 390px;

    min-width: 0;

    box-sizing: border-box;
}


#sedes-burgertown-footer
.bt-location-card.is-active {

    opacity: 1;

}


@media (max-width: 767.98px) {

    #sedes-burgertown-footer
    .bt-location-card {

        flex:
                0 0
                calc(
                        100vw - 36px
                );

        width:
                calc(
                        100vw - 36px
                );

    }

}

/* =========================================================
   PRODUCTOS DESTACADOS
   ========================================================= */

.bt-burgers-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* TARJETA */

.bt-burger-featured-card {
    position: relative;
    overflow: hidden;

    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;

    transition:
            transform .35s ease,
            border-color .35s ease,
            box-shadow .35s ease;
}

.bt-burger-featured-card:hover {
    transform: translateY(-6px);

    border-color: rgba(190, 28, 28, .65);

    box-shadow:
            0 20px 50px rgba(0, 0, 0, .45),
            0 0 30px rgba(190, 28, 28, .08);
}


/* =========================================================
   IMAGEN
   ========================================================= */

.bt-burger-featured-media {
    position: relative;

    width: 100%;
    height: 300px;

    overflow: hidden;

    background: #111;
}


.bt-burger-featured-media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
            linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, .05) 0%,
                    rgba(0, 0, 0, .10) 45%,
                    rgba(0, 0, 0, .65) 100%
            );

    pointer-events: none;
}


.bt-burger-featured-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}


.bt-burger-featured-card:hover
.bt-burger-featured-media img {
    transform: scale(1.06);
}


/* =========================================================
   NUMERO + ETIQUETA
   ========================================================= */

.bt-burger-featured-overlay {
    position: absolute;

    top: 20px;
    left: 20px;
    right: 20px;

    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
}


.bt-burger-featured-number {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;

    color: rgba(255, 255, 255, .55);
}


.bt-burger-featured-badge {
    display: inline-flex;
    align-items: center;

    padding: 7px 12px;

    border-radius: 999px;

    background: rgba(10, 10, 10, .75);

    border: 1px solid rgba(190, 28, 28, .65);

    color: #d71920;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .8px;

    backdrop-filter: blur(8px);
}


/* =========================================================
   ICONO SOBRE LA IMAGEN
   ========================================================= */

.bt-burger-featured-icon {
    position: absolute;

    left: 22px;
    bottom: 20px;

    z-index: 4;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(120, 0, 0, .55);

    border: 1px solid rgba(215, 25, 32, .35);

    color: #d71920;

    font-size: 22px;

    backdrop-filter: blur(8px);

    transition:
            background .3s ease,
            transform .3s ease;
}


.bt-burger-featured-card:hover
.bt-burger-featured-icon {
    background: #d71920;
    color: #fff;

    transform: translateY(-3px);
}

.bt-burger-featured-content {
    padding: 26px 22px 22px;
}


.bt-burger-featured-content h3 {
    margin: 0 0 10px;

    color: #fff;

    font-size: 23px;
    font-weight: 700;

    line-height: 1.15;
}


.bt-burger-featured-content p {
    margin: 0;

    color: #858585;

    font-size: 13px;
    line-height: 1.65;

    min-height: 64px;
}

.bt-burger-featured-prices {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, .08);
}


.bt-burger-featured-prices span {
    display: block;

    margin-bottom: 5px;

    color: #777;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .8px;
}


.bt-burger-featured-prices strong {
    color: #fff;

    font-size: 15px;
    font-weight: 700;
}

.bt-burger-featured-button {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 20px;
    padding: 13px 15px;

    border-radius: 9px;

    background: #b51218;
    border: 1px solid #d71920;

    color: #fff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    transition:
            background .3s ease,
            transform .3s ease,
            box-shadow .3s ease;
}


.bt-burger-featured-button i {
    font-size: 14px;

    transition: transform .3s ease;
}


.bt-burger-featured-button:hover {
    background: #d71920;

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
            0 8px 25px rgba(215, 25, 32, .25);
}


.bt-burger-featured-button:hover i {
    transform: translateX(4px);
}


@media (max-width: 1000px) {

    .bt-burgers-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .bt-burgers-featured-grid {
        grid-template-columns: 1fr;
    }

    .bt-burger-featured-media {
        height: 280px;
    }

    .bt-burgers-featured-heading h2 {
        font-size: 32px;
    }

}


/* ============================================================
   CATEGORY PRODUCTS
   SECCIÓN: TODOS LOS PRODUCTOS
   BURGER TOWN — PREMIUM MENU
   ============================================================ */


/* ============================================================
   VARIABLES LOCALES
   ============================================================ */

#category-products {
    --bt-products-red: #d71920;
    --bt-products-red-dark: #a90f15;
    --bt-products-red-light: #ff3038;

    --bt-products-bg: #080808;
    --bt-products-card: #0d0d0d;
    --bt-products-card-hover: #111111;

    --bt-products-border: rgba(255, 255, 255, 0.09);
    --bt-products-border-hover: rgba(215, 25, 32, 0.55);

    --bt-products-text: #ffffff;
    --bt-products-muted: #8d8d8d;
    --bt-products-muted-light: #a7a7a7;
}


/* ============================================================
   SECCIÓN PRINCIPAL
   ============================================================ */

#category-products.bt-burgers-classic-section {
    position: relative;

    padding: 110px 0 120px;

    background:
            radial-gradient(
                    circle at 15% 20%,
                    rgba(215, 25, 32, 0.055),
                    transparent 28%
            ),
            radial-gradient(
                    circle at 85% 75%,
                    rgba(215, 25, 32, 0.035),
                    transparent 30%
            ),
            var(--bt-products-bg);

    overflow: hidden;
}


/*
   Textura sutil
*/

#category-products.bt-burgers-classic-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .025;

    background-image:
            radial-gradient(
                    rgba(255, 255, 255, .8) .6px,
                    transparent .6px
            );

    background-size: 5px 5px;
}


/*
   Línea decorativa superior
*/

#category-products.bt-burgers-classic-section::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(700px, 70%);
    height: 1px;

    transform: translateX(-50%);

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(215, 25, 32, .6),
                    transparent
            );

    box-shadow:
            0 0 20px rgba(215, 25, 32, .12);
}


/* ============================================================
   CONTAINER
   ============================================================ */

#category-products .bt-burgers-container {
    position: relative;

    z-index: 2;

    width: min(1200px, calc(100% - 80px));

    margin: 0 auto;

    padding: 0 0 100px 0;
}


/* ============================================================
   HEADER DE LA SECCIÓN
   ============================================================ */

#category-products .bt-burgers-section-header {
    max-width: 720px;

    margin: 0 auto 65px;

    text-align: center;
}


/*
   Eyebrow
*/

#category-products .bt-burgers-section-eyebrow {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-bottom: 14px;

    color: var(--bt-products-red);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.8px;
    text-transform: uppercase;
}


/*
   Punto decorativo
*/

#category-products .bt-burgers-section-eyebrow::before,
#category-products .bt-burgers-section-eyebrow::after {
    content: "";

    width: 18px;
    height: 1px;

    background: rgba(215, 25, 32, .65);
}


/*
   Título
*/

#category-products .bt-burgers-section-header h2 {
    margin: 0;

    color: var(--bt-products-text);

    font-size: clamp(36px, 4vw, 56px);

    font-weight: 800;

    letter-spacing: -1.8px;

    line-height: 1.05;
}


/*
   Parte roja del título
*/

#category-products .bt-burgers-section-header h2 span {
    color: var(--bt-products-red);
}


/*
   Descripción
*/

#category-products .bt-burgers-section-header p {
    max-width: 580px;

    margin: 18px auto 0;

    color: var(--bt-products-muted);

    font-size: 14px;

    line-height: 1.75;
}


/* ============================================================
   GRID
   ============================================================ */

#category-products .bt-burgers-classic-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;
}


/* ============================================================
   TARJETA
   ============================================================ */

#category-products .bt-burger-classic-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, .035),
                    rgba(255, 255, 255, .008) 45%,
                    rgba(0, 0, 0, .08)
            ),
            var(--bt-products-card);

    border: 1px solid var(--bt-products-border);

    border-radius: 20px;

    box-shadow:
            0 12px 35px rgba(0, 0, 0, .20);

    transition:
            transform .4s cubic-bezier(.2, .8, .2, 1),
            border-color .4s ease,
            box-shadow .4s ease,
            background .4s ease;
}


/*
   Línea roja superior de la tarjeta
*/

#category-products .bt-burger-classic-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    var(--bt-products-red),
                    transparent
            );

    transition:
            width .45s ease;
}


/*
   Hover
*/

#category-products .bt-burger-classic-card:hover {
    transform: translateY(-8px);

    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, .05),
                    rgba(255, 255, 255, .01)
            ),
            var(--bt-products-card-hover);

    border-color: var(--bt-products-border-hover);

    box-shadow:
            0 25px 55px rgba(0, 0, 0, .42),
            0 0 35px rgba(215, 25, 32, .055);
}


#category-products .bt-burger-classic-card:hover::before {
    width: 70%;
}


/* ============================================================
   IMAGEN
   ============================================================ */

#category-products .bt-burger-classic-image {
    position: relative;

    width: 100%;
    height: 250px;

    overflow: hidden;

    flex-shrink: 0;

    background:
            linear-gradient(
                    135deg,
                    #151515,
                    #090909
            );
}


/*
   Imagen
*/

#category-products .bt-burger-classic-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
            transform .7s cubic-bezier(.2, .8, .2, 1),
            filter .5s ease;
}


/*
   Oscurecimiento inferior
*/

#category-products .bt-burger-classic-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
            linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0) 45%,
                    rgba(0, 0, 0, .72) 100%
            );
}


/*
   Hover imagen
*/

#category-products
.bt-burger-classic-card:hover
.bt-burger-classic-image img {
    transform: scale(1.07);

    filter:
            saturate(1.08)
            contrast(1.03);
}


/* ============================================================
   SI NO HAY IMAGEN
   ============================================================ */

#category-products .bt-burger-classic-card
> .bt-burger-classic-image:not(:has(img)) {
    display: flex;

    align-items: center;
    justify-content: center;
}


#category-products .bt-burger-classic-image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: rgba(215, 25, 32, .35);

    font-size: 55px;

    background:
            radial-gradient(
                    circle,
                    rgba(215, 25, 32, .10),
                    transparent 65%
            );
}


/* ============================================================
   HEADER DEL PRODUCTO
   ============================================================ */

#category-products .bt-burger-classic-header {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 25px 24px 0;
}


/*
   Número
*/

#category-products .bt-burger-classic-header > span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 38px;
    height: 30px;

    border-radius: 7px;

    background:
            rgba(215, 25, 32, .09);

    border: 1px solid rgba(215, 25, 32, .18);

    color: var(--bt-products-red);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}


/*
   Nombre
*/

#category-products .bt-burger-classic-header h3 {
    min-width: 0;

    margin: 0;

    color: #fff;

    font-size: 21px;

    font-weight: 750;

    letter-spacing: -.35px;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   DESCRIPCIÓN
   ============================================================ */

#category-products .bt-burger-classic-card > p {
    margin: 14px 24px 0;

    color: var(--bt-products-muted);

    font-size: 13px;

    line-height: 1.7;
}


/*
   Evita diferencias excesivas de altura
*/

#category-products .bt-burger-classic-card
> .bt-burger-classic-header
+ p {
    min-height: 66px;
}


/* ============================================================
   INGREDIENTES
   ============================================================ */

#category-products .bt-category-product-ingredients {
    position: relative;

    margin-top: 14px !important;
    padding-left: 15px;

    color: #707070 !important;

    font-size: 11px !important;

    line-height: 1.65 !important;

    font-style: italic;
}


/*
   Línea roja lateral
*/

#category-products .bt-category-product-ingredients::before {
    content: "";

    position: absolute;

    top: 3px;
    bottom: 3px;
    left: 0;

    width: 2px;

    border-radius: 2px;

    background:
            linear-gradient(
                    to bottom,
                    var(--bt-products-red),
                    transparent
            );
}


/* ============================================================
   PRECIOS
   ============================================================ */

#category-products .bt-burger-classic-prices {
    display: flex;

    align-items: flex-end;

    gap: 35px;

    margin: auto 24px 0;

    padding-top: 22px;

    margin-top: 25px;

    border-top:
            1px solid
            rgba(255, 255, 255, .07);
}


/*
   Precio
*/

#category-products .bt-burger-classic-prices > span {
    display: flex;

    flex-direction: column;

    gap: 5px;

    color: #fff;

    font-size: 16px;

    font-weight: 750;

    line-height: 1;
}


/*
   Etiqueta SOLA / COMBO
*/

#category-products .bt-burger-classic-prices small {
    display: block;

    color: #686868;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


/*
   Primer precio
*/

#category-products
.bt-burger-classic-prices
> span:first-child {
    color: #fff;
}


/*
   Precio combo
*/

#category-products
.bt-burger-classic-prices
> span:nth-child(2) {
    color: var(--bt-products-red);
}


/* ============================================================
   ESPACIADO INFERIOR DE LA TARJETA
   ============================================================ */

#category-products .bt-burger-classic-prices {
    padding-bottom: 25px;
}


/* ============================================================
   EFECTO DE LUZ EN HOVER
   ============================================================ */

#category-products .bt-burger-classic-card::after {
    content: "";

    position: absolute;

    top: -120px;
    right: -120px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(215, 25, 32, .08),
                    transparent 70%
            );

    opacity: 0;

    pointer-events: none;

    transition:
            opacity .45s ease;
}


#category-products .bt-burger-classic-card:hover::after {
    opacity: 1;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

#category-products .bt-category-public-empty {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    max-width: 600px;

    min-height: 280px;

    margin: 0 auto;

    padding: 50px 30px;

    text-align: center;

    border:
            1px solid
            rgba(255, 255, 255, .08);

    border-radius: 20px;

    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, .03),
                    rgba(255, 255, 255, .008)
            );
}


#category-products .bt-category-public-empty i {
    margin-bottom: 20px;

    color: var(--bt-products-red);

    font-size: 42px;
}


#category-products .bt-category-public-empty h3 {
    margin: 0 0 8px;

    color: #fff;

    font-size: 24px;
}


#category-products .bt-category-public-empty p {
    margin: 0;

    color: var(--bt-products-muted);

    font-size: 13px;

    line-height: 1.7;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1100px) {

    #category-products .bt-burgers-container {
        width: min(
                100%,
                calc(100% - 50px)
        );
    }


    #category-products .bt-burgers-classic-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }


    #category-products .bt-burger-classic-image {
        height: 240px;
    }

}


/* ============================================================
   RESPONSIVE — TABLET PEQUEÑO
   ============================================================ */

@media (max-width: 760px) {

    #category-products.bt-burgers-classic-section {
        padding: 85px 0 90px;
    }


    #category-products .bt-burgers-container {
        width: min(
                100%,
                calc(100% - 36px)
        );
    }


    #category-products .bt-burgers-section-header {
        margin-bottom: 45px;
    }


    #category-products .bt-burgers-section-header h2 {
        font-size: 38px;
    }


    #category-products .bt-burgers-classic-grid {
        grid-template-columns: 1fr;

        gap: 20px;

        max-width: 560px;

        margin: 0 auto;
    }


    #category-products .bt-burger-classic-image {
        height: 290px;
    }


    #category-products .bt-burger-classic-header h3 {
        font-size: 22px;
    }

}


/* ============================================================
   RESPONSIVE — MÓVIL
   ============================================================ */

@media (max-width: 480px) {

    #category-products.bt-burgers-classic-section {
        padding: 70px 0 75px;
    }


    #category-products .bt-burgers-container {
        width: calc(100% - 28px);
    }


    #category-products .bt-burgers-section-header {
        margin-bottom: 38px;
    }


    #category-products .bt-burgers-section-eyebrow {
        font-size: 9px;

        letter-spacing: 2px;
    }


    #category-products .bt-burgers-section-header h2 {
        font-size: 32px;

        letter-spacing: -1px;
    }


    #category-products .bt-burgers-section-header p {
        font-size: 13px;

        line-height: 1.65;
    }


    #category-products .bt-burger-classic-card {
        border-radius: 17px;
    }


    #category-products .bt-burger-classic-image {
        height: 235px;
    }


    #category-products .bt-burger-classic-header {
        padding: 21px 18px 0;

        gap: 11px;
    }


    #category-products .bt-burger-classic-header > span {
        width: 34px;
        height: 28px;

        font-size: 9px;
    }


    #category-products .bt-burger-classic-header h3 {
        font-size: 19px;
    }


    #category-products .bt-burger-classic-card > p {
        margin-left: 18px;
        margin-right: 18px;

        font-size: 12px;
    }


    #category-products .bt-burger-classic-prices {
        gap: 25px;

        margin-left: 18px;
        margin-right: 18px;

        padding-top: 19px;
        padding-bottom: 20px;
    }


    #category-products .bt-burger-classic-prices > span {
        font-size: 15px;
    }

}


/* ============================================================
   REDUCE MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    #category-products .bt-burger-classic-card,
    #category-products .bt-burger-classic-image img,
    #category-products .bt-burger-classic-card::before,
    #category-products .bt-burger-classic-card::after {
        transition: none;
    }

}



/* ============================================================
   CONTENEDOR DE LAS IMÁGENES
   ============================================================ */

.bt-hero-slider .bt-burgers-hero-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: -3;
}


/* ============================================================
   SLIDE
   ============================================================ */

/* Slide activo */


.bt-hero-slider .bt-hero-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    transform: scale(1.04);

    transition:
            opacity 1.2s ease,
            visibility 1.2s ease,
            transform 7s ease;
}

.bt-hero-slider .bt-hero-slide.is-active {
    opacity: 1;

    visibility: visible;

    transform: scale(1);
}


/* ============================================================
   IMAGEN
   ============================================================ */

.bt-hero-slider .bt-hero-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;
}


/* ============================================================
   OVERLAY PRINCIPAL
   ============================================================ */

.bt-hero-slider .bt-burgers-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;
}


/* ============================================================
   OVERLAY INFERIOR
   ============================================================ */

.bt-hero-slider .bt-burgers-hero-bg::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
            linear-gradient(
                    to bottom,
                    transparent 50%,
                    rgba(0, 0, 0, .72) 100%
            );
}


/* ============================================================
   GLOW
   ============================================================ */

.bt-hero-slider .bt-burgers-hero-glow {
    position: absolute;

    left: -120px;
    bottom: -180px;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(215, 25, 32, .25),
                    rgba(215, 25, 32, .08) 35%,
                    transparent 70%
            );

    filter: blur(15px);

    pointer-events: none;

    z-index: -1;
}


/* ============================================================
   CONTENIDO
   ============================================================ */

.bt-hero-slider .bt-burgers-hero-content {
    position: relative;

    z-index: 10;

    min-height: 680px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    max-width: 1250px;

    margin: 0 auto;

    padding:
            100px 50px 120px;
}


/* ============================================================
   EYEBROW
   ============================================================ */

.bt-hero-slider .bt-burgers-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color: #d71920;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.bt-hero-slider .bt-burgers-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #d71920;

    box-shadow:
            0 0 12px rgba(215, 25, 32, .7);
}


/* ============================================================
   TÍTULO
   ============================================================ */

.bt-hero-slider .bt-burgers-title {
    max-width: 850px;

    margin: 0;

    color: #fff;

    font-size:
            clamp(48px, 6vw, 86px);

    font-weight: 850;

    letter-spacing: -3px;

    line-height: .98;

    text-shadow:
            0 5px 25px rgba(0, 0, 0, .4);
}


/* ============================================================
   DESCRIPCIÓN
   ============================================================ */

.bt-hero-slider .bt-burgers-hero-description {
    max-width: 620px;

    margin:
            25px 0 0;

    color: rgba(255, 255, 255, .72);

    font-size: 15px;

    line-height: 1.8;

    text-shadow:
            0 2px 10px rgba(0, 0, 0, .5);
}


/* ============================================================
   BOTONES
   ============================================================ */

.bt-hero-slider .bt-burgers-hero-actions {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 34px;
}


/* ============================================================
   BOTÓN PRINCIPAL
   ============================================================ */

.bt-hero-slider .bt-burgers-primary-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 50px;

    padding:
            0 22px;

    border-radius: 9px;

    background: #d71920;

    border:
            1px solid #d71920;

    color: #fff;

    text-decoration: none;

    font-size: .85rem;

    font-weight: 800;

    transition:
            transform .3s ease,
            background .3s ease,
            box-shadow .3s ease;
}


.bt-hero-slider .bt-burgers-primary-button:hover {
    transform: translateY(-3px);

    background: #ef2028;

    color: #fff;

    box-shadow:
            0 12px 30px
            rgba(215, 25, 32, .30);
}


/* ============================================================
   BOTÓN SECUNDARIO
   ============================================================ */

.bt-hero-slider .bt-burgers-secondary-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 50px;

    padding:
            0 22px;

    border-radius: 9px;

    background:
            rgba(0, 0, 0, .32);

    border:
            1px solid
            rgba(255, 255, 255, .22);

    color: #fff;

    text-decoration: none;

    font-size: .85rem;

    font-weight: 700;

    backdrop-filter: blur(10px);

    transition:
            background .3s ease,
            border-color .3s ease,
            transform .3s ease;
}


.bt-hero-slider .bt-burgers-secondary-button:hover {
    background:
            rgba(215, 25, 32, .18);

    border-color:
            rgba(215, 25, 32, .7);

    color: #fff;

    transform: translateY(-3px);
}


/* ============================================================
   CONTROLES
   ============================================================ */

.bt-hero-slider-controls {
    position: absolute;

    right: 50px;
    bottom: 58px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;
}


/* ============================================================
   FLECHAS
   ============================================================ */

.bt-hero-slider-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border-radius: 50%;

    background:
            rgba(0, 0, 0, .35);

    border:
            1px solid
            rgba(255, 255, 255, .18);

    color: #fff;

    cursor: pointer;

    backdrop-filter: blur(10px);

    transition:
            background .3s ease,
            border-color .3s ease,
            transform .3s ease;
}


.bt-hero-slider-arrow:hover {
    background: #d71920;

    border-color: #d71920;

    transform: translateY(-2px);
}


.bt-hero-slider-arrow i {
    font-size: 12px;
}


/* ============================================================
   CONTADOR
   ============================================================ */

.bt-hero-slider-counter {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 90px;

    justify-content: center;

    color: #fff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.bt-hero-slider-counter-line {
    width: 20px;
    height: 1px;

    background:
            rgba(255, 255, 255, .35);
}


.bt-hero-slider-counter [data-hero-current] {
    color: #d71920;
}


/* ============================================================
   BARRA DE PROGRESO
   ============================================================ */

.bt-hero-slider-progress {
    position: absolute;

    left: 50px;
    right: 50px;
    bottom: 31px;

    z-index: 20;

    height: 2px;

    overflow: hidden;

    background:
            rgba(255, 255, 255, .16);
}


.bt-hero-slider-progress-bar {
    width: 0;
    height: 100%;

    background:
            linear-gradient(
                    90deg,
                    #a90f15,
                    #d71920,
                    #ff3038
            );

    box-shadow:
            0 0 10px
            rgba(215, 25, 32, .6);

    transition:
            width .1s linear;
}


/* ============================================================
   ESTADO SIN IMÁGENES
   ============================================================ */

.bt-hero-slider:not([data-slide-count="0"])
.bt-hero-slider-track {
    background: #090909;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .bt-hero-slider .bt-burgers-hero-content {
        padding-left: 40px;
        padding-right: 40px;
    }


    .bt-hero-slider-controls {
        right: 40px;
    }


    .bt-hero-slider-progress {
        left: 40px;
        right: 40px;
    }

}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 700px) {

    .bt-hero-slider {
        min-height: 650px;
    }


    .bt-hero-slider .bt-burgers-hero-content {
        min-height: 650px;

        justify-content: flex-end;

        padding:
                80px 22px 125px;
    }



    .bt-hero-slider .bt-burgers-title {
        font-size: 47px;

        letter-spacing: -2px;
    }


    .bt-hero-slider .bt-burgers-hero-description {
        max-width: 100%;

        font-size: 13px;

        line-height: 1.7;
    }




    .bt-hero-slider .bt-burgers-hero-actions {

        width: 100%;
        position: inherit!important;
        padding: 0 15px 0 15px;
        left: inherit!important;
    }


    .bt-hero-slider .bt-burgers-primary-button,
    .bt-hero-slider .bt-burgers-secondary-button {
        width: 100%;
    }


    .bt-hero-slider-controls {
        right: 22px;
        bottom: 48px;
    }


    .bt-hero-slider-progress {
        left: 22px;
        right: 22px;

        bottom: 25px;
    }

}


/* ============================================================
   MÓVIL PEQUEÑO
   ============================================================ */

@media (max-width: 420px) {

    .bt-hero-slider {
        min-height: 620px;
    }


    .bt-hero-slider .bt-burgers-hero-content {
        min-height: 620px;

        padding:
                70px 18px 115px;
    }


    .bt-hero-slider .bt-burgers-title {
        font-size: 40px;
    }


    .bt-hero-slider .bt-burgers-eyebrow {
        font-size: 9px;

        letter-spacing: 2px;
    }


    .bt-hero-slider-arrow {
        width: 39px;
        height: 39px;
    }


    .bt-hero-slider-counter {
        min-width: 75px;
    }

}


/* ============================================================
   REDUCIR ANIMACIONES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .bt-hero-slider .bt-hero-slide {
        transition: opacity .2s ease;
        transform: none !important;
    }

    .bt-hero-slider .bt-hero-slide.is-active {
        transform: none !important;
    }

}

/* ============================================================
   HERO — BOTONES EN LA PARTE INFERIOR
   ============================================================ */

.bt-hero-slider .bt-burgers-hero-content {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 15;

    pointer-events: none;
}


/* ============================================================
   CONTENEDOR DE BOTONES
   ============================================================ */

.bt-hero-slider .bt-burgers-hero-actions {
    position: absolute;

    left: 50px;
    bottom: 65px;

    display: flex;

    align-items: center;

    gap: 12px;

    pointer-events: auto;
}


/* ============================================================
   ICONOS
   ============================================================ */

.bt-hero-slider .bt-burgers-primary-button i,
.bt-hero-slider .bt-burgers-secondary-button i {
    font-size: 11px;
}



/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 600px) {

    .bt-hero-slider .bt-burgers-primary-button,
    .bt-hero-slider .bt-burgers-secondary-button {
        min-height: 44px;

        padding: 0 14px;

        font-size: 10px;
    }

}


/* ============================================================
   MÓVIL PEQUEÑO
   ============================================================ */

@media (max-width: 420px) {

    .bt-hero-slider .bt-burgers-hero-actions {
        position: inherit;

        left: inherit;
        bottom: inherit;

        display: inherit;

        align-items: inherit;

        gap: inherit;

        pointer-events: inherit;
    }


    .bt-hero-slider .bt-burgers-primary-button,
    .bt-hero-slider .bt-burgers-secondary-button {
        flex: 1;

        padding: 0 10px;
    }

}

/* ============================================================
   FEATURED PRODUCTS
   FULL IMAGE SLIDER
   ============================================================ */

.bt-burgers-intro-card.bt-intro-featured-slider {
    position: relative;

    width: 100%;
    height: 380px;

    padding: 0;

    overflow: hidden;

    border-radius: 22px;

    border: 1px solid rgba(255, 255, 255, .10);

    background: #080808;

    box-shadow:
            0 25px 60px rgba(0, 0, 0, .40);

    isolation: isolate;
}


/* ============================================================
   VIEWPORT
   ============================================================ */

.bt-intro-slider-viewport {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;

    z-index: 1;
}


/* ============================================================
   TRACK
   ============================================================ */

.bt-intro-slider-track {

    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    transform: none !important;

}


/* ============================================================
   SLIDES
   ============================================================ */

.bt-intro-featured-slide {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;

    opacity: 0;

    visibility: hidden;

    transform: scale(1.04);

    filter: brightness(.65);

    border: 0;

    background: #080808;

    transition:
            opacity .75s ease,
            visibility .75s ease,
            transform 1.2s
            cubic-bezier(.2, .8, .2, 1),
            filter .75s ease;

    z-index: 1;
}


/* ============================================================
   SLIDE ACTIVO
   ============================================================ */

.bt-intro-featured-slide.is-active {

    opacity: 1;

    visibility: visible;

    transform: scale(1);

    filter: brightness(1);

    z-index: 2;

}


/* ============================================================
   IMAGEN
   ============================================================ */

.bt-intro-featured-slide img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;

    transition:
            transform 1.4s
            cubic-bezier(.2, .8, .2, 1);

}


/* ============================================================
   ZOOM SUAVE DE LA IMAGEN ACTIVA
   ============================================================ */

.bt-intro-featured-slide.is-active img {

    transform: scale(1.04);

}


/* ============================================================
   OVERLAY
   ============================================================ */

.bt-intro-featured-slide::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
            linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, .05) 25%,
                    rgba(0, 0, 0, .18) 50%,
                    rgba(0, 0, 0, .75) 100%
            );

}


/* ============================================================
   OVERLAY LATERAL
   ============================================================ */

.bt-intro-slider-viewport::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
            linear-gradient(
                    90deg,
                    rgba(0, 0, 0, .30),
                    transparent 25%,
                    transparent 75%,
                    rgba(0, 0, 0, .30)
            );

    z-index: 5;

}


/* ============================================================
   BRILLO ROJO
   ============================================================ */

.bt-intro-featured-slider::before {

    content: "";

    position: absolute;

    top: -180px;
    right: -130px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(215, 25, 32, .18),
                    transparent 70%
            );

    filter: blur(15px);

    pointer-events: none;

    z-index: 6;

}


/* ============================================================
   FLECHAS
   ============================================================ */

.bt-intro-slider-arrow {

    position: absolute;

    top: 50%;

    z-index: 20;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border-radius: 50%;

    background:
            rgba(5, 5, 5, .58);

    border:
            1px solid
            rgba(255, 255, 255, .22);

    color: #fff;

    cursor: pointer;

    backdrop-filter:
            blur(12px);

    transform:
            translateY(-50%);

    transition:
            background .3s ease,
            border-color .3s ease,
            transform .3s ease,
            box-shadow .3s ease;

}


/* ============================================================
   FLECHA IZQUIERDA
   ============================================================ */

.bt-intro-slider-prev {

    left: 20px;

}


/* ============================================================
   FLECHA DERECHA
   ============================================================ */

.bt-intro-slider-next {

    right: 20px;

}


/* ============================================================
   HOVER FLECHAS
   ============================================================ */

.bt-intro-slider-arrow:hover {

    background: #d71920;

    border-color: #d71920;

    transform:
            translateY(-50%)
            scale(1.08);

    box-shadow:
            0 10px 30px
            rgba(215, 25, 32, .30);

}


.bt-intro-slider-arrow i {

    font-size: 11px;

}


/* ============================================================
   INDICADORES
   ============================================================ */

.bt-intro-slider-indicators {

    position: absolute;

    left: 50%;
    bottom: 18px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 6px;

    transform:
            translateX(-50%);

}


/* ============================================================
   DOT
   ============================================================ */

.bt-intro-slider-dot {

    width: 6px;
    height: 6px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background:
            rgba(255, 255, 255, .35);

    cursor: pointer;

    transition:
            width .35s ease,
            background .35s ease,
            box-shadow .35s ease;

}


/* ============================================================
   DOT ACTIVO
   ============================================================ */

.bt-intro-slider-dot.is-active {

    width: 25px;

    background: #d71920;

    box-shadow:
            0 0 12px
            rgba(215, 25, 32, .55);

}


/* ============================================================
   CONTADOR
   ============================================================ */

.bt-intro-slider-counter {

    position: absolute;

    right: 22px;
    bottom: 14px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 5px;

    color:
            rgba(255, 255, 255, .55);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.bt-intro-slider-counter
[data-featured-current] {

    color: #d71920;

    font-size: 11px;

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .bt-burgers-intro-card.bt-intro-featured-slider {

        height: 340px;

    }

}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 700px) {

    .bt-burgers-intro-card.bt-intro-featured-slider {

        height: 320px;

        border-radius: 18px;

    }


    .bt-intro-slider-arrow {

        width: 40px;
        height: 40px;

    }


    .bt-intro-slider-prev {

        left: 12px;

    }


    .bt-intro-slider-next {

        right: 12px;

    }

}


/* ============================================================
   MÓVIL PEQUEÑO
   ============================================================ */

@media (max-width: 480px) {

    .bt-burgers-intro-card.bt-intro-featured-slider {

        height: 290px;

        border-radius: 16px;

    }


    .bt-intro-slider-arrow {

        width: 36px;
        height: 36px;

    }


    .bt-intro-slider-indicators {

        bottom: 13px;

    }


    .bt-intro-slider-counter {

        right: 15px;

        bottom: 10px;

    }

}

/* ============================================================
   CATEGORY NAV
   STICKY NAVIGATION
   ============================================================ */

.bt-burgers-nav-section {
    --bt-category-nav-top: 0px;

    position: sticky;

    top: var(--bt-category-nav-top);

    z-index: 100;

    width: 100%;

    background:
            rgba(7, 7, 7, .92);

    border-top:
            1px solid
            rgba(255, 255, 255, .06);

    border-bottom:
            1px solid
            rgba(255, 255, 255, .08);

    backdrop-filter:
            blur(18px);

    -webkit-backdrop-filter:
            blur(18px);

    transition:
            background .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;
}


/* ============================================================
   ESTADO STICKY
   ============================================================ */

.bt-burgers-nav-section.is-sticky {
    background:
            rgba(5, 5, 5, .97);

    border-bottom-color:
            rgba(215, 25, 32, .18);

    box-shadow:
            0 12px 35px
            rgba(0, 0, 0, .35);
}


/* ============================================================
   CONTAINER
   ============================================================ */

.bt-burgers-nav-section
.bt-burgers-container {
    position: relative;

    width: min(
            1200px,
            calc(100% - 80px)
    );

    margin: 0 auto;
}


/* ============================================================
   NAVEGACIÓN
   ============================================================ */

.bt-burgers-category-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 68px;

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: none;

    -ms-overflow-style: none;
}


.bt-burgers-category-nav::-webkit-scrollbar {
    display: none;
}


/* ============================================================
   ITEMS
   ============================================================ */

.bt-burgers-category-nav a {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    min-height: 40px;

    padding:
            0 17px;

    border-radius: 8px;

    color:
            rgba(255, 255, 255, .52);

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    transition:
            color .3s ease,
            background .3s ease;
}


/* ============================================================
   LÍNEA INFERIOR
   ============================================================ */

.bt-burgers-category-nav a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 2px;

    background:
            #d71920;

    transform:
            translateX(-50%);

    transition:
            width .3s ease;
}


/* ============================================================
   HOVER
   ============================================================ */

.bt-burgers-category-nav a:hover {
    color: #fff;

    background:
            rgba(255, 255, 255, .04);
}


/* ============================================================
   ITEM ACTIVO
   ============================================================ */

.bt-burgers-category-nav a.active,
.bt-burgers-category-nav a.is-active {
    color: #fff;

    background:
            rgba(215, 25, 32, .08);
}


.bt-burgers-category-nav a.active::after,
.bt-burgers-category-nav a.is-active::after {
    width: 65%;
}


/* ============================================================
   PUNTO ROJO DEL ITEM ACTIVO
   ============================================================ */

.bt-burgers-category-nav a.active::before,
.bt-burgers-category-nav a.is-active::before {
    content: "";

    width: 4px;
    height: 4px;

    margin-right: 8px;

    border-radius: 50%;

    background:
            #d71920;

    box-shadow:
            0 0 8px
            rgba(215, 25, 32, .7);
}


/* ============================================================
   SECCIONES DE DESTINO
   ============================================================ */

[id="category-products"],
[id^="category-"],
.bt-burgers-products-section,
.bt-burgers-classic-section,
.bt-burgers-notes-section,
.bt-burgers-cta {
    scroll-margin-top:
            calc(
                    var(--bt-category-nav-top) + 75px
            );
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .bt-burgers-nav-section
    .bt-burgers-container {
        width:
                calc(100% - 40px);
    }


    .bt-burgers-category-nav {
        justify-content: flex-start;

        min-height: 62px;
    }

}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 600px) {

    .bt-burgers-nav-section
    .bt-burgers-container {
        width: 100%;
    }


    .bt-burgers-category-nav {
        justify-content: flex-start;

        gap: 4px;

        padding:
                0 15px;

        min-height: 58px;
    }


    .bt-burgers-category-nav a {
        min-height: 38px;

        padding:
                0 14px;

        font-size: 9px;

        letter-spacing: .9px;
    }

}

/* ============================================================
   RECOMENDACIÓN DE LA CASA
   PREMIUM PRODUCT SHOWCASE
   ============================================================ */

.bt-recommendation-section {

    position: relative;

    padding:
            90px 0 100px;

    overflow: hidden;

    background:
            #050505;

}


/* ============================================================
   LÍNEA SUPERIOR
   ============================================================ */

.bt-recommendation-section::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(215, 25, 32, .35),
                    transparent
            );

}


/* ============================================================
   CONTENEDOR
   ============================================================ */

.bt-recommendation-section
.bt-burgers-container {

    position: relative;

    z-index: 2;

}


/* ============================================================
   HEADER
   ============================================================ */

.bt-recommendation-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 35px;

}


/* ============================================================
   EYEBROW
   ============================================================ */

.bt-recommendation-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

    color: #d71920;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}


.bt-recommendation-eyebrow i {

    font-size: 10px;

}


/* ============================================================
   TITULO
   ============================================================ */

.bt-recommendation-heading h2 {

    margin: 0;

    color: #fff;

    font-size: clamp(
            28px,
            3.5vw,
            46px
    );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.8px;

}


.bt-recommendation-heading h2 span {

    color: #d71920;

}


.bt-recommendation-heading p {

    max-width: 600px;

    margin:
            14px 0 0;

    color:
            rgba(255, 255, 255, .48);

    font-size: 13px;

    line-height: 1.7;

}


/* ============================================================
   CONTROLES
   ============================================================ */

.bt-recommendation-controls {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

}


/* ============================================================
   FLECHAS
   ============================================================ */

.bt-recommendation-arrow {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border-radius: 50%;

    border:
            1px solid
            rgba(255, 255, 255, .12);

    background:
            rgba(255, 255, 255, .03);

    color: #fff;

    cursor: pointer;

    transition:
            background .3s ease,
            border-color .3s ease,
            transform .3s ease;

}


.bt-recommendation-arrow:hover {

    background: #d71920;

    border-color: #d71920;

    transform: scale(1.06);

}


.bt-recommendation-arrow i {

    font-size: 10px;

}


/* ============================================================
   CONTADOR
   ============================================================ */

.bt-recommendation-counter {

    display: flex;

    align-items: center;

    gap: 5px;

    min-width: 52px;

    justify-content: center;

    color:
            rgba(255, 255, 255, .35);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

}


.bt-recommendation-counter
[data-recommendation-current] {

    color: #d71920;

    font-size: 12px;

}


/* ============================================================
   SLIDER
   ============================================================ */

.bt-recommendation-slider {

    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 22px;

    background:
            #0a0a0a;

    border:
            1px solid
            rgba(255, 255, 255, .08);

}


/* ============================================================
   TRACK
   ============================================================ */

.bt-recommendation-track {

    position: relative;

    width: 100%;

}


/* ============================================================
   CARD
   ============================================================ */

.bt-recommendation-card {

    display: grid;

    grid-template-columns:
        minmax(320px, 43%)
        1fr;

    width: 100%;

    min-height: 380px;

    opacity: 0;

    visibility: hidden;

    position: absolute;

    inset: 0;

    transform:
            translateX(35px);

    transition:
            opacity .65s ease,
            transform .65s ease,
            visibility .65s ease;

}


.bt-recommendation-card.is-active {

    position: relative;

    opacity: 1;

    visibility: visible;

    transform:
            translateX(0);

}


/* ============================================================
   IMAGEN
   ============================================================ */

.bt-recommendation-image {

    position: relative;

    min-height: 380px;

    overflow: hidden;

    background: #111;

}


.bt-recommendation-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
            transform 1.2s
            cubic-bezier(.2, .8, .2, 1);

}


.bt-recommendation-card.is-active
.bt-recommendation-image img {

    transform: scale(1.035);

}


/* ============================================================
   OVERLAY IMAGEN
   ============================================================ */

.bt-recommendation-image-overlay {

    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    90deg,
                    transparent 55%,
                    #0a0a0a 100%
            );

    pointer-events: none;

}


/* ============================================================
   BADGE
   ============================================================ */

.bt-recommendation-badge {

    position: absolute;

    top: 20px;
    left: 20px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
            8px 11px;

    border-radius: 7px;

    background:
            rgba(215, 25, 32, .90);

    color: #fff;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    backdrop-filter:
            blur(8px);

}


.bt-recommendation-badge i {

    font-size: 8px;

}


/* ============================================================
   CONTENIDO
   ============================================================ */

.bt-recommendation-content {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-width: 0;

    padding:
            45px 45px 35px;

}


/* ============================================================
   NUMERO
   ============================================================ */

.bt-recommendation-number {

    display: block;

    margin-bottom: 10px;

    color:
            rgba(215, 25, 32, .65);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

}


/* ============================================================
   NOMBRE
   ============================================================ */

.bt-recommendation-main h3 {

    margin: 0;

    color: #fff;

    font-size: clamp(
            28px,
            3vw,
            42px
    );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.4px;

}


/* ============================================================
   DESCRIPCIÓN
   ============================================================ */

.bt-recommendation-description {

    max-width: 560px;

    margin:
            18px 0 0;

    color:
            rgba(255, 255, 255, .55);

    font-size: 13px;

    line-height: 1.7;

}


/* ============================================================
   INGREDIENTES
   ============================================================ */

.bt-recommendation-ingredients {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    max-width: 600px;

    margin-top: 18px;

    color:
            rgba(255, 255, 255, .45);

    font-size: 11px;

    line-height: 1.6;

}


.bt-recommendation-ingredients i {

    flex-shrink: 0;

    margin-top: 3px;

    color: #d71920;

}


/* ============================================================
   META
   ============================================================ */

.bt-recommendation-meta {

    display: inline-flex;

    margin-top: 14px;

}


.bt-recommendation-meta span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
            7px 10px;

    border-radius: 6px;

    background:
            rgba(255, 255, 255, .04);

    border:
            1px solid
            rgba(255, 255, 255, .06);

    color:
            rgba(255, 255, 255, .48);

    font-size: 9px;

    font-weight: 700;

}


.bt-recommendation-meta i {

    color: #d71920;

}


/* ============================================================
   ALÉRGENOS
   ============================================================ */

.bt-recommendation-allergens {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 12px;

    color:
            rgba(255, 255, 255, .35);

    font-size: 9px;

    line-height: 1.5;

}


.bt-recommendation-allergens i {

    color:
            #d71920;

    margin-top: 2px;

}


/* ============================================================
   FOOTER
   ============================================================ */

.bt-recommendation-footer {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-top: 30px;

    padding-top: 25px;

    border-top:
            1px solid
            rgba(255, 255, 255, .07);

}


/* ============================================================
   PRECIOS
   ============================================================ */

.bt-recommendation-prices {

    display: flex;

    align-items: flex-end;

    gap: 35px;

}


.bt-recommendation-price,
.bt-recommendation-combo {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.bt-recommendation-price span,
.bt-recommendation-combo span {

    color:
            rgba(255, 255, 255, .35);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.bt-recommendation-price strong {

    color: #fff;

    font-size: 20px;

    font-weight: 800;

}


.bt-recommendation-combo strong {

    color: #d71920;

    font-size: 18px;

    font-weight: 800;

}


/* ============================================================
   BOTÓN
   ============================================================ */

.bt-recommendation-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 44px;

    padding:
            0 18px;

    border-radius: 7px;

    background:
            #d71920;

    border:
            1px solid
            #d71920;

    color: #fff;

    text-decoration: none;

    font-size: 9px;

    font-weight: 800;

    white-space: nowrap;

    transition:
            background .3s ease,
            transform .3s ease,
            box-shadow .3s ease;

}


.bt-recommendation-button:hover {

    color: #fff;

    background:
            #ed2028;

    transform:
            translateY(-2px);

    box-shadow:
            0 10px 25px
            rgba(215, 25, 32, .25);

}


.bt-recommendation-button i {

    font-size: 9px;

}


/* ============================================================
   DOTS
   ============================================================ */

.bt-recommendation-dots {

    position: absolute;

    left: 50%;

    bottom: 15px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 6px;

    transform:
            translateX(-50%);

}


.bt-recommendation-dot {

    width: 6px;
    height: 6px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background:
            rgba(255, 255, 255, .25);

    cursor: pointer;

    transition:
            width .3s ease,
            background .3s ease;

}


.bt-recommendation-dot.is-active {

    width: 24px;

    background:
            #d71920;

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .bt-recommendation-section {

        padding:
                70px 0 80px;

    }


    .bt-recommendation-card {

        grid-template-columns:
            40% 60%;

        min-height: 350px;

    }


    .bt-recommendation-image {

        min-height: 350px;

    }


    .bt-recommendation-content {

        padding:
                35px 30px 30px;

    }


    .bt-recommendation-footer {

        gap: 15px;

    }

}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 700px) {

    .bt-recommendation-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

    }


    .bt-recommendation-controls {

        align-self: flex-end;

    }


    .bt-recommendation-card {

        display: flex;

        flex-direction: column;

        min-height: 0;

    }


    .bt-recommendation-image {

        height: 260px;

        min-height: 260px;

    }


    .bt-recommendation-image-overlay {

        background:
                linear-gradient(
                        to bottom,
                        transparent 45%,
                        #0a0a0a 100%
                );

    }


    .bt-recommendation-content {

        padding:
                28px 22px 40px;

    }


    .bt-recommendation-main h3 {

        font-size: 30px;

    }


    .bt-recommendation-footer {

        align-items: stretch;

        flex-direction: column;

        gap: 20px;

    }


    .bt-recommendation-button {

        width: 100%;

    }


    .bt-recommendation-prices {

        justify-content: flex-start;

    }

}


/* ============================================================
   MÓVIL PEQUEÑO
   ============================================================ */

@media (max-width: 480px) {

    .bt-recommendation-section {

        padding:
                55px 0 65px;

    }


    .bt-recommendation-heading h2 {

        font-size: 30px;

    }


    .bt-recommendation-image {

        height: 220px;

        min-height: 220px;

    }


    .bt-recommendation-content {

        padding:
                24px 18px 38px;

    }


    .bt-recommendation-prices {

        gap: 22px;

    }

}

/* ============================================================
   HERO SLIDER
   RESPONSIVE PREMIUM
   ============================================================ */


/* ============================================================
   DESKTOP GRANDE
   > 1200px
   ============================================================ */

@media (min-width: 1201px) {

    .bt-hero-slider {
        height: 680px;
        min-height: 680px;
    }


    .bt-hero-slider .bt-hero-slide img {
        object-position: center center;
    }


    .bt-hero-slider .bt-burgers-hero-actions {
        left: 50px;
        bottom: 68px;
    }


    .bt-hero-slider .bt-hero-slider-controls {
        right: 42px;
        bottom: 58px;
    }


    .bt-hero-slider .bt-hero-slider-progress {
        left: 35px;
        right: 35px;
        bottom: 20px;
    }

}


/* ============================================================
   LAPTOP
   901px - 1200px
   ============================================================ */

@media (min-width: 901px) and (max-width: 1200px) {

    .bt-hero-slider {

        height: 620px;

        min-height: 620px;

        margin-top: 100px;

    }


    .bt-hero-slider .bt-hero-slide img {

        object-position: center center;

    }


    /* ----------------------------------------
       BOTONES
    ---------------------------------------- */

    .bt-hero-slider .bt-burgers-hero-actions {

        left: 38px;

        bottom: 70px;

        gap: 10px;

    }


    .bt-hero-slider
    .bt-burgers-primary-button,
    .bt-hero-slider
    .bt-burgers-secondary-button {

        min-height: 45px;

        padding:
                0 17px;

        font-size: 10px;

    }


    /* ----------------------------------------
       CONTROLES
    ---------------------------------------- */

    .bt-hero-slider .bt-hero-slider-controls {

        right: 32px;

        bottom: 57px;

        gap: 9px;

    }


    .bt-hero-slider
    .bt-hero-slider-arrow {

        width: 43px;

        height: 43px;

    }


    /* ----------------------------------------
       PROGRESO
    ---------------------------------------- */

    .bt-hero-slider
    .bt-hero-slider-progress {

        left: 30px;

        right: 30px;

        bottom: 19px;

    }

}


/* ============================================================
   TABLET
   601px - 900px
   ============================================================ */

@media (min-width: 601px) and (max-width: 900px) {

    .bt-hero-slider {

        height: 580px;

        min-height: 580px;

        margin-top: 100px;

    }


    /* ----------------------------------------
       IMAGEN
    ---------------------------------------- */

    .bt-hero-slider .bt-hero-slide img {

        object-position: center center;

    }


    /* ----------------------------------------
       BOTONES
    ---------------------------------------- */

    .bt-hero-slider .bt-burgers-hero-actions {

        left: 28px;

        bottom: 68px;

        gap: 8px;

    }


    .bt-hero-slider
    .bt-burgers-primary-button,
    .bt-hero-slider
    .bt-burgers-secondary-button {

        min-height: 44px;

        padding:
                0 15px;

        border-radius: 7px;

        font-size: 10px;

    }


    .bt-hero-slider
    .bt-burgers-primary-button i,
    .bt-hero-slider
    .bt-burgers-secondary-button i {

        font-size: 10px;

    }


    /* ----------------------------------------
       CONTROLES
    ---------------------------------------- */

    .bt-hero-slider .bt-hero-slider-controls {

        right: 25px;

        bottom: 55px;

        gap: 8px;

    }


    .bt-hero-slider
    .bt-hero-slider-arrow {

        width: 40px;

        height: 40px;

    }


    .bt-hero-slider
    .bt-hero-slider-counter {

        min-width: 72px;

        font-size: 9px;

    }


    /* ----------------------------------------
       PROGRESO
    ---------------------------------------- */

    .bt-hero-slider
    .bt-hero-slider-progress {

        left: 25px;

        right: 25px;

        bottom: 18px;

    }

}


/* ============================================================
   MÓVIL
   481px - 600px
   ============================================================ */

@media (min-width: 481px) and (max-width: 600px) {

    .bt-hero-slider {

        height: clamp(
                500px,
                82svh,
                620px
        );

        min-height: 500px;

        max-height: 620px;

        margin-top: 100px;

    }


    /* ----------------------------------------
       IMAGEN
    ---------------------------------------- */

    .bt-hero-slider .bt-hero-slide img {

        object-position: center center;

    }


    /* ----------------------------------------
       CONTENIDO
    ---------------------------------------- */

    .bt-hero-slider .bt-burgers-hero-content {

        inset: 0;

    }


    /* ----------------------------------------
       BOTONES
    ---------------------------------------- */

    .bt-hero-slider .bt-burgers-hero-actions {

        left: 18px;

        right: 18px;

        bottom: 92px;

        display: flex;

        align-items: stretch;

        flex-direction: column;

        justify-content: center;

        gap: 8px;

    }


    .bt-hero-slider
    .bt-burgers-primary-button,
    .bt-hero-slider
    .bt-burgers-secondary-button {

        flex: 1;

        min-height: 45px;

        padding:
                0 12px;

        border-radius: 7px;

        font-size: 0.75rem;

        white-space: nowrap;

    }


    /* ----------------------------------------
       CONTROLES
    ---------------------------------------- */

    .bt-hero-slider .bt-hero-slider-controls {

        right: 50%;

        bottom: 45px;

        transform:
                translateX(50%);

        gap: 8px;

    }


    .bt-hero-slider
    .bt-hero-slider-arrow {

        width: 37px;

        height: 37px;

    }


    .bt-hero-slider
    .bt-hero-slider-counter {

        min-width: 68px;

        font-size: 8px;

    }


    .bt-hero-slider
    .bt-hero-slider-counter-line {

        width: 13px;

    }


    /* ----------------------------------------
       PROGRESO
    ---------------------------------------- */

    .bt-hero-slider
    .bt-hero-slider-progress {

        left: 18px;

        right: 18px;

        bottom: 17px;

    }

}


/* ============================================================
   MÓVIL PEQUEÑO
   376px - 480px
   ============================================================ */

@media (min-width: 376px) and (max-width: 480px) {

    .bt-hero-slider {

        height: clamp(
                500px,
                82svh,
                620px
        );

        min-height: 500px;

        max-height: 620px;

        margin-top: 100px;

    }



    /* ----------------------------------------
       IMAGEN
    ---------------------------------------- */

    .bt-hero-slider .bt-hero-slide img {

        object-position: center center;

    }



    .bt-hero-slider
    .bt-burgers-primary-button,
    .bt-hero-slider
    .bt-burgers-secondary-button {

        min-height: 43px;

        padding:
                0 10px;

        font-size: 8.5px;

        gap: 6px;

    }


    .bt-hero-slider
    .bt-burgers-primary-button i,
    .bt-hero-slider
    .bt-burgers-secondary-button i {

        font-size: 9px;

    }


    /* ----------------------------------------
       CONTROLES
    ---------------------------------------- */

    .bt-hero-slider .bt-hero-slider-controls {

        right: 50%;

        bottom: 45px;

        transform:
                translateX(50%);

    }


    .bt-hero-slider
    .bt-hero-slider-arrow {

        width: 35px;

        height: 35px;

    }


    .bt-hero-slider
    .bt-hero-slider-counter {

        min-width: 64px;

        font-size: 8px;

    }


    /* ----------------------------------------
       PROGRESO
    ---------------------------------------- */

    .bt-hero-slider
    .bt-hero-slider-progress {

        left: 15px;

        right: 15px;

        bottom: 17px;

    }

}


/* ============================================================
   MÓVIL MUY PEQUEÑO
   <= 375px
   ============================================================ */

@media (max-width: 375px) {

    .bt-hero-slider {

        height: clamp(
                500px,
                82svh,
                620px
        );

        min-height: 500px;

        max-height: 620px;

    }



    /* ----------------------------------------
       IMAGEN
    ---------------------------------------- */

    .bt-hero-slider .bt-hero-slide img {

        object-position: center center;

    }


    /* ----------------------------------------
       BOTONES
    ---------------------------------------- */

    .bt-hero-slider .bt-burgers-hero-actions {

        left: 15px;

        right: 15px;

        bottom: 94px;

        display: flex;

        flex-direction: column;

        gap: 7px;

    }


    .bt-hero-slider
    .bt-burgers-primary-button,
    .bt-hero-slider
    .bt-burgers-secondary-button {

        width: 100%;

        min-height: 40px;

        padding:
                0 12px;

        font-size: 9px;

    }


    /* ----------------------------------------
       CONTROLES
    ---------------------------------------- */

    .bt-hero-slider .bt-hero-slider-controls {

        right: 50%;

        bottom: 46px;

        transform:
                translateX(50%);

    }


    .bt-hero-slider
    .bt-hero-slider-arrow {

        width: 34px;

        height: 34px;

    }


    .bt-hero-slider
    .bt-hero-slider-counter {

        min-width: 60px;

        font-size: 7px;

    }


    /* ----------------------------------------
       PROGRESO
    ---------------------------------------- */

    .bt-hero-slider
    .bt-hero-slider-progress {

        left: 15px;

        right: 15px;

        bottom: 16px;

        height: 2px;

    }

}

/* ============================================================
   BURGER TOWN CATEGORY NAV
   RESPONSIVE
   ============================================================ */


/* ============================================================
   DESKTOP
   > 1200px
   ============================================================ */

@media (min-width: 1201px) {

    .bt-burgers-nav-section {
        min-height: 68px;
    }


    .bt-burgers-nav-section
    .bt-burgers-container {

        width: min(
                1200px,
                calc(100% - 80px)
        );

        margin: 0 auto;

    }


    .bt-burgers-category-nav {

        min-height: 68px;

        gap: 8px;

        justify-content: center;

    }


    .bt-burgers-category-nav a {

        min-height: 40px;

        padding:
                0 18px;

        font-size: 10px;

        letter-spacing: 1.2px;

    }

}


/* ============================================================
   LAPTOP
   901px - 1200px
   ============================================================ */

@media (min-width: 901px) and (max-width: 1200px) {

    .bt-burgers-nav-section {

        min-height: 64px;

    }


    .bt-burgers-nav-section
    .bt-burgers-container {

        width:
                calc(100% - 50px);

        margin: 0 auto;

    }


    .bt-burgers-category-nav {

        min-height: 64px;

        gap: 5px;

        justify-content: center;

    }


    .bt-burgers-category-nav a {

        min-height: 38px;

        padding:
                0 14px;

        font-size: 9px;

        letter-spacing: 1px;

    }

}


/* ============================================================
   TABLET
   601px - 900px
   ============================================================ */

@media (min-width: 601px) and (max-width: 900px) {

    .bt-burgers-nav-section {

        min-height: 60px;

    }


    .bt-burgers-nav-section
    .bt-burgers-container {

        width: 100%;

        margin: 0;

    }


    .bt-burgers-category-nav {

        min-height: 60px;

        width: 100%;

        justify-content: flex-start;

        gap: 4px;

        padding:
                0 20px;

        overflow-x: auto;

        overflow-y: hidden;

        scroll-behavior: smooth;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }


    .bt-burgers-category-nav::-webkit-scrollbar {

        display: none;

    }


    .bt-burgers-category-nav a {

        flex:
                0 0 auto;

        min-height: 38px;

        padding:
                0 15px;

        border-radius: 7px;

        font-size: 9px;

        letter-spacing: 1px;

        white-space: nowrap;

    }


    .bt-burgers-category-nav a::after {

        bottom: 1px;

    }

}


/* ============================================================
   MÓVIL
   481px - 600px
   ============================================================ */

@media (min-width: 481px) and (max-width: 600px) {

    .bt-burgers-nav-section {

        min-height: 56px;

    }


    .bt-burgers-nav-section
    .bt-burgers-container {

        width: 100%;

        margin: 0;

    }


    .bt-burgers-category-nav {

        min-height: 56px;

        width: 100%;

        justify-content: flex-start;

        gap: 3px;

        padding:
                0 14px;

        overflow-x: auto;

        overflow-y: hidden;

        scroll-behavior: smooth;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }


    .bt-burgers-category-nav::-webkit-scrollbar {

        display: none;

    }


    .bt-burgers-category-nav a {

        flex:
                0 0 auto;

        min-height: 36px;

        padding:
                0 13px;

        border-radius: 7px;

        font-size: 8.5px;

        letter-spacing: .8px;

        white-space: nowrap;

    }


    .bt-burgers-category-nav a.active::before,
    .bt-burgers-category-nav a.is-active::before {

        width: 3px;

        height: 3px;

        margin-right: 6px;

    }


    .bt-burgers-category-nav a.active::after,
    .bt-burgers-category-nav a.is-active::after {

        width: 60%;

    }

}


/* ============================================================
   MÓVIL PEQUEÑO
   376px - 480px
   ============================================================ */

@media (min-width: 376px) and (max-width: 480px) {

    .bt-burgers-nav-section {

        min-height: 54px;

    }


    .bt-burgers-nav-section
    .bt-burgers-container {

        width: 100%;

        margin: 0;

    }


    .bt-burgers-category-nav {

        min-height: 54px;

        justify-content: flex-start;

        gap: 3px;

        padding:
                0 12px;

        overflow-x: auto;

        overflow-y: hidden;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }


    .bt-burgers-category-nav::-webkit-scrollbar {

        display: none;

    }


    .bt-burgers-category-nav a {

        flex:
                0 0 auto;

        min-height: 35px;

        padding:
                0 12px;

        border-radius: 6px;

        font-size: 8px;

        letter-spacing: .7px;

        white-space: nowrap;

    }


    .bt-burgers-category-nav a.active::before,
    .bt-burgers-category-nav a.is-active::before {

        width: 3px;

        height: 3px;

        margin-right: 5px;

    }


    .bt-burgers-category-nav a.active::after,
    .bt-burgers-category-nav a.is-active::after {

        width: 55%;

    }

}


/* ============================================================
   MÓVIL MUY PEQUEÑO
   <= 375px
   ============================================================ */

@media (max-width: 375px) {

    .bt-burgers-nav-section {

        min-height: 52px;

    }


    .bt-burgers-nav-section
    .bt-burgers-container {

        width: 100%;

        margin: 0;

    }


    .bt-burgers-category-nav {

        min-height: 52px;

        justify-content: flex-start;

        gap: 2px;

        padding:
                0 10px;

        overflow-x: auto;

        overflow-y: hidden;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }


    .bt-burgers-category-nav::-webkit-scrollbar {

        display: none;

    }


    .bt-burgers-category-nav a {

        flex:
                0 0 auto;

        min-height: 34px;

        padding:
                0 10px;

        border-radius: 6px;

        font-size: 7.5px;

        letter-spacing: .6px;

        white-space: nowrap;

    }


    .bt-burgers-category-nav a.active::before,
    .bt-burgers-category-nav a.is-active::before {

        width: 3px;

        height: 3px;

        margin-right: 4px;

    }


    .bt-burgers-category-nav a.active::after,
    .bt-burgers-category-nav a.is-active::after {

        width: 50%;

    }

}


/* ============================================================
   MEJORA PARA TOUCH
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    .bt-burgers-category-nav a:hover {

        background: transparent;

    }


    .bt-burgers-category-nav a:active {

        background:
                rgba(215, 25, 32, .10);

    }

}


/* ============================================================
   STICKY — SOMBRA EN MÓVIL
   ============================================================ */

@media (max-width: 900px) {

    .bt-burgers-nav-section.is-sticky {

        box-shadow:
                0 8px 25px
                rgba(0, 0, 0, .45);

    }

}

/* =========================================================
   PRECIOS / PRESENTACIONES DE PRODUCTOS
========================================================= */

.bt-product-price-options {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bt-product-price-options-title {
    margin-bottom: 10px;
    color: #a8adb5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.bt-product-price-options-head {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 90px 90px;
    gap: 10px;
    margin-bottom: 4px;

    color: #707782;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.bt-product-price-option {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 90px 90px;
    align-items: center;
    gap: 10px;

    padding: 9px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.bt-product-price-option:last-child {
    border-bottom: none;
}

.bt-product-price-option-quantity strong {
    color: #f4f4f4;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.bt-product-price-option-value {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bt-product-price-option-value small {
    color: #707782;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.07em;
}

.bt-product-price-option-value strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.bt-product-price-option-combo strong {
    color: var(--bt-red, #d71920);
}

.bt-price-option-empty {
    color: #555b64;
    font-size: 13px;
}

@media (max-width: 576px) {

    .bt-product-price-options-head,
    .bt-product-price-option {
        grid-template-columns: minmax(90px, 1fr) 75px 75px;
        gap: 7px;
    }

    .bt-product-price-option-quantity strong {
        font-size: 11px;
    }

    .bt-product-price-option-value strong {
        font-size: 12px;
    }
}

/* =========================================================
   PRECIOS - PRODUCTOS DESTACADOS
========================================================= */

.bt-featured-price-options {
    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, .08);
}

.bt-featured-price-options-title {
    margin-bottom: 10px;

    color: #777;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .12em;
}

.bt-featured-price-options-head {
    display: grid;

    grid-template-columns:
        minmax(100px, 1fr)
        75px
        75px;

    gap: 10px;

    margin-bottom: 2px;

    color: #666;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .08em;
}

.bt-featured-price-option {
    display: grid;

    grid-template-columns:
        minmax(100px, 1fr)
        75px
        75px;

    align-items: center;

    gap: 10px;

    padding: 8px 0;

    border-bottom:
            1px solid rgba(255, 255, 255, .055);
}

.bt-featured-price-option:last-child {
    border-bottom: none;
}


/* CANTIDAD */

.bt-featured-price-option-quantity strong {
    display: block;

    color: #f5f5f5;

    font-size: 10px;
    font-weight: 800;

    line-height: 1.2;

    text-transform: uppercase;
}


/* PRECIOS */

.bt-featured-price-option-value {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.bt-featured-price-option-value small {
    display: block;

    margin: 0;

    color: #666;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .06em;
}

.bt-featured-price-option-value strong {
    display: block;

    color: #fff;

    font-size: 11px;
    font-weight: 800;
}


/* COMBO */

.bt-featured-price-option-combo strong {
    color: var(--bt-red, #d71920);
}

.bt-featured-price-option-empty {
    color: #555;

    font-size: 11px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 650px) {

    .bt-featured-price-options-head,
    .bt-featured-price-option {

        grid-template-columns:
            minmax(90px, 1fr)
            70px
            70px;

        gap: 7px;
    }

    .bt-featured-price-option-quantity strong {
        font-size: 9px;
    }

    .bt-featured-price-option-value strong {
        font-size: 10px;
    }
}


/* ================================================================
   BURGER TOWN - LOGIN OVERRIDE
================================================================ */

.velox-login-page {

    --bt-red: #d71920;
    --bt-red-dark: #a90f15;
    --bt-red-light: #ef3038;
    --bt-yellow: #ffd21c;

    min-height: 100vh;

    background:
            radial-gradient(
                    circle at 8% 15%,
                    rgba(215, 25, 32, .16),
                    transparent 32%
            ),
            radial-gradient(
                    circle at 92% 85%,
                    rgba(215, 25, 32, .12),
                    transparent 32%
            ),
            #050505 !important;

    color: #fff;

    padding: 35px 20px;
}


/* ================================================================
   BACKGROUND
================================================================ */

.velox-login-page .bg-grid {

    opacity: .35;

    background-image:
            linear-gradient(
                    rgba(255,255,255,.025) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255,255,255,.025) 1px,
                    transparent 1px
            );

    background-size: 50px 50px;
}

.velox-login-page .bg-orb-1 {

    background:
            rgba(215, 25, 32, .20);

}

.velox-login-page .bg-orb-2 {

    background:
            rgba(255, 210, 28, .08);

}

.velox-login-page .bg-orb-3 {

    background:
            rgba(215, 25, 32, .12);

}


/* ================================================================
   CARD
================================================================ */

.velox-login-page .login-card {

    background: #0b0b0b;

    border:
            1px solid rgba(255,255,255,.08);

    box-shadow:
            0 35px 90px rgba(0,0,0,.60),
            0 0 0 1px rgba(215,25,32,.04);

}


/* ================================================================
   LEFT PANEL
================================================================ */

.velox-login-page .login-showcase {

    background:

            radial-gradient(
                    circle at 85% 15%,
                    rgba(215,25,32,.25),
                    transparent 32%
            ),

            radial-gradient(
                    circle at 10% 90%,
                    rgba(215,25,32,.15),
                    transparent 35%
            ),

            linear-gradient(
                    145deg,
                    #070707,
                    #150304 55%,
                    #080808
            );

}


/* Línea superior Burger Town */

.velox-login-page .login-showcase::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    var(--bt-red),
                    var(--bt-yellow),
                    var(--bt-red),
                    transparent
            );

    z-index: 10;

}


/* ================================================================
   LOGO
================================================================ */

.velox-login-page .login-brand .brand-icon,
.velox-login-page .mobile-brand .brand-icon {

    width: 90px;
    height: 65px;

    background: transparent !important;

    border-radius: 0;

    box-shadow: none !important;

    overflow: visible;

}

.velox-login-page .login-brand .brand-icon .brand-logo,
.velox-login-page .mobile-brand .brand-icon .brand-logo {

    width: 100%;
    height: 100%;

    padding: 0;

    object-fit: contain;

    object-position: center;

    border-radius: 0;

    filter:
            drop-shadow(
                    0 8px 18px
                    rgba(215,25,32,.25)
            );

}

.velox-login-page .login-brand .brand-name,
.velox-login-page .mobile-brand .brand-name {

    color: #ffffff;

}


/* ================================================================
   BADGE
================================================================ */

.velox-login-page .showcase-badge {

    color: var(--bt-yellow);

    border-color:
            rgba(215,25,32,.30);

    background:
            rgba(215,25,32,.08);

}

.velox-login-page .badge-dot {

    background:
            var(--bt-red);

    box-shadow:
            0 0 0 4px
            rgba(215,25,32,.12);

}


/* ================================================================
   HERO TITLE
================================================================ */

.velox-login-page .showcase-main h1 {

    color: #ffffff;

}

.velox-login-page .showcase-main h1 span {

    color: transparent;

    background:
            linear-gradient(
                    90deg,
                    #ffffff 0%,
                    var(--bt-yellow) 100%
            );

    background-clip: text;
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


/* ================================================================
   HERO DESCRIPTION
================================================================ */

.velox-login-page .showcase-main > p {

    color:
            rgba(255,255,255,.52);

}


/* ================================================================
   FEATURES
================================================================ */

.velox-login-page .feature-icon {

    background:
            rgba(215,25,32,.10);

    border:
            1px solid rgba(215,25,32,.22);

    color:
            var(--bt-yellow);

}

.velox-login-page .showcase-feature strong {

    color: #ffffff;

}

.velox-login-page .showcase-feature span {

    color:
            rgba(255,255,255,.42);

}


/* ================================================================
   STATS
================================================================ */

.velox-login-page .showcase-bottom {

    border-top:
            1px solid rgba(255,255,255,.08);

}

.velox-login-page .mini-stat strong {

    color:
            var(--bt-yellow);

}

.velox-login-page .mini-stat span {

    color:
            rgba(255,255,255,.38);

}

.velox-login-page .stat-divider {

    background:
            rgba(255,255,255,.10);

}


/* ================================================================
   RIGHT LOGIN PANEL
================================================================ */

.velox-login-page .login-form-panel {

    background:
            #111111;

}

.velox-login-page .login-header h2 {

    color: #ffffff;

}

.velox-login-page .login-header p {

    color:
            rgba(255,255,255,.48);

}

.velox-login-page .login-welcome {

    color:
            var(--bt-red-light);

}


/* ================================================================
   LABELS
================================================================ */

.velox-login-page .login-field label {

    color:
            rgba(255,255,255,.72);

}


/* ================================================================
   INPUTS
================================================================ */

.velox-login-page .input-wrapper {

    background:
            #191919;

    border-color:
            rgba(255,255,255,.09);

}

.velox-login-page .input-wrapper:focus-within {

    background:
            #1c1c1c;

    border-color:
            var(--bt-red);

    box-shadow:
            0 0 0 4px
            rgba(215,25,32,.10);

}

.velox-login-page .input-icon {

    color:
            rgba(255,255,255,.35);

}

.velox-login-page .input-wrapper:focus-within
.input-icon {

    color:
            var(--bt-red-light);

}

.velox-login-page .login-input {

    color: #ffffff;

}

.velox-login-page .login-input::placeholder {

    color:
            rgba(255,255,255,.28);

}


/* Chrome autofill */

.velox-login-page .login-input:-webkit-autofill,
.velox-login-page .login-input:-webkit-autofill:hover,
.velox-login-page .login-input:-webkit-autofill:focus {

    -webkit-text-fill-color: #ffffff;

    -webkit-box-shadow:
            0 0 0 1000px #191919 inset;

}


/* ================================================================
   PASSWORD BUTTON
================================================================ */

.velox-login-page .btn-toggle-password {

    color:
            rgba(255,255,255,.35);

}

.velox-login-page .btn-toggle-password:hover {

    color:
            var(--bt-red-light);

}


/* ================================================================
   FORGOT PASSWORD
================================================================ */

.velox-login-page .forgot-password-link {

    color:
            var(--bt-red-light);

}

.velox-login-page .forgot-password-link:hover {

    color:
            var(--bt-yellow);

}


/* ================================================================
   REMEMBER SESSION
================================================================ */

.velox-login-page .remember-me {

    color:
            rgba(255,255,255,.45) !important;

}

.velox-login-page .custom-checkbox {

    background:
            #191919;

    border-color:
            rgba(255,255,255,.15);

}

.velox-login-page .remember-me input:checked
+ .custom-checkbox {

    background:
            var(--bt-red);

    border-color:
            var(--bt-red);

}


/* ================================================================
   LOGIN BUTTON
================================================================ */

.velox-login-page .btn-login-submit {

    background:
            linear-gradient(
                    135deg,
                    var(--bt-red),
                    var(--bt-red-dark)
            );

    box-shadow:
            0 12px 30px
            rgba(215,25,32,.28);

}

.velox-login-page .btn-login-submit:hover {

    box-shadow:
            0 17px 38px
            rgba(215,25,32,.40);

}


/* ================================================================
   SECURITY
================================================================ */

.velox-login-page .login-security {

    background:
            #171717;

    border-color:
            rgba(255,255,255,.07);

}

.velox-login-page .security-icon {

    background:
            rgba(215,25,32,.10);

    color:
            var(--bt-red-light);

}

.velox-login-page .login-security strong {

    color:
            rgba(255,255,255,.75);

}

.velox-login-page .login-security span {

    color:
            rgba(255,255,255,.35);

}


/* ================================================================
   FOOTER LOGIN
================================================================ */

.velox-login-page .login-footer {

    color:
            rgba(255,255,255,.25);

}

.velox-login-page .footer-separator {

    color:
            var(--bt-red);

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 767.98px) {

    .velox-login-page {

        padding:
                15px;

        background:
                radial-gradient(
                        circle at 50% 0%,
                        rgba(215,25,32,.16),
                        transparent 40%
                ),
                #050505 !important;

    }

    .velox-login-page .login-card {

        border-radius:
                22px;

        border-color:
                rgba(255,255,255,.08);

        box-shadow:
                0 25px 70px
                rgba(0,0,0,.60);

    }

    .velox-login-page .login-form-panel {

        min-height:
                calc(100vh - 30px);

        background:
                #0d0d0d;

    }

    .velox-login-page .mobile-brand {

        display: flex;

    }

}

.toast {
    z-index: 999 !important;
}

/* ============================================================
   SWEETAL2 — TOAST / ALERTAS
   ============================================================ */

.swal2-container {
    z-index: 99999 !important;
}

.swal2-container.swal2-top,
.swal2-container.swal2-top-start,
.swal2-container.swal2-top-end,
.swal2-container.swal2-center,
.swal2-container.swal2-center-start,
.swal2-container.swal2-center-end,
.swal2-container.swal2-bottom,
.swal2-container.swal2-bottom-start,
.swal2-container.swal2-bottom-end {
    z-index: 99999 !important;
}

/* Toast específico de SweetAlert2 */
.swal2-popup.swal2-toast {
    z-index: 100000 !important;
}

/* =========================================================
   MOBILE - DROPDOWNS DEL NAVBAR
   ========================================================= */

@media (max-width: 991px) {

    .bt-navbar-menu .bt-nav-dropdown {
        width: 100%;
        position: relative;
    }

    .bt-navbar-menu .bt-nav-dropdown-menu {
        position: static !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 6px 0 8px 0 !important;

        transform: none !important;

        display: none;

        opacity: 1 !important;
        visibility: visible !important;

        box-shadow: none !important;

        border: 0 !important;
        background: transparent !important;
    }


    /* Dropdown abierto */

    .bt-navbar-menu .bt-nav-dropdown.is-open
    > .bt-nav-dropdown-menu {
        display: block;
    }


    /* Elementos internos */

    .bt-navbar-menu .bt-nav-dropdown-item {
        width: 100% !important;

        display: flex !important;
        align-items: center;

        box-sizing: border-box;

        padding: 12px 18px !important;

        margin: 2px 0 !important;

        transform: none !important;

        text-align: left;

        white-space: normal;
    }


    /* Botón que abre el dropdown */

    .bt-navbar-menu .bt-nav-dropdown-toggle {
        width: 100% !important;

        box-sizing: border-box;

        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }


    /* Iconos */

    .bt-navbar-menu .bt-nav-dropdown-item i {
        flex: 0 0 auto;
        margin-right: 10px;
    }

}


/* =========================================================
   RESPONSIVE - PASOS DE RESERVA
   ========================================================= */

.reservation-steps {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


/* =========================================================
   PASO
   ========================================================= */

.reservation-step {
    flex: 0 1 auto;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;
}


.step-content {
    min-width: 0;
}


.step-label,
.step-description {
    display: block;
}


/* =========================================================
   LÍNEAS
   ========================================================= */

.step-line {
    flex: 1 1 auto;
    min-width: 30px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .reservation-steps {
        gap: 8px;
    }

    .reservation-step {
        gap: 7px;
    }

    .step-indicator {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .step-number {
        font-size: 14px;
    }

    .step-label {
        font-size: 13px;
    }

    .step-description {
        font-size: 11px;
    }

    .step-line {
        min-width: 20px;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .reservation-steps {
        width: 100%;
        gap: 0;
        align-items: flex-start;
    }


    /* -----------------------------------------
       PASO
       ----------------------------------------- */

    .reservation-step {
        flex: 1 1 0;

        width: auto;
        min-width: 0;

        flex-direction: column;
        align-items: center;

        gap: 6px;

        text-align: center;
    }


    /* -----------------------------------------
       CÍRCULO
       ----------------------------------------- */

    .step-indicator {
        flex: 0 0 36px;

        width: 36px;
        height: 36px;

        display: flex;
        align-items: center;
        justify-content: center;
    }


    .step-number {
        font-size: 13px;
        line-height: 1;
    }


    /* -----------------------------------------
       TEXTOS
       ----------------------------------------- */

    .step-content {
        width: 100%;
        min-width: 0;
    }


    .step-label {
        font-size: 11px;
        line-height: 1.2;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .step-description {
        display: none;
    }


    /* -----------------------------------------
       LÍNEAS
       ----------------------------------------- */

    .step-line {
        flex: 1 1 auto;

        min-width: 8px;
        height: 2px;

        margin-top: 17px;
    }

}


/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

    .step-indicator {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .step-number {
        font-size: 12px;
    }

    .step-label {
        font-size: 10px;
    }

    .step-line {
        min-width: 5px;
    }

}

/* =========================================================
   RESULTADOS DE CONSULTA DE RESERVAS
   RESPONSIVE PREMIUM
   ========================================================= */

.reservation-search-results-section {
    width: 100%;
    padding: 48px 0 70px;
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.reservation-search-results-section > .container {
    position: relative;
}


/* =========================================================
   MENSAJE DE RESULTADOS
   ========================================================= */

.reservation-search-message {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 16px;

    padding: 18px 22px;

    border-radius: 14px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background:
            linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.055),
                    rgba(255, 255, 255, 0.025)
            );

    color: rgba(255, 255, 255, 0.82);

    box-shadow:
            0 12px 35px rgba(0, 0, 0, 0.16);

    font-size: 14px;
    line-height: 1.5;

    animation: reservationResultsFadeIn 0.35s ease both;
}


/* Icono */

.reservation-search-message > i {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(220, 20, 20, 0.12);

    color: var(--bt-red, #e21b23);

    font-size: 16px;

    border: 1px solid rgba(220, 20, 20, 0.18);
}


/* Texto */

.reservation-search-message > span {
    min-width: 0;
    display: block;
}


/* =========================================================
   MENSAJE INFORMATIVO
   ========================================================= */

.reservation-search-message-info {
    border-color: rgba(255, 255, 255, 0.08);
}


/* =========================================================
   HEADER DE RESULTADOS
   ========================================================= */

.reservation-results-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


/* Eyebrow */

.reservation-results-eyebrow {
    display: inline-flex;

    align-items: center;
    gap: 7px;

    margin-bottom: 7px;

    color: var(--bt-red, #e21b23);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* Título */

.reservation-results-header h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(26px, 3vw, 38px);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.03em;
}


/* Contador */

.reservation-results-count {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.055);

    border: 1px solid rgba(255, 255, 255, 0.09);

    color: rgba(255, 255, 255, 0.72);

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   GRID
   ========================================================= */

.reservation-results-grid {
    width: 100%;
}


/* =========================================================
   ANIMACIÓN
   ========================================================= */

@keyframes reservationResultsFadeIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .reservation-search-results-section {
        padding: 40px 0 60px;
    }


    .reservation-search-message {
        padding: 17px 19px;
        gap: 13px;
    }


    .reservation-search-message > i {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }


    .reservation-results-header {
        margin-bottom: 25px;
        padding-bottom: 17px;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 767.98px) {

    .reservation-search-results-section {
        padding: 30px 0 45px;
    }


    /* -----------------------------------------
       MENSAJE
       ----------------------------------------- */

    .reservation-search-message {
        align-items: flex-start;

        gap: 12px;

        padding: 15px;

        border-radius: 12px;

        font-size: 13px;

        line-height: 1.55;
    }


    .reservation-search-message > i {
        width: 36px;
        height: 36px;

        flex: 0 0 36px;

        font-size: 14px;
    }


    .reservation-search-message > span {
        padding-top: 1px;
    }


    /* -----------------------------------------
       HEADER
       ----------------------------------------- */

    .reservation-results-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 14px;

        margin-bottom: 22px;

        padding-bottom: 16px;
    }


    .reservation-results-eyebrow {
        font-size: 10px;

        letter-spacing: 0.12em;

        margin-bottom: 6px;
    }


    .reservation-results-header h2 {
        font-size: 27px;
    }


    .reservation-results-count {
        min-height: 34px;

        padding: 7px 12px;

        font-size: 11px;
    }


    /* -----------------------------------------
       GRID
       ----------------------------------------- */

    .reservation-results-grid {
        --bs-gutter-x: 0.9rem;
        --bs-gutter-y: 0.9rem;
    }

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 480px) {

    .reservation-search-results-section {
        padding: 25px 0 40px;
    }


    .reservation-search-message {
        padding: 13px;

        gap: 10px;

        border-radius: 11px;

        font-size: 12.5px;
    }


    .reservation-search-message > i {
        width: 34px;
        height: 34px;

        flex-basis: 34px;

        font-size: 13px;
    }


    .reservation-results-header h2 {
        font-size: 24px;
    }


    .reservation-results-count {
        font-size: 10.5px;
    }

}


/* =========================================================
   MÓVIL MUY PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    .reservation-search-message {
        align-items: center;
    }


    .reservation-search-message > i {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }


    .reservation-results-header h2 {
        font-size: 22px;
    }

}