/* ════════════════════════════════════════════════════════
   AuditScale · Capa de animaciones premium v2
   Tipografía: Inter única (autoridad + estética).
   Sin cursor custom. Sin shader hero. Loader inferior.
   Inspirado en: Linear (microinteracciones), Vercel (loader),
   Stripe (visualizaciones data-driven).
   ════════════════════════════════════════════════════════ */

:root {
  /* Brand corporativo (primarios) */
  --as-corp-blue: #0D1F6B;     /* Azul corporativo · headlines, panel oscuro, brand mark */
  --as-corp-orange: #F07820;   /* Naranja corporativo · acentos, dots, CTAs primarios */
  --as-corp-green: #16A34A;    /* Verde institucional · stats positivos, checks de éxito */

  /* Sistema heredado (compatibilidad con módulos existentes) */
  --as-ink: #0a1f44;
  --as-ink-soft: #2c3656;
  --as-ink-mute: #586577;
  --as-bg: #ffffff;
  --as-bg-soft: #F8FAFC;
  --as-bg-soft-2: #F1F5F9;
  --as-line: #E2E8F0;
  --as-line-strong: #CBD5E1;
  --as-accent: #EC4E02;
  --as-accent-soft: #fff2eb;
  --as-blue: #1E40B0;
  --as-blue-soft: #eef2ff;

  /* Tokens estructurales */
  --as-radius-card: 20px;
  --as-radius-pill: 999px;
  --as-shadow-soft: 0 1px 2px rgba(10, 31, 68, 0.04), 0 8px 24px rgba(10, 31, 68, 0.04);
  --as-shadow-hover: 0 4px 12px rgba(10, 31, 68, 0.08), 0 24px 56px rgba(10, 31, 68, 0.08);
  --as-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ═════ TIPOGRAFÍA GLOBAL — Inter unificada ═════ */
html, body {
  font-family: var(--as-font);
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'cv02';
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* ── Fix horizontal overflow mobile (2026-05-24) ──
     Complementa el `overflow-x: hidden` que ya existe en styles.css:40 (body)
     extendiéndolo a html. Bloquea el scroll lateral que rompía la lectura mobile.
     SIDE-EFFECTS A VIGILAR POST-DEPLOY:
     (1) #aurora-bg usa position:sticky; podría perder el efecto si el contexto
         de scroll cambia. Si el aurora del hero desaparece tras deploy, mover
         la regla solo a @media (max-width: 768px).
     (2) width:100vw incluye scrollbar vertical en desktop con scrollbar visible
         → puede CAUSAR overflow horizontal en desktop. Vigilar en QA desktop;
         si aparece, cambiar a `max-width: 100%` (más seguro cross-device). */
  overflow-x: hidden !important;
  width: 100vw !important;
  position: relative;
}
.hero-headline,
.hero-italic,
.pain-v2-headline,
.pain-v2-italic,
.bento-headline,
.bento-headline em,
.method-title,
.services-title,
.manifesto-title,
.guarantee-headline,
.guarantee-italic,
.home-pricing-title,
.faq-title,
.final-cta-title,
.cases-headline,
.cases-headline em,
.bento-headline em,
.cmp-eyebrow,
.cmp-headline,
.guarantee-eyebrow,
.bento-eyebrow,
.method-eyebrow,
.faq-eyebrow,
.cases-eyebrow,
.pain-v2-eyebrow {
  font-family: var(--as-font) !important;
}
.hero-italic,
.pain-v2-italic,
.bento-headline em,
.cmp-headline em,
.cases-headline em,
.guarantee-italic {
  font-style: italic;
  font-weight: 400 !important;
}
h1, h2, h3, .hero-headline, .pain-v2-headline, .bento-headline {
  letter-spacing: -0.035em;
  font-weight: 800;
}
.hero-headline { font-weight: 900; letter-spacing: -0.045em; }

/* ═════ PAGE LOADER · barra inferior ═════ */
.as-loader {
  position: fixed;
  inset: 0;
  background: var(--as-bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.as-loader.is-hidden { opacity: 0; }
.as-loader.is-removed { display: none; }

.as-loader-bar {
  position: fixed;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--as-blue), var(--as-accent));
  z-index: 10000;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s;
  pointer-events: none;
}

.as-loader-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(8px);
  animation: asLoaderIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.as-loader-logo svg {
  width: 44px;
  height: 36px;
}
.as-loader-logo span {
  font-family: var(--as-font);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.025em;
  color: var(--as-ink);
}
@keyframes asLoaderIn {
  to { opacity: 1; transform: translateY(0); }
}
.as-loader-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: asLetterIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes asLetterIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ═════ HERO STATS PREMIUM ═════ */
.hero-stat .stat-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--as-ink) 0%, var(--as-ink-soft) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ═════ DIAGNÓSTICO HEADLINE COUNTER ═════ */
.dx-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--as-accent) 0%, #ff7a35 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}

/* ═════ BENTO GRID DATA-DRIVEN (Stripe-style) ═════ */
.bento-section {
  padding: clamp(64px, 10vw, 120px) 24px;
  background: var(--as-bg);
}
.bento-container {
  max-width: 1200px;
  margin: 0 auto;
}
.bento-eyebrow,
.cmp-eyebrow,
.cases-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--as-accent);
  margin-bottom: 16px;
}
.bento-headline,
.cmp-headline,
.cases-headline {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--as-ink);
  max-width: 760px;
  margin: 0 0 40px;
}
.bento-headline em,
.cmp-headline em,
.cases-headline em {
  font-family: var(--as-font);
  font-style: italic;
  font-weight: 400;
  color: var(--as-ink-mute);
}

/* ═════ MÉTODO SVG FLOW ═════ */
.method-svg-section {
  padding: clamp(64px, 10vw, 120px) 24px;
  background: #F6F6F4;
}
.method-svg-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.method-svg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 56px;
}
@media (min-width: 900px) {
  .method-svg-grid { grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
}

.ms-flow {
  display: none;
  position: absolute;
  top: 28px;
  left: 0; right: 0;
  height: 2px;
  pointer-events: none;
  overflow: visible;
}
@media (min-width: 900px) {
  .ms-flow { display: block; }
}
.ms-flow-track {
  position: absolute;
  inset: 0;
  background: var(--as-line);
  border-radius: 1px;
}
.ms-flow-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--as-blue), var(--as-accent));
  transition: width 1.8s cubic-bezier(0.65, 0, 0.35, 1);
  border-radius: 1px;
}
.method-svg-grid.is-visible .ms-flow-fill { width: 100%; }

.ms-step {
  position: relative;
  text-align: left;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ms-node {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--as-bg);
  border: 2px solid var(--as-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--as-ink);
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
  transition: border-color 0.5s ease, background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}
.method-svg-grid.is-visible .ms-step:nth-child(2) .ms-node {
  border-color: var(--as-blue);
  color: var(--as-blue);
  box-shadow: 0 0 0 8px var(--as-blue-soft);
}
.method-svg-grid.is-visible .ms-step:nth-child(3) .ms-node {
  border-color: var(--as-blue);
  color: var(--as-blue);
  box-shadow: 0 0 0 8px var(--as-blue-soft);
  transition-delay: 0.4s;
}
.method-svg-grid.is-visible .ms-step:nth-child(4) .ms-node {
  border-color: var(--as-accent);
  background: var(--as-accent);
  color: #fff;
  box-shadow: 0 0 0 8px var(--as-accent-soft);
  transition-delay: 0.8s;
}

.ms-phase-tag {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--as-ink-mute);
  margin-bottom: 8px;
}
.ms-step-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--as-ink);
  margin: 0 0 12px;
}
.ms-step-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--as-ink-soft);
  margin: 0 0 20px;
}
.ms-deliv {
  font-size: 0.85rem;
  color: var(--as-ink-soft);
  background: #FFFFFF;
  border: 1px solid var(--as-line);
  border-radius: 10px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.ms-deliv-check {
  color: var(--as-accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* ═════ PILARES HOVER REFINADO ═════ */
.services-pillar {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.services-pillar::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 16px;
  background: radial-gradient(circle at center, var(--as-blue-soft) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
  z-index: -1;
  pointer-events: none;
}
.services-pillar:hover { transform: translateY(-6px); }
.services-pillar:hover::after { opacity: 1; }

/* ═════ MAGNETIC CTAs ═════ */
[data-magnetic] {
  display: inline-flex;
  /* Transition más larga y suave para que el reset al mouseleave
     no compita con el lerp del JS y dé sensación calma de consultoría */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Tabla comparativa: usa la versión institucional ya definida
   en styles.css (.comparison-table dentro de .manifesto-section).
   No duplicamos reglas aquí. */

/* ════════════════════════════════════════════════════════
   ASCTA · CTA Final con "god rays" CSS (componente 21st.dev
   adaptado a vanilla, paleta naranja institucional, fondo blanco).
   ════════════════════════════════════════════════════════ */
.ascta {
  position: relative;
  padding: clamp(96px, 14vw, 160px) 24px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(30, 64, 176, 0.50) 0%, transparent 60%),
    linear-gradient(160deg, #0a1f44 0%, #07154d 60%, #0a1f44 100%);
  overflow: hidden;
  text-align: center;
  color: #fff;
}

/* God rays NARANJAS sobre fondo AZUL — esquina sup. derecha */
.ascta-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 80% at 90% -8%, rgba(236, 78, 2, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 8% 110%, rgba(255, 122, 53, 0.15) 0%, transparent 50%);
}
.ascta-rays::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: conic-gradient(
    from 195deg at 92% -2%,
    transparent 0deg,
    rgba(236, 78, 2, 0.22) 12deg,
    transparent 28deg,
    rgba(236, 78, 2, 0.16) 48deg,
    transparent 64deg,
    rgba(255, 122, 53, 0.20) 88deg,
    transparent 110deg,
    rgba(236, 78, 2, 0.14) 130deg,
    transparent 160deg
  );
  filter: blur(40px);
  animation: ascta-rotate 38s linear infinite;
  opacity: 0.95;
}
.ascta-rays::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 65%, rgba(7, 21, 77, 0.40) 0%, transparent 75%);
}
@keyframes ascta-rotate {
  to { transform: rotate(360deg); }
}

.ascta-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Badge sobre azul: glass blanco translúcido */
.ascta-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.005em;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.ascta-badge i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--as-accent);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(236, 78, 2, 0.6);
}
.ascta-badge i::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--as-accent);
  opacity: 0.5;
  animation: ascta-pulse 1.8s ease-out infinite;
}
@keyframes ascta-pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}

.ascta-title {
  font-family: var(--as-font);
  /* clamp recalculado para que las 3 líneas (forzadas con <br>) quepan
     en todos los viewports sin que el navegador rompa una línea extra:
     · mobile 375px → 1.7rem = 27.2px (línea larga ≈ 27ch × 0.42em ≤ 327px) ✓
     · tablet 768px → 5.5vw = 42px ✓
     · desktop 1440px → 4.2rem = 67.2px ✓ */
  font-size: clamp(1.7rem, 5.5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: #fff;
  margin: 8px 0 4px;
  /* max-width amplio (28ch ≈ "La ventana se cierra cuando" + margen) pero
     capado al 100% del contenedor en mobile para no desbordar. */
  max-width: min(28ch, 100%);
  text-wrap: balance;
}
.ascta-title-accent {
  background: linear-gradient(135deg, var(--as-accent) 0%, #ff8c4a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ascta-sub {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  margin: 0;
  line-height: 1.65;
  font-weight: 400;
}

.ascta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 32px;
  background: var(--as-accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 20px rgba(236, 78, 2, 0.30), 0 2px 4px rgba(236, 78, 2, 0.10);
  margin-top: 12px;
  font-family: var(--as-font);
}
.ascta-btn:hover {
  background: #ff5a14;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(236, 78, 2, 0.40), 0 4px 8px rgba(236, 78, 2, 0.15);
}
.ascta-btn:active {
  transform: translateY(0);
}
.ascta-btn svg {
  transition: transform 0.2s ease;
}
.ascta-btn:hover svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .ascta-rays::before { animation: none; }
  .ascta-badge i::after { animation: none; }
  .ascta-btn:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════
   MANIFIESTO · fondo AZUL de marca (dark break) con tabla blanca
   El section rompe en azul; la tabla interior se mantiene blanca
   para máxima legibilidad sobre la base oscura.
   ════════════════════════════════════════════════════════ */
.manifesto-section {
  background: linear-gradient(180deg, var(--as-blue) 0%, var(--as-ink) 100%) !important;
  color: #ffffff !important;
  border-top: none !important;
  border-bottom: none !important;
}
.manifesto-section .manifesto-title {
  color: #ffffff !important;
}
.manifesto-section .manifesto-description {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Wrapper tabla en light */
.manifesto-section .comparison-table-wrap {
  border: 1px solid var(--as-line) !important;
  background: var(--as-bg) !important;
  box-shadow: var(--as-shadow-soft);
}

/* Cabecera tabla */
.manifesto-section .comparison-table thead th {
  background: var(--as-bg-soft) !important;
  border-bottom: 1px solid var(--as-line) !important;
  color: var(--as-ink-soft) !important;
}
.manifesto-section .comparison-table .comp-them-head {
  color: var(--as-ink-mute) !important;
  background: var(--as-bg-soft) !important;
}
.manifesto-section .comparison-table .comp-us-head {
  color: #fff !important;
  background: var(--as-ink) !important;
  border-left: 1px solid var(--as-line) !important;
}
.manifesto-section .comparison-table .comp-us-head::after {
  background: linear-gradient(90deg, var(--as-blue), var(--as-accent)) !important;
}

/* Filas */
.manifesto-section .comparison-table tbody tr {
  border-bottom: 1px solid var(--as-line) !important;
  transition: background 0.2s;
}
.manifesto-section .comparison-table tbody tr:hover td {
  background: var(--as-bg-soft);
}
.manifesto-section .comparison-table th[scope="row"] {
  color: var(--as-ink) !important;
  font-weight: 600;
}
.manifesto-section .comparison-table .comp-them {
  color: var(--as-ink-mute) !important;
}
.manifesto-section .comparison-table .comp-us {
  color: var(--as-ink) !important;
  background: linear-gradient(180deg, rgba(30, 64, 176, 0.04) 0%, rgba(30, 64, 176, 0.01) 100%) !important;
  border-left: 1px solid var(--as-line) !important;
  font-weight: 500;
}
.manifesto-section .comparison-table tbody tr:hover td.comp-us {
  background: rgba(30, 64, 176, 0.06) !important;
}

/* Marks visibles sobre blanco */
.manifesto-section .comparison-table .comp-mark.cross {
  color: var(--as-ink-mute) !important;
}
.manifesto-section .comparison-table .comp-mark.check {
  color: var(--as-accent) !important;
}

/* Mobile responsive: ajustes para fondo blanco */
@media (max-width: 768px) {
  .manifesto-section .comparison-table tbody tr {
    border-bottom: 1px solid var(--as-line) !important;
  }
  .manifesto-section .comparison-table th[scope="row"] {
    color: var(--as-ink-mute) !important;
  }
  .manifesto-section .comparison-table .comp-us {
    color: var(--as-ink) !important;
  }
}

/* ════════════════════════════════════════════════════════
   COMPARISON TABLE · precisión profesional
   Hairlines, padding tabular, badges monocromáticos, hover silencioso.
   Aesthetic: Stripe / Linear — institucional, sin adornos.
   ════════════════════════════════════════════════════════ */

/* Wrapper: radio limpio + sombra institucional sobre azul */
.manifesto-section .comparison-table-wrap {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 24px 56px -24px rgba(0, 0, 0, 0.45),
    0 6px 18px rgba(0, 0, 0, 0.10) !important;
  overflow: hidden;
}

/* Tabla: tipografía tabular y rítmica */
.manifesto-section .comparison-table {
  font-feature-settings: "tnum", "cv11", "ss01";
}

/* Header: padding tabular consistente */
.manifesto-section .comparison-table thead th {
  padding: 1.125rem 1.5rem !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  vertical-align: bottom !important;
}

/* Anchos de columna · agencia tradicional más estrecha,
   estándar AuditScale gana presencia. */
.manifesto-section .comparison-table .comp-them-head { width: 32% !important; }
.manifesto-section .comparison-table .comp-us-head    { width: 50% !important; }

/* Cabecera columna AuditScale: gradiente sólido institucional */
.manifesto-section .comparison-table .comp-us-head {
  background: linear-gradient(180deg, var(--as-blue) 0%, #173592 100%) !important;
  font-weight: 700 !important;
}

/* Accent line top: 1px hairline azul, sin bicolor */
.manifesto-section .comparison-table .comp-us-head::after {
  height: 1px !important;
  background: var(--as-blue) !important;
  opacity: 0.55 !important;
}

/* Celdas body: top-align + padding consistente */
.manifesto-section .comparison-table th[scope="row"],
.manifesto-section .comparison-table td {
  padding: 1.125rem 1.5rem !important;
  vertical-align: top !important;
  line-height: 1.55 !important;
}

/* Hanging indent en columnas con icono: las líneas que envuelven se alinean
   con el inicio del texto, no con el borde de la celda. */
.manifesto-section .comparison-table td.comp-them,
.manifesto-section .comparison-table td.comp-us {
  padding-left: calc(1.5rem + 30px) !important;
  text-indent: -30px !important;
}

/* Dimension column: limpia, sin barrita decorativa */
.manifesto-section .comparison-table th[scope="row"] {
  padding-left: 1.5rem !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--as-ink) !important;
}
.manifesto-section .comparison-table th[scope="row"]::before {
  display: none !important;
}

/* Cuerpo columna AuditScale: tinte sutil + borde 1px hairline */
.manifesto-section .comparison-table .comp-us {
  background: rgba(30, 64, 176, 0.035) !important;
  border-left: 1px solid rgba(30, 64, 176, 0.18) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: var(--as-ink) !important;
}

.manifesto-section .comparison-table .comp-them {
  font-size: 0.95rem !important;
  color: var(--as-ink-mute) !important;
}

/* Filas: hairline divisor, sin sombras */
.manifesto-section .comparison-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: background 0.18s ease;
}
.manifesto-section .comparison-table tbody tr:last-child {
  border-bottom: none !important;
}

/* MARKS · ocultamos el carácter de fuente y dibujamos el icono con SVG
   embebido en ::before. Centrado pixel-perfect, sin depender de métricas. */
.manifesto-section .comparison-table .comp-mark {
  position: relative;
  font-size: 0 !important;
  line-height: 0 !important;
  margin-right: 12px !important;
  margin-top: 3px !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  border-radius: 50% !important;
}

.manifesto-section .comparison-table .comp-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
}

/* CHECK = badge azul de marca relleno con tick blanco SVG */
.manifesto-section .comparison-table .comp-mark.check {
  background: var(--as-blue) !important;
  border: none !important;
  box-shadow: none !important;
}
.manifesto-section .comparison-table .comp-mark.check::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,9.4 7.8,12.2 13.2,6.6'/></svg>");
  background-size: 100% 100%;
}

/* CROSS = hairline circle gris con cruz SVG centrada */
.manifesto-section .comparison-table .comp-mark.cross {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
}
.manifesto-section .comparison-table .comp-mark.cross::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'><line x1='6.5' y1='6.5' x2='11.5' y2='11.5'/><line x1='11.5' y1='6.5' x2='6.5' y2='11.5'/></svg>");
  background-size: 100% 100%;
}

/* Hover: silencioso, solo intensifica el tinte AuditScale */
.manifesto-section .comparison-table tbody tr:hover td.comp-us {
  background: rgba(30, 64, 176, 0.06) !important;
}
.manifesto-section .comparison-table tbody tr:hover .comp-mark.check {
  box-shadow: none !important;
  transform: none !important;
}
.manifesto-section .comparison-table .comp-mark {
  transition: none !important;
}

