<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GeoVM</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background-color: #ffffff;
    }

    h2, h3 {
      margin: 0;
    }

    a {
      transition: background-color 0.3s ease;
    }

    a:hover {
      opacity: 0.9;
    }

    section, footer {
      scroll-margin-top: 80px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      h2 {
        font-size: 24px !important;
      }

      h3 {
        font-size: 20px;
      }

      .button-group {
        flex-direction: column !important;
        gap: 10px !important;
      }
    }

    /* Scroll animation */
    .fade-in {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s ease-out;
    }

    .fade-in.visible {
      opacity: 1;
      transform: none;
    }

    /* Dropdown hover show */
    nav > div:hover > .dropdown-content {
      display: block !important;
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.classList.add("visible");
            }
          });
        },
        {
          threshold: 0.1,
        }
      );

      document.querySelectorAll(".fade-in").forEach((el) => observer.observe(el));
    });
  </script>
</head>
<body>

<!-- Botón flotante WhatsApp -->
<a href="https://wa.me/34691668269" target="_blank" style="
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  text-decoration: none;
">
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/WhatsApp_icon.png" alt="WhatsApp" style="width: 32px; height: 32px;">
</a>

<!-- Header / Menú -->
<header style="background-color: #12324C; padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1000;">
  <!-- Logo y nombre -->
  <div style="display: flex; align-items: center; gap: 15px;">
    <img src="img\logoGeovm.png" alt="GeoVM Logo" style="height: 100px;">
    <span style="color: #F1E6D2; font-size: 20px; font-weight: bold;">GeoVM</span>
  </div>

  <!-- Menú -->
  <nav style="display: flex; gap: 20px;">
    <a href="#quienes" style="color: #F1E6D2; text-decoration: none; font-size: 16px;">Quiénes somos</a>
    <a href="#servicios" style="color: #F1E6D2; text-decoration: none; font-size: 16px;">Servicios</a>
    <a href="#casos" style="color: #F1E6D2; text-decoration: none; font-size: 16px;">Casos</a>

    <!-- Donde Estamos Dropdown -->
    <div style="position: relative; color: #F1E6D2; font-size: 16px; cursor: pointer;">
      <span style="padding: 0 5px;">Dónde estamos ▼</span>
      <div style="
        display: none;
        position: absolute;
        background-color: #12324C;
        top: 100%;
        left: 0;
        min-width: 120px;
        border-radius: 6px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        z-index: 2000;
      " class="dropdown-content">
         <a href="#argentina" style="display: block; color: #F1E6D2; padding: 8px 12px; text-decoration: none;">Argentina</a>
      </div>
    </div>

    <!-- Socios Estratégicos Dropdown -->
    <div style="position: relative; color: #F1E6D2; font-size: 16px; cursor: pointer;">
      <span style="padding: 0 5px;">Socios Estratégicos ▼</span>
      <div style="
        display: none;
        position: absolute;
        background-color: #12324C;
        top: 100%;
        left: 0;
        min-width: 220px;
        border-radius: 6px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        padding: 10px;
        z-index: 2000;
      " class="dropdown-content">
        <div style="display: flex; flex-direction: column; gap: 10px;">
          <img src="img/logo1.png" alt="Socio 1" style="height: 40px;">
          <img src="img/logo2.png" alt="Socio 2" style="height: 40px;">
          <img src="img/logo3.png" alt="Socio 3" style="height: 40px;">
        </div>
      </div>
    </div>

    <a href="#contacto" style="color: #F1E6D2; text-decoration: none; font-size: 16px;">Contacto</a>
  </nav>
</header>

