@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root{
    --g : linear-gradient(97deg, #FFF 8.85%, rgba(255, 255, 255, 0.00) 97.33%);
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background-color: #000000;
  padding: 0;
  font-family: "Space Grotesk", sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}


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

#preloader {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1211111111111111 !important;
    transition: opacity 0.8s ease;
    overflow: hidden !important;
}

#preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Contenedor del video */
.video-mask {
    width: 300px; /* ajustá si querés más grande */
}

/* Video con máscara oval horizontal */
.video-mask video {
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0; /* importante para evitar mostrar frame inicial */
    transition: opacity 0.3s ease;

    -webkit-mask-image: radial-gradient(
        ellipse 70% 45% at center,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,0.8) 60%,
        rgba(0,0,0,0.4) 70%,
        rgba(0,0,0,0) 85%
    );

    mask-image: radial-gradient(
        ellipse 70% 45% at center,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,0.8) 60%,
        rgba(0,0,0,0.4) 70%,
        rgba(0,0,0,0) 85%
    );
}







/*WHATSAPP*/
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e5e5e5; /* plateado */
    font-size: 34px;
    z-index: 999;
    box-shadow: 
        0 0 0 2px rgba(255,0,0,0.4),
        0 0 20px rgba(255,0,0,0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    backdrop-filter: blur(6px);
}

/* Hover */
.whatsapp-float:hover {
    transform: scale(1.1);
    color: #fff;
    box-shadow: 
        0 0 0 2px rgba(255,0,0,0.8),
        0 0 30px rgba(255,0,0,0.8);
}

/* Glow animado sutil */
@keyframes pulse {
    0%   { box-shadow: 0 0 0 2px rgba(255,0,0,0.3), 0 0 15px rgba(255,0,0,0.3); }
    50%  { box-shadow: 0 0 0 2px rgba(255,0,0,0.7), 0 0 30px rgba(255,0,0,0.7); }
    100% { box-shadow: 0 0 0 2px rgba(255,0,0,0.3), 0 0 15px rgba(255,0,0,0.3); }
}

.whatsapp-float {
    animation: pulse 2.5s infinite;
}









.nav_login {
    position: relative;
    font-family: Arial, sans-serif;
}

/* Usuario logueado */
.usuario_logueado {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #fff;
    border: 1px solid #fff;
     border: 1px solid #ec0000;
    background-color: #000000; /* negro oscuro */
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.usuario_logueado:hover {
      color: #fff; 
      border: 1px solid #ec0000;
        box-shadow: 
        0 0 0 2px rgba(255,0,0,0.4),
        0 0 30px rgba(255,0,0,0.4);
  
}

/* Icono de usuario */
.usuario_logueado i {
    margin-right: 8px;
    font-size: 18px;
    color: #ff4d4d; /* rojo principal */
    
}

/* Nombre del usuario */
.usuario_logueado span {
    font-weight: bold;
    font-size: 14px;
}

/* Dropdown del menú */
.dropdown_menu {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    
  background-color: #101010;
    border: 1px solid #540909;
    border-radius: 6px;
    color: #000;
    min-width: 150px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    overflow: hidden;
        transition: all 0.3s ease;

}

/* Opciones del menú */
.dropdown_menu a {
    display: block;
    padding: 10px 12px;
    color: #ffffff;
    text-decoration: none;
    transition: background 0.2s;
        transition: all 0.3s ease;

}

.dropdown_menu a:hover {
    background-color: #101010;
    background-color:#ec0000;
    color: #fff;
}

/* Para el estado abierto */
.show {
    display: block;
}










.hero {
    position: relative;   /* importante */
    width: 100%;
    height: 100vh;
}

/* Imagen de fondo */
.fondo_hero {
    position: absolute;
    inset: 0;             /* reemplaza top/left/width */
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;           /* queda detrás */
}

/* Burger oculto en desktop */
.burger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}
.burger span {
    width: 25px;
    height: 3px;
    background: #fff; /* blanco */
    margin: 4px 0;
}
/* Navbar arriba */
.navbar {
    position: fixed;
    padding-top: 30px;
    padding-bottom: 30px;
    left: 0;
    width: 90%;
    display: flex;
    align-items: center;
    z-index: 100000;
    padding-left: 5%;
    transition: backdrop-filter 0.3s ease, background 0.3s ease;
    padding-right: 5%;
}

/* Estado con blur */
.navbar.blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    background: rgba(0, 0, 0, 0.6); /* o negro translúcido */
}

.logo_nav{
    width: 126px;
    margin-right: 74px;
}


.navbar ul{
    gap:33px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
      list-style: none;
  padding: 0;
  margin: 0;
}


.navbar ul li a {
    position: relative;
    color: #FFF;
    font-family: "Space Grotesk";
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tienda_online{
    position: relative;
}
.tienda_online p{
border-radius: 2px;
background: #F00;
margin: 0;
display: flex;
padding: 2px;
flex-direction: column;
align-items: flex-start;
color: #FFF;
font-size: 9px;
font-style: normal;
font-weight: 700;
line-height: 9px; /* 101.124% */
text-transform: uppercase;
position: absolute;
bottom: 100%;
right: 0;
}
/* línea animada */
.navbar ul li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: #DC161F;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar ul li a:hover {
    color: #DC161F;
}

.navbar ul li a:hover::after {
    width: 100%;
}

.nav_login {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    position: absolute;
    right: 5%;
}
#login{
    display: flex;
