/* ============================================================
   AES — TOKENS DE DISEÑO  ·  Amo El Shopping
   ------------------------------------------------------------
   Fuente única de verdad de color, tipografía, espaciado, radios,
   sombras, motion y capas. Regla: de aquí en adelante ningún
   hexadecimal ni px suelto fuera de este bloque — todo con var().

   Los valores provienen de lo que el sitio ya usaba; aquí solo se
   les da nombre y escala. Declarar variables no aplica estilos:
   este bloque por sí solo NO cambia un pixel.

   Breakpoints (no pueden ser variables en @media, se documentan):
   móvil <576 · tablet 576-767 · laptop 768-991 · desktop 992-1199 · wide >=1200
   ============================================================ */
:root {

    /* --- Marca ------------------------------------------------ */
    --aes-primary:        #FC007E;   /* magenta del logotipo: acento vivo */
    --aes-primary-dark:   #C80064;   /* estado activo / pressed */
    --aes-primary-soft:   #FFE6F2;   /* fondos suaves, chips seleccionados */
    --aes-navy:           #182E44;   /* estructura: botones, header, precio */
    --aes-navy-dark:      #0F1D2C;   /* hover sobre navy */
    --aes-navy-soft:      #EEF1F4;   /* fondos de sección (ya en uso) */

    /* --- Neutros (texto y superficies) ------------------------ */
    --aes-ink:            #1C1C1C;   /* texto principal */
    --aes-ink-muted:      #666666;   /* texto secundario */
    --aes-ink-subtle:     #8A8A8A;   /* texto terciario, placeholders */
    --aes-border:         #E5E5E5;   /* bordes por defecto */
    --aes-border-strong:  #D5D5D5;   /* bordes de campos e inputs */
    --aes-surface:        #FFFFFF;   /* fondo de tarjetas */
    --aes-surface-alt:    #F7F7F7;   /* fondo alterno */
    --aes-surface-sunken: #F0F0F0;   /* fondo hundido, skeletons */

    /* --- Semánticos ------------------------------------------- */
    /* Reservados: aún sin uso. Se conectan cuando existan los datos
       (ahorro, envío) o el estado que los justifique. */
    --aes-success:        #00A650;   /* ahorro / envío gratis */
    --aes-danger:         #DD2222;   /* errores (ya presente en el tema) */
    --aes-warning:        #E9A625;   /* avisos (ya presente en el tema) */
    --aes-whatsapp:       #25D366;   /* botón flotante (ya en uso) */

    /* --- Tipografía ------------------------------------------- */
    --aes-font-display: 'Poppins', 'Century Gothic', 'Segoe UI', sans-serif;
    --aes-font-body:    'Poppins', 'Segoe UI', sans-serif;   /* unificado en 1.3 -- ya no Cairo */

    --aes-text-xs:   12px;
    --aes-text-sm:   14px;
    --aes-text-base: 16px;
    --aes-text-md:   18px;
    --aes-text-lg:   20px;
    --aes-text-xl:   24px;
    --aes-text-2xl:  28px;
    --aes-text-3xl:  32px;
    --aes-text-4xl:  40px;

    --aes-weight-regular:  400;
    --aes-weight-medium:   500;
    --aes-weight-semibold: 600;
    --aes-weight-bold:     700;

    --aes-leading-tight:   1.2;    /* titulares */
    --aes-leading-snug:    1.35;   /* títulos de tarjeta */
    --aes-leading-normal:  1.5;    /* cuerpo */
    --aes-leading-relaxed: 1.7;    /* párrafos largos */

    /* --- Espaciado (escala 8pt, con 4px para ajuste fino) ------ */
    --aes-space-1:  4px;
    --aes-space-2:  8px;
    --aes-space-3: 12px;
    --aes-space-4: 16px;
    --aes-space-5: 24px;
    --aes-space-6: 32px;
    --aes-space-7: 40px;
    --aes-space-8: 48px;
    --aes-space-9: 64px;

    /* --- Radios ----------------------------------------------- */
    --aes-radius-sm:   4px;
    --aes-radius-md:   6px;    /* el del carrusel del hero */
    --aes-radius-lg:  10px;
    --aes-radius-pill: 999px;
    --aes-radius-full: 50%;

    /* --- Elevación -------------------------------------------- */
    --aes-shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.04);
    --aes-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
    --aes-shadow-top: 0 -2px 10px rgba(0, 0, 0, 0.08); /* sombra hacia arriba -- CTA sticky de la ficha (4.3) */
    --aes-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --aes-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.20);
    --aes-overlay:   rgba(0, 0, 0, 0.35);   /* velo del hero */

    /* --- Motion ----------------------------------------------- */
    --aes-duration-fast: 120ms;
    --aes-duration:      200ms;
    --aes-duration-slow: 300ms;
    --aes-ease:          cubic-bezier(0.2, 0.7, 0.3, 1);

    /* --- Capas (z-index) -------------------------------------- */
    /* Escala explícita para no volver a escribir "9999" a ojo.   */
    --aes-z-base:      1;
    --aes-z-raised:    10;   /* flechas del carrusel de producto, CTA sticky de la ficha (4.3) */
    --aes-z-header:    50;   /* header sticky (1.4). Debe quedar POR DEBAJO
                                del menú móvil del tema (.humberger__menu__wrapper
                                z-index:99 y su overlay 98, en style.css, no editable)
                                para que el panel se vea encima del header al abrirse. */
    --aes-z-dropdown:  1000;
    --aes-z-overlay:   1040;
    --aes-z-modal:     1050;
    --aes-z-toast:     1080; /* notificaciones.js */
    --aes-z-floating:  1090; /* botón de WhatsApp */

    /* --- Añadidos post-0.3: nombran valores que ya existían ------- */
    --aes-on-dark:            #FFFFFF;  /* texto sobre fondos navy/magenta/whatsapp */
    --aes-navy-soft-border:   #D3DBE3;  /* borde a juego con --aes-navy-soft */
    --aes-shadow-floating:    0 4px 12px rgba(0, 0, 0, 0.25);  /* botón de WhatsApp */
    --aes-shadow-hover:       0 2px 10px rgba(0, 0, 0, 0.2);   /* flecha del carrusel de producto */
    --aes-surface-translucent: rgba(255, 255, 255, 0.8);       /* controles semitransparentes del carrusel */
}


/* ============================================================
   AES — Reset suave: accesibilidad y motion (ticket 0.4)
   Solo agrega reglas nuevas. No modifica ni quita nada existente.
   ============================================================ */

/* Foco visible al navegar con teclado.
   El tema (style.css:81-92) apaga el outline con la misma
   especificidad (elemento + :focus) -- por eso igualamos la
   especificidad con :focus-visible y ganamos por orden de carga,
   sin :important. */
input:focus-visible,
select:focus-visible,
button:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--aes-primary);
    outline-offset: 2px;
}

/* Reduce movimiento para quien lo pide en su sistema operativo.
   EXCEPCIÓN a la regla 5 (nada de !important): es la única forma
   de apagar las 105 transiciones/animaciones del tema, que están
   en selectores de clase concretos con más especificidad que un
   selector universal. Patrón estándar de la industria para este
   caso puntual. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Ajustes visuales del logo -- no afecta ninguna funcionalidad,
   solo controla el tamaño de renderizado de la imagen. */

.header__logo img,
.humberger__menu__logo img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}


/* La lista de categorías empieza cerrada en celular -- se abre solo */
@media (max-width: 767px) {
    .hero__categories ul {
        display: none;
    }
}



/* Carrusel de promociones del banner principal */
.hero__slider {
    margin-bottom: var(--aes-space-5);
    border-radius: var(--aes-radius-md);
    overflow: hidden;
}
.hero__slider__item {
    height: 340px;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    position: relative;
}
.hero__slider__item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--aes-overlay);
}
.hero__slider__text {
    position: relative;
    z-index: 2;
    color: var(--aes-on-dark);
    padding: var(--aes-space-7);
    max-width: 60%;
}
.hero__slider__text h2 {
    font-size: var(--aes-text-3xl);
    font-weight: var(--aes-weight-bold);
    margin-bottom: var(--aes-space-3);
}
@media (max-width: 767px) {
    .hero__slider__item { height: 220px; }
    .hero__slider__text { max-width: 90%; padding: var(--aes-space-5); }
    .hero__slider__text h2 { font-size: var(--aes-text-xl); }
}

