/* =====================================================================
   FLOWIZEAI — DESIGN TOKENS
   Paleta y tipografía aprobadas — ver DESIGN.md
===================================================================== */
:root {
  /* Color */
  --color-void: #000000;
  --color-section: #050505;
  --color-surface: #0A0A0A;
  --color-surface-elevated: #111111;

  --color-teal: #00F5D4;
  --color-blue: #0EA5E9;
  --color-purple: #8B5CF6;

  --color-gradient-primary: linear-gradient(135deg, #00F5D4 0%, #0EA5E9 50%, #8B5CF6 100%);
  --color-gradient-secondary: linear-gradient(135deg, #8B5CF6 0%, #0EA5E9 100%);

  --color-text: #FFFFFF;
  --color-text-secondary: #A0A0A0;
  --color-text-tertiary: #5C5C5C;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-active: rgba(0, 245, 212, 0.35);

  /* Type */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(20px, 5vw, 64px);
  --nav-height: 88px;
  --nav-height-scrolled: 64px;
}

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

html {
  scroll-padding-top: var(--nav-height-scrolled);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

ul { list-style: none; padding: 0; }

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

body {
  background: var(--color-void);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — accesibilidad de teclado */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 1000;
  background: var(--color-teal);
  color: #050505;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 6px;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: 16px;
}

/* =====================================================================
   BUTTONS
===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
  border-radius: 9999px;
  transition: transform var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

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

.btn--sm {
  font-size: 14px;
  padding: 10px 20px;
}

.btn--lg {
  font-size: 16px;
  padding: 16px 28px;
}

.btn--primary {
  background: linear-gradient(135deg, #00F5D4 0%, #0EA5E9 60%, #8B5CF6 100%);
  color: #000000;
  border: none;
}

.btn--primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--border-strong);
}

.btn--ghost:hover {
  border-color: var(--border-active);
  background: rgba(0, 245, 212, 0.06);
}

/* =====================================================================
   SECCIÓN 00 — NAVEGACIÓN
===================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: height var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              backdrop-filter var(--duration-base) var(--ease-out),
              opacity 0.3s ease,
              visibility 0s linear 0.3s;
}

/* Oculto durante el hero (100vh) — aparece al scrollear más allá.
   visibility se retrasa en la salida y es inmediata en la entrada,
   para que no quede focuseable/clicable mientras está invisible. */
.navbar.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: height var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              backdrop-filter var(--duration-base) var(--ease-out),
              opacity 0.3s ease,
              visibility 0s linear 0s;
}

.navbar.is-scrolled {
  height: var(--nav-height-scrolled);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.navbar__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar__logo-img {
  display: block;
  height: 32px;
  width: auto;
}

@media (max-width: 767px) {
  .navbar__logo-img {
    height: 28px;
  }
}

.navbar__nav {
  display: flex;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.navbar__links a {
  position: relative;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 6px 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.navbar__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.navbar__links a:hover,
.navbar__links a:focus-visible {
  color: var(--color-text);
}

.navbar__links a:hover::after,
.navbar__links a:focus-visible::after {
  transform: scaleX(1);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar__cta {
  flex-shrink: 0;
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
}

.navbar__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-text);
  margin: 0 auto;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.navbar__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

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

.navbar__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Navegación — mobile */
@media (max-width: 880px) {
  .navbar__toggle {
    display: flex;
  }

  .navbar__nav {
    position: fixed;
    top: var(--nav-height-scrolled);
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--ease-out);
  }

  .navbar.is-open .navbar__nav {
    max-height: 70vh;
  }

  .navbar__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px var(--container-pad) 28px;
  }

  .navbar__links a {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
  }

  .navbar__links a::after { display: none; }

  .navbar__cta {
    display: none;
  }

  .navbar.is-open .navbar__cta {
    display: inline-flex;
  }
}

/* =====================================================================
   SECCIÓN 01 — HERO (VIDEO)
===================================================================== */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--color-void);
}

@media (max-width: 767px) {
  .hero {
    height: 100svh;
  }
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  will-change: transform;
  image-rendering: high-quality;
  filter: blur(0px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fallback iOS — si el video nunca logra reproducirse, se oculta y
   se muestra hero-end.png como fondo fijo en su lugar */
.hero--poster-fallback .hero__video {
  opacity: 0;
}

.hero--poster-fallback {
  background-image: url('assets/images/hero-end.png');
  background-size: cover;
  background-position: center;
}

/* =====================================================================
   SECCIÓN 01A — HERO TEXTO
===================================================================== */
.hero-text {
  background: #000000;
  padding: 96px var(--container-pad);
}

.hero-text__container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.hero-text__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .hero-text__headline {
    font-size: 48px;
  }
}

.hero-text__subheadline {
  margin: 16px auto 0;
  max-width: 600px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: #A0A0A0;
}

@media (min-width: 768px) {
  .hero-text__subheadline {
    font-size: 20px;
  }
}

.hero-text__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hero-text__authority {
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5C5C5C;
}

@media (max-width: 640px) {
  .hero-text {
    padding: 72px var(--container-pad);
  }

  .hero-text__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-text__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================================
   UTILIDAD — scroll reveal (usada en todas las secciones)
===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* =====================================================================
   UTILIDAD — títulos editoriales (H2 de sección + CTA final)
   DM Serif Display, 36px mobile / 52px desktop — usada en todas las secciones
===================================================================== */
.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 52px;
  }
}

.section-title em {
  font-style: italic;
  background: linear-gradient(90deg, #0EA5E9, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =====================================================================
   UTILIDAD — encabezado de sección centrado
   Eyebrow + H2 + subtítulo, usada en todas las secciones 02-12
===================================================================== */
.section-header {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.section-subtitle {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
   UTILIDAD — variantes de animación de entrada
   Se combinan con [data-reveal]; la opacidad/duración base ya viene
   de la regla [data-reveal] — acá solo se define el transform inicial
   (o, en el caso de clip-h, un efecto de recorte en vez de transform).
===================================================================== */
[data-reveal][data-variant="up-30"] { transform: translateY(30px); }
[data-reveal][data-variant="up-30"].is-revealed { transform: none; }

[data-reveal][data-variant="left-40"] { transform: translateX(-40px); }
[data-reveal][data-variant="left-40"].is-revealed { transform: none; }

[data-reveal][data-variant="right-40"] { transform: translateX(40px); }
[data-reveal][data-variant="right-40"].is-revealed { transform: none; }

[data-reveal][data-variant="left-60"] { transform: translateX(-60px); }
[data-reveal][data-variant="left-60"].is-revealed { transform: none; }

[data-reveal][data-variant="right-60"] { transform: translateX(60px); }
[data-reveal][data-variant="right-60"].is-revealed { transform: none; }

[data-reveal][data-variant="scale-92"] { transform: scale(0.9); }
[data-reveal][data-variant="scale-92"].is-revealed { transform: none; }

[data-reveal][data-variant="scale-85"] { transform: scale(0.85); }
[data-reveal][data-variant="scale-85"].is-revealed { transform: none; }

[data-reveal][data-variant="scale-95"] {
  transform: scale(0.95);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal][data-variant="scale-95"].is-revealed { transform: none; }

[data-reveal][data-variant="rotate-x"] {
  transform: rotateX(15deg);
  transform-origin: center top;
}
[data-reveal][data-variant="rotate-x"].is-revealed { transform: none; }

[data-reveal][data-variant="rotate-y"] {
  transform: rotateY(15deg);
  transform-origin: center;
}
[data-reveal][data-variant="rotate-y"].is-revealed { transform: none; }

[data-reveal][data-variant="translate-x-100"] { transform: translateX(-100px); }
[data-reveal][data-variant="translate-x-100"].is-revealed { transform: none; }

@media (max-width: 640px) {
  [data-reveal][data-variant="translate-x-100"] { transform: translateX(-30px); }
  [data-reveal][data-variant="left-40"] { transform: translateX(-30px); }
  [data-reveal][data-variant="right-40"] { transform: translateX(30px); }
  [data-reveal][data-variant="left-60"] { transform: translateX(-30px); }
  [data-reveal][data-variant="right-60"] { transform: translateX(30px); }
}

[data-reveal][data-variant="clip-h"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--ease-out);
}
[data-reveal][data-variant="clip-h"].is-revealed {
  clip-path: inset(0 0% 0 0);
}

/* Barra de progreso — Sección 06, anima width en vez de transform/opacity */
[data-reveal][data-variant="progress"] {
  opacity: 1;
  transform: none;
  width: 0%;
  transition: width 0.7s var(--ease-out);
}
[data-reveal][data-variant="progress"].is-revealed {
  width: var(--progress-target);
}

/* Pulse suave — solo el botón del CTA final, justo después de entrar.
   El delay es fijo porque el botón es el último paso de un stagger de
   200ms con 8 elementos (índice 7 → 1400ms) + los 0.7s de su propia
   transición de entrada ≈ 2.1s. */
@keyframes ctaPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.cta-final__button[data-reveal].is-revealed {
  animation: ctaPulse 0.6s var(--ease-out) 2.1s 1;
}

/* =====================================================================
   UTILIDAD — separadores entre secciones
   Alternan entre fade de dos tonos y glow teal centrado
===================================================================== */
.separator {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.separator--fade {
  height: 80px;
  background: linear-gradient(to bottom, #050505, #000000);
}

.separator--fade-reverse {
  height: 80px;
  background: linear-gradient(to bottom, #000000, #050505);
}

.separator--glow {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.separator--glow::before {
  content: '';
  width: 400px;
  max-width: 70%;
  height: 1px;
  background: rgba(0, 245, 212, 0.06);
  filter: blur(20px);
}

/* =====================================================================
   UTILIDAD — Border Beam
   Luz recorriendo el borde de una tarjeta. Usada en Moats y Servicios.
   Requiere @property para animar el ángulo del conic-gradient; en
   navegadores sin soporte el borde queda estático (degradación segura).
===================================================================== */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes border-beam {
  to { --angle: 360deg; }
}

.card-beam {
  position: relative;
  border-radius: 12px;
  background: #0A0A0A;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.card-beam::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    #00F5D4 60deg,
    #0EA5E9 120deg,
    #8B5CF6 180deg,
    transparent 240deg
  );
  animation: border-beam 4s linear infinite;
  z-index: 0;
}

.card-beam::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 11px;
  background: #0A0A0A;
  z-index: 1;
}

.card-beam > * {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .card-beam::before {
    animation: none;
  }
}

/* =====================================================================
   UTILIDAD — Marquee (carrusel infinito)
   Usada en Sectores (Sección 11) y en la franja de autoridad
   de Impacto (Sección 01B).
===================================================================== */
.marquee-wrapper {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee 30s linear infinite;
}

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

.marquee-track--reverse {
  animation: marquee-reverse 40s linear infinite;
}

/* El grupo duplicado (aria-hidden) no debe crear su propia caja flex —
   sus hijos deben participar directamente en el flex del track */
.marquee-duplicate {
  display: contents;
}

.marquee-card {
  width: 320px;
  min-height: 220px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  will-change: transform;
  transition: transform 0.3s ease;
}

.marquee-card:hover {
  transform: translateY(-4px);
}

/* Tinte de fondo por sector — aplicado a la capa ::after del card-beam,
   que es la que realmente pinta encima del cover opaco de la animación */
.marquee-card.card-beam::after {
  background: rgba(var(--card-accent-rgb), 0.05);
}

.marquee-card.card-beam::before {
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, var(--beam-1) 60deg, var(--beam-2) 120deg, var(--beam-3) 180deg, transparent 240deg);
  animation-duration: 4s;
  animation-delay: var(--beam-delay, 0s);
}

.marquee-card__top {
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: linear-gradient(135deg, rgba(var(--card-accent-rgb), 0.12) 0%, transparent 100%);
}

.marquee-card__glow {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--card-accent-rgb), 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.marquee-card__icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(var(--card-accent-rgb), 0.15);
  border: 1px solid rgba(var(--card-accent-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee-card__icon-wrap svg {
  width: 22px;
  height: 22px;
  color: var(--card-accent);
}

.marquee-card__body {
  flex: 1;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.marquee-card__caso {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--card-accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.marquee-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
}

.marquee-card__question {
  font-family: var(--font-body);
  font-size: 13px;
  color: #A0A0A0;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.marquee-card__metrica {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--card-accent);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--card-accent-rgb), 0.2);
  line-height: 1.4;
}

.marquee-card__footer {
  padding: 12px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.marquee-card__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--card-accent);
  letter-spacing: 0.05em;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation-play-state: paused;
  }
}

/* =====================================================================
   SECCIÓN 01B — IMPACTO NUMÉRICO
===================================================================== */
.impacto {
  background: var(--color-section);
  padding: 100px 0;
}

.impacto__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}

.impacto__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
}

.impacto__icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.impacto__number {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #00F5D4, #0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.impacto__label {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text);
}

.impacto__sublabel {
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.impacto__divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.impacto__marquee {
  margin-top: 56px;
}

.impacto__pill {
  flex-shrink: 0;
  padding: 10px 24px;
  border: 1px solid rgba(0, 245, 212, 0.2);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: #A0A0A0;
  background: rgba(0, 245, 212, 0.03);
  white-space: nowrap;
}

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

  .impacto__divider {
    display: none;
  }

  .impacto__col {
    padding: 40px 16px;
  }

  .impacto__col:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .impacto__col:first-child {
    padding-top: 0;
  }

  .impacto__col:last-child {
    padding-bottom: 0;
  }

  .impacto__number {
    font-size: 72px;
  }
}

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

  .impacto__marquee {
    margin-top: 40px;
  }
}

/* =====================================================================
   SECCIÓN 02 — EL PROBLEMA
===================================================================== */
.problema {
  position: relative;
  background: var(--color-section);
  padding: 120px var(--container-pad);
}

.problema__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.problema__title-white {
  color: var(--color-text);
}

.problema__text {
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.problema__text + .problema__text {
  margin-top: 16px;
}

/* Bento grid asimétrico — tarjeta 1 ocupa el ancho completo (2 columnas) */
.problema__grid {
  max-width: 860px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.problema__card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  padding: 28px 32px;
  will-change: transform;
  transition: transform var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}

.problema__card:nth-child(1) {
  grid-column: span 2;
  background: rgba(14, 165, 233, 0.06);
  border-top: 2px solid #0EA5E9;
}

.problema__card:nth-child(2) {
  background: rgba(139, 92, 246, 0.06);
  border-top: 2px solid #8B5CF6;
}

.problema__card:nth-child(3) {
  background: rgba(0, 245, 212, 0.06);
  border-top: 2px solid #00F5D4;
}

.problema__card:hover {
  transform: translateY(-2px);
}

.problema__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 245, 212, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.problema__icon-svg {
  width: 32px;
  height: 32px;
}

.problema__metric {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-teal);
  margin-bottom: 8px;
}

.problema__metric-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: normal;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.problema__card-title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.problema__card-text {
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .problema {
    padding: 72px var(--container-pad);
  }

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

  .problema__card:nth-child(1) {
    grid-column: span 1;
  }

  .problema__card {
    padding: 24px 22px;
  }
}

/* =====================================================================
   SECCIÓN 03 — QUÉ ES FLOWIZEAI
===================================================================== */
.quehacemos {
  position: relative;
  background: var(--color-void);
  padding: 120px var(--container-pad);
}

.quehacemos__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.quehacemos__title-white {
  color: var(--color-text);
}

.quehacemos__text {
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* Comparativo — Automatización Estática vs Autonomía Agéntica */
.comparativo {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
}

.comparativo__col {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  padding: 28px 24px;
}

.comparativo__col[data-reveal] {
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.comparativo__col[data-reveal].is-revealed {
  transform: none;
}

.comparativo__col--static[data-reveal] {
  transform: translateX(-40px);
}

.comparativo__col--agentic[data-reveal] {
  transform: translateX(40px);
}

/* ---- Tarjeta Automatización Estática (rojo/gris — "sistema limitado") ---- */
.comparativa-card--estatica {
  background: rgba(255, 60, 60, 0.04);
}

.comparativa-card--estatica.card-beam::after {
  background: rgba(255, 60, 60, 0.04);
}

.comparativa-card--estatica.card-beam::before {
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, #FF3C3C 60deg, #8B0000 120deg, #CC2200 180deg, transparent 240deg);
  animation-duration: 5s;
}

.comparativa-card--estatica .comparativo__col-title {
  color: #FF6B6B;
}

.comparativa-card--estatica .comparativo__col-line {
  background: linear-gradient(to right, #FF3C3C, transparent);
}

.comparativa-card--estatica .comparativo__mark--no {
  color: #FF6B6B;
}

.comparativa-card--estatica .comparativo__col-glow {
  background: radial-gradient(circle at 0% 0%, rgba(255, 60, 60, 0.08) 0%, transparent 60%);
}

/* ---- Tarjeta Autonomía Agéntica (teal/azul/púrpura — "sistema activo") ---- */
.comparativa-card--agentica {
  background: rgba(0, 245, 212, 0.04);
}

.comparativa-card--agentica.card-beam::after {
  background: rgba(0, 245, 212, 0.04);
}

.comparativa-card--agentica.card-beam::before {
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, #00F5D4 60deg, #0EA5E9 120deg, #8B5CF6 180deg, transparent 240deg);
  animation-duration: 4s;
  animation-delay: 0.5s;
}

.comparativa-card--agentica .comparativo__col-title {
  background: linear-gradient(90deg, #00F5D4, #0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.comparativa-card--agentica .comparativo__col-line {
  background: linear-gradient(to right, #00F5D4, #8B5CF6, transparent);
}

.comparativa-card--agentica .comparativo__mark--yes {
  color: #00F5D4;
}

.comparativa-card--agentica .comparativo__col-glow {
  background: radial-gradient(circle at 100% 0%, rgba(0, 245, 212, 0.08) 0%, transparent 60%);
}

/* ---- Elementos compartidos de la tarjeta ---- */
.comparativo__col-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.comparativo__col-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.comparativo__col-line {
  height: 1px;
  margin: 12px 0;
}

.comparativo__col-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.comparativo__list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
}

.comparativo__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: #A0A0A0;
  transition: color 0.2s ease;
}

.comparativo__list li:hover {
  color: #FFFFFF;
}

.comparativo__mark {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

/* ---- Separador "VS" entre las 2 tarjetas ---- */
.comparativo__divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
}

.comparativo__divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.08) 70%, transparent);
}

.comparativo__vs {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  color: #5C5C5C;
  background: #000000;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

/* Insight estratégico destacado */
.insight-wrap {
  margin-top: 60px;
}

.insight-wrap[data-reveal] {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.insight-wrap[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.insight-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.insight-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.insight-dot--teal { background: #00F5D4; }
.insight-dot--blue { background: #0EA5E9; }
.insight-dot--purple { background: #8B5CF6; }

.insight {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  border-radius: 16px;
  padding: 48px 56px;
  box-shadow:
    0 0 40px rgba(0, 245, 212, 0.08),
    0 0 80px rgba(14, 165, 233, 0.05),
    inset 0 0 60px rgba(0, 245, 212, 0.03);
}

.insight.card-beam::after {
  background: linear-gradient(
    135deg,
    rgba(0, 245, 212, 0.06) 0%,
    rgba(14, 165, 233, 0.04) 50%,
    rgba(139, 92, 246, 0.06) 100%
  );
}

.insight.card-beam::before {
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    #00F5D4 40deg,
    #0EA5E9 100deg,
    #8B5CF6 160deg,
    #0EA5E9 220deg,
    #00F5D4 280deg,
    transparent 320deg
  );
  animation-duration: 6s;
}

.insight__text {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.8;
  color: #A0A0A0;
  text-align: center;
}

.insight__emphasis {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 245, 212, 0.2);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  text-align: center;
  background: linear-gradient(90deg, #00F5D4, #0EA5E9, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

  .comparativo__divider {
    min-width: 0;
    height: 40px;
  }

  .comparativo__divider::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.08) 70%, transparent);
  }
}

@media (max-width: 640px) {
  .quehacemos {
    padding: 72px var(--container-pad);
  }

  .comparativo {
    margin-top: 48px;
  }

  .comparativo__col {
    padding: 24px 20px;
  }

  .insight-wrap {
    margin-top: 40px;
  }

  .insight {
    padding: 36px 24px;
  }

  .insight__text {
    font-size: 18px;
  }

  .insight__emphasis {
    font-size: 20px;
  }
}

/* =====================================================================
   SECCIÓN 04 — FOSOS DEFENSIVOS (MOATS)
===================================================================== */
.moats {
  position: relative;
  background-color: var(--color-section);
  background-image: radial-gradient(ellipse 800px 400px at 50% 50%, rgba(0, 245, 212, 0.03) 0%, transparent 70%);
  padding: 120px var(--container-pad);
  overflow: hidden;
}

.moats__container {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
}

.moats__title-white {
  color: var(--color-text);
}

.moats__subtitle {
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.moats__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  perspective: 1200px;
}

.moats__card {
  position: relative;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 0.3s ease;
}

/* Border beam — 3s en Moats (más rápido que el default de 4s) */
.moats__card.card-beam::before {
  animation-duration: 3s;
}

/* Glow radial en la esquina superior derecha — color único por tarjeta.
   Div real (no ::before) porque ese pseudo-elemento ya lo usa el beam. */
.moats__card-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.moats__card:nth-child(1) .moats__card-glow {
  background: radial-gradient(circle, rgba(0, 245, 212, 0.12) 0%, transparent 70%);
}

.moats__card:nth-child(2) .moats__card-glow {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, transparent 70%);
}

.moats__card:nth-child(3) .moats__card-glow {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
}

.moats__card:hover {
  transform: translateY(-4px);
}

.moats__card-media {
  position: relative;
  height: 200px;
  flex-shrink: 0;
}

.moats__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.moats__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, #0A0A0A 100%);
}

.moats__card-body {
  position: relative;
  padding: 28px 28px 32px;
}

.moats__badge {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--color-teal);
}

.moats__tagline {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-text-tertiary);
}

.moats__card-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.moats__card-text {
  margin-top: 14px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

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

@media (max-width: 640px) {
  .moats {
    padding: 72px var(--container-pad);
  }

  .moats__grid {
    margin-top: 44px;
  }

  .moats__card-body {
    padding: 24px 22px 28px;
  }
}

/* =====================================================================
   SECCIÓN 05 — METODOLOGÍA
===================================================================== */
.metodologia {
  position: relative;
  background: var(--color-void);
  padding: 120px var(--container-pad);
}

.metodologia__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.metodologia__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00F5D4, #0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metodologia__title {
  margin-top: 16px;
  color: var(--color-text);
}

.metodologia__subtitle {
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Pipeline — 5 frameworks conectados */
.pipeline {
  margin-top: 56px;
  touch-action: pan-y;
}

.pipeline__track {
  display: flex;
  flex-direction: column;
}

.pipeline__card {
  position: relative;
  background: var(--color-surface);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Acento lateral — color/gradiente único por framework */
.pipeline__card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 2;
}

.pipeline__card--01::before { background: #00F5D4; }
.pipeline__card--02::before { background: #0EA5E9; }
.pipeline__card--03::before { background: linear-gradient(to bottom, #00F5D4, #0EA5E9); }
.pipeline__card--04::before { background: #8B5CF6; }
.pipeline__card--05::before { background: linear-gradient(to bottom, #0EA5E9, #8B5CF6); }

.pipeline__card:hover {
  transform: translateY(-4px);
  background: var(--color-surface-elevated);
}

.pipeline__media {
  position: relative;
  height: 200px;
  flex-shrink: 0;
}

.pipeline__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pipeline__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, #0A0A0A 100%);
}

.pipeline__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--color-teal);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 245, 212, 0.3);
  border-radius: 9999px;
  padding: 4px 12px;
}

.pipeline__body {
  position: relative;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Número gigante de fondo — gigante y sutil, detrás del contenido */
.pipeline__body::after {
  position: absolute;
  top: 4px;
  right: 12px;
  z-index: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.pipeline__card--01 .pipeline__body::after { content: '01'; }
.pipeline__card--02 .pipeline__body::after { content: '02'; }
.pipeline__card--03 .pipeline__body::after { content: '03'; }
.pipeline__card--04 .pipeline__body::after { content: '04'; }
.pipeline__card--05 .pipeline__body::after { content: '05'; }

.pipeline__name,
.pipeline__text,
.pipeline__toggle {
  position: relative;
  z-index: 1;
}

.pipeline__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.pipeline__text {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pipeline__text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.pipeline__toggle {
  margin-top: 14px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--color-teal);
}

.pipeline__toggle-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

.pipeline__toggle[aria-expanded="true"] .pipeline__toggle-icon {
  transform: rotate(180deg);
}

/* Conector — línea + flecha que se dibujan al entrar en viewport */
.pipeline__connector {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pipeline__connector-svg {
  overflow: visible;
}

.pipeline__connector-svg--h {
  display: none;
  width: 48px;
  height: 24px;
}

.pipeline__connector-svg--v {
  display: block;
  width: 24px;
  height: 48px;
}

.pipeline__connector-line {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0.6s var(--ease-out);
}

.pipeline__connector-arrow {
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
  transition-delay: 0.45s;
}

.pipeline__connector.is-revealed .pipeline__connector-line {
  stroke-dashoffset: 0;
}

.pipeline__connector.is-revealed .pipeline__connector-arrow {
  opacity: 1;
}

@media (min-width: 1024px) {
  .pipeline__track {
    flex-direction: row;
    align-items: flex-start;
  }

  .pipeline__card {
    flex: 1 1 0;
    min-width: 0;
  }

  .pipeline__connector {
    flex: 0 0 48px;
    height: 200px;
    align-self: flex-start;
  }

  .pipeline__connector-svg--h {
    display: block;
  }

  .pipeline__connector-svg--v {
    display: none;
  }
}

@media (max-width: 640px) {
  .metodologia {
    padding: 72px var(--container-pad);
  }

  .pipeline {
    margin-top: 40px;
  }

  .pipeline__card {
    max-width: 100%;
  }

  .pipeline__connector {
    flex-basis: 40px;
  }

  .pipeline__body {
    padding: 20px 20px 24px;
  }
}

/* =====================================================================
   SECCIÓN 06 — SERVICIOS
===================================================================== */
.servicios {
  position: relative;
  background: var(--color-section);
  padding: 120px var(--container-pad);
}

.servicios__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.servicios__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00F5D4, #0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.servicios__title {
  margin-top: 16px;
  color: var(--color-text);
}

.servicios__subtitle {
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Timeline — progresión vertical de 4 servicios */
.servicios__timeline {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.servicios__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.servicios__rail {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  padding-top: 8px;
  display: flex;
  justify-content: center;
}

.servicios__rail::after {
  content: '';
  position: absolute;
  top: 34px;
  bottom: -32px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #00F5D4, #0EA5E9, #8B5CF6);
  opacity: 0.3;
}

.servicios__rail--last::after {
  display: none;
}

.servicios__phase {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-teal);
}

.servicios__card {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  will-change: transform;
  transition: transform 0.3s ease;
}

.servicios__card:hover {
  transform: translateY(-2px);
}

/* Border beam — 5s en Servicios, con delay escalonado por tarjeta */
.servicios__card.card-beam::before {
  animation-duration: 5s;
}

.servicios__card--01.card-beam::before { animation-delay: 0s; }
.servicios__card--02.card-beam::before { animation-delay: 1.25s; }
.servicios__card--03.card-beam::before { animation-delay: 2.5s; }
.servicios__card--04.card-beam::before { animation-delay: 3.75s; }

/* Línea de progreso — se anima de 0% al valor final al entrar en viewport */
.servicios__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.servicios__progress-fill {
  height: 100%;
}

.servicios__progress-fill--01 { background: #00F5D4; }
.servicios__progress-fill--02 { background: #0EA5E9; }
.servicios__progress-fill--03 { background: linear-gradient(to right, #00F5D4, #0EA5E9); }
.servicios__progress-fill--04 { background: var(--color-gradient-primary); }

/* Progresión de ancho: cada tarjeta un poco más ancha que la anterior */
.servicios__card--01 { max-width: 620px; }
.servicios__card--02 { max-width: 680px; }
.servicios__card--03 { max-width: 740px; }
.servicios__card--04 { max-width: 800px; }

/* Layout imagen + contenido */
.servicios__layout {
  display: flex;
  align-items: stretch;
}

.servicios__media {
  position: relative;
  flex: 0 0 40%;
  min-width: 0;
  min-height: 220px;
}

.servicios__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.servicios__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, #0A0A0A 100%);
}

.servicios__content {
  flex: 1 1 60%;
  min-width: 0;
  padding: 32px 32px 36px;
}

@media (max-width: 767px) {
  .servicios__layout {
    flex-direction: column;
  }

  .servicios__media {
    flex: 0 0 auto;
    width: 100%;
    height: 200px;
    min-height: 0;
  }

  .servicios__media-overlay {
    background: linear-gradient(to bottom, transparent 50%, #0A0A0A 100%);
  }

  .servicios__content {
    padding: 24px 22px 28px;
  }
}

.servicios__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: linear-gradient(135deg, #0EA5E9, #8B5CF6);
  border-radius: 9999px;
  padding: 6px 14px;
}

.servicios__eyebrow-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
}

.servicios__card-title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.servicios__card-intro {
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.servicios__list-label {
  display: block;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.servicios__list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.servicios__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);
}

.servicios__check {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-teal);
}

@media (max-width: 768px) {
  .servicios__card--01,
  .servicios__card--02,
  .servicios__card--03,
  .servicios__card--04 {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .servicios {
    padding: 72px var(--container-pad);
  }

  .servicios__timeline {
    margin-top: 44px;
    gap: 24px;
  }

  .servicios__row {
    gap: 16px;
  }

  .servicios__rail {
    width: 28px;
  }

  .servicios__rail::after {
    bottom: -24px;
  }
}

/* =====================================================================
   SECCIÓN 08 — BACK-OFFICE AGÉNTICO
===================================================================== */
.backoffice {
  position: relative;
  background: var(--color-section);
  padding: 120px var(--container-pad);
}

.backoffice__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.backoffice__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00F5D4, #0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.backoffice__title {
  margin-top: 16px;
  color: var(--color-text);
}

.backoffice__subtitle {
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.backoffice__result {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-teal);
}

.backoffice__grid {
  margin-top: 56px;
}

/* ---- Tarjeta imagen + contenido (card-beam con color por tarjeta) ---- */
.backoffice-card {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 280px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  will-change: transform;
  transition: transform 0.3s ease;
}

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

.backoffice-card:hover {
  transform: translateY(-4px);
}

.backoffice-card__image {
  position: relative;
  overflow: hidden;
}

.backoffice-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.backoffice-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 50%, var(--card-bg) 100%);
}

.backoffice-card__content {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.backoffice-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.backoffice-card__icon svg {
  width: 28px;
  height: 28px;
}

.backoffice-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.backoffice-card__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.backoffice-card__list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.backoffice-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-teal);
}

/* ---- Color por tarjeta: fondo, borde, beam, ícono, bullets ---- */
.backoffice-card--rrhh {
  --card-bg: #140E0C;
}
.backoffice-card--rrhh.card-beam {
  border-color: rgba(255, 100, 50, 0.15);
}
.backoffice-card--rrhh.card-beam::after {
  background: rgba(255, 100, 50, 0.04);
}
.backoffice-card--rrhh.card-beam::before {
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, #FF6432 90deg, #8B5CF6 180deg, transparent 270deg);
  animation-delay: 0s;
}
.backoffice-card--rrhh .backoffice-card__icon {
  background: rgba(255, 100, 50, 0.08);
}
.backoffice-card--rrhh .backoffice-card__list li::before {
  background: #FF6432;
}

.backoffice-card--finanzas {
  --card-bg: #0A1312;
}
.backoffice-card--finanzas.card-beam {
  border-color: rgba(0, 245, 212, 0.15);
}
.backoffice-card--finanzas.card-beam::after {
  background: rgba(0, 245, 212, 0.04);
}
.backoffice-card--finanzas.card-beam::before {
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, #00F5D4 90deg, #0EA5E9 180deg, transparent 270deg);
  animation-delay: 1.5s;
}
.backoffice-card--finanzas .backoffice-card__icon {
  background: rgba(0, 245, 212, 0.08);
}

.backoffice-card--ti {
  --card-bg: #0A1013;
}
.backoffice-card--ti.card-beam {
  border-color: rgba(14, 165, 233, 0.15);
}
.backoffice-card--ti.card-beam::after {
  background: rgba(14, 165, 233, 0.04);
}
.backoffice-card--ti.card-beam::before {
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, #0EA5E9 90deg, #00F5D4 180deg, transparent 270deg);
  animation-delay: 3s;
}
.backoffice-card--ti .backoffice-card__icon {
  background: rgba(14, 165, 233, 0.08);
}
.backoffice-card--ti .backoffice-card__list li::before {
  background: #0EA5E9;
}

.backoffice-card--riesgo {
  --card-bg: #0F0D13;
}
.backoffice-card--riesgo.card-beam {
  border-color: rgba(139, 92, 246, 0.15);
}
.backoffice-card--riesgo.card-beam::after {
  background: rgba(139, 92, 246, 0.04);
}
.backoffice-card--riesgo.card-beam::before {
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, #8B5CF6 90deg, #0EA5E9 180deg, transparent 270deg);
  animation-delay: 4.5s;
}
.backoffice-card--riesgo .backoffice-card__icon {
  background: rgba(139, 92, 246, 0.08);
}
.backoffice-card--riesgo .backoffice-card__list li::before {
  background: #8B5CF6;
}

.backoffice-card.card-beam::before {
  animation-duration: 6s;
}

@media (max-width: 767px) {
  .backoffice-card {
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto;
    min-height: 0;
  }

  .backoffice-card__image::after {
    background: linear-gradient(to bottom, transparent 50%, var(--card-bg) 100%);
  }

  .backoffice-card__content {
    padding: 28px 24px 32px;
  }
}

@media (max-width: 640px) {
  .backoffice {
    padding: 72px var(--container-pad);
  }

  .backoffice__grid {
    margin-top: 44px;
  }

  .backoffice-card__list li {
    font-size: 16px;
  }
}

/* =====================================================================
   SECCIÓN 09 — CREATIVE INTELLIGENCE SYSTEM
===================================================================== */
.cis {
  position: relative;
  background: var(--color-void);
  padding: 120px var(--container-pad);
}

.cis__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.cis__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00F5D4, #0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cis__title {
  margin-top: 16px;
  color: var(--color-text);
}

.cis__subtitle {
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* ---- Tarjeta imagen + contenido (card-beam) ---- */
.creative-card {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 380px;
  border-radius: 16px;
  overflow: hidden;
  max-width: 1000px;
  margin: 60px auto 0;
}

.creative-card.card-beam::before {
  animation-duration: 5s;
}

.creative-card__image {
  position: relative;
  overflow: hidden;
}

.creative-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.creative-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 40%, #0A0A0A 100%);
}

.creative-card__content {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  background: rgba(0, 245, 212, 0.03);
}

.creative-card__tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #00F5D4;
  text-transform: uppercase;
}

.creative-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creative-card__list li {
  font-family: var(--font-body);
  font-size: 15px;
  color: #A0A0A0;
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.creative-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #00F5D4;
  font-size: 13px;
}

.creative-card__quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  font-style: italic;
  color: #FFFFFF;
  line-height: 1.4;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 245, 212, 0.15);
}

@media (max-width: 767px) {
  .creative-card {
    grid-template-columns: 1fr;
    grid-template-rows: 220px auto;
    min-height: 0;
  }

  .creative-card__image::after {
    background: linear-gradient(to bottom, transparent 40%, #0A0A0A 100%);
  }

  .creative-card__content {
    padding: 28px 24px 32px;
  }
}

@media (max-width: 640px) {
  .cis {
    padding: 72px var(--container-pad);
  }

  .creative-card {
    margin-top: 40px;
  }

  .creative-card__list li {
    font-size: 16px;
  }
}

/* =====================================================================
   SECCIÓN 10 — AI GOVERNANCE FRAMEWORK
===================================================================== */
.gobernanza {
  position: relative;
  background: var(--color-section);
  padding: 120px var(--container-pad);
}

.gobernanza__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.gobernanza__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00F5D4, #0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gobernanza__title {
  margin-top: 16px;
  color: var(--color-text);
}

.gobernanza__subtitle {
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Grid de 6 principios */
.gobernanza__principles {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* ---- Tarjeta principio (card-beam dorado) ---- */
.gobernanza-card {
  display: grid;
  grid-template-columns: 35% 65%;
  min-height: 180px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 184, 41, 0.04);
}

.gobernanza-card__image {
  position: relative;
  overflow: hidden;
}

.gobernanza-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gobernanza-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 40%, rgba(255, 184, 41, 0.03) 100%);
}

.gobernanza-card__body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.gobernanza-card__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  color: #FFB829;
  letter-spacing: 0.1em;
}

.gobernanza-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
}

