*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
html{
    font-size: 10px;
}
:root{
    --primary-color: #39FF14;
    --secondary-green: #22C55E;
    --dark-green: #15803D;
    --white-color: #FFFFFF;
    --black-color: #121212;
    --text-color: #2D2D2D;
    --bg-color: #FAFAFA;
    --border-color: #D4D4D8;
    --muted-text-color: #71717A;
    --card-color: #FFFFFF;
}
body{
    background-color: var(--bg-color);
    color: var(--text-color);
}
section{
    margin-top: 4rem;
}
p{
    font-size: 1.6rem;
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 1. ACTUALIZAMOS EL HEADER PARA ACOMODAR EL MENÚ */
/* ==========================================================================
   💻 ESTILOS GENERALES Y COMPUTADORA (Fila arriba logo, fila abajo menú)
   ========================================================================== */
header {
    /* Fuente única de verdad para el posicionamiento del header.
       Si en algún momento quieres probar position: fixed en escritorio,
       cambia SOLO esta regla (ver nota al final del archivo) en vez de
       agregar otra regla "header{}" más abajo — así no vuelven a pelear
       dos declaraciones por la cascada. */
    position: sticky;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem; /* espacio entre el logo y las categorías */
    padding: 3rem 6rem 1.5rem 6rem;
    z-index: 500;
    background-color: #0F0F10;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
}

/* 2. ESTILOS DEL MENÚ PRINCIPAL */
.main-nav {
    display: flex;
    justify-content: center; /* Centra las categorías horizontalmente en PC */
    width: 100%;
}

.nav-categories {
display: flex;
gap: 4rem;
list-style: none;

/* CONTROL DE ANCHO (Aquí modificas qué tanto espacio ocupa) */
max-width: 75%; /* Ajusta este porcentaje a tu gusto (ej. 80%, 1000px) */
margin: 0 auto; /* Esto mantiene la caja centrada en la pantalla */

/* ESTRUCTURA PARA DESLIZAR */
overflow-x: auto;
white-space: nowrap;

/* Ocultar scrollbar visualmente */
scrollbar-width: none; 
-ms-overflow-style: none; 

/* TRUCO VITAL: Evita que el overflow corte el submenú hacia abajo */
padding-bottom: 300px;
margin-bottom: -300px;
pointer-events: none;
}
/* 3. Ocultar la barra en Chrome/Safari */
.nav-categories::-webkit-scrollbar {
display: none;
}

.nav-item {
position: relative;
padding: 1rem 0;
/* Mantenemos esta propiedad intacta para que no se encojan las letras al deslizar */
flex-shrink: 0;
/* pero cada categoría real sigue siendo clickeable */
pointer-events: auto;
}

.nav-item > a {
text-decoration: none;
color: var(--black-color);
font-size: 1.4rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}





/** 3. ESTILOS DEL SUBMENÚ (OCULTO POR DEFECTO) */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 180px;
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    opacity: 0;
    visibility: hidden;
    /* Refuerzo: aunque "visibility" tarde en aplicarse durante la
       transición de salida, esto bloquea los clics de inmediato */
    pointer-events: none;
    margin-top: 15px;
    transition: all 0.3s ease;
    z-index: 20;
}

.dropdown-menu li {
    list-style: none;
    text-align: center;
}

.dropdown-menu li a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 1.3rem;
    display: block;
    padding: 0.5rem 2rem;
    transition: color 0.3s ease;
}

.dropdown-menu li a:hover {
    color: var(--primary-color); /* Cambia de color al pasar el cursor */
}





/* EFECTO HOVER: SOLO PARA PANTALLAS DE COMPUTADORA */
@media (min-width: 769px) {
    .nav-item:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        margin-top: 0;
    }
}
.container-logo{
    display: flex;
    align-items: center;
}

/*Estilo para el nombre de la tienda*/
.store-title {
    font-size: 2.8rem;
    font-weight: bold;
    color: var(--black-color);
    text-decoration: none;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/*BANNER*/
.hero-section{
    width: 100%;
    height: 100vh; /* Ocupa el 100% de la altura de la pantalla */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita que el video se salga de los bordes */
    background-color: #f4f4f4; /* Color de fondo mientras carga */
}
/* Esta clase se aplicará tanto a la etiqueta <img> como a <video> */
.hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que no se deforme y cubra todo el espacio */
    z-index: 1; /* Lo pone por debajo del menú (que tiene z-index: 100) */
}
.loading-banner {
    z-index: 2;
    font-size: 1.5rem;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}
/*FIN BANNER*/

.gallery-section{
    padding: 4rem;
}
.gallery-section ul{
    display: flex;
    justify-content: center;
    gap: 6rem;
}
.gallery-section ul li{
    list-style: none;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
}
.gallery-section ul li.active{
    color: var(--black-color);
}
.gallery-container{
    margin-top: 4rem;
}
.gallery-layout{
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1.5fr;
    grid-template-rows: repeat(2, 45rem);
    align-items: center;
    gap: 2rem;
}
.gallery-text{
    max-width: 70%;
    margin-inline: auto;
}
.gallery-subtitle{
    font-size: 1.6rem;
}
.gallery-description{
    font-size: 1.4rem;
    margin-top: 2rem;
    line-height: 1.5;
}
.gallery-last-image{
    grid-area: 2/1/3/3;
}
.link-default{
    display: block;
    margin-top: 2rem;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.4rem;
}
.products-section{
    padding-bottom: 1rem;
}
.products-section + .story-section{
    margin-top: 1.3rem;
}
.products-section h2{
    font-size: 2rem;
    text-align: center;
    margin: 3rem 0 2.5rem;
}
/* NOTA: La cuadrícula responsive de .products-container / #products-container
   está unificada al final de este archivo, junto con sus media queries. */

.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer; /* Cambia el cursor a una manito */
}

.product-image-container {
    position: relative;
    width: 100%;
    /* aspect-ratio 3/4 fuerza a que la imagen sea vertical/alargada */
    aspect-ratio: 3/4; 
    overflow: hidden;
    margin-bottom: 15px;
}

.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Transición suave para el cambio de imagen */
    transition: opacity 0.4s ease; 
}

/* Posiciona la segunda imagen exactamente encima de la primera, pero invisible */
.img-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; 
}

/* Al pasar el mouse, oculta la primera imagen... */
.product:hover .img-default {
    opacity: 0; 
}

/* ... y muestra la segunda imagen */
.product:hover .img-hover {
    opacity: 1; 
}
/* ---------------------------------- */

.product h3 {
    font-size: 1.4rem;
    text-align: center;
    text-transform: uppercase; 
    font-weight: 500;
    margin-bottom: 5px;
}