/* Flechas del carrusel del hero -- bug encontrado al pasar a 3 promos (3.1):
   main.js tenía "avText" en vez de "navText", Owl usaba su navText por
   defecto ('‹'/'›', sin estilo) -- invisible con 1 sola promo porque Owl
   oculta el nav si no hay nada que recorrer. Mismo lenguaje visual que
   .flecha-carrusel de la ficha de producto (0.3-D). */
.hero__slider.owl-carousel .owl-nav button.owl-prev,
.hero__slider.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--aes-radius-full);
    background: var(--aes-surface-translucent);
    color: var(--aes-navy);
    font-size: var(--aes-text-lg);
    z-index: var(--aes-z-raised);
    transition: background-color var(--aes-duration-slow) var(--aes-ease),
                box-shadow var(--aes-duration-slow) var(--aes-ease);
}
.hero__slider.owl-carousel .owl-nav button.owl-prev:hover,
.hero__slider.owl-carousel .owl-nav button.owl-next:hover {
    background: var(--aes-surface);
    box-shadow: var(--aes-shadow-hover);
}
.hero__slider.owl-carousel .owl-nav button.owl-prev {
    left: var(--aes-space-3);
}
.hero__slider.owl-carousel .owl-nav button.owl-next {
    right: var(--aes-space-3);
}
@media (max-width: 575px) {
    .hero__slider.owl-carousel .owl-nav button.owl-prev,
    .hero__slider.owl-carousel .owl-nav button.owl-next {
        width: 32px;
        height: 32px;
        font-size: var(--aes-text-base);
    }
}


/* Cuadro de búsqueda -- más visible y con texto más legible al escribir */
.hero__search__form input[type="text"] {
    border: 2px solid var(--aes-border-strong);
    color: var(--aes-ink);
    font-weight: var(--aes-weight-medium);
}
.hero__search__form input[type="text"]:focus {
    border-color: var(--aes-primary);
    outline: none;
}
.hero__search__form input[type="text"]::placeholder {
    color: var(--aes-ink-subtle);
}




/* Íconos del header -- selector con la misma ruta de anidamiento que usa
   el tema original, para asegurar que esta regla gane */
.header__cart .fa-solid.fa-bag-shopping,
.header__cart .fa-heart {
    font-size: var(--aes-text-xl) !important;
}

.header__cart span {
    font-size: var(--aes-text-sm) !important;
    font-weight: var(--aes-weight-bold) !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
}

.header__cart__price {
    font-size: var(--aes-text-base) !important;
    font-weight: var(--aes-weight-semibold) !important;
    color: var(--aes-ink) !important;
}

.header__top__right__auth a {
    font-size: var(--aes-text-base) !important;
    font-weight: var(--aes-weight-semibold) !important;
}


/* Botón flotante de WhatsApp -- fijo en la esquina, visible en toda la navegación */
.whatsapp-flotante {
    position: fixed;
    bottom: var(--aes-space-5);
    right: var(--aes-space-5);
    width: 58px;
    height: 58px;
    background-color: var(--aes-whatsapp);
    border-radius: var(--aes-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--aes-shadow-floating);
    z-index: var(--aes-z-floating);
    transition: transform var(--aes-duration) ease;
}
.whatsapp-flotante:hover {
    transform: scale(1.08);
}
.whatsapp-flotante i {
    color: var(--aes-on-dark);
    font-size: var(--aes-text-3xl);
}
@media (max-width: 480px) {
    .whatsapp-flotante {
        width: 52px;
        height: 52px;
        bottom: var(--aes-space-4);
        right: var(--aes-space-4);
    }
    .whatsapp-flotante i {
        font-size: var(--aes-text-2xl);
    }
}


/* Página de contacto -- íconos circulares */
.contacto-icono-circulo {
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: var(--aes-radius-full);
    background-color: var(--aes-primary);
    color: var(--aes-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--aes-text-xl);
}
.contacto-icono-whatsapp {
    background-color: transparent;
    color: var(--aes-whatsapp);
    border: 2px solid var(--aes-whatsapp);
}


/* Footer -- derechos reservados */
.footer-ecx {
    background-color: var(--aes-surface-alt);
    border-top: 1px solid var(--aes-border);
    color: var(--aes-ink-muted);
    font-size: var(--aes-text-sm);
    margin-top: var(--aes-space-7);
}

/* Footer en 4 columnas -- ticket 1.6. .footer-ecx (arriba) sigue dando
   fondo/borde/tipografía base; estas reglas solo maquetan el contenido
   de adentro. */
.aes-footer {
    padding: var(--aes-space-7) 0 var(--aes-space-5);
}
.aes-footer__logo {
    max-height: 40px;
    width: auto;
    margin-bottom: var(--aes-space-3);
}
.aes-footer__text {
    max-width: 260px;
    margin: 0;
}
.aes-footer__title {
    font-family: var(--aes-font-display);
    font-size: var(--aes-text-sm);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-ink);
    margin-bottom: var(--aes-space-3);
}
.aes-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aes-footer__links li {
    margin-bottom: var(--aes-space-2);
}
.aes-footer__links a {
    color: var(--aes-ink-muted);
    text-decoration: none;
}
.aes-footer__links a:hover,
.aes-footer__links a:focus-visible {
    color: var(--aes-primary);
}
.aes-footer__links--contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--aes-space-2);
}
.aes-footer__links--contact i {
    margin-top: 3px;
    color: var(--aes-ink-subtle);
}
.aes-footer__bottom {
    border-top: 1px solid var(--aes-border);
    margin-top: var(--aes-space-2);
    padding-top: var(--aes-space-4);
    text-align: center;
    font-size: var(--aes-text-xs);
}


/* Íconos propios en SVG */
.icono-svg-link svg,
 .contacto-icono-circulo svg {
     width: 35px;
     height: 35px;
     vertical-align: middle;
    color: var(--aes-ink);
 }

 .icono-svg-link:hover svg,
 .icono-svg-link:focus svg {
     color: var(--aes-ink);
 }


/* Contador del carrito/favoritos -- sin círculo verde, número negro y más grande */
.header__cart ul li a span,
.humberger__menu__cart ul li a span {
    background: transparent;
    color: var(--aes-ink);
    font-size: var(--aes-text-lg);
    font-weight: var(--aes-weight-bold);
    height: auto;
    width: auto;
    line-height: normal;
    border-radius: 0;
    position: static;
    margin-left: -1px;
}


/* ============================================================
   Paleta de marca Amo El Shopping (tomada del logotipo)
   Magenta #FC007E -> acento vivo   |   Navy #182E44 -> estructura
   Solo apariencia. No cambia ningún comportamiento.
   ============================================================ */

.primary-btn,
.site-btn {
    background: var(--aes-navy);
    border-color: var(--aes-navy);
}
.primary-btn:hover,
.site-btn:hover {
    background: var(--aes-primary);
    border-color: var(--aes-primary);
}

.header__menu ul li.active a,
.header__menu ul li:hover > a,
.header__menu ul li .header__menu__dropdown li:hover > a {
    color: var(--aes-primary);
}

.hero__categories__all {
    background: var(--aes-navy);
}

.hero__text span,
.filter__option span:hover,
.contact__widget span,
.map .map-inside i,
.blog__sidebar__item ul li a:hover,
.blog__details__widget .blog__details__social a:hover,
.footer__widget .footer__widget__social a:hover,
.hero__search__phone__icon,
.humberger__menu__wrapper .slicknav_nav a:hover {
    color: var(--aes-primary);
}

.section-title h2:after,
.featured__controls ul li:after {
    background: var(--aes-primary);
}

.featured__item__pic__hover li:hover a,
.product__item__pic__hover li:hover a {
    background: var(--aes-primary);
    border-color: var(--aes-primary);
}

