/* ==========================================================================
   SOFTGRADE - Design System v2.0
   Inspirado en diseño tech moderno
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors - Softgrade */
  --color-primary: #FF6E00;
  --color-primary-light: #FF8A33;
  --color-primary-dark: #E56200;
  --color-secondary: #01619E;
  --color-secondary-light: #0277BD;
  --color-secondary-dark: #014D7E;
  --color-accent: #A0CE4E;
  --color-accent-dark: #8BBF3D;

  /* Gradients */
  --gradient-hero: linear-gradient(100deg, #FF6E00 0%, #E55D00 40%, #CC4400 70%, #A03300 100%);
  --gradient-hero-alt: linear-gradient(180deg, #FF6E00 0%, #E56200 100%);
  --gradient-dark: linear-gradient(135deg, #0a1628 0%, #1a2d4a 100%);
  --gradient-sidebar: linear-gradient(180deg, #FF8A33 0%, #FF6E00 50%, #E56200 100%);

  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-dark: #0a1628;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #BDBDBD;
  --color-gray-500: #9E9E9E;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;

  /* Badge Colors */
  --badge-orange: #FF6E00;
  --badge-green: #2E7D32;
  --badge-blue: #01619E;
  --badge-teal: #00897B;
  --badge-purple: #7B1FA2;

  /* Alto de lo que va FIJO arriba. Vive aqui y en un solo sitio porque 46
     paginas lo compensan con un padding-top: antes ese 80 estaba escrito a
     mano en cada una, y cambiar la cabecera obligaba a tocar las 46. */
  --alto-barra: 34px;
  --alto-cabecera: 114px;   /* 34 de la barra + 80 del header */

  /* Typography  ·  cambiada el 9-sep-2026, aprobada por Fer sobre la maqueta.
     Poppins es la fuente que usa medio internet y aplanaba el mensaje. Archivo
     pesa en los titulares, IBM Plex Sans aguanta un articulo de 2,000 palabras
     y el monoespaciado es el idioma de los documentos controlados que Softgrade
     produce todos los dias: codigos, clausulas, folios. Los tres fallbacks son
     reales: si Google Fonts no carga, la pagina no se cae a Times. */
  --font-heading: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Font Sizes - Fluid (scaled down for better readability) */
  --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.35vw, 1.1rem);
  --text-xl: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-2xl: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  --text-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-4xl: clamp(1.85rem, 1.5rem + 1.75vw, 2.75rem);
  --text-5xl: clamp(2.25rem, 1.75rem + 3vw, 3.5rem);
  --text-6xl: clamp(2.75rem, 2rem + 4vw, 4.5rem);

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-slower: 500ms ease;

  /* Z-Index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* Container */
  --container-max: 1280px;
  --container-narrow: 960px;

  /* Background Sections */
  --bg-section: var(--color-gray-100);
  --bg-section-dark: var(--color-dark);
}

/* --------------------------------------------------------------------------
   RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@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;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* `hidden` tiene que ganar SIEMPRE.
   El atributo `hidden` solo vale `display: none` en la hoja del navegador, asi
   que cualquier regla propia con `display: flex` se lo come y el elemento nace
   visible. Pasa en `.sonda__salida` (la lectura de la portada) y en
   `.salida-fondo` (el popup): sin esta linea, los dos aparecen abiertos al
   cargar la pagina. */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  /* Por el token, no a mano: esta linea tenia la pila de Poppins escrita
     literal y se saltaba `--font-heading`, asi que cambiar el token no
     cambiaba ni un titulo del sitio. */
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-style: normal !important;
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-5xl);
  font-weight: 900;
  font-style: normal !important;
}

h2 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  font-family: var(--font-body);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  font-family: var(--font-body);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  font-family: var(--font-body);
}

p {
  margin-bottom: var(--space-4);
  color: var(--color-gray-700);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

strong, b {
  font-weight: var(--font-semibold);
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: var(--space-20) 0;
}

.section--lg {
  padding: var(--space-32) 0;
}

.section--gray {
  background-color: var(--color-gray-100);
}

.section--dark {
  background: var(--gradient-dark);
  color: var(--color-white);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}

.section--dark p {
  color: var(--color-gray-300);
}

.section--primary {
  background: var(--gradient-hero);
  color: var(--color-white);
}

.section--primary h2,
.section--primary h3 {
  color: var(--color-white);
}

.section--primary p {
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   SKIP LINK
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  z-index: var(--z-tooltip);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  /* Debajo de la barra de contacto, no encima: el header es `fixed` y a
     `top: 0` tapaba la barra entera. */
  top: var(--alto-barra);
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.header.scrolled {
  box-shadow: var(--shadow-md);
}

.header__logo-text {
  color: var(--color-gray-900);
}

.header .nav__link {
  color: var(--color-gray-700);
}

.header .nav__link:hover {
  color: var(--color-primary);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
}

.header__logo {
  position: relative;
  display: block;
  text-decoration: none;
}

.header__logo-img {
  height: 40px;
  width: auto;
  transition: opacity 0.3s ease;
}

/* Logo blanco: oculto (header siempre blanco) */
.header__logo-img--white {
  display: none;
}

/* Logo color: visible */
.header__logo-img--color {
  opacity: 1;
}

.header__logo-icon {
  color: var(--color-white);
  transition: color var(--transition-base);
  flex-shrink: 0;
}

.header.scrolled .header__logo-icon {
  color: var(--color-primary);
}

.header__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-white);
  transition: color var(--transition-base);
  font-style: normal;
}

/* Navigation */
.nav {
  display: none;
  align-items: center;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__item {
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-white);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav__link:hover {
  color: var(--color-primary-light);
}

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

.nav__item:hover .nav__link-icon {
  transform: rotate(180deg);
}

/* Dropdown */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: var(--space-3);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}

.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav__dropdown-link:hover {
  background-color: var(--color-gray-100);
  color: var(--color-primary);
}

/* Mobile Menu Toggle */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  gap: 6px;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__line {
  width: 24px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.header.scrolled .nav-toggle__line {
  background-color: var(--color-gray-900);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Navigation */
.nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-white);
  z-index: var(--z-modal);
  padding: var(--space-20) var(--space-6);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
}

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

.nav-mobile__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-mobile__link {
  display: block;
  padding: var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-fast);
}

.nav-mobile__link:hover {
  background-color: var(--color-gray-100);
}

.nav-mobile__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-2xl);
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

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

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--secondary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--secondary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}

.btn--outline:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.btn--outline-dark {
  background-color: transparent;
  color: var(--color-gray-900);
  border: 2px solid var(--color-gray-900);
}

.btn--outline-dark:hover {
  background-color: var(--color-gray-900);
  color: var(--color-white);
}

.btn--lg {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-base);
}

.btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
}

