/* =========================================================
   Soluciones Aplicativas — Modern 2026 Overlay
   Capa adicional. NO reemplaza style.css; lo refina.
   ========================================================= */

:root {
  --sa-primary: #0d6efd;
  --sa-primary-600: #0b5ed7;
  --sa-primary-700: #0a58ca;
  --sa-accent: #00c2a8;
  --sa-dark: #0f1620;
  --sa-dark-2: #1b2330;
  --sa-text: #1f2937;
  --sa-muted: #6b7280;
  --sa-bg: #f7f9fc;
  --sa-card: #ffffff;
  --sa-border: rgba(15, 22, 32, 0.08);
  --sa-shadow-sm: 0 1px 2px rgba(15, 22, 32, .04), 0 1px 3px rgba(15, 22, 32, .06);
  --sa-shadow-md: 0 6px 18px rgba(15, 22, 32, .08), 0 2px 6px rgba(15, 22, 32, .06);
  --sa-shadow-lg: 0 24px 48px -12px rgba(15, 22, 32, .18);
  --sa-radius: 14px;
  --sa-radius-sm: 10px;
  --sa-radius-lg: 22px;
  --sa-transition: 220ms cubic-bezier(.2, .8, .2, 1);
  --sa-grad: linear-gradient(135deg, #0d6efd 0%, #00c2a8 100%);
}

/* Smooth scroll para los anclajes (#partnership, #outsourcingppe, etc.) */
html { scroll-behavior: smooth; }

/* Tipografía base más legible en 2026 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== TAGLINE AL LADO DEL LOGO ===== */
.sa-brand-wrap {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  line-height: 1;
}
.sa-brand-tagline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sa-primary);
  white-space: nowrap;
}
.sa-brand-tagline .sa-years {
  color: var(--sa-primary-700);
  font-weight: 800;
}
.sa-brand-tagline .sa-flag {
  display: inline-flex;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(15, 22, 32, 0.08);
  background: linear-gradient(to bottom,
    #0F47AF 0 33.33%,
    #FFFFFF 33.33% 66.66%,
    #0F47AF 66.66% 100%);
  position: relative;
  flex-shrink: 0;
}
.sa-brand-tagline .sa-flag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C8102E;
  transform: translate(-50%, -50%);
  opacity: .85;
}
@media (max-width: 991px) {
  .sa-brand-tagline { font-size: 10px; gap: 4px; }
  .sa-brand-wrap { gap: 8px; }
}
@media (max-width: 767px) {
  .sa-brand-tagline { display: none; }
}

/* ===== BOTONES MODERNOS ===== */
.button-primary,
.button-primary-outline,
.button-winona {
  border-radius: 999px !important;
  letter-spacing: .04em;
  transition: transform var(--sa-transition), box-shadow var(--sa-transition), background var(--sa-transition);
}
.button-primary:hover,
.button-winona:hover {
  transform: translateY(-2px);
  box-shadow: var(--sa-shadow-md);
}
.button-primary {
  background: var(--sa-grad) !important;
  border: none !important;
}
.button-primary-outline {
  border-width: 2px !important;
}

/* ===== TARJETAS / ACCORDION MODERNAS ===== */
.card-corporate,
.card-custom {
  border-radius: var(--sa-radius) !important;
  border-color: var(--sa-border) !important;
  background: var(--sa-card);
  transition: box-shadow var(--sa-transition), transform var(--sa-transition);
}
.card-corporate:hover {
  box-shadow: var(--sa-shadow-md);
}
.card-corporate .card-header {
  border-radius: var(--sa-radius) var(--sa-radius) 0 0 !important;
}