.product__pagination a:hover,
.blog__pagination a:hover,
.checkout__input__checkbox label input:checked ~ .checkmark {
    background: var(--aes-navy);
    border-color: var(--aes-navy);
}


/* --- Clases "success" de Bootstrap remapeadas a la paleta de marca --- */
.badge-success {
    background-color: var(--aes-navy);
}
.btn-success {
    background-color: var(--aes-navy);
    border-color: var(--aes-navy);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success.dropdown-toggle {
    background-color: var(--aes-primary);
    border-color: var(--aes-primary);
}
.text-success {
    color: var(--aes-primary) !important;
}
.bg-success {
    background-color: var(--aes-navy) !important;
}
.alert-success {
    color: var(--aes-navy);
    background-color: var(--aes-navy-soft);
    border-color: var(--aes-navy-soft-border);
}


/* Hover en las categorías del panel lateral -> rosa, como en el encabezado */
.hero__categories ul li a:hover {
    color: var(--aes-primary);
}


/* Banner de la página de login -- logo de marca en vez de foto de fondo */
.breadcrumb-section--auth {
    background: var(--aes-surface-alt);
    padding: var(--aes-space-6) 0 var(--aes-space-4);
}
.breadcrumb-section--auth .breadcrumb__logo {
    max-height: 90px;
    width: auto;
    margin-bottom: var(--aes-space-3);
}
.breadcrumb-section--auth .breadcrumb__option a,
.breadcrumb-section--auth .breadcrumb__option span {
    color: var(--aes-navy);
}
.breadcrumb-section--auth .breadcrumb__option a:after {
    background: var(--aes-navy);
}

/* Login -- menos aire arriba y campos más cómodos en escritorio */
.contact-form--login {
    padding-top: var(--aes-space-6);
}
.contact-form--login .contact__form__title {
    margin-bottom: var(--aes-space-6);
}
@media (min-width: 768px) {
    .contact-form--login form input {
        height: 58px;
        font-size: var(--aes-text-md);
        padding-left: var(--aes-space-5);
    }
}


/* ============================================================
   Header tipo tienda: logo + buscador + acceso en una banda
   (referencia visual: mercadolibre). Solo apariencia.
   ============================================================ */

/* Causa raíz del bug reportado en 1.4 ("el header sticky se queda fijo
   dos scrolls y luego desaparece"): style.css:24-29 pone
   `html, body { height: 100%; }` -- un valor FIJO de un viewport, no un
   mínimo. El contenido real mide varios viewports de alto, así que se
   desborda de esa caja con overflow:visible (por eso se ve normal a
   simple vista) pero el "contenedor" formal donde .position:sticky
   puede pegarse queda recortado a esa altura de 100vh. Al pasar ese
   punto (~2 scrolls de mouse), el header se queda sin "riel" donde
   seguir pegado y se desplaza junto con el resto -- de ahí que
   "desaparezca" justo ahí, siempre en el mismo punto.
   Arreglo: min-height en vez de height -- la página sigue llenando
   la pantalla en páginas cortas, pero ya no le pone techo a las
   páginas largas (todas las reales del sitio). Misma especificidad
   que la regla del tema, gana por cargar después -- sin !important. */
html,
body {
    height: auto;
    min-height: 100%;
}

.header {
    /* Sticky (ticket 1.4): el buscador y el menú ya no se pierden al
       hacer scroll. z-index por debajo del menú móvil del tema a
       propósito -- ver el comentario del token en :root. */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: var(--aes-z-header);
    background: var(--aes-surface);
    border-bottom: 1px solid var(--aes-border);
    box-shadow: var(--aes-shadow-xs);
}

/* Fila 1 -- logo, buscador y acceso */
.header__main {
    display: flex;
    align-items: center;
    gap: var(--aes-space-5);
    padding: var(--aes-space-4) 0;
}
.header__main__logo {
    flex: 0 0 auto;
    display: inline-block;
}
.header__main__logo img {
    max-height: 38px;
    width: auto;
}

.header__search {
    flex: 1 1 auto;
    display: flex;
    max-width: 780px;
    border: 1px solid var(--aes-border-strong);
    border-radius: var(--aes-radius-sm);
    overflow: hidden;
    background: var(--aes-surface);
}
.header__search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    height: 42px;
    padding: 0 var(--aes-space-4);
    font-size: var(--aes-text-base);
    color: var(--aes-ink);
}
.header__search input[type="text"]::placeholder {
    color: var(--aes-ink-subtle);
}
.header__search input[type="text"]:focus {
    outline: none;
}
.header__search button {
    flex: 0 0 auto;
    width: 52px;
    border: none;
    background: var(--aes-navy);
    color: var(--aes-on-dark);
    font-size: var(--aes-text-base);
    cursor: pointer;
    transition: background var(--aes-duration) ease;
}
.header__search button:hover {
    background: var(--aes-primary);
}

.header__main__auth {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}
.header__main__auth a {
    color: var(--aes-navy);
    font-weight: var(--aes-weight-semibold);
    font-size: var(--aes-text-base);
}
.header__main__auth a:hover {
    color: var(--aes-primary);
}
.header__main__auth a i {
    margin-right: var(--aes-space-2);
}

/* Fila 2 -- menú y carrito, más compactos */
.header__nav-row {
    border-top: 1px solid var(--aes-surface-sunken);
}
.header .header__menu {
    padding: var(--aes-space-3) 0;
}
.header .header__cart {
    padding: var(--aes-space-2) 0;
}

/* Responsivo -- el buscador salta a una fila completa en móvil/tablet */
@media (max-width: 991px) {
    .header__main {
        flex-wrap: wrap;
        gap: var(--aes-space-3);
        padding: var(--aes-space-3) 0;
        padding-right: 52px; /* hueco para el botón hamburguesa (absoluto) */
    }
    .header__main__auth {
        display: none; /* el menú hamburguesa ya trae el acceso */
    }
    .header__search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }
}


/* ------------------------------------------------------------
   Barra de confianza -- ticket 1.5. Va debajo de .header, fuera
   de la parte sticky (se desplaza normal con el scroll).
   Copia genérica a propósito: no hay dato real de costo de envío
   ni política de devoluciones en la base, así que no se inventan
   cifras ("envío gratis en compras mayores a...", plazos, etc.) --
   solo mensajes generales. El teléfono de WhatsApp es el mismo
   número real que ya usa el botón flotante (layout.php).
   ------------------------------------------------------------ */
.aes-trust-bar {
    background: var(--aes-navy);
}
.aes-trust-bar__track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aes-space-6);
    max-width: 1520px;
    margin: 0 auto;
    padding: var(--aes-space-2) var(--aes-space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.aes-trust-bar__track::-webkit-scrollbar {
    display: none;
}
.aes-trust-bar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--aes-space-2);
    color: var(--aes-on-dark);
    font-size: var(--aes-text-xs);
    font-weight: var(--aes-weight-medium);
    white-space: nowrap;
    text-decoration: none;
}
.aes-trust-bar__item i {
    font-size: var(--aes-text-sm);
}
.aes-trust-bar__item--link:hover,
.aes-trust-bar__item--link:focus-visible {
    color: var(--aes-primary-soft);
    text-decoration: underline;
}
@media (max-width: 767px) {
    .aes-trust-bar__track {
        justify-content: flex-start;
    }
}


/* ============================================================
   Layout ancho: sin sidebar, carrusel contenido (estilo Costco)
   ============================================================ */
.hero {
    /* ticket 0.8: ya no envuelve $content (ahora es hermano de .hero,
       ver .aes-page-content), así que ya no necesita el aire de abajo */
    padding-bottom: 0;
}
/* Contenedor del contenido de cada página -- antes vivía dentro de
   .hero y heredaba su ancho vía ".hero .container"; ahora es su propia
   clase con el mismo ancho y el mismo aire final que tenía. */
