body {
    background: url("../assets/img/background-01.jpg") top center;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: sans-serif;
    padding-bottom: 80px;/* 📱 Evitar que tape contenido */
}

h1, h2, h3, h4,h5,h6 {
font-family: "Barlow", sans-serif;
}
h1 {
 margin-top:50px;
}

/*--- LOOK TROPICAL ---*/
body.retro-home,
body.retro-miami-menu,
body.sedes-retro,
body.retro-miami {
    min-height: 100vh;
    color: #284041;
    font-family: "Barlow", sans-serif;
    background:
        radial-gradient(circle at 10% 12%, rgba(255, 197, 112, 0.42), transparent 24%),
        radial-gradient(circle at 88% 16%, rgba(82, 208, 198, 0.28), transparent 22%),
        radial-gradient(circle at 78% 84%, rgba(255, 143, 107, 0.22), transparent 20%),
        linear-gradient(180deg, rgba(255, 247, 230, 0.92), rgba(255, 238, 212, 0.96));
    position: relative;
    overflow-x: hidden;
}
body.retro-home::before,
body.retro-miami-menu::before,
body.sedes-retro::before,
body.retro-miami::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 238, 212, 0.24)),
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.14) 0 18px, transparent 18px 36px);
    pointer-events: none;
    z-index: 0;
}