width: 156px;
padding: 13px 16px;
justify-content: center;
align-items: flex-end;
gap: 32px;
cursor: pointer;
box-shadow: none;
border: none;
background-color: transparent;

color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 22.4px */
letter-spacing: -0.32px;
position: relative;

}
#login {
    transition: all 0.3s ease;
    border-radius: 14px;
}

/* Hover */
#login:hover {
    color: #d1d1d1;
    transform: translateY(-2px);
}

/* Línea animada inferior estilo minimal */
#login::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

#login:hover::after {
    width: 60%;
}


#registro{
    box-shadow: none;
border: none;
display: flex;
width: 236px;
padding: 13px 16px;
justify-content: center;
align-items: flex-end;
gap: 32px;
cursor: pointer;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 22.4px */
letter-spacing: -0.32px;
border-radius: 14px;
background: #DC161F;
}

#registro {
    transition: all 0.3s ease;
}

#registro:hover {
    background: #b81219;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 22, 31, 0.4);
}










#centro_hero{
    position: absolute;
    left: 5%;
    top: 40%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap:24px;
}

#h4_hero_1{
   color: #DFDFDF;
leading-trim: both;
display: flex;
flex-direction: row;
align-items: start;
justify-content: center;
gap: 4px;
font-family: "Space Grotesk";
font-family: "Space Grotesk";
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 17.6px */
letter-spacing: -0.48px;
text-transform: uppercase;
   margin:0;
}
#h4_hero_1 svg{
    width: 20px;
    height: 20px;
    aspect-ratio: 1/1;
}
#centro_hero h2{
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: "Space Grotesk";
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 61.6px */
    letter-spacing: -1.68px;
       margin:0;
}
#centro_hero h2 span{
   color: #DC161F;
leading-trim: both;
text-edge: cap;
font-family: "Space Grotesk";
font-size: 56px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: -1.68px;
}

#h4_hero_2{
    color: #DFDFDF;
leading-trim: both;
text-edge: cap;
font-family: "Space Grotesk";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 180%; /* 32.4px */
text-transform: uppercase;
align-self: stretch;
   margin:0;
   
}





#tienda_hero {
  width: 252px;
  height: 62px;
  border-radius: 15px;
  cursor: pointer;
  transition: 0.3s ease;
  background: linear-gradient(
    to bottom right,
    #e10600 0%,
    rgba(225, 6, 0, 0) 30%
  );
  background-color: rgba(225, 6, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

#tienda_hero:hover,
#tienda_hero:focus {
  background-color: rgba(225, 6, 0, 0.75);
  box-shadow: 0 0 12px rgba(225, 6, 0, 0.6);
  outline: none;
}

#tienda_hero .user-profile-inner {
  width: 246px;
  height: 56px;
  border-radius: 13px;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
    color: #FFF;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}

#tienda_hero .user-profile-inner p{

    color: #FFF;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}


#tienda_hero .user-profile-inner svg {
  width: 27px;
  height: 27px;
  fill: #fff;
}


.seccion{
    height: 100vh;
    width: 100%;
    display: flex;
}

/*SECCION BAJO HERO*/
#seccion_bajo_hero{
    width: 100%;
    height: 100px;
    padding-top: 11px;
    padding-bottom: 11px;
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: center;
    align-items: center;
}

.item_bajohero{
    width: calc(100% / 3);
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    height: 100px;

}
.item_bajohero:first-child{
    border-right: 0.8px solid #FFF;
}
.item_bajohero:last-child{
    border-left: 0.8px solid #FFF;
}
.item_bajohero img{
    width: 35px;
}

.texto_item_bh{
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: start;
    justify-content: center;
}

.texto_item_bh h3{
      margin: 0;
      color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 19px; /* 135.714% */
}

.texto_item_bh p{
    margin: 0;
    color: #FFF;
font-size: 13px;
font-style: normal;
font-weight: 300;
line-height: 19px; /* 146.154% */
}


/*SECCION DESTACADOS*/
#seccion_destacados{
    width: 100%;
    padding-top:50px ;
    padding-bottom: 50px;
    height: max-content;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
#titulo_destacados{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#titulo_destacados h3{
    margin: 0;
    color: #FFF;

font-family: "Space Grotesk";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 62.4px */
letter-spacing: -1.44px;
text-transform: uppercase;
}




/*SECCION LOBO*/

#seccion_lobo {
    width: calc(100% - 40px);
    height: calc(100vh);
    align-items: end;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: relative;
    background: black; /* fondo base */
    overflow: hidden;
    padding: 0% 20px;

}

/* la imagen */
#img_lobo {
    width: 100%;
    height: 125%;
    position: absolute;
    object-fit: cover;
    left: -40%;
    object-position: center;
    z-index: 1;
    top: -25%;
}

/* degradado */
#seccion_lobo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%; /* qué tanto difumina */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,1),
        rgba(0,0,0,0)
    );
    z-index: 2;
    pointer-events: none;
}
#seccion_lobo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 40%;
    width: 20%;   /* qué tanto entra desde la derecha */
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,1)
    );
    z-index: 2;
    pointer-events: none;
}


.fade-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15%;  /* intensidad */
    background: linear-gradient(
        to top,
        rgba(0,0,0,1),
        rgba(0,0,0,0)
    );
    z-index: 2;
    pointer-events: none;
}


#llamador_lobo{
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 32px;
    width: 500px;
}

