*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    overflow-x:hidden;
    font-family:sans-serif;
    background:#fff;
}



.navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;

    width:100%;

    height:80px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 20px;

    background:rgba(0,0,0,.8);

    z-index:1000;
}

/* Logo LED */
.logo-circle{
    position:relative;
    width:110px;
    height:110px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:visible;
}

.logo-circle::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;

    background:radial-gradient(circle,
        rgba(98,255,0,.55) 0%,
        rgba(98,255,0,.25) 40%,
        transparent 75%);

    opacity:0;
    transform:scale(.7);
    transition:.45s;
    filter:blur(18px);
    z-index:-1;
}

.logo-circle:hover::before{
    opacity:1;
    transform:scale(1.25);
}

.logo-circle img{
    width:70%;
    object-fit:contain;
    transition:.45s;
}

.logo-circle:hover img{

    transform:scale(1.12);

    filter:
        brightness(1.15)
        saturate(1.25)
        drop-shadow(0 0 8px #7fff00)
        drop-shadow(0 0 18px #00ff99)
        drop-shadow(0 0 35px #00ff99);
}
/* Menú PC */
.nav-links { display: flex; list-style: none; gap: 25px; }
.nav-links a { color: white; text-decoration: none; font-weight: bold; }
.menu-ofertas {
    color: #ff0000 !important; /* Rojo puro */
    font-weight: bold;         /* Opcional: para que resalte más */
}

/* Opcional: efecto al pasar el ratón */
/* Usamos un selector más específico para ganar prioridad */
.nav-links li a.menu-ofertas {
    color: #ff0000 !important;
    font-weight: bold !important;
    animation: parpadeo 1.5s infinite ease-in-out !important;
    display: inline-block; /* Necesario para que la animación afecte bien al texto */
}

@keyframes parpadeo {
    0% { 
        opacity: 1; 
        text-shadow: 0 0 5px #ff0000; 
    }
    50% { 
        opacity: 0.4; 
        text-shadow: 0 0 15px #ff0000; 
    }
    100% { 
        opacity: 1; 
        text-shadow: 0 0 5px #ff0000; 
    }
}
/* Hamburguesa (Oculta en escritorio) */
.menu-toggle { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background: white; transition: 0.3s; }

/* RESPONSIVO */
@media (max-width: 768px) {
    .menu-toggle { display: block; }
    
    .nav-links {
        display: none; 
        position: absolute; 
        top: 62px; /* Ajusta según la altura de tu header */
        left: 0; 
        width: 100%;
        background: rgba(0, 0, 0, 0.95); 
        flex-direction: column; 
        text-align: center; 
        padding: 20px 0;
        z-index: 1000; /* IMPORTANTE: Esto asegura que esté al frente */
    }

    .nav-links.active { display: flex !important; } 

    /* Animación X */
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

.cart-btn { background: #000; color: #00ff00; border: 2px solid #00ff00; padding: 8px 12px; border-radius: 50px; cursor: pointer; }

/* Estilo para las redes sociales */
/* Contenedor de redes */
.social-links {
    display: flex;
    gap: 20px; /* Aumenta el espacio entre iconos */
    align-items: center;
    padding: 0 10px;
}

/* Estilo base de los iconos */
.social-icon {
    color: #fff;
    font-size: 22px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Colores oficiales y efecto LED */
.facebook:hover { color: #1877f2; filter: drop-shadow(0 0 8px #1877f2); }
.instagram:hover { color: #e4405f; filter: drop-shadow(0 0 8px #e4405f); }
.tiktok:hover { color: #fe2c55; filter: drop-shadow(0 0 8px #fe2c55); }

/* RESPONSIVO PARA CELULARES */
@media (max-width: 768px) {
    .social-links {
        gap: 15px; /* Ajuste menor en móvil */
        order: 3;
        margin-bottom: 10px; /* Separación si aparecen debajo del menú */
    }
    
    .social-icon {
        font-size: 26px; /* Iconos un poco más grandes para facilitar el clic en móvil */
    }
}

/*==========================================
        HERO PREMIUM - PALTAS REAL
==========================================*/

:root{

    --green:#2E7D32;
    --green-light:#4CAF50;
    --gold:#D4AF37;

    --dark:#222;
    --text:#555;
    --white:#fff;

    --radius:40px;

}

/*========================*/

.hero{

    position:relative;
    overflow:hidden;

    width:100%;

    min-height:720px;

    padding-top:5px;
    padding-bottom:50px;

    display:flex;
    align-items:center;

    background:linear-gradient(135deg,#ffffff 0%,#f7fff6 45%,#eefaf0 100%);

}

/*========================*/

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

}

.blur{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

}

.blur-green{

    width:400px;

    height:400px;

    background:#58b55d;

    opacity:.18;

    left:-150px;

    top:-100px;

}

.blur-gold{

    width:300px;

    height:350px;

    background:#D4AF37;

    opacity:.15;

    right:-80px;

    bottom:-80px;

}

/*========================*/

.grid-lines{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(46,125,50,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(46,125,50,.04) 1px,transparent 1px);

    background-size:60px 60px;
}

/*========================*/

.hero-wrapper{

    width:min(1320px,90%);

    margin:auto;

    display:grid;

    grid-template-columns:48% 52%;

    align-items:center;

    gap:35px;

    position:relative;

    z-index:2;

}
/*========================*/

.hero-content{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/*========================*/

.hero-badge{

    width:max-content;

    padding:10px 25px;

    border-radius:50px;

    background:#eaf8eb;

    color:var(--green);

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    font-size:.85rem;

}

/*========================*/

.hero-title{

    font-size:clamp(2.8rem,4vw,4.5rem);

    line-height:1.05;

    font-weight:800;

    margin-bottom:10px;

    color:var(--dark);

}

/*========================*/

.hero-description{

    max-width:480px;

    font-size:1.05rem;

    line-height:1.7;

    color:#555;

    margin-top:5px;

}

/*========================*/

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:10px;

}

/*========================*/

.btn-primary,

.btn-secondary{

    padding:18px 35px;

    border-radius:60px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.btn-primary{

    background:var(--green);

    color:white;

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary{

    border:2px solid var(--green);

    color:var(--green);

}

.btn-secondary:hover{

    background:var(--green);

    color:white;

}

/*==================================
            SLIDER
==================================*/

.hero-slider{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.slide{

    position:absolute;
    inset:0;

    opacity:0;

    visibility:hidden;

    transform:scale(1.08);

    transition:
        opacity .8s ease,
        transform 1.2s ease,
        visibility .8s;

}

.slide.active{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}
/*==================================
Será una máscara moderna

==================================*/

.slider-mask{

    width:560px;

    height:500px;

    overflow:hidden;

    border-radius:55px;

    clip-path:polygon(
        20% 0,
        100% 0,
        100% 82%,
        82% 100%,
        0 100%,
        0 20%
    );

    box-shadow:

    0 25px 60px rgba(0,0,0,.12);

    background:white;

}

/*========================*/

.slides{

    width:100%;

    height:100%;

    position:relative;

}

/*========================*/

.slide{

    position:absolute;

    inset:0;

    opacity:0;

}

.slide.active{

    opacity:1;

}

/*========================*/

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*========================*/

.slider-arrow{

    position:absolute;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:white;

    cursor:pointer;

    font-size:18px;

    box-shadow:0 15px 30px rgba(0,0,0,.15);

}

.prev{

    left:-25px;

}

.next{

    right:-25px;

}

/*========================*/

.slider-dots{

    position:absolute;

    bottom:-45px;

    width:100%;

    display:flex;

    justify-content:center;

    gap:12px;

}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#d5d5d5;

}

.dot.active{

    width:35px;

    border-radius:30px;

    background:var(--green);

}

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

@media(max-width:780px){

.hero-wrapper{

grid-template-columns:1fr;

gap:60px;

padding:80px 0;

}

.hero-content{

text-align:center;

align-items:center;

}

.hero-description{

max-width:780px;

}

.slider-mask{

width:500px;

height:500px;

}

}

@media(max-width:768px){

.hero{

min-height:auto;

}

.hero-title{

font-size:2.5rem;

}

.hero-buttons{

flex-direction:column;

width:50%;

}

.btn-primary,

.btn-secondary{

text-align:center;

}

.slider-mask{

width:100%;

height:380px;

border-radius:35px;

clip-path:none;

}

.prev,

.next{

display:none;

}

}

/* Estilo del Botón (o link) */
.btn-shop {
    display: inline-block;
    padding: 15px 40px;
    font-size: 1.5rem;
    color: #00ff00; /* Verde neón */
    border: 2px solid #00ff00;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: bold;
}

.btn-shop:hover {
    background: #00ff00;
    color: #000;
    box-shadow: 0 0 20px #00ff00;
}
.text-slide { display: none; text-align: center; color: white; }
.text-slide.active { display: block; animation: fadeIn 1s; }

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

/* --- RESPONSIVIDAD --- */
@media (max-width: 768px) {
    .promo-banner-slider { padding-top: 80px; } /* Ajuste a nav móvil */
    .computer-screen { height: 50vh; width: 100%; border-radius: 0; } /* Sin bordes en móvil para pantalla completa */
    .text-slide h2 { font-size: 1.5rem; }
}
/* --- SECCIÓN CARRUSEL INFINITO --- */
./*=====================================
        CARRUSEL INFINITO
======================================*/

.carousel{
    position:relative;
    width:100%;
    padding:40px 0;
    overflow:hidden;
    background:transparent;
}

/* Contenedor de tarjetas */

.carousel-track{
    display:flex;
    align-items:flex-start;
    gap:35px;
    width:max-content;
    animation:scrollInfinito 25s linear infinite;
}

/* Tarjetas */

.carousel-item.card{

    width:190px;

    /* Elimina cualquier altura heredada */
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    padding:10px !important;

    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;

    flex-shrink:0;

    overflow:visible;

    transition:transform .35s ease;
}

.carousel-item.card:hover{
    transform:translateY(-10px);
}

/* Imagen */

.carousel-item.card img{

    width:170px;
    height:120px;

    object-fit:contain;

    margin-bottom:10px;

    filter:drop-shadow(0 8px 8px rgba(0,0,0,.15));

    transition:.35s;
}

.carousel-item.card:hover img{

    transform:scale(1.08);

    filter:
        drop-shadow(0 12px 12px rgba(0,0,0,.25));
}

/* Texto */

.carousel-item.card h4{

    margin:0;

    font-size:1.3rem;
    font-weight:600;

    color:#eef6f7;

    text-align:center;

    line-height:1.2;
}

/* Animación */

@keyframes scrollInfinito{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}
/*==================================================
            GRID DE PRODUCTOS
==================================================*/

*,
*::before,
*::after{
    box-sizing:border-box;
}

.product-grid{

    width:100%;
    max-width:1280px;

    margin:0 auto;

    padding:20px;

    display:grid;

    grid-template-columns:repeat(2,minmax(150px,1fr));

    gap:20px;

    align-items:stretch;

    box-sizing:border-box;

}

.product-card {
    position: relative;
    overflow: hidden; /* Mantiene la etiqueta dentro del borde */
}

.oferta-tag {
    position: absolute;
    top: 15px;        /* Un poco más arriba */
    left: -25px;      /* Más ajustado al borde */
    width: 100px;     /* Reducimos el ancho para que sea compacta */
    background-color: #ff003d; /* Dorado intenso */
    color: #ffffff;   /* Texto blanco para mayor contraste */
    text-align: center;
    font-weight: 700;
    font-size: 11px;  /* Tamaño de letra menor para ser compacta */
    padding: 3px 0;
    transform: rotate(-45deg);
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Opcional: añadimos un borde fino verde para resaltar el dorado */
    border: 1px solid #064e3b; 
}

/*==============================
        TABLET
==============================*/

@media (min-width:768px){

.product-grid{

    grid-template-columns:repeat(3,minmax(220px,1fr));

    gap:22px;

    padding:25px;

}

}

/*==============================
      ESCRITORIO
==============================*/

@media (min-width:1024px){

.product-grid{

    grid-template-columns:repeat(5,minmax(200px,1fr));

    gap:25px;

    padding:120px;

}

}

/*==================================================
            TARJETA
==================================================*/

.product-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

    text-align:center;

    width:100%;

    min-width:0;

    background:#fff;

    border:1px solid #e0e0e0;

    border-radius:12px;

    padding:18px;

    overflow:visible;

    box-shadow:0 4px 6px rgba(0,0,0,.05);

    transition:box-shadow .3s;

}

.product-card:hover{

    box-shadow:0 6px 12px rgba(0,0,0,.10);

}

/*==================================================
        IMAGEN
==================================================*/

.product-card img{

    width:200%;

    max-width:200px;

    height:100px;

    object-fit:contain;

    margin-bottom:12px;

}

/*==================================================
        TITULO
==================================================*/

.product-card h3{

    width:100%;

    min-height:42px;

    margin:8px 0;

    font-size:.95rem;

    font-weight:700;

    line-height:1.4;

    color:#333;

    overflow:hidden;

}

/*==================================================
        PRECIO
==================================================*/

.price{

    margin:10px 0;

    font-size:1.15rem;

    font-weight:800;

    color:#28a745;

}

/*==================================================
        BOTON COMPARTIR
==================================================*/

.share-container{

    position:absolute;

    top:10px;

    right:10px;

    z-index:20;

}

.share-btn{

    width:25px;

    height:25px;

    padding:0;

    border:none;

    background:transparent;

    cursor:pointer;

    transition:.2s;

}

.share-btn:hover{

    transform:scale(1.1);

}

.share-btn img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.share-options{

    position:absolute;

    top:30px;

    right:0;

    width:140px;

    background:#fff;

    border:1px solid #eee;

    border-radius:8px;

    overflow:hidden;

    display:none;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

    z-index:100;

}

.share-options a{

    display:flex;

    align-items:center;

    padding:10px 12px;

    text-decoration:none;

    color:#333;

    font-size:.85rem;

    border-bottom:1px solid #f0f0f0;

}

.share-options a:hover{

    background:#f8f8f8;

}

/*==================================================
        CANTIDAD
==================================================*/

.qty-selector{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    margin-bottom:12px;

}

.qty-selector button{

    padding:5px 10px;

    border:none;

    border-radius:4px;

    background:#f0f0f0;

    cursor:pointer;

}

.qty-selector input{

    width:38px;

    height:32px;

    text-align:center;

    border:1px solid #ddd;

    border-radius:4px;

    font-weight:700;

}

/*==================================================
        BOTON AGREGAR
==================================================*/

.add-to-cart-btn{

    width:100%;

    margin-top:12px;

    padding:12px;

    border:none;

    border-radius:6px;

    background:#28a745;

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.add-to-cart-btn:hover{

    background:#23913b;

}

/*==================================================
        MOVILES
==================================================*/

/*==================================================
      CORRECCIÓN: TARJETAS COMPACTAS Y CUADRADAS
==================================================*/
@media (max-width: 767px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 12px;
        margin-top: 85px; /* Crea el espacio que falta */
    }

    .product-card {
        padding: 8px; /* Menos padding para que quepa más contenido */
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Empuja el botón siempre al fondo */
        min-height: 220px; /* Altura mínima fija para que todas sean iguales */
    }

    .product-card img {
        max-width: 70px;
        height: 70px;
        margin-bottom: 5px;
    }

    .product-card h3 {
        font-size: 0.75rem;
        margin: 4px 0;
        min-height: 28px;
    }
}

    .price {
        font-size: 0.9rem;
        margin: 5px 0;
    }

    /* Compactar selectores y botones */
    .selectors-container {
        display: flex;
        gap: 5px;
        width: 100%;
        margin-bottom: 8px;
    }

    .selectors-container select {
        padding: 4px;
        font-size: 0.75rem;
    }

    .qty-selector {
        gap: 5px;
        margin-bottom: 8px;
    }

    .qty-selector button, .qty-selector input {
        height: 30px;
    }

    .add-to-cart-btn {
        padding: 8px;
        font-size: 0.85rem;
        width: 100%;
    }
}


/* --- Cart Sidebar Corregido --- */


.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px; 
    width: 400px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999; /* Aumentado para asegurar que esté sobre todo */
    
    /* CORRECCIÓN CRÍTICA */
    box-sizing: border-box; 
    display: flex;
    flex-direction: column;
    padding: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Evitar que el scroll aparezca en la página completa */
body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
}

.cart-sidebar.active {
    right: 0;
}

/* Cabecera elegante */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.cart-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
    font-weight: 600;
}

.close-sidebar {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #888;
    transition: color 0.3s;
}

.close-sidebar:hover {
    color: #e74c3c;
}

/* Lista de productos */
#cart-items-list {
    list-style: none;
    padding: 0;
    flex-grow: 1; /* Ocupa el espacio disponible */
    overflow-y: auto;
}

/* Botón de Pagar */
.checkout-btn {
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    width: 100%;
}

.checkout-btn:hover {
    background-color: #219150;
}

#cart-total {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 20px 0;
    text-align: right;
    color: #2c3e50;
}


.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: #ffffff;
    
    /* La clave está en una sombra múltiple: una para el desplazamiento y otra para el borde */
    /* 0 0 15px rgba(46, 204, 113, 0.5) crea el brillo verde suave */
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1), 0 0 0 -5px rgba(46, 204, 113, 0.5);
    
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    z-index: 9999;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 25px;
    font-family: 'Segoe UI', sans-serif;
}

/* Cuando está activo (abierto) */
.cart-sidebar.active {
    right: 0;
    /* Al abrirse, el borde se vuelve visible con un brillo sutil */
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1), inset 5px 0 0 0 #27ae60; 
}

/* Fondo oscuro para que el borde destaque más */
body {
    overflow-x: hidden;
}
/* --- LISTAS DE PRODUCTOS--- */
.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    gap: 10px;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 5px;
}

.remove-btn {
    background: none;
    border: none;
    color: red;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Estilos para los items dentro del carrito */
.cart-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.cart-details {
    flex: 1;
    margin: 0 10px;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

.qty-control button {
    padding: 2px 8px;
    cursor: pointer;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 4px;
}

.remove-btn {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1.2rem;
}
/* --- Controles --- */


/*=========================================
    SELECTORES (1Kg - X Mayor)
=========================================*/



.selectors-container{

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    max-width:100%;

    gap:10px;

    margin:12px auto;

    padding:0;

    box-sizing:border-box;

}

.selectors-container select{

    flex:1;

    min-width:0;

    max-width:100%;

    height:40px;

    padding:0 12px;

    border:2px solid #d9d9d9;
    border-radius:12px;

    font-size:14px;
    font-weight:600;

    cursor:pointer;
    outline:none;

    background-clip:padding-box;

    transition:.3s;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    box-shadow:0 3px 8px rgba(0,0,0,.08);
}

/* Peso */

.selectors-container select:first-child{

    background:#ecfff1;
    border-color:#23b54d;
    color:#157733;

}

/* Oferta */

.selectors-container select:last-child{

    background:#fff8e7;
    border-color:#ffb300;
    color:#9a6700;

}

.selectors-container select:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 15px rgba(0,0,0,.15);

}

.selectors-container select:focus{

    border-color:#00c853;

}

/*==============================
        TABLET
==============================*/

@media (max-width:768px){

    .selectors-container{

        gap:8px;

    }

    .selectors-container select{

        height:38px;

        font-size:13px;

        padding:0 10px;

    }

}

/*==============================
        MOVIL
==============================*/

@media (max-width:390px){

    .selectors-container{

        gap:8px;

    }

    .selectors-container select{

        height:36px;

        font-size:12px;

        padding:0 8px;

    }

}

/* Selector Peso */

.selectors-container select:first-child{
    background:#ecfff1;
    border-color:#23b54d;
    color:#157733;
}

/* Selector Oferta */

.selectors-container select:last-child{
    background:#fff8e7;
    border-color:#ffb300;
    color:#9a6700;
}

.selectors-container select:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 15px rgba(0,0,0,.15);
}

.selectors-container select:focus{
    border-color:#00c853;
}



/*=========================================
      BOTONES +   CANTIDAD   -
=========================================*/

.item-controls{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:12px;

}

/* Botones */

.qty-btn{

    width:38px;
    height:38px;

    border:none;
    border-radius:10px;

    color:#fff;
    font-size:22px;
    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 5px 12px rgba(0,0,0,.18);

}

/* Botón - */

.qty-btn:first-child{

    background:linear-gradient(135deg,#ff6b6b,#d63031);

}

/* Botón + */

.qty-btn:last-child{

    background:linear-gradient(135deg,#4cd964,#16a34a);

}

.qty-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 18px rgba(0,0,0,.25);

}

.qty-btn:active{

    transform:scale(.95);

}

/* Caja cantidad */

.item-controls input{

    width:55px;
    height:38px;

    border:2px solid #d9d9d9;
    border-radius:10px;

    background:#fff;

    text-align:center;

    font-size:18px;
    font-weight:700;

    color:#222;

    outline:none;

    box-shadow:0 3px 8px rgba(0,0,0,.08);

}

.item-controls input:focus{

    border-color:#20c05c;

}



/*=========================================
      BOTON ELIMINAR
=========================================*/

.trash-btn{

    background:#ff4d4d;
    color:#fff;

    width:40px;
    height:40px;

    border:none;
    border-radius:10px;

    font-size:18px;
    cursor:pointer;

    transition:.3s;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 5px 12px rgba(255,0,0,.25);

}

.trash-btn:hover{

    background:#d63031;

    transform:translateY(-2px);

    box-shadow:0 10px 18px rgba(255,0,0,.35);

}



/*=========================================
        CONTENEDOR BOTONES
=========================================*/

.btn-group-toggle{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

}
/* Ocultamos el radio button real */
.btn-group-toggle input { display: none; }

/* Estilo base del botón */
.btn-select {
    flex: 1;
    padding: 6px 4px;
    border: 1px solid #0d7f01;
    border-radius: 6px;
    background: #fff;
    color: #28a745;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

/* ESTADO SELECCIONADO (Cambio de color) */
.btn-group-toggle input:checked + .btn-select {
    background: #28a745;
    color: white;
}

/* Hover suave */
.btn-select:hover { background: #e8f5e9; }
/* --- Total y Pagar --- */
/* Sidebar base (escritorio) */
/* Botón Pagar Ahora - Estilo Profesional */
.checkout-btn {
    background: #2e7d32; /* El verde oscuro de tu marca */
    color: white;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    margin-top: 20px; /* Separación del total */
    transition: background 0.3s ease;
}

/* Efecto al pasar el mouse */
.checkout-btn:hover {
    background: #1b5e20; /* Un verde aún más oscuro para indicar interacción */
}

/* Ajuste adicional para que el total se vea mejor */
#cart-total {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-align: right;
    margin-top: auto; /* Empuja el total hacia abajo, cerca del botón */
    padding: 10px 0;
}

/* --- RESPONSIVIDAD MÓVIL --- */
@media (max-width: 480px) {
    .cart-sidebar { 
        width: 80%;    /* Ocupa toda la pantalla en móvil */
        right: -100%;   /* Se esconde completamente a la derecha */
    }
    
    .cart-header h2 {
        font-size: 1.2rem;
    }

    .checkout-btn {
        padding: 20px;  /* Botón más grande para facilitar el toque en móvil */
        font-size: 18px;
    }
}

/* --- Sección principal --- */
.dynamic-slogan-section {
    background: linear-gradient(135deg, #f4fbf6 0%, #e8f5e9 100%);
    padding: 60px 20px;
    text-align: center;
    font-family: 'Arial', sans-serif;
    border-bottom: 1px solid #e0e0e0;
}

.slogan-container {
    max-width: 800px;
    margin: 0 auto;
}

.slogan-title {
    font-size: 2.8rem;
    color: #333333;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.highlight-text {
    color: #28a745;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
    white-space: normal;
    word-break: keep-all;
    transition: color 0.3s ease;
}

.cursor {
    font-weight: bold;
    color: #155724;
    animation: blink 0.7s infinite;
}

.slogan-subtitle {
    font-size: 1.2rem;
    color: #666666;
    margin-bottom: 30px;
    font-weight: normal;
}

.btn-cta {
    display: inline-block;
    background-color: #ff003d;
    color: white;
    text-decoration: none;
    padding: 14px 35px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(21, 87, 36, 0.2);
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background-color: #ff003d;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.mobile-break {
    display: none;
}

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

    .dynamic-slogan-section {
        padding: 40px 15px;
    }

    .slogan-title {
        font-size: 1.8rem;
    }

    .mobile-break {
        display: block;
    }

    .slogan-subtitle {
        font-size: 0.95rem;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .btn-cta {
        padding: 12px 25px;
        font-size: 1rem;
        width: 100%;
        max-width: 280px;
    }
}

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

.main-footer{
    position:relative;

    background:
    linear-gradient(
        135deg,
        rgba(10,35,15,0.88) 0%,
        rgba(5,20,8,0.92) 100%
    ),
    url('../img/banner-promo.jpg')
    no-repeat center center/cover;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border-top:1px solid rgba(255,255,255,0.15);

    box-shadow:
    0 -10px 30px rgba(0,0,0,0.3);

    color:#ffffff;

    padding:70px 0 0;

    margin-top:1px;

    overflow:hidden;
}

/* CONTENEDOR */

.footer-container{
    max-width:1200px;

    margin:0 auto;

    padding:0 25px;

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr 1fr;

    gap:40px;
}

.footer-column{
    display:flex;
    flex-direction:column;
}

/* =========================================================
   LOGO LED
========================================================= */

.logo-led-container{

    width:130px;
    height:130px;

    border-radius:50%;

    background:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;

    margin-bottom:25px;

    border:3px solid #4caf50;

    animation:
    ledPulse 4s infinite ease-in-out;
}

/* LUZ EXTERNA */

.logo-led-container::before{

    content:'';

    position:absolute;

    top:-4px;
    left:-4px;
    right:-4px;
    bottom:-4px;

    border-radius:50%;

    box-shadow:
    0 0 20px rgba(76,175,80,0.8),
    0 0 40px rgba(40,167,69,0.5);

    z-index:1;
}

/* LOGO */

.footer-logo{

    width:80%;
    height:80%;

    object-fit:contain;

    position:relative;

    z-index:2;
}

/* ANIMACIÓN */



/* =========================================================
   TEXTOS
========================================================= */

.footer-slogan{

    color:#d1d5db;

    line-height:1.6;

    font-size:0.95rem;

    margin-bottom:20px;
}

.footer-title{

    font-size:1.1rem;

    color:#4caf50;

    font-weight:700;

    margin-bottom:20px;

    text-transform:uppercase;

    letter-spacing:1px;
}

/* LINKS */

.footer-links{

    list-style:none;

    padding:0;
    margin:0;
}

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

.footer-links a{

    text-decoration:none;

    color:#d1d5db;

    transition:0.3s;
}

.footer-links a:hover{

    color:#4caf50;

    padding-left:6px;
}



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

.footer-bottom{

    margin-top:50px;

    background:
    rgba(0,0,0,0.35);

    border-top:
    1px solid rgba(255,255,255,0.08);

    padding:20px 0;
}

.footer-bottom-container{

    max-width:1200px;

    margin:0 auto;

    padding:0 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;
}

.footer-bottom p{

    margin:0;

    color:#b0b7c3;

    font-size:0.9rem;
}

/* TRAZAWEB */

.developer-credit a{

    color:#ffffff;

    text-decoration:none;

    transition:0.3s;
}

.developer-credit a:hover{

    color:#4caf50;
}
/* --- RESPONSIVIDAD PARA TABLETS Y MÓVILES --- */

@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr 1fr; /* En tablets, 2 columnas */
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr; /* En móviles, todo apilado (1 columna) */
        text-align: center;         /* Centramos todo para mejor estética móvil */
    }

    .footer-column {
        align-items: center;        /* Centramos los elementos de cada columna */
    }

    .footer-socials {
        justify-content: center;    /* Centramos los botones de redes sociales */
    }

    .footer-bottom-container {
        flex-direction: column;     /* Ponemos el texto de copyright y créditos uno sobre otro */
        text-align: center;
    }
    
    /* Ajustamos el tamaño del logo en móviles para que no sea muy grande */
    .logo-led-container {
        width: 100px;
        height: 100px;
    }
}
/* =========================================================
   WHATSAPP FLOTANTE
========================================================= */

/* =========================================================
   WHATSAPP PREMIUM FLOTANTE
========================================================= */

.btn-whatsapp-flotante{

    position:fixed;

    right:22px;
    bottom:22px;

    width:70px;
    height:70px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #25d366 0%,
        #1ebe5d 100%
    );

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    z-index:99999;

    box-shadow:
    0 10px 25px rgba(37,211,102,0.35),
    0 4px 12px rgba(0,0,0,0.25);

    transition:
    transform .3s ease,
    box-shadow .3s ease;

    animation:
    floatWhatsapp 3s ease-in-out infinite,
    pulseWhatsapp 2.5s infinite;
}

/* ICONO */

.btn-whatsapp-flotante i{

    font-size:38px;

    color:#ffffff;

    transition:transform .3s ease;
}

/* HOVER */

.btn-whatsapp-flotante:hover{

    transform:
    translateY(-8px)
    scale(1.08);

    box-shadow:
    0 15px 35px rgba(37,211,102,0.45),
    0 8px 20px rgba(0,0,0,0.3);
}

.btn-whatsapp-flotante:hover i{

    transform:scale(1.1);
}

/* =========================================================
   ANIMACIÓN FLOTANTE
========================================================= */

@keyframes floatWhatsapp{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }
}

