@charset "UTF-8";
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0a1830;-webkit-font-smoothing:antialiased;font-family:'IBM Plex Sans',sans-serif}
a{color:#0a6fe6;text-decoration:none}
a:hover{color:#008fff}
button{font-family:'IBM Plex Sans',sans-serif}
input,textarea{font-family:'IBM Plex Sans',sans-serif}
::selection{background:#008fff;color:#fff}
@keyframes modRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes modTitle{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ===================== RESPONSIVO =====================
   El diseno original venia maquetado solo para escritorio: rejillas de 2 a 5
   columnas y un header de nav con enlaces que no caben en pantallas chicas. */
@media (max-width: 980px) {
  #nav { padding: 16px 24px !important; }
  #navlinks { display: none !important; }

  .statsgrid { grid-template-columns: repeat(2,1fr) !important; }
  .benefitsgrid { grid-template-columns: 1fr !important; }
  .modulesgrid { grid-template-columns: 1fr !important; }
  .pricinggrid { grid-template-columns: repeat(2,1fr) !important; }
  .testigrid { grid-template-columns: 1fr !important; }
  .contactgrid { grid-template-columns: 1fr !important; }

  .plancard { transform: none !important; }

  section, #contactB, #modulesB, #benefitsB, #pricingB { padding-left: 24px !important; padding-right: 24px !important; }
}

@media (max-width: 640px) {
  .pricinggrid { grid-template-columns: 1fr !important; }
  .formrow2 { grid-template-columns: 1fr !important; }
  #contactB > div { padding: 48px 24px !important; }
  h1 { font-size: 34px !important; }
}