/* =============================================================================
 * Applebee's MX — Theme inspired by applebees.com/en
 * Loaded AFTER style.css / home.css / login.css / profile.css
 * Strategy: high-specificity overrides + new component classes (ab-*).
 * ============================================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Brand palette — matches applebees.com */
    --ab-red:        #8B0014;
    --ab-red-2:      #A0192A;
    --ab-red-deep:   #5C0010;
    --ab-red-glow:   #C9202F;
    --ab-gold:       #6B5B3A;       /* nav text */
    --ab-gold-2:     #8E7843;
    --ab-black:      #1A1A1A;
    --ab-ink:        #2A2A2A;
    --ab-grey-1:     #414042;
    --ab-grey-2:     #6E6F71;
    --ab-grey-3:     #9C9D9F;
    --ab-grey-4:     #D8D8D8;
    --ab-grey-5:     #F4F4F4;
    --ab-cream:      #FAF7F2;
    --ab-white:      #FFFFFF;
    --ab-success:    #2F7D32;
    --ab-warning:    #C58B00;

    /* Typography */
    --ab-font-display: 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif;
    --ab-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ab-font-serif:   'Playfair Display', Georgia, serif;

    /* Sizing */
    --ab-radius-pill: 999px;
    --ab-radius-md:   12px;
    --ab-radius-sm:   6px;
    --ab-shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --ab-shadow-md:   0 6px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    --ab-shadow-lg:   0 20px 60px rgba(0,0,0,.20);
    --ab-header-h:    90px;
}

/* ---------- 2. Body / typographic base ---------- */

/* Bump global del tamano de texto: todo lo basado en rem en mi theme crece
   proporcionalmente (~12% mas grande). El default del browser es 16px,
   subimos a 18px. Cambiar este valor recalibra TODA la escala visual. */
html {
    font-size: 18px !important;
}

body {
    font-family: var(--ab-font-body) !important;
    color: var(--ab-grey-1);
    background: var(--ab-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 600px) {
    /* En mobile bajamos un toque para no apretar el contenido */
    html { font-size: 17px !important; }
}

.ab-display {
    font-family: var(--ab-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 0.95;
    color: var(--ab-black);
}

/* ---------- 3. Buttons (pill) ---------- */
.ab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 2.25rem;
    min-height: 48px;
    border-radius: var(--ab-radius-pill);
    border: 2px solid transparent;
    font-family: var(--ab-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease,
                color .15s ease, border-color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.ab-btn:hover  { transform: translateY(-1px); text-decoration: none; }
.ab-btn:active { transform: translateY(0); }

.ab-btn--primary {
    background: var(--ab-red);
    color: var(--ab-white);
    border-color: var(--ab-red);
}
.ab-btn--primary:hover {
    background: var(--ab-red-deep);
    border-color: var(--ab-red-deep);
    color: var(--ab-white);
    box-shadow: 0 8px 20px rgba(139,0,20,.30);
}

.ab-btn--white {
    background: var(--ab-white);
    color: var(--ab-black);
    border-color: var(--ab-white);
}
.ab-btn--white:hover {
    background: var(--ab-cream);
    color: var(--ab-black);
    border-color: var(--ab-cream);
}

.ab-btn--outline-dark {
    background: transparent;
    color: var(--ab-white);
    border-color: var(--ab-white);
}
.ab-btn--outline-dark:hover {
    background: var(--ab-white);
    color: var(--ab-black);
}

.ab-btn--outline {
    background: transparent;
    color: var(--ab-red);
    border-color: var(--ab-red);
}
.ab-btn--outline:hover {
    background: var(--ab-red);
    color: var(--ab-white);
}

.ab-btn--ghost {
    background: transparent;
    color: var(--ab-grey-1);
    border-color: var(--ab-grey-4);
}
.ab-btn--ghost:hover { border-color: var(--ab-grey-1); }

.ab-btn--block { width: 100%; }
.ab-btn--lg    { padding: 1.1rem 2.5rem; min-height: 56px; font-size: 1.05rem; }
.ab-btn--sm    { padding: 0.6rem 1.25rem; min-height: 36px; font-size: 0.85rem; }

/* ---------- 4. Form fields (pill, floating label) ---------- */
.ab-field {
    position: relative;
    margin-bottom: 1.25rem;
}
.ab-field input,
.ab-field select,
.ab-field textarea {
    width: 100%;
    padding: 1.05rem 1.25rem 1.05rem 1.25rem;
    border: 1.5px solid var(--ab-grey-4);
    border-radius: var(--ab-radius-pill);
    background: var(--ab-white);
    font-family: var(--ab-font-body);
    font-size: 1rem;
    color: var(--ab-black);
    transition: border-color .15s ease, box-shadow .15s ease;
    outline: none;
    line-height: 1.2;
}
.ab-field textarea {
    border-radius: 22px;
    min-height: 110px;
    resize: vertical;
}
.ab-field input:focus,
.ab-field select:focus,
.ab-field textarea:focus {
    border-color: var(--ab-red);
    box-shadow: 0 0 0 3px rgba(139,0,20,0.08);
}
.ab-field input::placeholder,
.ab-field textarea::placeholder { color: transparent; }

.ab-field label {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    transform: translateY(-50%);
    padding: 0 0.4rem;
    background: var(--ab-white);
    color: var(--ab-grey-2);
    font-size: 0.95rem;
    font-weight: 500;
    pointer-events: none;
    transition: all .15s ease;
}
.ab-field textarea ~ label { top: 1.05rem; transform: none; }

.ab-field input:focus + label,
.ab-field input:not(:placeholder-shown) + label,
.ab-field textarea:focus + label,
.ab-field textarea:not(:placeholder-shown) + label,
.ab-field select:focus + label,
.ab-field select:valid + label,
.ab-field.is-filled label {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    color: var(--ab-red);
    font-weight: 600;
}

.ab-field--with-icon input { padding-right: 3rem; }
.ab-field__icon {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    color: var(--ab-grey-2);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px;
}

.ab-field--error input,
.ab-field--error select,
.ab-field--error textarea { border-color: var(--ab-red); }
.ab-field--error label   { color: var(--ab-red); }
.ab-field__help {
    display: block;
    margin: 0.4rem 1.25rem 0;
    font-size: 0.82rem;
    color: var(--ab-grey-2);
}
.ab-field__error {
    display: block;
    margin: 0.4rem 1.25rem 0;
    font-size: 0.82rem;
    color: var(--ab-red);
    font-weight: 600;
}

.ab-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--ab-grey-1);
    cursor: pointer;
    margin-bottom: 0.8rem;
    line-height: 1.4;
}
.ab-checkbox input[type=checkbox] {
    width: 18px; height: 18px;
    margin: 2px 0 0;
    accent-color: var(--ab-red);
    flex-shrink: 0;
}

/* ---------- 5. Alerts ---------- */
.ab-alert {
    border-radius: var(--ab-radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.92rem;
    border-left: 4px solid;
    background: var(--ab-grey-5);
    color: var(--ab-grey-1);
}
.ab-alert--success { border-color: var(--ab-success); background: #E8F5E9; color: #1B5E20; }
.ab-alert--error   { border-color: var(--ab-red);     background: #FFF0F2; color: var(--ab-red-deep); }
.ab-alert--warning { border-color: var(--ab-warning); background: #FFF8E1; color: #6B4E00; }

.ab-alert ul { margin: 0; padding-left: 1.25rem; }

/* ---------- 6. Links ---------- */
.ab-link {
    color: var(--ab-red);
    text-decoration: none;
    font-weight: 600;
}
.ab-link:hover { text-decoration: underline; color: var(--ab-red-deep); }

/* ---------- 7. Headlines ---------- */
h1.ab-h, h2.ab-h, h3.ab-h, h4.ab-h, .ab-h {
    font-family: var(--ab-font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ab-black);
    line-height: 1.05;
}
.ab-h--xxl { font-size: clamp(2.5rem, 6vw, 5.5rem); letter-spacing: 0.02em; }
.ab-h--xl  { font-size: clamp(2rem, 4.5vw, 3.5rem); }
.ab-h--lg  { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.ab-h--md  { font-size: 1.25rem; }

.ab-eyebrow {
    display: inline-block;
    font-family: var(--ab-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ab-red);
    margin-bottom: 0.6rem;
}

/* ---------- 8. Layout helpers ---------- */
.ab-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.ab-section { padding: 5rem 0; }
.ab-section--tight { padding: 3rem 0; }
.ab-section--dark  { background: var(--ab-black); color: var(--ab-white); }
.ab-section--cream { background: var(--ab-cream); }

/* ---------- 9. Cards (generic) ---------- */
.ab-card {
    background: var(--ab-white);
    border: 1px solid var(--ab-grey-4);
    border-radius: var(--ab-radius-md);
    padding: 1.5rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ab-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ab-shadow-md);
    border-color: transparent;
}
.ab-card__title { font-family: var(--ab-font-display); text-transform: uppercase; font-size: 1.4rem; margin: 0 0 0.5rem; color: var(--ab-black); }
.ab-card__meta  { font-size: 0.9rem; color: var(--ab-grey-2); line-height: 1.5; }

/* =============================================================================
 * 10. Enterprise header — applebees.com style (3 tiers: utility / main / drawer)
 * ============================================================================= */

/* ------------- Utility bar (thin top strip with sucursal chip + links) ------------- */
.ab-utility {
    background: var(--ab-black);
    color: rgba(255,255,255,0.78);
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ab-utility__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.55rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Sucursal chip dentro de la utility bar */
.ab-utility__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.85rem;
    border-radius: var(--ab-radius-pill);
    background: rgba(255,255,255,0.08);
    color: var(--ab-white) !important;
    text-decoration: none !important;
    font-family: var(--ab-font-body);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.12);
    transition: background .15s, border-color .15s, color .15s;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ab-utility__chip svg { flex-shrink: 0; color: var(--ab-red-glow); }
.ab-utility__chip:hover {
    background: var(--ab-red);
    border-color: var(--ab-red);
    color: var(--ab-white) !important;
}
.ab-utility__chip:hover svg { color: var(--ab-white); }
.ab-utility__chip span:nth-of-type(1) {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.ab-utility__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.ab-utility__links a,
.ab-utility__links .ab-utility__logout button {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: color .15s;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
}
.ab-utility__links a:hover,
.ab-utility__links button:hover { color: var(--ab-red-glow); }
.ab-utility__divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.2);
    list-style: none;
}
.ab-utility__user { color: rgba(255,255,255,0.85); }
.ab-utility__user strong { color: var(--ab-red-glow); font-weight: 700; margin-left: 0.2rem; }

@media (max-width: 1023px) {
    .ab-utility__chip { max-width: none; }
    .ab-utility__chip span:nth-of-type(1) { max-width: 160px; }
}
@media (max-width: 767px) {
    .ab-utility { display: none; }
}

/* ------------- Main nav bar ------------- */
header.site-header.ab-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--ab-white);
    border-bottom: 1px solid var(--ab-grey-4);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    min-height: 84px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 0.5rem 2.5rem;
}

.ab-nav__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}
.ab-nav__brand img {
    /* Logo SVG is 321x160 (~2:1). height 60 = width ~120 */
    height: 60px;
    width: auto;
    max-width: 160px;
    display: block;
}

/* Primary nav (centered) */
.ab-nav__primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    flex-wrap: nowrap;
}
.ab-nav__primary a {
    position: relative;
    color: var(--ab-gold) !important;
    text-transform: uppercase;
    font-family: var(--ab-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-decoration: none !important;
    line-height: 1.2;
    padding: 0.5rem 0;
    transition: color .15s;
    white-space: nowrap;
}
.ab-nav__primary a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 3px;
    background: var(--ab-red);
    transition: width .2s ease, left .2s ease;
    border-radius: 2px;
}
.ab-nav__primary a:hover,
.ab-nav__primary a.is-active {
    color: var(--ab-red) !important;
}
.ab-nav__primary a:hover::after,
.ab-nav__primary a.is-active::after {
    width: 100%;
    left: 0;
}