/* =========================================================
   EFECTO PULSO
========================================================= */

@keyframes pulseWhatsapp{

    0%{
        box-shadow:
        0 0 0 0 rgba(37,211,102,0.5);
    }

    70%{
        box-shadow:
        0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        box-shadow:
        0 0 0 0 rgba(37,211,102,0);
    }
}

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

@media(max-width:768px){

    .btn-whatsapp-flotante{

        width:60px;
        height:60px;

        right:16px;
        bottom:16px;
    }

    .btn-whatsapp-flotante i{

        font-size:34px;
    }
}

/* Contenedor principal del modal */
.promo-modal {
    display: none; /* Mantén esto, el script lo cambiará a 'flex' */
    position: fixed; 
    z-index: 99999;
    left: 0; top: 0; 
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(5px);
    
    /* Centrado infalible */
    justify-content: center;
    align-items: center;
    overflow-y: auto; /* Permite scroll si el banner fuera muy alto */
}

/* El contenido (el banner) */
.promo-content-banner {
    position: relative;
    width: 90%; 
    max-width: 500px; /* Ancho máximo en escritorio */
    background: transparent;
}

.banner-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.cerrar-promo {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 30px;
    color: white;
    background: #000;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 99999;
}

/* Responsividad para móviles */
@media (max-width: 480px) {
    .promo-content-banner {
        width: 95%; /* Ocupa casi toda la pantalla en móviles */
    }
}
/* Importar una fuente elegante de Google Fonts */
/* Contenedor centrado y ordenado */
.content-wrapper-static {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente si hubiera altura */
    gap: 15px; /* Espacio entre los párrafos */
    margin-top: 120px;
    text-align: center;
}

