/* ═══════════════════════════════════════════════════════════════
   Syngular 360 — Estilos personalizados
   Tailwind (CDN) aporta las utilidades; aquí viven los tokens de
   marca, componentes y detalles de movimiento.

   Orden de capas: declararlo primero garantiza que las utilidades
   de Tailwind siempre puedan sobrescribir a los componentes.
   ═══════════════════════════════════════════════════════════════ */
@layer theme, base, components, utilities;

/* ─────────────────────────── Tokens ─────────────────────────── */
:root {
  /* Marca (derivada del logotipo) */
  --navy-950: #0a1830;
  --navy-900: #13294b;
  --navy-800: #1c3761;
  --navy-600: #3d5680;
  --ink-500: #56667f;
  --ink-400: #8593a9;
  --brand-300: #7fe0f0;
  --brand-400: #3ccbe3;
  --brand-500: #17b3d1;
  --brand-600: #0e93b8;
  --brand-700: #0b7698;
  --canvas: #f6f9fc;
  --danger: #d9435a;
  --success: #12a67a;

  --hairline: rgba(19, 41, 75, 0.08);
  --hairline-strong: rgba(19, 41, 75, 0.14);

  /* Movimiento (curvas fuertes; ver skill emil-design-eng) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --nav-h: 96px;
}

/* ─────────────────────────── Base ─────────────────────────── */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 16px);
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: var(--canvas);
    color: var(--navy-900);
    font-feature-settings: 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background: rgba(23, 179, 209, 0.22);
    color: var(--navy-950);
  }

  :focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 3px;
    border-radius: 8px;
  }

  /* Los botones no deben seleccionar su texto con pulsación larga */
  button,
  .btn {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }
}

