/* ===== FUENTE MONTSERRAT ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@300;400;500;600&display=swap');

/* ================================
   MATONE FONT — IMPORTACIÓN
================================ */
@font-face {
    font-family: "MatoneWide";
    src: url("fonts/Mattone-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

/* ============================
   FUENTE LEMON MILK
============================ */

@font-face {
    font-family: 'Lemon Milk';
    src: url('fonts/LEMONMILK-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}


/*============== BASE ==================== */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background: white;
    overflow-x: hidden;
}

/* ==================== 
==================== */
.header {
    width: 100%;
    height: 90px;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: none; /* ← QUITA LA LÍNEA */
    
}

.menu {
    position: absolute;
    left: 35px;
    display: flex;
    gap: 45px;
}

.menu a {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px;
}

.menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: #d09352;
    transition: width .25s ease-in-out;
}

.menu a:hover::after { width: 100%; }

.logo img {
    height: 30px;
}

.nav-right {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 22px;
}

.icon {
    width: 30px;
    cursor: pointer;
}

/* BUSCADOR */
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f7f7f7;
    padding: 6px 14px;
    border-radius: 22px;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
}

/* ==================== HERO ==================== */
.hero img {
    width: 100%;
    display: block;
    margin-top: 0; /* ← ELIMINA LA FRANJA */
}
/* ===================== GALLERY ===================== */
.gallery-section {
    width: 80%;
    max-width: 600px;
    margin: 120px auto 80px auto;
    text-align: center;
}

.gallery-title {
    font-size: 38px;
    font-weight: 500;
    color: #d09352;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.gallery-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.gallery-grid img {
    width: 450px;
    height: 700px;
    object-fit: cover;
    border-radius: 12px;
}

/* ===================== CATÁLOGO ===================== */

.catalogo {
    margin-top: 120px; /* puedes bajar a 60px si lo quieres más pegado */
}

.producto-simple {
    width: 320px;
}

/* ===================== CARRUSEL ===================== 
.carousel {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
}

.carousel img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    position: absolute;
    opacity: 0;
    transition: opacity .4s ease;
}

.carousel img.active {
    opacity: 1;
}

.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 22px;
    font-weight: 300;
    padding: 0;
    cursor: pointer;
    color: white;
    opacity: 0;
    transition: opacity .25s ease;
}

.flecha.izquierda { left: 10px; }
.flecha.derecha { right: 10px; }

.carousel:hover .flecha { opacity: 1; } 

/* .plus-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: white;
    color: black;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;
} 

.plus-btn.added { transform: scale(1.25); } 

.producto-nombre2,
.producto-precio2 {
    font-family: 'Bodoni Moda', serif;
    font-size: 15px;
    margin: 6px 0 0;
    color: black;
} /*

/* ===================== CONTADOR DEL CARRITO ===================== */
.cart-icon-container {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: black;
    color: white;
    font-size: 11px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* ===================== OVERLAY ===================== */
#sidecart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: .3s ease;
    z-index: 9000;
}

#sidecart-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ===================== SIDECART ===================== */
#sidecart {
    position: fixed;
    top: 0;
    right: -420px;
    width: 380px;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 15px rgba(0,0,0,0.15);
    z-index: 99999;
    transition: right .35s ease;
    padding: 25px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

#sidecart.open { right: 0; }

/* ===================== HEADER DEL SIDECART ===================== */

.sidecart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 2px solid #d09352;
    margin-bottom: 15px;
}

.sidecart-header h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
}

