/* ============================================================
   MetalCar 2026 — Design System (ver docs/DESIGN_SYSTEM.md)
   Dos mundos: GARAGE (rojo) y THE SHOP (plata), tema oscuro.
   Tipografías: Archivo (display) + Manrope (texto).
   ============================================================ */

:root, body.mc-site {
    --bg: #0B0B0D;
    --surface: #141417;
    --elev: #1C1C21;
    --line: rgba(255, 255, 255, .09);
    --line2: rgba(255, 255, 255, .15);
    --text: #F6F6F8;
    --muted: #9C9CA6;
    --accent: #E4181F;
    --accent2: #FF3B3B;
    --on-accent: #ffffff;
    --glow: var(--accent);
    --wa: #25D366;
    --on-wa: #04210f;
    --font-display: 'Archivo', system-ui, sans-serif;
    --font-text: 'Manrope', system-ui, sans-serif;
    /* Geometría configurable por template (bloque tema) */
    --radio-cards: 18px;
    --radio-botones: 13px;
}

body.mc-site.tema-shop {
    --bg: #0E0F12;
    --surface: #17191D;
    --elev: #20232A;
    --line: rgba(255, 255, 255, .08);
    --line2: rgba(255, 255, 255, .16);
    --text: #F4F5F7;
    --muted: #9AA0AB;
    --accent: #D8DDE5;
    --accent2: #FFFFFF;
    --on-accent: #111318;
    --glow: var(--accent2);
}

/* ---------- Base ---------- */
/* El cajón del carrito vive aparcado fuera de la pantalla (position: fixed +
   translateX), y aparcado ahí seguía sumando al ancho de la página: en el
   teléfono dejaba scroll horizontal en las fichas y en las vistas por marca.
   `clip` corta esa parte SIN crear un contenedor de scroll, así que ni el
   header pegajoso ni los desplegables se ven afectados (a diferencia de
   `overflow: hidden`). El desbordamiento vertical sigue intacto. */
html:has(> body.mc-site) { overflow-x: clip; }

body.mc-site {
    margin: 0;
    font-family: var(--font-text);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
.mc-site ::selection { background: var(--accent); color: var(--on-accent); }
.mc-site ::-webkit-scrollbar { width: 10px; height: 10px; }
.mc-site ::-webkit-scrollbar-track { background: var(--bg); }
.mc-site ::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 6px; border: 2px solid var(--bg); }
.mc-site a { text-decoration: none; color: inherit; }
.mc-site img { max-width: 100%; }
.mc-site h1, .mc-site h2, .mc-site h3, .mc-site h4 { font-family: var(--font-display); }
/* Nombres de producto, títulos y referencias pueden venir sin espacios (SKUs,
   nombres con guiones, direcciones web). Que se partan antes que empujar la
   maquetación fuera de la pantalla. */
.mc-site h1, .mc-site h2, .mc-site h3, .mc-site h4,
.mc-producto .nombre, .mc-marca-card .nombre, .mc-cat-card .info .nombre,
.mc-page-head h1, .mc-h2 { overflow-wrap: anywhere; }

@keyframes mcFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mcPageIn { from { opacity: .3; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mcPulseGlow { 0%, 100% { box-shadow: 0 0 0 0 var(--glow); } 50% { box-shadow: 0 0 34px 4px var(--glow); } }
@keyframes mcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.mc-anim-page { animation: mcPageIn .45s ease; }
.mc-contenedor { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- Botones ---------- */
.btn-mc, .btn-mc-ghost, .btn-mc-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 800 14px var(--font-display);
    letter-spacing: .4px;
    padding: 15px 24px;
    border-radius: var(--radio-botones);
    border: none;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease, border-color .15s ease;
    text-align: center;
}
.btn-mc { background: var(--accent); color: var(--on-accent) !important; }
.btn-mc:hover { filter: brightness(1.12); transform: translateY(-1px); color: var(--on-accent); }
.btn-mc.pulso { animation: mcPulseGlow 3.2s ease-in-out infinite; }
.btn-mc-ghost { background: var(--surface); color: var(--text) !important; border: 1px solid var(--line2); }
.btn-mc-ghost:hover { border-color: var(--accent); color: var(--text); }
.btn-mc-wa { background: var(--wa); color: var(--on-wa) !important; }
.btn-mc-wa:hover { filter: brightness(1.08); }
.btn-mc-sm { padding: 11px 18px; font-size: 12px; border-radius: 11px; }

/* ---------- Header ---------- */
.mc-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom: 1px solid var(--line);
    /* Fuerza su propia capa de composición: evita el recorte/parpadeo de
       position:sticky + backdrop-filter durante el scroll en iOS Safari. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
/* El cristal del encabezado va en una CAPA PROPIA, no en el encabezado.
   Un elemento con `backdrop-filter` se convierte en «raíz de fondo»: sus
   descendientes ya no pueden desenfocar lo que hay detrás de la página, solo
   lo que se pinte dentro de él —que aquí es nada—. Con el filtro en el
   encabezado, el súper menú (que cuelga de su `<nav>`) salía translúcido pero
   SIN desenfoque, y se leía la página a través. Moviéndolo a este `::before`
   el encabezado deja de ser esa raíz y el panel vuelve a desenfocar de verdad.
   `z-index: -1` lo deja sobre el fondo del encabezado y debajo de su
   contenido; sin puntero, para no robar clics al menú. */
.mc-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.mc-header .fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    min-width: 0;
}
/* El logo y el conmutador ceden ancho cuando no cabe todo, en vez de empujar el
   carrito fuera de la pantalla y dejar la página con scroll horizontal. El logo
   cede MUCHO antes (`flex-shrink: 6` contra 1) porque se repite dentro del menú
   lateral y porque no se deforma al encoger: lleva `object-fit: contain`. */
.mc-logo { display: flex; align-items: center; gap: 11px; cursor: pointer; flex: 0 6 auto; min-width: 0; --mc-logo-ancho: 200px; }
.mc-logo .nombre, .mc-logo .tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-logo .barras { display: flex; flex-direction: column; gap: 2px; transform: skewX(-8deg); }
.mc-logo .barras span { width: 22px; height: 7px; background: #E4181F; border-radius: 1px; display: block; }
.mc-logo .barras span:last-child { opacity: .55; }
.mc-logo .nombre { font: 900 17px/1 var(--font-display); letter-spacing: .5px; color: var(--text); }
.mc-logo .tag { font: 700 8px/1 var(--font-display); letter-spacing: 3px; color: var(--muted); margin-top: 3px; text-transform: uppercase; }
/* El logo del negocio es su cara: se le da altura de verdad SIN que el
   encabezado crezca. El truco son los márgenes negativos: la imagen aporta al
   cálculo de la fila la altura de antes (34 px) y se dibuja mucho más grande,
   así que puede rebasar la fila hacia abajo sin empujar nada.
   El tope de ancho evita lo contrario de lo que se busca: un logo apaisado
   que, al crecer de alto, se lleve el espacio del menú. Con `object-fit` la
   imagen se acomoda dentro de ese tope sin deformarse. */
.mc-logo img {
    height: 64px;
    /* Caja de ancho FIJO, no «lo que mida el archivo». Un negocio con dos
       marcas tiene dos logos de proporciones distintas: con el ancho libre, al
       cambiar de mundo el menú entero se recorría unos cuantos píxeles y el
       visitante perdía el punto donde estaba mirando. Con la caja fija, el
       primer ítem del menú empieza SIEMPRE en el mismo sitio y `object-fit`
       acomoda dentro cada logo sin deformarlo. */
    width: var(--mc-logo-ancho, 200px);
    max-width: var(--mc-logo-ancho, 200px);
    /* `min-width: 0` es la red de seguridad: una imagen es un elemento
       reemplazado y en un flex NO encoge por debajo de su tamaño natural, así
       que cuando el renglón se apretaba el logo se salía y había que taparlo
       —recortándolo— con un `overflow: hidden`. Con esto encoge y, gracias a
       `object-fit`, se ve completo aunque quede más chico. */
    min-width: 0;
    object-fit: contain;
    /* Anclado a la IZQUIERDA de su caja: la marca empieza siempre en el mismo
       punto, igual que el menú, sin un hueco que cambia con cada archivo. */
    object-position: left center;
    margin-block: -15px;
    border-radius: 10px;
    display: block;
    flex: none;
}
.mc-offcanvas .mc-logo img { height: 46px; max-width: 60vw; margin-block: -8px; }

/* El conmutador es UN botón —ver el comentario del bloque en `main.php`—. En el
   reparto del renglón el primero que cede es el logo, que además se repite
   dentro del menú lateral; el botón solo cede cuando el logo ya llegó a su piso
   (ver el bloque de móvil), y aun entonces su nombre se lee entero con la
   pasada de `.recorta`. */
.mc-switch {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px;
    flex: 0 1 auto;
    min-width: 0;
}
.mc-switch a {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 800 12px var(--font-display);
    letter-spacing: .5px;
    padding: 8px 15px;
    border-radius: 999px;
    color: var(--text);
    white-space: nowrap;
    min-width: 0;
    /* En pantalla grande el botón se permite el nombre completo; el tope solo
       existe para que una marca larguísima no se coma el menú. */
    max-width: min(24vw, 320px);
    overflow: hidden;
}

/* El rótulo recorta con puntos suspensivos; JAMÁS se deja crecer, porque un
   nombre largo en el header empuja el logo y saca scroll horizontal a toda la
   página. Si no cabe, se enseña entero con una pasada —ver `.recorta`. */
.mc-switch .rotulo { overflow: hidden; min-width: 0; flex: 1 1 auto; }
.mc-switch .nombre { display: inline-block; white-space: nowrap; }
/* «Ir a» y la flecha de intercambio no se encogen: sin esto los tres elementos
   compiten por el ancho y el nombre acaba en dos letras. */
.mc-switch .ir { opacity: .55; flex: none; font-size: 10px; font-weight: 700; }
.mc-switch .cambio { flex: none; opacity: .75; }

/* Una sola pasada para leer el nombre completo, y vuelve a su sitio. Un
   desplazamiento eterno en la cabecera es ruido: distrae en cada pantalla y
   nunca se apaga. `--recorrido` lo mide el JS (solo si de verdad no cabe). */
@keyframes mcAsomarNombre {
    0%, 12% { transform: translateX(0); }
    52%, 68% { transform: translateX(calc(var(--recorrido, 0px) * -1)); }
    100% { transform: translateX(0); }
}
/* Durante la pasada el texto se desvanece en los bordes en vez de chocar de
   golpe con «Ir a» y con la flecha. */
.mc-switch a.recorta .rotulo {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
}
.mc-switch a.recorta .nombre { animation: mcAsomarNombre 5s ease-in-out .9s 1; }
.mc-switch a.recorta:hover .nombre { animation: mcAsomarNombre 5s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
    .mc-switch a.recorta .nombre,
    .mc-switch a.recorta:hover .nombre { animation: none; }
}

.mc-icono-carrito {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    flex: none;
}
.mc-icono-carrito .mc-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    font: 800 10px var(--font-display);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg);
}

/* Navegación: vive en el MISMO renglón del header (mc-contenedor.fila, junto
   al logo y el carrito) como carrusel horizontal. El menú es dinámico según
   el paquete del negocio — # de ítems variable — así que en vez de partirse
   a una 2.ª línea, se desliza con scroll y una flecha avisa que hay más. */
.mc-nav {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
}
.mc-nav .mc-menu {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.mc-nav .mc-menu::-webkit-scrollbar { display: none; }
.mc-nav .mc-menu > li { position: relative; flex: none; display: flex; align-items: center; }
.mc-nav-flecha {
    flex: none;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line2);
    color: var(--text);
    cursor: pointer;
    margin-left: 4px;
}
.mc-nav-flecha:hover { border-color: var(--accent); color: var(--accent); }
.mc-nav-flecha[hidden] { display: none; }
.mc-nav .mc-menu > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font: 600 12.5px var(--font-text);
    padding: 10px 8px;
    white-space: nowrap;
}
.mc-nav .mc-menu > li > a:hover,
.mc-nav .mc-menu > li.activo > a { color: var(--text); border-bottom-color: var(--accent); }
.mc-nav .mc-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    max-height: 60vh;
    overflow-y: auto;
    /* El mismo cristal del encabezado: el panel cuelga de él y con un fondo
       opaco se veían dos materiales distintos pegados uno al otro. */
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line2);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 34px 64px -24px #000;
    /* El aire entre el ítem y el panel es un borde TRANSPARENTE, no un hueco:
       así el puntero puede cruzarlo sin salirse del área activa (antes el
       panel se posicionaba 4 px más abajo y el desplegable se cerraba justo
       al intentar bajar a un hijo). */
    border-top: 6px solid transparent;
    background-clip: padding-box;
    padding: 8px;
    z-index: 80;
}
/* La apertura la gobierna mc.js (hover-intent con retardo de cierre).
   :focus-within se conserva para navegación con teclado sin JS. */
.mc-nav li.abierto > .mc-dropdown-panel,
.mc-nav li:focus-within > .mc-dropdown-panel { display: block; }
.mc-nav li.abierto > .mc-mega-panel,
.mc-nav li:focus-within > .mc-mega-panel { display: flex; }

/* ---- El desplegable CAE, no aparece -----------------------------------
   Empieza tumbado —de canto, completamente horizontal— y gira sobre su borde
   superior hasta quedar de frente, como una persiana. La perspectiva va
   DENTRO del `transform` porque el panel se coloca en `position: fixed` y no
   hereda la de su ítem del menú.
   Detrás del giro, cada bloque entra un instante después que el anterior: el
   ojo lee «a dónde ir», luego las categorías y luego las marcas, en vez de
   recibir el panel entero de golpe. El escalón por columna viaja en `--mc-t`,
   que heredan sus piezas, así que la cascada se ajusta sola cuando el negocio
   no tiene marcas o no tiene promociones. */
@keyframes mcPanelCae {
    from { opacity: 0; transform: perspective(1400px) rotateX(-88deg); }
    70% { opacity: 1; }
    to { opacity: 1; transform: perspective(1400px) rotateX(0); }
}
@keyframes mcPanelPieza {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: none; }
}
.mc-nav li.abierto > .mc-dropdown-panel,
.mc-nav li:focus-within > .mc-dropdown-panel {
    transform-origin: top center;
    animation: mcPanelCae .42s cubic-bezier(.2, .9, .25, 1) both;
    /* Sin esto, el texto pequeño se ve sucio durante el giro. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Cascada del mega-panel: una columna tras otra. */
.mc-nav li.abierto > .mc-mega-panel .col { --mc-t: 0s; }
.mc-nav li.abierto > .mc-mega-panel .col:nth-child(2) { --mc-t: .06s; }
.mc-nav li.abierto > .mc-mega-panel .col:nth-child(3) { --mc-t: .12s; }
.mc-nav li.abierto > .mc-mega-panel .titulo,
.mc-nav li.abierto > .mc-mega-panel .lista:not(.sin-scroll),
.mc-nav li.abierto > .mc-mega-panel .lista.sin-scroll > a,
.mc-nav li.abierto > .mc-mega-panel .ver-todas,
.mc-nav li.abierto > .mc-mega-panel .mc-menu-promo {
    animation: mcPanelPieza .34s cubic-bezier(.2, .8, .3, 1) both;
}
.mc-nav li.abierto > .mc-mega-panel .titulo { animation-delay: calc(var(--mc-t, 0s) + .12s); }
.mc-nav li.abierto > .mc-mega-panel .lista:not(.sin-scroll) { animation-delay: calc(var(--mc-t, 0s) + .17s); }
/* «Ir a» son tres enlaces: ahí sí entran de uno en uno. */
.mc-nav li.abierto > .mc-mega-panel .lista.sin-scroll > a:nth-child(1) { animation-delay: .17s; }
.mc-nav li.abierto > .mc-mega-panel .lista.sin-scroll > a:nth-child(2) { animation-delay: .21s; }
.mc-nav li.abierto > .mc-mega-panel .lista.sin-scroll > a:nth-child(n+3) { animation-delay: .25s; }
.mc-nav li.abierto > .mc-mega-panel .ver-todas { animation-delay: calc(var(--mc-t, 0s) + .24s); }
.mc-nav li.abierto > .mc-mega-panel .mc-menu-promo { animation-delay: calc(var(--mc-t, 0s) + .28s); }

/* Los desplegables sencillos (pocos enlaces) entran uno tras otro. */
.mc-nav li.abierto > .mc-dropdown-panel:not(.mc-mega-panel) > a {
    animation: mcPanelPieza .3s cubic-bezier(.2, .8, .3, 1) both;
}
.mc-nav li.abierto > .mc-dropdown-panel:not(.mc-mega-panel) > a:nth-child(1) { animation-delay: .12s; }
.mc-nav li.abierto > .mc-dropdown-panel:not(.mc-mega-panel) > a:nth-child(2) { animation-delay: .16s; }
.mc-nav li.abierto > .mc-dropdown-panel:not(.mc-mega-panel) > a:nth-child(3) { animation-delay: .20s; }
.mc-nav li.abierto > .mc-dropdown-panel:not(.mc-mega-panel) > a:nth-child(4) { animation-delay: .24s; }
.mc-nav li.abierto > .mc-dropdown-panel:not(.mc-mega-panel) > a:nth-child(n+5) { animation-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
    .mc-nav li.abierto > .mc-dropdown-panel,
    .mc-nav li:focus-within > .mc-dropdown-panel,
    .mc-nav li.abierto > .mc-mega-panel .titulo,
    .mc-nav li.abierto > .mc-mega-panel .lista,
    .mc-nav li.abierto > .mc-mega-panel .lista.sin-scroll > a,
    .mc-nav li.abierto > .mc-mega-panel .ver-todas,
    .mc-nav li.abierto > .mc-mega-panel .mc-menu-promo,
    .mc-nav li.abierto > .mc-dropdown-panel:not(.mc-mega-panel) > a { animation: none; }
}
.mc-nav .mc-dropdown-panel a {
    display: block;
    color: var(--muted);
    font: 600 13px var(--font-text);
    padding: 10px 12px;
    border-radius: 9px;
}
.mc-nav .mc-dropdown-panel a:hover { background: var(--elev); color: var(--text); }

/* Mega-panel de «Tienda»: a dónde ir, categorías y marcas en tres columnas.
   Agrupar aquí lo de la tienda es lo que permite que el primer nivel del menú
   quepa completo — antes doce ítems sueltos pedían más de 1000 px y cuatro
   quedaban escondidos tras una flecha, incluso en un monitor grande. */
.mc-nav .mc-mega-panel {
    /* SIN `display` aquí: la misma especificidad que `.mc-dropdown-panel` y
       más abajo en el archivo, así que ponerlo pisaba el `display: none` y el
       panel quedaba SIEMPRE presente. Aportaba sus 680 px al ancho de la fila,
       de modo que la flecha de «hay más opciones» aparecía aunque el menú
       cupiera entero y el carrusel se desplazaba hacia el vacío. La caja flex
       se define solo al abrirse. */
    gap: 30px;
    /* Casi todo el ancho del monitor: es el panel que resume la tienda entera
       (a dónde ir, categorías, marcas y lo que el negocio quiere empujar), y
       en 680 px las listas salían a ocho entradas y tres columnas apretadas.
       El tope de 1480 evita que en un monitor ultra-ancho el ojo tenga que
       recorrer medio metro de pantalla. En una tablet apaisada (1024 px, que
       es donde todavía se pinta el menú horizontal) quedan 1000 px útiles. */
    width: min(1480px, calc(100vw - 24px));
    max-height: min(78vh, 620px);
    padding: 22px 26px;
    border-radius: 0 0 18px 18px;
    /* El panel ya no se desliza entero: lo hacen sus listas por dentro, para
       que los títulos y el «ver todas» no se vayan de la vista. */
    overflow: hidden;
}
.mc-nav .mc-mega-panel .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
/* La columna de «Ir a» es la más angosta: tres enlaces y, debajo, lo que el
   negocio esté empujando. */
.mc-nav .mc-mega-panel .col-ir { flex: 0 0 clamp(230px, 21%, 320px); }
.mc-nav .mc-mega-panel .titulo {
    font: 800 10px var(--font-display);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 0 12px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}
/* Cuántas hay en total: responde «¿y las demás?» antes de que se pregunte. */
.mc-nav .mc-mega-panel .titulo .cuantas {
    background: var(--elev);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font: 800 10px var(--font-text);
    letter-spacing: 0;
    padding: 2px 7px;
}
/* La lista se desliza con la barra oculta (Firefox y WebKit): el corte visual
   lo dan el degradado de abajo y el «ver todas», no una barra gris. */
.mc-nav .mc-mega-panel .lista {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-height: min(52vh, 400px);
    padding-bottom: 2px;
}
.mc-nav .mc-mega-panel .lista::-webkit-scrollbar { display: none; }
.mc-nav .mc-mega-panel .lista.sin-scroll { overflow: visible; max-height: none; }
/* Con el panel ancho, una sola columna de nombres cortos deja la mitad vacía. */
.mc-nav .mc-mega-panel .lista.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.mc-nav .mc-mega-panel a { padding: 8px 12px; }
.mc-nav .mc-mega-panel .ver-todas {
    color: var(--accent);
    font-weight: 800;
    margin-top: 8px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    flex: none;
}

/* ---- Lo que el negocio cuelga DENTRO del menú (banners, promos, kits) ---- */
/* Ocupa lo que sobra de la columna y, si el negocio colgó más de lo que cabe,
   se desliza por dentro: el panel no crece hasta tapar la página. */
.mc-nav .mc-menu-promos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mc-nav .mc-menu-promos::-webkit-scrollbar { display: none; }
.mc-nav .mc-menu-promo { flex: none; }
.mc-nav .mc-mega-panel .mc-menu-promo {
    display: block;
    padding: 0;
    border: 1px solid var(--line2);
    border-radius: 13px;
    overflow: hidden;
    background: var(--elev);
}
.mc-nav .mc-mega-panel .mc-menu-promo:hover { border-color: var(--accent); background: var(--elev); }
.mc-nav .mc-menu-promo .arte {
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    background: var(--surface);
    overflow: hidden;
}
.mc-nav .mc-menu-promo .arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-nav .mc-menu-promo .texto { display: block; padding: 9px 12px 11px; }
.mc-nav .mc-menu-promo .kicker {
    display: block;
    font: 800 9px var(--font-display);
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--accent);
}
.mc-nav .mc-menu-promo .titulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0;
    color: var(--text);
    font: 800 13px var(--font-text);
    letter-spacing: 0;
    text-transform: none;
    margin-top: 2px;
}
.mc-nav .mc-menu-promo .cta { display: block; margin-top: 5px; color: var(--muted); font: 800 11.5px var(--font-text); }
.mc-nav .mc-menu-promo:hover .cta { color: var(--text); }
/* Solo la primera lleva foto grande. Las siguientes van en tira, con la foto
   a la izquierda: así una segunda pieza cabe entera bajo «Ir a» en vez de
   quedarse cortada por el borde del panel. */