/* ===== FORMULARIOS MODERNOS ===== */
.form-input,
select.form-input,
textarea.form-input,
.rd-form select,
.rd-form input.form-input,
.rd-form textarea.form-input {
  border-radius: var(--sa-radius-sm) !important;
  border: 1.5px solid #d8dde6 !important;
  transition: border-color var(--sa-transition), box-shadow var(--sa-transition);
  font-size: 15px !important;
}
.form-input:focus,
select.form-input:focus,
textarea.form-input:focus,
.rd-form select:focus,
.rd-form input:focus,
.rd-form textarea:focus {
  border-color: var(--sa-primary) !important;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, .15) !important;
  outline: none;
}
.form-label-outside {
  font-weight: 600;
  color: var(--sa-text);
  margin-bottom: 6px;
}

/* ===== CAPTCHA "NO SOY UN ROBOT" ===== */
.sa-captcha {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #f8fafd;
  border: 1.5px solid #d8dde6;
  border-radius: var(--sa-radius-sm);
  margin: 18px 0 8px;
  max-width: 360px;
  transition: all var(--sa-transition);
  cursor: pointer;
  user-select: none;
}
.sa-captcha:hover {
  border-color: #b9c1cd;
  background: #fff;
}
.sa-captcha.is-checking {
  border-color: var(--sa-primary);
}
.sa-captcha.is-verified {
  border-color: #16a34a;
  background: #f0fdf4;
}
.sa-captcha.is-error {
  border-color: #dc2626;
  background: #fef2f2;
  animation: sa-shake .4s;
}
@keyframes sa-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}
.sa-captcha__box {
  position: relative;
  width: 26px;
  height: 26px;
  border: 2px solid #b9c1cd;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  transition: all var(--sa-transition);
}
.sa-captcha.is-checking .sa-captcha__box {
  border-top-color: var(--sa-primary);
  animation: sa-spin .8s linear infinite;
}
.sa-captcha.is-verified .sa-captcha__box {
  background: #16a34a;
  border-color: #16a34a;
}
.sa-captcha.is-verified .sa-captcha__box::after {
  content: "";
  position: absolute;
  left: 7px; top: 2px;
  width: 8px; height: 14px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
@keyframes sa-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sa-captcha__label {
  font-size: 14px;
  color: var(--sa-text);
  font-weight: 500;
  flex: 1;
}
.sa-captcha__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 9px;
  color: var(--sa-muted);
  line-height: 1.2;
  text-align: center;
  flex-shrink: 0;
}
.sa-captcha__brand strong {
  font-size: 11px;
  color: var(--sa-text);
}
.sa-captcha + .sa-captcha-msg {
  font-size: 13px;
  color: #dc2626;
  margin: -4px 0 12px;
  display: none;
  font-weight: 500;
}
.sa-captcha.is-error + .sa-captcha-msg { display: block; }

/* ===== SECCIONES Y CONTENEDORES ===== */
section.section-lg {
  padding-top: clamp(40px, 6vw, 90px);
  padding-bottom: clamp(40px, 6vw, 90px);
}

/* Slider/hero más impactante */
.swiper-slider-light .swiper-slide-caption h1 {
  text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
  font-weight: 300;
  letter-spacing: -.02em;
}

/* ===== FOOTER MEJORADO ===== */
.footer-advanced.bg-gray-700 {
  background: linear-gradient(180deg, var(--sa-dark) 0%, #060a0f 100%) !important;
}
.footer-advanced h4 {
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 12px;
}
.footer-advanced a {
  transition: color var(--sa-transition), padding-left var(--sa-transition);
}
.footer-advanced a:hover {
  padding-left: 4px;
  color: var(--sa-accent) !important;
}

/* ===== NAVBAR MEJORAS ===== */
.rd-navbar.rd-navbar--is-stuck,
.rd-navbar-static.rd-navbar--is-stuck {
  box-shadow: var(--sa-shadow-md);
  backdrop-filter: saturate(180%) blur(8px);
}
.rd-nav-link {
  transition: color var(--sa-transition);
}

/* Listas marcadas más limpias */
.list-marked > li {
  position: relative;
}

/* ===== AI PAGE — destacada ===== */
.sa-ai-hero {
  background: linear-gradient(135deg, #0d6efd 0%, #00c2a8 100%);
  color: #fff;
  padding: 50px 30px;
  border-radius: var(--sa-radius-lg);
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
.sa-ai-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,.10), transparent 50%);
  pointer-events: none;
}
.sa-ai-hero h2 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 14px;
  position: relative;
}
.sa-ai-hero p {
  color: rgba(255,255,255,.92);
  font-size: 17px;
  position: relative;
}
.sa-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 30px 0;
}
.sa-ai-card {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  padding: 26px 22px;
  transition: transform var(--sa-transition), box-shadow var(--sa-transition), border-color var(--sa-transition);
}
.sa-ai-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sa-shadow-md);
  border-color: rgba(13, 110, 253, .25);
}
.sa-ai-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--sa-grad);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.sa-ai-card h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--sa-text);
}
.sa-ai-card p {
  font-size: 14.5px;
  color: var(--sa-muted);
  line-height: 1.55;
  margin: 0;
}

