/*=========================================================
BEEF KING MARINADOS
STYLE.CSS
Versión 1.0
=========================================================*/

:root{

--negro:#111111;
--gris:#1c1c1c;
--gris2:#2d2d2d;
--rojo:#8B0000;
--rojo2:#B22222;
--dorado:#d4af37;
--blanco:#ffffff;
--grisClaro:#f4f4f4;
--texto:#dddddd;

--radio:18px;

--sombra:0 12px 30px rgba(0,0,0,.35);

--transicion:.35s;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:#111;

color:white;

overflow-x:hidden;

}

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

a{

text-decoration:none;

color:inherit;

}

img{

width:100%;

display:block;

}

ul{

list-style:none;

}

.contenedor{

width:92%;

max-width:1350px;

margin:auto;

}

/*==============================*/
/* LOADER */
/*==============================*/

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#000;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-logo img{

width:180px;

animation:girar 3s linear infinite;

}

@keyframes girar{

0%{

transform:rotateY(0deg);

}

100%{

transform:rotateY(360deg);

}

}

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

header{

position:fixed;

width:100%;

top:0;

left:0;

z-index:999;

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

backdrop-filter:blur(15px);

transition:.4s;

}

header .contenedor{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo img{

height:80px;

width:auto;

}

nav ul{

display:flex;

gap:35px;

}

nav ul li a{

color:white;

font-size:16px;

font-weight:500;

transition:.3s;

}

nav ul li a:hover{

color:var(--dorado);

}

.iconos{

display:flex;

gap:25px;

font-size:22px;

cursor:pointer;

}

.iconos i:hover{

color:var(--dorado);

}

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

.hero{

height:100vh;

background:url("../img/hero.jpg") center center/cover;

position:relative;

display:flex;

align-items:center;

}

.hero::before{

content:"";

position:absolute;

width:100%;

height:100%;

background:linear-gradient(rgba(0,0,0,.72),
rgba(0,0,0,.82));

}

.overlay{

position:relative;

z-index:10;

width:100%;

}

.hero .contenido{

width:650px;

margin-left:8%;

}

.hero h4{

color:var(--dorado);

letter-spacing:4px;

font-size:20px;

margin-bottom:20px;

}

.hero h1{

font-size:70px;

font-weight:800;

line-height:80px;

margin-bottom:30px;

}

.hero h1 span{

display:block;

color:var(--dorado);

}

.hero p{

font-size:20px;

line-height:34px;

color:#ddd;

margin-bottom:40px;

}

.botones{

display:flex;

gap:20px;

}

.btn-principal{

padding:18px 42px;

background:var(--rojo);

border-radius:50px;

font-weight:600;

transition:.4s;

}

.btn-principal:hover{

background:var(--dorado);

color:#111;

transform:translateY(-5px);

}

.btn-secundario{

padding:18px 42px;

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

border-radius:50px;

transition:.4s;

}

.btn-secundario:hover{

background:var(--dorado);

color:black;

}

/*==============================*/
/* BENEFICIOS */
/*==============================*/

.beneficios{

padding:110px 0;

background:#181818;

}

.titulo{

text-align:center;

margin-bottom:60px;

}

.titulo h2{

font-size:48px;

color:var(--dorado);

margin-bottom:15px;

}

.titulo p{

font-size:18px;

color:#bbb;

}

.grid-beneficios{

display:grid;

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

gap:30px;

}

.beneficio{

background:#222;

padding:45px;

border-radius:20px;

text-align:center;

transition:.4s;

box-shadow:var(--sombra);

}

.beneficio:hover{

transform:translateY(-10px);

background:#2d2d2d;

}

.beneficio i{

font-size:60px;

margin-bottom:25px;

color:var(--dorado);

}

.beneficio h3{

font-size:24px;

margin-bottom:15px;

}

.beneficio p{

color:#ccc;

line-height:28px;

}

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

.productos{

padding:120px 0;

background:#111;

}

.productos-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:40px;

margin-top:60px;

}

.producto{

background:#1b1b1b;

border-radius:20px;

overflow:hidden;

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

transition:.40s;

position:relative;

}

.producto:hover{

transform:translateY(-12px);

box-shadow:0 20px 45px rgba(212,175,55,.30);

}

.imagen{

height:300px;

overflow:hidden;

position:relative;

background:#000;

}

.imagen img{

width:100%;

height:100%;

object-fit:cover;

transition:.60s;

}

.producto:hover img{

transform:scale(1.12);

}

.imagen span{

position:absolute;

top:20px;

left:20px;

background:var(--dorado);

color:#111;

padding:8px 18px;

font-weight:700;

border-radius:30px;

font-size:13px;

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

}

.info{

padding:28px;

}

.info h3{

font-size:28px;

margin-bottom:12px;

color:white;

}

