/* =========================
   COMMON (todas las páginas)
   ========================= */
:root{
  --verde-lima-clasico: #9ab63b; /* verde lima clasico*/
  --verde-hoja: #669f41; /* verde hoja*/
  --verde-lima-neon: #d1cf2e;
  --text-dark: #111;
  --soft-bg: #EBFAE3;
  --muted: rgba(17,17,17,.7);
}

/* =========================
   MODULUS FONT
========================= */

@font-face {
  font-family: "Modulus";
  src: url("/assets/fonts/ModulusPro-Medium.woff2") format("woff2"),
       url("/assets/fonts/ModulusPro-Medium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Modulus-Bold";
  src: url("/assets/fonts/ModulusPro-Bold.woff2") format("woff2"),
       url("/assets/fonts/ModulusPro-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body{
    font-family: "Modulus", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text-dark);
}

h1,h2,h3,h4,h5,h6,
.section-title,
.hero-title,
.page-hero__title,
.service-block__title,
.service-intro__title,
.service-cta__title,
.footer-title,
.confianza-title,
.contact-pill__title{
  font-family: "League Spartan", sans-serif;
}
/*
.service-intro__title,
.confianza-title,
.contact-pill__title{
  color: var(--verde-hoja) !important;
}*/


.section-title{
  font-weight: 600;
  letter-spacing: .2px;
}

.bg-soft{ background: var(--soft-bg); }

.bg-section-a{
  background: linear-gradient(180deg, #FFFFFF 0%, var(--soft-bg) 100%) !important;
}

.bg-section-b{
  background: var(--soft-bg) !important;
}

.bg-section-c{
  background: linear-gradient(0deg, #FFFFFF 0%, var(--soft-bg) 100%) !important;
}


/* ===== Navbar ===== */
.nav-logo{
  height: 64px;
  width: auto;
}

#mainNav{
  transition: background-color .25s ease, box-shadow .25s ease;
  padding-top: 14px;
  padding-bottom: 14px;
}

#mainNav.nav-transparent{
  background: rgba(0,0,0,0.30);
  box-shadow: none;
}

#mainNav.nav-solid{
  background: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

/* Links */
#mainNav .nav-link{
  font-size: 19px;
  font-weight: 600;
}

#mainNav.nav-transparent .nav-link{
  color: rgba(255,255,255,.92);
}

#mainNav.nav-transparent .nav-link:hover{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 6px;
}

#mainNav.nav-solid .nav-link{
  color: #111 !important;
}

#mainNav.nav-solid .nav-link:hover{
  color: var(--verde-lima-clasico) !important;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ===== NAV: item activo ===== */
#mainNav .nav-link.nav-active{
  font-weight: 800;
  font-size: 21px;
}

/* Cuando el nav está BLANCO (solid): activo en verde */
#mainNav.nav-solid .nav-link.nav-active{
  color: var(--verde-lima-clasico) !important;
}

/* Cuando el nav está TRANSPARENTE: activo claro + subrayado */
#mainNav.nav-transparent .nav-link.nav-active{
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Dropdown: que el toggle activo también destaque */
#mainNav .dropdown-toggle.nav-active{
  font-weight: 700;
}

/* Estado activo del dropdown */
#mainNav .dropdown-menu .dropdown-item.active,
#mainNav .dropdown-menu .dropdown-item:active{
  background: rgba(110,127,27,.15);
  color: var(--verde-lima-clasico) !important;
  font-weight: 700;
}

/* Activo + hover */
#mainNav .dropdown-menu .dropdown-item.active:hover,
#mainNav .dropdown-menu .dropdown-item:active:hover{
  background: rgba(110,127,27,.15);
  color: var(--verde-hoja) !important;
  font-weight: 700;
}

/* Hover normal solo para los NO activos */
#mainNav .dropdown-menu .dropdown-item:not(.active):hover{
  background: rgba(110,127,27,.10);
  color: var(--verde-lima-clasico) !important;
  font-weight: 700;
}

.nav-mobile-wrap{
  position: relative;
}

.nav-mobile-actions{
  display: none;
}