.sedes-retro .header-bar { background: rgba(255, 251, 243, 0.74); border-bottom: 1px solid rgba(255, 255, 255, 0.66); box-shadow: 0 10px 28px rgba(205, 162, 114, 0.18); }
.sedes-shell { position: relative; z-index: 1; width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 92px 0 118px; }
.sedes-hero,.sedes-card { border-radius: 30px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 247, 234, 0.56)), rgba(255, 235, 208, 0.52); }
.sedes-hero { padding: 34px; border: 1px solid rgba(255, 255, 255, 0.52); box-shadow: 0 18px 42px rgba(209, 174, 125, 0.18), 0 6px 18px rgba(82, 208, 198, 0.10); }
.sedes-card { margin-top: 24px; padding: 26px; border: 1px solid rgba(255, 255, 255, 0.54); box-shadow: 0 18px 42px rgba(209, 174, 125, 0.14), 0 8px 20px rgba(82, 208, 198, 0.08); }
.sedes-kicker,.sedes-pill,.sedes-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; }
.sedes-kicker { border: 1px solid rgba(82, 208, 198, 0.24); color: #1aa59a; background: rgba(82, 208, 198, 0.10); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.88rem; }
.sedes-hero h1 { margin: 18px 0 10px; font-family: "Barlow Condensed", sans-serif; font-size: clamp(3.8rem, 8vw, 6rem); line-height: 0.88; text-transform: uppercase; color: #f07d58; text-shadow: none; }
.sedes-hero p { max-width: 660px; margin: 0; font-size: 1.08rem; line-height: 1.75; color: rgba(40, 64, 65, 0.82); }
.sedes-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.sedes-pill,.sedes-badge { border: 1px solid rgba(255, 166, 126, 0.24); background: rgba(255, 157, 114, 0.10); color: #b96540; }
.sedes-card-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }
.sedes-card-head h2 { margin: 0; font-family: "Barlow Condensed", sans-serif; font-size: 2.3rem; text-transform: uppercase; color: #1aa59a; }
.sedes-card-head p { margin: 6px 0 0; color: rgba(40, 64, 65, 0.72); }
.sedes-retro .accordion { width: 100%; margin: 0; display: grid; gap: 16px; }
.sedes-retro .accordion-item { border: 1px solid rgba(255, 210, 170, 0.44); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 245, 232, 0.95)); overflow: hidden; box-shadow: 0 14px 28px rgba(214, 181, 138, 0.18); }
.sedes-retro .accordion-header { padding: 22px 24px; background: transparent; color: #284041; font-size: 1.18rem; font-weight: 600; align-items: center; }
.sedes-retro .accordion-header i { color: #f07d58; transition: transform 0.25s ease; }
.sedes-retro .accordion-item.active .accordion-header i { transform: rotate(180deg); }
.sedes-retro .accordion-content { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 232, 0.98)); color: #284041; padding: 0 24px; }
.sedes-retro .accordion-item.active .accordion-content { padding: 0; }
.sede-layout { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 24px; padding: 24px; }
.sede-img { width: 100%; min-height: 280px; object-fit: cover; border-radius: 24px; margin: 0; box-shadow: 0 14px 28px rgba(214, 181, 138, 0.18); }
.sede-media { position: relative; }
.sede-overlay { position: absolute; left: 16px; bottom: 16px; padding: 9px 14px; border-radius: 999px; background: rgba(82, 208, 198, 0.10); border: 1px solid rgba(82, 208, 198, 0.22); color: #1aa59a; }
.sede-copy h3 { margin: 0 0 10px; font-family: "Barlow Condensed", sans-serif; font-size: 2.15rem; text-transform: uppercase; color: #f07d58; }
.sede-address { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; color: rgba(40, 64, 65, 0.82); font-size: 1.02rem; }
.sede-address i { margin-top: 4px; color: #ed7b57; }
.schedule-card { padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgb(249 207 23 / 29%); }
.schedule-title { margin-bottom: 12px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ed7b57; }
.schedule-grid { display: grid; gap: 10px; }
.schedule-row { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(40, 64, 65, 0.08); }
.schedule-row:last-child { border-bottom: 0; padding-bottom: 0; }
.schedule-row span:first-child { font-weight: 600; color: #284041; }
.schedule-row span:last-child { color: rgba(40, 64, 65, 0.72); text-align: right; }
.hoy,.hoy span:last-child { color: #ed7b57; font-weight: 700; }
.sede-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sede-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 190px; padding: 13px 18px; border: 1px solid rgba(255, 166, 126, 0.24); border-radius: 14px; background: linear-gradient(135deg, #ffd36f, #ff9d72); color: #214247; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 14px 26px rgba(255, 157, 114, 0.18); }
.sede-btn.secondary { background: #ffffff; color: #f07d58; }
.modal-sedes { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; padding: 20px; background: rgba(255, 238, 212, 0.52); backdrop-filter: blur(10px); z-index: 1001; }
.sedes-retro .modal-content { position: relative; width: min(440px, 100%); padding: 28px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 232, 0.98)); color: #284041; border: 1px solid rgba(255, 210, 170, 0.44); }
.close { position: absolute; right: 16px; top: 14px; font-size: 1.1rem; }
.sedes-retro #mapLink { display: inline-flex; width: auto; }
.sedes-retro .menu-footer { background: rgba(255, 248, 238, 0.90); border-top: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 -8px 24px rgba(214, 181, 138, 0.16); }
.sedes-retro .card-menu p { color: #4b6668; }
.sedes-retro .card-menu:hover { background: rgba(255, 211, 111, 0.14); }
@media (max-width: 991px) { .sedes-shell { padding-top: 88px; } .sedes-hero,.sedes-card { padding: 22px; } .sede-layout { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .sedes-shell { width: min(100% - 18px, 1120px); padding-bottom: 108px; } .sedes-card-head { flex-direction: column; align-items: start; } .sedes-hero,.sedes-card { padding: 20px; border-radius: 24px; } .sedes-retro .accordion-header { padding: 18px; font-size: 1.08rem; } .sede-layout { padding: 18px; gap: 18px; } .schedule-row { flex-direction: column; gap: 4px; } .schedule-row span:last-child { text-align: left; } .sede-btn { width: 100%; } }

/*--- /LOOK TROPICAL ---*/


/*--- HOME ---*/
.retro-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: block;
    align-items: center;
    padding: 28px 0;
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100% - 1200px));
    margin: 0 auto;
}

.retro-panel {
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto;
    padding: 34px;
    border-radius: 34px;
    border: 1px solid rgba(255, 116, 168, 0.44);
    background: linear-gradient(180deg, rgba(24, 16, 51, 0.90), rgba(13, 10, 32, 0.90));
    box-shadow:
        0 0 0 1px rgba(0, 255, 204, 0.12),
        0 0 34px rgba(255, 88, 155, 0.16),
        0 0 46px rgba(0, 255, 204, 0.10);
}

.retro-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 255, 204, 0.35);
    color: #72fff0;
    background: rgba(0, 255, 204, 0.08);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.88rem;
}

.brand-mark {
    width: 180px;
    max-width: 60%;
    margin: 20px 0 12px;
    filter: drop-shadow(0 0 24px rgba(114, 255, 240, 0.14));
}
.retro-copy {
    text-align: center;
}
.retro-copy h1 {
    margin: 0;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(4rem, 8vw, 6.4rem);
    line-height: 0.88;
    text-transform: uppercase;
    color: #ff84b5;
    text-shadow: 0 0 14px rgba(255, 132, 181, 0.45);
}

.retro-copy p {
    max-width: 620px;
    margin: 18px 0 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(255, 232, 184, 0.84);
}

.retro-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.retro-pill {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 116, 168, 0.34);
    background: rgba(255, 116, 168, 0.08);
    color: #ffd687;
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.menu-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 50px;
    margin-bottom:10px;
    padding: 10px;
    border-radius: 24px;
    text-decoration: none;
    border: 1px solid rgba(255, 116, 168, 0.20);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
    color: #284041;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.menu-button:hover,
.menu-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(114, 255, 240, 0.28);
    box-shadow: 0 14px 28px rgba(214, 181, 138, 0.18);
    color: #214247;
}

.menu-button i {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 1px solid rgba(255, 166, 126, 0.24);
    border-radius: 14px;
    background: linear-gradient(135deg, #ffd36f, #ff9d72);
    color: #214247;
    box-shadow: 0 14px 26px rgba(255, 157, 114, 0.18);
}

.menu-button strong {
    display: block;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

.menu-button span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 232, 184, 0.72);
}

.menu-button .arrow {
    width: auto;
    height: auto;
    border: 0;
    margin-right:20px;
    background: transparent;
}

.modal-content {
    background: linear-gradient(180deg, rgba(31, 20, 58, 1), rgba(17, 10, 36, 1));
    color: #ffe8b8;
    border-radius: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 116, 168, 0.22);
}

.modal-content h2 {
    margin-bottom: 10px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 2.3rem;
    color: #ff84b5;
    text-transform: uppercase;
}

.modal-content p,
.sedes-retro .modal-content p {
    color: #284041;
}

.modal-content .btn {
    border: 1px solid rgba(255, 116, 168, 0.34);
    border-radius: 14px;
    padding: 12px 22px;
    background: linear-gradient(135deg, #72fff0, #ff84b5);
    color: #170d2a;
    font-weight: 700;
}

@media (max-width: 991px) {
    .button-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .retro-panel {
        width: min(100% - 18px, 1120px);
        padding: 22px;
        border-radius: 24px;
    }

    .menu-button {
        min-height: 118px;
        padding: 18px;
    }
}

/*--- RETROBURGER ---*/
.retro-stage {
    padding: 34px;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 247, 232, 0.42)),
        linear-gradient(135deg, rgba(255, 211, 111, 0.22), rgba(82, 208, 198, 0.18));
    box-shadow:
        0 18px 42px rgba(209, 174, 125, 0.18),
        0 6px 18px rgba(82, 208, 198, 0.10);
}

.retro-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(82, 208, 198, 0.24);
    color: #1aa59a;
    background: rgba(82, 208, 198, 0.10);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.88rem;
}

.retro-hero h1 {
    margin: 18px 0 10px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(3.8rem, 8vw, 6.4rem);
    line-height: 0.88;
    text-transform: uppercase;
    color: #f07d58;
    text-shadow: none;
}

.retro-hero p {
    max-width: 660px;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(40, 64, 65, 0.82);
}

.retro-stripes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.retro-pill {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 166, 126, 0.24);
    background: rgba(255, 157, 114, 0.10);
    color: #b96540;
}