.aes-page-content {
    max-width: 1520px;
    padding-bottom: var(--aes-space-7);
}
.hero__slider--full {
    max-width: 1520px;
    margin: 0 auto var(--aes-space-5);
    border-radius: var(--aes-radius-lg);
    overflow: hidden;
}
.hero__slider--full .hero__slider__item {
    height: 380px;
    background-position: center center;
}
.hero__slider--full .container {
    width: 100%;
    max-width: 100%;
}
.hero__slider--full .hero__slider__text {
    max-width: 540px;
    padding: 0;
}
@media (max-width: 991px) {
    .aes-page-content { max-width: 100%; }
    .hero__slider--full {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .hero__slider--full .hero__slider__item { height: 220px; }
}

/* Menú "Categorías" del encabezado -- lista larga con scroll */
.header__menu ul li .header__menu__dropdown {
    max-height: 70vh;
    overflow-y: auto;
}
.header__menu ul li .header__menu__dropdown li a {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--aes-text-sm);
}


/* ============================================================
   FASE 1 — Átomos y chrome global
   ============================================================ */

/* ------------------------------------------------------------
   Tipografía global — ticket 1.3
   Decisión tomada con el usuario: se unifica a Poppins (antes
   convivía con Cairo). El <link> de Google Fonts ya solo pide
   Poppins (views/layout.php); --aes-font-body dejó de ser Cairo.

   Estas reglas ganan por especificidad empatada + orden de carga
   (custom-overrides.css se carga después de style.css), igual que
   el resto del proyecto -- sin !important.

   ⚠️ Cambio visual real (no es cero-píxel como en Fase 0), pero acotado:
   - h1 no se usa en ninguna vista hoy (verificado) -- se deja lista en
     --aes-text-4xl (40px) para cuando se necesite; sin efecto visible aún.
     El tema tenía ahí un bug (font-size declarado dos veces, 70px y
     luego 16px, ganaba 16px) que de paso queda corregido.
   - h2 pasa de 36 a 32px -- SÍ visible: título de login, registro,
     contacto y "Muy pronto" de tienda.php (el h2 del hero slider y el
     de dashboard NO cambian, tienen su propio font-size más específico
     ya tokenizado desde 0.3).
   - h3 30→28px, h5 18→20px, h6 16→18px -- SÍ visibles en checkout.php
     ("Proceso de Compra", "¡Pedido Recibido", "Tu Pedido", métodos de
     pago, "Datos de Depósito"): sus selectores del tema
     (.shoping__checkout h5 / .checkout h6) son CSS muerto, no coinciden
     con las clases reales del checkout, así que dependían del tamaño
     base sin saberlo. El h3 del precio en la ficha de producto NO
     cambia (ya tiene su propio override tokenizado desde 0.3).
   - h4 24→24px y body/p 16→16px: token exacto, cero cambio.
   ------------------------------------------------------------ */
html,
body {
    font-family: var(--aes-font-body);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--aes-font-display);
}
h1 { font-size: var(--aes-text-4xl); }
h2 { font-size: var(--aes-text-3xl); }
h3 { font-size: var(--aes-text-2xl); }
h4 { font-size: var(--aes-text-xl); }
h5 { font-size: var(--aes-text-lg); }
h6 { font-size: var(--aes-text-md); }
p {
    font-family: var(--aes-font-body);
    font-size: var(--aes-text-base);
}

/* ------------------------------------------------------------
   .aes-btn — botón base + variantes + tamaños + estados
   Ticket 1.1. No reemplaza aún .primary-btn/.site-btn (eso migra
   página por página); .btn-exito-ogani sí se migró en el ticket 4.2
   (CTA de "Agregar al carrito" de la ficha de producto).
   ------------------------------------------------------------ */
.aes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--aes-space-2);
    border: 1px solid transparent;
    border-radius: var(--aes-radius-sm);
    padding: var(--aes-space-3) var(--aes-space-5);
    font-family: var(--aes-font-body);
    font-size: var(--aes-text-base);
    font-weight: var(--aes-weight-semibold);
    line-height: var(--aes-leading-tight);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--aes-duration) var(--aes-ease),
                border-color var(--aes-duration) var(--aes-ease),
                color var(--aes-duration) var(--aes-ease);
}
.aes-btn:hover,
.aes-btn:focus {
    text-decoration: none;
}

/* --- Variantes --- */
.aes-btn--primary {
    background: var(--aes-navy);
    border-color: var(--aes-navy);
    color: var(--aes-on-dark);
}
.aes-btn--primary:hover,
.aes-btn--primary:focus-visible {
    background: var(--aes-primary);
    border-color: var(--aes-primary);
    color: var(--aes-on-dark);
}

.aes-btn--secondary {
    background: var(--aes-surface);
    border-color: var(--aes-border-strong);
    color: var(--aes-ink);
}
.aes-btn--secondary:hover,
.aes-btn--secondary:focus-visible {
    border-color: var(--aes-primary);
    color: var(--aes-primary);
}

.aes-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--aes-navy);
    padding-left: var(--aes-space-2);
    padding-right: var(--aes-space-2);
}
.aes-btn--ghost:hover,
.aes-btn--ghost:focus-visible {
    color: var(--aes-primary);
    background: var(--aes-primary-soft);
}

/* --- Tamaños --- */
.aes-btn--sm {
    padding: var(--aes-space-2) var(--aes-space-3);
    font-size: var(--aes-text-sm);
}
.aes-btn--lg {
    padding: var(--aes-space-4) var(--aes-space-6);
    font-size: var(--aes-text-md);
}

/* Ancho completo. Primer uso real: CTA de la ficha de producto (4.2). */
.aes-btn--block {
    display: flex;
    width: 100%;
}

/* --- Estados --- */
.aes-btn:disabled,
.aes-btn--disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading: oculta el texto, muestra un spinner centrado.
   Uso: agregar la clase aes-btn--loading al botón (vía JS cuando
   se conecte a una acción real; por ahora es solo el átomo visual). */
.aes-btn.aes-btn--loading {
    /* .aes-btn + .aes-btn--loading iguala la especificidad de los
       :hover/:focus-visible de las variantes (ambos 2 clases) y gana
       por venir después en el archivo -- sin :important. */
    color: transparent;
    pointer-events: none;
    position: relative;
}
.aes-btn--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: var(--aes-radius-full);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--aes-on-dark);
    animation: aes-spin var(--aes-duration-slow) linear infinite;
}
.aes-btn--secondary.aes-btn--loading::after,
.aes-btn--ghost.aes-btn--loading::after {
    border: 2px solid rgba(24, 46, 68, 0.25);
    border-top-color: var(--aes-navy);
}
@keyframes aes-spin {
    to { transform: rotate(360deg); }
}


/* ------------------------------------------------------------
   Campos de formulario — label, input/textarea/select, checkbox
   Ticket 1.2. Igual que 1.1: construye el átomo, no reemplaza
   todavía los inputs de login/register/checkout/contacto.
   ------------------------------------------------------------ */
.aes-label {
    display: block;
    margin-bottom: var(--aes-space-2);
    font-family: var(--aes-font-body);
    font-size: var(--aes-text-sm);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-ink);
}

.aes-input {
    display: block;
    width: 100%;
    border: 1px solid var(--aes-border-strong);
    border-radius: var(--aes-radius-sm);
    padding: var(--aes-space-3);
    font-family: var(--aes-font-body);
    font-size: var(--aes-text-base);
    color: var(--aes-ink);
    background: var(--aes-surface);
    transition: border-color var(--aes-duration) var(--aes-ease);
}
.aes-input::placeholder {
    color: var(--aes-ink-subtle);
}
.aes-input:focus {
    border-color: var(--aes-primary);
    /* Sin outline:none aquí -- style.css ya lo apaga para clic de mouse
       (input:focus, misma especificidad, carga antes). Si lo repitiéramos
       en esta regla (más específica por la clase .aes-input) le ganaría
       también a input:focus-visible del ticket 0.4 y apagaría el anillo
       de teclado. */
}
.aes-input:disabled {
    background: var(--aes-surface-alt);
    color: var(--aes-ink-subtle);
    cursor: not-allowed;
}
textarea.aes-input {
    resize: vertical;
    min-height: 96px;
}

