/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* ===== GENERAL ===== */

body{
background: #0f0f0f;
margin: 0;
font-family: Arial, sans-serif;
padding-top:70px;
}

html{
scroll-behavior:smooth;
}


/*h1{
font-size:clamp(28px,5vw,48px);
}
*/

.hero h1{
font-size:clamp(26px,6vw,60px);
font-weight:700;
}

.hero p{
font-size:clamp(14px,2vw,20px);
opacity:0.9;
}

section{
padding:80px 0;
margin: 0;
display: block;
}

/* ===== NAVBAR ===== */

.navbar{
background:#111;
border-bottom: 7px solid #222;
padding: 10px 0;
}

.navbar-brand img{
height:40px;
}

/* ===== MENU MOVIL ===== */

@media (max-width: 991px){

.navbar-collapse{
background:#111;
padding:20px;
border-radius:10px;
margin-top:10px;
}

.navbar-nav .nav-link{
padding:10px 0;
font-size:18px;
}

.navbar-nav .btn{
margin-top:25px;
width:fit-content;
}

}
.navbar-toggler{
border:2px solid #d4af37;
}

/*boton contacto menú*/


/* ===== HERO ===== */
.hero{

position: relative;
min-height:100vh;

background:
linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.2)),
url("../Img/hero-oficial.jpeg");


background-size:cover;
background-position:right center;
background-repeat:no-repeat;

display:flex;
align-items:center;

padding: 160px 0;

}





/* ===== SECCIONES ===== */

.section-dark{

background:linear-gradient(rgba(15,15,15,0.92),rgba(15,15,15,0.92)),
url("../Img/metal.jpeg");
background-size:cover;
background-position:center;
background-attachment:fixed;

color:white;
padding:80px 0;
margin-top:0px;

}


.section-dark h2{
margin-bottom:60px;
font-weight:600;
}

.linea{
width:80px;
height:3px;
background:#d4af37;
margin:0 auto 60px auto;
border-radius:3px;
}

.section-light{

padding:120px 0;
background:linear-gradient(rgba(20,20,20,0.95),rgba(20,20,20,0.95)),
url("../Img/concrete.jpeg");

background-size:cover;
background-position:center;
background-attachment:fixed;
color: white;
}




/* ===== MISION VISION VALORES ===== */

.info-card{
background:#1e1e1e;
padding: 40px;
border-radius: 12px;
border: 1px solid rgb(255,255,255,0.05);
box-shadow:0 15px 35px rgba(0,0,0,0.6);
transition:0.4s;
height:100%;
border-top: 4px solid #d4af37;
position: relative;
overflow: hidden;

/* nuevo*/
position: relative;
overflow: hidden;
}



.info-card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow: 0 25px 60px rgba(0,0,0,0.8);
border-top: 4px solid #d4af37;

}
.info-card:hover h4{
  color: #d4af37;
}



.project-card{
transition:all .4s ease;
}

.project-card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 25px 60px rgba(0,0,0,0.35);
}

.icon-gold{
font-size:40px;
margin-bottom:15px;
color:#d4af37;
}

.info-card h4{
font-weight:600;
margin-bottom:15px;
transition: 0.3s;
}

.valores-lista{
list-style:none;
padding:0;
margin:0;
}

.valores-lista li{
margin:6px 0;
}
.descripcion-empresa{
     max-width: 800px;
    margin: 0 auto;
    color: #dcdcdc;
    font-size: 18px;
    line-height: 1.7;
}
/* ===== CARDS ===== */

.card{
transition:transform .3s;
height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
border-radius:12px;
overflow:hidden;
}

.card:hover{
transform:translateY(-6px);
}

.card img{
width:100%;
height:240px !important;
object-fit:cover;
display:block;
}

.card h5{
  font-weight:600;
}

.card p{
  color:#bbb;
  font-size:15px;
}

/* CONTENEDOR LIGHTBOX */

.glightbox-container .gslide-media{
width:90vw;
max-width:900px;
height:50vh;
max-height:400px;
margin:auto;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
}

/* IMAGEN */

.glightbox-container .gslide-media img{
width:100%;
height:100%;
object-fit:contain;
}

.card-body{
flex-grow:1;
display:flex;
flex-direction:column;
justify-content:center;
padding:20px;
}

.card-body h5{
min-height:60px;
}

/* ===== GALERIA / PROYECTOS ===== */

/* ========================= */
/* GALERÍA PROYECTOS */
/* ========================= */

.project{
padding:60px 0;
background:#111;
}

