/*
Theme Name: MotoGraphix V9
Theme URI: https://motogrpx.com
Author: MotoGraphix
Description: MotoGraphix V9
Version: 9.0.0
Text Domain: motographix-v9
*/


/* =========================================================
   MOTOGRAPHIX V9
   BASE GLOBAL
   ========================================================= */


/* =========================================================
   TIPOGRAFÍAS LOCALES — 100% ALOJADAS EN EL THEME
   Archivos esperados:
   assets/fonts/Montserrat-VariableFont_wght.ttf
   assets/fonts/BebasNeue-Regular.ttf
   ========================================================= */

@font-face {
    font-family: "Montserrat";
    src:
        url("assets/fonts/Montserrat-VariableFont_wght.woff2") format("woff2"),
        url("assets/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Bebas Neue";
    src:
        url("assets/fonts/BebasNeue-Regular.woff2") format("woff2"),
        url("assets/fonts/BebasNeue-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --mgx-red: #E30613;
    --mgx-red-dark: #B9000B;

    --mgx-black: #000000;
    --mgx-black-soft: #0A0A0A;

    --mgx-white: #FFFFFF;

    --mgx-border: rgba(255, 255, 255, 0.10);

    --mgx-font-ui: "Montserrat", Arial, Helvetica, sans-serif;

}


/* =========================================================
   RESET
   ========================================================= */

html {

    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--mgx-red) var(--mgx-black-soft);

    background: var(--mgx-black);

}


body {

    margin: 0;
    padding: 0;

    background: var(--mgx-black);

    color: var(--mgx-white);

    font-family: var(--mgx-font-ui);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.5;

}


/* =========================================================
   BOX SIZING
   ========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


/* =========================================================
   IMÁGENES
   ========================================================= */

img {

    max-width: 100%;

    height: auto;

    display: block;

}


/* =========================================================
   ENLACES
   ========================================================= */

a {

    color: inherit;

    text-decoration: none;

}


/* =========================================================
   BOTONES
   TODOS LOS BOTONES V9
   ========================================================= */

button,
input,
select,
textarea {

    font-family: var(--mgx-font-ui);

}


/*
   Los botones visibles de V9 tendrán
   puntas completamente redondeadas.
*/

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {

    border-radius: 999px;

}


/* =========================================================
   TIPOGRAFÍA PRINCIPAL
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin-top: 0;

    font-family: var(--mgx-font-ui);

    font-weight: 900;

    line-height: 1.15;

}


h1 {

    font-weight: 900;

}


h2 {

    font-weight: 900;

}


h3,
h4,
h5,
h6 {

    font-weight: 800;

}


p {

    font-weight: 600;

}


/* =========================================================
   TEXTO DESTACADO
   ========================================================= */

strong,
b {

    font-weight: 900;

}


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.site-content {

    width: 100%;

    margin: 0;

    padding: 0;

}


/* =========================================================
   ELIMINAR ESPACIOS INESPERADOS
   ========================================================= */

.site-content > :first-child {

    margin-top: 0;

}


/* =========================================================
   WORDPRESS
   ========================================================= */

.wp-site-blocks {

    padding: 0;

}


/* =========================================================
   SELECCIÓN DE TEXTO
   ========================================================= */

::selection {

    background: var(--mgx-red);

    color: var(--mgx-white);

}


/* =========================================================
   BARRA DE SCROLL
   ========================================================= */


/* CHROME / EDGE / SAFARI */

::-webkit-scrollbar {

    width: 10px;

}


::-webkit-scrollbar-track {

    background: var(--mgx-black-soft);

}


::-webkit-scrollbar-thumb {

    background: var(--mgx-red);

    border-radius: 999px;

    border: 2px solid var(--mgx-black-soft);

}


::-webkit-scrollbar-thumb:hover {

    background: var(--mgx-red-dark);

}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible {

    outline: 2px solid var(--mgx-red);

    outline-offset: 3px;

}


/* =========================================================
   EVITAR RESALTADO AZUL EN MÓVILES
   ========================================================= */

a,
button {

    -webkit-tap-highlight-color: transparent;

}

/* =========================================================
   MOTOGRAPHIX V9 — CONTEXT NAV
   Navegación contextual + acabado Liquid Glass.
   ========================================================= */

body.mgx-has-context-nav {
    padding-bottom: 108px;
}

.mgx-context-nav {
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 9900;

    width: min(660px, calc(100% - 24px));
    min-height: 70px;
    padding: 7px 8px;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;

    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(235,238,245,.18) 0%, rgba(180,186,198,.10) 100%);
    box-shadow:
        0 16px 40px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.26),
        inset 0 -1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(22px) saturate(185%) brightness(1.06);
    -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.06);

    font-family: var(--mgx-font-ui);
}