.product-price {
    margin-top: 0.5rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
}
.story-section{
    padding: 4rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.story-container{
    flex-basis: calc(35% - 1rem);
    flex-shrink: 0;
    background-color: var(--primary-color);
    height: 40rem;
    align-content: center;
}
.story-container-text{
    width: 70%;
    margin-inline: auto;
}
.story-container-text h3{
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111111;
}
.story-container-text p{
    margin-top: 2rem;
    line-height: 1.5;
    color: #111111;
}
.story-container-image{
    flex-basis: calc(65% - 1rem);
    flex-shrink: 0;
    height: 40rem;
}

/* Responsivo: en celular el texto se apila arriba de la imagen
   (el orden ya es correcto en el HTML: texto primero, imagen después) */
@media (max-width: 768px) {
    .story-section{
        flex-direction: column;
        align-items: stretch;
        padding: 3rem 2rem;
        gap: 0;
    }
    .story-container{
        flex-basis: auto;
        height: auto;
        padding: 3rem 0;
    }
    .story-container-text{
        width: 100%;
    }
    .story-container-image{
        flex-basis: auto;
        height: 26rem;
    }
}
.subscriber-section{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    padding-bottom: 2rem;
}
.subscriber-section p{
    font-size: 1.4rem;
}
.container-input{
    position: relative;
}
.container-input input{
    height: 3.5rem;
    padding-left: 1.5rem;
    width: 35rem;
    outline: none;
    border: 1px solid #999;
}
.container-input button{
    position: absolute;
    right: 0;
    height: 3.5rem;
    padding-inline: 1.5rem;
    border: none;
    background-color: var(--black-color);
    color: var(--white-color);
    cursor: pointer;
}
.container-input p{
    display: none;
    position: absolute;
    top: 4rem;
    color: var(--primary-color);
}
/* El footer viejo (selector "footer{}" simple + .footer-logo,
   .container-copyright, .footer-nav) se eliminó de aquí: el
   bloque "FOOTER AMERISHOP — VERSIÓN FINAL CONSOLIDADA" al final
   del archivo ya lo reemplaza por completo (usa footer.store-footer
   y las clases .footer-brand/.footer-contact/.footer-links). Si
   alguna página vieja todavía usa las clases .footer-logo /
   .container-copyright / .footer-nav en su HTML, avísame antes de
   dar esto por cerrado para no dejarla sin estilos. */


/* ESTILOS PARA LOS ÍCONOS DE LA DERECHA */
.header-icons {
    position: absolute;
    right: 0; /* Empuja el contenedor de íconos al extremo derecho de la pantalla */
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

/* Fila Superior */
.header-top {
    display: flex;
    justify-content: center; /* Centra el logo de forma matemática */
    align-items: center;
    position: relative; /* Base indispensable para mover los íconos a la derecha */
    width: 100%;
}

.mobile-menu-btn {
    display: none; /* Oculto por defecto en computadoras */
}

.icon-link {
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.icon-link:hover {
    color: var(--primary-color);
    transform: scale(1.15);
}



/* --- ESTILOS BASE DEL BOTÓN HAMBURGUESA --- */
.mobile-menu-btn {
    display: none; /* Oculto en computadora */
    cursor: pointer;
    color: var(--black-color);
}

/* =========================================
   📱 MEDIA QUERIES PARA CELULARES
   ========================================= */
@media (max-width: 768px) {
    header {
        padding: 0; /* Dejamos que el padding interno lo controle la fila superior */
        gap: 0;
    }

    .header-top {
        justify-content: space-between; /* Hamburguesa izquierda, Íconos derecha */
        padding: 1.5rem 2rem;
    }

    .mobile-menu-btn {
        display: block;
        cursor: pointer;
        color: var(--black-color);
    }

    /* El posicionamiento del logo en móvil (antes absolute+centrado)
       se resolvió después con un layout de grid en la sección final
       "AJUSTES MÓVIL: SCROLL DEL BANNER + LOGO ENTRE CONTROLES" —
       no lo dupliques aquí. */
    .store-title {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }

    .header-icons {
        position: static; /* Rompe el posicionamiento absoluto de PC para fluir a la derecha */
        gap: 1.2rem;
    }

    /* Panel de Menú Móvil Desplegable */
    .main-nav {
        position: absolute;
        top: 100%; /* Abre exactamente debajo de la barra */
        left: -100%;
        width: 100%;
        background-color: #fff;
        transition: left 0.3s ease;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        justify-content: flex-start; /* Cancela el centrado de PC */
    }

    .main-nav.active {
        left: 0;
    }

    .nav-categories {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .nav-item > a {
        display: block;
        padding: 1.5rem 2rem;
        font-size: 1.2rem;
    }

    /* Acordeón de subcategorías en móvil */
    .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
        width: 100%;
        box-shadow: none;
        background-color: #f9f6f3;
        padding: 0;
    }

    .dropdown-menu li a {
        text-align: left;
        padding: 1.2rem 4rem;
        font-size: 1.1rem;
    }

    .nav-item.open .dropdown-menu {
        display: flex;
    }
    .nav-categories {
        overflow-x: visible;
        padding-bottom: 0;
        margin-bottom: 0;
        pointer-events: auto;
    }

    .main-nav {
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
}


/* Tarjeta de producto completamente limpia y sin bordes */
    .product-card {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        transition: transform 0.3s ease;
        text-decoration: none;
        color: inherit;
        text-align: left;
    }
    .product-card:hover {
        transform: translateY(-4px);
    }
    /* Contenedor de la imagen que maneja el aspecto 3:4 */
    .product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f7f7f7;
    /* Crea su propio contexto de apilamiento: nada de otras tarjetas
       (ni z-index externos) puede pintarse encima de este wrapper. */
    isolation: isolate;
    z-index: 1;
    }
    .product-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.4s ease;
    }
    /* Botones de navegación (Flechas) en Hover */
    .product-carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.9);
        border: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 10;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    /*
    .product-carousel-btn:hover {
        background: #ffffff;
        transform: translateY(-50%) scale(1.05);
    }*/
    
    .product-carousel-btn.prev {
        left: 15px;
    }
    .product-carousel-btn.next {
        right: 15px;
    }


    /* Las flechas se muestran al pasar el cursor por TODA la tarjeta
       (no solo por la imagen), evitando que la opacidad se apague
       cuando el puntero intenta llegar a la flecha derecha. */
    
    .product-image-wrapper:hover .product-carousel-btn {
        opacity: 1;
    }

    /* Textos informativos de la tarjeta */
    .product-info {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.2rem 0;
    }
    .product-title {
        font-size: 1.25rem;
        font-weight: 500;
        color: #222;
        margin: 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-price {
        font-size: 1.35rem;
        font-weight: 700;
        color: #000;
        margin: 0;
    }
    /* Animación de carga */
    .loading-text {
        grid-column: 1 / -1;
        text-align: center;
        padding: 3rem 0;
        font-weight: 500;
        color: #777;
    }
    
/* ==========================================================================
   🛍️ CUADRÍCULA DE PRODUCTOS (unifica .products-container y #products-container)
   ========================================================================== */
.products-container,
#products-container {
    display: grid !important;
    /* Móvil (por defecto): 2 columnas */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    /* Margen de 24px a los lados para que las tarjetas no peguen con la orilla de la pantalla */
    padding: 0 24px !important;
    /* Ancho máximo centrado para que las tarjetas en PC no se estiren de más */
    max-width: 1480px;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tablet: 3 columnas */
@media (min-width: 768px) {
    .products-container,
    #products-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        padding: 0 24px !important;
    }
}

/* Escritorio: 4 columnas */
@media (min-width: 1024px) {
    .products-container,
    #products-container {
        /* Reducimos el gap para que las tarjetas ganen más ancho real */
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
        padding: 0 32px !important;
    }
}


/*VISTAZO RAPIDOOOOOOO

/* Botón "Vistazo rápido" */
.product-quickview-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    border: none;
    background: rgba(16, 16, 16, 0.75);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 5;
}
.product-image-wrapper:hover .product-quickview-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Panel expandido (fila completa dentro del grid de productos) */
.quickview-panel {
    grid-column: 1 / -1;
    position: relative;
    /* Aísla el panel de cualquier elemento del grid que pudiera
       reacomodarse encima al insertarse una fila nueva */
    isolation: isolate;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    background-color: #fff;
    border-radius: 8px;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.quickview-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Evita que .quickview-info (o cualquier otro elemento) 
       pueda pintarse encima de la imagen y robarse los clics 
       del botón derecho del carrusel */
    isolation: isolate;
    position: relative;
    z-index: 1;
}
.quickview-main-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 55rem;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f7f7f7;
}
.quickview-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* En el panel las flechas se ven siempre, no solo al hover */
.quickview-main-image .product-carousel-btn {
    opacity: 1;
}
.quickview-thumbnails {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
}
.quickview-thumb {
    width: 6rem;
    height: 8rem;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.quickview-thumb.active,
.quickview-thumb:hover {
    opacity: 1;
    border-color: var(--primary-color);
}
.quickview-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: flex-start;
    padding-top: 2rem;
}
.quickview-title {
    font-size: 2.2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.quickview-price {
    font-size: 1.8rem;
    font-weight: bold;
}
.quickview-add-btn {
    padding: 1.2rem;
    border: none;
    background-color: var(--black-color);
    color: var(--white-color);
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.quickview-add-btn:hover {
    background-color: var(--primary-color);
}
.quickview-description p {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--text-color);
}
.quickview-close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-color);
    font-size: 2.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: background 0.2s ease, transform 0.2s ease;
}
.quickview-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}



/* scroll-margin-top: al abrir el vistazo rápido, el scroll se detiene DEBAJO
   del header y del submenú fijos (antes tapaban el título y la descripción) */
.quickview-panel {
    padding: 2.4rem;
    scroll-margin-top: calc(var(--header-height, 150px) + 6rem);
}
.quickview-main-image {
    max-height: none;
}

/* Distribución del vistazo rápido en computadora (en celular no cambia):
   [ imagen ] [ título, precio, descripción, botón ]
   [ imagen ] [ miniaturas, alineadas con el pie de la imagen ]
   La columna de la imagen mide lo mismo que la tarjeta (--card-width lo pone main.js) */
@media (min-width: 769px) {
    .quickview-panel {
        width: 90%;
        justify-self: center;
        grid-template-columns: var(--card-width, 27rem) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "imagen info"
            "imagen miniaturas";
        column-gap: 3rem;
        row-gap: 2.4rem;
    }
    /* La galería deja que sus hijos (imagen y miniaturas) se acomoden en el grid del panel */
    .quickview-gallery {
        display: contents;
    }
    .quickview-main-image {
        grid-area: imagen;
        z-index: 1;
    }
    .quickview-thumbnails {
        grid-area: miniaturas;
        align-self: end;
    }
    .quickview-info {
        grid-area: info;
        padding-top: 0.6rem;
    }
}

@media (max-width: 768px) {
    .quickview-panel {
        grid-template-columns: 1fr;
    }
    .product-quickview-btn {
        display: none;
    }
    .product-card {
        cursor: pointer;
    }
}

@media (max-width: 768px) {
    /* Anula el truco de escritorio: en móvil no hay drag-scroll horizontal,
       necesitamos scroll vertical normal para ver toda la lista */
    .nav-categories {
        overflow-x: visible;
        padding-bottom: 0;
        margin-bottom: 0;
        pointer-events: auto;
    }

    /* El panel lateral necesita su propio scroll vertical,
       para que quepan todas las categorías + subcategorías abiertas */
    .main-nav {
        max-height: calc(100vh - 8rem); /* ajusta el 8rem si tu header móvil mide distinto */
        overflow-y: auto;
    }
}


/*OFERTA Y SUBASTAAAAAAAAAAAA*/
.secondary-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b5c6c9; /* tono pastel — ajústalo a tu paleta */
    padding: 1.2rem 0;
}
.secondary-nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    padding: 0 2rem;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    transition: opacity 0.2s ease;
}
.secondary-nav-link:last-child {
    border-right: none;
}
.secondary-nav-link:hover {
    opacity: 0.75;
}

.discount-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: #c0392b;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
    z-index: 6;
}
.product-price-offer {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.product-price-offer .price-current {
    font-weight: 700;
    color: #111;
}
.product-price-offer .price-original {
    text-decoration: line-through;
    color: #999;
    font-size: 1.2rem;
}
.product-price-offer .price-label-offer {
    color: #c0392b;
    font-weight: 600;
    font-size: 1.2rem;
}



/*DISEÑO CARRITO DE COMPRAS*/
.cart-count-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    min-width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
}



.cart-section {
    padding: 0 3rem 5rem 3rem;
}
.cart-title {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 3rem;
}

.cart-empty {
    text-align: center;
    padding: 5rem 0;
}
.cart-empty p {
    margin-bottom: 1.5rem;
    color: #777;
}
.cart-empty-link {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: var(--black-color);
    color: var(--white-color);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cart-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.cart-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}
.cart-item-image {
    width: 8rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.cart-item-info {
    flex-grow: 1;
}
.cart-item-name {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.cart-item-price {
    font-size: 1.3rem;
    font-weight: 700;
}
.cart-item-remove {
    background: none;
    border: none;
    color: #c0392b;
    cursor: pointer;
    font-size: 1.4rem;
    padding: 0.8rem;
    transition: transform 0.2s ease;
}
.cart-item-remove:hover {
    transform: scale(1.15);
}

.cart-summary {
    background-color: #fff;
    border-radius: 8px;
    padding: 2rem;
    height: fit-content;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.cart-summary h3 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
}
.cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 1rem;
}
.cart-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.6rem;
    font-weight: 700;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    margin-bottom: 2rem;
}
.cart-checkout-btn {
    width: 100%;
    padding: 1.3rem;
    border: none;
    background-color: var(--black-color);
    color: var(--white-color);
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: not-allowed;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }
}


/* ===== Overlay ===== */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 200;
}
.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===== Drawer ===== */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 201;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
}
.cart-drawer.active {
    transform: translateX(0);
}