/* Right area */
.ab-nav__right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-end;
}

/* Account / cart icon buttons */
.ab-nav__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--ab-grey-1);
    background: transparent;
    text-decoration: none !important;
    transition: background .15s, color .15s;
    position: relative;
}
.ab-nav__action:hover {
    background: var(--ab-grey-5);
    color: var(--ab-red);
}
.ab-nav__action--account {
    background: var(--ab-red);
    color: var(--ab-white) !important;
}
.ab-nav__action--account:hover {
    background: var(--ab-red-deep);
    color: var(--ab-white) !important;
}
.ab-nav__action .badge__shop {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--ab-red);
    color: var(--ab-white);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--ab-white);
}

/* Hamburger */
.ab-nav__hamburger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-left: 0.3rem;
    transition: background .15s;
}
.ab-nav__hamburger:hover { background: var(--ab-grey-5); }
.ab-nav__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ab-grey-1);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

/* ------------- Responsive breakpoints ------------- */
@media (max-width: 1199px) {
    header.site-header.ab-nav { padding: 0.4rem 1.75rem; gap: 1.5rem; }
    .ab-nav__brand img { height: 52px; }
    .ab-nav__primary { gap: 1.8rem; }
    .ab-nav__primary a { font-size: 0.88rem; letter-spacing: 0.1em; }
}
@media (max-width: 1023px) {
    header.site-header.ab-nav {
        grid-template-columns: auto 1fr auto;
        padding: 0.4rem 1.25rem;
        gap: 0.5rem;
        min-height: 72px;
    }
    .ab-nav__brand img { height: 48px; }
    .ab-nav__primary { display: none; }
    .ab-nav__hamburger { display: flex; }
}
@media (max-width: 600px) {
    header.site-header.ab-nav { padding: 0.4rem 1rem; gap: 0.25rem; }
    .ab-nav__brand img { height: 40px; }
    .ab-nav__action { width: 40px; height: 40px; }
}

/* ------------- Mobile drawer (off-canvas) ------------- */
.ab-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
}
.ab-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}
.ab-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    transition: opacity .25s ease;
}
.ab-drawer.is-open .ab-drawer__backdrop { opacity: 1; }
.ab-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    background: var(--ab-white);
    box-shadow: -8px 0 30px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ab-drawer.is-open .ab-drawer__panel { transform: translateX(0); }
.ab-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ab-grey-4);
    flex-shrink: 0;
}
.ab-drawer__header img,
.ab-drawer__logo { display: block; height: 44px; width: auto; max-width: 140px; }
.ab-drawer__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ab-grey-5);
    border: 0;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--ab-grey-1);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .15s, color .15s;
}
.ab-drawer__close:hover { background: var(--ab-red); color: var(--ab-white); }
.ab-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ab-drawer__user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ab-red-deep) 0%, var(--ab-red) 100%);
    color: var(--ab-white);
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(139,0,20,0.25);
}
.ab-drawer__user::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.ab-drawer__user > div { position: relative; z-index: 1; display: flex; flex-direction: column; }
.ab-drawer__user-hi { font-size: 0.72rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.ab-drawer__user strong { font-size: 1.05rem; line-height: 1.2; margin-top: 0.1rem; }
.ab-drawer__user-link {
    font-size: 0.78rem;
    margin-top: 0.4rem;
    opacity: 0.9;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ab-drawer__user svg { color: var(--ab-white); }
.ab-drawer__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ab-drawer__auth {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* Anular cualquier tail/box-shadow heredado de .btn-form / .btn-primary legacy */
.ab-drawer__auth .ab-btn { box-shadow: none; }
.ab-drawer__auth .ab-btn::before,
.ab-drawer__auth .ab-btn::after { content: none; display: none; }

.ab-drawer__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.95rem;
    border-radius: var(--ab-radius-pill);
    background: var(--ab-grey-5);
    color: var(--ab-grey-1);
    text-decoration: none !important;
    font-family: var(--ab-font-body);
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid var(--ab-grey-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    align-self: flex-start;
}
.ab-drawer__chip svg { color: var(--ab-red); flex-shrink: 0; }

.ab-drawer__section h4 {
    font-family: var(--ab-font-body);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ab-grey-2);
    margin: 0 0 0.6rem;
    font-weight: 700;
}
.ab-drawer__nav {
    display: flex;
    flex-direction: column;
}
.ab-drawer__nav a {
    display: block;
    padding: 0.85rem 0.5rem;
    color: var(--ab-black) !important;
    font-family: var(--ab-font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    border-bottom: 1px solid var(--ab-grey-5);
    transition: color .15s, padding-left .15s;
}
.ab-drawer__nav a:last-child { border-bottom: 0; }
.ab-drawer__nav a:hover {
    color: var(--ab-red) !important;
    padding-left: 1rem;
}
.ab-drawer__nav--secondary a {
    font-family: var(--ab-font-body);
    font-size: 0.92rem;
    text-transform: none;
    font-weight: 600;
    color: var(--ab-grey-1) !important;
    padding: 0.65rem 0.5rem;
    letter-spacing: 0;
}

.ab-drawer__divider {
    height: 1px;
    background: var(--ab-grey-4);
    margin: 0.5rem 0;
}

.ab-drawer__logout-form { margin-top: auto; padding-top: 1rem; }

/* ------------- Mobile cart floating shortcut ------------- */
.ab-mobile-cart {
    display: none;
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ab-red);
    color: var(--ab-white);
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(139,0,20,.45);
    text-decoration: none !important;
}
.ab-mobile-cart:hover { background: var(--ab-red-deep); }
.ab-mobile-cart svg { stroke: var(--ab-white); }
.ab-mobile-cart .badge__shop {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--ab-white);
    color: var(--ab-red);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    box-shadow: 0 0 0 2px var(--ab-red);
}
@media (max-width: 600px) {
    .ab-mobile-cart { display: inline-flex; }
}

/* Cuando hay carrito popup abierto, los desktop cart shortcuts no necesitan visible */
@media (min-width: 1024px) {
    .ab-mobile-cart { display: none !important; }
}

/* ---------- 11. Footer — dark with columns ---------- */
footer.c-footer {
    background: var(--ab-black) !important;
    color: var(--ab-white);
    padding: 4rem 2rem 2rem !important;
}
footer.c-footer * { color: inherit; }
footer.c-footer .c-footer__top-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    max-width: 1280px;
    margin: 0 auto 3rem;
}
footer.c-footer .c-footer__heading {
    font-family: var(--ab-font-display);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ab-white);
    margin: 0 0 1.25rem;
    font-weight: 700;
}
footer.c-footer .c-footer__link-list--social-nav {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    align-items: center;
}
footer.c-footer .c-footer__link-list--social-nav a {
    display: inline-flex;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    transition: border-color .15s, background .15s;
}
footer.c-footer .c-footer__link-list--social-nav a:hover {
    border-color: var(--ab-red);
    background: var(--ab-red);
}
footer.c-footer .c-footer__link-list--social-nav svg {
    width: 18px !important; height: 18px !important; stroke: var(--ab-white) !important;
}
footer.c-footer .c-footer__link-list--social-nav .icon-tabler-brand-twitter-filled { fill: var(--ab-white) !important; }
footer.c-footer .c-footer__site-nav p {
    color: rgba(255,255,255,0.78);
    line-height: 1.65;
    font-size: 0.95rem;
}
footer.c-footer .c-footer__link-list--app-nav { list-style: none; padding: 0; margin: 0; }
footer.c-footer .c-footer__link-list--app-nav a {
    display: inline-block;
    margin-bottom: 0.6rem;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color .15s;
}
footer.c-footer .c-footer__link-list--app-nav a:hover { color: var(--ab-red-glow); }
footer.c-footer .c-footer__bottom-section {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
footer.c-footer .c-footer__link-list--corp-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: flex-end;
}
footer.c-footer .c-footer__link-list--corp-nav a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
footer.c-footer .c-footer__link-list--corp-nav a:hover { color: var(--ab-red-glow); }
footer.c-footer .c-footer__copy {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.78rem;
    text-align: right;
    list-style: none;
}