.right-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidecart-count {
    background: black;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.close-sidecart {
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    padding: 0;
}

/* ===================== ITEMS DEL SIDECART ===================== */

.sidecart-items {
    flex: 1;
    overflow-y: auto;
    padding-right: 0;
}

.sidecart-item {
    display: flex;
    gap: 15px;
    margin-bottom: 28px;
    align-items: flex-start;
}

.sidecart-item img {
    width: 110px;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
}

.sidecart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sidecart-item-info p {
    margin: 0;
}

.sidecart-item-info p strong {
    font-size: 17px;
    font-weight: 700;
}

.sidecart-item-info p:nth-child(2) {
    font-size: 14px;
    margin-top: 4px;
    color: #555;
    font-weight: 500;
}

.sidecart-item-info p:nth-child(3) {
    font-size: 16px;
    font-weight: 700;
    margin-top: 6px;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.qty-controls button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #aaa;
    background: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.remove-item {
    color: #e63636;
    font-size: 14px;
    margin-top: 2px;
    cursor: pointer;
    font-weight: 600;
}

/* ===================== FOOTER ===================== */

.sidecart-footer {
    padding-top: 20px;
    border-top: 1px solid #eee;
    background: white;
    position: sticky;
    bottom: 0;
}

.sidecart-subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 18px;
}

.btn-sidecart {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: .2s;
    font-weight: 600;
}

.btn-vercarrito {
    background: white;
    border: 2px solid #d09352;
    color: #d09352;
    margin-bottom: 10px;
}

.btn-vercarrito:hover {
    background: #f7eada;
}

.btn-pagar {
    background: #d09352;
    color: white;
    border: none;
}

.btn-pagar:hover {
    opacity: .85;
}


/* ============================================
   CARRITO AURYA – DISEÑO PROFESIONAL
============================================ */

.carrito-page {
    width: 100%;
    max-width: 1100px;
    margin: 150px auto 80px;
    padding: 0 25px;
}

/* LISTA DE PRODUCTOS */
.carrito-lista {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ITEM DEL CARRITO */
.carrito-item {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    background: #fff;
}

/* FOTO */
.carrito-item img {
    width: 150px;
    height: 190px;
    object-fit: cover;
    border-radius: 12px;
}

/* INFO DEL PRODUCTO */
.carrito-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.carrito-info strong {
    font-size: 1.3rem;
    font-weight: 600;
    color: #111;
}

.carrito-info p {
    margin: 0;
    font-size: 1rem;
    color: #555;
}

/* CONTROLES DE CANTIDAD */
.carrito-item .qty-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.carrito-item .qty-controls button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    background: white;
    font-size: 1rem;
    cursor: pointer;
    transition: .2s;
}

.carrito-item .qty-controls button:hover {
    background: #f4f4f4;
}

.carrito-item .remove-item {
    color: #c04343;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 6px;
    font-weight: 600;
}

.carrito-item .remove-item:hover {
    color: #8b0000;
}

/* DIVISOR */
.carrito-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 40px 0;
}

/* RESUMEN */
.carrito-resumen {
    margin-top: 40px;
    padding: 30px;
    background: #fff7f0;
    border-radius: 12px;
}

.carrito-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.carrito-condiciones {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    font-size: 1rem;
}

/* BOTÓN DE PAGO */
.carrito-pagar, 
.btn-checkout {
    width: 100%;
    background: #d09352;
    color: white;
    padding: 16px 0;
    font-size: 1.15rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: .2s;
    font-weight: 600;
}

.carrito-pagar:hover,
.btn-checkout:hover {
    opacity: .85;
}

/* MENSAJE VACÍO */
.carrito-vacio {
    text-align: center;
    margin-top: 60px;
    font-size: 1.15rem;
    color: #777;
    display: none;
}

/* ============================= */
/*           CONTACTO            */
/* ============================= */

.contacto {
    width: 100%;
    max-width: 650px;
    margin: 150px auto 80px;
    text-align: center;
    padding: 0 20px;
}

.contacto-title {
    font-size: 24px;
    font-weight: 500;
    color: #000;
    margin-bottom: 50px;
    line-height: 1.6;
}

.contacto-botones {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-btn {
    display: block;
    padding: 14px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    color: #d09352;
    border: 2px solid #d09352;
    transition: .25s ease;
}

.contact-btn:hover {
    background: #d09352;
    color: #fff;
}

/* ============================= */
/*   ICONOS REALES DE CONTACTO   */
/* ============================= */

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    color: #d09352;
    border: 2px solid #d09352;
    transition: .25s ease;
}

.contact-btn:hover {
    background: #d09352;
    color: white;
}

.contact-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.contact-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    padding: 5px;
    background: white; /* opcional, si quieres fondo blanco */
    border-radius: 50%; /* opcional, deja todos los íconos redondos */
}

/* BOTONES DE CONTACTO */
.contact-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 20px;
    border-radius: 12px;
    border: 2px solid #d09352;
    color: #d09352;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s ease;
}

.contact-btn:hover {
    background: #d09352;
    color: white;
}

/* CAJA PERFECTAMENTE CUADRADA PARA CADA ICONO */
.icon-box {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ICONOS DENTRO DE LA CAJA */
.icon-box img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

/* ===================== */
/*     AUTH PAGES        */
/* ===================== */

.auth-body {
    background: #ffffff;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 30px;
}

.auth-container {
    width: 400px;
    padding: 40px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0,0,0,0.08);
    text-align: center;        /* CENTRA EL TÍTULO Y FORMULARIO */
}