/* ════════════════════════════════════════════════════════
   DIAGNÓSTICO · Componente 21st.dev (cta-section-with-gallery)
   Reproducción vanilla: stagger + blur fade-in con grid
   asimétrico de 4 cards. Spring → cubic-bezier(0.34,1.56,0.64,1).
   Aplicado en sección #diagnostico encima de las 3 leak-rows.
   ════════════════════════════════════════════════════════ */
.dxg-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  margin: 32px 0 64px;
}
@media (min-width: 900px) {
  .dxg-detail {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
  }
}

/* ── Columna texto · stagger + blur ────────────── */
.dxg-content > [data-stagger-item] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(8px);
  transition:
    opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s),
    filter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s);
}
.dxg-detail.is-visible .dxg-content > [data-stagger-item] {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.dxg-content > [data-stagger-item]:nth-child(1) { --d: 0.20s; }
.dxg-content > [data-stagger-item]:nth-child(2) { --d: 0.40s; }
.dxg-content > [data-stagger-item]:nth-child(3) { --d: 0.60s; }
.dxg-content > [data-stagger-item]:nth-child(4) { --d: 0.80s; }

/* Anular las animaciones nativas de pain-v2 dentro del bloque dxg
   para que el stagger del componente sea la única animación */
.dxg-content [data-pain-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Galería · grid asimétrico (replica componente 21st.dev) ────── */
.dxg-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 60px 170px 60px 170px 60px;
  gap: 16px;
  min-height: 510px;
}
.dxg-cell {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(10, 31, 68, 0.08), 0 2px 6px rgba(10, 31, 68, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--cd, 0s),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--cd, 0s);
}
.dxg-detail.is-visible .dxg-cell {
  opacity: 1;
  transform: scale(1);
}

/* Posiciones grid asimétricas (idénticas al componente original) */
.dxg-cell-1 { grid-area: 1 / 2 / 3 / 3; --cd: 0.20s; }
.dxg-cell-2 { grid-area: 2 / 1 / 4 / 2; --cd: 0.40s; }
.dxg-cell-3 { grid-area: 4 / 1 / 6 / 2; --cd: 0.60s; }
.dxg-cell-4 { grid-area: 3 / 2 / 5 / 3; --cd: 0.80s; }

/* Backgrounds institucionales por categoría */
.dxg-cell-1 {
  background: linear-gradient(140deg, #0a1f44 0%, #0d2557 100%);
  color: #fff;
}
.dxg-cell-2 {
  background: linear-gradient(140deg, #1E40B0 0%, #2552d9 100%);
  color: #fff;
}
.dxg-cell-3 {
  background: var(--as-bg);
  border: 1px solid var(--as-line);
  color: var(--as-ink);
}
.dxg-cell-4 {
  background: linear-gradient(140deg, #EC4E02 0%, #ff7a35 100%);
  color: #fff;
}

.dxg-cell-tag {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
}
.dxg-cell-icon {
  align-self: center;
  margin: auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dxg-cell-icon svg {
  width: 56px;
  height: 56px;
  stroke-width: 1.4;
}
.dxg-cell-3 .dxg-cell-icon svg { color: var(--as-blue); }

.dxg-cell-label {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.dxg-cell-mock {
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  padding: 0 18px 18px;
  opacity: 0.32;
  pointer-events: none;
}
.dxg-cell-mock .mock-line {
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  margin-bottom: 6px;
}
.dxg-cell-mock .mock-line.short  { width: 38%; }
.dxg-cell-mock .mock-line.medium { width: 64%; }
.dxg-cell-mock .mock-line.long   { width: 92%; }

/* Mobile: grid se simplifica a 2x2 sin asimetría */
@media (max-width: 899px) {
  .dxg-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px;
    min-height: auto;
  }
  .dxg-cell-1, .dxg-cell-2, .dxg-cell-3, .dxg-cell-4 {
    grid-area: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dxg-content > [data-stagger-item],
  .dxg-cell {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   CSS de #casos comentado el 2026-05-13.
   La sección HTML fue eliminada (ver index.html → backup
   al final del archivo). Reactivar este bloque cuando
   vuelva la sección con casos reales documentados.
   ══════════════════════════════════════════════════════ */
/*
.cases-section {
  padding: clamp(64px, 10vw, 120px) 24px;
  background: var(--as-bg-soft);
  border-top: 1px solid var(--as-line);
  border-bottom: 1px solid var(--as-line);
}
.cases-container {
  max-width: 1200px;
  margin: 0 auto;
}
.cases-eyebrow .cases-soon-tag {
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--as-bg);
  border: 1px solid var(--as-line);
  color: var(--as-ink-mute);
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 4px 10px;
  border-radius: var(--as-radius-pill);
  font-size: 0.72rem;
  font-weight: 500;
  vertical-align: middle;
}
.cases-eyebrow .cases-soon-tag i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--as-accent);
  display: inline-block;
}
.cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .cases-grid { grid-template-columns: repeat(3, 1fr); }
}
.case-card {
  position: relative;
  background: var(--as-bg);
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--as-shadow-hover);
}
.case-card-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--as-ink-mute);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.case-card-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--as-accent);
  display: inline-block;
}
.case-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--as-ink);
  margin: 0 0 16px;
}
.case-card-preview {
  flex: 1;
  border-radius: 10px;
  background: var(--as-bg-soft-2);
  position: relative;
  overflow: hidden;
  min-height: 150px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-card-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 2.6s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
.case-card-preview svg {
  width: 56px; height: 56px;
  color: var(--as-ink-mute);
  opacity: 0.55;
  position: relative;
  z-index: 1;
}
.case-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--as-ink-mute);
  border-top: 1px solid var(--as-line);
  padding-top: 14px;
}
.case-card-meta strong { color: var(--as-ink); font-weight: 600; }
*/

/* ═════ GARANTÍA · rediseño "trabajamos sin coste" ═════ */
.guarantee-section {
  background: var(--as-bg);
}
.guarantee-mark-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.guarantee-mark-wrap svg.guarantee-ring {
  width: 130px;
  height: 130px;
  animation: rotateRing 28s linear infinite;
}
.guarantee-mark-wrap svg.guarantee-ring text {
  font-size: 5.4px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  fill: var(--as-ink-soft);
  font-family: var(--as-font);
}
.guarantee-mark-wrap .guarantee-mark-center {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--as-blue), #2552d9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(30, 64, 176, 0.30);
}
.guarantee-mark-wrap .guarantee-mark-center svg {
  width: 28px; height: 28px;
  stroke: #fff;
}
@keyframes rotateRing {
  to { transform: rotate(360deg); }
}
.guarantee-divider {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--as-line-strong);
  margin: 0 12px;
  vertical-align: middle;
}

/* ═════ COUNTERS GLOBAL ═════ */
[data-counter-end] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ═════ SMOOTH SCROLL CSS-NATIVE ═════ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-magnetic] { transform: none !important; }
  .as-loader { display: none; }
  .case-card-preview::before { animation: none; }
  .guarantee-mark-wrap svg.guarantee-ring { animation: none; }
}

/* ════════════════════════════════════════════════════════
   SHFEAT · Feature Showcase entre Servicios y Casos
   Componente 21st.dev (ruixen-ui-hero) reproducido vanilla.
   Layout 2-cols: copy + 2 CTAs a izq, mockup dashboard + checklist a dcha.
   ════════════════════════════════════════════════════════ */
.shfeat {
  position: relative;
  padding: clamp(64px, 10vw, 120px) 24px;
  background: linear-gradient(180deg, var(--as-bg) 0%, var(--as-bg-soft) 100%);
  overflow: hidden;
}
.shfeat-bg-1, .shfeat-bg-2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}
.shfeat-bg-1 {
  top: 8%; left: -120px;
  width: 320px; height: 320px;
  background: rgba(236, 78, 2, 0.10);
}
.shfeat-bg-2 {
  bottom: 5%; right: -140px;
  width: 380px; height: 380px;
  background: rgba(30, 64, 176, 0.08);
}
.shfeat-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 960px) {
  .shfeat-container {
    grid-template-columns: 1fr 1.05fr;
    gap: 72px;
  }
}

/* ── Columna izquierda ── */
.shfeat-left { display: flex; flex-direction: column; gap: 24px; }
.shfeat-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: var(--as-bg);
  border: 1px solid var(--as-line);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--as-ink);
  letter-spacing: -0.005em;
}
.shfeat-badge i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--as-accent);
  flex-shrink: 0;
}
.shfeat-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--as-ink);
  margin: 0;
  max-width: 13ch;
}
.shfeat-title-accent {
  background: linear-gradient(135deg, var(--as-accent) 0%, #ff7a35 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.shfeat-desc {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--as-ink-soft);
  margin: 0;
  max-width: 540px;
}
.shfeat-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.shfeat-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--as-font);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  border: none;
}
.shfeat-btn-primary {
  background: var(--as-ink);
  color: #fff;
  box-shadow: 0 4px 14px rgba(10, 31, 68, 0.22);
}
.shfeat-btn-primary:hover {
  background: #122c5e;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(10, 31, 68, 0.30);
}
.shfeat-btn-ghost {
  background: transparent;
  color: var(--as-ink);
  border: 1px solid var(--as-line-strong);
}
.shfeat-btn-ghost:hover {
  background: var(--as-bg);
  border-color: var(--as-ink-mute);
}
.shfeat-btn svg { transition: transform 0.2s ease; }
.shfeat-btn-primary:hover svg { transform: translateX(3px); }

/* ── Columna derecha: mockup + checklist ── */
.shfeat-right {
  position: relative;
}
.shfeat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid var(--as-line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 10px 40px rgba(10, 31, 68, 0.08), 0 2px 6px rgba(10, 31, 68, 0.04);
}

/* Dashboard mockup interno (sustituye a la imagen tour.png) */
.shfeat-mockup {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1f44 0%, #1E40B0 60%, #0a1f44 100%);
  border: 1px solid var(--as-line);
  margin-bottom: 24px;
}
.mk-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: rgba(7, 21, 77, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}
.mk-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  opacity: 0.55;
}
.mk-dot:nth-child(1) { background: #ff5a5a; }
.mk-dot:nth-child(2) { background: #ffb84a; }
.mk-dot:nth-child(3) { background: #4ad17e; }
.mk-bar-search {
  flex: 1;
  height: 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin-left: 14px;
  max-width: 200px;
}

.mk-body {
  position: absolute;
  inset: 28px 0 0 0;
  display: flex;
}
.mk-side {
  width: 28%;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mk-side-item {
  height: 8px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
}
.mk-side-item.is-active {
  background: rgba(236, 78, 2, 0.55);
  height: 10px;
}
.mk-side-item:nth-child(1) { width: 78%; }
.mk-side-item:nth-child(2) { width: 64%; }
.mk-side-item:nth-child(3) { width: 70%; }
.mk-side-item:nth-child(4) { width: 50%; }
.mk-side-item:nth-child(5) { width: 60%; }

.mk-main {
  flex: 1;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 8px;
}
.mk-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0; /* permite que el label se ajuste sin desbordar la card */
}
.mk-card-num {
  /* clamp escalable para que "Perplexity" (10ch) quepa en la card más
     estrecha del grid 3-col incluso cuando el mockup colapsa en mobile. */
  font-size: clamp(0.68rem, 1.05vw, 0.88rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.mk-card-label {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  width: 60%;
}
.mk-card-trend {
  height: 18px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.mk-card-trend i {
  flex: 1;
  background: linear-gradient(180deg, #ff8c4a, #EC4E02);
  border-radius: 1px;
  opacity: 0.85;
}
.mk-card-trend i:nth-child(1) { height: 30%; }
.mk-card-trend i:nth-child(2) { height: 50%; }
.mk-card-trend i:nth-child(3) { height: 35%; }
.mk-card-trend i:nth-child(4) { height: 70%; }
.mk-card-trend i:nth-child(5) { height: 55%; }
.mk-card-trend i:nth-child(6) { height: 90%; }
.mk-card-trend i:nth-child(7) { height: 75%; }
.mk-card-trend i:nth-child(8) { height: 100%; }
.mk-card-wide {
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.mk-card-wide svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mk-card-wide path.line {
  fill: none;
  stroke: #ff8c4a;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.mk-card-wide path.area {
  fill: url(#mkGrad);
  stroke: none;
  opacity: 0.4;
}

/* Overlay sobre el gráfico grande: label (izq) + delta numérico (dcha).
   Aprovecha la zona vacía superior del SVG (la curva ascendente vive en
   los 2/3 inferiores) sin solapar visualmente con la línea naranja.
   pointer-events: none → el SVG sigue siendo decorativo, accesibilidad OK. */
.mk-wide-overlay {
  position: absolute;
  top: 9px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
}
.mk-wide-label {
  font-size: clamp(0.5rem, 0.75vw, 0.62rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  max-width: 60%;
  font-variant-numeric: tabular-nums;
}
.mk-wide-delta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1;
}
.mk-wide-delta-num {
  font-size: clamp(0.82rem, 1.5vw, 1.05rem);
  font-weight: 800;
  color: #ff8c4a;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mk-wide-delta-sub {
  font-size: clamp(0.46rem, 0.65vw, 0.56rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 3px;
  line-height: 1;
}

/* ── Checklist ── */
.shfeat-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shfeat-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.93rem;
  color: var(--as-ink-soft);
  line-height: 1.5;
}
.shfeat-check-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(236, 78, 2, 0.10);
  color: var(--as-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shfeat-check-icon svg { width: 14px; height: 14px; stroke-width: 2.4; }

/* Stagger reveal hijo de [data-pain-reveal] */
.shfeat[data-pain-reveal] .shfeat-left > *,
.shfeat[data-pain-reveal] .shfeat-right {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.shfeat[data-pain-reveal].is-visible .shfeat-left > *,
.shfeat[data-pain-reveal].is-visible .shfeat-right {
  opacity: 1;
  transform: translateY(0);
}
.shfeat[data-pain-reveal] .shfeat-left > *:nth-child(1) { --d: 0s; }
.shfeat[data-pain-reveal] .shfeat-left > *:nth-child(2) { --d: 0.10s; }
.shfeat[data-pain-reveal] .shfeat-left > *:nth-child(3) { --d: 0.20s; }
.shfeat[data-pain-reveal] .shfeat-left > *:nth-child(4) { --d: 0.30s; }
.shfeat[data-pain-reveal] .shfeat-right { --d: 0.20s; }

.shfeat[data-pain-reveal] .shfeat-check {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--cd, 0s),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--cd, 0s);
}
.shfeat[data-pain-reveal].is-visible .shfeat-check {
  opacity: 1;
  transform: translateX(0);
}
.shfeat[data-pain-reveal].is-visible .shfeat-check:nth-child(1) { --cd: 0.55s; }
.shfeat[data-pain-reveal].is-visible .shfeat-check:nth-child(2) { --cd: 0.65s; }
.shfeat[data-pain-reveal].is-visible .shfeat-check:nth-child(3) { --cd: 0.75s; }
.shfeat[data-pain-reveal].is-visible .shfeat-check:nth-child(4) { --cd: 0.85s; }

@media (prefers-reduced-motion: reduce) {
  .shfeat *, .shfeat::before, .shfeat::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ════════════════════════════════════════════════════════
   DXG CAROUSEL · 3 puntos de dolor en carousel hover
   Reproducción vanilla del componente gallery-hover-carousel
   de 21st.dev. Sustituye las 3 leak-rows verticales.
   ════════════════════════════════════════════════════════ */
.dxg-carousel-section {
  margin-top: 80px; /* 48 + 32 (margin-bottom del antiguo .dxg-carousel-head, ya extirpado) */
}
.dxg-carousel-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .dxg-carousel-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }
}
.dxg-carousel-lead {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--as-ink-soft);
  margin: 0;
  max-width: 60ch;
}
.dxg-carousel-lead strong { color: var(--as-ink); font-weight: 600; }
.dxg-carousel-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.dxg-carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--as-line);
  background: var(--as-bg);
  color: var(--as-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
.dxg-carousel-btn:hover:not(:disabled) {
  background: var(--as-ink);
  border-color: var(--as-ink);
  color: #fff;
}
.dxg-carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.dxg-carousel-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.dxg-carousel-viewport {
  position: relative;
  width: 100%;
}
.dxg-carousel-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 4px;
  align-items: start;           /* cada card es independiente · ninguna estira a las demás */
  min-height: 360px;            /* reserva el espacio del card más alto · estabiliza la fila */
}
@media (min-width: 768px) {
  .dxg-carousel-track {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dxg-card {
  width: 100%;
  height: 360px;                /* ALTURA FIJA · cero layout shift en hover */
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--as-ink);
  transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 20px rgba(10, 31, 68, 0.06);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
}
.dxg-card:hover {
  box-shadow: 0 12px 40px rgba(10, 31, 68, 0.16);
}

/* Visual: ocupa toda la card SIEMPRE. El texto se desliza encima — no hay
   transición de altura, así nada provoca reflow ni layout shift. */
.dxg-card-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.dxg-card-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 1;
  transition: opacity 0.4s;
}
.dxg-card:hover .dxg-card-visual::after,
.dxg-card:focus-within .dxg-card-visual::after {
  opacity: 0;
}

/* Tag visible siempre en la parte inferior del visual (hasta hover) */
.dxg-card-front {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 2;
  color: #fff;
  transition: opacity 0.35s;
}
.dxg-card:hover .dxg-card-front,
.dxg-card:focus-within .dxg-card-front {
  opacity: 0;
}
.dxg-card-front-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 8px;
}
.dxg-card-front-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

/* Texto: contenedor blanco con ALTURA RESERVADA (200px del card de 360px).
   En idle queda fuera del card via translateY(100%). En hover entra deslizándose.
   Cero cambio de tamaño en el DOM → cero layout shift. */
.dxg-card-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;                /* 360 (card) - 160 (cabecera reservada) */
  background: var(--as-bg);
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  z-index: 3;
  overflow: hidden;
  box-sizing: border-box;
  transform: translateY(100%);  /* idle: oculto debajo del card */
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease-out;
  will-change: transform, opacity;
}
.dxg-card:hover .dxg-card-text,
.dxg-card:focus-within .dxg-card-text {
  transform: translateY(0);     /* hover: entra hasta cubrir los 200px inferiores */
  opacity: 1;
  pointer-events: auto;
}
.dxg-card-text-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--as-accent);
}
.dxg-card-text-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--as-ink);
  margin: 0;
  line-height: 1.2;
}
.dxg-card-text-summary {
  font-size: 0.88rem;
  color: var(--as-ink-soft);
  line-height: 1.5;
  margin: 0;
}
/* Arrow naranja eliminada por petición del cliente — no llevaba a ninguna URL */