#texto_lobo{
    margin: 0;
    font-family: "Space Grotesk";
font-size: 56px;
font-style: normal;
font-weight: 700;
line-height: 75px; /* 133.929% */
text-transform: uppercase;
background: linear-gradient(180deg, #262626 -9.59%, #FFF 99.94%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 3;
}





#tienda_hero2 {
  width: 252px;
  height: 62px;
  border-radius: 15px;
  cursor: pointer;
  transition: 0.3s ease;
  background: linear-gradient(
    to bottom right,
    #e10600 0%,
    rgba(225, 6, 0, 0) 30%
  );
  background-color: rgba(225, 6, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

#tienda_hero2:hover,
#tienda_hero2:focus {
  background-color: rgba(225, 6, 0, 0.75);
  box-shadow: 0 0 12px rgba(225, 6, 0, 0.6);
  outline: none;
}

#tienda_hero2 .user-profile-inner {
  width: 246px;
  height: 56px;
  border-radius: 13px;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
    color: #FFF;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}

#tienda_hero2 .user-profile-inner p{

    color: #FFF;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}


#tienda_hero2 .user-profile-inner svg {
  width: 27px;
  height: 27px;
  fill: #fff;
}









/*SECCION CLIENTES*/

#seccion_clientes {
    display: flex;
    /* min-height: calc(100vh - 160px); */
    width: calc(100% - 160px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 230px 80px;
    position: relative;
    height: max-content;
}

#seccion_clientes h3{
    margin: 0;
    margin-bottom: 0px;
    color: #FFF;

font-family: "Space Grotesk";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 62.4px */
letter-spacing: -1.44px;
text-transform: uppercase;
width: 80%;
}

#seccion_clientes h3 span{
  color: #DC161F;

font-family: "Space Grotesk";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 130%;
letter-spacing: -1.44px;
text-transform: uppercase;

}

#clientes_grande {
    width: calc(80% - 48px);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgb(0, 0, 0);
    border-radius: 16px;
    height: calc(600px - 32px);
    position: relative;
}

#clientes_grande div{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    z-index: 3;

}
 
#categoria_cliente{
    margin: 0;
    color: #b1b1b1;
font-size: 20px;
font-style: normal;
font-weight: 700;
letter-spacing: -0.72px;
text-transform: uppercase;

}

#tipo_cliente{
    margin: 0;
    color: #FFF;

font-family: "Space Grotesk";
font-size: 38px;
font-style: normal;
font-weight: 700;
letter-spacing: -1.44px;
text-transform: uppercase;
}


#clientes_grande img{
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
        border-radius: 16px;
        z-index: 1;
    filter: brightness(0.6);


}


#buton_clientes{
    display: flex;
    height: 58px;
    padding: 16px 32px;
    align-items: center;
    gap: 10px;
    border-radius: 37px;
    background: #FFF;
    cursor: pointer;
    box-shadow: none;
    border: none;
    color: #000;
    font-family: "Space Grotesk";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.54px;
    text-transform: uppercase;
    z-index: 2;

    /* animación suave */
    transition: 
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

/* HOVER */
#buton_clientes:hover{
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.4),
        0 0 40px rgba(218, 217, 217, 0.2);
}

/* CLICK */
#buton_clientes:active{
    transform: translateY(0) scale(0.98);
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.2);
}



.flecha_cliente{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 50; /* por encima de todo */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

#prev_cliente{
    left: -8%;
}

#next_cliente{
    right: -8%;
}

.flecha_cliente:hover{
    background: #DC161F;
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 0 20px rgba(220,22,31,0.7);
}









/*SECCION TARGET*/

#seccion_tiro{
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#div_target{
    width: 100%;
    height: 100%;
    position: relative;
}

/* Degradado TOP */
#div_target::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    z-index: 5;
}

/* Degradado BOTTOM */
#div_target::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
    z-index: 5;
}

#div_target img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Contenedor de textos */
#shots-container{
    position: absolute;
    inset: 0;
    pointer-events: none;
}


.shot-text{
    position: absolute;
 
    opacity: 0;
    animation: shot 0.6s ease-out forwards;
    border-radius: 100px;
 /*   
border: 1px solid var(--Component-color-Border, #DDE0E8);
background: rgba(255, 255, 255, 0.80);*/
display: flex;
padding: 8px 16px;
color: rgb(243, 243, 243);
flex-direction: column;
align-items: flex-start;
}









#tienda_hero3 {
  width: 504px;
  height: 62px;
  border-radius: 15px;
  cursor: pointer;
  transition: 0.3s ease;
  background: linear-gradient(
    to bottom right,
    #e10600 0%,
    rgba(225, 6, 0, 0) 30%
  );
  background-color: rgba(225, 6, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;

}

/* Aparición estilo impacto */
#tienda_hero3 {
  animation: shotAppear 0.8s ease-out forwards;
}

#tienda_hero3 {
    pointer-events: auto;
}
@keyframes shotAppear {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) scale(1.15);
    filter: blur(0);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}
#tienda_hero3::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 20px;
  border: 2px solid rgba(225, 6, 0, 0.7);
  animation: pulseTarget 1.8s infinite;
  pointer-events: none;
}

@keyframes pulseTarget {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}


#tienda_hero3:hover,
#tienda_hero3:focus {
  background-color: rgba(225, 6, 0, 0.75);
  box-shadow: 0 0 12px rgba(225, 6, 0, 0.6);
  outline: none;
}

