
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>El Encuestador Py</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/styles.css">
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    /* Hero con fondo */
    .hero {
      min-height: 100vh;
      background-color: #f8f9fa; /* fondo suave */
    }
    
    section{
        background-color: #ffffff !important;
    }
    
    /* Botones */
    .btn-danger {
      background-color: #e63946;
      border: none;
    }
    .btn-danger:hover {
      background-color: #c82333;
    }
    
    .btn-outline-dark {
      border-width: 2px;
    }
    
    .text-primary{
        color: #0B1D4F !important;
    }
    
    .text-secondary{
        color: #000000 !important;
    }
    
    .btn-custom-primary{
        color: #ffffff;
        background-color: #de4b31;
    }
    
    .btn-custom-primary:hover{
        color: #de4b31 !important;
        border: 1px solid #de4b31;
    }
    
    #resultados h2 {
      font-size: 2.2rem;
      letter-spacing: -0.5px;
    }
    
    #resultados .card {
      border: none;
      border-radius: 12px;
    }
    
    #resultados .card img {
      max-height: 180px;
      object-fit: contain;
    }
    
    #resultados .btn-primary {
      background-color: #004aad;
      border: none;
    }
    #resultados .btn-primary:hover {
      background-color: #003580;
    }
  </style>
</head>
<body>

<!-- Navbar simple -->
<nav class="navbar navbar-light bg-white fixed-top shadow-sm">
  <div class="container d-flex justify-content-between align-items-center">
    <!-- Logo -->
    <a class="navbar-brand d-flex align-items-center fw-bold text-dark" href="javascript:void(0);">
      <img src="images/logoElEncuestador.svg" alt="Logo El Encuestador" width="35" class="me-2">
      EL ENCUESTADOR
    </a>
    <!-- Redes sociales -->
    <div>
      <a href="#" class="text-dark me-3"><i class="bi bi-facebook"></i></a>
      <a href="#" class="text-dark me-3"><i class="bi bi-twitter"></i></a>
      <a href="#" class="text-dark"><i class="bi bi-linkedin"></i></a>
    </div>
  </div>
</nav>

<!-- Hero -->
<header class="hero d-flex align-items-center">
  <div class="container py-5 mt-5">
    <div class="row align-items-center">
      <!-- Texto -->
      <div class="col-lg-6 text-start">
        <h1 class="display-5 fw-bold text-primary">DATOS CONFIABLES,<br>ANÁLISIS IMPARCIAL,</h1>
        <p class="lead text-secondary">Con expertos paraguayos y el respaldo de una IA avanzada.</p>
        <div class="mt-4">
          <a href="#contacto" class="btn btn-custom-primary btn-lg me-2">SOLICITÁ UNA PROPUESTA</a>
          <a href="#resultados" class="btn btn-outline-dark btn-lg">VER ÚLTIMOS RESULTADOS</a>
        </div>
      </div>
      <!-- Imagen -->
      <!--<div class="col-lg-6 d-none d-lg-block text-end">
        <img src="images/sldelencuestador.png" alt="Encuesta en acción" class="img-fluid rounded">
      </div>-->
    </div>
  </div>
</header>

<section id="nosotros" class="section">
  <div class="container fade-in">
    <h2 class="text-primary">Sobre Nosotros</h2>
    <div class="row">
        <div class="col-lg-8">
            <p>Más de 7 años brindando datos precisos y análisis metodológico imparcial. Utilizamos tecnología de IA y equipos paraguayos especializados.</p>  
            
            <h2 class="text-primary mt-4" id="servicios">Servicios:</h2>
            <div class="row gy-4 mt-1">
              <div class="col-md-4"><i class="bi bi-bar-chart-line-fill fs-2 text-danger"></i><br>Encuestas políticas</div>
              <div class="col-md-4"><i class="bi bi-graph-up-arrow fs-2 text-danger"></i><br>Estudios de mercado</div>
              <div class="col-md-4"><i class="bi bi-check2-square fs-2 text-danger"></i><br>Boca de urna</div>
              <div class="col-md-4"><i class="bi bi-people-fill fs-2 text-danger"></i><br>Focus groups</div>
              <div class="col-md-4"><i class="bi bi-pie-chart-fill fs-2 text-danger"></i><br>Paneles online</div>
              <div class="col-md-4"><i class="bi bi-lightbulb-fill fs-2 text-danger"></i><br>Asesoría estratégica</div>
            </div>
            
        </div>
        <div class="col-lg-4">
            <center><img src="images/insumo1.svg" width="100%" /></center>
        </div>
    </div>
  </div>
</section>

