/* ===================== */
/* BODY */
/* ===================== */


body{



margin:0;
height:102vh;

position:relative;
overflow:hidden;

background:
url("../assets/img/fondo.png"),
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.25),
transparent 60%
),
linear-gradient(
135deg,
#020617,
#0f172a,
#0b2a4a,
#1e3a8a
);

background-size:cover, cover, cover;
background-repeat:no-repeat, no-repeat, no-repeat;


font-family:Arial;

}


/* ===================== */
/* LOGO CENTRADO */
/* ===================== */

.logo{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:35vw;
max-width:900px;

transition:all 2s ease;


}


/* ===================== */
/* POSICION FINAL DEL LOGO */
/* ===================== */

.logo.small{

position:absolute;

top:40px;
left:40px;

width:250px;

transform:none;


}


/* ===================== */
/* MENU */
/* ===================== */

.menu{

position:absolute;

top:clamp(40px,5vh,80px);
right:clamp(20px,5vw,80px);

display:flex;
flex-direction:row;

gap:25px;

font-size:clamp(20px,2vw,38px);

z-index:20;

}

/*.menu-title{

font-size:22px;

font-weight:600;

color:#7fb3ff;

letter-spacing:2px;

text-transform:uppercase;

}*/

/*DIVISIONES*/

.menu-title{

font-size:clamp(18px,3vw,36px);

font-weight:600;

color:#7fb3ff;

letter-spacing:2px;

text-transform:uppercase;

}

.menu-title:hover{

transform:scale(1.15);

transition:0.3s;

cursor:pointer;

}

/*SUB MENU*/

.menu-dropdown{

position:absolute;

top:50px;
right:100px;

display:flex;
flex-direction:column;

gap:30px;

background:rgba(255, 255, 255, 0.6);

padding:60px;           /*AGRANDAMOS LA CAJA DEL SUB MENU*/

border-radius:10px;

backdrop-filter:blur(10px);

opacity:0;
pointer-events:none;

transform:translateY(-10px);

transition:0.8s;

}

.menu-dropdown a::before{

content:"-";

color:#000000;

display:inline-block;

width:10px;

margin-left:-20px;

}

.menu-dropdown.show{

opacity:1;

pointer-events:auto;

transform:translateY(0);

}

.menu-dropdown a{

font-size:25px;

text-decoration:none;

color:rgb(0, 0, 0);

transition:0.3s;

}

.menu-dropdown a:hover{

color:#000000;

}

/*TEXTO SUB MENU*/

.menu a{

text-decoration:none;

color:rgb(0, 0, 0);

font-weight:500;

transition:0.3s;

}

.menu a:hover{

color:#1100ff;

}


/* ===================== */
/* DESTELLO AL ABRIR */
/* ===================== */

.flash{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:white;

opacity:0;

pointer-events:none;

animation:flashEffect 2s ease;

}

@keyframes flashEffect{

0%{
opacity:1;
}

100%{
opacity:0;
}

}


/* ===================== */
/* LOGO MAS GRANDE EN CELULARES */
/* ===================== */

@media (max-width:768px){

.logo{

width:70vw;

}

.menu{

font-size:22px;
left:20px;

}



}

/* ===================== */
/* INFORMACION LEGAL */
/* ===================== */

.legal-info{

position:absolute;

display:flex;
flex-direction:column;

color:white;

z-index:20;

}

/* enlaces legales */

.legal-info a{

color:white;

text-decoration:none;

transition:all 0.3s ease;

display:inline-block;

}

.legal-info a:hover{

color:#7fb3ff;

transform:scale(1.15);

cursor:pointer;

}

/* correo */

.legal-email{

color:#9ecbff;
margin-top:6px;

}

/* ===================== */
/* VENTANA DIVISION */
/* ===================== */

.division-window{

position:absolute;
z-index:50;

/* CONTROL TOTAL DE POSICION */
top:var(--ventana-y,120px);
left:var(--ventana-x,570px);

background:rgba(255, 5, 5, 0);

display:flex;

opacity:0;
pointer-events:none;

transition:0.3s;

}

.division-window.show{

opacity:1;
pointer-events:auto;

}

.division-content{

background:rgb(255, 255, 255,0.6);

padding:30px;

border-radius:12px;

display:flex;
flex-direction:column;

align-items:center;

gap:20px;

width:220px;

animation:popup 0.3s ease;

}

.division-logo{

width:120px;

}

.division-link{

text-decoration:none;

background:#0b2a4a;

color:white;

padding:10px 20px;

border-radius:6px;

}

@keyframes popup{

0%{
transform:scale(0.8);
opacity:0;
}

100%{
transform:scale(1);
opacity:1;
}

}