.animate-text {
    font-size: 1.4rem;
    color: #555; 
    transition: all 0.5s ease;
    animation: colorZoom 12s infinite;
    margin: 0; /* Quitamos margen para que el flex controle el espacio */
    max-width: 80%; /* Para que no se estire demasiado en pantallas grandes */
}

/* Recuperamos el estilo de tus strong */
.animate-text strong {
    background: linear-gradient(90deg, #1b4332, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* Animación ajustada */
@keyframes colorZoom {
    0%, 30% { 
        color: #555; 
        transform: scale(1); 
    }
    40%, 60% { 
        color: #0e6a20; 
        transform: scale(1.05);
        font-weight: 600;
    }
    70%, 100% { 
        color: #555; 
        transform: scale(1); 
    }
}

/* Nuevo contenedor padre para gestionar el espaciado superior */
.historia-container {
    padding: 80px 0 40px 0; /* Menos padding superior, más flujo hacia abajo */
    background-color: #ffffff;
}

.historia-content {
    display: flex;
    align-items: center;
    gap: 40px; 
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px; /* Para que no pegue a los lados en pantallas pequeñas */
}

.historia-foto {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.historia-foto img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    outline: 3px solid #8BC34A;
    outline-offset: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    transition: transform 0.4s ease;
}

.historia-texto {
    flex: 1;
}

.historia-texto h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: #2E7D32;
    margin-bottom: 25px;
    line-height: 1.2;
}

.historia-texto p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}