#tienda_hero3 .user-profile-inner {
  width: 492px;
  height: 56px;
  border-radius: 13px;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
    color: #FFF;
text-align: center;
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}

#tienda_hero3 .user-profile-inner p{

    color: #FFF;
text-align: center;
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}


#tienda_hero3 .user-profile-inner svg {
  width: 27px;
  height: 27px;
  fill: #fff;
}


#tienda_hero3:hover {
  transform: translateX(-50%) scale(1.12);
  box-shadow: 
    0 0 25px rgba(225, 6, 0, 0.9),
    0 0 60px rgba(225, 6, 0, 0.6);
}




/* Animación tipo impacto */
@keyframes shot {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/*SECCION VIDEO*/

#seccion_video{
    height: max-content;
    padding: 160px 80px;
    width: calc(100% - 160px);
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    height: max-content;
    justify-content: center;
}

#img_y_frase_video{
    width: 515px;
    height: 500px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;
    background-image: url(../img/ojo.png);
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    
}

#img_y_frase_video p{
    margin: 0;
    color: #FFF;
font-family: "Space Grotesk";
font-size: 58px;
font-style: normal;
font-weight: 700;
margin-left: 40px;
width: calc(100% - 40px);
line-height: 72px; /* 124.138% */
letter-spacing: -3px;
text-transform: uppercase;
}
#img_y_frase_video p span{
    color: #DC161F;
font-family: "Space Grotesk";
font-size: 58px;
font-style: normal;
font-weight: 700;
line-height: 72px;
letter-spacing: -3px;
text-transform: uppercase;
}

#div_video{
    width: 741px;
    height: 500px;
    border-radius: 12px;
    position: relative;

}
#div_video {
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}


#div_video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
   filter: grayscale(100%) brightness(0.8) contrast(1.1);
    transition: .4s ease;
}


#div_video:hover iframe{
    filter: grayscale(0%) brightness(1) contrast(1);
}



/*SECCION NOSOTROS*/

#seccion_nosotros{
    width: calc(100% - 160px);
    padding: 80px;
    gap: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
        padding-top: 0;
}

#titulo_nosotros{
    width: 80%;
    gap: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start; 
}
#titulo_nosotros h3{
    margin: 0;
    width: 50%;
    color: #FFF;

    font-family: "Space Grotesk";
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 62.4px */
    letter-spacing: -1.44px;
    text-transform: uppercase;
}

#titulo_nosotros h3 span{
    color: #F00;

font-family: "Space Grotesk";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 130%;
letter-spacing: -1.44px;
text-transform: uppercase;
}
#titulo_nosotros p{
    margin: 0;
    width: 50%;
   color: #FFF;

font-family: "Space Grotesk";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 180%; /* 32.4px */
}

#foto_nosotros{
    gap: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 80%;
}
#foto_nosotros img{
    width: 50%;
    height: 600px;
    object-fit: cover;
    border-radius: 16px;
}
#div_numeritos{
     width: 50%;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}
.card_numeritos{
    width: calc(100% -  32px);
    height: calc(100% / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.card_numeritos h4{
    transition: transform .2s ease;
}

.card_numeritos h4.done{
    transform: scale(1.1);
}

.card_numeritos h4{
    margin: 0;
    color: #FFF;
text-align: center;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #E0E0E0;
font-family: "Space Grotesk";
font-size: 50px;
font-style: normal;
font-weight: 700;
letter-spacing: -1.5px;
}

.card_numeritos p{
    margin: 0;
 color: #878C91;
text-align: center;
font-family: "Space Grotesk";
font-size: 19px;
font-style: normal;
font-weight: 500;
}



/*FOOTER Y CONTACO*/
#footer_contacto{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 60px 120px 32px 120px;
    margin-top: 100px;
    width: calc(100% - 240px);
}

#div_contacto{
    width: 100%;
    gap: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
}

#izq_contacto{
    display: flex;
    flex-direction: column;
    width: 45%;
    align-items: start;
    justify-content: start;
    gap: 32px;
    height: 300px;
}
#dcha_contacto{
    display: flex;
    flex-direction: column;
    width: 55%;
    align-items: start;
    justify-content: start;
    gap: 32px;
    border-radius: 16px;
      height: 300px;
}


#izq_contacto h3{
    margin:0;
    color: #DC161F;
    font-family: "Space Grotesk";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -3px;
    text-transform: uppercase;
    width: 100%;
}

#contactos{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.contacto_indv{
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    color: #FFF;
font-family: "Space Grotesk";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}

#dcha_contacto iframe{ 
    width: 100%;
        border-radius: 16px;


}

 #div_linea {
    width: 100%;      /* Ancho completo */
    height: 1px;      /* Alto de 1 píxel */
    background-color: white; /* Color blanco */
  }

  #pie_final{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #nav_foot{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

#nav_foot img{
    width: 150px;
}

#anclas_foot{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}



#anclas_foot ul{
    gap:33px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
      list-style: none;
  padding: 0;
  margin: 0;
}


#anclas_foot ul li a {
    position: relative;
    color: #FFF;
    font-family: "Space Grotesk";
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}/* línea animada */
#anclas_foot ul li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: #DC161F;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

#anclas_foot ul li a:hover {
    color: #DC161F;
}

#anclas_foot ul li a:hover::after {
    width: 100%;
}


#derechos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 40px;
  
}

#derechos p{
color: #CAC6DD;
font-family: "Space Grotesk";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */

}