/* ===================== */
/* OCULTAR CONTENIDO INICIAL */
/* ===================== */

.hidden-start{

opacity:0;
transition:opacity 1.2s ease;

}

.hidden-start.show{

opacity:1;

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

@media (max-width:768px){

.legal-info{

bottom:20px;
right:20px;

font-size:24px;

gap:6px;

}

}


/* ===================== */
/* LAPTOP */
/* ===================== */

@media (min-width:769px) and (max-width:1400px){

.legal-info{

bottom:150px;
left:45px;

font-size:20px;

gap:8px;

}

}


/* ===================== */
/* PANTALLAS GRANDES */
/* ===================== */

@media (min-width:1401px){

.legal-info{

bottom:50px;
left:70px;

font-size:28px;

gap:10px;

}

}

/*CONTROL DE LA X*/

.close-window{

position:absolute;

top:10px;
right:15px;

font-size:22px;

cursor:pointer;

color:#333;

font-weight:bold;

}

/* VENTANA PUBLICIDAD */

.ads-window{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

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

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

opacity:0;
pointer-events:none;

transition:0.3s;

z-index:1000;

}

.ads-window.show{

opacity:1;
pointer-events:auto;

}

.ads-content{

background:url("../assets/img/fondo_tablas.jpg");
background-size:cover;
background-position:center;

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

height:1800px;

border-radius:10px;

text-align:center;

position:relative;
overflow:hidden;
}

.close-ads{

position:absolute;
top:10px;
right:15px;

cursor:pointer;

font-size:30px;

}

/* ===================== */
/* LINK PUBLICIDAD */
/* ===================== */

.ads-link{

color:#0b2a4a;
text-decoration:none;
font-weight:bold;

display:inline-block;

transition:all 0.3s ease;

}

/* ANIMACION AL PASAR EL CURSOR */

.ads-link:hover{

color:#1e90ff;

transform:scale(1.08);

text-shadow:
0 0 5px rgba(30,144,255,0.6),
0 0 10px rgba(30,144,255,0.4),
0 0 20px rgba(30,144,255,0.3);

}

/* ===================== */
/* LOGO GRUPO EN PUBLICIDAD */
/* ===================== */

.ads-logo{

position:absolute;

top:40px;
left:5%;

width:25%;
min-width:70px;

pointer-events:none;

}



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

.ads-animals{

position:absolute;

left:-330px;
top:220px;

width:150%;
max-width:none;

opacity:0.5;

pointer-events:none;

transition:all 0.6s ease;

}

/* ===================== */
/* ANIMACION TEXTO */
/* ===================== */

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

.ads-title{

position:absolute;

top:-2%;
left:32%;

transform:translateX(-50%);

text-align:center;

font-size:clamp(28px,5vw,50px);

color:rgb(253, 228, 2);

opacity:0;

transition:all 1s ease;

}


/* ===================== */
/* TEXTO DESCRIPCION */
/* ===================== */

.ads-text1{

position:absolute;

top:10%;
left:30%;

transform:translateX(-50%);
text-align:center;

font-size:clamp(14px,2vw,25px);

color:rgb(255, 255, 255);

opacity:0;

transition:all 1s ease;

}


/* ===================== */
/* TEXTO VISITA */
/* ===================== */

.ads-text2{

position:absolute;

top:70%;
left:25%;

transform:translateX(-50%);
text-align:center;

font-size:clamp(40px,2.5vw,30px);

color:rgb(255, 255, 255);

opacity:0;

transition:all 1s ease;

}

.ads-text3{

position:absolute;

top:72%;
left:45%;

transform:translateX(-50%);
text-align:center;

font-size:clamp(40px,2.5vw,30px);

color:rgb(255, 255, 255);

opacity:0;

transition:all 1s ease;

}


/* ===================== */
/* LINK */
/* ===================== */

.ads-link{

position:absolute;

top:95%;
left:30%;

transform:translateX(-50%);
text-align:center;

font-size:clamp(40px,2.5vw,30px);

color:rgb(255, 242, 0);

}


/* ANIMACION AL ABRIR */

.ads-window.show .ads-title,
.ads-window.show .ads-text1,
.ads-window.show .ads-text2,
.ads-window.show .ads-facebook,
.ads-window.show .ads-tiktok,
.ads-window.show .ads-promo,
.ads-window.show .ads-email,
.ads-window.show .ads-facebook-text,
.ads-window.show .ads-tiktok-text{

opacity:1;

}

.ads-window.show h2,
.ads-window.show p{

opacity:1;

transform:translateY(0);

} 

/* ===================== */
/* LOGO CARNES SANBOSI */
/* ===================== */

.ads-carnes{

position:absolute;

top:50%;
left:20%;

transform:translate(-50%,-50%);

width:12%;
min-width:70px;

transition:all 1s ease;

}

.ads-window.show .ads-carnes{

top:280px;
right:715px;
left:auto;

transform:none;

width:180px;

}

/* ===================== */
/* IMAGEN PRODUCTO CARNES */
/* ===================== */

.ads-carnes-img{

position:absolute;

top:60%;
left:50%;

transform:translate(-50%,-50%);

width:60%;

z-index:2;

}

/* ===================== */
/* CARRUSEL CONO LOGOS */
/* ===================== */

.logo-carousel{

position:absolute;

top:50%;
left:55%;

transform:translate(-50%,-50%);

perspective:1200px;

display:none;

z-index:50;

}

.logo-carousel.show{
display:block;
}

.carousel-track{

position:relative;

width:400px;
height:250px;

transform-style:preserve-3d;

transition:transform 1s;

}

.carousel-logo{

position:absolute;

width:160px;

left:50%;
top:80%;

transform-style:preserve-3d;

transition:transform 1.2s cubic-bezier(.25,.8,.25,1), opacity 0.6s;

transform-origin:center;

opacity:0.8;

}

.carousel-logo:nth-child(1){
transform:rotateY(0deg) translateZ(250px);
}

.carousel-logo:nth-child(2){
transform:rotateY(90deg) translateZ(250px);
}

.carousel-logo:nth-child(3){
transform:rotateY(180deg) translateZ(250px);
}

.carousel-logo:nth-child(4){
transform:rotateY(270deg) translateZ(250px);
}

.carousel-logo.active{

transform:scale(1.6);

filter:brightness(1);

opacity:1;

}

.carousel-controls{

position:absolute;

top:30%;

left:50%;

transform:translateX(-50%);

display:flex;

gap:40px;

}

.carousel-controls button{

font-size:30px;

background:none;

border:none;

color:white;

cursor:pointer;

}

/* ===================== */
/* ICONO FACEBOOK */
/* ===================== */

.ads-facebook{

position:absolute;

top:80%;
left:5%;

width:60px;

opacity:0;

transition:all 1s ease;

}

/* ===================== */
/* ICONO TIKTOK */
/* ===================== */

.ads-tiktok{

position:absolute;

top:85%;
left:5%;

width:70px;

opacity:0;

transition:all 1s ease;

}

/* ===================== */
/* TEXTO PROMOCIONAL */
/* ===================== */

.ads-promo{

position:absolute;

top:5%;
left:35%;

font-size:35px;

color:white;

line-height:1.4;

opacity:0.10;

transition:all 1s ease;

text-align:center;

max-width:560px;

}

/*TAMAÑO LOGO ASEO*/
.logo-aseo{

width:330px;

}

/* ===================== */
/* CORREO CARNES SANBOSI */
/* ===================== */

.ads-email{

position:absolute;

top:92%;
left:4%;

font-size:35px;

color:rgb(255, 255, 255);

opacity:0;

transition:all 1s ease;

}

/* ===================== */
/* TEXTO FACEBOOK */
/* ===================== */

.ads-facebook-text{

position:absolute;

top:81%;
left:15%;

font-size:30px;

color:rgb(255, 255, 255);

opacity:0;

transition:all 1s ease;

}

/* ===================== */
/* TEXTO TIKTOK */
/* ===================== */

.ads-tiktok-text{

position:absolute;

top:86%;
left:15%;

font-size:30px;

color:rgb(255, 255, 255);

opacity:0;

transition:all 1s ease;

}

/* ===================== */
/* ICONO WHATSAPP CARNES */
/* ===================== */

.ads-whatsapp{

position:absolute;

top:82%;
left:55%;

width:70px;

}

.ads-whatsapp-text{

position:absolute;

top:83%;
left:65%;

font-size:30px;

color:rgb(255, 255, 255);

}

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

.ads-email:hover,
.ads-facebook-text:hover,
.ads-tiktok-text:hover,
.ads-link:hover{

transform:scale(1.15);

transition:0.3s;

cursor:pointer;

}

/* ===================== */
/* TEXTO PRESENTACION GRUPO */
/* ===================== */

/*.grupo-presentacion{

position:absolute;

top:32%;
left:22%;

transform:translateX(-50%);

max-width:300px;

text-align:center;

font-size:20px;

color:white;

line-height:1.5;

z-index:40;

}*/

/*POSICION VENTANA CARNICERIA*/

/* ===================== */
/* POSICION CARNICERIA */
/* ===================== */

#carnesWindow{

left:auto;
right:390px;

}