.auth-title {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    color: #d09352;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.auth-form input {
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #d19350 !important; 
    font-size: 14px;
    outline: none;
}

.auth-form input:focus {
    border-color: #d19350;
}

.auth-btn {
    background: #d09352;
    color: white;
    padding: 14px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    margin-top: 5px;
    font-weight: 600;
    transition: 0.25s;
}

.auth-btn:hover {
    opacity: 0.85;
}

.auth-link {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
}

.auth-link a {
    color: #d09352;
    text-decoration: none;
    font-weight: 600;
}

.auth-link a:hover {
    text-decoration: underline;
}

/* ===================== AUTH SECTION INTEGRADA ===================== */

.auth-section {
    margin-top: 130px;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.auth-container {
    background: #fff8f0 !important;
    border: 1px solid #edd5be;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(0,0,0,0.06);
}


.auth-title {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    color: #d09352;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.auth-form input {
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #d5d5d5;
    font-size: 14px;
    outline: none;
}

.auth-form input:focus {
    border-color: #d09352;
}

.auth-btn {
    background: #d09352;
    color: white;
    padding: 14px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    margin-top: 5px;
    font-weight: 600;
    transition: 0.25s;
}

.auth-btn:hover {
    opacity: 0.85;
}

.auth-link {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
}

.auth-link a {
    color: #d09352;
    text-decoration: none;
    font-weight: 600;
}

.auth-link a:hover {
    text-decoration: underline;
}

.auth-error {
    background: #ffe5e5;
    border: 1px solid #ffb3b3;
    padding: 12px 15px;
    border-radius: 8px;
    color: #b10000;
    margin-bottom: 20px;
    font-size: 14px;
}

.auth-error a {
    color: #b10000;
    font-weight: bold;
    text-decoration: underline;
}

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 90px; /* ESPACIO PARA "Mostrar" */
}

.toggle-pass {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #d09352;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
}


.strength-bar {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 4px;
    margin-top: 4px;
}

.strength-bar.level-1 { background: #b33a3a; }
.strength-bar.level-2 { background: #c28f2c; }
.strength-bar.level-3 { background: #4e9b50; }

.auth-error {
    color: #b33a3a;
    font-size: 14px;
    margin: 5px 0;
}

.auth-info {
    color: #444;
    font-size: 14px;
}

/* ===========================================
   OCULTAR MENÚ ESCRITORIO EN MÓVIL
=========================================== */
@media (max-width: 1024px) {

    .menu.escritorio {
        display: none !important;
    }

    .hamburger {
        display: flex !important;
    }
}

/* ===========================================
   HAMBURGER
=========================================== */
.hamburger {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 18px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 6000;
}

.hamburger span {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #000;
    transition: all 0.35s ease;
}

/* ANIMACIÓN A X */
.hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ===========================================
   LUPA ESPECIAL PARA MÓVIL
=========================================== */
.mobile-lupa {
    display: none;
}

@media (max-width: 1024px) {
    .mobile-lupa {
        position: absolute;
        left: 55px;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        z-index: 6000;
        display: block;
    }

    /* ocultar lupa de escritorio */
    .nav-right .open-search {
        display: none !important;
    }

    /* logo centrado */
    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* ===========================================
   MOBILE MENU
=========================================== */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 350px;
    height: 100vh;
    background: #fff;
    padding: 0 22px;
    transition: left 0.35s ease;
    z-index: 5000;
    overflow-y: auto;
}

.mobile-menu.open {
    left: 0;
}

/* BUSCADOR INTERNO (OCULTO) */
.mobile-search-row {
    display: none !important;
}

.mobile-item {
    display: block;
    padding: 15px 0;
    font-size: 17px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
}

.mobile-line {
    height: 1px;
    background: #e3e3e3;
}

/* SEPARACIÓN PARA QUE LOS TEXTOS DEL MENÚ NO QUEDEN PEGADOS ARRIBA */
.mobile-menu.open a.mobile-item:first-of-type {
    margin-top: 70px !important;   /* Ajusta a 60–90px según lo que quieras */
}

.login-titulo {
    font-family: "Matone", sans-serif;
    font-weight: 310;
    font-size: 32px;
    text-transform: uppercase;
    color: #d09352;
    margin-bottom: 30px;

    display: inline-block;
    transform: scaleX(1.20); /* SUAVE, ELEGANTE */
    transform-origin: center;
    letter-spacing: 0;
}

/* ============================
   CATEGORÍAS TIPO UNDERGOLD
=============================*/

.categoria-grid {
    width: 90%;
    max-width: 1400px;
    margin: 60px auto 120px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.categoria-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 4/5;   /* 🔥 Proporción estable */
}

.categoria-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* evita que colapse */
}

.categoria-card:hover img {
    transform: scale(1.05);
}

.categoria-texto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: "Montserrat", sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 3px;
    text-shadow: 0px 0px 12px rgba(0,0,0,0.6);
}

@media (max-width: 900px) {
    .categoria-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .categoria-card {
        aspect-ratio: 3/4; /* móvil: un poquito más vertical */
    }

    .categoria-texto {
        font-size: 26px;
        letter-spacing: 2px;
    }
}

@media (max-width: 900px) {

    /* QUE NO CAMBIE NADA DEL ESCRITORIO */
    .categoria-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        overflow: visible !important;
    }

    /* 🔥 MÁS ALTAS EN MÓVIL */
    .categoria-card {
        aspect-ratio: 9/14;   /* MUY ALTA Y EDITORIAL */
        height: auto !important;
        overflow: hidden;
        border-radius: 14px;
    }

    .categoria-card img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
        display: block;
    }

    .categoria-texto {
        font-size: 26px;
        letter-spacing: 2px;
    }

    /* IMPORTANTE: EVITAR RECORTES DEL CONTENEDOR PADRE */
    .catalogo {
        padding: 0 !important;
        margin: 0 auto !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* ============================
   GRID DE PRODUCTOS (3 GRANDES)
============================ */

.catalogo-grid {
    width: 90%;
    max-width: 1300px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ← 3 por fila */
    gap: 35px; /* separación amplia */
}

/* Tarjeta de producto */
.producto-simple {
    text-decoration: none;
    color: inherit;
}

/* Contenedor del carrusel */
.carousel {
    width: 100%;
    aspect-ratio: 4/5;   /* proporción estilizada */
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease;
}

.carousel:hover img.active {
    transform: scale(1.05);
}

.producto-nombre2 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    color: #222;
}