/* ─────────────────────────── Componentes ─────────────────────────── */
@layer components {
  /* Iconos del sprite */
  .icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  /* ── Tipografía display: tracking negativo y leading ajustado al tamaño ── */
  .display {
    font-size: clamp(2.5rem, 5.4vw, 4.25rem);
    line-height: 1.03;
    letter-spacing: -0.035em;
    font-weight: 800;
    text-wrap: balance;
  }

  .section-title {
    font-size: clamp(2rem, 3.8vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    text-wrap: balance;
  }

  .lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    color: var(--ink-500);
    text-wrap: pretty;
  }

  .text-gradient {
    background: linear-gradient(100deg, var(--brand-600) 0%, var(--brand-500) 35%, var(--navy-800) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem 0.375rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--brand-700);
    background: rgba(23, 179, 209, 0.08);
    box-shadow: inset 0 0 0 1px rgba(23, 179, 209, 0.2);
  }

  .kicker {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-600);
  }

  /* ── Superficies: vidrio y tarjetas con borde translúcido de 1px ── */
  .glass {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow:
      0 0 0 1px var(--hairline),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 1px 2px rgba(19, 41, 75, 0.04),
      0 12px 40px -16px rgba(19, 41, 75, 0.16);
  }

  .card {
    position: relative;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 1.5rem;
    box-shadow:
      0 0 0 1px var(--hairline),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 1px 2px rgba(19, 41, 75, 0.04),
      0 8px 28px -14px rgba(19, 41, 75, 0.12);
  }

  /* Elevación al pasar el cursor (solo con puntero real, no en táctil) */
  .lift {
    transition:
      transform 300ms var(--ease-out),
      box-shadow 300ms ease;
  }

  /* Halo que sigue al cursor dentro de la tarjeta (decorativo) */
  .spotlight {
    isolation: isolate;
    overflow: hidden;
  }
  .spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(23, 179, 209, 0.11), transparent 45%);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .lift:hover {
      transform: translateY(-4px);
      box-shadow:
        0 0 0 1px rgba(23, 179, 209, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 4px rgba(19, 41, 75, 0.04),
        0 24px 48px -20px rgba(19, 41, 75, 0.24);
    }
    .spotlight:hover::before {
      opacity: 1;
    }
  }

  .icon-tile {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    color: #fff;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600) 55%, var(--navy-800));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 8px 20px -8px rgba(14, 147, 184, 0.6);
  }

  /* ── Botones ── */
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3rem;
    padding: 0 1.375rem;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    white-space: nowrap;
    cursor: pointer;
    transition:
      transform 160ms var(--ease-out),
      box-shadow 200ms ease,
      background-color 200ms ease,
      color 200ms ease;
  }
  .btn:active {
    transform: scale(0.97);
  }
  .btn .icon {
    width: 1.05rem;
    height: 1.05rem;
    transition: transform 200ms var(--ease-out);
  }
  .btn-sm {
    height: 2.5rem;
    padding: 0 1.125rem;
    font-size: 0.875rem;
  }

  .btn-primary {
    color: #fff;
    background: linear-gradient(180deg, #1f3c6b 0%, var(--navy-900) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 0 1px rgba(10, 24, 48, 0.9),
      0 8px 20px -8px rgba(19, 41, 75, 0.55);
  }

  .btn-secondary {
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.75);
    box-shadow:
      0 0 0 1px var(--hairline-strong),
      inset 0 1px 0 #fff,
      0 2px 6px -2px rgba(19, 41, 75, 0.08);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(10, 24, 48, 0.9),
        0 0 0 4px rgba(23, 179, 209, 0.16),
        0 12px 28px -10px rgba(19, 41, 75, 0.6);
    }
    .btn-secondary:hover {
      background: #fff;
    }
    .btn:hover .icon-arrow {
      transform: translateX(3px);
    }
  }

  /* ── Navegación Flotante Estilo Apple ── */
  .nav {
    height: var(--nav-h);
    transition:
      background-color 250ms ease,
      box-shadow 250ms ease,
      backdrop-filter 250ms ease;
  }
  .nav[data-scrolled='true'] {
    background: rgba(246, 249, 252, 0.78);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 1px 0 rgba(19, 41, 75, 0.08);
  }

  /* Logotipo principal con dimensiones prominentes (+20%) y texto nítido */
  .nav-logo-desktop {
    height: 67px;
    width: auto;
    max-height: 80px;
    object-fit: contain;
  }
  @media (min-width: 640px) {
    .nav-logo-desktop {
      height: 72px;
    }
  }
  @media (min-width: 1024px) {
    .nav-logo-desktop {
      height: 80px;
    }
  }
  .nav-logo-mobile {
    height: 58px;
    width: auto;
    object-fit: contain;
  }

  .nav-capsule {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: background-color 200ms ease, box-shadow 200ms ease;
  }
  .nav-capsule:hover {
    background: rgba(255, 255, 255, 0.85);
  }

  /* Glider deslizante con rebote sutil y alineación perfecta */
  .nav-glider {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 2px 8px -2px rgba(19, 41, 75, 0.14), inset 0 0 0 1px rgba(19, 41, 75, 0.05);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
      width 240ms cubic-bezier(0.16, 1, 0.3, 1),
      height 240ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 180ms ease;
    z-index: 0;
  }
  .nav-glider.is-active {
    opacity: 1;
  }

  .nav-link {
    position: relative;
    z-index: 1;
    color: var(--ink-500);
    transition: color 180ms ease;
  }
  .nav-link:hover,
  .nav-link[aria-current='true'],
  .nav-dropdown-wrapper:hover > .nav-link {
    color: var(--navy-900);
  }

  /* Dropdown flotante Apple con fondo blanco sólido para máximo contraste y puente hover */
  .nav-dropdown {
    background: #ffffff !important;
    border: 1px solid rgba(19, 41, 75, 0.08) !important;
    box-shadow:
      0 4px 6px -1px rgba(10, 24, 48, 0.06),
      0 20px 45px -8px rgba(10, 24, 48, 0.22),
      0 0 0 1px rgba(19, 41, 75, 0.05) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px) scale(0.97);
    pointer-events: none;
    transition:
      opacity 200ms var(--ease-out),
      transform 200ms var(--ease-out),
      visibility 0s linear 200ms;
  }
  /* Puente invisible de hover para evitar que se cierre al mover el cursor hacia abajo */
  .nav-dropdown::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 28px;
    background: transparent;
  }
  .nav-dropdown-wrapper:hover .nav-dropdown,
  .nav-dropdown-wrapper:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: 0s;
  }
  .nav-dropdown-wrapper:hover .chevron-icon {
    transform: rotate(180deg);
  }

  /* Menú móvil: aparece desde su disparador (esquina superior derecha) */
  .mobile-menu {
    transform-origin: top right;
    transition:
      opacity 200ms var(--ease-out),
      transform 200ms var(--ease-out),
      visibility 0s linear 200ms;
  }
  .mobile-menu[data-open='false'] {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    visibility: hidden;
    pointer-events: none;
  }
  .mobile-menu[data-open='true'] {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .menu-icon line {
    transition:
      transform 200ms var(--ease-out),
      opacity 150ms ease;
    transform-origin: center;
  }
  [aria-expanded='true'] .menu-icon .l1 {
    transform: translateY(6px) rotate(45deg);
  }
  [aria-expanded='true'] .menu-icon .l2 {
    opacity: 0;
  }
  [aria-expanded='true'] .menu-icon .l3 {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ── Fondo del hero ── */
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }
  .hero-bg::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto;
    height: 120%;
    background:
      radial-gradient(40% 45% at 78% 22%, rgba(23, 179, 209, 0.18), transparent 70%),
      radial-gradient(35% 40% at 12% 8%, rgba(19, 41, 75, 0.08), transparent 70%),
      radial-gradient(30% 30% at 55% 70%, rgba(127, 224, 240, 0.14), transparent 70%);
  }
  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(19, 41, 75, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(19, 41, 75, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
  }

  /* ── Spline 3D Viewer Element & Ocultar Marca de Agua ── */
  spline-viewer {
    width: 100%;
    height: 100%;
    min-height: 380px;
    display: block;
    outline: none;
    touch-action: pan-y;
  }
  @media (min-width: 768px) {
    spline-viewer {
      min-height: 100%;
    }
  }
  spline-viewer::part(logo),
  spline-viewer::part(badge),
  spline-viewer::part(watermark) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #spline-card {
    min-height: 580px;
    background: radial-gradient(85% 65% at 90% 50%, rgba(23, 179, 209, 0.16), transparent 70%), #0a1830;
  }
  .btn-spline-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 1.35rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0a1830 !important;
    background: #ffffff !important;
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.1),
      0 8px 24px -4px rgba(23, 179, 209, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.95);
    text-decoration: none;
    cursor: pointer;
    transition:
      transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 200ms ease,
      background-color 200ms ease,
      color 200ms ease;
  }
  .btn-spline-cta:hover {
    background: #ecfafd !important;
    color: #08839e !important;
    box-shadow:
      0 4px 14px rgba(23, 179, 209, 0.3),
      0 12px 32px -4px rgba(23, 179, 209, 0.55),
      0 0 0 1.5px #17b3d1;
    transform: translateY(-2px) scale(1.02);
  }
  .btn-spline-cta:active {
    transform: scale(0.97);
  }
  .btn-spline-cta svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
    transition: transform 200ms var(--ease-out);
  }
  .btn-spline-cta:hover svg {
    transform: translateX(3px);
  }

  .live-dot {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--success);
  }
  .live-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: ping 1.8s var(--ease-out) infinite;
  }
  @keyframes ping {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    80%,
    100% {
      transform: scale(2.6);
      opacity: 0;
    }
  }

  /* ── Tarjeta de flujo del hero ── */
  .flow-steps {
    position: relative;
  }
  .flow-steps::before {
    /* línea conectora */
    content: '';
    position: absolute;
    left: 2.125rem;
    top: 2rem;
    bottom: 2rem;
    width: 1px;
    background: linear-gradient(var(--hairline-strong), var(--hairline-strong));
  }
  .flow-pulse {
    position: absolute;
    left: calc(2.125rem - 1.5px);
    top: 2rem;
    width: 4px;
    height: 36px;
    border-radius: 4px;
    background: linear-gradient(180deg, transparent, var(--brand-400), transparent);
    animation: flow-pulse 2.6s linear infinite;
  }
  @keyframes flow-pulse {
    from {
      transform: translateY(0);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    to {
      transform: translateY(var(--travel, 220px));
      opacity: 0;
    }
  }

  .flow-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.875rem;
    border-radius: 1rem;
    transition:
      background-color 300ms ease,
      box-shadow 300ms ease,
      transform 300ms var(--ease-out);
  }
  .flow-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    color: var(--ink-400);
    background: #fff;
    box-shadow: 0 0 0 1px var(--hairline-strong);
    transition:
      color 300ms ease,
      background 300ms ease,
      box-shadow 300ms ease;
  }
  .flow-step[data-state='active'] {
    background: #fff;
    box-shadow:
      0 0 0 1px rgba(23, 179, 209, 0.35),
      0 10px 24px -12px rgba(14, 147, 184, 0.45);
    transform: translateX(4px);
  }
  .flow-step[data-state='active'] .flow-icon,
  .flow-step[data-state='done'] .flow-icon {
    color: #fff;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  .flow-status > span {
    display: none;
  }
  .flow-step[data-state='idle'] .st-idle,
  .flow-step[data-state='active'] .st-active,
  .flow-step[data-state='done'] .st-done {
    display: inline-flex;
  }

  .spinner {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: spin 600ms linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .float-card {
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
    50% {
      transform: translateY(-6px);
    }
  }

  /* ── Carrusel de integraciones ── */
  .marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 45s linear infinite;
  }
  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
  @keyframes marquee {
    to {
      transform: translateX(-50%);
    }
  }

  /* ── Problemas vs soluciones ── */
  .pain-card {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 1px var(--hairline);
  }
  .solution-card {
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, rgba(23, 179, 209, 0.55), rgba(19, 41, 75, 0.18)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 12px 32px -18px rgba(14, 147, 184, 0.45);
  }

  .check-dot {
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 999px;
    flex-shrink: 0;
    color: var(--brand-600);
    background: rgba(23, 179, 209, 0.12);
  }
  .check-dot .icon {
    width: 0.8rem;
    height: 0.8rem;
  }
  .x-dot {
    color: var(--danger);
    background: rgba(217, 67, 90, 0.09);
  }

  .tag {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--navy-600);
    background: rgba(19, 41, 75, 0.045);
    box-shadow: inset 0 0 0 1px var(--hairline);
  }

  /* ── Calculadora ROI: slider personalizado ── */
  .range {
    --fill: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.75rem;
    background: transparent;
    cursor: pointer;
  }
  .range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-500) 0 var(--fill), rgba(19, 41, 75, 0.1) var(--fill) 100%);
  }
  .range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(19, 41, 75, 0.1);
  }
  .range::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--brand-500);
  }
  .range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 999px;
    background: #fff;
    box-shadow:
      0 0 0 1px rgba(19, 41, 75, 0.12),
      0 2px 6px rgba(19, 41, 75, 0.2);
    transition: transform 150ms var(--ease-out), box-shadow 150ms ease;
  }
  .range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow:
      0 0 0 1px rgba(19, 41, 75, 0.12),
      0 2px 6px rgba(19, 41, 75, 0.2);
  }
  .range:active::-webkit-slider-thumb {
    transform: scale(1.12);
    box-shadow:
      0 0 0 6px rgba(23, 179, 209, 0.18),
      0 2px 8px rgba(19, 41, 75, 0.24);
  }
  .range:focus-visible {
    outline: none;
  }
  .range:focus-visible::-webkit-slider-thumb {
    box-shadow:
      0 0 0 4px rgba(23, 179, 209, 0.35),
      0 2px 6px rgba(19, 41, 75, 0.2);
  }

  .num-input {
    width: 7.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.75rem;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--navy-900);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--hairline-strong);
    transition: box-shadow 150ms ease;
  }
  .num-input:focus {
    outline: none;
    box-shadow:
      inset 0 0 0 1px var(--brand-500),
      0 0 0 4px rgba(23, 179, 209, 0.16);
  }

  .roi-panel {
    background:
      radial-gradient(80% 60% at 100% 0%, rgba(23, 179, 209, 0.28), transparent 60%),
      linear-gradient(160deg, #1b3864 0%, var(--navy-900) 45%, var(--navy-950) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(10, 24, 48, 0.9),
      0 30px 60px -30px rgba(10, 24, 48, 0.6);
  }
  .roi-bar {
    height: 0.625rem;
    border-radius: 999px;
    transform-origin: left center;
    transition: transform 200ms var(--ease-out);
  }
  .tabular {
    font-variant-numeric: tabular-nums;
  }

  /* ── Metodología ── */
  .step-num {
    font-size: 3.25rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    background: linear-gradient(180deg, var(--brand-500), rgba(23, 179, 209, 0.15));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* ── Formulario ── */
  .field-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy-900);
  }
  .field {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    /* 16px evita el zoom automático de iOS al enfocar */
    font-size: 1rem;
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px var(--hairline-strong);
    transition:
      box-shadow 150ms ease,
      background-color 150ms ease;
  }
  .field::placeholder {
    color: var(--ink-400);
  }
  .field:hover {
    background: #fff;
  }
  .field:focus {
    outline: none;
    background: #fff;
    box-shadow:
      inset 0 0 0 1px var(--brand-500),
      0 0 0 4px rgba(23, 179, 209, 0.16);
  }
  .field[aria-invalid='true'] {
    box-shadow:
      inset 0 0 0 1px var(--danger),
      0 0 0 4px rgba(217, 67, 90, 0.12);
  }
  select.field {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356667f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
    cursor: pointer;
  }
  textarea.field {
    min-height: 8.5rem;
    resize: vertical;
    line-height: 1.55;
  }
  .field-error {
    display: block;
    min-height: 1.25rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--danger);
  }

  .btn[data-loading='true'] {
    pointer-events: none;
    opacity: 0.85;
  }
  .btn .btn-spinner {
    display: none;
  }
  .btn[data-loading='true'] .btn-spinner {
    display: inline-block;
  }
  .btn[data-loading='true'] .icon-arrow {
    display: none;
  }

  /* Intercambio formulario ↔ confirmación: fundido con blur sutil */
  .swap {
    transition:
      opacity 300ms var(--ease-out),
      filter 300ms var(--ease-out),
      transform 300ms var(--ease-out);
  }
  .swap[data-hidden='true'] {
    opacity: 0;
    filter: blur(4px);
    transform: scale(0.98);
    pointer-events: none;
  }

  .success-ring {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(145deg, #2fd3a6, var(--success));
    box-shadow:
      0 0 0 8px rgba(18, 166, 122, 0.1),
      0 12px 28px -10px rgba(18, 166, 122, 0.6);
  }

  /* ── Aparición al hacer scroll ── */
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 700ms var(--ease-out),
      transform 700ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* ── Página legal ── */
  .prose-legal h2 {
    margin: 2.5rem 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
  }
  .prose-legal p,
  .prose-legal li {
    color: var(--ink-500);
    line-height: 1.75;
  }
  .prose-legal ul {
    margin: 0.5rem 0 0 1.25rem;
    list-style: disc;
  }
}

/* ─────────────────────────── Accesibilidad ─────────────────────────── */

/* Movimiento reducido: sin desplazamientos, solo fundidos suaves */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    transform: none;
    transition: opacity 300ms ease;
  }
  .marquee-track,
  .flow-pulse,
  .float-card,
  .live-dot::after {
    animation: none;
  }
  .flow-step[data-state='active'] {
    transform: none;
  }
  .lift:hover {
    transform: none !important;
  }
  .swap[data-hidden='true'] {
    transform: none;
    filter: none;
  }
}

/* Transparencia reducida: superficies sólidas */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .nav[data-scrolled='true'] {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Contraste alto: bordes definidos */
@media (prefers-contrast: more) {
  :root {
    --hairline: rgba(19, 41, 75, 0.35);
    --hairline-strong: rgba(19, 41, 75, 0.5);
  }
}