#redes {
  display: flex;             /* Coloca los íconos en fila */
  justify-content: center;   /* Centra horizontalmente */
  gap: 20px;                 /* Espacio entre íconos */
  align-items: center;
}

.social-icon {
  font-size: 30px;           /* Tamaño de los íconos */
  color: white;              /* Color inicial */
  transition: 0.3s;
}

.social-icon.instagram:hover { color: #E1306C; } /* Instagram */
.social-icon.facebook:hover { color: #3b5998; }  /* Facebook */
.social-icon.youtube:hover { color: #FF0000; }   /* YouTube */

.social-icon:hover {
  transform: scale(1.2);     /* Efecto al pasar el mouse */
}







.flecha_destacados {
    display: flex;
    width: 50px;
    height: 25px;
    padding: 10px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    border-radius: 37px;
    border: 1px solid #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.flecha_destacados:hover {
    border-radius: 37px;
background: #FFF;
color: rgb(0, 0, 0);
}
.flecha_destacados:active {
    border-radius: 37px;
background: #FFF;
color: rgb(0, 0, 0);
}



#flechitas_destacados {
    display: flex;
    align-items: center;
    gap: 8px;
}

#cards_destacados {
    display: flex;
    gap: 24px;
    margin: 0 auto;
    padding: 30px 30px;
    overflow: hidden;
    scroll-behavior: smooth;
}

#cards_destacados::-webkit-scrollbar {
    display: none; /* ocultar scrollbar */
}

#titulo_destacados {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(750px + 48px * 4);
}
.card_destacado {
    flex: 0 0 250px;   /* ancho real fijo */
    position: relative;
    height: 300px;
    border-radius: 30px;
    border: 1.8px solid #DAD4BA;
    background: #161616;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ;
}
.card_destacado img {
    object-fit: cover;
    transition: transform 0.3s ease;
    display: flex;
    width: 100%;
    height: 60%;
   
    align-items: center;
    flex-shrink: 0;
    border-radius: 12px;
background: linear-gradient(to bottom right, #4A4A4A 11%, #FFF 35%, #A5A5A5 47%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, #4A4A4A 11%, #FFF 35%, #A5A5A5 47%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, #4A4A4A 11%, #FFF 35%, #A5A5A5 47%) top left / 50% 50% no-repeat, linear-gradient(to top right, #4A4A4A 11%, #FFF 35%, #A5A5A5 47%) top right / 50% 50% no-repeat;
}

/* Nombre grande debajo de la imagen */
.card_destacado h4 {
    margin: 0;
    text-align: center;
    font-family: "Space Grotesk";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -2.7px;
    text-transform: uppercase;
    background: linear-gradient(97deg, #FFF 8.85%, rgba(255, 255, 255, 10%) 97.33%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* Categoria más pequeña debajo del nombre */
.card_destacado p {
    margin: 0;
    color: #DC161F;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 31.2px */
letter-spacing: -0.72px;
text-transform: uppercase;
    position: absolute;
    bottom: 20px;
    left: 20px;
    
}

/* Hover effect */
.card_destacado:hover {
    transform: translateY(-5px);
    box-shadow: 0 0px 25px rgba(255, 255, 255, 0.775);
}


#seccion_destacados {
    display: flex;
    flex-direction: column;
}










@media (max-width: 1919px) and (min-width: 1440px) {
    #clientes_grande {
        width: calc(80% - 48px);
        height: calc(400px - 32px);
    }

    #foto_nosotros img {
        height: 350px;  
    }
    #div_numeritos{
            height: 350px;  
    }
    #titulo_nosotros p{
    line-height:normal; /* 32.4px */
    }

}

/* Desktop / Laptop (1200px a 1439px) */
@media (max-width: 1439px) and (min-width: 1200px) {
    #clientes_grande {
        width: calc(80% - 48px);
        height: calc(400px - 32px);
    }
     #foto_nosotros img {
        height: 350px;  
    }
    #div_numeritos{
            height: 350px;  
    }
    #titulo_nosotros p{
    line-height:normal; /* 32.4px */
    }

    #seccion_clientes {
        padding-bottom: 100px;
    }
}

/* Tablets horizontales (1024px a 1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
      #clientes_grande {
        width: calc(80% - 48px);
        height: calc(400px - 32px);
    }
    #seccion_clientes {
        padding-bottom: 100px;
        padding-top: 100px;
    }
        #foto_nosotros img {
        height: 350px;  
    }
    #div_numeritos{
            height: 350px;  
    }
    #titulo_nosotros p{
    line-height:normal; /* 32.4px */
    font-size: 16px;
    }
    #titulo_nosotros h3,  #titulo_nosotros h3 span {
        font-size: 36px;

    }
    #seccion_nosotros{
        height: max-content;
    }

}

/* Tablets verticales (768px a 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
      #clientes_grande {
        width: calc(100% - 48px);
        height: calc(400px - 32px);
    }
    #seccion_clientes {
        padding-bottom: 100px;
        padding-top: 100px;
    }
        #foto_nosotros img {
        height: 250px;  
    }
    #div_numeritos{
            height: 250px;  
    }

    .card_numeritos h4 {
    font-size: 32px;

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




    #titulo_nosotros p{
    line-height:normal; /* 32.4px */
    font-size: 14px;
    }
    #titulo_nosotros h3,  #titulo_nosotros h3 span {
        font-size: 28px;

    }
    #seccion_nosotros{
        height: max-content;
        gap: 40px;
    }

    #titulo_destacados {
   
    width: 90%;
}

