:root {
    --fondo-tienda: linear-gradient(rgba(24, 20, 18, 0.45), rgba(35, 28, 24, 0.55)), 
                    url('https://images.unsplash.com/photo-1603006905003-be475563bc59?auto=format&fit=crop&w=1920&q=80');
    --color-crema: #f5f0ea;
    --transicion: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--fondo-tienda) no-repeat center center fixed;
    background-size: cover;
    color: #f5f0ea;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* 1. PANTALLA DE BIENVENIDA (SPLASH SCREEN) */
#splash-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--fondo-tienda) no-repeat center center fixed;
    background-size: cover;
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.8s;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.logo-text-container {
    text-align: center;
    perspective: 1000px;
    opacity: 0;
    filter: blur(10px);
    animation: entradaLogo3D 4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    width: 100%;
    max-width: 800px;
}

.title-3d {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(34px, 8.5vw, 110px);
    color: var(--color-crema);
    margin: 0;
    line-height: 1.1;
    display: block;
    white-space: nowrap;
    text-shadow: 
        0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa,
        0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2),
        0 20px 20px rgba(0,0,0,.15);
    transform: rotateX(10deg);
}

.tagline-3d {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(10px, 2vw, 16px);
    color: var(--color-crema);
    text-transform: uppercase;
    letter-spacing: clamp(3px, 1vw, 8px);
    margin-top: 20px;
    display: block;
    opacity: 0.9;
    font-weight: 300;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

@keyframes entradaLogo3D {
    0% { opacity: 0; transform: scale(0.9) translateZ(-100px); filter: blur(15px); }
    100% { opacity: 1; transform: scale(1) translateZ(0); filter: blur(0); }
}

.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }

/* PANTALLA DE SELECCIÓN DE RUBRO */
#rubro-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(20, 16, 14, 0.88);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 999;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
    padding: 20px;
    box-sizing: border-box;
}

.rubro-container {
    display: flex; gap: 25px; margin-top: 40px; width: 100%; max-width: 800px; flex-wrap: wrap; justify-content: center;
}

.rubro-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(25px, 5vw, 40px) clamp(30px, 6vw, 60px); 
    border-radius: 16px;
    text-align: center; cursor: pointer;
    transition: var(--transicion); 
    flex: 1 1 250px;
    max-width: 340px;
    box-sizing: border-box;
}

.rubro-card:hover {
    background: rgba(230, 223, 213, 0.15);
    border-color: var(--color-crema);
    transform: translateY(-5px);
}

.rubro-card h3 {
    font-family: 'Montserrat', sans-serif; font-weight: 300;
    letter-spacing: 3px; text-transform: uppercase; color: #fff; margin: 0;
    font-size: clamp(14px, 2vw, 18px);
}

/* HEADER & NAVEGACIÓN RESPONSIVA */
header {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px 5%;
    background: rgba(20, 16, 14, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky; top: 0; z-index: 10;
}

.logo-nav {
    font-size: clamp(16px, 2.5vw, 20px); letter-spacing: 3px; text-transform: uppercase; color: #ffffff; font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    cursor: pointer;
}

nav { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
nav a { color: #e6dfd5; text-decoration: none; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; transition: color 0.3s; white-space: nowrap; font-weight: 400; }
nav a:hover, nav a.active { color: #ffffff; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px; }

/* CONTENEDOR DE AUDIO COMPUESTO */
.audio-container-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.audio-ctrl-btn {
    background: transparent; color: var(--color-crema); border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 14px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: var(--transicion);
}
.audio-ctrl-btn:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* Estilización del slider de volumen */
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    transition: background 0.3s;
    cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-crema);
    transition: transform 0.2s;
    cursor: pointer;
}
.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}
.volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background: var(--color-crema);
    transition: transform 0.2s;
    cursor: pointer;
}
.volume-slider::-moz-range-thumb:hover {
    transform: scale(1.3);
}