.mc-nav .mc-dropdown-panel a.mc-menu-promo:not(.destacada) { display: flex; align-items: center; gap: 10px; padding: 8px; }
.mc-nav .mc-menu-promo:not(.destacada) .arte { width: 58px; height: 44px; flex: none; aspect-ratio: auto; border-radius: 9px; }
.mc-nav .mc-menu-promo:not(.destacada) .texto { padding: 0; min-width: 0; }
.mc-nav .mc-menu-promo:not(.destacada) .titulo { -webkit-line-clamp: 1; font-size: 12.5px; }
.mc-nav .mc-menu-promo:not(.destacada) .cta { margin-top: 2px; font-size: 11px; }
/* Marca del menú: logo a la izquierda, nombre a la derecha. La caja del logo
   mide siempre lo mismo (con imagen o con la inicial) para que la columna no
   quede escalonada. */
/* `.mc-nav .mc-dropdown-panel a` (dos clases + elemento) pesa más que
   `.mc-nav .mc-marca-item`, así que su `display:block` ganaba y el logo salía
   ENCIMA del nombre en vez de a su izquierda. Se nombra el enlace para
   empatarle la especificidad. */
.mc-nav .mc-dropdown-panel a.mc-marca-item { display: flex; align-items: center; gap: 10px; }
.mc-nav .mc-marca-item img {
    width: 34px;
    height: 20px;
    object-fit: contain;
    flex: none;
    filter: grayscale(1);
    opacity: .8;
}
.mc-nav .mc-marca-item:hover img { filter: none; opacity: 1; }
.mc-nav .mc-marca-item .sin-logo {
    width: 34px;
    height: 20px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: var(--elev);
    border: 1px solid var(--line);
    font: 900 11px var(--font-display);
    color: var(--muted);
}
.mc-nav .mc-marca-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) {
    /* Tablet apaisada: el menú horizontal sigue puesto, pero las listas ya no
       aguantan dos columnas de nombres largos sin partir palabras. */
    .mc-nav .mc-mega-panel { gap: 20px; padding: 18px; }
    .mc-nav .mc-mega-panel .lista.dos-columnas { grid-template-columns: minmax(0, 1fr); }
    .mc-nav .mc-mega-panel .col-ir { flex: 0 0 clamp(200px, 24%, 260px); }
    .mc-nav .mc-menu-promos { margin-top: 10px; }
}

/* Las mismas tarjetas dentro del cajón del teléfono: sin el `.mc-nav` de
   delante, porque el cajón vive fuera de la barra de navegación. */
.mc-menu-promos.movil { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mc-menu-promos.movil .mc-menu-promo {
    display: block;
    border: 1px solid var(--line2);
    border-radius: 13px;
    overflow: hidden;
    background: var(--elev);
    color: var(--text);
}
.mc-menu-promos.movil .arte { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surface); }
.mc-menu-promos.movil .arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-menu-promos.movil .texto { display: block; padding: 9px 12px 11px; }
.mc-menu-promos.movil .kicker { display: block; font: 800 9px var(--font-display); letter-spacing: 1.3px; text-transform: uppercase; color: var(--accent); }
.mc-menu-promos.movil .titulo { display: block; font: 800 13px var(--font-text); margin-top: 2px; }
.mc-menu-promos.movil .cta { display: block; margin-top: 5px; color: var(--muted); font: 800 11.5px var(--font-text); }

/* ---------- Menú móvil ---------- */
.mc-burger {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
    color: var(--text);
    cursor: pointer;
    flex: none;
}
.mc-offcanvas {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(330px, 88vw);
    /* Mismo cristal que el encabezado y que el súper menú. */
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-right: 1px solid var(--line2);
    z-index: 2000;
    transform: translateX(-105%);
    transition: transform .25s ease;
    overflow-y: auto;
    padding: 1.2rem;
}
.mc-offcanvas.abierto { transform: translateX(0); }
.mc-offcanvas .mc-menu-movil { list-style: none; margin: 1rem 0 0; padding: 0; }
.mc-offcanvas .mc-menu-movil > li > a {
    display: block;
    padding: .8rem .3rem;
    font: 700 14px var(--font-text);
    color: var(--text);
    border-bottom: 1px solid var(--line);
}
.mc-offcanvas .mc-submenu { list-style: none; padding: 0 0 0 1rem; display: none; }
.mc-offcanvas .mc-submenu.abierto { display: block; }
.mc-offcanvas .mc-submenu a { display: block; padding: .5rem .3rem; font: 600 13px var(--font-text); color: var(--muted); }
.mc-offcanvas .mc-submenu a:hover { color: var(--text); }
/* Separadores del acordeón de «Tienda»: las categorías y las marcas van bajo
   su rótulo, igual que en el mega-panel de escritorio. */
.mc-offcanvas .mc-submenu .grupo {
    font: 800 9.5px var(--font-display);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 12px .3rem 4px;
}

/* Las dos marcas del negocio también al cerrar la página. */
.mc-footer-mundos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.mc-footer-mundos a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid var(--line2);
    border-radius: 12px;
    background: var(--bg);
    min-width: 0;
    transition: border-color .15s;
}
.mc-footer-mundos a:hover { border-color: var(--accent); }
.mc-footer-mundos a.activo { border-color: var(--accent); background: var(--elev); }
.mc-footer-mundos img { height: 26px; max-width: 74px; object-fit: contain; border-radius: 6px; flex: none; }
.mc-footer-mundos span {
    font: 800 11.5px var(--font-display);
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(3px);
    z-index: 1900;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}
.mc-overlay.visible { opacity: 1; visibility: visible; }

/* ---------- Drawer del carrito ---------- */
.mc-cart-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(400px, 92vw);
    background: var(--surface);
    border-left: 1px solid var(--line2);
    z-index: 2000;
    transform: translateX(105%);
    /* Cerrado se oculta de verdad: aparcado fuera de la pantalla seguía
       recibiendo foco con el tabulador. La visibilidad cambia al final para
       no perder la animación. */
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
    display: flex;
    flex-direction: column;
}
/* Etiqueta de tipo dentro del carrito: un kit no es un producto suelto y el
   cliente tiene que verlo antes de pagar, no descubrirlo al recibirlo. */
.mc-cart-tipo {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font: 800 9.5px/1.7 var(--font-display);
    letter-spacing: .6px;
    text-transform: uppercase;
    vertical-align: 1px;
    background: color-mix(in srgb, var(--accent) 18%, var(--elev));
    color: var(--accent);
}
.mc-cart-tipo.curso, .mc-cart-tipo.servicio { background: var(--elev); color: var(--muted); }

.mc-cart-drawer.abierto {
    transform: translateX(0);
    visibility: visible;
    transition: transform .25s ease, visibility 0s;
}
.mc-cart-drawer .mc-cart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
    font: 900 18px var(--font-display);
    text-transform: uppercase;
}
.mc-cart-drawer .cerrar {
    background: var(--elev);
    border: 1px solid var(--line);
    color: var(--text);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    font: 700 15px var(--font-display);
    line-height: 0;
}
.mc-cart-drawer .mc-cart-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.mc-cart-drawer .mc-cart-foot { padding: 18px 22px; border-top: 1px solid var(--line2); }
.mc-cart-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
}
.mc-cart-item img {
    width: 52px;
    height: 64px;
    object-fit: contain;
    background: var(--elev);
    border-radius: 9px;
    flex: none;
}
.mc-cart-item .nombre { font: 700 12.5px/1.3 var(--font-text); color: var(--text); }
.mc-cart-item .precio { font: 900 14px var(--font-display); color: var(--accent); margin-top: 4px; }
.mc-cart-item .meta { font: 600 11px var(--font-text); color: var(--muted); }
.mc-cart-item .quitar { background: none; border: none; color: var(--muted); cursor: pointer; font: 600 12px var(--font-text); }
.mc-cart-item .quitar:hover { color: var(--accent2); }
.mc-cart-vacio { text-align: center; padding: 70px 20px; color: var(--muted); }

/* ---------- Hero ---------- */
.mc-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.mc-hero .fondo-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(72% 110% at 88% 12%, var(--glow), transparent 55%), var(--bg);
}
.mc-hero .fondo-grid {
    position: absolute;
    inset: 0;
    opacity: .45;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(75% 75% at 30% 30%, #000, transparent);
    -webkit-mask-image: radial-gradient(75% 75% at 30% 30%, #000, transparent);
}
.mc-hero .contenido { position: relative; }
.mc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 999px;
    padding: 7px 13px;
    font: 700 11px var(--font-display);
    letter-spacing: 1.5px;
    color: var(--muted);
    text-transform: uppercase;
}
.mc-hero-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}
.mc-hero h1 {
    font: 900 clamp(42px, 5.6vw, 80px)/0.92 var(--font-display);
    letter-spacing: -2px;
    margin: 22px 0 0;
    text-transform: uppercase;
}
.mc-hero h1 .acento { color: var(--accent); }
.mc-hero .bajada { font: 500 17px/1.6 var(--font-text); color: var(--muted); max-width: 490px; margin: 22px 0 0; }
.mc-hero .cta-fila { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.mc-hero-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--line2);
    box-shadow: 0 40px 90px -30px #000;
    /* Imprescindible: cuando la altura la fuerza un `min-height` mayor que la
       que sale de la proporción, el navegador RE-DERIVA EL ANCHO a partir de
       esa proporción. Una franja 21/6 con min-height:150px pedía 525 px de
       ancho, así que en un teléfono de 390 se salía 151 px y arrastraba toda
       la página a un scroll horizontal. Este tope corta esa re-derivación:
       la altura mínima se respeta y el `object-fit: cover` de la imagen se
       encarga del recorte. */
    max-width: 100%;
}
.mc-hero-media img, .mc-hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-hero-media .degradado { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .78)); }
.mc-hero-media .pie { position: absolute; left: 18px; bottom: 18px; right: 18px; }
.mc-hero-media .pie .kicker { font: 800 11px var(--font-display); letter-spacing: 2px; color: var(--accent); text-transform: uppercase; }
.mc-hero-media .pie .titulo { font: 900 22px var(--font-display); color: #fff; margin-top: 2px; }
.mc-flotante {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 20px 40px -20px #000;
}

/* Stats */
.mc-stats { display: flex; gap: 26px; margin-top: 36px; flex-wrap: wrap; }
.mc-stats .sep { width: 1px; background: var(--line); }
.mc-stat .cifra { font: 900 26px var(--font-display); color: var(--text); }
.mc-stat .detalle { font: 600 12px var(--font-text); color: var(--muted); }
/* Una cifra puede llevar a su página (productos → catálogo, marcas → marcas).
   Se lee igual que las demás; solo al pasar por encima se nota que es un
   enlace, para no convertir la fila en un semáforo de colores. */
a.mc-stat { display: block; text-decoration: none; transition: .15s; }
a.mc-stat:hover .cifra { color: var(--accent); }
a.mc-stat:hover .detalle { color: var(--text); }

/* ---------- Secciones ---------- */
.mc-seccion { padding-top: 52px; padding-bottom: 24px; }
.mc-eyebrow {
    font: 800 12px var(--font-display);
    letter-spacing: 2px;
    color: var(--accent);
    text-transform: uppercase;
}
.mc-h2 {
    font: 900 clamp(26px, 3.4vw, 40px)/1 var(--font-display);
    letter-spacing: -.5px;
    margin: 10px 0 0;
    text-transform: uppercase;
}
.mc-seccion-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 20px;
    flex-wrap: wrap;
}
.mc-seccion-head.centrada { justify-content: center; text-align: center; }
.mc-bajada { font: 500 15px/1.6 var(--font-text); color: var(--muted); margin: 12px 0 0; }

/* ---------- Cards ---------- */
.mc-producto {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio-cards);
    padding: 14px;
    transition: .2s;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.mc-producto:hover { border-color: var(--line2); transform: translateY(-4px); }
.mc-producto .thumb {
    position: relative;
    height: 170px;
    border-radius: var(--radio-botones);
    background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%), var(--elev);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mc-producto .thumb img { max-height: 150px; max-width: 88%; object-fit: contain; }
.mc-producto .marca { font: 700 10px var(--font-display); letter-spacing: 1px; color: var(--muted); margin-top: 12px; text-transform: uppercase; }
.mc-producto .nombre { font: 700 13.5px/1.3 var(--font-text); color: var(--text); margin-top: 4px; min-height: 36px; flex: 1; }
.mc-producto .pie { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.mc-producto .precio { font: 900 17px var(--font-display); color: var(--accent); }
.mc-producto .precio del { font: 400 12px var(--font-text); color: var(--muted); margin-right: 6px; }
.mc-producto .agregar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 6px;
    border: 1px solid var(--line2);
    background: var(--elev);
    color: var(--text);
    font: 800 11px var(--font-display);
    padding: 9px 12px;
    border-radius: 11px;
    cursor: pointer;
    transition: .15s;
}
.mc-producto .agregar:hover { border-color: var(--accent); color: var(--accent); }

.mc-badge-tag {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--accent);
    color: var(--on-accent);
    font: 800 9px var(--font-display);
    letter-spacing: .5px;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 2;
    text-transform: uppercase;
}

.mc-servicio {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio-cards);
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: .2s;
    height: 100%;
}
.mc-servicio:hover { border-color: var(--accent); transform: translateY(-4px); }
.mc-servicio .icono {
    width: 48px;
    height: 48px;
    border-radius: var(--radio-botones);
    background: color-mix(in srgb, var(--accent) 16%, var(--elev));
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 900 20px var(--font-display);
    margin-bottom: 16px;
}
.mc-servicio h3 { font: 800 17px/1.2 var(--font-display); color: var(--text); margin: 0; }
.mc-servicio p { font: 500 13px/1.55 var(--font-text); color: var(--muted); margin: 9px 0 16px; flex: 1; }
.mc-servicio .liga { font: 800 12px var(--font-display); color: var(--accent); }

.mc-curso {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--line);
    min-height: 260px;
    background: linear-gradient(155deg, var(--elev), #0c0c0f);
    transition: border-color .2s;
    display: block;
}
.mc-curso:hover { border-color: var(--accent); }
.mc-curso .halo { position: absolute; inset: 0; background: radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 55%); }
.mc-curso .cuerpo { position: relative; padding: 28px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.mc-curso .fila-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.mc-curso .nivel { background: var(--accent); color: var(--on-accent); font: 800 10px var(--font-display); letter-spacing: .5px; padding: 5px 10px; border-radius: 7px; text-transform: uppercase; }
.mc-curso .fecha { font: 700 11px var(--font-display); color: var(--muted); }
.mc-curso .kicker { font: 700 11px var(--font-display); letter-spacing: 1px; color: var(--accent); text-transform: uppercase; margin-top: auto; }
.mc-curso h3 { font: 900 24px/1.05 var(--font-display); color: var(--text); margin: 8px 0 0; text-transform: uppercase; }
.mc-curso p { font: 500 13px/1.5 var(--font-text); color: var(--muted); margin: 10px 0 18px; }
.mc-curso .pie { display: flex; align-items: center; justify-content: space-between; }
.mc-curso .precio { font: 900 20px var(--font-display); color: var(--text); }
.mc-curso .liga { font: 800 12px var(--font-display); color: var(--accent); }

.mc-card-blog {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio-cards);
    overflow: hidden;
    transition: .2s;
    display: block;
    height: 100%;
}
.mc-card-blog:hover { border-color: var(--line2); transform: translateY(-4px); }
.mc-card-blog .portada {
    height: 170px;
    background: linear-gradient(150deg, var(--elev), #0c0c0f);
    position: relative;
    overflow: hidden;
}
.mc-card-blog .portada img { width: 100%; height: 100%; object-fit: cover; }
.mc-card-blog .portada .halo { position: absolute; inset: 0; background: radial-gradient(80% 90% at 90% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); }
.mc-card-blog .tag {
    position: absolute;
    left: 14px;
    top: 14px;
    background: var(--accent);
    color: var(--on-accent);
    font: 800 9px var(--font-display);
    letter-spacing: .5px;
    padding: 5px 9px;
    border-radius: 6px;
    text-transform: uppercase;
}
.mc-card-blog .cuerpo { padding: 18px 20px 22px; }
.mc-card-blog h3 { font: 800 16px/1.25 var(--font-display); color: var(--text); margin: 0; min-height: 40px; }
.mc-card-blog .meta { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 600 11px var(--font-text); color: var(--muted); }

.mc-resena { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radio-cards); padding: 26px; height: 100%; }
.mc-resena .estrellas { font: 900 15px var(--font-display); color: var(--accent); letter-spacing: 2px; }
.mc-resena p { font: 500 15px/1.6 var(--font-text); color: var(--text); margin: 14px 0 20px; }
.mc-resena .autor { display: flex; align-items: center; gap: 11px; }
.mc-resena .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #7a0d10);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 900 15px var(--font-display);
    color: #fff;
}

/* Panel CTA / bandas */
.mc-panel {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--line2);
    background: linear-gradient(120deg, var(--surface), var(--bg));
    transition: border-color .2s;
}
.mc-panel:hover { border-color: var(--accent); }
.mc-panel .halo { position: absolute; inset: 0; background: radial-gradient(70% 140% at 15% 0%, var(--accent), transparent 55%); }
.mc-panel .cuerpo { position: relative; padding: 34px; }
.mc-panel h3 { font: 900 clamp(22px, 2.8vw, 30px)/1.05 var(--font-display); margin: 8px 0 0; text-transform: uppercase; }

/* Panel inmersivo con imagen de fondo + parallax (banners: «Dos mundos», etc.).
   El fondo va sobredimensionado y centrado para que el desplazamiento del
   parallax (mc.js → parallax()) no revele bordes; un scrim mantiene legible el
   texto sobre cualquier foto. La imagen y el scrim se posicionan por CLASE
   (el saneador de banners no permite position/inset/z-index inline). */
.mc-mundo-fondo {
    position: absolute;
    left: 0; right: 0; top: -15%;
    width: 100%; height: 130%;
    object-fit: cover;
    opacity: .42;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}
.mc-mundo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg) 12%, transparent) 0%,
        color-mix(in srgb, var(--bg) 45%, transparent) 45%,
        color-mix(in srgb, var(--bg) 88%, transparent) 100%);
    pointer-events: none;
}
.mc-mundo .halo { z-index: 1; opacity: .8; }
.mc-mundo .cuerpo { position: relative; z-index: 2; }
/* Cualquier elemento con parallax anima solo el transform (compositor). */
[data-parallax] { will-change: transform; }

