:root { --ercon-blue: #014b94; --ercon-yellow: #ffcc00; }
/* html { scroll-behavior: smooth; } */
body { font-family: 'Montserrat', sans-serif; overflow-x: hidden; }

.nav-header { height: 115px; background-color: var(--ercon-blue); }

.nav-item {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 22px;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.2px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item i { font-size: 1.6rem; margin-bottom: 6px; transition: transform 0.3s ease; }
.nav-item:hover { background-color: white; color: var(--ercon-blue); }
.nav-item:hover i { transform: translateY(-5px); }

.mobile-nav-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	color: white;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-nav-item i { font-size: 1.2rem; width: 25px; text-align: center; }

.phrase-center {
	font-weight: 300;
	color: rgba(255,255,255,0.85);
	font-size: 15px;
	font-style: italic;
	text-align: center;
	max-width: 400px;
	pointer-events: none;
}

.btn-access {
	background-color: var(--ercon-yellow);
	color: #000;
	padding: 10px 22px;
	border-radius: 50px;
	font-weight: 800;
	font-size: 10px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0,0,0,0.3);
	margin-left: 10px;
}
.btn-access:hover { transform: translateY(-3px); background-color: white; color: var(--ercon-blue); }

.slideshow-container { 
	position: relative; height: 85vh; overflow: hidden; margin-top: 115px; 
}
.slide { display: none; height: 100%; position: relative; }
.slide.active { display: block; animation: fadeEffect 0.8s ease-in; }

.hero-title {
	font-weight: 800;
	text-shadow: 3px 3px 18px rgba(0, 0, 0, 0.9);
	line-height: 1.1;
}

.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 20px;
	color: white !important;
	font-size: 40px;
	z-index: 40;
	text-shadow: 0px 4px 12px rgba(0,0,0,0.6);
	/* 1. AGREGA ESTO: Suaviza el movimiento */
	transition: transform 0.3s ease, color 0.3s ease;
}

.prev:hover, .next:hover {
	transform: translateY(-65%); /* Sube la flecha un poco */
	color: #ffffff !important; /* Opcional: cambia a amarillo */
}

.next { right: 40px; }
.prev { left: 40px; }

.service-card {
	background: rgba(255, 255, 255, 0.03); 
	padding: 35px 25px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: 0.4s;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: 6px solid var(--ercon-yellow) !important;
}
.service-card:hover {
	transform: translateY(-8px);
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--ercon-yellow);
}
.service-card i { font-size: 2.2rem; color: #ffffff; margin-bottom: 20px; }
.service-card h4 { color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; }
.service-card p { color: rgba(255, 255, 255, 0.6); font-size: 11.5px; line-height: 1.6; margin-top: 10px; }

.service-card-featured {
	background: rgba(255, 255, 255, 0.08) !important;
	padding: 50px 35px !important;
	min-height: 280px;
	justify-content: center;
}

.service-card-featured i {
	font-size: 3.5rem !important; /* Icono m�s grande */
	color: var(--ercon-yellow) !important; /* Amarillo Ercon */
}

.service-card-featured h4 {
	font-size: 16px !important; /* T�tulo resaltado */
	margin-bottom: 12px;
}

.service-card-featured p {
	font-size: 13.5px !important;
	color: white !important;
}

@keyframes fadeEffect { from { opacity: 0.4; } to { opacity: 1; } }

#nosotros .container {
	position: relative;
	z-index: 1;
}

#servicios {
	position: relative;
	overflow: hidden;
}
.bg-watermark-nosotros-1 {
	position: absolute;
	left: -6%; /* Ubicado al lado izquierdo, detr�s del t�tulo */
	top: -14%;
	font-size: 45rem; /* Tama�o gigante */
	color: rgba(255, 204, 0, 0.25); /* Color #ffcc00 con 7% de opacidad */
	transform: rotate(5deg);
	pointer-events: none;
	z-index: 0;
}
.bg-watermark-nosotros-2 {
	position: absolute;
	left: 0%; /* Ubicado al lado izquierdo, detr�s del t�tulo */
	top: -13%;
	font-size: 45rem; /* Tama�o gigante */
	color: rgba(255, 204, 0, 1); /* Color #ffcc00 con 7% de opacidad */
	transform: rotate(5deg);
	pointer-events: none;
	z-index: 0;
}
@keyframes serviceFloat {
	0% { transform: translateY(0) rotate(0deg); }
	33% { transform: translateY(-8px) rotate(0.5deg); }
	66% { transform: translateY(-4px) rotate(-0.5deg); }
	100% { transform: translateY(0) rotate(0deg); }
}
.service-card-featured {
	position: relative;
	overflow: hidden; /* Necesario para el destello */
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
	animation: serviceFloat 7s ease-in-out infinite;

	/* Cambiamos el padding a algo mucho m�s peque�o para que la imagen se vea grande */
	padding: 8px !important; 
	border-radius: 12px; /* Ajusta la curvatura */
	border: 1px solid rgba(255, 255, 255, 0.2); /* Borde mucho m�s fino */
}