/* Estado de error -- se agrega junto a .aes-input, sin quitarla */
.aes-input--error {
    border-color: var(--aes-danger);
}
.aes-field__error {
    display: block;
    margin-top: var(--aes-space-1);
    font-size: var(--aes-text-xs);
    color: var(--aes-danger);
}
.aes-field__hint {
    display: block;
    margin-top: var(--aes-space-1);
    font-size: var(--aes-text-xs);
    color: var(--aes-ink-muted);
}

/* Checkbox -- usa accent-color en vez de reconstruir el checkmark a mano:
   menos CSS, menos DOM, y el navegador ya resuelve foco/teclado solo. */
.aes-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--aes-space-2);
    font-family: var(--aes-font-body);
    font-size: var(--aes-text-sm);
    color: var(--aes-ink);
    cursor: pointer;
}
.aes-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--aes-primary);
    cursor: pointer;
}


/* ============================================================
   FASE 2 — Tarjeta de producto y grid
   ============================================================ */

/* ------------------------------------------------------------
   .aes-product-card — tarjeta del catálogo (ticket 2.2)
   Densidad tipo marketplace: imagen en caja 1:1 (reserva de alto
   -> sin salto de layout), categoría discreta, título a 2 líneas
   fijas, precio grande navy, CTA full-width siempre visible.

   Reemplaza el markup .card/.grid-tarjeta-producto de
   views/components/producto_card.php. El CSS legacy de esa tarjeta
   (.grid-tarjeta-producto ... más arriba, y el bloque ".row--catalogo"
   del grid) queda muerto y se retira en el ticket 2.4.

   Motion: el hover se anima solo; prefers-reduced-motion ya lo
   apaga globalmente (ticket 0.4), no se repite aquí.
   ------------------------------------------------------------ */
.aes-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--aes-surface);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-lg);
    overflow: hidden;
    transition: transform var(--aes-duration) var(--aes-ease),
                box-shadow var(--aes-duration) var(--aes-ease),
                border-color var(--aes-duration) var(--aes-ease);
}
.aes-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--aes-shadow-md);
    border-color: var(--aes-border-strong);
}

/* Caja de imagen cuadrada. aspect-ratio reserva el alto antes de
   que cargue la imagen -> CLS 0 en la fila de la tarjeta. */
.aes-product-card__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--aes-surface);
    border-bottom: 1px solid var(--aes-border);
}
.aes-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--aes-space-4);
}

.aes-product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--aes-space-4);
    gap: var(--aes-space-2);
}

.aes-product-card__category {
    font-size: var(--aes-text-xs);
    font-weight: var(--aes-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--aes-ink-muted);
}

/* Título: exactamente 2 líneas. min-height reserva las 2 líneas aunque
   ocupe 1 -> precio y CTA alineados entre tarjetas de la misma fila. */
.aes-product-card__title {
    margin: 0;
    font-family: var(--aes-font-display);
    font-size: var(--aes-text-sm);
    font-weight: var(--aes-weight-medium);
    line-height: var(--aes-leading-snug);
    min-height: calc(var(--aes-text-sm) * var(--aes-leading-snug) * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aes-product-card__title-link {
    color: var(--aes-ink);
    text-decoration: none;
    transition: color var(--aes-duration) var(--aes-ease);
}
.aes-product-card__title-link:hover,
.aes-product-card__title-link:focus-visible {
    color: var(--aes-primary);
}

/* Precio: navy, grande, centavos en superíndice. margin-top:auto
   empuja precio + CTA al fondo de la tarjeta. */
.aes-product-card__price {
    margin-top: auto;
    padding-top: var(--aes-space-2);
    font-family: var(--aes-font-display);
    font-size: var(--aes-text-2xl);
    font-weight: var(--aes-weight-bold);
    line-height: var(--aes-leading-tight);
    color: var(--aes-navy);
}
.aes-product-card__price-currency {
    font-size: 0.6em;
    font-weight: var(--aes-weight-semibold);
    margin-right: 2px;
}
.aes-product-card__price-cents {
    font-size: 0.5em;
    font-weight: var(--aes-weight-semibold);
    vertical-align: super;
    margin-left: var(--aes-space-1);
}

/* CTA full-width. .aes-btn es inline-flex; aquí se estira. */
.aes-product-card__cta {
    display: flex;
    width: 100%;
    margin-top: var(--aes-space-3);
}


/* ------------------------------------------------------------
   .aes-product-grid — grilla del catálogo (ticket 2.4)
   Sustituye a .row--catalogo (5/4/2 columnas forzadas con
   flex:0 0 X% y varios !important sobre clases del tema).
   CSS Grid con gap real -> gutters uniformes, sin márgenes
   negativos ni padding por columna. Mobile-first.
   Progresión: 2 (móvil) · 3 (>=768) · 4 (>=992) · 5 (>=1200).
   @media no admite var(); los breakpoints van literales
   (documentados en el bloque :root).
   ------------------------------------------------------------ */
.aes-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--aes-space-4);
}
@media (min-width: 768px) {
    .aes-product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--aes-space-5);
    }
}
@media (min-width: 992px) {
    .aes-product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1200px) {
    .aes-product-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}


/* ------------------------------------------------------------
   .aes-pagination — paginación del catálogo (ticket 2.5)
   Reemplaza el markup Bootstrap .pagination/.page-* de
   views/components/paginacion.php. El override ".pagination
   .page-link" (overrides legacy, más arriba) se retiró en
   este mismo ticket.
   ------------------------------------------------------------ */
.aes-pagination {
    margin-top: var(--aes-space-6);
}
.aes-pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--aes-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.aes-pagination__link,
.aes-pagination__ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 var(--aes-space-3);
    font-family: var(--aes-font-body);
    font-size: var(--aes-text-base);
    font-weight: var(--aes-weight-medium);
    border-radius: var(--aes-radius-sm);
}
a.aes-pagination__link {
    color: var(--aes-navy);
    background: var(--aes-surface);
    border: 1px solid var(--aes-border);
    text-decoration: none;
    transition: color var(--aes-duration) var(--aes-ease),
                background-color var(--aes-duration) var(--aes-ease),
                border-color var(--aes-duration) var(--aes-ease);
}
a.aes-pagination__link:hover,
a.aes-pagination__link:focus-visible {
    color: var(--aes-on-dark);
    background: var(--aes-primary);
    border-color: var(--aes-primary);
}
.aes-pagination__link--current {
    color: var(--aes-on-dark);
    background: var(--aes-navy);
    border: 1px solid var(--aes-navy);
    cursor: default;
}
span.aes-pagination__link--nav[aria-disabled="true"] {
    color: var(--aes-ink-subtle);
    background: var(--aes-surface-alt);
    border: 1px solid var(--aes-border);
    cursor: not-allowed;
}
.aes-pagination__ellipsis {
    color: var(--aes-ink-subtle);
}
@media (max-width: 575px) {
    .aes-pagination__link,
    .aes-pagination__ellipsis {
        min-width: 38px;
        height: 38px;
        font-size: var(--aes-text-sm);
    }
}


/* ------------------------------------------------------------
   .aes-empty-state — sin resultados en el catálogo (ticket 2.6)
   Icono decorativo (tamaño por la clase fa-3x, aquí solo color) +
   título + texto + CTA con el átomo .aes-btn.
   ------------------------------------------------------------ */
.aes-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--aes-space-3);
    padding: var(--aes-space-9) var(--aes-space-4);
}
.aes-empty-state__icon {
    color: var(--aes-ink-subtle);
    margin-bottom: var(--aes-space-2);
}
.aes-empty-state__title {
    margin: 0;
    font-family: var(--aes-font-display);
    font-size: var(--aes-text-xl);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-ink);
}
.aes-empty-state__text {
    margin: 0;
    max-width: 42ch;
    font-size: var(--aes-text-base);
    color: var(--aes-ink-muted);
}
.aes-empty-state__actions {
    margin-top: var(--aes-space-3);
}


/* ============================================================
   FASE 3 — Home
   ============================================================ */

/* ------------------------------------------------------------
   .aes-category-chips — franja de categorías del catálogo (ticket 3.3)
   Chips CIRCULARES con icono (FA 4.7) + etiqueta debajo, en una fila
   con scroll horizontal. En celular deja de ser un muro de texto
   antes de los productos (patrón tipo marketplace). El catálogo no
   entrega imagen de categoría -> icono por nombre (mapa en
   views/components/categoria_chips.php) + fallback fa-tag.
   <nav> + <a> reales (foco de teclado por 0.4).
   ------------------------------------------------------------ */