/* ---------- 12. Auth shell (centered card on dark) ---------- */
.ab-auth {
    min-height: calc(100vh - var(--ab-header-h));
    background: var(--ab-black);
    background-image:
        radial-gradient(ellipse at center, rgba(139,0,20,0.25) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}
.ab-auth__card {
    width: 100%;
    max-width: 480px;
    background: var(--ab-white);
    border-radius: 24px;
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: var(--ab-shadow-lg);
}
.ab-auth__card--wide { max-width: 560px; }
.ab-auth__logo {
    display: block;
    margin: 0 auto 1.5rem;
    height: 72px;
    width: auto;
    max-width: 220px;
}
.ab-auth__title {
    text-align: center;
    margin: 0 0 1.75rem;
    font-family: var(--ab-font-display);
    font-weight: 700;
    color: var(--ab-black);
    font-size: 1.85rem;
    letter-spacing: 0.01em;
}
.ab-auth__footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.92rem;
    color: var(--ab-grey-2);
}
.ab-auth__hint {
    text-align: center;
    color: var(--ab-grey-2);
    font-size: 0.92rem;
    margin: -0.5rem 0 1.5rem;
}
.ab-auth__reset {
    display: block;
    text-align: left;
    margin: -0.8rem 0 1.25rem 1.25rem;
    color: var(--ab-red);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
}
.ab-auth__reset:hover { text-decoration: underline; }

/* ---------- 13. Home — hero overlay + sections ---------- */
.ab-home-hero {
    position: relative;
    min-height: clamp(520px, 75vh, 760px);
    overflow: hidden;
    background: var(--ab-black);
    display: flex;
    align-items: center;
}
.ab-home-hero video,
.ab-home-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.ab-home-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 50%, rgba(201,32,47,0.55) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.20) 100%);
    z-index: 1;
}
.ab-home-hero__content {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    color: var(--ab-white);
}
.ab-home-hero__eyebrow {
    color: var(--ab-red-glow);
    margin-bottom: 0.5rem;
}
.ab-home-hero__title {
    font-family: var(--ab-font-display);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0.02em;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    margin: 0 0 1rem;
    color: var(--ab-white);
    max-width: 18ch;
}
.ab-home-hero__lead {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.92);
    max-width: 32rem;
    margin: 0 0 2rem;
    line-height: 1.5;
}
.ab-home-hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.ab-home-hero__note {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
}
.ab-home-hero__note a { color: var(--ab-white); text-decoration: underline; }

/* Service tile row */
.ab-services {
    background: var(--ab-cream);
    padding: 5rem 0;
}
.ab-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.ab-service-tile {
    background: var(--ab-white);
    border-radius: var(--ab-radius-md);
    padding: 2rem 1.75rem;
    text-decoration: none;
    color: var(--ab-black);
    border: 1px solid var(--ab-grey-4);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ab-service-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--ab-shadow-md);
    border-color: transparent;
    color: var(--ab-black);
}
.ab-service-tile__icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--ab-red);
    color: var(--ab-white);
    display: inline-flex;
    align-items: center; justify-content: center;
    margin-bottom: 0.5rem;
}
.ab-service-tile__icon svg { width: 26px; height: 26px; stroke: currentColor; }
.ab-service-tile__title {
    font-family: var(--ab-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.35rem;
    margin: 0;
    letter-spacing: 0.02em;
}
.ab-service-tile__desc { color: var(--ab-grey-2); font-size: 0.95rem; line-height: 1.5; }

/* Section header */
.ab-section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; padding: 0 1.5rem; }
.ab-section-head h2 {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0.4rem 0;
    color: var(--ab-black);
    line-height: 1;
}
.ab-section-head p { color: var(--ab-grey-2); font-size: 1.05rem; line-height: 1.6; }

/* Showcase strips */
.ab-strip-promo {
    background: var(--ab-red-deep);
    color: var(--ab-white);
    text-align: center;
    padding: 1rem 1.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: var(--ab-font-body);
}
.ab-strip-promo a { color: var(--ab-white); text-decoration: underline; }

/* Rewards / CTA banner */
.ab-cta-banner {
    background:
        linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 100%),
        var(--ab-red-deep);
    color: var(--ab-white);
    padding: 4rem 1.5rem;
    text-align: center;
}
.ab-cta-banner h2 {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin: 0 0 1rem;
    line-height: 1.05;
}
.ab-cta-banner p { max-width: 640px; margin: 0 auto 1.5rem; opacity: 0.92; line-height: 1.5; }

/* ---------- 14. Profile dashboard overrides ---------- */
.profile-hero {
    background: var(--ab-black) !important;
    background-image:
        radial-gradient(ellipse at 80% 50%, rgba(201,32,47,0.45) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important;
    color: var(--ab-white);
    padding: 3.5rem 1.5rem !important;
    text-align: center;
}
.profile-hero h2 {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin: 0 0 0.5rem;
    color: var(--ab-white) !important;
}
.profile-hero p { color: rgba(255,255,255,0.85); margin: 0; }
.profile-shell {
    max-width: 1180px;
    margin: -2rem auto 4rem;
    background: var(--ab-white);
    border-radius: 18px;
    padding: 2rem 2rem 2.5rem !important;
    box-shadow: var(--ab-shadow-md);
    position: relative;
    z-index: 2;
}
.profile-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ab-grey-4);
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.profile-tabs a {
    padding: 0.95rem 1.5rem;
    color: var(--ab-grey-2);
    font-family: var(--ab-font-body);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.profile-tabs a.active { color: var(--ab-red); border-bottom-color: var(--ab-red); }
.profile-tabs a:hover  { color: var(--ab-black); }

.profile-panel h3 {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    font-size: 1.6rem;
    color: var(--ab-black);
    margin: 0 0 1rem;
    letter-spacing: 0.01em;
}
.profile-panel h4 {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    color: var(--ab-black);
    margin: 0 0 0.6rem;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem 1.25rem;
}
.profile-grid .full { grid-column: 1/-1; }

.profile-field { display: flex; flex-direction: column; margin-bottom: 0.5rem; }
.profile-field label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ab-grey-2);
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.profile-field input,
.profile-field select,
.profile-field textarea {
    padding: 0.85rem 1.1rem;
    border: 1.5px solid var(--ab-grey-4);
    border-radius: var(--ab-radius-pill);
    font-family: var(--ab-font-body);
    font-size: 0.95rem;
    background: var(--ab-white);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.profile-field textarea { border-radius: 18px; }
.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
    border-color: var(--ab-red);
    box-shadow: 0 0 0 3px rgba(139,0,20,0.08);
}
.profile-field input:disabled {
    background: var(--ab-grey-5);
    color: var(--ab-grey-2);
}

.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.6rem;
    min-height: 42px;
    border-radius: var(--ab-radius-pill);
    border: 2px solid transparent;
    background: var(--ab-red);
    color: var(--ab-white);
    font-family: var(--ab-font-body);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s, color .15s, border-color .15s;
}
.profile-btn:hover { transform: translateY(-1px); text-decoration: none; }
.profile-btn-primary  { background: var(--ab-red); color: var(--ab-white); }
.profile-btn-primary:hover { background: var(--ab-red-deep); color: var(--ab-white); }
.profile-btn-secondary {
    background: var(--ab-white);
    color: var(--ab-black);
    border-color: var(--ab-grey-4);
}
.profile-btn-secondary:hover { border-color: var(--ab-black); color: var(--ab-black); background: var(--ab-grey-5); }
.profile-btn-danger {
    background: transparent;
    color: var(--ab-red);
    border-color: var(--ab-red);
}
.profile-btn-danger:hover { background: var(--ab-red); color: var(--ab-white); }

.profile-actions { margin-top: 1.5rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.profile-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.profile-card {
    background: var(--ab-white);
    border: 1px solid var(--ab-grey-4);
    border-radius: var(--ab-radius-md);
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.profile-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ab-shadow-md);
    border-color: transparent;
}
.profile-card.is-default { border-color: var(--ab-red); }
.profile-card h4 { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0; }
.profile-card .meta { font-size: 0.9rem; color: var(--ab-grey-2); line-height: 1.55; }
.profile-card .actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }

.profile-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--ab-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.profile-badge.verified    { background: #E8F5E9; color: var(--ab-success); }
.profile-badge.unverified  { background: #FFF8E1; color: #8A6500; }
.profile-badge.default     { background: rgba(139,0,20,0.10); color: var(--ab-red); }
.profile-badge.coming-soon { background: var(--ab-grey-5); color: var(--ab-grey-2); }

.profile-empty {
    background: var(--ab-grey-5);
    border: 1px dashed var(--ab-grey-4);
    border-radius: var(--ab-radius-md);
    padding: 2rem;
    text-align: center;
    color: var(--ab-grey-2);
}

.profile-alert {
    border-radius: var(--ab-radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-left: 4px solid;
}
.profile-alert-success { background: #E8F5E9; border-color: var(--ab-success); color: #1B5E20; }
.profile-alert-error   { background: #FFF0F2; border-color: var(--ab-red); color: var(--ab-red-deep); }

/* Profile dialog modals (facturacion) */
dialog {
    border: 0 !important;
    border-radius: 20px !important;
    padding: 0 !important;
    width: 90% !important;
    max-width: 720px !important;
    box-shadow: var(--ab-shadow-lg) !important;
}
dialog .dlg-header {
    padding: 1.4rem 1.75rem !important;
    border-bottom: 1px solid var(--ab-grey-4) !important;
}
dialog .dlg-header h3 {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    color: var(--ab-black);
    margin: 0;
}
dialog .dlg-body { padding: 1.5rem 1.75rem !important; }
dialog .dlg-footer {
    padding: 1.2rem 1.75rem !important;
    background: var(--ab-grey-5);
    border-top: 1px solid var(--ab-grey-4) !important;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* ---------- 15. Reset some legacy bits that fight us ---------- */
.strap-module, .strap-module-actubi {
    background: var(--ab-red) !important;
    color: var(--ab-white) !important;
    text-align: center;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600;
}
.strap-module-banner-neighb {
    background: var(--ab-black) !important;
    color: var(--ab-white) !important;
    padding: 1.25rem 1.5rem !important;
    text-align: center;
    font-weight: 600;
}

/* =============================================================================
 * 16. Legacy page restyles (reservaciones / bolsa de trabajo / neighbors / menu)
 *     These pages use jQuery AJAX so we restyle WITHOUT changing markup.
 * ============================================================================= */

/* Page hero — dark with red glow, condensed white headline */
section.hero {
    position: relative;
    min-height: clamp(420px, 60vh, 600px) !important;
    height: auto !important;
    padding: 6rem 1.5rem 4rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--ab-black) !important;
    background-blend-mode: multiply;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat;
    color: var(--ab-white);
    overflow: hidden;
}
section.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 50%, rgba(201,32,47,0.45) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%);
    z-index: 0;
}
section.hero > * { position: relative; z-index: 1; }
section.hero h2 {
    font-family: var(--ab-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: var(--ab-white) !important;
    text-align: center;
    font-size: clamp(2rem, 5vw, 3.6rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.02em;
    margin: 0 0 1.5rem !important;
    text-shadow: 0 4px 18px rgba(0,0,0,0.6) !important;
    padding: 0 !important;
}
section.hero .contenido-hero {
    background: transparent !important;
    position: relative !important;
    padding: 0 !important;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
}
section.hero .contenido-hero h2,
section.hero .contenido-hero p {
    color: var(--ab-white) !important;
}
section.hero .contenido-hero .ubicacion p {
    color: rgba(255,255,255,0.92) !important;
    font-size: 1.05rem;
    max-width: 32rem;
    text-align: center;
    line-height: 1.5;
}

/* Legacy form (.formulario) — white pill card, modern look */
section.hero .contenedor {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.formulario {
    background: var(--ab-white) !important;
    color: var(--ab-grey-1);
    padding: 2rem 2rem 1.75rem !important;
    border-radius: 24px !important;
    box-shadow: var(--ab-shadow-lg);
    max-width: 760px !important;
    margin: 1rem auto 0 !important;
}
.formulario .contenedor-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem 1.1rem;
}
.formulario .campo {
    flex: none !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
}
.formulario .campo.w-100,
.formulario .campo.campogrande { grid-column: 1 / -1; }
.formulario .campo label {
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ab-grey-2) !important;
    font-weight: 700 !important;
    margin-bottom: 0.35rem !important;
    flex: none !important;
}
.formulario .campo input[type="text"],
.formulario .campo input[type="tel"],
.formulario .campo input[type="mail"],
.formulario .campo input[type="email"],
.formulario .campo input[type="date"],
.formulario .campo input[type="number"],
.formulario .campo select,
.formulario .campo textarea {
    width: 100% !important;
    padding: 0.85rem 1.15rem !important;
    border: 1.5px solid var(--ab-grey-4) !important;
    border-radius: var(--ab-radius-pill) !important;
    background: var(--ab-white) !important;
    font-family: var(--ab-font-body) !important;
    font-size: 0.95rem !important;
    color: var(--ab-black) !important;
    transition: border-color .15s, box-shadow .15s;
    outline: none !important;
    flex: none !important;
    box-sizing: border-box;
}
.formulario .campo textarea {
    border-radius: 18px !important;
    height: auto !important;
    min-height: 110px !important;
    resize: vertical;
}
.formulario .campo input:focus,
.formulario .campo select:focus,
.formulario .campo textarea:focus {
    border-color: var(--ab-red) !important;
    box-shadow: 0 0 0 3px rgba(139,0,20,0.08) !important;
}
.formulario .campo input::placeholder,
.formulario .campo textarea::placeholder { color: var(--ab-grey-3); }
.formulario legend {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ab-black);
    margin-bottom: 1.5rem !important;
}

/* Legacy submit buttons */
.formulario .boton,
.formulario .submit-btn,
.neighboors-form .submit-btn,
section.hero .boton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--ab-red) !important;
    border: 2px solid var(--ab-red) !important;
    color: var(--ab-white) !important;
    padding: 0.9rem 2.25rem !important;
    border-radius: var(--ab-radius-pill) !important;
    font-family: var(--ab-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: none !important;
    min-height: 48px;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s, border-color .15s;
    width: auto !important;
    min-width: 180px;
}
.formulario .boton:hover,
.formulario .submit-btn:hover {
    background: var(--ab-red-deep) !important;
    border-color: var(--ab-red-deep) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(139,0,20,.30);
}
.formulario .enviar {
    display: flex !important;
    justify-content: center;
    margin-top: 1.25rem;
}
.formulario .error {
    background: #FFF0F2 !important;
    color: var(--ab-red-deep) !important;
    border-left: 4px solid var(--ab-red);
    padding: 0.85rem 1rem !important;
    border-radius: var(--ab-radius-md);
    text-align: left !important;
    font-weight: 600;
    margin-top: 1rem;
}
.formulario .correcto {
    background: #E8F5E9 !important;
    color: #1B5E20 !important;
    border-left: 4px solid var(--ab-success);
    padding: 0.85rem 1rem !important;
    border-radius: var(--ab-radius-md);
    text-align: left !important;
    font-weight: 600;
    margin-top: 1rem;
}

/* Neighbors form (.form-section / .form-container) */
.form-section {
    padding: 3rem 1.5rem !important;
    background: linear-gradient(180deg, transparent 0%, var(--ab-cream) 30%);
}
.form-container {
    background: var(--ab-white) !important;
    padding: 2rem !important;
    border-radius: 24px !important;
    box-shadow: var(--ab-shadow-lg) !important;
    max-width: 760px !important;
}
.form-container .form-group label.bold-text {
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ab-grey-2) !important;
    font-weight: 700 !important;
    width: 100%;
}
.form-container .text-box {
    width: 100% !important;
    padding: 0.85rem 1.15rem !important;
    border: 1.5px solid var(--ab-grey-4) !important;
    border-radius: var(--ab-radius-pill) !important;
    background: var(--ab-white) !important;
    font-family: var(--ab-font-body) !important;
    color: var(--ab-black) !important;
    margin-top: 0.4rem;
    outline: none !important;
    box-sizing: border-box;
}
.form-container .text-area {
    border-radius: 18px !important;
    resize: vertical;
    height: auto !important;
    min-height: 110px;
}
.form-container .text-box:focus {
    border-color: var(--ab-red) !important;
    box-shadow: 0 0 0 3px rgba(139,0,20,0.08) !important;
}

/* Privacy modal — modernized */
.avisoprivicidad-modal-container { background: rgba(0,0,0,0.72) !important; }
.avisoprivicidad-modal-container .modal-content,
.avisoprivicidad-modal-container .subcambiar {
    background: var(--ab-white) !important;
    border-radius: 20px !important;
    border: 0 !important;
    box-shadow: var(--ab-shadow-lg) !important;
    max-width: 780px;
    width: calc(100% - 2rem) !important;
    margin: 1rem auto !important;
}
.avisoprivicidad-modal-container .modal-header {
    background: var(--ab-red) !important;
    color: var(--ab-white) !important;
    padding: 1.4rem 1.75rem !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    text-align: center;
}
.avisoprivicidad-modal-container .modal-header strong span {
    font-family: var(--ab-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
}
.avisoprivicidad-modal-container .modal-body {
    padding: 1.5rem 1.75rem !important;
    color: var(--ab-grey-1);
}
.avisoprivicidad-modal-container .aviso_privasub {
    font-size: 0.92rem !important;
    line-height: 1.55;
    color: var(--ab-grey-1);
}
.avisoprivicidad-modal-container .aviso_privasub strong { color: var(--ab-black); }
.avisoprivicidad-modal-container .modal-footer {
    background: var(--ab-grey-5) !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    padding: 1.2rem 1.75rem !important;
    color: var(--ab-grey-1) !important;
}
.avisoprivicidad-modal-container .btn_avisaprivacidad,
.avisoprivicidad-modal-container input.btn_avisaprivacidad {
    background: var(--ab-red) !important;
    border: 2px solid var(--ab-red) !important;
    color: var(--ab-white) !important;
    border-radius: var(--ab-radius-pill) !important;
    padding: 0.7rem 1.6rem !important;
    font-family: var(--ab-font-body) !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.avisoprivicidad-modal-container .btn_avisaprivacidad:hover {
    background: var(--ab-red-deep) !important;
    border-color: var(--ab-red-deep) !important;
    color: var(--ab-white) !important;
    transform: translateY(-1px);
}
.avisoprivicidad-modal-container .btn_noaceptar {
    background: transparent !important;
    color: var(--ab-grey-1) !important;
    border: 2px solid var(--ab-grey-4) !important;
}
.avisoprivicidad-modal-container .btn_noaceptar:hover {
    border-color: var(--ab-black) !important;
    color: var(--ab-black) !important;
    background: transparent !important;
}

/* Cookie notice */
.cookie-notification {
    background: var(--ab-black) !important;
    color: var(--ab-white) !important;
    border-radius: 16px;
    box-shadow: var(--ab-shadow-lg);
    border: 1px solid rgba(255,255,255,0.1);
}
.cookie-notification .ct-cookies-content { color: rgba(255,255,255,0.92) !important; }
.cookie-notification .ct-accept {
    background: var(--ab-red) !important;
    color: var(--ab-white) !important;
    border: 0 !important;
    border-radius: var(--ab-radius-pill) !important;
    padding: 0.7rem 1.4rem !important;
    font-family: var(--ab-font-body) !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.cookie-notification .ct-accept:hover { background: var(--ab-red-deep) !important; }
.cookie-notification .ct-close { color: var(--ab-white) !important; }

/* Premia modal (la app de lealtad) — close button INSIDE so no clipping */
.premia-modal-container {
    background: rgba(0,0,0,0.72) !important;
    padding: 1.5rem;
    box-sizing: border-box;
}
.premia-modal-container .subcambiar {
    background: var(--ab-white) !important;
    border-radius: 20px !important;
    box-shadow: var(--ab-shadow-lg) !important;
    overflow: hidden;
    padding: 0 !important;
    position: relative !important;
    max-width: 480px !important;
    width: calc(100% - 2rem) !important;
    margin: auto !important;
}
.premia-modal-container .subcambiar img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}
.premia-modal-container #modal-closepremia {
    background: var(--ab-white) !important;
    color: var(--ab-black) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--ab-shadow-md);
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    font-style: normal !important;
    cursor: pointer;
    z-index: 10;
    text-decoration: none;
    transition: background .15s, color .15s, transform .15s;
}
.premia-modal-container #modal-closepremia:hover {
    background: var(--ab-red) !important;
    color: var(--ab-white) !important;
    transform: scale(1.05);
}

/* =============================================================================
 * 17. Gift module (compra y certificado emitido)
 * ============================================================================= */
