/* ==========================================================================
   TSTI / RiskTech — Design tokens
   Fuente: Manual de marca Todosistemas STI
   ========================================================================== */

:root {
  /* Colores de marca */
  --color-navy-950: #01091e;
  --color-navy-900: #05143f;
  --color-navy-800: #0a1c4d;
  --color-teal-600: #00a285;
  --color-green-500: #03cf88;
  --color-green-400: #1ee39d;

  --color-white: #ffffff;
  --color-off-white: #f4f6fa;
  --color-ink: #0d1526;
  --color-ink-soft: #4b5468;
  --color-border: #e5e8f0;
  --color-border-dark: rgba(255, 255, 255, 0.12);

  /* Gradientes */
  --gradient-brand: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-green-500) 100%);
  --gradient-navy: linear-gradient(160deg, var(--color-navy-900) 0%, var(--color-navy-950) 100%);
  --gradient-card-dark: linear-gradient(160deg, #0c2255 0%, var(--color-navy-950) 100%);

  /* Tipografía */
  --font-base: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Tamaños subidos para que en escritorio se acerquen a los de
     risktech.com.co (H1 ~70px, H2 ~40px, H3 ~28px, texto lead ~20px). */
  --fs-h1: clamp(2.2rem, 1.3rem + 4vw, 4.4rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.95rem;

  /* Espaciado */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Efectos */
  --shadow-sm: 0 4px 14px rgba(4, 12, 34, 0.08);
  --shadow-md: 0 12px 32px rgba(4, 12, 34, 0.12);
  --shadow-lg: 0 24px 60px rgba(1, 9, 30, 0.35);
  --transition-fast: 180ms ease;
  --transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);

  --header-h: 84px;
}
/* ==========================================================================
   Reset & base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* `clip` sí recorta el menú móvil, que es position:fixed; `hidden` no lo
     hace y dejaba un scroll horizontal residual. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `overflow-x` en `body` rompe `position: sticky` del header (crea su
     propio contexto de scroll). El recorte horizontal ya lo hace `html`. */
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Tamaño base de los títulos de sección; los bloques que necesiten
   otra escala lo sobrescriben puntualmente. */
h2 {
  font-size: var(--fs-h2);
}

:focus-visible {
  outline: 2px solid var(--color-green-500);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
  background: var(--color-green-500);
  color: var(--color-navy-950);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

.section--tight {
  padding-block: var(--space-xl);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-xl);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-600);
  margin-bottom: var(--space-sm);
}

.text-lead {
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
}

.text-on-dark {
  color: rgba(255, 255, 255, 0.78);
}

.accent {
  color: var(--color-green-500);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid transparent;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.btn:hover svg {
  transform: translate(2px, -2px);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--gradient-brand);
  color: var(--color-navy-950);
  box-shadow: 0 10px 24px rgba(3, 207, 136, 0.28);
}

.btn--primary:hover {
  box-shadow: 0 14px 30px rgba(3, 207, 136, 0.4);
  transform: translateY(-2px);
}

.btn--ghost {
  background: var(--color-white);
  color: var(--color-navy-950);
  border-color: rgba(1, 9, 30, 0.12);
}

.btn--ghost:hover {
  border-color: var(--color-teal-600);
  color: var(--color-teal-600);
  transform: translateY(-2px);
}

.btn--outline-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--outline-light:hover {
  border-color: var(--color-green-500);
  color: var(--color-green-500);
  transform: translateY(-2px);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
}

/* ==========================================================================
   Reveal animation
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* ==========================================================================
   Fondos decorativos (patrón de triángulos de marca)
   ========================================================================== */

.pattern-triangles {
  position: relative;
  isolation: isolate;
}

/* Fondo de marca (AVIF con fallback WebP). El degradado ya viene en la imagen. */
.pattern-triangles::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../assets/img/fondos/hero-bg-1600.webp");
  background-image: image-set(
    url("../assets/img/fondos/hero-bg-1600.avif") type("image/avif"),
    url("../assets/img/fondos/hero-bg-1600.webp") type("image/webp")
  );
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  /* Muy tenue: el patrón acompaña, no compite con el texto. */
  opacity: 0.3;
}

@media (max-width: 900px) {
  .pattern-triangles::before {
    background-image: url("../assets/img/fondos/hero-bg-900.webp");
    background-image: image-set(
      url("../assets/img/fondos/hero-bg-900.avif") type("image/avif"),
      url("../assets/img/fondos/hero-bg-900.webp") type("image/webp")
    );
  }
}

/* Banda clara: patrón vectorial sutil, no la imagen oscura del hero.
   Va después del bloque anterior para ganar por orden de cascada. */
.pattern-triangles--light::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%2300a285' fill-opacity='0.5'%3E%3Cpath d='M8 8 L20 16 L8 24 Z'/%3E%3Cpath d='M40 8 L52 16 L40 24 Z'/%3E%3Cpath d='M24 24 L36 32 L24 40 Z'/%3E%3Cpath d='M56 24 L68 32 L56 40 Z' /%3E%3Cpath d='M8 40 L20 48 L8 56 Z'/%3E%3Cpath d='M40 40 L52 48 L40 56 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 64px 64px;
  opacity: 0.5;
}

/* Difuminado de abajo hacia arriba: suaviza el borde inferior del patrón
   para que funda con la sección siguiente. Solo en las variantes oscuras. */
.pattern-triangles:not(.pattern-triangles--light)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--color-navy-950) 0%,
    rgba(1, 9, 30, 0.85) 12%,
    rgba(1, 9, 30, 0.5) 28%,
    rgba(1, 9, 30, 0.2) 45%,
    transparent 62%
  );
}

.pattern-fade-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 40%, var(--color-navy-950) 100%);
}

.pattern-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
/* ==========================================================================
   Header / Navegación
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--transition-base), box-shadow var(--transition-base), height var(--transition-base);
}

.header.is-scrolled {
  background: rgba(1, 9, 30, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(1, 9, 30, 0.25);
  height: 72px;
}

.header--light.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(1, 9, 30, 0.08);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
}

.brand__logo {
  height: 33px;
  width: auto;
  display: block;
  transition: opacity var(--transition-fast);
}

.brand:hover .brand__logo {
  opacity: 0.85;
}

.brand__logo--footer {
  height: 38px;
}

/* Nav principal */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  padding: 0.5rem 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--color-green-500);
  transition: width var(--transition-base);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--color-white);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  width: 100%;
}