/* Chips */
.mc-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line2);
    background: var(--surface);
    color: var(--muted);
    font: 700 12.5px var(--font-text);
    padding: 9px 15px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: .15s;
}
.mc-chip:hover { color: var(--text); border-color: var(--accent); }
.mc-chip.activo { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mc-chip.mini { font-size: 11px; padding: 7px 12px; background: var(--elev); border-color: var(--line); color: var(--text); cursor: default; }
/* Marca con logo: miniatura a la izquierda, nombre a la derecha. Sin logo el
   chip conserva la misma altura para que la fila no se descuadre. */
.mc-chip-marca { gap: 8px; padding-left: 9px; }
.mc-chip-marca img {
    width: 26px;
    height: 18px;
    object-fit: contain;
    flex: none;
    border-radius: 3px;
}

/* Categoría destacada (grid con número) */
.mc-cat-card {
    position: relative;
    height: 132px;
    border-radius: 16px;
    overflow: hidden;
    display: block;
    border: 1px solid var(--line);
    background: linear-gradient(150deg, var(--elev), var(--surface));
    transition: border-color .2s;
}
.mc-cat-card:hover { border-color: var(--accent); }
.mc-cat-card .halo { position: absolute; inset: 0; background: radial-gradient(120% 90% at 90% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%); }
.mc-cat-card .numero { position: absolute; right: -6px; bottom: -14px; font: 900 78px var(--font-display); color: var(--line2); line-height: .7; }
.mc-cat-card .glyph { position: absolute; left: 16px; top: 14px; font: 900 20px var(--font-display); color: var(--accent); opacity: .9; }
.mc-cat-card .info { position: absolute; left: 16px; bottom: 14px; right: 12px; }
.mc-cat-card .info .nombre { font: 800 14px/1.15 var(--font-display); color: var(--text); }
.mc-cat-card .info .conteo { font: 600 11px var(--font-text); color: var(--muted); margin-top: 3px; }

/* Marquee de marcas */
.mc-marquee-seccion { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.mc-marquee-fila { display: flex; align-items: center; gap: 18px; padding: 18px 24px; }
.mc-marquee-fila .etiqueta { font: 700 11px var(--font-display); letter-spacing: 1.5px; color: var(--muted); flex: none; text-transform: uppercase; }
.mc-marquee {
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mc-marquee .pista { display: flex; gap: 54px; width: max-content; animation: mcMarquee 26s linear infinite; }
.mc-marquee .pista span { font: 800 20px var(--font-display); letter-spacing: .5px; color: var(--muted); opacity: .7; white-space: nowrap; text-transform: uppercase; }
/* Cada marca es un enlace a su catálogo. Se detiene al pasar el mouse (o al
   primer toque en táctil, ver mc.js) para poder leerla y tocarla. */
.mc-marquee .pista .marca {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    text-decoration: none;
    transition: opacity .2s, filter .2s;
}
/* La caja del logo mide SIEMPRE lo mismo, cargue o no la imagen. Sin esto el
   enlace nacía de 0 px de ancho (el logo es lazy y todavía no tiene tamaño),
   y un elemento de 0×0 nunca cuenta como visible: el navegador no descargaba
   la imagen, así que el enlace se quedaba en 0 para siempre y no había dónde
   hacer clic. Reservar el espacio rompe ese círculo y de paso evita el salto
   de maquetación al cargar. */
.mc-marquee .pista .marca.con-logo { width: 120px; height: 34px; }
.mc-marquee .pista .marca img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .72;
    transition: filter .2s, opacity .2s;
    -webkit-user-drag: none;
}
.mc-marquee .pista .marca:hover img,
.mc-marquee .pista .marca:focus-visible img { filter: none; opacity: 1; }
.mc-marquee .pista .marca:hover span,
.mc-marquee .pista .marca:focus-visible span { color: var(--text); opacity: 1; }
.mc-marquee:hover .pista,
.mc-marquee .pista.pausada { animation-play-state: paused; }
/* Señal de que está detenida: si nada cambia, el primer toque parece un fallo. */
.mc-marquee.detenida { position: relative; }
.mc-marquee.detenida::after {
    content: "Toca de nuevo para ver la marca";
    position: absolute;
    right: 0;
    bottom: -2px;
    font: 700 10px var(--font-text);
    letter-spacing: .3px;
    color: var(--accent);
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 6px;
    pointer-events: none;
}

/* ---------- Page head (interiores) ---------- */
.mc-page-head {
    position: relative;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(120deg, var(--surface), var(--bg));
}
/* Sin overflow:hidden arriba: recortaba #mc-sugerencias (el dropdown de
   búsqueda del catálogo, que cuelga del formulario dentro de .cuerpo) justo
   en el borde inferior de esta sección. El halo no lo necesita: inset:0
   ya lo ajusta exacto al tamaño del contenedor. */
.mc-page-head .halo { position: absolute; inset: 0; background: radial-gradient(70% 130% at 85% 0%, var(--glow), transparent 55%); }
.mc-page-head .cuerpo { position: relative; padding-top: 44px; padding-bottom: 40px; }
.mc-page-head .ruta { font: 600 12px var(--font-text); color: var(--muted); }
.mc-page-head .ruta a { color: var(--muted); }
.mc-page-head .ruta a:hover { color: var(--text); }
.mc-page-head h1 {
    font: 900 clamp(30px, 4vw, 50px)/1 var(--font-display);
    letter-spacing: -1px;
    margin: 12px 0 0;
    text-transform: uppercase;
}
.mc-page-head .bajada { font: 500 15px/1.6 var(--font-text); color: var(--muted); margin: 12px 0 0; max-width: 520px; }

/* Encabezado de una MARCA: su logo en mosaico, en diagonal, desvaneciéndose de
   derecha a izquierda para que forme franjas detrás del título, la
   descripción y el buscador — nunca compitiendo con ellos. El halo sigue en su
   propio .halo; esto es una capa aparte. La URL la inyecta la vista en
   --mc-marca-logo (ruta del propio sitio, validada antes de escribirla). */
.mc-page-head.con-marca::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--mc-marca-logo);
    background-repeat: repeat;
    background-size: 132px auto;
    transform: rotate(-8deg) scale(1.3);
    opacity: .07;
    filter: grayscale(1);
    -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 72%);
    mask-image: linear-gradient(270deg, #000 0%, transparent 72%);
    pointer-events: none;
    z-index: 0;
}
/* El texto y el buscador van por encima del mosaico. */
.mc-page-head .cuerpo { z-index: 2; }
@media (max-width: 767.98px) {
    /* En móvil el mosaico compite con el texto: se achica y se aclara. */
    .mc-page-head.con-marca::before { background-size: 92px auto; opacity: .05; }
}

/* ---------- Detalle de producto ---------- */
.mc-detalle-visor {
    position: relative;
    aspect-ratio: 1;
    border-radius: 22px;
    border: 1px solid var(--line2);
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mc-detalle-visor img { max-height: 78%; max-width: 80%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
.mc-detalle-visor .marca-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--elev);
    border: 1px solid var(--line);
    color: var(--muted);
    font: 700 10px var(--font-display);
    letter-spacing: 1px;
    padding: 6px 11px;
    border-radius: 8px;
    text-transform: uppercase;
}
.mc-detalle-visor .visor-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 1px solid var(--line2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    z-index: 2;
}
.mc-detalle-visor .visor-nav:hover { border-color: var(--accent); background: var(--surface); }
.mc-detalle-visor .visor-nav.prev { left: 12px; }
.mc-detalle-visor .visor-nav.next { right: 12px; }
.mc-detalle-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.mc-detalle-thumbs button {
    width: 64px;
    height: 64px;
    padding: 4px;
    border: 1px solid var(--line2);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.mc-detalle-thumbs button img { width: 100%; height: 100%; object-fit: contain; }
.mc-detalle-thumbs button:hover { transform: translateY(-2px); }
.mc-detalle-thumbs button.activa { border-color: var(--accent); }
.mc-detalle h1 { font: 900 clamp(26px, 3vw, 36px)/1.08 var(--font-display); letter-spacing: -.5px; margin: 14px 0 0; }
.mc-detalle .precio-fila { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 0; }
.mc-detalle .precio { font: 900 38px var(--font-display); color: var(--text); }
.mc-detalle .precio-nota { font: 600 13px var(--font-text); color: var(--muted); }
/* Pago a meses: va bajo el precio, en segundo plano — es una alternativa de
   pago, no una oferta, y no debe competir con el precio de contado. */
.mc-detalle .precio-msi { font: 500 14px var(--font-text); color: var(--text); margin-top: 6px; }
.mc-detalle .precio-msi strong { font-weight: 800; }
.mc-detalle .precio-msi .text-muted { color: var(--muted); font-size: 13px; }
.mc-detalle .stock { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 700 12px var(--font-text); color: var(--wa); }
.mc-detalle .stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wa); }
.mc-detalle .stock.agotado { color: var(--accent2); }
.mc-detalle .stock.agotado::before { background: var(--accent2); }
.mc-detalle .stock.sobre-pedido { color: #E8A33D; }
.mc-detalle .stock.sobre-pedido::before { background: #E8A33D; }

/* ---------- Etiqueta de promoción (badge de imagen o texto) ---------- */
.mc-badge-etiqueta {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    max-width: 72px;
    max-height: 72px;
}
.mc-badge-etiqueta img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.mc-badge-etiqueta.texto {
    background: var(--elev);
    border: 1px solid var(--line2);
    color: var(--text);
    font: 800 9px var(--font-display);
    letter-spacing: .5px;
    padding: 5px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    max-width: none;
    white-space: nowrap;
}
.mc-detalle-visor .mc-badge-etiqueta { top: 16px; right: 16px; }

/* ---------- Oferta relámpago: cuenta regresiva + barra de progreso ---------- */
.mc-relampago { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.mc-relampago-cuenta { display: flex; gap: 8px; }
.mc-relampago-cuenta .unidad {
    background: var(--elev);
    border: 1px solid var(--line2);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
    min-width: 56px;
}
.mc-relampago-cuenta .unidad span { display: block; font: 900 20px var(--font-display); color: var(--text); line-height: 1; }
.mc-relampago-cuenta .unidad small { display: block; font: 700 9px var(--font-text); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
.mc-relampago.finalizada .mc-relampago-cuenta { opacity: .45; }
.mc-relampago-barra { height: 10px; border-radius: 999px; background: var(--elev); border: 1px solid var(--line2); overflow: hidden; }
.mc-relampago-barra .relleno { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }
.mc-relampago-texto { font: 700 12px var(--font-text); color: var(--wa); }
.mc-relampago-texto.urgente { color: var(--accent2); animation: mcPulseGlow 2.2s ease-in-out infinite; }

/* ---------- Banner de oferta relámpago (imagen de fondo + info + carrusel) ---------- */
.mc-relampago-banner {
    position: relative;
    border-radius: var(--radio-cards);
    overflow: hidden;
    border: 1px solid var(--line2);
    background: var(--surface);
    margin-bottom: 40px;
}
.mc-relampago-banner .fondo { position: relative; min-height: 300px; display: flex; align-items: flex-end; }
.mc-relampago-banner .fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-relampago-banner .fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .82) 90%);
}
/* El aparador generado ocupa el fondo de la franja igual que lo haría una
   foto: se le suelta la proporción propia (aquí manda el alto de la franja) y
   las esquinas, que ya las pone el contenedor. */
.mc-relampago-banner .fondo.con-aparador .mc-aparador {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    /* Por encima del velo (que no lleva z-index) y por debajo del texto, que
       va en 2: así el halo de marca se ve y el título sigue mandando. */
    z-index: 1;
}
/* El velo de la franja es de arriba abajo y apagaba el aparador entero. Con
   aparador se cambia a un velo LATERAL: oscurece el lado del texto y deja
   respirar el lado de las piezas, que es lo que hay que ver. */
.mc-relampago-banner .fondo.con-aparador::after {
    background: linear-gradient(100deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .72) 38%, rgba(0, 0, 0, .12) 68%, transparent 100%);
}
/* En la franja el texto vive a la izquierda: el aparador se corre a la derecha
   para acompañarlo, no para taparlo. */
.mc-relampago-banner .fondo.con-aparador .piezas { left: 38%; }
.mc-relampago-banner .fondo.con-aparador .halo { left: 70%; width: 52%; }
.mc-relampago-banner .fondo.con-aparador .piso { left: 70%; width: 42%; }
@media (max-width: 767.98px) {
    .mc-relampago-banner .fondo.con-aparador .piezas { left: 0; opacity: .55; }
}
.mc-relampago-banner .fondo.sin-imagen { background: radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--accent2) 24%, var(--surface)), var(--surface)); }
.mc-relampago-banner .fondo.sin-imagen::after { display: none; }
.mc-relampago-banner .info { position: relative; z-index: 2; padding: 32px; width: 100%; color: #fff; }
.mc-relampago-banner .fondo.sin-imagen .info { color: var(--text); }
.mc-relampago-banner .info .nombre { font: 900 clamp(22px, 2.6vw, 32px) var(--font-display); margin: 8px 0 6px; }
.mc-relampago-banner .info .descripcion { font: 500 14px/1.6 var(--font-text); opacity: .9; max-width: 640px; }
.mc-relampago-banner .info .vigencia { font: 700 12px var(--font-text); opacity: .85; margin-top: 6px; }
/* Carrusel de productos de la oferta relámpago: por [data-mc-carrusel], no
   por ancestro, para que funcione igual en el banner del sistema y en
   cualquier diseño de la biblioteca (con o sin imagen de fondo). */
[data-mc-carrusel] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    cursor: grab;
}
.mc-relampago-banner .carrusel { padding: 20px 24px 24px; }
[data-mc-carrusel].arrastrando { cursor: grabbing; scroll-behavior: auto; user-select: none; }
[data-mc-carrusel] .mc-producto { flex: 0 0 200px; scroll-snap-align: start; }
[data-mc-carrusel]::-webkit-scrollbar { height: 6px; }
[data-mc-carrusel]::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 999px; }
@media (max-width: 767px) {
    .mc-relampago-cuenta .unidad { min-width: 46px; padding: 6px 8px; }
    .mc-relampago-cuenta .unidad span { font-size: 16px; }
}

/* ---------- Descubrimiento del catálogo (fin del scroll infinito) ---------- */
.mc-descubre { margin-top: 56px; }
.mc-descubre-divisor {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 34px;
}
.mc-descubre-divisor span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line2)); }
.mc-descubre-divisor span:last-child { background: linear-gradient(90deg, var(--line2), transparent); }
.mc-descubre-divisor strong {
    font: 800 12px var(--font-display);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}
.mc-banner-producto {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 2fr) 3fr;
    align-items: center;
    gap: 28px;
    border: 1px solid var(--line2);
    border-radius: 22px;
    background: radial-gradient(130% 110% at 8% 0%, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface));
    overflow: hidden;
    padding: 30px 34px;
    margin-bottom: 22px;
}
.mc-banner-producto .halo {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 90% at 90% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
    pointer-events: none;
}
.mc-banner-producto .foto { display: flex; align-items: center; justify-content: center; position: relative; }
.mc-banner-producto .foto img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .5));
    transition: transform .25s;
}
.mc-banner-producto:hover .foto img { transform: scale(1.04) rotate(-1deg); }
.mc-banner-producto .info { position: relative; min-width: 0; }
.mc-banner-producto .marca {
    font: 800 11px var(--font-display);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 10px;
}
.mc-banner-producto .nombre {
    display: block;
    font: 900 clamp(20px, 2.4vw, 28px)/1.15 var(--font-display);
    color: var(--text);
    text-decoration: none;
    margin-top: 4px;
}
.mc-banner-producto .nombre:hover { color: var(--accent); }
.mc-banner-producto .precio { font: 900 26px var(--font-display); color: var(--accent); margin-top: 8px; }
.mc-banner-producto .precio del { color: var(--muted); font: 400 15px var(--font-text); margin-right: 8px; }
.mc-banner-producto .precio small { font: 600 12px var(--font-text); color: var(--muted); }
@media (max-width: 767px) {
    .mc-banner-producto { grid-template-columns: 1fr; padding: 24px 20px; text-align: center; }
    .mc-banner-producto .foto img { max-height: 170px; }
    .mc-banner-producto .info .d-flex { justify-content: center; }
}
.mc-marcas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
.mc-marca-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--line2);
    border-radius: 16px;
    background: var(--surface);
    padding: 16px 18px;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.mc-marca-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.mc-marca-card .nombre { font: 800 14px var(--font-display); letter-spacing: .4px; text-transform: uppercase; color: var(--text); }
.mc-marca-card .conteo { font: 600 12px var(--font-text); color: var(--muted); }
.mc-marca-card:hover .conteo { color: var(--accent); }
/* Logo de la marca. La caja mide siempre lo mismo (con o sin imagen) para que
   la retícula no quede escalonada: sin logo se pinta la inicial. */
.mc-marca-card .logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 42px;
    margin-bottom: 6px;
}
/* Ancho reservado por el mismo motivo que en la tira de marcas: un logo lazy
   sin tamaño se queda en 0 y no llega a descargarse nunca. */
.mc-marca-card .logo img {
    width: 118px;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    filter: grayscale(1);
    opacity: .8;
    transition: filter .2s, opacity .2s;
}
.mc-marca-card:hover .logo img { filter: none; opacity: 1; }
.mc-marca-card .logo .inicial {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--elev);
    border: 1px solid var(--line);
    font: 900 19px var(--font-display);
    color: var(--muted);
}

/* Índice del catálogo: los bloques «explora por marca / por categoría» que
   convierten /catalogo en un directorio y no en otra portada de tienda. */
.mc-indice { margin-bottom: 34px; }
/* Salida del índice hacia el listado completo: quien quiere recorrerlo todo lo
   pide, en vez de encontrárselo volcado debajo. */
.mc-indice-salida {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    border: 1px solid var(--line2);
    border-radius: var(--radio-cards);
    background: linear-gradient(140deg, var(--surface), var(--elev));
    padding: 26px 28px;
    margin-bottom: 20px;
}
.mc-indice-salida .mc-h2 { margin: 8px 0 0; }
.mc-indice-salida .mc-bajada { margin: 6px 0 0; }
.mc-indice .mc-seccion-head { margin-bottom: 16px; }

.mc-spec { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mc-spec .clave { font: 600 13px var(--font-text); color: var(--muted); }
.mc-spec .valor { font: 700 13px var(--font-text); color: var(--text); }
.mc-info-mini { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.mc-info-mini .titulo { font: 800 11px var(--font-display); color: var(--text); text-transform: uppercase; }
.mc-info-mini .texto { font: 600 11px var(--font-text); color: var(--muted); margin-top: 3px; }
.mc-descripcion { white-space: pre-line; font: 500 15px/1.75 var(--font-text); color: var(--muted); }

.mc-qty { display: inline-flex; align-items: center; gap: 8px; }
.mc-qty button {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--line2);
    background: var(--elev);
    color: var(--text);
    cursor: pointer;
    font: 800 16px var(--font-display);
    line-height: 0;
}
.mc-qty input {
    width: 52px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 9px;
    color: var(--text);
    font: 800 14px var(--font-display);
    padding: 8px 0;
    outline: none;
}

/* ---------- Formularios ---------- */
.mc-form label, .mc-form .form-label { font: 700 13px var(--font-text); color: var(--text); margin-bottom: 6px; }
.mc-form .form-control, .mc-form .form-select, .mc-form textarea {
    background: var(--elev);
    border: 1px solid var(--line2);
    border-radius: var(--radio-botones);
    color: var(--text);
    padding: 13px 16px;
    font: 500 14px var(--font-text);
}
.mc-form .form-control::placeholder { color: var(--muted); }
.mc-form .form-control:focus, .mc-form .form-select:focus, .mc-form textarea:focus {
    background: var(--elev);
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--text);
    outline: none;
}
.mc-form .invalid-feedback { color: var(--accent2); }
.mc-form .help-block { color: var(--accent2); font: 600 12px var(--font-text); }

.mc-buscador { position: relative; width: 100%; }
/* Mientras hay sugerencias abiertas el buscador manda sobre todo lo que viene
   después en su misma capa (el degradado del hero de la tienda, los banners de
   sección): el z-index del panel solo pesa DENTRO de este contexto, así que hay
   que levantar el formulario entero, no la lista. */
.mc-buscador.sugiriendo { z-index: 70; }
/* El hero recorta (lo necesita su glow); con la lista abierta se le suelta el
   recorte para que las sugerencias se vean enteras. Los fondos van con
   `inset: 0`, así que no se salen por su cuenta. */
