/* =======================================================
   ESTILOS GENERALES (BASE)
   ======================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Montserrat:wght@300;500;700;800&family=UnifrakturMaguntia&display=swap');

:root {
    --bg-deep: #050505;
    --bg-panel: #111111;
    --text-bone: #EAE6D6;
    --gold-muted: #C0B283;
    --glass: rgba(20, 20, 20, 0.7);
    --danger: #ff4d4d;
    --success: #25D366;
}

/* RESET COMPLETO */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw; /* Asegura que no pase del ancho de la ventana */
    overflow-x: hidden; /* ¡ESTO CORTA LO QUE SOBRA A LOS LADOS! */
    background-color: var(--bg-deep);
    color: var(--text-bone);
    font-family: 'Montserrat', sans-serif;
    position: relative; /* Ayuda a contener elementos absolutos */
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-bone); }

.noise-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    opacity: 0.1; pointer-events: none; z-index: 0;
}

/* =======================================================
   SECCIÓN HERO (PORTADA)
   ======================================================= */
.hero-section {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 70%);
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.hero-content { width: 100%; max-width: 600px; margin: 0 auto; }

.hero-logo {
    width: 80%; max-width: 350px; height: auto;
    filter: drop-shadow(0 0 20px rgba(234, 230, 214, 0.15));
}
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
.floating-anim { animation: float 6s ease-in-out infinite; }

.hero-subtitle {
    margin-top: 20px; letter-spacing: 5px; font-size: 0.9rem; color: #666;
}