.aes-category-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--aes-space-4);
    margin-bottom: var(--aes-space-5);
    padding-bottom: var(--aes-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.aes-category-chips__chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--aes-space-2);
    width: 72px;
    text-decoration: none;
}
.aes-category-chips__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--aes-radius-full);
    border: 1px solid var(--aes-border);
    background: var(--aes-navy-soft);
    color: var(--aes-navy);
    font-size: var(--aes-text-xl);
    transition: color var(--aes-duration) var(--aes-ease),
                background-color var(--aes-duration) var(--aes-ease),
                border-color var(--aes-duration) var(--aes-ease);
}
.aes-category-chips__label {
    font-size: var(--aes-text-xs);
    line-height: var(--aes-leading-snug);
    color: var(--aes-ink-muted);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aes-category-chips__chip:hover .aes-category-chips__icon,
.aes-category-chips__chip:focus-visible .aes-category-chips__icon {
    border-color: var(--aes-primary);
    color: var(--aes-primary);
}
.aes-category-chips__chip--active .aes-category-chips__icon {
    background: var(--aes-navy);
    border-color: var(--aes-navy);
    color: var(--aes-on-dark);
}
.aes-category-chips__chip--active .aes-category-chips__label {
    color: var(--aes-ink);
    font-weight: var(--aes-weight-semibold);
}


/* ------------------------------------------------------------
   .aes-section-head — encabezado de sección (ticket 3.4)
   <h2> con barra de acento magenta a la izquierda + enlace
   "ver todo" opcional a la derecha. Reutilizable (catálogo,
   secciones de la Home, relacionados de la ficha).
   ------------------------------------------------------------ */
.aes-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--aes-space-3);
    margin-bottom: var(--aes-space-5);
}
.aes-section-head__title {
    min-width: 0;
    margin: 0;
    padding-left: var(--aes-space-3);
    border-left: 4px solid var(--aes-primary);
    font-family: var(--aes-font-display);
    font-size: var(--aes-text-2xl);
    font-weight: var(--aes-weight-bold);
    line-height: var(--aes-leading-tight);
    color: var(--aes-ink);
}
.aes-section-head__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--aes-space-1);
    font-size: var(--aes-text-sm);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-navy);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--aes-duration) var(--aes-ease);
}
.aes-section-head__action:hover,
.aes-section-head__action:focus-visible {
    color: var(--aes-primary);
}


/* ============================================================
   FASE 5 — Carrito y checkout
   ============================================================ */

/* ------------------------------------------------------------
   .metodo-card — tarjetas de método de pago (ticket 5.1)
   El selector .metodo-card no se renombra (checkout.js lo usa para
   el click de selección visual, que sigue puesto por JS vía estilo
   inline -- eso no se toca, es lógica). Aquí solo se le da apariencia
   base con tokens: antes tenía cursor:pointer inline y sin hover.
   ------------------------------------------------------------ */
.metodo-card {
    cursor: pointer;
    border-radius: var(--aes-radius-lg);
    transition: border-color var(--aes-duration) var(--aes-ease),
                box-shadow var(--aes-duration) var(--aes-ease);
}
.metodo-card:hover {
    border-color: var(--aes-primary);
    box-shadow: var(--aes-shadow-sm);
}
/* Antes cada icono tenía su propio color de Bootstrap sin criterio
   (success/primary/warning -> magenta/azul/naranja por el remap de
   arriba). Unificados a navy, neutro y estructural. */
.aes-metodo-card__icon {
    font-size: var(--aes-text-4xl);
    color: var(--aes-navy);
}

/* ------------------------------------------------------------
   .aes-checkout-summary — "Tu pedido" (ticket 5.1)
   Une en una sola caja lo que antes eran 3 divs sueltos (título en
   su propio card, lista y totales sin envoltorio común). Sticky solo
   en >=992px, donde las columnas del checkout van lado a lado.
   ------------------------------------------------------------ */
.aes-checkout-summary {
    background: var(--aes-surface);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-lg);
    padding: var(--aes-space-4);
}
.aes-checkout-summary__title {
    margin: 0 0 var(--aes-space-3);
    padding-bottom: var(--aes-space-3);
    border-bottom: 1px solid var(--aes-border);
    font-family: var(--aes-font-display);
    font-size: var(--aes-text-md);
    font-weight: var(--aes-weight-bold);
    color: var(--aes-ink);
}
.aes-checkout-summary__items {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: var(--aes-space-3);
}
.aes-checkout-summary__totals {
    border-top: 1px solid var(--aes-border);
    padding-top: var(--aes-space-3);
}
.aes-checkout-summary__total-amount {
    font-size: var(--aes-text-lg);
    font-weight: var(--aes-weight-bold);
    color: var(--aes-navy);
}
@media (min-width: 992px) {
    .aes-checkout-summary {
        position: sticky;
        /* Alto aproximado del header sticky (.header__main + .header__menu).
           Si el header cambia de alto, ajustar este número. */
        top: 130px;
    }
}

/* ------------------------------------------------------------
   .aes-cart-item — fila de "Tu pedido" (ticket 5.1-bis)
   Reemplaza el grid Bootstrap col-2/5/3/2 sin breakpoints que
   generaba checkout.js:366. Los selectores que lee el JS no
   cambian: item-carrito-fila + data-cart-row-id/data-id-fisico/
   data-item-id-externo, .btn-cambiar-cantidad + data-action,
   .input-cantidad-item, .btn-eliminar-item. Solo se tocó el HTML
   generado, no la lógica.
   ------------------------------------------------------------ */
.aes-cart-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
        "img info aside"
        "img stepper aside";
    column-gap: var(--aes-space-3);
    row-gap: var(--aes-space-2);
    align-items: center;
    padding: var(--aes-space-3) 0;
    border-bottom: 1px solid var(--aes-border);
}
.aes-cart-item__img {
    grid-area: img;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--aes-radius-sm);
    border: 1px solid var(--aes-border);
}
.aes-cart-item__info { grid-area: info; min-width: 0; }
.aes-cart-item__name {
    margin: 0;
    font-size: var(--aes-text-sm);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aes-cart-item__unit-price {
    font-size: var(--aes-text-xs);
    color: var(--aes-ink-muted);
}
/* PRECIO-CAMBIÓ 7e: precio anterior tachado y etiqueta subió (alerta) / bajó (ahorro), misma píldora que .aes-fav-nodisp__badge */
.aes-cart-item__price-before {
    color: var(--aes-ink-muted);
    margin-right: var(--aes-space-1);
}
.aes-cart-item__price-change {
    align-self: flex-start;
    padding: var(--aes-space-1) var(--aes-space-3);
    border-radius: var(--aes-radius-pill);
    color: var(--aes-surface);
    font-size: var(--aes-text-xs);
    font-weight: var(--aes-weight-semibold);
}
.aes-cart-item__price-change--subio { background: var(--aes-danger); }
.aes-cart-item__price-change--bajo  { background: var(--aes-success); }
.aes-cart-item__stepper {
    grid-area: stepper;
    display: inline-flex;
    align-items: center;
    gap: var(--aes-space-2);
}
.aes-cart-item__step-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--aes-border-strong);
    border-radius: var(--aes-radius-sm);
    background: var(--aes-surface);
    color: var(--aes-navy);
    font-size: var(--aes-text-base);
    font-weight: var(--aes-weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--aes-duration) var(--aes-ease),
                color var(--aes-duration) var(--aes-ease);
}
.aes-cart-item__step-btn:hover,
.aes-cart-item__step-btn:focus-visible {
    border-color: var(--aes-primary);
    color: var(--aes-primary);
}
.aes-cart-item__qty {
    width: 30px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: var(--aes-text-sm);
    font-weight: var(--aes-weight-bold);
    color: var(--aes-ink);
    padding: 0;
}
.aes-cart-item__aside {
    grid-area: aside;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    gap: var(--aes-space-2);
}
.aes-cart-item__subtotal {
    font-size: var(--aes-text-sm);
    font-weight: var(--aes-weight-bold);
    color: var(--aes-ink);
}
.aes-cart-item__remove {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--aes-danger);
    font-size: var(--aes-text-base);
    cursor: pointer;
}
.aes-cart-item__remove:hover,
.aes-cart-item__remove:focus-visible {
    color: var(--aes-primary-dark);
}