.mc-hero.sin-recorte, .mc-page-head.sin-recorte { overflow: visible; }
.mc-buscador input {
    width: 100%;
    background: var(--elev);
    border: 1px solid var(--line2);
    border-radius: var(--radio-botones);
    padding: 12px 46px 12px 16px;
    color: var(--text);
    font: 500 14px var(--font-text);
    outline: none;
    box-sizing: border-box;
}
.mc-buscador input:focus { border-color: var(--accent); }
.mc-buscador button {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    width: 38px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Carrito / checkout ---------- */
.mc-tabla-carrito { width: 100%; border-collapse: collapse; }
.mc-tabla-carrito th {
    font: 800 11px var(--font-display);
    letter-spacing: 1px;
    color: var(--muted);
    text-transform: uppercase;
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid var(--line2);
}
.mc-tabla-carrito td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mc-tabla-carrito .prod { display: flex; align-items: center; gap: 12px; }
.mc-tabla-carrito .prod img { width: 58px; height: 64px; object-fit: contain; background: var(--elev); border-radius: 9px; }
.mc-tabla-carrito .prod .nombre { font: 700 13.5px/1.3 var(--font-text); color: var(--text); }
.mc-tabla-carrito .prod .meta { font: 600 11px var(--font-text); color: var(--muted); }

.mc-resumen { background: var(--surface); border: 1px solid var(--line2); border-radius: var(--radio-cards); padding: 24px; }
.mc-resumen .fila { display: flex; justify-content: space-between; padding: 6px 0; font: 600 14px var(--font-text); color: var(--muted); }
.mc-resumen .total { font: 900 22px var(--font-display); color: var(--text); border-top: 1px solid var(--line2); margin-top: 10px; padding-top: 14px; display: flex; justify-content: space-between; }

.mc-metodo-pago {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line2);
    background: var(--surface);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s;
}
.mc-metodo-pago:hover, .mc-metodo-pago.activo { border-color: var(--accent); }
.mc-metodo-pago input { accent-color: #E4181F; width: 18px; height: 18px; }
.mc-metodo-pago .titulo { font: 800 14px var(--font-display); color: var(--text); }
.mc-metodo-pago .detalle { font: 600 12px var(--font-text); color: var(--muted); }

/* ---------- Footer ---------- */
.mc-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 70px; }
.mc-footer .arriba { padding-top: 56px; padding-bottom: 34px; }
/* Puerta de entrada al panel: el logo del negocio en grande y centrado, con
   su nombre debajo (una imagen no siempre se lee sola). Sin los márgenes
   negativos del encabezado, que aquí no pintan nada. */
/* `.mc-logo-login.mc-logo` (y no solo `.mc-logo-login`) para ganarle a la
   regla móvil de `.mc-logo img`, que va más abajo en el archivo: aquí no hay
   fila de encabezado que respetar y el logo debe verse grande. */
.mc-logo-login.mc-logo img {
    height: 84px;
    max-width: 100%;
    margin-block: 0;
    object-fit: contain;
    object-position: center;
}
.mc-logo-login-nombre {
    font: 900 20px/1.2 var(--font-display);
    letter-spacing: .5px;
    color: var(--text);
    margin-top: 12px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* En el pie el logo tiene sitio de sobra: no hay fila que respetar, así que
   se muestra a tamaño cómodo y sin los márgenes negativos del encabezado. */
.mc-footer .mc-logo img {
    height: 72px;
    max-width: 100%;
    margin-block: 0;
    object-fit: contain;
    object-position: left center;
}
.mc-footer .titulo-col { font: 800 12px var(--font-display); letter-spacing: 1px; color: var(--text); margin-bottom: 14px; text-transform: uppercase; }
.mc-footer p, .mc-footer a { font: 500 13px/1.6 var(--font-text); color: var(--muted); }
.mc-footer a { display: block; padding: 4px 0; }
.mc-footer a:hover { color: var(--text); }
.mc-footer .redes { display: flex; gap: 9px; }
.mc-footer .redes a {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--elev);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font: 800 12px var(--font-display);
    padding: 0;
}
.mc-footer .redes a:hover { color: var(--text); border-color: var(--accent); }
.mc-footer .abajo { border-top: 1px solid var(--line); padding-top: 18px; padding-bottom: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font: 500 12px var(--font-text); color: var(--muted); }

/* ---------- Sparky (mascota de consejos) ---------- */
.mc-sparky { position: fixed; left: 22px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 340px; }
.mc-sparky .burbuja {
    position: relative;
    max-width: 310px;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: var(--radio-cards) 18px 18px 5px;
    padding: 16px 18px;
    box-shadow: 0 26px 54px -18px #000;
    animation: mcFadeUp .3s ease;
}
.mc-sparky .burbuja .kicker { font: 800 10px var(--font-display); letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; }
.mc-sparky .burbuja .tip { display: flex; gap: 11px; margin-top: 10px; align-items: flex-start; font: 600 14px/1.42 var(--font-text); color: var(--text); }
.mc-sparky .burbuja .tip .emoji { font-size: 24px; line-height: 1; flex: none; }
.mc-sparky .burbuja .cerrar {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--elev);
    color: var(--muted);
    cursor: pointer;
    font: 700 13px var(--font-display);
    line-height: 0;
}
.mc-sparky .muneco { cursor: pointer; animation: mcBob 3.2s ease-in-out infinite; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .5)); background: none; border: none; padding: 0; }
/* La mascota es un personaje, no un icono: a 96 px seguía leyéndose como
   adorno del pie y nadie la tocaba. El tamaño manda desde aquí (los atributos
   width/height del HTML solo reservan el hueco mientras carga, para que no
   salte la página). */
.mc-sparky .muneco svg,
.mc-sparky .muneco img { width: 132px; height: 165px; display: block; }

/* --- Asomada: cuando llevan rato ignorándola -----------------------
   Ni desaparecer (se pierde para siempre) ni quedarse igual de grande
   estorbando: se retira hacia el borde dejando ver un tercio y da saltitos
   de vez en cuando. Sigue siendo un objetivo tocable de sobra, y al pasar
   el ratón o tocarla vuelve entera. */
.mc-sparky.asomada { pointer-events: none; }
.mc-sparky.asomada .burbuja { display: none !important; }
.mc-sparky.asomada .muneco {
    pointer-events: auto;
    transform: translateX(-62%);
    animation: mcAsomar 5.5s ease-in-out infinite;
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
    opacity: .92;
}
.mc-sparky.asomada .muneco:hover,
.mc-sparky.asomada .muneco:focus-visible {
    transform: translateX(0);
    animation: none;
    opacity: 1;
}
@keyframes mcAsomar {
    0%, 62%, 100% { transform: translateX(-62%) translateY(0); }
    70% { transform: translateX(-58%) translateY(-9px); }
    77% { transform: translateX(-58%) translateY(0); }
    84% { transform: translateX(-58%) translateY(-5px); }
    91% { transform: translateX(-58%) translateY(0); }
}

.mc-whatsapp-flotante {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wa);
    border: none;
    cursor: pointer;
    box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .6);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Toast (arriba a la derecha, entrada deslizante) ---------- */
.mc-toast {
    position: fixed;
    top: 86px;
    right: 18px;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-left: 4px solid var(--wa);
    color: var(--text);
    padding: .85rem 1.4rem;
    border-radius: 14px;
    font: 700 13px var(--font-text);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px) scale(.96);
    transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .25s ease, visibility .25s;
    box-shadow: 0 26px 54px -18px #000;
    max-width: min(340px, calc(100vw - 32px));
}
.mc-toast.visible { opacity: 1; visibility: visible; transform: translateX(0) scale(1); }
.mc-toast.exito { border-left-color: var(--wa); }
.mc-toast.error { border-left-color: #E4181F; }
@media (max-width: 575.98px) {
    .mc-toast { top: 74px; right: 12px; left: 12px; max-width: none; text-align: center; }
}

/* Botón "+ Agregar": confirmación (.agregado, 2 s bloqueado) y estado
   persistente (.en-carrito, clicable para volver a agregar o editar) */
.mc-producto .agregar.agregado,
.btn-mc.agregado,
.mc-producto .agregar.en-carrito,
.btn-mc.en-carrito {
    background: var(--wa) !important;
    border-color: var(--wa) !important;
    color: #04210f !important;
}
.mc-producto .agregar.agregado,
.btn-mc.agregado { pointer-events: none; }
.mc-producto .agregar.en-carrito:hover,
.btn-mc.en-carrito:hover { filter: brightness(1.12); }

/* Badge del carrito: brinco al agregar */
@keyframes mcBadgeBump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.mc-badge-bump { animation: mcBadgeBump .45s ease; }

/* ---------- Quick-add: modal de cantidad y variantes ---------- */
.mc-quickadd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(4px);
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.mc-quickadd-overlay.abierto { opacity: 1; visibility: visible; }
.mc-quickadd {
    width: min(460px, 100%);
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 20px;
    box-shadow: 0 40px 80px -30px #000;
    padding: 22px;
    transform: translateY(24px);
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.15);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
}
.mc-quickadd-overlay.abierto .mc-quickadd { transform: translateY(0); }
@media (max-width: 575.98px) {
    .mc-quickadd-overlay { align-items: flex-end; padding: 0; }
    .mc-quickadd { width: 100%; border-radius: 20px 20px 0 0; max-height: 86vh; }
}
.mc-quickadd .cabeza { display: flex; gap: 14px; align-items: center; }
.mc-quickadd .cabeza img,
.mc-quickadd .cabeza .sin-foto {
    width: 74px;
    height: 74px;
    border-radius: var(--radio-botones);
    object-fit: cover;
    background: var(--elev);
    border: 1px solid var(--line);
    flex: 0 0 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.mc-quickadd .cabeza .marca { font: 800 10px var(--font-display); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.mc-quickadd .cabeza .nombre { font: 800 15px var(--font-text); color: var(--text); margin-top: 2px; }
.mc-quickadd .cabeza .precio { font: 900 20px var(--font-display); color: var(--accent); margin-top: 4px; }
.mc-quickadd .cabeza .precio del { color: var(--muted); font: 500 13px var(--font-text); margin-right: 6px; }
.mc-quickadd .cabeza .stock { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 11px var(--font-text); color: var(--wa); }
.mc-quickadd .cabeza .stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mc-quickadd .cabeza .stock.agotado { color: var(--accent2); }
.mc-quickadd .cabeza .stock.sobre-pedido { color: #E8A33D; }
.mc-quickadd .btn-confirmar[disabled] { opacity: .55; cursor: not-allowed; }
/* ================= Aparador generado de una promoción =================
   El banner que la promoción arma sola con las fotos de sus productos cuando
   el negocio no subió una imagen. Se busca la sensación de escaparate: fondo
   con profundidad, piezas apoyadas unas sobre otras y una sombra que las
   asienta, en vez de una cuadrícula plana.

   Cada foto va dentro de su propia LOSETA con fondo, borde y esquinas
   redondeadas, y ajustada por dentro con `contain`: así una PNG recortada y
   una JPG de estudio, cuadrada o rectangular, acaban pareciendo de la misma
   familia. La composición depende solo de CUÁNTAS hay (`data-piezas`), que es
   lo que lo hace fácil de mantener: una regla por caso, no una plantilla por
   promoción. */
.mc-aparador {
    position: relative;
    width: 100%;
    /* La proporción llega por variable y no en línea: así el contenedor que lo
       usa de fondo puede soltarla sin pelear con un `style` del elemento. */
    aspect-ratio: var(--aparador-proporcion, 16 / 9);
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(120% 90% at 78% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
        linear-gradient(160deg, var(--elev) 0%, var(--surface) 58%, var(--bg) 100%);
    isolation: isolate;
}
/* Halo: la luz que da relieve al conjunto. */
.mc-aparador .halo {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 46%;
    width: 76%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent) 0%, transparent 66%);
    filter: blur(8px);
}
/* Piso: la sombra sobre la que se apoyan las piezas. */
.mc-aparador .piso {
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 66%;
    height: 12%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .55) 0%, transparent 72%);
    filter: blur(5px);
}
.mc-aparador .piezas {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-aparador .pieza {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4%;
    border-radius: 18px;
    /* Degradado, no color plano: es lo que hace que la loseta se lea como una
       superficie con luz y no como un recorte oscuro. */
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--surface) 72%, #fff 28%) 0%,
        color-mix(in srgb, var(--surface) 94%, #fff 6%) 62%,
        color-mix(in srgb, var(--surface) 88%, #000 12%) 100%);
    border: 1px solid color-mix(in srgb, #fff 22%, transparent);
    box-shadow:
        0 30px 50px -22px rgba(0, 0, 0, .9),
        0 2px 0 rgba(255, 255, 255, .06),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .35s ease;
}
.mc-aparador .pieza img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* La sombra propia despega la foto de su loseta y salva las que llegan con
       transparencia, que si no se ven pegadas al fondo. */
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45));
}
.mc-aparador:hover .pieza { transform: translateY(-3px); }

/* ---- Composiciones. Una regla por número de piezas ----
   Las losetas se miden por ALTO y se mantienen cuadradas (`aspect-ratio: 1`),
   nunca por ancho: así la misma composición funciona en una tarjeta 16/9 y en
   una franja 21/9 sin convertirse en tablones aplastados. */
.mc-aparador .pieza { aspect-ratio: 1; width: auto; }

/* Una sola: protagonista, centrada y grande. */
.mc-aparador[data-piezas="1"] .pieza-1 { height: 78%; }

/* Dos: se apoyan una en otra, con un leve giro que rompe la simetría. */
.mc-aparador[data-piezas="2"] .pieza-1 { height: 70%; margin-right: 26%; transform: rotate(-6deg); z-index: 2; }
.mc-aparador[data-piezas="2"] .pieza-2 { height: 70%; margin-left: 26%; transform: rotate(5deg); }
.mc-aparador[data-piezas="2"]:hover .pieza-1 { transform: rotate(-6deg) translateY(-4px); }
.mc-aparador[data-piezas="2"]:hover .pieza-2 { transform: rotate(5deg) translateY(-4px); }

/* Tres: una manda y dos la acompañan, más pequeñas y detrás. */
.mc-aparador[data-piezas="3"] .pieza-1 { height: 76%; z-index: 3; }
.mc-aparador[data-piezas="3"] .pieza-2 { height: 56%; margin-right: 42%; transform: rotate(-8deg); z-index: 2; }
.mc-aparador[data-piezas="3"] .pieza-3 { height: 56%; margin-left: 42%; transform: rotate(8deg); z-index: 2; }
.mc-aparador[data-piezas="3"]:hover .pieza-2 { transform: rotate(-8deg) translateY(-4px); }
.mc-aparador[data-piezas="3"]:hover .pieza-3 { transform: rotate(8deg) translateY(-4px); }

/* Cuatro y cinco: abanico. La del centro adelante, las de los lados en
   escalón — la profundidad la hace el tamaño, no un efecto. */
.mc-aparador[data-piezas="4"] .pieza-1,
.mc-aparador[data-piezas="5"] .pieza-1 { height: 74%; z-index: 4; }
.mc-aparador[data-piezas="4"] .pieza-2,
.mc-aparador[data-piezas="5"] .pieza-2 { height: 58%; margin-right: 44%; transform: rotate(-9deg); z-index: 3; }
.mc-aparador[data-piezas="4"] .pieza-3,
.mc-aparador[data-piezas="5"] .pieza-3 { height: 58%; margin-left: 44%; transform: rotate(9deg); z-index: 3; }
.mc-aparador[data-piezas="4"] .pieza-4,
.mc-aparador[data-piezas="5"] .pieza-4 { height: 44%; margin-right: 78%; transform: rotate(-14deg); z-index: 2; }
.mc-aparador[data-piezas="5"] .pieza-5 { height: 44%; margin-left: 78%; transform: rotate(14deg); z-index: 2; }
.mc-aparador[data-piezas="4"]:hover .pieza-2,
.mc-aparador[data-piezas="5"]:hover .pieza-2 { transform: rotate(-9deg) translateY(-4px); }
.mc-aparador[data-piezas="4"]:hover .pieza-3,
.mc-aparador[data-piezas="5"]:hover .pieza-3 { transform: rotate(9deg) translateY(-4px); }
.mc-aparador[data-piezas="4"]:hover .pieza-4,
.mc-aparador[data-piezas="5"]:hover .pieza-4 { transform: rotate(-14deg) translateY(-4px); }
.mc-aparador[data-piezas="5"]:hover .pieza-5 { transform: rotate(14deg) translateY(-4px); }

/* En pantallas estrechas las piezas de los extremos estorban más de lo que
   aportan: se quedan las tres que se leen. */