.gobernanza-card__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: #A0A0A0;
  line-height: 1.5;
  margin: 0;
}

/* Beam dorado — color por tarjeta vía background del ::before compartido */
.gobernanza-card--gold.card-beam::after {
  background: rgba(255, 184, 41, 0.04);
}

.gobernanza-card--gold.card-beam::before {
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, #FFB829 60deg, #FF8C00 120deg, #FFD700 180deg, transparent 240deg);
}

.gobernanza-card--gold:nth-child(1).card-beam::before { animation-delay: 0s; }
.gobernanza-card--gold:nth-child(2).card-beam::before { animation-delay: 0.6s; }
.gobernanza-card--gold:nth-child(3).card-beam::before { animation-delay: 1.2s; }
.gobernanza-card--gold:nth-child(4).card-beam::before { animation-delay: 1.8s; }
.gobernanza-card--gold:nth-child(5).card-beam::before { animation-delay: 2.4s; }
.gobernanza-card--gold:nth-child(6).card-beam::before { animation-delay: 3s; }

/* Modelo de gobernanza — 4 tarjetas (card-beam naranja) */
.gobernanza__model {
  margin-top: 60px;
}

.gobernanza__model-label {
  display: block;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FF6B00;
}

.gobernanza__model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.modelo-card {
  display: grid;
  grid-template-rows: 200px auto;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 69, 0, 0.04);
}