/* Icono de éxito del bloque de confirmación (ticket 5.2). Era
   font-size:50px inline; no hay token de ese valor exacto, se
   consolida al más cercano de la rampa (--aes-text-4xl, 40px) --
   mismo criterio de 0.3-D. Diferencia real de 10px, icono
   decorativo en la pantalla de confirmación, no crítico. */
.aes-confirm-icon {
    font-size: var(--aes-text-4xl);
}


/* ============================================================
   FASE 6 — Cuenta y transaccionales
   ============================================================ */

/* ------------------------------------------------------------
   .aes-auth-result — resultado de activación de cuenta (ticket 6.2)
   Mismo patrón que .aes-empty-state (icono + título + texto + CTA),
   con variante de color según éxito/error. Primer uso real de
   --aes-success (antes reservado, sin dato real que mostrar).
   ------------------------------------------------------------ */
.aes-auth-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--aes-space-3);
    padding: var(--aes-space-7) var(--aes-space-4);
}
.aes-auth-result__icon {
    font-size: var(--aes-text-4xl);
}
.aes-auth-result--exito .aes-auth-result__icon {
    color: var(--aes-success);
}
.aes-auth-result--error .aes-auth-result__icon {
    color: var(--aes-danger);
}
.aes-auth-result__title {
    margin: 0;
    font-family: var(--aes-font-display);
    font-size: var(--aes-text-xl);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-ink);
}
.aes-auth-result__message {
    margin: 0;
    max-width: 42ch;
    color: var(--aes-ink-muted);
}
.aes-auth-result__actions {
    margin-top: var(--aes-space-3);
}


/* ============================================================
   MÓDULO DE USUARIO — Mi cuenta / Mi perfil
   ============================================================ */

/* ------------------------------------------------------------
   .aes-cuenta — marco de la sección de usuario: sidebar + contenido.
   Móvil: apilado (sidebar arriba). >=992: dos columnas 1fr / 3fr
   (fracciones, no píxeles fijos: no hace falta un token nuevo).
   ------------------------------------------------------------ */
.aes-cuenta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--aes-space-5);
}
.aes-cuenta__main {
    min-width: 0;
}
@media (min-width: 992px) {
    .aes-cuenta {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
        align-items: start;
    }
}

/* ------------------------------------------------------------
   .aes-cuenta-nav — menú lateral de "Mi cuenta".
   Hover/foco en navy sobre fondo suave (no texto magenta: deuda #20).
   Activo: fondo primary-soft + barra magenta a la izquierda, mismo
   lenguaje que .aes-section-head.
   ------------------------------------------------------------ */
.aes-cuenta-nav {
    padding: var(--aes-space-2);
    background: var(--aes-surface-alt);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-lg);
}
.aes-cuenta-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Enlace hacia el área hermana (Mi cuenta <-> Mi perfil), separado por una línea */
.aes-cuenta-nav__list--cross {
    margin-top: var(--aes-space-2);
    padding-top: var(--aes-space-2);
    border-top: 1px solid var(--aes-border);
}
.aes-cuenta-nav__link {
    display: flex;
    align-items: center;
    gap: var(--aes-space-3);
    padding: var(--aes-space-3);
    border-radius: var(--aes-radius-md);
    font-size: var(--aes-text-base);
    color: var(--aes-ink);
    text-decoration: none;
    transition: background-color var(--aes-duration) var(--aes-ease),
                color var(--aes-duration) var(--aes-ease);
}
.aes-cuenta-nav__link:hover,
.aes-cuenta-nav__link:focus-visible {
    background: var(--aes-navy-soft);
    color: var(--aes-navy);
}
.aes-cuenta-nav__icon {
    flex: 0 0 auto;
    width: 1.25em;
    text-align: center;
    color: var(--aes-ink-muted);
}
.aes-cuenta-nav__link--active,
.aes-cuenta-nav__link--active:hover {
    background: var(--aes-primary-soft);
    box-shadow: inset 4px 0 0 var(--aes-primary);
    color: var(--aes-navy);
    font-weight: var(--aes-weight-semibold);
}
.aes-cuenta-nav__link--active .aes-cuenta-nav__icon {
    color: var(--aes-navy);
}

/* U8.2e: "Cerrar sesión" es un <button> dentro de un <form> (POST + CSRF) con aspecto de enlace */
.aes-logout {
    display: inline;
    margin: 0;
}
.aes-logout__btn {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.aes-logout__btn--navbar {
    width: auto;
    margin-left: var(--aes-space-4);
    color: var(--aes-ink-muted);
    font-size: var(--aes-text-sm);
}
.aes-logout__btn--navbar:hover,
.aes-logout__btn--navbar:focus-visible {
    color: var(--aes-primary);
}

/* ------------------------------------------------------------
   .aes-direcciones / .aes-direccion — libreta de direcciones (U3.3).
   Lista de tarjetas (1 col móvil, 2 col >=768) + formulario plegable.
   ------------------------------------------------------------ */
.aes-direcciones__lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--aes-space-4);
    margin: 0 0 var(--aes-space-5);
    padding: 0;
    list-style: none;
}
@media (min-width: 768px) {
    .aes-direcciones__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.aes-direccion {
    display: flex;
    flex-direction: column;
    gap: var(--aes-space-2);
    padding: var(--aes-space-4);
    background: var(--aes-surface);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-lg);
    box-shadow: var(--aes-shadow-xs);
}
.aes-direccion--principal {
    border-color: var(--aes-primary);
}
.aes-direccion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aes-space-3);
}
.aes-direccion__alias {
    margin: 0;
    font-size: var(--aes-text-md);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-navy);
}
.aes-direccion__badge {
    padding: var(--aes-space-1) var(--aes-space-3);
    border-radius: var(--aes-radius-pill);
    background: var(--aes-primary);
    color: var(--aes-surface);
    font-size: var(--aes-text-xs);
    font-weight: var(--aes-weight-semibold);
}
.aes-direccion__text {
    margin: 0;
    color: var(--aes-ink);
}
.aes-direccion__meta {
    margin: 0;
    font-size: var(--aes-text-sm);
    color: var(--aes-ink-muted);
}
.aes-direccion__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aes-space-2);
    margin-top: auto;
    padding-top: var(--aes-space-3);
    border-top: 1px solid var(--aes-border);
}
.aes-direccion__actions form {
    margin: 0;
}
.aes-direcciones__nueva > summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
}
.aes-direcciones__nueva > summary::-webkit-details-marker {
    display: none;
}
.aes-direcciones__form {
    margin-top: var(--aes-space-4);
    padding: var(--aes-space-5);
    background: var(--aes-surface-alt);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-lg);
}
.aes-direcciones__form-title {
    margin: 0 0 var(--aes-space-2);
    font-size: var(--aes-text-md);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-navy);
}
.aes-direcciones__aviso {
    margin: 0 0 var(--aes-space-4);
    font-size: var(--aes-text-sm);
    color: var(--aes-ink-muted);
}

/* ------------------------------------------------------------
   .aes-direccion--seleccionable — variante del checkout (U3.4.3):
   toda la tarjeta es un <label> alrededor de un radio nativo.
   Reutiliza .aes-direccion/.aes-direcciones__lista de U3.3.
   ------------------------------------------------------------ */
