*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;

}
body{

    background:#f8fafc;

    color:#1f2937;

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

header{
    background:#111;
    color:white;
    padding:20px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    box-shadow:0 5px 15px rgba(0,0,0,.3);
}
.logo{
    display:flex;
    align-items:center;
    gap:18px;
}

.logoImg{
    width:65px;
    height:65px;
    object-fit:contain;
}

.logoTexto h1{
    font-size:38px;
    color:#d4af37;
    margin:0;
}

.logoTexto p{
    margin-top:4px;
    color:#ddd;
}
.logo{
    display:flex;
    align-items:center;
    gap:18px;
}

.logoImg{
    width:65px;
    height:65px;
    object-fit:contain;
}

.logo div{

display:flex;

flex-direction:column;

}

.logo h1{

font-size:34px;

color:#d4af37;

font-weight:800;

letter-spacing:2px;

}
.logo p{

margin-top:5px;

font-size:15px;

color:#ddd;

}

.menu{
    display:flex;
    gap:15px;
}

.btnMenu,
.btnAdmin{

width:42px;
height:42px;

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

background:rgba(255,255,255,.08);

border-radius:50%;

padding:0;

font-size:18px;

color:#bbb;

transition:.35s;

text-decoration:none;

}

.btnAdmin:hover{

background:#d4af37;

color:#111;

transform:rotate(90deg);

}

.btnMenu:hover,
.btnAdmin:hover{
    background:#d4af37;
    color:black;
}

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

.contenedor{
    width:90%;
    max-width:1300px;
    margin:auto;
    padding:40px 0;
}

/* ================= BUSCADOR ================= */

.busqueda{
    display:flex;
    gap:15px;
    margin-bottom:30px;
}

#buscar{

flex:1;

padding:18px;

border-radius:40px;

border:none;

background:white;

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

font-size:16px;

outline:none;

}

#buscar:focus{
    border:2px solid #d4af37;
}

#btnBuscar{

background:#000000;

color:#ffffff;

border:none;

padding:18px 28px;

border-radius:40px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

#btnBuscar:hover{
    background:#d4af37;
    color:black;
}

/* ================= CONTADOR ================= */

.informacion{
    margin-bottom:25px;
    font-size:18px;
    font-weight:bold;
    color:#444;
}

/* ================= PRODUCTOS ================= */

.productos{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}


/* ================= TARJETAS ================= */

.card{
position:relative;

overflow:hidden;
background:white;

border-radius:25px;

overflow:hidden;

text-decoration:none;

color:#222;

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

transition:.45s;

border:1px solid #ececec;

}
.card:hover{
border-color:#d4af37;
transform:translateY(-12px);

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

}

.imagen{

width:100%;

height:340px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(#ffffff,#f3f4f6);

overflow:hidden;

}

.imagen img{

width:82%;

height:82%;

object-fit:contain;

transition:.5s;

}

.card:hover .imagen img{

    transform:scale(1.08);

}
.contenido{

padding:25px;

display:flex;

flex-direction:column;

gap:10px;

}

.categoria{
    display:inline-block;
    background:#111;

color:#d4af37;
    padding:6px 12px;
    border-radius:30px;
    font-size:13px;
    font-weight:bold;
    margin-bottom:15px;
}

.contenido h2{
    margin-bottom:15px;
    font-size:24px;
}

.precio{
    color:#d4af37;
    font-size:28px;
    font-weight:bold;
    margin-bottom:15px;
}

.verde{
    color:green;
    font-weight:bold;
}

.rojo{
    color:red;
    font-weight:bold;
}

/* ================= PRODUCTO ================= */

.detalle{
    width:90%;
    max-width:900px;
    margin:50px auto;
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 15px 25px rgba(0,0,0,.15);
    text-align:center;
}

.detalle img{

    width:100%;
    max-width:420px;
    height:420px;
    object-fit:contain;

}
.detalle h1{
    margin-bottom:20px;
    font-size:36px;
}

.detalle h2{
    color:#d4af37;
    font-size:32px;
    margin:20px 0;
}

.detalle p{
    margin:12px 0;
    line-height:1.7;
}

.detalle a{
    display:inline-block;
    margin-top:25px;
    text-decoration:none;
    background:#111;
    color:white;
    padding:14px 28px;
    border-radius:12px;
    transition:.3s;
}

.detalle a:hover{
    background:#d4af37;
    color:black;
}

/* ================= SIN PRODUCTOS ================= */

.sinProductos{
    text-align:center;
    background:white;
    padding:50px;
    border-radius:20px;
    box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.sinProductos h2{
    margin-bottom:20px;
}

.sinProductos p{
    margin-bottom:20px;
}

.sinProductos a{
    display:inline-block;
    background:#111;
    color:white;
    padding:15px 30px;
    border-radius:12px;
    text-decoration:none;
    transition:.3s;
}

.sinProductos a:hover{
    background:#d4af37;
    color:black;
}

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

footer{

background:#0f172a;

padding:50px;

margin-top:70px;

text-align:center;

color:white;

}

footer p{

font-size:18px;

letter-spacing:1px;

}

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

@media(max-width:768px){

header{
    flex-direction:column;
    text-align:center;
    gap:20px;
}

.menu{
    flex-direction:column;
    width:100%;
}

.btnMenu,
.btnAdmin{
    width:100%;
}

.busqueda{
    flex-direction:column;
}

#btnBuscar{
    width:100%;
}

.logo h1{
    font-size:30px;
}

.detalle{
    padding:25px;
}

.detalle img{
    width:100%;
    height:300px;
}

} 
.estado{

    display:inline-block;

    margin-top:15px;

    padding:8px 15px;

    border-radius:30px;

    font-size:14px;

    font-weight:bold;

}

.disponible{

    background:#d1fae5;

    color:#065f46;

}

.agotado{

    background:#fee2e2;

    color:#991b1b;

}

.verProducto{

    margin-top:25px;

    font-weight:bold;

    color:#111;

    transition:.3s;

}

.card:hover .verProducto{

    color:#d4af37;

    padding-left:10px;

}
/*=========================
 BOTÓN ADMIN DISCRETO
=========================*/

.adminLink{

width:42px;
height:42px;

display:flex;

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

background:rgba(255,255,255,.08);

color:#bbb;

border-radius:50%;

text-decoration:none;

font-size:18px;

transition:.35s;

}

.adminLink:hover{

background:#d4af37;

color:#111;

transform:rotate(90deg);

}
.btnWhatsapp{

display:inline-block;

margin-top:30px;

background:#25D366;

color:white;

padding:18px 35px;

border-radius:12px;

text-decoration:none;

font-size:18px;

font-weight:bold;

transition:.3s;

}

.btnWhatsapp:hover{

background:#1ebd59;

transform:translateY(-4px);

box-shadow:0 12px 25px rgba(37,211,102,.35);

}
.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

text-decoration:none;

color:white;

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

transition:.3s;

z-index:999;

}