/* === Visuales por categoría: SVG/gradient institucionales === */
.dxg-card.is-cat-1 .dxg-card-visual {
  background:
    radial-gradient(circle at 30% 30%, rgba(236, 78, 2, 0.40) 0%, transparent 55%),
    linear-gradient(135deg, #0a1f44 0%, #1E40B0 100%);
}
.dxg-card.is-cat-2 .dxg-card-visual {
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 122, 53, 0.35) 0%, transparent 50%),
    linear-gradient(135deg, #1a2d5a 0%, #0a1f44 100%);
}
.dxg-card.is-cat-3 .dxg-card-visual {
  background:
    radial-gradient(circle at 50% 100%, rgba(30, 64, 176, 0.45) 0%, transparent 60%),
    linear-gradient(135deg, #0a1f44 0%, #2c1a44 100%);
}

/* Stat hero (gran cifra) dentro del visual */
.dxg-card-stat {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.dxg-card-stat-num {
  font-size: clamp(3.5rem, 7vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;        /* relajado de -0.05em para evitar clip de glifo */
  line-height: 0.9;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Espacio interno para curvas de glifos (8, 4) que sobresalen del bounding box
     cuando el background-clip: text combina con tracking negativo */
  padding-right: 0.08em;
  display: inline-block;          /* respetar el padding-right */
  text-align: center;
  box-sizing: content-box;
}
.dxg-card-stat-sym {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  margin-left: 2px;               /* compensa el padding-right del num para que el "%" no se separe */
}

/* Líneas de fondo decorativas en el visual */
.dxg-card-grid-deco {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .dxg-card-visual,
  .dxg-card-text,
  .dxg-card-text-arrow { transition: none !important; }
}

/* ════════════════════════════════════════════════════════
   DXG RADAR · escáner SVG sustituyendo a la galería de 4 cells
   Paleta institucional: azul #1E40B0 + naranja #EC4E02 (accent).
   Vanilla (SVG + CSS animations), sin WebGL.
   ════════════════════════════════════════════════════════ */
.dxg-radar {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
}
.dxg-radar-glow {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(30, 64, 176, 0.25) 0%, rgba(30, 64, 176, 0.08) 40%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}
.dxg-radar-svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  transform: rotateX(12deg);
  transform-style: preserve-3d;
}
.dxg-radar-ring {
  fill: none;
  stroke: rgba(30, 64, 176, 0.32);
  stroke-width: 0.8;
}
.dxg-radar-ring.is-bold {
  stroke: rgba(30, 64, 176, 0.55);
  stroke-width: 1.2;
}
.dxg-radar-cross {
  stroke: rgba(30, 64, 176, 0.18);
  stroke-width: 0.6;
  stroke-dasharray: 2 4;
}
.dxg-radar-sweep-group {
  transform-origin: 100px 100px;
  animation: dxg-sweep 4.8s linear infinite;
}
.dxg-radar-sweep-cone {
  fill: url(#dxgSweepGrad);
}
.dxg-radar-sweep-arm {
  stroke: rgba(30, 64, 176, 0.95);
  stroke-width: 1.4;
}
@keyframes dxg-sweep {
  to { transform: rotate(360deg); }
}

/* Blips (objetivos detectados) — pulse staggered */
.dxg-radar-blip {
  fill: #EC4E02;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: dxg-blip-pulse 4.8s ease-in-out infinite;
}
.dxg-radar-blip.b1 { animation-delay: 0.4s; }
.dxg-radar-blip.b2 { animation-delay: 1.6s; }
.dxg-radar-blip.b3 { animation-delay: 2.7s; }
.dxg-radar-blip.b4 { animation-delay: 3.8s; }
.dxg-radar-blip.b5 { animation-delay: 1.0s; }
@keyframes dxg-blip-pulse {
  0% { opacity: 0; transform: scale(0.4); }
  10% { opacity: 1; transform: scale(1.6); }
  25% { opacity: 0.85; transform: scale(1); }
  60% { opacity: 0; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(0.4); }
}

/* Centro naranja con pulso halo */
.dxg-radar-center {
  fill: #EC4E02;
  filter: drop-shadow(0 0 4px rgba(236, 78, 2, 0.75));
}
.dxg-radar-center-pulse {
  fill: none;
  stroke: #EC4E02;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: dxg-center-halo 2.4s ease-out infinite;
}
@keyframes dxg-center-halo {
  0% { transform: scale(0.5); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Etiquetas técnicas tenues alrededor del radar */
.dxg-radar-label {
  font-family: var(--as-font);
  font-size: 5.4px;
  font-weight: 600;
  letter-spacing: 0.12em;
  fill: rgba(30, 64, 176, 0.45);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .dxg-radar-sweep-group,
  .dxg-radar-blip,
  .dxg-radar-center-pulse {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   INVSPLIT · sección "Inversión" rediseñada (split-screen high-ticket)
   Izquierda: filosofía sobre fondo blanco. Derecha: el acuerdo en
   panel azul corporativo. Hairlines, sin radios excesivos.
   ════════════════════════════════════════════════════════ */
.invsplit {
  padding: clamp(80px, 10vw, 140px) 24px;
  background: var(--as-bg);
}
.invsplit-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  background: transparent;
  /* Sin border ni overflow: cada columna es una pieza independiente */
}
@media (min-width: 960px) {
  .invsplit-grid {
    grid-template-columns: 5fr 7fr;
  }
}

/* ── Columna izquierda: filosofía ── */
.invsplit-philosophy {
  position: relative;
  padding: clamp(56px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(36px, 5vw, 56px);
  min-height: 540px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 48px;
  overflow: hidden;
  isolation: isolate;
  /* Sombra de profundidad sutil */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
  /* Textura blueprint · grid milimetrado 36px @ 3.5% */
  background-color: var(--as-bg);
  background-image:
    linear-gradient(rgba(10, 31, 68, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 31, 68, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: -1px -1px;
}
/* Ambient glow · radial blur azul corporativo + chispa naranja */
.invsplit-philosophy::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 65% 55% at 22% 85%, rgba(30, 64, 176, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 92% 12%, rgba(240, 120, 32, 0.04) 0%, transparent 65%);
  filter: blur(8px);
}
/* Líneas guía sutiles en intersecciones del grid (cruces hairline) */
.invsplit-philosophy::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle 1.5px at 50% 50%, rgba(10, 31, 68, 0.06) 100%, transparent 100%);
  background-size: 144px 144px;
  background-position: 0 0;
  opacity: 0.7;
}
/* (Las columnas son piezas independientes con gap 16px,
   no necesitan separador interno entre ellas) */
.invsplit-eyebrow-light {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--as-ink-mute);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.invsplit-eyebrow-light::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--as-ink-mute);
}
.invsplit-title {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: var(--as-ink);
  margin: 0 0 24px;
  max-width: 14ch;
}
.invsplit-lead {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--as-ink-soft);
  margin: 0;
  max-width: 42ch;
}
.invsplit-meta {
  border-top: 1px solid var(--as-line);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.invsplit-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
  gap: 16px;
}
.invsplit-meta-label {
  color: var(--as-ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 500;
  flex-shrink: 0;
}
.invsplit-meta-value {
  color: var(--as-ink);
  font-weight: 600;
  text-align: right;
  letter-spacing: -0.01em;
}

/* ── Columna derecha: el acuerdo ── */
.invsplit-deal {
  padding: clamp(48px, 5.5vw, 80px);
  background: #0D1F6B;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  border: none;
  border-radius: 48px;
  overflow: hidden;
  /* Sombra idéntica a la columna clara para que floten parejas */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
}
.invsplit-deal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(236, 78, 2, 0.55) 30%, rgba(236, 78, 2, 0.55) 70%, transparent 100%);
}
.invsplit-eyebrow-deal {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-accent);
  margin: 0;
}

/* .invsplit-block-* eliminados 2026-05-13 — sustituidos por
   .apply-acc-* (acordeón). Ver bloque al final del archivo. */

.invsplit-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.invsplit-checks li {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  position: relative;
  padding-left: 24px;
  line-height: 1.5;
}
.invsplit-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 1px;
  background: var(--as-accent);
}

.invsplit-cta {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--as-accent);
  color: #fff;
  border: none;
  padding: 15px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-family: var(--as-font);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 20px rgba(236, 78, 2, 0.32), 0 1px 2px rgba(236, 78, 2, 0.10);
}
.invsplit-cta:hover {
  background: #ff5a14;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(236, 78, 2, 0.42), 0 2px 4px rgba(236, 78, 2, 0.15);
}
.invsplit-cta svg { transition: transform 0.2s ease; }
.invsplit-cta:hover svg { transform: translateX(4px); }

@media (max-width: 959px) {
  .invsplit-philosophy { min-height: auto; }
}

  padding: clamp(64px, 9vw, 120px) 24px !important;
  position: relative;
  overflow: hidden;
}
.guarantee-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(13, 31, 107, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 31, 107, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.7;
}
.guarantee-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(13, 31, 107, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(240, 120, 32, 0.05) 0%, transparent 55%);
  pointer-events: none;
}

.guarantee-card {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  background: var(--as-bg) !important;
  border: 1px solid rgba(13, 31, 107, 0.10) !important;
  border-radius: 28px !important;
  padding: clamp(48px, 6vw, 80px) clamp(36px, 4vw, 64px) !important;
  box-shadow: 0 24px 60px rgba(13, 31, 107, 0.08), 0 4px 12px rgba(13, 31, 107, 0.04) !important;
  text-align: center !important;
}

/* Sello circular con texto rotando + candado central */
.gua-seal-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Variante pequeña · usada en el footer del card junto a la clause */
.gua-seal-wrap.is-small {
  width: 92px;
  height: 92px;
  margin: 0;
}
.gua-seal-wrap.is-small .gua-seal-rotating text { font-size: 9.4px; letter-spacing: 0.18em; }
.gua-seal-wrap.is-small .gua-seal-center {
  width: 46px;
  height: 46px;
  box-shadow: 0 4px 12px rgba(13, 31, 107, 0.28);
}
.gua-seal-wrap.is-small .gua-seal-center svg { width: 20px; height: 20px; }
.gua-seal-rotating {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: guaSealRotate 26s linear infinite;
}
@keyframes guaSealRotate {
  to { transform: rotate(360deg); }
}
.gua-seal-rotating text {
  font-size: 8.4px;
  font-weight: 700;
  letter-spacing: 0.20em;
  fill: #0D1F6B;
  font-family: var(--as-font);
}
.gua-seal-center {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0D1F6B, #1E40B0);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(13, 31, 107, 0.32);
}
.gua-seal-center svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guarantee-card-eyebrow {
  display: block !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--as-accent) !important;
  margin-bottom: 14px !important;
}
.guarantee-card-h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
  color: var(--as-ink) !important;
  margin: 0 0 12px !important;
}
.guarantee-card-h2 em {
  font-family: var(--as-font);
  font-style: italic;
  font-weight: 400;
  color: var(--as-accent);
}
.guarantee-card-h3 {
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  font-weight: 500;
  color: var(--as-ink-soft);
  margin: 0 auto;
  max-width: 50ch;
  line-height: 1.55;
}

/* 2 puntos clave con iconos institucionales */
.gua-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 36px 0 36px;
  text-align: left;
}
@media (min-width: 720px) {
  .gua-points { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.gua-point {
  background: #F8F9FB;
  border: 1px solid rgba(13, 31, 107, 0.08);
  border-radius: 16px;
  padding: 22px 22px 22px 72px;
  position: relative;
}
.gua-point-icon {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--as-bg);
  border: 1px solid rgba(13, 31, 107, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0D1F6B;
}
.gua-point-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.gua-point-icon.is-accent {
  background: linear-gradient(135deg, #F07820, #ff8c4a);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(240, 120, 32, 0.3);
}
.gua-point-icon.is-accent svg { stroke: #fff; }
.gua-point-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--as-ink);
  margin: 0 0 6px;
}
.gua-point-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--as-ink-soft);
  margin: 0;
}

/* Footer del card · clause izquierda + sello pequeño derecha */
.gua-footer {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(13, 31, 107, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
@media (min-width: 640px) {
  .gua-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 24px;
  }
}

.guarantee-card-clause {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: clamp(0.95rem, 1.5vw, 1.18rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0D1F6B !important;
  max-width: none;
  line-height: 1.35 !important;
  font-style: normal !important;
  flex: 1;
}
@media (min-width: 640px) {
  .guarantee-card-clause {
    white-space: nowrap;            /* en desktop una sola línea */
  }
}
@media (max-width: 639px) {
  .guarantee-card-clause {
    font-size: 0.95rem !important;
  }
}
.guarantee-card-clause em {
  color: var(--as-accent) !important;
  font-style: normal !important;
}

@media (prefers-reduced-motion: reduce) {
  .gua-seal-rotating { animation: none !important; }
}

/* ════════════════════════════════════════════════════════
   FOOTER · uniformidad con sección ASCTA
   Mismo azul institucional, sin border de separación.
   ════════════════════════════════════════════════════════ */
.site-footer {
  background: #0a1f44 !important;
  border-top: none !important;
  color: #fff;
}
.site-footer .footer-copyright {
  color: rgba(255, 255, 255, 0.45) !important;
}
.site-footer .footer-links a {
  color: rgba(255, 255, 255, 0.65) !important;
  transition: color 0.2s ease;
}
.site-footer .footer-links a:hover {
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════
   AS MODAL · "Solicitar Auditoría" — abre desde botón ASCTA
   Backdrop blur + tarjeta azul + form con efecto glass.
   ════════════════════════════════════════════════════════ */
.as-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.as-modal.is-open { opacity: 1; pointer-events: auto; }
.as-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 21, 77, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
}
.as-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - 40px);
  background: linear-gradient(135deg, #1E40B0 0%, #0a1f44 70%, #07154d 100%);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(7, 21, 77, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}
.as-modal.is-open .as-modal-card {
  transform: scale(1) translateY(0);
}
.as-modal-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(236, 78, 2, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(30, 64, 176, 0.40) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 50% 100%, rgba(255, 122, 53, 0.10) 0%, transparent 50%);
  opacity: 0.9;
}
.as-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 4;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.3s;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.as-modal-close:hover { background: rgba(255, 255, 255, 0.22); transform: rotate(90deg); }
.as-modal-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }

.as-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  flex: 1;
}
@media (min-width: 880px) {
  .as-modal-grid { grid-template-columns: 1fr 1fr; overflow: hidden; }
}

.as-modal-left {
  padding: 36px 32px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-y: auto;
}
@media (min-width: 880px) { .as-modal-left { padding: 48px; } }

.as-modal-h2 {
  font-size: clamp(1.65rem, 2.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  color: #fff;
}
.as-modal-lead {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 38ch;
}

.as-modal-features { display: flex; flex-direction: column; gap: 18px; }
.as-modal-feature { display: flex; align-items: flex-start; gap: 14px; }
.as-modal-feature-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff8c4a;
}
.as-modal-feature-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.as-modal-feature-text h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: #fff;
}
.as-modal-feature-text p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0;
}

.as-modal-quote {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.as-modal-quote blockquote {
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.55;
  color: #fff;
  margin: 0 0 16px;
  font-style: italic;
}
.as-modal-quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
}
.as-modal-quote-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8c4a, #EC4E02);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
}

.as-modal-right {
  padding: 36px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.18);
}
@media (min-width: 880px) {
  .as-modal-right { padding: 48px; background: transparent; }
}
.as-modal-formwrap {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 26px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(7, 21, 77, 0.40);
}
.as-modal-form-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.as-modal-form-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 20px;
  line-height: 1.5;
}
.as-modal-form .field { margin-bottom: 14px; }
.as-modal-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.as-modal-form label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
}
.as-modal-form input,
.as-modal-form textarea,
.as-modal-form select {
  width: 100%;
  padding: 11px 14px;
  background: rgba(7, 21, 77, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  font-family: var(--as-font);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  resize: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
/* Caret personalizado para los selects (chevron blanco) */
.as-modal-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1.5 6,6.5 11,1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
  cursor: pointer;
}
.as-modal-form select option {
  background: #07154d;
  color: #fff;
}
.as-modal-form input::placeholder,
.as-modal-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}
.as-modal-form input:focus,
.as-modal-form textarea:focus,
.as-modal-form select:focus {
  outline: none;
  border-color: rgba(236, 78, 2, 0.55);
  background: rgba(7, 21, 77, 0.65);
  box-shadow: 0 0 0 3px rgba(236, 78, 2, 0.18);
}

.as-modal-submit {
  width: 100%;
  margin-top: 8px;
  padding: 13px 24px;
  background: #fff;
  color: var(--as-blue);
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  font-family: var(--as-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.as-modal-submit:hover:not(:disabled) {
  background: #f0f4ff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 255, 255, 0.18);
}
.as-modal-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.as-modal-submit .spin {
  width: 14px; height: 14px;
  border: 2px solid var(--as-blue);
  border-top-color: transparent;
  border-radius: 50%;
  animation: as-spin 0.7s linear infinite;
}
@keyframes as-spin { to { transform: rotate(360deg); } }

.as-modal-form-fineprint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin: 14px 0 0;
}

.as-modal-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 30px 8px;
}
.as-modal-success.is-shown { display: flex; }
.as-modal-success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--as-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(236, 78, 2, 0.50);
}
.as-modal-success-icon svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.as-modal-success h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.as-modal-success p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  margin: 0;
  max-width: 32ch;
}
.as-modal-success-back {
  margin-top: 8px;
  padding: 9px 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 100px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--as-font);
  transition: background 0.2s;
}
.as-modal-success-back:hover { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 879px) {
  .as-modal-card { max-height: calc(100vh - 24px); }
  .as-modal-formwrap { padding: 20px; }
  .as-modal-quote { padding-top: 18px; }
}

/* ════════════════════════════════════════════════════════
   FEATURES-8 · Port vanilla del componente 21st.dev features-8.tsx
   Reemplaza al bento grid anterior. Grid 6-col asimétrico:
   row 1: [card1 span2][card2 span2][card3 span2]
   row 2: [card4 span3][card5 span3]
   Aesthetic: AuditScale institucional (hairlines, monocromático).
   ════════════════════════════════════════════════════════ */

.features-8-section {
  background: var(--as-bg-soft);
  padding: clamp(64px, 10vw, 120px) 24px;
}
.features-8-container {
  max-width: 1200px;
  margin: 0 auto;
}

.f8-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .f8-grid { grid-template-columns: repeat(6, 1fr); }
  .f8-card-2 { grid-column: span 3; }
  .f8-card-3 { grid-column: span 3; }
  .f8-card-4,
  .f8-card-5 { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .f8-card-1 { grid-column: span 2; }
  .f8-card-2 { grid-column: span 2; }
  .f8-card-3 { grid-column: span 2; }
  .f8-card-4 { grid-column: span 3; }
  .f8-card-5 { grid-column: span 3; }
}

.f8-card {
  position: relative;
  background: var(--as-bg);
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius-card);
  padding: 1.75rem;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.f8-card:hover {
  border-color: var(--as-line-strong);
  box-shadow: var(--as-shadow-soft);
}

/* ── CARD 1 · 100% con curva ── */
.f8-card-1 {
  align-items: center;
  justify-content: center;
}
.f8-card-1-content {
  text-align: center;
  margin: auto;
}
.f8-stat-100 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14rem;
  height: 6rem;
}
.f8-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #F07820; /* Naranja corporativo · curva manuscrita rodeando el 100% */
  opacity: 0.85;
}
/* Descripción centrada del card 1 con anchura controlada */
.f8-card-desc--center {
  max-width: 280px;
  margin: 0.85rem auto 0;
  text-align: center;
}
.f8-100-num {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--as-ink);
  font-variant-numeric: tabular-nums;
}
.f8-card-title-center {
  margin: 1.5rem 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--as-ink);
  text-align: center;
  line-height: 1.2;
}

/* ── CARD 2 · Globe + cerradura ── */
.f8-card-2 { text-align: center; }
.f8-globe {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  margin: 0.5rem auto 0;
  border: 1px solid var(--as-line);
  border-radius: 50%;
}
.f8-globe::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid var(--as-line);
  border-radius: 50%;
  pointer-events: none;
}
.f8-globe-svg {
  width: 6rem;
  height: auto;
}
.f8-globe-svg .f8-globe-mute { color: var(--as-line-strong); }
.f8-globe-svg .f8-globe-line { color: var(--as-blue); }

/* Body común para cards 2 y 3 */
.f8-card-body {
  margin-top: auto;
  padding-top: 1.5rem;
  text-align: center;
}
.f8-card-2 .f8-card-body,
.f8-card-3 .f8-card-body {
  text-align: center;
}
.f8-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--as-ink);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.f8-card-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--as-ink-mute);
  margin: 0;
}