.aes-direcciones__lista--checkout {
    grid-template-columns: minmax(0, 1fr);
}
.aes-direccion--seleccionable {
    cursor: pointer;
    position: relative;
    padding-left: calc(var(--aes-space-4) + 24px);
}
.aes-direccion__radio {
    position: absolute;
    top: var(--aes-space-4);
    left: var(--aes-space-4);
    width: 18px;
    height: 18px;
    accent-color: var(--aes-primary);
}
.aes-direccion--seleccionable:has(.aes-direccion__radio:checked) {
    border-color: var(--aes-primary);
    box-shadow: var(--aes-shadow-sm);
}
.aes-direccion--seleccionable:has(.aes-direccion__radio:focus-visible) {
    outline: 2px solid var(--aes-primary);
    outline-offset: 2px;
}
.aes-direcciones__cambiar-aviso {
    margin-top: var(--aes-space-3);
    font-size: var(--aes-text-sm);
    color: var(--aes-ink-muted);
}
.aes-direcciones__cambiar-aviso a {
    color: var(--aes-navy);
    font-weight: var(--aes-weight-semibold);
    cursor: pointer;
}

/* ------------------------------------------------------------
   .aes-pedidos / .aes-pedido — lista de compras (U5.3a).
   ------------------------------------------------------------ */
.aes-pedidos__lista {
    display: flex;
    flex-direction: column;
    gap: var(--aes-space-4);
    margin: 0 0 var(--aes-space-5);
    padding: 0;
    list-style: none;
}
.aes-pedido {
    display: flex;
    flex-direction: column;
    gap: var(--aes-space-2);
    padding: var(--aes-space-4);
    background: var(--aes-surface);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-lg);
    box-shadow: var(--aes-shadow-xs);
}
.aes-pedido__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aes-space-3);
}
.aes-pedido__folio {
    margin: 0;
    font-size: var(--aes-text-md);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-navy);
}
.aes-pedido__total {
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-ink);
}
.aes-pedido__meta {
    margin: 0;
    font-size: var(--aes-text-sm);
    color: var(--aes-ink-muted);
}
.aes-pedido__estados {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aes-space-2);
}
.aes-pedido__badge {
    padding: var(--aes-space-1) var(--aes-space-3);
    border-radius: var(--aes-radius-pill);
    background: var(--aes-navy);
    color: var(--aes-surface);
    font-size: var(--aes-text-xs);
    font-weight: var(--aes-weight-semibold);
}
.aes-pedido__badge--pago {
    background: var(--aes-surface-alt);
    color: var(--aes-navy);
    border: 1px solid var(--aes-border);
}

/* U5.3b — detalle de compra */
.aes-pedido__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aes-space-2);
    margin-top: var(--aes-space-2);
}
.aes-pedido__volver {
    color: var(--aes-navy);
    font-weight: var(--aes-weight-semibold);
}
.aes-pedido-linea {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--aes-space-3);
}
.aes-pedido-linea__img {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: var(--aes-radius-md);
    background: var(--aes-surface-alt);
}
.aes-pedido-linea__info {
    flex: 1 1 auto;
    min-width: 0;
}
.aes-pedido-linea__titulo {
    margin: 0;
    color: var(--aes-ink);
}
.aes-pedido-resumen {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--aes-space-2) var(--aes-space-4);
    margin: 0;
    padding: var(--aes-space-4);
    background: var(--aes-surface-alt);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-lg);
}
.aes-pedido-resumen dt,
.aes-pedido-resumen dd {
    margin: 0;
    font-weight: var(--aes-weight-regular, 400);
}
.aes-pedido-resumen dd {
    text-align: right;
}
.aes-pedido-resumen__total {
    font-weight: var(--aes-weight-semibold) !important;
    color: var(--aes-navy);
}

/* U11.3 — opiniones */
.aes-opiniones__subtitulo {
    margin: var(--aes-space-5) 0 var(--aes-space-3);
    font-size: var(--aes-text-md);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-navy);
}
.aes-estrellas {
    color: var(--aes-primary);
    white-space: nowrap;
}
.aes-opinion__titulo {
    margin: 0;
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-ink);
}
.aes-opinion__texto {
    margin: 0;
    color: var(--aes-ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.aes-opinion-form {
    margin-top: var(--aes-space-4);
    padding: var(--aes-space-5);
    background: var(--aes-surface-alt);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-lg);
}
.aes-calificacion {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aes-space-2);
}
.aes-calificacion__op {
    position: relative;
    margin: 0;
    cursor: pointer;
}
.aes-calificacion__op input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.aes-calificacion__op span {
    display: inline-block;
    padding: var(--aes-space-2) var(--aes-space-4);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-pill);
    background: var(--aes-surface);
    color: var(--aes-navy);
    font-weight: var(--aes-weight-semibold);
}
.aes-calificacion__op span .fa {
    color: var(--aes-primary);
}
.aes-calificacion__op input:checked + span {
    background: var(--aes-navy);
    border-color: var(--aes-navy);
    color: var(--aes-surface);
}
.aes-calificacion__op input:focus-visible + span {
    outline: 2px solid var(--aes-primary);
    outline-offset: 2px;
}

/* U11.4 — opiniones públicas en la ficha del producto */
.aes-opiniones-producto {
    margin-top: var(--aes-space-5);
    margin-bottom: var(--aes-space-5);
    padding-top: var(--aes-space-5);
    border-top: 1px solid var(--aes-border);
}
.aes-opiniones-producto__titulo {
    margin: 0 0 var(--aes-space-3);
    font-size: var(--aes-text-md);
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-navy);
}
.aes-opiniones-producto__resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aes-space-3);
    margin: 0 0 var(--aes-space-4);
}
.aes-opiniones-producto__promedio {
    font-size: 28px;
    font-weight: var(--aes-weight-semibold);
    color: var(--aes-navy);
}
.aes-opiniones-producto__lista {
    display: flex;
    flex-direction: column;
    gap: var(--aes-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.aes-opinion-item {
    display: flex;
    flex-direction: column;
    gap: var(--aes-space-2);
    padding: var(--aes-space-4);
    background: var(--aes-surface);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-lg);
}
.aes-opinion__meta {
    margin: 0;
    font-size: var(--aes-text-sm);
    color: var(--aes-ink-muted);
}
.aes-opinion__verificada {
    color: var(--aes-navy);
    font-weight: var(--aes-weight-semibold);
}

/* U4.2 — formulario de "Información de tu perfil" */
.aes-perfil-form {
    padding: var(--aes-space-5);
    background: var(--aes-surface-alt);
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-lg);
}

/* U6.2 — corazón de favoritos */
.aes-product-card {
    position: relative;
}
.aes-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--aes-space-2);
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--aes-border);
    border-radius: var(--aes-radius-pill);
    background: var(--aes-surface);
    color: var(--aes-navy);
    box-shadow: var(--aes-shadow-xs);
    cursor: pointer;
    text-decoration: none;
}
.aes-fav svg {
    width: 20px;
    height: 20px;
    fill: none;
}
.aes-fav:hover,
.aes-fav:focus-visible {
    color: var(--aes-primary);
    border-color: var(--aes-primary);
}
.aes-fav--activo {
    color: var(--aes-primary);
}
.aes-fav--activo svg {
    fill: var(--aes-primary);
}
.aes-fav:disabled {
    opacity: 0.6;
    cursor: progress;
}
.aes-product-card .aes-fav {
    position: absolute;
    top: var(--aes-space-3);
    right: var(--aes-space-3);
    z-index: 2;
}
.aes-fav--texto {
    width: auto;
    height: auto;
    padding: var(--aes-space-2) var(--aes-space-4);
    font-size: var(--aes-text-sm);
    font-weight: var(--aes-weight-semibold);
}

/* U6.3 — favorito de una publicación que ya no está en el catálogo (RN-F3) */
.aes-fav-nodisp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--aes-space-3);
    height: 100%;
    padding: var(--aes-space-4);
    background: var(--aes-surface-alt);
    border: 1px dashed var(--aes-border);
    border-radius: var(--aes-radius-lg);
    opacity: 0.8;
}
.aes-fav-nodisp__badge {
    align-self: flex-start;
    padding: var(--aes-space-1) var(--aes-space-3);
    border-radius: var(--aes-radius-pill);
    background: var(--aes-ink-muted);
    color: var(--aes-surface);
    font-size: var(--aes-text-xs);
    font-weight: var(--aes-weight-semibold);
}
.aes-fav-nodisp__titulo {
    margin: 0;
    color: var(--aes-ink-muted);
}