/* Arrow Link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  text-decoration: none;
}

.arrow-link__icon {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-fast);
}

.arrow-link:hover .arrow-link__icon {
  transform: translateX(4px);
}

.arrow-link--white {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.arrow-link--white:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------------------
   BADGES
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-full);
  background-color: var(--color-gray-200);
  color: var(--color-gray-700);
}

.badge-primary {
  background-color: rgba(255, 110, 0, 0.15);
  color: var(--color-primary-dark);
}

.badge-secondary {
  background-color: rgba(1, 97, 158, 0.15);
  color: var(--color-secondary);
}

.badge-accent {
  background-color: rgba(160, 206, 78, 0.2);
  color: var(--color-accent-dark);
}

/* --------------------------------------------------------------------------
   HERO SECTION - N-iX Style
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: #ec580e;
  overflow: hidden;
  padding: 120px 0 80px;
}

/* Canvas for animated spheres */
.hero__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-6);
  line-height: 1.1;
}

.hero__title-static {
  display: block;
  opacity: 0.9;
}

.hero__title-animated {
  display: block;
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__subtitle {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-8);
  max-width: 600px;
  line-height: var(--leading-relaxed);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__actions .btn--white {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn__arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.btn--white:hover .btn__arrow {
  transform: translateX(4px);
}

/* Hero Stats */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .hero__stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.hero__stat-number {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.hero__stat-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  margin-top: var(--space-1);
}

/* Scroll Indicator */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.hero__scroll-mouse {
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.hero__scroll-wheel {
  width: 6px;
  height: 12px;
  background: var(--color-white);
  border-radius: 3px;
  animation: scrollBounce 1.5s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.5;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 100px 0 60px;
  }

  .hero__scroll {
    display: none;
  }
}

/* Hero Decorative Elements */
.hero__particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 60%; left: 20%; animation-delay: 1s; width: 6px; height: 6px; }
.particle:nth-child(3) { top: 30%; left: 70%; animation-delay: 2s; width: 10px; height: 10px; }
.particle:nth-child(4) { top: 70%; left: 80%; animation-delay: 3s; }
.particle:nth-child(5) { top: 50%; left: 50%; animation-delay: 4s; width: 12px; height: 12px; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-20px) rotate(180deg); opacity: 0.6; }
}

.hero__sidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;
  background: var(--gradient-sidebar);
  opacity: 0.5;
  display: none;
}

@media (min-width: 1200px) {
  .hero__sidebar {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   CARDS GRID (Blog/News Style)
   -------------------------------------------------------------------------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Card with top border */
.card {
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: 4px solid var(--color-primary);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.card--blue {
  border-top-color: var(--color-secondary);
}

.card--green {
  border-top-color: var(--color-accent);
}

.card--teal {
  border-top-color: var(--badge-teal);
}

.card__badge {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  align-self: flex-start;
}

.card__badge--green {
  background-color: var(--badge-green);
}

.card__badge--blue {
  background-color: var(--badge-blue);
}

.card__badge--teal {
  background-color: var(--badge-teal);
}

.card__title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-4);
}

.card__meta::before {
  content: '';
  width: 3px;
  height: 14px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.card__text {
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

/* Card alternate naming (non-BEM) */
.card-body {
  padding: 0;
}

.card-title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.card-text {
  color: var(--color-gray-600);
  margin-bottom: var(--space-4);
}

.card-text:last-child {
  margin-bottom: 0;
}

.card__arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
}

.card__arrow svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  transition: transform var(--transition-fast);
}

.card:hover .card__arrow svg {
  transform: translateX(4px);
}

/* Featured Card (Large with background) */
.card--featured {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--gradient-hero);
  border: none;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .card--featured {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 300px;
  }
}

.card--featured::before {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.card--featured .card__badge {
  background-color: rgba(255, 255, 255, 0.2);
}

.card--featured .card__title {
  font-size: var(--text-3xl);
  color: var(--color-white);
}

.card--featured .card__text {
  color: rgba(255, 255, 255, 0.9);
}

.card--featured .card__arrow svg {
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   CLIENTS / LOGOS SECTION
   -------------------------------------------------------------------------- */
.clients {
  padding: var(--space-20) 0;
}

.clients__title {
  text-align: center;
  margin-bottom: var(--space-16);
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-12);
  align-items: center;
  justify-items: center;
}

@media (max-width: 1024px) {
  .clients__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

@media (max-width: 640px) {
  .clients__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.clients__logo {
  max-width: 140px;
  height: auto;
  opacity: 0.6;
  transition: opacity var(--transition-base);
}

.clients__logo:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   SERVICES GRID
   -------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

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

.service-item {
  position: relative;
  padding: var(--space-10);
  border-right: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
  transition: background-color var(--transition-base);
}

.service-item:hover {
  background-color: var(--color-gray-50);
}

.service-item:nth-child(3n) {
  border-right: none;
}

@media (max-width: 1024px) {
  .service-item:nth-child(3n) {
    border-right: 1px solid var(--color-gray-200);
  }
  .service-item:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 640px) {
  .service-item {
    border-right: none;
  }
}

/* Tech-style illustrated icons */
.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-6);
  position: relative;
}

.service-icon svg {
  width: 48px;
  height: 48px;
  stroke: var(--color-gray-900);
  stroke-width: 1.5;
  fill: none;
}

.service-icon svg .accent {
  stroke: var(--color-primary);
  stroke-width: 2;
}

.service-icon svg .fill-accent {
  fill: var(--color-primary);
  stroke: none;
}

.service-item__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
}

.service-item__text {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.service-item__arrow {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
}

.service-item__arrow svg {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-fast);
}

.service-item:hover .service-item__arrow svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   FEATURE CARDS (Service pages)
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
}

.feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-white);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

/* Text utilities */
.text-sm {
  font-size: var(--text-sm);
}

.text-muted {
  color: var(--color-gray-600);
}

.mb-0 {
  margin-bottom: 0;
}

/* Section utilities for service pages */
.section__header {
  margin-bottom: var(--space-10);
}

.section__header--center {
  text-align: center;
}

.section__header--center .section__subtitle {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.section__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
}

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

/* --------------------------------------------------------------------------
   INDUSTRIES SECTION (Orange gradient)
   -------------------------------------------------------------------------- */
