/* =========================================================
   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; }

/* ──────────────────────────────────────────────────────────────
   Ocultar botón scroll-to-top (cuadrado azul atrás del WhatsApp)
   ────────────────────────────────────────────────────────────── */
.ui-to-top { display: none !important; }


/* ──────────────────────────────────────────────────────────────
   AEO: h1 semantico sin cambio visual
   El hero pasó de h2 a h1 y los títulos de página de h3 a h1.
   Estas reglas replican el tamaño anterior para que nada se vea distinto.
   ────────────────────────────────────────────────────────────── */
.sa-ai-hero h1 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 14px;
  position: relative;
  font-size: clamp(24px, 5vw, 36px) !important;
}
h1.sa-title-compat {
  font-size: clamp(20px, 4vw, 28px) !important;
}
.sa-outsourcing-detail h3 {
  color: var(--sa-primary);
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 16px !important;
}


/* ──────────────────────────────────────────────────────────────
   FUERA EL PRELOADER
   El tema tapa toda la pantalla con una capa blanca hasta que
   carga el ultimo archivo, incluido core.min.js (1 MB) y el PNG
   del logo (133 KB). En escritorio dura 1-2 s; en celular con
   datos moviles, bastante mas. Durante todo ese rato el
   visitante no ve el titulo ni los botones.
   El contenido de la pagina ya esta renderizado debajo, asi que
   ocultar esta capa lo muestra de inmediato. No hace falta
   tocar el HTML ni el JS del tema.
   ────────────────────────────────────────────────────────────── */