.gift-hero {
    background: var(--ab-black) !important;
    background-image:
        radial-gradient(ellipse at 75% 50%, rgba(201,32,47,0.45) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important;
    color: var(--ab-white) !important;
    padding: 5rem 1.5rem 3.5rem !important;
    text-align: center;
}
.gift-hero h2 {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    color: var(--ab-white) !important;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.05;
    margin: 0 0 1rem !important;
}
.gift-hero p {
    color: rgba(255,255,255,0.92) !important;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.55;
}
.gift-shell {
    max-width: 860px;
    margin: -2rem auto 4rem;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}
.gift-card {
    background: var(--ab-white);
    border-radius: 20px;
    padding: 2.25rem;
    box-shadow: var(--ab-shadow-md);
}
.gift-card h3 {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    font-size: 1.6rem;
    color: var(--ab-black);
    margin: 0 0 1.25rem;
}
.gift-card h4 {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--ab-black) !important;
    margin: 1.75rem 0 0.75rem !important;
    letter-spacing: 0.04em;
}

.gift-monto-options {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.gift-monto-options label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 0.9rem 1.4rem;
    border-radius: var(--ab-radius-pill);
    border: 2px solid var(--ab-grey-4);
    color: var(--ab-black);
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
    background: var(--ab-white);
    user-select: none;
}
.gift-monto-options label:hover { border-color: var(--ab-black); transform: translateY(-1px); }
.gift-monto-options label.selected {
    background: var(--ab-red);
    border-color: var(--ab-red);
    color: var(--ab-white);
}
.gift-monto-options input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem 1rem;
}
.gift-grid .full { grid-column: 1 / -1; }
.gift-field { display: flex; flex-direction: column; }
.gift-field label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ab-grey-2);
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.gift-field input,
.gift-field textarea,
.gift-field select {
    width: 100%;
    padding: 0.85rem 1.15rem;
    border: 1.5px solid var(--ab-grey-4);
    border-radius: var(--ab-radius-pill);
    background: var(--ab-white);
    font-family: var(--ab-font-body);
    font-size: 0.95rem;
    color: var(--ab-black);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.gift-field textarea { border-radius: 18px; min-height: 90px; resize: vertical; }
.gift-field input:focus,
.gift-field textarea:focus,
.gift-field select:focus {
    border-color: var(--ab-red);
    box-shadow: 0 0 0 3px rgba(139,0,20,0.08);
}

.gift-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2.25rem;
    min-height: 48px;
    border-radius: var(--ab-radius-pill);
    border: 2px solid transparent;
    font-family: var(--ab-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s, color .15s, border-color .15s;
}
.gift-btn:hover { transform: translateY(-1px); }
.gift-btn-primary {
    background: var(--ab-red);
    color: var(--ab-white);
    border-color: var(--ab-red);
    width: 100%;
    margin-top: 1.5rem;
}
.gift-btn-primary:hover {
    background: var(--ab-red-deep);
    border-color: var(--ab-red-deep);
    color: var(--ab-white);
    box-shadow: 0 8px 20px rgba(139,0,20,.30);
}
.gift-btn-secondary {
    background: var(--ab-white);
    color: var(--ab-black);
    border-color: var(--ab-grey-4);
}
.gift-btn-secondary:hover {
    border-color: var(--ab-black);
    background: var(--ab-grey-5);
    color: var(--ab-black);
}

.gift-alert {
    border-radius: var(--ab-radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid;
}
.gift-alert-error { background: #FFF0F2; border-color: var(--ab-red); color: var(--ab-red-deep); }

/* Certificate card (issued) */
.cert-emitido-wrap { display: flex; flex-direction: column; gap: 1.25rem; }
.cert-card {
    background: linear-gradient(135deg, var(--ab-red-deep) 0%, var(--ab-red) 100%);
    color: var(--ab-white);
    padding: 2rem 2.25rem;
    border-radius: 20px;
    box-shadow: var(--ab-shadow-lg);
    position: relative;
    overflow: hidden;
}
.cert-card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.cert-brand {
    font-family: var(--ab-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 1.25rem;
}
.cert-monto {
    font-family: var(--ab-font-display);
    font-size: clamp(3rem, 7vw, 4.5rem);
    line-height: 1;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.cert-moneda {
    font-size: 1rem;
    opacity: 0.7;
    margin-left: 0.5rem;
    font-weight: 500;
}
.cert-codigo {
    background: rgba(0,0,0,0.30);
    border: 1px dashed rgba(255,255,255,0.4);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-align: center;
    margin-top: 1.25rem;
    font-weight: 700;
}
.cert-expira {
    margin-top: 0.75rem;
    font-size: 0.88rem;
    opacity: 0.85;
    text-align: center;
}
.cert-mensaje {
    background: var(--ab-cream);
    border-left: 4px solid var(--ab-red);
    padding: 1.25rem 1.5rem;
    border-radius: var(--ab-radius-md);
    color: var(--ab-grey-1);
    font-style: italic;
    line-height: 1.55;
}
.cert-info {
    background: var(--ab-grey-5);
    padding: 1.25rem 1.5rem;
    border-radius: var(--ab-radius-md);
    color: var(--ab-grey-1);
    font-size: 0.92rem;
    line-height: 1.55;
}
.cert-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.cert-actions .gift-btn-primary { width: auto; margin-top: 0; min-width: 180px; }

/* =============================================================================
 * 18. Menu page (/menu) — RESTYLE ONLY (preserve legacy grid + sticky behavior)
 *     The legacy style.css does:
 *       .menu__comida { display: grid; grid-template-columns: 1fr 2fr; }
 *       .categorias .fixed { position: fixed; max-width: 245px; }
 *       .overlay { position: absolute; opacity:0; centered transform; }
 *     We DO NOT touch grid or positioning — only colors, fonts, shadows,
 *     radius, hover transitions. Keeps the JS click-to-jump and hover
 *     interactivity intact.
 * ============================================================================= */

/* Container wrapper — keep legacy grid, just give breathing room */
section.menu__comida.contenedor {
    max-width: 1280px;
    margin: 2rem auto 4rem;
    padding: 0 1.5rem;
}

/* Sticky sidebar — only restyle. NO position override. */
.sticky__container {
    text-align: left !important;
    padding-left: 0 !important;
    background: transparent !important;
}
.categorias .fixed {
    background: var(--ab-white);
    border: 1px solid var(--ab-grey-4);
    border-radius: 16px;
    box-shadow: var(--ab-shadow-sm);
    padding: 1.25rem 1rem !important;
    /* keep legacy position:fixed and max-width:245px */
}

/* "menu applebees" toggle button (visible only on mobile, hidden on desktop) */
.sticky__container .boton.boton__menu {
    background: var(--ab-red) !important;
    color: var(--ab-white) !important;
    border: 0 !important;
    padding: 0.85rem 1rem !important;
    border-radius: var(--ab-radius-pill) !important;
    font-family: var(--ab-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em;
    cursor: pointer;
    margin-bottom: 0.6rem;
    width: 100% !important;
}
.sticky__container .boton.boton__menu:hover { background: var(--ab-red-deep) !important; }

/* Category links (vertical list inside .fixed) */
.platillos {
    margin: 0 !important;
    border-bottom: 1px solid var(--ab-grey-5);
}
.platillos:last-child { border-bottom: 0; }
.platillos a {
    display: block;
    padding: 0.7rem 0.6rem !important;
    color: var(--ab-grey-1) !important;
    text-decoration: none !important;
    font-family: var(--ab-font-body) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color .15s, padding-left .15s;
    border-left: 3px solid transparent;
}
.platillos a:hover,
.platillos a.active {
    color: var(--ab-red) !important;
    padding-left: 1rem !important;
    border-left-color: var(--ab-red);
}

/* Section title (per category) — Oswald display dark with red glow */
.seccion__alimentos { scroll-margin-top: calc(var(--ab-header-h) + 1.5rem); }
.titulo__alimento {
    background: var(--ab-black) !important;
    color: var(--ab-white) !important;
    padding: 1.2rem 1.5rem !important;
    border-radius: 14px !important;
    margin: 0 0 1.5rem !important;
    background-image: radial-gradient(ellipse at 80% 50%, rgba(201,32,47,0.45) 0%, rgba(0,0,0,0) 55%);
}
.titulo__alimento h2,
.titulo__alimento .header__text {
    color: var(--ab-white) !important;
    font-family: var(--ab-font-display) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    letter-spacing: 0.02em;
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
}

/* Dish grid — keep legacy 2/3 column structure, just restyle gap */
.grid__alimentos {
    gap: 1.25rem !important;
    margin-left: 0 !important;
}

/* Dish card
   FIX: figure tenia aspect-ratio + overflow:hidden y la figcaption esta
   adentro del figure (HTML legacy), asi que el nombre se recortaba. Ahora
   la aspect-ratio vive en el IMG y la figcaption fluye debajo natural. */
div.menu__item {
    border: 1px solid var(--ab-grey-4) !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: var(--ab-shadow-sm) !important;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    background: var(--ab-white);
    display: flex !important;
    flex-direction: column;
}
div.menu__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--ab-shadow-md) !important;
    border-color: transparent !important;
}
div.menu__item figure {
    margin: 0 !important;
    background: var(--ab-grey-5);
    position: relative;
    overflow: hidden;
    display: block;
}
div.menu__item figure img {
    width: 100% !important;
    aspect-ratio: 4 / 3;
    height: auto !important;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
div.menu__item:hover figure img { transform: scale(1.05); }
div.menu__item figcaption {
    background: var(--ab-white) !important;
    color: var(--ab-black) !important;
    padding: 0.85rem 1rem 1rem !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    text-transform: none !important;
    text-align: left !important;
    font-family: var(--ab-font-body) !important;
    line-height: 1.3;
    display: block !important;
    position: relative;
    z-index: 2;
}

/* HIDE PRICES GLOBALLY — decision de negocio, no mostrar precios todavia.
   Cubre menu, item detail modal, carrito, pedido y cualquier lugar que
   muestre precio del API. Para reactivar: borrar este bloque o convertir
   a clase ".show-prices .item__price { display: block }" controlada por
   un flag de config.
   Si el API agrega flag noShowPrice por dish, se respeta automaticamente
   porque el toggle es global. */
.menu__item .item__price,
.cart-wrapper .cart-item .price,
.cart-item__price,
.subtotalcart,
.precio,
.product__price,
.item__price p,
.modal__window .price,
.cuenta__final .precio-total,
[data-price] { display: none !important; }

/* Hover overlay — preserve legacy positioning (top:50% left:50% transform centered)
   but modernize colors, padding, transitions. */
.menu__item .overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.95) 100%) !important;
    padding: 1.25rem 1rem !important;
    border-radius: 0 !important;
    z-index: 5 !important;
    /* legacy keeps: top:50%, left:50%, transform centered, opacity:0, w:100%, h:100% */
}
div.menu__item:hover .overlay {
    opacity: 1 !important;
}
.menu__item .overlay .texto__item {
    color: var(--ab-white) !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    font-family: var(--ab-font-body) !important;
    text-align: left !important;
    margin: 0 0 0.75rem !important;
    width: 100% !important;
    max-height: 7em;
    overflow: hidden;
}
.menu__item .overlay .order,
.menu__item .overlay .customize {
    display: flex !important;
    justify-content: center;
    margin: 0.3rem 0;
}
.menu__item .overlay .boton.boton__opcion {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--ab-red) !important;
    border: 2px solid var(--ab-red) !important;
    color: var(--ab-white) !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: var(--ab-radius-pill) !important;
    font-family: var(--ab-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s, transform .15s, border-color .15s;
    width: 85% !important;
    min-height: 36px;
    margin: 0 auto !important;
    opacity: 1 !important;
}
.menu__item .overlay .boton.boton__opcion:hover {
    background: var(--ab-red-deep) !important;
    border-color: var(--ab-red-deep) !important;
    transform: translateY(-1px);
}
.menu__item .overlay .boton.boton__custom {
    background: transparent !important;
    color: var(--ab-white) !important;
    border-color: var(--ab-white) !important;
}
.menu__item .overlay .boton.boton__custom:hover {
    background: var(--ab-white) !important;
    color: var(--ab-black) !important;
    border-color: var(--ab-white) !important;
}

/* Item detail modal (.modal__container + .modal__window) */
.modal__container {
    position: fixed !important;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.modal__container[style*="block"] { display: flex !important; }
.modal__window {
    background: var(--ab-white);
    border-radius: 20px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: var(--ab-shadow-lg);
    position: relative;
    padding: 0;
}
.modal__window .close__modal {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ab-white);
    color: var(--ab-black);
    border: 1px solid var(--ab-grey-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--ab-shadow-sm);
}
.modal__window .modal__flex {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 0;
}
@media (max-width: 700px) {
    .modal__window .modal__flex { grid-template-columns: 1fr; }
}
.modal__window .modal__image {
    background: var(--ab-grey-5);
    aspect-ratio: 1/1;
}
.modal__window .modal__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
@media (max-width: 700px) {
    .modal__window .modal__image img {
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0;
    }
}
.modal__window .modal__info {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.modal__window .modal__dish {
    font-family: var(--ab-font-display) !important;
    text-transform: uppercase;
    color: var(--ab-black) !important;
    font-size: 1.5rem !important;
    margin: 0 !important;
    line-height: 1.1;
}
.modal__window .modal__info p {
    color: var(--ab-grey-1);
    line-height: 1.55;
    margin: 0;
}
.modal__window .wrapper {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: auto;
}
.modal__window .btn_qty {
    background: var(--ab-grey-5) !important;
    border: 1px solid var(--ab-grey-4) !important;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ab-black);
}
.modal__window .btn_qty:hover { background: var(--ab-grey-4) !important; }
.modal__window .quantitymodal {
    width: 60px !important;
    border: 1px solid var(--ab-grey-4) !important;
    border-radius: 12px !important;
    text-align: center;
    font-weight: 700;
    color: var(--ab-black);
    font-size: 1rem !important;
}

/* Toast snackbar (cart added) */
#snackbar {
    background: var(--ab-success) !important;
    color: var(--ab-white) !important;
    border-radius: var(--ab-radius-pill) !important;
    padding: 0.85rem 1.5rem !important;
    box-shadow: var(--ab-shadow-md);
    font-family: var(--ab-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
}

/* Generic error banner */
.error-message {
    background: #FFF0F2 !important;
    border: 1px solid #F8C4CB !important;
    color: var(--ab-red-deep) !important;
    padding: 1rem 1.5rem !important;
    border-radius: var(--ab-radius-md) !important;
    margin: 1.5rem auto !important;
    max-width: 720px;
    font-weight: 600;
    text-align: center;
}

/* =============================================================================
 * 19. Restaurant page (/restuarante) — find branch with Leaflet map + cards
 * ============================================================================= */
.main-container { padding-top: 1.5rem; }
.main-container .container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.main-container .row .map {
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: var(--ab-shadow-md);
    border: 1px solid var(--ab-grey-4);
}
.main-container .card {
    border-radius: 16px !important;
    box-shadow: var(--ab-shadow-md) !important;
    overflow: hidden;
    border: 1px solid var(--ab-grey-4);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.main-container .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ab-shadow-lg) !important;
    border-color: transparent;
}
.main-container .headercard img {
    object-fit: cover;
    height: 200px !important;
}
.main-container .card .btn,
.cambiarsucursal-modal-container .btn,
.cuenta__final .btn,
section.hero .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--ab-red) !important;
    color: var(--ab-white) !important;
    border: 2px solid var(--ab-red) !important;
    padding: 0.75rem 1.6rem !important;
    border-radius: var(--ab-radius-pill) !important;
    font-family: var(--ab-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: none;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s, transform .15s, border-color .15s;
}
.main-container .card .btn:hover,
.cambiarsucursal-modal-container .btn:hover,
section.hero .btn:hover {
    background: var(--ab-red-deep) !important;
    border-color: var(--ab-red-deep) !important;
    color: var(--ab-white) !important;
    transform: translateY(-1px);
}

