* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font-family: 'Montserrat', sans-serif; color: #3C3C3B; background: #FFFFFF; -webkit-font-smoothing: antialiased; }
a { color: #023D85; text-decoration: none; }
a:hover { color: #3AAA35; }
::selection { background: #95C11F; color: #04244F; }

@keyframes floatBlob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-28px) scale(1.06); } }
@keyframes floatBlob2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,22px) scale(1.08); } }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(58,170,53,.55); } 70% { box-shadow: 0 0 0 18px rgba(58,170,53,0); } 100% { box-shadow: 0 0 0 0 rgba(58,170,53,0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bandaSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

.hero-bg { position: absolute; inset: 0; background-size: cover; transition: opacity 1.6s ease-in-out; z-index: 0; }

.nav-links { display: flex; align-items: center; gap: 22px; font-size: 14.5px; font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; color: #023D85; }
.mobile-nav { position: absolute; top: 100%; left: 0; right: 0; border-top: 1px solid #E8EDF3; background: #fff; padding: 10px 24px 18px; display: none; flex-direction: column; gap: 4px; font-weight: 600; box-shadow: 0 16px 30px rgba(4,36,79,.14); max-height: calc(100vh - 100%); overflow-y: auto; }
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 10px 0; }

.grid-porque { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.grid-cob { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.grid-cont { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; }
.grid-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.1); }
.grid-servtabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 34px; }
.grid-servdetail { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.svc-tab { text-align: left; cursor: pointer; border-radius: 18px; padding: 22px 20px; transition: all .25s ease; font-family: inherit; }

@media (max-width: 859px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .grid-porque, .grid-cob, .grid-cont { grid-template-columns: 1fr; }
}
@media (max-width: 779px) {
  .grid-servdetail { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  .grid-foot { grid-template-columns: 1fr; }
  .grid-servtabs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .emg-label { display: none; }
  .emg-banda { display: none !important; }
  .ig-text { display: none; }

  .grid-servtabs { grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 22px; }
  .svc-tab { min-width: 0; text-align: center; padding: 8px 3px; border-radius: 12px; }
  .svc-tab .svc-icon { width: 28px !important; height: 28px !important; border-radius: 8px !important; margin: 0 auto 7px !important; }
  .svc-tab .svc-icon svg { width: 14px; height: 14px; }
  .svc-tab-title { font-size: 11px !important; line-height: 1.15 !important; margin-bottom: 0 !important; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .svc-tab-tag { display: none; }
}

.emg-num:hover { color: #fff; }
.ig-top:hover { color: #95C11F; }
.btn-solicitar:hover { background: #04244F; }
.porque-card:hover { border-color: #95C11F; transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.25); }
/* El !important es por la misma razón que en .form-input.error: el borde
   de cada campo viene como estilo inline en el HTML y sin esto el verde
   al enfocar nunca llegaba a verse. */
.form-input:focus { border-color: #3AAA35 !important; outline: none; }

/* Aviso bajo el título del formulario: todos los campos son obligatorios. */
.form-nota { font-size: 12.5px; color: #5B6472; margin-bottom: 20px; }

/* Campo con error de validación.
   El !important es necesario: cada campo trae su borde como estilo inline
   en el HTML (border:1.5px solid #E0E6EE) y un estilo inline gana sobre
   cualquier clase. Sin esto el borde rojo no se aplica.
   La regla con :focus va aparte para que el borde siga rojo mientras el
   usuario corrige el campo. */
.form-input.error { border-color: #B3261E !important; background: #FEF7F6; }
.form-input.error:focus { border-color: #B3261E !important; }
.form-input.error::placeholder { color: #C98A85; }
.btn-enviar:hover { background: #04244F; }
.social-wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
.social-ig:hover { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); border-color: transparent; color: #fff; }