.industries {
  background: var(--gradient-hero);
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.industries__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.industries__title {
  font-size: var(--text-4xl);
  color: var(--color-white);
}

.industries__inner {
  display: grid;
  grid-template-columns: 300px 1fr 280px;
  gap: var(--space-10);
  align-items: center;
}

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

@media (max-width: 640px) {
  .industries__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.industries__image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.industries__image img {
  width: 100%;
  height: auto;
  display: block;
}

.industries__list {
  padding-left: var(--space-8);
}

@media (max-width: 640px) {
  .industries__list {
    padding-left: 0;
  }
}

.industries__list-item {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-white);
  padding: var(--space-3) 0;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.industries__list-item:hover {
  opacity: 0.8;
  transform: translateX(4px);
}

.industries__stat {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  text-align: center;
}

@media (max-width: 1024px) {
  .industries__stat {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .industries__stat {
    grid-column: span 1;
  }
}

.industries__stat-number {
  font-size: var(--text-6xl);
  font-weight: var(--font-black);
  color: var(--color-white);
  line-height: var(--leading-none);
}

.industries__stat-text {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.9);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   STATS SECTION
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

@media (max-width: 1024px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.stat {
  text-align: center;
  padding: var(--space-8);
}

.stat__number {
  font-size: var(--text-5xl);
  font-weight: var(--font-black);
  color: var(--color-primary);
  line-height: var(--leading-none);
  margin-bottom: var(--space-4);
}

.section--dark .stat__number,
.section--primary .stat__number {
  color: var(--color-white);
}

.stat__label {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  font-weight: var(--font-medium);
}

.section--dark .stat__label,
.section--primary .stat__label {
  color: rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------------------
   PROCESS STEPS
   -------------------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  counter-reset: process-counter;
}

@media (max-width: 1024px) {
  .process {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.process__step {
  position: relative;
  counter-increment: process-counter;
}

.process__number {
  font-size: var(--text-6xl);
  font-weight: var(--font-black);
  color: var(--color-primary);
  opacity: 0.15;
  line-height: var(--leading-none);
  margin-bottom: var(--space-2);
}

.process__number::before {
  content: "0" counter(process-counter);
}

.process__title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
}

.process__text {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

/* Process steps alternate naming (non-BEM) */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.process-step {
  text-align: center;
  padding: var(--space-6);
}

.process-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.process-step-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.process-step-description {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.form-section {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-12);
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .form-section {
    grid-template-columns: 1fr;
  }
}

.form {
  max-width: 500px;
}

.form__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.form__subtitle {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
}

.form__group {
  margin-bottom: var(--space-4);
}

.form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

.form__label--required::after {
  content: '*';
  color: var(--color-primary);
  margin-left: var(--space-1);
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 110, 0, 0.1);
}

.form__textarea {
  min-height: 100px;
  resize: vertical;
}

.form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.form__checkbox input {
  margin-top: var(--space-1);
  accent-color: var(--color-primary);
}

.form__checkbox a {
  color: var(--color-primary);
  text-decoration: underline;
}

.form__submit {
  margin-top: var(--space-8);
}

.form__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.form__note svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}

/* Contact Form Card (Service Pages) */
.contact-form-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-gray-200);
}

.form-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.form-subtitle {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

.form-label .required {
  color: var(--color-primary);
  margin-left: var(--space-1);
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-gray-400);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 110, 0, 0.15);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

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

/* Trust Sidebar */
.trust-sidebar {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.trust-sidebar__section {
  margin-bottom: var(--space-8);
}

.trust-sidebar__section:last-child {
  margin-bottom: 0;
}

.trust-sidebar__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-gray-300);
}

.trust-sidebar__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.trust-sidebar__logo {
  max-width: 70px;
  height: auto;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--gradient-dark);
  color: var(--color-white);
  padding: var(--space-16) 0 var(--space-8);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: var(--space-8);
}

@media (max-width: 1024px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .footer__top {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.footer__brand {
  grid-column: span 1;
}

@media (max-width: 640px) {
  .footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (max-width: 640px) {
  .footer__logo {
    justify-content: center;
  }
}

.footer__logo-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.footer__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-white);
}

.footer__logo-img {
  height: 40px;
  width: auto;
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  margin-bottom: var(--space-6);
  max-width: 280px;
}

@media (max-width: 640px) {
  .footer__tagline {
    max-width: none;
  }
}

.footer__contact-email {
  font-size: var(--text-base);
  color: var(--color-white);
  margin-bottom: var(--space-6);
}

.footer__social {
  display: flex;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .footer__social {
    justify-content: center;
  }
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  color: var(--color-white);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.footer__social-link:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

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

.footer__column-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-6);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-white);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

.footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

@media (max-width: 640px) {
  .footer__legal {
    justify-content: center;
  }
}

.footer__legal-link {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}

.footer__legal-link:hover {
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   PAGE HERO (for inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--gradient-hero);
  padding: var(--space-40) 0 var(--space-20);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='1.5' fill='rgba(255,255,255,0.08)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.page-hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.page-hero__badge {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.page-hero__title {
  font-size: var(--text-4xl);
  color: var(--color-white);
  margin-bottom: var(--space-6);
}

.page-hero__text {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-8);
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   TEAM GRID
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
}

@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.team-member {
  text-align: center;
}

.team-member__image {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto var(--space-6);
  border: 4px solid var(--color-primary);
}

.team-member__name {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.team-member__role {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

/* --------------------------------------------------------------------------
   RESOURCES PAGE
   -------------------------------------------------------------------------- */
.resources-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
  justify-content: center;
}

.filter-btn {
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  background-color: transparent;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Resource Card */
.resource-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.resource-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.resource-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  color: var(--color-primary);
}

.resource-card__icon svg {
  width: 26px;
  height: 26px;
}

.resource-card__category {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.resource-card__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
}

.resource-card__text {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

/* Resource Card Alternative Classes (used in recursos page) */
.resource-image {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  color: var(--color-primary);
}

.resource-image svg {
  width: 32px;
  height: 32px;
}

.resource-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.resource-category {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.resource-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
}

.resource-description {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-5);
  flex-grow: 1;
}

/* --------------------------------------------------------------------------
   STATS GRID (About Page)
   -------------------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  text-align: center;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.stat-item {
  padding: var(--space-6);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-label {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  font-weight: var(--font-medium);
}

/* --------------------------------------------------------------------------
   TEAM CARDS (About Page)
   -------------------------------------------------------------------------- */
.team-card {
  text-align: center;
  padding: var(--space-6);
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.team-avatar {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-4);
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
}

.team-role {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.team-bio {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   LOGO GRID (Client Logos)
   -------------------------------------------------------------------------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: center;
  justify-items: center;
}

@media (max-width: 768px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  min-height: 80px;
  width: 100%;
}

.logo-placeholder {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   PROBLEM/SOLUTION SECTIONS
   -------------------------------------------------------------------------- */
.problems-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.problem-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
}

.problem-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.problem-item__text {
  font-size: var(--text-base);
  color: var(--color-gray-700);
  margin: 0;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

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

.solution-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.solution-item__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
}

.solution-item__icon svg {
  width: 24px;
  height: 24px;
}

.solution-item__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.solution-item__text {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin: 0;
}

/* --------------------------------------------------------------------------
   RELATED SERVICES
   -------------------------------------------------------------------------- */
.related-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .related-services {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.related-service {
  padding: var(--space-6);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.related-service:hover {
  background-color: var(--color-gray-100);
  transform: translateY(-2px);
}

.related-service__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.related-service__text {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin: 0;
}

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-primary-color { color: var(--color-primary); }
.text-white { color: var(--color-white); }
.text-muted { color: var(--color-gray-600); }
.text-secondary { color: var(--color-gray-600); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

.bg-gray { background-color: var(--color-gray-100); }
.bg-white { background-color: var(--color-white); }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-16 { margin-top: var(--space-16); }

.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.w-full { width: 100%; }

.lead {
  font-size: var(--text-lg);
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
}

/* Heading utilities */
.heading-1 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
}

.heading-2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
}

.heading-3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--color-gray-900);
}

.heading-4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-gray-900);
}

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