/* Cambiar sucursal modal */
.cambiarsucursal-modal-container { background: rgba(0,0,0,0.72) !important; }
.cambiarsucursal-modal-container .subcambiar {
    background: var(--ab-white) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: var(--ab-shadow-lg) !important;
    width: 90% !important;
    max-width: 520px !important;
}
.cambiarsucursal-modal-container .subcambiar h3 {
    font-family: var(--ab-font-display) !important;
    text-transform: uppercase !important;
    color: var(--ab-black) !important;
    font-size: 1.5rem !important;
    margin: 0 0 1rem !important;
    text-align: center;
    padding: 0 !important;
}
.cambiarsucursal-modal-container .subcambiar .box {
    width: 100% !important;
    padding: 0.85rem 1.15rem !important;
    border: 1.5px solid var(--ab-grey-4) !important;
    border-radius: var(--ab-radius-pill) !important;
    background: var(--ab-white) !important;
    font-family: var(--ab-font-body) !important;
    font-size: 0.95rem !important;
    color: var(--ab-black) !important;
    margin: 0.5rem 0 1rem !important;
}
.cambiarsucursal-modal-container .subcambiar .box:focus {
    border-color: var(--ab-red) !important;
    box-shadow: 0 0 0 3px rgba(139,0,20,0.08) !important;
    outline: none !important;
}
.cambiarsucursal-modal-container #modal-close {
    color: var(--ab-grey-2) !important;
    font-size: 1.8rem !important;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    z-index: 2;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.cambiarsucursal-modal-container #modal-close:hover { color: var(--ab-red) !important; }

/* =============================================================================
 * 20. Cart / Pedido (carrito y pedido) — order summary and checkout
 * ============================================================================= */
.cart-wrapper .cart-item {
    padding: 1rem 0 !important;
    border-bottom: 1px solid var(--ab-grey-4) !important;
    grid-template-columns: 90px 1fr auto !important;
    gap: 1rem;
}
.cart-wrapper .cart-item img {
    width: 100% !important;
    height: 90px;
    object-fit: cover;
    border-radius: var(--ab-radius-md);
}
.cart-wrapper .cart-item h3 {
    font-family: var(--ab-font-body) !important;
    font-weight: 700;
    margin: 0 !important;
    color: var(--ab-black);
    text-align: left !important;
    font-size: 1rem !important;
}
.cart-wrapper .cart-item .quantity {
    color: var(--ab-grey-2);
    font-size: 0.88rem;
}
.cart-wrapper .cart-item .price {
    color: var(--ab-red);
    font-weight: 700;
}
.cart-wrapper .cart-item .cancel i,
.cart-wrapper .cart-item .fa-window-close {
    color: var(--ab-red) !important;
    cursor: pointer;
    font-size: 1.2rem;
}