.modelo-card__image {
  position: relative;
  overflow: hidden;
}

.modelo-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.modelo-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(10, 10, 10, 0.9) 100%);
}

.modelo-card__body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modelo-card__step {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  color: #FF6B00;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.modelo-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  color: #FFFFFF;
  margin: 0;
}

.modelo-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modelo-card__list li {
  font-family: var(--font-body);
  font-size: 14px;
  color: #A0A0A0;
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}

.modelo-card__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #FF6B00;
  font-size: 12px;
}

/* Beam naranja */
.modelo-card--orange.card-beam::after {
  background: rgba(255, 69, 0, 0.04);
}

.modelo-card--orange.card-beam::before {
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, #FF4500 60deg, #FF8C00 120deg, #FF6B00 180deg, transparent 240deg);
  animation-duration: 5s;
}

.modelo-card--orange:nth-child(1).card-beam::before { animation-delay: 0s; }
.modelo-card--orange:nth-child(2).card-beam::before { animation-delay: 1.25s; }
.modelo-card--orange:nth-child(3).card-beam::before { animation-delay: 2.5s; }
.modelo-card--orange:nth-child(4).card-beam::before { animation-delay: 3.75s; }

@media (max-width: 768px) {
  .gobernanza__principles {
    grid-template-columns: 1fr;
    gap: 16px;
  }

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

@media (max-width: 767px) {
  .gobernanza-card {
    grid-template-columns: 1fr;
    grid-template-rows: 140px auto;
    min-height: 0;
  }

  .gobernanza-card__image::after {
    background: linear-gradient(to bottom, transparent 40%, rgba(255, 184, 41, 0.03) 100%);
  }
}

@media (max-width: 640px) {
  .gobernanza {
    padding: 72px var(--container-pad);
  }

  .gobernanza__principles {
    margin-top: 44px;
  }

  .gobernanza__model {
    margin-top: 48px;
  }

  .gobernanza-card__text,
  .modelo-card__list li {
    font-size: 16px;
  }
}

/* =====================================================================
   SECCIÓN 11 — SECTORES
===================================================================== */
.sectores {
  position: relative;
  background: var(--color-void);
  padding: 120px 0;
}

.sectores__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.sectores__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00F5D4, #0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sectores__title {
  margin-top: 16px;
  color: var(--color-text);
}