/* tarjetas */

.project-card{
background:#1a1a1a;
border:none;
border-radius:12px;
overflow:hidden;
transition:0.3s;
}

.project-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,0.6);
}

/* imágenes */

.project-card img{
width:100%;
height:220px;
object-fit:cover;
transition:0.4s;
}

/* zoom suave */

.project-card:hover img{
transform:scale(1.05);
}

/* texto */

.project-card-body{
padding:18px;
}

.project-card-text{
color:#ddd;
font-size:15px;
line-height:1.5;
}

.btn-ver-proyectos{
display:inline-block;
padding:14px 36px;
font-size:16px;
font-weight:600;
color:#111;
background:#d4af37;
border-radius:8px;
text-decoration:none;
transition:0.3s;
}

.btn-ver-proyectos:hover{
transform:translateY(-4px);
box-shadow:0 12px 25px rgba(0,0,0,0.4);
background:#c7a22f;
}

.proyectos-page .card{
background: transparent;
border-radius: 15px;
overflow: hidden;
box-shadow: none;
}

.proyectos-page .card img{
height: 260px;
object-fit: cover;
transition: 0.4s;
}

/* efecto zoom */
.proyectos-page .card:hover img{
transform: scale(1.1);
}

/* ocultamos el fondo blanco */
.proyectos-page .card-body{
transform: translate(20px);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: linear-gradient(
transparent,
rgba(0,0,0,0.8)
);
color: white;

/* 🔥 OCULTO AL INICIO */
opacity: 0;
transition: 0.4s;
}

.proyectos-page .card:hover .card-body{
opacity: 1;
transform: translate(0);
}

/* importante */
.proyectos-page .card{
position: relative;
cursor: pointer;
}

/* ========================= */
/* LIGHTBOX MEJORADO */
/* ========================= */

.lb-image{
max-height:80vh;
width:auto;
border-radius:6px;
}

/* texto del lightbox */

.lb-data .lb-caption{
font-size:16px;
text-align:center;
color:#eee;
}

/* fondo del lightbox */

.lb-outerContainer{
background:#111;
}

/* PROYECTOS SLIDER */

.project-card{

position:relative;
border-radius:15px;
overflow:hidden;

}

.project-card img{

width:100%;
height:260px;
object-fit:cover;
display:block;

}

.project-overlay{

position:absolute;
bottom:0;
left:0;

width:100%;

padding:20px;

background:linear-gradient(
transparent,
rgba(0,0,0,0.8)
);

color:white;
text-align:center;

}

/* swiper */

.swiper{
padding-bottom:50px;
}

.swiper-button-next,
.swiper-button-prev{

color:white;

}

.swiper-pagination-bullet{

background:white;

}


/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width:768px){

.proyectos{
padding:40px 10px;
}

.proyectos .card img{
height:200px;
}

.proyectos .card-text{
font-size:14px;
}

}

/* ============================= */
/* GALERÍA RESPONSIVE MEJORADA */
/* ============================= */

.proyectos .card img{
width:100%;
height:220px;
object-fit:cover;
}

/* tamaño normal de tarjetas */

.proyectos .card{
max-width:320px;
margin:auto;
}

/* ============================= */
/* AJUSTE PARA CELULAR */
/* ============================= */

@media (max-width:768px){

.proyectos .card{
max-width:320px;
margin:auto;
}

.proyectos .card img{
height:180px;
}

.proyectos .card-text{
font-size:14px;
}

}

/* ============================= */
/* LIGHTBOX AJUSTADO */
/* ============================= */

.lb-image{
max-width:90vw;
max-height:70vh;
width:auto;
margin:auto;
}

/* ===== FORMULARIO ===== */

.contacto{
padding:80px 20px;
background:#121212;
text-align:center;
}

.contacto h2{
color:#d4af37;
margin-bottom:30px;
}

#formulario{
max-width:500px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}

#formulario input,
#formulario textarea{
padding:12px;
border:1px solid #333;
border-radius:6px;
background:#1e1e1e;
color:white;
transition:0.3s;
}

#formulario textarea{
min-height:120px;
}

#formulario input:focus,
#formulario textarea:focus{
border-color:#d4af37;
box-shadow:0 0 8px rgba(212,175,55,0.4);
outline:none;
}

#formulario button{
background:#d4af37;
border:none;
padding:12px;
font-weight:bold;
border-radius:6px;
cursor:pointer;
transition:.3s;
}

#formulario button:hover{
background:#c59d2f;
}