<!-- Quiénes somos -->
<section id="quienes" style="background-color:#F1E6D2; padding: 60px 30px; text-align: center;" class="fade-in">
  <h2 style="color:#12324C; font-size: 32px; margin-bottom: 30px;">
    ¿Quiénes somos?
  </h2>
  <p style="max-width: 800px; margin: 0 auto 40px auto; color:#12324C; font-size: 18px; line-height: 1.6;">
    GeoVM nació en el corazón productivo de Argentina con una misión clara: simplificar los desafíos para que empresas, municipios e industrias puedan enfocarse en lo que realmente importa.  
    <br><br>
    Nos especializamos en generar conexiones estratégicas, optimizar procesos y representar proyectos de alto impacto en sectores clave como infraestructura, logística, agroindustria y tecnología.
    <br><br>
    No vendemos soluciones enlatadas. Escuchamos, interpretamos y accionamos. Porque donde otros ven problemas, nosotros vemos oportunidades para crear valor real.
  </p>

  <div class="button-group" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 30px;">
    <a href="#equipo" style="background-color:#12324C; color:#F1E6D2; padding:12px 24px; font-size:16px; text-decoration:none; border-radius:8px;">Nuestro Equipo</a>
    <a href="#proyectos" style="background-color:#12324C; color:#F1E6D2; padding:12px 24px; font-size:16px; text-decoration:none; border-radius:8px;">Ver proyectos</a>
    <a href="#contacto" style="background-color:#12324C; color:#F1E6D2; padding:12px 24px; font-size:16px; text-decoration:none; border-radius:8px;">Contactanos ahora</a>
    <a href="#info" style="background-color:#12324C; color:#F1E6D2; padding:12px 24px; font-size:16px; text-decoration:none; border-radius:8px;">Quiero saber más</a>
    <a href="#soluciones" style="background-color:#12324C; color:#F1E6D2; padding:12px 24px; font-size:16px; text-decoration:none; border-radius:8px;">Explorá nuestras soluciones</a>
  </div>
</section>

<!-- Servicios -->
<section id="servicios" style="background:#fff; padding:60px 30px; text-align:center;" class="fade-in">
  <h2 style="color:#12324C; font-size:32px; margin-bottom:30px;">¿Cómo trabajamos para vos?</h2>
  <p style="max-width:800px; margin:0 auto 50px; color:#12324C; font-size:18px; line-height:1.6;">
    En GeoVM conectamos necesidades con soluciones concretas. Representamos proyectos, optimizamos procesos y generamos oportunidades reales para quienes hacen.
  </p>
  <div style="display:flex; flex-wrap: wrap; justify-content:center; gap:30px; max-width:1000px; margin:auto;">
    <div style="background:#F1E6D2; border-radius:16px; padding:30px; flex:1 1 250px; max-width:300px;">
      <img src="img\business-handshake-9702435_640-removebg-preview.png" alt="Representación Comercial" style="height:50px; margin-bottom:15px;">
      <h3 style="color:#12324C; margin-top:15px;">Representación Comercial</h3>
      <p style="color:#12324C; font-size:16px; line-height:1.5;">
        Conectamos empresas con municipios, industrias y sectores clave. Intermediamos con estrategia y resultados.
      </p>
    </div>

    <div style="background:#F1E6D2; border-radius:16px; padding:30px; flex:1 1 250px; max-width:300px;">
      <img src="img\mother-173739_640-removebg-preview.png" alt="Optimización de procesos" style="height:50px; margin-bottom:15px;">
      <h3 style="color:#12324C; margin-top:15px;">Optimización de procesos</h3>
      <p style="color:#12324C; font-size:16px; line-height:1.5;">
        Detectamos cuellos de botella, proponemos soluciones y mejoramos la eficiencia sin complicarte la vida.
      </p>
    </div>
    
    <div style="background:#F1E6D2; border-radius:16px; padding:30px; flex:1 1 250px; max-width:300px;">
      <img src="img\Diseño sin título.png" alt="Gestión de proyectos" style="height:50px; margin-bottom:15px;">
      <h3 style="color:#12324C; margin-top:15px;">Gestión de proyectos</h3>
      <p style="color:#12324C; font-size:16px; line-height:1.5;">
        Coordinamos obras y acciones públicas o privadas, con mirada estratégica y foco en resultados.
      </p>
    </div>

    <div style="background:#F1E6D2; border-radius:16px; padding:30px; flex:1 1 250px; max-width:300px;">
      <img src="img\The_Earth_seen_from_Apollo_17-removebg-preview.png" alt="Conexiones internacionales" style="height:50px; margin-bottom:15px;">
      <h3 style="color:#12324C; margin-top:15px;">Conexiones internacionales</h3>
      <p style="color:#12324C; font-size:16px; line-height:1.5;">
        Acercamos productos y soluciones argentinas al mundo. Foco especial en India y Mercosur.
      </p>
    </div>
  </div>
  <a href="#contacto" style="margin-top:40px; background:#12324C; color:#F1E6D2; padding:14px 28px; font-size:18px; text-decoration:none; border-radius:8px; display:inline-block;">
    Hablemos de tu proyecto
  </a>