.producto-precio2 {
    font-size: 18px;
    margin-top: 3px;
    color: #d09352;
    font-weight: 600;
}

/* ============================
   RESPONSIVE
============================ */

/* TABLET → 2 por fila */
@media (max-width: 900px) {
    .catalogo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .carousel {
        aspect-ratio: 3/4;
    }
}

/* CELULAR → 1 por fila */
@media (max-width: 600px) {
    .catalogo-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .carousel {
        aspect-ratio: 3/4;
    }

    .producto-nombre2 {
        font-size: 22px;
        text-align: center;
    }

    .producto-precio2 {
        font-size: 20px;
        text-align: center;
    }
}

/* ============================================
   AJUSTE DEL NOMBRE DEL USUARIO EN HEADER
============================================ */

.user-name {
    display: flex;
    align-items: center;
    gap: 6px;               /* separa icono y nombre */
    color: #d09352 !important;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;    /* evita que salte de línea */
}

.user-name span {
    font-size: 14px;
    color: #d09352;
}

/* icono */
.user-name .icon {
    width: 26px;
    height: 26px;
}

/* En móvil: oculta el nombre para no dañar el header */
@media (max-width: 900px) {
    .user-name span {
        display: none;
    }
}


/* ======================================================
   PERFIL PAGE
====================================================== */

.perfil-container {
    max-width: 550px;
    margin: 150px auto;
    padding: 25px 20px;
    text-align: center;
}

.perfil-box {
    background: white;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 0 25px rgba(0,0,0,0.08);
}

.perfil-box h2 {
    font-size: 28px;
    color: #d09352;
    margin-bottom: 10px;
}

.perfil-box p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
}

.perfil-btn {
    display: inline-block;
    background: #d09352;
    color: white;
    padding: 14px 25px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: .25s ease;
}

.perfil-btn:hover {
    opacity: 0.85;
}

.perfil-logout {
    margin-top: 18px;
    display: inline-block;
    font-size: 14px;
    text-decoration: underline;
    color: #c03;
    cursor: pointer;
}

/* ======================================================
   PERFIL — ICONO GRANDE
====================================================== */

.perfil-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff1e2;
    border: 2px solid #d09352;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.perfil-icon img {
    width: 40px;
    opacity: 0.8;
}

/* ======================================================
   MOBILE PERFIL
====================================================== */

@media (max-width: 600px) {
    .perfil-container {
        margin-top: 110px;
        padding: 15px;
    }

    .perfil-box {
        padding: 25px 20px;
    }

    .perfil-box h2 {
        font-size: 24px;
    }

    .perfil-btn {
        width: 100%;
        padding: 14px;
    }
}