/* Ajuste Responsivo */
@media (max-width: 768px) {
    .historia-container {
        padding-top: 60px; /* Padding reducido para móviles */
    }

    .historia-content { 
        flex-direction: column; 
        text-align: center; 
        gap: 40px; 
    }
    
    .historia-foto { 
        width: 100%; 
        padding-top: 20px; /* Espacio necesario por el outline-offset */
    }
    
    .historia-foto img {
        width: 85%; 
        outline-offset: 10px; 
    }

    .historia-texto h2 { font-size: 2.2rem; }
}
/* Contenedor principal con espaciado fluido */
.valores-container-wrapper {
    padding-top: 40px; /* Reducido para conectar con la sección de Historia */
    padding-bottom: 80px;
    background-color: #fcfcfc; /* Un tono casi blanco, muy limpio */
}

.valores-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; /* Espacio equilibrado entre calugas */
    padding: 0 20px; 
    max-width: 1000px;
    margin: 0 auto;
}

.valor-card {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    /* Borde sutil y sombra difusa para efecto premium */
    border: 1px solid rgba(0,0,0,0.06); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.03); 
    transition: all 0.3s ease;
}

.valor-card:hover {
    border-color: #8BC34A;
    box-shadow: 0 15px 30px rgba(139, 195, 74, 0.15);
    transform: translateY(-5px);
}