</section>

<!-- Casos -->
<section id="casos" style="background-color:#F1E6D2; padding: 60px 30px; text-align: center;" class="fade-in">
  <h2 style="color:#12324C; font-size: 32px; margin-bottom: 30px;">Casos que hablan por sí solos</h2>
  <p style="max-width: 800px; margin: 0 auto 50px auto; color:#12324C; font-size: 18px; line-height: 1.6;">
    Estas son algunas situaciones reales donde nuestra intervención generó un antes y un después. Conexiones que funcionan, soluciones concretas.
  </p>
  <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1000px; margin: auto;">
    <div style="background-color:#FFFFFF; border-radius: 16px; padding: 30px; flex: 1 1 300px; max-width: 320px; box-shadow: 0 0 10px rgba(0,0,0,0.05);">
      <h3 style="color:#12324C;">Municipio de Córdoba</h3>
      <p style="color:#12324C; font-size: 16px; line-height: 1.5;">
        Un municipio necesitaba pavimentar de forma urgente 5 cuadras clave. GeoVM conectó con una empresa confiable, cotización clara y obra ejecutada en tiempo récord.
      </p>
    </div>
    <div style="background-color:#FFFFFF; border-radius: 16px; padding: 30px; flex: 1 1 300px; max-width: 320px; box-shadow: 0 0 10px rgba(0,0,0,0.05);">
      <h3 style="color:#12324C;">Sector agroindustrial</h3>
      <p style="color:#12324C; font-size: 16px; line-height: 1.5;">
        Asesoramos una empresa agroindustrial para exportar productos a India, facilitando trámites y conexiones estratégicas.
      </p>
    </div>
    <div style="background-color:#FFFFFF; border-radius: 16px; padding: 30px; flex: 1 1 300px; max-width: 320px; box-shadow: 0 0 10px rgba(0,0,0,0.05);">
      <h3 style="color:#12324C;">Logística y transporte</h3>
      <p style="color:#12324C; font-size: 16px; line-height: 1.5;">
        Optimización de rutas y conexión entre proveedores y clientes para mejorar tiempos y costos operativos.
      </p>
    </div>
  </div>
</section>

<!-- Socios Estratégicos -->
<section id="socios" style="background-color:#ffffff; padding: 60px 30px; text-align: center;" class="fade-in">
  <h2 style="color:#12324C; font-size: 32px; margin-bottom: 30px;">Socios Estratégicos</h2>
  <div style="display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; max-width: 900px; margin: auto;">
    <img src="img/logo1.png" alt="Socio 1" style="height: 80px;">
    <img src="img/logo2.png" alt="Socio 2" style="height: 80px;">
    <img src="img/logo3.png" alt="Socio 3" style="height: 80px;">
  </div>
</section>