.retro-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.retro-card {
    padding: 22px;
    border-radius: 26px;
    border: 1px solid rgba(255, 210, 170, 0.44);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 245, 232, 0.95));
    box-shadow: 0 14px 28px rgba(214, 181, 138, 0.18);
}

.retro-card h2 {
    margin: 0 0 8px;
    font-family: "Barlow Condensed", sans-serif;
    color: #1aa59a;
    text-transform: uppercase;
    font-size: 2rem;
}

.retro-card p {
    margin: 0;
    color: rgba(40, 64, 65, 0.76);
}

.retro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

.retro-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid rgba(255, 166, 126, 0.24);
    color: #214247;
    background: linear-gradient(135deg, #ffd36f, #ff9d72);
    box-shadow: 0 14px 26px rgba(255, 157, 114, 0.18);
}

.retro-btn.secondary {
    background: rgba(82, 208, 198, 0.10);
    color: #1aa59a;
}

.retro-miami .menu-footer {
    background: rgba(255, 248, 238, 0.90);
    border-top: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 -8px 24px rgba(214, 181, 138, 0.16);
}

.retro-miami .card-menu:hover {
    background: rgba(255, 211, 111, 0.14);
}

.retro-miami .card-menu p {
    color: #4b6668;
}

@media (max-width: 767px) {
    .retro-shell {
        width: min(100% - 18px, 1120px);
        padding-bottom: 108px;
    }

    .retro-stage {
        padding: 22px;
        border-radius: 24px;
    }

    .retro-grid {
        grid-template-columns: 1fr;
    }
}


