/* ================================================= */
/* ESTILO TECNOLÓGICO GENERAL */
/* ================================================= */

:root{

--tech-blue:#0071e3;
--tech-glow:#2aa8ff;
--tech-dark:#0b0f18;

}


/* ============================================= */
/* HERO TECNOLÓGICO */
/* ============================================= */

.hero{
position:relative;
overflow:hidden;
}


/* GLOW TECNOLÓGICO */

.hero::before{

content:"";
position:absolute;

width:600px;
height:600px;

background:radial-gradient(circle,
rgba(0,120,255,.25),
transparent 70%);

top:-200px;
right:-150px;

filter:blur(120px);

animation:techGlow 12s infinite alternate;

}


@keyframes techGlow{

from{
transform:translateY(-30px);
}

to{
transform:translateY(40px);
}

}


/* ============================================= */
/* LINEA TECNOLÓGICA DE TITULO */
/* ============================================= */

.units h2{

position:relative;
display:inline-block;

}

.units h2::after{

content:"";

position:absolute;

left:50%;
transform:translateX(-50%);

bottom:-15px;

width:90px;
height:3px;

background:linear-gradient(90deg,
transparent,
#0071e3,
transparent);

animation:techLine 3s infinite;

}

@keyframes techLine{

0%{
opacity:.3;
}

50%{
opacity:1;
}

100%{
opacity:.3;
}

}


/* ============================================= */
/* TARJETAS TECNOLÓGICAS */
/* ============================================= */

.unit{

border:1px solid transparent;
transition:all .35s ease;

}

.unit:hover{

border:1px solid rgba(0,120,255,.15);

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

box-shadow:

0 20px 40px rgba(0,0,0,.08),
0 0 25px rgba(0,120,255,.2);

}


/* ============================================= */
/* GLOW EN LOGOS */
/* ============================================= */

.unit img{

transition:all .4s ease;

}

.unit:hover img{

transform:scale(1.1);

filter:drop-shadow(0 5px 15px rgba(0,120,255,.5));

}


/* ============================================= */
/* BOTONES TECNOLÓGICOS */
/* ============================================= */

.btn-primary{

background:linear-gradient(135deg,#0071e3,#4da3ff);

box-shadow:0 5px 20px rgba(0,120,255,.4);

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(0,120,255,.5);

}


/* ============================================= */
/* TARJETAS DE VENDEDORES */
/* ============================================= */

.vendedor{

border:1px solid rgba(0,120,255,.12);
transition:.3s;

}

.vendedor:hover{

transform:translateX(5px);

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

}


/* ============================================= */
/* BOTONES REDES SOCIALES */
/* ============================================= */

.btn-social{

border:1px solid rgba(0,120,255,.25);

transition:.3s;

}

.btn-social:hover{

background:#0071e3;

}

.btn-social:hover img{

filter:brightness(0) invert(1);

}


/* ============================================= */
/* SCROLL BAR TECNOLÓGICA */
/* ============================================= */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#f0f2f5;

}

::-webkit-scrollbar-thumb{

background:#0071e3;
border-radius:10px;

}

/* ============================================= */
/* LINEA TECNOLÓGICA TITULO */
/* ============================================= */

.section-title{
position:relative;
display:inline-block;
}

.section-title::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:-15px;
width:90px;
height:3px;
background:linear-gradient(
90deg,
transparent,
#0071e3,
transparent
);
animation:techLine 3s infinite;
}

.videos .section-title{
display:block;
text-align:center;
margin:0 auto 60px auto;
width:fit-content;
}

/* ============================= */
/* MODAL CONTENIDO */
/* ============================= */

.modal-right{
display:flex;
flex-direction:column;
gap:18px;
}

/* TITULO */

.modal-right h2{
font-size:32px;
font-family:'Space Grotesk',sans-serif;
margin-bottom:5px;
}

/* DESCRIPCION */

.modal-right p{
font-size:15px;
color:#555;
line-height:1.6;
}

/* ============================= */
/* RATING */
/* ============================= */

.modal-rating{

background:#f5f7fb;
padding:12px 16px;

border-radius:10px;

font-size:15px;
font-weight:500;

display:inline-block;

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

}

/* ============================= */
/* HORARIOS */
/* ============================= */

.modal-hours{

background:#f9fafc;

padding:16px 18px;

border-radius:12px;

border:1px solid #e8ecf2;

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

}

.modal-hours h3{
font-size:16px;
margin-bottom:8px;
font-weight:600;
}

.modal-hours p{
font-size:14px;
margin:3px 0;
color:#555;
}

/* ============================= */
/* BOTON UBICACION */
/* ============================= */

.btn-map{

display:inline-block;

padding:10px 18px;

background:linear-gradient(135deg,#0071e3,#3da0ff);

color:white;

border-radius:8px;

text-decoration:none;

font-size:14px;

font-weight:500;

width:fit-content;

transition:.25s;

box-shadow:0 5px 15px rgba(0,113,227,.3);

}

.btn-map:hover{

transform:translateY(-2px);

box-shadow:0 10px 20px rgba(0,113,227,.4);

}

/* ============================= */
/* BOTONES REDES */
/* ============================= */

.modal-buttons{

margin-top:auto;

display:flex;
gap:14px;

}

/* BOTONES */

.btn-social{

width:48px;
height:48px;

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

border-radius:50%;

background:#f5f7fb;

border:1px solid #e5eaf1;

transition:.25s;

}

.btn-social img{
width:22px;
height:22px;
}

/* HOVER */

.btn-social:hover{

transform:translateY(-4px);

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

background:#0071e3;

}

.btn-social:hover img{
filter:brightness(0) invert(1);
}