:root {
    /* Marca Smarteam */
    --brand-blue:        #168CF6;
    --brand-blue-dark:   #0E6FD1;
    --brand-blue-soft:   rgba(22, 140, 246, 0.08);
    --brand-teal:        #42E4B3;
    --brand-teal-dark:   #1FBE91;
    --brand-teal-soft:   rgba(66, 228, 179, 0.10);

    /* Light theme (cuerpo) */
    --bg:              #FFFFFF;
    --bg-soft:         #F7F8FA;
    --bg-elevated:     #FFFFFF;
    --border:          #E5E7EB;
    --border-strong:   #D1D5DB;
    --text:            #0F172A;
    --text-secondary:  #475569;
    --text-muted:      #94A3B8;

    /* Dark theme (hero, CTA) */
    --dark-bg:         #0B1426;
    --dark-bg-soft:    #101B30;
    --dark-bg-card:    #14223C;
    --dark-border:     rgba(255, 255, 255, 0.08);
    --dark-border-strong: rgba(255, 255, 255, 0.16);
    --dark-text:       #F1F5F9;
    --dark-text-secondary: #94A3B8;
    --dark-text-muted:  #64748B;
  }

  * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--brand-teal); color: var(--dark-bg); }

  /* Display utility */
  .font-display { font-family: 'Fraunces', Georgia, serif; }
  .display-tight { letter-spacing: -0.022em; }
  .display-italic { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; }

  /* Eyebrow */
  .eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* Reveal animation */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal[data-stagger="1"] { transition-delay: 80ms; }
  .reveal[data-stagger="2"] { transition-delay: 160ms; }
  .reveal[data-stagger="3"] { transition-delay: 240ms; }
  .reveal[data-stagger="4"] { transition-delay: 320ms; }
  .reveal[data-stagger="5"] { transition-delay: 400ms; }

  /* ═══ SECCIONES ═══ */
  .section-light { background: var(--bg); color: var(--text); }
  .section-soft  { background: var(--bg-soft); color: var(--text); }
  .section-dark  { background: var(--dark-bg); color: var(--dark-text); }

  /* ═══ NAV ═══ */
  .nav-blur {
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
  }
  .nav-on-dark { background: rgba(11, 20, 38, 0.7); border-color: var(--dark-border); }
  .nav-on-light { background: rgba(255, 255, 255, 0.82); border-color: var(--border); }

  /* ═══ BOTONES ═══ */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 14px 26px;
    background: var(--brand-teal);
    color: var(--dark-bg);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: filter 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
  }
  .btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .btn-primary:active { transform: scale(0.98); }

  .btn-secondary-dark {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 14px 24px;
    background: transparent;
    color: var(--dark-text);
    border: 1px solid var(--dark-border-strong);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
    cursor: pointer;
  }
  .btn-secondary-dark:hover { background: rgba(255,255,255,0.04); border-color: var(--brand-teal); color: var(--brand-teal); }
  .btn-secondary-dark:active { transform: scale(0.98); }

  .btn-secondary-light {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 14px 24px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 200ms ease, border-color 200ms ease;
    cursor: pointer;
  }
  .btn-secondary-light:hover { background: var(--brand-blue-soft); border-color: var(--brand-blue); color: var(--brand-blue); }

  /* ═══ CARDS ═══ */
  .card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease;
  }
  .card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.08);
  }

  .card-pain {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid #F87171;
    border-radius: 0 12px 12px 0;
  }

  .card-loop {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-teal);
    border-radius: 0 12px 12px 0;
  }

  /* ═══ HERO BACKDROP — con parallax layers ═══ */
  .hero-backdrop {
    background: var(--dark-bg);
    position: relative;
    overflow: hidden;
  }
  /* Capa 1: gradientes radiales (lentos, percibidos como "lejos") */
  .hero-backdrop::after {
    content: '';
    position: absolute;
    inset: -8% 0;
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(66, 228, 179, 0.12), transparent 70%),
      radial-gradient(ellipse 80% 60% at 80% 100%, rgba(22, 140, 246, 0.14), transparent 70%);
    pointer-events: none;
    transform: translate3d(0, var(--parallax-slow, 0), 0);
    will-change: transform;
    z-index: 0;
  }
  /* Capa 2: grid pattern (más rápido, percibido como "cerca") */
  .hero-backdrop::before {
    content: '';
    position: absolute;
    inset: -12% 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 30%, transparent 80%);
    transform: translate3d(0, var(--parallax-fast, 0), 0);
    will-change: transform;
    z-index: 1;
  }
  .hero-backdrop > * { position: relative; z-index: 2; }

  @media (max-width: 768px) {
    .hero-backdrop::before { background-size: 40px 40px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-backdrop::before,
    .hero-backdrop::after {
      transform: none !important;
    }
  }

  /* ═══ TRUST BAR ═══ */
  .logo-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    font-family: 'Inter', sans-serif;
    transition: color 250ms ease, transform 250ms ease;
    filter: grayscale(100%);
    opacity: 0.65;
  }
  .logo-pill:hover {
    color: var(--text);
    opacity: 1;
    transform: scale(1.03);
  }

  /* ═══ SMART LOOP — FLECHAS CURVAS + LABELS EXTERNOS ═══ */
  .loop-arc {
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .loop-arc .loop-arc-bg {
    opacity: 0.32;
    transform-origin: 280px 280px;
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), filter 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .loop-arc:hover .loop-arc-bg {
    opacity: 0.65;
  }
  .loop-arc.is-active .loop-arc-bg {
    opacity: 1;
    filter: drop-shadow(0 8px 22px rgba(22, 140, 246, 0.32));
    transform: scale(1.03);
  }
  .loop-arc.is-active[data-phase="2"] .loop-arc-bg,
  .loop-arc.is-active[data-phase="4"] .loop-arc-bg {
    filter: drop-shadow(0 8px 22px rgba(66, 228, 179, 0.34));
  }

  /* Labels externos */
  .loop-label {
    transition: opacity 320ms ease;
  }
  .loop-label .loop-label-num,
  .loop-label .loop-label-name {
    opacity: 0.55;
    transition: opacity 320ms ease;
  }
  .loop-label:hover .loop-label-num,
  .loop-label:hover .loop-label-name {
    opacity: 0.9;
  }
  .loop-label.is-active .loop-label-num,
  .loop-label.is-active .loop-label-name {
    opacity: 1;
  }
  .loop-label.is-active .loop-label-name {
    font-weight: 800;
  }
  .loop-detail-panel {
    animation: fadeInUp 350ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ═══ ESCALA DE MADUREZ — WIDGET INTERACTIVO ═══ */
  /* Tabs underline con iconos */
  .area-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
  }
  .area-tab svg {
    width: 16px;
    height: 16px;
    opacity: 0.55;
    transition: opacity 220ms ease;
  }
  .area-tab:hover {
    color: var(--text);
  }
  .area-tab:hover svg { opacity: 0.85; }
  .area-tab.is-active {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
    font-weight: 600;
  }
  .area-tab.is-active svg { opacity: 1; }

  /* Roadmap markers (escala de rendimiento) */
  .level-bar-group .level-marker-ring,
  .level-bar-group .level-marker-num,
  .level-bar-group .level-marker-label {
    transition: fill 250ms ease, stroke 250ms ease, r 250ms ease, font-weight 250ms ease, filter 250ms ease;
  }
  .level-bar-group:hover .level-marker-ring {
    stroke: #475569;
    filter: drop-shadow(0 4px 12px rgba(15, 23, 42, 0.12));
  }
  .level-bar-group:hover .level-marker-num,
  .level-bar-group:hover .level-marker-label {
    fill: #0F172A;
  }
  .level-bar-group.is-active .level-marker-ring {
    fill: #D4A017;
    stroke: #D4A017;
    r: 26;
    filter: drop-shadow(0 6px 16px rgba(212, 160, 23, 0.35));
  }
  .level-bar-group.is-active .level-marker-num {
    fill: #FFFFFF;
    font-weight: 700;
  }
  .level-bar-group.is-active .level-marker-label {
    fill: #D4A017;
    font-weight: 700;
  }

  /* Color del border-l del detail según nivel activo */
  #level-detail[data-level="1"] { border-left-color: #F87171; }
  #level-detail[data-level="2"] { border-left-color: #FB923C; }
  #level-detail[data-level="3"] { border-left-color: #FBBF24; }
  #level-detail[data-level="4"] { border-left-color: #60A5FA; }
  #level-detail[data-level="5"] { border-left-color: #42E4B3; }
  #level-detail[data-level="1"] #level-detail-name { color: #DC2626; }
  #level-detail[data-level="2"] #level-detail-name { color: #C2410C; }
  #level-detail[data-level="3"] #level-detail-name { color: #B45309; }
  #level-detail[data-level="4"] #level-detail-name { color: #2563EB; }
  #level-detail[data-level="5"] #level-detail-name { color: #1FBE91; }
  #level-detail[data-level="1"] .grid > div span.w-1\.5 { background: #F87171; }
  #level-detail[data-level="2"] .grid > div span.w-1\.5 { background: #FB923C; }
  #level-detail[data-level="3"] .grid > div span.w-1\.5 { background: #FBBF24; }
  #level-detail[data-level="4"] .grid > div span.w-1\.5 { background: #60A5FA; }
  #level-detail[data-level="5"] .grid > div span.w-1\.5 { background: #42E4B3; }

  /* ═══ FORMULARIO ═══ */
  .form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
  }
  .form-required { color: #DC2626; margin-left: 2px; }
  .form-input, .form-select {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  }
  .form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--brand-blue);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(22, 140, 246, 0.12);
  }
  .form-input::placeholder { color: var(--text-muted); }
  .form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 38px;
  }

  /* Legacy class kept for any leftover usage */
  .loop-phase-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
  }
  .loop-phase-card:hover {
    border-color: var(--brand-blue);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -20px rgba(22, 140, 246, 0.25);
  }
  .loop-phase-card:hover .loop-num { color: var(--brand-blue); }
  .loop-num {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    color: var(--text-muted);
    transition: color 300ms ease;
  }

  /* ═══ ESCALA DE MADUREZ ═══ */
  .level-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
  }
  .level-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -20px rgba(22, 140, 246, 0.2);
  }
  .level-card .level-bar {
    position: absolute;
    top: 0; left: 0;
    height: 3px;
    background: var(--border);
    transition: background 250ms ease;
  }
  .level-1 .level-bar { background: #F87171; width: 20%; }
  .level-2 .level-bar { background: #FB923C; width: 40%; }
  .level-3 .level-bar { background: #FBBF24; width: 60%; }
  .level-4 .level-bar { background: #60A5FA; width: 80%; }
  .level-5 .level-bar { background: var(--brand-teal); width: 100%; }

  .level-1:hover { border-color: #F87171; }
  .level-2:hover { border-color: #FB923C; }
  .level-3:hover { border-color: #FBBF24; }
  .level-4:hover { border-color: #60A5FA; }
  .level-5:hover { border-color: var(--brand-teal); }

  .level-num {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 18px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
  }
  .level-5-highlight {
    background: linear-gradient(180deg, rgba(66, 228, 179, 0.05), transparent 80%);
    border-color: rgba(66, 228, 179, 0.3);
  }

  /* ═══ ANALOGÍA DIVIDER ═══ */
  .v-divider {
    background: linear-gradient(to bottom, transparent, var(--border) 20%, var(--border) 80%, transparent);
  }

  /* ═══ FOOTER ═══ */
  footer { background: var(--bg-soft); border-top: 1px solid var(--border); }

  /* ═══ REDUCED MOTION ═══ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
  }

  /* ═══ MOBILE TUNING ═══ */
  @media (max-width: 640px) {
    .hero-h1 { font-size: 38px !important; line-height: 1.1 !important; }
  }