.nav__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.nav__item--dropdown:hover .nav__link svg,
.nav__item--dropdown:focus-within .nav__link svg {
  transform: rotate(180deg);
}

/* Dropdown "Soluciones" */
.nav__item--dropdown {
  position: relative;
}

.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 340px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.6rem;
  display: grid;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 20;
}

/* Puente invisible sobre el espacio entre el botón y el panel: sin esto, al
   mover el mouse en línea recta hacia abajo se pierde el :hover justo antes
   de llegar al dropdown y el menú se cierra antes de poder hacer clic. */
.dropdown::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.nav__item--dropdown:hover .dropdown,
.nav__item--dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.dropdown__link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  transition: background var(--transition-fast);
}

.dropdown__link:hover {
  background: var(--color-off-white);
}

.dropdown__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(0, 162, 133, 0.1);
  display: grid;
  place-items: center;
  color: var(--color-teal-600);
}

.dropdown__icon svg {
  width: 18px;
  height: 18px;
}

/* El contenedor del texto debe poder encogerse dentro del flex del enlace,
   si no, el título fuerza el ancho y desborda el cajón en móvil. */
.dropdown__link > span + span {
  min-width: 0;
}

/* Sin `block` el título y la descripción quedan en la misma línea. */
.dropdown__title {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

.dropdown__desc {
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--color-ink-soft);
  margin-top: 2px;
}

/* Submenú anidado dentro del dropdown "Servicios TI" (Outsourcing de TI /
   Transformación digital, cada uno con su propia lista de enlaces) */
.dropdown--nested {
  min-width: 260px;
}

.dropdown__group {
  position: relative;
}

.dropdown__parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* Categorías de nivel 3+ (ej. "Automatización autónoma" dentro de
   "Transformación digital"): mismo trato que un enlace normal, sin negrita,
   para diferenciarlas de las categorías de nivel superior. */
.dropdown__submenu .dropdown__parent {
  font-weight: 400;
}

.dropdown__parent svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-ink-soft);
  transition: color var(--transition-fast);
}

/* `>` (hijo directo) y no descendiente general: si no, al pasar el mouse
   por "Transformación digital" también se resaltaría/abriría el grupo
   anidado "Automatización autónoma" que vive dentro de su panel, sin
   necesidad de pasar el mouse por encima de esa fila. */
.dropdown__group:hover > .dropdown__parent,
.dropdown__group:focus-within > .dropdown__parent {
  background: var(--color-navy-950);
  color: var(--color-green-500);
}

.dropdown__group:hover > .dropdown__parent svg,
.dropdown__group:focus-within > .dropdown__parent svg {
  color: var(--color-green-500);
}

.dropdown__submenu {
  position: absolute;
  top: -0.6rem;
  left: calc(100% + 10px);
  min-width: 260px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.6rem;
  display: grid;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: 21;
}

/* Puente invisible sobre el hueco horizontal entre la fila y el submenú
   (mismo problema/solución que el puente vertical del dropdown de nivel 1). */
.dropdown__submenu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 10px;
  height: 100%;
}

.dropdown__group:hover > .dropdown__submenu,
.dropdown__group:focus-within > .dropdown__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dropdown__sublink {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: 0.85rem;
  transition: background var(--transition-fast);
}

.dropdown__sublink:hover {
  background: var(--color-off-white);
}

.header__cta {
  display: none;
}

/* Acciones a la derecha */
.header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  position: relative;
}

.nav-toggle__bar::before {
  position: absolute;
  top: -6px;
}

.nav-toggle__bar::after {
  position: absolute;
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
  transform: rotate(45deg) translate(4px, 5px);
  background: var(--color-white);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
  transform: rotate(-45deg) translate(4px, -5px);
  background: var(--color-white);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--gradient-navy);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-lg) var(--container-pad);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    gap: 0;
  }

  .nav.is-open {
    transform: translateX(0);
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__item {
    border-bottom: 1px solid var(--color-border-dark);
  }

  .nav__link {
    padding: 1.1rem 0;
    width: 100%;
    justify-content: space-between;
  }

  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
    /* Se ajusta al ancho del cajón en vez de imponer los 340px de escritorio. */
    min-width: 0;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .nav__item--dropdown.is-open .dropdown {
    display: grid;
  }

  /* Las reglas de hover/focus de escritorio viven fuera de media queries y
     tienen más especificidad, así que aquí hay que anular su `translate`:
     al tocar el botón, el foco lo corría media anchura hacia la izquierda. */
  .nav__item--dropdown:hover .dropdown,
  .nav__item--dropdown:focus-within .dropdown {
    transform: none;
  }

  .nav__item--dropdown.is-open .nav__link svg {
    transform: rotate(180deg);
  }

  .dropdown__title {
    color: var(--color-white);
  }

  .dropdown__desc {
    color: rgba(255, 255, 255, 0.6);
  }

  .dropdown__link:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  /* Submenú anidado: en escritorio se abre en flyout al pasar el mouse; en
     móvil no hay hover, así que se convierte en acordeón con clic (JS
     agrega/quita `.is-open` en el `.dropdown__group`, igual que ya hace con
     `.nav__item--dropdown.is-open`). */
  .dropdown__parent {
    color: var(--color-white);
  }

  .dropdown__group:hover > .dropdown__parent,
  .dropdown__group:focus-within > .dropdown__parent {
    background: none;
    color: var(--color-white);
  }

  .dropdown__group:hover > .dropdown__parent svg,
  .dropdown__group:focus-within > .dropdown__parent svg {
    color: var(--color-ink-soft);
  }

  .dropdown__group.is-open > .dropdown__parent {
    color: var(--color-green-500);
  }

  .dropdown__group.is-open > .dropdown__parent svg {
    color: var(--color-green-500);
    transform: rotate(90deg);
  }

  .dropdown__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    box-shadow: none;
    background: none;
    min-width: 0;
    margin: 0.2rem 0 0.4rem 0.75rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--color-border-dark);
  }

  .dropdown__group.is-open > .dropdown__submenu {
    display: grid;
  }

  .dropdown__sublink {
    color: rgba(255, 255, 255, 0.78);
  }

  .dropdown__sublink:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .header__cta {
    display: block;
    margin-top: var(--space-lg);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header__actions .btn--primary.header__cta-desktop {
    display: none;
  }
}
/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--gradient-navy);
  color: var(--color-white);
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(6rem, 10vw, 8.5rem);
  margin-top: calc(var(--header-h) * -1);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  padding-top: var(--header-h);
  display: grid;
  place-items: center;
  min-height: 560px;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.hero__title {
  /* Este título del hero del home se queda en su tamaño original; el resto
     de los h1 del sitio (`--fs-h1`) sí se subieron. */
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero__lead {
  margin: var(--space-md) auto 0;
  max-width: 560px;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.78);
}