.whatsapp:hover{

transform:scale(1.1);

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

.hero{

width:90%;

max-width:1350px;

height:520px;

margin:35px auto;

border-radius:30px;

overflow:hidden;

position:relative;

box-shadow:0 20px 45px rgba(0,0,0,.20);

}

.slider{

width:100%;

height:100%;

position:relative;

}

.slide{

position:absolute;

width:100%;

height:100%;

opacity:0;

transition:opacity .8s ease;

}

.slide.active{

opacity:1;

}

.slide img{

width:100%;

height:100%;

object-fit:cover;

}

.dots{

position:absolute;

bottom:25px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:12px;

}

.dot{

width:14px;

height:14px;

border-radius:50%;

background:white;

opacity:.4;

cursor:pointer;

transition:.3s;

}

.dot.active{

opacity:1;

background:#d4af37;

}

.heroTexto{

color:white;

max-width:700px;

padding:20px;

}

.heroTexto h1{

font-size:60px;

font-weight:700;

margin-bottom:20px;

}

.heroTexto p{

font-size:20px;

line-height:1.8;

margin-bottom:35px;

color:#eee;

}

.btnHero{

background:#d4af37;

color:#111;

padding:18px 35px;

border-radius:40px;

text-decoration:none;

font-weight:bold;

transition:.35s;

}

.btnHero:hover{

background:white;

transform:translateY(-4px);

}
@keyframes aparecer{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.card{

animation:aparecer .6s ease;

} .heroContenido{

display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

width:90%;

}

.slider{

width:420px;

height:420px;

position:relative;

overflow:hidden;

border-radius:25px;

}

.slider img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

opacity:0;

transition:1s;

}


.slider img.activo{

opacity:1;

}
.catalogo{

margin-top:15px;

padding:10px;

background:#fff4cc;

color:#8a6500;

font-weight:600;

border-radius:10px;

text-align:center;

}

.catalogoDetalle{

margin:25px 0;

padding:18px;

background:#fff4cc;

border-radius:12px;

text-align:center;

font-size:18px;

font-weight:600;

}
.precios{

    margin-top:15px;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.precios p{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#f8f8f8;

    padding:10px 14px;

    border-radius:10px;

    font-size:15px;

}

.precios span{

    color:#d4af37;

    font-weight:bold;

    font-size:18px;

}

.feromonas{

    background:#111 !important;

    color:white;

    justify-content:center !important;

    font-weight:bold;

}
.preciosProducto{

    margin:30px 0;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.precioItem{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#f8f8f8;

    padding:18px;

    border-radius:12px;

    font-size:18px;

}

.precioItem strong{

    color:#d4af37;

    font-size:24px;

}

.feromonas{

    background:#111;

    color:white;

}

.feromonas strong{

    color:#d4af37;

}
/*=========================
HERO NUEVO
=========================*/

.hero{

padding:25px 8%;

margin-top:20px;
margin-bottom:20px;

}

.heroContenido{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:40px;

}

.subtitulo{

display:inline-block;

background:#d4af37;

color:#111;

padding:8px 18px;

border-radius:30px;

font-weight:bold;

margin-bottom:25px;

}

.heroTexto h1{

font-size:38px;
color:#111;


line-height:1.2;

margin-bottom:15px;

}

.heroTexto p{

font-size:16px;

line-height:1.6;

margin-bottom:20px;

color:#666;

}

.btnHero{

padding:14px 28px;

font-size:15px;

}
.btnHero:hover{

background:#d4af37;

color:#111;

transform:translateY(-4px);

}

.heroImagen img{

max-width:360px;

border-radius:20px;

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

}

.heroImagen img{

width:100%;

max-width:520px;

border-radius:30px;

box-shadow:0 20px 50px rgba(0,0,0,.2);

}
@media(max-width:900px){

.heroContenido{

grid-template-columns:1fr;

text-align:center;

}

.heroTexto h1{

font-size:38px;

}

.heroTexto p{

font-size:18px;

}

.heroImagen{

order:-1;

}

}
.selectorCompra{

margin-top:40px;

background:#fafafa;

padding:25px;

border-radius:18px;

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

}

.selectorCompra h2{

margin-bottom:20px;

}

.opcion{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px;

margin-bottom:12px;

background:white;

border-radius:12px;

cursor:pointer;

border:2px solid transparent;

transition:.3s;

}

.opcion:hover{

border-color:#d4af37;

}

.opcion input{

margin-right:10px;

}

.check{

background:#fff8e8;

}

.total{

margin-top:25px;

padding:20px;

background:#111;

color:white;

border-radius:15px;

text-align:center;

}

.total h2{

margin-top:10px;

font-size:36px;

color:#d4af37;

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

.filtros{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin:35px 0;

}

.filtro{

padding:14px 28px;

border:none;

border-radius:40px;

background:white;

color:#111;

font-weight:600;

cursor:pointer;

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

transition:.3s;

}

.filtro:hover{

background:#d4af37;

color:#111;

transform:translateY(-3px);

}

.filtro.activo{

background:#111;

color:#d4af37;

}
/*====================================
RESPONSIVE CELULAR
====================================*/

@media (max-width:768px){

header{

display:flex !important;
flex-direction:row !important;
justify-content:space-between !important;
align-items:center !important;

padding:12px 15px !important;

}

.logo{

display:flex !important;
align-items:center !important;
gap:10px !important;

width:auto !important;
flex:1 !important;

}

.logo img{

width:55px !important;
height:55px !important;

}

.logo div{

display:block !important;

}

.logo h1{

font-size:28px !important;
margin:0;

}

.logo p{

font-size:14px !important;
margin:0;

}

.menu{

display:flex !important;
align-items:center !important;
justify-content:flex-end !important;

width:auto !important;
margin:0 !important;

}

.btnMenu{

display:none !important;

}

.btnAdmin{

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

width:42px !important;
height:42px !important;

padding:0 !important;

border-radius:50%;

font-size:20px;

}




/* HERO */

.hero{
    width:95%;
    height:auto;
    padding:20px 15px;
}

.heroContenido{
    display:flex;
    flex-direction:column;
    text-align:center;
    gap:20px;
}

.heroTexto h1{
    font-size:30px;
}

.heroTexto p{
    font-size:15px;
}

.heroImagen img{
    width:100%;
    max-width:280px;
}

/*=========================
BUSCADOR CELULAR
=========================*/

@media (max-width:768px){

.busqueda{

display:grid !important;

grid-template-columns:1fr 80px !important;

gap:10px;

width:100%;

max-width:550px;

margin:20px auto;

}

#buscar{

width:100% !important;

height:48px;

padding:0 15px;

font-size:15px;

margin:0;

}

#btnBuscar{

width:80px !important;

height:48px;

padding:0;

margin:0;

font-size:15px;

}

}
/* FILTROS */

.filtros{
    gap:10px;
}

.filtro{
    padding:10px 18px;
    font-size:14px;
}

/* PRODUCTOS */

.productos{
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.card{
    border-radius:18px;
}

.imagen{
    height:190px;
}

.imagen img{
    width:90%;
    height:90%;
}

.contenido{
    padding:15px;
}

.contenido h2{
    font-size:17px;
}

.categoria{
    font-size:11px;
}

.precios p{
    font-size:13px;
}

.precios span{
    font-size:15px;
}

.estado{
    font-size:12px;
}

/* DETALLE */

.detalle{
    width:95%;
    padding:20px;
}

.detalle img{
    max-width:260px;
    height:auto;
}

.selectorCompra{
    padding:15px;
}

.opcion{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}

.total h2{
    font-size:28px;
}

/* WHATSAPP */

.whatsapp{
    width:55px;
    height:55px;
    font-size:28px;
}

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

@media (max-width:1024px){

.productos{

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

}

}

/*=========================
CELULAR
=========================*/

@media (max-width:768px){

.productos{

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

gap:15px;

}

.card{

border-radius:18px;

}

.imagen{

height:180px;

}

.contenido{

padding:15px;

}

.contenido h2{

font-size:18px;

}

.precio{

font-size:22px;

}

}