.checkout, .view-cart, .cart_menu {
    background: var(--ab-red) !important;
    color: var(--ab-white) !important;
    border-radius: var(--ab-radius-pill) !important;
    border: 2px solid var(--ab-red) !important;
    padding: 0.85rem 1.5rem !important;
    font-family: var(--ab-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    transition: background .15s, transform .15s;
    text-align: center;
    text-decoration: none !important;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 92% !important;
    margin: 0.6rem auto !important;
}
.checkout:hover, .view-cart:hover, .cart_menu:hover {
    background: var(--ab-red-deep) !important;
    border-color: var(--ab-red-deep) !important;
    transform: translateY(-1px);
}
.view-cart a, .cart_menu a {
    color: var(--ab-white) !important;
    text-decoration: none !important;
    width: 100%;
}

.subtotalcart {
    text-align: right;
    padding: 1rem 1.5rem !important;
    font-weight: 700;
    color: var(--ab-black);
    border-top: 1px solid var(--ab-grey-4);
}

/* Cart / pedido form (.item__formulario) */
.item__formulario input,
.item__formulario select,
.item__formulario textarea {
    padding: 0.85rem 1.15rem !important;
    border: 1.5px solid var(--ab-grey-4) !important;
    border-radius: var(--ab-radius-pill) !important;
    background: var(--ab-white) !important;
    font-family: var(--ab-font-body) !important;
    color: var(--ab-black) !important;
    width: 100%;
    box-sizing: border-box;
}
.item__formulario textarea { border-radius: 18px !important; }
.item__formulario.success input { border-color: var(--ab-success) !important; }
.item__formulario.error input { border-color: var(--ab-red) !important; }
.item__formulario small { color: var(--ab-red) !important; font-weight: 600; }

.cuenta__final {
    background: var(--ab-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--ab-shadow-md);
    margin: 2rem auto;
    max-width: 760px;
}
.cuenta__final .error {
    background: #FFF0F2 !important;
    color: var(--ab-red-deep) !important;
    border: 1px solid #F8C4CB !important;
    font-weight: 700;
}

.Eliminar__orden {
    background: transparent !important;
    color: var(--ab-red) !important;
    border: 2px solid var(--ab-red) !important;
    border-radius: var(--ab-radius-pill) !important;
    padding: 0.65rem 1.4rem !important;
    font-family: var(--ab-font-body) !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.Eliminar__orden:hover {
    background: var(--ab-red) !important;
    color: var(--ab-white) !important;
}

/* =============================================================================
 * 21. Avisado (privacidad) page — plain text wrapper now becomes a paper card
 * ============================================================================= */
body > .aviso_privasub {
    background: var(--ab-white);
    max-width: 920px;
    margin: 3rem auto !important;
    padding: 2.5rem 3rem !important;
    border-radius: 16px;
    box-shadow: var(--ab-shadow-md);
    font-size: 0.95rem !important;
    line-height: 1.65;
    color: var(--ab-grey-1);
}
body > .aviso_privasub center strong {
    font-family: var(--ab-font-display);
    font-size: 1.6rem;
    text-transform: uppercase;
    color: var(--ab-red);
    display: inline-block;
    margin: 1rem 0;
    letter-spacing: 0.04em;
}
body > .aviso_privasub strong { color: var(--ab-black); font-weight: 600; }
body > .aviso_privasub table {
    border-radius: 12px !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0;
    margin: 1.5rem 0;
}
body > .aviso_privasub table td:first-child {
    background: var(--ab-grey-5);
    font-weight: 700 !important;
    color: var(--ab-black);
}

/* =============================================================================
 * 22. Certificate detail page (/profile/regalo/{publicId})
 * ============================================================================= */
.cert-detail-shell {
    max-width: 980px;
    margin: 2rem auto 4rem;
    padding: 0 1.5rem;
}
.cert-detail-shell > div:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ab-red) !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none !important;
}
.cert-detail-shell > div:first-child a:hover { color: var(--ab-red-deep) !important; text-decoration: underline !important; }

.cert-detail-card {
    background: var(--ab-white);
    border-radius: 20px;
    box-shadow: var(--ab-shadow-md);
    overflow: hidden;
}
.cert-detail-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 2rem 2.25rem;
    background: linear-gradient(135deg, var(--ab-red-deep) 0%, var(--ab-red) 100%);
    color: var(--ab-white);
    position: relative;
    overflow: hidden;
}
.cert-detail-header::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%);
}
.cert-detail-header .left .codigo {
    font-family: 'Courier New', monospace;
    background: rgba(0,0,0,0.30);
    border: 1px dashed rgba(255,255,255,0.4);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    display: inline-block;
    margin-bottom: 0.6rem;
}
.cert-detail-header .left h2 {
    font-family: var(--ab-font-display) !important;
    text-transform: uppercase;
    color: var(--ab-white) !important;
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin: 0 !important;
    line-height: 1;
}
.cert-detail-header .right { text-align: right; }
.cert-detail-header .right .saldo {
    font-family: var(--ab-font-display);
    font-size: clamp(2.5rem, 5vw, 3.6rem);
    line-height: 1;
    font-weight: 700;
}
.cert-detail-header .right .valornom {
    font-size: 0.88rem;
    opacity: 0.85;
    margin-top: 0.3rem;
}

.cert-detail-meta {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.5rem;
    padding: 1.75rem 2.25rem;
    margin: 0;
    background: var(--ab-grey-5);
    border-bottom: 1px solid var(--ab-grey-4);
}
.cert-detail-meta > div { display: flex; flex-direction: column; gap: 0.2rem; }
.cert-detail-meta dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ab-grey-2);
    font-weight: 700;
    margin: 0 !important;
}
.cert-detail-meta dd {
    font-size: 0.95rem;
    color: var(--ab-black);
    margin: 0 !important;
    font-weight: 600;
}

.simul-box {
    margin: 1.5rem 2.25rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(139,0,20,0.06) 0%, rgba(139,0,20,0.02) 100%);
    border: 1px dashed var(--ab-red);
    border-radius: var(--ab-radius-md);
}
.simul-box h4 {
    font-family: var(--ab-font-display) !important;
    text-transform: uppercase;
    color: var(--ab-red) !important;
    font-size: 1.1rem;
    margin: 0 0 0.5rem !important;
    letter-spacing: 0.04em;
}
.simul-box form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: end;
}
@media (max-width: 600px) {
    .simul-box form { grid-template-columns: 1fr; }
}
.simul-box .gift-field { margin: 0; }