@media (max-width: 575.98px) {
    .mc-aparador .pieza-4, .mc-aparador .pieza-5 { display: none; }
    .mc-aparador .pieza { border-radius: 14px; padding: 6%; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-aparador .pieza { transition: none; }
}

/* ---------- Resumen de un kit: qué trae y cuánto ahorra ----------
   Es lo que decide la compra de un kit, así que se lee antes que el precio:
   qué productos (con su foto, que se reconocen antes que un nombre largo),
   cuánto costarían sueltos y cuánto rebaja el kit por encima de eso. */
.mc-kit-resumen {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--elev) 60%, transparent);
}
.mc-kit-resumen .encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font: 700 11.5px var(--font-text);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
}
.mc-kit-resumen .ahorro {
    margin-left: auto;
    color: var(--wa, #25D366);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}
.mc-kit-resumen .linea {
    margin: 6px 0 0;
    font: 500 12.5px/1.55 var(--font-text);
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Tira de miniaturas de la tarjeta compacta */
.mc-kit-resumen .miniaturas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mc-kit-resumen .miniatura {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid var(--line2);
    border-radius: 9px;
    overflow: hidden;
    background: var(--surface);
    font-size: 18px;
}
.mc-kit-resumen .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.mc-kit-resumen .miniatura .cantidad {
    position: absolute;
    right: 2px;
    bottom: 2px;
    min-width: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font: 800 9.5px/16px var(--font-display);
    text-align: center;
}
.mc-kit-resumen .miniatura.mas { font: 800 13px var(--font-display); color: var(--muted); }

/* Ficha completa: producto por producto */
.mc-kit-resumen .lista { margin: 10px 0 0; padding: 0; list-style: none; }
.mc-kit-resumen .lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}
.mc-kit-resumen .lista li:last-child { border-bottom: 0; }
.mc-kit-resumen .lista .miniatura { width: 52px; height: 52px; }
.mc-kit-resumen .lista .datos { flex: 1 1 auto; min-width: 0; }
.mc-kit-resumen .lista .nombre {
    display: block;
    font: 700 13px var(--font-text);
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.mc-kit-resumen .lista .nombre:hover { color: var(--accent); }
.mc-kit-resumen .lista .detalle {
    display: block;
    margin-top: 2px;
    font: 500 11.5px/1.45 var(--font-text);
    color: var(--muted);
    overflow-wrap: anywhere;
}
.mc-kit-resumen .lista .suelto { flex: none; text-align: right; white-space: nowrap; font: 700 13px var(--font-text); }
.mc-kit-resumen .lista .suelto del { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); }

/* De dónde sale el precio del kit */
.mc-kit-resumen .cuentas { margin-top: 10px; border-top: 1px solid var(--line2); padding-top: 8px; }
.mc-kit-resumen .cuentas .fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font: 600 12.5px var(--font-text);
    color: var(--muted);
}
.mc-kit-resumen .cuentas .rebaja span:last-child { color: var(--wa, #25D366); }
.mc-kit-resumen .cuentas .total { font: 800 15px var(--font-display); color: var(--text); padding-top: 6px; }

/* Lo que se ahorra en este pedido, en el panel de totales del carrito: es el
   dato que hace que un kit se lea como una ventaja y no como otro precio. */
.mc-carrito-ahorro {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--wa, #25D366) 14%, transparent);
    color: var(--wa, #25D366);
    font: 700 12.5px/1.4 var(--font-text);
    text-align: center;
}

/* Desglose del kit dentro del carrito: colapsado por omisión para que la
   línea no se estire, abierto de un toque para ver qué trae. */
.mc-kit-detalle { margin-top: 4px; }
.mc-kit-detalle > summary {
    cursor: pointer;
    font: 600 11.5px var(--font-text);
    color: var(--muted);
}
.mc-kit-detalle > summary:hover { color: var(--text); }
.mc-kit-detalle ul {
    margin: 6px 0 0;
    padding-left: 16px;
    font: 500 11.5px/1.7 var(--font-text);
    color: var(--muted);
}


/* ================= Diseños de KITS y PROMOCIONES =================
   Los estilos que puede elegir el negocio para las dos secciones de su
   página de ofertas (biblioteca de /superadmin/banners → /diseno).

   Viven aquí y no en el HTML del diseño porque el saneador solo admite un
   puñado de propiedades en `style=""` (nada de position, transform ni
   media queries): lo que da la forma —y sobre todo lo que hace que la
   pieza se reacomode en el teléfono— tiene que ser una clase. Así el
   SuperAdmin escribe HTML plano, el saneador no le borra nada y ningún
   diseño se rompe al bajar de 400px.

   Cada bloque es autónomo: agregar un cuarto diseño es agregar SU clase
   aquí y su receta en SeccionDisenoSeeder, sin tocar los demás. */

/* Piezas comunes a los diseños de kit y promoción -------------------- */
.mc-oferta-mosaico {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    background: var(--elev);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
/* Con una sola foto ocupa el cuadro entero: media retícula vacía se ve
   como un error, no como un diseño. */
.mc-oferta-mosaico > *:only-child { grid-column: span 2; grid-row: span 2; }
.mc-oferta-mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-oferta-mosaico.contain img { object-fit: contain; padding: 8%; }

/* Etiqueta de la oferta EN EL FLUJO. `.mc-badge-tag` no sirve aquí: está
   posicionada en absoluto para ir encima de una foto, y el saneador no deja
   corregirlo desde el HTML del diseño (no admite `position`). */
.mc-oferta-etiqueta {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font: 800 9.5px var(--font-display);
    letter-spacing: .8px;
    text-transform: uppercase;
}

.mc-oferta-precio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mc-oferta-precio .antes { font: 400 13px var(--font-text); color: var(--muted); text-decoration: line-through; }
.mc-oferta-precio .ahora { font: 900 clamp(22px, 3vw, 30px) var(--font-display); color: var(--accent); }
.mc-oferta-ahorro {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--wa, #25D366) 16%, transparent);
    color: var(--wa, #25D366);
    font: 800 11px var(--font-display);
    letter-spacing: .4px;
    text-transform: uppercase;
}
.mc-oferta-contiene { font: 500 12.5px/1.6 var(--font-text); color: var(--muted); overflow-wrap: anywhere; }

/* 1 · Kits «Vitrina»: tarjetas con mosaico de fotos ------------------ */
.mc-kits-vitrina { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.mc-kits-vitrina .kit {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radio-cards);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.mc-kits-vitrina .kit:hover { border-color: var(--accent); transform: translateY(-3px); }
.mc-kits-vitrina .cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 18px; flex: 1; }
.mc-kits-vitrina .nombre { font: 900 18px/1.2 var(--font-display); color: var(--text); text-transform: uppercase; }
.mc-kits-vitrina .pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* 2 · Kits «Tira»: una franja ancha por kit ------------------------- */
.mc-kits-tira { display: flex; flex-direction: column; gap: 18px; }
.mc-kits-tira .kit {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 220px);
    gap: 24px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radio-cards);
    background: linear-gradient(120deg, var(--surface), var(--elev));
}
.mc-kits-tira .kit:hover { border-color: var(--accent); }
.mc-kits-tira .mc-oferta-mosaico { border-radius: 14px; aspect-ratio: 16 / 10; }
.mc-kits-tira .nombre { font: 900 clamp(20px, 2.6vw, 26px)/1.1 var(--font-display); color: var(--text); text-transform: uppercase; }
.mc-kits-tira .compra { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@media (max-width: 900px) {
    .mc-kits-tira .kit { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* 3 · Kits «Cuenta clara»: sin foto grande, los números al frente ---- */
.mc-kits-cuenta { display: flex; flex-direction: column; gap: 12px; }
.mc-kits-cuenta .kit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    background: var(--surface);
}
.mc-kits-cuenta .datos { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mc-kits-cuenta .nombre { font: 800 16px/1.25 var(--font-text); color: var(--text); }
.mc-kits-cuenta .miniaturas { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-kits-cuenta .miniaturas img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--line2);
    background: var(--elev);
}
.mc-kits-cuenta .cuentas { flex: 0 1 auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; text-align: right; }
.mc-kits-cuenta .compra { flex: 0 0 auto; }

/* 4 · Promociones «Mosaico»: la rebaja mandando --------------------- */
.mc-promos-mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.mc-promos-mosaico .promo {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radio-cards);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.mc-promos-mosaico .promo:hover { border-color: var(--accent); transform: translateY(-3px); }
.mc-promos-mosaico .cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; }
.mc-promos-mosaico .rebaja {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font: 900 20px var(--font-display);
    letter-spacing: .5px;
}
.mc-promos-mosaico .nombre { font: 900 18px/1.2 var(--font-display); color: var(--text); text-transform: uppercase; }
.mc-promos-mosaico .pie { margin-top: auto; }

/* 5 · Promociones «Cinta»: el porcentaje enorme a la izquierda ------- */
.mc-promos-cinta { display: flex; flex-direction: column; gap: 14px; }
.mc-promos-cinta .promo {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, auto);
    gap: 20px;
    align-items: center;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radio-cards);
    background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 60%);
}
.mc-promos-cinta .promo:hover { border-color: var(--accent); }
.mc-promos-cinta .rebaja {
    font: 900 clamp(38px, 6vw, 58px)/1 var(--font-display);
    color: var(--accent);
    letter-spacing: -1px;
}
.mc-promos-cinta .nombre { font: 900 clamp(18px, 2.4vw, 24px)/1.15 var(--font-display); color: var(--text); text-transform: uppercase; }
.mc-promos-cinta .miniaturas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mc-promos-cinta .miniaturas img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line2);
    background: var(--elev);
}
@media (max-width: 767.98px) {
    .mc-promos-cinta .promo { grid-template-columns: minmax(0, 1fr); gap: 10px; text-align: left; }
}

/* 6 · Promociones «Boletos»: recorte de cupón ----------------------- */
.mc-promos-boletos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.mc-promos-boletos .promo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 2px dashed var(--line2);
    border-radius: 16px;
    background: var(--surface);
    text-align: center;
    transition: border-color .2s, transform .2s;
}
.mc-promos-boletos .promo:hover { border-color: var(--accent); transform: translateY(-3px); }
.mc-promos-boletos .sello {
    align-self: center;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font: 800 10.5px var(--font-display);
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.mc-promos-boletos .rebaja { font: 900 clamp(30px, 5vw, 42px)/1 var(--font-display); color: var(--text); }
.mc-promos-boletos .nombre { font: 800 14px/1.35 var(--font-text); color: var(--text); }
.mc-promos-boletos .corte { border-top: 1px dashed var(--line2); margin: 4px 0; }
@media (prefers-reduced-motion: reduce) {
    .mc-kits-vitrina .kit, .mc-promos-mosaico .promo, .mc-promos-boletos .promo { transition: none; }
}


.mc-tag-pedido {
    display: inline-block;
    margin-top: 4px;
    border-radius: 999px;
    background: rgba(232, 163, 61, .14);
    color: #E8A33D;
    font: 800 10px var(--font-display);
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 3px 9px;
}
.mc-quickadd .cerrar {
    margin-left: auto;
    align-self: flex-start;
    background: var(--elev);
    border: 1px solid var(--line2);
    color: var(--muted);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    flex: 0 0 34px;
}
.mc-quickadd .cerrar:hover { color: var(--text); border-color: var(--accent); }
.mc-quickadd .etiqueta { font: 800 10.5px var(--font-display); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.mc-quickadd .opciones { display: flex; flex-wrap: wrap; gap: 7px; }
.mc-quickadd .opciones .mc-chip.activo { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mc-quickadd .fila-final { display: flex; gap: 12px; align-items: stretch; margin-top: 22px; }
.mc-quickadd .mc-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--line2);
    border-radius: 12px;
    background: var(--elev);
    overflow: hidden;
    flex: 0 0 auto;
}
.mc-quickadd .mc-qty button { background: none; border: 0; color: var(--text); width: 40px; height: 46px; font: 800 18px var(--font-display); cursor: pointer; }
.mc-quickadd .mc-qty button:hover { color: var(--accent); }
.mc-quickadd .mc-qty input {
    width: 44px;
    background: none;
    border: 0;
    color: var(--text);
    text-align: center;
    font: 800 15px var(--font-display);
}
.mc-quickadd .btn-confirmar { flex: 1; }

/* ---------- Card de curso con miniatura ---------- */
.mc-curso .media {
    position: relative;
    height: 170px;
    overflow: hidden;
    border-radius: var(--radio-cards) 18px 0 0;
}
.mc-curso .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mc-curso:hover .media img { transform: scale(1.04); }
.mc-curso .media .velo { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55)); }
.mc-curso .con-media .fila-top { margin-bottom: 16px; }

/* ---------- Hero y galería: banners con CTA ---------- */
.mc-hero-media .pie .cta { margin-top: 12px; display: inline-flex; }
.mc-banner-galeria { position: relative; height: 280px; border-radius: var(--radio-cards); overflow: hidden; border: 1px solid var(--line); display: block; }
.mc-banner-galeria img, .mc-banner-galeria video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.mc-banner-galeria:hover img { transform: scale(1.03); }
.mc-banner-galeria .velo { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .8)); }
.mc-banner-galeria .cuerpo { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.mc-banner-galeria .cuerpo .kicker { font: 800 11px var(--font-display); letter-spacing: 2px; color: var(--accent); text-transform: uppercase; }
.mc-banner-galeria .cuerpo .titulo { font: 900 20px var(--font-display); color: #fff; text-transform: uppercase; margin-top: 2px; }
.mc-banner-galeria .cuerpo .cta { margin-top: 10px; }

/* ---------- Navegación anterior/siguiente (detalle de curso) ---------- */
.mc-nav-cursos { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mc-nav-cursos a {
    flex: 1 1 260px;
    border: 1px solid var(--line2);
    border-radius: 14px;
    background: var(--surface);
    padding: 14px 18px;
    text-decoration: none;
    transition: .15s;
}
.mc-nav-cursos a:hover { border-color: var(--accent); transform: translateY(-2px); }
.mc-nav-cursos .rotulo { font: 800 10px var(--font-display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.mc-nav-cursos .nombre { font: 800 14px var(--font-text); color: var(--text); margin-top: 3px; }
.mc-nav-cursos a.siguiente { text-align: right; }


/* ---------- Utilidades ---------- */
/* `minmax(0, 1fr)` y no `1fr`: `1fr` equivale a `minmax(auto, 1fr)`, cuyo
   mínimo es el CONTENIDO. Basta con un nombre de producto largo sin espacios
   («Cera-sintetica-de-larguisima-duracion…») para que la columna se niegue a
   encoger, la retícula crezca más que la pantalla y toda la página quede con
   scroll horizontal en el teléfono. Con mínimo 0 las columnas ceden y el
   texto se parte (ver .mc-producto .nombre). */
.mc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mc-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mc-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.mc-texto-acento { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .mc-grid-4, .mc-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .mc-nav { display: none; }
    /* Sin el menú, el renglón es logo · conmutador · carrito · hamburguesa:
       la marca pegada a la izquierda y los tres controles pegados a la
       derecha, que es donde cae el pulgar.

       El hueco libre lo absorbe el margen automático del logo, no su
       `flex-grow`: así el logo conserva su ancho natural (y sigue cediendo
       primero cuando falta sitio, por su `flex-shrink: 6`) y la separación
       queda de un solo lado en vez de repartirse entre los controles. */
    .mc-logo { flex: 0 6 auto; justify-content: flex-start; margin-right: auto; }
    /* Y los tres controles miden lo mismo (42 px): conmutador, carrito y
       hamburguesa forman una línea pareja en vez de tres alturas distintas. El
       conmutador estira su enlace en lugar de crecer por dentro, así el
       rótulo sigue centrado y la pasada del nombre largo no se mueve. */
    .mc-switch { min-height: 42px; align-items: stretch; }
    .mc-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .mc-burger { display: none; }
}
/* Entre 992 y 1279 px el menú necesita cada píxel: el botón de WhatsApp del
   encabezado cede el sitio (sigue el botón flotante y el del pie) y el logo
   acepta un tope menor. El menú es navegación; el botón, un atajo. */
@media (max-width: 1279.98px) {
    .mc-header .btn-mc.solo-desktop { display: none; }
    .mc-logo { --mc-logo-ancho: 128px; }
    .mc-switch a { max-width: min(22vw, 220px); padding: 7px 12px; }
    .mc-nav .mc-menu > li > a { padding-left: 7px; padding-right: 7px; }
}

/* Sin el menú de navegación, el renglón es logo + conmutador + carrito: el
   botón se aprieta un poco y el nombre de la marca pierde espaciado entre
   letras para que entre entero. */
@media (max-width: 991.98px) {
    .mc-switch a {
        max-width: min(44vw, 300px);
        gap: 4px;
        padding: 7px 10px;
        font-size: 10px;
        /* Menos espaciado entre letras: con .5 px, doce caracteres se comían
           justo el ancho que faltaba para que el nombre entrara entero. */
        letter-spacing: .15px;
    }
    .mc-switch .ir { font-size: 9px; }
    /* Sin menú no hay nada que se recorra al cambiar de mundo, así que la caja
       del logo vuelve a ser elástica y él se centra en el hueco libre. Va aquí
       —y no en el bloque de 991 px de más arriba— porque el tope de 128 px de
       la regla de 1279 px se declara en medio y ganaría por orden. */
    .mc-logo { --mc-logo-ancho: auto; }
    /* Anclado a la izquierda, como en escritorio: ahora que el logo abre el
       renglón, centrarlo dentro de su caja abría un hueco entre el borde de la
       pantalla y la marca. Se centraba cuando el logo ocupaba el hueco libre
       del renglón; eso ya no pasa. */
    .mc-logo img { width: auto; max-width: 34vw; object-position: left center; }
    /* Tope al TEXTO de la marca (cuando el negocio no tiene logo en imagen):
       sin esto el bloque de texto crece y se come el ancho que necesita el
       botón de cambio —llegó a dejar el rótulo en 8 px—. La imagen tiene su
       propio tope más abajo y, si aun así falta sitio, encoge completa. */
    .mc-logo .nombre, .mc-logo .tag { max-width: 34vw; }
}

@media (max-width: 767px) {
    .mc-grid-2, .mc-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .mc-grid-4, .mc-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mc-hero h1 { letter-spacing: -1px; }
    .mc-stats { gap: 16px; }
    .mc-header .solo-desktop { display: none; }

    /* Topes en vw para logo y conmutador. Suman más de lo que cabe a propósito:
       casi nunca los dos llegan a su tope a la vez, y cuando falta sitio el
       reparto del renglón lo resuelve —primero cede el logo, luego el botón—
       sin que ninguno empuje al carrito fuera de la pantalla. Un nombre más
       largo que su tope no se corta: se lee entero con la pasada de `.recorta`. */
    .mc-switch a { max-width: min(46vw, 260px); min-width: 92px; padding: 7px 9px; font-size: 10px; }
    /* Piso del logo: con una marca de nombre largo el reparto lo dejaba en
       40 px —ilegible—. Antes de llegar ahí, el que empieza a ceder es el
       botón, que tiene la pasada de `.recorta` para leerse completo. */
    .mc-logo { min-width: 64px; }
    /* En móvil el logo casi no se veía (28 px). Sube a 58 sin ensanchar la
       fila gracias a los márgenes negativos. */
    .mc-logo img { height: 58px; width: auto; max-width: 34vw; margin-block: -15px; }
    .mc-logo .nombre, .mc-logo .tag { max-width: 32vw; }

    /* La mascota SÍ se muestra en móvil (es donde está la mayoría del tráfico):
       muñeco compacto abajo-izquierda —el botón de WhatsApp vive abajo-derecha,
       así que no se estorban— y burbuja al ancho disponible. */
    .mc-sparky { left: 14px; bottom: 14px; max-width: calc(100vw - 96px); }
    .mc-sparky .burbuja { max-width: calc(100vw - 40px); padding: 13px 15px; }
    .mc-sparky .burbuja .tip { font-size: 13px; }
    .mc-sparky .muneco svg,
    .mc-sparky .muneco img { width: 104px; height: 130px; }
    /* En el teléfono se retira un poco más: hay menos ancho que repartir. */
    .mc-sparky.asomada .muneco { transform: translateX(-66%); }
    @keyframes mcAsomar {
        0%, 62%, 100% { transform: translateX(-66%) translateY(0); }
        70% { transform: translateX(-62%) translateY(-8px); }
        77% { transform: translateX(-62%) translateY(0); }
        84% { transform: translateX(-62%) translateY(-4px); }
        91% { transform: translateX(-62%) translateY(0); }
    }
}
@media (max-width: 480px) {
    .mc-contenedor { padding-left: 16px; padding-right: 16px; }
    /* Una `.row` de Bootstrap se sale con márgenes negativos de la mitad de su
       canalón (`g-5` = 48 px → -24 px). Si eso supera el padding del
       contenedor, la página entera queda con scroll horizontal. Se limita el
       canalón para que nunca pase del padding disponible. */
    .mc-contenedor .row { --bs-gutter-x: 2rem; }
    .mc-header .fila { gap: 10px; }
    .mc-logo .tag { display: none; }
    .mc-logo img { height: 56px; margin-block: -14px; }
    .mc-switch a { padding: 6px 10px; font-size: 9.5px; }
}
@media (max-width: 359.98px) {
    .mc-contenedor { padding-left: 12px; padding-right: 12px; }
    /* Por debajo de 360 px, dos columnas dejan tarjetas de ~136 px: el botón
       de agregar ya no cabe y el nombre se vuelve ilegible. Una columna. */
    .mc-grid-4, .mc-grid-5 { grid-template-columns: minmax(0, 1fr); }
    .mc-contenedor .row { --bs-gutter-x: 1.5rem; }
    .mc-header .fila { gap: 6px; }
    .mc-logo img { height: 48px; max-width: 32vw; margin-block: -12px; }
    .mc-switch { padding: 2px; }
    .mc-switch a { padding: 5px 8px; font-size: 9px; max-width: min(44vw, 220px); min-width: 84px; }
    .mc-logo { min-width: 56px; }
    .mc-icono-carrito { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-marquee .pista, .mc-sparky .muneco, .btn-mc.pulso { animation: none; }
    .mc-sparky.asomada .muneco { animation: none; }
}

/* Impresión */
@media print {
    .mc-header, .mc-nav, .mc-footer, .mc-sparky, .mc-whatsapp-flotante, .mc-cart-drawer, .mc-offcanvas, .mc-barra-compra { display: none !important; }
    body.mc-site { background: #fff; color: #000; }
}

/* ============================================================
   Catálogo 2026: chips con scroll horizontal, sugerencias de
   búsqueda en vivo y scroll infinito (ver mc.js).
   ============================================================ */
.mc-chips-fila {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}
.mc-chips-fila::-webkit-scrollbar { display: none; }
.mc-chips-fila.arrastrando { cursor: grabbing; user-select: none; }
.mc-chips-fila .mc-chip { flex: 0 0 auto; }
/* Respaldo del preventDefault() de mc.js: sin esto el navegador levanta el
   enlace (o su imagen) como si se fuera a soltar en otro sitio, en vez de
   desplazar la fila. Aplica a cualquier tira arrastrable. */
.mc-chips-fila a,
.mc-chips-fila img,
[data-mc-carrusel] a,
[data-mc-carrusel] img { -webkit-user-drag: none; user-select: none; }

.mc-producto .thumb-vacio { font-size: 42px; opacity: .35; }

/* Panel de sugerencias del buscador */
.mc-sugerencias {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 14px;
    box-shadow: 0 26px 54px -18px #000;
    padding: 14px;
    max-height: min(430px, 60vh);
    overflow-y: auto;
    text-align: left;
}
.mc-sugerencias .grupo {
    font: 800 10.5px var(--font-display, Archivo);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 10px 0 8px;
}
.mc-sugerencias .grupo:first-child { margin-top: 0; }
.mc-sugerencias .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-sugerencias .producto {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
}
.mc-sugerencias .producto:hover { background: var(--elev); }
.mc-sugerencias .producto img,
.mc-sugerencias .producto .sin-foto {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--elev);
    border: 1px solid var(--line);
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-sugerencias .producto .nombre { font: 700 13.5px var(--font-text, Manrope); }
.mc-sugerencias .producto .meta { color: var(--muted); font-size: 11.5px; }
.mc-sugerencias .producto .precio { margin-left: auto; font: 800 13px var(--font-display, Archivo); color: var(--accent); white-space: nowrap; }
.mc-sugerencias .sin-resultados { color: var(--muted); font-size: 13px; padding: 6px 2px; }

/* Loader del scroll infinito */
.mc-catalogo-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
    font: 700 13px var(--font-text, Manrope);
    padding: 26px 0;
}
.mc-catalogo-cargando .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--line2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: mcGirar .8s linear infinite;
}
@keyframes mcGirar { to { transform: rotate(360deg); } }
#catalogo-secciones.mc-cargando { opacity: .45; pointer-events: none; transition: opacity .15s; }
/* Las OTRAS categorías de lo que hay en el bloque. Va pegada al título, con
   menos peso: aclara, no compite. */
.catalogo-seccion .mc-seccion-tambien {
    margin: -14px 0 20px;
    font: 600 12.5px var(--font-text);
    color: var(--muted);
}
.catalogo-seccion .mc-seccion-tambien a {
    color: var(--text);
    border-bottom: 1px solid var(--line2);
    padding-bottom: 1px;
}
.catalogo-seccion .mc-seccion-tambien a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   Slider genérico [data-mc-slider]: autoplay + flechas + puntos
   ============================================================ */
.mc-slider { position: relative; height: 100%; overflow: hidden; }
.mc-slider .pista {
    display: flex;
    height: 100%;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.mc-slider .slide { position: relative; flex: 0 0 100%; min-width: 100%; }
.mc-slider .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(8, 8, 10, .55);
    color: #fff;
    backdrop-filter: blur(6px);
    font: 700 20px/1 var(--font-display, Archivo);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 0 3px;
    transition: .15s;
}
.mc-slider .nav:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.mc-slider .nav.prev { left: 12px; }
.mc-slider .nav.next { right: 12px; }
.mc-slider .puntos {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
    z-index: 6;
}
.mc-slider .puntos button {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    border: none;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    padding: 0;
    transition: .25s;
}
.mc-slider .puntos button.activo { width: 22px; background: var(--accent); }
@media (max-width: 575.98px) {
    .mc-slider .nav { width: 32px; height: 32px; font-size: 17px; }
}

/* Hero del home: puntos arriba a la derecha (el pie ocupa la base) */
.mc-hero-media .mc-slider .puntos {
    top: 14px;
    right: 14px;
    left: auto;
    bottom: auto;
    justify-content: flex-end;
}
.mc-hero-media .mc-slider .slide { height: 100%; }

/* Hero de The Shop: carrusel de productos destacados */
.mc-hero-producto {
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 20px;
    box-shadow: 0 40px 80px -30px #000;
    overflow: hidden;
}
.mc-hero-producto .slide { padding: 20px; }
.mc-hero-producto .visor {
    position: relative;
    height: 230px;
    border-radius: 14px;
    background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%), var(--elev);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 12px;
}
.mc-hero-producto .visor img {
    max-height: 200px;
    max-width: 85%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 40px rgba(0, 0, 0, .55));
}
.mc-hero-producto .marca {
    font: 700 10px var(--font-display, Archivo);
    letter-spacing: 1px;
    color: var(--muted);
    text-transform: uppercase;
}
.mc-hero-producto .nombre {
    font: 700 13px var(--font-text, Manrope);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-hero-producto .precio { font: 900 18px var(--font-display, Archivo); color: var(--accent); margin-top: 4px; }
.mc-hero-producto .mc-slider .puntos {
    top: 22px;
    right: 20px;
    left: auto;
    bottom: auto;
    justify-content: flex-end;
}
.mc-hero-producto .mc-slider .puntos button { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.mc-hero-producto .mc-slider .puntos button.activo { background: var(--accent); }
.mc-hero-producto .mc-slider .nav {
    opacity: 0;
    transition: opacity .2s, background .15s;
}
.mc-hero-producto:hover .mc-slider .nav { opacity: 1; }
.min-width-0 { min-width: 0; }

/* ============================================================
   Cursos y Training Center v2: cards con imagen de fondo completa
   ============================================================ */
.mc-curso-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line2);
    background: var(--surface);
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.mc-curso-v2:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 34px 70px -34px #000;
}
.mc-curso-v2 .fondo { position: absolute; inset: 0; }
.mc-curso-v2 .fondo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mc-curso-v2:hover .fondo img { transform: scale(1.05); }
.mc-curso-v2 .fondo .glyph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 74px;
    opacity: .18;
    background: radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%), var(--elev);
}
.mc-curso-v2 .velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .38) 45%, rgba(3, 3, 5, .93) 100%);
}
.mc-curso-v2 .tope {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    z-index: 2;
}
.mc-curso-v2 .nivel {
    background: var(--accent);
    color: var(--on-accent, #fff);
    font: 800 10px var(--font-display, Archivo);
    letter-spacing: .6px;
    padding: 6px 11px;
    border-radius: 99px;
    text-transform: uppercase;
}
.mc-curso-v2 .fecha {
    background: rgba(8, 8, 10, .6);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    color: #fff;
    font: 700 11px var(--font-display, Archivo);
    padding: 6px 11px;
    border-radius: 99px;
    white-space: nowrap;
}
.mc-curso-v2 .cuerpo { position: relative; z-index: 2; padding: 22px; }
.mc-curso-v2 .kicker {
    font: 700 10.5px var(--font-display, Archivo);
    letter-spacing: 1.6px;
    color: var(--accent);
    text-transform: uppercase;
}
.mc-curso-v2 h3 {
    font: 900 clamp(20px, 2.2vw, 26px)/1.05 var(--font-display, Archivo);
    color: #fff;
    margin: 8px 0 0;
    text-transform: uppercase;
}
.mc-curso-v2 p {
    font: 500 13px/1.55 var(--font-text, Manrope);
    color: rgba(255, 255, 255, .78);
    margin: 10px 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mc-curso-v2 .pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.mc-curso-v2 .precio { font: 900 20px var(--font-display, Archivo); color: #fff; }
.mc-curso-v2 .precio .nota { font: 600 11px var(--font-text, Manrope); color: rgba(255, 255, 255, .6); margin-left: 4px; }
.mc-curso-v2 .cta {
    font: 800 12px var(--font-display, Archivo);
    color: var(--accent);
    white-space: nowrap;
    transition: transform .2s;
}
.mc-curso-v2:hover .cta { transform: translateX(4px); }
.mc-curso-extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.mc-curso-extras .extra {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 18px;
}
.mc-curso-extras .icono {
    flex: 0 0 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 16%, var(--elev));
    font-size: 19px;
}
.mc-curso-extras .titulo { font: 800 13px var(--font-display, Archivo); }
.mc-curso-extras .texto { font: 500 12.5px var(--font-text, Manrope); color: var(--muted); margin-top: 2px; }
@media (max-width: 575.98px) {
    .mc-curso-v2 { min-height: 320px; }
}

/* ============================================================
   Redes sociales (sección pública): grid con autoplay y
   expansión a pantalla completa al tocar una publicación.
   ============================================================ */
.mc-social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 991px) { .mc-social-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .mc-social-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.mc-social-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radio-cards);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 0;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mc-social-item:hover,
.mc-social-item:focus-visible {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}
.mc-social-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mc-social-item img,
.mc-social-item video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.mc-social-item:hover img,
.mc-social-item:hover video { transform: scale(1.04); }
.mc-social-item iframe {
    width: 100%; height: 100%;
    border: 0; display: block;
    pointer-events: none; /* el clic expande; dentro del lightbox sí es interactivo */
    background: #000;
}
.mc-social-item .velo {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, transparent 45%);
    pointer-events: none;
}
.mc-social-item .red {
    position: absolute; top: 10px; left: 10px;
    font: 800 10px var(--font-display);
    letter-spacing: .5px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #fff;
}
.mc-social-item .red.instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.mc-social-item .red.tiktok { background: #000; border: 1px solid rgba(255, 255, 255, .35); }
.mc-social-item .pie {
    position: absolute; left: 12px; right: 12px; bottom: 10px;
    font: 700 12px/1.35 var(--font-body, Manrope);
    color: #fff;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mc-social-item .expandir {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: rgba(0, 0, 0, .55);
    color: #fff; font-size: 15px;
    opacity: 0; transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
}
.mc-social-item:hover .expandir,
.mc-social-item:focus-visible .expandir { opacity: 1; transform: none; }

/* Lightbox a pantalla completa */
.mc-social-lightbox {
    position: fixed; inset: 0;
    z-index: 200;
    background: rgba(5, 5, 7, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.mc-social-lightbox.abierto { opacity: 1; pointer-events: auto; }
.mc-social-lightbox .caja {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: min(560px, 94vw);
    width: 100%;
    max-height: 94vh;
    transform: scale(.94);
    transition: transform .25s ease;
}
.mc-social-lightbox.abierto .caja { transform: none; }
.mc-social-lightbox .media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-social-lightbox .media img,
.mc-social-lightbox .media video {
    max-width: 100%;
    max-height: min(76vh, 900px);
    width: auto; height: auto;
    display: block;
}
.mc-social-lightbox .media iframe {
    width: min(94vw, 400px);
    height: min(76vh, 620px);
    border: 0;
    background: #000;
}
.mc-social-lightbox .cerrar {
    position: absolute; top: 14px; right: 14px;
    z-index: 2;
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .55);
    color: #fff; font-size: 17px;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.mc-social-lightbox .cerrar:hover { background: var(--accent); transform: rotate(90deg); }
.mc-social-lightbox .pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.mc-social-lightbox .pie .titulo { font: 700 14px/1.4 var(--font-body, Manrope); color: #fff; }
.mc-social-lightbox .pie .titulo .kicker { display: block; font: 800 10px var(--font-display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }

/* ============================================================
   Micro-interacciones globales del sitio público
   ============================================================ */

/* Revelado al hacer scroll (IntersectionObserver en mc.js) */
.mc-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.mc-reveal.visible { opacity: 1; transform: none; }

/* CTAs: barrido de brillo al pasar el cursor + presión al tocar */
.btn-mc, .btn-mc-ghost, .btn-mc-wa { position: relative; overflow: hidden; }
.btn-mc::after, .btn-mc-wa::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
    pointer-events: none;
}
.btn-mc:hover::after, .btn-mc-wa:hover::after { left: 130%; }
.btn-mc:active, .btn-mc-ghost:active, .btn-mc-wa:active { transform: scale(.96); }
.btn-mc:focus-visible, .btn-mc-ghost:focus-visible, .btn-mc-wa:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.btn-mc-ghost:hover { transform: translateY(-1px); }

/* Switch Garage/The Shop: pista viva para que el navegante lo descubra */
.mc-switch { transition: border-color .2s ease, box-shadow .2s ease; }
.mc-switch:hover { border-color: var(--accent); }
.mc-switch a { transition: color .15s ease, transform .15s ease; }
.mc-switch a:hover { color: var(--accent); transform: translateY(-1px); }
.mc-switch a:active { transform: scale(.95); }
.mc-switch.atencion { animation: mcSwitchGlow 2.4s ease 2; }
@keyframes mcSwitchGlow {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 22px 2px var(--glow); border-color: var(--accent); }
}

/* Transición de salida de página (mc.js → transiciones):
   el contenido hace fade-out breve antes de navegar a otra URL interna */
body.mc-saliendo main.mc-anim-page {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .16s ease, transform .16s ease;
}

/* Parallax del glow del hero (mc.js → parallaxHero) */
.mc-hero .fondo-glow { transition: transform .25s ease-out; will-change: transform; }

/* Micro-interacción de tarjetas: la imagen respira al pasar el cursor */
.mc-producto .thumb img, .mc-cat-card, .mc-card-blog .portada img { transition: transform .35s ease; }
.mc-producto:hover .thumb img, .mc-card-blog:hover .portada img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
    .mc-reveal { opacity: 1; transform: none; transition: none; }
    .mc-switch.atencion { animation: none; }
    .btn-mc::after, .btn-mc-wa::after { display: none; }
    .mc-social-item, .mc-social-item img, .mc-social-item video { transition: none; }
    body.mc-saliendo main.mc-anim-page { opacity: 1; transform: none; transition: none; }
    .mc-hero .fondo-glow { transition: none; }
    .mc-producto:hover .thumb img, .mc-card-blog:hover .portada img { transform: none; }
    [data-parallax] { transform: none !important; }
}

/* Círculos de color para variantes (quick-add y detalle) */
.mc-color-opt {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--line2); cursor: pointer; padding: 0;
    box-shadow: inset 0 0 0 2px var(--surface);
    transition: transform .12s, border-color .12s;
}
.mc-color-opt:hover { transform: scale(1.12); }
.mc-color-opt.activo { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--accent); }

