/* cybermonday.css — /cybermonday. Se carga después de brand.css. Misma estética de la tienda:
   el badge es el paralelogramo naranja de la marca (--skew), con el texto enderezado. */
.cm-head { margin: 4px 0 26px; }
.cm-badge { display: inline-block; background: var(--orange, #ff5c00); transform: skewX(var(--skew, -20deg)); padding: 7px 22px; margin: 0 0 14px; }
.cm-badge > span { display: inline-block; transform: skewX(calc(var(--skew, -20deg) * -1)); color: #000; font-weight: 900; font-size: 13px; letter-spacing: .14em; line-height: 1; }
.cm-head .page-title { margin: 0 0 10px; }
.cm-bajada { margin: 0 0 6px; font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--white, #fff); max-width: 46ch; }
.cm-termina { margin: 0; font-size: 13.5px; color: var(--muted, #888); }
.cm-fin { text-align: center; padding: 40px 16px 60px; }
.cm-fin .page-title { margin: 6px 0 12px; }
@media (max-width: 600px) { .cm-bajada { font-size: 16px; } }

/* El carrusel de arriba (includes/hero_carousel.php): el mismo de la home, un solo banner para todos.
   Conserva el margin-top de la home (el header es fijo); las migas de abajo, que ya traen 150px para el header,
   se pegan al carrusel.
   · Celular y tablet (< 1024px): a todo el ancho y con el alto exacto de la imagen (ancho × 9/16): se ve ENTERA,
     sin recortar ni agregar fondo arriba o abajo.
   · Compu (≥ 1024px): a todo el ancho y la MITAD de alto (32:9). "cover" centrado: se recorta fondo arriba y abajo;
     el encuadre vertical (43%) deja "CYBER MONDAY" entero (en la imagen de 1080 de alto ocupa de la fila 304 a la
     700; la ventana de 540 filas arranca en la 232 y llega a la 772). Si una letra se corta, se mueve ese %, no la altura. */
.cm-hero .hero-section.cm-hero-section { height: auto; aspect-ratio: 16 / 9; width: 100%; margin: 120px 0 0; background: #000; }
.cm-hero .cm-hero-section .hero-slide { background-color: #000; background-size: contain; background-repeat: no-repeat; background-position: center; }
.cm-hero .cm-hero-section video.hero-video { object-fit: contain !important; }
.cm-hero + .cm-page .seo-breadcrumbs { padding-top: 22px; }
#ofertas { scroll-margin-top: 140px; }
@media (min-width: 1024px) {
    .cm-hero .hero-section.cm-hero-section { aspect-ratio: 32 / 9; }
    .cm-hero .cm-hero-section .hero-slide { background-size: cover; background-position: 50% 43%; }
    .cm-hero .cm-hero-section video.hero-video { object-fit: cover !important; object-position: 50% 43%; }
}

/* La franja de cuenta regresiva (la .marquee-section de la home): acá va dentro de la columna, sin el
   margen inferior de 50px de la home. */
/* La cinta va rotada y a 115% de ancho (como en la home): se recorta al ancho de la página para que no cree
   scroll horizontal. */
.cm-page { overflow-x: clip; }
.cm-franja { margin: 18px 0 34px; padding: 16px 0; }
.cm-franja .marquee-track span { font-size: 22px; }
.cm-franja .marquee-countdown { font-size: 18px; padding: 8px 20px; }
.cm-franja .marquee-countdown span { font-size: 24px; }
@media (max-width: 640px) { .cm-franja { padding: 12px 0; } .cm-franja .marquee-track span { font-size: 14.5px; } .cm-franja .marquee-countdown { font-size: 12.5px; padding: 7px 13px; } .cm-franja .marquee-countdown span { font-size: 15px; } }

/* Las ofertas en grillas por categoría + los botones (chips) que bajan a cada una. En el celular van de a dos
   por fila y de 44 px de alto, cómodos para el pulgar. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.cm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.cm-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; text-align: center; text-decoration: none; font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--white, #fff); background: transparent; border: 1px solid var(--orange, #ff5c00); border-radius: 999px; }
.cm-chip:hover, .cm-chip:focus-visible { background: var(--orange, #ff5c00); color: #000; }
.cm-grupo { margin: 0 0 40px; scroll-margin-top: 140px; }
.cm-grupo-titulo { margin: 0 0 16px; font-size: 22px; line-height: 1.2; font-weight: 800; color: var(--white, #fff); }
@media (max-width: 600px) { .cm-chips { display: grid; grid-template-columns: 1fr 1fr; } .cm-chip { padding: 10px 8px; font-size: 13.5px; } .cm-grupo-titulo { font-size: 19px; } }