<!-- Equipo -->
<section id="equipo" style="background-color:#F1E6D2; padding: 60px 30px; text-align: center;" class="fade-in">
  <h2 style="color:#12324C; font-size: 32px; margin-bottom: 30px;">Nuestro Equipo</h2>
  <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;">

    <div style="background-color: white; border-radius: 12px; padding: 20px; width: 220px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
      <img src="img/camiloQR.png" alt="Camilo Banchio" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px;">
      <h3 style="color:#12324C; margin-bottom: 10px;">Camilo Banchio</h3>
      <p style="color:#5CA2D9; margin-bottom: 15px;">Director General (CEO) Fundador</p>
      <a href="mailto:cbanchio@geovm.com.ar" style="display: inline-block; background-color:#12324C; color:#F1E6D2; padding: 8px 12px; border-radius: 6px; text-decoration: none;">Correo</a>
    </div>

    <div style="background-color: white; border-radius: 12px; padding: 20px; width: 220px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
      <img src="img/AsgarQR.png" alt="Asghar Ali" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px;">
      <h3 style="color:#12324C; margin-bottom: 10px;">Asghar Alí</h3>
      <p style="color:#5CA2D9; margin-bottom: 15px;">Responsable de Comercio Exterior</p>
      <a href="mailto:aali@geovm.com.ar" style="display: inline-block; background-color:#12324C; color:#F1E6D2; padding: 8px 12px; border-radius: 6px; text-decoration: none;">Correo</a>
    </div>

    <div style="background-color: white; border-radius: 12px; padding: 20px; width: 220px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
      <img src="img/victorQR.png" alt="Victor Amer" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px;">
      <h3 style="color:#12324C; margin-bottom: 10px;">Víctor Amer</h3>
      <p style="color:#5CA2D9; margin-bottom: 15px;">Analista Técnico y Coordinador de Documentación</p>
      <a href="mailto:vamer@geovm.com.ar" style="display: inline-block; background-color:#12324C; color:#F1E6D2; padding: 8px 12px; border-radius: 6px; text-decoration: none;">Correo</a>
    </div>

    <div style="background-color: white; border-radius: 12px; padding: 20px; width: 220px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
      <img src="img/MaríaQR.png" alt="María Suñer" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px;">
      <h3 style="color:#12324C; margin-bottom: 10px;">María Suñer</h3>
      <p style="color:#5CA2D9; margin-bottom: 15px;">Responsable Comercial Nacional</p>
      <a href="mailto:msuner@geovm.com.ar" style="display: inline-block; background-color:#12324C; color:#F1E6D2; padding: 8px 12px; border-radius: 6px; text-decoration: none;">Correo</a>
    </div>

    <div style="background-color: white; border-radius: 12px; padding: 20px; width: 220px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
      <img src="img/agustinQR.png" alt="Agustín Retta" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px;">
      <h3 style="color:#12324C; margin-bottom: 10px;">Agustín Retta</h3>
      <p style="color:#5CA2D9; margin-bottom: 15px;">Responsable de Comunicación y Marketing Digital</p>
      <a href="mailto:aretta@geovm.com.ar" style="display: inline-block; background-color:#12324C; color:#F1E6D2; padding: 8px 12px; border-radius: 6px; text-decoration: none;">Correo</a>
    </div>