.valor-card h3 {
    color: #2E7D32;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem; /* Tamaño más vistoso */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.valor-card p {
    color: #444; /* Gris oscuro para mejor lectura que el negro puro */
    line-height: 1.6;
    font-size: 1rem; 
}

/* Ajuste específico para mantener la fila en móviles */
@media (max-width: 600px) {
    .valores-container {
        gap: 12px;
        padding: 0 10px;
    }
    
    .valor-card {
        padding: 20px 10px;
    }

    .valor-card h3 {
        font-size: 1.1rem; /* Ajustado para que no se corte en horizontal */
    }

    .valor-card p {
        font-size: 0.85rem; /* Legible sin ser demasiado pequeño */
    }
}
.elegirnos-container {
    /* AJUSTA ESTE VALOR: 40px es un estándar, 
       si quieres que estén más cerca, usa 20px o 0px */
    padding-top: 1px; 
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
    background: #fdfdfd;
    text-align: center;
}

.elegirnos-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: #2E7D32;
    margin-bottom: 90px; 
    background: linear-gradient(to right, #2E7D32, #558008);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-card {
    padding: 30px 15px;
    background: white;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: #8BC34A;
    box-shadow: 0 15px 30px rgba(46, 125, 50, 0.08);
}

.counter {
    font-size: 2.5rem;
    font-weight: 800;
    color: #2E7D32;
    margin: 0 0 5px 0;
    font-family: 'Playfair Display', serif;
}