/***--- /retroburger ---*/
/*---- MENU ---*/
.retro-miami-menu .header-bar {
    background: rgba(255, 251, 243, 0.74);
    border-bottom: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow: 0 10px 28px rgba(205, 162, 114, 0.18);
}

.retro-miami-menu .search-icon {
    color: #1aa59a;
}

.retro-miami-menu .search-input {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 14px;
    color: #284041;
}

.retro-miami-menu .btn-filtro {
    border: 1px solid rgba(255, 166, 126, 0.28);
    border-radius: 14px;
    background: linear-gradient(135deg, #ffd36f, #ff9d72);
    color: #214247;
    box-shadow: 0 14px 28px rgba(255, 157, 114, 0.20);
}

.menu-shell {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto;
    padding: 92px 0 118px;
}

.retro-hero {
    padding: 34px;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 247, 232, 0.42)),
        linear-gradient(135deg, rgba(255, 211, 111, 0.22), rgba(82, 208, 198, 0.18));
    box-shadow:
        0 18px 42px rgba(209, 174, 125, 0.18),
        0 6px 18px rgba(82, 208, 198, 0.10);
}

.retro-kicker,
.retro-pill,
.catalog-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
}

.retro-kicker {
    border: 1px solid rgba(82, 208, 198, 0.24);
    color: #1aa59a;
    background: rgba(82, 208, 198, 0.10);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.88rem;
}

.retro-hero h1 {
    margin: 18px 0 10px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(3.8rem, 8vw, 6rem);
    line-height: 0.88;
    text-transform: uppercase;
    color: #f07d58;
    text-shadow: none;
}

.retro-hero p {
    max-width: 660px;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(40, 64, 65, 0.82);
}

.retro-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.retro-pill {
    border: 1px solid rgba(255, 166, 126, 0.24);
    background: rgba(255, 157, 114, 0.10);
    color: #b96540;
}

.catalog-card {
    margin-top: 24px;
    padding: 26px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 247, 234, 0.56)),
        rgba(255, 235, 208, 0.52);
    box-shadow:
        0 18px 42px rgba(209, 174, 125, 0.14),
        0 8px 20px rgba(82, 208, 198, 0.08);
}

.catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin-bottom: 20px;
}

.catalog-header h2 {
    margin: 0;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 2.3rem;
    text-transform: uppercase;
    color: #1aa59a;
}

.catalog-header p {
    margin: 6px 0 0;
    color: rgba(40, 64, 65, 0.72);
}

.catalog-badge {
    border: 1px solid rgba(82, 208, 198, 0.24);
    background: rgba(82, 208, 198, 0.10);
    color: #1aa59a;
}

