*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
color:#1e2a38;
}

html {
  scroll-behavior: smooth;
}
.container{
width:90%;
max-width:1200px;
margin:auto;
}

.logo img {
  height: 70px;
  width: auto;
  display: block;
}
.navbar{
position:fixed;
top:0;
width:100%;
padding:18px 0;
transition:all 0.3s;
z-index:1000;
max-height: 100px;
}

.navbar.scrolled{
background:#0c1a30;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.navbar.scrolled a{
color:#ffffff;
}

.navbar.scrolled .logo{
color:#1c2b4a;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding-bottom: 100px;
color:white;
}

nav a{
margin-left:25px;
color:white;
text-decoration:none;
font-weight:500;
}


.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* menú normal */
.nav-links {
  display: flex;
  gap: 25px;
}

/* hamburguesa */
.menu-toggle {
  display: none;
  font-size: 26px;
  color: white;
  cursor: pointer;
}

/* 📱 MOBILE */
@media (max-width: 768px){

  .menu-toggle {
    display: block;
  }

   .nav-links{
    position:absolute;
    top:70px;
    right:0;
    width:100%;
    background:#0c1a30;

    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:20px 0;

    display:none;

    transform: translateY(-20px);
    opacity: 0;
    transition: 0.3s;
  }

  .nav-links.active{
    display:flex;
    transform: translateY(0);
    opacity: 1;
  }
}

.hero{
height:90vh;
background-image:url("assets/hero-mineria.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
position:relative;
color:white;
text-align:center;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(10,20,40,0.65);
top:0;
left:0;
}

.hero-content{
position:relative;
max-width:800px;
z-index:2;
}


.hero p{
font-size:20px;
margin-bottom:30px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
}
.btn{
display:inline-block;
padding:14px 34px;
border-radius:50px;
font-weight:600;
text-decoration:none;
cursor:pointer;
font-size:15px;
transition:all 0.3s ease;
margin:10px;
}


/* BOTON CONTACTANOS (DORADO) */

.btn-gold{
background:linear-gradient(135deg,#d4af37,#caa85c,#e6c76b);
color:#1c2b4a;
border:none;
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

.btn-gold:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,0.3);
background:linear-gradient(135deg,#e6c76b,#d4af37,#b9963a);
}


/* BOTON VER SERVICIOS (TRANSPARENTE) */

.btn-outline{
background:transparent;
border:2px solid white;
color:white;
}

.btn-outline:hover{
background:white;
color:#1c2b4a;
}
.about{
padding:100px 0;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.about img{
width:100%;
border-radius:10px;
}

.socio {
  padding: 100px 0;
}

.socio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.socio img {
  width: 100%;
  border-radius: 10px;
}

.btn-socio {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color:#0f172a;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.services{
padding:90px 20px;
background:#0f172a;
text-align:center;
color:white;
}

.services h2{
font-size:34px;
margin-bottom:60px;
letter-spacing:1px;
}
.services h2::after{
content:"";
width:120px;
height:3px;
background:#caa85c;
display:block;
margin:15px auto 0 auto;
}

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:35px;
max-width:1200px;
margin:auto;
}

.service-card{
background:white;
color:#333;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
cursor:pointer;
transition:all 0.35s ease;
}

.service-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(0,0,0,0.25);
}

.service-card img{
width:100%;
height:200px;
object-fit:cover;
}

.service-card h3{
font-size:20px;
margin:20px 0 10px 0;
color:#bfa14a;
}

.service-card p{
padding:0 20px 25px 20px;
font-size:15px;
line-height:1.6;
color:#555;
}
.vision-mision{
padding:100px 20px;
background:#f5f7fb;
text-align:center;
}

.titulo-cultura{
font-size:36px;
color:#1c2b4a;
margin-bottom:60px;
}

.grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
max-width:1100px;
margin:auto;
}

.card-cultura{
background:white;
border-radius:16px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
transition:0.3s;
}