/* Responsivo optimizado */
@media (max-width: 768px) {
    .elegirnos-container { 
        padding-top: 30px; /* Padding superior reducido para móvil */
        padding-bottom: 40px;
        padding-left: 15px;
        padding-right: 15px; 
    }
    .elegirnos-container h2 { font-size: 2rem; margin-bottom: 30px; }
    
    .stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }
}
.testimonios-container {
    padding-top: 40px;    /* Espacio superior ajustado para conectar con la sección anterior */
    padding-bottom: 80px; /* Espacio inferior para respiración al final */
    background: #ffffff;
    overflow: hidden;
    text-align: center;
}

.testimonios-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem; /* Un poco más compacto para elegancia */
    color: #2E7D32;
    margin-bottom: 40px; /* Acercamos el título a las tarjetas */
}

.carrusel-track {
    display: flex;
    gap: 30px;
    animation: scroll 30s linear infinite;
    width: max-content;
    padding-bottom: 20px; /* Evita que la sombra se corte al final */
}

.testimonio-card {
    width: 300px;
    padding: 30px;
    background: #fdfdfd;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.testimonio-card:hover {
    transform: translateY(-5px); /* Efecto sutil al pasar el mouse */
}

.testimonio-card p {
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}

.testimonio-card h4 {
    color: #2E7D32;
    font-weight: 700;
    margin-top: 10px;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #8BC34A;
    margin-bottom: 15px;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1320px); } 
}