</section>
<section>
<!-- Argentina -->
<section id="argentina" style="background-color:#ffffff; padding: 60px 30px; text-align: center;" class="fade-in">
  <h2 style="color:#12324C; font-size: 32px; margin-bottom: 30px;">Conocé Argentina</h2>
  <p style="max-width: 800px; margin: 0 auto 40px auto; color:#12324C; font-size: 18px; line-height: 1.6;">
    Argentina es un punto de encuentro entre innovación, talento y naturaleza. Un país donde la fuerza productiva, la creatividad de su gente y su riqueza cultural abren puertas a negocios y experiencias únicas en el mundo
    <br><br>
    GeoVM impulsa el puente entre Argentina y el mundo, llevando talento, productos y soluciones a nuevos mercados y generando conexiones estratégicas que trascienden fronteras.
  </p>

  <!-- Imagen destacada -->
  <div style="max-width:1000px; margin:40px auto;">
    <img src="img\0507nasaargentina-991945.jpg" alt="Conocé Argentina - GeoVM" style="width:100%; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.1); display:block;">
  </div>

  <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:30px; max-width:1000px; margin:auto;">

    <!-- Tarjeta 1 -->
    <div style="background:#F1E6D2; border-radius:16px; padding:20px; flex:1 1 calc(33% - 30px); min-width:250px; max-width:300px; text-align:center; box-sizing:border-box;">
      <img src="img\proyeccion industrial.png" alt="Industria argentina" style="width:100%; height:auto; border-radius:10px; margin-bottom:15px; display:block;">
      <h3 style="color:#12324C; margin-bottom:10px;">Potencia Productiva</h3>
      <p style="color:#12324C; font-size:16px; line-height:1.5;">
        Argentina se destaca como motor agroindustrial, energético y manufacturero, ofreciendo soluciones de alto valor y calidad reconocida en los principales mercados del mundo
      </p>
    </div>

    <!-- Tarjeta 2 -->
    <div style="background:#F1E6D2; border-radius:16px; padding:20px; flex:1 1 calc(33% - 30px); min-width:250px; max-width:300px; text-align:center; box-sizing:border-box;">
      <img src="img\argentina-3386084_1920.jpg" alt="Paisajes argentinos" style="width:100%; height:auto; border-radius:10px; margin-bottom:15px; display:block;">
      <h3 style="color:#12324C; margin-bottom:10px;">Diversidad y Cultura</h3>
      <p style="color:#12324C; font-size:16px; line-height:1.5;">
        Una nación diversa y vibrante, donde las tradiciones se unen con la innovación y la creatividad de su gente para impulsar transformación y progreso.
      </p>
    </div>

    <!-- Tarjeta 3 -->
    <div style="background:#F1E6D2; border-radius:16px; padding:20px; flex:1 1 calc(33% - 30px); min-width:250px; max-width:300px; text-align:center; box-sizing:border-box;">
      <img src="img\jybif9su.png" alt="Tecnología argentina" style="width:100%; height:auto; border-radius:10px; margin-bottom:15px; display:block;">
      <h3 style="color:#12324C; margin-bottom:10px;">Proyección Global</h3>
      <p style="color:#12324C; font-size:16px; line-height:1.5;">
        Impulsamos la conexión con mercados internacionales, llevando talento, innovación y productos de alto valor agregado, para abrir nuevas oportunidades y consolidar relaciones comerciales sólidas y duraderas.
      </p>
    </div>
  </div>
</section>

<!-- Contacto -->
<section id="contacto" style="background-color:#F1E6D2; padding: 60px 30px; text-align: center;" class="fade-in">
  <h2 style="color:#12324C; font-size: 32px; margin-bottom: 30px;">Contacto</h2>
  <p style="max-width: 800px; margin: 0 auto 40px auto; color:#12324C; font-size: 18px; line-height: 1.6;">
    Estamos para ayudarte. Escribinos y encontrá la solución que necesitás.
  </p>
  <form style="max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px;">
    <input type="text" placeholder="Nombre" required style="padding: 12px; font-size: 16px; border-radius: 8px; border: 1px solid #12324C;">
    <input type="email" placeholder="Correo electrónico" required style="padding: 12px; font-size: 16px; border-radius: 8px; border: 1px solid #12324C;">
    <textarea placeholder="Mensaje" rows="5" required style="padding: 12px; font-size: 16px; border-radius: 8px; border: 1px solid #12324C;"></textarea>
    <button type="submit" style="background-color:#12324C; color:#F1E6D2; padding: 14px; font-size: 18px; border: none; border-radius: 8px; cursor: pointer;">Enviar</button>
  </form>
</section>

<footer style="background-color:#12324C; color:#F1E6D2; padding: 30px 20px; text-align: center;">
  <p>© 2025 GeoVM. Todos los derechos reservados.</p>
</footer>

</body>
</html>