/* ==========================================================================
       CSS VARIABLES & CINEMATIC DESIGN SYSTEM
       70% ivory/blanco, 20% carbon/black, detalles sutiles en aurea gold y sage
       ========================================================================== */
    :root {
      color-scheme: light;
      --page-bg: #F7F5EF;
      --surface: #FFFFFF;
      --surface-alt: #EEE9DF;
      --text-primary: #101827;
      --text-secondary: #596273;
      --theme-border: rgba(16, 24, 39, 0.16);
      --gold: #B9913E;
      --accent-text: #806018;
      --accent-on-dark: #D8B767;
      --brand-ink: #0B0D0E;
      --on-dark: #FFFFFF;
      --on-gold: #101827;

      --black: var(--text-primary);
      --carbon: #111416;
      --carbon-subtle: #181C1F;
      --white: var(--surface);
      --ivory: var(--page-bg);
      --ivory-card: var(--surface);
      --slate: var(--text-secondary);
      --slate-light: #949CA4;
      --border: var(--theme-border);
      --border-dark: #22272B;
      --aurea: var(--gold);
      --aurea-light: #E4D3AE;
      --aurea-glow: rgba(201, 169, 110, 0.16);
      --sage: #9FB5A5;
      --sage-light: #EBF2EC;
      
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-display: 'Plus Jakarta Sans', var(--font-sans);
      
      --radius-sm: 10px;
      --radius-md: 18px;
      --radius-lg: 24px;
      --radius-xl: 32px;
      
      --shadow-sm: 0 2px 10px rgba(11, 13, 14, 0.03);
      --shadow-md: 0 14px 34px -6px rgba(11, 13, 14, 0.06);
      --shadow-lg: 0 25px 50px -12px rgba(11, 13, 14, 0.10);
      --shadow-glow: 0 0 45px -5px var(--aurea-glow);
    }

    html[data-theme="dark"] {
      color-scheme: dark;
      --page-bg: #07111F;
      --surface: #0B1628;
      --surface-alt: #101D31;
      --text-primary: #F5F1E8;
      --text-secondary: #B8C0CC;
      --theme-border: rgba(255, 255, 255, 0.15);
      --gold: #D8B767;
      --accent-text: #D8B767;
      --slate-light: #AEB8C8;
      --aurea-light: #8F743D;
      --sage-light: #14251F;
      --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.22);
      --shadow-md: 0 14px 34px -6px rgba(0, 0, 0, 0.32);
      --shadow-lg: 0 25px 55px -12px rgba(0, 0, 0, 0.42);
    }

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

    html {
      font-size: 16px;
      scroll-behavior: smooth;
      scroll-padding-top: 5.5rem;
      /* `hidden` creates a scrolling ancestor and breaks descendant sticky runways. */
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      font-family: var(--font-sans);
      color: var(--black);
      background-color: var(--ivory);
      line-height: 1.6;
      overflow-x: clip;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .skip-link {
      position: fixed;
      top: .75rem;
      left: .75rem;
      z-index: 2000;
      padding: .7rem 1rem;
      border-radius: .5rem;
      background: var(--black);
      color: var(--on-dark);
      transform: translateY(-180%);
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    ::selection {
      background-color: var(--aurea-light);
      color: var(--black);
    }

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

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    [id] {
      scroll-margin-top: 5.5rem;
    }

    button, input, select, textarea {
      font: inherit;
      border: none;
      outline: none;
    }

    /* Layout Containers */
    .container {
      width: 100%;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-left: clamp(1.25rem, 4vw, 2.5rem);
      padding-right: clamp(1.25rem, 4vw, 2.5rem);
      position: relative;
    }

    /* Ambient Subtle Grid */
    .ambient-grid {
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(to right, rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.02) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    }

    .ambient-grid-dark {
      position: absolute;
      inset: 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: 48px 48px;
      pointer-events: none;
      mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
    }

    /* ==========================================================================
       CINEMATIC LATERAL SCROLL INDICATOR (Desktop Only)
       ========================================================================== */
    .lateral-indicator {
      position: fixed;
      right: 2.5rem;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
      z-index: 800;
      pointer-events: none;
    }

    @media (min-width: 1200px) {
      .lateral-indicator {
        display: flex;
      }
    }

    .lateral-text {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--slate-light);
      opacity: 0.65;
    }

    .lateral-track {
      width: 2px;
      height: 120px;
      background: rgba(0, 0, 0, 0.08);
      border-radius: 999px;
      position: relative;
      overflow: hidden;
    }

    .lateral-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: var(--aurea);
      border-radius: 999px;
      transition: height 0.1s linear;
    }

    .lateral-step {
      font-family: monospace;
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--aurea);
    }

    /* Top Progress Bar */
    #scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2.5px;
      background: linear-gradient(90deg, var(--aurea), var(--aurea-light));
      z-index: 1000;
      width: 0%;
      transition: width 0.08s linear;
    }

    /* ==========================================================================
       TYPOGRAPHY & UTILITIES
       ========================================================================== */
    h1, h2, h3, h4 {
      font-family: var(--font-display);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.025em;
      color: var(--black);
    }

    .h1-hero {
      font-size: clamp(2.35rem, 5.5vw, 4.4rem);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.12;
      margin-bottom: 1.5rem;
    }

    .h2-section {
      font-size: clamp(1.85rem, 3.8vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.18;
      margin-bottom: 1rem;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--aurea);
      margin-bottom: 0.85rem;
    }

    .eyebrow-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--aurea);
    }

    .lead-text {
      font-size: clamp(1.05rem, 1.6vw, 1.25rem);
      color: var(--slate);
      line-height: 1.6;
      max-width: 680px;
    }

    .gold-highlight {
      color: var(--aurea);
      font-weight: inherit;
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      padding: 0.85rem 1.65rem;
      border-radius: 9999px;
      font-size: 0.925rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      text-align: center;
      white-space: nowrap;
      position: relative;
    }

    .btn-primary {
      background-color: var(--brand-ink);
      color: var(--on-dark);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 4px 14px rgba(11, 13, 14, 0.15);
    }

    .btn-primary:hover {
      background-color: var(--carbon);
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 10px 24px rgba(11, 13, 14, 0.25);
      color: var(--on-dark);
    }

    .btn-primary:hover .btn-arrow {
      transform: translateX(3px);
    }

    .btn-aurea {
      background: linear-gradient(135deg, #C9A96E 0%, #B89658 100%);
      color: var(--black);
      font-weight: 700;
      box-shadow: 0 4px 18px rgba(201, 169, 110, 0.3);
    }

    .btn-aurea:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 10px 30px rgba(201, 169, 110, 0.45);
    }

    .btn-secondary {
      background-color: transparent;
      color: var(--black);
      border: 1px solid var(--border);
    }

    .btn-secondary:hover {
      background-color: var(--on-dark);
      border-color: #CBD0D5;
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    .btn-arrow {
      transition: transform 0.2s ease;
    }

    /* ==========================================================================
       HEADER (Sticky + Glass with Active Section Badge)
       ========================================================================== */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 900;
      padding: 1.25rem 0;
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .header.scrolled {
      padding: 0.75rem 0;
      background: rgba(247, 247, 245, 0.85);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(230, 232, 233, 0.8);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.15rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--black);
    }

    .brand-mark {
      width: 42px;
      height: 28px;
      flex: 0 0 auto;
      object-fit: contain;
      object-position: center;
      filter: drop-shadow(0 2px 4px rgba(72, 49, 10, .22));
    }

    .nav-links {
      display: none;
      align-items: center;
      gap: 1.75rem;
      list-style: none;
    }

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

    .nav-link {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--slate);
      position: relative;
      padding: 0.3rem 0;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    .nav-link.active {
      color: var(--black);
      font-weight: 600;
    }

    .nav-link.active::after {
      width: 100%;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      height: 1.5px;
      background-color: var(--aurea);
      transition: width 0.25s ease;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    .nav-num {
      font-family: monospace;
      font-size: 0.7rem;
      color: var(--slate-light);
    }

    .header-cta {
      display: none;
    }

    @media (min-width: 640px) {
      .header-cta {
        display: inline-flex;
      }
    }

    /* Mobile Drawer */
    .mobile-menu-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      background: transparent;
      cursor: pointer;
      z-index: 1001;
    }

    @media (min-width: 900px) {
      .mobile-menu-btn {
        display: none;
      }
    }

    .mobile-menu-btn span {
      display: block;
      width: 22px;
      height: 2px;
      background-color: var(--brand-ink);
      border-radius: 2px;
      transition: all 0.3s ease;
      margin: 0 auto;
    }

    .mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-drawer {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      max-width: 380px;
      height: 100vh;
      background-color: var(--on-dark);
      box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
      z-index: 999;
      padding: 6rem 2rem 3rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-drawer.open { right: 0; }

    .mobile-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .mobile-nav-link {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--black);
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .mobile-drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(11, 13, 14, 0.4);
      backdrop-filter: blur(4px);
      z-index: 998;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .mobile-drawer-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* ==========================================================================
       HERO CINEMATOGRÁFICO (100svh + Scroll Scale Animation)
       ========================================================================== */
    .hero-wrapper {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding-top: clamp(6.5rem, 11vw, 8.5rem);
      padding-bottom: clamp(3rem, 6vw, 5rem);
      overflow: hidden;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3.5rem;
      align-items: center;
    }

    @media (min-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1.15fr 0.95fr;
        gap: 4rem;
      }
    }

    .hero-text-col {
      will-change: transform, opacity;
      transition: transform 0.1s linear, opacity 0.1s linear;
    }

    .hero-indicators {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem;
      margin-top: 1.5rem;
      margin-bottom: 2rem;
    }

    .hero-pill {
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--slate);
      background-color: var(--on-dark);
      border: 1px solid var(--border);
      padding: 0.35rem 0.8rem;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .hero-pill-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: var(--sage);
    }

    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .hero-microcopy {
      font-size: 0.8rem;
      color: var(--slate-light);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    /* Cinematic Product Mockup */
    .mockup-stage {
      position: relative;
      width: 100%;
      min-height: 440px;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1200px;
      will-change: transform;
    }

    .browser-frame {
      width: 100%;
      max-width: 520px;
      background: var(--white);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .browser-header {
      background: #F1F3F5;
      padding: 0.65rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.8rem;
      border-bottom: 1px solid var(--border);
    }

    .browser-dots {
      display: flex;
      gap: 5px;
    }

    .browser-dots span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #D1D5DB;
    }

    .browser-address {
      flex: 1;
      background: var(--white);
      padding: 0.2rem 0.75rem;
      border-radius: 6px;
      font-size: 0.72rem;
      color: var(--slate);
      font-family: monospace;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      border: 1px solid #E5E7EB;
    }

    .browser-body {
      padding: 1.25rem;
      background: #FAFAFA;
    }

    .mini-hero-demo {
      background: var(--white);
      border-radius: 12px;
      padding: 1.2rem;
      border: 1px solid var(--border);
    }

    .mini-tag {
      font-size: 0.65rem;
      font-weight: 700;
      color: var(--aurea);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .mini-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--black);
      margin: 0.3rem 0;
    }

    .mini-p {
      font-size: 0.72rem;
      color: var(--slate);
      line-height: 1.4;
      margin-bottom: 0.75rem;
    }

    .mini-cta-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .mini-btn {
      padding: 0.35rem 0.75rem;
      border-radius: 6px;
      font-size: 0.7rem;
      font-weight: 600;
      background: var(--brand-ink);
      color: var(--on-dark);
    }

    .mini-btn-wa {
      background: #25D366;
      color: var(--on-dark);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* Floating UI Badges */
    .floating-card {
      position: absolute;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(230, 232, 233, 0.95);
      border-radius: 14px;
      padding: 0.75rem 1rem;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      gap: 0.75rem;
      z-index: 10;
      will-change: transform;
      transition: transform 0.2s ease-out;
    }

    .floating-google { top: -15px; right: -10px; }
    .floating-mobile { bottom: -20px; left: -15px; }
    .floating-wa { bottom: 60px; right: -25px; }

    .badge-icon-box {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .badge-icon-google { background: #F8FAFC; border: 1px solid #E2E8F0; }
    .badge-icon-mobile { background: var(--sage-light); color: #2F6F44; }
    .badge-icon-wa { background: #E7F9EE; color: #128C7E; }

    .badge-label { font-size: 0.68rem; color: var(--slate); text-transform: uppercase; font-weight: 600; }
    .badge-value { font-size: 0.85rem; font-weight: 700; color: var(--black); display: flex; align-items: center; gap: 0.3rem; }
    .star-gold { color: #F59E0B; font-size: 0.8rem; }

    /* ==========================================================================
       SECTION 4: POSICIONAMIENTO EDITORIAL (Whitespace + Typographic Reveal)
       ========================================================================== */
    .pos-editorial-section {
      background: var(--white);
      padding: clamp(5rem, 10vw, 8.5rem) 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      text-align: center;
    }

    .pos-eyebrow-clean {
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--aurea);
      margin-bottom: 1.5rem;
      display: block;
    }

    .pos-editorial-title {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5.8vw, 4.8rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1.08;
      color: var(--black);
      max-width: 900px;
      margin: 0 auto;
    }

    .pos-editorial-subtitle {
      margin-top: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      font-size: clamp(0.9rem, 1.4vw, 1.15rem);
      font-weight: 600;
      color: var(--slate);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .pos-dot-separator {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--aurea);
    }

    /* ==========================================================================
       SECTION 5: PROBLEMAS — STICKY DIAGNOSTIC EXPERIENCE
       ========================================================================== */
    .sticky-diagnostic-wrap {
      position: relative;
      height: auto;
    }

    .sticky-diagnostic-container {
      position: relative;
      height: auto;
      display: flex;
      align-items: center;
      overflow: visible;
      background: var(--ivory);
      padding: 5rem 0;
    }

    .diagnostic-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      align-items: center;
      width: 100%;
    }

    @media (min-width: 900px) {
      .diagnostic-layout {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 4.5rem;
      }
    }

    .diagnostic-left-panel {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .diagnostic-counter {
      font-family: monospace;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--aurea);
      margin-top: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .diagnostic-counter-bar {
      width: 60px;
      height: 2px;
      background: var(--border);
      position: relative;
      overflow: hidden;
    }

    .diagnostic-counter-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 16.66%;
      background: var(--aurea);
      transition: width 0.3s ease;
    }

    /* Diagnostic Right Panel Card Carousel */
    .diagnostic-cards-viewport {
      position: relative;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
    }

    .diag-card-item {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(2rem, 4vw, 3rem);
      box-shadow: var(--shadow-lg);
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @media (min-width: 900px) {
      .sticky-diagnostic-wrap.motion-diagnostic {
        height: 380vh;
      }

      .motion-diagnostic .sticky-diagnostic-container {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        padding: 0;
      }

      .motion-diagnostic .diagnostic-cards-viewport {
        min-height: 320px;
        flex-direction: row;
        gap: 0;
      }

      .motion-diagnostic .diag-card-item {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .motion-diagnostic .diag-card-item.active {
        pointer-events: auto;
      }
    }

    .diag-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
    }

    .diag-badge-num {
      font-family: monospace;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--aurea);
      background: rgba(201, 169, 110, 0.12);
      padding: 0.25rem 0.65rem;
      border-radius: 6px;
    }

    .diag-icon-box {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--ivory);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--black);
    }

    .diag-title {
      font-size: clamp(1.35rem, 2.2vw, 1.75rem);
      font-weight: 700;
      color: var(--black);
      margin-bottom: 0.75rem;
    }

    .diag-desc {
      font-size: 1rem;
      color: var(--slate);
      line-height: 1.6;
    }

    /* ==========================================================================
       SECTION 6: NARRATIVE TRANSITION (Ivory to Dark Morphing)
       ========================================================================== */
    .narrative-scene-wrap {
      position: relative;
      height: auto;
      background: var(--carbon);
      color: var(--on-dark);
    }

    .narrative-scene-sticky {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: visible;
      padding: 5rem 1.5rem;
    }

    @media (min-width: 900px) {
      .narrative-scene-wrap.motion-narrative {
        height: 200vh;
      }

      .motion-narrative .narrative-scene-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 0;
        overflow: hidden;
        padding: 0 1.5rem;
      }
    }

    .narrative-box {
      max-width: 960px;
      margin: 0 auto;
    }

    .narrative-text-1 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.8vw, 2.4rem);
      font-weight: 500;
      color: #949CA4;
      line-height: 1.35;
      margin-bottom: 2rem;
      transform-origin: center;
      transition: transform 0.1s linear, opacity 0.1s linear;
    }

    .narrative-text-2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4.5vw, 3.6rem);
      font-weight: 800;
      color: var(--on-dark);
      line-height: 1.2;
      letter-spacing: -0.03em;
      transition: opacity 0.2s linear, transform 0.2s linear;
    }

    /* ==========================================================================
       SECTION 7: AUREA DIGITAL GROWTH (7 Component Infrastructure Hub)
       ========================================================================== */
    .growth-section {
      background-color: var(--ivory);
      padding-top: clamp(5rem, 10vw, 8.5rem);
      padding-bottom: clamp(5rem, 10vw, 8.5rem);
      position: relative;
    }

    .growth-hub-stage {
      margin-top: 4rem;
      position: relative;
    }

    .system-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

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

    @media (min-width: 1024px) {
      .system-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .system-grid .system-card:nth-child(7) {
        grid-column: span 3;
      }
    }

    .system-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 2.25rem 2rem;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
    }

    .system-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 0%;
      background: var(--aurea);
      transition: height 0.3s ease;
    }

    .system-card:hover {
      border-color: #D3D7DC;
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .system-card:hover::before {
      height: 100%;
    }

    .system-card-num {
      display: inline-block;
      font-size: 0.75rem;
      font-family: monospace;
      font-weight: 700;
      color: var(--aurea);
      background: rgba(201, 169, 110, 0.12);
      padding: 0.2rem 0.55rem;
      border-radius: 6px;
      margin-bottom: 1.25rem;
    }

    .system-card-title {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--black);
      margin-bottom: 0.5rem;
    }

    .system-card-desc {
      font-size: 0.9rem;
      color: var(--slate);
      line-height: 1.55;
    }

    /* ==========================================================================
       SECTION 8: TRANSFORMACIÓN DEL SISTEMA (Sticky Stepper: ENCUENTRA -> SE MANTIENE)
       ========================================================================== */
    .system-stepper-wrap {
      position: relative;
      height: auto;
      background: var(--white);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .system-stepper-sticky {
      position: relative;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: visible;
      padding: 5rem 0;
    }

    .stepper-indicator-bar {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 2.5rem;
      padding-bottom: 1.25rem;
      border-bottom: 1px solid var(--border);
    }

    .stepper-nav-pill {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      transition: color 0.3s ease;
    }

    .stepper-nav-pill.active {
      color: var(--aurea);
    }

    .stepper-stage-viewport {
      position: relative;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .stepper-stage-item {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    @media (min-width: 900px) {
      .system-stepper-wrap.motion-system {
        height: 320vh;
      }

      .motion-system .system-stepper-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        padding: 0;
      }

      .motion-system .stepper-stage-viewport {
        min-height: 240px;
        display: block;
      }

      .motion-system .stepper-stage-item {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .motion-system .stepper-stage-item.active {
        pointer-events: auto;
      }
    }

    .stepper-giant-word {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 6.5vw, 5rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--black);
      line-height: 1.05;
      margin-bottom: 1rem;
    }

    .stepper-components-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1rem;
      font-weight: 600;
      color: var(--aurea);
      background: rgba(201, 169, 110, 0.1);
      border: 1px solid rgba(201, 169, 110, 0.3);
      padding: 0.4rem 1rem;
      border-radius: 999px;
    }

    .stepper-bottom-quote {
      margin-top: 3.5rem;
      padding-top: 2rem;
      border-top: 1px dashed var(--border);
      font-family: var(--font-display);
      font-size: clamp(1.15rem, 2.2vw, 1.7rem);
      font-weight: 700;
      color: var(--black);
      line-height: 1.35;
      text-align: center;
    }

    /* ==========================================================================
       SECTION 10: MERCADO INTERNACIONAL (Minimalist Typographic Translation)
       ========================================================================== */
    .intl-section {
      background: var(--ivory);
      padding: clamp(5rem, 10vw, 8rem) 0;
      position: relative;
    }

    .intl-box {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: clamp(2.5rem, 6vw, 4.5rem);
      box-shadow: var(--shadow-md);
      display: grid;
      grid-template-columns: 1fr;
      gap: 3.5rem;
      align-items: center;
    }

    @media (min-width: 1024px) {
      .intl-box {
        grid-template-columns: 1.15fr 0.85fr;
      }
    }

    .intl-visual-card {
      background: var(--ivory);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 1.75rem;
      box-shadow: var(--shadow-sm);
    }

    .lang-switcher-demo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1.25rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
    }

    .lang-btn-pill {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.35rem 0.75rem;
      border-radius: 9999px;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--slate);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .lang-btn-pill.active {
      background: var(--brand-ink);
      color: var(--on-dark);
      border-color: var(--brand-ink);
    }

    .intl-sample-content {
      font-size: 0.88rem;
      color: var(--black);
      line-height: 1.6;
    }

    /* ==========================================================================
       SECTION 11: BEFORE / AFTER TRANSFORMATION
       ========================================================================== */
    .comp-section {
      background: var(--white);
      padding: clamp(5rem, 10vw, 8rem) 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      margin-top: 3.5rem;
    }

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

    .comp-col {
      border-radius: var(--radius-md);
      padding: 2.5rem 2rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .comp-before {
      background: #F1F3F5;
      border: 1px solid #E2E8F0;
    }

    .comp-after {
      background: var(--white);
      border: 1.5px solid var(--aurea);
      box-shadow: var(--shadow-lg), var(--shadow-glow);
    }

    .comp-badge {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      margin-bottom: 1.5rem;
    }

    .comp-badge-before { background: #E2E8F0; color: var(--slate); }
    .comp-badge-after { background: var(--brand-ink); color: var(--aurea); }

    .comp-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .comp-item {
      font-size: 0.95rem;
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .comp-item-before { color: var(--slate); }
    .comp-item-after { color: var(--black); font-weight: 600; }
    .comp-icon-x { color: #EF4444; flex-shrink: 0; margin-top: 3px; }
    .comp-icon-check { color: var(--aurea); flex-shrink: 0; margin-top: 3px; }

    /* ==========================================================================
       SECTION 12: PROCESO (Sticky 3 Pasos con Progresión)
       ========================================================================== */
    .process-stepper-wrap {
      position: relative;
      height: auto;
      background: var(--ivory);
    }

    .process-stepper-sticky {
      position: relative;
      height: auto;
      display: flex;
      align-items: center;
      overflow: visible;
      padding: 5rem 0;
    }

    .process-grid-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3.5rem;
      align-items: center;
      width: 100%;
    }

    @media (min-width: 900px) {
      .process-grid-layout {
        grid-template-columns: 1fr 1fr;
      }
    }

    .process-step-display {
      position: relative;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .process-card-morph {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(2rem, 4vw, 3rem);
      box-shadow: var(--shadow-md);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    @media (min-width: 900px) {
      .process-stepper-wrap.motion-process {
        height: 300vh;
      }

      .motion-process .process-stepper-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        padding: 0;
      }

      .motion-process .process-step-display {
        min-height: 280px;
        display: block;
      }

      .motion-process .process-card-morph {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .motion-process .process-card-morph.active {
        pointer-events: auto;
      }
    }

    .process-num-giant {
      font-size: 3.5rem;
      font-family: var(--font-display);
      font-weight: 800;
      color: var(--accent-text);
      line-height: 1;
      margin-bottom: 1rem;
    }

    /* ==========================================================================
       SECTION 13: DIAGNÓSTICO DIGITAL AUREA & OFERTA PRINCIPAL
       ========================================================================== */
    .offer-section {
      background: var(--white);
      padding: clamp(5rem, 10vw, 8.5rem) 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .offer-card-main {
      background: var(--ivory);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-xl);
      padding: clamp(2.5rem, 6vw, 4.5rem);
      box-shadow: var(--shadow-lg);
      position: relative;
      overflow: hidden;
    }

    .offer-card-main::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, var(--aurea-glow) 0%, transparent 70%);
      pointer-events: none;
    }

    .offer-checklist {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin: 2.5rem 0;
    }

    @media (min-width: 640px) {
      .offer-checklist {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    .check-box-item {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.1rem 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--black);
      transition: all 0.2s ease;
      cursor: default;
    }

    .check-box-item:hover {
      border-color: var(--aurea);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    .check-icon-circle {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(201, 169, 110, 0.15);
      color: var(--aurea);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-weight: bold;
    }

    /* Bonus Cards */
    .bonus-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      margin-top: 3.5rem;
    }

    @media (min-width: 640px) {
      .bonus-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    .bonus-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 1.75rem 1.5rem;
      box-shadow: var(--shadow-sm);
    }

    .bonus-tag {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--aurea);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.75rem;
      display: block;
    }

    .bonus-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--black);
      margin-bottom: 0.4rem;
    }

    .bonus-desc {
      font-size: 0.825rem;
      color: var(--slate);
      line-height: 1.5;
    }

    .principles-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      margin-top: 3.5rem;
    }

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

    .principle-box {
      border-top: 2px solid var(--black);
      padding-top: 1.5rem;
    }

    .principle-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--black);
      margin-bottom: 0.4rem;
    }

    .principle-desc {
      font-size: 0.88rem;
      color: var(--slate);
      line-height: 1.5;
    }

    /* ==========================================================================
       SECTION 14: FINAL CTA & FORM (Dark #0B0D0E Cinematográfico)
       ========================================================================== */
    .final-section {
      background-color: var(--brand-ink);
      color: var(--on-dark);
      padding-top: clamp(6rem, 11vw, 9rem);
      padding-bottom: clamp(5rem, 10vw, 8rem);
      position: relative;
      overflow: hidden;
    }

    .final-section h2, .final-section h3 {
      color: var(--on-dark);
    }

    .final-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
      align-items: flex-start;
    }

    .final-grid-form-only {
      max-width: 760px;
      margin-inline: auto;
    }

    @media (min-width: 1024px) {
      .final-grid {
        grid-template-columns: 1fr 1.05fr;
        gap: 5rem;
      }

      .final-grid-form-only {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
      }
    }

    .form-container {
      background: var(--carbon);
      border: 1px solid var(--border-dark);
      border-radius: var(--radius-lg);
      padding: clamp(2rem, 5vw, 3rem);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
      position: relative;
    }

    .form-title {
      font-size: 1.35rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .form-subtitle {
      font-size: 0.85rem;
      color: var(--slate-light);
      margin-bottom: 2rem;
    }

    .form-group {
      margin-bottom: 1.25rem;
    }

    .form-label {
      display: block;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--slate-light);
      margin-bottom: 0.4rem;
    }

    .form-input, .form-select, .form-textarea {
      width: 100%;
      background: var(--brand-ink);
      border: 1px solid var(--border-dark);
      border-radius: 10px;
      padding: 0.85rem 1rem;
      font-size: 0.9rem;
      color: var(--on-dark);
      transition: all 0.2s ease;
    }

    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--aurea);
      box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
    }

    .form-input::placeholder { color: #9CA3AF; }

    .form-options-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.6rem;
      margin-top: 0.5rem;
    }

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

    .form-checkbox-label {
      background: var(--brand-ink);
      border: 1px solid var(--border-dark);
      border-radius: 8px;
      padding: 0.6rem 0.8rem;
      font-size: 0.78rem;
      color: var(--slate-light);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .form-checkbox-label:hover {
      border-color: var(--aurea);
      color: var(--on-dark);
    }

    .form-checkbox-label input:checked + span {
      color: var(--aurea-light);
      font-weight: 600;
    }

    .form-checkbox-label input {
      accent-color: var(--aurea);
    }

    .form-success-banner {
      display: none;
      background: rgba(46, 125, 50, 0.15);
      border: 1px solid #2E7D32;
      border-radius: 12px;
      padding: 1.5rem;
      text-align: center;
      margin-top: 1rem;
    }

    .form-success-banner.active {
      display: block;
      animation: fadeIn 0.4s ease forwards;
    }

    /* ==========================================================================
       FOOTER
       ========================================================================== */
    .footer {
      background: var(--brand-ink);
      border-top: 1px solid var(--border-dark);
      padding: 3.5rem 0 2.5rem;
      color: var(--slate-light);
      font-size: 0.825rem;
    }

    .footer-inner {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }

    @media (min-width: 768px) {
      .footer-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      list-style: none;
    }

    .footer-links a:hover {
      color: var(--on-dark);
    }

    .footer-contact,
    .footer-socials {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .65rem 1rem;
      margin-top: .9rem;
    }

    .footer-contact a,
    .social-link {
      color: #D8DDE1;
      text-decoration: none;
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      gap: .42rem;
      min-height: 38px;
      padding: .5rem .7rem;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      transition: border-color .2s ease, color .2s ease, transform .2s ease;
    }

    .social-link:hover {
      color: var(--on-dark);
      border-color: rgba(201,169,110,.55);
      transform: translateY(-1px);
    }

    .social-link svg { width: 16px; height: 16px; flex: 0 0 auto; }

    .footer-support {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: center;
      gap: 1.5rem;
      margin-top: 2.2rem;
      padding-top: 1.6rem;
      border-top: 1px solid var(--border-dark);
    }

    .footer-support-copy { max-width: 68ch; color: #858D94; line-height: 1.55; }
    .footer-support-copy strong { display:block; color:#D8DDE1; margin-bottom:.25rem; }
    .partner-logos { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; }
    .partner-logo-link { display:block; padding:.55rem; border-radius:10px; background:#fff; }
    .partner-logo-link img { display:block; width:auto; height:34px; max-width:190px; object-fit:contain; }

    @media (max-width: 767px) {
      .footer-support { grid-template-columns: 1fr; }
      .partner-logo-link img { height:30px; max-width:150px; }
    }

    /* ==========================================================================
       REVEAL CLASSES & PREFERS-REDUCED-MOTION
       ========================================================================== */
    /* FAIL-OPEN: visible por defecto. El director de movimiento es el único
       propietario de opacity/transform en los componentes que mejora. */
    .reveal {
      opacity: 1;
      transform: none;
    }

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

    @media (prefers-reduced-motion: reduce) {
      html:not([data-motion="full"]) *, html:not([data-motion="full"]) *::before, html:not([data-motion="full"]) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      html:not([data-motion="full"]) .reveal {
        opacity: 1 !important;
        transform: none !important;
      }
      html:not([data-motion="full"]) .sticky-diagnostic-wrap,
      html:not([data-motion="full"]) .system-stepper-wrap,
      html:not([data-motion="full"]) .process-stepper-wrap,
      html:not([data-motion="full"]) .narrative-scene-wrap {
        height: auto !important;
      }
      html:not([data-motion="full"]) .sticky-diagnostic-container,
      html:not([data-motion="full"]) .system-stepper-sticky,
      html:not([data-motion="full"]) .process-stepper-sticky,
      html:not([data-motion="full"]) .narrative-scene-sticky {
        position: relative !important;
        height: auto !important;
      }
      html:not([data-motion="full"]) .diag-card-item,
      html:not([data-motion="full"]) .stepper-stage-item,
      html:not([data-motion="full"]) .process-card-morph {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        margin-bottom: 1.5rem !important;
      }
    }

    html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    html[data-motion="reduced"] .reveal { opacity: 1 !important; transform: none !important; }
    html[data-motion="reduced"] .sticky-diagnostic-wrap,
    html[data-motion="reduced"] .system-stepper-wrap,
    html[data-motion="reduced"] .process-stepper-wrap,
    html[data-motion="reduced"] .narrative-scene-wrap { height: auto !important; }
    html[data-motion="reduced"] .sticky-diagnostic-container,
    html[data-motion="reduced"] .system-stepper-sticky,
    html[data-motion="reduced"] .process-stepper-sticky,
    html[data-motion="reduced"] .narrative-scene-sticky { position: relative !important; height: auto !important; }
    html[data-motion="reduced"] .diag-card-item,
    html[data-motion="reduced"] .stepper-stage-item,
    html[data-motion="reduced"] .process-card-morph {
      position: relative !important;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto !important;
      margin-bottom: 1.5rem !important;
    }

    /* ==========================================================================
       INTERACTION & PRODUCTION UPGRADE
       ========================================================================== */
    :focus-visible { outline: 2px solid var(--aurea); outline-offset: 4px; }
    button { color: inherit; }

    .btn {
      isolation: isolate;
      overflow: hidden;
      transform: translate3d(0,0,0);
    }
    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.16) 46%, transparent 72%);
      transform: translate3d(-130%,0,0);
      transition: transform .65s cubic-bezier(.16,1,.3,1);
      pointer-events: none;
      z-index: -1;
    }
    .btn:hover::before { transform: translate3d(130%,0,0); }
    .btn:active { transform: translateY(0) scale(.985); }
    .btn[aria-busy="true"] { cursor: wait; opacity: .72; pointer-events: none; }

    .hero-wrapper::before {
      content: '';
      position: absolute;
      width: min(52vw,760px);
      aspect-ratio: 1;
      right: -16vw;
      top: -18vw;
      background: radial-gradient(circle, rgba(201,169,110,.13) 0%, rgba(201,169,110,.035) 44%, transparent 72%);
      filter: blur(12px);
      pointer-events: none;
    }
    @media (min-width:1100px) {
      .hero-wrapper .h1-hero {
        font-size: clamp(3rem,5.4vw,5.15rem);
        line-height: 1.01;
        letter-spacing: -.05em;
        text-wrap: balance;
      }
    }

    .scroll-cue {
      position: absolute;
      left: clamp(1.25rem,4vw,2.5rem);
      bottom: .5rem;
      display: inline-flex;
      align-items: center;
      gap: .85rem;
      color: var(--slate);
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: .66rem;
      font-weight: 700;
      z-index: 20;
    }
    .scroll-cue-line {
      width: 58px;
      height: 1px;
      overflow: hidden;
      background: rgba(11,13,14,.14);
      position: relative;
    }
    .scroll-cue-line span {
      position: absolute;
      inset: 0;
      background: var(--aurea);
      transform: translate3d(-100%,0,0);
      animation: cueLine 2.3s cubic-bezier(.16,1,.3,1) infinite;
    }
    @keyframes cueLine {
      0% { transform: translate3d(-100%,0,0); }
      48% { transform: translate3d(0,0,0); }
      100% { transform: translate3d(100%,0,0); }
    }

    .form-consent {
      display: flex;
      align-items: flex-start;
      gap: .7rem;
      color: var(--slate-light);
      font-size: .76rem;
      line-height: 1.5;
      margin-top: .4rem;
      cursor: pointer;
    }
    .form-consent input {
      margin-top: .2rem;
      accent-color: var(--aurea);
      inline-size: 16px;
      block-size: 16px;
      flex: 0 0 auto;
    }
    .legal-inline {
      appearance: none;
      padding: 0;
      background: transparent;
      border: 0;
      color: var(--aurea-light);
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }
    .form-privacy-note {
      font-size: .72rem;
      color: #AEB5BC;
      text-align: center;
      margin-top: .9rem;
      line-height: 1.45;
    }
    .form-status {
      margin-top: .9rem;
      border-radius: 10px;
      padding: .85rem 1rem;
      font-size: .78rem;
      line-height: 1.5;
      border: 1px solid var(--border-dark);
      background: rgba(255,255,255,.035);
      color: #D1D5DB;
    }
    .form-status.is-error {
      color: #FCA5A5;
      border-color: rgba(248,113,113,.28);
      background: rgba(127,29,29,.12);
    }
    .form-status.is-info {
      color: #E7E0D2;
      border-color: rgba(201,169,110,.28);
      background: rgba(201,169,110,.08);
    }

    .form-success-banner {
      background: linear-gradient(180deg, rgba(201,169,110,.10), rgba(255,255,255,.025));
      border: 1px solid rgba(201,169,110,.30);
      text-align: left;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }

    .result-kicker {
      display: inline-block;
      margin-bottom: .65rem;
      color: var(--aurea);
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .result-title { color: var(--on-dark); font-size: 1.25rem; margin-bottom: .65rem; }
    .result-copy { color: #C3C8CD; font-size: .86rem; line-height: 1.6; max-width: 52ch; }

    .lead-actions {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: .7rem;
      margin-top: 1.35rem;
    }
    .lead-action {
      appearance: none;
      min-height: 42px;
      border: 1px solid var(--border-dark);
      background: var(--brand-ink);
      color: #D8DDE1;
      border-radius: 10px;
      padding: .7rem .85rem;
      font-size: .77rem;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      transition: transform .2s ease,border-color .2s ease,background .2s ease;
    }
    .lead-action:hover { border-color: rgba(201,169,110,.6); background: #161A1D; transform: translateY(-1px); }
    .lead-action-primary { background: var(--aurea); color: var(--black); border-color: var(--aurea); }
    .form-reset-btn {
      appearance: none;
      margin-top: 1.15rem;
      padding: 0;
      background: transparent;
      border: 0;
      color: var(--slate-light);
      font-size: .75rem;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .footer-link-button {
      appearance: none;
      border: 0;
      padding: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
      transition: color .2s ease;
    }
    .footer-link-button:hover { color: var(--aurea-light); }

    .legal-dialog {
      width: min(720px,calc(100vw - 2rem));
      max-height: min(78vh,760px);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 24px;
      background: #111416;
      color: var(--on-dark);
      padding: 0;
      box-shadow: 0 32px 100px rgba(0,0,0,.45);
      overflow: hidden;
    }
    .legal-dialog::backdrop { background: rgba(7,8,9,.72); backdrop-filter: blur(8px); }
    .legal-dialog-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.7rem 1.7rem 1rem;
      border-bottom: 1px solid var(--border-dark);
    }
    .legal-dialog-head h2 { color: var(--on-dark); font-size: clamp(1.35rem,3vw,2rem); }
    .dialog-close {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #1A1F22;
      color: var(--on-dark);
      border: 1px solid var(--border-dark);
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
    }
    .legal-dialog-body {
      padding: 1.5rem 1.7rem 1.8rem;
      overflow: auto;
      max-height: calc(78vh - 100px);
      color: #C3C8CD;
      font-size: .9rem;
      line-height: 1.7;
    }
    .legal-dialog-body h3 { color: var(--on-dark); font-size: 1rem; margin: 1.35rem 0 .35rem; }
    .legal-dialog-body p + p { margin-top: .8rem; }
    .legal-dialog-body table { width:100%; margin:1rem 0; border-collapse:collapse; font-size:.76rem; }
    .legal-dialog-body th, .legal-dialog-body td { padding:.65rem; border:1px solid rgba(255,255,255,.13); text-align:left; vertical-align:top; }
    .legal-dialog-body th { color:var(--on-dark); background:rgba(255,255,255,.06); }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 1.5rem;
      transform: translate3d(-50%,18px,0);
      opacity: 0;
      pointer-events: none;
      z-index: 1500;
      background: rgba(17,20,22,.94);
      color: var(--on-dark);
      border: 1px solid var(--border-dark);
      border-radius: 999px;
      padding: .72rem 1rem;
      font-size: .78rem;
      font-weight: 600;
      box-shadow: 0 16px 44px rgba(0,0,0,.22);
      transition: opacity .25s ease,transform .25s ease;
      white-space: nowrap;
      max-width: calc(100vw - 2rem);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .toast.active { opacity: 1; transform: translate3d(-50%,0,0); }

    .scroll-top-btn {
      position: fixed;
      right: 1.15rem;
      bottom: 5.25rem;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(11,13,14,.9);
      color: var(--on-dark);
      box-shadow: 0 10px 30px rgba(0,0,0,.18);
      cursor: pointer;
      z-index: 850;
      opacity: 0;
      transform: translate3d(0,12px,0) scale(.92);
      pointer-events: none;
      transition: opacity .25s ease,transform .25s ease;
      backdrop-filter: blur(10px);
    }
    .scroll-top-btn.visible { opacity: 1; transform: translate3d(0,0,0) scale(1); pointer-events: auto; }

    .cursor-glow {
      position: fixed;
      left: 0;
      top: 0;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      transform: translate3d(-50%,-50%,0);
      background: radial-gradient(circle,rgba(201,169,110,.105) 0%,rgba(201,169,110,.045) 36%,transparent 70%);
      transition: opacity .25s ease;
      mix-blend-mode: multiply;
    }
    @media (pointer:fine) and (min-width:900px) { .cursor-glow.active { opacity: 1; } }

    @media (max-width:899px) {
      .scroll-cue { position: relative; left: auto; bottom: auto; margin-top: 1.25rem; }
      .lead-actions { grid-template-columns: 1fr; }
      .cursor-glow { display: none; }
    }
    @media (max-width:640px) {
      .form-container { padding: 1.4rem; }
      .toast { border-radius: 14px; white-space: normal; text-align: center; }
    }
    @media (prefers-reduced-motion:reduce) {
      html:not([data-motion="full"]) .scroll-cue-line span { animation: none !important; transform: none !important; }
      html:not([data-motion="full"]) .cursor-glow { display: none !important; }
    }
    html[data-motion="reduced"] .scroll-cue-line span { animation: none !important; transform: none !important; }
    html[data-motion="reduced"] .cursor-glow { display: none !important; }


    /* ==========================================================================
       DESKTOP MOTION DIRECTOR — stronger cinematic treatment for laptop/desktop
       ========================================================================== */
    @media (min-width:900px) {
      .hero-wrapper {
        min-height: 112svh;
      }
      .hero-grid {
        perspective: 1500px;
        transform-style: preserve-3d;
      }
      .hero-text-col, .mockup-stage, .browser-frame, .floating-card,
      .system-card, .intl-visual-card, .comp-col, .process-card-morph {
        transform-style: preserve-3d;
        backface-visibility: hidden;
      }
      .hero-wrapper::before {
        content: "";
        position: absolute;
        width: min(48vw,760px);
        aspect-ratio: 1;
        right: -12vw;
        top: 7vh;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle, rgba(201,169,110,.18) 0%, rgba(201,169,110,.055) 33%, transparent 70%);
        filter: blur(10px);
        opacity: .75;
      }
      .hero-wrapper::after {
        content:"";
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        height:18vh;
        pointer-events:none;
        background:linear-gradient(to bottom, transparent, rgba(255,255,255,.72));
        z-index:0;
      }
      .hero-wrapper .container { z-index:2; }
      .mockup-stage { transform-origin: 50% 50%; }
      .browser-frame { box-shadow: 0 36px 90px -26px rgba(11,13,14,.24), 0 0 0 1px rgba(255,255,255,.8) inset; }
      .floating-card { box-shadow: 0 22px 50px rgba(0,0,0,.11); }

      .pos-editorial-section { overflow:hidden; position:relative; }
      .pos-editorial-section::before {
        content:"AUREA / AXARQUÍA / FISIOTERAPIA";
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        font-family:var(--font-display);
        font-size:clamp(4rem,10vw,11rem);
        font-weight:800;
        letter-spacing:-.06em;
        white-space:nowrap;
        color:rgba(11,13,14,.025);
        pointer-events:none;
      }
      .pos-editorial-section .container { z-index:2; }

      .motion-growth .system-card {
        will-change: transform, opacity;
        transform-origin: 50% 100%;
      }
      .motion-diagnostic .diag-card-item,
      .motion-system .stepper-stage-item,
      .motion-process .process-card-morph {
        will-change: transform, opacity, filter;
      }
      .motion-growth.growth-section::before {
        content:"";
        position:absolute;
        inset:10% 6%;
        border-radius:60px;
        pointer-events:none;
        background:
          radial-gradient(circle at 30% 30%,rgba(201,169,110,.07),transparent 35%),
          radial-gradient(circle at 75% 70%,rgba(159,181,165,.08),transparent 34%);
        filter:blur(10px);
      }
      .motion-international .intl-box,
      .motion-offer .offer-card-main,
      .motion-final .form-container {
        will-change: transform, opacity;
      }
    }

  
    .whatsapp-live {
      position: fixed;
      right: clamp(1rem, 2.5vw, 1.75rem);
      bottom: clamp(1rem, 2.5vw, 1.75rem);
      z-index: 950;
      display: inline-flex;
      align-items: center;
      gap: .65rem;
      min-height: 50px;
      padding: .8rem 1rem;
      border-radius: 999px;
      background: #111416;
      color: #fff;
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 16px 35px rgba(0,0,0,.18);
      font-size: .86rem;
      font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .whatsapp-live:hover {
      transform: translateY(-2px);
      background: #0B0D0E;
      box-shadow: 0 20px 42px rgba(0,0,0,.24);
    }
    .whatsapp-live svg { width: 19px; height: 19px; }
    @media (max-width: 520px) {
      .whatsapp-live span { display: none; }
      .whatsapp-live { width: 52px; height: 52px; padding: 0; justify-content: center; }
    }

    /* ===== AUREA ASSISTANT + BOOKING ===== */
    .aurea-ai-launcher {
      position: fixed;
      left: clamp(1rem, 2.4vw, 1.7rem);
      bottom: clamp(1rem, 2.4vw, 1.7rem);
      z-index: 980;
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      padding: .75rem 1rem;
      min-height: 52px;
      border: 1px solid rgba(17,20,22,.12);
      border-radius: 999px;
      background: rgba(255,255,255,.94);
      color: #111416;
      box-shadow: 0 18px 45px rgba(17,20,22,.17);
      backdrop-filter: blur(14px);
      font: inherit;
      font-size: .86rem;
      font-weight: 750;
      cursor: pointer;
      transition: transform .22s ease, box-shadow .22s ease;
    }
    .aurea-ai-launcher:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(17,20,22,.22); }
    .aurea-ai-dot { width: 10px; height: 10px; border-radius: 50%; background: #C9A96E; box-shadow: 0 0 0 5px rgba(201,169,110,.14); }

    .aurea-chat {
      position: fixed;
      left: clamp(1rem, 2.4vw, 1.7rem);
      bottom: 5.5rem;
      z-index: 985;
      width: min(390px, calc(100vw - 2rem));
      height: min(600px, calc(100vh - 8rem));
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(17,20,22,.12);
      border-radius: 24px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 28px 80px rgba(17,20,22,.24);
      overflow: hidden;
      opacity: 0;
      transform: translateY(16px) scale(.98);
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease;
    }
    .aurea-chat.open { opacity: 1; transform: none; pointer-events: auto; }
    .aurea-chat-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1rem .9rem; border-bottom:1px solid rgba(17,20,22,.08); }
    .aurea-chat-brand { display:flex; align-items:center; gap:.72rem; }
    .aurea-chat-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#111416; color:#fff; font-weight:800; }
    .aurea-chat-title { margin:0; font-size:.95rem; font-weight:800; }
    .aurea-chat-status { margin:.1rem 0 0; color:#6B7074; font-size:.72rem; }
    .aurea-chat-close { border:0; background:transparent; font-size:1.25rem; cursor:pointer; color:#555; }
    .aurea-chat-messages { flex:1; overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:.75rem; }
    .chat-msg { max-width:88%; padding:.78rem .9rem; border-radius:16px; font-size:.86rem; line-height:1.5; white-space:pre-wrap; }
    .chat-msg.bot { align-self:flex-start; background:#F3F2EE; color:#17191B; border-bottom-left-radius:5px; }
    .chat-msg.user { align-self:flex-end; background:#111416; color:#fff; border-bottom-right-radius:5px; }
    .chat-msg.typing { color:#777; }
    .aurea-chat-quick { display:flex; gap:.45rem; overflow:auto; padding:0 1rem .75rem; }
    .aurea-chat-chip { flex:0 0 auto; border:1px solid rgba(17,20,22,.12); background:#fff; border-radius:999px; padding:.5rem .7rem; font:inherit; font-size:.72rem; cursor:pointer; }
    .aurea-chat-compose { display:flex; gap:.55rem; padding:.8rem; border-top:1px solid rgba(17,20,22,.08); }
    .aurea-chat-input { flex:1; min-width:0; border:1px solid rgba(17,20,22,.14); border-radius:14px; padding:.75rem .8rem; font:inherit; outline:none; }
    .aurea-chat-input:focus-visible { outline:2px solid #C9A96E; outline-offset:2px; border-color:#C9A96E; }
    .aurea-chat-send { border:0; border-radius:14px; padding:.7rem .9rem; background:#111416; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
    .aurea-chat-book { margin:0 .8rem .8rem; border:0; border-radius:14px; padding:.78rem 1rem; background:#C9A96E; color:#111416; font:inherit; font-weight:800; cursor:pointer; }

    .booking-overlay {
      position: fixed; inset: 0; z-index: 1200; display:grid; place-items:center;
      padding:1rem; background:rgba(10,12,13,.62); backdrop-filter:blur(10px);
      opacity:0; pointer-events:none; transition:opacity .2s ease;
    }
    .booking-overlay.open { opacity:1; pointer-events:auto; }
    .booking-card { width:min(600px, 100%); max-height:92vh; overflow:auto; border-radius:26px; padding:1.35rem; background:#fff; box-shadow:0 30px 100px rgba(0,0,0,.28); }
    .booking-top { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
    .booking-top h3 { margin:.1rem 0 .35rem; font-size:clamp(1.45rem,4vw,2rem); }
    .booking-top p { margin:0; color:#666; font-size:.88rem; }
    .booking-close { border:0; background:#F0F0ED; width:38px; height:38px; border-radius:50%; font-size:1.2rem; cursor:pointer; }
    .booking-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1.2rem; }
    .booking-field { display:flex; flex-direction:column; gap:.35rem; }
    .booking-field.full { grid-column:1/-1; }
    .booking-field label { font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#555; }
    .booking-field input { border:1px solid rgba(17,20,22,.14); border-radius:13px; padding:.8rem; font:inherit; }
    .booking-submit { width:100%; margin-top:1rem; border:0; border-radius:14px; padding:.9rem 1rem; background:#111416; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
    .booking-note { margin:.75rem 0 0; color:#6A6F73; font-size:.75rem; line-height:1.45; }
    .booking-result { display:none; margin-top:1rem; padding:.9rem 1rem; border-radius:14px; background:#F2F5EF; font-size:.86rem; line-height:1.5; }
    .booking-result.show { display:block; }

    @media (max-width:640px) {
      .aurea-ai-launcher span.label { display:none; }
      .aurea-ai-launcher { width:52px; height:52px; justify-content:center; padding:0; }
      .booking-grid { grid-template-columns:1fr; }
      .booking-field.full { grid-column:auto; }
    }

    /* Consentimiento sin dark patterns: acciones equivalentes y accesibles. */
    .cookie-banner {
      position:fixed;
      left:50%;
      bottom:1rem;
      z-index:1300;
      width:min(720px,calc(100vw - 2rem));
      transform:translateX(-50%);
      padding:1rem;
      border:1px solid rgba(201,169,110,.34);
      border-radius:18px;
      background:rgba(17,20,22,.98);
      color:#F7F7F5;
      box-shadow:0 24px 70px rgba(0,0,0,.32);
    }
    .cookie-banner[hidden] { display:none; }

    /* El banner de cookies (z-index 1300) puede solapar el lanzador del chat,
       el propio panel de chat y el botón de WhatsApp mientras está visible.
       En vez de adivinar una altura fija (frágil si cambia el texto/idioma),
       JS mide la altura REAL del banner y la expone en --cookie-banner-offset;
       aquí solo se consume esa variable para reposicionar hacia arriba. */
    :root { --cookie-banner-offset: 0px; }
    body.cookie-banner-open .aurea-ai-launcher,
    body.cookie-banner-open .whatsapp-live {
      bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + var(--cookie-banner-offset));
    }
    body.cookie-banner-open .aurea-chat {
      bottom: calc(5.5rem + var(--cookie-banner-offset));
      height: min(600px, calc(100vh - 8rem - var(--cookie-banner-offset)));
    }
    .cookie-banner h2 { margin:0 0 .35rem; font-size:1rem; color:#fff; }
    .cookie-banner p { margin:0; color:#C3C8CD; font-size:.8rem; line-height:1.5; }
    .cookie-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin-top:1rem; }
    .cookie-button {
      min-height:42px;
      border:1px solid rgba(255,255,255,.22);
      border-radius:10px;
      background:#202529;
      color:#fff;
      font:inherit;
      font-size:.8rem;
      font-weight:750;
      cursor:pointer;
    }
    .cookie-button:hover { border-color:#C9A96E; }
    .cookie-button:focus-visible,
    .cookie-panel input:focus-visible { outline:2px solid #C9A96E; outline-offset:3px; }
    .cookie-panel { display:none; margin-top:.9rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.12); }
    .cookie-panel.open { display:block; }
    .cookie-option { display:flex; align-items:flex-start; gap:.65rem; color:#E5E7EB; font-size:.82rem; line-height:1.45; }
    .cookie-option input { margin-top:.16rem; accent-color:#C9A96E; }
    .cookie-save { margin-top:.75rem; width:100%; }

    /* Evita que los controles flotantes oculten los logos y enlaces del footer. */
    body.floating-controls-footer-safe .whatsapp-live { bottom:calc(clamp(1rem,2.5vw,1.75rem) + 7rem); }
    body.floating-controls-footer-safe .aurea-ai-launcher { bottom:calc(clamp(1rem,2.4vw,1.7rem) + 7rem); }
    body.floating-controls-footer-safe .aurea-chat { bottom:12.5rem; height:min(600px,calc(100vh - 15rem)); }
    @media (max-width:640px) {
      .cookie-actions { grid-template-columns:1fr; }
      .aurea-ai-launcher { left:auto; right:1rem; bottom:5.25rem; }
      body.cookie-banner-open .aurea-ai-launcher { bottom:calc(5.25rem + var(--cookie-banner-offset)); }
      body.floating-controls-footer-safe .whatsapp-live { bottom:calc(1rem + 5.25rem); }
      body.floating-controls-footer-safe .aurea-ai-launcher { bottom:calc(5.25rem + 5.25rem); }
      body.floating-controls-footer-safe .aurea-chat { bottom:9.75rem; height:calc(100vh - 12rem); }
    }


    /* ===== MOBILE STABILITY =====
       Keeps the old Aurea motion language while avoiding persistent GPU layers on phones. */
    @media (max-width: 899px) {
      .hero-text-col,
      .mockup-stage,
      .browser-frame,
      .floating-card,
      .system-card,
      .intl-visual-card,
      .comp-col,
      .process-card-morph,
      .form-container {
        will-change: auto !important;
      }
      .reveal {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
      }
    }

/* Static declarations extracted from HTML to keep style-src strict. */
.u-inline-001 { margin-bottom: 2.5rem; }
.u-inline-002 { margin-top: 2rem; }
.u-inline-003 { width: 100%; }
.u-inline-004 { font-size: 0.75rem; color: var(--slate); text-align: center; margin-top: 0.8rem; }
.u-inline-005 { display: flex; align-items: center; gap: 1rem; }
.u-inline-006 { font-size: 0.7rem; color: var(--slate); font-weight: normal; }
.u-inline-007 { transition-delay: 0.15s; }
.u-inline-008 { max-width: 760px; text-align: center; margin: 0 auto; }
.u-inline-009 { margin: 0 auto; }
.u-inline-010 { transition-delay: 0.05s; }
.u-inline-011 { transition-delay: 0.1s; }
.u-inline-012 { transition-delay: 0.2s; }
.u-inline-013 { transition-delay: 0.25s; }
.u-inline-014 { transition-delay: 0.3s; }
.u-inline-015 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.u-inline-016 { font-size: 1rem; margin-top: 1rem; }
.u-inline-017 { font-weight: 700; margin-bottom: 0.35rem; color: var(--black); }
.u-inline-018 { font-size: 0.8rem; color: var(--slate); line-height: 1.5; }
.u-inline-019 { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--slate); }
.u-inline-020 { font-weight: 700; color: var(--aurea); }
.u-inline-021 { text-align: center; max-width: 700px; margin: 0 auto; }
.u-inline-022 { margin-bottom: 0.5rem; }
.u-inline-023 { color: var(--slate); font-size: 0.95rem; line-height: 1.55; }
.u-inline-024 { max-width: 720px; }
.u-inline-025 { font-size: clamp(2rem, 4vw, 3.2rem); }
.u-inline-026 { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.u-inline-027 { padding: 1rem 2rem; font-size: 1rem; }
.u-inline-028 { font-size: 0.85rem; color: var(--slate); font-weight: 500; }
.u-inline-029 { margin-top: 4.5rem; }
.u-inline-030 { text-align: center; max-width: 680px; margin: 0 auto; }
.u-inline-031 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.u-inline-032 { color: var(--on-dark); margin-bottom: 1.25rem; }
.u-inline-033 { color: var(--slate-light); font-size: 1.15rem; margin-bottom: 2.5rem; }
.u-inline-034 { padding: 1.5rem; background: var(--carbon); border: 1px solid var(--border-dark); border-radius: var(--radius-md); max-width: 440px; }
.u-inline-035 { font-size: 0.85rem; color: var(--slate-light); line-height: 1.5; }
.u-inline-036 { color: var(--on-dark); display: block; margin-bottom: 0.25rem; }
.u-inline-037 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.u-inline-038 { position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden; }
.u-inline-039 { margin-top: 1.5rem; }
.u-inline-040 { width: 100%; padding: 1rem; }
.u-inline-041 { margin-bottom: 0.4rem; }
.u-inline-042 { color: var(--on-dark); }
.u-inline-043 { font-size: 0.8rem; color: var(--slate-light); }
.u-inline-044 { font-size: 0.75rem; color: #9CA3AF; }
.u-inline-045 { color:#9CA3AF;margin-top:1rem; }

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

/* ========================================================================== */
/* ACCESSIBLE COLOR THEME                                                     */
/* ========================================================================== */
.theme-toggle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: color .28s ease, background-color .28s ease, border-color .28s ease, transform .28s ease;
}

.theme-toggle:hover { transform: translateY(-1px); border-color: var(--aurea); }
.theme-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--aurea) 62%, transparent); outline-offset: 3px; }
.theme-icon { grid-area: 1 / 1; transition: opacity .25s ease, transform .28s ease; }
.theme-icon-sun { opacity: 0; transform: rotate(-35deg) scale(.72); }
.theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-icon-moon { opacity: 0; transform: rotate(28deg) scale(.72); }

html[data-theme="dark"] .header.scrolled {
  background: rgba(7, 17, 31, .88);
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: 0 5px 24px rgba(0, 0, 0, .25);
}

html[data-theme="dark"] .mobile-drawer,
html[data-theme="dark"] .browser-frame,
html[data-theme="dark"] .browser-body,
html[data-theme="dark"] .floating-card,
html[data-theme="dark"] .system-card,
html[data-theme="dark"] .comparison-card,
html[data-theme="dark"] .process-card-morph,
html[data-theme="dark"] .bonus-card,
html[data-theme="dark"] .form-container,
html[data-theme="dark"] .offer-card-main,
html[data-theme="dark"] .aurea-ai-launcher,
html[data-theme="dark"] .aurea-chat,
html[data-theme="dark"] .booking-card {
  background-color: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}

html[data-theme="dark"] .ambient-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
}

html[data-theme="dark"] .browser-header,
html[data-theme="dark"] .browser-address,
html[data-theme="dark"] .browser-sidebar,
html[data-theme="dark"] .mini-card,
html[data-theme="dark"] .chat-msg.bot,
html[data-theme="dark"] .aurea-chat-chip,
html[data-theme="dark"] .booking-close,
html[data-theme="dark"] .booking-result {
  background: var(--surface-alt);
  color: var(--text-primary);
  border-color: var(--border);
}

html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] .booking-field input,
html[data-theme="dark"] .aurea-chat-input {
  background: #0D1A2D;
  color: var(--text-primary);
  border-color: var(--border);
}

html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] .form-textarea::placeholder,
html[data-theme="dark"] .aurea-chat-input::placeholder { color: #8792A4; }

html[data-theme="dark"] .form-checkbox-label,
html[data-theme="dark"] .hero-pill,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .lead-action {
  background: color-mix(in srgb, var(--surface-alt) 86%, transparent);
  color: var(--text-primary);
  border-color: var(--border);
}

html[data-theme="dark"] .btn-aurea,
html[data-theme="dark"] .lead-action-primary,
html[data-theme="dark"] .aurea-chat-book { color: var(--on-gold); }

html[data-theme="dark"] .btn-secondary {
  color: var(--text-primary);
  background: transparent;
  border-color: var(--border);
}

html[data-theme="dark"] .btn-secondary:hover { background: var(--surface-alt); }
html[data-theme="dark"] .mobile-menu-btn span { background-color: var(--text-primary); }
html[data-theme="dark"] .legal-inline { color: var(--aurea); }
html[data-theme="dark"] .u-inline-045 { color: var(--text-secondary); }

html[data-theme="dark"] .comp-before,
html[data-theme="dark"] .comp-after {
  background: var(--surface-alt);
  border-color: var(--border);
}

html[data-theme="dark"] .comp-badge-before {
  background: var(--surface);
  color: var(--text-primary);
}

html[data-theme="dark"] .comp-item-before {
  color: var(--text-secondary);
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .gold-highlight,
html[data-theme="light"] .pos-eyebrow-clean,
html[data-theme="light"] .lateral-step,
html[data-theme="light"] .mini-tag,
html[data-theme="light"] .diagnostic-counter,
html[data-theme="light"] .diag-badge-num,
html[data-theme="light"] .system-card-num,
html[data-theme="light"] .stepper-nav-pill.active,
html[data-theme="light"] .stepper-components-tag,
html[data-theme="light"] .comp-icon-check,
html[data-theme="light"] .check-icon-circle,
html[data-theme="light"] .bonus-tag,
html[data-theme="light"] .u-inline-020 {
  color: var(--accent-text);
}

html[data-theme="light"] .narrative-scene-wrap .gold-highlight,
html[data-theme="light"] .final-section .eyebrow,
html[data-theme="light"] .comp-badge-after,
html[data-theme="light"] .form-container .result-kicker {
  color: var(--accent-on-dark);
}

.header,
.mobile-drawer,
.browser-frame,
.floating-card,
.system-card,
.comparison-card,
.process-card-morph,
.bonus-card,
.form-container,
.offer-card-main,
.aurea-ai-launcher,
.aurea-chat,
.booking-card,
.form-input,
.form-textarea,
.booking-field input {
  transition-property: background-color, color, border-color, box-shadow, transform;
  transition-duration: .3s;
  transition-timing-function: ease;
}

@media (max-width: 639px) {
  .theme-toggle { width: 44px; height: 44px; flex-basis: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-icon,
  .header,
  .mobile-drawer,
  .browser-frame,
  .floating-card,
  .system-card,
  .comparison-card,
  .process-card-morph,
  .bonus-card,
  .form-container,
  .offer-card-main,
  .aurea-ai-launcher,
  .aurea-chat,
  .booking-card,
  .form-input,
  .form-textarea,
  .booking-field input { transition-duration: 0.01ms !important; }
}