/* Section Headers */
.section-header {
  max-width: 700px;
  margin-bottom: var(--space-16);
}

.section-header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header__title {
  margin-bottom: var(--space-4);
}

.section-header__text {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
}

/* Grid utilities */
.grid {
  display: grid;
  gap: var(--space-8);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Two column layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

@media (max-width: 1024px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.two-col--reverse {
  direction: rtl;
}

.two-col--reverse > * {
  direction: ltr;
}

@media (max-width: 1024px) {
  .two-col--reverse {
    direction: ltr;
  }
}

/* --------------------------------------------------------------------------
   ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* Scroll-triggered animations */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   SERVICE PAGE COMPONENTS
   -------------------------------------------------------------------------- */

/* Hero Secondary Variant */
.hero--secondary {
  background: var(--gradient-hero);
  min-height: auto;
  padding-top: calc(80px + var(--space-12));
  padding-bottom: var(--space-12);
}

.hero--secondary .hero__content--center {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero--secondary .hero__content--center .hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

.hero--secondary .hero__content--center .hero__actions {
  justify-content: center;
}

.hero--secondary .hero__badge {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.hero--secondary .hero__title {
  color: var(--color-white);
}

.hero--secondary .hero__subtitle {
  color: rgba(255, 255, 255, 0.9);
}

/* Hero Color Variants for Service Pages
   --------------------------------------------------------------------------
   ⚠️ 7-sep-2026 — aqui vivian DOS degradados que no estaban en la paleta:
     .hero--ia       morado   #6B21A8 → #9333EA → #7C3AED
     .hero--digital  indigo   #1A237E → #283593 → #3949AB
   Ninguno de esos seis tonos aparece entre las variables de :root de este
   archivo. Fer los vio en /quienes-somos/: «es morado/indigo, fuera de
   paleta». Se sustituyen por `.hero--marca` (mas abajo), que es el patron de
   la portada: azul marino de marca con el naranja de acento.
   Los tres que quedan SI salen de tokens declarados en :root o en los badges:
   #01619E es --color-secondary, #00897B es --badge-teal y #2E7D32 es
   --badge-green. Por eso no se tocan aqui: son otra conversacion (la de si el
   sitio quiere un color por servicio), no el defecto que se reporto. */
.hero--sistemas {
  background: linear-gradient(135deg, #01619E 0%, #0277BD 40%, #0288D1 100%);
}

.hero--procesos {
  background: linear-gradient(135deg, #00695C 0%, #00897B 40%, #009688 100%);
}

.hero--capacitacion {
  background: linear-gradient(135deg, #2E7D32 0%, #388E3C 40%, #43A047 100%);
}

/* Hero de marca — azul marino con acento naranja.
   Mismo par de colores que .industries--marca y .tarjeta-servicio de la
   portada: el fondo es --gradient-dark (#0a1628 → #1a2d4a) y el naranja
   --color-primary se queda de ACENTO (la insignia y el filo inferior), nunca
   como fondo a pantalla completa. Lo usan /quienes-somos/,
   /servicios/transformacion-digital.html y /servicios/gobernanza-de-ia.html. */
.hero--marca {
  background: var(--gradient-dark);
  border-bottom: 3px solid var(--color-primary);
}

/* La insignia por defecto de .hero--secondary es un blanco al 20 %, que sobre
   el naranja se leia y sobre el azul marino queda casi invisible. Aqui es el
   naranja de marca, que es justo el acento que se pedia. */
.hero--marca .hero__badge {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Hero with side image */
.hero--split {
  display: flex;
  align-items: center;
}

.hero--split .hero__content {
  flex: 1;
  max-width: 55%;
}

.hero__image {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  overflow: hidden;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  mix-blend-mode: luminosity;
}

@media (max-width: 768px) {
  .hero__image {
    display: none;
  }
  .hero--split .hero__content {
    max-width: 100%;
  }
}

/* Section Variants */
.section--gray {
  background-color: var(--color-gray-100);
}

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

/* Service Cards - Detailed/Horizontal */
.services-grid--detailed {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* La tarjeta base: `.service-card` se usaba SOLA en /servicios/gobernanza-de-ia.html
   y no tenia ni una regla, asi que no era una tarjeta: era texto suelto debajo
   de un bloque de color. */
.service-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Insignia a la izquierda, contenido a la derecha. `auto` y no `140px`: la
   columna vale lo que mide la insignia mas su margen, no un ancho inventado. */
.service-card--horizontal,
.services-grid--detailed .service-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
}

.service-card--horizontal .service-card__icon-wrapper,
.services-grid--detailed .service-card__icon-wrapper {
  margin: var(--space-8) 0 var(--space-8) var(--space-8);
}

@media (max-width: 768px) {
  .service-card--horizontal,
  .services-grid--detailed .service-card {
    grid-template-columns: 1fr;
  }

  .service-card--horizontal .service-card__icon-wrapper,
  .services-grid--detailed .service-card__icon-wrapper {
    margin: var(--space-6) 0 0 var(--space-6);
  }
}

/* Tarjeta minima (normas ISO en /servicios/certificaciones.html): la insignia
   va arriba y es una pastilla, porque su contenido es texto («9001», «14001»)
   y no un icono cuadrado. */
.services-grid--grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 100%;
}

@media (max-width: 1024px) {
  .services-grid--grid-4 { grid-template-columns: repeat(2, 1fr); }
}

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

.service-card--minimal {
  padding: var(--space-6);
  text-align: center;
}

.service-card--minimal .service-card__icon-wrapper {
  /* `fit-content` y no `auto`: es un contenedor flex, y con `auto` se estira a
     todo el ancho de la tarjeta — que es el mismo defecto que se acaba de
     quitar, en chico. */
  width: fit-content;
  min-width: 88px;
  height: 48px;
  padding: 0 var(--space-4);
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
}

.service-card--minimal .service-card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.service-card--minimal .service-card__description {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  margin: 0;
}

/* --------------------------------------------------------------------------
   🔴 EL CONTENEDOR DE ICONO ES UNA INSIGNIA, NO UN BANNER
   --------------------------------------------------------------------------
   Aqui decia `padding: var(--space-8); min-height: 200px` sin ancho, asi que
   el degradado se estiraba a todo el ancho de la tarjeta y quedaba un
   rectangulo de 200 px de alto con un icono de 80 px flotando en medio. Es lo
   que hacia ver rotas «¿Te suena familiar?» (/servicios/gobernanza-de-ia.html)
   y «Normas que manejamos» (/servicios/certificaciones.html), que ademas usan
   `.service-card` y `.service-card--minimal`, dos clases que NO tenian una
   sola regla en esta hoja. Fer lo recorrio el 9-sep-2026.
   Medida fija: 64x64 con esquinas redondeadas. Tamano de icono, no de banner.
   -------------------------------------------------------------------------- */
.service-card__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: var(--radius-lg);
  color: var(--color-white);
}

.service-card__icon-wrapper--blue {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
}

.service-card__icon-wrapper--orange {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.service-card__icon-wrapper--green {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}

.service-card__icon-wrapper--teal {
  background: linear-gradient(135deg, #00897B 0%, #26A69A 100%);
}

.service-card__icon {
  width: 32px;
  height: 32px;
  color: currentColor;
}

.service-card__content {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
}

.service-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex: 1;
}

.service-card__detail p {
  margin: 0;
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
}

.service-card__label {
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
  display: block;
  margin-bottom: var(--space-1);
}

/* Routes Grid */
.routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .routes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.route-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.route-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.route-card__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.route-card__badge--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.route-card__badge--secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.route-card__badge--accent {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

.route-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
}

.route-card__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.route-card__steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-gray-700);
  line-height: var(--leading-normal);
}

.route-card__steps li strong {
  color: var(--color-gray-900);
}

.route-card__step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
}

/* CTA Banner */
.cta-banner {
  position: relative;
  background: var(--gradient-hero);
  padding: var(--space-20) 0;
  overflow: hidden;
}

.cta-banner__bg {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.cta-banner__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.cta-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-black);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.cta-banner__text {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-8);
  line-height: var(--leading-relaxed);
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* Button Variants */
.btn--white {
  background-color: var(--color-white);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.btn--white:hover {
  background-color: var(--color-gray-100);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--outline-white {
  background-color: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.btn--outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

.btn--full {
  width: 100%;
  text-align: center;
}

/* Footer text utility */
.footer__text {
  color: var(--color-gray-400);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   PORTADA — reparacion del 6-sep-2026 (rama fix/portada-rota-movil)
   --------------------------------------------------------------------------
   Fer recorrio la portada: «De entrada esta horrible el inicio, esta muy mal el
   diseño». Estas reglas atienden lo que encontro, y ninguna de ellas tapa nada:
   el bloque no contiene un solo `overflow-x: hidden`, que es como se esconde un
   desbordamiento dejando el contenido igual de inalcanzable.

   La causa de raiz del corte en movil no estaba en este archivo: estaba en dos
   atributos `style="grid-template-columns: repeat(3, 1fr)"` de index.html, que
   por especificidad ganaban a las media queries de .industries__inner. Aqui
   viven ahora esas rejillas, como clases, con sus puntos de quiebre.
   -------------------------------------------------------------------------- */

/* 1. Botones del hero — a 320 px el de «Diagnostico gratuito en 2 min» medía
   323 px (padding de 40 px por lado y `white-space: nowrap` heredado de .btn) y
   se salia de la pantalla. En telefono ocupan el ancho completo. */
@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* 2. Franja de hechos — reemplaza a la franja de cifras del hero. Sin numeros
   que no se puedan sostener: solo lo que la propia pagina demuestra. */
.franja-hechos {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--space-12) 0;
}

.franja-hechos__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .franja-hechos__lista {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.hecho {
  border-top: 3px solid var(--color-primary);
  padding-top: var(--space-4);
}

.hecho__titulo {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-snug);
}

.hecho__texto {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* 3. Tarjetas de «Que hacemos» — antes eran cuatro degradados de otra paleta
   (azul, verde, indigo y morado) con el texto pegado a la esquina superior
   izquierda y media tarjeta vacia abajo por un `min-height: 260px`.
   La paleta ahora es la de la marca: azul marino de #0a1628 a #01619E sobre la
   foto, y el naranja #FF6E00 como acento. La altura la iguala la rejilla, que
   estira las tarjetas de una misma fila; el enlace se pega abajo con
   `margin-top: auto` en vez de dejar hueco muerto. */
.tarjeta-servicio {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-primary);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
  background-color: var(--color-dark);
  /* 🔴 El velo estaba a 0.94 → 0.80 en toda la tarjeta, o sea casi opaco: la
     foto no se veia y las cuatro tarjetas salian identicas. Ahora el degradado
     es DIRECCIONAL —opaco arriba a la izquierda, donde vive el texto, y mucho
     mas claro abajo a la derecha— asi que la fotografia aparece sin que el
     texto pierda contraste. Es lo que hace que cada bloque se distinga del de
     al lado. */
  background-image:
    linear-gradient(135deg,
      rgba(10, 22, 40, 0.97) 0%,
      rgba(10, 22, 40, 0.93) 45%,
      rgba(1, 97, 158, 0.74) 100%),
    var(--tarjeta-foto, none);
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.tarjeta-servicio:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  color: var(--color-white);
}

/* El icono al ras del titulo identifica la linea de un vistazo. Se probo
   ademas un gemelo grande y translucido en la esquina y se quito: sobre una
   fotografia, al 7 % de blanco, no se veia — y la foto ya es la identidad de
   la tarjeta. Marcado que no se gana su lugar, fuera. */
.tarjeta-servicio__icono {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background-color: rgba(255, 110, 0, 0.16);
  color: var(--color-primary-light);
  margin-bottom: var(--space-1);
}

.tarjeta-servicio__icono svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tarjeta-servicio__titulo {
  font-size: var(--text-xl);
  color: var(--color-white);
  margin: 0;
}

.tarjeta-servicio__texto {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.88);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.tarjeta-servicio__enlace {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary-light);
}

/* 4. Sectores — la seccion que tenia el desbordamiento y, ademas, la segunda
   pantalla completa de naranja saturado. Pasa al azul marino de la marca: el
   naranja se queda de acento (borde y normas) y como unico fondo a toda pagina
   el del hero. */
.industries--marca {
  background: var(--gradient-dark);
}

.industries__tarjetas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .industries__tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.sector {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.sector__titulo {
  font-size: var(--text-xl);
  color: var(--color-white);
  margin: 0 0 var(--space-3);
}

.sector__texto {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.88);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4);
}

.sector__normas {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-primary-light);
  margin: 0;
}

.industries__fotos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.industries__foto {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 160px;
}

@media (max-width: 640px) {
  .industries__foto {
    height: 96px;
  }
}

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

/* 5. Hero — «demasiado naranja saturado a pantalla completa». El color plano
   #ec580e se cambia por el degradado de marca, que baja hacia el naranja oscuro
   y le quita el efecto de foco encendido sin perder la identidad. La otra mitad
   del problema —que la seccion de Sectores era otra pantalla naranja entera— se
   arregla arriba, en .industries--marca.
   Va con :not() a proposito: los heros de las otras 11 paginas llevan
   `.hero--secondary` y pintan su propio fondo. Esta regla no debe decidir por
   ellas solo por estar mas abajo en el archivo.

   🔴 Y `.hero--portada` tambien queda fuera desde el 9-sep-2026. No es un
   ajuste de gusto: el selector mide (0,2,0) y le ganaba a `.hero--portada`
   (0,1,0) aunque esta ultima viva 200 lineas mas abajo, asi que la portada
   seguia pintandose naranja y el acento naranja del titular quedaba naranja
   sobre naranja. La salida NO es apilar especificidad en la regla nueva: es
   decir aqui, donde se declara la excepcion, cuales heros pintan su propio
   fondo. Si manana hay un tercero, se anade a esta lista y no a otra parte. */
.hero:not(.hero--secondary):not(.hero--portada) {
  background-color: var(--color-primary-dark);
  background-image: var(--gradient-hero);
}

/* --------------------------------------------------------------------------
   PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
  .header,
  .footer,
  .nav-mobile,
  .btn,
  .form,
  .hero__particles,
  .hero__sidebar {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  .section {
    padding: 20pt 0;
  }

  .hero {
    min-height: auto;
    padding: 40pt 0;
    background: #FF6E00 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
   LA OFERTA DE LOS ARTICULOS  ·  9-sep-2026
   ==========================================================================
   Los articulos son el 86 % del trafico del dominio y en el sitio nuevo no
   llevaban NINGUNA oferta: softgrade.mx si la lleva, en un sidebar derecho
   pegajoso con un banner enlazado a la pagina del producto del tema
   (`fusion-sidebar-right fusion-sticky-sidebar`, verificado en
   https://softgrade.mx/manual-de-operaciones/). O sea que la conversion
   principal del sitio no existia.

   QUE SE HACE EN TELEFONO, QUE ES LA MITAD DE LA DECISION
   ------------------------------------------------------
   Un sidebar de 300 px no cabe en 390 px, y un bloque fijo o flotante come
   pantalla justo donde se lee. Asi que la oferta viaja DOS VECES en el HTML y
   solo una se ve a cada ancho:

     · >= 1100 px  ->  `.oferta-lateral`, pegajosa a la derecha. La de en linea
                       se apaga: dos veces la misma oferta en la misma pantalla
                       es ruido.
     · <  1100 px  ->  `.oferta-en-linea`, una tarjeta EN EL FLUJO, insertada
                       antes del segundo `<h2>` del articulo. Va en medio de la
                       lectura, no al final —el final ya tiene su
                       `.article__cta`— y sobre todo no tapa nada: empuja, no
                       flota. La lateral se apaga con `display: none`, que
                       ademas la saca de la medicion de scripts/verifica-portada.sh.

   El mapeo articulo -> oferta NO vive aqui ni en los 48 HTML: vive en
   docs/oferta-por-articulo.txt y lo escribe scripts/aplica-oferta-por-articulo.py.
   ========================================================================== */

.articulo-layout {
  max-width: 1180px;
  margin: 0 auto;
}

/* La rejilla de dos columnas solo a partir de 1100 px: por debajo, `.article`
   conserva su propio `max-width: 800px` y la pagina se ve igual que antes. */
@media (min-width: 1100px) {
  .articulo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-10);
    align-items: start;
  }

  /* Dos clases de especificidad para ganarle al `<style>` en linea de cada
     articulo, que va DESPUES del <link> a esta hoja y define `.article`. */
  .articulo-layout .article {
    max-width: none;
    margin: 0;
  }

  .articulo-layout .oferta-lateral {
    position: sticky;
    top: 96px;
  }

  .articulo-layout .oferta-en-linea {
    display: none;
  }
}

@media (max-width: 1099px) {
  .articulo-layout .oferta-lateral {
    display: none;
  }
}

.oferta-en-linea {
  max-width: 800px;
  margin: var(--space-10) auto;
  padding: 0 var(--space-6);
}

.oferta-tarjeta {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.oferta-tarjeta__etiqueta {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.oferta-tarjeta__titulo {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2);
}

.oferta-tarjeta__texto {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-gray-700);
  margin: 0 0 var(--space-4);
}

.oferta-tarjeta__cta {
  width: 100%;
}

/* ==========================================================================
   LA BARRA DE CONTACTO  ·  9-sep-2026
   ==========================================================================
   Va ENCIMA del header y empuja: no se superpone ni se queda fija. El header
   de este sitio es `position: fixed` con 80 px de alto y todas las paginas
   compensan con `padding-top: calc(80px + …)`. Meter la barra dentro de ese
   fixed obligaria a recalcular ese 80 en 62 paginas; dejarla fuera y en el
   flujo no obliga a nada.

   En telefono se apila y se queda: es donde mas sirve tener el numero a un
   toque. Lo que NO hace es crecer — dos renglones de 12 px, no una franja.
   ========================================================================== */

.barra-contacto {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--alto-barra);
  z-index: var(--z-fixed);
  background-color: var(--color-dark);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.barra-contacto__inner {
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1.25rem;
}

.barra-contacto__lugar {
  opacity: 0.72;
}

.barra-contacto__vias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.barra-contacto__enlace {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.barra-contacto__enlace:hover,
.barra-contacto__enlace:focus-visible {
  color: var(--color-primary-light);
  text-decoration: underline;
}

@media (max-width: 640px) {
  /* En un telefono el lugar sobra y el numero no: se va el primero. */
  .barra-contacto__lugar { display: none; }
  .barra-contacto__inner { justify-content: center; }
}

/* ==========================================================================
   LA PORTADA QUE VENDE  ·  9-sep-2026
   ==========================================================================
   Fer, 9-sep-2026: «el home lo veo muy pobre en diseño (...) en general no
   vende nada bien». Tres causas y tres arreglos, sobre la maqueta que aprobo:

   1. El hero era `background-color: #ec580e` PLANO con el titular
      «Consultoría especializada en certificarse» —que ademas choca con la
      regla dura 2: Softgrade no certifica—. Ahora es tinta #0a1628 con un
      resplandor naranja, y el naranja se gasta donde importa: en los botones.
   2. Debajo del hero no habia nada que hacer. Ahora esta `.sonda`, la primera
      pregunta del diagnostico contestable ahi mismo. Es el embudo que ya
      existe, puesto donde el visitante todavia esta mirando.
   3. La franja de hechos eran tres parrafos de texto. Ahora son tres cifras
      CONTABLES —9 kits, 5 diagnosticos, 4 lineas—, que cualquiera verifica en
      el catalogo. ⛔ Ni una cifra sobre clientes: las que habia se retiraron
      el 6-sep-2026 por no sustentables y no vuelven por la puerta de atras.
   ========================================================================== */

.hero--portada {
  min-height: auto;
  background-color: var(--color-dark);
  /* Por el token: este 80 se quedo escrito a mano cuando entro la barra de
     contacto, y el hero quedaba 34 px corto por arriba —el titular pegado
     al menu—. El mismo defecto que ya se habia arreglado en las 46
     paginas, sobreviviendo aqui. */
  padding: calc(var(--alto-cabecera) + 3rem) 0 3.5rem;
}

/* El resplandor sustituye al naranja plano. Va detras del contenido y no
   intercepta clics. */
.hero--portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 88% 0%, rgba(255, 110, 0, 0.22), transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.hero--portada .container {
  position: relative;
  z-index: 1;
}

.hero__rejilla {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 960px) {
  .hero__rejilla {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-10);
    /* `center` y no `start`: la columna de texto mide bastante mas que la
       tarjeta —titular de tres lineas, entradilla, dos botones y el pie—, asi
       que alineadas arriba la sonda dejaba un hueco muerto de casi 200 px
       debajo. Centrada, las dos columnas se ven como un solo bloque. */
    align-items: center;
  }
}

.hero__ojo {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: var(--space-4);
}

.hero--portada .hero__title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--color-white);
}