.sectores__marquee {
  margin-top: 56px;
}

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

/* =====================================================================
   SECCIÓN 12 — CTA FINAL
===================================================================== */
.cta-final {
  position: relative;
  background: var(--color-void);
  padding: 120px var(--container-pad);
  overflow: hidden;
  text-align: center;
}

.cta-final__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 900px 550px at 50% 35%, rgba(0, 245, 212, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.cta-final__container {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-final__title {
  color: var(--color-text);
}

.cta-final__subtitle {
  margin-top: 24px;
  max-width: 620px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.cta-final__deliverables {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.cta-final__deliverable {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
  text-align: left;
}

.cta-final__check {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-teal);
}

.cta-final__scarcity {
  display: inline-block;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
  border: 1px solid var(--border-active);
  border-radius: 9999px;
  padding: 8px 18px;
}

.cta-final__button {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 36px;
  background: linear-gradient(135deg, #00F5D4 0%, #0EA5E9 60%, #8B5CF6 100%);
  color: #000000;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  border-radius: 9999px;
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.cta-final__button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.cta-final__signature {
  order: 1;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
  max-width: 420px;
}

.cta-final__signature-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
}

.cta-final__signature-role {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--color-teal);
}

.cta-final__signature-detail {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
}

@media (max-width: 640px) {
  .cta-final {
    padding: 88px var(--container-pad);
  }

  .cta-final__deliverables {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cta-final__deliverable {
    border-radius: 10px;
    font-size: 16px;
  }

  .cta-final__button {
    width: 100%;
  }
}

/* =====================================================================
   SECCIÓN 13 — FOOTER
===================================================================== */
.footer {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 200px;
  background: radial-gradient(ellipse at center bottom, rgba(0, 245, 212, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.footer__inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: 60px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer__logo {
  height: 28px;
  margin-bottom: 4px;
}

.footer__tagline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #5C5C5C;
  text-transform: uppercase;
  margin: 0;
}

.footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(18, 140, 126, 0.15));
  border: 1px solid rgba(37, 211, 102, 0.3);
  border-radius: 999px;
  color: #25D366;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  margin: 8px 0;
}

.footer__whatsapp:hover {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.25), rgba(18, 140, 126, 0.25));
  border-color: rgba(37, 211, 102, 0.5);
  transform: translateY(-2px);
}

/* ---- Separador ---- */
.footer__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.06) 50%, transparent);
  margin: 8px 0;
}