.mgx-context-nav__item {
    min-width: 0;
    min-height: 56px;
    padding: 5px 7px;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    border: 0;
    border-radius: 22px;
    background: transparent;
    color: rgba(255,255,255,.96);
    text-shadow: 0 1px 6px rgba(0,0,0,.58);
    text-decoration: none;
    cursor: pointer;

    font: inherit;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.mgx-context-nav__item:hover,
.mgx-context-nav__item:focus-visible {
    background: rgba(255,255,255,.07);
    color: #fff;
    outline: 0;
}

.mgx-context-nav__item.is-active {
    color: #fff;
    background: linear-gradient(155deg, rgba(255,32,48,.94), rgba(191,0,13,.88));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        0 8px 26px rgba(227,6,19,.30),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.mgx-context-nav__item.is-disabled,
.mgx-context-nav__item:disabled {
    opacity: .35;
    cursor: default;
}

.mgx-context-nav__item > span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

.mgx-context-nav__icon {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55 !important;
}

.mgx-context-nav__icon use {
    stroke-width: 1.55 !important;
}

.mgx-context-nav__dots {
    width: 27px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.mgx-context-nav__dots i {
    width: 4px;
    height: 4px;
    display: block;
    border-radius: 50%;
    background: currentColor;
}

/* El Viewer usa su propia barra. */
body.mgx-viewer-open .mgx-context-nav,
body.mgx-viewer-shared-body .mgx-context-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================================================
   BOTTOM SHEETS
   ========================================================= */

.mgx-context-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(0,0,0,.58);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

.mgx-context-sheet-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mgx-context-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 10030;
    transform: translate(-50%, 105%);

    width: min(720px, 100%);
    max-height: min(78vh, 720px);
    overflow: auto;

    padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
    box-sizing: border-box;

    color: #fff;
    background: linear-gradient(180deg, rgba(34,34,39,.91), rgba(11,11,14,.95));
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 28px 28px 0 0;
    box-shadow:
        0 -30px 85px rgba(0,0,0,.64),
        inset 0 1px 0 rgba(255,255,255,.09);
    backdrop-filter: blur(34px) saturate(160%);
    -webkit-backdrop-filter: blur(34px) saturate(160%);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.22,.72,.22,1), opacity .2s ease, visibility .2s ease;
}

.mgx-context-sheet.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mgx-context-sheet__handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}

.mgx-context-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.mgx-context-sheet__header small {
    display: block;
    margin-bottom: 3px;
    color: var(--mgx-red);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.mgx-context-sheet__header h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 5vw, 34px);
    line-height: 1;
    font-weight: 900;
}

.mgx-context-sheet__close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    color: #fff;
    cursor: pointer;
}

.mgx-context-sheet__close .mgx-context-nav__icon {
    width: 21px;
    height: 21px;
}

.mgx-context-sheet__list {
    display: grid;
    gap: 8px;
}