.cart-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.cart-drawer-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
}
.cart-drawer-close {
    background: none;
    border: none;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-color);
}

/* Zona scrolleable de productos */
.cart-drawer-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cart-drawer-item {
    display: flex;
    gap: 1.5rem;
}
.cart-drawer-item-image {
    width: 8rem;
    height: 10.5rem;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background-color: #f7f7f7;
}
.cart-drawer-item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cart-drawer-item-name {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
}
.cart-drawer-item-price {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.3rem;
}
.cart-drawer-item-price .price-final {
    font-weight: 700;
}
.cart-drawer-item-price .price-original {
    text-decoration: line-through;
    color: #999;
    font-size: 1.15rem;
}
.cart-drawer-item-remove {
    align-self: flex-start;
    margin-top: 0.3rem;
    background: none;
    border: none;
    color: #999;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.3rem;
    transition: color 0.2s ease;
}
.cart-drawer-item-remove:hover {
    color: #c0392b;
}

/* Footer fijo con subtotal y botón de pago */
.cart-drawer-footer {
    flex-shrink: 0;
    padding: 2rem;
    border-top: 1px solid #eee;
}
.cart-drawer-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}
.cart-drawer-note {
    font-size: 1.15rem;
    color: #888;
    margin-bottom: 1.5rem;
}
.cart-drawer-checkout-btn {
    width: 100%;
    padding: 1.4rem;
    border: none;
    background-color: var(--black-color);
    color: var(--white-color);
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cart-drawer-empty {
    text-align: center;
    padding: 4rem 0;
    color: #888;
}

@media (max-width: 480px) {
    .cart-drawer {
        max-width: 100%;
    }
}


/*PARA LOS PEDIDOOOOOOS*/
.orders-section {
    padding: 0 3rem 5rem 3rem;
    max-width: 900px;
    margin: 0 auto;
}
.orders-title {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 3rem;
}

.orders-empty {
    text-align: center;
    padding: 5rem 0;
}
.orders-empty p {
    margin-bottom: 1.5rem;
    color: #777;
}
.orders-empty-link {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: var(--black-color);
    color: var(--white-color);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.order-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}
.order-card-id {
    font-size: 1.5rem;
    font-weight: 700;
}
.order-card-date {
    font-size: 1.2rem;
    color: #888;
    margin-top: 0.3rem;
}

.order-status-badge {
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
/* Los colores de cada .status-* se definen una sola vez, en
   "ESTADOS DEL PEDIDO" (sección MIS PEDIDOS — ESTILO AMERISHOP),
   que es la versión final. No los repitas aquí. */

.order-card-items {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}
.order-item-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.order-item-image {
    width: 5.5rem;
    height: 7rem;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background-color: #f7f7f7;
}
.order-item-name {
    font-size: 1.3rem;
    font-weight: 500;
}
.order-item-price {
    font-size: 1.2rem;
    color: #666;
    margin-top: 0.2rem;
}

.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    font-size: 1.5rem;
    font-weight: 700;
}

.orders-back-link {
    display: inline-block;
    font-size: 1.3rem;
    color: var(--text-color);
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: opacity 0.2s ease;
}
.orders-back-link:hover {
    opacity: 0.7;
}


/*11. ESTADO DE SESIÓN EN EL HEADER (login / hola + logout)*/


#auth-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.user-greeting {
    font-size: 1.3rem;
    color: var(--text-color);
    white-space: nowrap;
}
@media (max-width: 480px) {
    .user-greeting {
        display: none; /* en pantallas muy chicas, solo mostramos el ícono de logout */
    }
}



/*9. MODAL DE CHECKOUT (dirección + confirmación)*/
.checkout-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1000;
}
.checkout-overlay.active { opacity: 1; visibility: visible; }

.checkout-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -48%);
    width: 100%; max-width: 480px; max-height: 85vh;
    overflow-y: auto;
    background: #fff; border-radius: 12px; padding: 2.5rem;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
    z-index: 1001;
}
.checkout-modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

.checkout-modal-close {
    position: absolute; top: 1.2rem; right: 1.5rem;
    background: none; border: none; font-size: 2.2rem; line-height: 1;
    cursor: pointer; color: var(--text-color);
}

.checkout-step h3 { font-size: 1.8rem; margin-bottom: 1.5rem; text-align: center; }