/* Justificado tipográfico solo en cards 4 (Su tiempo, blindado) y 5 (Filtro de Prospectos).
   Hyphens auto requiere lang="es" en <html> (presente). No afecta título ni icon-circle. */
.f8-card-4 .f8-card-desc,
.f8-card-5 .f8-card-desc {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ── CARD 3 · Browser frame con chart ── */
.f8-browser-wrap {
  margin: 0.5rem -0.25rem 0;
  padding: 0;
}
.f8-browser-svg {
  width: 100%;
  height: auto;
  display: block;
}
.f8-browser-svg .f8-browser-frame { color: var(--as-line); }
.f8-browser-svg .f8-browser-dot { fill: var(--as-line-strong); }
.f8-browser-svg .f8-chart-line { color: #F07820; } /* Naranja corporativo · stroke de la línea para romper monotonía azul */

/* ── CARDS 4 & 5 · Layout dividido (lado izquierdo + visual derecha) ── */
.f8-card-wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1.75rem;
}
@media (min-width: 640px) {
  .f8-card-wide {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.f8-card-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
}
.f8-icon-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--as-line);
  border-radius: 50%;
}
.f8-icon-circle::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid var(--as-line);
  border-radius: 50%;
  pointer-events: none;
}
.f8-icon-circle svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--as-ink-soft);
}
.f8-card-text .f8-card-title {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

/* ── CARD 4 · Terminal con chart ── */
.f8-terminal {
  position: relative;
  margin: 1.5rem -1.75rem -1.75rem 0;
  padding: 1.5rem;
  border-top: 1px solid var(--as-line);
  border-left: 1px solid var(--as-line);
  border-top-left-radius: var(--as-radius-card);
  background: var(--as-bg-soft-2);
}
@media (min-width: 640px) {
  .f8-terminal { margin-left: 1.5rem; }
}
.f8-terminal-dots {
  position: absolute;
  top: 0.6rem;
  left: 0.85rem;
  display: inline-flex;
  gap: 4px;
}
.f8-terminal-dots span {
  display: block;
  width: 8px;
  height: 8px;
  background: var(--as-line);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 50%;
}
.f8-terminal-chart {
  width: 100%;
  height: auto;
  margin-top: 1rem;
  display: block;
}
.f8-terminal-chart .f8-chart-line { color: var(--as-blue); }

/* Gradient fill compartido entre charts */
.f8-chart-fill { /* hereda fill via url() del propio SVG */ }

/* ── CARD 5 · Pipeline con avatars ── */
.f8-pipeline {
  position: relative;
  margin: 1.5rem -1.75rem -1.75rem 0;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  min-height: 220px;
}
@media (min-width: 640px) {
  .f8-pipeline { margin-left: 1.5rem; }
}
.f8-pipeline-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--as-line);
  transform: translateX(-50%);
  pointer-events: none;
}
.f8-pipe-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
}
.f8-pipe-row--right {
  width: calc(50% + 1rem);
  justify-content: flex-end;
}
.f8-pipe-row--left {
  width: calc(50% + 1rem);
  margin-left: calc(50% - 1rem);
}
.f8-pipe-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--as-bg);
  border: 1px solid var(--as-line);
  border-radius: 6px;
  padding: 4px 9px;
  color: var(--as-ink-soft);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  letter-spacing: -0.005em;
}
.f8-pipe-avatar {
  width: 1.85rem;
  height: 1.85rem;
  background: #0D1F6B; /* Azul oscuro corporativo · sólido, sin gradiente */
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 3px solid var(--as-bg);
  box-shadow: 0 0 0 1px var(--as-line);
  flex-shrink: 0;
}

/* ═════ Card 1 · número 60 DÍAS gigante (sustituye al 100% + curva) ═════ */
.f8-stat-60 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.f8-60-num {
  font-size: clamp(7rem, 14vw, 9.5rem);
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 0.85;
  color: #0D1F6B;
  font-variant-numeric: tabular-nums;
}
.f8-60-unit {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--as-ink-mute);
  padding-bottom: 14px;
}

/* ═════ Card 2 · funnel SVG (sustituye al globo + cerradura) ═════ */
.f8-funnel-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 12px 0;
}
.f8-funnel {
  width: 184px;     /* +33% sobre 138 — más presencia visual sin tocar layout */
  height: 128px;    /* +33% sobre 96 — proporciones del viewBox 138x96 preservadas */
  max-width: 100%;  /* failsafe responsive: nunca desborda el padding del card */
}
.f8-funnel-row {
  fill: none;
  stroke: var(--as-blue);
  stroke-width: 1.4;
}
.f8-funnel-row.is-fade {
  stroke: rgba(30, 64, 176, 0.30);
}
.f8-funnel-row.is-bold {
  stroke: var(--as-accent);
  stroke-width: 1.6;
}
.f8-funnel-target {
  fill: rgba(236, 78, 2, 0.12);
  stroke: var(--as-accent);
  stroke-width: 1.6;
}
.f8-funnel-tic {
  stroke: rgba(10, 31, 68, 0.18);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.f8-funnel-label {
  font-family: var(--as-font);
  font-size: 6.4px;
  font-weight: 600;
  letter-spacing: 0.10em;
  fill: var(--as-ink-mute);
  text-transform: uppercase;
}
.f8-funnel-label.is-accent { fill: var(--as-accent); }

/* ════════════════════════════════════════════════════════
   FEATURES-8 · Visuales rediseñados (Business/Finanzas)
   - CARD 3: mini-dashboard financiero (+314% + bar chart)
   - CARD 4: toggle Piloto Automático ON + check
   - CARD 5: cola de leads filtrados (rejected + match)
   ════════════════════════════════════════════════════════ */

/* ─── CARD 3 · Mini-dashboard financiero ──────────────── */
.f8-fin-dash {
  margin: 0.25rem 0 1rem;
  padding: 1.15rem 1.25rem 1.1rem;
  background: var(--as-bg-soft);
  border: 1px solid var(--as-line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  position: relative;
  overflow: hidden;
}
.f8-fin-dash::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #16A34A 25%, #F07820 75%, transparent 100%);
  opacity: 0.45;
}
.f8-fin-dash-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.f8-fin-dash-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-ink-mute);
}
.f8-fin-dash-stat {
  font-family: var(--as-font);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--as-corp-blue);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.f8-fin-dash-stat-arrow {
  font-size: 0.68em;
  font-weight: 700;
  margin-right: 4px;
  color: var(--as-corp-blue);
}
.f8-fin-dash-stat-pct {
  font-size: 0.55em;
  font-weight: 700;
  margin-left: 1px;
  letter-spacing: 0;
}
.f8-fin-dash-foot {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--as-ink-mute);
  letter-spacing: -0.005em;
}
.f8-fin-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 52px;
}
.f8-fin-dash-bars span {
  flex: 1;
  height: var(--h, 30%);
  background: linear-gradient(180deg, #F07820 0%, #c25c0a 100%);
  border-radius: 3px;
  min-height: 6px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
/* Última barra resaltada (la "victoria" del periodo actual) */
.f8-fin-dash-bars span:last-child {
  background: linear-gradient(180deg, var(--as-corp-blue) 0%, #081545 100%);
}

/* ════════════════════════════════════════════════════════
   CARD 4 · Agenda Panel (rediseño minimalista)
   Espejo estructural del .f8-fin-dash de Card 3:
   eyebrow → stat hero centrado → divider hairline → footnote.
   Sin densidad, sin múltiples paneles. Una sola idea: 0h.
   ════════════════════════════════════════════════════════ */

.f8-agenda {
  position: relative;
  margin: 1.5rem -1.75rem -1.75rem 0;
  padding: 1.4rem 1.5rem 1.5rem;
  border-top: 1px solid var(--as-line);
  border-left: 1px solid var(--as-line);
  border-top-left-radius: var(--as-radius-card);
  background: var(--as-bg-soft);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 240px;
  overflow: hidden;
}
@media (min-width: 640px) {
  .f8-agenda { margin-left: 1.5rem; }
}

/* Acento naranja superior (gemelo del Card 3) */
.f8-agenda::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #F07820 50%, transparent 100%);
  opacity: 0.45;
}

.f8-agenda-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-ink-mute);
}

/* Hero stat · 0 h/semana */
.f8-agenda-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.f8-agenda-num {
  font-family: var(--as-font);
  font-size: clamp(3.2rem, 8vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: #0D1F6B;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.f8-agenda-unit {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--as-ink-mute);
}

/* Footnote · sesión estratégica */
.f8-agenda-foot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 1rem;
  border-top: 1px solid var(--as-line);
}
.f8-agenda-foot-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F07820;
  margin-top: 5px;
  box-shadow: 0 0 0 4px rgba(240, 120, 32, 0.14);
}
.f8-agenda-foot-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.f8-agenda-foot-main {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--as-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.f8-agenda-foot-sub {
  font-size: 0.66rem;
  color: var(--as-ink-mute);
  letter-spacing: 0.005em;
}

/* ════════════════════════════════════════════════════════
   GUARANTÍA · Cláusula contractual (rediseño 2026-05-08)
   Sustituye al sello giratorio. Tarjeta institucional
   centrada, fondo gris-azul tenue, blockquote naranja.
   ════════════════════════════════════════════════════════ */

.guarantee-section {
  background: var(--as-bg) !important;
  padding: clamp(4rem, 8vw, 6rem) 1.5rem !important;
  display: flex !important;
  justify-content: center !important;
}

.guarantee-card {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 28px rgba(15, 23, 42, 0.04);
  font-family: var(--as-font);
}

/* Head: icono escudo + eyebrow */
.guarantee-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.75rem;
}
.guarantee-card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  color: #0D1F6B;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.guarantee-card-icon svg {
  width: 22px;
  height: 22px;
}
.guarantee-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #64748B;
}

/* Headlines */
.guarantee-card-h2 {
  font-family: var(--as-font);
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0D1F6B;
  margin: 0 0 0.45rem;
  line-height: 1.1;
}
.guarantee-card-h3 {
  font-family: var(--as-font);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  color: #64748B;
  margin: 0 0 2rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

/* Cuerpo */
.guarantee-card-body {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.7;
  color: #334155;
  margin: 0 0 1.75rem;
  letter-spacing: -0.005em;
}
.guarantee-card-body strong {
  color: #0D1F6B;
  font-weight: 700;
}

/* Blockquote · cláusula con barra naranja a la izquierda */
.guarantee-card-clause {
  margin: 0;
  padding: 1.05rem 1.4rem;
  border-left: 3px solid #F07820;
  background: rgba(240, 120, 32, 0.04);
  border-radius: 0 8px 8px 0;
  font-size: clamp(0.92rem, 1.3vw, 1rem);
  font-style: italic;
  color: #1E293B;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

@media (max-width: 640px) {
  .guarantee-card {
    border-radius: 18px;
  }
  .guarantee-card-icon {
    width: 36px;
    height: 36px;
  }
  .guarantee-card-icon svg {
    width: 20px;
    height: 20px;
  }
}

.as-modal-form .field-consent {
  margin-top: 4px;
}
.as-modal-consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
}
.as-modal-consent input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.as-modal-consent-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.as-modal-consent-box svg {
  width: 11px;
  height: 11px;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.as-modal-consent input:checked ~ .as-modal-consent-box {
  background: #F07820;
  border-color: #F07820;
}
.as-modal-consent input:checked ~ .as-modal-consent-box svg {
  opacity: 1;
  transform: scale(1);
}
.as-modal-consent input:focus-visible ~ .as-modal-consent-box {
  box-shadow: 0 0 0 3px rgba(240, 120, 32, 0.28);
}
.as-modal-consent-text {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.70);
  letter-spacing: -0.005em;
}
.as-modal-consent-text a {
  color: rgba(255, 255, 255, 0.90);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.30);
  text-underline-offset: 2px;
}
.as-modal-consent-text a:hover {
  color: #F07820;
  text-decoration-color: #F07820;
}

/* ════════════════════════════════════════════════════════
   MOBILE · Ocultar dock flotante cuando hay teclado abierto
   Detección via :has() (Safari 15.4+, Chrome 105+, FF 121+).
   Cuando un input/textarea/select está focused, asumimos
   teclado abierto en mobile y ocultamos el dock para no
   solapar con campos ni con el teclado virtual.
   Fallback JS en app.js para navegadores antiguos.
   ════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  body:has(input:focus, textarea:focus, select:focus) .floating-dock {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
  }
  body.keyboard-open .floating-dock {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
  }
  .floating-dock {
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Tabla comparativa · MIGRADA de styles.css [2026-05-10]
   Razón: una sesión paralela refactorizó la tabla in-place dentro de
   styles.css (regla INMUTABLE). El HTML ya usa la nueva estructura
   <table class="comparison-table"> con .comp-them/.comp-us/.comp-mark,
   por lo que las reglas SÍ son necesarias — se preservan aquí.
   ════════════════════════════════════════════════════════════════════════ */
/* ── Tabla comparativa: tradicional vs AuditScale ─────────── */
.comparison-table-wrap {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(7, 21, 77, 0.55) 0%, rgba(7, 21, 77, 0.30) 100%);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', system-ui, sans-serif;
  table-layout: fixed;
}

.comparison-table thead th {
  padding: 1.5rem 1.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.comparison-table .comp-dim-head { width: 18%; }
.comparison-table .comp-them-head { width: 41%; color: #6f7da8; }
.comparison-table .comp-us-head {
  width: 41%;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(30, 64, 176, 0.32) 0%, rgba(30, 64, 176, 0.12) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}
.comparison-table .comp-us-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #1E40B0 50%, transparent 100%);
}

.comparison-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.comparison-table tbody tr:last-child { border-bottom: none; }

.comparison-table th[scope="row"] {
  padding: 1.5rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #cdd5ed;
  text-align: left;
  vertical-align: top;
}

.comparison-table td {
  padding: 1.5rem 1.75rem;
  font-size: 1rem;
  line-height: 1.55;
  vertical-align: top;
}

.comparison-table .comp-them { color: #8a94b8; }
.comparison-table .comp-us {
  color: #e9eef8;
  background: linear-gradient(180deg, rgba(30, 64, 176, 0.12) 0%, rgba(30, 64, 176, 0.04) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.comparison-table .comp-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: -2px;
}
.comparison-table .comp-mark.cross { color: #F5A040; }
.comparison-table .comp-mark.check { color: #FDD09A; }

/* Responsive: la tabla se reordena en bloques apilados */
@media (max-width: 768px) {
  .manifesto-section { padding: 5rem 1.5rem; }
  .comparison-table,
  .comparison-table thead,
  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table th,
  .comparison-table td { display: block; width: 100%; }
  .comparison-table thead { display: none; }
  .comparison-table tbody tr {
    padding: 1.25rem 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .comparison-table th[scope="row"] {
    padding: 0 0 0.75rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6f7da8;
  }
  .comparison-table td {
    padding: 0.5rem 0;
    border-left: none !important;
    background: none !important;
  }
  .comparison-table .comp-us { color: #ffffff; }
}

/* ════════════════════════════════════════════════════════
   HERO · fondo liso (extirpado el grid milimetrado)
   Override de styles.css (.hero-editorial), inmutable.
   Mantiene background-color #faf9f6 visible y limpio.
   ════════════════════════════════════════════════════════ */
.hero-editorial {
  background-image: none;
}

/* Stat secundario · descriptor en case normal bajo etiqueta uppercase.
   Anula el text-transform: uppercase que .stat-text hereda de styles.css. */
.hero-editorial .stat-text .stat-text-detail {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  font-weight: 400;
  color: #888;
  margin-top: 0.35rem;
  line-height: 1.45;
}

/* Hero stats · alineación y respiro entre columnas "3 fases" / "Cero".
   Baseline ya idéntica (mismo font-size 3rem + line-height:1 en .stat-number),
   align-items lo deja explícito. Cada columna recibe min-width para evitar
   wraps a 3 líneas en "AUDITORÍA · EJECUCIÓN · CONTROL MENSUAL". */
.hero-editorial .hero-stats-block {
  align-items: flex-start;
  gap: 2rem;
}
.hero-editorial .hero-stat {
  flex: 1 1 0;
  min-width: 200px;
}
.hero-editorial .stat-text {
  text-wrap: balance;
}

/* ════════════════════════════════════════════════════════
   CARD 5 · Filtro de Prospectos · lista de píldoras (RESTAURACIÓN)
   Las clases f8-leadq* fueron purgadas por una compactación previa,
   provocando regresión: los SVG sin dimensión renderizaban a tamaño
   nativo gigante. Aquí se restituye el diseño pill original.
   ════════════════════════════════════════════════════════ */
.f8-leadq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.f8-leadq-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background-color: var(--as-bg-soft);
  border: 1px solid var(--as-line);
  border-radius: 10px;
}
.f8-leadq-row--rejected {
  opacity: 0.78;
}
.f8-leadq-row--match {
  background-color: #fff;
  border: 1.5px solid var(--as-corp-blue);
  box-shadow: 0 2px 8px rgba(13, 31, 107, 0.06);
}
.f8-leadq-mark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(100, 116, 139, 0.12); /* gris suave para X */
  color: var(--as-ink-mute);
}
.f8-leadq-mark--check {
  background-color: rgba(13, 31, 107, 0.10);
  color: var(--as-corp-blue);
}
.f8-leadq-mark svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}
.f8-leadq-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.f8-leadq-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--as-ink);
  line-height: 1.3;
}
.f8-leadq-name--match {
  color: var(--as-corp-blue);
}
.f8-leadq-meta {
  font-size: 0.72rem;
  color: var(--as-ink-mute);
  line-height: 1.3;
}
.f8-leadq-meta--match {
  color: var(--as-ink-soft);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════
   AUDITORÍA GEO · Featured card premium 2-col comparativa
   (insertado 2026-05-11)

   Estructura: tarjeta extra ancha con 2 columnas contrastantes.
     · .geo-feat-col--past   → fondo gris apagado, ink-mute
     · .geo-feat-col--future → fondo corp-blue + glow sutil + texto blanco
   Mobile (≤768px): stack vertical, radios corregidos.
   Sin tocar styles.css. Variables canónicas: --as-corp-blue,
   --as-bg-soft, --as-line, --as-radius-card, --as-ink-*.
   ════════════════════════════════════════════════════════ */

/* Fondo blanco hueso del wrapper · contrasta con el blanco puro
   de la columna izquierda y crea la sensación de profundidad. */
.geo-feat-section {
  background-color: #F6F6F4;
}

.geo-feat-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 32px;
  background: transparent;
  border-radius: var(--as-radius-card);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03),
              0 1px 2px rgba(0, 0, 0, 0.02);
}

.geo-feat-col {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 320px;
}

.geo-feat-col--past {
  background: #FFFFFF;
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius-card) 0 0 var(--as-radius-card);
  color: var(--as-ink-mute);
}

