/* =========================================================
1) GLOBAL
========================================================= */
:root{
--sycec-blue: #0192c8;
--sycec-blue-dark: #0173a1;
--sycec-green: #44ab48;
}

html{
scroll-behavior: smooth;
}

html, body{
margin: 0;
padding: 0;
overflow-x: hidden;
}

/* Navbar fixed-top (si tu navbar es fixed-top, esto es correcto) */
body{
padding-top: 70px;
}

.sycec-blue{ color: var(--sycec-blue) !important; }
.sycec-green{ color: var(--sycec-green); }

.social-share i,
.sociales i{
font-size: 2.4rem;
}

/* =========================================================
2) VIDEO DE FONDO
========================================================= */
#myVideo{
position: fixed;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

/* =========================================================
3) SWIPER / SLIDERS (GENÉRICO)
========================================================= */
.swiper.mySwiper img,
.swiper.history_line img{
width: 100%;
height: auto;
}

/* =========================================================
4) NOSOTROS
========================================================= */
.info_nosotros{
display: flex;
flex-direction: row;
gap: 2rem;
}

@media (max-width: 768px){
.info_nosotros{ flex-direction: column; }
}

.nosotros_img img{
width: 350px;
height: auto;
}

.img-container-big{
width: 580px;
overflow: hidden;
border-radius: 0 0 20px 20px;
display: flex;
justify-content: center;
align-items: center;
}

@media (max-width: 768px){
.img-container-big{ width: auto; }
}

.img-container-big img{
transform: skew(0deg, -13deg);
height: 350px;
margin: -55px 0 0 -130px;
}

.img-container{
height: 230px;
width: 180px;
overflow: hidden;
border-radius: 0 0 20px 20px;
display: inline-block;
}

.img-container img{
transform: skew(0deg, -13deg);
height: 250px;
margin: -35px 0 0 -70px;
}

.inner-skew{
display: inline-block;
border-radius: 20px;
overflow: hidden;
padding: 0;
transform: skew(0deg, 13deg);
font-size: 0;
margin: 30px 0 0 0;
background: #c8c2c2;
height: 250px;
width: 200px;
}

.img_rotate:hover{
transition: transform 0.3s ease;
transform: rotate(5deg) scale(1.03);
}

/* =========================================================
5) SERVICIOS
========================================================= */
.section_services{
display: grid;
width: 100%;
grid-template-columns: repeat(5, 1fr);
justify-items: stretch;
gap: 1rem;
}

@media (max-width: 768px){
.section_services{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 569px){
.section_services{ grid-template-columns: 1fr; }
}

.service_card{
padding: 1.2rem 0.8rem 1.4rem 0.8rem;
border-radius: 1.1rem;
border: 1px solid rgba(0,0,0,0.04);
background: #ffffff;
transition: all 0.28s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.service_card:hover{
transform: translateY(-10px) scale(1.01);
box-shadow:
    0 12px 30px rgba(0,0,0,0.15),
    0 0 0 3px rgba(1,146,200,0.28);
border-color: rgba(1,146,200,0.35);
}

.service_img{
width: 8rem;
height: auto;
display: block;
margin: 0 auto;
object-fit: cover;
transition: transform 0.35s ease;
}

.service_card:hover .service_img{
transform: scale(1.12);
}

.service_card .card-body .card-title{
height: 3rem;
color: var(--sycec-blue);
}

/* Lista de servicios dentro de la card */
.service_list{
text-align: left;
margin: 0 auto;
max-width: 14rem;
}

.service_list li{
position: relative;
padding-left: 1.3rem;
margin-bottom: 0.25rem;
font-size: 0.9rem;
line-height: 1.4;
}

.service_list li::before{
content: "•";
position: absolute;
left: 0;
top: 0;
color: var(--sycec-green);
font-size: 1rem;
line-height: 1.4;
}

/* =========================================================
6) CONTACTO
========================================================= */
.contact-section{
background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.7),
    rgba(240,248,255,0.7)
);
backdrop-filter: blur(4px);
}

.contact-box{
border: 1px solid rgba(0,0,0,0.04);
transition: all 0.25s ease;
}

.contact-box:hover{
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.contact-map{
width: 100%;
height: 260px;
border-radius: 0.9rem;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.08);
}

/* Inputs genéricos */
.contact-input{
border-radius: 0.45rem;
border: 1px solid rgba(0,0,0,0.18);
transition: 0.25s;
}

.contact-input:focus{
border-color: var(--sycec-blue);
box-shadow: 0 0 0 3px rgba(1,146,200,0.25);
}

/* Ubicaciones (azul) */
.contact-box-ubicaciones{
background-color: var(--sycec-blue-dark) !important;
border: none;
color: var(--sycec-blue) !important;
}

.contact-box-ubicaciones h4,
.contact-box-ubicaciones p,
.contact-box-ubicaciones i{
color: #ffffff !important;
}

.contact-box-ubicaciones .contact-map{
border: 1px solid rgba(255,255,255,0.3) !important;
}

/* Formulario (verde) */
.contact-box-form{
background-color: var(--sycec-green) !important;
color: #ffffff !important;
border: none;
}

.contact-box-form *{
color: #ffffff !important;
}

.contact-box-form .contact-input{
background-color: rgba(255,255,255,0.15) !important;
border: 1px solid rgba(255,255,255,0.25) !important;
color: #ffffff !important;
}

.contact-box-form .contact-input::placeholder{
color: rgba(255,255,255,0.75) !important;
}

.contact-box-form .contact-input:focus{
background-color: rgba(255,255,255,0.22) !important;
border-color: #ffffff !important;
box-shadow: 0 0 0 3px rgba(255,255,255,0.25) !important;
}

/* Botones */
.btn-sycec{
background-color: var(--sycec-blue);
color: #ffffff;
border-radius: 0.9rem;
border: none;
transition: 0.25s;
}

.btn-sycec:hover{
background-color: var(--sycec-blue-dark);
box-shadow: 0 8px 25px rgba(1,146,200,0.4);
}

.btn-form-white{
background-color: #ffffff !important;
color: var(--sycec-green) !important;
font-weight: 700;
border-radius: 0.45rem;
transition: all 0.25s ease;
border: none;
}

.btn-form-white:hover{
background-color: #e7e7e7 !important;
color: #3a8c3a !important;
box-shadow: 0 8px 24px rgba(255,255,255,0.3);
}

/* =========================================================
7) FOOTER
========================================================= */
.contenedor_footer{
max-width: 120rem;
margin: 0 auto;
width: 90%;
}

.footer{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
justify-items: center;
align-items: start;
padding: 3rem 0;
gap: 2rem;
}

.directorio_footer{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}

.redes_footer{ width: 100%; }

.sociales{
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
}

@media (max-width: 768px){
.footer{
    grid-template-columns: 1fr;
    text-align: center;
}
.menu_footer{ grid-row: 2/3; }
.directorio_footer{ grid-row: 4/5; }
}

@media (max-width: 560px){
.directorio_footer{ grid-template-columns: 1fr; }
}

.directory{
display: flex;
flex-direction: row;
align-items: center;
line-height: 1.6;
margin-bottom: 0.75rem;
}

.directory i{
margin-right: 12px;
font-size: 1.4rem;
}

.directory a{ text-decoration: none; }

.directory_title{
font-size: 1.1rem;
font-weight: bold;
}

.directory_location{ line-height: 1.2; }

#experiencia{
    height: 85vh;
}

.timeline_swiper{
    margin-top: 15vh;
}