.card-cultura:hover{
transform:translateY(-8px);
box-shadow:0 25px 50px rgba(0,0,0,0.15);
}

.icono-box{
height:120px;
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
color:#1e3558;
}

/* colores */

.vision .icono-box{
background:#d8d3f0;
}

.mision .icono-box{
background:#bfe4e3;
}

.text{
padding:35px;
}

.text h3{
font-size:24px;
margin-bottom:15px;
color:#1e3558;
}

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

/* responsive */

@media(max-width:900px){

.grid{
grid-template-columns:1fr;
}

}

/* VALORES */


.values{
padding:90px 20px;
background:#f5f7fb;
text-align:center;
}

.values h2{
font-size:34px;
color:#1c2b4a;
margin-bottom:60px;
position:relative;
}

.values h2::after{
content:"";
width:120px;
height:3px;
background:#caa85c;
display:block;
margin:15px auto 0 auto;
}

.values-container{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:25px;
max-width:1100px;
margin:auto;
}

.value-item{
background:white;
padding:20px 15px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:all 0.35s ease;
}

.value-item:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,0.15);
}

.value-icon{
width:70px;
height:70px;
background:#1e3558;
color:#d4af37;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:26px;
margin:auto;
margin-bottom:18px;
}

.value-item h4{
font-size:18px;
margin-bottom:10px;
color:#1e3558;
}

.value-item p{
font-size:14px;
color:#666;
line-height:1.5;
}
.contact{
background:#0f2745;
color:white;
padding:100px 0;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

form{
display:flex;
flex-direction:column;
gap:15px;
}

input, textarea{
padding:12px;
border-radius:6px;
border:none;
}

button{
background:#d4a24c;
padding:14px;
border:none;
color:white;
border-radius:6px;
}

.whatsapp-btn{
position:fixed;
bottom:25px;
right:25px;
width:60px;
height:60px;
background:#25D366;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
box-shadow:0 10px 25px rgba(0,0,0,0.3);
z-index:999;
transition:0.3s;

text-decoration:none; /* quita la línea */
line-height:0; /* elimina espacio del icono */
}

.whatsapp-btn i{
line-height:1;
}

.whatsapp-btn:hover{
transform:scale(1.1);
}

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.75);
justify-content:center;
align-items:center;
z-index:1000;
}

.modal-content{
background:white;
padding:40px;
border-radius:10px;
max-width:650px;
width:90%;
box-shadow:0 20px 60px rgba(0,0,0,0.4);
animation:modalFade 0.3s ease;
}

.modal-content h2{
margin-bottom:15px;
color:#bfa14a;
}

.modal-content p{
line-height:1.7;
color:#444;
}

.close{
font-size:28px;
font-weight:bold;
float:right;
cursor:pointer;
}

@keyframes modalFade{
from{
transform:translateY(-40px);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}

.close{
font-size:28px;
cursor:pointer;
float:right;
}
.footer{
background:#0c1a30;
color:white;
padding:60px 20px 20px 20px;
}

.footer-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;
max-width:1200px;
margin:auto;
}

.footer-col h3,
.footer-col h4{
color:#d4af37;
margin-bottom:15px;
}

.footer-col p,
.footer-col li{
font-size:14px;
color:#ccc;
margin-bottom:8px;
}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-bottom{
text-align:center;
margin-top:40px;
border-top:1px solid rgba(255,255,255,0.1);
padding-top:20px;
font-size:13px;
color:#aaa;
}

.galeria-minera{
  padding:100px 20px;
  background:#f5f7fb;
  text-align:center;
}

/* variables */
:root{
  --card-width:170px;
  --card-height:260px;
  --card-gap:25px;
}

.carousel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:100%;
}

/* contenedor visible */
.carousel-wrapper{
  width: calc((var(--card-width) * 5) + (var(--card-gap) * 4));
  overflow:hidden;
  padding:100px 0;
  margin:auto;
}