.logo_nav {
    width: 80px;
    margin-right: 20px;
}
.navbar ul, #anclas_foot ul {
    gap: 10px;
}
.navbar ul li a, #anclas_foot ul li a {
   
    font-size: 11px;
}

.contacto_indv svg{
    width: 24px !important;
    height: 24px !important;
}




#seccion_bajo_hero {
    width: calc(100% - 20px);
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
}


.card_destacado {
    flex: 0 0 170px;
    height: 225px;

}
#llamador_lobo {
    width: 40%;
}
#texto_lobo {
    font-size: 52px;
    line-height: 60px;
}
#tipo_cliente {
    font-size: 32px;
}

element.style {
}
#buton_clientes {
    height: 38px;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 14px;
}

#titulo_nosotros {
    width: 100%;
}
#foto_nosotros {
    width: 100%;
}



#seccion_video {
    padding: 100px 80px;
}

#img_y_frase_video {
    width: 40%;
    height: 300px;
}

#div_video {
    width: 60%;
    height: 300px;
}

#img_y_frase_video p {
    margin: 0;
    color: #FFF;
    font-family: "Space Grotesk";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    margin-left: 20px;
    width: calc(100% - 40px);
    line-height: 25px;
    letter-spacing: 0px;
    text-transform: uppercase;
}
#footer_contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 60px 40px 10px 40px;
    margin-top: 100px;
    width: calc(100% - 80px);
}
#derechos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-top: 40px;
}
.navbar {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
}

.nav_login {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    position: absolute;
    right: 2%;
}

#login {
    display: flex;
    width: 100px;
    padding: 6px 8px;
    justify-content: center;
    align-items: flex-end;
    gap: 32px;
    cursor: pointer;
    box-shadow: none;
    border: none;
    background-color: transparent;
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.32px;
    position: relative;
}
#registro {
    box-shadow: none;
    border: none;
    display: flex;
    width: 100px;
    padding: 6px 8px;
    justify-content: center;
    align-items: flex-end;
    gap: 32px;
    cursor: pointer;
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.32px;
    border-radius: 8px;
    background: #DC161F;
}

}
/* Móviles grandes (481px a 767px) */
@media (max-width: 767px) and (min-width: 481px) {


     #clientes_grande {
        width: calc(100% - 48px);
        height: calc(300px - 32px);
    }
    #seccion_clientes {
    display: flex;
    /* min-height: calc(100vh - 160px); */
    width: calc(100% - 120px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 60px;
    position: relative;
    height: max-content;
}
        #foto_nosotros img {
        height: 250px;  
    }
    #div_numeritos{
            height: 250px;  
    }

    .card_numeritos h4 {
    font-size: 32px;

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




    #titulo_nosotros p{
    line-height:normal; /* 32.4px */
    font-size: 14px;
            width: 100%;

    }
    #titulo_nosotros h3,  #titulo_nosotros h3 span {
        font-size: 28px;
        width: 100%;

    }
   #seccion_nosotros {
        height: max-content;
        gap: 40px;
        padding-top: 80px;
        padding-left: 40px;
        padding-right: 40px;
        width: calc(100% - 80px);
    }

    #titulo_destacados {
   
    width: 90%;
}

.logo_nav {
    width: 80px;
    margin-right: 20px;
    order: 2;
}
.navbar ul, #anclas_foot ul {
    gap: 10px;
}
.navbar ul li a, #anclas_foot ul li a {
   
    font-size: 11px;
}

.contacto_indv svg{
    width: 24px !important;
    height: 24px !important;
}




#seccion_bajo_hero {
    width: calc(100% - 20px);
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
    height: max-content;
}
.item_bajohero{
    flex-direction: column;
        padding-right: 10px;
        padding-left: 10px;
        justify-content: flex-start;
        height: 100%;
}

.texto_item_bh h3 {
    margin: 0;
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 19px;
    text-align: center;
}
.texto_item_bh p {
    margin: 0;
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 300;
    text-align: center;
    line-height: 12px;
}

#titulo_destacados h3 {
    margin: 0;
    color: #FFF;
    font-family: "Space Grotesk";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -1.44px;
    text-transform: uppercase;
}
.flecha_destacados {
    display: flex;
    width: 24px;
    height: 12px;
    padding: 10px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    border-radius: 10px !important;
    border: 1px solid #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}



    #titulo_destacados{
        width: 90%;
        padding: 0 20px;
    }

    #cards_destacados{
        width: 90% !important;
        padding: 20px;
        gap: 16px;
        overflow-x: auto;
    }

    .card_destacado{
        flex: 0 0 calc(40% - 8px); /* 🔥 muestra 2 cards */
        height: 260px;
    }



#llamador_lobo {
    width: 40%;
}
#texto_lobo {
   font-size: 30px;
        line-height: 35px;
}
#tipo_cliente {
    font-size: 32px;
}

element.style {
}
#buton_clientes {
    height: 38px;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 14px;
}

#titulo_nosotros {
    width: 100%;
        flex-direction: column;
}
#foto_nosotros {
    width: 100%;
}
#tienda_hero2 {
    width: 174px;
}

#tienda_hero2 .user-profile-inner {
    width: 168px;
}
#tienda_hero2 .user-profile-inner p {
    font-size: 14px;
}
#seccion_video {
        padding: 100px 20px;
        flex-direction: column;
        width: calc(100% - 40px);
    }