.hero__lead strong {
  color: var(--color-white);
  font-weight: 700;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--space-md);
}

.hero__stat {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 210px;
  min-height: 92px;
  background: rgba(1, 9, 30, 0.62);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.6rem;
  backdrop-filter: blur(6px);
  animation: float 6s ease-in-out infinite;
}

.hero__stat strong {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-white);
}

.hero__stat span {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.65);
}

/* Posiciones tomadas del mockup */
.hero__stat--sector {
  left: 2%;
  top: 14%;
  animation-delay: 0s;
}

.hero__stat--years {
  left: 13.5%;
  top: 73%;
  animation-delay: 0.4s;
}

.hero__stat--teams {
  right: 6.3%;
  top: 58%;
  animation-delay: 1s;
}

/* En pantallas medianas el texto del hero ocupa más alto y chocaba con esta
   cifra; se sube a la esquina superior derecha, en espejo con "Sector". */
@media (min-width: 721px) and (max-width: 1280px) {
  .hero__stat--teams {
    top: 14%;
    right: 2%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.hero__clients {
  position: relative;
  z-index: 2;
  padding: var(--space-lg) 0 clamp(3.5rem, 6vw, 5.5rem);
}

.hero__clients .clients-marquee {
  margin-bottom: 0;
}

.hero__curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: auto;
  z-index: 3;
  line-height: 0;
}

.hero__curve svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 720px) {
  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: auto;
  }

  /* El contenido va primero; las cifras fluyen debajo en vez de flotar. */
  .hero__content {
    order: -1;
  }

  .hero__stat {
    position: static;
    margin-top: var(--space-md);
    animation: none;
  }
}
/* ==========================================================================
   Grillas de tarjetas de servicio (Outsourcing, Transformación digital,
   índice de Soluciones)
   ========================================================================== */

.services {
  background: var(--color-white);
  position: relative;
  overflow: hidden;
}

/* Arcos decorativos de la esquina superior izquierda */
.services__lines {
  position: absolute;
  top: -60px;
  left: -80px;
  width: clamp(260px, 34vw, 520px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* Encabezado centrado, arriba de la grilla de tarjetas (no forma parte de
   la grilla): así todas las tarjetas quedan parejas, sin que el texto de
   intro ocupe una celda y desalinee la última fila. */
.services__intro {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.services__intro h2 {
  font-size: var(--fs-h2);
  color: var(--color-ink);
}

.services__intro .text-lead {
  margin-top: var(--space-md);
  margin-inline: auto;
}

/* Grilla de 3 columnas para las tarjetas, pareja en cada fila. Es flex y
   no grid para que una última fila incompleta (p. ej. 5 tarjetas = 3 + 2)
   quede centrada en vez de pegada a la izquierda. --cols define cuántas
   tarjetas caben por fila en cada ancho de pantalla. */
.services__grid {
  --cols: 3;
  --gap: 16px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  max-width: 976px;
  margin-inline: auto;
}

.services__grid > * {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
}

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.6rem;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(4, 12, 34, 0.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

/* Mismo tratamiento (blanca) para todas las tarjetas; al tocar/pasar el
   mouse se resaltan en verde en vez de alternar tarjetas oscuras.
   El :hover queda detrás de (hover: hover) porque en pantallas táctiles
   un ancestro con :hover hace que el primer toque solo dispare el hover
   y haga falta un segundo toque para el click real (bug clásico de
   Safari/iOS) — con esto el primer toque ya abre/navega directo. */
@media (hover: hover) {
  .service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-green-500);
    background: rgba(3, 207, 136, 0.07);
  }
}

.service-card:focus-visible,
.service-card:active {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-green-500);
  background: rgba(3, 207, 136, 0.07);
}

.service-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 162, 133, 0.12);
  color: var(--color-teal-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--transition-base), color var(--transition-base);
}

.service-card__icon svg {
  width: 24px;
  height: 24px;
}

@media (hover: hover) {
  .service-card:hover .service-card__icon {
    background: var(--color-green-500);
    color: var(--color-white);
  }
}

.service-card:focus-visible .service-card__icon,
.service-card:active .service-card__icon {
  background: var(--color-green-500);
  color: var(--color-white);
}

.service-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink);
}

/* El subtítulo va en el mismo color del título, solo más pequeño. */
.service-card__kicker {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink);
  margin-top: 0.35rem;
}

.service-card__desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin-top: 0.9rem;
}

/* Variante con foto: la imagen ocupa el ancho completo arriba, sin el
   padding del resto de la tarjeta (que sí aplica al cuerpo de texto). */
.service-card--photo {
  padding: 0;
  justify-content: flex-start;
  overflow: hidden;
}

.service-card--photo .service-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.service-card--photo .service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

@media (hover: hover) {
  .service-card--photo:hover .service-card__media img {
    transform: scale(1.05);
  }
}

.service-card--photo:focus-visible .service-card__media img {
  transform: scale(1.05);
}

.service-card--photo .service-card__body {
  padding: 1.4rem 1.6rem 1.6rem;
}

/* Tarjeta con el logo del fabricante en lugar de foto (AuraQuantic,
   SoftExpert): fondo blanco, el mismo de los archivos del logo, para que no
   se vea recuadro; el logo va contenido con aire alrededor, en el mismo
   alto que las fotos. */