.preloader,
.preloader::before,
.preloader::after,
.preloader-logo,
.preloader-body {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ──────────────────────────────────────────────────────────────
   HERO EN PANTALLAS ANGOSTAS
   En 360 px el boton de WhatsApp se partia en dos lineas y el
   telefono se cortaba a la mitad. Tambien el texto justificado
   dejaba huecos grandes entre palabras.
   ────────────────────────────────────────────────────────────── */
.sa-ai-hero p { text-align: left !important; }

@media (max-width: 575px) {
  .sa-ai-hero { padding: 26px 20px !important; }
  .sa-ai-hero h1 { font-size: clamp(21px, 6vw, 28px) !important; }
  .sa-ai-hero a[href*="wa.me"],
  .sa-ai-hero a[href*="contactenos"] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  /* El telefono no se debe partir a la mitad */
  .sa-ai-hero p:last-child { font-size: 12px !important; line-height: 1.6 !important; }
}


/* ──────────────────────────────────────────────────────────────
   PIE MAS COMPACTO
   El pie ocupaba casi una pantalla entera. Se baja el espacio
   vertical y se aprieta el interlineado de los enlaces.
   ────────────────────────────────────────────────────────────── */
.footer-advanced .footer-advanced-main {
  padding-top: 42px !important;
  padding-bottom: 28px !important;
}
.footer-advanced .footer-advanced-main h4 {
  font-size: 17px !important;
  margin-bottom: 12px !important;
}
.footer-advanced .footer-advanced-main a {
  display: inline-block;
  line-height: 1.75 !important;
  font-size: 14px !important;
}
.footer-advanced .footer-advanced-aside {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
@media (max-width: 767px) {
  .footer-advanced .footer-advanced-main { padding-top: 30px !important; }
  .footer-advanced .footer-advanced-main .col-sm-6 { margin-bottom: 18px !important; }
}


/* ──────────────────────────────────────────────────────────────
   MENU: PEGADO A LA IZQUIERDA EN CUALQUIER ANCHO
   El tema pone justify-content: space-between en el contenedor,
   asi que en pantallas anchas los items se separan y vuelve el
   hueco de ~278 px entre ES|EN y "Nosotros". Con flex-start el
   menu arranca pegado sin importar el ancho.
   Solo escritorio: en movil el menu es un panel lateral.
   ────────────────────────────────────────────────────────────── */
.rd-navbar-static .rd-navbar-main {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
.rd-navbar-static .rd-navbar-nav-wrap {
  float: none !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
}
.rd-navbar-static .rd-navbar-lang {
  margin-left: 0 !important;
  margin-right: 10px !important;
  padding: 0 10px 0 0 !important;
  flex: 0 0 auto !important;
}
.rd-navbar-static .rd-navbar-nav {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  width: auto !important;
}
.rd-navbar-static .rd-navbar-nav > .rd-nav-item {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}
.rd-navbar-static .rd-navbar-nav > .rd-nav-item > .rd-nav-link {
  padding-left: 13px !important;
  padding-right: 13px !important;
  white-space: nowrap !important;
}
@media (min-width: 1600px) {
  .rd-navbar-static .rd-navbar-nav > .rd-nav-item > .rd-nav-link {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   MEGAMENU DE SERVICIOS QUE SE SALIA POR ABAJO
   Servicios mide ~566 px de alto y arranca a 194 px del borde.
   En una laptop de 1366x768 los ultimos dos enlaces quedaban
   fuera de la pantalla. Se pasa a tres columnas y se limita la
   altura con scroll propio por si acaso.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .rd-navbar-static .rd-navbar-megamenu {
    max-height: calc(100vh - 210px) !important;
    overflow-y: auto !important;
  }
  .rd-navbar-static .rd-navbar-megamenu > .rd-megamenu-item {
    width: 33.333% !important;
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   UNETENOS SE SALIA 26 px POR LA DERECHA
   Es el ultimo item del menu, asi que su desplegable debe
   anclarse por la derecha y no por la izquierda.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .rd-navbar-static .rd-navbar-nav > .rd-nav-item:last-child > .rd-navbar-dropdown,
  .rd-navbar-static .rd-navbar-nav > .rd-nav-item:nth-last-child(2) > .rd-navbar-dropdown {
    left: auto !important;
    right: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   EL BOTON FLOTANTE DE WHATSAPP TAPABA EL MEGAMENU
   Se baja por debajo del navbar, que va en z-index alto.
   ────────────────────────────────────────────────────────────── */
.wa-float, .whatsapp-float, #whatsapp-float, .sa-wa-float {
  z-index: 900 !important;
}
.rd-navbar-static .rd-navbar-main-outer,
.rd-navbar-static .rd-menu {
  z-index: 1000 !important;
}


/* ──────────────────────────────────────────────────────────────
   MEGAMENU DETRAS DEL CONTENIDO
   El desplegable de Sistemas y Servicios se abria por debajo de
   la seccion de la pagina: se veian los enlaces borrosos atras
   del texto. El tema le da z-index 1080 a .rd-navbar-outer, pero
   .rd-navbar-main-outer queda en position static, asi que ese
   z-index no aplica y el contenido gana.
   Se fija el contexto de apilado en el header y se sube el menu
   por encima de todo lo de la pagina.
   ────────────────────────────────────────────────────────────── */
header.page-header,
.rd-navbar-wrap,
.rd-navbar-outer,
.rd-navbar-static .rd-navbar-main-outer,
.rd-navbar-static .rd-navbar-main {
  position: relative !important;
  z-index: 1080 !important;
}
.rd-navbar-static .rd-menu,
.rd-navbar-static .rd-navbar-megamenu,
.rd-navbar-static .rd-navbar-dropdown {
  z-index: 1090 !important;
}

/* Fondo solido y opaco: sin esto se transparenta sobre el texto. */
.rd-navbar-static .rd-navbar-megamenu,
.rd-navbar-static .rd-navbar-dropdown,
.rd-navbar-megamenu,
.rd-navbar-dropdown {
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
}
.rd-navbar-static .rd-megamenu-item,
.rd-navbar-static .rd-megamenu-list {
  background: transparent !important;
}

/* El tema pinta los enlaces en gris claro porque contaba con fondo
   oscuro (#2d3742). Sobre blanco no se leen. */
.rd-navbar-static .rd-megamenu-list li > a,
.rd-navbar-static .rd-navbar-dropdown li > a,
.rd-megamenu-list-link,
.rd-dropdown-link {
  color: #1f2937 !important;
}
.rd-navbar-static .rd-megamenu-list li > a:hover,
.rd-navbar-static .rd-navbar-dropdown li > a:hover,
.rd-megamenu-list-link:hover,
.rd-dropdown-link:hover {
  color: #0d6efd !important;
  background: rgba(13, 110, 253, .06) !important;
}
/* La flechita que el tema inserta antes del enlace tambien era blanca. */
.rd-navbar-static .rd-megamenu-list li > a::before,
.rd-navbar-static .rd-navbar-dropdown li > a::before {
  color: #0d6efd !important;
}
/* Titulo de cada columna del megamenu. */
.rd-navbar-static .rd-megamenu-title {
  color: #6b7280 !important;
  border-bottom-color: rgba(15, 22, 32, .08) !important;
}


/* ──────────────────────────────────────────────────────────────
   TEXTO JUSTIFICADO EN LAS DESCRIPCIONES
   style.css trae `.container p { text-align: justify; }`. En una
   columna angosta eso abre huecos grandes entre palabras y en
   celular parte las frases de forma rara. Se alinea a la
   izquierda, que es como se lee mejor.
   ────────────────────────────────────────────────────────────── */
.container p,
.container li,
.container td,
.sa-outsourcing-detail p,
.sa-ai-card p {
  text-align: left;
}

/* ──────────────────────────────────────────────────────────────
   TITULOS Y PARRAFOS PEGADOS
   style.css trae `p { margin: 0 }` y los h2/h3/h4 del contenido
   quedan con margen cero arriba y abajo. El tema contaba con que
   cada bloque llevara clases de separacion (offset-top-*), pero
   las paginas de contenido no las usan, asi que los titulos se
   encaraman sobre el parrafo anterior y los parrafos se pegan
   entre si.
   Se limita a `section .container`: no toca el menu (va en
   <header>) ni el pie (va en <footer>).
   ────────────────────────────────────────────────────────────── */
section .container h2,
section .container h3,
section .container h4 {
  margin-top: 36px;
  margin-bottom: 14px;
}
/* Solo el titulo que abre la columna, no todos. */
section .container h2:first-child,
section .container h3:first-child,
section .container h4:first-child,
section .container .sa-ai-hero + h3,
section .container .sa-ai-hero + h2 {
  margin-top: 0;
}
section .container p {
  margin-bottom: 15px;
  line-height: 1.7;
}
section .container p:last-child { margin-bottom: 0; }

section .container ul,
section .container ol {
  margin-top: 4px;
  margin-bottom: 18px;
}
section .container li { margin-bottom: 7px; }
section .container li:last-child { margin-bottom: 0; }

/* El recuadro de color del encabezado necesita separarse del titulo
   que viene despues. */
.sa-ai-hero { margin-bottom: 34px; }
.sa-ai-hero h1 { margin-top: 0 !important; }
.sa-ai-hero p { margin-bottom: 0; }

/* Las tarjetas de preguntas frecuentes: el titulo adentro no debe
   heredar el margen grande de arriba. */
.sa-outsourcing-detail h3,
.sa-ai-card h3,
.sa-ai-card h4 { margin-top: 0 !important; margin-bottom: 8px !important; }
.sa-outsourcing-detail p:last-child,
.sa-ai-card p:last-child { margin-bottom: 0; }

/* El h3 que abre una tarjeta de detalle tampoco. */
.sa-outsourcing-detail { margin: 16px 0; }


/* ──────────────────────────────────────────────────────────────
   MEGAMENU DEMASIADO GRANDE
   Una regla anterior forzaba las columnas a 33.333% pensando en
   un megamenu de tres columnas. Solo hay dos, asi que un tercio
   del recuadro quedaba vacio: el de Servicios medía 750x600 px
   con apenas 462 px de contenido, y tapaba media pantalla.
   Ahora el recuadro se ajusta a lo que hay adentro y las filas
   van mas juntas.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .rd-navbar-static .rd-navbar-megamenu {
    width: max-content !important;
    max-width: min(660px, 90vw) !important;
    max-height: calc(100vh - 185px) !important;
    padding: 16px 24px !important;
    border-radius: 0 0 10px 10px;
  }
  /* Las columnas se miden por su contenido, no por un porcentaje fijo. */
  .rd-navbar-static .rd-navbar-megamenu > .rd-megamenu-item {
    width: auto !important;
    max-width: none !important;
    flex: 0 1 auto !important;
    min-width: 190px;
  }
  .rd-navbar-static .rd-megamenu-item + .rd-megamenu-item {
    padding-left: 28px !important;
  }
  /* Filas mas compactas: 16 px y mucho interlineado hacian la
     columna de Servicios de 600 px de alto. */
  .rd-navbar-static .rd-megamenu-list-link,
  .rd-navbar-static .rd-megamenu-list li > a,
  .rd-navbar-static .rd-navbar-dropdown li > a {
    font-size: 14px !important;
    line-height: 1.35 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .rd-navbar-static .rd-megamenu-list-item + .rd-megamenu-list-item,
  .rd-navbar-static .rd-dropdown-item + .rd-dropdown-item {
    margin-top: 2px !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   CONTENIDO PLANO
   Tres cosas hacian que el cuerpo se leyera como un bloque:
   1. El tema deja las listas sin viñeta, sin sangria y pegadas
      (`ul{list-style:none;padding:0}` + `li{display:block}`), asi
      que siete pasos seguidos parecen un parrafo largo.
   2. El <strong> que abre cada punto sale en gris lavado
      (#74757f), mas claro que el texto normal, cuando deberia
      ser lo que mas resalta.
   3. La columna mide 825 px: a 16 px eso son ~110 caracteres por
      linea, muy por encima de lo comodo para leer.
   ────────────────────────────────────────────────────────────── */

/* 1. Listas con viñeta propia y aire entre puntos. */
section .container ul:not([class]) > li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 13px;
}
section .container ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sa-primary);
  opacity: .5;
}
section .container ol:not([class]) {
  list-style: decimal;
  padding-left: 26px;
}
section .container ol:not([class]) > li { display: list-item; margin-bottom: 13px; }

/* 2. El rotulo en negrita es lo que guia la lectura: que resalte. */
section .container li > strong:first-child,
section .container p > strong:first-child {
  color: var(--sa-text);
}
section .container strong,
section .container b { color: var(--sa-text); }

/* 3. Medida de lectura. 72ch son unos 70-75 caracteres por linea,
   que es donde el ojo encuentra el renglon siguiente sin perderse.
   Solo al texto corrido: las tarjetas y las tablas siguen a lo ancho. */
section .container > .row > [class*="col-"] > p,
section .container > .row > [class*="col-"] > ul,
section .container > .row > [class*="col-"] > ol {
  max-width: 72ch;
}

/* 4. Jerarquia de titulos: el h3 del tema pesa 400, casi lo mismo
   que el cuerpo. Con 600 y un poco mas apretado se distingue. */
section .container h2.wow-outer,
section .container h3.wow-outer {
  font-weight: 600 !important;
  letter-spacing: -.015em;
  line-height: 1.25 !important;
}
section .container h3.wow-outer { font-size: clamp(22px, 2.2vw, 30px) !important; }

/* 5. El primer parrafo despues de un titulo entra un punto mas
   grande: le da entrada a la seccion. */
section .container h2.wow-outer + p,
section .container h3.wow-outer + p {
  font-size: 17px;
  color: #374151;
}