/* ================================================== */
/* VARIABLES Y CONFIGURACIÓN GLOBAL */
/* ================================================== */
:root {
--primary-color: #fab702;
--secondary-color: #323232;
--aux-color: #ad8313;
--text-color: #616161;
--dark-bg: #181818;
--light-bg: #fff;
--transition: all 0.3s ease;
}

/* ================================================== */
/* ANIMACIONES Y KEYFRAMES */
/* ================================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@-webkit-keyframes ball-scale-pulse {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

@keyframes ball-scale-pulse {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

/* ================================================== */
/* ESTILOS BASE Y UTILIDADES */
/* ================================================== */
.section-padding {
padding: 4rem 0;
}

/* Utilidades de texto */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Utilidades de espaciado */
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-1 { margin-top: 1rem; }

/* Utilidades de display */
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Animaciones aplicadas */
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}

/* ================================================== */
/* COMPONENTE: PRELOADER */
/* ================================================== */
.preloader {
position: fixed;
width: 100%;
height: 100%;
background: var(--light-bg);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

.preloader-spinner {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
}

.la-ball-scale-pulse,
.la-ball-scale-pulse > div {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.la-ball-scale-pulse {
display: block;
font-size: 0;
color: #fff;
}

.la-ball-scale-pulse > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}

.la-ball-scale-pulse {
width: 32px;
height: 32px;
}

.la-ball-scale-pulse > div {
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 32px;
border-radius: 100%;
opacity: 0.6;
-webkit-animation: ball-scale-pulse 2s infinite ease-in-out;
animation: ball-scale-pulse 2s infinite ease-in-out;
}

.la-ball-scale-pulse > div:last-child {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}

.la-ball-scale-pulse.la-sm {
width: 16px;
height: 16px;
}

.la-ball-scale-pulse.la-sm > div {
width: 16px;
height: 16px;
}

.la-ball-scale-pulse.la-2x {
width: 64px;
height: 64px;
}

.la-ball-scale-pulse.la-2x > div {
width: 64px;
height: 64px;
}

.la-ball-scale-pulse.la-3x {
width: 96px;
height: 96px;
}

.la-ball-scale-pulse.la-3x > div {
width: 96px;
height: 96px;
}

/* ================================================== */
/* COMPONENTE: HEADER */
/* ================================================== */
#header-top {
background-color: var(--dark-bg);
color: var(--light-bg);
padding: 10px 0;
}

#header-top a {
color: var(--light-bg);
transition: var(--transition);
}

#header-top a span {
color: var(--primary-color);
font-weight: 400;
}

#header-area {
z-index: 99;
}

#header-area .container {
position: relative;
}

#header-area.fixedTop {
background: #fff;
-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
width: 100%;
}

.logo-area {
padding: 1.35em 0;
-webkit-transition: var(--transition);
transition: var(--transition);
}

.logo-area img {
max-width: 312px;
height: auto;
}

/* ================================================== */
/* Navegación principal */
/* ================================================== */
.main-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}

.main-menu ul li {
margin: 0;
}

.main-menu ul li a {
color: var(--secondary-color);
text-decoration: none;
font-weight: 500;
font-family: ProximaNovaExtraBold;
letter-spacing: 0.18em;
font-size: 1.3em;
text-transform: uppercase;
padding: 2.75rem 1.125rem;
transition: var(--transition);
display: block;
}

.main-menu ul li.active a,
.main-menu ul li:hover a {
background-color: var(--primary-color);
color: var(--light-bg);
}

/* ================================================== */
/* Navegación móvil SlickNav */
/* ================================================== */
.slicknav_menu {
background-color: transparent;
position: absolute;
right: 0;
top: 0;
width: 100%;
text-align: center;
}

.slicknav_btn {
background-color: var(--primary-color);
margin: 0;
padding: 10px 13px;
position: absolute;
right: 15px;
top: 31px;
z-index: 9;
}

.slicknav_nav {
background-color: var(--aux-color);
left: 0;
position: absolute;
top: 96px;
width: 100%;
z-index: 9;
}

.slicknav_nav ul {
margin: 1rem;
}

.slicknav_nav ul li ul {
padding-left: 20px;
}

.slicknav_nav ul li .slicknav_row:hover {
background-color: transparent;
color: #222;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.slicknav_nav ul li:hover {
background-color: var(--secondary-color);
}

.slicknav_nav ul li:hover a {
background-color: transparent;
color: #fff;
}

.slicknav_arrow {
display: none;
}

/* ================================================== */
/* COMPONENTE: HERO/SLIDER */
/* ================================================== */
.hero-area {
background-color: #ddd;
background-image: url(assets/img/hero-area-bg.webp);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
}

.hero-area:after {
background-color: #484848;
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0.74;
z-index: -1;
}

.hero-text h2 {
color: #fff;
font-size: 3em;
}

