/* ===== Reset y general ===== */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Arial',sans-serif; }
body { min-height:100vh; transition:background-color 0.5s, color 0.5s; scroll-behavior: smooth; }

/* ===== Header ===== */
header { width:100%; position:fixed; top:0; left:0; z-index:1000; transition: background 0.4s ease, padding 0.4s ease; backdrop-filter: blur(8px); }
header .top-bar { display:flex; justify-content:space-between; align-items:center; background: linear-gradient(90deg, rgba(0,123,255,0.55), rgba(30,58,138,0.55)); color:#fff; padding:1px 30px; font-size:0.9rem; border-bottom:1px solid rgba(255,255,255,0.2); transition: background 0.4s ease; }
header.scrolled .top-bar { background: rgba(30, 58, 138, 0.9); }

/* Botones generales */
.btn-mi-cuenta, .btn-registrase, .btn-diamante { background:#0d6efd; color:#fff; border:none; border-radius:8px; padding:6px 15px; font-weight:bold; cursor:pointer; transition:0.3s; }
.btn-carrito { background:#ff7f00; color:#111; border:none; border-radius:8px; padding:6px 15px; font-weight:bold; cursor:pointer; transition:0.3s; }
.btn-mi-cuenta:hover, .btn-carrito:hover, .btn-diamante:hover, .btn-registrase:hover, #language-selector:hover { opacity:0.85; }

/* Selector de idioma */
#language-selector { border-radius:8px; padding:6px 12px; border:none; background:#0d6efd; color:#fff; font-weight:bold; cursor:pointer; transition:0.3s; margin-left:8px; }
#language-selector:hover { opacity:0.85; }

/* Bottom bar */
header .bottom-bar { display:flex; flex-direction:column; align-items:center; background: rgba(13, 110, 253, 0.5); padding:10px 30px; border-bottom:1px solid rgba(255,255,255,0.2); transition: background 0.4s ease, padding 0.4s ease; backdrop-filter: blur(8px); }
header.scrolled .bottom-bar { background: rgba(13, 110, 253, 0.9); padding:5px 30px; }
header .bottom-bar .logo-title { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
header .bottom-bar .logo-title img { height:100px; transition: height 0.4s ease; }
header.scrolled .bottom-bar .logo-title img { height:70px; }
header .bottom-bar .nav-menu { display:flex; align-items:center; justify-content:center; gap:25px; flex-wrap:wrap; }
header .bottom-bar .nav-menu a { color:#fff; text-decoration:none; font-weight:bold; transition:0.3s; cursor:pointer; }
header .bottom-bar .nav-menu a:hover { opacity:0.8; }

/* ===== Slider ===== */
#sectionCega { width:110%; display:flex; justify-content:center; align-items:center; overflow:hidden; position:relative; }
.slides-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slides-wrapper { display: flex; transition: transform 0.5s ease; }
.slide { min-width: 100%; position: relative; }
.slide img { width:100%; height:100%; object-fit: cover; display:block; }
#slider-text { position:absolute; bottom:480px; left:50%; transform:translateX(-50%); color:white; font-size:2rem; font-weight:bold; cursor:pointer; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); z-index:10; text-align:center; transition: color 0.6s, transform 0.6s; }
#slider-text.anim { color: yellow; transform: translateX(-50%) translateY(-20px); animation: sliderBounce 0.6s forwards; }

@keyframes sliderBounce {
0% { transform: translateX(-50%) translateY(-20px); }
50% { transform: translateX(-50%) translateY(10px); }
100% { transform: translateX(-50%) translateY(0px); }
}

/* ===== Productos ===== */
#productos { padding:60px 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:25px; }
.product-card { background-color:#fff; border-radius:20px; padding:20px; display:flex; flex-direction:column; align-items:center; transition: transform 0.4s ease, box-shadow 0.4s ease; cursor:pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.product-card:hover { transform:translateY(-10px); box-shadow:0 12px 40px rgba(0,0,0,0.5); }
.product-card img { width:100%; border-radius:16px; margin-bottom:12px; }

/* ===== OVERLAY PRODUCTOS ESTRELLA ===== */
#pantalla-inicial {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

#pantalla-inicial.ocultar {
    opacity: 0;
    pointer-events: none;
}

/* CONTENEDOR PRINCIPAL */
.contenido-inicial {
    width: 95%;
    max-width: 1200px;
    height: auto;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* PRODUCTO GRANDE */
.card-estrella {
    flex: 1;
    text-align: center;
    min-width: 0;
}

/* IMAGEN PROTAGONISTA */
.card-estrella img {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.card-estrella img:hover {
    transform: scale(1.1);
}

/* TEXTO GRANDE */
.card-estrella h3 {
    font-size: 22px;
    margin-top: 20px;
    font-weight: bold;
}

/* PRECIO DESTACADO */
.card-estrella p {
    font-size: 24px;
    color: #0d6efd;
    font-weight: bold;
    margin-top: 10px;
}

/* ========================= */
/* RESPONSIVE SOLO CELULAR PRODUCTO ESTRELLA */
/* ========================= */
@media (max-width: 768px) {

    body {
        overflow-x: hidden; /* evita scroll horizontal */
    }

    /* Overlay principal */
    #pantalla-inicial {
        align-items: center; /* centrar verticalmente */
        justify-content: center; /* centrar horizontalmente */
        padding: 20px 10px; 
    }

    /* Contenedor principal del overlay */
    #pantalla-inicial .contenido-inicial {
        flex-direction: column; /* tarjetas verticales */
        width: 90%; /* ocupar ancho seguro */
        max-width: 360px; /* nunca se desborde */
        padding: 15px;
        gap: 20px; 
        justify-content: center; 
        align-items: center; /* centrar horizontal */
    }

    /* Producto estrella */
    #pantalla-inicial .card-estrella {
        flex: none; /* no se estire */
        width: 100%; 
        max-width: 300px; /* tamaño máximo en celular */
        margin: 0 auto; /* centrar horizontal */
        text-align: center;
    }

    /* Imagen del producto */
    #pantalla-inicial .card-estrella img {
        width: 100%; 
        max-width: 280px; /* tamaño seguro */
        height: auto;
        display: block;
        margin: 0 auto;
        transform: none;
    }

    /* Texto del producto */
    #pantalla-inicial .card-estrella h3 {
        font-size: 18px; 
        margin-top: 10px;
        text-align: center;
    }

    /* Precio del producto */
    #pantalla-inicial .card-estrella p {
        font-size: 16px; 
        text-align: center;
        margin-top: 5px;
    }

    /* Título del overlay */
    #pantalla-inicial h2 {
        font-size: 18px; 
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 100%;
    }
}