/* Reset básico */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Nunito',sans-serif;}
body{color:#333;line-height:1.6;scroll-behavior:smooth;}
a{text-decoration:none;color:inherit;}

/* Variables */
:root{
--celeste:#5aafd5;
--celeste-dark:#086bb8;
--blanco:#ffffff;
--gris-claro:#f1f1f1;
--amarillo:#f7b417;
}

h2{
	  font-family: 'Nunito Black', sans-serif;
}

/* Menu básico */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--blanco);
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;

  img{
    width: 7%;
  }

  @media(max-width:900px){
    img{ 
      width: 25%;
    }
  }
}
.logo {
  font-weight: 700;
  color: var(--celeste);
  font-size: 1.5rem;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  justify-content: center;
    align-items: center;
}
.nav-links li a {
  font-weight: 600;
  color: var(--celeste-dark);
  transition: color 0.3s;
}
.nav-links li a:hover { color: var(--amarillo); }

/* Menu toggle para móvil */
.menu-toggle {
  display: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--celeste);
}

/* Responsive */
@media(max-width:900px){
  .nav-links {
	padding: 20px;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: var(--blanco);
    flex-direction: column;
    align-items: center;
    gap: 15px;
    display: none; /* oculto por defecto */
  }
  .nav-links.active { display: flex; }
  .menu-toggle { display: block; }
}


/* Hero */
header{
  background-color: var(--celeste);
  color: var(--blanco);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:150px 20px 100px;
  background-size: cover;
  background-image: url('./images/fondo_header.png');
  background-repeat: no-repeat;
}
header h1{font-size:3rem;margin-bottom:20px;font-family: 'Nunito Black';}
header p{font-size:1.3rem;margin-bottom:30px;margin-top:30px;max-width:600px;}
.btn-cta{
  background-color: var(--blanco);
  color: var(--celeste);
  padding:15px 30px;
  font-weight:700;
  border-radius:50px;
  transition:all 0.3s;
}
.btn-cta:hover{background-color: var(--amarillo);color: var(--blanco);}

/* Secciones */
section{padding:80px 20px;text-align:center;}
section h2{font-size:2.2rem;margin-bottom:40px;color:var(--celeste);}

/* Animaciones */
.fade-up{opacity:0;transform:translateY(50px);transition:all 0.6s ease-out;}
.fade-up.visible{opacity:1;transform:translateY(0);}

/* Cards */
.steps,.benefits,.why,.stats,.testimonials,.partners{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;    align-items: center;}
.step,.benefit,.why-card,.stat,.testimonial{flex:1 1 250px;max-width:300px;border-radius:15px;padding:30px 20px;transition:transform 0.3s ease;}
.step,.why-card,.testimonial{background:var(--blanco);box-shadow:0 4px 15px rgba(0,0,0,0.1);}
.benefit{background:var(--celeste);color:var(--blanco);}
.stat{background:var(--gris-claro);color:var(--celeste);}
.step:hover,.why-card:hover,.benefit:hover,.testimonial:hover{transform:translateY(-10px);}
.step img{width:60px;margin-bottom:20px;}
.step h3,.benefit h3,.why-card h3{margin-bottom:15px;color: var(--celeste);font-family: 'Nunito Black', sans-serif;}
.stat h3{font-size:2rem;margin-bottom:10px;font-family: 'Nunito Black', sans-serif;}
.testimonial{font-style:italic;}
.partner img{max-width:120px;opacity:0.8;transition:opacity 0.3s ease;}
.partner img:hover{opacity:1;}

/* Mapa dinámico */
.map-container {
  position: relative;
  width: 100%;
  max-width: 300px;
  
  /* Mantener proporción del mapa de Argentina ~1:1.3 (alto:ancho) */
  background-image: url('../../images/mapa_argentina_puntos.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.map-point {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


.dot{position:absolute;width:12px;height:12px;background:var(--celeste);border-radius:50%;animation:moveDot 6s linear infinite;}
@keyframes moveDot{
  0%{transform:translate(0,0);}
  25%{transform:translate(60px,20px);}
  50%{transform:translate(120px,-30px);}
  75%{transform:translate(180px,10px);}
  100%{transform:translate(0,0);}
}
.map-caption{margin-top:15px;font-weight:600;color: var(--celeste);}

/* Formulario */
.contact-form{max-width:500px;margin:0 auto;display:flex;flex-direction:column;gap:15px;}
.contact-form input,.contact-form textarea{padding:15px;border-radius:10px;border:1px solid #ccc;width:100%;}
.contact-form button{background-color:var(--celeste);color:var(--blanco);padding:15px;border:none;border-radius:50px;font-weight:700;cursor:pointer;transition:background 0.3s;}
.contact-form button:hover{background-color: var(--celeste);}

/* Footer */
footer{padding:40px 20px;text-align:center;color:#FFFFFF;}

/* Responsive */
@media(max-width:768px){
  nav{flex-direction:column;gap:15px;}
  header h1{font-size:2.2rem;}
  section h2{font-size:1.8rem;}
  .steps,.benefits,.why,.stats,.testimonials,.partners{flex-direction:column;}
}

#cobertura {
  padding: 80px 20px;
  background: var(--blanco);
}

.cobertura-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.mapa-col {
  flex: 1 1 450px;
  display: flex;
  justify-content: center;
}

.map-container img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.info-col {
  flex: 1 1 400px;
}

.info-col h2 {
  color: var(--celeste);
  font-size: 2rem;
  margin-bottom: 15px;
}
.info-col p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 20px;
}

.valores {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.valor {
  flex: 1 1 120px;
  background: #f8faff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.valor img {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}
.valor h4 {
  color: var(--celeste);
  margin-bottom: 5px;
}
.valor p {
  color: #555;
  font-size: 0.9rem;
}

.cta p {
  font-weight: 600;
  margin-bottom: 10px;
}
.btn-primary {
  background: var(--celeste);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}
.btn-primary:hover {
  background: var(--amarillo);
}

input[type="submit"] {
  background: var(--celeste);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}
input[type="submit"]:hover {
  background: var(--amarillo);
}

/* Responsive */
@media(max-width:900px){
  .cobertura-container {
    flex-direction: column;
    text-align: center;
  }
  .valores {
    justify-content: center;
  }
}

i.ph {
  font-size: 60px;
  color: #009BDB; /* celeste bandera */
}
.mt-1 {
	  margin-top: 5px;
}.mt-2 {
	  margin-top: 10px;
}.mt-3 {
	  margin-top: 15px;
}.mt-4 {
	  margin-top: 20px;
}
.mt-5 {
	  margin-top: 25px;
}
.mb-1{
  margin-bottom: 5px;
}
.mb-2{
  margin-bottom: 10px;
}
.mb-3{
  margin-bottom: 15px;
}
.mb-4{
  margin-bottom: 20px;
}
.mb-5{
  margin-bottom: 25px;
}

.p-4{
  padding: 15px;
}