.service-card--photo .service-card__media--logo {
  display: grid;
  place-items: center;
  padding: 1.5rem 2.5rem;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.service-card--photo .service-card__media--logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Variante expandible: sin clic ni <details> — se despliega solo con pasar
   el mouse (o al tocar, en pantallas táctiles) y se cierra al salir. Cerrada
   solo muestra el título; el despliegue anima el alto con la técnica de
   grid-template-rows 0fr→1fr, sin JS. align-items: flex-start evita que las
   tarjetas vecinas se estiren (con el stretch por defecto del contenedor,
   al abrir una las otras dos quedaban con un hueco en blanco del mismo
   alto): cada tarjeta cambia de tamaño solo cuando es ella la que está
   con el mouse encima. */
.services__grid--collapsible {
  align-items: flex-start;
}

.service-card--collapsible {
  padding: 0;
  min-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.service-card--collapsible:focus-visible {
  outline: 2px solid var(--color-green-500);
  outline-offset: -2px;
}

.service-card--collapsible .service-card__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6rem;
  /* Alto fijo para que las 3 tarjetas midan lo mismo en reposo, sin
     depender de si el kicker alcanza a ocupar una o dos líneas. */
  min-height: 190px;
}

.service-card--collapsible .service-card__icon {
  margin-bottom: 1rem;
}

.service-card--collapsible .service-card__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--transition-base), opacity var(--transition-base);
}

.service-card--collapsible .service-card__panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 1.6rem 1.6rem;
}

.service-card--collapsible:hover .service-card__panel,
.service-card--collapsible:focus-within .service-card__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.service-card--collapsible .service-card__panel .service-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* Estas fotos son ilustraciones 3D sobre fondo blanco sólido (no PNG con
   transparencia). Como la tarjeta también es blanca, "multiply" hace que
   ese blanco se funda con el fondo y solo quede visible la ilustración,
   sin el recuadro de la foto. */
.service-card--collapsible .service-card__panel .service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
}

@media (max-width: 900px) {
  .services__grid {
    --cols: 2;
  }

  .service-card {
    min-height: 260px;
  }

  .service-card--collapsible {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .services__grid {
    --cols: 1;
  }

  .service-card {
    min-height: 0;
  }
}

/* ==========================================================================
   "Implementamos. No solo prometemos."
   ========================================================================== */

.implementation {
  background: var(--color-white);
  position: relative;
  overflow: hidden;
}

/* Abanico decorativo inferior derecho */
.implementation__lines {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: clamp(180px, 22vw, 300px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.implementation__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 460px);
  justify-content: space-between;
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
  max-width: 976px;
  margin-inline: auto;
}

/* Cuando no hay párrafo al lado, el título queda solo y centrado. */
.implementation__head--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.implementation__head h2 {
  font-size: var(--fs-h2);
}

.implementation__head .text-lead {
  font-size: 1rem;
  line-height: 1.55;
}

/* Composición: rombos a la izquierda, lista a la derecha */
.stack {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: 976px;
  margin-inline: auto;
}

.stack__shapes {
  width: 100%;
  height: auto;
}

.stack__items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Calibrado para que cada conector caiga sobre el vértice de su rombo. */
  gap: 26px;
}

.stack__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  /* Paleta atenuada por defecto; el estado activo solo reescribe estas vars. */
  --stack-fg: #b9bec9;
  --stack-icon: #c3c8d2;
  --stack-sub: #b9bec9;
  --stack-bg: transparent;
  --stack-border: transparent;
  --stack-shadow: none;
  background: var(--stack-bg);
  border-color: var(--stack-border);
  box-shadow: var(--stack-shadow);
  color: var(--stack-fg);
  transition: background var(--transition-base), border-color var(--transition-base),
    box-shadow var(--transition-base), color var(--transition-base);
}

/* Conector punteado hacia el rombo correspondiente */
.stack__item::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: clamp(1.5rem, 5vw, 5rem);
  border-top: 2px dashed rgba(0, 162, 133, 0.45);
}

.stack__item::after {
  content: "";
  position: absolute;
  right: calc(100% + clamp(1.5rem, 5vw, 5rem) - 4px);
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-teal-600);
  transform: translateY(-50%);
}

/* Destacado: el marcado inicial, o el elemento señalado con puntero/teclado. */
.stack__item.is-active,
.stack__item:hover,
.stack__item:focus-visible {
  --stack-fg: var(--color-ink);
  --stack-icon: var(--color-navy-950);
  --stack-sub: var(--color-ink-soft);
  --stack-bg: var(--color-white);
  --stack-border: var(--color-border);
  --stack-shadow: 0 4px 18px rgba(4, 12, 34, 0.08);
}

/* Mientras se señala otro elemento, el activo por defecto se atenúa. */
.stack__items:hover .stack__item.is-active:not(:hover),
.stack__items:focus-within .stack__item.is-active:not(:focus-visible):not(:hover) {
  --stack-fg: #b9bec9;
  --stack-icon: #c3c8d2;
  --stack-sub: #b9bec9;
  --stack-bg: transparent;
  --stack-border: transparent;
  --stack-shadow: none;
}

.stack__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--stack-icon);
  transition: color var(--transition-base);
}

.stack__text strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--stack-fg);
  transition: color var(--transition-base);
}

.stack__text span {
  display: block;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 0.3rem;
  color: var(--stack-sub);
  transition: color var(--transition-base);
}

