/* ========================================================================== ALTERNATIVAS DE HEADER — NIUMERK Cómo usar: agrega UNA de estas clases al de base.html: (o alt2, alt3, alt4, alt5) No se toca ni una regla de styles.css. Todo lo de aquí vive en su propio bloque y el reordenamiento de layout solo aplica en desktop (@media min-width:993px), así el mobile queda exactamente igual al actual. Cada bloque agrega SOLAMENTE clases nuevas con su propio prefijo ALTn_, nunca redefine .header, .header__nav, etc. a nivel global. ========================================================================== */ /* ========================================================================== ALT1 — Barra superior de confianza + header clásico Agrega una franja angosta arriba del header (envío, pago seguro, redes) y dentro del header ordena: logo | nav centrada | acciones. Marcado nuevo requerido (pegar justo antes de
):
Envío 24-48h · Pago 100% seguro Síguenos en nuestras redes
========================================================================== */ .ALT1_topbar { background-color: var(--color-primary); color: #dfe7f0; } .ALT1_topbar__inner { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 6px 0; letter-spacing: 0.2px; } /* En mobile la barra se mantiene, solo se simplifica a un solo mensaje centrado */ @media (max-width: 576px) { .ALT1_topbar__inner span:last-child { display: none; } .ALT1_topbar__inner { justify-content: center; text-align: center; } } @media (min-width: 993px) { body.header-alt1 .header__nav-container { flex: 1; display: flex; justify-content: center; } } /* ========================================================================== ALT2 — Logo centrado, navegación en segunda fila Fila 1: logo al centro, buscador+carrito a la derecha, redes a la izquierda. Fila 2: nav centrada, ancho completo, separada por línea. No requiere HTML nuevo: solo reordena lo existente con flex-order. ========================================================================== */ @media (min-width: 993px) { body.header-alt2 .header { height: auto; min-height: var(--header-height); padding: 10px 0; } body.header-alt2 .header__container { flex-wrap: wrap; row-gap: 10px; } body.header-alt2 .header__logo { order: 2; margin: 0 auto; } body.header-alt2 .header__actions { order: 3; } body.header-alt2 .header__nav-container { order: 4; width: 100%; border-top: 1px solid var(--border-color); padding-top: 10px; display: flex; justify-content: center; } } /* ========================================================================== ALT3 — Header en navy oscuro, navegación tipo pill Invierte el color del header (fondo navy, texto/iconos claros) y da a cada link de nav una forma de píldora con estado activo resaltado. ========================================================================== */ @media (min-width: 993px) { body.header-alt3 .header { background-color: var(--color-primary); } body.header-alt3 .header__nav-link { color: #c9d6e4; border-radius: 999px; } body.header-alt3 .header__nav-link:hover, body.header-alt3 .header__nav-link--active { color: #ffffff; background-color: var(--color-primary-hover); box-shadow: none; } body.header-alt3 .search-box { background-color: var(--color-primary-hover); border-color: transparent; border-radius: 999px; } body.header-alt3 .search-box__input, body.header-alt3 .search-box__icon { color: #dfe7f0; } body.header-alt3 .icon-btn, body.header-alt3 .list-social__link { background-color: var(--color-primary-hover); color: #ffffff; } } /* ========================================================================== ALT4 — Buscador protagonista El buscador pasa a ocupar el centro del header y se agranda; la nav de categorías se resume en un botón "Categorías" con lista desplegable. Marcado nuevo requerido (reemplaza el