/* ════════════════════════════════════
       NAVBAR
    ════════════════════════════════════ */
    header {
      position: fixed;
      inset: 0 0 auto 0;
      height: 60px;
      z-index: 200;
      background: rgba(247, 244, 239, 0.88);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }
    .nav {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .nav-logo {
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: -0.05em;
      color: var(--text-1);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .nav-logo img {
      display: block;
      width: auto;
      height: 38px;
    }
    .footer-brand .nav-logo img {
      height: 30px;
    }
    .nav-links {
      display: flex;
      gap: 1.75rem;
    }
    .nav-links a {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-2);
      transition: color 0.15s;
    }
    .nav-links a:hover { color: var(--text-1); }
    .nav-cta { display: flex; gap: 0.75rem; align-items: center; }

    /* ════════════════════════════════════
       HERO
    ════════════════════════════════════ */
    .hero {
      padding-top: calc(60px + 5.5rem);
      padding-bottom: 5.5rem;
      text-align: center;
      position: relative;
      isolation: isolate;
    }
    .hero-glow {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: min(700px, 100%);
      height: 520px;
      background: radial-gradient(ellipse at top, rgba(110,33,55,0.10), transparent 65%);
      pointer-events: none;
      z-index: -1;
    }
    .hero-inner {
      max-width: 700px;
      margin-inline: auto;
    }
    .hero-inner h1 { margin-bottom: 1.25rem; }
    .hero-inner .lead { margin-inline: auto; margin-bottom: 2.25rem; }
    .hero-actions {
      display: flex;
      gap: 0.75rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 4rem;
    }
    /* Proof row */
    .hero-proof {
      display: flex;
      gap: 2rem;
      justify-content: center;
      flex-wrap: wrap;
      padding-top: 3rem;
      border-top: 1px solid var(--border);
    }
    .proof-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;
    }
    .proof-item strong {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-1);
    }
    .proof-item span {
      font-size: 0.78rem;
      color: var(--text-3);
    }
    /* ════════════════════════════════════
       HERO MOCKUP — Premium CSS UI
    ════════════════════════════════════ */
    .hero-mockup {
      margin-top: 4rem;
      width: 100%;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-bottom: none;
      overflow: hidden;
      box-shadow:
        0 0 0 1px var(--border),
        0 20px 40px rgba(0,0,0,0.06);
    }
    .mockup-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.85rem 1.25rem;
      border-bottom: 1px solid var(--border);
      background: var(--surface-2);
    }
    .mockup-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--border-bright);
    }
    .mockup-url {
      flex: 1;
      height: 24px;
      background: var(--border);
      border-radius: 4px;
      max-width: 240px;
      margin-inline: auto;
      opacity: 0.5;
    }
    /* App chrome layout */
    .mockup-body {
      display: grid;
      grid-template-columns: 200px 1fr 240px;
      height: 460px;
    }
    /* Sidebar */
    .mock-sidebar {
      border-right: 1px solid var(--border);
      padding: 1.25rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      gap: 0.4rem;
    }
    .mock-sidebar-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-3);
      padding: 0.5rem 0.5rem 0.3rem;
      margin-top: 0.5rem;
    }
    .mock-sidebar-label:first-child { margin-top: 0; }
    .mock-sidebar-item {
      height: 30px;
      border-radius: 5px;
      background: transparent;
      display: flex;
      align-items: center;
      padding: 0 0.625rem;
      gap: 0.5rem;
      font-size: 0.72rem;
      color: var(--text-3);
      font-weight: 500;
    }
    .mock-sidebar-item.active {
      background: var(--accent-light);
      border: 1px solid var(--accent-ring);
      color: var(--accent);
      font-weight: 600;
    }
    .mock-sidebar-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.5;
    }
    .mock-sidebar-item.active .mock-sidebar-dot { opacity: 1; }
    /* Main area */
    .mock-main {
      padding: 1.5rem 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      background: var(--bg);
    }
    .mock-page-title {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-1);
      letter-spacing: -0.02em;
      margin-bottom: 0.25rem;
    }
    .mock-stat-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.75rem;
    }
    .mock-stat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 0.85rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }
    .mock-stat-label {
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .mock-stat-value {
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--text-1);
    }
    .mock-stat-delta {
      font-size: 0.6rem;
      color: #22c55e;
      font-weight: 600;
    }
    .mock-stat.neg .mock-stat-delta { color: #ef4444; }
    .mock-chart {
      flex: 1;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      position: relative;
      overflow: hidden;
      padding: 1rem 1rem 0;
    }
    .mock-chart-title {
      font-size: 0.65rem;
      font-weight: 600;
      color: var(--text-2);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: 0.75rem;
    }
    .mock-chart-bars {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 80px;
      padding-bottom: 0;
    }
    .mock-chart-bar {
      flex: 1;
      background: var(--border);
      border-radius: 3px 3px 0 0;
    }
    .mock-chart-bar.hi { background: var(--accent); opacity: 0.7; }
    .mock-chart-bar.md { background: var(--accent); opacity: 0.4; }
    .mock-table-header {
      display: grid;
      grid-template-columns: 1fr 1fr 80px 60px;
      gap: 0.5rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border);
    }
    .mock-table-cell {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .mock-table-rows { display: flex; flex-direction: column; gap: 0; }
    .mock-table-row {
      display: grid;
      grid-template-columns: 1fr 1fr 80px 60px;
      gap: 0.5rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border);
      align-items: center;
    }
    .mock-table-val {
      height: 10px;
      border-radius: 3px;
      background: var(--border-bright);
    }
    .mock-table-val.w-full { width: 85%; }
    .mock-table-val.w-half { width: 55%; }
    .mock-table-val.w-sm   { width: 70%; }
    .mock-badge {
      height: 16px;
      width: 48px;
      border-radius: 99px;
      background: rgba(34,197,94,0.15);
      border: 1px solid rgba(34,197,94,0.25);
    }
    .mock-badge.yellow {
      background: rgba(234,179,8,0.15);
      border-color: rgba(234,179,8,0.25);
    }
    /* Right panel */
    .mock-right {
      border-left: 1px solid var(--border);
      padding: 1.25rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      background: var(--surface-2);
    }
    .mock-right-title {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      margin-bottom: 0.25rem;
    }
    .mock-alert {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 0.6rem 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .mock-alert.warn {
      border-color: rgba(234,179,8,0.3);
      background: rgba(234,179,8,0.05);
    }
    .mock-alert.ok {
      border-color: rgba(34,197,94,0.25);
      background: rgba(34,197,94,0.05);
    }
    .mock-alert-line {
      height: 8px;
      border-radius: 3px;
      background: var(--border-bright);
    }
    .mock-alert-line.short { width: 60%; }
    .mock-alert-line.medium { width: 80%; }
    .mock-alert-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: rgba(234,179,8,0.8);
      margin-bottom: 0.15rem;
    }
    .mock-alert.ok .mock-alert-dot { background: rgba(34,197,94,0.8); }
    .hero-mockup {
      border-radius: 28px;
      border-bottom: 1px solid var(--border);
      background:
        linear-gradient(180deg, rgba(255,252,248,0.92), rgba(240,235,227,0.82));
      overflow: visible;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.75) inset,
        0 30px 80px rgba(31,23,32,0.14),
        0 0 0 1px rgba(110,33,55,0.05);
    }
    .hero-screen-stage {
      position: relative;
      padding: 1.15rem;
    }
    .mockup-body {
      display: block;
      height: auto;
    }
    .mock-sidebar,
    .mock-right {
      display: none !important;
    }
    .mock-main {
      padding: 0;
      background: transparent !important;
    }
    .mock-main > :not(.hero-screen-stage) {
      display: none !important;
    }
    .hero-focus-pill {
      position: relative;
      z-index: 5;
      display: inline-block;
      padding: 0;
      color: rgba(110, 33, 55, 0.82);
      font-size: 0.71rem;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      background: none;
      border: 0;
      border-radius: 0;
      backdrop-filter: none;
      box-shadow: none;
      text-shadow: 0 1px 0 rgba(255,255,255,0.55);
    }
    .hero-topbar {
      position: absolute;
      top: 0.9rem;
      left: 1rem;
      right: 1rem;
      z-index: 4;
      display: flex;
      justify-content: space-between;
      gap: 0.8rem;
      align-items: start;
    }
    .hero-insights-rail {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.62rem;
      width: min(500px, calc(100% - 220px));
      margin-left: auto;
    }
    .hero-insight-card {
      position: relative;
      overflow: hidden;
      min-height: 54px;
      max-height: 58px;
      padding: 0.66rem 0.82rem 0.74rem;
      border-radius: 18px;
      border: 1px solid rgba(212,200,188,0.92);
      background: rgba(255,252,248,0.84);
      box-shadow: 0 14px 28px rgba(31,23,32,0.08);
      backdrop-filter: blur(18px);
      transition:
        max-height 0.48s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease;
    }
    .hero-insight-card.is-open {
      max-height: 148px;
      box-shadow: 0 18px 34px rgba(31,23,32,0.1);
    }
    .hero-insight-card-primary {
      border-color: rgba(110,33,55,0.2);
    }
    .hero-insight-card-secondary {
      border-color: rgba(31,122,79,0.2);
    }
    .hero-insight-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.16), transparent 30%),
        radial-gradient(circle at top right, rgba(200,169,126,0.12), transparent 28%);
      pointer-events: none;
      opacity: 0.9;
    }
    .hero-insight-card-primary::before,
    .hero-insight-card-secondary::before {
      content: '';
      position: absolute;
      inset: auto auto -42px -28px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(110,33,55,0.12), transparent 72%);
      pointer-events: none;
    }
    .hero-insight-card-secondary::before {
      inset: auto -34px -36px auto;
      background: radial-gradient(circle, rgba(31,122,79,0.14), transparent 72%);
    }
    .hero-insight-header,
    .hero-insight-body {
      position: relative;
      z-index: 1;
    }
    .hero-insight-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      align-items: center;
    }
    .hero-insight-kicker {
      display: block;
      min-height: 1.1em;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: var(--text-3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hero-insight-body {
      margin-top: 0.55rem;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.28s ease, transform 0.28s ease;
    }
    .hero-insight-card.is-open .hero-insight-body {
      opacity: 1;
      transform: translateY(0);
    }
    .hero-insight-title {
      display: block;
      min-height: 2.05em;
      margin-bottom: 0.28rem;
      font-size: 0.82rem;
      line-height: 1.22;
      letter-spacing: -0.02em;
      color: var(--text-1);
    }
    .hero-insight-copy {
      min-height: 2.75em;
      margin: 0;
      font-size: 0.71rem;
      line-height: 1.42;
      color: var(--text-2);
    }
    .hero-insight-card .hero-note-meta {
      gap: 0.55rem;
      margin-top: 0.7rem;
      padding-top: 0.48rem;
      border-top: 1px solid rgba(212,200,188,0.45);
    }
    .hero-insight-card .hero-note-meta span {
      display: inline-flex;
      align-items: center;
      padding: 0;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      background: none;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .hero-insight-card .hero-note-meta span + span::before {
      content: '•';
      margin-right: 0.55rem;
      color: rgba(155,144,153,0.7);
    }
    .hero-insight-typing {
      position: relative;
    }
    .hero-insight-typing.is-typing::after {
      content: '';
      display: inline-block;
      width: 1px;
      height: 0.95em;
      margin-left: 0.16rem;
      vertical-align: -0.12em;
      background: currentColor;
      opacity: 0.7;
      animation: heroCaretBlink 1.15s steps(1) infinite;
    }
    .hero-insight-card [data-hero-chip] {
      opacity: 0;
      transform: translateY(6px) scale(0.96);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .hero-insight-card [data-hero-chip].is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    @keyframes heroCaretBlink {
      0%, 49% { opacity: 0.75; }
      50%, 100% { opacity: 0; }
    }
    .hero-screen-shadow {
      position: absolute;
      left: 7%;
      right: 7%;
      bottom: 2rem;
      height: 54px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(110,33,55,0.22), rgba(200,169,126,0.24));
      filter: blur(30px);
      opacity: 0.7;
      z-index: 1;
      pointer-events: none;
    }
    .hero-screen {
      position: relative;
      z-index: 2;
      overflow: visible;
      isolation: isolate;
      --image-trace-delay: -0.55s;
      border-radius: 24px;
      border: 1px solid rgba(212,200,188,0.82);
      background: #f4efe8;
      box-shadow:
        0 22px 48px rgba(31,23,32,0.16),
        0 0 0 1px rgba(255,255,255,0.55) inset;
    }
    .hero-screen::before {
      display: none;
    }
    .hero-screen .image-border-clip {
      position: relative;
      z-index: 1;
      overflow: hidden;
      border-radius: 24px;
      background: #f4efe8;
      transform: translateZ(0);
    }
    .hero-screen .image-border-clip::after {
      display: none;
    }
    .hero-screen img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: auto;
      object-fit: contain;
      object-position: center top;
      border-radius: inherit;
      transform: none;
      filter: saturate(1.08) contrast(1.06);
    }
    .hero-floating-note {
      position: absolute;
      z-index: 4;
      max-width: 280px;
      padding: 1rem 1.05rem;
      border-radius: 20px;
      background: rgba(255,252,248,0.9);
      border: 1px solid rgba(212,200,188,0.92);
      text-align: left;
      box-shadow: 0 20px 40px rgba(31,23,32,0.12);
      backdrop-filter: blur(18px);
      overflow: hidden;
      transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
      animation: heroNoteFloat 6.8s ease-in-out infinite;
    }
    .hero-floating-note:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 28px 56px rgba(31,23,32,0.16);
      border-color: rgba(110,33,55,0.22);
      background: rgba(255,252,248,0.96);
    }
    .hero-floating-note small {
      display: block;
      margin-bottom: 0.45rem;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .hero-floating-note strong {
      display: block;
      margin-bottom: 0.28rem;
      font-size: 0.95rem;
      line-height: 1.15;
      color: var(--text-1);
      letter-spacing: -0.02em;
    }
    .hero-floating-note span {
      display: block;
      font-size: 0.8rem;
      line-height: 1.45;
      color: var(--text-2);
    }
    .hero-note-copy,
    .hero-caption-copy {
      display: block;
      color: var(--text-2);
    }
    .hero-screen-stage > .hero-floating-note.note-primary:not(.hero-floating-note-live),
    .hero-screen-stage > .hero-floating-note.note-ops:not(.hero-floating-note-live) {
      display: none;
    }
    .hero-note-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.8rem;
    }
    .hero-note-meta span {
      display: inline-flex;
      align-items: center;
      padding: 0.28rem 0.58rem;
      border-radius: 999px;
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(212,200,188,0.9);
      color: var(--text-2);
    }
    .hero-floating-note::before {
      content: '';
      position: relative;
      z-index: 1;
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-bottom: 0.55rem;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 6px rgba(92,85,96,0.08);
    }
    .hero-floating-note::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 92px;
      height: 1px;
      background: linear-gradient(90deg, rgba(110,33,55,0.02), rgba(110,33,55,0.48));
      opacity: 0.8;
      transform: translateY(-50%);
    }
    .hero-floating-note.note-primary {
      top: 5.15rem;
      right: -0.25rem;
      color: var(--accent);
      animation-delay: -1.2s;
    }
    .hero-floating-note.note-primary::after {
      right: 100%;
    }
    .hero-floating-note.note-ops {
      left: -0.25rem;
      top: 10.6rem;
      bottom: auto;
      color: #1f7a4f;
      animation-delay: -3.4s;
    }
    .hero-floating-note.note-ops::after {
      left: 100%;
      right: auto;
      background: linear-gradient(90deg, rgba(31,122,79,0.48), rgba(31,122,79,0.02));
    }
    .hero-caption-strip {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.85rem;
      margin-top: 1.1rem;
    }
    .hero-caption-item {
      padding: 1rem 1.05rem;
      border-radius: 16px;
      background: rgba(255,252,248,0.7);
      border: 1px solid rgba(212,200,188,0.82);
      text-align: left;
      box-shadow: 0 10px 24px rgba(31,23,32,0.06);
      transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    }
    .hero-caption-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 32px rgba(31,23,32,0.1);
      border-color: rgba(110,33,55,0.16);
    }
    .hero-caption-item small {
      display: block;
      margin-bottom: 0.35rem;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .hero-caption-item strong {
      display: block;
      font-size: 0.9rem;
      line-height: 1.3;
      color: var(--text-1);
      letter-spacing: -0.02em;
    }
    .hero-caption-strip .hero-caption-item:last-child strong {
      display: none;
    }
    .hero-caption-strip .hero-caption-item:last-child .hero-caption-copy {
      font-size: 0.9rem;
      line-height: 1.3;
      color: var(--text-1);
      letter-spacing: -0.02em;
      font-weight: 700;
    }
    @keyframes heroNoteFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    /* ════════════════════════════════════
       PROBLEMA
    ════════════════════════════════════ */
    .problem-section { background: var(--surface); }
    .problem-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
      margin-bottom: 4rem;
    }
    .problem-intro h2 { margin-bottom: 1rem; }
    .problem-intro .lead { max-width: 100%; }
    .problem-photo {
      margin-top: 2rem;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 16px 40px rgba(0,0,0,0.10);
    }
    .problem-photo img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      object-position: center 35%;
      display: block;
      transition: transform 0.6s ease;
    }
    .problem-photo:hover img { transform: scale(1.03); }
    .problem-divider { border: none; border-top: 1px solid var(--border); margin-bottom: 3rem; }
    .problem-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      overflow: hidden;
    }
    .problem-card {
      background: var(--surface);
      padding: 2rem 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      transition: background 0.2s;
    }
    .problem-card:hover { background: var(--surface-2); }
    .problem-card-icon {
      width: 36px; height: 36px;
      border-radius: var(--r-sm);
      background: var(--surface-2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.5rem;
    }
    .problem-card h3 { font-size: 0.95rem; }
    .problem-card p { font-size: 0.875rem; color: var(--text-2); line-height: 1.6; }

    /* ════════════════════════════════════
       MÓDULOS (BENTO)
    ════════════════════════════════════ */
    .modules-header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 2rem;
      margin-bottom: 3rem;
    }
    .modules-header h2 { margin-bottom: 0.75rem; }
    .bento {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: minmax(190px, auto);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .bc {
      background: var(--surface);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      transition: background 0.2s;
      position: relative;
      overflow: hidden;
    }
    .bc:hover { background: var(--surface-2); }
    .bc-icon {
      width: 32px; height: 32px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border-bright);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 0.25rem;
    }
    .bc-icon svg { color: var(--text-2); }
    .bc h3 { font-size: 0.95rem; }
    .bc p { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; }
    .bc-tag {
      margin-top: auto;
      display: inline-flex;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-3);
    }

    /* Span helpers */
    .c-8  { grid-column: span 8; }
    .c-7  { grid-column: span 7; }
    .c-6  { grid-column: span 6; }
    .c-5  { grid-column: span 5; }
    .c-4  { grid-column: span 4; }
    .c-12 { grid-column: span 12; }
    .mock-main { background: var(--surface); }
    .mock-stat-delta { color: #2a7d4f; }
    .mock-stat.neg .mock-stat-delta { color: #b84242; }
    .mock-chart-bar     { background: var(--border); }
    .mock-chart-bar.hi  { background: var(--accent); opacity: 0.65; }
    .mock-chart-bar.md  { background: var(--accent-warm); opacity: 0.55; }
    .mock-alert-dot     { background: rgba(200,140,40,0.8); }
    .mock-alert.ok .mock-alert-dot { background: rgba(42,125,79,0.8); }

    /* Highlighted bento cards */
    .highlighted {
      background: var(--accent-light) !important;
      border: 1px solid var(--accent-ring) !important;
    }
    .highlighted .bc-icon { border-color: var(--accent-ring); }
    .highlighted .bc-icon svg { color: var(--accent); }
    .highlighted .bc-tag { color: var(--accent); }

    /* Bento visual placeholder */
    .bc-visual {
      flex: 1;
      background: var(--bg);
      border: 1px solid var(--border);
      border-bottom: none;
      border-radius: var(--r-sm) var(--r-sm) 0 0;
      margin-top: 0.75rem;
      overflow: hidden;
      position: relative;
    }
    .bc-visual-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 6px;
      padding: 12px;
    }
    .bc-visual-cell {
      height: 28px;
      background: var(--border);
      border-radius: 3px;
    }
    .bc-visual-cell.accent { background: var(--accent-light); border: 1px solid var(--accent-ring); }

    /* ─── SCROLL OFFSET (for fixed header) ─── */
    [id] { scroll-margin-top: 80px; }

    /* ─── PROBLEM CARD ICON — align with bento icons ─── */
    .problem-card-icon {
      border: 1px solid var(--border-bright);
    }
    .problem-card-icon svg { color: var(--text-2); }

    /* ─── Soporte note ─── */
    .support-note {
      margin-top: 2.5rem;
      padding: 1.25rem 1.5rem;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      max-width: 560px;
    }
    .support-note-icon {
      width: 32px; height: 32px;
      border-radius: var(--r-sm);
      background: var(--accent-light);
      border: 1px solid var(--accent-ring);
      display: flex; align-items: center; justify-content: center;
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 0.1rem;
    }
    .support-note strong {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-1);
      margin-bottom: 0.3rem;
    }
    .support-note p {
      font-size: 0.82rem;
      color: var(--text-2);
      line-height: 1.6;
    }

    /* ══════════════════════════════════
       FLOW GRID — Numerado compacto
    ══════════════════════════════════ */
    .flow-section-bg { background: var(--surface); }
    .flow-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .flow-step {
      background: var(--surface);
      padding: 2rem 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: background 0.2s;
    }
    .flow-step:hover { background: var(--surface-2); }
    .flow-step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 1px solid var(--border-bright);
      font-size: 0.65rem;
      font-weight: 700;
      color: var(--text-3);
      letter-spacing: 0.05em;
      flex-shrink: 0;
    }
    .flow-step-body h3 { font-size: 0.925rem; margin-bottom: 0.35rem; }
    .flow-step-body p { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; margin-bottom: 0.75rem; }
    .flow-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .flow-tag {
      font-size: 0.7rem;
      font-weight: 500;
      padding: 0.2rem 0.6rem;
      border-radius: 4px;
      background: var(--border);
      color: var(--text-3);
      border: 1px solid var(--border-bright);
    }

    /* ══════════════════════════════════
       DIFERENCIALES
    ══════════════════════════════════ */
    .diff-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .diff-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 2.25rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      min-height: 220px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .diff-card:hover { 
      border-color: var(--accent-ring);
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }
    .diff-icon {
      width: 36px; height: 36px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border-bright);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-2);
      margin-bottom: 0.25rem;
    }
    .diff-card h3 { font-size: 0.95rem; }
    .diff-card p  { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }

    /* ══════════════════════════════════
       CREDIBILIDAD
    ══════════════════════════════════ */
    .cred-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .cred-left { max-width: 480px; }
    .cred-claims { display: flex; flex-direction: column; }
    .cred-photo {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 24px 56px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
    }
    .cred-photo img {
      width: 100%;
      aspect-ratio: 3/4;
      object-fit: cover;
      object-position: center 20%;
      display: block;
    }
    .cred-photo-badge {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      right: 1.25rem;
      background: rgba(255,252,248,0.94);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0.75rem 1rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-1);
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .cred-claim {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 1.25rem;
      padding: 1.75rem 0;
      border-bottom: 1px solid var(--border);
    }
    .cred-claim:first-child { padding-top: 0; }
    .cred-claim:last-child { border-bottom: none; padding-bottom: 0; }
    .cred-claim strong { display: block; font-size: 0.925rem; font-weight: 600; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
    .cred-claim p { font-size: 0.845rem; color: var(--text-2); line-height: 1.65; }

    /* ══════════════════════════════════
       CTA FINAL
    ══════════════════════════════════ */
    .cta-section {
      background: var(--surface);
      position: relative;
      overflow: hidden;
    }
    .cta-section::before {
      content: '';
      position: absolute;
      top: 0; left: 50%; transform: translateX(-50%);
      width: min(600px, 100%);
      height: 1px;
      background: linear-gradient(to right, transparent, var(--accent), transparent);
    }
    .cta-section::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 32%, rgba(110,33,55,0.045), transparent 26%),
        radial-gradient(circle at 78% 54%, rgba(200,169,126,0.09), transparent 30%);
      pointer-events: none;
    }
    .cta-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }
    .cta-wrap {
      text-align: left;
      max-width: 100%;
      margin-inline: 0;
    }
    .cta-wrap h2 {
      font-size: clamp(2rem, 3.5vw, 2.75rem);
      letter-spacing: -0.035em;
      text-align: left;
    }
    .cta-wrap .lead { margin-inline: 0; }
    .cta-photo {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 28px 64px rgba(0,0,0,0.14);
    }
    .cta-photo img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      object-position: center 25%;
      display: block;
    }
    .cta-photo-tag {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: rgba(110,33,55,0.90);
      backdrop-filter: blur(8px);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 600;
      padding: 0.4rem 0.8rem;
      border-radius: 6px;
      letter-spacing: 0.02em;
    }
    .cta-eyebrow {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1.25rem;
    }
    .cta-actions {
      display: flex;
      gap: 0.75rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 2.5rem;
    }

    /* ══════════════════════════════════
       FORMULARIO
    ══════════════════════════════════ */
    .form-layout {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: clamp(2.8rem, 5vw, 5.25rem);
      align-items: start;
    }
    .form-copy,
    .form-panel {
      position: relative;
      z-index: 1;
    }
    .form-copy {
      max-width: 35rem;
      padding-top: 0.2rem;
      padding-right: clamp(0rem, 1vw, 1rem);
      align-self: start;
    }
    .form-copy h2 {
      max-width: 14ch;
      font-size: clamp(2.55rem, 4vw, 4.1rem);
      letter-spacing: -0.05em;
      line-height: 0.98;
      margin-bottom: 0;
    }
    .form-panel {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.9), rgba(248,242,235,0.96));
      border: 1px solid rgba(212,200,188,0.5);
      border-radius: 28px;
      padding: clamp(1.75rem, 3vw, 2.35rem);
      box-shadow:
        0 22px 44px rgba(31,23,32,0.07),
        0 1px 0 rgba(255,255,255,0.62) inset;
    }
    .form-panel::before {
      content: '';
      position: absolute;
      left: 1.45rem;
      right: 1.45rem;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(110,33,55,0.3), rgba(200,169,126,0.34), transparent);
    }
    .form-panel-header {
      margin-bottom: 1.35rem;
      padding-bottom: 1.15rem;
      border-bottom: 1px solid rgba(212,200,188,0.42);
    }
    .form-panel-kicker {
      display: inline-flex;
      align-items: center;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(110,33,55,0.82);
    }
    .form-panel-intro {
      margin: 0.65rem 0 0;
      max-width: 38ch;
      font-size: 0.92rem;
      line-height: 1.68;
      color: var(--text-2);
    }
    #contact-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .fg { margin-bottom: 0; }
    .fl {
      display: block;
      font-size: 0.78rem;
      font-weight: 700;
      color: rgba(74,67,72,0.82);
      margin-bottom: 0.55rem;
      letter-spacing: 0.02em;
    }
    .fi {
      width: 100%;
      background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247,241,233,0.96));
      border: 1px solid rgba(212,200,188,0.68);
      color: var(--text-1);
      padding: 0.92rem 1rem;
      border-radius: 14px;
      font-family: 'Inter', sans-serif;
      font-size: 0.92rem;
      line-height: 1.45;
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
      box-shadow: 0 1px 0 rgba(255,255,255,0.58) inset;
      outline: none;
    }
    .fi:hover {
      border-color: rgba(110,33,55,0.22);
    }
    .fi:focus {
      border-color: rgba(110,33,55,0.45);
      box-shadow:
        0 0 0 4px rgba(110,33,55,0.08),
        0 1px 0 rgba(255,255,255,0.64) inset;
      background: rgba(255,255,255,0.98);
    }
    .fi::placeholder { color: rgba(114,107,112,0.7); }
    .fi-ta { resize: vertical; min-height: 132px; }
    .form-lead {
      margin-top: 1.35rem;
      max-width: 35rem;
      font-size: clamp(1rem, 1.35vw, 1.14rem);
      line-height: 1.78;
      color: var(--text-2);
    }
    .form-contact-info { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
    .form-contact-item {
      display: flex; align-items: center; gap: 0.6rem;
      font-size: 0.85rem; color: var(--text-2);
    }
    .form-contact-item svg { color: var(--text-3); flex-shrink: 0; }
    .form-contact-item a {
      color: inherit;
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .form-contact-item a:hover { color: var(--text-1); }
    .form-trust-note {
      margin: 0.15rem 0 0;
      font-size: 0.78rem;
      line-height: 1.6;
      text-align: center;
      color: var(--text-3);
    }

    /* ══════════════════════════════════
       FOOTER
    ══════════════════════════════════ */
    .site-footer {
      position: relative;
      overflow: hidden;
      border-top: 1px solid rgba(255,246,239,0.1);
      padding-block: clamp(2rem, 3vw, 2.45rem) 0.85rem;
      background: var(--accent-hover);
      color: rgba(255,247,241,0.88);
    }
    .site-footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 14% 26%, rgba(255,245,236,0.025), transparent 22%);
      pointer-events: none;
    }
    .footer-shell {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 0.95rem;
    }
    .footer-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: clamp(1.5rem, 2.5vw, 2.6rem);
      align-items: center;
    }
    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      max-width: 25rem;
    }
    .footer-logo {
      position: relative;
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .footer-brand .footer-logo img {
      height: 56px;
      width: auto;
      display: block;
      filter:
        brightness(1.09)
        contrast(1.1)
        saturate(1.03)
        drop-shadow(0 0 0.45px rgba(255,247,241,0.82))
        drop-shadow(0 0 2px rgba(255,247,241,0.08))
        drop-shadow(0 8px 16px rgba(17,6,11,0.2));
    }
    .footer-sub {
      margin: 0;
      font-size: 0.92rem;
      line-height: 1.55;
      color: rgba(255,245,239,0.86);
      max-width: 22rem;
      letter-spacing: -0.01em;
    }
    .footer-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.85rem 1.25rem;
      align-items: center;
    }
    .footer-nav a {
      width: fit-content;
      font-size: 0.84rem;
      font-weight: 500;
      color: rgba(255,247,241,0.78);
      text-decoration: none;
      letter-spacing: 0.01em;
      transition: color 0.15s ease, opacity 0.15s ease;
    }
    .footer-nav a:hover {
      color: rgba(255,252,248,1);
      opacity: 1;
    }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 1rem;
      padding-top: 0.7rem;
      border-top: 1px solid rgba(255,244,235,0.14);
    }
    .footer-copy {
      margin: 0;
      font-size: 0.76rem;
      color: rgba(255,240,230,0.58);
      letter-spacing: 0.02em;
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 1024px) {
      .mockup-body { grid-template-columns: 180px 1fr; }
      .mock-right { display: none; }
      .hero-topbar {
        position: static;
        display: grid;
        gap: 0.8rem;
        padding: 0 1rem 0.8rem;
      }
      .hero-insights-rail {
        width: 100%;
        margin-left: 0;
      }
      .c-8 { grid-column: span 12; }
      .c-7 { grid-column: span 12; }
      .c-5 { grid-column: span 12; }
      .diff-grid { grid-template-columns: repeat(2, 1fr); }
      .cred-grid  { grid-template-columns: 1fr; gap: 2.5rem; }
      .cred-left  { max-width: 100%; }
      .form-layout {
        grid-template-columns: 1fr;
        gap: 2.2rem;
      }
      .form-copy {
        max-width: 100%;
        padding-right: 0;
        padding-top: 0;
      }
      .form-copy h2 {
        max-width: none;
      }
      .footer-main {
        grid-template-columns: 1fr;
        gap: 1.1rem;
      }
      .footer-brand {
        max-width: 100%;
      }
      .footer-nav {
        justify-content: flex-start;
      }
      .flow-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .section { padding-block: 5rem; }
      .nav-links { display: none; }
      .hero-mockup { margin-top: 3rem; border-radius: 24px; }
      .hero-screen-stage {
        padding: 0.85rem;
      }
      .hero-topbar {
        gap: 0.7rem;
      }
      .hero-insights-rail { grid-template-columns: 1fr; }
      .hero-screen-shadow { display: none; }
      .hero-insight-card {
        max-height: none;
        min-height: 0;
        padding: 0.85rem 0.9rem 0.95rem;
      }
      .hero-insight-card.is-open { max-height: none; }
      .hero-insight-body { opacity: 1; transform: none; }
      .hero-insight-title,
      .hero-insight-copy { min-height: 0; }
      .hero-screen img { aspect-ratio: auto; }
      .hero-caption-strip { grid-template-columns: 1fr; }
      .problem-intro { grid-template-columns: 1fr; gap: 1.5rem; }
      .problem-cards { grid-template-columns: 1fr; }
      .modules-header { grid-template-columns: 1fr; }
      .c-4, .c-6, .c-8, .c-12 { grid-column: span 12; }
      .mock-stat-row { grid-template-columns: repeat(2, 1fr); }
      .mockup-body { grid-template-columns: 1fr; }
      .mock-sidebar { display: none; }
      .hero-proof { gap: 1.25rem; }
      .flow-grid { grid-template-columns: 1fr; }
      .diff-grid  { grid-template-columns: 1fr; }
      .diff-card  { min-height: auto; }
      .cta-split { grid-template-columns: 1fr; }
      .cta-wrap { text-align: center; }
      .cta-wrap h2 { text-align: center; }
      .cta-actions { justify-content: center; }
      .form-panel {
        padding: 1.35rem;
        border-radius: 22px;
      }
      .form-panel::before {
        left: 1rem;
        right: 1rem;
      }
      .site-footer {
        padding-block: 1.9rem 0.8rem;
      }
      .footer-main {
        gap: 0.95rem;
      }
      .footer-brand .footer-logo img {
        height: 50px;
      }
      .footer-sub {
        font-size: 0.86rem;
      }
      .footer-bottom {
        align-items: flex-start;
      }
    }
    /* ════════════════════════════════════
       PREMIUM INTERACTIONS
    ════════════════════════════════════ */
    /* 1. Hero 3D Tilt */
    .hero-mockup-wrap {
      perspective: 1200px;
    }
    .hero-mockup {
      transition: transform 0.1s ease-out;
      transform-style: preserve-3d;
      position: relative;
    }
    .hero-mockup::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgba(255,255,255,0.4) 0%, transparent 60%);
      pointer-events: none;
      mix-blend-mode: overlay;
      opacity: 0;
      transition: opacity 0.5s;
    }
    .hero-mockup-wrap:hover .hero-mockup::after { opacity: 1; }

    /* 2. Ambient Canvas System */
    .hero-canvas {
      position: absolute;
      top: -10%; left: -10%; right: -10%; bottom: -10%;
      width: 120%; height: 120%;
      pointer-events: none;
      z-index: -2;
      filter: blur(80px);
      opacity: 0.75;
    }
    .noise-overlay {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: -1;
      opacity: 0.05;
      background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
    }
    /* Integrate mockup with canvas via glassmorphism */
    .hero-mockup {
      background: rgba(255, 252, 248, 0.65) !important;
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
    }
    .mock-main { background: transparent !important; }
    .mockup-bar { background: rgba(240, 235, 227, 0.45) !important; backdrop-filter: blur(10px); }

    /* 3. Scroll Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      filter: blur(6px);
      transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.in-view {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
      .hero-mockup { transform: none !important; transition: none !important; }
      .hero-glow { animation: none !important; }
    }

    /* 4. Premium Card Hover */
    .problem-card, .bc, .flow-step, .diff-card {
      position: relative;
      overflow: hidden;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.2s;
    }
    .problem-card::before, .bc::before, .flow-step::before, .diff-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.4) 25%, transparent 30%);
      transform: translateX(-150%);
      transition: transform 0.6s ease;
      pointer-events: none;
      mix-blend-mode: overlay;
      border-radius: inherit;
      z-index: 10;
    }
    .problem-card:hover, .bc:hover, .flow-step:hover, .diff-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(110, 33, 55, 0.04);
      border-color: var(--accent-ring);
    }
    .problem-card:hover::before, .bc:hover::before, .flow-step:hover::before, .diff-card:hover::before {
      transform: translateX(150%);
    }

    @media (max-width: 480px) {
      h1 { font-size: 2.2rem; }
    }
    /* ════════════════════════════════════
       REMASTERIZACIÓN VISUAL (PURE CSS)
    ════════════════════════════════════ */
    
    /* 1. HERO: Remover canvas anterior y crear nueva escena viva CSS */
    .hero-canvas { display: none !important; }
    .noise-overlay { display: none !important; }
    .hero {
      position: relative;
      background: 
        radial-gradient(ellipse at 50% -20%, rgba(200,169,126,0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(110,33,55,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 40%, rgba(255,252,248,0.5) 0%, transparent 60%);
    }
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      /* Grid tenue evocando textura de papel de bodega */
      background-image: 
        linear-gradient(rgba(110,33,55,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110,33,55,0.02) 1px, transparent 1px);
      background-size: 24px 24px;
      /* Se desvanece suavemente hacia abajo */
      mask-image: linear-gradient(to bottom, black 15%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, black 15%, transparent 100%);
      pointer-events: none;
      z-index: -1;
    }

    /* 2. FONDO GENERAL: Ruido SVG para mayor tactilidad (menos plano) */
    body {
      background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.04"/%3E%3C/svg%3E');
      background-attachment: fixed;
    }

    /* 3. SECCIONES ALTERNAS: Delimitadas por gradiente y micro-textura */
    .problem-section, .flow-section-bg, .cta-section {
      background-color: var(--surface);
      position: relative;
    }
    .problem-section::before, .flow-section-bg::before, .cta-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(to right, transparent, var(--border-bright), transparent);
      opacity: 0.6;
    }
    /* Ruido interno específico para superficies para despegar del body */
    .problem-section::after, .flow-section-bg::after, .cta-section::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="2" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.02"/%3E%3C/svg%3E');
      pointer-events: none;
      z-index: 0;
    }
    .problem-section > .wrap, .flow-section-bg > .wrap, .cta-section > .wrap {
      position: relative;
      z-index: 2;
    }

    /* 4. ACCENT GLOW: Usar bordo para sombras de hover */
    .problem-card:hover, .bc:hover, .flow-step:hover, .diff-card:hover {
      box-shadow: 0 16px 32px rgba(110, 33, 55, 0.12), 0 4px 12px rgba(110, 33, 55, 0.08) !important;
      transform: translateY(-3px) !important;
    }

    /* 5. NAVBAR: Más profundidad en backdrop e inner gradient border */
    header {
      background: rgba(247, 244, 239, 0.75) !important;
      backdrop-filter: blur(28px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
      border-bottom: none !important;
    }
    header::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(110,33,55,0.2) 50%, transparent 100%);
    }

    /* REMASTERIZACION VISUAL */

    /* ══ FONDO GENERAL ══ */
    body {
      background-color: #F7F4EF;
      background-image:
        radial-gradient(ellipse 900px 600px at 50% -100px, rgba(200,169,126,0.30) 0%, transparent 70%),
        radial-gradient(ellipse 700px 500px at 90% 15%, rgba(110,33,55,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 600px 400px at 5% 55%, rgba(84,25,42,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 800px 500px at 55% 100%, rgba(200,169,126,0.18) 0%, transparent 70%);
    }

    /* ══ PATTERN DE PUNTOS SOBRE HERO ══ */
    .hero {
      position: relative;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(110,33,55,0.14) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(to bottom, black 0%, transparent 65%);
      -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(
        -45deg,
        rgba(110,33,55,0.04) 0px,
        rgba(110,33,55,0.04) 1px,
        transparent 1px,
        transparent 32px
      );
      mask-image: linear-gradient(to bottom, black 0%, transparent 50%);
      -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
    }
    .hero > * { position: relative; z-index: 1; }
    .hero-canvas { display: none !important; }

    /* ══ NAVBAR ══ */
    header {
      background: rgba(247,244,239,0.82) !important;
      backdrop-filter: blur(24px) saturate(160%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
      border-bottom: none !important;
    }
    header::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(110,33,55,0.25) 50%, transparent);
    }

    /* ══ SEPARADORES DE SECCION ══ */
    .problem-section, .flow-section-bg, .cta-section {
      position: relative;
    }
    .problem-section::before,
    .flow-section-bg::before,
    .cta-section::before {
      content: '';
      position: absolute;
      top: 0; left: 10%; right: 10%; height: 1px;
      background: linear-gradient(to right, transparent, rgba(110,33,55,0.20), transparent);
    }

    /* ══ HOVER EN CARDS ══ */
    .problem-card:hover,
    .bc:hover,
    .flow-step:hover,
    .diff-card:hover {
      box-shadow:
        0 0 0 1px rgba(110,33,55,0.12),
        0 8px 32px rgba(110,33,55,0.10),
        0 2px 8px rgba(0,0,0,0.04) !important;
      transform: translateY(-2px) !important;
    }

    /* Landing polish */
    .problem-section {
      background: linear-gradient(180deg, rgba(255,252,248,0.98) 0%, rgba(247,244,239,0.92) 100%);
    }
    .problem-intro {
      grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
      gap: clamp(2rem, 4vw, 4.5rem);
      align-items: stretch;
      margin-bottom: 3.25rem;
    }
    .problem-copy {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1.75rem;
    }
    .problem-copy h2 {
      max-width: 11ch;
      margin-bottom: 1rem;
    }
    .problem-copy > h2:last-of-type,
    .problem-showcase > .lead {
      display: none;
    }
    .problem-copy .lead {
      max-width: 56ch;
    }
    .problem-signals {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.9rem;
    }
    .problem-signal {
      background: rgba(255,252,248,0.8);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 1rem 1rem 1.05rem;
      box-shadow: 0 10px 24px rgba(31,23,32,0.04);
    }
    .problem-signal strong,
    .problem-summary-value {
      display: block;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--text-1);
      margin-bottom: 0.3rem;
    }
    .problem-signal span,
    .problem-summary-card p {
      font-size: 0.82rem;
      color: var(--text-2);
      line-height: 1.55;
    }
    .problem-showcase {
      display: grid;
      gap: 1rem;
      align-content: start;
    }
    .problem-photo {
      margin-top: 0;
      position: relative;
      min-height: 100%;
      box-shadow: 0 28px 64px rgba(31,23,32,0.12);
    }
    .problem-photo::after {
      content: '';
      position: absolute;
      inset: auto 0 0 0;
      height: 40%;
      background: linear-gradient(180deg, transparent, rgba(31,23,32,0.16));
      pointer-events: none;
    }
    .problem-photo-badge {
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.55rem 0.85rem;
      border-radius: 999px;
      background: rgba(255,252,248,0.9);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255,252,248,0.8);
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--accent);
      letter-spacing: 0.02em;
    }
    .problem-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }
    .problem-summary-card {
      background: rgba(255,252,248,0.86);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 1rem 1.05rem;
      box-shadow: 0 10px 24px rgba(31,23,32,0.04);
    }
    .problem-divider {
      margin: 0 0 3rem;
    }
    .problem-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.1rem;
      background: transparent;
      border: none;
      overflow: visible;
    }
    .problem-card {
      position: relative;
      min-height: 100%;
      padding: 1.7rem;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      background: linear-gradient(180deg, rgba(255,252,248,0.98) 0%, rgba(247,244,239,0.88) 100%);
      box-shadow: 0 18px 40px rgba(31,23,32,0.04);
      overflow: hidden;
    }
    .problem-card::after {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 3px;
      background: linear-gradient(90deg, rgba(110,33,55,0.9), rgba(200,169,126,0.75));
      opacity: 0.8;
    }
    .problem-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.35rem;
    }
    .problem-card-kicker {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-3);
      margin-top: 0.35rem;
    }

    .modules-header {
      grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
      align-items: end;
      gap: clamp(1.5rem, 3vw, 3rem);
      margin-bottom: 3rem;
    }
    .modules-summary {
      background: linear-gradient(180deg, rgba(255,252,248,0.98) 0%, rgba(247,244,239,0.9) 100%);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 1.3rem 1.4rem;
      box-shadow: 0 16px 38px rgba(31,23,32,0.04);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .modules-summary .lead {
      max-width: none !important;
      margin: 0;
      font-size: 0.95rem !important;
    }
    .modules-summary-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
    }
    .modules-summary-chip {
      display: inline-flex;
      align-items: center;
      padding: 0.38rem 0.7rem;
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: rgba(110,33,55,0.05);
      border: 1px solid rgba(110,33,55,0.12);
      color: var(--accent);
    }
    .bento {
      grid-auto-rows: minmax(210px, auto);
      gap: 1rem;
      background: transparent;
      border: none;
      overflow: visible;
    }
    .bc {
      background: linear-gradient(180deg, rgba(255,252,248,0.98) 0%, rgba(247,244,239,0.9) 100%);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 1.7rem;
      gap: 0.75rem;
      box-shadow: 0 16px 38px rgba(31,23,32,0.04);
    }
    .bc-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }
    .bc-copy {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .bc-copy h3 {
      font-size: 1rem;
    }
    .bc p {
      font-size: 0.84rem;
      line-height: 1.6;
    }
    .bc-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      justify-content: flex-end;
    }
    .bc-meta span {
      display: inline-flex;
      align-items: center;
      padding: 0.3rem 0.55rem;
      border-radius: 999px;
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: rgba(255,252,248,0.74);
      border: 1px solid var(--border);
      color: var(--text-3);
    }
    .bc-list {
      margin-top: auto;
      display: grid;
      gap: 0.65rem;
    }
    .bc-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-top: 0.7rem;
      border-top: 1px solid rgba(212,200,188,0.7);
      font-size: 0.78rem;
      color: var(--text-2);
    }
    .bc-list-item strong {
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-1);
      white-space: nowrap;
    }
    .bc-media {
      margin-top: auto;
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(247,244,239,0.95) 0%, rgba(240,235,227,0.95) 100%);
    }
    .bc-media.photo {
      min-height: 188px;
    }
    .bc-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .bc-photo-badge {
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 0.8rem;
      border-radius: 999px;
      background: rgba(255,252,248,0.9);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,252,248,0.8);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .bc-visual {
      min-height: 168px;
      margin-top: auto;
      padding: 1rem;
      border: 1px solid rgba(110,33,55,0.09);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,252,248,0.92) 0%, rgba(247,244,239,0.98) 100%);
    }
    .bc-visual-grid {
      height: 100%;
      grid-template-columns: 1.2fr repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 0.6rem;
      padding: 0;
    }
    .bc-visual-cell {
      height: auto;
      min-height: 28px;
      background: rgba(212,200,188,0.75);
      border-radius: 8px;
    }
    .bc-visual-cell.accent {
      background: linear-gradient(180deg, rgba(110,33,55,0.1) 0%, rgba(200,169,126,0.18) 100%);
      border: 1px solid rgba(110,33,55,0.16);
    }
    .bc-visual-cell.tall {
      grid-row: span 3;
    }
    .bc-visual-cell.wide {
      grid-column: span 2;
    }
    .bc-visual-cell.line {
      min-height: 16px;
    }
    .highlighted {
      background: linear-gradient(180deg, rgba(110,33,55,0.05) 0%, rgba(255,252,248,0.96) 100%) !important;
      border: 1px solid rgba(110,33,55,0.18) !important;
    }

    .flow-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.75fr);
      gap: 1rem;
      align-items: stretch;
    }
    .flow-grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.82fr);
      gap: 1rem;
      background: transparent;
      border: none;
      overflow: visible;
      align-items: stretch;
    }
    .flow-board {
      background: linear-gradient(180deg, rgba(255,252,248,0.98) 0%, rgba(247,244,239,0.9) 100%);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 1.5rem;
      box-shadow: 0 18px 40px rgba(31,23,32,0.04);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .flow-board-head h3 {
      font-size: 1.15rem;
      margin-top: 0.35rem;
      letter-spacing: -0.03em;
    }
    .flow-board-label,
    .flow-panel-title {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .flow-board-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
    }
    .flow-board-kpi {
      background: rgba(255,252,248,0.82);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.9rem 0.95rem;
    }
    .flow-board-kpi strong {
      display: block;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-1);
      letter-spacing: -0.03em;
      margin-bottom: 0.25rem;
    }
    .flow-board-kpi span {
      font-size: 0.75rem;
      color: var(--text-2);
      line-height: 1.45;
    }
    .flow-lane {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.85rem;
    }
    .flow-lane::before {
      content: '';
      position: absolute;
      left: calc(12.5% + 14px);
      right: calc(12.5% + 14px);
      top: 14px;
      height: 1px;
      background: linear-gradient(90deg, rgba(110,33,55,0.4), rgba(200,169,126,0.5));
      z-index: 0;
    }
    .flow-stage {
      position: relative;
      z-index: 1;
      min-height: 148px;
      padding: 1rem;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255,252,248,0.86);
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .flow-stage::before {
      content: '';
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(110,33,55,0.16);
      background: linear-gradient(180deg, rgba(110,33,55,0.1), rgba(200,169,126,0.18));
      margin-bottom: 0.35rem;
    }
    .flow-stage-step {
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .flow-stage strong {
      font-size: 0.94rem;
      line-height: 1.2;
      color: var(--text-1);
    }
    .flow-stage p {
      font-size: 0.78rem;
      color: var(--text-2);
      line-height: 1.55;
    }
    .flow-board-panels {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 0.9rem;
    }
    .flow-panel {
      background: rgba(255,252,248,0.82);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 1rem 1.05rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .flow-panel-list {
      display: grid;
      gap: 0.65rem;
    }
    .flow-panel-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding-bottom: 0.65rem;
      border-bottom: 1px solid rgba(212,200,188,0.7);
      font-size: 0.8rem;
      color: var(--text-2);
    }
    .flow-panel-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .flow-panel-item strong {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-1);
      white-space: nowrap;
    }
    .flow-panel-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
    }
    .flow-panel-pills span {
      display: inline-flex;
      align-items: center;
      padding: 0.4rem 0.7rem;
      border-radius: 999px;
      background: rgba(110,33,55,0.05);
      border: 1px solid rgba(110,33,55,0.12);
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 0.04em;
    }
    .flow-panel-media {
      position: relative;
      min-height: 228px;
      padding: 0;
      overflow: hidden;
      justify-content: flex-end;
    }
    .flow-panel-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 24%;
    }
    .flow-panel-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(31,23,32,0.10) 0%, rgba(31,23,32,0.64) 100%);
      pointer-events: none;
    }
    .flow-panel-overlay {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 0.8rem;
      padding: 1rem 1.05rem;
      margin-top: auto;
    }
    .flow-panel-media .flow-panel-title {
      color: rgba(255,252,248,0.86);
    }
    .flow-panel-media .flow-panel-pills span {
      background: rgba(255,252,248,0.15);
      border-color: rgba(255,252,248,0.22);
      color: #fff;
      backdrop-filter: blur(10px);
    }
    .flow-steps {
      display: grid;
      gap: 1rem;
    }
    .flow-step {
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 1.25rem 1.3rem;
      background: linear-gradient(180deg, rgba(255,252,248,0.98) 0%, rgba(247,244,239,0.92) 100%);
    }
    .flow-step:first-child {
      grid-row: span 3;
      padding: 1.5rem;
      box-shadow: 0 18px 40px rgba(31,23,32,0.04);
    }
    .flow-step:first-child .flow-step-num {
      width: 42px;
      height: 42px;
      font-size: 0.78rem;
    }
    .flow-step:first-child .flow-step-body {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }
    .flow-step:first-child .flow-step-body h3 {
      font-size: 1.15rem;
      margin-bottom: 0.6rem;
    }
    .flow-step:first-child .flow-tags {
      margin-top: auto;
    }
    .flow-step-top {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.85rem;
    }
    .flow-step-num {
      width: 34px;
      height: 34px;
      border-color: rgba(110,33,55,0.16);
      background: rgba(110,33,55,0.05);
      color: var(--accent);
    }
    .flow-step-kicker {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .flow-step-body h3 {
      font-size: 0.98rem;
      margin-bottom: 0.45rem;
    }
    .flow-step-body p {
      margin-bottom: 0.85rem;
      font-size: 0.84rem;
    }
    .flow-tags {
      gap: 0.45rem;
    }
    .flow-tag {
      padding: 0.28rem 0.65rem;
      border-radius: 999px;
      background: rgba(255,252,248,0.9);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .support-note {
      display: none;
    }

    @media (max-width: 1024px) {
      .problem-intro,
      .modules-header,
      .flow-layout,
      .flow-board-panels {
        grid-template-columns: 1fr;
      }
      .problem-copy h2 {
        max-width: none;
      }
      .problem-signals {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .c-7,
      .c-5 {
        grid-column: span 12;
      }
      .flow-lane {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .flow-lane::before {
        display: none;
      }
      .flow-grid {
        grid-template-columns: 1fr;
      }
      .flow-step:first-child {
        grid-row: auto;
      }
    }
    @media (max-width: 768px) {
      .problem-signals,
      .problem-summary,
      .flow-board-kpis,
      .flow-lane {
        grid-template-columns: 1fr;
      }
      .problem-card,
      .bc,
      .flow-step,
      .flow-board {
        padding: 1.35rem;
      }
      .bc-head {
        flex-direction: column;
      }
      .bc-meta {
        justify-content: flex-start;
      }
      .problem-photo-badge,
      .bc-photo-badge {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        justify-content: center;
        text-align: center;
      }
    }

    /* Editorial refinement */
    .problem-intro {
      position: relative;
      grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
      align-items: end;
      gap: clamp(2rem, 4vw, 4rem);
      margin-bottom: 4.75rem;
    }
    .problem-copy {
      max-width: 34rem;
      padding-bottom: 5.25rem;
    }
    .problem-copy-head {
      display: grid;
      gap: 0.9rem;
    }
    .problem-copy-note {
      max-width: 32ch;
      padding-left: 1rem;
      border-left: 1px solid rgba(110,33,55,0.18);
      font-size: 0.88rem;
      line-height: 1.75;
      color: var(--text-2);
    }
    .problem-showcase {
      position: relative;
      min-height: clamp(420px, 48vw, 560px);
    }
    .problem-showcase::before {
      content: '';
      position: absolute;
      inset: auto 10% 8% -8%;
      height: 42%;
      background: radial-gradient(circle, rgba(110,33,55,0.12), transparent 72%);
      pointer-events: none;
      filter: blur(18px);
    }
    .problem-photo {
      height: 100%;
      min-height: 100%;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(110,33,55,0.12);
    }
    .problem-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 34%;
    }
    .problem-summary {
      position: absolute;
      left: -10%;
      right: 1rem;
      bottom: -2.1rem;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 0.85rem;
      z-index: 3;
    }
    .problem-summary-card {
      background: rgba(255,252,248,0.92);
      border: 1px solid rgba(110,33,55,0.10);
      backdrop-filter: blur(16px);
      box-shadow: 0 22px 48px rgba(31,23,32,0.10);
    }
    .problem-summary-label {
      display: inline-flex;
      margin-bottom: 0.55rem;
      padding: 0.28rem 0.55rem;
      border-radius: 999px;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      background: rgba(110,33,55,0.06);
      border: 1px solid rgba(110,33,55,0.12);
    }
    .problem-signals {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -3.45rem;
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 1rem;
      z-index: 4;
    }
    .problem-signal {
      position: relative;
      padding: 1.1rem 1.1rem 1.2rem;
      border-radius: 16px;
      background: rgba(255,252,248,0.92);
      border: 1px solid rgba(110,33,55,0.10);
      box-shadow: 0 18px 40px rgba(31,23,32,0.08);
    }
    .problem-signal:first-child {
      background: linear-gradient(180deg, rgba(110,33,55,0.08), rgba(255,252,248,0.96));
    }
    .problem-divider {
      margin-top: 1.3rem;
    }
    .problem-cards {
      grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
      grid-auto-rows: minmax(220px, auto);
      gap: 1rem;
    }
    .problem-card-featured {
      grid-row: span 2;
      padding: 2rem;
      background: linear-gradient(180deg, rgba(110,33,55,0.05) 0%, rgba(255,252,248,0.98) 100%);
      border-color: rgba(110,33,55,0.16);
    }
    .problem-card-list {
      display: grid;
      gap: 0.8rem;
      margin-top: auto;
    }
    .problem-card-list > div {
      padding-top: 0.8rem;
      border-top: 1px solid rgba(212,200,188,0.7);
    }
    .problem-card-list strong {
      display: block;
      margin-bottom: 0.2rem;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-1);
    }
    .problem-card-list span {
      font-size: 0.82rem;
      color: var(--text-2);
      line-height: 1.55;
    }
    .problem-card-stat,
    .problem-card-accent {
      margin-top: auto;
      padding: 0.95rem 1rem;
      border-radius: 14px;
      background: rgba(110,33,55,0.06);
      border: 1px solid rgba(110,33,55,0.12);
      font-size: 0.82rem;
      line-height: 1.55;
      color: var(--text-1);
    }
    .problem-card-featured .problem-card-accent {
      display: none;
    }

    #modulos .modules-header {
      grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
      align-items: start;
      margin-bottom: 2.6rem;
    }
    #modulos .modules-header > :first-child {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding-top: 0.15rem;
    }
    #modulos .modules-header > :first-child .lead {
      max-width: 46ch;
      margin: 0;
    }
    .modules-summary {
      padding: 1.5rem 1.55rem;
    }
    .modules-summary-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
    }
    .modules-summary-stat {
      padding: 0.9rem 0.95rem;
      border-radius: 12px;
      background: rgba(255,252,248,0.82);
      border: 1px solid rgba(110,33,55,0.10);
    }
    .modules-summary-stat strong {
      display: block;
      margin-bottom: 0.15rem;
      font-size: 0.98rem;
      font-weight: 700;
      color: var(--text-1);
      letter-spacing: -0.03em;
    }
    .modules-summary-stat span {
      font-size: 0.76rem;
      line-height: 1.5;
      color: var(--text-2);
    }
    .bento {
      grid-auto-rows: minmax(230px, auto);
    }
    #modulos .bc {
      min-height: 100%;
      padding: 1.75rem;
    }
    #modulos .bc h3 {
      margin-top: 0.15rem;
      font-size: 1rem;
    }
    #modulos .bc p {
      max-width: 44ch;
    }
    #modulos .bc-media.photo {
      min-height: 210px;
    }
    #modulos .bc:nth-child(2),
    #modulos .bc:nth-child(3),
    #modulos .bc:nth-child(4),
    #modulos .bc:nth-child(5),
    #modulos .bc:nth-child(8),
    #modulos .bc:nth-child(9),
    #modulos .bc:nth-child(10) {
      background: linear-gradient(180deg, rgba(255,252,248,0.98) 0%, rgba(245,241,235,0.92) 100%);
    }

    .flow-grid-legacy {
      display: none !important;
    }
    #flujo .modules-header {
      grid-template-columns: minmax(0, 0.94fr) minmax(340px, 1.06fr);
      align-items: start;
      margin-bottom: 2.75rem;
    }
    #flujo .modules-header > :first-child {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    #flujo .modules-header > p {
      margin: 0 !important;
      max-width: none !important;
      padding: 1.35rem 1.45rem;
      border-radius: 18px;
      border: 1px solid rgba(110,33,55,0.10);
      background: linear-gradient(180deg, rgba(255,252,248,0.96) 0%, rgba(247,244,239,0.9) 100%);
      box-shadow: 0 16px 38px rgba(31,23,32,0.04);
    }
    .flow-layout {
      grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr);
      gap: 1rem;
    }
    .flow-board {
      position: relative;
      overflow: hidden;
      padding: 1.7rem;
      box-shadow: 0 24px 56px rgba(31,23,32,0.10);
    }
    .flow-board::before {
      content: '';
      position: absolute;
      inset: -20% 28% 50% -8%;
      background: radial-gradient(circle, rgba(110,33,55,0.14), transparent 72%);
      filter: blur(18px);
      pointer-events: none;
    }
    .flow-board::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,252,248,0.24), transparent 46%);
      pointer-events: none;
    }
    .flow-board > * {
      position: relative;
      z-index: 1;
    }
    .flow-board-head {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(240px, 0.78fr);
      gap: 1.25rem;
      align-items: end;
    }
    .flow-board-head .lead {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.65;
      color: var(--text-2);
    }
    .flow-board-kpi:first-child {
      background: rgba(110,33,55,0.07);
      border-color: rgba(110,33,55,0.16);
    }
    .flow-stage:nth-child(2),
    .flow-stage:nth-child(4) {
      background: linear-gradient(180deg, rgba(255,252,248,0.92) 0%, rgba(247,244,239,0.98) 100%);
    }
    .flow-panel:last-child {
      background: linear-gradient(180deg, rgba(110,33,55,0.04) 0%, rgba(255,252,248,0.88) 100%);
      border-color: rgba(110,33,55,0.12);
    }
    .flow-steps {
      display: grid;
      gap: 1rem;
      align-content: start;
    }
    .flow-steps .flow-step:first-child {
      grid-row: auto;
      padding: 1.35rem;
      box-shadow: 0 18px 40px rgba(31,23,32,0.06);
    }
    .flow-steps .flow-step:first-child .flow-step-num {
      width: 34px;
      height: 34px;
      font-size: 0.72rem;
    }
    .flow-steps .flow-step:first-child .flow-step-body h3 {
      font-size: 0.98rem;
      margin-bottom: 0.45rem;
    }

    @media (max-width: 1024px) {
      .problem-intro {
        grid-template-columns: 1fr;
        margin-bottom: 2.25rem;
      }
      .problem-copy {
        max-width: none;
        padding-bottom: 0;
      }
      .problem-summary {
        position: static;
        margin-top: 1rem;
      }
      .problem-signals {
        position: static;
        margin-top: 1rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .problem-cards {
        grid-template-columns: 1fr 1fr;
      }
      .problem-card-featured {
        grid-column: 1 / -1;
        grid-row: auto;
      }
      #modulos .modules-header,
      #flujo .modules-header,
      .flow-layout,
      .flow-board-head {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .problem-summary,
      .problem-signals,
      .problem-cards,
      .modules-summary-stats,
      .flow-board-kpis,
      .flow-board-panels {
        grid-template-columns: 1fr;
      }
      .problem-showcase {
        min-height: unset;
      }
      .problem-photo {
        min-height: 320px;
      }
      .problem-photo-badge,
      .bc-photo-badge {
        left: 0.75rem;
        right: 0.75rem;
      }
      .flow-board,
      .flow-step {
        padding: 1.3rem;
      }
    }

    .chatbot-shell {
      position: fixed;
      right: 1.25rem;
      bottom: 1.25rem;
      z-index: 260;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.8rem;
    }
    .chatbot-launcher {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      border: 1px solid rgba(110,33,55,0.18);
      background: linear-gradient(180deg, rgba(110,33,55,0.98), rgba(84,25,42,0.98));
      color: #fff;
      padding: 0.9rem 1rem;
      border-radius: 999px;
      box-shadow: 0 20px 40px rgba(31,23,32,0.18);
      cursor: pointer;
      font: inherit;
      font-size: 0.88rem;
      font-weight: 600;
    }
    .chatbot-launcher small {
      display: block;
      font-size: 0.68rem;
      font-weight: 500;
      opacity: 0.8;
    }
    .chatbot-panel {
      width: min(390px, calc(100vw - 2rem));
      max-height: min(72vh, 720px);
      background: rgba(255,252,248,0.98);
      border: 1px solid var(--border);
      border-radius: 20px;
      box-shadow: 0 28px 64px rgba(31,23,32,0.18);
      overflow: hidden;
      display: none;
      flex-direction: column;
      backdrop-filter: blur(18px);
    }
    .chatbot-panel.is-open {
      display: flex;
    }
    .chatbot-head {
      padding: 1rem 1.05rem;
      background: linear-gradient(180deg, rgba(110,33,55,0.08), rgba(255,252,248,0.6));
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }
    .chatbot-head strong {
      display: block;
      font-size: 0.95rem;
      line-height: 1.2;
      color: var(--text-1);
      margin-bottom: 0.2rem;
    }
    .chatbot-head span {
      display: block;
      font-size: 0.76rem;
      color: var(--text-2);
      line-height: 1.45;
    }
    .chatbot-close {
      border: none;
      background: transparent;
      color: var(--text-2);
      cursor: pointer;
      font: inherit;
      font-size: 1.2rem;
      line-height: 1;
      padding: 0.1rem;
    }
    .chatbot-messages {
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      overflow: auto;
      background:
        linear-gradient(180deg, rgba(255,252,248,0.96) 0%, rgba(247,244,239,0.92) 100%);
    }
    .chatbot-msg {
      max-width: 88%;
      padding: 0.8rem 0.9rem;
      border-radius: 16px;
      font-size: 0.84rem;
      line-height: 1.6;
      white-space: pre-wrap;
    }
    .chatbot-msg.bot {
      background: #fff;
      border: 1px solid var(--border);
      color: var(--text-1);
      align-self: flex-start;
    }
    .chatbot-msg.user {
      background: rgba(110,33,55,0.08);
      border: 1px solid rgba(110,33,55,0.14);
      color: var(--text-1);
      align-self: flex-end;
    }
    .chatbot-quick {
      padding: 0 1rem 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      background:
        linear-gradient(180deg, rgba(255,252,248,0.96) 0%, rgba(247,244,239,0.92) 100%);
    }
    .chatbot-chip {
      border: 1px solid rgba(110,33,55,0.14);
      background: rgba(255,252,248,0.84);
      color: var(--accent);
      border-radius: 999px;
      padding: 0.45rem 0.7rem;
      font: inherit;
      font-size: 0.72rem;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: 0.03em;
    }
    .chatbot-form {
      padding: 0.95rem 1rem 1rem;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 0.65rem;
      background: rgba(255,252,248,0.98);
    }
    .chatbot-input {
      flex: 1;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg);
      padding: 0.8rem 0.9rem;
      font: inherit;
      font-size: 0.84rem;
      color: var(--text-1);
      outline: none;
    }
    .chatbot-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-ring);
    }
    .chatbot-send {
      border: none;
      border-radius: 12px;
      background: var(--accent);
      color: #fff;
      padding: 0 1rem;
      font: inherit;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
    }
    .chatbot-footer {
      padding: 0 1rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      background: rgba(255,252,248,0.98);
    }
    .chatbot-footer small {
      font-size: 0.72rem;
      color: var(--text-3);
      line-height: 1.4;
    }
    .chatbot-wa {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      border-radius: 999px;
      background: #1f7a4f;
      color: #fff;
      padding: 0.55rem 0.85rem;
      font-size: 0.74rem;
      font-weight: 700;
      white-space: nowrap;
    }
    @media (max-width: 768px) {
      .chatbot-shell {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
      }
      .chatbot-panel {
        width: 100%;
      }
      .chatbot-launcher {
        width: 100%;
        justify-content: center;
      }
      .chatbot-footer {
        flex-direction: column;
        align-items: stretch;
      }
      .chatbot-wa {
        width: 100%;
      }
    }