/* COMIENZA CONTACTO */
.contacto-wrapper {
    display: flex;
    justify-content: center;
    padding: 50px 30px;
    margin-top: 80px;
    background: url('../img/galeria/galeria1.jpg') no-repeat center center fixed;
    background-size: cover;
}

.formulario-box {
    width: 100%;
    max-width: 700px; /* Tamaño centrado y limpio */
    padding: 40px;
    background: rgba(0, 0, 0, 0.7); /* Fondo oscuro para contraste */
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sistema de filas para poner cosas al lado */
.form-row {
    display: flex;
    gap: 20px;
}

.form-group {
    flex: 1;
}

/* --- Ajustes de campos y labels --- */
/* --- Estilos base del formulario --- */
.formulario-box label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.7rem;
    color: #91d677; 
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.formulario-box input, 
.formulario-box select, 
.formulario-box textarea {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.01);
    color: #aecc2d;
    font-size: 1rem; /* <--- AGREGA ESTA LÍNEA AQUÍ */
}
/* --- Botones estilo pastilla (Puntos de Venta) --- */
.opciones-venta {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.btn-opcion {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 1px solid #91d677;
    color: #91d677;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.btn-opcion.active {
    background: #91d677;
    color: #000;
}

/* --- Panel de contenido (Reemplaza a tu antiguo #domicilio-fields) --- */
.entrega-panel {
    margin-top: 15px;
    padding: 20px;
    border: 1px dashed #91d677;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.2);
    color: #aecc2d;
    margin-bottom: 20px;
}

/* --- Fila para calle y número juntos --- */
.input-row {
    display: flex;
    gap: 15px;
}

.input-row input {
    flex: 1;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(145, 214, 119, 0.5);
    color: #aecc2d;
    border-radius: 10px;
}

/* --- Botón de Enviar --- */
.formulario-box button[type="submit"] {
    width: fit-content;
    min-width: 200px;
    margin: 10px auto 0 auto;
    padding: 12px 30px;
    background: #140f07;
    color: white;
    border: 2px solid #91d677;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.formulario-box button[type="submit"]:hover {
    background: #91d677;
    color: #140f07;
}

/* --- Responsividad --- */
@media (max-width: 600px) {
    .form-row, .input-row {
        flex-direction: column;
        gap: 15px;
    }
}
/*=========================================
        GALERÍA PREMIUM
=========================================*/

/*=========================================*/
/* ESTILOS GENERALES */
/*=========================================*/
body {
    font-family: sans-serif; /* Asegúrate de usar tu fuente original aquí */
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

.gallery-section {
    padding-bottom: 40px; /* Espacio moderado abajo de la galería */
}
/* Contenedor principal de los títulos */
.gallery-title, .section-title {
    text-align: center;
    padding: 85px;       /* Padding interno en lugar de margin externo */
    width: 100%;         /* Asegura que no se desborde */
}

/* Espaciado interno controlado */
.gallery-title h2, .section-title h2 {
    font-size: clamp(1.8rem, 5vw, 3rem);
    margin-bottom: 15px; /* Solo margen abajo */
    line-height: 1.2;
}

.gallery-title p, .section-title p {
    max-width: 600px;    /* El texto no debe ser infinitamente ancho */
    margin: 0 auto;      /* Centrado perfecto */
    line-height: 1.6;    /* Interlineado cómodo */
    color: #555;
}
/*=========================================*/
/* GRID DE LA GALERÍA */
/*=========================================*/
.gallery-grid {
    display: grid;
    /* Limitamos el ancho para que no se pegue a los lados en pantallas muy grandes */
    max-width: 1200px; 
    /* Centramos la cuadrícula en la pantalla */
    margin: 0 auto;
    /* Añadimos padding para que no toque los bordes laterales en ningún dispositivo */
    padding: 0 20px;
    
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 18px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

/* tamaños */
.large {
    grid-column: span 2;
    grid-row: span 2;
}

.tall {
    grid-row: span 2;
}

.wide {
    grid-column: span 2;
}

/*=========================================*/
/* IMÁGENES */
/*=========================================*/
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

/*=========================================*/
/* SUPERPOSICIÓN (OVERLAY) */
/*=========================================*/
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .75),
            transparent);
    display: flex;
    align-items: flex-end;
    padding: 25px;
}