.cert-history {
    padding: 1.75rem 2.25rem 2.25rem;
}
.cert-history h3 {
    font-family: var(--ab-font-display);
    text-transform: uppercase;
    color: var(--ab-black);
    font-size: 1.2rem;
    margin: 0 0 1rem;
    letter-spacing: 0.04em;
}
.cert-history table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ab-grey-4);
}
.cert-history table th {
    background: var(--ab-grey-5);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ab-grey-2);
    text-align: left;
    padding: 0.85rem 1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--ab-grey-4);
}
.cert-history table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--ab-grey-5);
    font-size: 0.9rem;
    color: var(--ab-grey-1);
}
.cert-history table tbody tr:last-child td { border-bottom: 0; }
.cert-history table tbody tr:hover { background: var(--ab-grey-5); }
.cert-history .tipo {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--ab-radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--ab-grey-5);
    color: var(--ab-grey-1);
}
.cert-history .t-EMITIR   { background: rgba(139,0,20,0.1); color: var(--ab-red); }
.cert-history .t-ACTIVAR  { background: #E8F5E9; color: var(--ab-success); }
.cert-history .t-CANJEAR  { background: #FFF8E1; color: #8A6500; }
.cert-history .t-RECARGAR { background: rgba(58, 80, 161, 0.1); color: #3A50A1; }
.cert-history .monto-pos { color: var(--ab-success); font-weight: 700; }
.cert-history .monto-neg { color: var(--ab-red); font-weight: 700; }

/* =============================================================================
 * 23. Subscribe popup (#Suscribirse .overlaysub) — modernized
 * ============================================================================= */
#Suscribirse.overlaysub,
.overlaysub {
    background: rgba(0,0,0,0.72) !important;
}
#Suscribirse .popup,
.overlaysub .popup {
    background: transparent !important;
    border-radius: 0 !important;
}
#Suscribirse .window,
.overlaysub .window {
    background: var(--ab-white) !important;
    border-radius: 24px !important;
    box-shadow: var(--ab-shadow-lg) !important;
    overflow: hidden;
    max-width: 540px !important;
    margin: 1rem auto !important;
}
#Suscribirse .box,
.overlaysub .box {
    padding: 2rem 2.25rem !important;
    background: var(--ab-white) !important;
    color: var(--ab-grey-1) !important;
}
#Suscribirse .closesubcribe,
.overlaysub .closesubcribe {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ab-white) !important;
    color: var(--ab-black) !important;
    border: 1px solid var(--ab-grey-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    z-index: 2;
    box-shadow: var(--ab-shadow-sm);
    text-decoration: none !important;
}
#Suscribirse .newleter-content label,
.overlaysub .newleter-content label {
    display: block;
    font-family: var(--ab-font-display) !important;
    text-transform: uppercase;
    color: var(--ab-black) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
    text-align: center;
}
#Suscribirse .newleter-content p,
.overlaysub .newleter-content p {
    color: var(--ab-grey-2) !important;
    font-size: 0.88rem !important;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
#Suscribirse #frm_subscribe h2,
.overlaysub #frm_subscribe h2 {
    font-family: var(--ab-font-body) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ab-grey-2) !important;
    font-weight: 700 !important;
    margin: 0 0 0.4rem !important;
    text-align: left;
}
#Suscribirse #frm_subscribe input[type="mail"],
#Suscribirse #frm_subscribe input[type="email"],
#Suscribirse #frm_subscribe input[type="text"],
.overlaysub input[type="mail"],
.overlaysub input[type="email"],
.overlaysub input[type="text"] {
    width: 100% !important;
    padding: 0.85rem 1.15rem !important;
    border: 1.5px solid var(--ab-grey-4) !important;
    border-radius: var(--ab-radius-pill) !important;
    background: var(--ab-white) !important;
    font-family: var(--ab-font-body) !important;
    font-size: 0.95rem !important;
    color: var(--ab-black) !important;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    margin-bottom: 0.75rem;
    box-sizing: border-box;
}
#Suscribirse #frm_subscribe input:focus,
.overlaysub input:focus {
    border-color: var(--ab-red) !important;
    box-shadow: 0 0 0 3px rgba(139,0,20,0.08) !important;
}
#Suscribirse .btn_susb,
.overlaysub .btn_susb {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--ab-red) !important;
    color: var(--ab-white) !important;
    padding: 0.85rem 2.25rem !important;
    border-radius: var(--ab-radius-pill) !important;
    border: 2px solid var(--ab-red) !important;
    font-family: var(--ab-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    text-decoration: none !important;
    margin-top: 0.75rem;
    transition: background .15s, transform .15s, border-color .15s;
    min-width: 180px;
}
#Suscribirse .btn_susb:hover,
.overlaysub .btn_susb:hover {
    background: var(--ab-red-deep) !important;
    border-color: var(--ab-red-deep) !important;
    transform: translateY(-1px);
}
#Suscribirse .btn_susb span,
.overlaysub .btn_susb span { color: var(--ab-white); }
#Suscribirse .seccion_modal2,
.overlaysub .seccion_modal2 {
    background: var(--ab-cream) !important;
    color: var(--ab-grey-1) !important;
    padding: 2rem !important;
}
#Suscribirse .seccion_modal2 h1,
.overlaysub .seccion_modal2 h1 {
    font-family: var(--ab-font-display) !important;
    color: var(--ab-black) !important;
    text-transform: uppercase;
    font-size: 1.4rem !important;
    text-align: center;
    margin: 0 0 1rem !important;
}
#Suscribirse .copiar_promocion h2,
.overlaysub .copiar_promocion h2 {
    color: var(--ab-grey-1) !important;
    font-family: var(--ab-font-body) !important;
}

/* =============================================================================
 * 24. Cart popup (.whole-cart-window) — dropdown desde el header
 * ============================================================================= */
.whole-cart-window {
    background: var(--ab-white) !important;
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: var(--ab-shadow-lg) !important;
    width: 420px !important;
    max-width: calc(100vw - 2rem);
    margin-right: 1rem !important;
    margin-top: 0.5rem !important;
    overflow: hidden;
    z-index: 1001 !important;
}
.whole-cart-window .tupedidoheader {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ab-grey-4);
    grid-template-columns: none !important;
}
.whole-cart-window .tupedidoheader label {
    font-family: var(--ab-font-display) !important;
    text-transform: uppercase;
    color: var(--ab-black) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
}
.whole-cart-window .cartHeader {
    height: auto !important;
}
.whole-cart-window .cartHeader a.close {
    color: var(--ab-grey-2) !important;
    font-size: 1.4rem;
    text-decoration: none !important;
    cursor: pointer;
}
.whole-cart-window .cartHeader a.close:hover { color: var(--ab-red) !important; }
.whole-cart-window .cart-wrapper {
    padding: 0.5rem 1.25rem;
    max-height: 360px !important;
    overflow-y: auto;
}
.whole-cart-window.my-cart__empty {
    padding: 1.5rem !important;
    text-align: center;
}
.whole-cart-window.my-cart__empty p {
    color: var(--ab-grey-2) !important;
    font-size: 1rem !important;
    margin: 1rem 0 !important;
    text-transform: none !important;
    font-weight: 600;
}

/* =============================================================================
 * 25. Header — refinements for cleaner spacing & secondary nav (ENCUESTAS/NEIGHBORS)
 * ============================================================================= */
@media (min-width: 1024px) {
    /* Make the primary user-info row (login/find store/facturacion) compact and group secondary */
    header.site-header .navegacion .responsivetres > div:first-child {
        gap: 1.5rem !important;
        flex-wrap: wrap;
    }
    /* The right-side leftheader (ENCUESTAS, NEIGHBORS) — make them a small secondary cluster */
    header.site-header .leftheader {
        margin-left: 1rem !important;
        gap: 1.2rem !important;
        padding-left: 1rem;
        border-left: 1px solid var(--ab-grey-4);
    }
    header.site-header .leftheader .label1 a,
    header.site-header .leftheader .leftheaderneigh a {
        font-size: 0.72rem !important;
        letter-spacing: 0.14em !important;
        color: var(--ab-grey-2) !important;
    }
    header.site-header .leftheader .label1 a:hover,
    header.site-header .leftheader .leftheaderneigh a:hover { color: var(--ab-red) !important; }
}

/* Subtle separator between primary and secondary nav rows */
header.site-header .responsivetres > div:first-child > div {
    flex-wrap: wrap;
}

/* When auth user is logged in: the "Mi perfil" link should look like a small chip */
header.site-header .navegacion .responsivetres > div:first-child > .label1 > a[href*="profile"] {
    display: inline-flex;
    align-items: center;
    background: var(--ab-grey-5);
    padding: 0.4rem 0.85rem !important;
    border-radius: var(--ab-radius-pill);
    color: var(--ab-black) !important;
    font-weight: 700;
}
header.site-header .navegacion .responsivetres > div:first-child > .label1 > a[href*="profile"]:hover {
    background: var(--ab-red);
    color: var(--ab-white) !important;
}
header.site-header .navegacion .responsivetres > div:first-child > .label1 > a[href*="profile"] svg {
    stroke: currentColor;
}

/* =============================================================================
 * 26. Page-top strap banners (location updated / promo strip)
 * ============================================================================= */
.strap-module-actubi {
    background: var(--ab-black) !important;
    color: var(--ab-white) !important;
    padding: 0.85rem 1.5rem !important;
    text-align: center;
    border-bottom: 3px solid var(--ab-red);
}
.strap-module-actubi .strap-text { color: var(--ab-white) !important; font-weight: 600; }
.strap-module-actubi span[style*="uppercase"] { color: var(--ab-red-glow) !important; font-weight: 700; }

/* =============================================================================
 * 27. Sidenav (mobile slide-in) — refinement
 * ============================================================================= */
@media (max-width: 1023px) {
    header.site-header .navegacion.sidenav {
        background: var(--ab-black) !important;
        color: var(--ab-white) !important;
    }
    header.site-header .navegacion.sidenav a,
    header.site-header .navegacion.sidenav button {
        color: var(--ab-white) !important;
        padding: 0.85rem 1.25rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        width: 100%;
        text-align: left;
        display: flex !important;
        align-items: center;
        font-size: 0.92rem !important;
    }
    header.site-header .navegacion.sidenav a:hover,
    header.site-header .navegacion.sidenav button:hover {
        background: rgba(255,255,255,0.06);
        color: var(--ab-red-glow) !important;
    }
    header.site-header .navegacion.sidenav .closebtn {
        color: var(--ab-white) !important;
        font-size: 2rem;
        padding: 1rem 1.25rem;
        cursor: pointer;
    }
    header.site-header .navegacion.sidenav .leftheader {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
}

/* =============================================================================
 * 28. Visited link reset (style.css had `a:visited { color: #fff }`)
 * ============================================================================= */
a:visited { color: inherit; }
header.site-header a:visited { color: var(--ab-gold) !important; }
header.site-header .icono__carrito:visited svg { stroke: var(--ab-grey-1) !important; }
.ab-link:visited { color: var(--ab-red); }
.ab-btn--primary:visited,
.ab-btn--primary { color: var(--ab-white) !important; }
.ab-btn--white:visited,
.ab-btn--white { color: var(--ab-black) !important; }

/* =============================================================================
 * Mobile niceties globales (<=767px)
 * ============================================================================= */
@media (max-width: 767px) {
    .ab-shell, .ab-home-hero__content { padding-left: 1rem; padding-right: 1rem; }
    header.site-header { padding: 0 1rem !important; }
    .ab-auth__card { padding: 1.75rem 1.5rem; }
    .profile-shell { margin: -1rem 1rem 2rem; padding: 1.5rem 1.25rem !important; }
    .profile-tabs a { padding: 0.7rem 0.9rem; font-size: 0.78rem; }
    .ab-section { padding: 3.5rem 0; }
    body > .aviso_privasub { padding: 1.5rem 1.25rem !important; margin: 1.5rem 1rem !important; }
    .whole-cart-window { width: 100% !important; margin: 0 !important; max-width: 100vw !important; border-radius: 0 !important; }
    .cert-detail-header { grid-template-columns: 1fr; text-align: center; }
    .cert-detail-header .right { text-align: center; }
    .cert-detail-meta, .simul-box, .cert-history { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .simul-box { margin-left: 1rem; margin-right: 1rem; }
    .cert-history table { font-size: 0.85rem; }
    .cert-history table th, .cert-history table td { padding: 0.6rem 0.7rem; }

    /* Menu page: overlay sigue absolute, pero en touch devices se activa
       tambien con tap-and-hold. La figcaption es siempre visible (no se
       oculta por opacity). */
    .grid__alimentos { grid-template-columns: 1fr 1fr !important; }

    /* Legacy section.hero (reservaciones / bolsa / neighbors) — comprimir verticalmente */
    section.hero {
        min-height: clamp(280px, 50vh, 380px) !important;
        padding: 3.5rem 1rem 2rem !important;
    }
    section.hero h2 {
        font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
        margin: 0 0 1rem !important;
    }

    /* Legacy .formulario — edge-to-edge en mobile, sin shadow gigante,
       padding mas tight */
    .formulario {
        padding: 1.5rem 1.25rem !important;
        border-radius: 18px !important;
        margin: 0.5rem 0 !important;
    }
    .formulario .contenedor-campos {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    .formulario .campo input,
    .formulario .campo select,
    .formulario .campo textarea {
        font-size: 16px !important;  /* iOS no zoom on focus */
    }
    .formulario .boton,
    .formulario .submit-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
    .form-container {
        padding: 1.5rem 1.25rem !important;
        border-radius: 18px !important;
    }

    /* Privacy modal mobile — padding mas tight, scroll mas largo */
    .avisoprivicidad-modal-container .modal-content,
    .avisoprivicidad-modal-container .subcambiar {
        margin: 0.75rem auto !important;
        width: calc(100% - 1.5rem) !important;
        border-radius: 14px !important;
    }
    .avisoprivicidad-modal-container .modal-header {
        padding: 1rem 1.25rem !important;
        border-top-left-radius: 14px !important;
        border-top-right-radius: 14px !important;
    }
    .avisoprivicidad-modal-container .modal-body { padding: 1rem 1.25rem !important; }
    .avisoprivicidad-modal-container .aviso_privasub {
        height: 280px !important;
        font-size: 0.85rem !important;
    }
    .avisoprivicidad-modal-container .modal-footer { padding: 1rem 1.25rem !important; }
    .avisoprivicidad-modal-container .col-2 {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    .avisoprivicidad-modal-container .btn_avisaprivacidad,
    .avisoprivicidad-modal-container input.btn_avisaprivacidad {
        width: 100% !important;
    }

    /* Footer mobile — single column instead of cramped grid */
    footer.c-footer { padding: 2.5rem 1.25rem 1.5rem !important; }
    footer.c-footer .c-footer__top-section {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
        margin-bottom: 1.75rem !important;
    }
    footer.c-footer .c-footer__link-list--corp-nav {
        justify-content: center !important;
        gap: 0.6rem 1.2rem !important;
    }
    footer.c-footer .c-footer__copy { text-align: center !important; }

    /* Gift card */
    .gift-shell { margin: -1rem auto 2rem; padding: 0 1rem; }
    .gift-card { padding: 1.5rem 1.25rem; }
    .gift-grid { grid-template-columns: 1fr !important; }
    .gift-monto-options { gap: 0.4rem; }
    .gift-monto-options label { min-width: 0; flex: 1; padding: 0.7rem 0.6rem; }
}

@media (max-width: 480px) {
    .grid__alimentos { grid-template-columns: 1fr !important; }
    .ab-services__grid { grid-template-columns: 1fr !important; padding: 0 1rem; }
    .gift-monto-options label { font-size: 0.85rem; }
}