/* track de movimiento */
.carousel-track{
  display:flex;
  align-items:center;
  gap:var(--card-gap);
  transition:transform 0.5s ease-in-out;
  width:max-content;
}

/* cards laterales */
.card{
  width:var(--card-width);
  height:300px;
  object-fit:cover;
  border-radius:20px;

  opacity:0.5;
  transform:scale(0.85);

  transition:all 0.4s ease;
  flex-shrink:0;
}

/* card central */
.card.active{
  opacity:1;
  transform:scale(1.25); /* agranda sin cambiar el ancho real */

  box-shadow:0 20px 40px rgba(0,0,0,0.25);
  z-index:5;
}

.empresas {
  padding: 80px 0;
  text-align: center;
  background:#0f172a;
}

.empresas h2 {
  margin-bottom: 40px;
  color:white;
}

.logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 30px;
  align-items: center;
}

.logos-grid img {
  width: 100%;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: 0.3s;
}

.logos-grid img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}
a {
  text-decoration: none;
  color: inherit;
}


/* ================= NAV RESPONSIVE ================= */

.menu-toggle{
  display:none;
  font-size:26px;
  color:white;
  cursor:pointer;

  position: relative;
  top: -15px; /* 🔥 lo sube un poco */
}

/* links normales */
.nav-links{
  display:flex;
  gap:25px;
}

/* 📱 MOBILE */
@media (max-width: 768px){

  .menu-toggle{
    display:block;
  }

  .nav-links{
    position:absolute;
    top:80px;
    right:0;
    width:100%;
    background:#0c1a30;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:20px 0;

    display:none;
  }

  .nav-links.active{
    display:flex;
  }

  .nav-links a{
    margin:0;
  }
}
@media (max-width: 768px){
  .hero{
    height:auto;
    padding:120px 20px 80px;
  }

  .hero h1{
    font-size:32px;
  }

  .hero p{
    font-size:16px;
  }

  .hero-buttons{
    flex-direction:column;
    gap:10px;
  }
}
@media (max-width: 900px){
  .about-grid,
  .socio-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
}
@media (max-width: 576px){
  .services{
    padding:60px 15px;
  }
}
@media (max-width: 992px){
  .values-container{
    grid-template-columns: repeat(3, 1fr);
  }
}

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



/* variables */
:root{
  --card-width:170px;
  --card-height:260px;
  --card-gap:25px;
}

/* ================= BASE ================= */

.carousel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:100%;
}

.carousel-wrapper{
  width: calc((var(--card-width) * 5) + (var(--card-gap) * 4));
  overflow:hidden;
  padding:100px 0;
  margin:auto;
}

.carousel-track{
  display:flex;
  align-items:center;
  gap:var(--card-gap);
  transition:transform 0.5s ease-in-out;
  width:max-content;
}

.card{
  width:var(--card-width);
  height:300px;
  object-fit:cover;
  border-radius:20px;

  opacity:0.5;
  transform:scale(0.85);

  transition:all 0.4s ease;
  flex-shrink:0;
}

.card.active{
  opacity:1;
  transform:scale(1.25);
  box-shadow:0 20px 40px rgba(0,0,0,0.25);
  z-index:5;
}

/* ================= TABLET ================= */

@media (max-width: 1024px){
  :root{
    --card-width:140px;
    --card-gap:20px;
  }

  .carousel-wrapper{
    width: calc((var(--card-width) * 3) + (var(--card-gap) * 2));
    padding:80px 0;
  }

  .card.active{
    transform:scale(1.15);
  }
}

/* ================= CELULAR ================= */

@media (max-width: 600px){
  :root{
    --card-width:120px;
    --card-gap:15px;
  }

  .carousel-wrapper{
    width: calc((var(--card-width) * 3) + (var(--card-gap) * 2));
    padding:80px 0;
  }

  .card{
    height:220px;
  }

  .card.active{
    transform:scale(1.15);
  }
}
@media (max-width: 576px){
  .footer{
    text-align:center;
  }
}