.mc-det-colores { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   Sistema de templates — variantes configurables por bloque
   (hero.estilo, banners.galeria_estilo; ver TemplateService)
   ============================================================ */

/* Hero «completo»: media de fondo a lo ancho + texto centrado en overlay */
.mc-hero.estilo-completo { min-height: 540px; display: flex; align-items: center; }
.mc-hero.estilo-completo .mc-hero-media.fondo-completo {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
    opacity: .38;
}
.mc-hero.estilo-completo .mc-hero-media.fondo-completo .pie { display: none; }
.mc-hero.estilo-completo .contenido { width: 100%; }

/* Texto centrado (estilos completo y minimal) */
.mc-hero .texto-centrado { max-width: 760px; margin: 0 auto; text-align: center; }
.mc-hero .texto-centrado .bajada { margin-left: auto; margin-right: auto; }
.mc-hero .texto-centrado .cta-fila { justify-content: center; }
.mc-hero .texto-centrado .mc-stats { justify-content: center; }

/* Hero «minimal»: solo texto, glow más sutil */
.mc-hero.estilo-minimal .fondo-glow { opacity: .55; }

/* Galería en lista (1 columna a lo ancho) */
.mc-grid-1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.mc-grid-1 .mc-banner-galeria { aspect-ratio: 21 / 9; }

/* ============================================================
   TRAINING CENTER — catálogo de cursos, cupo, lightbox y
   navegación entre cursos (flujo de compra/reservación 2026)
   ============================================================ */

/* --- Indicador de cupo: verde amplio, ámbar últimos lugares, rojo agotado --- */
.mc-cupo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 800 11px var(--font-display);
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: rgba(8, 8, 10, .55);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}
.mc-cupo::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
}
.mc-cupo.amplio { color: #25D366; }
.mc-cupo.pocos { color: #FFB020; }
.mc-cupo.pocos::before { animation: cupoLatido 1.6s ease-out infinite; }
.mc-cupo.agotado { color: var(--accent); }
.mc-cupo.solido { background: var(--elev); border-color: var(--line2); }
@keyframes cupoLatido {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70% { box-shadow: 0 0 0 7px transparent; opacity: .75; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .mc-cupo.pocos::before { animation: none; } }

/* Barra de ocupación (detalle del curso) */
.mc-cupo-barra { height: 6px; border-radius: 999px; background: var(--elev); overflow: hidden; margin-top: 10px; }
.mc-cupo-barra span { display: block; height: 100%; border-radius: 999px; background: #25D366; transition: width .6s ease; }
.mc-cupo-barra.pocos span { background: #FFB020; }
.mc-cupo-barra.agotado span { background: var(--accent); }

/* --- Cabecera del Training Center --- */
.mc-training-head .cuerpo { padding-bottom: 26px; }
.mc-training-head .bajada { font: 500 15px/1.6 var(--font-text); color: var(--muted); max-width: 620px; margin: 14px 0 0; }
.mc-training-filtros {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 4px 0 10px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.mc-training-filtros::-webkit-scrollbar { display: none; }
.mc-training-filtros .mc-chip { scroll-snap-align: center; }

/* --- Card de curso del catálogo: hereda mc-curso-v2 y suma parallax + CTA --- */
.mc-curso-v2.mc-curso-catalogo { min-height: 430px; }
.mc-curso-v2 .fondo.con-parallax { overflow: hidden; }
.mc-curso-v2 .fondo.con-parallax img {
    position: absolute;
    top: -13%;
    left: 0;
    width: 100%;
    height: 126%;
    will-change: transform;
}
/* Tarjeta entera clicleable (mc.js → tarjetasEnlace): el cursor lo anuncia
   en toda la caja, no solo sobre el título. */
[data-tarjeta-enlace] { cursor: pointer; }
.mc-curso-v2 .acciones { display: flex; gap: 8px; margin-top: 14px; }
.mc-curso-v2 .acciones .btn-mc,
.mc-curso-v2 .acciones .btn-mc-ghost { flex: 1; justify-content: center; text-align: center; }
.mc-curso-v2 .tope .mc-cupo { font-size: 10px; padding: 5px 10px; }

/* Entrada escalonada del catálogo (además del reveal global) */
.mc-curso-oculto { display: none !important; }

/* --- Galería del curso: tira arrastrable con chevrons --- */
.mc-galeria-curso { position: relative; }
.mc-galeria-curso .pista {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
    cursor: grab;
}
.mc-galeria-curso .pista::-webkit-scrollbar { display: none; }
.mc-galeria-curso .pista.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.mc-galeria-curso .foto {
    position: relative;
    flex: 0 0 clamp(240px, 32%, 340px);
    height: 240px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--elev);
    scroll-snap-align: start;
    cursor: zoom-in;
    padding: 0;
    transition: border-color .2s, transform .25s;
}
.mc-galeria-curso .foto:hover { border-color: var(--accent); transform: translateY(-3px); }
.mc-galeria-curso .foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.mc-galeria-curso .foto:hover img { transform: scale(1.06); }
.mc-galeria-curso .foto .lupa {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(8, 8, 10, .62);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: opacity .2s;
}
.mc-galeria-curso .foto:hover .lupa, .mc-galeria-curso .foto:focus-visible .lupa { opacity: 1; }
.mc-galeria-curso .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(8, 8, 10, .72);
    border: 1px solid var(--line2);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 3;
    transition: background .15s, opacity .2s, border-color .15s;
}
.mc-galeria-curso .nav:hover { background: var(--accent); border-color: var(--accent); }
.mc-galeria-curso .nav.prev { left: -6px; }
.mc-galeria-curso .nav.next { right: -6px; }
.mc-galeria-curso .nav[hidden] { display: none; }
@media (max-width: 767.98px) {
    .mc-galeria-curso .foto { flex-basis: 78%; height: 210px; }
    .mc-galeria-curso .nav { display: none; }
}

/* --- Lightbox con zoom y arrastre (galería y portada del curso) --- */
.mc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 4, 6, .94);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
    touch-action: none;
    overscroll-behavior: contain;
}
.mc-lightbox.abierto { opacity: 1; visibility: visible; }
.mc-lightbox .escenario {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-lightbox .lienzo {
    max-width: 92vw;
    max-height: 84vh;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
    transform-origin: center center;
    will-change: transform;
    border-radius: 10px;
    box-shadow: 0 40px 90px -30px #000;
}
.mc-lightbox .lienzo.acercado { cursor: grab; }
.mc-lightbox .lienzo.moviendo { cursor: grabbing; transition: none !important; }
.mc-lightbox .barra {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    z-index: 4;
    background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent);
}
.mc-lightbox .contador { font: 800 12px var(--font-display); color: rgba(255, 255, 255, .78); letter-spacing: 1px; }
.mc-lightbox .herramientas { display: flex; gap: 8px; }
.mc-lightbox .boton {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font: 700 17px var(--font-display);
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.mc-lightbox .boton:hover { background: var(--accent); transform: translateY(-1px); }
.mc-lightbox .flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 4;
    transition: background .15s, transform .15s;
}
.mc-lightbox .flecha:hover { background: var(--accent); }
.mc-lightbox .flecha.prev { left: 18px; }
.mc-lightbox .flecha.next { right: 18px; }
.mc-lightbox .pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px;
    text-align: center;
    font: 600 13px var(--font-text);
    color: rgba(255, 255, 255, .8);
    background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
    z-index: 4;
}
@media (max-width: 767.98px) {
    .mc-lightbox .flecha { width: 44px; height: 44px; font-size: 20px; }
    .mc-lightbox .flecha.prev { left: 8px; }
    .mc-lightbox .flecha.next { right: 8px; }
    .mc-lightbox .lienzo { max-width: 96vw; max-height: 78vh; }
}

/* --- Navegación entre cursos: paneles inmersivos con foto + parallax --- */
.mc-nav-cursos.v2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
/* Un solo curso al que saltar: se lleva todo el ancho en vez de dejar el
   hueco del que no existe, y crece un poco porque ya no compite con nadie. */
.mc-nav-cursos.v2.solo-uno { grid-template-columns: 1fr; }
.mc-nav-cursos.v2.solo-uno a { min-height: 230px; }
.mc-nav-cursos.v2 a {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 170px;
    padding: 22px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line2);
    background: var(--surface);
    text-decoration: none;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.mc-nav-cursos.v2 a:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 30px 60px -32px #000; }
.mc-nav-cursos.v2 .fondo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.mc-nav-cursos.v2 .fondo img {
    position: absolute;
    top: -14%;
    left: 0;
    width: 100%;
    height: 128%;
    object-fit: cover;
    opacity: .5;
    will-change: transform;
    transition: opacity .3s;
}
.mc-nav-cursos.v2 a:hover .fondo img { opacity: .68; }
.mc-nav-cursos.v2 .velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(4, 4, 6, .92), rgba(4, 4, 6, .55) 65%, rgba(4, 4, 6, .35));
}
.mc-nav-cursos.v2 a.siguiente .velo { background: linear-gradient(270deg, rgba(4, 4, 6, .92), rgba(4, 4, 6, .55) 65%, rgba(4, 4, 6, .35)); }
.mc-nav-cursos.v2 .contenido { position: relative; z-index: 2; }
.mc-nav-cursos.v2 .rotulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 800 10.5px var(--font-display);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
}
.mc-nav-cursos.v2 .flecha {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 14px;
    transition: transform .25s ease;
}
.mc-nav-cursos.v2 .nombre { font: 900 clamp(17px, 2vw, 22px)/1.1 var(--font-display); color: #fff; text-transform: uppercase; margin-top: 8px; }
.mc-nav-cursos.v2 .meta { font: 600 12px var(--font-text); color: rgba(255, 255, 255, .7); margin-top: 6px; }
.mc-nav-cursos.v2 a:hover .flecha { transform: translateX(-4px); }
.mc-nav-cursos.v2 a.siguiente { text-align: right; align-items: flex-end; }
.mc-nav-cursos.v2 a.siguiente:hover .flecha { transform: translateX(4px); }
/* Los textos y flechas entran al aparecer el bloque (IntersectionObserver) */
.mc-nav-cursos.v2 .contenido > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .45s ease;
}
.mc-nav-cursos.v2.visible .contenido > * { opacity: 1; transform: none; }
.mc-nav-cursos.v2.visible .rotulo { transition-delay: .05s; }
.mc-nav-cursos.v2.visible .nombre { transition-delay: .12s; }
.mc-nav-cursos.v2.visible .meta { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
    .mc-nav-cursos.v2 .contenido > * { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 640px) {
    .mc-nav-cursos.v2 { grid-template-columns: 1fr; }
    .mc-nav-cursos.v2 a { min-height: 140px; }
}

/* --- Bloque de inscripción del detalle: comprar / apartar --- */
.mc-inscripcion .opciones { display: grid; gap: 10px; margin-top: 16px; }
.mc-inscripcion .opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--elev);
    cursor: pointer;
    transition: border-color .18s, background .18s;
}
.mc-inscripcion .opcion:hover { border-color: var(--line2); }
.mc-inscripcion .opcion.activa { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--elev)); }
.mc-inscripcion .opcion input { accent-color: var(--accent); width: 17px; height: 17px; flex: 0 0 auto; }
.mc-inscripcion .opcion .titulo { font: 800 13px var(--font-display); color: var(--text); }
.mc-inscripcion .opcion .detalle { font: 500 12px var(--font-text); color: var(--muted); margin-top: 2px; }
.mc-inscripcion .opcion .monto { margin-left: auto; font: 900 18px var(--font-display); color: var(--accent); white-space: nowrap; }
.mc-inscripcion .lugares { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.mc-inscripcion .lugares span { font: 700 12.5px var(--font-text); color: var(--muted); }

/* Portada del curso ampliable: <button> que conserva el diseño de .mc-hero-media */
.mc-hero-media.ampliable {
    display: block;
    width: 100%;
    padding: 0;
    background: var(--elev);
    cursor: zoom-in;
    transition: border-color .2s, transform .25s;
}
.mc-hero-media.ampliable:hover { border-color: var(--accent); }
.mc-hero-media.ampliable:hover img { transform: scale(1.03); }
.mc-hero-media.ampliable img { transition: transform .5s ease; }

/* ============================================================
   Pagos, meses sin intereses y compra directa
   ============================================================ */

/* ---------- Badge «12 MSI» sobre la foto ----------
   Va abajo-izquierda para no pelearse con el badge de promoción
   (arriba-derecha) ni con la etiqueta de marca (arriba-izquierda). */
.mc-badge-msi {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    background: color-mix(in srgb, var(--wa) 92%, #000);
    color: var(--on-wa);
    font: 800 10px var(--font-display);
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 999px;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8);
    pointer-events: none;
}
.mc-badge-msi.grande { left: 16px; bottom: 16px; font-size: 11px; padding: 7px 12px; }
.mc-producto .thumb { position: relative; }

/* ---------- Comprar ahora en la tarjeta del catálogo ---------- */
.mc-comprar-ya {
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radio-botones);
    background: var(--accent);
    color: var(--on-accent);
    font: 800 12px var(--font-display);
    letter-spacing: .4px;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.mc-comprar-ya:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mc-comprar-ya[disabled] { opacity: .6; cursor: progress; }

/* ---------- Botonera del detalle ---------- */
.mc-det-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.mc-det-acciones .btn-mc,
.mc-det-acciones .btn-mc-ghost { flex: 1 1 180px; text-align: center; }
.mc-det-acciones [data-det-whatsapp] { flex: 0 0 auto; }

/* ---------- Galería repetida al pie de la ficha ---------- */
.mc-galeria-larga { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mc-galeria-larga figure {
    margin: 0;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: var(--radio-cards);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mc-galeria-larga img { max-width: 88%; max-height: 88%; object-fit: contain; }

/* ---------- Barra de compra fija ----------
   Móvil: siempre visible. Escritorio: aparece al perder de vista el botón
   principal. El WhatsApp flotante se sube para no encimarse (ver abajo). */
.mc-barra-compra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line2);
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .9);
    padding: 10px 0;
    animation: mcBarraSube .22s ease;
    /* Igual que la barra del curso: al final de la página se sube y deja ver
       el pie completo (mc.js → barrasSobreFooter). */
    transform: translate3d(0, calc(var(--mc-sobre-pie, 0px) * -1), 0);
}
@keyframes mcBarraSube {
    from { transform: translateY(100%); }
    to { transform: translate3d(0, calc(var(--mc-sobre-pie, 0px) * -1), 0); }
}
.mc-barra-compra .cuerpo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mc-barra-compra .info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mc-barra-compra .info img { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: var(--bg); padding: 4px; flex-shrink: 0; }
.mc-barra-compra .nombre {
    font: 700 13px var(--font-text);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-barra-compra .precio { font: 900 17px var(--font-display); color: var(--accent); }
.mc-barra-compra .precio span { font: 600 11px var(--font-text); color: var(--muted); }
.mc-barra-compra .acciones { display: flex; gap: 10px; flex-shrink: 0; }
.mc-barra-compra .acciones .btn-mc,
.mc-barra-compra .acciones .btn-mc-ghost { padding: 12px 20px; font-size: 12px; }

@media (max-width: 767.98px) {
    /* En móvil manda el precio + un solo botón grande: el resto estorba. */
    .mc-barra-compra .info img { display: none; }
    .mc-barra-compra .nombre { display: none; }
    .mc-barra-compra .acciones { flex: 1; }
    .mc-barra-compra .acciones .btn-mc,
    .mc-barra-compra .acciones .btn-mc-ghost { flex: 1; padding: 13px 10px; }
}

/* El WhatsApp flotante sube por encima de la barra en vez de taparla. */
body.mc-con-barra-compra .mc-whatsapp-flotante { bottom: 96px; }
@media (max-width: 767.98px) {
    body.mc-con-barra-compra .mc-whatsapp-flotante { bottom: 88px; width: 48px; height: 48px; }
}


/* ============================================================
   Sellos de medios de pago (services/SellosPago.php).
   Pastilla clara con el logo oficial si el negocio lo dejó en
   `assets/pagos/`, o con el nombre de la marca en su color si
   todavía no. Se usan igual en la web pública y en el panel.
   ============================================================ */
.mc-sellos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mc-sello {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 42px;
    padding: 0 7px;
    border-radius: 5px;
    background: var(--sello-fondo, #fff);
    color: var(--sello-tinta, #111);
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    font: 800 11px/1 var(--font-display, system-ui);
    letter-spacing: .3px;
    white-space: nowrap;
    flex: none;
}
/* Nombres de dos palabras («Mercado Pago», «Apple Pay») necesitan su caja. */
.mc-sello.ancha { min-width: 66px; }
.mc-sello svg { height: 16px; width: auto; display: block; }
.mc-sello.con-logo { background: #fff; padding: 0 6px; }
.mc-sello.con-logo img { height: 18px; width: auto; max-width: 62px; object-fit: contain; display: block; }

/* Franja de formas de pago, al cierre del pie. */
.mc-pagos-franja {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}
.mc-pagos-franja .rotulo {
    font: 800 10px var(--font-display);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muted);
}
/* Bajo el botón de comprar: la misma señal, en pequeño. */
.mc-pagos-compra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mc-pagos-compra .rotulo { font: 600 11.5px var(--font-text); color: var(--muted); }

/* ---------- Sellos de medios de pago en el checkout ---------- */
.mc-sellos-pago { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mc-sellos-pago .sello {
    font: 700 10px var(--font-display);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line2);
    border-radius: 6px;
    padding: 3px 7px;
    background: var(--elev);
}

/* ---------- Aviso del quick-add (compra directa sobre pedido) ---------- */
.mc-qa-aviso { margin: 10px 0 0; font: 600 12px var(--font-text); color: var(--muted); }

/* ============================================================
   Cuponera digital (cupón del cliente y captura del lead)
   ============================================================ */

/* ---------- Pedir el cupón desde /promociones ---------- */
.mc-pedir-cupon {
    border: 1px dashed var(--line2);
    border-radius: var(--radio-cards);
    background: var(--surface);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.mc-pedir-cupon .texto p { font: 600 13px var(--font-text); color: var(--muted); margin: 4px 0 12px; }
.mc-pedir-cupon .campos { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-pedir-cupon input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line2);
    border-radius: var(--radio-botones);
    background: var(--bg);
    color: var(--text);
    font: 600 13px var(--font-text);
}
.mc-pedir-cupon input:focus { outline: none; border-color: var(--accent); }
.mc-pedir-cupon input::placeholder { color: var(--muted); }
.mc-pedir-cupon .btn-mc { flex: 0 0 auto; }
.mc-pedir-cupon .nota { font: 600 11px var(--font-text); color: var(--muted); margin: 10px 0 0; }

/* ---------- El cupón ---------- */
.mc-cupon {
    border: 1px solid var(--line2);
    border-radius: 22px;
    background: var(--surface);
    overflow: hidden;
    text-align: center;
}
.mc-cupon.usado { opacity: .72; }
.mc-cupon .cabeza {
    padding: 26px 22px 20px;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface));
    border-bottom: 1px dashed var(--line2);
}
.mc-cupon .cabeza h1 { font: 900 26px/1.15 var(--font-display); color: var(--text); margin: 6px 0 0; }
.mc-cupon .descuento { font: 900 34px var(--font-display); color: var(--accent); margin-top: 8px; }
.mc-cupon.usado .descuento { text-decoration: line-through; }

/* La muesca lateral que hace que se lea como un boleto. */
.mc-cupon .qr { position: relative; padding: 26px 22px 20px; }
.mc-cupon .qr::before,
.mc-cupon .qr::after {
    content: "";
    position: absolute;
    top: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line2);
}
.mc-cupon .qr::before { left: -14px; }
.mc-cupon .qr::after { right: -14px; }
.mc-cupon .qr img { background: #fff; padding: 10px; border-radius: 14px; }
.mc-cupon .folio {
    font: 900 26px var(--font-display);
    letter-spacing: 4px;
    color: var(--text);
    margin-top: 14px;
}
.mc-cupon .pie-folio { font: 600 12px var(--font-text); color: var(--muted); margin-top: 4px; }

.mc-cupon .estado { font: 800 13px var(--font-text); padding: 12px 22px; }
.mc-cupon .estado.ok { color: var(--wa); }
.mc-cupon .estado.no { color: var(--accent2); }

.mc-cupon .wallets { padding: 4px 22px 22px; }
.mc-cupon .wallets .titulo { font: 700 12px var(--font-display); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.mc-cupon .wallets .botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mc-cupon .wallets .nota { font: 600 11px var(--font-text); color: var(--muted); margin: 12px 0 0; }
.btn-wallet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 12px;
    font: 700 13px var(--font-text);
    text-decoration: none;
    border: 1px solid transparent;
}
.btn-wallet.apple { background: #000; color: #fff !important; border-color: #333; }
.btn-wallet.google { background: #fff; color: #1f1f1f !important; border-color: #dadce0; }
.btn-wallet:hover { filter: brightness(1.12); }

.mc-cupon .detalle { font: 600 13px/1.6 var(--font-text); color: var(--muted); padding: 0 22px; }
.mc-cupon .letras-chicas { font: 600 11px/1.6 var(--font-text); color: var(--muted); padding: 0 22px 22px; margin: 0; }

.mc-aviso-cupon {
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font: 700 13px var(--font-text);
    border: 1px solid var(--line2);
}
.mc-aviso-cupon.exito { color: var(--wa); border-color: color-mix(in srgb, var(--wa) 45%, transparent); }
.mc-aviso-cupon.error { color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 45%, transparent); }

/* ================= Flyer público de un curso =================
   Todas las franjas se pintan solo si el negocio capturó su contenido;
   por eso aquí no hay estados "vacíos": si no hay datos, no hay sección. */

.mc-flyer-subtitulo {
    font: 900 clamp(16px, 3vw, 26px)/1.1 var(--font-display);
    color: var(--accent);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-top: 4px;
}

.mc-flyer-gancho {
    font: 700 clamp(15px, 2.2vw, 19px)/1.5 var(--font-text);
    color: var(--text);
    margin: 0;
    padding-left: 14px;
    border-left: 3px solid var(--accent);
}

/* Cintillo de highlights: los cuatro sellos con icono del cartel */
.mc-flyer-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px;
    margin-top: 20px;
}
.mc-flyer-highlights .pieza {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
    padding: 16px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.mc-flyer-highlights .icono { line-height: 1; font-size: 30px; }
/* Los iconos de trazo toman el color de acento del negocio: es lo que los
   hace parte del diseño y no una estampa pegada encima. */
.mc-icono-svg { color: var(--accent); display: block; }
.mc-flyer-highlights .mc-icono-svg,
.mc-flyer-rejilla .mc-icono-svg { margin-inline: auto; }
.mc-flyer-highlights .rotulo {
    font: 800 10.5px/1.3 var(--font-display);
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--text);
}

/* «Incluye»: rejilla de iconos con rótulo */
.mc-flyer-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    gap: 12px;
}
.mc-flyer-rejilla .pieza {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
    padding: 20px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}
