/* ======================================
✅ ESTILOS GENERALES
Función: Configuración base para toda la página
====================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: #fcf9f5;
    background-image: linear-gradient(135deg, transparent 50%, #f3ede6 50%, #f3ede6 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    padding: 20px;
    line-height: 1.6;
}

.oculto { display: none !important; }

/* ======================================
✅ PANTALLA DE CARGA
Función: Estilo para mostrar el logo al inicio
====================================== */
#pantalla-carga {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.logo-carga {
    width: clamp(320px, 70vw,650px);
    max-width: 90%; /*nunca supera el ancho de la pantalla*/
    height:auto; /* Mantiene la proporción original */
    object-fit:contain;/*no deforma la imagen*/
    margin: 0 auto;
    animation: aparecer 1s ease;
}

@keyframes aparecer {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* ======================================
✅ VENTANA DE REGISTRO
Función: Estilo del formulario y fondo animado
====================================== */
#ventana-registro {
    position: fixed;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    overflow: hidden;
}

.carrusel-fondo-registro {
    position: absolute;
    width: 100%;
    height: 100%;
}
/* ======================================
✅ fondos del registro
====================================== */
.img-fondo {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: cambio-fondo 10s infinite;
}

.img-fondo:nth-child(1) { animation-delay: 0s; }
.img-fondo:nth-child(2) { animation-delay: 4s; }

@keyframes cambio-fondo {
    0% { opacity: 0; }
    15% { opacity: 0.7; }
    45% { opacity: 0.7; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}

.formulario-registro {
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,0.92);
    padding: 35px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.formulario-registro h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #f3a712;
}

.formulario-registro input {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
}

#btn-ingresar {
    width: 100%;
    padding: 12px;
    background: #f3a712;
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

#btn-ingresar:hover { background: #d48f0f; }

/* ======================================
✅ ENCABEZADO
Función: Estilo del título, botones y fondo animado
====================================== */
.encabezado-principal {
    position: relative;
    background-color: #f7ba42;
    color: white;
    padding: 38px 25px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.fondo-animado {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.imagen-fondo {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fondo-encabezado 15s infinite;
}

.imagen-fondo:nth-child(1) { animation-delay: 0s; }
.imagen-fondo:nth-child(2) { animation-delay: 5s; }
.imagen-fondo:nth-child(3) { animation-delay: 10s; }

@keyframes fondo-encabezado {
    0% { opacity: 0; }
    15% { opacity: 0.25; }
    45% { opacity: 0.25; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}

.contenido-encabezado { position: relative; z-index: 2; }

.encabezado-principal h1 {
    font-size: 28px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.botones-categorias {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-categoria {
    background-color: white;
    color: #f3a712;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-categoria:hover {
    background-color: #fff3e0;
    transform: translateY(-2px);
}

.btn-carrito {
    background-color: #222 !important;
    color: white !important;
}

/* ======================================
✅ CARRUSEL DE PRODUCTOS
Función: Estilo de las imágenes, flechas y tarjetas
====================================== */
.galeria-seccion {
    display: none;
    margin-bottom: 40px;
}

.galeria-seccion h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 2px solid #f3a712;
    display: inline-block;
    padding-bottom: 5px;
    margin-left: 50%;
    transform: translateX(-50%);
}

.contenedor-carrusel {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background-color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.flecha {
    background: #f3a712;
    border: none;
    color: white;
    font-size: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.3s;
}

.flecha:hover { background: #d48f0f; }

.carrusel-rastro {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px;
    flex: 1;
}

.item-imagen {
    min-width: calc(33.333% - 15px);
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.contenedor-imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.etiqueta-vendido {
    background-color: #e74c3c;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}

.info-producto {
    color: #555;
    font-size: 14px;
    margin-bottom: 15px;
}

.btn-comprar {
    background-color: #f3a712;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-comprar:hover {
    background-color: #d48f0f;
    transform: scale(1.05);
}

/* ======================================
✅ ASISTENTE Y PAGOS
Función: Estilo de botones y ventanas flotantes
====================================== */
.asistente-contacto {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 100;
}

.asistente-contacto h4 { color: #f3a712; margin-bottom: 8px; }
.asistente-contacto a { text-decoration: none; color: #333; display: block; margin: 4px 0; }
.asistente-contacto a:hover { color: #f3a712; }

.boton-pagos {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 18px;
    background: #222;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 100;
    transition: 0.3s;
}

.boton-pagos:hover { background: #444; }

.ventana {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.contenido-pagos {
    background: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    width: 90%;
    max-width: 350px;
    position: relative;
}

.cerrar {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #888;
}

.qr { width: 150px; margin: 15px 0; }
.boton-tarjeta {
    padding: 10px 20px;
    background: #f3a712;
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

/* ======================================
✅ REDES SOCIALES
====================================== */
.redes-sociales {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.btn-red {
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-red.facebook { background-color: #1877f2; }
.btn-red.tiktok { background-color: #000000; }
.btn-red.whatsapp { background-color: #25d366; }
.btn-red:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

/* ======================================
✅ ADAPTACIÓN A DISPOSITIVOS MÓVILES
====================================== */
@media (max-width: 768px) {
    .item-imagen { min-width: calc(50% - 10px); }
    .encabezado-principal h1 { font-size: 22px; }
}

@media (max-width: 480px) {
    .item-imagen { min-width: 100%; }
    .contenedor-carrusel { padding: 10px; gap: 8px; }
}