<section id="resultados" class="section bg-white text-center py-5">
  <div class="container">
    <!-- Título -->
    <h2 class="fw-bold text-primary mb-3">RESULTADOS DETALLADOS</h2>
    <p class="text-secondary mb-5">Más que encuestas. Resultados que se confirmaron en las urnas.</p>

    <!-- Fila de resultados -->
    <div class="row g-4">
      <!-- Card 1 -->
      <div class="col-md-4">
        <div class="card shadow-sm h-100">
          <div class="card-body">
            <h5 class="fw-bold">Villa Elisa</h5>
            <small class="text-muted">Septiembre 2023</small>
            <img src="assets/img/result-villa-elisa.png" alt="Villa Elisa Resultados" class="img-fluid my-3">
            <p class="text-success mb-1"><i class="bi bi-check-circle-fill"></i> Acertamos</p>
            <p class="mb-0"><strong>Resultado final:</strong> 33,0 %</p>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="col-md-4">
        <div class="card shadow-sm h-100">
          <div class="card-body">
            <h5 class="fw-bold">Consejo de la Magistratura</h5>
            <small class="text-muted">Octubre 2023</small>
            <img src="assets/img/result-magistratura.png" alt="Consejo Magistratura Resultados" class="img-fluid my-3">
            <p class="text-success mb-1"><i class="bi bi-check-circle-fill"></i> Acertamos</p>
            <p class="mb-0"><strong>Resultado final:</strong> 23,0 %</p>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="col-md-4">
        <div class="card shadow-sm h-100">
          <div class="card-body">
            <h5 class="fw-bold">Limpio</h5>
            <small class="text-muted">Marzo 2025</small>
            <img src="assets/img/result-limpio.png" alt="Limpio Resultados" class="img-fluid my-3">
            <p class="mb-0"><strong>Resultado final:</strong> 25,0 %</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Segunda fila -->
    <div class="row g-4 mt-3">
      <div class="col-md-6">
        <div class="card shadow-sm h-100">
          <div class="card-body">
            <h5 class="fw-bold">Club Cerro Porteño</h5>
            <small class="text-muted">Marzo 2025</small>
            <img src="assets/img/result-cerro.png" alt="Cerro Porteño Resultados" class="img-fluid my-3">
            <p class="text-success mb-1"><i class="bi bi-check-circle-fill"></i> Acertamos</p>
            <p class="mb-0"><strong>Resultado final:</strong> 48,0 %</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Botón historial -->
    <div class="mt-5">
      <a href="#" class="btn btn-primary btn-lg px-4">Ver historial completo de estudios realizados</a>
    </div>

    <!-- Texto de cierre -->
    <p class="mt-4 text-muted">
      Ninguno de nuestros líderes proyectados pidió. <br>
      Nuestro compromiso es con la verdad estadística.
    </p>
  </div>
</section>

<section id="analisis" class="section text-center">
  <div class="container fade-in">
    <h2>Análisis del Mercado</h2>
    <div class="row gy-3">
      <div class="col-md-6">
        <i class="bi bi-gender-female fs-4 text-info"></i><br>
        <strong>64% de mujeres emprendedoras</strong><br>
        según encuesta nacional 2024<br>
        <a href="#" class="btn btn-outline-danger btn-sm mt-2">Ver informe</a>
      </div>
      <div class="col-md-6">
        <i class="bi bi-shield-lock-fill fs-4 text-info"></i><br>
        <strong>38% siente inseguridad en su barrio</strong><br>
        según estudio urbano Asunción - Marzo 2025<br>
        <a href="#" class="btn btn-outline-danger btn-sm mt-2">Ver estudio</a>
      </div>
    </div>
  </div>
</section>

<section id="contacto" class="section bg-light">
  <div class="container fade-in">
    <h2 class="text-center">Contacto y Cotización</h2>
    <form>
      <div class="row mb-3">
        <div class="col-md-6">
          <input type="text" class="form-control" placeholder="Nombre completo">
        </div>
        <div class="col-md-6">
          <input type="email" class="form-control" placeholder="Correo electrónico">
        </div>
      </div>
      <input type="text" class="form-control mb-3" placeholder="Tipo de estudio requerido">
      <textarea class="form-control mb-3" rows="3" placeholder="Mensaje o comentario"></textarea>
      <div class="text-center">
        <button type="submit" class="btn btn-danger">Solicitar propuesta</button>
      </div>
    </form>
  </div>
</section>

<footer class="text-center py-4 bg-dark text-white">
  <p>&copy; 2025 El Encuestador Py | Síguenos en:
    <a href="#" class="text-white">Facebook</a> · 
    <a href="#" class="text-white">Instagram</a> · 
    <a href="#" class="text-white">X</a> · 
    <a href="#" class="text-white">LinkedIn</a>
  </p>
</footer>

<script src="assets/js/main.js"></script>
<script>
    // Cambia color de navbar al hacer scroll
    $(window).on("scroll", function() {
      if ($(this).scrollTop() > 50) {
        $(".navbar").addClass("scrolled");
      } else {
        $(".navbar").removeClass("scrolled");
      }
    });
</script>
</body>
</html>