/* ---- Franja inferior ---- */
.footer__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__copy {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #5C5C5C;
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__legal a {
  font-family: var(--font-body);
  font-size: 12px;
  color: #5C5C5C;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__legal a:hover {
  color: #FFFFFF;
}

.footer__legal span {
  color: #333333;
  font-size: 12px;
}

@media (max-width: 768px) {
  .footer__bottom {
    flex-direction: column;
    gap: 12px;
  }

  .footer__legal {
    gap: 6px;
  }
}

/* ---- Botón flotante de WhatsApp ---- */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.4);
  animation: whatsapp-pulse 2.5s ease-in-out infinite;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

/* Oculto mientras el menú móvil está abierto — evita que el botón
   flotante quede flotando sobre el dropdown de navegación */
.navbar.is-open ~ .whatsapp-float {
  opacity: 0;
  pointer-events: none;
}

@keyframes whatsapp-pulse {
  0% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.4); }
  70% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    animation: none;
  }
}

@media (max-width: 768px) {
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }
}

/* =====================================================================
   PÁGINAS LEGALES — Privacidad / Términos
===================================================================== */
.legal {
  background: #000000;
  padding: 120px clamp(40px, 6vw, 64px);
}

.legal__container {
  max-width: 800px;
  margin: 0 auto;
}

.legal__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-align: center;
}

.legal__updated {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.legal__body {
  margin-top: 64px;
}

.legal__section {
  padding: 32px 0;
  border-top: 1px solid var(--border-subtle);
}

.legal__section:first-child {
  padding-top: 0;
  border-top: none;
}

.legal__section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: #FFFFFF;
}

.legal__section-text {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.legal__section-text a {
  color: var(--color-teal);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .legal {
    padding: 88px clamp(40px, 8vw, 56px);
  }

  .legal__body {
    margin-top: 48px;
  }

  .legal__section {
    padding: 24px 0;
  }

  .legal__section-title {
    font-size: 20px;
  }
}

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