@media (max-width: 900px) {
  .implementation__head {
    grid-template-columns: 1fr;
  }

  .stack {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .stack__shapes {
    max-width: 340px;
    margin-inline: auto;
  }

  /* Sin rombos al lado, los conectores pierden sentido. */
  .stack__item::before,
  .stack__item::after {
    display: none;
  }

  .stack__item {
    padding: 1rem 0;
  }

  .stack__item.is-active {
    padding: 1.1rem 1.4rem;
  }
}

/* ==========================================================================
   "Empresas que ya operan mejor."
   ========================================================================== */

.testimonials {
  background: var(--gradient-navy);
  color: var(--color-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Las tarjetas claras dentro de la sección oscura no heredan el texto blanco */
.testimonials .value-card {
  color: var(--color-ink);
}

/* Si va pegada a un hero oscuro no debe redondear arriba: se vería la costura. */
.placeholder-hero + .testimonials {
  border-radius: 0;
}

.testimonials__head {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 540px);
  justify-content: space-between;
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
  max-width: 976px;
  margin-inline: auto;
}

.testimonials__head h2 {
  color: var(--color-white);
}

.testimonials__head .text-on-dark {
  font-size: 1rem;
  line-height: 1.55;
}

/* Logos de clientes: carrusel con desplazamiento automático e infinito.
   El track duplica la lista de logos (mismo set dos veces en el HTML) y se
   anima con translateX(-50%): al llegar a la mitad del recorrido ha avanzado
   exactamente un set completo, así que el salto de vuelta al inicio es
   invisible. */
.clients-marquee {
  overflow: hidden;
  width: 100%;
  max-width: 976px;
  margin: 0 auto var(--space-2xl);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.clients {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  width: max-content;
  animation: clients-scroll 26s linear infinite;
}

.clients-marquee:hover .clients {
  animation-play-state: paused;
}

.clients__logo {
  height: 62px;
  width: auto;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity var(--transition-base);
  flex-shrink: 0;
}

.clients__logo:hover {
  opacity: 1;
}

@keyframes clients-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 560px) {
  .clients__logo {
    height: 48px;
  }
}

/* Tarjetas de testimonio */
.testimonial-grid {
  display: grid;
  /* minmax(0, …) evita que el texto largo ensanche una columna sobre las otras. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  /* Ancho suficiente para que el cargo más largo entre en una línea
     junto a la cola del bocadillo. */
  max-width: 920px;
  margin-inline: auto;
}

.testimonial-card {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Burbuja blanca: solo la cita. El autor va fuera, sobre el fondo oscuro. */
.testimonial-card__bubble {
  position: relative;
  flex: 1;
  background: var(--color-white);
  color: var(--color-ink);
  /* Esquina inferior derecha recta: por ahí continúa la cola sin costura. */
  border-radius: 20px 20px 0 20px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Cola del bocadillo: se ancla al pie, así su alto sigue al del autor
   aunque el cargo ocupe dos líneas. */
.testimonial-card__author::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 76px;
  background: var(--color-white);
  border-radius: 0 0 20px 20px;
}

/* Empalme cóncavo entre el borde inferior de la burbuja y la cola:
   un cuadrado blanco al que se le recorta un cuarto de círculo. */
.testimonial-card__author::before {
  content: "";
  position: absolute;
  right: 76px;
  top: 0;
  width: 20px;
  height: 20px;
  background: radial-gradient(
    circle at 0 100%,
    transparent 20px,
    var(--color-white) 20px
  );
}

.testimonial-card__quote {
  width: 34px;
  height: 26px;
  flex-shrink: 0;
  color: var(--color-green-500);
}

.testimonial-card__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink);
}

/* Autor: fuera de la burbuja, en texto claro sobre el navy. */
.testimonial-card__author {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 60px;
  padding-left: 0.875rem;
  /* Libera el ancho de la cola (76px) más un respiro. */
  padding-right: 80px;
}

.testimonial-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-white);
  flex-shrink: 0;
}

.testimonial-card__person {
  min-width: 0;
}

/* nowrap mantiene nombre y cargo en una línea, como el mockup; el recorte
   con puntos suspensivos evita que un nombre largo rompa la tarjeta. */
.testimonial-card__person strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El cargo puede incluir la empresa, así que se le permite envolver. */
.testimonial-card__person span {
  display: block;
}

.testimonial-card__person strong {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-white);
}

.testimonial-card__person span {
  font-size: 0.85rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}

/* Las 3 columnas solo caben mientras la tarjeta conserve ~269px; por debajo
   el cargo no entra en una línea junto a la cola, así que se apilan. */
@media (max-width: 1040px) {
  .testimonials__head {
    grid-template-columns: 1fr;
  }

  .clients {
    justify-content: center;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 420px;
  }
}

/* ==========================================================================
   Producto destacado — DocuClick
   ========================================================================== */

.product {
  background: var(--gradient-navy);
  color: var(--color-white);
}

.product__head {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 460px);
  justify-content: space-between;
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
  max-width: 976px;
  margin-inline: auto;
}

.product__head h2 {
  color: var(--color-white);
  line-height: 1.3;
}

/* Sin párrafo, el título y los botones quedan centrados en una sola columna. */
.product__head--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.product__head--center .product__actions {
  justify-content: center;
}

.product__intro .text-lead {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* Los botones van bajo el párrafo, en la columna derecha. */
.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Diagrama: arco, ilustración y etiquetas comparten el mismo sistema de
   coordenadas (1004 x 480), así siguen alineados a cualquier ancho.
   -------------------------------------------------------------------------- */
.docu {
  position: relative;
  /* El diagrama es más ancho que el contenedor de texto, como en el mockup. */
  max-width: 1167px;
  margin-inline: auto;
  aspect-ratio: 1167 / 480;
}

.docu__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.docu__stage {
  position: absolute;
  left: 51.2%;
  top: 56.3%;
  transform: translate(-50%, -50%);
  width: 26%;
  display: grid;
  place-items: center;
}

/* Resplandor con degradado radial: no usa filtros, así no ensucia bordes. */
.docu__glow {
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(3, 207, 136, 0.34) 0%,
    rgba(3, 207, 136, 0.12) 45%,
    transparent 70%
  );
}

.docu__art {
  position: relative;
  width: 100%;
  height: auto;
}

.docu__items {
  position: absolute;
  inset: 0;
}

.docu__item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 12px;
}

.docu__badge {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(3, 207, 136, 0.55);
  background: rgba(1, 9, 30, 0.6);
  display: grid;
  place-items: center;
  color: var(--color-green-500);
}

.docu__badge svg {
  width: 22px;
  height: 22px;
}