.info p{

color:#c9c9c9;

line-height:28px;

margin-bottom:25px;

}

.precio{

font-size:34px;

font-weight:700;

color:var(--dorado);

margin-bottom:30px;

}

.acciones{

display:flex;

gap:15px;

}

.acciones button{

flex:1;

padding:16px;

border:none;

border-radius:12px;

cursor:pointer;

font-size:16px;

font-weight:600;

transition:.35s;

}

.btnAgregar{

background:var(--rojo);

color:white;

}

.btnAgregar:hover{

background:var(--dorado);

color:#111;

}

.btnDetalles{

background:transparent;

border:2px solid var(--dorado)!important;

color:var(--dorado);

}

.btnDetalles:hover{

background:var(--dorado);

color:black;

}

/*=========================================================
DESTACADOS
=========================================================*/

.destacados{

padding:120px 0;

background:#181818;

}

.cards-destacadas{

display:grid;

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

gap:45px;

margin-top:60px;

}

.cardGrande{

position:relative;

overflow:hidden;

border-radius:25px;

height:430px;

cursor:pointer;

}

.cardGrande img{

width:100%;

height:100%;

object-fit:cover;

transition:.7s;

}

.cardGrande:hover img{

transform:scale(1.15);

}

.cardGrande::after{

content:"";

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

background:linear-gradient(
rgba(0,0,0,.15),
rgba(0,0,0,.88));

}

.cardGrande .texto{

position:absolute;

bottom:45px;

left:45px;

z-index:2;

}

.cardGrande h2{

font-size:42px;

margin-bottom:18px;

}

.cardGrande p{

font-size:18px;

margin-bottom:30px;

color:#eee;

}

.cardGrande a{

display:inline-block;

padding:16px 40px;

background:var(--dorado);

color:black;

border-radius:40px;

font-weight:700;

transition:.35s;

}

.cardGrande a:hover{

background:white;

transform:translateY(-5px);

}

/*=========================================================
RECETAS
=========================================================*/

.recetas{

padding:120px 0;

background:#101010;

}

.grid-recetas{

display:grid;

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

gap:35px;

margin-top:60px;

}

.receta{

background:#202020;

border-radius:20px;

overflow:hidden;

transition:.40s;

box-shadow:var(--sombra);

}

.receta:hover{

transform:translateY(-12px);

}

.receta img{

height:260px;

object-fit:cover;

transition:.6s;

}

.receta:hover img{

transform:scale(1.10);

}

.receta .contenido{

padding:25px;

}

.receta h3{

font-size:28px;

margin-bottom:15px;

}

.receta p{

margin-bottom:25px;

color:#bbb;

}

.receta a{

display:inline-block;

padding:14px 28px;

background:var(--rojo);

border-radius:40px;

font-weight:600;

transition:.35s;

}

.receta a:hover{

background:var(--dorado);

color:black;

}

/*=========================================================
ESTADISTICAS
=========================================================*/

.estadisticas{

padding:100px 0;

background:url("../img/fondo-estadisticas.jpg");

background-size:cover;

background-position:center;

position:relative;

}

.estadisticas::before{

content:"";

position:absolute;

width:100%;

height:100%;

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

top:0;

left:0;

}

.estadisticas .contenedor{

position:relative;

display:grid;

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

text-align:center;

z-index:2;

}

.estadisticas h2{

font-size:70px;

color:var(--dorado);

margin-bottom:12px;

}

.estadisticas p{

font-size:20px;

color:white;

}

/*=========================================================
NOSOTROS
=========================================================*/

.nosotros{

padding:120px 0;

background:#181818;

}

.nosotros .contenedor{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.nosotros img{

border-radius:20px;

box-shadow:var(--sombra);

}

.nosotros h2{

font-size:48px;

margin-bottom:30px;

color:var(--dorado);

}

.nosotros p{

line-height:34px;

font-size:18px;

margin-bottom:25px;

color:#cccccc;

}

/*=========================================================
TESTIMONIOS
=========================================================*/

.testimonios{

padding:120px 0;

background:#101010;

}

.testimonios-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

margin-top:60px;

}

.testimonio{

background:#1d1d1d;

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:var(--sombra);

transition:.35s;

border:1px solid rgba(212,175,55,.15);

}

.testimonio:hover{

transform:translateY(-10px);

border-color:var(--dorado);

}

.testimonio img{

width:100px;

height:100px;

border-radius:50%;

margin:auto;

object-fit:cover;

border:4px solid var(--dorado);

margin-bottom:20px;

}

.testimonio h3{

margin-bottom:10px;

font-size:24px;

}

.estrellas{

color:gold;

font-size:24px;

margin-bottom:20px;

}

.testimonio p{

line-height:30px;

color:#cccccc;

}

/*=========================================================
FAQ
=========================================================*/

