:root {
        /* Backgrounds */
        --bg: oklch(9% 0.015 265);
        --bg2: oklch(13% 0.018 265);
        --bg3: oklch(16% 0.02 265);
        /* Text */
        --ink: oklch(96% 0.008 265);
        --ink2: oklch(78% 0.025 265);
        --ink3: oklch(52% 0.02 265);
        /* Blue (brand / world) */
        --blue: oklch(62% 0.18 250);
        --blue-lt: oklch(76% 0.14 250);
        --blue-dim: oklch(40% 0.1 250);
        /* Amber (warmth / CTA) */
        --amber: oklch(78% 0.17 75);
        --amber-lt: oklch(88% 0.13 75);
        /* Coral: el ÚNICO color de acción primaria (Coral-Leads Rule, DESIGN.md).
           Amber queda para labels, tags y botón secundario. */
        --coral: #f56462;
        --coral-dark: #e04d4b;
        /* Asterisco de campos requeridos (antes var(--accent) sin definir) */
        --accent: var(--amber);
        /* Legacy aliases kept for JS/existing code compatibility */
        /* Restored to match the hardcoded rgba() companions used alongside these
     vars throughout the file (badges, ATS score ring, status pills) —
     all five were collapsed onto the blue scale, which silently broke
     every badge/text pairing that combined var(--x) with its own rgba(). */
        --green: #22c55e;
        --green-lt: #4ade80;
        --pink: #ff2d78;
        --cyan: var(--blue-lt);
        --purple: var(--blue-dim);
        --yellow: oklch(
          88% 0.13 75
        ); /* was wrongly aliased to blue-lt; gold/CTA call sites (plan-ribbon.gold, mrg-send, addon pricing) need amber */
        --text: oklch(78% 0.025 265);
        /* Surfaces */
        --glass: oklch(60% 0.12 250 / 0.07);
        --border: oklch(60% 0.12 250 / 0.18);
        /* Motion */
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        /* Typography */
        --font-display: "Bricolage Grotesque", system-ui, sans-serif;
        --font-body: "Sora", system-ui, sans-serif;
        --font-mono: ui-monospace, "Cascadia Code", monospace;
        --serif: var(--font-display);
        --sans: var(--font-body);
        --mono: var(--font-mono);
        /* Spacing (4pt base) */
        --sp-1: 4px;
        --sp-2: 8px;
        --sp-3: 12px;
        --sp-4: 16px;
        --sp-6: 24px;
        --sp-8: 32px;
        --sp-12: 48px;
        --sp-16: 64px;
        --sp-24: 96px;
      }
      html,
      body {
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .display {
        font-family: var(--font-display);
        text-wrap: balance;
        font-optical-sizing: auto;
      }
      h1 {
        font-size: clamp(2.75rem, 7vw, 6rem);
        font-weight: 800;
        line-height: 1.02;
        letter-spacing: -0.04em;
      }
      h2 {
        font-size: clamp(1.75rem, 4vw, 3rem);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.025em;
        color: var(--ink);
      }
      h3 {
        font-size: clamp(1.125rem, 2.5vw, 1.5rem);
        font-weight: 600;
      }
      p {
        max-width: 65ch;
      }
      .mono {
        font-family: var(--font-mono);
        font-size: 0.8125rem;
        letter-spacing: 0.04em;
      }
      .label {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .logo {
        font-family: var(--font-display);
        letter-spacing: 0.06em !important;
        font-weight: 800 !important;
        text-transform: uppercase;
      }
      button {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 14px;
      }
      .bp {
        background: var(--coral) !important;
        border: none !important;
        color: oklch(15% 0.015 265) !important;
        font-family: var(--font-display) !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        letter-spacing: 0.05em !important;
        padding: 15px 36px !important;
        cursor: pointer !important;
        border-radius: 50px !important;
        box-shadow: 0 2px 12px rgba(245, 100, 98, 0.25) !important;
        transition:
          opacity 0.15s,
          box-shadow 0.15s,
          transform 0.1s !important;
      }
      .bp:active {
        transform: scale(0.97) !important;
        box-shadow: none !important;
      }
      .bp:hover {
        background: var(--coral-dark) !important;
        opacity: 1 !important;
        box-shadow: 0 4px 24px rgba(245, 100, 98, 0.45) !important;
      }
      nav {
        background: oklch(8% 0.015 265 / 0.96) !important;
        border-bottom: 1px solid var(--border) !important;
        backdrop-filter: blur(24px) !important;
      }
      .logo {
        color: var(--blue-lt) !important;
        -webkit-text-fill-color: var(--blue-lt) !important;
      }
      .nav-tab {
        color: oklch(78% 0.025 265 / 0.7) !important;
        font-family: var(--font-body) !important;
      }
      .nav-tab:hover,
      .nav-tab.active {
        color: var(--blue-lt) !important;
      }
      .activity-bar {
        background: oklch(62% 0.18 250 / 0.06) !important;
        border-bottom: 1px solid oklch(62% 0.18 250 / 0.1) !important;
      }
      input,
      select,
      textarea {
        background: oklch(13% 0.02 265 / 0.9) !important;
        border: 1px solid oklch(60% 0.18 250 / 0.22) !important;
        color: var(--ink) !important;
        font-family: var(--font-body) !important;
      }
      input::placeholder,
      textarea::placeholder {
        color: oklch(52% 0.02 265 / 0.5) !important;
      }
      .hero {
        background: transparent !important;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        background: var(--bg);
      }
      body {
        background: radial-gradient(
          ellipse at 50% 0%,
          oklch(42% 0.22 270) 0%,
          oklch(32% 0.2 268) 40%,
          oklch(18% 0.15 265) 75%,
          var(--bg) 100%
        );
        background-attachment: fixed;
        color: var(--ink);
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
      }
      nav,
      main,
      section,
      footer,
      .page {
        position: relative;
        z-index: 1;
      }
      #gb35-bg-particles {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        z-index: 0;
        pointer-events: none;
      }
      * {
        box-sizing: border-box;
      }
      img,
      video {
        max-width: 100%;
        height: auto;
      }
      body::before {
        display: none;
      }
      /* Restore keyboard focus for all inputs/selects — outline:none kills this globally */
      *:focus-visible {
        outline: 2px solid var(--amber);
        outline-offset: 2px;
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto !important;
        }
        @keyframes u-gentle-pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.45; }
        }
        .gb35-skel,
        .ind-skeleton,
        .job-new {
          animation: u-gentle-pulse 1.6s ease infinite !important;
        }
      }

      /* NAV */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        padding: 0 48px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(18, 16, 14, 0.97);
        border-bottom: 1px solid rgba(245, 158, 11, 0.15);
        backdrop-filter: blur(20px);
      }
      .logo {
        font-family: var(--font-display);
        font-size: 26px;
        font-weight: 900;
        letter-spacing: 1px;
        cursor: pointer;
        color: var(--amber);
        -webkit-text-fill-color: var(--amber);
      }
      .logo small {
        font-family: var(--font-mono);
        font-size: 8px;
        -webkit-text-fill-color: rgba(96, 165, 250, 0.45);
        letter-spacing: 3px;
        display: block;
        margin-top: -2px;
      }
      .nav-center {
        display: flex;
      }
      .nav-tab {
        padding: 0 14px;
        height: 64px;
        display: flex;
        align-items: center;
        font-size: 13px;
        font-weight: 600;
        font-family: var(--font-body);
        color: var(--ink2);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color 0.2s;
        background: none;
        border-top: none;
        border-left: none;
        border-right: none;
      }
      .nav-tab:hover {
        color: var(--amber);
      }
      .nav-tab.active {
        color: var(--amber);
        border-bottom-color: var(--amber);
      }
      .nav-more {
        position: relative;
        height: 64px;
        display: flex;
        align-items: center;
      }
      .nav-more-btn {
        padding: 0 14px;
        height: 64px;
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        font-weight: 600;
        font-family: var(--font-body);
        color: var(--ink2);
        cursor: pointer;
        background: none;
        border: none;
      }
      .nav-more-btn:hover {
        color: var(--amber);
      }
      .nav-more-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 64px;
        left: 0;
        min-width: 170px;
        background: rgba(18, 16, 14, 0.97);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(245, 158, 11, 0.15);
        border-radius: 10px;
        padding: 6px;
        z-index: 300;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
      }
      .nav-more.open .nav-more-menu {
        display: flex;
      }
      .nav-more-menu .nav-tab {
        height: auto;
        padding: 10px 14px;
        border-bottom: none;
        border-radius: 6px;
        justify-content: flex-start;
      }
      .nav-more-menu .nav-tab:hover {
        background: rgba(245, 158, 11, 0.08);
      }
      .nav-right {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .nav-employer-divider {
        width: 1px;
        height: 28px;
        background: rgba(245, 158, 11, 0.2);
        margin: 0 4px;
      }
      .lang-btn {
        background: rgba(180, 83, 9, 0.06);
        border: 1px solid rgba(180, 83, 9, 0.15);
        border-radius: 20px;
        padding: 5px 14px;
        font-size: 12px;
        color: var(--ink2);
        cursor: pointer;
        font-family: var(--font-body);
        font-weight: 600;
        transition:
          border-color 0.2s,
          color 0.2s;
      }
      .lang-btn:hover {
        border-color: var(--amber);
        color: var(--amber);
      }
      .btn-login {
        background: transparent;
        border: 1.5px solid rgba(180, 83, 9, 0.25);
        border-radius: 50px;
        padding: 8px 18px;
        font-size: 13px;
        color: var(--ink2);
        cursor: pointer;
        transition:
          border-color 0.2s,
          color 0.2s;
        font-family: var(--font-body);
        font-weight: 700;
      }
      .btn-login:hover {
        border-color: var(--amber);
        color: var(--amber);
      }
      .btn-cta {
        background: var(--coral);
        border: none;
        border-radius: 50px;
        padding: 8px 22px;
        font-size: 13px;
        color: oklch(15% 0.015 265);
        cursor: pointer;
        font-weight: 800;
        font-family: var(--font-body);
        position: relative;
        overflow: hidden;
        transition:
          transform 0.2s var(--ease-out),
          box-shadow 0.2s ease,
          background 0.2s ease;
      }
      .btn-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(255, 255, 255, 0.25) 50%,
          transparent 100%
        );
        transform: translateX(-100%);
        transition: transform 0.5s ease;
      }
      @media (hover: hover) and (pointer: fine) {
        .btn-cta:hover::before {
          transform: translateX(100%);
        }
      }
      @media (hover: hover) and (pointer: fine) {
        .btn-cta:hover {
          transform: translateY(-3px) scale(1.02);
        }
      }
      .btn-cta:hover {
        box-shadow: 0 8px 30px rgba(245, 158, 11, 0.45);
        background: var(--amber);
      }
      .btn-cta:active {
        transform: translateY(-1px) scale(0.99);
      }

      .page {
        display: none;
        padding-top: 64px;
      }
      .page.active {
        display: block;
        animation: page-in 240ms cubic-bezier(0.23, 1, 0.32, 1);
      }
      @keyframes page-in {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* TICKER — static, no infinite scroll */
      .ticker {
        background: rgba(96, 165, 250, 0.04);
        border-bottom: 1px solid var(--border);
        padding: 10px 24px;
      }
      .ticker-inner {
        display: flex;
        gap: 28px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .ti {
        font-family: var(--font-mono);
        font-size: 10px;
        color: rgba(96, 165, 250, 0.55);
        letter-spacing: 2px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .td {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--cyan);
      }

      /* HERO */
      .hero {
        min-height: calc(100vh - 64px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 48px;
        text-align: center;
        position: relative;
        z-index: 1;
        flex-direction: column;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(96, 165, 250, 0.07);
        border: 1px solid rgba(96, 165, 250, 0.22);
        border-radius: 20px;
        padding: 7px 20px;
        margin-bottom: 32px;
        font-size: 11px;
        color: var(--cyan);
        letter-spacing: 3px;
        font-family: var(--font-mono);
      }
      .live {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 8px var(--cyan);
        animation: blink 3s infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      h1.ht {
        font-family: var(--font-display);
        font-weight: 900;
        font-size: clamp(44px, 7vw, 88px);
        letter-spacing: -0.5px;
        line-height: 0.9;
        letter-spacing: 2px;
        margin-bottom: 20px;
      }
      .hw {
        color: var(--ink);
        display: block;
      }
      .hc {
        color: var(--amber);
        display: block;
      }

      .hero-sub {
        font-size: 16px;
        color: var(--text);
        max-width: 540px;
        margin: 0 auto 36px;
        line-height: 1.75;
      }
      .hero-sub strong {
        color: var(--cyan);
      }
      .hero-btns {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 56px;
      }
      .bg {
        background: transparent;
        color: var(--ink2);
        padding: 15px 36px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.15);
        transition:
          border-color 0.3s,
          color 0.3s;
      }
      .bg:hover {
        border-color: var(--cyan);
        color: var(--cyan);
      }
      /* SECTIONS */
      .sec {
        padding: 88px 48px;
        position: relative;
        z-index: 1;
      }
      .salary-row {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 16px 6px;
        cursor: pointer;
        transition: background 0.2s;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .salary-row:hover,
      .salary-row:focus-visible {
        background: rgba(255, 255, 255, 0.03);
        outline: none;
      }
      .salary-row:focus-visible {
        box-shadow: inset 0 0 0 2px var(--amber);
      }
      .sec-tag {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--amber);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        width: fit-content;
      }
      .sec-tag::before {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--amber);
        flex-shrink: 0;
      }
      .sec h2 {
        font-family: var(--font-display);
        font-size: clamp(28px, 4vw, 52px);
        font-weight: 800;
        letter-spacing: -1px;
        margin-bottom: 10px;
        line-height: 1.1;
      }
      .lead {
        color: var(--text);
        font-size: 15px;
        max-width: 520px;
        line-height: 1.75;
        margin-bottom: 48px;
      }
      .divider {
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--border),
          transparent
        );
        margin: 0 48px;
      }

      /* ══ SECTORES — EL CORAZON ══ */
      .sectors-hero {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 20px;
      }
      .sector-card {
        border-radius: 16px;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: var(--glass);
        cursor: pointer;
        position: relative;
        /* transition lives on the .stat-card,.sector-card,.mrg-card
           scroll-stagger rule below — it comes later in the cascade
           and would silently win over one declared here */
      }
      @media (hover: hover) and (pointer: fine) {
        .sector-card:hover {
          transform: translateY(-6px);
          border-color: var(--sc);
          box-shadow: 0 24px 50px -16px var(--sc);
        }
      }
      .sector-card:hover .sc-header {
        background: linear-gradient(135deg, var(--sc) 22, transparent);
      }
      .sc-photo {
        width: 100%;
        height: 140px;
        overflow: hidden;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }
      .sc-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(0.85);
        transition:
          transform 0.6s ease,
          filter 0.4s;
      }
      .sector-card:hover .sc-photo img {
        transform: scale(1.06);
        filter: saturate(1.1);
      }
      .sc-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(3, 5, 15, 0) 30%,
          rgba(3, 5, 15, 0.92)
        );
      }
      .sc-photo-emoji {
        position: absolute;
        top: 14px;
        right: 14px;
        font-size: 36px;
        z-index: 2;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
      }
      .sc-header {
        padding: 24px 24px 16px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: background 0.3s;
      }
      .sc-left {
        display: flex;
        gap: 14px;
        align-items: flex-start;
      }
      .sc-icon {
        font-size: 40px;
        line-height: 1;
      }
      .sc-name {
        font-family: var(--font-display);
        font-size: 28px;
        letter-spacing: 2px;
        color: #fff;
        line-height: 1;
        margin-bottom: 4px;
      }
      .sc-type {
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 3px;
        color: var(--sc);
        background: rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        padding: 3px 10px;
        display: inline-block;
      }
      .sc-wage {
        text-align: right;
      }
      .sc-wage-num {
        font-family: var(--font-display);
        font-size: 38px;
        letter-spacing: 1px;
        color: var(--sc);
        line-height: 1;
        text-shadow: 0 0 20px var(--sc);
      }
      .sc-wage-label {
        font-size: 10px;
        color: var(--ink3);
        font-family: var(--font-mono);
        letter-spacing: 2px;
        display: block;
      }
      .sc-monthly {
        font-size: 13px;
        color: var(--ink2);
        margin-top: 2px;
        font-family: var(--font-mono);
      }

      .sc-body {
        padding: 16px 24px;
      }
      .sc-season {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        padding: 8px 12px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.03);
        font-size: 12px;
        color: var(--ink2);
      }
      .sc-season strong {
        color: var(--sc);
      }
      .sc-tasks {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-bottom: 14px;
      }
      .sc-task {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.55);
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .sc-task::before {
        content: "›";
        color: var(--sc);
        flex-shrink: 0;
        font-weight: 700;
      }
      .sc-states {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .sc-state {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 3px 10px;
        font-size: 11px;
        color: var(--ink3);
      }
      .sc-footer {
        padding: 14px 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .sc-companies {
        font-size: 12px;
        color: var(--ink3);
        font-family: var(--font-mono);
      }
      .sc-companies strong {
        color: var(--sc);
      }
      .sc-apply {
        background: var(--sc);
        border: none;
        border-radius: 6px;
        padding: 7px 16px;
        font-size: 12px;
        font-weight: 700;
        color: #000;
        cursor: pointer;
        transition:
          opacity 0.3s,
          transform 0.3s;
      }
      .sc-apply:hover {
        opacity: 0.85;
        transform: scale(1.05);
      }
      .sc-earning {
        position: absolute;
        top: 16px;
        right: 16px;
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid var(--sc);
        border-radius: 6px;
        padding: 4px 10px;
        font-family: var(--font-body);
        font-size: 13px;
        letter-spacing: 2px;
        color: var(--sc);
      }

      /* ══ MR.G AGENT ══ */
      .mrg-section {
        background: linear-gradient(
          135deg,
          rgba(250, 204, 21, 0.05),
          rgba(59, 130, 246, 0.05)
        );
        border-top: 1px solid rgba(250, 204, 21, 0.15);
        border-bottom: 1px solid rgba(250, 204, 21, 0.15);
      }
      .mrg-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 40px;
        align-items: center;
      }
      .mrg-left {
      }
      .mrg-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(250, 204, 21, 0.1);
        border: 1px solid rgba(250, 204, 21, 0.3);
        border-radius: 20px;
        padding: 6px 16px;
        margin-bottom: 20px;
        font-size: 10px;
        color: var(--yellow);
        letter-spacing: 3px;
        font-family: var(--font-mono);
      }
      .mrg-title {
        font-family: var(--font-display);
        font-size: clamp(48px, 6vw, 80px);
        letter-spacing: 2px;
        line-height: 0.9;
        margin-bottom: 16px;
      }
      .mrg-sub {
        font-size: 15px;
        color: var(--text);
        line-height: 1.75;
        margin-bottom: 24px;
        max-width: 480px;
      }
      .mrg-powers {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 28px;
      }
      .mrg-power {
        border: 1px solid rgba(250, 204, 21, 0.12);
        border-radius: 10px;
        padding: 14px 16px;
        background: rgba(250, 204, 21, 0.04);
      }
      .mrg-power-icon {
        font-size: 20px;
        margin-bottom: 6px;
      }
      .mrg-power-title {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 4px;
        color: #fff;
      }
      .mrg-power-desc {
        font-size: 12px;
        color: var(--text);
        line-height: 1.4;
      }

      /* MR.G CHAT */
      .mrg-chat {
        border: 1px solid rgba(250, 204, 21, 0.25);
        border-radius: 20px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 60px rgba(250, 204, 21, 0.1);
      }
      .mrg-chat-header {
        padding: 16px 20px;
        background: linear-gradient(
          135deg,
          rgba(250, 204, 21, 0.15),
          rgba(59, 130, 246, 0.1)
        );
        border-bottom: 1px solid rgba(250, 204, 21, 0.15);
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .mrg-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--yellow), var(--purple));
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 18px;
        color: #000;
        letter-spacing: 1px;
        box-shadow: 0 0 16px rgba(250, 204, 21, 0.5);
        flex-shrink: 0;
      }
      .mrg-header-info {
      }
      .mrg-header-name {
        font-weight: 700;
        font-size: 15px;
        color: #fff;
      }
      .mrg-header-status {
        font-size: 11px;
        color: var(--yellow);
        font-family: var(--font-mono);
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .mrg-header-status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--yellow);
        box-shadow: 0 0 6px var(--yellow);
      }
      .mrg-chat-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-height: 380px;
        max-height: 420px;
        overflow-y: auto;
      }
      .msg {
        max-width: 85%;
        padding: 12px 16px;
        border-radius: 14px;
        font-size: 13px;
        line-height: 1.6;
      }
      .msg.user {
        background: rgba(59, 130, 246, 0.15);
        border: 1px solid rgba(59, 130, 246, 0.2);
        color: rgba(255, 255, 255, 0.85);
        align-self: flex-end;
        border-bottom-right-radius: 4px;
      }
      .msg.mrg {
        background: rgba(250, 204, 21, 0.08);
        border: 1px solid rgba(250, 204, 21, 0.15);
        color: rgba(255, 255, 255, 0.85);
        align-self: flex-start;
        border-bottom-left-radius: 4px;
      }
      .msg.mrg strong {
        color: var(--yellow);
      }
      .msg-avatar {
        font-size: 14px;
        font-family: var(--font-body);
        letter-spacing: 1px;
        color: var(--yellow);
        margin-bottom: 4px;
        font-size: 10px;
      }
      .mrg-chat-input {
        padding: 14px 20px;
        border-top: 1px solid rgba(250, 204, 21, 0.1);
        display: flex;
        gap: 8px;
      }
      .mrg-input {
        flex: 1;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(250, 204, 21, 0.2);
        border-radius: 10px;
        padding: 11px 14px;
        color: #fff;
        font-size: 13px;
        font-family: var(--font-body);
        outline: none;
        transition: border-color 0.3s;
      }
      .mrg-input:focus {
        border-color: var(--yellow);
      }
      .mrg-send {
        background: var(--amber);
        border: none;
        border-radius: 10px;
        padding: 11px 18px;
        cursor: pointer;
        font-size: 16px;
        box-shadow: 0 0 16px rgba(250, 204, 21, 0.3);
        transition: box-shadow 0.3s;
      }
      .mrg-send:hover {
        box-shadow: 0 0 24px rgba(250, 204, 21, 0.5);
      }
      .mrg-addon {
        margin: 0 20px 16px;
        padding: 12px 16px;
        border-radius: 10px;
        background: rgba(255, 45, 120, 0.08);
        border: 1px solid rgba(255, 45, 120, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .mrg-addon-text {
        font-size: 12px;
        color: var(--ink2);
      }
      .mrg-addon-text strong {
        color: var(--pink);
      }
      .mrg-addon-btn {
        background: var(--amber);
        border: none;
        border-radius: 6px;
        padding: 8px 16px;
        font-size: 12px;
        color: oklch(15% 0.015 265);
        cursor: pointer;
        font-weight: 600;
        white-space: nowrap;
      }

      /* PLANES */
      .plan {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 36px 26px;
        background: var(--glass);
        position: relative;
        overflow: hidden;
        transition: transform 0.3s;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
      }
      @media (hover: hover) and (pointer: fine) {
        .plan:hover {
          transform: translateY(-4px);
        }
      }
      .plan.featured {
        border-color: var(--pink);
        box-shadow: 0 4px 40px rgba(96, 165, 250, 0.2);
      }
      .plan.master {
        border-color: var(--yellow);
        box-shadow: 0 4px 40px rgba(147, 197, 253, 0.15);
      }
      .plan-ribbon {
        position: absolute;
        top: 16px;
        right: -30px;
        background: var(--blue);
        color: #fff;
        font-size: 8px;
        letter-spacing: 3px;
        padding: 5px 44px;
        transform: rotate(45deg);
        font-family: var(--font-mono);
      }
      .plan-ribbon.gold {
        background: var(--amber);
        color: oklch(15% 0.015 265);
      }
      .plan-name {
        font-family: var(--font-display);
        font-size: 26px;
        letter-spacing: 4px;
        margin-bottom: 4px;
      }
      .plan-price {
        font-family: var(--font-display);
        font-size: 50px;
        letter-spacing: 2px;
        line-height: 1;
        margin-bottom: 2px;
      }
      .plan-period {
        font-size: 11px;
        color: var(--ink3);
        font-family: var(--font-mono);
        margin-bottom: 10px;
      }
      .plan-emails {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 20px;
        padding: 8px 12px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.04);
        font-size: 12px;
        color: var(--ink2);
      }
      .plan-emails strong {
        color: #fff;
        font-size: 13px;
      }
      .plan-features {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-bottom: 24px;
      }
      .plan-features li {
        font-size: 12px;
        color: var(--ink2);
        display: flex;
        gap: 8px;
        align-items: flex-start;
        line-height: 1.4;
      }
      .chk {
        color: var(--cyan);
        flex-shrink: 0;
        font-weight: 700;
      }
      .crs {
        color: rgba(255, 255, 255, 0.2);
        flex-shrink: 0;
      }
      .plan-features li.dim {
        color: rgba(255, 255, 255, 0.2);
      }
      .plan-note {
        margin-top: 10px;
        padding: 8px;
        border-radius: 6px;
        background: rgba(255, 45, 120, 0.06);
        border: 1px solid rgba(255, 45, 120, 0.12);
        font-size: 10px;
        color: var(--ink3);
        text-align: center;
        font-family: var(--font-mono);
      }
      .addon-box {
        max-width: 640px;
        margin: 32px auto 0;
        border: 1px solid rgba(250, 204, 21, 0.25);
        border-radius: 12px;
        background: rgba(250, 204, 21, 0.03);
        padding: 24px 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
      }
      .addon-left h3 {
        font-family: var(--font-display);
        font-size: 24px;
        letter-spacing: 2px;
        color: var(--yellow);
        margin-bottom: 6px;
      }
      .addon-left p {
        font-size: 13px;
        color: var(--ink2);
        line-height: 1.5;
        max-width: 360px;
      }
      .addon-right {
        text-align: center;
        flex-shrink: 0;
      }
      .addon-price {
        font-family: var(--font-display);
        font-size: 42px;
        color: var(--yellow);
        line-height: 1;
      }
      .addon-period {
        font-size: 11px;
        color: var(--ink3);
        font-family: var(--font-mono);
        margin-bottom: 10px;
      }

      /* GARANTIA */
      .garantia-box {
        max-width: 760px;
        margin: 48px auto 0;
        border: 1px solid rgba(96, 165, 250, 0.25);
        border-radius: 14px;
        background: rgba(96, 165, 250, 0.03);
        padding: 36px 40px;
        text-align: center;
      }
      .garantia-box h3 {
        font-family: var(--font-display);
        font-size: 36px;
        letter-spacing: 3px;
        color: var(--cyan);
        margin-bottom: 16px;
      }
      .garantia-box p {
        font-size: 15px;
        color: var(--ink2);
        line-height: 1.75;
        max-width: 600px;
        margin: 0 auto;
      }

      /* ANTI ESTAFA */
      .estafa-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border: 1px solid rgba(255, 45, 120, 0.2);
        border-radius: 14px;
        overflow: hidden;
        max-width: 860px;
        margin: 0 auto;
      }
      .estafa-col {
        padding: 32px 28px;
      }
      .estafa-col.bad {
        background: rgba(255, 45, 120, 0.05);
        border-right: 1px solid rgba(255, 45, 120, 0.15);
      }
      .estafa-col.good {
        background: rgba(96, 165, 250, 0.03);
      }
      .estafa-title {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 3px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      }
      .estafa-col.bad .estafa-title {
        color: var(--pink);
      }
      .estafa-col.good .estafa-title {
        color: var(--cyan);
      }
      .estafa-row {
        display: flex;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        font-size: 13px;
      }
      .estafa-row:last-child {
        border-bottom: none;
      }

      /* TIMELINE */
      .timeline {
        display: flex;
        gap: 0;
        max-width: 800px;
        margin: 0 auto;
        position: relative;
      }
      .timeline::before {
        content: "";
        position: absolute;
        top: 28px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(
          90deg,
          var(--cyan),
          var(--purple),
          var(--pink),
          rgba(255, 255, 255, 0.1)
        );
        z-index: 0;
      }
      .tl-step {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 1;
      }
      .tl-dot {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        margin-bottom: 14px;
        border: 2px solid;
      }
      .tl-day {
        font-family: var(--font-display);
        font-size: 22px;
        letter-spacing: 2px;
        margin-bottom: 6px;
      }
      .tl-label {
        font-size: 12px;
        color: var(--text);
        text-align: center;
        line-height: 1.4;
        max-width: 120px;
      }

      /* CV */
      .cv-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        align-items: start;
      }
      .cv-steps {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .cv-step {
        display: flex;
        gap: 14px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        padding: 20px;
        background: var(--glass);
        transition:
          border-color 0.3s,
          background 0.3s;
      }
      .cv-step:hover {
        border-color: var(--cyan);
        background: rgba(96, 165, 250, 0.04);
      }
      .cv-ico {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
      }
      .cv-step h4 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 5px;
      }
      .cv-step p {
        font-size: 13px;
        color: var(--text);
        line-height: 1.5;
      }
      .tag {
        display: inline-block;
        margin-top: 8px;
        background: rgba(96, 165, 250, 0.08);
        border: 1px solid rgba(96, 165, 250, 0.2);
        border-radius: 4px;
        padding: 3px 10px;
        font-size: 9px;
        letter-spacing: 2px;
        color: var(--cyan);
        font-family: var(--font-mono);
      }
      .cv-preview {
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        background: rgba(96, 165, 250, 0.02);
        position: sticky;
        top: 80px;
      }
      .cv-ph {
        padding: 14px 20px;
        border-bottom: 1px solid var(--border);
        background: rgba(96, 165, 250, 0.04);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .cv-ph span {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--cyan);
        letter-spacing: 2px;
      }
      .cv-status {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        color: var(--ink3);
        font-family: var(--font-mono);
      }
      .cv-status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 6px var(--cyan);
      }
      .cv-body {
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .cv-name {
        font-family: var(--font-display);
        font-size: 24px;
        letter-spacing: 3px;
      }
      .cv-pills {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .cv-pill {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 20px;
        padding: 4px 12px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.45);
      }
      .cs-title {
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 3px;
        color: var(--cyan);
        margin-bottom: 8px;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(96, 165, 250, 0.2);
      }
      .sk-row {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.45);
        margin-bottom: 6px;
      }
      .sk-bar {
        height: 5px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.06);
        margin-bottom: 8px;
      }
      .ats-badge {
        margin-top: 6px;
        padding: 12px 16px;
        border-radius: 8px;
        background: rgba(96, 165, 250, 0.08);
        border: 1px solid rgba(96, 165, 250, 0.25);
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .ats-score {
        font-family: var(--font-display);
        font-size: 38px;
        color: var(--cyan);
        line-height: 1;
      }
      .ats-label {
        font-size: 12px;
        color: var(--ink2);
        line-height: 1.4;
      }
      .ats-label strong {
        color: var(--cyan);
      }

      /* LETTER */
      .letter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
      }
      .lc {
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        padding: 24px;
        background: var(--glass);
        transition:
          border-color 0.3s,
          transform 0.3s;
      }
      .lc:hover {
        border-color: var(--c, var(--cyan));
        transform: translateY(-4px);
      }
      .lc-icon {
        font-size: 28px;
        margin-bottom: 10px;
      }
      .lc-sector {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 6px;
      }
      .lc-preview {
        font-size: 12px;
        color: var(--text);
        line-height: 1.6;
        font-style: italic;
        margin-bottom: 12px;
      }
      .lc-tag {
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 2px;
        color: var(--c, var(--cyan));
        background: rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        padding: 4px 12px;
        display: inline-block;
      }

      /* LEGAL */
      .legal-banner {
        background: rgba(250, 204, 21, 0.04);
        border: 1px solid rgba(250, 204, 21, 0.15);
        border-radius: 10px;
        padding: 16px 24px;
        margin: 0 48px;
        display: flex;
        gap: 14px;
        align-items: flex-start;
      }
      .legal-text {
        font-size: 12px;
        color: var(--ink3);
        line-height: 1.6;
        font-family: var(--font-mono);
      }
      .legal-text strong {
        color: var(--yellow);
      }

      /* LOGIN */
      .login-page {
        min-height: calc(100vh - 64px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        position: relative;
        z-index: 1;
      }
      .login-box {
        width: 100%;
        max-width: 440px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: rgba(96, 165, 250, 0.02);
        padding: 48px 40px;
      }
      .login-title {
        font-family: var(--font-display);
        font-size: 36px;
        letter-spacing: 3px;
        margin-bottom: 6px;
        text-align: center;
      }
      .login-sub {
        font-size: 14px;
        color: var(--text);
        text-align: center;
        margin-bottom: 32px;
      }
      .oauth-btn {
        width: 100%;
        padding: 13px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 12px;
        transition: background 0.3s;
        border: none;
      }
      .oauth-g {
        background: #fff;
        color: #1a1a1a;
      }
      .oauth-g:hover {
        background: #f0f0f0;
      }
      .oauth-f {
        background: #1877f2;
        color: #fff;
      }
      .oauth-f:hover {
        background: #1565d8;
      }
      .div-or {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 20px 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.25);
        font-family: var(--font-mono);
      }
      .div-or::before,
      .div-or::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
      }
      .ff {
        margin-bottom: 14px;
      }
      .ff label {
        display: block;
        font-size: 12px;
        color: var(--ink3);
        letter-spacing: 2px;
        font-family: var(--font-mono);
        margin-bottom: 6px;
      }
      .ff input {
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 12px 14px;
        color: #fff;
        font-size: 14px;
        font-family: var(--font-body);
        outline: none;
        transition: border-color 0.3s;
      }
      .ff input:focus {
        border-color: var(--cyan);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
      }
      .lsw {
        text-align: center;
        margin-top: 20px;
        font-size: 13px;
        color: var(--text);
      }
      .lsw a {
        color: var(--cyan);
        cursor: pointer;
        text-decoration: none;
      }

      /* MIS APLICACIONES */
      .app-page {
        padding: 88px 48px 48px;
        position: relative;
        z-index: 1;
      }
      .app-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 32px;
        flex-wrap: wrap;
        gap: 16px;
      }
      .app-title {
        font-family: var(--font-display);
        font-size: 42px;
        letter-spacing: 3px;
      }
      .app-today {
        border: 1px solid rgba(96, 165, 250, 0.25);
        border-radius: 10px;
        padding: 16px 24px;
        background: rgba(96, 165, 250, 0.04);
        text-align: center;
      }
      .app-today-num {
        font-family: var(--font-display);
        font-size: 48px;
        color: var(--cyan);
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .app-today-label {
        font-size: 10px;
        color: var(--ink3);
        font-family: var(--font-mono);
        letter-spacing: 2px;
        margin-top: 4px;
      }
      .app-stats {
        display: flex;
        gap: 16px;
        margin-bottom: 28px;
        flex-wrap: wrap;
      }
      .astat {
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 10px;
        padding: 14px 20px;
        background: var(--glass);
        flex: 1;
        min-width: 120px;
        text-align: center;
      }
      .astat-num {
        font-family: var(--font-display);
        font-size: 32px;
        line-height: 1;
      }
      .astat-label {
        font-size: 10px;
        color: var(--ink3);
        font-family: var(--font-mono);
        letter-spacing: 2px;
        margin-top: 3px;
      }
      .app-filters {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
        flex-wrap: wrap;
      }
      .fbtn {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 7px 16px;
        font-size: 12px;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.45);
        transition:
          background 0.3s,
          border-color 0.3s,
          color 0.3s;
      }
      .fbtn:hover,
      .fbtn.on {
        background: rgba(96, 165, 250, 0.1);
        border-color: var(--cyan);
        color: var(--cyan);
      }
      .app-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .app-item {
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        padding: 20px 24px;
        background: var(--glass);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px;
        align-items: start;
        transition:
          border-color 0.3s,
          background 0.3s;
      }
      .app-item:hover {
        border-color: rgba(96, 165, 250, 0.2);
        background: rgba(96, 165, 250, 0.02);
      }
      .app-left {
        display: flex;
        gap: 16px;
        align-items: flex-start;
      }
      .app-ico {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: rgba(96, 165, 250, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
      }
      .app-company {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 4px;
      }
      .app-verified {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-left: 8px;
        padding: 2px 8px;
        border-radius: 20px;
        background: oklch(72% 0.18 145 / 0.12);
        color: oklch(72% 0.18 145);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.02em;
        vertical-align: middle;
      }
      .app-meta {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
      }
      .app-sector {
        font-size: 12px;
        color: var(--ink3);
      }
      .app-date {
        font-size: 11px;
        color: var(--ink3);
        font-family: var(--font-mono);
      }
      .app-link {
        font-size: 11px;
        color: var(--cyan);
        text-decoration: none;
        font-family: var(--font-mono);
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .app-link:hover {
        text-decoration: underline;
      }
      .app-docs {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        flex-wrap: wrap;
      }
      .doc-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        padding: 5px 12px;
        font-size: 11px;
        cursor: pointer;
        color: var(--ink2);
        transition:
          border-color 0.3s,
          color 0.3s;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .doc-btn:hover {
        border-color: var(--cyan);
        color: var(--cyan);
      }
      .sbadge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 20px;
        padding: 6px 14px;
        font-size: 11px;
        font-family: var(--font-mono);
        letter-spacing: 1px;
        font-weight: 700;
      }
      .s-sent {
        background: rgba(96, 165, 250, 0.1);
        color: #60a5fa;
        border: 1px solid rgba(96, 165, 250, 0.2);
      }
      .s-open {
        background: rgba(250, 204, 21, 0.1);
        color: var(--yellow);
        border: 1px solid rgba(250, 204, 21, 0.2);
      }
      .s-reply {
        background: rgba(96, 165, 250, 0.1);
        color: var(--cyan);
        border: 1px solid rgba(96, 165, 250, 0.2);
      }
      .s-interview {
        background: rgba(255, 45, 120, 0.1);
        color: var(--pink);
        border: 1px solid rgba(255, 45, 120, 0.2);
      }

      /* MODAL */
      .modal-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.85);
        z-index: 300;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms var(--ease-out);
      }
      .modal-overlay.open {
        opacity: 1;
        pointer-events: auto;
      }
      .modal-overlay.open .modal {
        transform: scale(1);
      }
      .modal {
        transform: scale(0.96);
        transition: transform 200ms var(--ease-out);
        background: #0d1117;
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 32px;
        max-width: 680px;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
      }
      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
      .modal-title {
        font-family: var(--font-display);
        font-size: 26px;
        letter-spacing: 2px;
      }
      .modal-close {
        background: none;
        border: none;
        color: var(--ink3);
        font-size: 20px;
        cursor: pointer;
      }
      .modal-close:hover {
        color: #fff;
      }
      .modal-doc {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 16px;
        font-size: 13px;
        color: var(--ink2);
        line-height: 1.7;
        white-space: pre-line;
      }

      /* UPLOAD */
      /* ══ UPLOAD — REDESIGN ══ */
      .upload-wrap {
        max-width: 780px;
        margin: 0 auto;
        border: 1px solid var(--border);
        border-radius: 24px;
        background: linear-gradient(
          145deg,
          rgba(96, 165, 250, 0.03),
          rgba(59, 130, 246, 0.02)
        );
        padding: 56px 60px;
        text-align: center;
        box-shadow: 0 0 80px rgba(96, 165, 250, 0.05);
      }
      .upload-step-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(96, 165, 250, 0.06);
        border: 1px solid rgba(96, 165, 250, 0.2);
        border-radius: 20px;
        padding: 6px 18px;
        margin-bottom: 10px;
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 3px;
        color: var(--cyan);
      }
      .upload-zone {
        border: 2px dashed rgba(96, 165, 250, 0.18);
        border-radius: 18px;
        padding: 56px 32px;
        cursor: pointer;
        transition:
          border-color 0.35s,
          background 0.35s,
          transform 0.35s,
          box-shadow 0.35s;
        margin: 28px 0 32px;
        background: rgba(96, 165, 250, 0.01);
        position: relative;
        overflow: hidden;
      }
      .upload-zone:hover {
        border-color: var(--cyan);
        background: rgba(96, 165, 250, 0.05);
        box-shadow: 0 12px 40px rgba(96, 165, 250, 0.1);
      }
      @media (hover: hover) and (pointer: fine) {
        .upload-zone:hover {
          transform: translateY(-2px);
        }
      }
      .upload-zone::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse at 50% 0%,
          rgba(96, 165, 250, 0.07) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      .upload-icon {
        font-size: 64px;
        margin-bottom: 16px;
        display: block;
        filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.4));
      }
      .upload-text {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #fff;
      }
      .upload-hint {
        font-size: 13px;
        color: var(--ink3);
        line-height: 1.6;
      }
      .upload-success {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 16px 0;
      }

      .fgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
      }
      .fg {
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: left;
      }
      .fg.full {
        grid-column: 1/-1;
      }
      .fg label {
        font-size: 10px;
        color: var(--ink2);
        letter-spacing: 2.5px;
        font-family: var(--font-mono);
        font-weight: 700;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .fg label .req {
        color: var(--cyan);
        font-size: 12px;
      }
      .fg input,
      .fg select {
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        border: 1.5px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 14px 18px;
        color: #fff;
        font-size: 15px;
        font-family: var(--font-body);
        outline: none;
        transition:
          border-color 0.3s,
          background 0.3s,
          box-shadow 0.3s;
        letter-spacing: 0.2px;
      }
      .fg input:focus,
      .fg select:focus {
        border-color: var(--cyan);
        background: rgba(96, 165, 250, 0.04);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.08);
      }
      .fg input::placeholder {
        color: rgba(255, 255, 255, 0.2);
      }
      .fg select option {
        background: #0d1117;
      }
      .fg select {
        cursor: pointer;
      }

      .form-divider {
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(96, 165, 250, 0.12),
          transparent
        );
        margin: 24px 0;
      }
      .form-section-label {
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 3px;
        color: var(--ink3);
        margin-bottom: 16px;
        text-align: left;
      }
      .sbtn-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 8px 0;
      }
      .sbtn {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px;
        padding: 9px 20px;
        font-size: 13px;
        cursor: pointer;
        color: var(--ink2);
        transition:
          background 0.3s,
          border-color 0.3s,
          color 0.3s,
          box-shadow 0.3s,
          transform 0.3s;
        font-family: var(--font-body);
        font-weight: 500;
      }
      .sbtn:hover,
      .sbtn.on {
        background: rgba(96, 165, 250, 0.1);
        border-color: var(--cyan);
        color: var(--cyan);
        box-shadow: 0 0 12px rgba(96, 165, 250, 0.15);
        transform: translateY(-1px);
      }
      .sbtn-pro {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 14px;
        padding: 14px 12px;
        cursor: pointer;
        text-align: center;
        color: #e2e8f0;
        transition:
          border-color 0.25s,
          background 0.25s,
          transform 0.25s,
          box-shadow 0.25s;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        user-select: none;
      }
      .sbtn-pro:hover {
        border-color: var(--sc, var(--blue-lt));
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-3px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      }
      .industry-catalog-card {
        cursor: default;
        user-select: text;
      }
      .industry-catalog-card:hover {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.07);
        transform: none;
        box-shadow: none;
      }
      .sbtn-pro.on {
        border-color: var(--sc, var(--blue-lt));
        background: color-mix(
          in srgb,
          var(--sc, var(--blue-lt)) 12%,
          transparent
        );
        box-shadow: 0 0 16px
          color-mix(in srgb, var(--sc, var(--blue-lt)) 30%, transparent);
      }
      .ind-skeleton {
        border-radius: 14px;
        height: 72px;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.04) 25%,
          rgba(255, 255, 255, 0.08) 50%,
          rgba(255, 255, 255, 0.04) 75%
        );
        background-size: 200% 100%;
        animation: ind-shimmer 1.6s infinite;
      }
      @keyframes ind-shimmer {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }
      .ind-cat-group {
        margin-bottom: 14px;
      }
      .ind-cat-group:last-child {
        margin-bottom: 0;
      }
      .ind-cat-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--ink3);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        font-family: var(--font-body);
      }
      .ind-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 10px;
      }

      /* CONTACTO */
      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        max-width: 800px;
        margin: 0 auto;
      }
      .contact-card {
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        padding: 32px;
        background: var(--glass);
        text-align: center;
      }
      .contact-card h3 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px;
      }
      .ci {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 12px;
        font-size: 14px;
        color: var(--ink2);
      }
      .ci a {
        color: var(--cyan);
        text-decoration: none;
      }

      footer {
        border-top: 1px solid var(--border);
        padding: 36px 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        position: relative;
        z-index: 1;
      }
      .footer-logo {
        font-family: var(--font-display);
        font-size: 20px;
        letter-spacing: 4px;
        color: var(--amber);
      }
      .footer-copy {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.2);
        font-family: var(--font-mono);
      }
      .footer-links {
        display: flex;
        gap: 20px;
      }
      .footer-links a {
        font-size: 11px;
        color: var(--ink3);
        text-decoration: none;
        font-family: var(--font-mono);
        transition: color 0.3s;
      }
      .footer-links a:hover {
        color: var(--cyan);
      }

      /* ══ SCROLL PROGRESS BAR ══ */
      #scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 2px;
        width: 100%;
        z-index: 300;
        clip-path: inset(0 100% 0 0);
        background: linear-gradient(
          90deg,
          var(--cyan),
          var(--pink),
          var(--purple)
        );
        box-shadow: 0 0 8px var(--cyan);
      }

      /* ══ LIVE ACTIVITY BAR ══ */
      .activity-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32px;
        padding: 14px 24px;
        background: rgba(96, 165, 250, 0.025);
        border-bottom: 1px solid rgba(96, 165, 250, 0.1);
        flex-wrap: wrap;
      }
      .act-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-mono);
        font-size: 11px;
        color: rgba(255, 255, 255, 0.55);
        letter-spacing: 1px;
      }
      .act-item strong {
        color: var(--cyan);
        font-size: 13px;
        font-weight: 700;
      }
      .act-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 8px var(--cyan);
        animation: blink 1.4s infinite;
      }

      /* ══ HERO PHOTO CARDS — floating proof ══ */
      .hero-photos {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 1;
      }
      .hp-card {
        position: absolute;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(167, 139, 250, 0.25);
        background: #0f0d42;
        box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.7);
        opacity: 0;
        animation: hp-in 1.4s ease forwards;
      }
      .hp-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(0.7) brightness(0.8);
      }
      .hp-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent 35%,
          rgba(15, 13, 66, 0.88)
        );
      }
      .hp-card .hp-tag {
        position: absolute;
        bottom: 10px;
        left: 12px;
        right: 12px;
        z-index: 2;
      }
      .hp-card .hp-tag-co {
        font-size: 10px;
        color: #a78bfa;
        font-family: var(--font-mono);
        letter-spacing: 1px;
      }
      .hp-card .hp-tag-rl {
        font-size: 12px;
        color: #fff;
        font-weight: 700;
        margin-top: 2px;
      }
      @keyframes hp-in {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 0.85;
          transform: none;
        }
      }
      /* Only top corners — never overlaps center content */
      .hp-1 {
        top: 10%;
        left: 1.5%;
        width: 160px;
        height: 210px;
        animation-delay: 0.6s;
      }
      .hp-2 {
        top: 10%;
        right: 1.5%;
        width: 160px;
        height: 210px;
        animation-delay: 0.9s;
      }
      .hp-3 {
        display: none;
      }
      .hp-4 {
        display: none;
      }
      @media (max-width: 1400px) {
        .hero-photos {
          display: none;
        }
      }

      /* ══ PARTNER LOGO STRIP ══ */
      .partners {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.015);
      }
      .partner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 24px 12px;
        border-right: 1px solid rgba(255, 255, 255, 0.04);
        transition: background 0.3s;
      }
      .partner:last-child {
        border-right: none;
      }
      .partner:hover {
        background: rgba(96, 165, 250, 0.025);
      }
      .partner i {
        color: var(--ink3);
      }
      .partner-name {
        font-family: var(--font-body);
        font-size: 14px;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, 0.55);
      }
      .partner-sub {
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, 0.25);
      }

      /* ══ JOB BOARD ══ */
      .jobs-wrap {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 24px;
        margin-top: 40px;
      }
      .jobs-sidebar {
        position: sticky;
        top: 80px;
        align-self: start;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        background: var(--glass);
        padding: 24px 20px;
      }
      .jbar-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .jbar-head h3 {
        font-family: var(--font-display);
        font-size: 18px;
        letter-spacing: 2px;
        color: #fff;
      }
      .jbar-clear {
        background: none;
        border: none;
        color: rgba(255, 45, 120, 0.7);
        font-size: 10px;
        font-family: var(--font-mono);
        letter-spacing: 2px;
        cursor: pointer;
        transition: color 0.3s;
      }
      .jbar-clear:hover {
        color: var(--pink);
      }
      .jbar-group {
        margin-bottom: 20px;
      }
      .jbar-label {
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 3px;
        color: var(--ink3);
        margin-bottom: 10px;
        display: block;
      }
      .jbar-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .jchip {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        padding: 6px 12px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.55);
        cursor: pointer;
        transition:
          background 0.25s,
          border-color 0.25s,
          color 0.25s,
          box-shadow 0.25s;
        font-family: var(--font-body);
      }
      .jchip:hover {
        border-color: rgba(96, 165, 250, 0.3);
        color: var(--cyan);
      }
      .jchip.on {
        background: rgba(96, 165, 250, 0.1);
        border-color: var(--cyan);
        color: var(--cyan);
        box-shadow: 0 0 10px rgba(96, 165, 250, 0.15);
      }
      .jchip-pink.on {
        background: rgba(255, 45, 120, 0.1);
        border-color: var(--pink);
        color: var(--pink);
        box-shadow: 0 0 10px rgba(255, 45, 120, 0.15);
      }
      .jbar-range {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .jbar-range input {
        flex: 1;
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        padding: 8px 10px;
        color: #fff;
        font-size: 12px;
        font-family: var(--font-mono);
        outline: none;
      }
      .jbar-range input:focus {
        border-color: var(--cyan);
      }
      .jbar-search {
        position: relative;
        margin-bottom: 20px;
      }
      .jbar-search input {
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 11px 14px 11px 36px;
        color: #fff;
        font-size: 13px;
        font-family: var(--font-body);
        outline: none;
        transition: border-color 0.3s;
      }
      .jbar-search input:focus {
        border-color: var(--cyan);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.08);
      }
      .jbar-search::before {
        content: "";
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
      }

      .jobs-main {
      }
      .jobs-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
        flex-wrap: wrap;
        gap: 12px;
      }
      .jobs-count {
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--ink2);
      }
      .jobs-count strong {
        color: var(--cyan);
        font-size: 17px;
      }
      .jobs-sort {
        display: flex;
        gap: 6px;
      }
      .sort-btn {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 6px;
        padding: 6px 12px;
        font-size: 11px;
        color: var(--ink2);
        cursor: pointer;
        font-family: var(--font-mono);
        letter-spacing: 1px;
        transition:
          border-color 0.25s,
          color 0.25s,
          background 0.25s;
      }
      .sort-btn:hover,
      .sort-btn.on {
        border-color: var(--cyan);
        color: var(--cyan);
        background: rgba(96, 165, 250, 0.04);
      }

      .job-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .job-card {
        display: grid;
        grid-template-columns: 96px 1fr auto;
        gap: 18px;
        align-items: center;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 14px;
        padding: 14px 22px 14px 14px;
        background: var(--glass);
        transition:
          transform 200ms var(--ease-out),
          border-color 200ms var(--ease-out),
          background 200ms var(--ease-out),
          box-shadow 200ms var(--ease-out);
        position: relative;
        overflow: hidden;
      }
      .job-thumb {
        width: 96px;
        height: 96px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.06);
      }
      .job-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
        filter: saturate(0.9);
      }
      .job-card:hover .job-thumb img {
        transform: scale(1.08);
      }
      .job-thumb-emoji {
        position: absolute;
        bottom: 6px;
        left: 6px;
        font-size: 22px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
      }
      .job-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--jc, var(--cyan));
        opacity: 0.4;
        transition: opacity 0.3s;
      }
      @media (hover: hover) and (pointer: fine) {
        .job-card:hover {
          transform: translateY(-3px);
          border-color: var(--jc, var(--cyan));
          background: rgba(96, 165, 250, 0.025);
          box-shadow: 0 14px 40px -10px rgba(96, 165, 250, 0.15);
        }
        .job-card:hover::before {
          opacity: 1;
        }
      }
      .job-icon {
        width: 54px;
        height: 54px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        flex-shrink: 0;
        border: 1px solid rgba(255, 255, 255, 0.06);
      }
      .job-info {
        min-width: 0;
      }
      .job-top {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 6px;
        flex-wrap: wrap;
      }
      .job-badge {
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 2px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 4px;
        background: rgba(96, 165, 250, 0.12);
        color: var(--cyan);
        border: 1px solid rgba(96, 165, 250, 0.25);
      }
      .job-badge.h2a {
        background: rgba(59, 130, 246, 0.12);
        color: var(--purple);
        border-color: rgba(59, 130, 246, 0.25);
      }
      .job-new {
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 2px;
        padding: 3px 9px;
        border-radius: 4px;
        background: rgba(255, 45, 120, 0.12);
        color: var(--pink);
        border: 1px solid rgba(255, 45, 120, 0.25);
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }
      @keyframes gb35spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes gb35-pop {
        0% {
          transform: scale(0);
          opacity: 0;
        }
        70% {
          transform: scale(1.25);
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }
      @keyframes drawCheck {
        to {
          stroke-dashoffset: 0;
        }
      }
      .job-title {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .job-co {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        font-family: var(--font-mono);
        margin-bottom: 8px;
      }
      .job-meta {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        font-size: 12px;
        color: var(--ink2);
      }
      .job-meta-i {
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .job-pay {
        text-align: right;
      }
      .job-pay-amt {
        font-family: var(--font-display);
        font-size: 30px;
        letter-spacing: 1px;
        color: var(--jc, var(--cyan));
        line-height: 1;
        text-shadow: 0 0 12px var(--jc, var(--cyan));
      }
      .job-pay-lbl {
        font-size: 9px;
        color: var(--ink3);
        font-family: var(--font-mono);
        letter-spacing: 2px;
        margin-top: 2px;
      }
      .job-apply {
        margin-top: 8px;
        background: transparent;
        border: 1px solid var(--jc, var(--cyan));
        color: var(--jc, var(--cyan));
        border-radius: 6px;
        padding: 7px 16px;
        font-size: 11px;
        cursor: pointer;
        font-weight: 700;
        letter-spacing: 1px;
        font-family: var(--font-mono);
        transition:
          background 0.25s,
          color 0.25s,
          box-shadow 0.25s;
      }
      .job-apply:hover {
        background: var(--jc, var(--cyan));
        color: #000;
        box-shadow: 0 0 18px var(--jc, var(--cyan));
      }

      .jobs-pager {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 28px;
      }
      .pg {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        cursor: pointer;
        font-family: var(--font-mono);
        transition:
          border-color 0.25s,
          color 0.25s,
          background 0.25s;
      }
      .pg:hover {
        border-color: var(--cyan);
        color: var(--cyan);
      }
      .pg.on {
        background: rgba(96, 165, 250, 0.1);
        border-color: var(--cyan);
        color: var(--cyan);
      }

      .jobs-empty {
        padding: 64px 24px;
        text-align: center;
        border: 1px dashed rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        display: none;
      }
      .jobs-empty.show {
        display: block;
      }
      .jobs-empty-ico {
        font-size: 48px;
        margin-bottom: 14px;
        opacity: 0.4;
      }
      .jobs-empty h4 {
        font-family: var(--font-display);
        font-size: 24px;
        letter-spacing: 2px;
        color: #fff;
        margin-bottom: 8px;
      }
      .jobs-empty p {
        font-size: 13px;
        color: var(--ink3);
      }

      /* ══ TESTIMONIALS ══ */
      .test-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
      @media (max-width: 860px) {
        .test-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 560px) {
        .test-grid {
          grid-template-columns: 1fr;
        }
      }
      .test-card {
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 14px;
        padding: 24px;
        background: var(--glass);
        position: relative;
        transition:
          border-color 0.3s,
          transform 0.3s;
        overflow: hidden;
      }
      .test-card:hover {
        border-color: rgba(96, 165, 250, 0.2);
        transform: translateY(-4px);
      }
      .test-card::after {
        content: '"';
        position: absolute;
        top: 14px;
        right: 18px;
        font-family: var(--font-display);
        font-size: 64px;
        color: rgba(96, 165, 250, 0.08);
        line-height: 1;
      }
      .test-stars {
        color: var(--yellow);
        font-size: 13px;
        letter-spacing: 2px;
        margin-bottom: 12px;
      }
      .test-outcome {
        font-size: 14px;
        font-weight: 700;
        color: var(--cyan);
        margin-bottom: 10px;
        line-height: 1.4;
      }
      .test-body {
        font-size: 13px;
        color: var(--ink2);
        line-height: 1.7;
        margin-bottom: 16px;
      }
      .test-foot {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
      }
      .test-avi {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 14px;
        color: #000;
        background: linear-gradient(135deg, var(--cyan), var(--purple));
        flex-shrink: 0;
      }
      .test-name {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
      }
      .test-info {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.35);
        font-family: var(--font-mono);
        letter-spacing: 1px;
      }

      /* ══ FAQ ══ */
      .faq-wrap {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .faq {
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        background: var(--glass);
        overflow: hidden;
        transition:
          border-color 0.3s,
          box-shadow 0.3s;
      }
      .faq.open {
        border-color: rgba(96, 165, 250, 0.3);
        box-shadow: 0 0 30px rgba(96, 165, 250, 0.08);
      }
      .faq-q {
        padding: 20px 24px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
      }
      .faq-q-text {
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        line-height: 1.4;
      }
      .faq-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid rgba(96, 165, 250, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--cyan);
        font-size: 14px;
        flex-shrink: 0;
        transition:
          transform 0.35s,
          background 0.35s;
      }
      .faq.open .faq-icon {
        transform: rotate(45deg);
        background: rgba(96, 165, 250, 0.15);
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.45s ease,
          padding 0.25s ease;
        padding: 0 24px;
      }
      .faq.open .faq-a {
        max-height: 400px;
        padding: 0 24px 22px;
      }
      .faq-a-text {
        font-size: 14px;
        color: var(--ink2);
        line-height: 1.75;
      }
      .faq-a-text strong {
        color: var(--cyan);
      }

      /* ══ EARNINGS CALCULATOR ══ */
      .calc-wrap {
        max-width: 900px;
        margin: 0 auto;
        border: 1px solid rgba(96, 165, 250, 0.18);
        border-radius: 18px;
        background: linear-gradient(
          135deg,
          rgba(96, 165, 250, 0.04),
          rgba(59, 130, 246, 0.03)
        );
        padding: 36px 32px;
      }
      .calc-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 32px;
        align-items: center;
      }
      .calc-controls {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .calc-row {
      }
      .calc-row label {
        display: block;
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 3px;
        color: rgba(255, 255, 255, 0.45);
        margin-bottom: 8px;
      }
      .calc-row select,
      .calc-row input[type="range"] {
        width: 100%;
      }
      .calc-row select {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 12px 14px;
        color: #fff;
        font-size: 14px;
        font-family: var(--font-body);
        outline: none;
      }
      .calc-row select:focus {
        border-color: var(--cyan);
      }
      .calc-row select option {
        background: #0d1117;
      }
      .calc-slider {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .calc-slider input[type="range"] {
        flex: 1;
        -webkit-appearance: none;
        height: 4px;
        background: linear-gradient(
          90deg,
          var(--cyan) 0%,
          var(--cyan) var(--p, 50%),
          rgba(255, 255, 255, 0.1) var(--p, 50%)
        );
        border-radius: 2px;
        outline: none;
      }
      .calc-slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--cyan);
        cursor: pointer;
        box-shadow: 0 0 10px var(--cyan);
        border: 2px solid #0d1117;
      }
      .calc-val {
        font-family: var(--font-display);
        font-size: 24px;
        color: var(--cyan);
        min-width: 64px;
        text-align: right;
      }
      .calc-out {
        text-align: center;
      }
      .calc-out-lbl {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 3px;
        color: var(--ink3);
        margin-bottom: 8px;
      }
      .calc-out-num {
        font-family: var(--font-display);
        font-size: clamp(56px, 9vw, 108px);
        line-height: 0.9;
        color: var(--amber);
        letter-spacing: 2px;
        margin-bottom: 10px;
      }
      .calc-out-sub {
        font-size: 13px;
        color: var(--ink2);
        line-height: 1.6;
      }
      .calc-out-sub strong {
        color: var(--cyan);
      }

      /* ══ TRUST PARTNERS ══ */
      .trust-strip {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 36px;
        flex-wrap: wrap;
        padding: 32px 24px;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: rgba(96, 165, 250, 0.015);
      }
      .trust-item {
        display: flex;
        align-items: center;
        gap: 10px;
        opacity: 0.5;
        transition: opacity 0.3s;
      }
      .trust-item:hover {
        opacity: 1;
      }
      .trust-ico {
        font-size: 22px;
      }
      .trust-label {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--ink2);
      }
      .trust-label strong {
        color: #fff;
        display: block;
        font-size: 13px;
        font-family: var(--font-body);
        letter-spacing: 2px;
      }

      /* ══ TEMPLATE SELECTOR ══ */
      .tmpl-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-bottom: 24px;
      }
      .tmpl-card {
        border: 2px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        transition:
          border-color 0.3s,
          transform 0.3s,
          box-shadow 0.3s;
        background: rgba(0, 0, 0, 0.3);
      }
      .tmpl-card:hover {
        border-color: rgba(96, 165, 250, 0.4);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(96, 165, 250, 0.1);
      }
      .tmpl-card.selected {
        border-color: var(--cyan);
        box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
      }
      .tmpl-card img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        object-position: top;
        display: block;
        filter: grayscale(0.2);
        transition: filter 0.3s;
      }
      .tmpl-card:hover img,
      .tmpl-card.selected img {
        filter: none;
      }
      .tmpl-info {
        padding: 8px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .tmpl-name {
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        font-family: var(--font-mono);
      }
      .tmpl-check {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        flex-shrink: 0;
        transition:
          background 0.3s,
          border-color 0.3s,
          color 0.3s;
      }
      .tmpl-card.selected .tmpl-check {
        background: var(--cyan);
        border-color: var(--cyan);
        color: #000;
      }
      @media (max-width: 600px) {
        .tmpl-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      /* ══ MOBILE NAV ══ */
      .hamburger {
        display: none;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        padding: 6px;
      }
      .mob-menu {
        display: none;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: rgba(3, 5, 15, 0.98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        z-index: 199;
        padding: 8px 0;
      }
      .mob-menu.open {
        display: block;
      }
      .mob-menu .nav-tab {
        width: 100%;
        height: auto;
        padding: 14px 28px;
        justify-content: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      }
      .mob-menu-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
        margin: 6px 20px;
      }

      /* ══ SECTION REVEAL ══ */
      /* Dots del carrusel: hit area 44px sin cambiar el visual de 4px */
      .cs-dot::after {
        content: "";
        position: absolute;
        inset: -10px;
      }
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
      }
      .reveal.in {
        opacity: 1;
        transform: none;
      }

      @media (max-width: 1000px) {
        nav {
          padding: 0 20px;
        }
        .nav-center {
          display: none;
        }
        .hamburger {
          display: flex;
        }
        .jobs-wrap {
          grid-template-columns: 1fr;
        }
        .jobs-sidebar {
          position: static;
        }
        .calc-grid {
          grid-template-columns: 1fr;
        }
        .activity-bar {
          gap: 16px;
        }
        .job-card {
          grid-template-columns: auto 1fr;
        }
        .job-pay {
          grid-column: 1/-1;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .sec,
        .app-page {
          padding: 60px 20px;
        }
        .sectors-hero,
        .mrg-grid,
        .cv-grid,
        .contact-grid,
        .estafa-grid {
          grid-template-columns: 1fr;
        }
        .timeline {
          flex-direction: column;
          gap: 20px;
        }
        .timeline::before {
          display: none;
        }
        .fgrid {
          grid-template-columns: 1fr;
        }
        .upload-wrap {
          padding: 36px 24px !important;
          border-radius: 16px !important;
        }
        .upload-zone {
          padding: 40px 20px !important;
        }
        .upload-icon {
          font-size: 48px !important;
        }
        footer {
          flex-direction: column;
          text-align: center;
        }
        .mrg-chat {
          max-height: none;
        }
      }

      /* ══ NAV — TOP BAR FITS PHONE WIDTH WITHOUT ROTATING ══
         At >1000px .nav-center already collapses into the hamburger. Below
         480px the remaining nav-right group (Empleadores + divider + ES +
         Iniciar Sesión + Empezar Gratis + hamburger) plus the logo subtitle
         no longer fit a single row on a real phone, so trim to what a mobile
         visitor actually needs at a glance: logo mark, "Iniciar Sesión", and
         the hamburger (which now also carries Empleadores + Empezar Gratis). */
      @media (max-width: 480px) {
        nav {
          padding: 0 14px;
        }
        .nav-employer-link,
        .nav-employer-divider,
        .lang-btn {
          display: none;
        }
        /* El CTA primario no se esconde en móvil: versión compacta para que
           quepa junto a Iniciar Sesión + hamburger en 390px */
        nav > .nav-right .btn-cta {
          padding: 7px 14px;
          font-size: 12px;
        }
        .btn-login {
          padding: 7px 14px;
          font-size: 12px;
        }
        .nav-right {
          gap: 6px;
        }
      }

      /* Large tablet / small laptop: keep sector cards in a 2-col grid instead
         of falling back to the single stretched column from the 1000px rule */
      @media (min-width: 769px) and (max-width: 1023px) {
        .sectors-hero {
          grid-template-columns: repeat(2, 1fr) !important;
        }
      }

      @media (max-width: 768px) {
        .free-cv-grid {
          grid-template-columns: 1fr !important;
          gap: 28px !important;
        }
        /* Stats 6-col → 3-col en tablet */
        #stats-grid {
          grid-template-columns: repeat(3, 1fr) !important;
        }
        /* Ticker: máx 3 items en móvil — el hero no puede quedar a 2 viewports
           de distancia del primer CTA (el carrusel de sectores repite esta info) */
        .ticker .ti:nth-child(n + 4) {
          display: none;
        }
      }
      @media (max-width: 480px) {
        /* Trust bar: 1 item en móvil, el resto repite lo que ya dice el hero */
        .activity-bar .act-item:nth-child(n + 2) {
          display: none;
        }
      }
      @media (max-width: 480px) {
        /* Stats 6-col → 2-col en mobile */
        #stats-grid {
          grid-template-columns: repeat(2, 1fr) !important;
        }
        /* Tipografía */
        .hero-title {
          font-size: clamp(32px, 10vw, 52px) !important;
        }
        .hero-sub {
          font-size: 14px !important;
          line-height: 1.6 !important;
        }
        .sec-title {
          font-size: clamp(22px, 7vw, 36px) !important;
        }

        /* Nav */
        nav {
          padding: 0 16px;
          height: 56px;
        }
        .logo-sub {
          display: none;
        }

        /* Hero */
        .hero {
          padding: 80px 16px 40px !important;
        }
        .hero-cta {
          flex-direction: column;
          gap: 10px;
        }
        .hero-cta .btn {
          width: 100%;
          text-align: center;
          padding: 14px 20px !important;
          font-size: 15px !important;
        }
        .hero-stats {
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;
          margin-top: 24px;
        }
        .stat-num {
          font-size: 28px !important;
        }

        /* Secciones */
        .sec,
        .app-page {
          padding: 40px 16px !important;
        }

        /* Upload CV */
        .upload-wrap {
          padding: 24px 16px !important;
          border-radius: 12px !important;
        }
        .upload-zone {
          padding: 32px 16px !important;
          border-radius: 12px !important;
        }
        .upload-icon {
          font-size: 40px !important;
        }
        .upload-zone h3 {
          font-size: 16px !important;
        }
        .upload-zone p {
          font-size: 13px !important;
        }

        /* Formulario */
        input,
        select,
        textarea {
          font-size: 16px !important;
          padding: 12px 14px !important;
        }
        .form-grid {
          grid-template-columns: 1fr !important;
        }
        label {
          font-size: 12px !important;
        }

        /* Botones — mínimo 44px touch target */
        button,
        .btn {
          min-height: 44px;
          font-size: 14px !important;
        }

        /* Planes pricing */
        .plan-card {
          padding: 20px 16px !important;
        }
        .plan-price {
          font-size: 36px !important;
        }
        .plan-name {
          font-size: 18px !important;
        }

        /* MR.G Chat */
        .mrg-bubble {
          max-width: 90% !important;
          font-size: 13px !important;
        }
        .mrg-input-row {
          gap: 8px !important;
        }
        .mrg-input {
          font-size: 15px !important;
          padding: 12px 14px !important;
        }
        .mrg-send {
          width: 44px !important;
          height: 44px !important;
          flex-shrink: 0;
        }

        /* Empleos */
        .job-card {
          padding: 14px !important;
          gap: 10px !important;
        }
        .job-title {
          font-size: 14px !important;
        }
        .job-pay {
          font-size: 13px !important;
        }
        .job-tags {
          gap: 4px !important;
        }
        .job-tag {
          font-size: 10px !important;
          padding: 3px 8px !important;
        }

        /* Sectores */
        .sectors-hero {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 10px !important;
        }
        .sector-card {
          padding: 16px 12px !important;
        }

        /* CV Templates */
        .tmpl-grid {
          grid-template-columns: 1fr !important;
        }
        .tmpl-card {
          padding: 0 !important;
        }

        /* Modal */
        .modal-box {
          margin: 16px !important;
          padding: 20px !important;
          border-radius: 16px !important;
        }
        .modal-box h2 {
          font-size: 20px !important;
        }

        /* Footer */
        footer {
          padding: 30px 16px !important;
          gap: 20px !important;
        }
        .footer-links {
          flex-direction: column;
          gap: 8px !important;
        }

        /* Mission control overlay mobile */
        #gb35-mission {
          padding: 16px !important;
          justify-content: flex-start !important;
          padding-top: 80px !important;
        }
        #gb35-mission > div {
          max-width: 100% !important;
        }
        #gb35-mission [style*="32pt"] {
          font-size: 22pt !important;
        }
        #mc-log {
          height: 100px !important;
        }

        /* App pages mobile padding */
        #page-apps,
        .app-page {
          padding: 70px 12px 30px !important;
        }

        /* Settings / SMTP form */
        #page-settings .fg {
          flex-direction: column;
        }
        #page-settings input {
          width: 100% !important;
          box-sizing: border-box;
        }

        /* Stat cards */
        .astat-grid {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 10px !important;
        }
        .astat-card {
          padding: 14px 12px !important;
        }
        .astat-num {
          font-size: 22px !important;
        }

        /* Application list */
        .app-item {
          flex-direction: column !important;
          gap: 8px !important;
        }
        .app-item > div:last-child {
          text-align: left !important;
        }

        /* Hero overflow guard */
        .hero {
          overflow-x: hidden !important;
          align-items: stretch !important;
        }
        /* h1 block-children sizing fix — spans get content width not container width */
        h1.ht {
          width: 100% !important;
          max-width: 100% !important;
          text-align: center !important;
        }
        h1.ht .hw,
        h1.ht .hc {
          width: 100% !important;
          display: block !important;
        }
        /* Badge letter-spacing overflow */
        .badge {
          max-width: calc(100% - 32px) !important;
          overflow: hidden !important;
          white-space: nowrap !important;
          text-overflow: ellipsis !important;
          letter-spacing: 0.5px !important;
        }
        /* Global overflow: clip (no scroll context, Playwright-safe) */
        html {
          overflow-x: clip;
        }
        body {
          max-width: 100vw;
          overflow-x: clip;
        }
        /* Testimonials grid — minmax(280px) causes 2-col at 343px */
        .test-grid {
          grid-template-columns: 1fr !important;
        }
        .test-card {
          overflow: hidden !important;
          padding: 16px !important;
        }
        /* Sector selector container */
        .hero select,
        .hero div[style*="select"] {
          max-width: 100% !important;
          width: 100% !important;
          box-sizing: border-box !important;
        }
        /* Any inline-style grid in hero */
        .hero div[style*="grid"] {
          max-width: 100% !important;
          width: 100% !important;
          box-sizing: border-box !important;
        }
        /* All sections — prevent any overflow escaping */
        .sec,
        section {
          overflow-x: clip !important;
        }

        /* Hero buttons — .bp/.bg, NOT .btn */
        .hero-btns {
          flex-direction: column !important;
          gap: 10px !important;
          width: 100% !important;
        }
        .hero-btns .bp,
        .hero-btns .bg {
          width: 100% !important;
          text-align: center !important;
          padding: 14px 20px !important;
          box-sizing: border-box !important;
        }

        /* Badge letter-spacing overflow */
        .badge {
          letter-spacing: 1px !important;
          padding: 6px 12px !important;
          font-size: 10px !important;
        }

        /* Divider overflow */
        .divider {
          margin: 0 !important;
        }

        /* Sections uniform */
        .sec {
          padding: 44px 16px !important;
        }
        .lead {
          font-size: 14px !important;
          margin-bottom: 32px !important;
        }

        /* Sector grid min 340px → 2 col */
        .sectors-hero {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 8px !important;
        }
        .sc-photo {
          height: 100px !important;
        }

        /* Ticker — legible en mobile */
        .ticker-inner {
          gap: 30px !important;
        }
        .ti {
          font-size: 9px !important;
          letter-spacing: 1px !important;
        }
      }

      /* iOS safe area insets */
      @supports (padding-bottom: env(safe-area-inset-bottom)) {
        body {
          padding-bottom: env(safe-area-inset-bottom);
        }
        nav {
          padding-left: max(16px, env(safe-area-inset-left));
          padding-right: max(16px, env(safe-area-inset-right));
        }
        .mrg-input-row {
          padding-bottom: env(safe-area-inset-bottom);
        }
      }

      /* Intermediate tablet 481px–768px */
      @media (min-width: 481px) and (max-width: 768px) {
        .sec {
          padding: 60px 24px !important;
        }
        .hero {
          padding: 80px 24px 48px !important;
        }
        .hero-btns .bp,
        .hero-btns .bg {
          padding: 14px 24px !important;
        }
        .divider {
          margin: 0 24px !important;
        }
        .sectors-hero {
          grid-template-columns: repeat(2, 1fr) !important;
        }
      }

      /* ══ FUNDADOR / CRÉDITOS ══ */
      .founder-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        text-align: center;
        background: oklch(9% 0.015 265/0.55);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 36px 24px;
      }
      .founder-card img {
        width: 132px;
        height: 132px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center top;
        border: 3px solid var(--amber);
        flex-shrink: 0;
      }
      .founder-card .founder-name {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 20px;
        color: #fff;
        letter-spacing: -0.01em;
      }
      .founder-card .founder-role {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 1.5px;
        color: var(--amber);
        text-transform: uppercase;
        margin: 6px 0 14px;
      }
      .founder-card .founder-quote {
        color: var(--ink2);
        font-size: 14px;
        line-height: 1.7;
        max-width: 560px;
        margin: 0 auto;
      }
      @media (min-width: 769px) {
        .founder-card {
          flex-direction: row;
          text-align: left;
          padding: 40px 48px;
          gap: 36px;
        }
        .founder-card .founder-quote {
          margin: 0;
        }
      }

      /* ══ DARK PURPLE THEME (global) ══ */
      :root {
        --bg: transparent;
        --bg2: rgba(55, 48, 163, 0.18);
        --bg3: rgba(30, 27, 110, 0.35);
        --ink: #f5f3ff;
        --ink2: #c4b8e0;
        --ink3: #8f86a9;
        --text: #c4b8e0;
        --border: rgba(167, 139, 250, 0.22);
        --glass: rgba(91, 79, 212, 0.12);
        --card: rgba(55, 48, 163, 0.2);
      }
      body {
        background: radial-gradient(
          ellipse at 50% 0%,
          #5b4fd4 0%,
          #3730a3 40%,
          #1e1b6e 75%,
          #0f0d42 100%
        ) !important;
        background-attachment: fixed !important;
        color: var(--ink) !important;
      }
      /* Nav — dark translucent */
      nav {
        background: rgba(15, 13, 66, 0.94) !important;
        border-bottom: 1px solid rgba(167, 139, 250, 0.18) !important;
      }
      .logo {
        color: #a78bfa !important;
        -webkit-text-fill-color: #a78bfa !important;
      }
      .logo small {
        -webkit-text-fill-color: rgba(196, 184, 224, 0.4) !important;
        color: rgba(196, 184, 224, 0.4) !important;
      }
      /* Cards — dark glass */
      .sector-card,
      .test-card,
      .plan-card,
      .faq,
      .feature-card {
        background: rgba(55, 48, 163, 0.18) !important;
        border-color: rgba(167, 139, 250, 0.15) !important;
        color: var(--ink) !important;
      }
      /* Sections transparent */
      section {
        background: transparent !important;
      }
      .sec {
        background: transparent !important;
      }
      /* Dividers */
      .divider {
        background: linear-gradient(
          90deg,
          transparent,
          rgba(167, 139, 250, 0.2),
          transparent
        ) !important;
      }
      /* Ticker */
      .ticker {
        background: rgba(91, 79, 212, 0.08) !important;
        border-color: rgba(167, 139, 250, 0.12) !important;
      }
      .ti {
        color: rgba(196, 184, 224, 0.6) !important;
      }
      /* Section tags */
      .sec-tag {
        color: var(--amber) !important;
      }
      /* Login/auth boxes — translucent so the site's gradient + particles show through, matching home */
      .login-box,
      .modal {
        background: rgba(15, 13, 66, 0.55) !important;
        border-color: rgba(167, 139, 250, 0.15) !important;
        backdrop-filter: blur(20px) !important;
      }
      /* FAQ */
      .faq-q-text {
        color: var(--ink) !important;
      }
      .faq-a-text {
        color: var(--ink2) !important;
      }
      /* Hero text */
      .hw {
        color: var(--ink) !important;
        background: none !important;
      }
      .hc {
        color: var(--amber) !important;
        background: none !important;
      }
      /* Stats */
      .stat-num {
        color: #a78bfa !important;
      }
      /* Inputs dark */
      input,
      textarea,
      select {
        background: rgba(15, 13, 66, 0.7) !important;
        color: var(--ink) !important;
        border-color: rgba(167, 139, 250, 0.22) !important;
      }
      input::placeholder,
      textarea::placeholder {
        color: rgba(196, 184, 224, 0.4) !important;
      }
      /* MR.G chat */
      .mrg-out-msg {
        background: rgba(55, 48, 163, 0.25) !important;
        color: var(--ink) !important;
      }

      /* ══ JOBLEADS FONT + COLOR UPGRADE ══ */
      /* Headings → Bricolage Grotesque (brand display font) */
      h1,
      h2,
      h3,
      .sec-tag,
      .login-title,
      .modal-title,
      .plan-name,
      .app-title,
      .hero-title,
      .hw,
      .hc,
      section h2,
      section h3 {
        font-family: var(--font-display) !important;
        letter-spacing: -0.02em !important;
      }
      /* Body + Nav → Sora (brand body font) */
      body,
      nav,
      .nav-tab,
      .btn-login,
      .lang-btn,
      p,
      a,
      label,
      input,
      button,
      select,
      textarea {
        font-family: var(--font-body) !important;
      }
      /* Button labels → Bricolage Grotesque per DESIGN.md (headlines + ALL button labels) */
      .btn-cta,
      .btn-primary,
      .btn-secondary {
        font-family: var(--font-display) !important;
      }
      .btn-login {
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
      }
      .btn-cta {
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
      }

      /* ══ JOBLEADS CTA COLOR: coral #f56462 ══ */
      /* Primary CTA buttons get coral instead of amber */
      .btn-cta,
      .bp {
        background: var(--jobleads-coral) !important;
        color: oklch(15% 0.015 265) !important;
      }
      .btn-cta:hover,
      .bp:hover {
        background: var(--jobleads-coral-dark) !important;
      }
      /* Keep amber for secondary accents (logo, borders, active tabs) */
      :root {
        --jobleads-coral: #f56462;
        --jobleads-coral-dark: #e04d4b;
        --jobleads-dark: #100f0e;
        --jobleads-text: #484745;
      }

      /* ══ AUTH MODAL (JobLeads-style) ══ */
      #auth-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.88);
        z-index: 500;
        align-items: center;
        justify-content: center;
        padding: 20px;
        backdrop-filter: blur(6px);
      }
      #auth-modal-overlay.open {
        display: flex;
      }
      #auth-modal-box {
        width: 100%;
        max-width: 420px;
        border-radius: 16px;
        overflow: hidden;
        background: rgba(15, 13, 66, 0.55);
        border: 1px solid rgba(167, 139, 250, 0.15);
        backdrop-filter: blur(20px);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
      }
      .am-top-bar {
        height: 3px;
        background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
      }
      .am-body {
        padding: 28px 32px 32px;
      }
      .am-logo-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
      }
      .am-logo {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 900;
        color: #f59e0b;
        letter-spacing: 1px;
      }
      .am-badge {
        font-family: var(--font-mono);
        font-size: 9px;
        color: rgba(96, 165, 250, 0.6);
        background: rgba(96, 165, 250, 0.06);
        border: 1px solid rgba(96, 165, 250, 0.15);
        border-radius: 20px;
        padding: 2px 8px;
        letter-spacing: 2px;
      }
      .am-title {
        font-family: var(--font-display);
        font-size: 19px;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 4px;
      }
      .am-sub {
        font-size: 13px;
        color: var(--text);
        margin-bottom: 22px;
        font-family: var(--font-body);
      }
      .am-social-btn {
        width: 100%;
        padding: 11px;
        border-radius: 9px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 10px;
        transition: background 0.25s;
        border: none;
        font-family: var(--font-body);
      }
      .am-google {
        background: #fff;
        color: #1a1a1a;
      }
      .am-google:hover {
        background: #f0f0f0;
      }
      .am-linkedin {
        background: #0a66c2;
        color: #fff;
      }
      .am-linkedin:hover {
        background: #0858a7;
      }
      .am-divider {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 16px 0;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.2);
        font-family: var(--font-mono);
      }
      .am-divider::before,
      .am-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
      }
      .am-field {
        margin-bottom: 14px;
      }
      .am-field label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--ink3);
        margin-bottom: 6px;
        font-family: var(--font-body);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .am-field input {
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 11px 14px;
        color: var(--ink);
        font-size: 14px;
        font-family: var(--font-body);
        outline: none;
        transition: border 0.2s;
      }
      .am-field input:focus {
        border-color: var(--cyan);
      }
      .am-field-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
      }
      .am-field-row label {
        margin-bottom: 0;
        font-size: 11px;
        font-weight: 600;
        color: var(--ink3);
        font-family: var(--font-body);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .am-forgot {
        font-size: 12px;
        color: var(--ink3);
        background: none;
        border: none;
        cursor: pointer;
        font-family: var(--font-body);
        transition: color 0.2s;
      }
      .am-forgot:hover {
        color: var(--amber);
      }
      .am-remember {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
      }
      .am-remember input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: var(--amber);
        cursor: pointer;
      }
      .am-remember label {
        font-size: 12px;
        color: var(--ink3);
        font-family: var(--font-body);
        cursor: pointer;
      }
      .am-submit {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        font-family: var(--font-body);
        transition:
          background 0.25s,
          transform 0.25s,
          opacity 0.25s;
        background: #f56462;
        color: oklch(15% 0.015 265);
      }
      .am-submit:hover {
        background: #e04d4b !important;
        transform: translateY(-1px);
      }
      .am-submit:disabled {
        opacity: 0.6;
        transform: none;
        cursor: wait;
      }
      .am-toggle {
        text-align: center;
        margin-top: 16px;
        font-size: 13px;
        color: var(--text);
        font-family: var(--font-body);
      }
      .am-toggle a {
        color: var(--amber);
        cursor: pointer;
        font-weight: 600;
      }
      .am-toggle a:hover {
        color: #fbbf24;
      }
      .am-close {
        position: absolute;
        top: 14px;
        right: 16px;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.3);
        font-size: 18px;
        cursor: pointer;
        line-height: 1;
        z-index: 1;
      }
      .am-close:hover {
        color: rgba(255, 255, 255, 0.7);
      }
      #am-msg {
        text-align: center;
        font-size: 12px;
        font-family: var(--font-body);
        margin-top: 8px;
        min-height: 16px;
      }

      /* ══ CONTENT GATE ══ */
      .content-gate-wrap {
        position: relative;
      }
      .content-gate-blur {
        filter: blur(5px);
        pointer-events: none;
        user-select: none;
        opacity: 0.7;
      }
      .content-gate-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
      }
      .content-gate-box {
        background: rgba(12, 15, 30, 0.94);
        border: 1px solid rgba(245, 158, 11, 0.22);
        border-radius: 18px;
        padding: 32px 28px;
        text-align: center;
        max-width: 380px;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(20px);
      }
      .cg-lock-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 14px;
        font-size: 20px;
      }
      .cg-title {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 700;
        color: #f1f5f9;
        margin-bottom: 6px;
      }
      .cg-sub {
        font-size: 13px;
        color: #64748b;
        font-family: var(--font-body);
        margin-bottom: 20px;
        line-height: 1.5;
      }
      .cg-btn {
        background: #f56462;
        color: oklch(15% 0.015 265);
        border: none;
        border-radius: 9px;
        padding: 11px 28px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        font-family: var(--font-body);
        transition: opacity 0.2s;
        display: block;
        width: 100%;
      }
      .cg-btn:hover {
        opacity: 0.92;
      }
      .cg-sub2 {
        font-size: 11px;
        color: #334155;
        font-family: var(--font-mono);
        margin-top: 10px;
      }

      /* ══ LINKEDIN STYLE IN EXISTING LOGIN PAGE ══ */
      .oauth-li {
        background: #0a66c2;
        color: #fff;
      }
      .oauth-li:hover {
        background: #0858a7;
      }

      /* ══ LOGIN — layout only; colors unified with #page-registro via shared .login-box/.ff/.bp ══ */
      #page-login .oauth-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 18px;
      }
      #page-login .oauth-slot {
        width: 100%;
      }
      #page-login .oauth-slot iframe {
        width: 100% !important;
      }
      #page-login .login-forgot {
        background: none;
        border: none;
        font-size: 11px;
        color: var(--ink3);
        cursor: pointer;
        font-family: var(--font-body);
        transition: color 0.2s;
        padding: 0;
      }
      #page-login .login-forgot:hover {
        color: var(--cyan);
      }
      #page-login .login-remember {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 4px 0 16px;
      }
      #page-login .login-remember input {
        width: 14px;
        height: 14px;
        accent-color: var(--cyan);
        cursor: pointer;
      }
      #page-login .login-remember label {
        font-size: 12px;
        color: var(--ink3);
        font-family: var(--font-body);
        cursor: pointer;
      }
      @media (max-width: 520px) {
        .login-page {
          padding: 20px;
        }
        .login-box {
          padding: 32px 22px;
        }
      }

      /* ══ AUTH SPLIT — login/registro visual panel ══ */
      .auth-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: calc(100vh - 64px);
      }
      .auth-split-visual {
        position: relative;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 48px;
      }
      .auth-split-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(15, 13, 66, 0.5) 0%,
          rgba(15, 13, 66, 0.55) 55%,
          rgba(15, 13, 66, 0.92) 100%
        );
      }
      .auth-split-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }
      .auth-split-logo {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .auth-split-quote {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 3vw, 2.25rem);
        font-weight: 800;
        color: var(--ink);
        line-height: 1.3;
        max-width: 24ch;
        letter-spacing: -0.01em;
      }
      .auth-split-quote span {
        display: block;
        color: var(--amber);
      }
      @media (max-width: 900px) {
        .auth-split {
          grid-template-columns: 1fr;
        }
        .auth-split-visual {
          display: none;
        }
      }

      /* ══ JL-PAGES DARK THEME FORCE ══ */
      #page-jl-dashboard,
      #page-jl-cazatalentos,
      #page-jl-guias {
        color: var(--ink) !important;
      }
      #page-jl-dashboard h1,
      #page-jl-dashboard h2,
      #page-jl-dashboard h3,
      #page-jl-cazatalentos h1,
      #page-jl-cazatalentos h2,
      #page-jl-guias h1,
      #page-jl-guias h2 {
        color: var(--ink) !important;
      }
      #page-jl-dashboard p,
      #page-jl-cazatalentos p,
      #page-jl-guias p {
        color: var(--ink2) !important;
      }
      #page-jl-dashboard [style*="background:#f8f7f5"],
      #page-jl-cazatalentos [style*="background:#f8f7f5"],
      #page-jl-guias [style*="background:#f8f7f5"] {
        background: rgba(10, 10, 46, 0.5) !important;
        border-color: rgba(96, 165, 250, 0.18) !important;
      }
      #page-jl-dashboard [style*="background:rgba(255,255,255,0.97)"],
      #page-jl-dashboard [style*="background:rgba(255,255,255"] {
        background: rgba(10, 10, 46, 0.95) !important;
        border-bottom-color: rgba(96, 165, 250, 0.15) !important;
      }
      #page-jl-dashboard input,
      #page-jl-dashboard select {
        background: rgba(10, 10, 46, 0.6) !important;
        border-color: rgba(96, 165, 250, 0.22) !important;
        color: var(--ink) !important;
      }
      #page-jl-cazatalentos [style*="color:#100f0e"],
      #page-jl-guias [style*="color:#100f0e"],
      #page-jl-dashboard [style*="color:#100f0e"] {
        color: var(--ink) !important;
      }
      #page-jl-cazatalentos [style*="color:#888580"],
      #page-jl-guias [style*="color:#888580"],
      #page-jl-dashboard [style*="color:#888580"] {
        color: var(--ink2) !important;
      }

      /* ── HERO ANIMATIONS ── */
      @keyframes hero-fade-up {
        from {
          opacity: 0;
          transform: translateY(28px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes float-slow {
        0%,
        100% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-12px);
        }
      }
      @keyframes gradient-shift {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      @keyframes aurora {
        0% {
          transform: rotate(0deg) scale(1);
        }
        33% {
          transform: rotate(120deg) scale(1.1);
        }
        66% {
          transform: rotate(240deg) scale(0.95);
        }
        100% {
          transform: rotate(360deg) scale(1);
        }
      }
      .hero h1 {
        animation: hero-fade-up 0.8s var(--ease-out) both;
      }
      .hero-sub {
        animation: hero-fade-up 0.8s 0.15s var(--ease-out) both;
      }
      .hero-btns {
        animation: hero-fade-up 0.8s 0.3s var(--ease-out) both;
      }
      .sectors-hero {
        animation: hero-fade-up 0.8s 0.45s var(--ease-out) both;
      }

      /* Aurora background overlay on hero */
      .hero::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(124, 58, 237, 0.15) 0%,
          transparent 70%
        );
        top: -100px;
        left: -100px;
        animation: aurora 20s linear infinite;
        pointer-events: none;
        z-index: 0;
      }
      .hero::after {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(96, 165, 250, 0.1) 0%,
          transparent 70%
        );
        bottom: -50px;
        right: -50px;
        animation: aurora 15s linear infinite reverse;
        pointer-events: none;
        z-index: 0;
      }
      /* Stagger stats/cards on scroll. Also carries .sector-card's hover
         transition (border-color/box-shadow) — same specificity as the
         plain .sector-card rule above but declared later, so it must be
         the one holding the full property list or the hover transition
         is silently dropped. */
      .stat-card,
      .sector-card,
      .mrg-card {
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 300ms var(--ease-out),
          transform 300ms var(--ease-out),
          border-color 250ms var(--ease-out),
          box-shadow 250ms var(--ease-out);
      }
      .stat-card.visible,
      .sector-card.visible,
      .mrg-card.visible {
        opacity: 1;
        transform: translateY(0);
      }
      @keyframes drawCheck {
        to {
          stroke-dashoffset: 0;
        }
      }
      .upload-success {
        text-align: center;
        padding: 24px;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes gb35shimmer {
        0% {
          background-position: -200% 0;
        }
        100% {
          background-position: 200% 0;
        }
      }
      .gb35-skel {
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.06) 25%,
          rgba(255, 255, 255, 0.14) 37%,
          rgba(255, 255, 255, 0.06) 63%
        );
        background-size: 400% 100%;
        animation: gb35shimmer 1.4s ease infinite;
        border-radius: 8px;
      }
      .co-panel {
        animation: fadeIn 0.2s ease;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .u-fade-in {
        animation: fadeIn 240ms cubic-bezier(0.23, 1, 0.32, 1);
      }

      /* Press feedback — shared (improve-animations 005) — cascade-last on purpose */
      .fbtn, .jchip, .sbtn, .sbtn-pro, .nav-tab {
        transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out);
      }
      .fbtn:active, .jchip:active, .sbtn:active, .sbtn-pro:active {
        transform: scale(0.97);
      }
      .nav-tab:active {
        transform: translateY(1px);
      }
      .plan:active {
        transform: translateY(-2px) scale(0.98);
        transition-duration: 120ms;
      }

      /* ═══ DESIGN SYSTEM COMPONENTS ═══ */

      /* Buttons */
      .btn-primary {
        background: var(--coral);
        color: oklch(15% 0.015 265);
        border: none;
        border-radius: 50px;
        padding: 14px 32px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1rem;
        cursor: pointer;
        transition:
          transform 0.2s,
          box-shadow 0.2s,
          background 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .btn-primary:hover {
        background: var(--coral-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(245, 100, 98, 0.35);
      }
      .btn-primary.lg {
        padding: 16px 40px;
        font-size: 1.0625rem;
      }
      .btn-secondary {
        background: oklch(14% 0.02 75/0.7);
        color: var(--amber-lt);
        border: 1.5px solid oklch(78% 0.17 75/0.35);
        border-radius: 50px;
        padding: 13px 30px;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 0.9375rem;
        cursor: pointer;
        transition:
          border-color 0.2s,
          color 0.2s,
          background 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .btn-secondary:hover {
        border-color: var(--amber);
        color: var(--ink);
        background: oklch(78% 0.17 75/0.1);
      }
      .btn-primary:active,
      .btn-secondary:active {
        transform: scale(0.97);
        box-shadow: none;
      }
      .btn-primary:active {
        transform: scale(0.97) translateY(0);
      }

      /* Badges */
      .badge-blue {
        color: var(--blue-lt);
        border-color: oklch(60% 0.18 250/0.3);
        background: oklch(60% 0.18 250/0.08);
      }
      .badge-amber {
        color: var(--amber);
        border-color: oklch(78% 0.17 75/0.3);
        background: oklch(78% 0.17 75/0.08);
      }
      .badge-green {
        color: oklch(72% 0.18 145);
        border-color: oklch(72% 0.18 145/0.3);
        background: oklch(72% 0.18 145/0.08);
      }

      /* Section wrappers */
      .sec {
        padding: var(--sp-24) var(--sp-8);
        position: relative;
        z-index: 1;
      }
      .sec-inner {
        max-width: 1100px;
        margin: 0 auto;
      }
      .sec-label {
        display: block;
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--amber);
        margin-bottom: var(--sp-3);
      }
      @media (max-width: 640px) {
        .sec {
          padding: var(--sp-16) var(--sp-4);
        }
      }

      /* Card base */
      .card {
        border-radius: 16px;
        border: 1px solid var(--border);
        background: var(--bg3);
        padding: var(--sp-6);
      }

      /* Hero */
      .hero {
        min-height: 100svh;
        display: flex;
        align-items: center;
        padding: clamp(96px, 12vw, 160px) 0 clamp(64px, 8vw, 96px);
        position: relative;
        overflow: hidden;
      }
      .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
      }
      .hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.09;
        filter: saturate(0.4);
      }
      .hero-inner {
        position: relative;
        z-index: 2;
        padding: 0 clamp(20px, 5vw, 64px);
        max-width: 860px;
      }
      .hero-badges {
        display: flex;
        gap: var(--sp-2);
        flex-wrap: wrap;
        margin-bottom: var(--sp-6);
      }
      /* Hero eyebrow: same .badge component used for PRO/rating pills elsewhere,
         but here it should read as plain text, not a floating pill+box */
      .hero-badges .badge {
        background: none;
        border: none;
        padding: 0;
        border-radius: 0;
      }
      .hero-headline {
        color: var(--ink);
        margin-bottom: var(--sp-6);
        font-size: clamp(3rem, 7vw, 5.5rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
      }
      .hero-headline em {
        font-style: normal;
        color: var(--amber);
        font-weight: 800;
        padding-bottom: 0.08em;
        display: inline-block;
      }
      .hero-lead {
        font-size: clamp(1rem, 1.8vw, 1.2rem);
        color: var(--ink2);
        line-height: 1.7;
        margin-bottom: var(--sp-8);
        max-width: 46ch;
      }
      .hero-ctas {
        display: flex;
        gap: var(--sp-3);
        flex-wrap: wrap;
        margin-bottom: var(--sp-8);
        align-items: center;
      }

      /* Stats strip — no card/glass box; thin rule + divider lines, first stat weighted larger */
      .stats-strip {
        padding: var(--sp-10) var(--sp-8);
      }
      .stats-strip-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid var(--border);
        padding-top: var(--sp-6);
        text-align: left;
      }
      .stat-item {
        padding: 0 var(--sp-6);
        position: relative;
      }
      .stat-item:first-child {
        padding-left: 0;
      }
      .stat-item:not(:first-child)::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 1px;
        background: var(--border);
      }
      .stat-num {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(1.75rem, 3vw, 2.25rem);
        color: var(--amber);
        line-height: 1;
        margin-bottom: 6px;
      }
      .stat-item:first-child .stat-num {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
      }
      .stat-lbl {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink3);
      }
      @media (max-width: 600px) {
        #cvr-fields,
        #cvr-sections {
          grid-template-columns: 1fr !important;
        }
      }
      @media (max-width: 600px) {
        .stats-strip-inner {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--sp-6) var(--sp-4);
        }
        .stat-item,
        .stat-item:first-child {
          padding: 0;
        }
        .stat-item::before {
          display: none;
        }
        .stat-item:first-child {
          grid-column: 1 / -1;
        }
        .stat-item:first-child .stat-num {
          font-size: clamp(2.25rem, 10vw, 3rem);
        }
      }

      /* Testimonials */
      .testi-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-6);
      }
      @media (max-width: 1023px) {
        .testi-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 640px) {
        .testi-grid {
          grid-template-columns: 1fr;
        }
      }
      .testi-card {
        border-radius: 16px;
        border: 1px solid var(--border);
        background: var(--bg3);
        padding: var(--sp-8);
        border-top: 3px solid var(--blue);
        text-align: left;
      }
      .testi-quote {
        font-size: 1.0625rem;
        line-height: 1.65;
        color: var(--ink2);
        margin-bottom: var(--sp-6);
        font-style: italic;
      }
      .testi-quote::before {
        content: "\201C";
        color: var(--blue-lt);
        font-size: 2rem;
        font-family: var(--font-display);
        line-height: 0;
        vertical-align: -0.4em;
        margin-right: 4px;
      }
      .testi-author {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--ink);
      }
      .testi-loc {
        font-size: 0.75rem;
        color: var(--ink3);
        margin-top: 2px;
      }

      /* FAQ */
      .faq-item {
        border-bottom: 1px solid var(--border);
      }
      .faq-item:first-child {
        border-top: 1px solid var(--border);
      }
      .faq-q-btn {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--sp-6) 0;
        background: transparent;
        border: none;
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 600;
        color: var(--ink);
        cursor: pointer;
        text-align: left;
        gap: var(--sp-4);
      }
      .faq-icon-new {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        flex-shrink: 0;
        background: oklch(62% 0.18 250/0.12);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: var(--amber);
        transition: transform 0.2s;
      }
      .faq-item.open .faq-icon-new {
        transform: rotate(45deg);
        background: oklch(78% 0.17 75/0.12);
        border-color: oklch(78% 0.17 75/0.3);
      }
      .faq-body {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease;
      }
      .faq-item.open .faq-body {
        grid-template-rows: 1fr;
      }
      .faq-body-inner {
        overflow: hidden;
      }
      .faq-answer-text {
        padding-bottom: var(--sp-6);
        color: var(--ink2);
        line-height: 1.7;
        font-size: 0.9375rem;
      }

      /* Plan cards */
      .plans-grid-new {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--sp-4);
        max-width: 1220px;
        margin: 0 auto;
      }
      @media (max-width: 1100px) {
        .plans-grid-new {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 700px) {
        .plans-grid-new {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 480px) {
        .plans-grid-new {
          grid-template-columns: 1fr;
        }
      }
      .plan-card-new {
        border-radius: 20px;
        border: 1px solid var(--border);
        background: var(--bg3);
        padding: var(--sp-8);
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        transition:
          border-color 0.2s,
          transform 0.2s;
        text-align: left;
      }
      @media (hover: hover) and (pointer: fine) {
        .plan-card-new:hover {
          transform: translateY(-4px);
        }
      }
      .plan-card-new.featured {
        border: 2px solid var(--blue);
        background: oklch(16% 0.04 260);
      }
      .plan-name-new {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.25rem;
        color: var(--ink);
      }
      .plan-price-new {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 2.5rem;
        color: var(--ink);
        line-height: 1;
      }
      .plan-price-new span {
        font-size: 1rem;
        font-weight: 400;
        color: var(--ink3);
      }
      .plan-desc-new {
        font-size: 0.875rem;
        color: var(--ink2);
      }
      .plan-feat-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        flex: 1;
      }
      .plan-feat-list li {
        font-size: 0.875rem;
        color: var(--ink2);
        display: flex;
        align-items: flex-start;
        gap: var(--sp-2);
      }
      .plan-feat-list li::before {
        content: "✓";
        color: var(--blue-lt);
        font-weight: 700;
        flex-shrink: 0;
      }
      .plan-feat-list li.dim {
        color: var(--ink3);
      }
      .plan-feat-list li.dim::before {
        content: "–";
        color: var(--ink3);
      }

      /* Sector choice */
      .sector-choice-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-4);
        max-width: 700px;
        margin: 0 auto;
      }
      @media (max-width: 480px) {
        .sector-choice-grid {
          grid-template-columns: 1fr;
        }
      }
      .sector-choice-card {
        border-radius: 20px;
        border: 1px solid var(--border);
        background: var(--bg3);
        padding: var(--sp-8);
        cursor: pointer;
        transition:
          border-color 0.2s,
          transform 0.2s,
          background 0.2s;
        text-align: left;
        display: flex;
        flex-direction: column;
      }
      .sector-choice-card .choice-desc {
        flex: 1;
      }
      @media (hover: hover) and (pointer: fine) {
        .sector-choice-card:hover {
          transform: translateY(-4px);
        }
      }
      .sector-choice-card.h2a:hover,
      .sector-choice-card.h2a.active {
        border-color: oklch(72% 0.18 145/0.6);
        background: oklch(72% 0.18 145/0.05);
      }
      .sector-choice-card.h2b:hover,
      .sector-choice-card.h2b.active {
        border-color: oklch(78% 0.17 75/0.6);
        background: oklch(78% 0.17 75/0.05);
      }
      .choice-title {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--ink);
        margin-bottom: 6px;
      }
      .choice-wage {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: var(--sp-3);
      }
      .choice-desc {
        font-size: 0.875rem;
        color: var(--ink2);
        line-height: 1.6;
      }