/* =========================================================
   HERO AURYA — EDITORIAL, SILENCIOSO, SEGURO
========================================================= */

.aurya-hero {
    position: relative;
    width: 100%;
    height: 120vh;
    background-image: url("imagenes/hero.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}



/* Overlay con degradado editorial */
.aurya-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.45) 0%,
        rgba(0,0,0,0.18) 40%,
        rgba(0,0,0,0) 70%
    );
    display: flex;
    align-items: center;
}

/* Contenido */
.aurya-hero-content {
    max-width: 420px;
    margin-left: 8%;
    color: #fff;
}


/* ============================
   HERO - TEXTO EDITORIAL
============================ */

.hero-editorial {
    font-family: 'Lemon Milk', sans-serif;
    font-size: 50px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 22px;
}


/* CTA — gesto editorial, no botón barato */
/* ============================
   CTA HERO — CUADRO COMPLETO
============================ */

.aurya-cta {
    display: inline-block;
    padding: 14px 34px;
    border: 1.5px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    transition: all 0.3s ease;
}

/* HOVER */
.aurya-cta:hover {
    background: rgba(255,255,255,0.12);
}


/* =========================================================
   PROPUESTA DE VALOR — AURYA
========================================================= */

.aurya-values {
    width: 100%;
    background: #fafafa;
    padding: 80px 0;
}

.aurya-values-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    text-align: center;
}

.aurya-value h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.aurya-value p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .aurya-values-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }

    .aurya-values {
        padding: 60px 0;
    }
}

/* =========================================================
   EDITORIAL / LOOKBOOK — HOME
========================================================= */

.aurya-editorial {
    padding: 70px 80;
    background: #fff;
}

.editorial-cta {
    text-align: center;
    margin-top: 60px;
}

.aurya-cta-dark {
    display: inline-block;
    padding: 14px 40px;
    border: 1.5px solid #000;
    color: #000;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.25s ease;
}

.aurya-cta-dark:hover {
    background: #000;
    color: #fff;
}

/* =========================================================
   FOOTER — AURYA (CLARO & PREMIUM)
========================================================= */

.aurya-footer {
    background: #faf9f7; /* blanco cálido */
    color: #555;
    padding: 70px 0 40px;
    margin-top: 100px;
    border-top: 1px solid #e6e6e6;
}

.aurya-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
}

.footer-col h4 {
    color: #111;
    font-size: 13px;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
    text-transform: uppercase;
    font-weight: 600;
}

.footer-col p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-col ul li a:hover {
    color: #000;
}

.aurya-footer-bottom {
    text-align: center;
    margin-top: 60px;
    font-size: 13px;
    color: #999;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .aurya-footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
        text-align: center;
    }
}

/* =========================================================
   BOTONES — SISTEMA AURYA
========================================================= */

