/* ============================
   PALETA DE COLORES PROMAP
   ============================ */
   :root {
    --green-main: #0a6f38;
    --green-dark: #064d28;
    --green-light: #5bd897;
    --gray-text: #555;
    --gray-light: #f7f7f7;
  }
  
  /* ============================
     RESETEOS BÁSICOS
     ============================ */
  body {
    font-family: "Inter", sans-serif;
    background: #ffffff;
  }
  
  /* ============================
     NAVBAR
     ============================ */
  .bg-green {
    background-color: var(--green-main) !important;
  }
  
  .navbar-brand img {
    filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.2));
  }
  
  .nav-link {
    font-weight: 500;
    color: #fff !important;
  }
  
  .nav-link:hover {
    color: var(--green-light) !important;
  }
  
  /* ============================
     HERO
     ============================ */
  .hero {
    height: 100vh;
    background: url("../img/hero.jpeg") no-repeat center center/cover;
    position: relative;
  }
  
  .hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
  }
  
  /* Texto del hero */
  .hero h1 {
    font-size: 3.5rem;
    text-shadow: 0px 4px 10px rgba(0,0,0,0.4);
  }
  
  .hero p {
    font-size: 1.3rem;
  }
  
  /* ============================
     SECCIÓN QUIÉNES SOMOS
     ============================ */
  .text-green {
    color: var(--green-main);
  }
  
  /* ============================
     SERVICIOS (CARDS)
     ============================ */
  .service-card {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
  }
  
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  }
  
  .service-img {
    height: 180px;
    object-fit: cover;
  }
  
  /* ============================
     CONTADORES DE IMPACTO
     ============================ */
  .bg-green {
    background: var(--green-main) !important;
  }
  
  /* ============================
     BENEFICIOS
     ============================ */
  .benefit-card {
    border-radius: 14px;
    background: white;
  }
  
  .benefit-img {
    width: 110px;
    height: auto;
  }
  
  /* ============================
     FOOTER
     ============================ */
  .footer-promap {
    background: var(--green-dark);
  }
  
  .footer-promap h5 {
    letter-spacing: 1px;
  }
  
  .footer-promap a:hover {
    color: var(--green-light) !important;
  }
  
  /* ============================
     BOTONES
     ============================ */
  .btn-green {
    background: var(--green-main);
    color: #fff;
    border: none;
  }
  
  .btn-green:hover {
    background: var(--green-dark);
    color: #fff;
  }
  
  /* ============================
     MODAL (LOGIN / REGISTRO)
     ============================ */
  .modal-content {
    border-radius: 14px;
  }
  
  .modal-header {
    background: var(--green-main);
    color: #fff;
    border-radius: 14px 14px 0 0;
  }
  
  /* ============================
     RESPONSIVE
     ============================ */
  @media (max-width: 768px) {
    .hero h1 {
      font-size: 2.3rem;
    }
    .hero {
      height: 70vh;
    }
  }