.estado{
margin-top:15px;
font-weight:bold;
text-align:center;
font-size:16px;
}

#botonEnviar{
transition:0.3s;
}

#botonEnviar:hover{
transform:scale(1.05);
}

/* ===== FORM CONTROL ===== */

form{
max-width:600px;
margin:auto;
}

.form-control{
border-radius:8px;
border:1px solid #ddd;
padding:12px;
}

.form-control:focus{
border-color:#d4af37;
box-shadow:none;
}

/* ===== BOTON WHATSAPP ===== */

.whatsapp{

position:fixed !important;

bottom:25px !important;
right:25px !important;

width:65px;
height:65px;

background:#25D366;
color:white;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:32px;

box-shadow:0 10px 20px rgba(0,0,0,0.35);

z-index:99999;

transition:0.3s;

animation:float 3s ease-in-out infinite;

}

/* efecto hover */

.whatsapp:hover{
transform:scale(1.1);
}

/* animación */

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-6px);}
100%{transform:translateY(0);}
}

/* celular */

@media (max-width:768px){

.whatsapp{

bottom:20px !important;
right:20px !important;

width:55px;
height:55px;

font-size:26px;

}

}

/* ===== FOOTER ===== */

footer{
background:#0f0f0f;
color:#ccc;
padding:40px 0 20px 0;
}

footer p{
font-size:14px;
line-height:1.6;
}

footer h5{
color:#d4af37;
}

footer ul li{
margin-bottom:8px;
}

footer a{
text-decoration:none;
transition:0.3s;
}

footer a:hover{
color:#d4af37;
}

footer img{
max-width:100%;
}

footer hr{
border: none;
height: 1px;
background: #222;
margin: 30px 0;

}

/* redes sociales */

footer .col-md-6 a{
font-weight:500;
}

/* botón whatsapp del footer */

footer .btn-success{
background:#25D366;
border:none;
}

footer .btn-success:hover{
background:#1ebe5d;
}

/* copyright */

footer .mb-0{
font-size:13px;
color:#aaa;
}

section{
margin:0;
}

/* ===== RESPONSIVE MOVIL ===== */

@media (max-width:768px){

.hero{
padding:120px 20px;
text-align:center;
/* importante*/

background-position: 60% 20%;
  
}
}



/*.hero h1{
font-size:32px;
}
*/

.hero p{
font-size:16px;
}

.info-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.1),
transparent
);
transition:0.6s;
}

.info-card:hover::before{
left:100%;
}


.titulo-quienes{
  margin-bottom: 20px;
  display:inline-block;
  position:relative;
  font-weight:600;
  transition: all 0.3s ease;
}

/* efecto hover principal */
.titulo-quienes:hover{
  color:#d4af37;
  text-shadow: 0 0 8px rgba(212,175,55,0.6);
  transform: translateY(-2px);
}

/* línea animada */
.titulo-quienes::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:0%;
  height:2px;
  background:#d4af37;
  transition:0.3s;
  transform:translateX(-50%);
}

.titulo-quienes:hover::after{
  width:60%;
}

/* base para ambos */


/* BOTÓN SECUNDARIO */
.btn-proyectos{
  background:transparent;
  border:2px solid #d4af37;
  color:#d4af37;
}

.btn-proyectos:hover{
  background:#d4af37;
  color:#000;
  box-shadow:0 0 15px rgba(212,175,55,0.7);
  transform: translateY(-3px);
}

.btn-contacto::before,
.btn-proyectos::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );
  transition:0.5s;
}

.btn-contacto:hover::before,
.btn-proyectos:hover::before{
  left:100%;
}

.animacion-hero{
  animation: flotar 3s ease-in-out infinite;
}

@keyframes flotar{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0px); }
}

.btn-glow{
  --gold: #d4af37;

  display: inline-block;
  padding: 12px 28px;
  color: #fff ; /* TEXTO BLANCO */
  font-size: 16px;
  font-weight: 600;
  background: rgba(0,0,0,0.6);
  border: 2px solid var(--gold);
  border-radius: 10px;
  text-decoration: none;

  box-shadow: 0 0 10px var(--gold);
  transition: all 0.3s ease;
}

.hero a.btn-glow{
  color: #fff;
}

/* HOVER DORADO */
.btn-glow:hover{
  background: var(--gold); /* fondo dorado */
  color: #fff; /* texto sigue blanco */
  box-shadow: 
    0 0 20px var(--gold),
    0 0 40px var(--gold);
  transform: translateY(-3px);
}