/* Botón CTA */
.btn-cta{
  background: var(--verde-lima-clasico);
  border: 0;
  color: #fff;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: .2px;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}

.btn-cta:hover{
  background: var(--verde-lima-neon);
  color: #fff;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-cta i{ color:#fff; }

/* Botón subir */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 0;
  background: rgba(0,0,0,.38);
  color: #fff;
  display: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  z-index: 9999;
}
.to-top.show{ display: inline-grid; place-items: center; }
.to-top:hover{ filter: brightness(1.05); }

/* ===== Footer (moderno, basado en tu captura) ===== */
.site-footer{
  background: var(--verde-lima-clasico);
  color: #fff;
  padding: 52px 0;
}

.footer-grid{
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 42px;
  align-items: start;
}

.footer-badge{
  width: 120px;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.footer-title{
  font-weight: 600;
  font-size: 26px;
  margin-bottom: 14px;
}

.footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.footer-item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: rgba(255,255,255,.92);
}

.footer-item i{
  font-size: 18px;
  line-height: 1.2;
  color: rgba(255,255,255,.92);
}

.footer-item a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.footer-item a:hover{ text-decoration: underline; }

.footer-social{
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.social-btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.social-btn:hover{
  scale: 1.05;
  background: rgba(209, 207, 46, .50);
  filter: brightness(1.05);
  transition: scale .35s ease;
  transition: color .35s ease;
 }
.social-btn i{ font-size: 18px; }

.footer-bottom{
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  color: rgba(255,255,255,.85);
  font-size: 14px;
}

.footer-links a{
  color: rgba(255,255,255,.88);
  text-decoration: none;
  margin-right: 12px;
}
.footer-links a:hover{ text-decoration: underline; }

/* ===== Responsive ===== */
@media (max-width: 992px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
  .nav-logo{ height: 42px; }

  /* En móvil, cuando el menú se despliega sobre transparente, lo hacemos blanco para leer */
  .navbar-collapse{
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    margin-top: 10px;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
  }
  /* =========================================
     MENÚ TOGGLE (MÓVIL) -> estilo "SOLID"
     aunque el navbar esté en transparent
     ========================================= */
  @media (max-width: 991.98px){

    #mainNav .container{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* Logo */
    .navbar-brand{
      margin-right: 0;
      z-index: 3;
    }

    /* Grupo derecho móvil */
    .nav-mobile-actions{
      display: flex;
      align-items: center;
      gap: 14px;
      margin-left: auto;
      z-index: 3;
    }

    /* Botón hamburguesa: solo las líneas */
    .navbar-toggler{
      border: 0 !important;
      box-shadow: none !important;
      padding: 0;
      background: transparent;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      order: 1;
    }

    .navbar-toggler:focus{
      box-shadow: none !important;
      outline: none;
    }

    /* Colocar hamburguesa entre logo y CTA */
    .navbar-toggler{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    /* Icono hamburguesa */
    #mainNav.nav-transparent .navbar-toggler-icon{
      filter: brightness(0) invert(1);
    }

    #mainNav.nav-solid .navbar-toggler-icon{
      filter: none;
    }

    /* CTA móvil */
    .btn-cta-mobile{
      padding: 8px 10px;
      font-size: 12px;
      border-radius: 8px;
      white-space: nowrap;
      order: 2;
    }

    /* El menú desplegado baja debajo de todo */
    #mainNav .navbar-collapse{
      width: 100%;
      flex-basis: 100%;
    }

    /* El contenedor desplegado: blanco, redondeado, con sombra */
    #mainNav.nav-transparent .navbar-collapse{
      background: #fff;
      border-radius: 14px;
      padding: 14px;
      margin-top: 10px;
      box-shadow: 0 18px 45px rgba(0,0,0,.12);
    }

    /* Links dentro del menú desplegado: negros como solid */
    #mainNav.nav-transparent .navbar-collapse .nav-link{
      color: #111 !important;
    }

    /* Hover dentro del menú desplegado */
    #mainNav.nav-transparent .navbar-collapse .nav-link:hover{
      color: #111 !important;
      text-decoration: underline;
      text-underline-offset: 6px;
    }

    /* Activo dentro del menú desplegado: verde corporativo */
    #mainNav.nav-transparent .navbar-collapse .nav-link.nav-active{
      color: var(--verde-lima-clasico) !important;
      font-weight: 800;
    }

    /* Dropdown menu (la lista que se abre) */
    #mainNav .navbar-collapse .dropdown-menu{
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 18px 45px rgba(0,0,0,.10);
    }

    #mainNav.nav-transparent .navbar-collapse .dropdown-item{
      color: #111;
    }

    #mainNav.nav-transparent .navbar-collapse .dropdown-item.active,
    #mainNav.nav-transparent .navbar-collapse .dropdown-item:active{
      background: rgba(110,127,27,.15);
      color: var(--verde-lima-clasico);
      font-weight: 700;
    }
  }
  @media (max-width: 431.98px){

    .nav-logo{
      height: 37px;
    }

    .btn-cta-mobile{
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cta-mobile-text{
      display: none;
    }

    .btn-cta-mobile i{
      font-size: 16px;
    }

  }
}