.checkout-address-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.checkout-address-option {
    display: flex; align-items: flex-start; gap: 1rem;
    border: 1px solid #ddd; border-radius: 8px; padding: 1.2rem;
    cursor: pointer;
}
.checkout-address-option input { margin-top: 0.3rem; }
.checkout-address-info { display: flex; flex-direction: column; gap: 0.3rem; font-size: 1.3rem; }
.checkout-address-info span { color: #777; font-size: 1.2rem; }

.checkout-link-btn {
    background: none; border: none; color: var(--primary-color);
    font-size: 1.3rem; cursor: pointer; padding: 0.5rem 0; margin-bottom: 1rem;
    text-decoration: underline;
}

.checkout-new-address-form { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 1.5rem; }
.checkout-new-address-form.hidden { display: none; }
.checkout-form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.checkout-form-row label { font-size: 1.2rem; font-weight: 600; }
.checkout-form-row input, .checkout-form-row textarea {
    padding: 1rem; border: 1px solid #ccc; border-radius: 6px; font-size: 1.3rem; font-family: inherit;
}
.checkout-checkbox-row { display: flex; align-items: center; gap: 0.8rem; font-size: 1.2rem; }

.checkout-empty-note { font-size: 1.3rem; color: #777; margin-bottom: 1.5rem; }
.checkout-error { color: #c0392b; font-size: 1.2rem; margin-bottom: 1rem; text-align: center; }

.checkout-primary-btn {
    display: block; width: 100%; padding: 1.3rem;
    background: var(--black-color); color: var(--white-color);
    border: none; text-align: center; text-decoration: none;
    font-size: 1.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer;
}

.checkout-confirmation { text-align: center; }
.checkout-success-icon {
    width: 5rem; height: 5rem; border-radius: 50%;
    background: #dcfce7; color: #15803d;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; margin: 0 auto 1.5rem auto;
}
.checkout-confirmation-note { font-size: 1.3rem; color: #666; margin: 1rem 0 2rem 0; line-height: 1.5; }
.checkout-whatsapp-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.8rem;
    background: #25D366; color: #fff; padding: 1.3rem; border-radius: 8px;
    text-decoration: none; font-weight: 600; font-size: 1.4rem; margin-bottom: 1.5rem;
}
.checkout-fallback-note { font-size: 1.2rem; color: #888; margin-bottom: 1.5rem; }

@media (max-width: 480px) {
    .checkout-modal { max-width: 92%; padding: 2rem; }
}



/* ==========================================================
   PALETA AMERISHOP — SOLO COLORES
   (:root y body ya están consolidados al inicio del archivo)
   ========================================================== */

/* Header y navegación */
.nav-item > a,
.store-title,
.icon-link,
.mobile-menu-btn {
  color: #FFFFFF;
}

.nav-item > a:hover,
.icon-link:hover,
.dropdown-menu li a:hover {
  color: #39FF14;
}

.dropdown-menu {
  background-color: #FFFFFF;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
}

.dropdown-menu li a {
  color: #2D2D2D;
}

@media (max-width: 768px) {
  .main-nav {
    background-color: #18181B;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20);
  }

  .nav-item {
    border-bottom-color: #3F3F46;
  }

  .nav-item > a {
    color: #FFFFFF;
  }

  .dropdown-menu {
    background-color: #1F2937;
  }

  .dropdown-menu li a {
    color: #D4D4D8;
  }
}

/* Banner y secciones */
.hero-section,
.product-image-wrapper,
.quickview-main-image,
.cart-drawer-item-image,
.order-item-image {
  background-color: #F1F5F9;
}

.loading-banner {
  color: #71717A;
}

/* El color final de .story-container ya vive en la regla base,
   junto con el resto de sus estilos responsivos. */

/* Links y acciones principales */
.link-default,
.container-input p,
.checkout-link-btn {
  color: #15803D;
}

.link-default:hover,
.checkout-link-btn:hover {
  color: #39FF14;
}

/* Inputs y suscripción */
.container-input input {
  border-color: #D4D4D8;
  background-color: #FFFFFF;
  color: #2D2D2D;
}

.container-input button {
  background-color: #39FF14;
  color: #111111;
}

.container-input button:hover {
  background-color: #22C55E;
}

/* Tarjetas y galería de producto */
/*
.product-title {
  color: #2D2D2D;
}*/

.product-price,
.product-price-offer .price-current {
  color: #15803D;
}

.product-price-offer .price-original,
.cart-drawer-item-price .price-original {
  color: #A1A1AA;
}

.product-price-offer .price-label-offer {
  color: #15803D;
}

.product-carousel-btn {
  background-color: rgba(255, 255, 255, 0.94);
  color: #121212;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
/*
.product-carousel-btn:hover {
  background-color: #39FF14;
  color: #111111;
}*/

.product-quickview-btn {
  background-color: rgba(18, 18, 18, 0.92);
  color: #FFFFFF;
}

.product-quickview-btn:hover {
  background-color: #39FF14;
  color: #111111;
}

/* Vistazo rápido */
.quickview-panel {
  background-color: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.quickview-thumb.active,
.quickview-thumb:hover {
  border-color: #39FF14;
}

.quickview-description p {
  color: #71717A;
}

.quickview-add-btn,
.checkout-primary-btn,
.cart-drawer-checkout-btn {
  background-color: #39FF14;
  color: #111111;
  border-radius: 12px;
}

.quickview-add-btn:hover,
.checkout-primary-btn:hover,
.cart-drawer-checkout-btn:hover {
  background-color: #15803D;
  color: #FFFFFF;
}

.quickview-close-btn {
  background-color: #F1F5F9;
  color: #2D2D2D;
}

.quickview-close-btn:hover {
  background-color: #D4D4D8;
}

/* Barra secundaria, rebajas y subastas:
   el color final de .secondary-nav vive más abajo, junto a
   "MENÚ DE ESCRITORIO — PALETA AMERISHOP", que es el que de
   verdad se aplica (no lo dupliques aquí). */

/* Badges de descuentos */
.discount-badge {
  background-color: #EF4444;
  color: #FFFFFF;
  border-radius: 8px;
}

/* Carrito */
.cart-count-badge {
  background-color: #39FF14;
  color: #111111;
}

.cart-item,
.cart-summary-total,
.cart-drawer-header,
.cart-drawer-footer {
  border-color: #E4E4E7;
}

.cart-item-remove,
.cart-drawer-item-remove {
  color: #EF4444;
}

.cart-item-remove:hover,
.cart-drawer-item-remove:hover {
  color: #B91C1C;
}

.cart-summary,
.cart-drawer {
  background-color: #FFFFFF;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.cart-summary-row,
.cart-drawer-note,
.cart-empty p,
.cart-drawer-empty,
.loading-text {
  color: #71717A;
}

.cart-empty-link,
.orders-empty-link {
  background-color: #39FF14;
  color: #111111;
  border-radius: 12px;
}

.cart-empty-link:hover,
.orders-empty-link:hover {
  background-color: #15803D;
  color: #FFFFFF;
}

/* Pedidos */
.order-card {
  background-color: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.order-card-header,
.order-card-footer {
  border-color: #E4E4E7;
}

.order-card-date,
.order-item-price {
  color: #71717A;
}

/* Checkout */
.checkout-modal {
  background-color: #FFFFFF;
  border-radius: 18px;
}

.checkout-address-option {
  border-color: #D4D4D8;
}

.checkout-address-option:has(input:checked) {
  border-color: #39FF14;
  background-color: #F8FAFC;
}

.checkout-form-row input,
.checkout-form-row textarea {
  border-color: #D4D4D8;
  color: #2D2D2D;
}

.checkout-form-row input:focus,
.checkout-form-row textarea:focus {
  border-color: #39FF14;
  outline: 2px solid rgba(57, 255, 20, 0.22);
}

.checkout-error {
  color: #EF4444;
}

.checkout-success-icon {
  background-color: #DCFCE7;
  color: #15803D;
}


/*Para el logo*/
.container-logo {
  display: flex;
  align-items: center;
}

.store-title {
  display: inline-flex;
  align-items: center;
  height: 64px;
}

.store-logo {
  display: block;
  width: auto;
  max-width: 280px;
  height: 64px;
  object-fit: contain;
}

/* El tamaño del logo en móvil se define una sola vez, más abajo,
   en "AJUSTES MÓVIL: SCROLL DEL BANNER + LOGO ENTRE CONTROLES"
   (esa es la versión final que realmente se aplica). */




/*PARA LOS BANNERS*/

.hero-carousel {
    width: 100%;
    height: 100%;
    position: relative;
}
.hero-carousel .hero-media {
    animation: heroFadeIn 0.6s ease;
}
@keyframes heroFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Evita desbordamiento horizontal (en cualquier tamaño de pantalla).
   Usamos "clip" y no "hidden": overflow-x:hidden fuerza a que el
   navegador convierta overflow-y en "auto" automáticamente (así lo
   define la spec de CSS), y eso convierte a <body> en su propio
   contenedor de scroll — rompiendo el position:sticky del header.
   "clip" evita el desborde horizontal sin ese efecto secundario. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.ftco-section,
.container,
.row,
.wrap,
.login-wrap,
.img {
  max-width: 100%;
}

/* Impide que inputs, botones e imágenes amplíen el layout */
img,
input,
button,
textarea,
.form-control {
  max-width: 100%;
}



/* ==========================================================
   MENÚ MÓVIL AMERISHOP — PANEL INFERIOR
   ========================================================== */

@media (max-width: 768px) {
  /* Fondo opaco al abrir el panel */
  #mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  #mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  /* Panel: ocupa aproximadamente la mitad inferior */
  header {
    z-index: 100;
  }

  .main-nav {
  position: fixed !important;
  top: 0 !important;
  right: auto;
  bottom: 0;
  left: 0 !important;

  display: block !important;
  width: min(82vw, 340px) !important;
  height: 100dvh;
  max-height: 100dvh !important;

  overflow-y: auto !important;
  overflow-x: hidden;

  background: #17181B !important;
  border-top: none;
  border-right: 1px solid #2E3238;
  border-radius: 0 20px 20px 0;

  box-shadow: 16px 0 45px rgba(0, 0, 0, 0.34);

  transform: translateX(-105%);
  transition: transform 0.3s ease !important;
  will-change: transform;
}

.main-nav.active {
  left: 0 !important;
  transform: translateX(0);
}


  /* Pequeño indicador visual para deslizar/cerrar */
.main-nav::before {
  display: none;
}

  .nav-categories {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 4px 14px 28px !important;

    overflow: visible !important;
    pointer-events: auto !important;
    white-space: normal;
  }

  .nav-item {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #2E3238 !important;
  }

  .nav-item > a {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 56px;
    padding: 0 42px 0 16px !important;

    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* Flecha de categorías con subcategorías */
  .nav-item:has(.dropdown-menu) > a::after {
    position: absolute;
    right: 18px;
    color: #B7BEC8;
    font-size: 20px;
    font-weight: 400;
    content: "›";
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .nav-item.open > a {
    color: #39FF14 !important;
  }

  .nav-item.open > a::after {
    color: #39FF14;
    transform: rotate(90deg);
  }

  .nav-item > a:hover,
  .nav-item > a:focus {
    background: #22252A;
    color: #39FF14 !important;
  }

  /* Subcategorías desplegadas */
  .dropdown-menu {
    position: static !important;
    display: none;
    width: 100%;
    margin: 0 !important;
    padding: 4px 0 10px !important;

    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;

    background: #0F0F10 !important;
    border-left: 2px solid #39FF14;
    border-radius: 0 10px 10px 0;
    box-shadow: none !important;
  }

  .nav-item.open .dropdown-menu {
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }

  .dropdown-menu li {
    text-align: left;
  }

  .dropdown-menu li a {
    display: block;
    padding: 12px 18px 12px 22px !important;

    color: #B7BEC8 !important;
    font-size: 12px !important;
    font-weight: 600;
    text-align: left;
  }

  .dropdown-menu li a:hover,
  .dropdown-menu li a:focus {
    background: #22252A;
    color: #39FF14 !important;
  }
}



/* ==========================================================
   MENÚ DE ESCRITORIO — PALETA AMERISHOP
   Solo colores; no modifica la funcionalidad
   ========================================================== */

@media (min-width: 769px) {
  /* Enlaces de categorías */
  .nav-item > a {
    color: #FFFFFF;
  }

  .nav-item > a:hover {
    color: #39FF14;
  }

  /* Categoría abierta mientras se muestra su submenú */
  .nav-item:hover > a {
    color: #39FF14;
  }

  /* Panel de subcategorías */
  .dropdown-menu {
    background-color: #17181B;
    border: 1px solid #2E3238;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
  }

  /* Enlaces internos del submenú */
  .dropdown-menu li a {
    color: #B7BEC8;
  }

  .dropdown-menu li a:hover {
    background-color: #22252A;
    color: #39FF14;
  }

  /* Logo, iconos y acciones del header */
  .store-title,
  .icon-link {
    color: #FFFFFF;
  }

  .icon-link:hover {
    color: #39FF14;
  }

  /* Badge del carrito */
  .cart-count-badge {
    background-color: #39FF14;
    color: #0F0F10;
  }
}


/* Elimina el espacio entre header y banner */
.hero-section {
  margin-top: 0;
}

/* Submenú: misma identidad que el menú principal */
.secondary-nav {
  background-color: #0F0F10;
  border-top: 1px solid #2E3238;
  border-bottom: 1px solid #2E3238;
}

.secondary-nav-link {
  color: #FFFFFF;
  border-right-color: #2E3238;
}

.secondary-nav-link:hover {
  color: #39FF14;
  opacity: 1;
}


/* ==========================================================
   ALTURA DEL BANNER EN COMPUTADORA
   Alto de la ventana menos el header (--header-height lo calcula main.js),
   menos el submenú (~44px) y ~90px para que se asomen los productos.
   Para hacerlo más alto o más bajo, cambia solo el 135px.
   ========================================================== */
@media (min-width: 769px) {
  .hero-section {
    height: calc(100svh - var(--header-height, 150px) - 135px);
    min-height: 320px;
    max-height: 680px;
  }
}

/* ==========================================================
   AJUSTES MÓVIL: SCROLL DEL BANNER + LOGO ENTRE CONTROLES
   ========================================================== */

@media (max-width: 768px) {
  /* Evita que el banner sea más alto que la pantalla útil del celular */
.hero-section {
    height: calc(68svh - 72px);
    min-height: 330px;
    max-height: 480px;
    margin-top: 0;
  }

  /*
    Distribución:
    [ botón hamburguesa ] [ logo centrado en el espacio disponible ] [ iconos ]
  */
  .header-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
  }

  .mobile-menu-btn {
    grid-column: 1;
  }

  /* El logo ya no se centra respecto a toda la pantalla */
  .container-logo {
    position: static;
    left: auto;
    transform: none;

    grid-column: 2;
    justify-self: center;
    min-width: 0;
  }

  .store-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
  }

  /* Evita que el logo invada los iconos en teléfonos angostos */
  .store-logo {
    width: auto;
    max-width: min(35vw, 180px);
    max-height: 42px;
    height: auto;
    object-fit: contain;
  }

  .header-icons {
    position: static;
    grid-column: 3;
    justify-self: end;
    gap: 8px;
  }
}



/* ==========================================================
   CORRECCIÓN DE SCROLL TÁCTIL EN MÓVIL
   ========================================================== */

@media (max-width: 768px) {
  html {
    overflow-y: auto;
    scroll-behavior: auto;
  }

  body {
    min-height: 100%;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  /* El overlay cerrado no debe recibir ningún toque */
  #mobile-nav-overlay:not(.active) {
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
  }

  /* Solo existe sobre la tienda cuando el menú está abierto */
  #mobile-nav-overlay.active {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99 !important;
  }

  /* El panel cerrado tampoco debe interceptar gestos */
  .main-nav:not(.active) {
    pointer-events: none;
  }

  .main-nav.active {
    pointer-events: auto;
  }
}


/* ==========================================================
   HEADER: SESIÓN Y LOGOUT
   (el position/z-index/fondo del header ya viven en la regla
   única "header{}" al inicio del archivo — no lo repitas aquí)
   ========================================================== */

/* Texto "Hola, NombreUsuario" */
.user-greeting {
  color: #FFFFFF !important;
  font-size: 1.3rem;
  font-weight: 500;
}

/* El botón de cerrar sesión debe verse como los demás iconos */
#logout-btn.icon-link,
button.icon-link {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;
  border: none !important;
  outline: none;

  background-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* Mantiene el mismo hover verde de los otros iconos */
#logout-btn.icon-link:hover,
button.icon-link:hover {
  background-color: transparent !important;
  color: #39FF14 !important;
  transform: scale(1.15);
}

/* Evita el fondo claro de Bootstrap al recibir foco */
#logout-btn.icon-link:focus,
#logout-btn.icon-link:active,
#logout-btn.icon-link:focus-visible {
  background-color: transparent !important;
  color: #39FF14 !important;
  box-shadow: none !important;
}

/* Indicador accesible de teclado, sin fondo blanco */
#logout-btn.icon-link:focus-visible {
  outline: 2px solid #39FF14 !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================
   ALTERNATIVA: header con position:fixed SOLO en escritorio
   ----------------------------------------------------------
   Descomenta este bloque y cambia "position: sticky" por
   "position: fixed" en la regla única de arriba SOLO dentro de
   este media query si de verdad necesitas que el header salga
   del flujo normal en escritorio. OJO: con fixed el header deja
   de ocupar espacio, así que hay que compensarlo con
   body{padding-top:...}, y ese valor se rompe cada vez que la
   altura real del header cambia (menú abierto, banner de oferta,
   etc). Con "sticky" (como está configurado arriba) el header ya
   se queda fijo al hacer scroll sin ese problema, así que solo
   actives esto si tienes una razón concreta para necesitar fixed.

@media (min-width: 769px) {
  header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  }

  body {
    padding-top: 132px;
  }
}
*/



/* ==========================================================
   MIS PEDIDOS — ESTILO AMERISHOP
   No modifica header, carrito ni JavaScript
   ========================================================== */

.orders-section {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 4rem 3rem 7rem;
    background-color: #F8FAFC;
    color: #18181B;
}

body:has(.orders-section) {
    background-color: #F8FAFC;
}

/* Volver */
.orders-back-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.8rem;
    color: #52525B;
    font-size: clamp(1.5rem, 1.2vw + 1rem, 1.8rem);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.orders-back-arrow {
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 400;
}

.orders-back-link:hover {
    color: #15803D;
    opacity: 1;
    transform: translateX(-3px);
}

/* Layout de escritorio: barra lateral + pedidos */
.orders-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* ==========================================================
   MENÚ LATERAL
   ========================================================== */

.account-sidebar {
    overflow: hidden;
    border: 1px solid #E4E4E7;
    border-radius: 18px;
    background-color: #FFFFFF;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.account-sidebar-label {
    margin: 0;
    padding: 2rem 2rem 1.2rem;
    color: #71717A;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.account-sidebar-list {
    padding: 0.6rem 0 1.2rem;
}

.account-sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    min-height: 58px;
    padding: 0 2rem;
    color: #52525B;
    font-size: 1.45rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.account-sidebar-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: #52525B;
    font-size: 1.8rem;
    line-height: 1;
}

.account-sidebar-item:hover {
    background-color: #F1F5F9;
    color: #18181B;
}

.account-sidebar-item.active {
    background: #ECFDF3;
    color: #15803D;
}

.account-sidebar-item.active::after {
    position: absolute;
    top: 12px;
    right: 0;
    bottom: 12px;
    width: 3px;
    border-radius: 99px 0 0 99px;
    background-color: #39FF14;
    content: "";
}

.account-sidebar-item.active .account-sidebar-icon {
    color: #15803D;
}

/* ==========================================================
   CONTENIDO PRINCIPAL
   ========================================================== */

.orders-main-content {
    min-width: 0;
}

.orders-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 2.4rem;
}

.orders-eyebrow {
    margin: 0 0 0.6rem;
    color: #15803D;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.orders-title {
    margin: 0;
    color: #18181B;
    font-size: clamp(2.6rem, 4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    text-align: left;
}

/* ==========================================================
   TARJETAS DE PEDIDOS
   ========================================================== */

.order-card {
    margin-bottom: 1.8rem;
    padding: 2.2rem;
    border: 1px solid #E4E4E7;
    border-radius: 18px;
    background-color: #FFFFFF;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    color: #18181B;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.order-card:hover {
    border-color: #D4D4D8;
    background-color: #F8FAFC;
}

.order-card-header {
    align-items: center;
    padding-bottom: 1.8rem;
    margin-bottom: 1.8rem;
    border-bottom-color: #E4E4E7;
}

.order-card-id {
    color: #18181B;
    font-size: 1.7rem;
    font-weight: 800;
}

.order-card-date {
    margin-top: 0.5rem;
    color: #71717A;
    font-size: 1.25rem;
}

.order-card-items {
    gap: 1.4rem;
    margin-bottom: 1.8rem;
}

.order-item-row {
    gap: 1.5rem;
}

.order-item-image {
    width: 6.5rem;
    height: 8rem;
    border: 1px solid #E4E4E7;
    border-radius: 12px;
    background-color: #F1F5F9;
}

.order-item-name {
    color: #18181B;
    font-size: 1.4rem;
    font-weight: 700;
}

.order-item-price {
    margin-top: 0.5rem;
    color: #71717A;
    font-size: 1.25rem;
}

.order-card-footer {
    padding-top: 1.8rem;
    border-top-color: #E4E4E7;
    color: #18181B;
    font-size: 1.5rem;
}

.order-card-total {
    color: #15803D;
    font-size: 1.7rem;
    font-weight: 800;
}

/* ==========================================================
   ESTADOS DEL PEDIDO
   ========================================================== */

.order-status-badge {
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.6rem 1.15rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Pendiente de pago */
.status-pending_payment {
    border-color: #C88600;
    background-color: #FFF4CC;
    color: #C88600;
}

/* Confirmado / En proceso */
.status-confirmed {
    border-color: #3B82F6;
    background-color: rgba(59, 130, 246, 0.14);
    color: #60A5FA;
}

/* Preparando */
.status-preparing {
    border-color: #3B82F6;
    background-color: rgba(59, 130, 246, 0.14);
    color: #60A5FA;
}

/* En ruta / Enviado */
.status-on_route {
    border-color: #A855F7;
    background-color: rgba(168, 85, 247, 0.14);
    color: #C084FC;
}

/* Entregado */
.status-delivered {
    border-color: #22C55E;
    background-color: rgba(34, 197, 94, 0.14);
    color: #4ADE80;
}

/* Cancelado */
.status-cancelled {
    border-color: #EF4444;
    background-color: rgba(239, 68, 68, 0.14);
    color: #F87171;
}

/* Estados vacíos y carga */
.orders-empty,
.loading-text {
    padding: 5rem 2rem;
    border: 1px dashed #D4D4D8;
    border-radius: 18px;
    background-color: #FFFFFF;
    color: #71717A;
    text-align: center;
}

.orders-empty p {
    color: #71717A;
}

.orders-empty-link {
    border-radius: 14px;
    background-color: #39FF14;
    color: #111111;
}

.orders-empty-link:hover {
    background-color: #2EE60F;
    color: #111111;
}

/* ==========================================================
   RESPONSIVE — TABLET Y MÓVIL
   ========================================================== */

@media (max-width: 900px) {
    .orders-section {
        padding: 3rem 2rem 5rem;
    }

    .orders-layout {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .account-sidebar {
        width: 100%;
    }

    .account-sidebar-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0.8rem;
        gap: 0.7rem;
    }

    .account-sidebar-label {
        padding-bottom: 0.5rem;
    }

    .account-sidebar-item {
        min-height: 50px;
        justify-content: center;
        padding: 0 1rem;
        border-radius: 10px;
        font-size: 1.2rem;
    }

    .account-sidebar-item.active::after {
        top: auto;
        right: 20%;
        bottom: 0;
        left: 20%;
        width: auto;
        height: 3px;
        border-radius: 99px 99px 0 0;
    }
}

@media (max-width: 560px) {
    .orders-section {
        padding: 2.4rem 1.5rem 4rem;
    }

    .orders-back-link {
        margin-bottom: 2rem;
    }

    .account-sidebar-list {
        grid-template-columns: 1fr;
        padding: 0.5rem;
    }

    .account-sidebar-item {
        justify-content: flex-start;
        min-height: 52px;
        padding: 0 1.4rem;
        font-size: 1.35rem;
    }

    .account-sidebar-item.active::after {
        top: 10px;
        right: 0;
        bottom: 10px;
        left: auto;
        width: 3px;
        height: auto;
        border-radius: 99px 0 0 99px;
    }

    .orders-heading {
        margin-bottom: 1.8rem;
    }

    .order-card {
        padding: 1.6rem;
    }

    .order-card-header {
        align-items: flex-start;
        gap: 1.2rem;
    }

    .order-status-badge {
        padding: 0.5rem 0.8rem;
        font-size: 0.9rem;
    }

    .order-item-image {
        width: 5.5rem;
        height: 7rem;
    }

    .order-card-footer {
        font-size: 1.35rem;
    }
}















/* ==========================================================
   CARRITO LATERAL — ESTILO AMERISHOP
   Sin controles de cantidad
   ========================================================== */

/* El carrito debe estar por encima del header fijo */
.cart-overlay {
    z-index: 1000 !important;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(2px);
}

.cart-drawer {
    z-index: 1001 !important;
    width: min(100%, 430px);
    height: 100dvh;
    max-width: 430px;

    background: #FFFFFF;
    color: #111111;
    border-radius: 22px 0 0 22px;
    /* La sombra solo con el carrito abierto: cerrado queda fuera de la pantalla
       y su sombra se asomaba como una franja gris en el borde derecho */
    box-shadow: none;
}

.cart-drawer.active {
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.28);
}

/* Encabezado del carrito */
.cart-drawer-header {
    padding: 2rem 2.2rem;
    border-bottom: 1px solid #E4E4E7;
}

.cart-drawer-header h2 {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    color: #111111;
    font-size: 1.8rem;
    font-weight: 800;
}


.cart-drawer-close {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;

    border-radius: 50%;
    background: transparent;
    color: #71717A;

    font-size: 2.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cart-drawer-close:hover {
    background: #F1F5F9;
    color: #111111;
}

/* Lista desplazable de productos */
.cart-drawer-items {
    padding: 1.8rem 2.2rem;
    gap: 1.8rem;
    background: #FFFFFF;
}

/* Producto individual */
.cart-drawer-item {
    position: relative;
    display: grid;
    grid-template-columns: 8.2rem minmax(0, 1fr) auto;
    gap: 1.4rem;
    align-items: start;

    padding-bottom: 1.8rem;
    border-bottom: 1px solid #E4E4E7;
}

.cart-drawer-item-image {
    width: 8.2rem;
    height: 10.8rem;
    border: 1px solid #E4E4E7;
    border-radius: 10px;
    background: #F8FAFC;
    object-fit: cover;
}

.cart-drawer-item-info {
    gap: 0.55rem;
    padding-top: 0.2rem;
}

.cart-drawer-item-name {
    margin: 0;
    color: #111111;
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.35;
}

.cart-drawer-item-price {
    gap: 0.7rem;
    color: #15803D;
    font-size: 1.3rem;
}

.cart-drawer-item-price .price-final {
    color: #15803D;
    font-weight: 800;
}

.cart-drawer-item-price .price-original {
    color: #A1A1AA;
}

/* Botón visual de eliminar: solo el icono */
.cart-drawer-item-remove {
    display: grid;
    width: 3.6rem;
    height: 3.6rem;
    place-items: center;

    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;

    background: #F0FAEE;
    color: #15803D;

    font-size: 1.45rem;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cart-drawer-item-remove:hover {
    background: #FEE2E2;
    color: #EF4444;
}

/* Footer fijo: subtotal y pago */
.cart-drawer-footer {
    padding: 1.8rem 2.2rem 2.2rem;
    border-top: 1px solid #E4E4E7;
    background: #FFFFFF;
}

.cart-drawer-subtotal-row {
    margin-bottom: 1.2rem;
    color: #111111;
    font-size: 1.65rem;
    font-weight: 800;
}

.cart-drawer-subtotal-row span:last-child {
    color: #15803D;
}

.cart-drawer-note {
    margin-bottom: 1.6rem;
    color: #71717A;
    font-size: 1.1rem;
    line-height: 1.45;
}

.cart-drawer-checkout-btn {
    width: 100%;
    min-height: 5rem;
    border: 0;
    border-radius: 12px;

    background: #39FF14;
    color: #111111;

    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cart-drawer-checkout-btn:hover {
    background: #2EE60F;
    transform: translateY(-1px);
}

.cart-drawer-empty {
    color: #71717A;
    font-size: 1.35rem;
}

/* Carrito móvil: panel lateral de 80% con tienda visible detrás */
@media (max-width: 768px) {
    .cart-drawer {
        width: 80vw !important;
        max-width: 80vw !important;
        height: 100dvh;
        border-radius: 22px 0 0 22px;
    }

    .cart-overlay.active {
        background: rgba(0, 0, 0, 0.62);
        backdrop-filter: blur(2px);
    }

    .cart-drawer-header,
    .cart-drawer-items,
    .cart-drawer-footer {
        padding-right: 1.6rem;
        padding-left: 1.6rem;
    }

    .cart-drawer-item {
        grid-template-columns: 7.2rem minmax(0, 1fr) auto;
        gap: 1.1rem;
    }

    .cart-drawer-item-image {
        width: 7.2rem;
        height: 9.5rem;
    }
}




/* Icono de eliminar sin depender de Font Awesome (el botón no lleva <i>) */
.cart-drawer-item-remove::before {
    width: 18px;
    height: 18px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.cart-drawer-item-remove:hover::before {
    filter: brightness(0) saturate(100%) invert(26%) sepia(92%) saturate(2333%)
        hue-rotate(342deg) brightness(101%) contrast(89%);
}
  



/* ==========================================================
   FOOTER AMERISHOP — VERSIÓN FINAL CONSOLIDADA
   Reemplaza AMBOS bloques anteriores de footer por este
   ========================================================== */

footer.store-footer {
    display: block;
    margin-top: 0;
    padding: 0;
    background: #111111;
    border-top: 1px solid #2E3238;
    color: #FFFFFF;
}

.store-footer-main {
    display: grid;
    grid-template-columns: minmax(210px, 1.2fr) minmax(220px, 1.2fr) minmax(120px, 0.65fr) minmax(155px, 0.8fr);
    align-items: start;
    gap: 3rem;
    width: min(100% - 6rem, 1320px);
    margin: 0 auto;
    padding: 3.6rem 0;
}

.footer-brand,
.footer-contact,
.footer-links,
.footer-social {
    /* Sin esto, footer-contact y footer-social (que son <section>)
       heredan el "section{margin-top:4rem}" global del inicio del
       archivo, mientras que footer-brand (<div>) y footer-links
       (<nav>) no — eso era lo que las desalineaba 40px. */
    margin-top: 0;
    align-self: start;
    min-width: 0;
}

/* --- CABECERA DE CADA COLUMNA: todas miden exactamente lo mismo --- */

.footer-logo-link {
    display: flex;
    align-items: center;
    height: 48px;
    margin: 0 0 1.15rem;
}

.footer-store-logo {
    display: block;
    width: auto;
    max-width: 190px;
    height: 48px;
    object-fit: contain;
}

.store-footer h3 {
    display: flex;
    align-items: center;
    height: 48px;          /* 👈 altura fija (ya no min-height), igual a .footer-logo-link */
    margin: 0 0 1.15rem;
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    line-height: 1;         /* 👈 evita que el line-height del navegador infle el alto real */
}

/* --- Contenido de cada columna --- */

.footer-brand-text {
    max-width: 250px;
    margin: 0;
    color: #B7BEC8;
    font-size: 1.25rem;
    line-height: 1.55;
}

.footer-contact-list,
.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: #B7BEC8;
    font-size: 1.2rem;
    line-height: 1.45;
}

.footer-contact-list a {
    color: #B7BEC8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-list a:hover {
    color: #39FF14;
}

.footer-contact-icon {
    display: grid;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 0.1rem;
    place-items: center;
    color: #39FF14;
}

.footer-contact-icon svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.8;
}

.footer-links a {
    color: #B7BEC8;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
    padding-left: 4px;
    color: #39FF14;
}

.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-height: 40px;
    padding: 0 1.1rem;
    border: 1px solid #2E3238;
    border-radius: 12px;
    background: #17181B;
    color: #FFFFFF;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.instagram-link svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.instagram-link:hover {
    border-color: #39FF14;
    background: #22252A;
    color: #39FF14;
}

.store-footer-bottom {
    display: none; /* ya no se usa */
}

/* ==========================================================
   TABLET (600px – 1000px): 2 columnas
   ========================================================== */

@media (max-width: 1000px) {
    .store-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.8rem 3rem;
        padding: 3.2rem 0;
    }
}

/* ==========================================================
   MÓVIL (hasta 600px): también 2 columnas por fila
   ========================================================== */

@media (max-width: 600px) {
    .store-footer-main {
        grid-template-columns: repeat(2, 1fr);  /* 👈 antes era 1fr (una sola columna) */
        gap: 2.4rem 1.6rem;
        width: min(100% - 3.2rem, 520px);
        padding: 3rem 0;
    }

    .footer-logo-link,
    .store-footer h3 {
        height: 44px;
        margin-bottom: 1rem;
    }

    .footer-store-logo {
        max-width: 150px;
        height: 44px;
    }

    .footer-brand-text {
        max-width: none;
        font-size: 1.15rem;
    }

    .store-footer h3 {
        font-size: 1.15rem;
    }

    .footer-contact-list,
    .footer-links ul {
        gap: 0.8rem;
    }

    .footer-contact-list li,
    .footer-links a {
        font-size: 1.1rem;
    }

    .instagram-link {
        width: fit-content;
        min-height: 38px;
        font-size: 1.05rem;
    }
}





/* ==========================================================
   Para las subastaaaaaas ahhhhh
   ========================================================== */
.auction-time-remaining {
    display: block;
    font-size: 1.1rem;
    color: #c0392b;
    font-weight: 600;
    margin-top: 0.3rem;
}
.auction-time-remaining.auction-ended {
    color: #888;
}

/* ===== Overlay + Modal de puja (mismo patrón que checkout-modal) ===== */
.auction-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 998;
}
.auction-overlay.active { opacity: 1; visibility: visible; }

.auction-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -48%);
    width: 100%; max-width: 700px; max-height: 85vh;
    overflow-y: auto;
    background: #fff; border-radius: 12px; padding: 2.5rem;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
    z-index: 999;
}
.auction-modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

.auction-modal-close {
    position: absolute; top: 1.2rem; right: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    width: 3.2rem; height: 3.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border: none; font-size: 2.2rem; line-height: 1;
    cursor: pointer; color: var(--text-color);
    z-index: 20;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.auction-modal-close:hover {
    background: #FFFFFF;
    transform: scale(1.05);
}

.auction-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}
.auction-modal-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* El marco recorta el zoom (main.js, img.zoomable) para que la imagen no se salga */
.auction-modal-image-frame {
    overflow: hidden;
    border-radius: 8px;
}
.auction-modal-image.zoomable {
    display: block;
    transition: transform 0.25s ease;
    cursor: zoom-in;
}
.auction-modal-image {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 8px;
    background-color: #f7f7f7;
}
.auction-thumbnails {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
}
.auction-thumb {
    width: 5.5rem;
    height: 7rem;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}
.auction-thumb.active,
.auction-thumb:hover {
    opacity: 1;
    border-color: var(--primary-color);
}
.auction-description {
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 1.5rem 0;
}
.auction-modal-info h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
.auction-current-price {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.auction-time-label {
    font-size: 1.3rem;
    color: #c0392b;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.auction-time-label.auction-ended {
    color: #888;
}

.auction-bid-form label {
    font-size: 1.2rem;
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}
.auction-bid-input-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.auction-bid-input-row input {
    flex-grow: 1;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1.3rem;
}
.auction-bid-input-row button {
    padding: 1rem 2rem;
    background: var(--black-color);
    color: var(--white-color);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}
.auction-bid-error {
    color: #c0392b;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.auction-history-title {
    font-size: 1.4rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}
.auction-bid-history {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.auction-bid-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f2f2f2;
}

@media (max-width: 768px) {
    .auction-modal { max-width: 92%; padding: 2rem; }
    .auction-modal-body { grid-template-columns: 1fr; }
}



/*
PARA EL ANUNCIO AL GANAR UNA SUBASTAAAAAA
*/
.auction-win-banner {
    position: sticky;
    top: 0;
    z-index: 250;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 2rem;
    font-size: 1.3rem;
    flex-wrap: wrap;
}
.auction-win-banner button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}
.auction-win-banner-close {
    background: none !important;
    font-size: 1.8rem;
    padding: 0 0.5rem !important;
}


/*
PARA EL MODAL AL GANAR UNA SUBASTA
*/
.auction-win-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.65);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 400;
}
.auction-win-overlay.active { opacity: 1; visibility: visible; }