.service-card-featured:nth-child(2) { animation-delay: 1s; animation-duration: 8s; }
.service-card-featured:nth-child(3) { animation-delay: 2.5s; animation-duration: 6s; }
.service-card-featured:nth-child(4) { animation-delay: 0.5s; animation-duration: 9s; }

.service-card-featured::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -150%;
	width: 150%;
	height: 200%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(255, 255, 255, 0.03) 30%,
		rgba(255, 255, 255, 0.08) 50%,
		transparent 70%
	);
	transform: rotate(25deg);
	transition: none;
}
.service-card-featured:hover::before {
	left: 150%;
	transition: all 0.8s ease-in-out;
}
.service-card-featured:hover {
	animation-play-state: paused; /* Se detiene para facilitar la lectura */
	transform: scale(1.03) translateY(-15px) !important;
	border-color: var(--ercon-yellow) !important;
	box-shadow: 0 20px 40px rgba(255,204,0,.25) !important;
	z-index: 10;
}
.nosotros-image:hover{
	transform:none !important;
	box-shadow:none !important;
	border-color:rgba(255,255,255,.2) !important;
}

.nosotros-image:hover::before{
	display:none;
}

#brochure{
position: relative;
background: var(--ercon-blue);
}

#brochure::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:120px;

background: linear-gradient(
to bottom,
rgba(0,0,0,.45) 0%,
rgba(0,0,0,.20) 40%,
transparent 100%
);

z-index:1;
pointer-events:none;
}
.brochure-card{
height:180px;

background:rgba(255,255,255,.05);

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

border-radius:20px;

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

gap:15px;

text-decoration:none;

transition:.3s ease;

animation: floatBrochure 4s ease-in-out infinite;
}

.brochure-card i{
font-size:55px;
color:var(--ercon-yellow);
}

.brochure-card span{
color:white;
font-weight:700;
text-align:center;
}

.brochure-card:hover{
transform:translateY(-8px);

background:rgba(255,255,255,.10);

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

@keyframes floatBrochure {
0%,100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}

/* proyectos */
.proyectos-section{
padding:120px 0;
background:#f8fafc;
overflow:hidden;
}

.proyectos-header{
text-align:center;
margin-bottom:60px;
}

.proyectos-header h2{
font-size:3rem;
font-weight:900;
color:#002244;
font-style:italic;
}

.linea-proyectos{
width:90px;
height:4px;
background:#ffcc00;
margin:20px auto;
}

.proyectos-header p{
max-width:700px;
margin:auto;
color:#64748b;
}

.proyectos-wrapper{
display:flex;
align-items:center;
gap:25px;
}

.proyectos-track-container{
overflow:hidden;
flex:1;
}

.proyectos-track{
display:flex;
gap:24px;
transition:transform .6s ease;
}

.proyecto-card{
width: calc((100% - 72px) / 4);
min-width: calc((100% - 72px) / 4);

height:420px;

border-radius:10px;
overflow:hidden;
position:relative;

cursor:pointer;
flex-shrink:0;
box-sizing:border-box;

box-shadow:0 12px 30px rgba(0,0,0,.08);
transition:.4s ease;
}

.proyecto-card img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:.6s;
}

.proyecto-card:hover img{
transform:translateY(-8px);

box-shadow:
0 20px 50px rgba(0,0,0,.18);
}

.proyecto-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,31,63,.92) 0%,
rgba(0,31,63,.55) 45%,
rgba(0,31,63,.15) 100%
);
padding:30px;
display:flex;
flex-direction:column;
justify-content:flex-end;
}

.proyecto-overlay span{
color:#ffcc00;
font-size:.8rem;
font-weight:700;
letter-spacing:2px;
}

.proyecto-overlay h3{
color:white;
font-size:1.5rem;
font-weight:800;
margin-top:10px;
}

.proyecto-overlay p{
color:#dbeafe;
margin-top:8px;
}

.proyectos-nav{
width:60px;
height:60px;
border:none;
border-radius:50%;
background:#f7c600;
color:black;
cursor:pointer;
font-size:20px;
transition:.3s;
}

.proyectos-nav:hover{
background:#ffffff;
color:#000000;
}