.faq{

padding:120px 0;

background:#181818;

}

.accordion{

max-width:900px;

margin:auto;

}

.item{

background:#222;

margin-bottom:18px;

border-radius:15px;

overflow:hidden;

box-shadow:var(--sombra);

}

.item button{

width:100%;

padding:22px;

background:#222;

border:none;

color:white;

font-size:20px;

font-weight:600;

cursor:pointer;

text-align:left;

transition:.35s;

}

.item button:hover{

background:var(--rojo);

}

.item div{

padding:25px;

background:#2b2b2b;

line-height:30px;

color:#ddd;

}

/*=========================================================
CARRITO
=========================================================*/

.carrito{

position:fixed;

top:0;

right:-420px;

width:400px;

height:100vh;

background:#121212;

z-index:99999;

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

transition:.40s;

display:flex;

flex-direction:column;

}

.carrito.activo{

right:0;

}

.carrito-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px;

background:#000;

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

}

.carrito-header h2{

color:var(--dorado);

}

#cerrarCarrito{

font-size:34px;

cursor:pointer;

}

#productosCarrito{

flex:1;

overflow-y:auto;

padding:25px;

}

.total{

padding:25px;

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

background:#191919;

}

.total h3{

display:flex;

justify-content:space-between;

font-size:28px;

color:var(--dorado);

}

.botonesCarrito{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

padding:20px;

}

.botonesCarrito button{

padding:16px;

border:none;

border-radius:10px;

cursor:pointer;

font-weight:700;

transition:.35s;

}

.vaciar{

background:#555;

color:white;

}

.vaciar:hover{

background:#777;

}

.comprar{

background:var(--rojo);

color:white;

}

.comprar:hover{

background:var(--dorado);

color:black;

}

/*=========================================================
CONTACTO
=========================================================*/

.contacto{

padding:120px 0;

background:#101010;

}

.contacto-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

margin-top:60px;

}

.contacto h3{

font-size:32px;

margin-bottom:25px;

color:var(--dorado);

}

.contacto p{

line-height:34px;

margin-bottom:18px;

}

form{

display:flex;

flex-direction:column;

gap:18px;

}

input,textarea{

background:#222;

border:1px solid #333;

padding:18px;

color:white;

font-size:16px;

border-radius:12px;

outline:none;

transition:.35s;

}

input:focus,

textarea:focus{

border-color:var(--dorado);

}

textarea{

min-height:180px;

resize:none;

}

form button{

padding:18px;

background:var(--rojo);

color:white;

border:none;

border-radius:12px;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

form button:hover{

background:var(--dorado);

color:black;

}

/*=========================================================
INSTAGRAM
=========================================================*/

.instagram{

padding:100px 0;

background:#181818;

}

.galeria{

display:grid;

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

gap:10px;

margin-top:40px;

}

.galeria img{

height:220px;

object-fit:cover;

transition:.40s;

cursor:pointer;

}

.galeria img:hover{

transform:scale(1.08);

}

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

footer{

background:#000;

padding:80px 0 20px;

}

footer .contenedor{

display:grid;

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

gap:40px;

}

.footerLogo img{

height:90px;

width:auto;

margin-bottom:20px;

}

footer h3{

color:var(--dorado);

margin-bottom:20px;

}

footer ul li{

margin-bottom:12px;

}

footer ul li a{

transition:.30s;

}

footer ul li a:hover{

color:var(--dorado);

padding-left:6px;

}

footer p{

color:#cccccc;

line-height:28px;

}

footer a{

display:block;

margin-bottom:10px;

transition:.30s;

}

footer a:hover{

color:var(--dorado);

}

.copyright{

margin-top:50px;

padding-top:20px;

text-align:center;

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

color:#888;

}

/*=========================================================
BOTÓN WHATSAPP
=========================================================*/

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:70px;

height:70px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:white;

z-index:9999;

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

transition:.35s;

}

.whatsapp:hover{

transform:scale(1.12);

}

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

@media(max-width:1100px){

.grid-beneficios,

.cards-destacadas,

.grid-recetas,

.estadisticas .contenedor,

.contacto-grid,

.nosotros .contenedor,

footer .contenedor{

grid-template-columns:1fr;

}

.hero .contenido{

width:90%;

margin:auto;

text-align:center;

}

.hero h1{

font-size:52px;

line-height:60px;

}

nav{

display:none;

}

.galeria{

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

}

.carrito{

width:100%;

}

}

@media(max-width:768px){

.productos-grid{

grid-template-columns:1fr;

}

.hero{

height:90vh;

}

.hero h1{

font-size:42px;

line-height:50px;

}

.titulo h2{

font-size:36px;

}

.logo img{

height:60px;

}

.whatsapp{

width:60px;

height:60px;

font-size:28px;

}

}