.docu__text {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* Uno de los puntos va destacado con recuadro, como en el mockup. */
.docu__item.is-highlight {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(1, 9, 30, 0.55);
  padding: 0.9rem 1.2rem;
}

/* Columna izquierda: el texto va antes del icono y alineado a la derecha. */
.docu__item--l1,
.docu__item--l2,
.docu__item--l3 {
  text-align: right;
  /* El ancla es el centro del icono: se corre el ítem para que calce. */
  transform: translate(calc(-100% + 33px), -50%);
}

.docu__item--r1,
.docu__item--r2,
.docu__item--r3 {
  transform: translate(-33px, -50%);
}

/* Coordenadas tomadas del mockup, en % de la caja del diagrama. */
.docu__item--l1 { left: 30.2%; top: 8.1%; }
.docu__item--l2 { left: 17.1%; top: 36.3%; }
.docu__item--l3 { left: 16.5%; top: 62.3%; }
.docu__item--r1 { left: 71%;   top: 8.3%; }
.docu__item--r2 { left: 85.2%; top: 36.5%; }
.docu__item--r3 { left: 86.3%; top: 62.5%; }

/* --------------------------------------------------------------------------
   Responsive: por debajo de 1040px el diagrama no cabe y pasa a lista.
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .product__head {
    grid-template-columns: 1fr;
  }
}

/* El diagrama con etiquetas necesita ~1210px reales para no recortarse;
   por debajo de eso se muestra como lista. */
@media (max-width: 1200px) {
  .docu {
    aspect-ratio: auto;
    display: grid;
    gap: var(--space-lg);
    justify-items: center;
  }

  .docu__arc {
    display: none;
  }

  .docu__stage {
    position: static;
    transform: none;
    width: min(230px, 60%);
  }

  .docu__items {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
  }

  .docu__item {
    position: static;
    transform: none;
    text-align: left;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(1, 9, 30, 0.45);
    padding: 0.9rem 1rem;
  }

  /* En lista todos los iconos van a la izquierda. */
  .docu__item--l1 .docu__badge,
  .docu__item--l2 .docu__badge,
  .docu__item--l3 .docu__badge {
    order: -1;
  }

  .docu__text {
    white-space: normal;
    font-size: 0.9rem;
  }
}

@media (max-width: 620px) {
  .docu__items {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   "Perspectivas para decisores de operación."
   ========================================================================== */

.blog {
  background: var(--color-white);
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.blog-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--gradient-brand);
}

.blog-card__arrow {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-navy-950);
  color: var(--color-white);
  display: grid;
  place-items: center;
  transition: transform var(--transition-fast);
}

.blog-card__arrow svg {
  width: 16px;
  height: 16px;
}

.blog-card:hover .blog-card__arrow {
  transform: rotate(45deg);
}

.blog-card__body {
  padding: var(--space-md) var(--space-md) var(--space-lg);
}

.blog-card__meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-teal-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.blog-card__title {
  font-size: 1.05rem;
  margin-top: 0.5rem;
  font-weight: 700;
}

.blog-card__desc {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

.blog__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

@media (max-width: 900px) {
  .blog__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .blog__grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Banner CTA
   ========================================================================== */

/* Fondo de triángulos claros a todo lo ancho de la banda. */
.cta-banner-wrap {
  position: relative;
  padding-block: var(--space-2xl);
  background-color: var(--color-white);
  background-image: url("../assets/img/fondos/cta-bg-1920.webp");
  background-image: image-set(
    url("../assets/img/fondos/cta-bg-1920.avif") type("image/avif"),
    url("../assets/img/fondos/cta-bg-1920.webp") type("image/webp")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media (max-width: 1000px) {
  .cta-banner-wrap {
    background-image: url("../assets/img/fondos/cta-bg-1000.webp");
    background-image: image-set(
      url("../assets/img/fondos/cta-bg-1000.avif") type("image/avif"),
      url("../assets/img/fondos/cta-bg-1000.webp") type("image/webp")
    );
  }
}

.cta-banner {
  position: relative;
  /* En el mockup el recuadro deja ver el patrón a ambos lados. */
  max-width: 880px;
  margin-inline: auto;
  /* Navy plano con una insinuación de verde abajo a la izquierda. */
  background:
    radial-gradient(120% 140% at 8% 100%, rgba(0, 122, 88, 0.55) 0%, transparent 55%),
    linear-gradient(160deg, #071a3a 0%, var(--color-navy-950) 60%);
  border-radius: 24px;
  padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  color: var(--color-white);
  overflow: hidden;
}

.cta-banner__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.cta-banner h2 {
  font-size: var(--fs-h2);
  color: var(--color-white);
}

.cta-banner p {
  margin-top: var(--space-sm);
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.55;
}

.cta-banner p strong {
  color: var(--color-white);
  font-weight: 700;
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--space-lg);
}

/* El botón principal lleva un halo verde, como en el mockup. */
.cta-banner .btn--primary {
  box-shadow: 0 0 34px rgba(3, 207, 136, 0.5), 0 10px 24px rgba(3, 207, 136, 0.28);
}

.cta-banner .btn--primary:hover {
  box-shadow: 0 0 42px rgba(3, 207, 136, 0.65), 0 14px 30px rgba(3, 207, 136, 0.4);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--color-navy-950);
  color: var(--color-white);
  padding-top: var(--space-2xl);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border-dark);
  margin-bottom: var(--space-xl);
}

.footer__top h2 {
  font-size: var(--fs-h2);
  color: var(--color-white);
  max-width: 480px;
}

.footer__top-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.footer__top-copy p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 420px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.footer__brand p {
  margin-top: var(--space-md);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
  max-width: 320px;
}

.footer__heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-green-500);
  margin-bottom: var(--space-md);
}

.footer__list {
  display: grid;
  gap: 0.65rem;
}

.footer__list a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition-fast);
}

.footer__list a:hover {
  color: var(--color-green-500);
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.85rem;
}

.footer__contact-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-green-500);
  flex-shrink: 0;
}

.footer__socials {
  display: flex;
  gap: 0.6rem;
  margin: var(--space-md) 0;
}

.footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  display: grid;
  place-items: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.footer__social-link:hover {
  background: var(--color-green-500);
  border-color: var(--color-green-500);
  color: var(--color-navy-950);
}

.footer__social-link svg {
  width: 16px;
  height: 16px;
}

.footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-sm);
}

/* Sellos reales de certificación (ISO 9001 / ISO 27001): el sello ya trae
   su propia tarjeta blanca con borde, así que aquí no se le agrega otro
   fondo encima (eso duplicaba la caja). Tamaño ajustado para que los dos
   quepan uno al lado del otro dentro de la columna "Contacto" del footer
   (~240px de ancho en escritorio angosto) sin que se bajen de línea. */
.footer__badge {
  height: 60px;
  display: grid;
  place-items: center;
}

.footer__badge img {
  height: 58px;
  width: auto;
  display: block;
}

.footer__bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-block: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer__bottom a:hover {
  color: var(--color-green-500);
}

@media (max-width: 980px) {
  .footer__top {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Utilidades varias
   ========================================================================== */

.whatsapp-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--color-white);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4);
  transition: transform var(--transition-fast);
}

.whatsapp-fab:hover {
  transform: scale(1.08);
}

.whatsapp-fab svg {
  width: 28px;
  height: 28px;
}

/* Página placeholder (subpáginas aún no diseñadas en el mockup) */
.placeholder-hero {
  background: var(--gradient-navy);
  color: var(--color-white);
  padding-top: calc(var(--header-h) + var(--space-2xl));
  padding-bottom: var(--space-2xl);
  margin-top: calc(var(--header-h) * -1);
  text-align: center;
}