.geo-feat-col--future {
  background: var(--as-corp-blue);
  border: 1px solid var(--as-corp-blue);
  border-radius: 0 var(--as-radius-card) var(--as-radius-card) 0;
  color: #fff;
  box-shadow: 0 12px 36px rgba(13, 31, 107, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
  position: relative;
  z-index: 1;
}

.geo-feat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.geo-feat-icon svg {
  width: 24px;
  height: 24px;
}

.geo-feat-col--past .geo-feat-icon {
  background: rgba(13, 31, 107, 0.04);
  border: 1px solid var(--as-line);
  color: var(--as-ink-soft);
}

.geo-feat-col--future .geo-feat-icon {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

.geo-feat-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.geo-feat-col--past .geo-feat-tag {
  color: var(--as-ink-mute);
}

.geo-feat-col--future .geo-feat-tag {
  color: rgba(255, 255, 255, 0.72);
}

.geo-feat-title {
  font-family: var(--as-font);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

.geo-feat-col--past .geo-feat-title {
  color: var(--as-ink-soft);
}

.geo-feat-col--future .geo-feat-title {
  color: #fff;
}

.geo-feat-desc {
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}

.geo-feat-col--past .geo-feat-desc {
  color: var(--as-ink-mute);
}

.geo-feat-col--future .geo-feat-desc {
  color: rgba(255, 255, 255, 0.86);
}

.geo-feat-cta-wrap {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* CTA: botón blanco sobre fondo corp-blue, override de shfeat-btn-primary */
.geo-feat-cta {
  background: #fff !important;
  color: var(--as-corp-blue) !important;
  border-color: #fff !important;
}

.geo-feat-cta:hover {
  background: rgba(255, 255, 255, 0.92) !important;
}

.geo-feat-cta svg {
  color: var(--as-corp-blue);
}

/* Mobile: stack vertical, ajustar radios y altura */
@media (max-width: 768px) {
  .geo-feat-card {
    grid-template-columns: 1fr;
  }
  .geo-feat-col {
    padding: 2rem 1.5rem;
    min-height: auto;
  }
  .geo-feat-col--past {
    border-radius: var(--as-radius-card) var(--as-radius-card) 0 0;
    border-bottom: none;
  }
  .geo-feat-col--future {
    border-radius: 0 0 var(--as-radius-card) var(--as-radius-card);
    box-shadow: 0 8px 24px rgba(13, 31, 107, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
  .geo-feat-title {
    font-size: 1.35rem;
  }
}

/* ════════════════════════════════════════════════════════
   UI QA · MOBILE FIX — 2026-05-11

   Auditoría visual tras vídeo de deploy del 2026-05-11 01:56.
   Síntomas observados en frame del hero móvil:
     · Texto del hero recortado contra el borde izquierdo
       ("e infraestructura digital" — falta la "D")
     · H2 "¿Por qué los despachos..." toca borde y se parte
       a mitad de palabra (cap-tando)
     · Bento aparenta apelmazado (tarjetas sin gap visible)
     · Filtro de prospectos: legibilidad baja
     · Secciones azul oscuro: párrafos pegados, repelen lectura

   Estrategia: bloque único de overrides móvil al final del
   archivo (cascade winner). Sin tocar styles.css (INMUTABLE),
   sin tocar nada por encima de este comentario.

   Defensive !important porque hay rules above this con
   especificidad alta (manifesto, f8-grid, leadq).
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. PADDING HORIZONTAL GLOBAL · "espacio de lujo" ──
     Nada toca el borde físico de la pantalla. Floor 24px en
     todas las secciones; 28px en pricing/inversión (high-ticket
     feel). box-sizing fuerza que el padding no expanda el ancho. */
  .hero-editorial,
  .hero-grid-container,
  .pain-v2,
  .pain-v2-container,
  .features-8-section,
  .method-svg-section,
  .method-svg-container,
  .cases-section,
  .manifesto-container,
  .guarantee-section,
  .faq-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box;
  }

  [class*="pricing"],
  [class*="inversion"],
  section[id*="aplicar"],
  section[id*="precio"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
    box-sizing: border-box;
  }

  /* ── 2. TÍTULOS · MARGEN DE SEGURIDAD 16px ──
     Belt-and-suspenders sobre el padding del contenedor:
     aunque el container falle, el título nunca toca el borde.
     overflow-wrap: break-word evita partir palabras a mitad
     (fix "cap-tando" del frame). */
  .hero-headline,
  .pain-v2-headline,
  .bento-headline,
  .manifesto-title,
  .guarantee-card-h2,
  section h1,
  section h2 {
    margin-left: 16px !important;
    margin-right: 16px !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
  }

  /* Pricing: emphasis extra · margen un poco más holgado */
  [class*="pricing"] h1,
  [class*="pricing"] h2,
  [class*="inversion"] h1,
  [class*="inversion"] h2 {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  /* ── 3. BENTO GRID (f8) · ESPACIO Y CONTENCIÓN ──
     Gap vertical claramente visible entre tarjetas (no se tocan).
     Padding interno generoso por tarjeta. min-height liberada
     porque en móvil las tarjetas se apilan y la altura forzada
     desperdicia espacio vertical. */
  .f8-grid {
    gap: 20px !important;
    row-gap: 20px !important;
  }

  .f8-card {
    padding: 24px !important;
    min-height: 0 !important;
  }

  /* Card 3 · Mini-dashboard "Ingresos atribuibles":
     overflow visible CONTROLADO — el chart puede extenderse
     ligeramente sin recortarse contra el borde de la tarjeta.
     Aplicado al card y a contenedores internos del dashboard. */
  .f8-card-3,
  .f8-card-3 .mk-main,
  .f8-card-3 .mk-card,
  .f8-card-3 svg,
  .f8-card-3 [class*="chart"],
  .f8-card-3 [class*="graph"] {
    overflow: visible !important;
  }

  /* ── 4. FILTRO DE PROSPECTOS · LEGIBILIDAD HIGH-TICKET ──
     Contraste: texto en azul corporativo oscuro sobre fondo
     gris claro (fix del white-on-light reportado en QA).
     Padding interno aumentado de 10/14 → 14/18.
     Gap entre píldoras: 8 → 14. */
  .f8-leadq {
    gap: 14px !important;
  }

  .f8-leadq-row {
    padding: 14px 18px !important;
    border-radius: 12px !important;
  }

  /* TODAS las píldoras (rejected + match) llevan texto azul
     corporativo. Antes: var(--as-ink) y opacity 0.78 en rejected
     lo washeaba a gris parecido a blanco sobre fondo claro. */
  .f8-leadq-row--rejected {
    opacity: 1 !important;
    background-color: rgba(13, 31, 107, 0.04) !important;
  }
  .f8-leadq-name,
  .f8-leadq-name--match,
  .f8-leadq-row--rejected .f8-leadq-name {
    color: var(--as-corp-blue) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }
  .f8-leadq-meta,
  .f8-leadq-meta--match,
  .f8-leadq-row--rejected .f8-leadq-meta {
    color: var(--as-ink-soft) !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
  }

  /* ── 5. TIPOGRAFÍA EDITORIAL · SECCIONES AZUL OSCURO ──
     line-height 1.75 + font-size +10-12%. Párrafos invitan
     a leer en vez de repeler. Aplicado a manifesto + garantía
     + cualquier descendiente con fondo azul corporativo. */
  .manifesto-section p,
  .manifesto-description,
  .manifesto-section li,
  .guarantee-section p,
  .guarantee-card-clause,
  .gua-point-body,
  .gua-footer p,
  .gua-footer li {
    line-height: 1.75 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0 !important;
  }

  /* Sub-elementos formales mantienen proporción para no romper
     la jerarquía visual (eyebrow, h3 secundarios). */
  .guarantee-card-h3 {
    line-height: 1.5 !important;
    font-size: 1rem !important;
  }
  .manifesto-eyebrow,
  .guarantee-card-eyebrow,
  .gua-point-title {
    letter-spacing: 0.08em !important;
  }
}

/* Bloque pivote 2026-05-12 (.invsplit-block-cta / --no-price)
   eliminado 2026-05-13 — el acordeón .apply-acc-cta lo sustituye. */

/* ════════════════════════════════════════════════════════════════
   POPUP "+ Más info" · refactor UX 2026-05-12
   6 secciones (excepto #casos, FAQ, hero, manifesto, #aplicar, CTA).
   Patrón: ocultar descripción larga + botón → modal genérico.
   Ver index.html #infoPopup y app.js → initInfoPopup().
   ════════════════════════════════════════════════════════════════ */

/* ─── 1. Ocultar descripciones (solo features-8) ─────────────────
   Tras la reversión 2026-05-12, sólo .features-8-section conserva
   el patrón popup (5 botones "Detalle técnico →"). El resto de
   secciones recuperaron las descripciones visibles. */
.f8-card-desc {
  display: none;
}

/* ─── 2. #diagnostico · hover-reveal en desktop + visible en touch ─
   Desktop (pointer real): la summary se revela al hacer hover sobre
   la card (comportamiento original, gestionado por reglas del bloque
   .dxg-card más arriba en este archivo).
   Touch (sin hover, sin botón): el overlay .dxg-card-text se muestra
   por defecto para que la descripción sea siempre accesible. */
@media (hover: none) {
  .dxg-card-text {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .dxg-card-front {
    opacity: 0;
  }
}

/* ─── 4. Modal genérico #infoPopup ──────────────────────────────── */
.info-popup {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.info-popup[hidden] {
  display: none;
}
.info-popup.is-open {
  opacity: 1;
  pointer-events: auto;
}
.info-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 35, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.info-popup-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--as-radius-card, 6px);
  padding: 40px 36px 32px;
  box-shadow: 0 24px 64px rgba(11, 16, 35, 0.28), 0 4px 12px rgba(11, 16, 35, 0.10);
  transform: translateY(12px) scale(0.96);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-overflow-scrolling: touch;
}
.info-popup.is-open .info-popup-content {
  transform: translateY(0) scale(1);
}
.info-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--as-ink-mute, #6b7280);
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.18s ease, color 0.18s ease;
}
.info-popup-close:hover {
  background: rgba(11, 16, 35, 0.06);
  color: var(--as-ink, #0B1023);
}
.info-popup-close:focus-visible {
  outline: 2px solid var(--as-accent);
  outline-offset: 2px;
}
.info-popup-title {
  margin: 0 0 16px;
  font-family: var(--as-font);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--as-accent);
}
.info-popup-body {
  font-family: var(--as-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--as-ink, #0B1023);
}
.info-popup-body p {
  margin: 0 0 12px;
}
.info-popup-body p:last-child {
  margin-bottom: 0;
}
.info-popup-body strong {
  color: var(--as-ink, #0B1023);
  font-weight: 700;
}

/* Body scroll-lock cuando el popup está abierto */
body.info-popup-open {
  overflow: hidden;
}

/* ─── 6. Mobile responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
  .info-popup {
    padding: 16px;
    align-items: flex-end;
  }
  .info-popup-content {
    padding: 32px 24px 24px;
    max-height: 88vh;
    border-radius: var(--as-radius-card, 6px) var(--as-radius-card, 6px) 0 0;
    transform: translateY(40px);
  }
  .info-popup.is-open .info-popup-content {
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════════════
   FEATURES-8 · Refresh proporciones + título como trigger del popup
   ════════════════════════════════════════════════════════════════════
   Cambio de patrón: los botones "Detalle técnico →" se eliminaron.
   El <h3 class="f8-card-title-trigger"> es ahora el trigger del popup
   (role="button", data-popup-trigger, keyboard Enter/Space en app.js).
   ────────────────────────────────────────────────────────────────── */

/* Card: padding interior compactado para que el contenido respire menos */
.features-8-section .f8-card,
.features-8-section .f8-card-wide {
  padding: 1.4rem;
}

/* Títulos: +16% / +17% para ganar peso visual tras eliminar el botón */
.features-8-section .f8-card-title {
  font-size: 1.22rem;
}
.features-8-section .f8-card-title-center {
  font-size: 1.75rem;
}

/* Visuales decorativos escalados +25-30% (transform preserva layout) */
.features-8-section .f8-funnel {
  transform: scale(1.3);
  transform-origin: center top;
}
.features-8-section .f8-funnel-wrap {
  padding-top: 0.4rem;
  padding-bottom: 1.4rem;
}
.features-8-section .f8-fin-dash {
  transform: scale(1.25);
  transform-origin: center top;
  margin-bottom: 1rem;
}
.features-8-section .f8-icon-circle {
  width: 3.75rem;
  height: 3.75rem;
}
.features-8-section .f8-icon-circle svg {
  width: 1.6rem;
  height: 1.6rem;
}
.features-8-section .f8-globe {
  width: 9.5rem;
  height: 9.5rem;
}
.features-8-section .f8-globe-svg {
  width: 7.5rem;
}
.features-8-section .f8-100-num {
  font-size: 3.75rem;
}
.features-8-section .f8-stat-100 {
  width: 16rem;
  height: 7rem;
}

/* ── Título como trigger del popup ─────────────────────────────────
   Borde dashed sutil en color marca, padding interno, cursor pointer.
   Hover: invierte (background azul-light). Focus visible para teclado. */
.f8-card-title-trigger {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px dashed var(--as-blue, #0D1F6B);
  border-radius: 6px;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}
.f8-card-title-trigger:hover {
  background-color: rgba(13, 31, 107, 0.06);
  border-color: var(--as-blue, #0D1F6B);
  border-style: solid;
}
.f8-card-title-trigger:focus-visible {
  outline: 2px solid var(--as-orange, #F07820);
  outline-offset: 3px;
  background-color: rgba(13, 31, 107, 0.06);
}
.f8-card-title-trigger:active {
  background-color: rgba(13, 31, 107, 0.10);
}

/* Mobile: padding del card más ajustado y visuales un poco menos
   agresivos para no saturar la card en pantallas pequeñas */
@media (max-width: 640px) {
  .features-8-section .f8-card,
  .features-8-section .f8-card-wide {
    padding: 1.2rem;
  }
  .features-8-section .f8-funnel,
  .features-8-section .f8-fin-dash {
    transform: scale(1.15);
  }
  .features-8-section .f8-card-title {
    font-size: 1.12rem;
  }
  .features-8-section .f8-card-title-center {
    font-size: 1.55rem;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX · DXG-CARD · texto del hover-reveal recortado por overflow
   ──────────────────────────────────────────────────────────────────
   El overlay .dxg-card-text tenía height fija 200px y la card height
   fija 360px (ver bloque base en este mismo archivo, ~L1593, L1668).
   Las descripciones reescritas del diagnóstico GEO (~38 palabras)
   ocupan ~6 líneas y se truncaban por overflow:hidden.
   Solución: convertir ambas alturas en min-height para que la card
   y el overlay crezcan exactamente lo necesario. El patrón "cero
   layout shift" se preserva porque la transición sigue siendo
   transform translateY (no height animation), y las 3 cards
   comparten misma min-height → quedan alineadas horizontalmente
   en el carousel.
   ────────────────────────────────────────────────────────────────── */
.dxg-carousel-section .dxg-card {
  height: auto;
  min-height: 380px;
}

.dxg-carousel-section .dxg-card .dxg-card-text {
  height: auto;
  min-height: 220px;
  padding-bottom: 28px;
}

/* ─── Variante "texto" del sym (palabra completa en lugar de "%") ───
   Usado en card 01 ("respuestas"). El stat usa flex column para
   apilar "0" + "respuestas" como label discreto debajo. */
.dxg-card.is-cat-1 .dxg-card-stat {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.dxg-card-stat-sym--text {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 4px;
}

/* ─── Micro-pulse al hover/focus del contador ───
   Refuerza el dato cuando el usuario activa la card. */
.dxg-card .dxg-card-stat-num {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .dxg-card:hover .dxg-card-stat-num,
  .dxg-card:focus-within .dxg-card-stat-num {
    transform: scale(1.04);
  }
}

/* Bloque .invsplit-block + .invsplit-block-actions + .invsplit-block-details
   + .popup-list / .popup-meta eliminado 2026-05-13. El acordeón
   .apply-acc-* lo reemplaza con contenido in-place (no popup). */

/* ════════════════════════════════════════════════════════════════
   #metodo · 3 ms-step visuales ilustrativos (refactor 2026-05-13)
   Cada .ms-step recibe un mini-mockup que visualiza lo que entrega
   esa fase. Vanilla HTML+SVG, hereda variables del proyecto. Cero
   dependencias, cero fuentes externas, cero precios visibles.
   ════════════════════════════════════════════════════════════════ */

.ms-step-visual {
  width: 100%;
  max-width: 320px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--as-line);
  border-radius: 10px;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(11, 16, 35, 0.03);
  display: flex;
  flex-direction: column;
}

/* En desktop (3 columnas) los 3 visuales se alinean verticalmente
   con la misma altura. En mobile (stack vertical) no hace falta. */
@media (min-width: 900px) {
  .ms-step-visual {
    min-height: 210px;
  }
}

.ms-step-visual .ms-vis-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--as-line);
}
.ms-step-visual .ms-vis-eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--as-ink-mute);
}

/* ─── 1. Bar Test mockup (paso 01) ─────────────────────────────── */
.ms-vis-bartest .ms-vis-row {
  display: grid;
  grid-template-columns: 70px 10px 1fr 32px;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.ms-vis-bartest .ms-vis-row:last-child {
  margin-bottom: 2px;
}
.ms-vis-bartest .ms-vis-engine {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--as-ink);
  letter-spacing: -0.005em;
}
.ms-vis-bartest .ms-vis-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ms-vis-bartest .ms-vis-status--red { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.ms-vis-bartest .ms-vis-status--amber { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.14); }
.ms-vis-bartest .ms-vis-status--green { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }
.ms-vis-bartest .ms-vis-bar {
  height: 6px;
  background: rgba(11, 16, 35, 0.06);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.ms-vis-bartest .ms-vis-bar i {
  display: block;
  height: 100%;
  background: var(--as-accent);
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ms-vis-bartest .ms-vis-pct {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--as-ink-mute);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── 2. JSON-LD snippet (paso 02) ─────────────────────────────── */
.ms-vis-jsonld .ms-vis-head {
  gap: 4px;
}
.ms-vis-jsonld .ms-vis-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(11, 16, 35, 0.10);
}
.ms-vis-jsonld .ms-vis-filename {
  margin-left: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--as-ink-mute);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.ms-vis-jsonld .ms-vis-code {
  margin: 0;
  padding: 8px 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--as-ink-soft);
  white-space: pre;
  overflow-x: auto;
}
.ms-vis-jsonld .ms-vis-code .k { color: var(--as-blue, #1E40B0); }
.ms-vis-jsonld .ms-vis-code .t { color: var(--as-accent); font-weight: 600; }
.ms-vis-jsonld .ms-vis-code .s { color: var(--as-ink); }
.ms-vis-jsonld .ms-vis-validation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 10px;
  background: rgba(22, 163, 74, 0.08);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #15803d;
  letter-spacing: -0.005em;
}
.ms-vis-jsonld .ms-vis-validation-check {
  color: #16a34a;
  font-weight: 700;
}

/* ─── 3. Monitor mensual (paso 03) ─────────────────────────────── */
.ms-vis-monitor .ms-vis-chart {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  align-items: end;
  height: 88px;
  padding-bottom: 4px;
}
.ms-vis-monitor .ms-vis-bar-h {
  width: 100%;
  height: var(--h, 20%);
  background: rgba(30, 64, 176, 0.16);
  border-radius: 3px 3px 0 0;
  transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ms-vis-monitor .ms-vis-bar-h--accent {
  background: var(--as-accent);
  box-shadow: 0 0 0 2px var(--as-accent-soft);
}
.ms-vis-monitor .ms-vis-trend {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--as-accent);
  opacity: 0.85;
  pointer-events: none;
}
.ms-vis-monitor .ms-vis-monitor-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--as-line);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--as-ink-mute);
  text-transform: uppercase;
}
.ms-vis-monitor .ms-vis-trend-label {
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--as-accent);
  font-weight: 600;
}

/* ─── Mobile · compactar visuales ──────────────────────────────── */
@media (max-width: 640px) {
  .ms-step-visual {
    max-width: 100%;
    padding: 12px 14px;
  }
  .ms-vis-bartest .ms-vis-row {
    grid-template-columns: 64px 8px 1fr 28px;
    gap: 8px;
  }
  .ms-vis-jsonld .ms-vis-code {
    font-size: 0.7rem;
  }
  .ms-vis-monitor .ms-vis-chart {
    height: 72px;
  }
}

/* ════════════════════════════════════════════════════════════════
   .features-8-section · 3-card grid simplificado (2026-05-13)
   Reemplaza el bento de 5 cards. Inspirado en 21st.dev feature
   layout (3 cards horizontales) pero con ilustraciones SVG vanilla
   sobre paleta AuditScale. Sin popups, sin CTAs inline.
   Las clases legacy .f8-card-* quedan ligeramente huérfanas
   (HTML eliminado); su CSS se mantiene en styles-premium.css por
   si .f8-funnel-* se reutiliza (lo hacemos en card 02).
   ════════════════════════════════════════════════════════════════ */

.feat3-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}
@media (min-width: 900px) {
  .feat3-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.feat3-card {
  background: #FFFFFF;
  border: 1px solid var(--as-line);
  border-radius: 14px;
  padding: 32px 24px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  box-shadow: 0 1px 3px rgba(11, 16, 35, 0.04);
}
.feat3-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 16, 35, 0.08), 0 2px 6px rgba(11, 16, 35, 0.04);
}

.feat3-visual {
  width: 100%;
  max-width: 200px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feat3-visual svg {
  width: 100%;
  height: auto;
  max-height: 130px;
  display: block;
}

/* Funnel reciclado: forzar override del wrap legacy si entra en feat3-visual */
.feat3-vis-funnel.f8-funnel-wrap {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 auto 22px;
}

/* Card 2 (Captación · funnel) · ajuste de respiración
   El funnel tiene tics y labels que rozan visualmente con el título.
   +12px abajo del visual y +10px arriba del título para airearlo.
   No afecta a card 1 (escudo) ni card 3 (sello). */
.feat3-grid > .feat3-card:nth-child(2) .feat3-visual {
  margin-bottom: 34px;
}
.feat3-grid > .feat3-card:nth-child(2) .feat3-title {
  margin-top: 10px;
}

.feat3-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--as-ink);
  margin: 0 0 10px;
  line-height: 1.2;
}

.feat3-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--as-ink-soft);
  margin: 0;
  max-width: 280px;
}

