:root {
        --landing-width: 1120px;
      }

      .landing-shell {
        position: relative;
        z-index: 1;
        min-height: 100dvh;
      }

      .hero-cta,
      .final-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        border: 1px solid rgba(var(--gold-muted-rgb), 0.42);
        border-radius: var(--r-md);
        padding: 12px 20px;
        background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
        box-shadow: 0 8px 28px rgba(var(--gold-muted-rgb), 0.2);
        color: #06051a;
        font-family: var(--font-h);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-decoration: none;
        text-transform: uppercase;
        transition: transform 0.2s, box-shadow 0.2s;
      }

      .hero-cta:hover,
      .final-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 34px rgba(var(--gold-muted-rgb), 0.3);
      }

      .landing-main { overflow: hidden; }

      .hero {
        width: min(calc(100% - 32px), var(--landing-width));
        min-height: calc(100dvh - 68px);
        margin: 0 auto;
        padding: clamp(70px, 9vw, 118px) 0 70px;
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
        align-items: center;
        gap: clamp(38px, 7vw, 90px);
      }

      /* Escritorio: fila 1 = altura de la Luna (fondo fijo, sin contenido encima); la
         tarjeta de la izquierda queda centrada a su altura. Debajo, en la columna derecha,
         rótulo y panel del cielo apilados con el mismo ancho. */
      @media (min-width: 861px) {
        .hero {
          min-height: 0;
          padding-top: 40px;
          padding-bottom: 40px;
          grid-template-rows: auto auto;
          row-gap: 14px;
        }
        .hero-cosmos-preview,
        .hero .hero-visual { display: contents; }
        .hero > div:first-child { grid-column: 1; grid-row: 1; align-self: end; }
        .returning-user-card { margin-bottom: 0; }
        .hero .three-moon-focus {
          grid-column: 2;
          grid-row: 1;
          width: 100%;
          height: calc(75dvh - 118px);
          min-height: 320px;
          aspect-ratio: auto;
        }
        .hero .lunar-preview .visual-caption {
          position: static;
          grid-column: 1;
          grid-row: 2;
          align-self: start;
          justify-self: start;
          width: 100%;
          max-width: none;
          margin: 0;
        }
        .hero .lunar-scene-panel {
          grid-column: 2;
          grid-row: 2;
          align-self: start;
          justify-self: center;
          width: min(100%, 410px);
          margin: 0;
        }
      }

      .eyebrow {
        color: var(--gold);
        font-family: var(--font-h);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }

      .hero-title {
        max-width: 760px;
        margin-top: 18px;
        font-family: var(--font-h);
        font-size: clamp(38px, 5.4vw, 72px);
        font-weight: 700;
        line-height: 1.08;
        text-wrap: balance;
        text-transform: uppercase;
        background: linear-gradient(135deg, var(--gold-light), var(--gold) 52%, var(--gold-dark));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .hero-copy {
        max-width: 680px;
        margin-top: 24px;
        color: #f1effa;
        font-size: 19px;
        font-weight: 400;
        line-height: 1.75;
      }

      .hero-copy strong { color: #ffffff; font-weight: 600; }

      .hero-privacy-note {
        max-width: 650px;
        margin-top: 16px;
        padding-left: 13px;
        border-left: 2px solid rgba(var(--gold-muted-rgb), 0.42);
        color: rgba(231, 227, 244, 0.72);
        font-size: 13px;
        line-height: 1.6;
      }

      .hero-actions {
        margin-top: 34px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
      }

      .hero-secondary {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        padding: 10px 12px;
        color: var(--text-muted);
        font-family: var(--font-h);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-decoration: none;
        text-transform: uppercase;
      }

      .hero-secondary:hover { color: var(--text); }

      .hero-visual {
        position: relative;
        aspect-ratio: 1;
        width: min(100%, 470px);
        margin: 0 auto;
        display: grid;
        place-items: center;
      }

      .hero-cosmos-preview {
        min-width: 0;
      }

      .lunar-preview {
        width: min(100%, 410px);
        aspect-ratio: 1;
        isolation: isolate;
      }

      .three-moon-focus {
        width: min(76%, 320px);
        aspect-ratio: 1;
        border-radius: 50%;
        pointer-events: none;
      }

      .lunar-preview .visual-caption {
        right: 2%;
        bottom: 7%;
        max-width: 205px;
      }

      .lunar-preview .visual-caption > span,
      .preview-kicker {
        display: block;
        color: var(--gold);
        font-family: var(--font-h);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .lunar-preview .visual-caption strong {
        margin-top: 3px;
        color: var(--gold-light);
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: none;
      }

      .lunar-preview .visual-caption small {
        display: block;
        margin-top: 3px;
        color: var(--text-muted);
        font-size: 10px;
        line-height: 1.4;
      }

      .lunar-scene-panel {
        width: min(100%, 470px);
        margin: -20px auto 0;
        padding: 17px;
        border: 1px solid rgba(var(--gold-muted-rgb), 0.22);
        border-radius: 20px;
        background: rgba(7, 6, 28, 0.76);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
        text-align: left;
        backdrop-filter: blur(16px);
      }

      .lunar-scene-copy {
        display: grid;
        gap: 5px;
        margin-bottom: 13px;
      }

      .lunar-scene-copy strong {
        color: #f4dd7b;
        font-family: var(--font-h);
        font-size: 1rem;
      }

      .lunar-scene-copy > span:last-child {
        color: rgba(238, 233, 251, 0.68);
        font-size: 0.75rem;
        line-height: 1.45;
      }

      .lunar-scene-control-group {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        padding-top: 9px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
      }

      .lunar-scene-control-group button {
        min-height: 32px;
        padding: 6px 9px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        color: rgba(240, 235, 255, 0.72);
        background: rgba(255, 255, 255, 0.035);
        cursor: pointer;
        font: inherit;
        font-size: 0.65rem;
      }

      .lunar-scene-control-group button:hover,
      .lunar-scene-control-group button:focus-visible {
        border-color: rgba(241, 212, 106, 0.34);
        color: #fff;
      }

      .lunar-scene-control-group button[aria-pressed="true"] {
        border-color: rgba(241, 212, 106, 0.48);
        color: #f4dd7b;
        background: rgba(var(--gold-muted-rgb), 0.12);
      }

      .preview-profile-link {
        display: inline-flex;
        margin-top: 12px;
        color: var(--gold-light);
        font-family: var(--font-h);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-decoration: none;
        text-transform: uppercase;
      }

      .preview-profile-link:hover { color: #fff; }

      .hero-secondary[hidden] { display: none; }

      .visual-caption {
        position: absolute;
        right: 10%;
        bottom: 20%;
        z-index: 4;
        max-width: 170px;
        padding: 10px 12px;
        border: 1px solid rgba(var(--gold-muted-rgb), 0.2);
        border-radius: var(--r-sm);
        background: rgba(6,5,26,0.84);
        color: var(--text-muted);
        font-size: 10px;
        line-height: 1.5;
        backdrop-filter: blur(10px);
      }

      .visual-caption strong {
        display: block;
        color: var(--gold-light);
        font-family: var(--font-h);
        font-size: 9px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .library-note {
        scroll-margin-top: 90px;
        max-width: 700px;
        margin: 28px auto 0;
        padding: 14px 18px;
        border: 1px solid rgba(var(--gold-muted-rgb), 0.16);
        border-radius: var(--r-md);
        background: rgba(var(--gold-muted-rgb), 0.04);
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
      }

      .library-note strong { color: var(--gold-light); }

      .threshold-section {
        padding: clamp(78px, 10vw, 128px) 16px;
      }

      .threshold-card {
        width: min(100%, 860px);
        margin: 0 auto;
        padding: clamp(28px, 6vw, 58px);
        border: 1px solid rgba(248,113,113,0.22);
        border-radius: var(--r-xl);
        background:
          repeating-linear-gradient(135deg, transparent 0 12px, rgba(248,113,113,0.018) 12px 24px),
          rgba(14,12,40,0.78);
        box-shadow: 0 24px 80px rgba(0,0,0,0.38), 0 0 50px rgba(124,58,237,0.08);
        text-align: center;
      }

      .threshold-symbol {
        display: block;
        margin-bottom: 14px;
        font-size: 38px;
      }

      .threshold-card h2 {
        color: var(--gold-light);
        font-family: var(--font-h);
        font-size: clamp(25px, 4vw, 40px);
        line-height: 1.25;
        text-transform: uppercase;
      }

      .threshold-card p {
        max-width: 650px;
        margin: 20px auto 0;
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.8;
      }

      .threshold-card strong { color: var(--text); }
      .final-cta { margin-top: 30px; min-height: 54px; padding-inline: 28px; }

      .landing-footer {
        padding: 28px 16px;
        border-top: 1px solid rgba(var(--gold-muted-rgb), 0.1);
        color: var(--text-muted);
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
      }

      .landing-footer strong { color: var(--gold-light); font-family: var(--font-h); }


      /* Tarjeta para usuario recurrente en index */
      .returning-user-card {
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(14, 12, 40, 0.95) 100%);
        border: 1.5px solid rgba(var(--gold-muted-rgb), 0.45);
        border-radius: var(--r-xl);
        padding: clamp(20px, 4vw, 32px);
        box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(124, 58, 237, 0.2);
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
        text-align: left;
        animation: rise 0.4s ease;
      }

      .returning-user-card[hidden] {
        display: none;
      }

      #default-hero-intro[hidden] {
        display: none;
      }

      .rub-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
      }

      .rub-badge {
        font-family: var(--font-h);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gold-light);
      }

      .rub-date {
        font-size: 12px;
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
      }

      .rub-greeting {
        font-family: var(--font-h);
        font-size: clamp(22px, 5vw, 32px);
        font-weight: 700;
        color: #ffffff;
        line-height: 1.25;
      }

      .rub-desc {
        color: #dedbf0;
        font-size: 15px;
        line-height: 1.6;
      }

      .rub-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 8px;
      }

      .rub-actions .hero-cta {
        padding: 14px 22px;
      }

      .hero-cta.gold-variant {
        background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 50%, var(--gold-light) 100%);
        color: #06051a;
        border: 1px solid rgba(var(--gold-light-rgb), 0.4);
        box-shadow: 0 4px 24px rgba(var(--gold-rgb), 0.4);
      }

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

      @media (max-width: 860px) {
        .hero {
          min-height: auto;
          grid-template-columns: 1fr;
          text-align: center;
        }
        .hero-copy { margin-inline: auto; }
        .hero-actions { justify-content: center; }
        .hero-cosmos-preview { width: min(92vw, 500px); margin-inline: auto; }
        .hero-visual { width: min(88vw, 430px); }
        .hero-privacy-note { margin-inline: auto; text-align: left; }
      }

      @media (max-width: 560px) {
        .hero { padding-top: 40px; }
        .hero-title { font-size: clamp(28px, 9vw, 42px); }
        .hero-copy { font-size: 18px; line-height: 1.75; color: #f5f2fc; }
        .hero-actions { align-items: stretch; flex-direction: column; }
        .hero-cta, .hero-secondary { width: 100%; }
        .hero-visual { width: min(96vw, 390px); }
        .lunar-scene-panel { margin-top: -12px; padding: 14px; }
        .lunar-preview .visual-caption { right: 1%; bottom: 5%; max-width: 175px; }
        .visual-caption { right: 5%; bottom: 13%; }
        .threshold-card { border-radius: var(--r-lg); }
        .final-cta { width: 100%; }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-cta,
        .final-cta { transition: none; }
      }

      @media (forced-colors: active) {
        .system-card,
        .library-note,
        .threshold-card {
          border: 1px solid CanvasText;
          background: Canvas;
          color: CanvasText;
          forced-color-adjust: auto;
        }

        .system-card::before {
          display: none;
        }
      }