.hero__title-acento {
  color: var(--color-primary);
}

.hero__pie {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  margin: var(--space-5) 0 0;
}

/* --- la sonda: la primera pregunta del diagnostico ---------------------- */
.sonda {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.85);
}

.sonda__barra {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sonda__paso { color: var(--color-primary); font-weight: var(--font-semibold); }
.sonda__tiempo { color: var(--color-gray-500); }

.sonda__pregunta {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: var(--font-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-gray-900);
}

.sonda__opciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.sonda__opcion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.87rem;
  line-height: 1.4;
  color: var(--color-gray-900);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}

.sonda__opcion:hover { border-color: var(--color-primary); }

.sonda__opcion[aria-pressed="true"] {
  border-color: var(--color-primary);
  background-color: rgba(255, 110, 0, 0.09);
  font-weight: var(--font-semibold);
}

.sonda__letra {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-gray-300);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-style: normal;
  color: var(--color-gray-600);
}

.sonda__opcion[aria-pressed="true"] .sonda__letra {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.sonda__salida {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
}

.sonda__lectura {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--color-gray-700);
}

.sonda__lectura strong { color: var(--color-gray-900); }

.sonda__cta { width: 100%; white-space: normal; text-align: center; }

/* --- la franja de prueba: cifras del catalogo, no de clientes ----------- */
.franja-prueba {
  background-color: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--space-6) 0;
}