/* Mobile · padding ligeramente reducido */
@media (max-width: 640px) {
  .feat3-card {
    padding: 28px 20px 24px;
  }
  .feat3-visual {
    max-width: 180px;
  }
  .feat3-title {
    font-size: 1.1rem;
  }
}

/* ══════════════════════════════════════════════════════════════════
   .guarantee-section · refactor visual (2026-05-13)
   ──────────────────────────────────────────────────────────────────
   Nuevo layout de .gua-point: [SVG visual] + título + subtítulo corto.
   Reemplaza el icono pequeño a la izquierda + descripción larga.
   El bloque de reglas base (.gua-point con padding 22 22 22 72) se
   sobreescribe aquí — el icono lateral ya no existe en el HTML.
   ────────────────────────────────────────────────────────────────── */

.guarantee-section .gua-point {
  padding: 28px 24px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guarantee-section .gua-point-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  margin-bottom: 18px;
}

.guarantee-section .gua-point-svg {
  width: auto;
  height: 100%;
  max-width: 160px;
  overflow: visible;
}

/* Timeline SVG · trazo y dots */
.gua-svg-timeline .gua-svg-axis,
.gua-svg-timeline .gua-svg-tick {
  stroke: rgba(13, 31, 107, 0.20);
  stroke-width: 1.2;
}
.gua-svg-timeline .gua-svg-trend {
  stroke: #0D1F6B;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gua-svg-timeline .gua-svg-dot {
  fill: #0D1F6B;
}
.gua-svg-timeline .gua-svg-dot.is-accent {
  fill: #F07820;
  stroke: rgba(240, 120, 32, 0.20);
  stroke-width: 4;
  paint-order: stroke fill;
}
.gua-svg-timeline .gua-svg-label {
  font-family: var(--as-font, 'Inter', system-ui, sans-serif);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: rgba(13, 31, 107, 0.55);
}
.gua-svg-timeline .gua-svg-label.is-accent {
  fill: #F07820;
}

/* Shield SVG · contorno + check */
.gua-svg-shield .gua-svg-shield-body {
  stroke: #0D1F6B;
  stroke-width: 2;
  stroke-linejoin: round;
  fill: rgba(13, 31, 107, 0.03);
}
.gua-svg-shield .gua-svg-shield-check {
  stroke: #F07820;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover sutil — eleva los dos visuales por igual */
.guarantee-section .gua-point:hover .gua-svg-trend,
.guarantee-section .gua-point:hover .gua-svg-shield-body {
  transition: stroke-width 0.25s ease;
}
.guarantee-section .gua-point:hover .gua-svg-trend {
  stroke-width: 2.4;
}
.guarantee-section .gua-point:hover .gua-svg-shield-body {
  fill: rgba(13, 31, 107, 0.06);
}

/* Tipografía · título y nuevo subtítulo corto */
.guarantee-section .gua-point-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #0D1F6B;
  margin: 0 0 6px;
  line-height: 1.25;
  max-width: 26ch;
}
.guarantee-section .gua-point-sub {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--as-ink-soft, #5B6478);
  margin: 0;
  max-width: 32ch;
}

/* Mobile (≤375px contemplado) · padding ligeramente reducido */
@media (max-width: 640px) {
  .guarantee-section .gua-point {
    padding: 24px 20px 22px;
  }
  .guarantee-section .gua-point-visual {
    height: 64px;
    margin-bottom: 14px;
  }
  .guarantee-section .gua-point-title {
    font-size: 1rem;
  }
  .guarantee-section .gua-point-sub {
    font-size: 0.88rem;
  }
}

/* ══════════════════════════════════════════════════════════════════
   .dxg-radar · etiquetas funcionales (2026-05-13)
   ──────────────────────────────────────────────────────────────────
   Convierte el radar decorativo en pedagógico:
   - 3 blips identificados como ChatGPT · Perplexity · Claude
   - Punto central identificado como "Su despacho"
   El viewBox es 200×200, por eso el font-size se expresa en px de
   viewBox (≈5px) — escala proporcionalmente con el contenedor.
   ────────────────────────────────────────────────────────────────── */
.dxg-radar-tag {
  font-family: var(--as-font, 'Inter', system-ui, sans-serif);
  font-size: 5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  fill: rgba(13, 31, 107, 0.58);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.dxg-radar-tag.is-center {
  font-weight: 600;
  fill: rgba(13, 31, 107, 0.82);
}

/* Mobile (<480px): el radar se reduce mucho y las etiquetas
   compiten visualmente con los blips. Se ocultan. */
@media (max-width: 480px) {
  .dxg-radar-tag { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   .manifesto-section · comparison-table · vertical-align middle
   ──────────────────────────────────────────────────────────────────
   Override last-wins sobre el bloque base (~L682-687) que forzaba
   `vertical-align: top !important` en todas las celdas del body.
   Resultado: con celdas de altura desigual (1 vs 4 líneas), las
   3 columnas de cada fila quedan ahora alineadas en su centro
   vertical. No afecta al hanging indent (text-indent: -30px +
   padding-left compensado) porque eso opera en eje horizontal.
   Cero cambio de padding, line-height, tamaño de iconos.
   ────────────────────────────────────────────────────────────────── */
.manifesto-section .comparison-table th[scope="row"],
.manifesto-section .comparison-table td {
  vertical-align: middle !important;
}

/* ════════════════════════════════════════════════════════════════
   .manifesto-section · refinamientos visuales (2026-05-13)
   3 ajustes quirúrgicos sin tocar HTML ni styles.css:
   1. Altura uniforme en columna "Variable" (th[scope="row"])
   2. Icono ✗ reforzado con fill rojo claro + border rojo (parity con ✓)
   3. Gradiente de fondo suavizado (#0D1F6B → #0a1f44 en lugar de #1E40B0)
   ════════════════════════════════════════════════════════════════ */

/* 1 · Altura mínima uniforme en la primera columna · 5.5rem ≈ 88px
   cubre con holgura 2 líneas de texto al font-size actual (0.92rem ×
   line-height 1.55 + padding 1.125rem × 2). Usamos `height` (no
   `min-height`) porque sobre table-cell `min-height` se ignora —
   `height` actúa como mínimo en table-layout. Las filas con contenido
   más largo (4-line cells en comp-them/comp-us) crecen naturalmente. */
.manifesto-section .comparison-table th[scope="row"] {
  height: 5.5rem !important;
}

/* 2 · Cruz reforzada · paridad visual con el check azul.
   El ✓ es un disco azul sólido 18×18; el ✗ pasa de hairline gris
   transparente → tinte rojo claro + border rojo + cruz roja saturada.
   Color base #dc2626 (red-600) reutilizado del ms-vis-bartest existente
   (line 4623) para mantener coherencia de paleta del proyecto. */
.manifesto-section .comparison-table .comp-mark.cross {
  background: rgba(220, 38, 38, 0.10) !important;
  border: 1px solid rgba(220, 38, 38, 0.40) !important;
}
.manifesto-section .comparison-table .comp-mark.cross::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23dc2626' stroke-width='2.2' stroke-linecap='round'><line x1='6.3' y1='6.3' x2='11.7' y2='11.7'/><line x1='11.7' y1='6.3' x2='6.3' y2='11.7'/></svg>") !important;
}

/* 3 · Fondo de sección suavizado · gradiente entre dos navys del
   sistema (--as-blue-deep #0D1F6B → --as-ink #0a1f44) en lugar de
   var(--as-blue) #1E40B0 → var(--as-ink). Reduce la intensidad del
   azul vivo al llegar desde la sección Garantía (que ya es densa)
   sin sacrificar legibilidad sobre las cards blancas de la tabla. */
.manifesto-section {
  background: linear-gradient(180deg, var(--as-blue-deep) 0%, var(--as-ink) 100%) !important;
}

/* ════════════════════════════════════════════════════════════════
   #aplicar · acordeón de servicios (refactor 2026-05-13)
   Sustituye los antiguos .invsplit-block con 2 CTAs (popup + Cal)
   por un acordeón de 3 items donde cada uno se expande in-place
   mostrando descripción + meta + CTA. Una sola entrada abierta
   a la vez. Animación grid-template-rows 0fr→1fr (Chrome 117+,
   Safari 17.4+, Firefox 124+). JS: app.js → initApplyAccordion().
   Vive sobre fondo .invsplit-deal #0D1F6B, hereda variables del
   proyecto, cero dependencias.
   ════════════════════════════════════════════════════════════════ */

.apply-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.apply-acc-item {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}
.apply-acc-item:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.045);
}
.apply-acc-item[data-expanded="true"] {
  border-color: var(--as-accent, #EC4E02);
  background: rgba(236, 78, 2, 0.06);
  box-shadow: 0 10px 28px rgba(236, 78, 2, 0.14), 0 2px 4px rgba(0, 0, 0, 0.20);
}

/* Corner brackets (estilo 21st.dev) — visibles solo al expandir */
.apply-acc-item::before,
.apply-acc-item::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--as-accent, #EC4E02);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.apply-acc-item::before {
  top: 8px;
  left: 8px;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}
.apply-acc-item::after {
  bottom: 8px;
  right: 8px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}
.apply-acc-item[data-expanded="true"]::before,
.apply-acc-item[data-expanded="true"]::after {
  opacity: 1;
}

/* Trigger (cabecera clickeable) */
.apply-acc-trigger {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: #fff;
  font-family: var(--as-font);
  transition: padding 300ms ease;
}
.apply-acc-trigger:focus { outline: none; }
.apply-acc-trigger:focus-visible {
  box-shadow: 0 0 0 2px rgba(236, 78, 2, 0.55) inset;
  border-radius: 4px;
}

.apply-acc-num {
  font-family: var(--as-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  transition: color 300ms ease;
}
.apply-acc-item[data-expanded="true"] .apply-acc-num {
  color: var(--as-accent, #EC4E02);
}

.apply-acc-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.apply-acc-title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #fff;
  line-height: 1.25;
  transition: color 300ms ease;
}
.apply-acc-item[data-expanded="true"] .apply-acc-title {
  color: var(--as-accent, #EC4E02);
}
.apply-acc-subtitle {
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: -0.003em;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.45;
  transition: color 300ms ease;
}
.apply-acc-item[data-expanded="true"] .apply-acc-subtitle {
  color: rgba(255, 255, 255, 0.82);
}

.apply-acc-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms ease;
}
.apply-acc-item:hover .apply-acc-chevron {
  color: rgba(255, 255, 255, 0.85);
}
.apply-acc-item[data-expanded="true"] .apply-acc-chevron {
  transform: rotate(180deg);
  color: var(--as-accent, #EC4E02);
}

/* Panel expandible · max-height + overflow:hidden (patrón bulletproof).
   Cuando colapsado el contenido queda 100% recortado; el chevron y los
   brackets son los únicos indicadores. max-height tope generoso (560px)
   sobre la altura real del item más largo (~420px) para que la
   transición no se "trunque" antes de tiempo. */
.apply-acc-panel {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 380ms;
}
.apply-acc-item[data-expanded="true"] .apply-acc-panel {
  max-height: 560px;
  visibility: visible;
  transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

/* Contenido interno del panel */
.apply-acc-inner {
  padding: 0 24px 24px 64px; /* alineado con el texto, no con el num */
}
.apply-acc-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.apply-acc-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apply-acc-list li {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  position: relative;
  padding-left: 20px;
  letter-spacing: -0.003em;
}
.apply-acc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 1.5px;
  background: var(--as-accent, #EC4E02);
}
.apply-acc-list code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 1px 6px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.88);
}

/* Meta · precio/plazo */
.apply-acc-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 1.5px solid var(--as-accent, #EC4E02);
  border-radius: 3px;
}
.apply-acc-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.apply-acc-meta-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}
.apply-acc-meta-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  text-align: right;
  letter-spacing: -0.01em;
}

/* CTA · botón naranja sólido */
.apply-acc-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--as-accent, #EC4E02);
  color: #fff;
  text-decoration: none;
  padding: 13px 24px;
  font-family: var(--as-font);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 18px rgba(236, 78, 2, 0.30), 0 1px 2px rgba(236, 78, 2, 0.10);
}
.apply-acc-cta:hover {
  background: #ff5a14;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(236, 78, 2, 0.42), 0 2px 4px rgba(236, 78, 2, 0.15);
}
.apply-acc-cta svg { transition: transform 0.2s ease; }
.apply-acc-cta:hover svg { transform: translateX(3px); }