.mc-flyer-rejilla .icono { line-height: 1; font-size: 34px; }
.mc-flyer-rejilla .rotulo { font: 800 12px/1.35 var(--font-display); color: var(--text); }
.mc-flyer-rejilla .detalle { font: 600 11px/1.4 var(--font-text); color: var(--muted); }

/* Temario: pasos numerados con foto opcional */
.mc-flyer-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mc-flyer-pasos li {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.mc-flyer-pasos .foto { flex: 0 0 86px; border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
.mc-flyer-pasos .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-flyer-pasos .cuerpo { min-width: 0; }
.mc-flyer-pasos .titulo {
    display: flex; align-items: center; gap: 8px;
    font: 800 14px var(--font-display); color: var(--text);
}
.mc-flyer-pasos .numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent, #fff);
    font: 900 12px var(--font-display);
}
.mc-flyer-pasos p { font: 600 13px/1.6 var(--font-text); color: var(--muted); margin: 6px 0 0; }

/* Dirigido por */
.mc-flyer-instructores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 14px;
}
.mc-flyer-instructores .tarjeta {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center;
    padding: 22px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}
.mc-flyer-instructores .retrato {
    width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--line2);
    background: var(--bg);
}
.mc-flyer-instructores .retrato img { width: 100%; height: 100%; object-fit: cover; }
.mc-flyer-instructores .inicial { font: 900 30px var(--font-display); color: var(--muted); }
.mc-flyer-instructores .nombre { font: 800 14px var(--font-display); color: var(--text); margin-top: 6px; }
.mc-flyer-instructores .rol { font: 600 11.5px var(--font-text); color: var(--muted); }
.mc-flyer-instructores .marca { margin-top: 4px; }
.mc-flyer-instructores .marca img { max-width: 74px; max-height: 26px; object-fit: contain; }
.mc-flyer-instructores .marca span { font: 700 10.5px var(--font-display); color: var(--muted); text-transform: uppercase; }

/* ================= Curso: portada, CTA fijo y hoja ================= */
/* El cartel del curso ENTERO, grande y sin recortar. La copia difuminada de
   detrás rellena lo que sobra a los lados (un cartel vertical en una pantalla
   apaisada) sin inventar bordes negros ni deformar la foto. */
/* La cima de la página: el cartel y el nombre, que se mueven juntos.
   `isolation` encierra aquí el apilado del cartel fijo, así el resto de la
   página siempre pinta por encima sin tener que ir marcando z-index sección
   por sección. */
.mc-curso-cima { position: relative; isolation: isolate; }