.hero-text p {
color: var(--primary-color);
margin: 2em 0;
font-size: 1.2rem;
padding-bottom: 2rem;
}

.hero-text .btn {
padding: 12px 0 12px 21px;
width: 140px;
margin: 2rem 1rem;
}

.hero-text .btn:hover {
padding-left: 0;
}

/* ================================================== */
/* COMPONENTE: SECCIONES GENERALES */
/* ================================================== */
.section-title {
letter-spacing: 0.1rem;
}

.section-title-mid {
text-transform: uppercase;
}

.section-title h2 {
color: var(--primary-color);
font-size: 2.4rem;
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
position: relative;
text-transform: uppercase;
font-family: ProximaNovaBold;
}

.section-title h2 span {
color: var(--secondary-color);
}

.section-title h2::after {
background-color: var(--primary-color);
border-radius: 50px;
bottom: -5px;
content: "";
height: 0.2em;
left: 0.2em;
margin-left: -35px;
position: absolute;
width: 70px;
}

/* ================================================== */
/* COMPONENTE: SECCIÓN NOSOTROS */
/* ================================================== */
#nosotros {
margin-top: -153px;
position: relative;
z-index: 1;
background: var(--primary-color);
color: #000;
}

#nosotros p {
padding: 2.2em;
font-size: .8em;
}

#nosotros ul{
padding: 2.5em;
font-size: .9em;
}

.about-video-area {
background-image: url("assets/img/about-video.webp");
background-position: center right;
background-repeat: no-repeat;
background-size: cover;
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
height: 100%;
position: relative;
z-index: 1;
}

.about-video-area:after {
background-color: #222;
content: "";
left: 0;
height: 100%;
top: 0;
opacity: 0.6;
position: absolute;
width: 100%;
z-index: -1;
}

/* ================================================== */
/* COMPONENTE: SECCIÓN RESEÑAS */
/* ================================================== */
#review-area {
/*display: none;*/
background: var(--primary-color);
color: #000;
padding: 2em;
}

/* ================================================== */
/* COMPONENTE: SECCIÓN SOPORTE */
/* ================================================== */
#support-area {
padding: 0;
}

/* ================================================== */
/* COMPONENTE: SERVICIOS */
/* ================================================== */
#servicios .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
}

.single-service {
padding: 2.5rem 1.25rem;
margin-bottom: 0.625rem;
transition: var(--transition);
border-radius: 5px;
}

.single-service:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
cursor: pointer;
}

.single-service h3 {
color: var(--dark-bg);
font-size: 1.4375rem;
letter-spacing: 0.05em;
margin-bottom: 1.5rem;
padding-left: 4.5rem;
position: relative;
height: 3em;
line-height: 1em;
}

.service-icon {
position: absolute;
left: 0;
bottom: 1em;
color: var(--primary-color);
}

.service-icon.icon-excavador:before,
.service-icon.icon-camion:before,
.service-icon.icon-obrero:before,
.service-icon.icon-demolicion:before,
.service-icon.icon-rodillo:before,
.service-icon.icon-chaleco:before {
font-size: 2.4em;
}

.service-list li {
margin-bottom: .8em;
}

/* ================================================== */
/* COMPONENTE: BOTONES */
/* ================================================== */
.btn {
background-color: var(--primary-color);
border-radius: 3px;
color: var(--light-bg);
display: inline-block;
font-size: 1.1em;
font-weight: 700;
letter-spacing: 0.8px;
padding: 15px 40px;
text-transform: uppercase;
transition: var(--transition);
text-decoration: none;
border: none;
cursor: pointer;
}

.btn:hover {
background-color: var(--aux-color);
color: var(--light-bg);
transform: translateY(-2px);
}

.btn i.fa {
transition: var(--transition);
margin-left: 0;
opacity: 0;
visibility: hidden;
}

.btn:hover i.fa {
opacity: 1;
visibility: visible;
margin-left: 10px;
}

/* ================================================== */
/* COMPONENTE: FOOTER */
/* ================================================== */
#footer-area {
background-color: var(--dark-bg);
color: var(--light-bg);
padding: 2.5rem 0 1.875rem;
}

.widget-body a {
color: #ebebeb;
transition: var(--transition);
text-decoration: none;
}

.widget-body a:hover {
color: var(--primary-color);
}

/*== Scroll Top CSS ==*/

.footer-copyright div#scroll-top {
    background-color: var(--dark-bg);
    border: 1px solid var(--primary-color);
    border-radius: 3px;
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 600;
    padding: .5em 1.5em;
    text-transform: uppercase;
    position: relative;
    margin-top: 1em;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.footer-copyright div#scroll-top:hover {
    background-color: var(--primary-color);
    color: var(--dark-bg);
}

/*== Scroll Top CSS ==*/

.palabras-clave, .service-keywords {
display: none; /* Ocultar visualmente pero accesible para SEO */
}