/* Mobile · padding interior reducido */
@media (max-width: 640px) {
  .apply-acc-trigger {
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 18px 18px;
  }
  .apply-acc-title { font-size: 1.05rem; }
  .apply-acc-subtitle { font-size: 0.82rem; }
  .apply-acc-inner {
    padding: 0 18px 22px 18px; /* sin indent en mobile */
  }
  .apply-acc-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .apply-acc-meta-value { text-align: left; }
  .apply-acc-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════
   REFACTOR 2026-05-22 · Manifesto → Standard de Consultoría
   Sube el registro de "agencia digital" a "consultoría B2B"
   (referencia: Deloitte Digital, McKinsey Digital, PwC, EY).
   Convierte la tabla a dark mode coherente con la sección,
   elimina iconografía, jerarquía por tipografía y color.
   Override de los bloques anteriores (líneas 555-780).
   ════════════════════════════════════════════════════════ */

/* Wrapper: transparente sobre el fondo dark de la sección,
   sin borde, sin sombra. La tabla "flota" sin caja. */
.manifesto-section .comparison-table-wrap {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Headers: sentence case, letter-spacing normal, peso 500,
   meta-información (no titulación). */
.manifesto-section .comparison-table thead th {
  background: transparent !important;
  padding: 0.9rem 1.25rem !important;
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  vertical-align: bottom !important;
}

/* Header AuditScale: sin fondo de color · border-top 2px accent
   + peso 600 para destacar por tipografía, no por bloque. */
.manifesto-section .comparison-table .comp-us-head {
  background: transparent !important;
  border-top: 2px solid var(--as-accent, #3B5BDB) !important;
  border-left: none !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* El header convencional comparte tratamiento neutro */
.manifesto-section .comparison-table .comp-them-head {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500 !important;
}

/* Elimina el accent decorativo del header AuditScale (ya no se usa) */
.manifesto-section .comparison-table .comp-us-head::after {
  display: none !important;
}

/* Celdas body: padding reducido ~20% (1.125 → 0.9rem) */
.manifesto-section .comparison-table th[scope="row"],
.manifesto-section .comparison-table td {
  padding: 0.9rem 1.25rem !important;
  vertical-align: top !important;
  line-height: 1.55 !important;
  text-indent: 0 !important;
}

/* Columna Variable: blanco, peso 600 — ancla la fila */
.manifesto-section .comparison-table th[scope="row"] {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
}

/* Columna Modelo convencional: gris medio, peso 400 */
.manifesto-section .comparison-table .comp-them {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 400 !important;
  font-size: 0.94rem !important;
}

/* Columna Modelo AuditScale: blanco puro, peso 400.
   Sin fondo tintado, sin borde izquierdo. */
.manifesto-section .comparison-table .comp-us {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  font-size: 0.94rem !important;
  border-left: none !important;
}

/* Divisor 1px sutil entre filas. Sin zebra, sin hover. */
.manifesto-section .comparison-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: none !important;
}
.manifesto-section .comparison-table tbody tr:last-child {
  border-bottom: none !important;
}
.manifesto-section .comparison-table tbody tr:hover td,
.manifesto-section .comparison-table tbody tr:hover td.comp-us {
  background: transparent !important;
}

/* Oculta cualquier .comp-mark residual (defensa por si queda
   alguno en HTML legacy). */
.manifesto-section .comparison-table .comp-mark {
  display: none !important;
}

/* Mobile: mantener stack vertical si el styles.css ya lo implementa.
   Aquí solo aseguramos colores consistentes y contraste AA. */
@media (max-width: 768px) {
  .manifesto-section .comparison-table th[scope="row"] {
    color: #ffffff !important;
  }
  .manifesto-section .comparison-table .comp-them {
    color: rgba(255, 255, 255, 0.65) !important;
  }
  .manifesto-section .comparison-table .comp-us {
    color: #ffffff !important;
  }
  .manifesto-section .comparison-table thead th {
    color: rgba(255, 255, 255, 0.7) !important;
  }
}

/* ════════════════════════════════════════════════════════
   REFACTOR 2026-05-22 v2 · Manifesto → Consultoría institucional
   Eleva al registro McKinsey / Bain / Oliver Wyman: cabecera
   left-aligned con eyebrow + h2 contenido, tabla en card sutil
   con border-radius 4px, max-width 1080px compartido, sin línea
   naranja, todo alineado izquierda, mobile en stack vertical.
   Override del v1 anterior — añade lo nuevo, deshace la naranja.
   ════════════════════════════════════════════════════════ */

/* ── 1. Eje compartido cabecera + tabla, max-width 1080px ── */
.manifesto-section .manifesto-container {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 2. Cabecera: left-aligned, eyebrow + h2 + subtítulo ── */
.manifesto-section .manifesto-header {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

.manifesto-section .manifesto-eyebrow {
  margin: 0 0 18px 0 !important;
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1 !important;
}

.manifesto-section .manifesto-title {
  font-size: clamp(36px, 4vw, 52px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  margin: 0 0 24px 0 !important;
  max-width: none !important;
}

.manifesto-section .manifesto-description {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-align: left !important;
  max-width: 580px !important;
  margin: 0 !important;
}

/* ── 3. Tabla envuelta en card sutil ── */
.manifesto-section .comparison-table-wrap {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  padding: 48px !important;
  margin-top: 64px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ── 4. SIN línea naranja: eliminar border-top accent del header AuditScale ── */
.manifesto-section .comparison-table .comp-us-head {
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
}

/* ── 5. Headers de columna: 13px, peso 500, sentence case, divisor 1px ── */
.manifesto-section .comparison-table thead th {
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-align: left !important;
  padding: 0 32px 20px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  vertical-align: bottom !important;
}

/* ── 6. Diferenciación por tipografía, no por color de bloque ── */
.manifesto-section .comparison-table .comp-them-head {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 400 !important;
}
.manifesto-section .comparison-table .comp-us-head {
  color: #ffffff !important;
  font-weight: 400 !important;
}

/* ── 7. Celdas body: left-aligned, padding generoso, top-aligned ── */
.manifesto-section .comparison-table th[scope="row"],
.manifesto-section .comparison-table td {
  text-align: left !important;
  vertical-align: top !important;
  padding: 24px 32px 24px 0 !important;
  line-height: 1.55 !important;
  text-indent: 0 !important;
}

/* ── 8. Columna Variable: blanco, peso 500, 15px ── */
.manifesto-section .comparison-table th[scope="row"] {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

/* ── 9. Columna Modelo convencional: gris medio, peso 400, 15px ── */
.manifesto-section .comparison-table .comp-them {
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ── 10. Columna Modelo AuditScale: blanco puro, peso 400, 15px ── */
.manifesto-section .comparison-table .comp-us {
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  border-left: none !important;
}

/* ── 11. Separadores entre filas: 1px sutil, sin zebra ── */
.manifesto-section .comparison-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.manifesto-section .comparison-table tbody tr:last-child {
  border-bottom: none !important;
}

/* ── 12. Hover: cambio sutil de background, sin animaciones ── */
.manifesto-section .comparison-table tbody tr:hover td,
.manifesto-section .comparison-table tbody tr:hover th[scope="row"] {
  background: rgba(255, 255, 255, 0.02) !important;
  transition: background 0.15s ease !important;
}
.manifesto-section .comparison-table tbody tr:hover td.comp-us {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* ── 13. Mobile (<768px): stack vertical institucional ── */
@media (max-width: 768px) {
  .manifesto-section .comparison-table-wrap {
    padding: 32px !important;
    margin-top: 48px !important;
  }

  /* Tabla colapsa a bloques: la primera columna se convierte en
     etiqueta superior, las otras dos en líneas separadas debajo. */
  .manifesto-section .comparison-table,
  .manifesto-section .comparison-table thead,
  .manifesto-section .comparison-table tbody,
  .manifesto-section .comparison-table tr {
    display: block !important;
    width: 100% !important;
  }

  /* Ocultar la cabecera de columnas en mobile (no aporta en stack) */
  .manifesto-section .comparison-table thead {
    display: none !important;
  }

  .manifesto-section .comparison-table tbody tr {
    padding: 28px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .manifesto-section .comparison-table tbody tr:last-child {
    border-bottom: none !important;
  }
  .manifesto-section .comparison-table tbody tr:hover td,
  .manifesto-section .comparison-table tbody tr:hover th[scope="row"] {
    background: transparent !important;
  }

  .manifesto-section .comparison-table th[scope="row"],
  .manifesto-section .comparison-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 0 12px 0 !important;
    text-align: left !important;
  }

  /* Label de fila arriba, blanco, ancla del bloque */
  .manifesto-section .comparison-table th[scope="row"] {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding-bottom: 16px !important;
  }

  /* Bloque convencional en gris */
  .manifesto-section .comparison-table .comp-them {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding-bottom: 12px !important;
  }
  .manifesto-section .comparison-table .comp-them::before {
    content: "Convencional · ";
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  /* Bloque AuditScale en blanco */
  .manifesto-section .comparison-table .comp-us {
    font-size: 14px !important;
    color: #ffffff !important;
    padding-bottom: 0 !important;
  }
  .manifesto-section .comparison-table .comp-us::before {
    content: "AuditScale · ";
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
}

/* ════════════════════════════════════════════════════════
   REFACTOR 2026-05-22 v3 · Manifesto → LIGHT MODE marca AuditScale
   Inversión total: dark → blanco hueso #FAFAF7 + paleta brand.
   Continuidad visual con el hero (eyebrow naranja, H1 azul marino
   con palabra clave en naranja, checks ✓ naranja en columna AuditScale).
   Override completo de v1 + v2 (dark mode).
   Tokens del sistema en uso:
     --as-ink            #0a1f44   texto principal (azul marino)
     --as-corp-blue      #0D1F6B   brand mark
     --as-corp-orange    #F07820   eyebrow + accent palabra clave
     --as-accent         #EC4E02   checks ✓
     --as-ink-mute       #64748B   texto secundario, headers tabla
     --as-line           #E2E8F0   separadores
   Literales:
     #FAFAF7             blanco hueso warm (no existe variable;
                         documentar si se aplica a 3+ secciones)
   ════════════════════════════════════════════════════════ */

/* ── 1. Fondo de sección: blanco hueso warm, sustituye el dark gradient ── */
.manifesto-section {
  background: #FAFAF7 !important;
  color: var(--as-ink) !important;
  border-top: 1px solid var(--as-line) !important;
  border-bottom: 1px solid var(--as-line) !important;
  padding: 96px 0 !important;
}

/* ── 2. Cabecera: eyebrow naranja, h1 azul marino con "Cinco" en naranja ── */
.manifesto-section .manifesto-eyebrow {
  color: var(--as-corp-orange) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: 0 0 24px 0 !important;
  line-height: 1 !important;
}

.manifesto-section .manifesto-title {
  color: var(--as-ink) !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  max-width: 900px !important;
  margin: 0 0 28px 0 !important;
}

/* Palabra clave en naranja (patrón hero-italic) */
.manifesto-section .manifesto-title .manifesto-accent {
  color: var(--as-corp-orange) !important;
  font-weight: inherit;
  font-style: normal;
}

.manifesto-section .manifesto-description {
  color: var(--as-ink-mute) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  max-width: 620px !important;
  text-align: left !important;
  margin: 0 !important;
}

/* ── 3. Wrapper tabla: tarjeta blanca tipo "documento sobre papel" ── */
.manifesto-section .comparison-table-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(11, 20, 55, 0.08) !important;
  border-radius: 16px !important;
  padding: 48px !important;
  margin-top: 64px !important;
  box-shadow:
    0 1px 3px rgba(11, 20, 55, 0.04),
    0 12px 40px rgba(11, 20, 55, 0.06) !important;
  overflow: visible !important;
}

/* ── 4. Headers de columna: uppercase gris medio peso 600 ── */
.manifesto-section .comparison-table thead th {
  background: transparent !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  color: var(--as-ink-mute) !important;
  text-align: left !important;
  padding: 0 32px 24px 0 !important;
  border-bottom: 1px solid rgba(11, 20, 55, 0.1) !important;
  vertical-align: bottom !important;
}

/* Sin diferenciación de color entre headers: el peso/tipografía + checks
   en las celdas resuelven la jerarquía */
.manifesto-section .comparison-table .comp-them-head,
.manifesto-section .comparison-table .comp-us-head {
  color: var(--as-ink-mute) !important;
  background: transparent !important;
  font-weight: 600 !important;
  border-top: none !important;
  border-left: none !important;
}
.manifesto-section .comparison-table .comp-us-head::after {
  display: none !important;
}

/* ── 5. Celdas body: left-aligned, padding tabular, top-aligned ── */
.manifesto-section .comparison-table th[scope="row"],
.manifesto-section .comparison-table td {
  text-align: left !important;
  vertical-align: top !important;
  padding: 28px 32px 28px 0 !important;
  line-height: 1.55 !important;
  text-indent: 0 !important;
  background: transparent !important;
}

/* Variable: azul marino, peso 700, 16px */
.manifesto-section .comparison-table th[scope="row"] {
  color: var(--as-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Modelo convencional: gris medio, peso 400, 15px */
.manifesto-section .comparison-table .comp-them {
  color: var(--as-ink-mute) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

/* Modelo AuditScale: azul marino, peso 500, 15px */
.manifesto-section .comparison-table .comp-us {
  color: var(--as-ink) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-left: none !important;
}

/* ── 6. Check naranja ✓ delante de cada celda comp-us ── */
.manifesto-section .comparison-table .manifesto-check {
  display: inline-block;
  color: var(--as-accent) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-right: 10px !important;
  line-height: 1 !important;
}

/* ── 7. Separadores entre filas: hairline azul marino sutil ── */
.manifesto-section .comparison-table tbody tr {
  border-bottom: 1px solid rgba(11, 20, 55, 0.06) !important;
}
.manifesto-section .comparison-table tbody tr:last-child {
  border-bottom: none !important;
}

/* Hover sutil (opcional, casi imperceptible) */
.manifesto-section .comparison-table tbody tr:hover td,
.manifesto-section .comparison-table tbody tr:hover th[scope="row"] {
  background: rgba(11, 20, 55, 0.015) !important;
  transition: background 0.15s ease !important;
}
.manifesto-section .comparison-table tbody tr:hover td.comp-us {
  background: rgba(11, 20, 55, 0.015) !important;
}

/* ── 8. Mobile (<768px): tarjetas verticales apiladas, light theme ── */
@media (max-width: 768px) {
  .manifesto-section {
    padding: 64px 0 !important;
  }

  .manifesto-section .comparison-table-wrap {
    padding: 24px !important;
    margin-top: 48px !important;
  }

  /* Tabla colapsa a bloques verticales */
  .manifesto-section .comparison-table,
  .manifesto-section .comparison-table thead,
  .manifesto-section .comparison-table tbody,
  .manifesto-section .comparison-table tr {
    display: block !important;
    width: 100% !important;
  }
  .manifesto-section .comparison-table thead {
    display: none !important;
  }

  .manifesto-section .comparison-table tbody tr {
    padding: 24px 0 !important;
    border-bottom: 1px solid rgba(11, 20, 55, 0.08) !important;
  }
  .manifesto-section .comparison-table tbody tr:last-child {
    border-bottom: none !important;
  }

  .manifesto-section .comparison-table th[scope="row"],
  .manifesto-section .comparison-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 0 14px 0 !important;
  }

  /* Label de fila: azul marino, peso 700, 17px */
  .manifesto-section .comparison-table th[scope="row"] {
    color: var(--as-ink) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    padding-bottom: 18px !important;
  }

  /* Bloque convencional: etiqueta pequeña + texto en gris */
  .manifesto-section .comparison-table .comp-them {
    color: var(--as-ink-mute) !important;
    font-size: 15px !important;
    padding-bottom: 16px !important;
  }
  .manifesto-section .comparison-table .comp-them::before {
    content: "Modelo convencional";
    display: block;
    color: var(--as-ink-mute) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 6px !important;
  }

  /* Bloque AuditScale: etiqueta pequeña naranja + texto azul marino */
  .manifesto-section .comparison-table .comp-us {
    color: var(--as-ink) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding-bottom: 0 !important;
  }
  .manifesto-section .comparison-table .comp-us::before {
    content: "Modelo AuditScale";
    display: block;
    color: var(--as-corp-orange) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 6px !important;
  }

  /* Hover desactivado en mobile (no aporta en táctil) */
  .manifesto-section .comparison-table tbody tr:hover td,
  .manifesto-section .comparison-table tbody tr:hover th[scope="row"] {
    background: transparent !important;
  }
}

/* ════════════════════════════════════════════════════════
   REFACTOR 2026-05-22 v4 · Manifesto compacto + tabla DARK sobre fondo claro
   Combina v3 (cabecera light brand) con tabla flotante dark institucional.
   Referencia: bloques de datos oscuros sobre fondo claro tipo Linear/Vercel.
   Override puntual sobre v3 — sin tocar HTML, solo CSS.
   Tokens:
     --as-corp-blue   #0D1F6B   fondo de la tarjeta oscura (brand)
     --as-ink         #0a1f44   cabecera (h1, label Variable mantiene light)
     --as-corp-orange #F07820   eyebrow + "Cinco" + labels mobile dentro de tarjeta
     --as-accent      #EC4E02   checks ✓ (sin cambio respecto v3)
     --as-ink-mute    #64748B   subtítulo light
   ════════════════════════════════════════════════════════ */

/* ── 1. SECCIÓN compacta (padding reducido) ── */
.manifesto-section {
  padding: 64px 0 !important;
}

/* ── 2. Cabecera compacta · light mode brand (heredado de v3, solo ajustes) ── */
.manifesto-section .manifesto-eyebrow {
  font-size: 12px !important;
  margin-bottom: 16px !important;
}

.manifesto-section .manifesto-title {
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  max-width: 720px !important;
  margin-bottom: 16px !important;
}

.manifesto-section .manifesto-description {
  font-size: 15px !important;
  line-height: 1.55 !important;
  max-width: 560px !important;
  margin-top: 16px !important;
}

/* ── 3. TARJETA OSCURA · flotando sobre fondo hueso ── */
.manifesto-section .comparison-table-wrap {
  background: var(--as-corp-blue) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 40px !important;
  margin: 40px auto 0 !important;
  max-width: 960px !important;
  box-shadow:
    0 1px 3px rgba(11, 20, 55, 0.08),
    0 24px 60px rgba(11, 20, 55, 0.15) !important;
  overflow: visible !important;
}

/* ── 4. Headers de columna: meta-info en blanco translúcido ── */
.manifesto-section .comparison-table thead th {
  background: transparent !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  text-align: left !important;
  padding: 0 24px 20px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  vertical-align: bottom !important;
}

.manifesto-section .comparison-table .comp-them-head,
.manifesto-section .comparison-table .comp-us-head {
  color: rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  font-weight: 600 !important;
}
.manifesto-section .comparison-table .comp-us-head::after {
  display: none !important;
}

/* ── 5. Celdas body: compactas, left-aligned, top-aligned ── */
.manifesto-section .comparison-table th[scope="row"],
.manifesto-section .comparison-table td {
  text-align: left !important;
  vertical-align: top !important;
  padding: 18px 24px 18px 0 !important;
  line-height: 1.5 !important;
  text-indent: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
}

/* Variable (label de fila): blanco puro peso 600, 14px */
.manifesto-section .comparison-table th[scope="row"] {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Modelo convencional: blanco translúcido peso 400, 14px */
.manifesto-section .comparison-table .comp-them {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* Modelo AuditScale: blanco puro peso 400, 14px */
.manifesto-section .comparison-table .comp-us {
  color: #ffffff !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  border-left: none !important;
}

/* ── 6. Check naranja (mantener — sigue funcionando sobre dark) ── */
.manifesto-section .comparison-table .manifesto-check {
  display: inline-block;
  color: var(--as-corp-orange) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-right: 10px !important;
  line-height: 1 !important;
}

/* ── 7. Separadores entre filas: hairline blanco translúcido sutil ── */
.manifesto-section .comparison-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.manifesto-section .comparison-table tbody tr:last-child {
  border-bottom: none !important;
}

/* Hover sutil dentro de la tarjeta dark */
.manifesto-section .comparison-table tbody tr:hover td,
.manifesto-section .comparison-table tbody tr:hover th[scope="row"] {
  background: rgba(255, 255, 255, 0.02) !important;
  transition: background 0.15s ease !important;
}
.manifesto-section .comparison-table tbody tr:hover td.comp-us {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* ── 8. Mobile (<768px): stack DENTRO de la tarjeta dark ── */
@media (max-width: 768px) {
  .manifesto-section {
    padding: 48px 0 !important;
  }

  .manifesto-section .comparison-table-wrap {
    padding: 24px !important;
    margin-top: 32px !important;
  }

  /* Tabla colapsa a bloques verticales dentro de la tarjeta dark */
  .manifesto-section .comparison-table,
  .manifesto-section .comparison-table thead,
  .manifesto-section .comparison-table tbody,
  .manifesto-section .comparison-table tr {
    display: block !important;
    width: 100% !important;
  }
  .manifesto-section .comparison-table thead {
    display: none !important;
  }

  .manifesto-section .comparison-table tbody tr {
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .manifesto-section .comparison-table tbody tr:last-child {
    border-bottom: none !important;
  }

  .manifesto-section .comparison-table th[scope="row"],
  .manifesto-section .comparison-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 0 12px 0 !important;
  }

  /* Label de fila: blanco peso 600, 14px */
  .manifesto-section .comparison-table th[scope="row"] {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding-bottom: 14px !important;
  }

  /* Bloque convencional: etiqueta gris claro + texto translúcido */
  .manifesto-section .comparison-table .comp-them {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    padding-bottom: 14px !important;
  }
  .manifesto-section .comparison-table .comp-them::before {
    content: "Modelo convencional";
    display: block;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 6px !important;
  }

  /* Bloque AuditScale: etiqueta naranja + texto blanco */
  .manifesto-section .comparison-table .comp-us {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding-bottom: 0 !important;
  }
  .manifesto-section .comparison-table .comp-us::before {
    content: "Modelo AuditScale";
    display: block;
    color: var(--as-corp-orange) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 6px !important;
  }

  /* Hover desactivado en mobile */
  .manifesto-section .comparison-table tbody tr:hover td,
  .manifesto-section .comparison-table tbody tr:hover th[scope="row"] {
    background: transparent !important;
  }
}

/* ════════════════════════════════════════════════════════
   POR QUÉ AUDITSCALE · v5 · 3 movimientos sobre blanco hueso
   Reemplaza completamente la sección manifesto (.manifesto-*) por
   una nueva sección .why-* con apertura hueso → card azul → cierre hueso.
   Los bloques v1-v4 anteriores (.manifesto-*, .comparison-*) son código
   ZOMBIE — ya no existe el HTML correspondiente. Limpiar en sesión
   futura siguiendo procedimiento de auditscale-system-rules.md §14.1.

   Tokens en uso:
     --as-corp-blue   #0D1F6B   fondo card azul (brand mark, hover CTA hero)
     --as-corp-orange #F07820   eyebrow + acentos H1/cierre + asimetría eyebrows
     --as-ink         #0a1f44   texto principal (h1, cierre)
     --as-ink-mute    #64748B   subtítulo + descripción gris medio
   Literales:
     #FAFAF7          blanco hueso warm (fondo sección, sin variable global)
   ════════════════════════════════════════════════════════ */

/* ── Sección padre: blanco amarillento cálido + padding-bottom colchón ── */
.why-section {
  background: #FBF9F2;
  color: var(--as-ink);
  border-top: 1px solid var(--as-line);
  border-bottom: 1px solid var(--as-line);
  padding: 0 0 120px 0;
  font-family: var(--as-font);
}
@media (max-width: 768px) {
  .why-section { padding: 0 0 80px 0; }
}

.why-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Acento naranja compartido (H1 + cierre) ── */
.why-accent {
  color: var(--as-corp-orange);
  font-weight: inherit;
  font-style: normal;
}

/* ════════════════════════════════════════════════════════
   MOVIMIENTO 1 · APERTURA (eyebrow + h1 + subtítulo · left-aligned)
   ════════════════════════════════════════════════════════ */

.why-intro {
  padding: 80px 0 48px 0;
  text-align: left;
}

.why-eyebrow {
  margin: 0 0 20px 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--as-corp-orange);
  line-height: 1;
}

.why-title {
  margin: 0;
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--as-ink);
  max-width: 820px;
  text-align: left;
}

.why-description {
  margin: 20px 0 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--as-ink-mute);
  max-width: 620px;
  text-align: left;
}

/* ════════════════════════════════════════════════════════
   MOVIMIENTO 2 · CARD AZUL MARINO con grid 3 columnas
   ════════════════════════════════════════════════════════ */

.why-card {
  background: var(--as-corp-blue);
  border-radius: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 48px;
  box-shadow:
    0 1px 3px rgba(11, 20, 55, 0.08),
    0 24px 60px rgba(11, 20, 55, 0.15);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.why-asym {
  text-align: left;
  position: relative;
}

/* Separadores verticales sutiles entre columnas (solo entre, no en bordes) */
.why-asym + .why-asym::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.why-asym-eyebrow {
  margin: 0 0 16px 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--as-corp-orange);
  line-height: 1;
}

.why-asym-figure {
  margin: 0 0 16px 0;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.why-asym-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

/* ════════════════════════════════════════════════════════
   MOVIMIENTO 3 · CIERRE (frase única, left-aligned, hueso)
   ════════════════════════════════════════════════════════ */

.why-close {
  padding: 64px 0 80px 0;
  text-align: left;
}

.why-close-line {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--as-ink);
  max-width: 720px;
  text-align: left;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE · mobile (<768px)
   ════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .why-container {
    padding: 0 24px;
  }

  /* M1 · apertura más compacta */
  .why-intro {
    padding: 56px 0 32px 0;
  }

  /* M2 · card azul: stack vertical, padding reducido */
  .why-card {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 40px 24px;
    border-radius: 16px;
  }

  /* Separador horizontal entre asimetrías apiladas */
  .why-asym + .why-asym {
    padding-top: 32px;
    margin-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* Eliminar el separador vertical desktop en mobile */
  .why-asym + .why-asym::before {
    display: none;
  }

  .why-asym-figure {
    font-size: 40px;
  }

  /* M3 · cierre compacto */
  .why-close {
    padding: 48px 0 64px 0;
  }
}

/* ════════════════════════════════════════════════════════
   POR QUÉ AUDITSCALE · v6 · refinamiento densidad + rigor
   Añade: footnote apertura · encabezado interno card · pie card
   con cifra auditable · eyebrow del cierre · max-width 1040px card.
   Renombra/iguala figuras + comprime descripciones (vía HTML).
   Override puntual sobre v5 — sin tocar la estructura del namespace.
   ════════════════════════════════════════════════════════ */

/* ── M1 · footnote bajo el subtítulo: pie de afirmación que ancla los datos ── */
.why-footnote {
  margin: 12px 0 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--as-ink-mute);
  opacity: 0.7;
  max-width: 620px;
  text-align: left;
}

/* ── M2 · CARD: reproporcionada (1040px, padding 56/56/48) ── */
.why-card {
  max-width: 1040px !important;
  padding: 56px 56px 48px 56px !important;
  /* Mantener el grid removido aquí: ahora hay header + grid + footer
     dentro de la card. La grid se mueve a .why-asym-grid abajo. */
  display: block !important;
  gap: 0 !important;
}

/* ── M2 · header interno: eyebrow naranja + título blanco ── */
.why-card-header {
  margin: 0 0 48px 0;
  text-align: left;
}

.why-card-eyebrow {
  margin: 0 0 16px 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--as-corp-orange);
  line-height: 1;
}

.why-card-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: #ffffff;
  max-width: 720px;
  letter-spacing: -0.005em;
}

/* ── M2 · grid de las 3 asimetrías (movido fuera de .why-card directo) ── */
.why-asym-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

/* Cancelar separadores verticales del v5 (el gap basta) */
.why-asym + .why-asym::before {
  display: none !important;
}

/* Igualar figuras: tamaño base unificado clamp(44-60px) */
.why-asym-figure {
  font-size: clamp(44px, 4vw, 60px) !important;
}

/* "0%" se queda corta visualmente: bump óptico para paridad */
.why-asym-figure--short {
  font-size: clamp(48px, 4.5vw, 64px) !important;
}

/* Descripciones comprimidas: un punto de gris algo más claro */
.why-asym-desc {
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.5 !important;
}

/* ── M2 · footer card: separador 1px + línea de auditabilidad ── */
.why-card-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.why-card-footnote {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ── M3 · cierre: eyebrow naranja "EL COMPROMISO" + frase más aire ── */
.why-close {
  padding: 80px 0 96px 0 !important;
}

.why-close-eyebrow {
  margin: 0 0 16px 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--as-corp-orange);
  line-height: 1;
  text-align: left;
}

.why-close-line {
  font-size: clamp(22px, 2vw, 30px) !important;
  font-weight: 600 !important;
}

/* ── RESPONSIVE · mobile (<768px) ── */
@media (max-width: 768px) {
  /* Card: padding lateral 32px en mobile (no 56px) */
  .why-card {
    padding: 40px 32px 32px 32px !important;
    border-radius: 16px;
  }

  /* Header interno: título a 17px */
  .why-card-header {
    margin: 0 0 36px 0;
  }
  .why-card-title {
    font-size: 17px;
    max-width: 100%;
  }

  /* Grid colapsa a stack vertical */
  .why-asym-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .why-asym + .why-asym {
    padding-top: 32px;
    margin-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Figuras en mobile */
  .why-asym-figure {
    font-size: 40px !important;
  }
  .why-asym-figure--short {
    font-size: 44px !important;
  }

  /* Pie de card: respeta el eje izquierdo, no se centra */
  .why-card-footer {
    margin-top: 32px;
    padding-top: 20px;
  }
  .why-card-footnote {
    text-align: left;
  }

  /* Cierre: paddings reducidos */
  .why-close {
    padding: 56px 0 72px 0 !important;
  }
}

/* ════════════════════════════════════════════════════════
   POR QUÉ AUDITSCALE · v7 · BLOQUE AZUL COMO FICHA TÉCNICA
   Compactación radical: cifras gigantes → stats horizontales densos.
   Layout: header compacto + flex row de 3 stats con dividers verticales
   + footer hairline. Sin eyebrows por columna · cifras nowrap peso 700.
   Altura objetivo: ~280-320px (antes ~600px+).
   Override puntual sobre v5+v6 — solo afecta al interior del .why-card.
   ════════════════════════════════════════════════════════ */

/* ── CARD: padding 40px arriba / 32px abajo / 48px lateral ── */
.why-card {
  padding: 40px 48px 32px 48px !important;
}

/* ── HEADER interno: título 17px peso 500, separación 40px del row ── */
.why-card-header {
  margin: 0 0 40px 0 !important;
}

.why-card-title {
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  max-width: 640px !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════
   FILA DE DATOS · stats horizontales en flexbox
   ══════════════════════════════════════════════ */

.why-asym-row {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.why-asym-row .why-asym {
  flex: 1;
  padding: 0 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}

/* Primero: sin padding-left para alinear con el header de la card */
.why-asym-row .why-asym:first-child {
  padding-left: 0;
}

/* Último: sin border ni padding-right */
.why-asym-row .why-asym:last-child {
  border-right: none;
  padding-right: 0;
}

/* CIFRA: peso 700, una sola línea siempre, letter-spacing apretado */
.why-asym-row .why-asym-figure {
  margin: 0 0 10px 0;
  font-size: clamp(32px, 3vw, 44px) !important;
  font-weight: 700 !important;
  color: #ffffff;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap;
  overflow: visible;
}

/* Anular modifier --short del v6 (ya no se usa, el row iguala todo) */
.why-asym-row .why-asym-figure--short {
  font-size: clamp(32px, 3vw, 44px) !important;
}

/* ETIQUETA: 13px, gris claro, max 2 líneas */
.why-asym-row .why-asym-desc {
  margin: 0;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

/* ── FOOTER del bloque: márgenes reducidos ── */
.why-card-footer {
  margin-top: 32px !important;
  padding-top: 20px !important;
}

/* ── RESPONSIVE · mobile (<768px) ── */
@media (max-width: 768px) {
  /* CARD: padding 28px lateral */
  .why-card {
    padding: 32px 28px 28px 28px !important;
  }

  .why-card-header {
    margin: 0 0 28px 0 !important;
  }

  /* Si caben las 3 cifras (probable: 0%, 3, 8 sem) mantenemos flex.
     Si no, el contenido se desborda y aplica el fallback de abajo.
     Como decisión de diseño: stack vertical en mobile para legibilidad. */
  .why-asym-row {
    flex-direction: column;
    gap: 0;
  }
  .why-asym-row .why-asym {
    padding: 16px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .why-asym-row .why-asym:first-child {
    padding-top: 0;
  }
  .why-asym-row .why-asym:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .why-asym-row .why-asym-figure {
    font-size: 32px !important;
  }

  /* Footer mobile */
  .why-card-footer {
    margin-top: 24px !important;
    padding-top: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════
   POR QUÉ AUDITSCALE · v8 · CARRUSEL ASIMETRÍAS (vanilla)
   Reemplaza el bloque .why-card estático (header + asym-row + footer)
   por un carrusel de 3 tarjetas con animaciones internas en loop.
   Migrado desde asimetrias-mockup.html · namespace .asym-* propio.
   Stack: scroll-snap CSS + rAF + setInterval + IntersectionObserver.
   Cero dependencias externas (sin framer-motion, sin React).
   ════════════════════════════════════════════════════════ */

/* ── Wrapper · grid estático sin carrusel ── */
.asym-carousel-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.asym-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Card ── */
.asym-card {
  min-height: 280px;
  height: 100%;
  padding: 32px;
  padding-bottom: 32px;
  background: var(--as-corp-blue);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 8px 20px rgba(11, 20, 55, 0.06);
  transition: transform 0.3s ease;
}
.asym-card:hover { transform: scale(0.99); }

.asym-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 140px;
}

.asym-meta { display: flex; flex-direction: column; }
.asym-eyebrow {
  margin: 0 0 12px 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--as-corp-orange);
  line-height: 1;
}
.asym-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* ── T1 · countdown 100→0 + barras ── */
.anim-countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}
.anim-countdown-num {
  font-size: 56px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.anim-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.anim-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.anim-bar-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  min-width: 72px;
}
.anim-bar-track {
  width: 120px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.anim-bar-fill {
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.18);
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
}
.anim-bar-fill.is-us { background: var(--as-corp-orange); }

/* ── T2 · logos secuenciales ── */
.anim-logos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.anim-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-logo-row.is-shown {
  opacity: 1;
  transform: translateY(0);
}
.anim-logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--as-corp-orange);
  flex-shrink: 0;
}
.anim-logo-name {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.anim-logos.is-pulsing { animation: asym-pulse 0.6s ease; }
@keyframes asym-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ── T3 · progress bar 1→8 + check final ── */
.anim-progress {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  align-items: flex-start;
}
.anim-progress-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.anim-progress-track-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.anim-progress-track {
  width: 140px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.anim-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--as-corp-orange);
  border-radius: 2px;
  transition: width 0.25s linear;
}
.anim-progress-check {
  width: 18px;
  height: 18px;
  color: var(--as-corp-orange);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}
.anim-progress-check.is-shown {
  opacity: 1;
  transform: scale(1);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .asym-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .asym-track { grid-template-columns: 1fr; }
  .asym-card {
    min-height: 260px;
    padding: 28px;
  }
  .anim-countdown-num { font-size: 48px; }
  .anim-logo-name { font-size: 20px; }
}

/* Reduce motion: pausa los loops decorativos */
@media (prefers-reduced-motion: reduce) {
  .anim-bar-fill,
  .anim-logo-row,
  .anim-progress-fill,
  .anim-progress-check {
    transition: none !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   LOTE 1 · 2026-05-22 · Quick wins post-audit 10 agentes
   - Inputs modal font-size 16px en mobile (anti-zoom iOS Safari)
   - Apilar field-row del modal en mobile
   - Dock links tap targets ≥44px en mobile (Apple HIG / Material)
   ════════════════════════════════════════════════════════ */
@media (max-width: 879px) {
  /* Anti-zoom iOS: cualquier input/select/textarea <16px dispara zoom forzado */
  .as-modal-form input,
  .as-modal-form textarea,
  .as-modal-form select {
    font-size: 16px !important;
  }

  /* Apilar empleados + facturación en mobile en lugar de 2 cols comprimidas */
  .as-modal-form .field-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

@media (max-width: 560px) {
  /* Dock tap targets: 44×44 mínimo (Apple HIG) */
  .dock-links a {
    padding: 12px 14px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 0.8rem !important;
  }
}

/* ════════════════════════════════════════════════════════
   QUIÉN AUDITA · 2 socios fundadores · insertado 2026-05-23
   Eyebrow + h2 + foto cuadrada centrada (max 480px) +
   2 bios en grid 2 cols (mobile stack). Tono Big Four.
   ════════════════════════════════════════════════════════ */
.quien-audita {
  background: #FFFFFF;
  padding: 120px 0;
  position: relative;
}

.quien-audita-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.quien-audita-intro {
  text-align: center;
  margin-bottom: 56px;
}

.quien-audita-eyebrow {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--as-corp-orange);
  margin: 0 0 16px;
}

.quien-audita-title {
  font-family: var(--as-font-display, "Inter", system-ui, sans-serif);
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 600;
  color: var(--as-ink);
  letter-spacing: -0.018em;
  margin: 0;
}

.quien-audita-photo {
  max-width: 480px;
  margin: 0 auto 56px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(13, 31, 107, 0.10), 0 1px 3px rgba(13, 31, 107, 0.05);
}

.quien-audita-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.quien-audita-bios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  max-width: 880px;
  margin: 0 auto;
}

.quien-audita-name {
  font-family: var(--as-font-display, "Inter", system-ui, sans-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--as-ink);
  margin: 0 0 6px;
  letter-spacing: -0.012em;
}

.quien-audita-role {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--as-corp-blue);
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}

.quien-audita-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--as-ink-mute);
  margin: 0 0 16px;
}

.quien-audita-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--as-corp-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 31, 107, 0.25);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.quien-audita-link:hover {
  color: var(--as-corp-orange);
  border-bottom-color: var(--as-corp-orange);
}

@media (max-width: 720px) {
  .quien-audita { padding: 80px 0; }
  .quien-audita-intro { margin-bottom: 40px; }
  .quien-audita-photo {
    max-width: 360px;
    margin-bottom: 40px;
  }
  .quien-audita-bios {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   POR QUÉ AUDITSCALE · unificación equipo + mercado + compromiso · 2026-05-24
   ─────────────────────────────────────────────────────────────────────────────
   Fusiona la antigua sección .quien-audita-* dentro de .why-section.
   Mini-eyebrows grises para subdividir bloques · cards de socios con misma
   estética que .asym-card (azul corporativo, border-radius var del sistema)
   pero sin animación interna. Decisión técnica documentada en sesión 2026-05-24:
   border-radius: var(--as-radius-card) [20px] en TODAS las cards para
   coherencia con founder card, guarantee card y .asym-card (no 16px que
   pedía la spec inicial, por isla visual respecto al resto del sistema).
   El CSS antiguo .quien-audita-* (líneas 6981-7090) queda HUÉRFANO tras
   esta unificación — eliminar en sprint de limpieza dedicado.
   ════════════════════════════════════════════════════════════════════════════ */

/* Mini-eyebrow gris para subdividir los bloques EL EQUIPO / EL MERCADO */
.why-block-eyebrow {
  margin: 0 0 24px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--as-ink-mute);
  line-height: 1;
}

/* Separación vertical entre los 2 bloques de cards.
   El .why-divider absorbe el aire entre bloques (margin propio), por eso
   .why-market-wrap NO tiene margin-top (evitamos doble-espaciado). */
.why-team-wrap { margin-bottom: 16px; }
.why-market-wrap { margin-top: 0; }

/* Separador decorativo entre bloque blanco (equipo) y bloque azul (mercado) ·
   patrón "ornament divider": hairline horizontal corto con punto naranja centrado.
   Marca el cambio de plano narrativo sin romper la sobriedad editorial. */
.why-divider {
  position: relative;
  width: 64px;
  height: 1px;
  margin: 0 auto 32px auto;
  background: var(--as-line);
}
.why-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background: var(--as-corp-orange);
  border-radius: 50%;
}

/* Modifier del eyebrow · variante naranja+grande para anunciar EL MERCADO (clímax visual) */
.why-block-eyebrow--accent {
  color: var(--as-corp-orange);
  font-size: 13px;
  margin-bottom: 8px;
}

/* Lede del bloque mercado · subtítulo narrativo bajo el eyebrow.
   Conecta con el "nadie" del H2 de cabecera ("...donde nadie más lo hace"). */
.why-block-lede {
  margin: 0 0 28px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--as-ink);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 540px;
}

/* Grid 2 columnas iguales para las cards de socios */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Card de socio · formato EDITORIAL (rediseño 2026-05-24)
   Banda blanca con hairline 1px + monograma serif AP/NC (patrón Wall Street Editorial
   documentado en auditscale-system-rules.md §4: serif Georgia solo para monogramas
   founder). Sin sombra de card — sobriedad editorial. Crea ritmo visual hueso →
   blanco → azul (cards mercado) → hueso (cierre). */
.team-card {
  background: var(--as-bg); /* blanco puro #ffffff sobre hueso #FBF9F2 de .why-section */
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius-card);
  padding: 28px 26px; /* compactado 2026-05-24 (era 36px 32px) */
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease;
}
.team-card:hover { border-color: var(--as-line-strong); }

/* Foto circular del socio · 80px arriba-izquierda · con monograma serif AP/NC como fallback.
   Estructura: <div class="team-card-photo">
                 <img src="…" onerror="this.style.display='none'">
                 <span class="team-card-photo-fallback">AP</span>
               </div>
   El monograma vive DETRÁS de la foto (z-index 0). Si la imagen carga, la tapa por completo
   (z-index 1 + object-fit: cover). Si falla (onerror oculta el <img>), queda visible el monograma.
   Patrón Georgia serif documentado en auditscale-system-rules.md §4. */
.team-card-photo {
  position: relative;
  width: 64px;  /* compactado 2026-05-24 (era 80px) */
  height: 64px;
  margin: 0 0 18px 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--as-bg-soft); /* placeholder gris muy suave por si tarda en cargar */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
}
.team-card-photo-fallback {
  position: relative;
  z-index: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;  /* compactado 2026-05-24 (era 32px) · proporcional al nuevo 64px */
  font-weight: 700;
  color: var(--as-corp-blue);
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
}

.team-card-name {
  margin: 0 0 4px 0;
  font-size: 19px;  /* compactado 2026-05-24 (era 22px) */
  font-weight: 700;
  color: var(--as-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.team-card-role {
  margin: 0 0 16px 0;
  font-size: 12px;  /* compactado 2026-05-24 (era 13px) */
  font-weight: 500;
  color: var(--as-ink-mute);
  line-height: 1.4;
}
.team-card-body {
  margin: 0 0 18px 0;
  font-size: 13px;  /* compactado 2026-05-24 (era 14px) */
  font-weight: 400;
  color: var(--as-ink-soft);
  line-height: 1.55;
  flex: 1; /* empuja el link al fondo · alineación vertical entre las 2 cards */
}
.team-card-link {
  margin: 0;
  font-size: 12px;  /* compactado 2026-05-24 (era 13px) */
  font-weight: 600;
  color: var(--as-corp-orange);
  text-decoration: none;
  transition: opacity 0.2s ease;
  align-self: flex-start;
}
.team-card-link:hover { opacity: 0.7; }

/* Padding inferior de .why-section · 80px desktop (era 120px cuando había cierre
   EL COMPROMISO, eliminado 2026-05-24) */
.why-section { padding-bottom: 80px; }

/* ── Responsive mobile (<768px) ── */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .team-card {
    padding: 22px 20px;
  }
  .team-card-photo {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
  }
  .team-card-photo-fallback {
    font-size: 22px;
  }
  .team-card-name { font-size: 17px; }
  .team-card-body { font-size: 13px; }
  .why-team-wrap { margin-bottom: 12px; }
  .why-market-wrap { margin-top: 0; }
  .why-section { padding-bottom: 64px; }
  /* Separador decorativo: ligeramente más compacto en mobile */
  .why-divider {
    width: 48px;
    margin-bottom: 24px;
  }
  /* Lede: escalado proporcional */
  .why-block-lede {
    font-size: 15px;
    margin-bottom: 20px;
  }
  .why-block-eyebrow--accent {
    font-size: 12px;
  }
}