.btn-scroll {
    display: inline-block; margin-top: 40px; padding: 12px 30px;
    border: 1px solid var(--text-bone); color: var(--text-bone);
    text-decoration: none; font-size: 0.8rem; letter-spacing: 2px; transition: 0.4s;
}
.btn-scroll:hover { background: var(--text-bone); color: #000; }

/* =======================================================
   LAYOUT PRINCIPAL
   ======================================================= */
.main-wrapper {
    max-width: 1400px; margin: 0 auto;
    padding: 60px 20px; position: relative; z-index: 2;
}

.section-header { margin-bottom: 50px; text-align: left; }
.section-header h2 {
    font-family: 'UnifrakturMaguntia', cursive; font-size: 3rem;
    font-weight: normal; letter-spacing: 2px; margin: 0;
}
.line { width: 50px; height: 2px; background: var(--gold-muted); margin-top: 10px; }

.content-grid {
    display: flex; gap: 40px; align-items: flex-start;
}

/* =======================================================
   GRID DE PRODUCTOS (Escritorio por defecto)
   ======================================================= */
.products-grid {
    flex: 3;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    width: 100%;
}

.card {
    background: transparent; border: 1px solid #222;
    transition: 0.4s ease; border-radius: 4px; overflow: hidden;
}
.card:hover { border-color: var(--gold-muted); transform: translateY(-5px); }

.card-image { position: relative; overflow: hidden; height: 300px; }
.card-image img {
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s; filter: grayscale(100%);
}
.card:hover .card-image img { filter: grayscale(0%); transform: scale(1.05); }

/* Overlay Botones (Escritorio) */
.card-overlay {
    position: absolute; bottom: -60px; left: 0; width: 100%;
    background: rgba(0,0,0,0.8); padding: 15px; transition: 0.3s;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.card:hover .card-overlay { bottom: 0; }

.btn-icon {
    background: rgba(255,255,255,0.1); border: 1px solid var(--text-bone);
    color: var(--text-bone); width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s;
}
.btn-icon:hover { background: var(--text-bone); color: #000; }

.btn-add-mini {
    background: var(--text-bone); border: none; padding: 10px 20px;
    font-weight: bold; cursor: pointer; font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px; width: 90%; text-transform: uppercase;
}
.btn-add-mini:hover { background: #fff; }

.card-info { padding: 20px; text-align: center; background: var(--bg-panel); }
.card-info h3 { font-family: 'Cinzel', serif; font-size: 1.1rem; margin-bottom: 5px; color: #fff; }
.price { color: #888; font-size: 0.95rem; display: block; margin-top: 5px; }

/* Estados de Stock */
.sold-out-card .card-image img { opacity: 0.4; filter: grayscale(100%); }
.sold-out-card:hover { transform: none; border-color: #333; }
.badge-no-stock {
    background: #500; color: #fff; padding: 5px 10px; font-size: 0.8rem;
    border: 1px solid #f00; letter-spacing: 1px; width: 100%; text-align: center;
}

/* =======================================================
   CARRITO DE COMPRAS (Escritorio)
   ======================================================= */
.cart-panel {
    flex: 1;
    position: sticky; top: 20px;
    background: var(--glass); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px; overflow: hidden;
}

.cart-header {
    padding: 20px; background: rgba(0,0,0,0.3);
    border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center;
}
.cart-header h3 { font-family: 'UnifrakturMaguntia', cursive; font-size: 1.5rem; letter-spacing: 1px; margin: 0; }
.cart-toggle-icon { display: none; } /* Solo móvil */

#cart-content { padding: 20px; }
.cart-list { list-style: none; margin-bottom: 20px; max-height: 300px; overflow-y: auto; }
.cart-list li { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 10px 0; font-size: 0.9rem; }

.cart-total { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: bold; margin: 20px 0; color: var(--gold-muted); }
.cart-total-internal { display: none; } /* Solo móvil */

.btn-checkout {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    background: var(--success); color: #000; text-decoration: none; padding: 15px;
    font-weight: bold; border: none; width: 100%; cursor: pointer; transition: 0.3s;
}
.btn-checkout:hover { background: #1ebc57; box-shadow: 0 0 15px rgba(37,211,102,0.3); }

.empty-cart { text-align: center; color: #666; padding: 30px 0; }
.empty-cart i { font-size: 2rem; margin-bottom: 10px; display: block; }
.link-clear { color: #666; font-size: 0.8rem; margin-top: 10px; }

/* Cabecera flotante móvil (oculta en PC) */
.header-info, .header-expand { display: none; }

/* =======================================================
   FOOTER & MODAL
   ======================================================= */
.site-footer {
    background: #000; border-top: 1px solid #222; padding: 60px 20px; margin-top: 80px; position: relative; z-index: 2;
}
.footer-container { max-width: 1000px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 30px; }
.footer-logo { width: 120px; opacity: 0.7; }
.footer-social { display: flex; justify-content: center; gap: 20px; }
.social-link {
    color: var(--text-bone); text-decoration: none; padding: 10px 20px;
    border: 1px solid #333; border-radius: 50px; display: flex; align-items: center; gap: 10px; transition: 0.3s;
}
.social-link:hover { border-color: var(--text-bone); background: #111; }
.footer-credits { border-top: 1px solid #111; padding-top: 20px; font-size: 0.8rem; color: #555; }
.esesweb-effect { color: #888; font-weight: bold; text-decoration: none; transition: 0.3s; }
.esesweb-effect:hover { color: #fff; text-shadow: 0 0 10px #bc13fe; }

/* Modal */
.modal-overlay {
    display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease;
}
.modal-overlay.active { opacity: 1; }
.modal-content { width: 90%; max-width: 800px; text-align: center; position: relative; }
.close-modal { position: absolute; top: -30px; right: 0; font-size: 40px; cursor: pointer; color: #fff; }
.main-view { height: 60vh; display: flex; justify-content: center; margin-bottom: 20px; }
.main-view img { max-height: 100%; max-width: 100%; object-fit: contain; }
.thumbnail-strip { display: flex; justify-content: center; gap: 10px; }
.thumb-img { width: 60px; height: 60px; object-fit: cover; border: 1px solid #333; cursor: pointer; opacity: 0.6; }
.thumb-img:hover { opacity: 1; border-color: var(--gold-muted); }
.modal-title { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bone); text-transform: uppercase; margin-bottom: 20px; letter-spacing: 2px; }

/* =========================================
   ESTILOS SOLO PARA MÓVIL (Max 768px)
   ========================================= */
@media (max-width: 768px) {

    /* --- 1. HERO Y ESTRUCTURA --- */
    .hero-section { height: 100vh; min-height: 500px; padding: 0 20px; }
    .hero-logo { width: 60%; max-width: 250px; }
    .main-wrapper { padding: 40px 15px 140px 15px; width: 100%; }
    .content-grid { flex-direction: column; gap: 0; }
    .section-header h2 { font-size: 2rem; text-align: center; }
    .section-header .line { margin: 10px auto; }

    /* --- 2. GRID DE PRODUCTOS --- */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important;
        width: 100%;
        padding-bottom: 150px; /* Espacio para que no se corte al final */
    }

    .card { width: 100%; border-radius: 8px; border: none; background: #111; }
    
    /* IMAGEN MÁS LIMPIA */
    .card-image { 
        height: 170px; 
        border-radius: 8px 8px 0 0;
        position: relative; /* Vital para posicionar botones */
    }
    .card-image img { filter: grayscale(0%); } 

    /* --- 3. BOTONES "LUJO" (REDDISEÑADOS) --- */
    
    /* El contenedor ahora es invisible, solo sirve para posicionar */
    .card-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: transparent; /* Quitamos el fondo oscuro general */
        opacity: 1;
        padding: 0;
        display: block; /* Para poder mover elementos libremente */
        pointer-events: none; /* Permite tocar la foto para abrir modal */
    }

    /* Botón EXPANDIR (Lupa/Zoom) -> Arriba Derecha, Sutil */
    .btn-icon {
        pointer-events: auto; /* Reactivamos el clic */
        position: absolute;
        top: 8px; 
        right: 8px;
        width: 32px; height: 32px;
        background: rgba(0,0,0,0.4); /* Oscuro semitransparente */
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255,255,255,0.2);
        color: #fff;
        border-radius: 50%; /* Círculo perfecto */
        font-size: 0.8rem;
        display: flex; align-items: center; justify-content: center;
        z-index: 2;
    }

    /* Botón AGREGAR (+) -> Abajo Derecha, Dorado y Llamativo */

    /* ... otros estilos anteriores ... */

    /* 1. EL CONTENEDOR DEL BOTÓN (El círculo dorado) */
    .btn-add-mini {
        pointer-events: auto;
        position: absolute;
        bottom: 8px;  /* Posición: Abajo */
        right: 8px;   /* Posición: Derecha */
        
        width: 40px;  /* Ancho fijo */
        height: 40px; /* Alto fijo igual al ancho */
        border-radius: 50%; /* ¡ESTO LO HACE REDONDO! */
        
        background: var(--gold-muted);
        color: #000;
        border: none;
        box-shadow: 0 4px 8px rgba(0,0,0,0.4);
        z-index: 2;
        padding: 0; /* Quitamos relleno interno */

        /* --- MAGIA PARA OCULTAR TEXTO Y CENTRAR ICONO --- */
        font-size: 0 !important; /* TRUCO CLAVE: Oculta la palabra "AGREGAR" */
        
        display: flex; /* Usamos Flexbox... */
        align-items: center;     /* ...para centrar verticalmente... */
        justify-content: center; /* ...y horizontalmente el icono */
    }
    
    /* 2. EL ICONO '+' DENTRO DEL CÍRCULO */
    .btn-add-mini i { 
        margin: 0;
        font-weight: 800; 
        font-size: 1.4rem !important; /* Recuperamos el tamaño del icono (ya que el padre es 0) */
        line-height: 1; /* Ayuda al centrado vertical exacto */
        display: block;
    }

    /* ... el resto del CSS ... */

    /* --- 4. INFO DEL PRODUCTO --- */
    .card-info { padding: 12px 8px; text-align: left; }
    
    .card-info h3 { 
        font-size: 0.8rem; 
        font-weight: 700;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
        margin-bottom: 4px;
        color: var(--text-bone);
    }
    
    .card-info .price { 
        font-size: 0.9rem; 
        color: var(--gold-muted); 
        font-weight: 500;
    }

    /* --- 5. CÁPSULA FLOTANTE (CARRITO) --- */
    .cart-panel {
        position: fixed !important;
        bottom: 20px !important; 
        left: 15px !important; right: 15px !important;
        top: auto !important; width: auto !important; margin: 0 !important;
        height: 70px !important;
        background: #151515; border: 1px solid var(--gold-muted); border-radius: 15px;
        z-index: 999999; overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.9);
        display: flex; flex-direction: column; transform: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .cart-panel.open {
        height: 75vh !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
        border-radius: 20px 20px 0 0; border: none; border-top: 2px solid var(--gold-muted);
    }

    .cart-header {
        height: 70px; min-height: 70px; padding: 0 20px;
        background: transparent; border: none; cursor: pointer;
        display: flex; justify-content: space-between; align-items: center;
    }
    .cart-header h3 { display: none; }
    
    .header-info, .header-expand { display: flex !important; }
    .header-info { flex-direction: row; align-items: center; gap: 8px; }
    .header-label { font-size: 0.7rem; color: #aaa; }
    .header-amount { font-weight: 800; font-size: 1.1rem; color: var(--gold-muted); line-height: 1; }
    
    .header-expand {
        align-items: center; gap: 8px; font-size: 0.7rem; font-weight: bold;
        color: #000; background: var(--text-bone); padding: 8px 12px; border-radius: 50px;
    }
    .cart-toggle-icon { display: block; font-size: 0.9rem; transition: 0.3s; }
    .cart-panel.open .cart-toggle-icon { transform: rotate(180deg); }

    #cart-content {
        background: #050505; flex: 1; padding: 20px; border-top: 1px solid #333;
    }
    .cart-total { display: none; }
    .cart-total-internal { display: flex !important; justify-content: space-between; margin-top: 15px; padding-top: 15px; border-top: 1px solid #333; font-weight: bold; font-size: 1.2rem; }
    
    .footer-slogan { display: none; }
}