.placeholder-hero .eyebrow {
  justify-content: center;
  color: var(--color-green-500);
}

.placeholder-hero h1 {
  font-size: var(--fs-h1);
}

.placeholder-hero p {
  max-width: 560px;
  margin: var(--space-md) auto 0;
  color: rgba(255, 255, 255, 0.75);
}

.placeholder-hero .btn {
  margin-top: var(--space-lg);
}

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.placeholder-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.placeholder-card svg {
  width: 32px;
  height: 32px;
  color: var(--color-teal-600);
  margin-bottom: var(--space-md);
}

.placeholder-card h3 {
  font-size: 1.05rem;
}

.placeholder-card p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

::selection {
  background: var(--color-green-500);
  color: var(--color-navy-950);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-off-white);
}

::-webkit-scrollbar-thumb {
  background: var(--color-teal-600);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Páginas internas — detalle de solución / contenido secundario
   ========================================================================== */

.solution-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-xl);
}

.solution-detail:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.solution-detail--reverse .solution-detail__visual {
  order: 2;
}

.solution-detail__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: rgba(0, 162, 133, 0.1);
  color: var(--color-teal-600);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-md);
}

.solution-detail__icon svg {
  width: 32px;
  height: 32px;
}

/* Logo del fabricante en vez del ícono (AuraQuantic, SoftExpert). Mismo
   alto que el ícono que reemplaza para no mover el resto del bloque. */
.solution-detail__logo {
  display: block;
  width: auto;
  height: 64px;
  max-width: 100%;
  margin-bottom: var(--space-md);
}

.solution-detail__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-600);
}

.solution-detail h2 {
  font-size: var(--fs-h2);
  margin-top: 0.4rem;
}

.solution-detail p.text-lead {
  margin-top: var(--space-md);
}

.feature-list {
  display: grid;
  gap: 0.85rem;
  margin-top: var(--space-lg);
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}

.feature-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-green-500);
  margin-top: 2px;
}

.solution-detail__visual {
  border-radius: var(--radius-lg);
  background: var(--gradient-card-dark);
  min-height: 320px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.solution-detail__visual svg {
  width: 40%;
  height: 40%;
  color: var(--color-green-500);
  opacity: 0.9;
  filter: drop-shadow(0 0 30px rgba(3, 207, 136, 0.35));
}

/* Variante con foto real en vez del ícono sobre el degradado oscuro. */
.solution-detail__visual--photo {
  padding: 0;
}

.solution-detail__visual--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) {
  .solution-detail,
  .solution-detail--reverse .solution-detail__visual {
    grid-template-columns: 1fr;
    order: initial;
  }

  .solution-detail__visual {
    min-height: 220px;
  }
}

/* Logos reales de certificación (ISO 9001 / ISO 27001) */
.cert-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xl);
  padding-block: var(--space-md);
}

.cert-logos img {
  height: 96px;
  width: auto;
}

@media (max-width: 560px) {
  .cert-logos img {
    height: 72px;
  }
}

/* Cifras / stats en línea */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-lg);
  text-align: center;
  padding-block: var(--space-lg);
}

.stat-row__item strong {
  display: block;
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
  font-weight: 800;
  color: var(--color-green-500);
}

.stat-row__item span {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.stat-row--dark .stat-row__item span {
  color: rgba(255, 255, 255, 0.65);
}

/* Timeline (Nosotros) */
.timeline {
  display: grid;
  gap: var(--space-lg);
  max-width: 760px;
  margin-inline: auto;
}

.timeline__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-md);
}

.timeline__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--color-navy-950);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
}

.timeline__item h3 {
  font-size: 1.05rem;
}

.timeline__item p {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

/* Filtros simples (Blog) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.filter-chip {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: all var(--transition-fast);
}

.filter-chip:hover,
.filter-chip.is-active {
  background: var(--color-navy-950);
  border-color: var(--color-navy-950);
  color: var(--color-white);
}

/* Valores (Nosotros) */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.value-card {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
}

.value-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 162, 133, 0.12);
  color: var(--color-teal-600);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-md);
}

.value-card__icon svg {
  width: 24px;
  height: 24px;
}

.value-card h3 {
  font-size: 1.05rem;
}

.value-card p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

/* Casos de uso: primero el escenario (párrafo), al final la etiqueta en
   negrita con el nombre de la solución. */
.value-card p:first-child {
  margin-top: 0;
}

.value-card p:first-child + h3 {
  margin-top: 0.75rem;
}

/* Banda de RiskTech en el home: empresa aliada en prevención de fraude y AML.
   Usa los colores de RiskTech (coral y azul) y lista sus 4 productos. */
.rt-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
}

.rt-band__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(108, 99, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(255, 101, 84, 0.18), transparent 70%),
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1.5px) 0 0 / 28px 28px,
    linear-gradient(160deg, #001629 0%, #00223f 55%, #0a2f52 100%);
  color: #fff;
  box-shadow: 0 24px 50px rgba(0, 34, 63, 0.25);
}

.rt-band__logo {
  width: 180px;
  height: auto;
  margin-bottom: var(--space-lg);
}