.retro-miami-menu .filtro-header {
    position: sticky;
    top: 76px;
    z-index: 8;
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.retro-miami-menu .filtro-panel {
    top: 128px;
    background: rgba(255, 246, 230, 0.96);
    border-right: 1px solid rgba(255, 166, 126, 0.20);
}

.retro-miami-menu .categoria-btn {
    background: rgba(255, 255, 255, 0.78);
    color: #476062;
    border: 1px solid rgba(82, 208, 198, 0.16);
    text-transform: uppercase;
    font-size: 1rem;
}

.retro-miami-menu .categoria-btn:hover {
    background: rgba(82, 208, 198, 0.14);
    color: #1aa59a;
}

.retro-miami-menu .card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 245, 232, 0.95));
    border: 1px solid rgba(255, 210, 170, 0.44);
    border-radius: 24px;
    box-shadow: 0 14px 28px rgba(214, 181, 138, 0.18);
}

.retro-miami-menu .card h6 {
    color: #284041;
    min-height: 52px;
}

.retro-miami-menu .precio-card {
    color: #f07d58;
    font-size: 1.12rem;
}

.retro-miami-menu .btn-ver-mas {
    border: 1px solid rgba(255, 166, 126, 0.24);
    border-radius: 14px;
    background: linear-gradient(135deg, #ffd36f, #ff9d72);
    color: #214247;
    box-shadow: 0 14px 26px rgba(255, 157, 114, 0.18);
}
.retro-miami-menu .btn-ver-mas:hover {
    background: #ff5017;
    color: #fff;
    /*-box-shadow: 0 0 15px rgba(0,255,200,0.8);-*/
}
.retro-miami-menu .menu-footer {
    background: rgba(255, 248, 238, 0.90);
    border-top: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 -8px 24px rgba(214, 181, 138, 0.16);
}

.retro-miami-menu .card-menu p {
    color: #4b6668;
}

.retro-miami-menu .card-menu:hover {
    background: rgba(255, 211, 111, 0.14);
}

.retro-miami-menu .modal-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 232, 0.98));
    color: #284041;
    border-radius: 24px;
    border: 1px solid rgba(255, 210, 170, 0.44);
}

.retro-miami-menu .price-qty-container {
    background: rgba(255, 211, 111, 0.16);
}

.retro-miami-menu .price {
    color: #f07d58;
}

@media (max-width: 991px) {
    .menu-shell {
        padding-top: 88px;
    }

    .retro-hero,
    .catalog-card {
        padding: 22px;
    }
}

@media (max-width: 767px) {
    .menu-shell {
        width: min(100% - 18px, 1120px);
        padding-bottom: 108px;
    }

    .retro-hero,
    .catalog-card {
        padding: 10px;
        border-radius: 24px;
    }

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

    .retro-miami-menu .filtro-header .btn-filtro {
        width: 100%;
    }
}



/*---- /MENU ---*/




/*--- INDEX ---*/



.card-menu {
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;

    transition: 0.3s;
}

.card-menu i {
    font-size: 20px;
    color: #1aa59a;
}

.card-menu p {
    margin: 0;
    font-size: 16px;
    color: #fff;
}

.card-menu:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

/* LOGO */
.logo {
    font-size: 32px;
    color: #00ffc8;
    letter-spacing: 2px;
    animation: glow 1.5s infinite alternate;
}
img.logo-img {
    width: 50%;
}
@media only screen and (max-width: 600px) {
img.logo-img {
    width: 80%;
}
}
/* EFECTO NEÓN */
@keyframes glow {
    from {
        text-shadow: 0 0 10px #00ffc8;
    }
    to {
        text-shadow: 0 0 25px #00ffc8, 0 0 40px #00ffc8;
    }
}

/* LOADER */
.loader {
    margin-top: 20px;
    width: 40px;
    height: 40px;

    border: 3px solid rgba(255,255,255,0.1);
    border-top: 3px solid #00ffc8;
    border-radius: 50%;

    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* Entrada */
.fade-in {
    animation: fadeIn 0.6s ease;
}

/* Salida */
.fade-out {
    animation: fadeOut 0.4s ease forwards;
}

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

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}
/*---- /INDEX ----*/



.modal-overlay {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(255,255,255,0.8);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999;
}