.auction-win-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -48%);
    width: 90%; max-width: 420px;
    background: #fff; border-radius: 16px; padding: 3rem 2.5rem;
    text-align: center;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
    z-index: 401;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.auction-win-modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

.auction-win-icon { font-size: 4rem; margin-bottom: 1rem; }
.auction-win-modal h2 { font-size: 2rem; margin-bottom: 1rem; }
.auction-win-product { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.3rem; }
.auction-win-price { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 1rem; }
.auction-win-extra { font-size: 1.2rem; color: #888; margin-bottom: 1rem; }

.auction-win-actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.auction-win-confirm-btn {
    padding: 1.3rem; background: var(--black-color); color: #fff; border: none;
    border-radius: 8px; font-size: 1.3rem; font-weight: 600; text-transform: uppercase; cursor: pointer;
}
.auction-win-decline-btn {
    padding: 1.1rem; background: none; color: #c0392b; border: 1px solid #c0392b;
    border-radius: 8px; font-size: 1.2rem; font-weight: 600; cursor: pointer;
}
.auction-win-later-btn {
    margin-top: 1.5rem; background: none; border: none; color: #999;
    font-size: 1.1rem; text-decoration: underline; cursor: pointer;
}


/*
PARA LA PAGINACION
*/

.pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}
.page-btn{
    min-width: 3.6rem;
    height: 3.6rem;
    padding: 0 0.8rem;
    border: 1px solid #D4D4D8;
    border-radius: 8px;
    background-color: transparent;
    color: var(--black-color);
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-btn:hover:not([disabled]){
    border-color: var(--primary-color);
}
.page-btn.active{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #111111;
}
.page-btn[disabled]{
    opacity: 0.35;
    cursor: not-allowed;
}
/* Los "…" de la paginación: no son botones, solo indican páginas ocultas */
.page-ellipsis{
    min-width: 2rem;
    text-align: center;
    color: #71717A;
    font-size: 1.3rem;
    font-weight: 600;
    user-select: none;
}
@media (max-width: 768px) {
    .pagination{
        gap: 0.4rem;
    }
    .page-btn{
        min-width: 3.2rem;
        height: 3.2rem;
        padding: 0 0.6rem;
    }
}


/*
Para el modal de las direcciones y perfil
*/
.account-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1000;
}
.account-modal-overlay.active { opacity: 1; visibility: visible; }