.mc-curso-portada {
    position: relative;
    /* Ancho COMPLETO. Con solo `aspect-ratio` + `max-height` el navegador
       también encoge el ANCHO para conservar la proporción, y la cinta
       quedaba arrinconada a la izquierda. Fijándolo, lo que se recorta es la
       altura y el cartel se centra sobre su propio fondo difuminado. */
    width: 100%;
    /* La caja toma la proporción REAL del cartel (la escribe la vista) y solo
       se recorta en altura cuando el cartel es muy vertical. Así un flyer
       apaisado no deja media pantalla en blanco y uno vertical no obliga a
       hacer scroll para leer el nombre del curso. */
    aspect-ratio: var(--mc-portada, 16 / 9);
    /* La proporción mide la FOTO, no la foto más el hueco del encabezado:
       con `border-box` el hueco se comía 68 px del cartel. */
    box-sizing: content-box;
    max-height: min(68vh, 560px);
    min-height: 210px;
    /* El encabezado del sitio flota encima: sin este hueco, la parte de
       arriba del cartel quedaba debajo de la barra. */
    padding-top: 68px;
    overflow: hidden;
    background: var(--bg);
}
.mc-curso-portada .fondo {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    filter: blur(38px) saturate(.7) brightness(.42);
    transform: scale(1.06);
}
.mc-curso-portada .lienzo {
    position: absolute;
    inset: 68px 0 0;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
    display: block;
}
.mc-curso-portada .lienzo img {
    width: 100%;
    height: 100%;
    /* `contain`: se ve TODO el cartel, que es justo lo que se estaba
       perdiendo con el recorte de antes. */
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.mc-curso-portada .lienzo:hover img { transform: scale(1.015); }
.mc-curso-portada .contador {
    position: absolute;
    right: 18px;
    bottom: 46px;
    z-index: 2;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 6px 12px;
    color: #fff;
    font: 700 11px var(--font-text);
    backdrop-filter: blur(6px);
}
/* ---- Profundidad al bajar, en teléfono --------------------------------
   El cartel se queda quieto mientras el contenido sube y lo va tapando; a la
   vez se aleja un poco y se desvanece. Es `position: sticky` y no un fondo
   fijo porque es lo único que iOS mueve sin saltos durante el scroll por
   inercia. El avance (0 → 1) lo escribe mc.js en `--mc-p` desde el MISMO
   bucle de scroll que el resto de los parallax del sitio, y llega a 1 justo
   cuando el texto cubre el cartel por completo: nunca queda una franja
   invisible que se pueda tocar por error. */
@media (max-width: 767px) {
    .mc-curso-cima .mc-curso-portada {
        position: sticky;
        top: 0;
        z-index: 0;
        transform: scale(calc(1 - .18 * var(--mc-p, 0)));
        transform-origin: 50% 34%;
        opacity: calc(1 - var(--mc-p, 0));
        will-change: transform, opacity;
    }
    .mc-curso-cima .mc-curso-encabezado.con-portada { z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
    /* Sin el bucle de scroll el cartel se quedaría clavado y a plena vista
       mientras el texto lo tapa: mejor que se vaya con la página. */
    .mc-curso-cima .mc-curso-portada {
        position: relative;
        transform: none;
        opacity: 1;
    }
}

/* El nombre del curso, debajo del cartel. */
.mc-curso-encabezado { padding: 34px 0 6px; }
/* Con cartel, el encabezado se monta un poco sobre él y se apoya en una
   banda redondeada: la página se lee como una sola pieza, no como una foto
   pegada encima de un texto. */
.mc-curso-encabezado.con-portada {
    position: relative;
    margin-top: -34px;
    padding-top: 26px;
    background: var(--bg);
    border-radius: 26px 26px 0 0;
}
.mc-curso-encabezado .ruta { font: 600 12.5px var(--font-text); color: var(--muted); }
.mc-curso-encabezado .ruta a { color: var(--muted); }
.mc-curso-encabezado .ruta a:hover { color: var(--accent); }
.mc-curso-encabezado h1 {
    font: 900 clamp(28px, 4.4vw, 52px) / 1.05 var(--font-display);
    color: var(--text);
    margin: 10px 0 0;
    text-wrap: balance;
}
.mc-curso-encabezado .datos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 16px;
}
.mc-curso-encabezado .dato {
    font: 700 12px var(--font-display);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Separador entre datos: un punto, no un borde, para que la fila respire. */
.mc-curso-encabezado .dato + .dato::before { content: '·'; color: var(--line2); }
.mc-curso-cuerpo { padding-top: 30px; }
/* La tarjeta acompaña al scroll mientras se lee el temario… */
@media (min-width: 992px) {
    .mc-curso-cuerpo .mc-inscripcion { position: sticky; top: 96px; }
}
/* …pero dentro de la hoja no: ahí ya es el contenido. */
.mc-hoja .mc-inscripcion { position: static; }

/* Barra fija con el resumen de la inscripción. */
.mc-cta-fija {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line2);
    box-shadow: 0 -18px 40px -26px #000;
    animation: ctaSube .28s cubic-bezier(.2, .8, .3, 1);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    /* Al llegar al final de la página la barra se sube y se queda justo encima
       del pie en vez de taparlo (mc.js → barrasSobreFooter escribe cuánto).
       Va en el `transform` —y también en el fotograma final de `ctaSube`— para
       que la entrada termine exactamente donde le toca. */
    transform: translate3d(0, calc(var(--mc-sobre-pie, 0px) * -1), 0);
}
.mc-cta-fija[hidden] { display: none; }
/* Con la barra puesta, lo que flota en la esquina se sube: el botón de
   WhatsApp y la mascota tapaban justo el botón de reservar. La altura real
   la escribe el guion (`--mc-cta-alto`), porque depende del texto. */
body.mc-con-cta .mc-whatsapp-flotante,
body.mc-con-cta .mc-sparky { bottom: calc(22px + var(--mc-cta-alto, 76px)); }
.mc-whatsapp-flotante, .mc-sparky { transition: bottom .25s ease; }
@keyframes ctaSube {
    from { transform: translateY(100%); }
    to { transform: translate3d(0, calc(var(--mc-sobre-pie, 0px) * -1), 0); }
}
.mc-cta-fija .fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mc-cta-fija .resumen { min-width: 0; }
.mc-cta-fija .precio { display: block; font: 900 20px var(--font-display); color: var(--text); }
.mc-cta-fija .precio .moneda { font: 600 11px var(--font-text); color: var(--muted); }
.mc-cta-fija .detalle {
    display: block;
    font: 600 12px var(--font-text);
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-cta-fija .btn-mc { flex: none; }

/* Hoja que sube desde abajo con la tarjeta de inscripción dentro. */
.mc-hoja {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity .25s ease;
}
.mc-hoja[hidden] { display: none; }
.mc-hoja.abierta { opacity: 1; }
.mc-hoja .panel {
    position: relative;
    width: min(560px, 100%);
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line2);
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.mc-hoja.abierta .panel { transform: none; }
.mc-hoja .asa {
    width: 44px;
    height: 4px;
    border-radius: 99px;
    background: var(--line2);
    margin: 10px auto 2px;
    flex: none;
    cursor: pointer;
}
.mc-hoja .cerrar {
    position: absolute;
    right: 12px;
    top: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line2);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}
.mc-hoja .cuerpo { overflow-y: auto; padding: 6px 14px calc(20px + env(safe-area-inset-bottom)); }
/* Dentro de la hoja la tarjeta ya no necesita su propia caja. */
.mc-hoja .mc-inscripcion { border: 0; background: transparent; padding: 10px 4px; }
@media (min-width: 992px) {
    /* En escritorio la hoja se centra como una modal, no como una gaveta. */
    .mc-hoja { align-items: center; }
    .mc-hoja .panel { border-radius: 22px; transform: translateY(18px) scale(.98); }
    .mc-hoja.abierta .panel { transform: none; }
    .mc-hoja .asa { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-cta-fija { animation: none; }
    .mc-hoja, .mc-hoja .panel { transition: none; }
    .mc-curso-portada .lienzo img { transition: none; }
}

/* Sede del curso: los datos a un lado y el mapa al otro, del mismo alto. */
.mc-curso-sede .cuerpo {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.25fr);
    gap: 0;
    align-items: stretch;
    /* El mapa llega al borde del panel: el relleno se lo queda la columna de
       texto, no el plano. */
    padding: 0;
}
.mc-curso-sede .datos { padding: 34px 34px; align-self: center; }
.mc-curso-sede .mapa { min-height: 300px; overflow: hidden; background: var(--elev); }
.mc-curso-sede .mapa iframe {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: 0;
    display: block;
    /* El mapa se integra al tema del negocio en vez de gritar en blanco. */
    filter: grayscale(.35) contrast(1.04);
}
@media (max-width: 767.98px) {
    .mc-curso-sede .cuerpo { grid-template-columns: 1fr; }
    .mc-curso-sede .datos { padding: 26px 22px 20px; }
    .mc-curso-sede .mapa, .mc-curso-sede .mapa iframe { min-height: 240px; }
}

/* El retrato del instructor se puede ampliar. */
.mc-flyer-instructores button.retrato { position: relative; padding: 0; cursor: zoom-in; }
.mc-flyer-instructores button.retrato .lupa {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 17px;
    opacity: 0;
    transition: opacity .18s ease;
}
.mc-flyer-instructores button.retrato:hover .lupa,
.mc-flyer-instructores button.retrato:focus-visible .lupa { opacity: 1; }

/* Tira de marcas participantes */
.mc-flyer-marcas {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 26px;
    padding: 22px 18px;
    margin-top: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}
.mc-flyer-marcas img {
    max-height: 34px; max-width: 118px; object-fit: contain;
    filter: grayscale(1); opacity: .78;
    transition: filter .2s ease, opacity .2s ease;
}
.mc-flyer-marcas img:hover { filter: none; opacity: 1; }
.mc-flyer-marcas .sin-logo { font: 800 13px var(--font-display); color: var(--muted); text-transform: uppercase; }

/* La tira se presenta SOLA, en cualquier aparato: los logos se encienden uno
   tras otro, de izquierda a derecha, con un acercamiento corto, y la ola
   vuelve a empezar. En el teléfono no hay «pasar el puntero» y en la
   computadora hay que descubrir que se puede: así la tira cuenta lo mismo sin
   pedir nada.
   Es LENTA a propósito —seis segundos por vuelta, con la mayor parte del
   tiempo en reposo— porque se repite todo el rato: un parpadeo rápido en
   bucle sería ruido en medio de la página. El retardo de cada logo lo pone el
   marcado (`--i`, su orden), no una regla por posición, así que la ola se
   adapta a las marcas que tenga el curso.
   Solo se anima mientras la tira está en pantalla (mc.js → marcasTira). */
.mc-flyer-marcas.animando img {
    animation: marcaSeEnciende 6s ease-in-out infinite both;
    animation-delay: calc(var(--i, 0) * .5s);
}
.mc-flyer-marcas.animando .sin-logo {
    animation: marcaSeEnciendeTexto 6s ease-in-out infinite both;
    animation-delay: calc(var(--i, 0) * .5s);
}
/* Con el puntero encima manda el visitante: la ola suelta ese logo y se queda
   encendido mientras lo mira (quitar la animación deja pasar el `:hover` de
   arriba, sin `!important`). */
.mc-flyer-marcas.animando img:hover { animation: none; }
@keyframes marcaSeEnciende {
    0%, 4% { filter: grayscale(1); opacity: .78; transform: none; }
    11% { filter: none; opacity: 1; transform: scale(1.11); }
    19% { filter: none; opacity: 1; transform: scale(1.03); }
    30%, 100% { filter: grayscale(1); opacity: .78; transform: none; }
}
@keyframes marcaSeEnciendeTexto {
    0%, 4% { color: var(--muted); transform: none; }
    11% { color: var(--accent); transform: scale(1.1); }
    19% { color: var(--accent); transform: scale(1.03); }
    30%, 100% { color: var(--muted); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-flyer-marcas.animando img,
    .mc-flyer-marcas.animando .sin-logo { animation: none; }
}

@media (max-width: 575.98px) {
    .mc-flyer-pasos li { flex-direction: column; }
    .mc-flyer-pasos .foto { flex: none; width: 100%; aspect-ratio: 16/9; }
    .mc-flyer-marcas { gap: 18px; }
}

/* ================= Reservar un servicio con fecha real ================= */
.mc-servicio-reserva {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}
.mc-servicio-reserva .etiqueta {
    display: block;
    font: 800 11px var(--font-display);
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted);
    margin-bottom: 8px;
}
.mc-select-fecha {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line2);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    font: 700 14px var(--font-text);
}
.mc-servicio-reserva .nota { font: 600 12px/1.6 var(--font-text); color: var(--muted); margin: 10px 0 0; }
.mc-servicio-reserva .agotado { font: 700 13px/1.6 var(--font-text); color: var(--accent); margin: 0; }
.mc-servicio-reserva .detalle {
    display: block; margin-top: 2px;
    font: 600 11px var(--font-text); color: var(--muted); text-transform: none;
}

/* ================= El flyer del servicio =================
   Reutiliza la portada, las franjas y la barra fija del curso: lo que se añade
   aquí es lo que un servicio SÍ tiene y un curso no —precio por variante y
   mejoras que se le pueden sumar—. */

/* Tarjeta del catálogo de servicios: la del curso, sin cintillo de cupo.
   El renglón del tiempo («12 a 14 hrs») cae sobre la foto, y en rojo sobre una
   foto oscura no se leía: va en blanco con sombra, que se lee igual con foto
   y sin ella. */
.mc-servicio-card .kicker {
    color: #fff;
    opacity: .92;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
}
.mc-servicio-variantes { gap: 6px; flex-wrap: wrap; }
.mc-chip-sm {
    gap: 5px;
    padding: 5px 10px;
    font: 700 11px var(--font-text);
    background: var(--elev);
    border-color: var(--line);
    color: var(--muted);
    cursor: default;
}
.mc-chip-sm b { color: var(--text); font-weight: 800; }

/* Precio por variante, dentro de la tarjeta de reserva.
   Va pegado al precio porque es la primera pregunta de quien compara:
   «¿y para el mío?». En una franja aparte se lee cuando ya se fue. */
.mc-precios-lista {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--elev);
    padding: 14px 16px;
}
.mc-precios-lista .titulo {
    font: 800 11px var(--font-display);
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted);
    margin-bottom: 10px;
}
.mc-precios-lista .renglon {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}
.mc-precios-lista .renglon:first-of-type { border-top: 0; padding-top: 0; }
.mc-precios-lista .etiqueta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font: 700 13px var(--font-text); color: var(--text);
    min-width: 0;
}
.mc-precios-lista .etiqueta small {
    display: block; width: 100%;
    font: 600 11px var(--font-text); color: var(--muted);
}
.mc-precios-lista .importe { font: 900 15px var(--font-display); color: var(--text); white-space: nowrap; }
.mc-precios-lista .importe.cotizar { font-size: 12px; color: var(--muted); }
.mc-precios-lista .nota { font: 600 11px/1.5 var(--font-text); color: var(--muted); margin: 10px 0 0; }

/* Mejoras opcionales: se anuncian, no se cobran solas. El negocio las cierra
   al valorar el trabajo, así que la pieza informa y no lleva botón. */
.mc-extras-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.mc-extras-rejilla .pieza {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 18px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}
.mc-extras-rejilla .icono { line-height: 1; font-size: 26px; }
.mc-extras-rejilla .rotulo { font: 800 14px/1.3 var(--font-display); color: var(--text); }
.mc-extras-rejilla .detalle { font: 600 12px/1.5 var(--font-text); color: var(--muted); }
.mc-extras-rejilla .importe {
    margin-top: auto; padding-top: 8px;
    font: 900 17px var(--font-display); color: var(--accent);
}

/* ================= Rejilla de destinos =================
   El menú hecho página: cada sección con su icono, su cifra real y una foto
   de lo que hay del otro lado. Va al final de una página larga, que es donde
   el visitante decide si sigue o cierra. */
.mc-destinos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 14px;
}
.mc-destino {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    min-height: 208px;
    display: flex;
    cursor: pointer;
    /* El retraso escalona la entrada: las tarjetas caen una tras otra en vez
       de aparecer todas de golpe. */
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .32s;
}
.mc-destino .fondo {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.mc-destino .fondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Apagada en reposo y viva al pasar el cursor: en reposo compite con el
       texto, y sin foto la tarjeta se ve muerta. */
    opacity: .32;
    filter: grayscale(.55);
    transform: scale(1.04);
    transition: opacity .45s, filter .45s, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.mc-destino .velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(200deg,
        color-mix(in srgb, var(--bg) 55%, transparent) 0%,
        color-mix(in srgb, var(--bg) 88%, transparent) 62%,
        var(--bg) 100%);
}
.mc-destino .cuerpo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    width: 100%;
}

/* El icono en su marco: gira apenas y se tiñe al acercarse. */
.mc-destino .marco {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid var(--line2);
    background: color-mix(in srgb, var(--accent) 10%, var(--elev));
    color: var(--accent);
    margin-bottom: 8px;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), background .25s, border-color .25s;
}
.mc-destino .marco .glifo { font: 900 18px var(--font-display); }
/* El icono sigue al marco. `.mc-icono-svg` fija `color: var(--accent)` sobre el
   propio SVG, y una regla directa siempre le gana a la herencia: al rellenarse
   el marco de acento, el icono se quedaba rojo sobre rojo — invisible. */
.mc-destino .marco .mc-icono-svg,
.mc-ficha-negocio .marco .mc-icono-svg { color: inherit; }

.mc-destino .mundo {
    position: absolute;
    top: 20px;
    right: 20px;
    font: 800 9.5px var(--font-display);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line2);
    border-radius: 999px;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--elev) 80%, transparent);
}
.mc-destino h3 { font: 900 19px/1.1 var(--font-display); margin: 0; text-transform: uppercase; }
.mc-destino h3 a { color: var(--text); text-decoration: none; }
.mc-destino p {
    font: 500 12.5px/1.5 var(--font-text);
    color: var(--muted);
    margin: 0;
    flex: 1;
}
.mc-destino .pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.mc-destino .cuenta { font: 600 12px var(--font-text); color: var(--muted); }
.mc-destino .cuenta b { font: 900 15px var(--font-display); color: var(--text); margin-right: 3px; }
.mc-destino .flecha {
    font: 900 17px var(--font-display);
    color: var(--accent);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

/* Micro-interacciones: la tarjeta sube, la foto despierta, el icono se
   inclina y la flecha avanza. Todo con el mismo tiempo, para que se lea como
   un solo gesto y no como cuatro animaciones sueltas. */
.mc-destino:hover,
.mc-destino:focus-within {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--accent) 70%, transparent);
}
.mc-destino:hover .fondo img,
.mc-destino:focus-within .fondo img {
    opacity: .6;
    filter: grayscale(0);
    transform: scale(1.12);
}
.mc-destino:hover .marco,
.mc-destino:focus-within .marco {
    transform: rotate(-6deg) scale(1.06);
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.mc-destino:hover .flecha,
.mc-destino:focus-within .flecha { transform: translateX(5px); }
.mc-destino h3 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* En táctil no hay «pasar el cursor»: la foto se enseña desde el principio,
   que si no la tarjeta se ve apagada y nunca despierta. */
@media (hover: none) {
    .mc-destino .fondo img { opacity: .5; filter: grayscale(.15); }
}
@media (prefers-reduced-motion: reduce) {
    .mc-destino,
    .mc-destino .fondo img,
    .mc-destino .marco,
    .mc-destino .flecha { transition: none; }
    .mc-destino:hover { transform: none; }
}

/* ================= Nosotros: la página de confianza =================
   Reutiliza la portada y el panel de sede del curso; lo que se añade es la
   ficha del negocio (lo que capturó en «Datos del negocio») y una galería
   que se abre en el mismo visor de toda la web. */

/* La portada es un botón: se abre en grande como el cartel de un curso. */
.mc-foto-abrible {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    cursor: zoom-in;
    text-align: left;
}
.mc-foto-abrible img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.mc-foto-abrible:hover img { transform: scale(1.04); }
.mc-foto-abrible .lupa,
.mc-galeria-nosotros .foto .lupa {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 15px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s, transform .25s;
}
.mc-foto-abrible:hover .lupa,
.mc-foto-abrible:focus-visible .lupa,
.mc-galeria-nosotros .foto:hover .lupa,
.mc-galeria-nosotros .foto:focus-visible .lupa { opacity: 1; transform: translateY(0); }

/* Horario, dirección, teléfono y correo: capturados en el panel y, hasta
   ahora, invisibles en esta página. */
.mc-ficha-negocio { gap: 10px; }
.mc-ficha-negocio .dato {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    transition: border-color .25s;
}
.mc-ficha-negocio .dato:hover { border-color: var(--line2); }
.mc-ficha-negocio .marco {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent) 12%, var(--elev));
    color: var(--accent);
}
.mc-ficha-negocio .texto { min-width: 0; }
.mc-ficha-negocio .rotulo {
    display: block;
    font: 800 10px var(--font-display);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}
.mc-ficha-negocio .valor,
.mc-ficha-negocio a { font: 600 13.5px/1.5 var(--font-text); color: var(--text); }
.mc-ficha-negocio a { text-decoration: none; border-bottom: 1px solid var(--line2); }
.mc-ficha-negocio a:hover { color: var(--accent); border-color: var(--accent); }

/* Galería: mosaico que se adapta, cada foto abre el visor. */
.mc-galeria-nosotros {
    display: grid;
    /* `auto-fit`, no `auto-fill`: con cuatro fotos y hueco para seis, `fill`
       dejaba dos columnas vacías y la galería se veía a medio cargar. */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}
.mc-galeria-nosotros .foto {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--elev);
    padding: 0;
    cursor: zoom-in;
    transition: border-color .25s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.mc-galeria-nosotros .foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.mc-galeria-nosotros .foto:hover { border-color: var(--accent); transform: translateY(-3px); }
.mc-galeria-nosotros .foto:hover img { transform: scale(1.07); }
.mc-galeria-nosotros .foto .pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 12px 10px;
    font: 700 11.5px var(--font-text);
    color: #fff;
    text-align: left;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8));
}

/* En teléfono, dos por renglón: a una columna la galería se vuelve una tira
   interminable y el visitante deja de bajar antes de verla completa. */
@media (max-width: 575.98px) {
    .mc-galeria-nosotros { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 8px; }
    .mc-galeria-nosotros .foto .pie { font-size: 10.5px; padding: 18px 9px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-foto-abrible img,
    .mc-galeria-nosotros .foto,
    .mc-galeria-nosotros .foto img { transition: none; }
    .mc-galeria-nosotros .foto:hover { transform: none; }
}

/* ==========================================================================
   Diploma público (/diploma/<token>)
   --------------------------------------------------------------------------
   El lienzo mide 1056 × 816 px fijos —una hoja carta apaisada— y aquí se
   ESCALA entero, no se re-maqueta: lo que se ve en el teléfono es exactamente
   lo que sale impreso, y eso es lo que hace que el botón de descargar se use.
   La escala la calcula `mc.js` y la deja en `--mc-k`.
   ========================================================================== */
.mc-diploma-pagina { max-width: 1120px; margin: 0 auto; padding: 28px 16px 56px; }
.mc-diploma-marco {
    position: relative; width: 100%; overflow: hidden;
    border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
    /* Mientras el JS no ha medido, la caja ya reserva la proporción correcta:
       así la página no da un salto al cargar. */
    aspect-ratio: 1056 / 816;
}
.mc-diploma-marco .mc-diploma {
    position: absolute; top: 0; left: 0;
    transform: scale(var(--mc-k, 1)); transform-origin: top left;
}
.mc-diploma-pie {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    margin-top: 22px;
}
.mc-diploma-pie .datos { flex: 1 1 260px; min-width: 0; }
.mc-diploma-pie h1 { font-size: 1.5rem; margin: 0 0 2px; }
.mc-diploma-pie p { margin: 0; opacity: .78; }
.mc-diploma-pie .verifica { margin-top: 6px; font-size: .84rem; opacity: .62; }

@media print {
    /* Imprimir desde el navegador saca el diploma solo, sin la página. */
    .mc-diploma-pie, header, footer, .navbar { display: none !important; }
    .mc-diploma-pagina { padding: 0; max-width: none; }
    .mc-diploma-marco { box-shadow: none; border-radius: 0; }
}