.overlay h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/*=============================================
            TABLET (Diseño original)
=============================================*/
/*=============================================
            MÓVIL (Versión Mosaico Conservado)
=============================================*/
@media(max-width: 600px) {
    .gallery-section {
        padding-top: 20px; 
    }

    .gallery-title h2 {
        font-size: 1.8rem;
    }

    /* AÑADIDO: Padding lateral para despegarlo de los bordes del celular */
    .gallery-grid {
        padding: 0 15px; /* Esto da 15px de aire a la izquierda y derecha */
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
        gap: 10px;
        grid-auto-flow: dense; 
    }

    .large {
        grid-column: span 2;
        grid-row: span 1;
    }

    .tall {
        grid-row: span 2;
    }

    .wide {
        grid-column: span 2;
        grid-row: span 1;
    }
}
/*==========================================
        CARRUSEL PREMIUM
==========================================*/

/*==========================================
        CARRUSEL PREMIUM
==========================================*/

.premium-carousel {
    width: 100%;
    padding: 60px 0; /* Padding uniforme arriba y abajo */
    overflow: hidden;
    background: linear-gradient(180deg, #1d1d1d, #111);
}

.section-title{

    text-align:center;
    color:#fff;
    margin-bottom:50px;

}

.section-title span{

    color:#2ecc71;
    text-transform:uppercase;
    letter-spacing:3px;
    font-weight:600;

}

.section-title h2{

    font-size:45px;
    margin:15px 0;

}

.section-title p{

    color:#999;

}

/*==================================*/

.carousel-content{

    display:flex;
    gap:25px;
    width:max-content;

    transform:translateZ(0);

    backface-visibility:hidden;

    animation:carousel-scroll 28s linear infinite;

}
/*==================================*/

.card{

    width:320px;
    height:420px;

    flex-shrink:0;

    overflow:hidden;

    position:relative;

    border-radius:25px;

    background:#202020;

    transition:.45s;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

    0 15px 35px rgba(0,0,0,.35);

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 50px rgba(0,0,0,.45);

}

.card-image{

    width:100%;
    height:100%;

}

.card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.8s;

}

.card:hover img{

    transform:scale(1.08);

}

/*==================================*/

.card-info{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:25px;

    background:

    linear-gradient(to top,

    rgba(0,0,0,.92),

    rgba(0,0,0,.55),

    transparent);

}

.card-info h3{

    color:#fff;

    text-align:center;

    font-size:28px;

    font-weight:700;

    letter-spacing:1px;

}

/*==================================*/

/* Ajustes para móviles */
@media(max-width: 768px) {
    .gallery-section {
        padding-bottom: 20px; /* Menos espacio en móvil */
    }

    .premium-carousel {
        padding: 40px 0; /* Reducido para que no quede gigante */
    }
    
    .section-title {
        padding: 0 15px; /* Solo padding lateral para que el texto no toque bordes */
        margin-bottom: 30px;
    }
}

.tag-envio-gratis {
    display: inline-block;
    background: #ff9800; /* Color llamativo pero coherente */
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 15px;
    margin-top: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-envio-gratis i {
    margin-right: 5px;
}