@media (max-width: 768px) {
        .problem-split { grid-template-columns: 1fr !important; }
        .problem-split > div:first-child { position: static !important; }
      }

.modules-wrap {
      max-width: 1340px !important;
      position: relative;
    }
    .modules-stack {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
    .modules-intro-split {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: clamp(2rem, 4vw, 4.5rem);
      align-items: stretch;
    }
    .modules-intro-copy {
      display: flex;
      flex-direction: column;
      gap: 1.3rem;
      padding: 1rem 0 0.5rem;
    }
    .modules-intro-copy h2 {
      font-size: clamp(2.2rem, 4vw, 4rem);
      line-height: 0.98;
      letter-spacing: -0.05em;
      margin: 0;
      max-width: 12ch;
    }
    .modules-intro-copy .lead {
      max-width: 28ch;
      margin: 0;
    }
    .modules-label {
      display: inline-block;
      padding: 0;
      margin-bottom: 1.1rem;
      background: none;
      border: 0;
      border-radius: 0;
      color: var(--accent);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      box-shadow: none;
    }
    .modules-intro-rail {
      display: flex;
      flex-direction: column;
      margin-top: 0.5rem;
    }
    .modules-intro-point {
      padding-block: 1rem;
    }
    .modules-intro-point strong {
      display: block;
      margin-bottom: 0.35rem;
      font-size: 0.98rem;
      font-weight: 700;
      color: var(--text-1);
      letter-spacing: -0.02em;
    }
    .modules-intro-point span {
      display: block;
      font-size: 0.88rem;
      line-height: 1.55;
      color: var(--text-2);
    }
    .modules-intro-separator {
      border: 0;
      border-top: 1px solid var(--border);
      margin: 0;
    }
    .modules-overview-card {
      position: relative;
      overflow: hidden;
      border-radius: 30px;
      background: linear-gradient(145deg, rgba(255,252,248,0.97), rgba(246,239,231,0.92));
      border: 1px solid rgba(212,200,188,0.86);
      box-shadow:
        0 22px 58px rgba(31,23,32,0.12),
        0 1px 0 rgba(255,255,255,0.82) inset;
    }
    .modules-overview-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at top left, rgba(110,33,55,0.08), transparent 34%),
        radial-gradient(circle at bottom right, rgba(200,169,126,0.14), transparent 32%);
      pointer-events: none;
    }
    .modules-overview-media {
      position: relative;
      overflow: visible;
      isolation: isolate;
      --image-trace-outset: 16px;
      --image-trace-delay: -2.15s;
      border-radius: 30px 30px 0 0;
      border-bottom: 1px solid rgba(212,200,188,0.82);
      line-height: 0;
      transition: transform 0.8s ease;
    }
    .modules-overview-media .image-border-clip {
      position: relative;
      z-index: 2;
      overflow: hidden;
      border-radius: 30px 30px 0 0;
      transform: translateZ(0);
    }
    .modules-overview-media img {
      width: 100%;
      display: block;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: inherit;
      transition: transform 0.8s ease, filter 0.35s ease;
    }
    .modules-overview-card:hover .modules-overview-media img {
      filter: saturate(1.04) contrast(1.03);
    }
    .modules-overview-card:hover .modules-overview-media {
      transform: scale(1.03);
    }
    .modules-overview-body {
      position: relative;
      z-index: 1;
      padding: 1.5rem 1.6rem 1.65rem;
    }
    .modules-overview-label {
      display: block;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-3);
      margin-bottom: 1rem;
    }
    .module-highlights span {
      display: inline-flex;
      align-items: center;
      padding: 0.42rem 0.78rem;
      border-radius: 999px;
      font-size: 0.74rem;
      font-weight: 700;
      line-height: 1;
      border: 1px solid rgba(212,200,188,0.82);
      background: rgba(255,255,255,0.72);
      color: var(--text-2);
    }
    .modules-overview-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin-top: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .modules-overview-stat {
      padding: 0.15rem 1.05rem 0.15rem 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .modules-overview-stat + .modules-overview-stat {
      padding-left: 1.05rem;
      border-left: 1px solid var(--border);
    }
    .modules-overview-stat small {
      display: block;
      margin-bottom: 0.35rem;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .modules-overview-stat strong {
      display: block;
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.25;
      color: var(--text-1);
      letter-spacing: -0.02em;
    }
    .modules-overview-divider {
      border: 0;
      border-top: 1px solid rgba(212,200,188,0.7);
      margin: 1.15rem 0 0.95rem;
    }
    .modules-overview-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 1.8rem;
      row-gap: 0.4rem;
      position: relative;
    }
    .modules-overview-grid::before {
      content: '';
      position: absolute;
      top: 0.15rem;
      bottom: 0.15rem;
      left: 50%;
      width: 1px;
      transform: translateX(-0.9rem);
      background: linear-gradient(180deg, rgba(212,200,188,0), rgba(212,200,188,0.85), rgba(212,200,188,0));
      pointer-events: none;
    }
    .modules-overview-grid-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      min-width: 0;
      position: relative;
      padding: 0.2rem 0 0.95rem;
    }
    .modules-overview-grid-item::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: rgba(212,200,188,0.76);
      pointer-events: none;
    }
    .modules-overview-grid-mark {
      display: inline-block;
      width: 0.42rem;
      height: 0.42rem;
      border-radius: 50%;
      background: var(--accent);
      box-shadow:
        0 0 0 5px rgba(110,33,55,0.05);
      font-size: 0;
      flex-shrink: 0;
    }
    .modules-overview-grid-name {
      font-size: 0.94rem;
      font-weight: 500;
      line-height: 1.35;
      color: var(--text-1);
      letter-spacing: -0.01em;
    }
    @media (prefers-reduced-motion: reduce) {
      .image-border-comet {
        display: none;
      }
    }
    .module-zigzag {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
      gap: clamp(1.75rem, 4vw, 4rem);
      align-items: center;
      padding: clamp(0.9rem, 2.4vw, 1.4rem) 0;
      background: transparent;
      border: none;
      box-shadow: none;
      overflow: visible;
      isolation: isolate;
    }
    .module-zigzag::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -0.6rem;
      height: 1px;
      background: linear-gradient(90deg, rgba(212,200,188,0), rgba(212,200,188,0.78), rgba(212,200,188,0));
      pointer-events: none;
    }
    .module-zigzag:last-of-type::after {
      display: none;
    }
    .module-zigzag.reverse .module-image {
      order: -1;
    }
    .module-text,
    .module-image {
      position: relative;
      z-index: 1;
    }
    .module-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .module-eyebrow {
      display: block;
      margin-bottom: 0.85rem;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .module-title {
      margin: 0 0 0.95rem;
      font-size: clamp(1.9rem, 3vw, 2.7rem);
      line-height: 1.02;
      letter-spacing: -0.04em;
      color: var(--text-1);
    }
    .module-description {
      margin: 0;
      max-width: 50ch;
      font-size: 1rem;
      line-height: 1.75;
      color: var(--text-2);
    }
    .module-highlights {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem 1rem;
      margin-top: 1.15rem;
    }
    .module-resolution {
      margin-top: 1.15rem;
      padding: 0.15rem 0 0.15rem 1rem;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      position: relative;
      max-width: 38rem;
    }
    .module-resolution::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.15rem;
      bottom: 0.15rem;
      width: 2px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(110,33,55,0.92), rgba(200,169,126,0.68));
    }
    .module-resolution small {
      display: block;
      margin-bottom: 0.3rem;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .module-resolution strong {
      display: block;
      font-size: 1rem;
      line-height: 1.45;
      color: var(--text-1);
      letter-spacing: -0.02em;
    }
    .module-image-box {
      position: relative;
      min-height: 360px;
      isolation: isolate;
      --image-trace-outset: 16px;
      border-radius: 34px;
      overflow: visible;
      border: none;
      background: transparent;
      box-shadow: none;
      transition: transform 0.75s ease;
    }
    .module-image-box::before {
      content: '';
      position: absolute;
      inset: 14% 8% -8%;
      border-radius: 38px;
      background:
        radial-gradient(circle at 20% 28%, rgba(110,33,55,0.14), transparent 40%),
        radial-gradient(circle at 80% 78%, rgba(200,169,126,0.18), transparent 42%);
      filter: blur(34px);
      opacity: 0.8;
      pointer-events: none;
    }
    .image-border-clip {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      overflow: hidden;
      transform: translateZ(0);
    }
    .image-border-clip::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow:
        0 0 0 1.05px rgba(110,33,55,0.86),
        0 0 0 2px rgba(110,33,55,0.04);
      z-index: 2;
    }
    .module-image-box .image-border-clip {
      min-height: 360px;
      border-radius: 30px;
      box-shadow:
        0 26px 42px rgba(31,23,32,0.14),
        0 1px 0 rgba(255,255,255,0.35) inset;
    }
    .image-border-orbit {
      position: absolute;
      top: calc(var(--image-trace-outset, 8px) * -1);
      right: calc(var(--image-trace-outset, 8px) * -1);
      bottom: calc(var(--image-trace-outset, 8px) * -1);
      left: calc(var(--image-trace-outset, 8px) * -1);
      width: calc(100% + var(--image-trace-outset, 8px) + var(--image-trace-outset, 8px));
      height: calc(100% + var(--image-trace-outset, 8px) + var(--image-trace-outset, 8px));
      overflow: visible;
      pointer-events: none;
      z-index: 1;
    }
    .image-border-trace {
      display: block;
      opacity: 1;
    }
    .image-border-rail-glow,
    .image-border-base {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .image-border-rail-glow {
      stroke: rgba(110, 33, 55, 0.18);
      stroke-width: 5.4;
      opacity: 0.88;
      filter:
        blur(4.6px)
        drop-shadow(0 0 14px rgba(110,33,55,0.16))
        drop-shadow(0 0 22px rgba(200,169,126,0.1));
    }
    .image-border-base {
      stroke: rgba(110, 33, 55, 0.64);
      stroke-width: 1.34;
      opacity: 1;
    }
    .image-border-comet {
      pointer-events: none;
      opacity: 0.96;
    }
    .image-border-comet-tail-glow {
      fill: rgba(110, 33, 55, 0.22);
      opacity: 0.62;
      filter:
        blur(6.6px)
        drop-shadow(0 0 14px rgba(110,33,55,0.14))
        drop-shadow(0 0 24px rgba(200,169,126,0.08));
    }
    .image-border-comet-tail {
      fill: rgba(110, 33, 55, 0.9);
      opacity: 0.28;
      filter: blur(2.2px);
    }
    .image-border-comet-node-glow {
      fill: rgba(110, 33, 55, 0.4);
      opacity: 0.82;
      filter:
        blur(4.8px)
        drop-shadow(0 0 10px rgba(110,33,55,0.22))
        drop-shadow(0 0 16px rgba(200,169,126,0.12));
    }
    .image-border-comet-node {
      fill: rgba(169, 63, 92, 0.96);
      filter:
        drop-shadow(0 0 4px rgba(244,230,235,0.18))
        drop-shadow(0 0 10px rgba(110,33,55,0.24))
        drop-shadow(0 0 14px rgba(200,169,126,0.14));
    }
    .module-zigzag:nth-of-type(1) .module-image-box { --image-trace-delay: -0.85s; }
    .module-zigzag:nth-of-type(2) .module-image-box { --image-trace-delay: -3.05s; }
    .module-zigzag:nth-of-type(3) .module-image-box { --image-trace-delay: -5.15s; }
    .module-zigzag:nth-of-type(4) .module-image-box { --image-trace-delay: -7.2s; }
    .module-image-box img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: inherit;
      transition: transform 0.75s ease, filter 0.35s ease;
    }
    .module-zigzag:hover .module-image-box img {
      filter: saturate(1.05) contrast(1.04);
    }
    .module-zigzag:hover .module-image-box {
      transform: scale(1.04);
    }
    .module-highlights span {
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-2);
      letter-spacing: -0.01em;
    }
    .module-highlights span + span::before {
      content: '/';
      display: inline-block;
      margin-right: 0.85rem;
      color: rgba(110,33,55,0.42);
      font-weight: 500;
    }
    .modules-complementary {
      position: relative;
      padding: clamp(1.8rem, 3.4vw, 2.6rem);
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 38%),
        linear-gradient(145deg, rgba(244,237,229,0.88), rgba(255,252,248,0.97));
      border: 1px solid rgba(212,200,188,0.64);
      box-shadow:
        0 26px 50px rgba(31,23,32,0.08),
        0 1px 0 rgba(255,255,255,0.45) inset;
      overflow: hidden;
    }
    .modules-complementary::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(circle at top left, rgba(110,33,55,0.05), transparent 34%),
        radial-gradient(circle at bottom right, rgba(200,169,126,0.08), transparent 32%);
      pointer-events: none;
    }
    .modules-complementary-head {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: clamp(1.4rem, 3vw, 3.2rem);
      align-items: end;
      margin-bottom: 1.75rem;
    }
    .modules-complementary-head span {
      display: block;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-3);
      margin-bottom: 0.45rem;
    }
    .modules-complementary-copy {
      max-width: 32rem;
    }
    .modules-complementary-head p {
      max-width: 37rem;
      margin: 0;
      padding-top: 0.15rem;
      font-size: 1rem;
      line-height: 1.72;
      color: var(--text-2);
    }
    .modules-complementary-band {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      padding-top: 1.55rem;
      border-top: 1px solid rgba(212,200,188,0.56);
    }
    .modules-complementary-column {
      padding: 0.2rem 1.4rem 0.15rem;
      min-width: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    .modules-complementary-column + .modules-complementary-column {
      border-left: 1px solid rgba(212,200,188,0.56);
    }
    .modules-complementary-column:first-child {
      padding-left: 0;
    }
    .modules-complementary-column:last-child {
      padding-right: 0;
    }
    .modules-complementary-column small {
      display: block;
      margin-bottom: 0.5rem;
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .modules-complementary-column h3 {
      margin: 0 0 0.7rem;
      font-size: 1.14rem;
      line-height: 1.2;
      font-weight: 700;
      color: var(--text-1);
      letter-spacing: -0.02em;
    }
    .modules-complementary-column p {
      margin: 0;
      font-size: 0.92rem;
      line-height: 1.72;
      color: var(--text-2);
    }
    @media (max-width: 1100px) {
      .modules-intro-split,
      .module-zigzag {
        grid-template-columns: 1fr;
      }
      .modules-intro-copy .lead,
      .module-description,
      .modules-complementary-head p {
        max-width: none;
      }
      .module-zigzag.reverse .module-image,
      .module-image {
        order: -1;
      }
      .modules-overview-stats,
      .modules-complementary-band {
        grid-template-columns: 1fr;
      }
      .modules-complementary-column {
        padding-inline: 0;
        padding-block: 1rem;
      }
      .modules-complementary-column:first-child {
        padding-top: 0.2rem;
      }
      .modules-complementary-column:last-child {
        padding-bottom: 0.15rem;
      }
      .modules-complementary-column + .modules-complementary-column {
        border-left: 0;
        border-top: 1px solid rgba(212,200,188,0.56);
      }
    }
    @media (max-width: 768px) {
      .modules-intro-copy h2 {
        max-width: none;
      }
      .modules-overview-body,
      .modules-complementary {
        padding-inline: 1rem;
      }
      .module-zigzag {
        padding: 1rem;
      }
      .module-image-box {
        min-height: 280px;
      }
      .modules-complementary-head {
        grid-template-columns: 1fr;
        gap: 0.9rem;
      }
      .modules-overview-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
      }
      .modules-overview-grid::before {
        display: none;
      }
    }

@media (max-width: 1024px) {
        .flujo-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
        .flujo-card + .flujo-card::before {
          display: none;
        }
        .flujo-card {
          border-top: 1px solid rgba(212,200,188,0.46);
        }
        .flujo-card:nth-child(-n+2) {
          border-top: 0;
        }
        .flujo-card:nth-child(even)::before {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 1.35rem;
          bottom: 1.35rem;
          width: 1px;
          background: linear-gradient(180deg, transparent, rgba(212,200,188,0.72) 16%, rgba(212,200,188,0.42) 80%, transparent);
        }
      }
      @media (max-width: 768px) {
        .flujo-header-split { grid-template-columns: 1fr !important; }
        .flujo-cards-grid { grid-template-columns: 1fr !important; }
        .flujo-card + .flujo-card::before,
        .flujo-card:nth-child(even)::before {
          display: none;
        }
        .flujo-card {
          border-top: 1px solid rgba(212,200,188,0.46);
        }
        .flujo-card:first-child {
          border-top: 0;
        }
      }

    /* ─── EXTRACTED INLINE STYLES ─── */
    .bar-h-35 { height: 35%; }
    .bar-h-40 { height: 40%; }
    .bar-h-45 { height: 45%; }
    .bar-h-50 { height: 50%; }
    .bar-h-55 { height: 55%; }
    .bar-h-60 { height: 60%; }
    .bar-h-65 { height: 65%; }
    .bar-h-70 { height: 70%; }
    .bar-h-75 { height: 75%; }
    .bar-h-80 { height: 80%; }
    .bar-h-90 { height: 90%; }
    .bar-h-100 { height: 100%; }

    .mock-right-title-spaced {
      margin-top: 0.5rem;
    }

    .problem-split {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: clamp(3rem, 5vw, 6rem);
      align-items: start;
    }
    .problem-copy-sticky {
      position: sticky;
      top: 100px;
    }
    .problem-label {
      display: inline-block;
      padding: 0;
      margin-bottom: 1.1rem;
      background: none;
      border: 0;
      border-radius: 0;
      color: var(--accent);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      box-shadow: none;
    }
    .problem-title {
      margin-bottom: 1.25rem;
    }
    .problem-cards {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .problem-card {
      padding-block: 1.5rem;
    }
    .problem-card-head {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      column-gap: 0.75rem;
      justify-content: start;
      margin-bottom: 0.35rem;
    }
    .problem-card-dot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }
    .problem-card-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-1);
      margin: 0;
      line-height: 1.2;
      letter-spacing: -0.01em;
      text-align: left;
      justify-self: start;
    }
    .problem-card-copy {
      font-size: 0.875rem;
      color: var(--text-2);
      line-height: 1.7;
      margin: 0;
    }
    .problem-separator {
      border: 0;
      border-top: 1px solid var(--border);
      margin: 0;
    }

    .modules-complementary-title {
      margin: 0;
      font-size: clamp(1.4rem, 2.5vw, 2rem);
      letter-spacing: -0.03em;
      color: var(--text-1);
    }

    .flow-label,
    .contact-label {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 0.38rem 0.86rem;
      margin-bottom: 1.15rem;
      border: 1px solid rgba(110,33,55,0.10);
      background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(110,33,55,0.035));
      color: rgba(110,33,55,0.82);
      box-shadow: none;
      letter-spacing: 0.15em;
      font-weight: 700;
    }

    .flujo-header-split {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: clamp(2.9rem, 5vw, 6rem);
      align-items: end;
      margin-bottom: clamp(3.8rem, 5.8vw, 5.4rem);
    }
    .flujo-title {
      margin-bottom: 0;
    }
    .flujo-lead {
      margin: 0;
      max-width: 36rem;
      padding-bottom: 0.15rem;
      font-size: 1rem;
      line-height: 1.72;
      color: var(--text-2);
    }
    .flujo-cards-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      padding-top: 1.95rem;
      border-radius: 32px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0) 32%),
        linear-gradient(140deg, rgba(248,242,235,0.92), rgba(255,252,248,0.98) 58%, rgba(248,242,235,0.9));
      border: 1px solid rgba(212,200,188,0.28);
      box-shadow:
        0 22px 44px rgba(31,23,32,0.05),
        0 1px 0 rgba(255,255,255,0.55) inset;
      overflow: hidden;
      isolation: isolate;
    }
    .flujo-cards-grid::before {
      content: '';
      position: absolute;
      left: clamp(1.4rem, 2.5vw, 2rem);
      right: clamp(1.4rem, 2.5vw, 2rem);
      top: 1.08rem;
      height: 1px;
      background: linear-gradient(90deg, rgba(110,33,55,0.08), rgba(110,33,55,0.28) 16%, rgba(200,169,126,0.42) 36%, rgba(110,33,55,0.24) 64%, rgba(110,33,55,0.08));
      pointer-events: none;
    }
    .flujo-cards-grid::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.22), transparent 20%),
        radial-gradient(circle at 12% 16%, rgba(110,33,55,0.04), transparent 22%),
        radial-gradient(circle at 88% 78%, rgba(200,169,126,0.08), transparent 26%);
      pointer-events: none;
    }
    .flujo-card {
      background: transparent;
      padding: 2.45rem 1.8rem 1.95rem;
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
      min-width: 0;
      min-height: 100%;
      box-shadow: none;
      border-radius: 0;
      overflow: hidden;
    }
    .flujo-card + .flujo-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 1.35rem;
      bottom: 1.35rem;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(212,200,188,0.74) 16%, rgba(212,200,188,0.46) 80%, transparent);
    }
    .flujo-card-accent {
      background:
        linear-gradient(180deg, rgba(110,33,55,0.075), rgba(110,33,55,0.03) 58%, rgba(255,255,255,0));
    }
    .flujo-card-accent::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 72% 18%, rgba(200,169,126,0.14), transparent 34%);
      pointer-events: none;
    }
    .flujo-card-topbar {
      position: absolute;
      top: 0.83rem;
      left: 1.8rem;
      width: 2.6rem;
      height: 0.5rem;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(110,33,55,0.02), rgba(110,33,55,0.18) 30%, rgba(200,169,126,0.68) 78%, rgba(255,248,241,0.98) 100%);
      filter: saturate(108%);
    }
    .flujo-card-topbar::after {
      content: '';
      position: absolute;
      right: -0.08rem;
      top: 50%;
      width: 0.48rem;
      height: 0.48rem;
      border-radius: 50%;
      transform: translateY(-50%);
      background: radial-gradient(circle at 36% 34%, rgba(255,249,244,1), rgba(200,169,126,0.9) 48%, rgba(110,33,55,0.9) 100%);
      box-shadow:
        0 0 0 6px rgba(110,33,55,0.05),
        0 0 14px rgba(110,33,55,0.16);
    }
    .flujo-card-topbar-accent {
      background: linear-gradient(90deg, rgba(110,33,55,0.04), rgba(110,33,55,0.24) 24%, rgba(200,169,126,0.72) 74%, rgba(255,249,244,1) 100%);
    }
    .flujo-card-topbar-accent::after {
      box-shadow:
        0 0 0 7px rgba(110,33,55,0.06),
        0 0 16px rgba(110,33,55,0.18);
    }
    .flujo-card-step {
      font-size: clamp(2.85rem, 3.4vw, 3.5rem);
      font-weight: 700;
      letter-spacing: -0.05em;
      line-height: 1;
      color: var(--accent);
      opacity: 0.16;
      margin-bottom: 1.15rem;
      display: block;
    }
    .flujo-card-step-accent {
      opacity: 0.22;
    }
    .flujo-card-title {
      font-size: 1.02rem;
      font-weight: 700;
      color: var(--text-1);
      margin-bottom: 0.7rem;
      letter-spacing: -0.01em;
    }
    .flujo-card-copy {
      max-width: 25ch;
      font-size: 0.86rem;
      color: var(--text-2);
      line-height: 1.72;
      margin-bottom: 1.55rem;
      flex: 1;
    }
    .flujo-card-tag {
      display: inline-flex;
      align-self: flex-start;
      padding: 0.32rem 0.72rem;
      border-radius: 999px;
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.46);
      border: 1px solid rgba(212,200,188,0.72);
      color: var(--text-2);
      backdrop-filter: blur(8px);
    }
    .flujo-card-tag-accent {
      background: rgba(110,33,55,0.10);
      border-color: var(--accent-ring);
      color: var(--accent);
    }

    .form-lead {
      margin-top: 1.35rem;
    }
    .form-honeypot {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .form-optional {
      color: var(--text-3);
      font-weight: 600;
    }
    .form-panel .btn.form-submit-full {
      width: 100%;
      justify-content: center;
      min-height: 54px;
      margin-top: 0.35rem;
      border-radius: 14px;
      border: 1px solid rgba(110,33,55,0.95);
      background: linear-gradient(180deg, rgba(124,37,62,1), rgba(110,33,55,1));
      color: #fff;
      box-shadow:
        0 16px 28px rgba(110,33,55,0.18),
        0 1px 0 rgba(255,255,255,0.12) inset;
    }
    .form-panel .btn.form-submit-full:hover {
      background: linear-gradient(180deg, rgba(131,40,66,1), rgba(114,34,57,1));
      border-color: rgba(110,33,55,1);
    }
    .form-panel .btn.form-submit-full:disabled {
      cursor: wait;
      opacity: 0.88;
      box-shadow:
        0 10px 18px rgba(110,33,55,0.14),
        0 1px 0 rgba(255,255,255,0.1) inset;
    }
    .form-msg {
      display: none;
      margin-top: 0.75rem;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-2);
      text-align: center;
    }
    .form-msg.is-success {
      color: #1f7a4f;
    }
    .form-msg.is-error {
      color: var(--accent);
    }

    @media (max-width: 768px) {
      .problem-split {
        grid-template-columns: 1fr !important;
      }
      .problem-copy-sticky {
        position: static !important;
      }
    }