#tienda_hero2 .user-profile-inner svg {
    width: 22px;
    height: 22px;
}

#seccion_lobo {
    width: calc(100% - 40px);
    height: max-content;
    align-items: end;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: relative;
    background: black;
    overflow: hidden;
    padding: 80px 20px;
}

#seccion_clientes h3, #seccion_clientes h3 span {
    font-size: 28px;
    width: 100%;

}


#img_y_frase_video {
    width: 100%;
    height: 300px;
}

#div_video {
    width: 100%;
    height: 300px;
}


.shot-text {
        position: absolute;
        opacity: 0;
        animation: shot 0.6s ease-out forwards;
        border-radius: 100px;
        display: flex;
        padding: 4px 6px;
        color: rgb(243, 243, 243);
        flex-direction: row;
        align-items: flex-start;
        font-size: 8px;
    }

    #shots-container {
        position: absolute;
        pointer-events: none;
        width: 98%;
        left: 1%;
    }


#img_y_frase_video p {
    margin: 0;
    color: #FFF;
    font-family: "Space Grotesk";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    margin-left: 20px;
    width: calc(100% - 40px);
    line-height: 25px;
    letter-spacing: 0px;
    text-transform: uppercase;
}
#footer_contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 60px 40px 10px 40px;
    margin-top: 10px;
    width: calc(100% - 80px);
}
#div_contacto {
    width: 100%;
    gap: 32px;
    display: flex;
    flex-direction: column;
}
#izq_contacto {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: start;
    justify-content: start;
    gap: 32px;
    height: auto;
}
#nav_foot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
#dcha_contacto {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#derechos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-top: 40px;
}
.navbar {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
    justify-content: center;
}

.nav_login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: absolute;
    right: 2%;
}

    #login {
        display: flex;
        width: 100px;
        padding: 3px 4px;
        justify-content: center;
        align-items: flex-end;
        gap: 32px;
        cursor: pointer;
        box-shadow: none;
        border: none;
        background-color: transparent;
        color: #FFF;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        letter-spacing: -0.32px;
        position: relative;
    }
#registro {
    box-shadow: none;
    border: none;
    display: flex;
    width: 100px;
    padding: 3px 4px;
    justify-content: center;
    align-items: flex-end;
    gap: 32px;
    cursor: pointer;
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.32px;
    border-radius: 4px;
    background: #DC161F;
}



     .burger {
        display: flex;
        order: 1;
        position: absolute;
        left: 20px;
    }

   #menuNav {
    position: absolute;
    top: 93px;
    left: 0;
    width: 100%;
    flex-direction: column;
    overflow: hidden;

    /* glass effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255,255,255,0.2);

    /* Estado cerrado */
    max-height: 0;
    opacity: 0;

    transition: max-height 0.4s ease, opacity 0.3s ease;
}

    /* Estado abierto */
    #menuNav.active {
        max-height: 500px; /* suficiente para el contenido */
        opacity: 1;
    }


    .navbar ul.active {
        display: flex;
    }

    .navbar ul li {
        padding: 10px 20px;
    }


    .whatsapp-float {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 25px;
}


}

/* Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
   

     #clientes_grande {
        width: calc(100% - 48px);
        height: calc(350px - 32px);
        justify-content: end !important;
    }
    #clientes_grande img {
    filter: brightness(0.4);
    height: 100%;
}
.flecha_cliente {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

      #seccion_clientes {
        display: flex;
        /* min-height: calc(100vh - 160px); */
        width: calc(100% - 60px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 32px;
        padding: 30px;
        position: relative;
        height: max-content;
    }
         #foto_nosotros img {
        height: auto;
        order: 2;
        width: 100%;
        height: 200px;
        border-radius: 8px;
    }
        #div_numeritos {
        height: auto;
        order: 1;
        flex-direction: row;
        width: 100%;
        align-items: start;
    }
    .card_numeritos h4 {
    font-size: 28px;

    }
    .card_numeritos p {
            font-size: 10px;

}




    #titulo_nosotros p{
    line-height:normal; /* 32.4px */
    font-size: 14px;
            width: 100%;

    }
    #titulo_nosotros h3,  #titulo_nosotros h3 span {
        font-size: 28px;
        width: 100%;

    }
   #seccion_nosotros {
        height: max-content;
        gap: 40px;
        padding-top: 80px;
        padding-left: 40px;
        padding-right: 40px;
        width: calc(100% - 80px);
    }

    #titulo_destacados {
   
    width: 90%;
}

.logo_nav {
    width: 80px;
    margin-right: 20px;
    order: 2;
}
.navbar ul, #anclas_foot ul {
    gap: 10px;
}
.navbar ul li a, #anclas_foot ul li a {
   
font-size: 9px;
}

.contacto_indv svg{
    width: 24px !important;
    height: 24px !important;
}




#seccion_bajo_hero {
    width: calc(100% - 20px);
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
    height: max-content;
}
.item_bajohero{
    flex-direction: column;
        padding-right: 10px;
        padding-left: 10px;
        justify-content: flex-start;
        height: 100%;
}

.texto_item_bh h3 {
    margin: 0;
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 19px;
    text-align: center;
}
.texto_item_bh p {
    margin: 0;
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 300;
    text-align: center;
    line-height: 12px;
}