.account-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -48%);
    width: 100%; max-width: 480px; max-height: 85vh;
    overflow-y: auto;
    background: var(--white-color); border-radius: 18px; padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
    z-index: 1001;
}
.account-modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

.account-modal-close {
    position: absolute; top: 1.2rem; right: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    width: 3.2rem; height: 3.2rem;
    background: #F1F5F9; border: none; border-radius: 50%;
    font-size: 2rem; line-height: 1;
    cursor: pointer; color: var(--text-color);
    transition: background-color 0.2s ease;
}
.account-modal-close:hover { background: #E4E4E7; }

.account-modal-content h3 {
    font-size: 1.9rem; font-weight: 800;
    margin-bottom: 1.8rem; padding-right: 3rem;
}

.account-profile-field { margin-bottom: 1.4rem; }
.account-profile-field label {
    font-size: 1.05rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted-text-color);
    display: block; margin-bottom: 0.4rem;
}
.account-profile-field p { font-size: 1.4rem; color: var(--text-color); }

.account-address-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.account-address-card {
    border: 1px solid var(--border-color); border-radius: 12px; padding: 1.4rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.account-address-card:hover { border-color: var(--primary-color); background-color: #F8FAFC; }

.account-address-info { font-size: 1.35rem; font-weight: 600; margin-bottom: 0.8rem; }
.account-address-info p { color: var(--muted-text-color); font-size: 1.2rem; font-weight: 400; margin-top: 0.3rem; }

.account-address-default-badge {
    background: var(--primary-color); color: #111111; font-size: 1rem; font-weight: 700;
    padding: 0.3rem 0.8rem; border-radius: 999px; margin-left: 0.6rem;
    text-transform: uppercase; letter-spacing: 0.03em;
}

.account-address-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.account-address-actions button {
    background: none; border: 1px solid var(--border-color); border-radius: 6px;
    padding: 0.6rem 1.1rem; font-size: 1.1rem; font-weight: 600; cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.account-address-actions button:hover { border-color: var(--primary-color); color: var(--dark-green); }
.account-address-delete { color: #EF4444; border-color: #EF4444; }
.account-address-delete:hover { color: #B91C1C; border-color: #B91C1C; }

.account-link-btn {
    background: none; border: none; color: var(--dark-green);
    font-size: 1.3rem; font-weight: 600; cursor: pointer; padding: 0.5rem 0; margin-bottom: 1rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.account-link-btn:hover { color: var(--primary-color); }

.account-new-address-form { display: flex; flex-direction: column; gap: 1.2rem; }
.account-new-address-form.hidden { display: none; }
.account-form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.account-form-row label { font-size: 1.15rem; font-weight: 700; }
.account-form-row input, .account-form-row textarea {
    padding: 1.1rem; border: 1px solid var(--border-color); border-radius: 8px;
    font-size: 1.3rem; font-family: inherit; color: var(--text-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.account-form-row input:focus, .account-form-row textarea:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.15);
}
.account-checkbox-row { display: flex; align-items: center; gap: 0.8rem; font-size: 1.2rem; }

.account-primary-btn {
    padding: 1.2rem; background: var(--primary-color); color: #111111;
    border: none; border-radius: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; cursor: pointer; transition: background-color 0.2s ease;
}
.account-primary-btn:hover { background: var(--dark-green); color: var(--white-color); }

.account-modal-error {
    color: #EF4444; font-size: 1.2rem; margin-top: 1rem; text-align: center;
}

@media (max-width: 480px) {
    .account-modal { max-width: 92%; padding: 2rem; }
}

.account-address-card {
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.account-address-card:hover {
    border-color: var(--primary-color);
}
.account-address-card.is-default {
    border-color: var(--primary-color);
    background-color: #fafafa;
    cursor: default;
}
.account-address-hint {
    font-size: 1.1rem;
    color: #888;
    margin-bottom: 1rem;
}




.account-profile-view { text-align: center; }
.account-profile-avatar {
    width: 8rem; height: 8rem; border-radius: 50%;
    background: var(--primary-color); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; font-weight: 700;
    margin: 0 auto 1.5rem auto;
}
.account-profile-name { font-size: 2rem; margin-bottom: 2rem; }
.account-profile-details {
    display: flex; flex-direction: column; gap: 1.5rem;
    text-align: left; border-top: 1px solid #eee; padding-top: 1.5rem;
}
.account-profile-field { display: flex; align-items: flex-start; gap: 1.2rem; }
.account-profile-icon {
    font-size: 1.6rem; width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
    background: #f5f5f5; border-radius: 50%; flex-shrink: 0;
}
.account-profile-field label { font-size: 1.1rem; color: #888; display: block; margin-bottom: 0.2rem; }
.account-profile-field p { font-size: 1.4rem; }

/*
Para el modal de que llego al limite de direcciones
*/
.account-address-limit-note {
    font-size: 1.2rem;
    color: #c0392b;
    background: #fdecea;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

/*
Mejora de las tarjetas de subasta

*/
.product-image-wrapper .discount-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 6;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}


/* ==========================================================
   ESTADO DEL PEDIDO — BARRA DE 5 PASOS (Mis Pedidos, cliente)
   ========================================================== */
.order-status-tracker {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 0.4rem 0 0.6rem;
}
.order-status-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
}
.order-status-step .order-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 1.05rem;
    background-color: #F1F5F9;
    color: #A1A1AA;
    position: relative;
    z-index: 2;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.order-status-step .order-status-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #A1A1AA;
    text-align: center;
    line-height: 1.2;
}
/* Línea que conecta un paso con el siguiente */
.order-status-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.3rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #E4E4E7;
    z-index: 1;
}
.order-status-step.completed .order-status-icon,
.order-status-step.current .order-status-icon {
    background-color: #22C55E;
    color: #FFFFFF;
}
.order-status-step.completed:not(:last-child)::after {
    background-color: #22C55E;
}
.order-status-step.completed .order-status-label,
.order-status-step.current .order-status-label {
    color: #15803D;
}

/* Estado "Cancelado": no forma parte de la barra, se muestra aparte */
.order-status-cancelled-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #EF4444;
    font-weight: 800;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.order-status-cancelled-badge i {
    font-size: 1.4rem;
}

@media (max-width: 480px) {
    .order-status-step .order-status-icon {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.85rem;
    }
    .order-status-step .order-status-label {
        font-size: 0.7rem;
    }
    .order-status-step:not(:last-child)::after {
        top: 1.05rem;
    }
}




/* =========================================
   SECCIÓN - UN POCO DE NOSOTROS
   ========================================= */

.story-section {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 5rem 4rem;

    display: flex;
    align-items: stretch;

    gap: 0;

    background-color: #ffffff;
}


/* =========================================
   IMAGEN
   ========================================= */

.story-container-image {
    flex: 0 0 55%;
    min-height: 520px;

    overflow: hidden;

    border-radius: 20px 0 0 20px;
}

.story-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


/* Pequeño efecto al pasar el mouse */

.story-container-image:hover .story-image {
    transform: scale(1.03);
}


/* =========================================
   CONTENIDO
   ========================================= */

.story-container {
    flex: 0 0 45%;

    display: flex;
    align-items: center;
    min-height: 520px;

    background-color: #ffffff;

    border: 1px solid #e5e7eb;

    border-left: 4px solid #39FF14;

    border-radius: 0 20px 20px 0;

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}


.story-container-text {
    width: 82%;
    margin: 0 auto;
    padding: 4rem 0;
}


/* =========================================
   PEQUEÑO TÍTULO VERDE
   ========================================= */

.story-label {
    display: block;

    margin-bottom: 0.8rem;

    color: #28C60F;

    font-size: 0.85rem;
    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================================
   TÍTULO
   ========================================= */

.story-container-text h3 {
    margin: 0;

    color: #111827;

    font-size: clamp(2.2rem, 3vw, 3.2rem);

    line-height: 1.15;

    font-weight: 700;
}


.story-container-text h3 span {
    display: block;

    color: #28C60F;
}


/* =========================================
   LÍNEA DECORATIVA
   ========================================= */

.story-line {
    width: 55px;
    height: 4px;

    margin: 1.5rem 0;

    background-color: #39FF14;

    border-radius: 10px;
}


/* =========================================
   PÁRRAFO
   ========================================= */

.story-container-text p {
    margin: 0;

    color: #4b5563;

    font-size: 1.5rem;

    line-height: 1.9;
}


/* =========================================
   CARACTERÍSTICAS
   ========================================= */

.story-features {
    display: flex;
    flex-direction: column;

    gap: 0.7rem;

    margin-top: 1.8rem;
}


.story-feature {
    display: flex;
    align-items: center;

    gap: 0.8rem;

    padding: 0.65rem 0;

    border-bottom: 1px solid #eeeeee;
}


.story-feature:last-child {
    border-bottom: none;
}


/* =========================================
   ICONO
   ========================================= */

.story-feature-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(57, 255, 20, 0.35);

    border-radius: 50%;

    color: #28C60F;

    font-size: 0.9rem;
    font-weight: 700;

    background-color: rgba(57, 255, 20, 0.06);
}


/* =========================================
   TEXTO DE CARACTERÍSTICAS
   ========================================= */

.story-feature strong {
    display: block;

    margin-bottom: 0.1rem;

    color: #111827;

    font-size: 1.5rem;
}


.story-feature small {
    display: block;

    color: #6b7280;

    font-size: 1.5rem;

    line-height: 1.35;
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1000px) {

    .story-section {
        padding: 4rem 2rem;
    }

    .story-container-image {
        flex-basis: 50%;
        min-height: 480px;
    }

    .story-container {
        flex-basis: 50%;
    }

    .story-container-text {
        width: 82%;
    }


    /* TÍTULO */

    .story-container-text h3 {
        font-size: 2.3rem;
    }


    /* DESCRIPCIÓN PRINCIPAL */

    .story-container-text p {
        font-size: 1.25rem;
        line-height: 1.8;
    }


    /* CARACTERÍSTICAS */

    .story-feature strong {
        font-size: 1.25rem;
    }


    /* DESCRIPCIÓN DE CADA CARACTERÍSTICA */

    .story-feature small {
        font-size: 1.15rem;
        line-height: 1.4;
    }
}


/* =========================================
   CELULAR
   ========================================= */

@media (max-width: 768px) {

    .story-section {

        display: flex;

        flex-direction: column;

        padding: 2.5rem 1.2rem;

        gap: 0;
    }


    /* =========================================
       TEXTO ARRIBA
       ========================================= */

    .story-container {

        order: 1;

        flex: none;

        width: 100%;

        border-left: none;

        border-top: 4px solid #39FF14;

        border-radius: 20px 20px 0 0;

        box-shadow: none;

        min-height: auto;
    }


    .story-container-text {

        width: 100%;

        padding: 2.5rem 1.5rem;
    }


    /* PEQUEÑO TÍTULO VERDE */

    .story-label {

        font-size: 0.8rem;

        letter-spacing: 1.5px;
    }


    /* TÍTULO PRINCIPAL */

    .story-container-text h3 {

        font-size: 2.2rem;

        line-height: 1.2;
    }


    /* DESCRIPCIÓN PRINCIPAL */

    .story-container-text p {

        font-size: 1.25rem;

        line-height: 1.75;

        margin-top: 0;
    }


    /* =========================================
       CARACTERÍSTICAS
       ========================================= */

    .story-features {

        margin-top: 1.5rem;

        gap: 0.5rem;
    }


    .story-feature {

        padding: 0.8rem 0;

        gap: 0.8rem;
    }


    /* ICONO */

    .story-feature-icon {

        width: 36px;

        height: 36px;

        font-size: 0.9rem;
    }


    /* TÍTULO DE CARACTERÍSTICA */

    .story-feature strong {

        font-size: 1.25rem;
    }


    /* DESCRIPCIÓN DE CARACTERÍSTICA */

    .story-feature small {

        font-size: 1.15rem;

        line-height: 1.4;
    }


    /* =========================================
       IMAGEN ABAJO
       ========================================= */

    .story-container-image {

        order: 2;

        flex: none;

        width: 100%;

        height: 280px;

        min-height: 280px;

        border-radius: 0 0 20px 20px;
    }


    .story-image {

        height: 100%;

        object-fit: cover;
    }
}

/*PARA QUE EL SUBMENU (TIENDA PRINCIPAL, REBAJAS, SUBASTAS)
SE QUEDE FIJO
*/
.secondary-nav {
    position: sticky;
    top: var(--header-height, 0px);
    z-index: 400;
}

/* En celular el header baja a z-index 100 y el menú de categorías vive dentro de él,
   así que este submenú debe quedar por debajo del header (100) y del fondo oscuro (99)
   para no tapar el menú al desplegarlo */
@media (max-width: 768px) {
    .secondary-nav {
        z-index: 90;
    }
}


/*PARA LOS BOTONES DE INICIAR CON GOOGLE O FACEBOOK*/
.oauth-divider { display:flex; align-items:center; text-align:center; margin:1.2rem 0; color:#888; font-size:.85rem; }
.oauth-divider::before, .oauth-divider::after { content:""; flex:1; border-bottom:1px solid #ddd; }
.oauth-divider span { padding:0 .8rem; }

.oauth-buttons { display:flex; gap:.7rem; }
.btn-oauth {
    flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.65rem; border-radius:8px; font-weight:600; text-decoration:none;
    border:1px solid #ddd; cursor:pointer; transition:opacity .2s;
}
.btn-oauth:hover { opacity:.85; }
.btn-oauth-google { background:#fff; color:#444; }
.btn-oauth-facebook { background:#1877F2; color:#fff; border-color:#1877F2; }

/*PARA EL ZOOM DE LAS IMAGENES*/
/* El marco de la imagen recorta el acercamiento para que NO crezca el espacio */
.quickview-main-image {
    overflow: hidden;
    position: relative;
}
.quickview-main-image img.zoomable {
    transition: transform 0.25s ease;   /* acercamiento suave */
    cursor: zoom-in;                     /* la lupita en escritorio */
}


/*
PARA LOS MODALES DE LOS AVISOOOOOS

*/

.store-alert-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center; justify-content: center;
    z-index: 10000; padding: 1rem;
}
.store-alert-overlay.active { display: flex; }
.store-alert-box {
    background: #fff; border-radius: 12px;
    padding: 1.8rem 1.5rem; max-width: 380px; width: 100%;
    text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.store-alert-icon {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; font-weight: bold; margin: 0 auto 1rem; color: #fff;
}
.store-alert-icon-success { background: #22C55E; }
.store-alert-icon-error   { background: #EF4444; }
.store-alert-icon-warning { background: #F59E0B; }
.store-alert-message { color: #333; margin-bottom: 1.2rem; line-height: 1.5; }
.store-alert-btn {
    background: #111; color: #fff; border: none;
    padding: .6rem 1.6rem; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.store-alert-icon-info { background: #111; }
.store-alert-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.store-alert-btn-secondary { background: #fff; color: #111; border: 1px solid #ccc; }
.store-alert-btn-secondary:hover { background: #f3f3f3; }
.store-alert-btn-danger { background: #EF4444; }

/* Botón "Ver más" en Mis pedidos */
.orders-load-more {
    display: flex;
    justify-content: center;
    margin: 1rem 0 2rem;
}
.orders-load-more-btn {
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 1rem 2.4rem;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.orders-load-more-btn:hover:not(:disabled) {
    background: #39FF14;
    color: #111;
}
.orders-load-more-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Submenú: la sección en la que está el cliente se queda en verde (la clase la pone Blade) */
.secondary-nav-link.active {
    color: #39FF14;
    font-weight: 600;
}

/* Al filtrar o cambiar de página, el scroll se detiene justo DEBAJO del header y
   del submenú fijos, para que la primera fila de tarjetas no quede tapada */
#products-container,
#ofertas-container,
#subastas-container {
    scroll-margin-top: calc(var(--header-height, 150px) + 6rem);
}

/* Página de política de privacidad */
.legal-header {
    display: flex;
    justify-content: center;
    padding: 2rem;
    background-color: #0F0F10;
}
.legal-page {
    max-width: 80rem;
    margin: 0 auto;
    padding: 4rem 2rem 6rem;
    color: #27272A;
    font-size: 1.5rem;
    line-height: 1.7;
}
.legal-page h1 {
    font-size: 3rem;
    margin: 2rem 0 0.5rem;
}
.legal-page h2 {
    font-size: 1.9rem;
    margin: 3.2rem 0 1rem;
}
.legal-page p,
.legal-page ul {
    margin-bottom: 1.2rem;
}
.legal-page ul {
    padding-left: 2.2rem;
}
.legal-page li {
    margin-bottom: 0.6rem;
}
.legal-page a {
    color: #15803D;
}
.legal-updated {
    color: #71717A;
    font-size: 1.3rem;
}
.legal-back {
    font-size: 1.4rem;
    text-decoration: none;
}

/* Tarjetas "fantasma" mientras cargan los productos (partials/tarjetas-cargando) */
.skeleton-card,
.skeleton-card:hover {
    transform: none;
    pointer-events: none;
}
.skeleton-box,
.skeleton-line {
    background: linear-gradient(90deg, #efefef 25%, #f7f7f7 50%, #efefef 75%);
    background-size: 200% 100%;
    animation: skeleton-brillo 1.3s ease-in-out infinite;
}
.skeleton-line {
    display: block;
    height: 1.1rem;
    width: 80%;
    border-radius: 4px;
}
.skeleton-line-short {
    width: 40%;
}
@keyframes skeleton-brillo {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-box,
    .skeleton-line {
        animation: none;
    }
}
/* Texto solo para lectores de pantalla (no ocupa una celda de la cuadrícula) */
.skeleton-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}