/* CONTENEDOR PRINCIPAL */
main { padding: 40px 20px; max-width: 1400px; margin: 0 auto; width: 100%; box-sizing: border-box; flex: 1; }
h1 { text-align: center; font-weight: 300; letter-spacing: 5px; color: #ffffff; text-transform: uppercase; font-size: clamp(22px, 4vw, 32px); margin: 10px 0; }
.subtitle { text-align: center; color: #e6dfd5; margin-bottom: 40px; font-size: clamp(11px, 1.8vw, 13px); letter-spacing: 2px; line-height: 1.4; }

#loading-text { text-align: center; font-size: 14px; color: #f5f0ea; font-style: italic; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; max-width: 400px; margin: 20px auto; box-sizing: border-box; }

/* GRILLA DE PRODUCTOS RESPONSIVA */
.productos-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
    gap: 25px; 
    width: 100%; 
    box-sizing: border-box;
}

@media (min-width: 1400px) { .productos-grid { grid-template-columns: repeat(4, 1fr); } }

.producto-card { background: rgba(20, 16, 14, 0.55); border-radius: 16px; padding: 20px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 25px rgba(0,0,0,0.3); position: relative; box-sizing: border-box; }
.producto-card.agotado { opacity: 0.65; }

.btn-editar-directo { position: absolute; top: 12px; right: 12px; background: rgba(20, 16, 14, 0.8); color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 5px 10px; border-radius: 6px; font-size: 10px; cursor: pointer; text-transform: uppercase; display: none; z-index: 5; transition: var(--transicion); }
.btn-editar-directo:hover { background: #e6dfd5; color: #14191d; border-color: #e6dfd5; }

.vela-container { width: 100%; height: 200px; background: rgba(0, 0, 0, 0.3); border-radius: 12px; display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 15px; overflow: hidden; }
.img-producto-subida { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.vela-render { width: 60px; height: 95px; background: linear-gradient(90deg, #cfc6ba 0%, #e3dad0 50%, #baa390 100%); border-radius: 4px; position: relative; margin-top: 20px; box-shadow: inset 0 6px 8px rgba(255,255,255,0.35), inset 0 -6px 12px rgba(0,0,0,0.2), 0 8px 20px rgba(0,0,0,0.35); }
.vela-render::before { content: ''; position: absolute; width: 2px; height: 10px; background: #1a1412; top: -9px; left: 50%; transform: translateX(-50%); border-radius: 1px; }
.llama-real { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 14px; height: 32px; background: radial-gradient(ellipse at bottom, #ffffff 15%, #ffb334 45%, #ff4500 80%, rgba(0, 50, 150, 0.4) 95%); border-radius: 50% 50% 38% 38%; box-shadow: 0 -4px 12px rgba(255,140,0,0.5), 0 4px 20px rgba(255,69,0,0.3); animation: parpadeoFotoReal 2.8s ease-in-out infinite alternate; transform-origin: bottom center; }

@keyframes parpadeoFotoReal { 0% { transform: translateX(-50%) scale(1) rotate(0deg); } 50% { transform: translateX(-51.5%) skewX(-0.8deg) scaleY(1.03); } 100% { transform: translateX(-49%) skewX(0.5deg) scale(0.98); } }
.detalles-dinamicos { display: none; }

.producto-card h2 { font-size: 14px; color: #ffffff; margin: 10px 0 5px 0; letter-spacing: 1px; text-transform: uppercase; font-weight: 400; line-height: 1.3; }
.info-precio { font-size: 16px; color: #e6dfd5; font-weight: bold; margin: 5px 0; }
.info-stock { font-size: 11px; color: #a39c94; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }

.btn-leer-mas { display: block; color: #14191d; background: #e6dfd5; padding: 12px; border-radius: 8px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; transition: var(--transicion); cursor: pointer; border: none; width: 100%; box-sizing: border-box; }
.btn-leer-mas:hover { background: #ffffff; transform: translateY(-2px); }
.producto-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.25); }

/* SECCIONES SECUNDARIAS CONTENEDORAS */
.sobre-nosotros-container, .contacto-container, .admin-section { 
    display: none; 
    width: 100%; 
    max-width: 700px; 
    margin: 20px auto; 
    background: rgba(20, 16, 14, 0.65); 
    border-radius: 16px; 
    padding: clamp(20px, 5vw, 40px) clamp(15px, 4vw, 30px); 
    border: 1px solid rgba(255,255,255,0.1); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4); 
    box-sizing: border-box; 
}

.sobre-nosotros-container h2, .contacto-container h2, .admin-section h2 { font-weight: 300; letter-spacing: 3px; text-transform: uppercase; text-align: center; color: #ffffff; margin-bottom: 25px; font-size: clamp(20px, 3.5vw, 26px); }
.sobre-nosotros-text { font-size: 14px; line-height: 1.7; color: #e6dfd5; text-align: justify; }
.sobre-nosotros-text p { margin-bottom: 20px; }
.sobre-nosotros-text p.firma { text-align: center; font-style: italic; color: #ffffff; margin-top: 30px; }

/* FORMULARIOS RESPONSIVOS */
.form-group { margin-bottom: 20px; text-align: left; width: 100%; box-sizing: border-box; }
.form-group label { display: block; font-size: 12px; color: #e6dfd5; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.form-group label span { color: #ff6b6b; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: #fff; box-sizing: border-box; font-size: 14px; font-family: inherit; transition: border-color 0.3s; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--color-crema); outline: none; }
.form-group textarea { resize: none; }
.caracteres-counter { text-align: right; font-size: 11px; color: #a39c94; margin-top: 5px; }

/* BARRA DE HERRAMIENTAS Y CAJA EDITABLE EXCLUSIVA */
.editor-toolbar {
    display: flex;
    gap: 6px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px;
    border-radius: 8px 8px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: none;
    flex-wrap: wrap;
}
.editor-toolbar button {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transicion);
}
.editor-toolbar button:hover {
    background: var(--color-crema);
    color: #14191d;
}
#admin-nosotros-editor {
    width: 100%;
    min-height: 250px;
    max-height: 450px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 0 8px 8px;
    color: #fff;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.6;
    overflow-y: auto;
    outline: none;
    text-align: left;
}
#admin-nosotros-editor:focus {
    border-color: var(--color-crema);
}
#admin-nosotros-editor[placeholder]:empty:before {
    content: attr(placeholder);
    color: #a39c94;
    font-style: italic;
}

/* CASILLAS EXTRA DINÁMICAS */
.fila-casilla-extra { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; width: 100%; }
.fila-casilla-extra input { 
    width: 100%; 
    padding: 12px; 
    background: rgba(0,0,0,0.4); 
    border: 1px solid rgba(255,255,255,0.15); 
    border-radius: 8px; 
    color: #ffffff !important;
    box-sizing: border-box; 
    font-size: 14px; 
    font-family: inherit; 
    transition: border-color 0.3s;
}
.fila-casilla-extra input:focus { border-color: var(--color-crema); outline: none; }

.btn-quitar-casilla { background: #ff6b6b; color: #fff; border: none; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: bold; transition: var(--transicion); }
.btn-quitar-casilla:hover { background: #ff4747; }
.btn-add-casilla-trigger { display: inline-block; background: transparent; border: 1px dashed var(--color-crema); color: var(--color-crema); padding: 8px 15px; border-radius: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; margin-bottom: 20px; transition: var(--transicion); }
.btn-add-casilla-trigger:hover { background: rgba(255,255,255,0.1); color: #fff; }

.btn-admin, .btn-enviar-contacto { width: 100%; padding: 13px; background: #e6dfd5; color: #14191d; border: none; border-radius: 8px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: var(--transicion); font-size: 12px; box-sizing: border-box; }
.btn-admin:hover, .btn-enviar-contacto:hover { background: #ffffff; }

/* PANEL CONTENEDOR DE FOTO REAL */
.preview-foto-panel { width: 100%; max-width: 140px; height: 140px; background: rgba(0,0,0,0.4); border: 1px dashed rgba(255,255,255,0.2); border-radius: 12px; margin-top: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; }
.preview-foto-panel img { width: 100%; height: 100%; object-fit: cover; }

/* Botón de borrado de foto sobre la previsualización */
.btn-borrar-foto-overlay { display: none; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: #ff6b6b; color: #fff; border: none; padding: 4px 8px; font-size: 10px; font-weight: bold; border-radius: 4px; cursor: pointer; text-transform: uppercase; transition: var(--transicion); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.btn-borrar-foto-overlay:hover { background: #ff4747; }

/* TABLA DE GESTIÓN DE USUARIOS VISUAL EXCLUSIVA RESPONSIVA */
.tabla-usuarios-wrapper { width: 100%; overflow-x: auto; margin-top: 15px; background: rgba(0,0,0,0.2); border-radius: 8px; padding: 5px; -webkit-overflow-scrolling: touch; }
.tabla-usuarios { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; color: #e6dfd5; min-width: 520px; }
.tabla-usuarios th { background: rgba(255,255,255,0.07); padding: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.tabla-usuarios td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }

.acciones-flex-container { display: flex; gap: 8px; align-items: center; justify-content: flex-start; flex-wrap: wrap; }

.badge-rol { padding: 3px 8px; border-radius: 12px; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-rol.admin { background: #e67e22; color: #fff; }
.badge-rol.gestor { background: #34495e; color: #e6dfd5; }

.btn-cambiar-acceso { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; white-space: nowrap; transition: var(--transicion); text-transform: uppercase; letter-spacing: 0.5px; }
.btn-cambiar-acceso:hover { background: #fff; color: #14191d; border-color: #fff; }

.btn-blanquear { background: transparent; border: 1px solid #ff6b6b; color: #ff6b6b; padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; white-space: nowrap; transition: var(--transicion); text-transform: uppercase; letter-spacing: 0.5px; }
.btn-blanquear:hover { background: #ff6b6b; color: #fff; }

.btn-eliminar-usuario { background: #ff4747; border: 1px solid #ff4747; color: #fff; padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; white-space: nowrap; transition: var(--transicion); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.btn-eliminar-usuario:hover { background: #b31c1c; border-color: #b31c1c; }

/* MODAL RESPONSIVO */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 13, 16, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 2000; justify-content: center; align-items: center; padding: 15px; box-sizing: border-box; }
.modal-content { background: rgba(30, 25, 22, 0.98); border: 1px solid rgba(255,255,255,0.2); padding: clamp(20px, 5vw, 30px); border-radius: 16px; width: 100%; max-width: 480px; text-align: center; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.6); box-sizing: border-box; max-height: 90vh; overflow-y: auto; }
.close-modal { position: absolute; top: 12px; right: 15px; font-size: 24px; color: #c2b9b0; cursor: pointer; transition: color 0.3s; }
.close-modal:hover { color: #fff; }

.modal-vela-view { width: 100%; height: 180px; background: rgba(0,0,0,0.3); border-radius: 12px; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; overflow: hidden; }
.modal-detalles-info { text-align: left; background: rgba(0,0,0,0.25); padding: 15px; border-radius: 10px; margin-top: 10px; color: #e6dfd5; font-size: 13px; line-height: 1.6; }
.modal-detalles-info p { margin: 6px 0; }

footer { padding: 25px 20px; text-align: center; color: #c2b9b0; font-size: 11px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(20, 16, 14, 0.8); margin-top: auto; line-height: 1.5; }

/* MEDIA QUERIES INTEGRADAS PARA RESPONSIVE EN CUALQUIER SMARTPHONE O TABLET */
@media (max-width: 768px) {
    header { flex-direction: column; gap: 15px; text-align: center; padding: 20px 15px; }
    nav { justify-content: center; width: 100%; gap: 12px 18px; }
    nav a { font-size: 10px; letter-spacing: 1.5px; }
    .audio-container-flex { width: 100%; justify-content: center; margin-top: 5px; gap: 12px; }
    .audio-ctrl-btn { flex: 1; justify-content: center; padding: 8px; }
    .volume-slider { width: 90px; height: 6px; }
    main { padding: 25px 15px; }
    .rubro-container { gap: 15px; }
    .rubro-card { padding: 30px 20px; max-width: 100%; }
    .fila-casilla-extra { flex-direction: column; gap: 8px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; }
    .fila-casilla-extra input { width: 100% !important; }
    .btn-quitar-casilla { width: 100%; padding: 10px; margin-top: 2px; }
}

@media (max-width: 480px) {
    .productos-grid { grid-template-columns: 1fr; }
    .modal-content { padding: 20px 15px; }
}

/* Forzar visibilidad del enlace de registro en el formulario de acceso */
#toggle-auth-mode {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 20px !important;
    text-align: center !important;
    color: #c2b9b0 !important;
    text-decoration: underline !important;
}