.franja-prueba__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .franja-prueba__lista { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

/* La cifra y su icono en la misma linea: el icono da el asunto de un vistazo
   —documento, medidor, rejilla— y la cifra da el tamano. Solo, el numero no
   dice de que habla hasta que se lee el texto de abajo. */
.prueba__cifra {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.prueba__icono {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background-color: rgba(255, 110, 0, 0.10);
  color: var(--color-primary-dark);
}

.prueba__icono svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prueba__numero {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-900);
}

.prueba__texto {
  margin: var(--space-2) 0 0;
  font-size: 0.87rem;
  line-height: 1.4;
  color: var(--color-gray-700);
}

/* De donde sale la cifra, dicho en la propia franja. Es lo que la separa de
   un «+100 empresas» que nadie puede comprobar. */
.prueba__fuente {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
}

/* --- con que se va el cliente de cada linea ----------------------------- */
.tarjeta-servicio__entrega {
  display: block;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  /* Sobre las fotos mas claras —procesos y gobierno de TI— el 0.78 se perdia.
     Este renglon es el que dice con que se va el cliente: es lo ultimo que
     puede quedar flojo. */
  border-top: 1px dashed rgba(255, 255, 255, 0.38);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}

/* --- empieza sin contratar nada ----------------------------------------- */
.imanes {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .imanes { grid-template-columns: repeat(3, 1fr); }
}

.iman {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
}

.iman:hover { border-color: var(--color-primary); }

.iman__etiqueta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.iman__titulo {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-gray-900);
}