.proyectos-counter{
text-align:center;
margin-top:40px;
font-weight:700;
color:#002244;
}

@media(max-width:1200px){

.proyecto-card{
min-width:calc(50% - 12px);
}

}

@media(max-width:768px){

.proyecto-card{
min-width:100%;
}

}
/* fin proyectos */

/* marcas */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 100px;
    display: flex;
    align-items: center; /* Centrado vertical */
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    /* Camina, se detiene, camina */
    animation: walk-and-stop 12s ease-in-out infinite;
    gap: 80px;
}

@keyframes walk-and-stop {
    0% { transform: translateX(0); }
    20% { transform: translateX(-20%); } /* Camina */
    40% { transform: translateX(-20%); } /* Pausa */
    60% { transform: translateX(-40%); } /* Camina */
    80% { transform: translateX(-40%); } /* Pausa */
    100% { transform: translateX(0); }   /* Reinicia */
}

.logo-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-item img {
	max-height: 70px;
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: none; /* Colores originales */
}
/* fin marcas */
/* contacto */
.contacto-section{
    padding:120px 0;
    background:#0b6cb8;
    position:relative;
}

.contacto-grid{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:80px;
    align-items:center;
}

.contacto-info{
    margin-top:-60px;
}

.contacto-info h2{
    color:white;
    font-size:3rem;
    font-weight:900;
    font-style:italic;
    margin-bottom:20px;
}

.contacto-icon{
    font-size:55px;
    color:#ffffff;
    margin-bottom:25px;
}

.contacto-line{
    width:90px;
    height:4px;
    background:#ffffff;
    margin-bottom:30px;
}

.contacto-info p{
    color:rgba(255,255,255,.85);
    line-height:1.8;
    margin-bottom:40px;
}

.contacto-datos{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contacto-datos div{
    display:flex;
    align-items:center;
    gap:15px;
    color:white;
    font-weight:600;
}

.contacto-datos i{
    color:var(--ercon-yellow);
    width:25px;
}

.contacto-formulario form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contacto-formulario input,
.contacto-formulario textarea{
    width:100%;
    padding:18px 20px;
    border:none;
    border-radius:8px;
    background:rgba(255,255,255,.95);
    color:#002244;
}

.contacto-formulario textarea{
    min-height:180px;
    resize:none;
}

.contacto-formulario input:focus,
.contacto-formulario textarea:focus{
    outline:none;
    border:2px solid #4db8ff;
    box-shadow:0 0 12px rgba(77,184,255,.35);
}

.contacto-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.contacto-formulario button{
    width:max-content;
    background:var(--ercon-yellow);
    color:#002244;
    border:none;
    padding:16px 35px;
    border-radius:50px;
    font-weight:800;
    cursor:pointer;
    transition:.3s;
}

.contacto-formulario button:hover{
    transform:translateY(-3px);
    background:white;
    color:var(--ercon-blue);
    box-shadow:0 12px 30px rgba(0,0,0,.25);
}

@media(max-width:992px){
    .contacto-grid{
        grid-template-columns:1fr;
        gap:50px;
    }
    .contacto-row{
        grid-template-columns:1fr;
    }
}
/* fin contacto */

/* clientes */
/* ==========================================================================
   CARRUSEL DOBLE FILA CON MOVIMIENTO INFINITO (SOLUCI�N DEFINITIVA)
   ========================================================================== */
.ercon-dual-slider {
    width: 100% !important;
    overflow: hidden !important; /* Capa estricta para evitar desbordes */
    position: relative !important;
    display: block !important;
    padding: 10px 0 !important;
}

/* Forzar fila �nica por cada contenedor de carrusel */
.ercon-dual-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
}

/* El bloque interno de 5 logos */
.ercon-dual-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 80px !important; /* Espacio generoso entre logotipos */
    padding-right: 80px !important; /* Margen de acople exacto */
}

/* Cajas contenedoras estables */
.ercon-logo-box {
    width: 180px !important;
    height: 90px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.ercon-logo-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Pausar el movimiento si pones el mouse encima */
.ercon-dual-slider:hover .ercon-dual-track {
    animation-play-state: paused !important;
}

/* ANIMACIONES INDEPENDIENTES */

/* Fila Superior va hacia la izquierda */
.animate-ercon-run-left {
    animation: ercon-slide-left 20s linear infinite !important;
}

/* Fila Inferior va hacia la derecha */
.animate-ercon-run-right {
    animation: ercon-slide-right 20s linear infinite !important;
}

@keyframes ercon-slide-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes ercon-slide-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
/* fin clientes */