/* ===== OUTSOURCING DETALLE ===== */
.sa-outsourcing-detail {
  background: #f8fafd;
  border-left: 4px solid var(--sa-primary);
  padding: 22px 26px;
  border-radius: 0 var(--sa-radius) var(--sa-radius) 0;
  margin: 18px 0;
}
.sa-outsourcing-detail h5 {
  color: var(--sa-primary);
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 16px;
}
.sa-flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.sa-flag-pill {
  padding: 6px 14px;
  background: #fff;
  border: 1.5px solid var(--sa-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-text);
  transition: all var(--sa-transition);
}
.sa-flag-pill:hover {
  border-color: var(--sa-primary);
  color: var(--sa-primary);
  background: rgba(13, 110, 253, .04);
}

/* ===== RESPONSIVE GLOBAL: tablet & mobile ===== */
@media (max-width: 991px) {
  h1 { font-size: clamp(28px, 6vw, 48px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(24px, 5vw, 36px) !important; }
  h3 { font-size: clamp(20px, 4vw, 28px) !important; }
  .container { padding-left: 18px; padding-right: 18px; }
  .row.row-50 > [class*="col-"] { margin-bottom: 24px; }
}

@media (max-width: 767px) {
  /* Hero/slider mas suave en móvil */
  .swiper-slider-light .swiper-slide-caption h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .swiper-slider { min-height: 320px; }
  .swiper-slide { min-height: 320px; }

  /* Footer apilado */
  .footer-advanced .col-sm-7,
  .footer-advanced .col-md-5,
  .footer-advanced .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Forms full width */
  .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .form-input, select.form-input, textarea.form-input { font-size: 16px !important; } /* evita zoom iOS */

  /* Captcha responsive */
  .sa-captcha { max-width: 100%; padding: 12px 14px; gap: 10px; }
  .sa-captcha__label { font-size: 13px; }
  .sa-captcha__brand { font-size: 8px; }
  .sa-captcha__brand strong { font-size: 10px; }

  /* Tablas que floatean en outsourcing/integration */
  table[width="100%"] img,
  img[width="485"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Margenes para móviles */
  section.section-lg { padding-top: 36px; padding-bottom: 36px; }

  /* AI page */
  .sa-ai-hero { padding: 30px 22px; border-radius: var(--sa-radius); }
  .sa-ai-hero p { font-size: 15px; }
}

@media (max-width: 480px) {
  .footer-advanced .col-sm-7,
  .footer-advanced .col-md-5,
  .footer-advanced .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* navbar logo más chico en pantallas pequeñas */
  .rd-navbar-brand img {
    max-width: 165px !important;
    height: auto !important;
  }
}

/* Prefiere movimiento reducido (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Foco accesible global */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sa-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Imágenes responsivas por defecto */
img { max-width: 100%; height: auto; }

/* === Sidebar derecho estrechado en páginas de contenido interno ===
   Reducción acumulada de ~36% del ancho original: el sidebar pasa de
   42% a 26.5% para dar más espacio al contenido principal. Solo afecta
   filas con `justify-content-lg-between` (páginas internas); no toca
   el index, el grid de features ni el footer. */
@media (min-width: 992px) {
  .row.row-50.justify-content-lg-between > .col-lg-5 {
    flex: 0 0 26.5% !important;
    max-width: 26.5% !important;
  }
  .row.row-50.justify-content-lg-between > .col-lg-7 {
    flex: 0 0 68.75% !important;
    max-width: 68.75% !important;
  }
}
@media (min-width: 1200px) {
  .row.row-50.justify-content-lg-between > .col-lg-7.col-xl-6 {
    flex: 0 0 68.75% !important;
    max-width: 68.75% !important;
  }
}

/* Tabla a 100% en mobile pierde overflow */
@media (max-width: 575px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   MENÚ NAVBAR — Simple: azul + blanco, full-width
   ============================================================ */

/* Logo: tamaño controlado por CSS, independiente del PNG.
   38px → 46px (+20%) en desktop; 32px → 38px en tablets */
.rd-navbar-brand,
.rd-navbar-brand img {
  display: inline-block;
}
.rd-navbar-brand img {
  max-height: 46px !important;
  width: auto !important;
  height: auto !important;
}
@media (max-width: 991px) {
  .rd-navbar-brand img { max-height: 38px !important; }
}

/* === FULL WIDTH ===
   Por default el RD Navbar limita el ancho del aside y del main; lo abrimos
   para que el fondo del menú llegue de borde a borde como el header. */
.rd-navbar-static .rd-navbar-aside-outer,
.rd-navbar-static .rd-navbar-main-outer,
.rd-navbar-static .rd-navbar-aside,
.rd-navbar-static .rd-navbar-main,
.rd-navbar-fixed .rd-navbar-aside-outer,
.rd-navbar-fixed .rd-navbar-main-outer,
.rd-navbar-wrap {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
.rd-navbar-aside,
.rd-navbar-main {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Aside (top bar con teléfono y cotización): blanco discreto.
   Solo en desktop static. En mobile el aside se reorganiza dentro del
   drawer y queremos que mantenga su look default. */
.rd-navbar-static .rd-navbar-aside {
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(15, 22, 32, 0.05);
}

/* === DESKTOP STATIC: navbar azul + texto blanco === */
.rd-navbar-static .rd-navbar-main {
  background: var(--sa-primary) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-main,
.rd-navbar-static .rd-navbar--is-stuck .rd-navbar-main {
  background: var(--sa-primary) !important;
  box-shadow: 0 2px 12px rgba(13, 110, 253, 0.25);
  backdrop-filter: none;
}

.rd-navbar-static .rd-navbar-nav > .rd-nav-item > .rd-nav-link {
  color: #ffffff !important;
  font-weight: 500;
  transition: background var(--sa-transition), color var(--sa-transition);
}
.rd-navbar-static .rd-navbar-nav > .rd-nav-item:hover > .rd-nav-link,
.rd-navbar-static .rd-navbar-nav > .rd-nav-item.opened > .rd-nav-link,
.rd-navbar-static .rd-navbar-nav > .rd-nav-item.focus > .rd-nav-link,
.rd-navbar-static .rd-navbar-nav > .rd-nav-item.active > .rd-nav-link {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Switcher de idioma — blanco solo en desktop */
.rd-navbar-static .rd-navbar-lang strong { color: #ffffff !important; }
.rd-navbar-static .rd-navbar-lang a { color: rgba(255, 255, 255, 0.7) !important; }
.rd-navbar-static .rd-navbar-lang a:hover { color: #ffffff !important; }
.rd-navbar-static .rd-navbar-lang span { color: rgba(255, 255, 255, 0.4) !important; }

/* === MOBILE FIXED: drawer blanco + texto OSCURO ===
   En el celular el menú es un drawer (panel lateral) blanco. El texto
   debe ser oscuro para verse, no blanco como en desktop. */
.rd-navbar-fixed .rd-navbar-nav > .rd-nav-item > .rd-nav-link,
.rd-navbar-fixed .rd-nav-link {
  color: var(--sa-text) !important;
  font-weight: 500;
}
.rd-navbar-fixed .rd-navbar-nav > .rd-nav-item:hover > .rd-nav-link,
.rd-navbar-fixed .rd-navbar-nav > .rd-nav-item.opened > .rd-nav-link,
.rd-navbar-fixed .rd-navbar-nav > .rd-nav-item.active > .rd-nav-link,
.rd-navbar-fixed .rd-nav-link:hover {
  color: var(--sa-primary) !important;
  background: rgba(13, 110, 253, 0.06) !important;
}
.rd-navbar-fixed .rd-navbar-lang strong { color: var(--sa-primary) !important; }
.rd-navbar-fixed .rd-navbar-lang a { color: var(--sa-muted) !important; }
.rd-navbar-fixed .rd-navbar-lang a:hover { color: var(--sa-primary) !important; }
.rd-navbar-fixed .rd-navbar-lang span { color: var(--sa-border) !important; }

/* Megamenu y dropdown: fondo blanco normal, texto oscuro
   (esto aplica igual en mobile y desktop porque al desplegarse
    siempre tienen fondo blanco) */
.rd-navbar-megamenu,
.rd-navbar-dropdown {
  background: #ffffff !important;
  border: 1px solid var(--sa-border);
  box-shadow: var(--sa-shadow-md);
}
.rd-megamenu-list-link,
.rd-dropdown-link {
  color: var(--sa-text) !important;
}
.rd-megamenu-list-link:hover,
.rd-dropdown-link:hover {
  color: var(--sa-primary) !important;
  background: rgba(13, 110, 253, 0.06) !important;
}

/* Hamburguesa (mobile) en azul */
.rd-navbar-toggle span,
.rd-navbar-toggle span::before,
.rd-navbar-toggle span::after {
  background: var(--sa-primary) !important;
}

/* Aside elements */
.rd-navbar-aside .link-default { color: var(--sa-text) !important; }
.rd-navbar-aside .icon-modern { color: var(--sa-primary) !important; }

/* === FIX MEGAMENU (Sistemas / Servicios) ===
   Los megamenús son más anchos que sus dropdowns hermanos. Sin este fix
   el navegador los ancla al contenedor del navbar (que ahora va full-width)
   y se "topan" a la izquierda de la pantalla. Forzamos que el contexto de
   posicionamiento sea el propio <li> del menú, así caen justo debajo del
   item correspondiente igual que los dropdowns simples. */
.rd-navbar-static .rd-navbar-nav-wrap,
.rd-navbar-static .rd-navbar-nav {
  position: relative;
}
.rd-navbar-static .rd-navbar-nav > .rd-nav-item {
  position: relative !important;
}
.rd-navbar-static .rd-navbar-megamenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  margin-top: 0 !important;
  width: max-content;
  max-width: min(720px, 92vw);
}

/* Para los items que están al final del navbar (Servicios suele ir hacia
   la derecha en pantallas grandes), si su megamenu se sale del viewport
   por la derecha, lo anclamos por la derecha en vez de la izquierda. */
@media (min-width: 1200px) {
  .rd-navbar-static .rd-navbar-nav > .rd-nav-item:nth-last-child(-n+3) > .rd-navbar-megamenu {
    left: auto !important;
    right: 0 !important;
  }
}

/* ============================================================
   HERO MODERNO PARA INDEX (reemplaza el slider de 3 láminas)
   ============================================================ */
.sa-hero {
  position: relative;
  background: linear-gradient(135deg, #0a2540 0%, #0d6efd 55%, #00c2a8 100%);
  color: #fff;
  padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 9vw, 130px);
  overflow: hidden;
  isolation: isolate;
}
.sa-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.18), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(0, 194, 168, 0.32), transparent 50%),
    radial-gradient(circle at 60% 10%, rgba(13, 110, 253, 0.25), transparent 50%);
  z-index: -1;
}
.sa-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  z-index: -1;
  opacity: 0.6;
}
.sa-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 991px) {
  .sa-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.sa-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
  backdrop-filter: blur(10px);
}
.sa-hero__eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
  animation: sa-hero-pulse 2.5s infinite;
}
@keyframes sa-hero-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18); }
  50% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
}
.sa-hero__title {
  font-size: clamp(34px, 5.4vw, 60px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em;
  color: #fff !important;
  margin-bottom: 20px;
}
.sa-hero__title .accent {
  background: linear-gradient(135deg, #ffffff 0%, #a7f3d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sa-hero__lead {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 32px;
  max-width: 540px;
}
.sa-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}
.sa-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform var(--sa-transition), box-shadow var(--sa-transition), background var(--sa-transition);
  cursor: pointer;
}
.sa-hero__btn--primary {
  background: #fff;
  color: var(--sa-primary) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.sa-hero__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
  color: var(--sa-primary-700) !important;
}
.sa-hero__btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
}
.sa-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff !important;
}
.sa-hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
@media (max-width: 575px) {
  .sa-hero__metrics { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
.sa-hero__metric strong {
  display: block;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 6px;
}
.sa-hero__metric span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Visual lateral - tarjetas flotantes */
.sa-hero__visual {
  position: relative;
  min-height: 420px;
}
@media (max-width: 991px) {
  .sa-hero__visual { min-height: 320px; }
}
.sa-hero__card {
  position: absolute;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--sa-radius);
  padding: 18px 22px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.35);
  color: var(--sa-text);
  font-size: 14px;
  animation: sa-float 6s ease-in-out infinite;
}
.sa-hero__card .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sa-grad);
  color: #fff;
  font-size: 18px;
  margin-bottom: 10px;
}
.sa-hero__card strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--sa-text);
}
.sa-hero__card p {
  font-size: 13px;
  color: var(--sa-muted);
  margin: 0;
  line-height: 1.45;
}
.sa-hero__card--1 {
  top: 0;
  left: 0;
  width: 230px;
  animation-delay: 0s;
}
.sa-hero__card--2 {
  top: 35%;
  right: 0;
  width: 250px;
  animation-delay: 1.5s;
}
.sa-hero__card--3 {
  bottom: 0;
  left: 12%;
  width: 230px;
  animation-delay: 3s;
}
@keyframes sa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (max-width: 991px) {
  .sa-hero__visual { display: none; } /* en mobile/tablet ocultamos las cards */
}