.iman__texto {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-gray-700);
}

.iman__enlace {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 0.85rem;
  font-weight: var(--font-semibold);
  color: var(--color-primary-dark);
}

/* --- la aclaracion de marca --------------------------------------------- */
/* Regla dura 2: Softgrade no certifica. Decirlo en la portada no es letra
   chica, es lo que quita la sospecha de juez y parte. */
.aclaracion {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-gray-700);
}

.aclaracion strong { color: var(--color-gray-900); }

/* ==========================================================================
   EL SIDEBAR COMPLETO, EL CTA A MEDIA LECTURA Y EL POPUP DE SALIDA
   9-sep-2026 · construido sobre la maqueta que aprobo Fer
   ==========================================================================
   Tres piezas que el sitio no tenia y que son la conversion de los articulos,
   o sea el 86 % del trafico del dominio:

     1. `.oferta-indice`         el indice dentro del sidebar pegajoso. Lo
                                 llena initIndiceArticulo() en main.js leyendo
                                 los <h2 id> del articulo: no se copia a 48 HTML.
     2. `.oferta-consultor-linea` la salida a consultoria, a media lectura. Es
                                 una oferta DISTINTA de la del sidebar, para
                                 que a 1100 px o mas se vean dos cosas a la vez
                                 y no la misma dos veces.
     3. `.salida`                el popup de intencion de salida. Lo arma
                                 initPopupSalida() con la oferta del propio
                                 sidebar; una vez por visitante cada 30 dias.

   ⛔ Ninguna de las tres flota sobre el texto en telefono. Empujan.
   ========================================================================== */

.oferta-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* --- el indice del sidebar --------------------------------------------- */
.oferta-indice {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.oferta-indice__titulo {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-600);
  margin-bottom: var(--space-3);
}

.oferta-indice__lista {
  /* `list-style: decimal` explicito: el reset del sitio apaga los marcadores
     de toda lista y sin esta linea el indice sale sin numerar. */
  list-style: decimal;
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.oferta-indice__lista li::marker {
  color: var(--color-primary);
  font-size: 0.8rem;
}

.oferta-indice__lista a {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-gray-700);
  text-decoration: none;
}

.oferta-indice__lista a:hover,
.oferta-indice__lista a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