.btn-primary {
    display: inline-block;
    padding: 14px 40px;
    border: 1.5px solid #000;
    background: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-primary:hover {
    background: transparent;
    color: #000;
}

.btn-secondary {
    display: inline-block;
    padding: 14px 40px;
    border: 1.5px solid #000;
    background: transparent;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-secondary:hover {
    background: #000;
    color: #fff;
}

h1, h2 {
    letter-spacing: 2px;
}

.gallery-title {
    font-weight: 500;
    letter-spacing: 3px;
}

/* =========================================================
   CATÁLOGO — TARJETAS AURYA
========================================================= */

.product-card {
    position: relative;
    transition: transform 0.25s ease;
}

.product-card:hover {
    transform: translateY(-4px);
}

/* CTA dentro de la tarjeta */
.card-cta {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.card-cta:hover {
    border-color: #000;
}

.product-meta {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

.product-card img {
    transition: transform 0.3s ease;
}

.product-card:hover img {
    transform: scale(1.03);
}

.producto-img {
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
}

.producto-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.hint-checkout {
    margin: 10px 0 14px;
    font-size: 14px;
    color: #6b6b6b;
}

/* ============================
   CATÁLOGO — HOVER PREMIUM
============================ */

.producto-simple {
    transition: transform .25s ease, box-shadow .25s ease;
}

.producto-simple:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.producto-img img {
    transition: transform .35s ease;
}

.producto-simple:hover .producto-img img {
    transform: scale(1.04);
}

.producto-nombre2 {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .2px;
}

.producto-precio2 {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.producto-simple {
    cursor: pointer;
}

.producto-simple {
    opacity: 0;
    animation: fadeIn .6s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.legal-page {
    max-width: 900px;
    margin: 140px auto 80px;
    padding: 0 24px;
}

.legal-page h1 {
    font-size: 28px;
    margin-bottom: 20px;
}

.legal-page h2 {
    font-size: 18px;
    margin-top: 28px;
    margin-bottom: 10px;
}

.legal-page p {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
}

html {
    scroll-behavior: smooth;
}

/* ============================
   CONTACTO
============================ */
.contacto-page {
    max-width: 600px;
    margin: 100px auto;
    padding: 0 20px;
}

.contacto-page h1 {
    text-align: center;
    margin-bottom: 10px;
}

.contacto-sub {
    text-align: center;
    margin-bottom: 40px;
    opacity: 0.7;
}

.contacto-form label {
    display: block;
    margin-top: 20px;
    font-weight: 600;
}

.contacto-form input,
.contacto-form textarea {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    margin-top: 6px;
    font-size: 15px;
}

.contacto-form textarea {
    resize: vertical;
}

.btn-contacto {
    width: 100%;
    margin-top: 30px;
    padding: 16px;
    border-radius: 12px;
    border: none;
    background: #cc9a5a;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.contacto-info {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.6;
}

.hero-title {
    font-size: 56px;
    font-weight: 500;
    letter-spacing: 4px;
}

.hero-sub {
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.9;
}

/* ==========================
   BUSCADOR AURYA – FINAL
========================== */

.header-search {
    position: absolute;
    inset: 0;
    background: rgba(250, 249, 247, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 3000;
}

.header-search.active {
    opacity: 1;
    pointer-events: auto;
}

.search-content {
    background: rgba(255,255,255,0.6);
    padding: 50px 40px;
    border-radius: 20px;
    text-align: center;
    width: 100%;
    max-width: 460px;
    animation: fadeUp 0.35s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-label {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 20px;
}

.search-content input {
    width: 100%;
    font-size: 18px;
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    outline: none;
    padding: 10px 0;
    text-align: center;
}

/* SUGERENCIAS */
.search-suggestions {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.search-suggestions span {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(0,0,0,0.05);
    cursor: pointer;
}

/* RESULTADOS */
.search-results {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.search-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
}

.search-item h4 {
    font-size: 13px;
    margin: 8px 0 2px;
}

.search-item span {
    font-size: 12px;
    color: #555;
}

.search-close {
    display: inline-block;
    margin-top: 30px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    color: #555;
}

.search-item.no-found {
    text-align: center;
    padding: 20px 0;
}

/* ==========================
   MÓVIL
========================== */

@media (max-width: 600px) {

    .search-content {
        max-width: 90%;
        padding: 40px 25px;
    }

    .search-results {
        grid-template-columns: 1fr;
    }
}

.categoria-layout {
    display: flex;
    gap: 30px;
}

/* OFFSET HEADER */
.collection-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding-top: 120px; /* compensar header */
}

.collection-inner {
    width: 100%;
}


/* TOOLBAR */
.collection-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 28px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 40px;
}

.ters-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #111;
    text-decoration: none;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toolbar-right span {
    font-size: 13px;
    color: #666;
}

.toolbar-right select {
    font-size: 13px;
    border: none;
    background: none;
    cursor: pointer;
}

/* PANEL FILTROS */
.filters-panel {
    position: fixed;
    top: 0;
    left: -100%;
    width: 320px;
    height: 100vh;
    background: #fff;
    padding: 30px 20px;
    box-shadow: 2px 0 20px rgba(0,0,0,.08);
    transition: left .3s ease;
    z-index: 3000;
}

.filters-panel.active {
    left: 0;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.filters-header button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.filters-group {
    margin-bottom: 25px;
}

.filters-group p {
    font-size: 13px;
    margin-bottom: 10px;
}

.filters-group button {
    display: inline-block;
    margin: 5px 5px 0 0;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}

.filters-group button.active {
    background: #d09352;
    color: #fff;
    border-color: #d09352;
}

.clear-filters {
    margin-top: 30px;
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    background: none;
    cursor: pointer;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    color: #111;
}

.filter-icon {
    display: flex;
    align-items: center;
}

.filter-text {
    font-weight: 400;
    letter-spacing: .2px;
}

.collection-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 28px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 40px;
}

.ters-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    line-height: 1;
}

.ters-filter svg {
    position: relative;
    top: 0.5px; /* micro-ajuste TERS */
}

.collection-toolbar {
    padding: 16px 0 22px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 42px;
}

.toolbar-left {
    display: flex;
    align-items: center;
}

.filters-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 340px;
    height: 100vh;
    background: #fff;
    padding: 24px;
    box-shadow: 2px 0 25px rgba(0,0,0,.12);
    transform: translateX(-100%);
    transition: transform .35s ease;
    z-index: 9999;
    overflow-y: auto;
    pointer-events: none;
}

.filters-panel.active {
    transform: translateX(0);
    pointer-events: auto;
}

.filters-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.filters-top h3 {
    font-size: 15px;
    font-weight: 500;
}

.filters-section {
    margin-bottom: 28px;
}

.filters-section h4 {
    font-size: 13px;
    margin-bottom: 10px;
}

.filters-section label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    cursor: pointer;
}

.filters-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 15px;
    display: flex;
    gap: 10px;
}

.clear-btn {
    flex: 1;
    background: none;
    border: 1px solid #ddd;
    padding: 10px;
    cursor: pointer;
}

.apply-btn {
    flex: 1;
    background: #000;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.filters-panel {
    pointer-events: none;
}

.filters-panel.active {
    pointer-events: auto;
}

.producto-simple {
    position: relative;
}

.producto-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

@media (max-width: 768px) {
    .ters-filter {
        display: none !important;
    }
}

@media (max-width: 768px) {

    .collection-toolbar {
        display: block;
        padding: 16px 14px;
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
        background: #fff;
    }

    .filter-btn {
        width: 100%;
        padding: 14px 0;
        border: 1.5px solid #111;
        font-size: 13px;
        letter-spacing: 1px;
        justify-content: center;
        text-transform: uppercase;
    }

}



.btn-whatsapp {
    width: 100%;
    padding: 16px;
    background: #000;
    color: #fff;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    margin-top: 20px;
}

.btn-whatsapp:hover {
    background: #111;
}

/* ===============================
   WHATSAPP AURYA — ESTILO TERS
================================ */

.aurya-wsp {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    z-index: 9999;
}

/* TEXTO */
.aurya-wsp-text {
    background: #d09352; /* dorado AURYA */
    color: #000;
    padding: 12px 18px;
    border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.2;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.aurya-wsp-text span {
    font-size: 12px;
    opacity: .8;
}

/* ICONO */
.aurya-wsp-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #d09352;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
    transition: transform .25s ease;
}

.aurya-wsp-icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

/* HOVER */
.aurya-wsp:hover .aurya-wsp-icon {
    transform: scale(1.08);
}

/* 📱 MÓVIL */
@media (max-width: 768px) {
    .aurya-wsp-text {
        display: none;
    }

    .aurya-wsp-icon {
        width: 60px;
        height: 60px;
    }
}

/* =========================================
   WHATSAPP AURYA — ESTILO TERS EXACTO
========================================= */

.aurya-wsp-ters {
    position: fixed;
    bottom: 22px;
    right: 22px;   /* 👈 ahora a la derecha */
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    text-decoration: none;
}


/* Burbuja blanca */
.aurya-wsp-bubble {
    background: #ffffff;
    color: #111;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.25;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.aurya-wsp-bubble span {
    font-size: 12px;
    opacity: .7;
}

/* Círculo logo */
.aurya-wsp-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #d09352; /* dorado AURYA */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.aurya-wsp-circle img {
    width: 65%;
    height: 65%;
    object-fit: contain;
}

/* ===============================
   TOOLBAR FILTROS / ORDENAR
   (ESTILO TERS)
================================ */

.collection-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    gap: 20px;
}

/* BOTÓN FILTRAR */
.filter-toggle {
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    color: #111;
}

/* ORDENAR POR */
.sort-by {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.sort-by span {
    opacity: .7;
}

.sort-by select {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    padding-right: 18px;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='6' viewBox='0 0 10 6' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
}

/* ===============================
   PANEL FILTROS (LIMPIO)
================================ */

.filters-panel {
    background: #fff;
    padding: 40px 30px;
    font-family: 'Montserrat', sans-serif;
}

.filters-panel h3 {
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.filters-panel label {
    font-size: 14px;
    cursor: pointer;
}

.filters-panel button {
    background: #111;
    color: #fff;
    border: none;
    padding: 14px;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 768px) {
    .collection-toolbar {
        flex-direction: row;
    }
}

.filter-toggle {
    font-weight: 600;
}

.sort-by span,
.sort-by select {
    font-weight: 600;
}

/* =====================
   GALLERY – MOBILE FIX
===================== */
@media (max-width: 768px) {

    .gallery-section {
        width: 100%;
        margin: 80px 0;
        padding-left: 16px;
    }

    .gallery-grid {
        display: flex;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 16px;
        scroll-snap-type: x mandatory;
    }

    .gallery-grid img {
        width: 80vw;
        height: auto;
        max-height: 520px;
        flex: 0 0 auto;
        scroll-snap-align: center;
    }

    /* Ocultar scrollbar */
    .gallery-grid::-webkit-scrollbar {
        display: none;
    }
}

/* =====================
   GALLERY LINK FIX
   (SEGURO)
===================== */

.gallery-grid a {
    position: relative;
    display: block;
}

/* Imagen de galería intacta */
.gallery-grid a img:first-child {
    width: 400px;
    height: 500px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* ÍCONO CARRITO PEQUEÑO */
.gallery-grid .gallery-cart {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.7);
    padding: 6px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    pointer-events: none; /* 🔑 ESTO EVITA QUE ROMPA CLIC */
}

/* MOBILE */
@media (max-width: 768px) {
    .gallery-grid a img:first-child {
        width: 80vw;
        height: auto;
    }
}

/* ============================
   HERO RESPONSIVE - MOBILE
============================ */
@media (max-width: 768px) {

    .aurya-hero {
        height: 85vh;
        background-position: 65% 30%;
    }

    .aurya-hero-overlay {
        align-items: center;
        padding-bottom: 0;
        background: rgba(0,0,0,0.35);
    }

    .aurya-hero-content {
        margin-left: 0;
        text-align: center;
        padding: 0 22px;
    }

}

@media (max-width: 768px) {

    .hero-editorial {
        font-size: 12px;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }

}

@media (max-width: 768px) {

    .aurya-cta {
        padding: 13px 28px;
        font-size: 12px;
        letter-spacing: 1.8px;
    }

}

@media (max-width: 768px) {

    .aurya-hero-overlay {
        align-items: center;
        justify-content: center;
    }

    .aurya-hero-content {
        text-align: center;
        margin-left: 0;
        transform: translateY(40px);
    }

}

@media (max-width: 768px) {

    .collection-toolbar {
        display: block;
        padding: 16px 14px;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        background: #fff;
    }

    .toolbar-left {
        width: 100%;
    }

    /* FORZAR QUE SE VEA EL BOTÓN */
    .ters-filter {
        display: flex !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 14px 0;
        border: 1.5px solid #111;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #111;
        text-decoration: none;
    }

    /* OCULTAR ORDENAR */
    .toolbar-right {
        display: none !important;
    }
}

/* =========================================================
   FOOTER AURYA — BASE (DESKTOP)
========================================================= */

.aurya-footer {
    width: 100%;
    background: #fff;
    padding: 60px 80px 40px;
    border-top: 1px solid #eee;
}

.aurya-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
}

.footer-col h4 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: #111;
}

.footer-col p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    font-size: 14px;
    color: #666;
    text-decoration: none;
}