.rt-band__kicker {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: #ff6554;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Degradado de la marca RiskTech: violeta, coral y dorado */
.rt-band__grad {
  background: linear-gradient(90deg, #8f88ff 0%, #ff8577 55%, #f5b841 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rt-band h2 {
  margin-top: 0.9rem;
  color: #fff;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
}

.rt-band__hero p {
  margin-top: 0.6rem;
  color: rgba(255, 255, 255, 0.85);
}

.rt-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: #ff6554;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(255, 101, 84, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rt-band__btn svg { width: 18px; height: 18px; }

.rt-band__btn:hover,
.rt-band__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(255, 101, 84, 0.45);
}

.rt-band__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rt-prod {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid #e3e7ef;
  background: #fff;
  color: #0b1b2e;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.rt-prod:hover,
.rt-prod:focus-visible {
  border-color: #ff6554;
  transform: translateX(4px);
  box-shadow: 0 12px 28px rgba(0, 34, 63, 0.08);
}

.rt-prod__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #f6f7fb;
}

.rt-prod__icon img { width: 40px; height: 40px; object-fit: contain; }

.rt-prod__body { flex: 1; display: flex; flex-direction: column; }

.rt-prod__body small {
  color: #ff6554;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rt-prod__body b { font-size: 1.05rem; }

.rt-prod__body span { color: #5b6b80; font-size: 0.9rem; }

.rt-prod > svg { flex-shrink: 0; width: 20px; height: 20px; color: #0b1b2e; }

@media (max-width: 900px) {
  .rt-band { grid-template-columns: 1fr; }
  .rt-band__btn { margin-top: var(--space-lg); }
}

@media (max-width: 560px) {
  .rt-band__hero { padding: var(--space-lg); }
  .rt-prod { padding: var(--space-md); }
  .rt-prod__icon { width: 52px; height: 52px; }
}

/* Componentes de una suite (p. ej. los 16 de SoftExpert): pestañas con la
   sigla y el nombre; cada panel muestra la pantalla del componente y su
   descripción. La sigla usa .module-card__code. */
.setabs {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: 0 18px 40px -28px rgba(1, 9, 30, 0.35);
}

.setabs__list {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.setabs__tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 220px;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-off-white);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.setabs__tab b { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-teal-600); }

.setabs__tab:hover { background: rgba(3, 207, 136, 0.12); }

.setabs__tab[aria-selected="true"] { background: var(--gradient-brand); color: var(--color-navy-950); font-weight: 600; }
.setabs__tab[aria-selected="true"] b { color: var(--color-navy-950); }

.setabs__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  margin-top: var(--space-lg);
}

.setabs__panel[hidden] { display: none; }

.setabs__panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 40px -24px rgba(1, 9, 30, 0.35);
}

.setabs__panel h3 { margin-top: 0.75rem; font-size: var(--fs-h3); }

.setabs__panel p { margin-top: 0.75rem; color: var(--color-ink-soft); }

@media (max-width: 820px) {
  .setabs { padding: var(--space-md); }
  .setabs__panel { grid-template-columns: 1fr; gap: var(--space-md); }
}

.module-card__code {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 162, 133, 0.12);
  color: var(--color-teal-600);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   FAQ — acordeón nativo con <details>/<summary>, sin JS
   ========================================================================== */
.faq {
  display: grid;
  gap: 0.9rem;
  max-width: 760px;
  margin-inline: auto;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding-inline: var(--space-lg);
  background: var(--color-white);
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-teal-600);
  transition: transform var(--transition-fast);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item p {
  padding-bottom: var(--space-md);
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}

/* ==========================================================================
   Video / demo — placeholder visual mientras no hay grabación real
   ========================================================================== */
.video-placeholder {
  border-radius: var(--radius-lg);
  background: var(--gradient-card-dark);
  min-height: 320px;
  display: grid;
  place-items: center;
  gap: var(--space-md);
  text-align: center;
  color: var(--color-white);
}

.video-placeholder__play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: grid;
  place-items: center;
}

.video-placeholder__play svg {
  width: 28px;
  height: 28px;
  color: var(--color-green-500);
}

.video-placeholder span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   Formulario de contacto
   ========================================================================== */
.contact-form {
  display: grid;
  gap: var(--space-md);
  max-width: 640px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-field {
  display: grid;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-off-white);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-teal-600);
  outline-offset: 1px;
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-field__optional {
  font-weight: 400;
  color: var(--color-ink-soft);
}

.form-field input::placeholder {
  color: #8a92a6;
}

.form-field.is-invalid input,
.form-field.is-invalid select {
  border-color: #d64545;
  background: var(--color-white);
  box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.12);
}

.form-field__error {
  font-size: 0.85rem;
  color: #d64545;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  cursor: pointer;
}

.form-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-teal-600);
  cursor: pointer;
}

.form-check a {
  color: var(--color-ink);
  text-decoration: underline;
}

.form-check.is-invalid span {
  color: #d64545;
}

/* El mensaje de la casilla va pegado a ella, no con el espacio de la grilla */
.form-check + .form-field__error {
  margin-top: calc(var(--space-md) * -0.7);
}

.contact-form__submit {
  width: 100%;
  justify-content: center;
}

.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Mensaje de envío: enviando / enviado / error */
.contact-form__status {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.contact-form__status[data-type="success"] {
  color: var(--color-teal-600);
  font-weight: 500;
}

.contact-form__status[data-type="error"] {
  color: #d64545;
}

.contact-form__submit svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Profundidad extra en cards existentes (más sombreado, más "vivo")
   ========================================================================== */
.value-card {
  box-shadow: 0 4px 16px rgba(4, 12, 34, 0.05);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

/* Mismo resaltado verde que las tarjetas de servicio, para que todas las
   "cuadritos" del sitio se comporten igual al tocarlas/pasar el mouse. */
.value-card:hover,
.value-card:focus-visible,
.value-card:active {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(4, 12, 34, 0.1);
  border-color: var(--color-green-500);
  background: rgba(3, 207, 136, 0.07);
}

.value-card:hover .value-card__icon,
.value-card:focus-visible .value-card__icon,
.value-card:active .value-card__icon {
  background: var(--color-green-500);
  color: var(--color-white);
}

/* Los stat-row pasan de texto plano a "cuadritos" con sombra */
.stat-row__item {
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  box-shadow: 0 4px 14px rgba(4, 12, 34, 0.05);
}

.stat-row--dark .stat-row__item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

/* ==========================================================================
   Badge numerado en el stack del home ("Implementamos")
   ========================================================================== */
.stack__num {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.8rem;
  background: rgba(3, 207, 136, 0.12);
  color: var(--stack-icon);
  transition: background var(--transition-base), color var(--transition-base);
}

.stack__item.is-active .stack__num,
.stack__item:hover .stack__num,
.stack__item:focus-visible .stack__num {
  background: var(--gradient-brand);
  color: var(--color-navy-950);
}

/* ==========================================================================
   Steps card — tarjeta oscura con pasos numerados ("cómo funciona")
   ========================================================================== */
.steps-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--gradient-card-dark);
  padding: var(--space-xl) var(--space-lg);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(1, 9, 30, 0.35);
}

.steps-card::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(3, 207, 136, 0.35), transparent 70%);
  top: 50%;
  right: -90px;
  transform: translateY(-50%);
  filter: blur(6px);
  pointer-events: none;
}

.steps-card__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.steps-card__num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(3, 207, 136, 0.15);
  border: 1px solid rgba(3, 207, 136, 0.4);
  color: var(--color-green-500);
  font-weight: 800;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}

.steps-card__item span {
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}