/* El apartado que se esta leyendo. Sin esto el indice se siente muerto en un
   articulo de 2,000 palabras. */
.oferta-indice__lista a.esta-aqui {
  color: var(--color-gray-900);
  font-weight: var(--font-semibold);
}

/* --- la salida a consultoria, a media lectura --------------------------- */
.oferta-consultor-linea {
  max-width: 800px;
  margin: var(--space-8) auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-top: 2px solid var(--color-secondary);
  border-radius: var(--radius-lg);
}

.oferta-consultor-linea__texto {
  flex: 1 1 20rem;
  min-width: 0;
}

.oferta-consultor-linea__texto b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-gray-900);
}

.oferta-consultor-linea__texto p {
  margin: var(--space-1) 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-gray-700);
}

/* `.btn` trae `white-space: nowrap`: sin esto el boton mide mas que el
   telefono, que es el defecto 2 del barrido de 390 px de mas abajo. */
.oferta-consultor-linea__cta {
  white-space: normal;
  flex: 0 1 auto;
}

/* Dentro de la rejilla de dos columnas el bloque ya no se centra solo: la
   columna manda el ancho. */
@media (min-width: 1100px) {
  .articulo-layout .oferta-consultor-linea {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* --- el popup de salida ------------------------------------------------- */
.salida-fondo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background-color: rgba(10, 22, 40, 0.62);
}

body.con-salida {
  overflow: hidden;
}

.salida {
  width: 100%;
  max-width: 460px;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  max-height: 90vh;
  overflow-y: auto;
}

.salida__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-dark);
}

.salida__ojo {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-primary-light);
}

.salida__cerrar {
  background: none;
  border: 0;
  color: var(--color-gray-400);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 var(--space-1);
  cursor: pointer;
}

.salida__cerrar:hover,
.salida__cerrar:focus-visible {
  color: var(--color-white);
}

.salida__cuerpo {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.salida__etiqueta {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.salida__titulo {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--color-gray-900);
}

.salida__texto {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-gray-700);
}

.salida__cta {
  white-space: normal;
  text-align: center;
}

/* ==========================================================================
   LO QUE SE CORTABA A 390 px  ·  9-sep-2026
   ==========================================================================
   Medido con scripts/verifica-portada.sh dentro del iframe de 390 px, no de
   cabeza. Tres causas, tres arreglos, ninguno con `overflow-x: hidden` —eso
   esconde el recorte y deja el contenido igual de inalcanzable—:

   1. `.article__table` medía 489, 480 y 528 px en una ventana de 390. La tabla
      es `width: 100%` pero sin `table-layout: fixed` el navegador respeta el
      ancho MINIMO del contenido de cada celda y se sale. Con `fixed` las
      columnas se reparten el 100 % y el texto envuelve.
      Sale en /mapa-de-procesos/ (la #1 en trafico) y en otros 20 articulos.

   2. `.btn` tiene `white-space: nowrap`. «Agenda un diagnóstico de gobierno de
      TI» con el padding de `.btn--lg` mide 393 px: mas ancho que el telefono.
      Sale en /servicios/gobernanza-de-ia.html.

   3. Ese mismo boton, como `submit` con `.w-full` dentro de
      `.contact-form-card`, empujaba la tarjeta a 392 px y con ella su columna
      de la rejilla: los items de grid no bajan de su `min-content` salvo que
      se les de `min-width: 0`. Sale en /servicios/transformacion-digital.html.
   ========================================================================== */

@media (max-width: 640px) {
  /* `.article .article__table` (0,2,0) le gana al `.article__table` (0,1,0)
     del <style> en linea de cada articulo, que se carga despues de esta hoja. */
  .article .article__table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.8rem;
  }

  .article .article__table th,
  .article .article__table td {
    padding: var(--space-2) var(--space-3);
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  .btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }

  .btn--lg {
    padding: var(--space-4) var(--space-6);
  }

  .grid > *,
  .services-grid > * {
    min-width: 0;
  }
}


/* ==========================================================================
   Bloques de articulo largo  ·  19-sep-2026
   Vivian inline SOLO en los 9 articulos reescritos en abril; los otros 39 los
   usaban sin estilo. Se suben aqui para que cualquier articulo los herede.
   El colapso del FAQ va detras de .article__faq--acordeon, que pone main.js:
   sin JS, las respuestas se leen.
   ========================================================================== */
.article__img { width: 100%; border-radius: 12px; margin: 2rem 0; object-fit: cover; }
.article__highlight { background: var(--color-gray-100); border-left: 4px solid var(--color-primary); padding: 1.25rem 1.5rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0; }
.article__highlight p { margin: 0; font-style: italic; }
.article__example { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; }
.article__example h4 { color: #166534; font-size: 1rem; margin: 0 0 0.75rem; }
.article__example p, .article__example li { font-size: 0.88rem; }
.article__toc { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: 12px; padding: 1.5rem 2rem; margin: 1.5rem 0; }
.article__toc h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.article__toc ol { margin: 0; padding-left: 1.25rem; }
.article__toc li { margin-bottom: 0.35rem; font-size: 0.88rem; }
.article__toc a { color: var(--color-primary); text-decoration: none; }
.article__toc a:hover { text-decoration: underline; }
.article__faq { margin: 2rem 0; }
.article__faq-item { border: 1px solid var(--color-gray-200); border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden; }
.article__faq-q { padding: 1rem 1.25rem; font-weight: 600; font-size: 0.95rem; color: var(--color-gray-900); display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--color-gray-50); }
.article__faq-a { padding: 1rem 1.25rem; }
.article__faq-a p { margin: 0; font-size: 0.9rem; }
.article__faq--acordeon .article__faq-q { cursor: pointer; }
.article__faq--acordeon .article__faq-q::after { content: '+'; font-size: 1.2rem; color: var(--color-primary); transition: transform 0.2s; }
.article__faq--acordeon .article__faq-q.open::after { transform: rotate(45deg); }
.article__faq--acordeon .article__faq-a { padding: 0 1.25rem; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.article__faq--acordeon .article__faq-a.open { padding: 1rem 1.25rem; max-height: 1000px; }

/* ==========================================================================
   Marcadores de lista en el cuerpo del articulo  ·  19-sep-2026
   El reset global `ul, ol { list-style: none }` (linea ~279) es correcto para
   la navegacion, pero tambien apagaba los marcadores del CONTENIDO: las listas
   de «8 errores», los pasos numerados y el propio indice salian sin numerar en
   los 48 articulos, incluidos los 9 que traen el trafico. Un «paso 3» que no
   dice 3 no es un paso. Se restauran solo dentro de .article, que es contenido.
   ========================================================================== */
.article ol { list-style: decimal; }
.article ul { list-style: disc; }
.article__toc ol { list-style: decimal; }
.article ol ol { list-style: lower-alpha; }
.article ul ul { list-style: circle; }