.mgx-context-sheet__list > a,
.mgx-context-sheet__list > button.mgx-context-sheet__link-button {
    min-height: 64px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    color: #fff;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.mgx-context-sheet__list > a:hover,
.mgx-context-sheet__list > button.mgx-context-sheet__link-button:hover,
.mgx-context-sheet__list > button.mgx-context-sheet__link-button:focus-visible {
    border-color: rgba(227,6,19,.55);
    background: rgba(227,6,19,.08);
    outline: 0;
}

.mgx-context-sheet__list > a > .mgx-context-nav__icon:first-child,
.mgx-context-sheet__list > button.mgx-context-sheet__link-button > .mgx-context-nav__icon:first-child {
    width: 25px;
    height: 25px;
    color: var(--mgx-red);
}

.mgx-context-sheet__list > a > .mgx-context-nav__icon:last-child,
.mgx-context-sheet__list > button.mgx-context-sheet__link-button > .mgx-context-nav__icon:last-child {
    width: 18px;
    height: 18px;
    color: rgba(255,255,255,.55);
}

.mgx-context-sheet__list span {
    min-width: 0;
}

.mgx-context-sheet__list strong,
.mgx-context-sheet__list small {
    display: block;
}

.mgx-context-sheet__list strong {
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.mgx-context-sheet__list small {
    margin-top: 2px;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    line-height: 1.25;
}

.mgx-context-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.mgx-context-categories button {
    min-height: 70px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    color: #fff;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.mgx-context-categories button.is-active {
    border-color: var(--mgx-red);
    background: rgba(227,6,19,.12);
}

.mgx-context-categories .mgx-context-nav__icon {
    width: 28px;
    height: 28px;
    color: var(--mgx-red);
}

.mgx-context-categories span {
    font-size: 12px;
    font-weight: 800;
}

.mgx-context-info-grid {
    display: grid;
    gap: 8px;
}

.mgx-context-info-grid > div {
    padding: 12px 13px;
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    gap: 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.mgx-context-info-grid span {
    color: rgba(255,255,255,.55);
    font-size: 10px;
    font-weight: 800;
}

.mgx-context-info-grid strong {
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}


/* =========================================================
   BUSCADOR DEL CATÁLOGO EN LA BARRA CONTEXTUAL
   ========================================================= */

.mgx-context-search-box {
    min-height: 56px;
    padding: 7px 8px 7px 14px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.mgx-context-search-box > .mgx-context-nav__icon {
    width: 22px;
    height: 22px;
    color: rgba(255,255,255,.72);
}

.mgx-context-search-box input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
}

.mgx-context-search-box input::placeholder {
    color: rgba(255,255,255,.42);
}


.mgx-context-search-hint {
    margin: 10px 2px 0;
    color: rgba(255,255,255,.48);
    font-size: 10px;
    line-height: 1.45;
}

.mgx-context-search-hint strong {
    color: rgba(255,255,255,.74);
    font-weight: 900;
}

/* =========================================================
   CATÁLOGO — BÚSQUEDA DIRECTA SIN MODAL
   El botón Buscar del dock muestra solo este campo.
   No oscurece ni desenfoca el resto de la página.
   ========================================================= */

body.mgx-has-context-nav .mgx-catalog-search-wrap {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;

    width: min(620px, calc(100% - 24px)) !important;
    margin: 0 !important;
    padding: 0 !important;

    transform:
        translate(-50%, 10px) !important;

    z-index: 9880 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .22s ease,
        visibility .18s ease;
}

body.mgx-has-context-nav .mgx-catalog-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    width: 100% !important;
    min-height: 54px;

    background: rgba(13,13,15,.98);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 16px 38px rgba(0,0,0,.34);

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.mgx-has-context-nav .mgx-catalog-search-box {
    min-height: 52px;
}

body.mgx-has-context-nav .mgx-catalog-search-box i {
    color: rgba(255,255,255,.66);
}

body.mgx-has-context-nav .mgx-catalog-search-box input {
    color: #ffffff;
}

body.mgx-has-context-nav .mgx-catalog-search-box input::placeholder {
    color: rgba(255,255,255,.42);
}

/*
 * Marcas ya tiene su propio botón en el dock.
 * Dentro del buscador dejamos únicamente el campo.
 */
body.mgx-has-context-nav .mgx-catalog-search .mgx-catalog-brands-button {
    display: none !important;
}

body.mgx-has-context-nav.mgx-catalog-search-active .mgx-catalog-search-wrap {
    transform:
        translate(-50%, 0) !important;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (min-width: 900px) {
    body.mgx-has-context-nav .mgx-catalog-search-wrap {
        bottom: 94px !important;
        width: min(560px, calc(100% - 48px)) !important;
    }
}

@media (max-width: 420px) {
    body.mgx-has-context-nav .mgx-catalog-search-wrap {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;

        transform:
            translateY(10px) !important;
    }

    body.mgx-has-context-nav.mgx-catalog-search-active .mgx-catalog-search-wrap {
        transform:
            translateY(0) !important;
    }
}

body.mgx-has-context-nav .mgx-brands-popup {
    z-index: 10040 !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}



body.mgx-has-context-nav .mgx-model-colors-panel {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    z-index: 10010 !important;
}

/* =========================================================
   ESCRITORIO — misma lógica, dock más compacto.
   ========================================================= */

@media (min-width: 900px) {
    body.mgx-has-context-nav {
        padding-bottom: 92px;
    }

    .mgx-context-nav {
        bottom: 18px;
        width: min(560px, calc(100% - 48px));
        min-height: 62px;
        padding: 6px 8px;
        border-radius: 28px;
    }

    .mgx-context-nav__item {
        min-height: 50px;
        border-radius: 19px;
    }

    .mgx-context-nav__item > span:last-child {
        font-size: 9px;
    }

    .mgx-context-nav__icon {
        width: 22px;
        height: 22px;
    }

    .mgx-context-sheet {
        bottom: 88px;
        width: min(620px, calc(100% - 48px));
        max-height: min(70vh, 640px);
        border-radius: 24px;
        padding-bottom: 18px;
    }

    .mgx-context-sheet.is-open {
        transform: translate(-50%, 0);
    }

    body.mgx-has-context-nav .mgx-model-colors-panel {
        bottom: 96px !important;
    }
}

@media (max-width: 420px) {
    .mgx-context-nav {
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        transform: none;
        width: auto;
        min-height: 66px;
        padding: 6px;
        border-radius: 29px;
    }

    .mgx-context-nav__item {
        min-height: 54px;
        padding-inline: 4px;
    }

    .mgx-context-nav__item > span:last-child {
        font-size: 9px;
    }
}


/* =========================================================
   MOTOGRAPHIX V9 — GLASS UI
   INICIO + CATÁLOGO PRINCIPAL
   Capa visual segura: no cambia HTML, JS ni lógica.
   ========================================================= */

body.mgx-glass-ui {
    --mgx-glass-line-soft: rgba(255, 255, 255, .075);
    --mgx-glass-red: #ed101d;

    background:
        radial-gradient(circle at 12% 18%, rgba(227, 6, 19, .085), transparent 32rem),
        radial-gradient(circle at 88% 72%, rgba(227, 6, 19, .055), transparent 28rem),
        #050505;
}

body.mgx-glass-ui .site-content {
    background: transparent;
}

/* ---------------------------------------------------------
   BOTTOM SHEETS / BUSCADOR / CATEGORÍAS
   --------------------------------------------------------- */

body.mgx-glass-ui .mgx-context-sheet {
    background:
        linear-gradient(180deg, rgba(31, 31, 35, .86), rgba(13, 13, 16, .92));
    border-color: rgba(255, 255, 255, .15);
    box-shadow:
        0 -28px 75px rgba(0, 0, 0, .58),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(32px) saturate(150%);
    -webkit-backdrop-filter: blur(32px) saturate(150%);
}

body.mgx-glass-ui .mgx-context-sheet-overlay {
    background: rgba(0, 0, 0, .46);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.mgx-glass-ui .mgx-context-search-box,
body.mgx-glass-ui .mgx-context-categories button,
body.mgx-glass-ui .mgx-context-sheet__list > a,
body.mgx-glass-ui .mgx-context-info-grid > div {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.mgx-glass-ui .mgx-context-search-box:focus-within {
    border-color: rgba(237, 16, 29, .72);
    box-shadow:
        0 0 0 3px rgba(237, 16, 29, .10),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.mgx-glass-ui .mgx-context-sheet__close {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
}

/* ---------------------------------------------------------
   HOME — conservar protagonismo de la foto, pulir controles.
   --------------------------------------------------------- */

body.home.mgx-glass-ui .mgx-home-hero-shell,
body.home.mgx-glass-ui .hero {
    background: #020202;
}

body.home.mgx-glass-ui .mgx-hero-image-overlay {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .83) 0%, rgba(0, 0, 0, .48) 30%, rgba(0, 0, 0, .08) 58%, rgba(0, 0, 0, .20) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .18));
}

body.home.mgx-glass-ui .mgx-hero-category {
    padding-inline: 23px;
    text-shadow: none;
    -webkit-text-stroke: 0;
}

body.home.mgx-glass-ui .mgx-hero-category::before {
    background:
        linear-gradient(145deg, rgba(255, 35, 48, .95), rgba(185, 0, 12, .94));
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow:
        0 12px 30px rgba(227, 6, 19, .22),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

body.home.mgx-glass-ui .mgx-hero-dot::before {
    background: rgba(255, 255, 255, .38);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}

body.home.mgx-glass-ui .mgx-hero-dot.is-active::before {
    background: var(--mgx-glass-red);
    box-shadow: 0 5px 16px rgba(227, 6, 19, .35);
}

/* ---------------------------------------------------------
   CATÁLOGO — superficies oscuras translúcidas.
   --------------------------------------------------------- */

body.mgx-glass-ui .mgx-catalog-page {
    background:
        radial-gradient(circle at 8% 4%, rgba(227, 6, 19, .10), transparent 28rem),
        radial-gradient(circle at 92% 42%, rgba(255, 255, 255, .035), transparent 32rem),
        #050505;
}

body.mgx-glass-ui .mgx-catalog-header {
    padding: 24px 28px;
    border: 1px solid var(--mgx-glass-line-soft);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
    box-shadow:
        0 18px 55px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .045);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.mgx-glass-ui .mgx-catalog-header h1 {
    letter-spacing: -1.1px;
}

body.mgx-glass-ui .mgx-catalog-section-heading small,
body.mgx-glass-ui .mgx-catalog-brand-heading small {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(237, 16, 29, .46);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 10px 24px rgba(0, 0, 0, .18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.mgx-glass-ui .mgx-catalog-brand-heading::after {
    background: linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.04));
}



body.mgx-glass-ui .mgx-trending-arrow {
    background: rgba(18, 18, 21, .78);
    border-color: rgba(255, 255, 255, .14);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ---------------------------------------------------------
   MÓVIL — más parecido a una app, sin recargar la pantalla.
   --------------------------------------------------------- */

@media (max-width: 899px) {

    body.home.mgx-glass-ui .mgx-hero-image-overlay {
        background:
            linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.38) 24%, rgba(0,0,0,.08) 52%, rgba(0,0,0,.72) 100%);
    }


    body.mgx-glass-ui .mgx-catalog-page {
        padding-top: 26px;
    }

    body.mgx-glass-ui .mgx-catalog-container {
        width: min(100% - 24px, 1500px);
    }

    body.mgx-glass-ui .mgx-catalog-header {
        margin-bottom: 20px;
        padding: 20px 16px;
        border-radius: 22px;
    }

    body.mgx-glass-ui .mgx-catalog-header h1 {
        font-size: clamp(34px, 9vw, 48px);
    }

    body.mgx-glass-ui .mgx-catalog-header p {
        font-size: 12px;
    }

    body.mgx-glass-ui .mgx-context-sheet {
        background:
            linear-gradient(180deg, rgba(35, 35, 39, .90), rgba(12, 12, 15, .96));
    }
}

/* ---------------------------------------------------------
   ESCRITORIO — dock discreto y cristal más fino.
   --------------------------------------------------------- */

@media (min-width: 900px) {

    body.mgx-glass-ui .mgx-context-nav {
        width: min(590px, calc(100% - 48px));
        border-radius: 30px;
    }

    body.mgx-glass-ui .mgx-catalog-header {
        max-width: 940px;
    }

    body.mgx-glass-ui .mgx-catalog-section {
        padding: 0 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mgx-glass-ui *,
    body.mgx-glass-ui *::before,
    body.mgx-glass-ui *::after {
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   UTILIDADES DEL CONTEXT NAV
   ========================================================= */

.mgx-model-gallery-item.mgx-model-search-hit {
    animation: mgxModelSearchHit 1.45s ease both !important;
}

@keyframes mgxModelSearchHit {
    0%, 100% {
        box-shadow: inherit;
    }

    18%, 62% {
        border-color: rgba(255,35,48,.95) !important;
        box-shadow:
            0 0 0 2px rgba(227,6,19,.30),
            0 0 34px rgba(227,6,19,.34) !important;
    }
}

@media (min-width: 900px) {
    .mgx-context-nav--catalog {
        width: min(620px, calc(100% - 48px));
    }
}


/* =========================================================
   HOME — PANEL MÁS / HORARIOS / REDES
   ========================================================= */

.mgx-context-sheet--home-more {
    max-width: 520px;
    max-height: min(84vh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.mgx-context-sheet--home-more::-webkit-scrollbar { display: none; }
.mgx-context-sheet--home-more .mgx-context-sheet__list { gap: 8px; }
.mgx-context-sheet--home-more .mgx-context-sheet__list > a,
.mgx-context-sheet--home-more .mgx-context-sheet__list > button { min-height: 62px; }

.mgx-context-sheet--hours,
.mgx-context-sheet--social { max-width: 480px; }

.mgx-context-hours { display: grid; gap: 9px; }
.mgx-context-hours__row {
    min-height: 82px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    align-items: center;
    gap: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 9px 24px rgba(0,0,0,.12);
}
.mgx-context-hours__row > .mgx-context-nav__icon { width: 25px; height: 25px; color: var(--mgx-red); justify-self: center; }
.mgx-context-hours__row small,
.mgx-context-hours__row strong { display: block; }
.mgx-context-hours__row small { margin-bottom: 5px; color: rgba(255,255,255,.52); font-size: 9px; font-weight: 650; letter-spacing: .65px; text-transform: uppercase; }
.mgx-context-hours__row strong { color: rgba(255,255,255,.92); font-size: 12px; line-height: 1.45; font-weight: 650; }
.mgx-context-hours__row.is-closed strong { color: #ff4c57; }

.mgx-context-social-intro { margin: 0 3px 14px; color: rgba(255,255,255,.52); font-size: 11px; line-height: 1.45; font-weight: 500; }
.mgx-context-sheet__social-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.mgx-context-sheet__social-grid > a {
    min-width: 0;
    min-height: 82px;
    padding: 11px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 17px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 9px 24px rgba(0,0,0,.12);
}
.mgx-context-sheet__social-grid .mgx-context-nav__icon { width: 28px; height: 28px; }
.mgx-context-sheet__social-grid > a:nth-child(1) .mgx-context-nav__icon { color: #4b86ff; }
.mgx-context-sheet__social-grid > a:nth-child(2) .mgx-context-nav__icon { color: #f04b85; }
.mgx-context-sheet__social-grid > a:nth-child(3) .mgx-context-nav__icon { color: #fff; }
.mgx-context-sheet__social-grid > a:nth-child(4) .mgx-context-nav__icon { color: #ff2a35; }
.mgx-context-sheet__social-grid span { color: rgba(255,255,255,.82); font-size: 10px; font-weight: 650; }
@media (max-width:390px) {
    .mgx-context-sheet__social-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .mgx-context-sheet__social-grid > a { min-height: 72px; }
}

/* =========================================================
   MOBILE / TABLET — EVITAR AUTO-ZOOM EN INPUTS (iOS / SAFARI)
   =========================================================
   Safari amplía automáticamente la página al enfocar campos
   con tipografía menor de 16px. Mantener los controles a 16px
   evita ese salto sin bloquear el zoom manual del navegador.
   ========================================================= */

@media (max-width: 1024px) {

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
    }

    input::placeholder,
    textarea::placeholder {
        font-size: 16px !important;
    }

}

/* =========================================================
   V9 — DOCK ÚNICO / COMPORTAMIENTO UNIVERSAL
   Escritorio, tablet y móvil usan el mismo componente y la
   misma interacción. Solo el ancho disponible es responsivo.
   ========================================================= */

:root {
    --mgx-context-popup-offset: calc(94px + env(safe-area-inset-bottom));
}

/* El dock queda por encima de los overlays para que el mismo
   botón pueda abrir Y cerrar su popup en cualquier viewport. */
.mgx-context-nav {
    z-index: 10060 !important;
}

/* Marcas y Categorías comparten exactamente la misma altura
   respecto al dock. No hay lógica distinta por dispositivo. */
body.mgx-has-context-nav .mgx-brands-popup,
.mgx-context-sheet--categories {
    bottom: var(--mgx-context-popup-offset) !important;
}

.mgx-context-sheet--categories {
    width: min(620px, calc(100% - 20px));
    max-height: min(70vh, calc(100vh - 124px));
    padding-bottom: 18px;
    border-radius: 26px;
}

/* =========================================================
   V9 — WHATSAPP DESTACADO EN EL DOCK
   Un único tratamiento visual para Inicio y Catálogo.
   No modifica la lógica ni los demás botones del dock.
   ========================================================= */

.mgx-context-nav__item--whatsapp {
    position: relative;
    color: #fff !important;
    background:
        linear-gradient(155deg, rgba(255,45,58,.98), rgba(190,0,13,.96)) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    box-shadow:
        0 8px 24px rgba(227,6,19,.30),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.34);
}

.mgx-context-nav__item--whatsapp .mgx-context-nav__icon {
    width: 26px;
    height: 26px;
    stroke-width: 1.65 !important;
}

.mgx-context-nav__item--whatsapp .mgx-context-nav__icon use {
    stroke-width: 1.65 !important;
}

@media (hover: hover) and (pointer: fine) {
    .mgx-context-nav__item--whatsapp:hover,
    .mgx-context-nav__item--whatsapp:focus-visible {
        color: #fff !important;
        background:
            linear-gradient(155deg, rgba(255,61,73,1), rgba(210,0,15,.98)) !important;
        transform: translateY(-2px);
        box-shadow:
            0 11px 28px rgba(227,6,19,.38),
            inset 0 1px 0 rgba(255,255,255,.28) !important;
    }
}

/* El estado activo de otro botón nunca apaga WhatsApp. */
.mgx-context-nav__item--whatsapp:not(.is-active) {
    color: #fff !important;
}

@media (min-width: 900px) {
    .mgx-context-nav__item--whatsapp {
        min-height: 50px;
    }

    .mgx-context-nav__item--whatsapp .mgx-context-nav__icon {
        width: 23px;
        height: 23px;
    }
}

@media (max-width: 420px) {
    .mgx-context-nav__item--whatsapp {
        padding-inline: 3px;
    }

    .mgx-context-nav__item--whatsapp .mgx-context-nav__icon {
        width: 24px;
        height: 24px;
    }
}

/* =========================================================
   V9 — ESTADO ACTIVO NEUTRO EN EL DOCK
   WhatsApp conserva el rojo como CTA principal.
   La sección activa se marca con glass gris / blanco.
   ========================================================= */

.mgx-context-nav__item.is-active:not(.mgx-context-nav__item--whatsapp) {
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.040)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 6px 18px rgba(0,0,0,.18) !important;
}

.mgx-context-nav__item.is-active:not(.mgx-context-nav__item--whatsapp) .mgx-context-nav__icon {
    color: #fff;
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .mgx-context-nav__item.is-active:not(.mgx-context-nav__item--whatsapp):hover,
    .mgx-context-nav__item.is-active:not(.mgx-context-nav__item--whatsapp):focus-visible {
        background:
            linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.055)) !important;
        border-color: rgba(255,255,255,.22) !important;
        transform: translateY(-1px);
    }
}



/* WhatsApp usa un símbolo sólido dentro del sprite SVG. */
.mgx-context-nav__item--whatsapp .mgx-context-nav__icon {
    fill: currentColor !important;
    stroke: none !important;
}

.mgx-context-nav__item--whatsapp .mgx-context-nav__icon use {
    fill: currentColor !important;
    stroke: none !important;
}