.footer-col ul li a:hover {
    color: #111;
}

.aurya-footer-bottom {
    margin-top: 50px;
    text-align: center;
    font-size: 12px;
    color: #888;
}


/* =========================================================
   FOOTER MOBILE — ESTILO TERS (ACCORDION)
========================================================= */

@media (max-width: 768px) {

    /* RESET GENERAL MOBILE */
    .aurya-footer,
    .aurya-footer-container,
    .footer-col {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    .aurya-footer {
        padding: 30px 20px;
    }

    .aurya-footer-container {
        display: block;
    }

    .footer-col {
        border-bottom: 1px solid #e5e5e5;
        padding: 14px 0;
    }

    .footer-col:last-child {
        border-bottom: none;
    }

    /* TITULOS (SIEMPRE VISIBLES) */
    .footer-col h4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        color: #111;
    }

    /* FLECHA */
    .footer-col h4::after {
        content: "›";
        font-size: 18px;
        transform: rotate(90deg);
        transition: transform 0.25s ease;
    }

    .footer-col.active h4::after {
        transform: rotate(-90deg);
    }

    /* CONTENIDO OCULTO POR DEFECTO */
    .footer-col p,
    .footer-col ul {
        display: none;
    }

    /* CONTENIDO VISIBLE AL ABRIR */
    .footer-col.active p,
    .footer-col.active ul {
        display: block;
        margin-top: 12px;
    }

    .footer-col ul li {
        margin-bottom: 8px;
    }

    .footer-col ul li a {
        font-size: 14px;
        color: #666;
        text-decoration: none;
    }

    .aurya-footer-bottom {
        margin-top: 30px;
        font-size: 12px;
        text-align: center;
        color: #888;
    }

}