.hidden {
    display:none;
}

.modal-content {
    background:white;
    color:black;
    padding:20px;
    border-radius:15px;
    max-width:400px;
    width:80%;
    padding:20px;
    max-width: 400px;
    position: relative;
}
i.fa-solid.fa-xmark {
    background: #f00;
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
}
/* 🌑 Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);

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

    z-index: 1000;
}

/* 📦 Contenido */

/* ❌ Close */
.btn-close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

/* ⬅️➡️ Flechas */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 15px;
    border: none;
    background: linear-gradient(135deg, #ffd36f, #ff9d72);
    color: #214247;
    box-shadow: 0 14px 26px rgba(255, 157, 114, 0.18);
    font-size: 20px;
    cursor: pointer;
    z-index: 1001;
    backdrop-filter: blur(6px);
}

/* Posiciones */
.nav-arrow.left {
    left: 10px;
}

.nav-arrow.right {
    right: 10px;
}

/* Hover efecto */
.nav-arrow:hover {
    background: #00ffc8;
    color: #000;
    box-shadow: 0 0 15px rgba(0,255,200,0.8);
}

/* 📱 Responsive */
@media (max-width: 600px) {
    .nav-arrow {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}
/*--- look playero ---*/



.neon-title {
    font-size: 2.7rem;
    text-align: center;
    margin: 70px 0 10px;
    color: #fff;
    text-shadow:
        0 0 5px #ff00cc,
        0 0 10px #ff00cc,
        0 0 20px #00f2ff,
        0 0 40px #00f2ff;
}

.card {
    background: rgb(255 255 255 / 40%);
    border:none;
    border-radius: 15px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.11);
    overflow: hidden;
}
.card h6 {
    font-size: 19px;
    min-height: 46px;
    text-align: center;
}
.card img {
    height: 200px;
    object-fit: cover;
}
.precio-card {
    font-weight: bold;
    margin: 5px 0;
    text-align: center;
}

.btn-close-modal {
    text-align: right;
    color:#f00;
}
.hidden {
    display:none;
    cursor: pointer;
}

.card-click{
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-click:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.card-click:active{
    transform: scale(0.97);
}

.header-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 999;
}


/* 🔻 FOOTER FIJO */
.footer-bar {
    /* 🧊 GLASS */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* ✨ NEON glow */
    border-top: 1px solid rgba(0, 255, 200, 0.3);
    z-index: 999;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    gap: 10px;
    padding: 10px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 999;
}



/*--- cantidad ---*/

/* 💰 + 🔢 Contenedor */
.price-qty-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.05);
    padding: 12px;
    border-radius: 12px;
    margin-top: 15px;
}

/* 💰 Precio */
.price {
    font-size: 20px;
    font-weight: bold;
}

/* 🔢 Controles */
.qty-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botones + - */
.qty-controls button {
    width: 35px;
    height: 35px;
    border-radius: 50%;

    border: none;
    background: #00ffc8;
    color: #000;
    font-size: 18px;
    font-weight: bold;

    cursor: pointer;

    box-shadow: 0 0 10px rgba(0,255,200,0.6);
}

.qty-controls span {
    font-size: 18px;
    min-width: 20px;
    text-align: center;
}



/*---  footer ---*/

/* 🔻 FOOTER FIJO */
.footer-bar {
    
}

/* 🔍 Buscador */
.search-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    padding-left: 35px !important;
    background: rgba(255,255,255,0.9);
    border: none;
    color: #000;
    border-radius: 10px;
}
.search-container {
    position: relative;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #f07d58;
    font-size: 14px;
}

.search-input::placeholder {
    color: rgba(0,0,0,0.5);
}

.search-input:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(0,255,200,0.5);
}
/* 🛒 Botón */
/* 📱 Evitar que tape contenido */
/* 🛒 Botón */