#titulo_destacados h3 {
    margin: 0;
    color: #FFF;
    font-family: "Space Grotesk";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -1.44px;
    text-transform: uppercase;
}
.flecha_destacados {
    display: flex;
    width: 24px;
    height: 12px;
    padding: 10px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    border-radius: 10px !important;
    border: 1px solid #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}



 #cards_destacados{
        width: 90% !important;
        padding: 20px;
        gap: 16px;
        overflow-x: auto;
    }

    .card_destacado{
        flex: 0 0 85%;
        height: 260px;
    }


#llamador_lobo {
    width: 60%;
}
#texto_lobo {
   font-size: 30px;
        line-height: 35px;
}
#tipo_cliente {
    font-size: 32px;
}

element.style {
}
#buton_clientes {
    height: 38px;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 14px;
}

#titulo_nosotros {
    width: 100%;
        flex-direction: column;
}
#foto_nosotros {
    width: 100%;
    flex-direction: column;
}
#tienda_hero2 {
    width: 174px;
}

#tienda_hero2 .user-profile-inner {
    width: 168px;
}
#tienda_hero2 .user-profile-inner p {
    font-size: 14px;
}
#seccion_video {
        padding: 100px 20px;
        flex-direction: column;
        width: calc(100% - 40px);
    }

#tienda_hero2 .user-profile-inner svg {
    width: 22px;
    height: 22px;
}

#seccion_lobo {
    width: calc(100% - 40px);
    height: max-content;
    align-items: end;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: relative;
    background: black;
    overflow: hidden;
    padding: 80px 20px;
}

#seccion_clientes h3, #seccion_clientes h3 span {
    font-size: 28px;
    width: 100%;

}


#img_y_frase_video {
    width: 100%;
    height: 200px;
}

#div_video {
    width: 100%;
   height: 200px;
}


.shot-text {
        position: absolute;
        opacity: 0;
        animation: shot 0.6s ease-out forwards;
        border-radius: 100px;
        display: flex;
        padding: 4px 6px;
        color: rgb(243, 243, 243);
        flex-direction: row;
        align-items: flex-start;
        font-size: 8px;
    }

    #shots-container {
        position: absolute;
        pointer-events: none;
        width: 94%;
        left: 3%;
    }
#tienda_hero3 {
    width: 80%;
    height: 61px;
    border-radius: 15px;
    cursor: pointer;
    transition: 0.3s ease;
    background: linear-gradient(to bottom right, #e10600 0%, rgba(225, 6, 0, 0) 30%);
    background-color: rgba(225, 6, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
#tienda_hero3 .user-profile-inner {
    width: calc(100% - 6px);
    height: 54px;
    border-radius: 13px;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #FFF;
    text-align: center;
    font-size: 23px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
}
#tienda_hero3 .user-profile-inner p {
    color: #FFF;
    text-align: center;
    font-size: 22px;
}



#centro_hero {
    position: absolute;
    left: 5%;
    top: 25%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 24px;
    width: 90%;
}

.fondo_hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(0.5);
}

#img_y_frase_video p {
    margin: 0;
    color: #FFF;
    font-family: "Space Grotesk";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    margin-left: 20px;
    width: calc(100% - 40px);
    line-height: 25px;
    letter-spacing: 0px;
    text-transform: uppercase;
}
    #footer_contacto {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 32px;
        padding: 60px 20px 10px 20px;
        margin-top: 10px;
        width: calc(100% - 40px);
    }
#div_contacto {
    width: 100%;
    gap: 32px;
    display: flex;
    flex-direction: column;
}
#izq_contacto {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: start;
    justify-content: start;
    gap: 32px;
    height: auto;
}
#nav_foot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
#dcha_contacto {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 200px;
}
#derechos p {
    color: #CAC6DD;
    font-family: "Space Grotesk";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}
#derechos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-top: 40px;
}
.navbar {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
    justify-content: center;
}

.nav_login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: absolute;
    right: 2%;
}

    #login {
        display: flex;
        width: 100px;
        padding: 3px 4px;
        justify-content: center;
        align-items: flex-end;
        gap: 32px;
        cursor: pointer;
        box-shadow: none;
        border: none;
        background-color: transparent;
        color: #FFF;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        letter-spacing: -0.32px;
        position: relative;
    }
#registro {
    box-shadow: none;
    border: none;
    display: flex;
    width: 100px;
    padding: 3px 4px;
    justify-content: center;
    align-items: flex-end;
    gap: 32px;
    cursor: pointer;
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.32px;
    border-radius: 4px;
    background: #DC161F;
}



     .burger {
        display: flex;
        order: 1;
        position: absolute;
        left: 20px;
    }
#h4_hero_2 {
    color: #DFDFDF;
    leading-trim: both;
    text-edge: cap;
    font-family: "Space Grotesk";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-transform: uppercase;
    align-self: stretch;
    margin: 0;
}
   #menuNav {
    position: absolute;
    top: 93px;
    left: 0;
    width: 100%;
    flex-direction: column;
    overflow: hidden;

    /* glass effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(255,255,255,0.2);

    /* Estado cerrado */
    max-height: 0;
    opacity: 0;

    transition: max-height 0.4s ease, opacity 0.3s ease;
}

    /* Estado abierto */
    #menuNav.active {
        max-height: 500px; /* suficiente para el contenido */
        opacity: 1;
    }


    .navbar ul.active {
        display: flex;
    }

    .navbar ul li {
        padding: 10px 20px;
    }


    .whatsapp-float {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 25px;
} 
}