/* Trust strip debajo del hero */
.sa-hero-trust {
  background: #fff;
  border-bottom: 1px solid var(--sa-border);
  padding: 22px 0;
}
.sa-hero-trust__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 22px;
}
.sa-hero-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sa-muted);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sa-hero-trust__item .ico {
  font-size: 18px;
  color: var(--sa-primary);
}

/* ============================================================
   FEATURES GRID HOMEPAGE (debajo del hero)
   ============================================================ */
.sa-features {
  padding: clamp(50px, 7vw, 90px) 0;
  background: var(--sa-bg);
}
.sa-features__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
}
.sa-features__head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: var(--sa-text);
}
.sa-features__head p {
  font-size: 16.5px;
  color: var(--sa-muted);
  line-height: 1.6;
}
.sa-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.sa-feature {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  padding: 32px 26px;
  transition: transform var(--sa-transition), box-shadow var(--sa-transition), border-color var(--sa-transition);
  text-decoration: none !important;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
}
.sa-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--sa-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sa-transition);
}
.sa-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--sa-shadow-md);
  border-color: rgba(13, 110, 253, 0.2);
}
.sa-feature:hover::before {
  transform: scaleX(1);
}
.sa-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(0, 194, 168, 0.08));
  color: var(--sa-primary);
  font-size: 26px;
  margin-bottom: 18px;
}
.sa-feature h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  color: var(--sa-text);
}
.sa-feature p {
  font-size: 14.5px;
  color: var(--sa-muted);
  line-height: 1.55;
  margin-bottom: 14px;
}
.sa-feature__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--sa-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--sa-transition);
}
.sa-feature:hover .sa-feature__link { gap: 10px; }