button.cerrar {
    background: #fff;
    border: none;
    text-align: right;
}
.btn-pedido,
.btn-pedido-fijo,
.btn-ver-mas {
    padding: 10px 16px;
    border-radius: 10px;
    border: 2px solid #fff;
    background: linear-gradient(45deg, #00ffc8, #00bfff);
    color: #000;
    font-weight: bold;
    /* Glow neón */
    box-shadow: 0 0 10px rgba(0,255,200,0.6);
    transition: all 0.2s ease;
}

.btn-ver-mas {
    background: #00ffc8;
    color: #000;
    box-shadow: 0 0 10px rgba(0,255,200,0.6);
    width: 100%;
}

.btn-pedido:hover {
    transform: scale(1.5);
    box-shadow: 0 0 20px rgba(0,255,200,1);
}
.btn-pedido-fijo {
    border: none;
    position: relative;
    width:100%;
}
.active-menu {
    background: rgba(0,255,200,0.2);
    border-radius: 12px;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0,255,200,0.5);
}

.card-menu.active-menu {
    animation: pulseMenu 0.6s ease;
}

@keyframes pulseMenu {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1.05); }
}
/* 🔴 BURBUJA */
.badge-pedido {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 7px;
    border-radius: 50%;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(255,0,0,0.6);
}
.pedido-btn.animar i {
    animation: bouncePedido 0.5s;
}

/*--- SEDES ---*/
.sedes-contenedor{
    margin-top: 80px;
}


/* 📦 ACORDEÓN */
.accordion {
    width: 90%;
    margin: 20px auto;
}

.accordion-item {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}

.accordion-header {
    background: #00ffc8;
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.accordion-content {
    background: #fff;
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease;
    padding: 0 15px;
}

.accordion-item.active .accordion-content {
    max-height: 700px;
    padding: 15px;
}

/* 🖼 IMAGEN */
.sede-img {
    width: 60%;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* 📍 INFO */
.info {
    margin-bottom: 10px;
}

/* 🟢 HOY */
.hoy {
    color: #00ffc8;
    font-weight: bold;
}

/* 🔘 BOTONES */
.btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    background: #00ffc8;
    color: #000;
    cursor: pointer;
}

/* 🗺 MODAL */
.modal-sedes {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;

    display:none;
    justify-content:center;
    align-items:center;
}

.close {
    float:right;
    cursor:pointer;
    font-size:18px;
}


/*--- FILTRO CATEGORIAS ---*/
/* CONTENEDOR */
.filtro-container {
    position: relative;
    padding: 10px;
}

/* BOTÓN */
.btn-filtro {
    background: #00ffc8;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: bold;
}
/* HEADER */
.filtro-panel{
    position: fixed;
    top: 0;
    left: -100%; /* 🔥 ahora oculto a la izquierda */
    width: 80%;
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: 9999;
    transition: left 0.35s ease; /* 🔥 animamos left */
    padding: 26px;
    border-radius: 30px;
    box-shadow: 0 18px 42px rgba(209, 174, 125, 0.14), 0 8px 20px rgba(82, 208, 198, 0.08);
}

.filtro-panel.active{
    left: 0; /* 🔥 entra desde la izquierda */
}
.filtro-panel::before{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius:0 30px 30px 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 247, 232, 0.42)), linear-gradient(135deg, rgba(255, 211, 111, 0.22), rgba(82, 208, 198, 0.18));
    box-shadow: 0 18px 42px rgba(209, 174, 125, 0.18), 0 6px 18px rgba(82, 208, 198, 0.10);
    backdrop-filter: blur(5px);
    z-index: -1;
}
/* CONTENIDO */
.filtro-content{
    padding: 20px;
}




.filtro-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

/* CATEGORÍAS */
.filtro-categorias {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* BOTONES CATEGORÍA */
.categoria-btn {
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: 0.3s;
    color: #000;
    color: white;
    display: block;
    margin-bottom: 10px;
    text-transform: lowercase;
    font-size: 20px;
    opacity: 0;
    padding: 12px;
    transform: translateX(20px);
    animation: slideItem 0.3s ease forwards;
}
@keyframes slideItem{
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
.categoria-btn:hover {
    background: #00ffc8;
    color: #000;
}


/*---- FOOTER  ------*/
.menu-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(10px);
    padding: 10px 5px;
    z-index: 999;
    border-top: 1px solid rgba(255,255,255,0.1);
}