*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%;
      overflow: hidden;
      background: #080808;
      color: #f0f0f0;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Canvas — renderizado GPU directo, cero parpadeo ── */
    #scene {
      position: fixed;
      top: 0; left: 0;
      z-index: 0;
      display: block;
    }

    /* ── Overlay de gradiente ── */
    .overlay {
      position: fixed; inset: 0; z-index: 1;
      background:
        linear-gradient(to top,    rgba(8,8,8,0.78) 0%,  rgba(8,8,8,0.08) 38%, transparent 62%),
        linear-gradient(to bottom, rgba(8,8,8,0.42) 0%,  transparent 28%);
      pointer-events: none;
    }

    /* ── Pantalla de carga ── */
    #loading-screen {
      position: fixed; inset: 0; z-index: 900;
      background: #080808;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 20px;
      transition: opacity 0.7s ease;
    }
    #loading-screen.hidden { opacity: 0; pointer-events: none; }

    .load-label {
      font-size: 9px; letter-spacing: 0.3em;
      text-transform: uppercase; color: rgba(240,240,240,0.25);
    }
    .load-track {
      width: 100px; height: 1px;
      background: rgba(240,240,240,0.08);
    }
    .load-fill {
      height: 100%; width: 0%;
      background: rgba(240,240,240,0.45);
      transition: width 0.15s linear;
    }

    /* ── Barra de progreso (fondo) ── */
    #progress-bar {
      position: fixed; bottom: 0; left: 0;
      height: 1px; width: 0%;
      background: rgba(240,240,240,0.35);
      z-index: 20;
      transition: width 60ms linear;
      will-change: width;
    }

    /* ── Members Club trigger — barra lateral derecha, estilo glass pill ── */
    .club-wrap {
      position: fixed; top: 50%; right: 1.6rem;
      transform: translateY(-50%); z-index: 200;
    }

    .club-trigger {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      background: rgba(247,246,243,0.92);
      border: 1px solid rgba(10,10,12,0.1);
      border-radius: 999px;
      color: #16161a;
      font-family: inherit; font-size: 9px;
      letter-spacing: 0.18em; text-transform: uppercase;
      cursor: pointer; padding: 1.1rem 0.65rem;
      transition: color 0.25s, background 0.25s, border-color 0.25s,
                  transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: scale(1);
      user-select: none;
      box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.05);
      -webkit-appearance: none; appearance: none;
      outline: none; -webkit-tap-highlight-color: transparent;
      position: relative; overflow: hidden;
    }
    .club-trigger::before {
      content: '';
      position: absolute; inset: 0; border-radius: inherit;
      background-image: url('texturas/papel-grano.png');
      background-size: cover; mix-blend-mode: multiply; opacity: 0.55;
      pointer-events: none;
    }
    .club-trigger:hover, .club-trigger.open {
      color: #16161a;
      background: rgba(247,246,243,1);
      border-color: rgba(10,10,12,0.18);
    }
    .club-trigger:hover      { transform: scale(1.07); }
    .club-trigger.open       { transform: scale(1.16); }
    .club-trigger.open:hover { transform: scale(1.16); }
    .club-trigger:active { background: rgba(247,246,243,1); }
    .club-trigger:focus-visible { outline: 1px solid rgba(10,10,12,0.4); outline-offset: 2px; }

    .trigger-label-wrap {
      position: relative; width: 13px; height: 92px;
    }
    .trigger-label {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%) rotate(-90deg);
      white-space: nowrap;
    }

    /* Marca de estado sobre "Members Club" — sigue la misma rotación vertical del texto */
    .club-mark {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%) rotate(-90deg);
      pointer-events: none;
      overflow: visible;
    }
    .club-mark-line { display: block; }
    .club-mark-check { display: none; }

    .trigger-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: rgba(10,10,12,0.2); flex-shrink: 0;
      transition: background 0.4s;
    }
    .trigger-dot.live { background: #51cf66; }

    .trigger-caret {
      font-size: 9px; transition: transform 0.25s;
      transform: rotate(-90deg);
    }
    .club-trigger.open .trigger-caret { transform: rotate(90deg); }

    /* ── Panel deslizante — desde el borde derecho ── */
    .club-panel {
      position: absolute; top: 50%; right: calc(100% + 16px);
      transform: translateY(-50%) translateX(16px);
      width: 300px;
      background: rgba(247,246,243,0.97);
      border: 1px solid rgba(10,10,12,0.1);
      border-radius: 22px;
      padding: 1.6rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
      box-shadow: 0 16px 50px rgba(0,0,0,0.4);
      overflow: hidden;
    }
    .club-panel::before {
      content: '';
      position: absolute; inset: 0; border-radius: inherit;
      background-image: url('texturas/papel-grano.png');
      background-size: cover; mix-blend-mode: multiply; opacity: 0.55;
      pointer-events: none;
    }
    .club-panel > * { position: relative; z-index: 1; }
    .club-panel.open {
      opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: all;
    }

    @media (max-width: 640px) {
      .club-wrap { right: 1rem; }
      .club-panel {
        /* mismo lado que en escritorio (al lado del pill, centrado
           verticalmente) pero con ancho que se ajusta al espacio real —
           así nunca se sale de la pantalla sin cambiar de dirección */
        width: min(300px, calc(100vw - 2rem));
        right: 0; left: auto;
        top: 50%; bottom: auto;
        transform: translateY(-50%) translateX(12px);
      }
      .club-panel.open { transform: translateY(-50%) translateX(0); }
    }

    /* ── Works — pestaña espejo de Members Club, lado izquierdo, estilo papel ── */
    .works-wrap {
      position: fixed; top: 50%; left: 1.6rem;
      transform: translateY(-50%); z-index: 200;
    }

    .works-trigger {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      background: rgba(247,246,243,0.92);
      border: 1px solid rgba(10,10,12,0.1);
      border-radius: 999px;
      color: #16161a;
      font-family: inherit; font-size: 9px;
      letter-spacing: 0.18em; text-transform: uppercase;
      cursor: pointer; padding: 1.1rem 0.65rem;
      transition: color 0.25s, background 0.25s, border-color 0.25s,
                  transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: scale(1);
      user-select: none;
      box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.05);
      -webkit-appearance: none; appearance: none;
      outline: none; -webkit-tap-highlight-color: transparent;
      position: relative; overflow: hidden;
    }
    .works-trigger::before {
      content: '';
      position: absolute; inset: 0; border-radius: inherit;
      background-image: url('texturas/papel-grano.png');
      background-size: cover; mix-blend-mode: multiply; opacity: 0.55;
      pointer-events: none;
    }
    .works-trigger:hover, .works-trigger.open {
      color: #0c0c0e;
      background: rgba(247,246,243,1);
      border-color: rgba(10,10,12,0.18);
    }
    .works-trigger:hover      { transform: scale(1.07); }
    .works-trigger.open       { transform: scale(1.16); }
    .works-trigger.open:hover { transform: scale(1.16); }
    .works-trigger:active { background: rgba(247,246,243,1); }
    .works-trigger:focus-visible { outline: 1px solid rgba(10,10,12,0.4); outline-offset: 2px; }

    .works-trigger .trigger-caret { transform: rotate(90deg); }
    .works-trigger.open .trigger-caret { transform: rotate(-90deg); }

    /* ── Panel deslizante — desde el borde izquierdo ── */
    .works-panel {
      position: absolute; top: 50%; left: calc(100% + 16px);
      transform: translateY(-50%) translateX(-16px);
      width: 280px;
      background: rgba(247,246,243,0.97);
      border: 1px solid rgba(10,10,12,0.1);
      border-radius: 22px;
      padding: 1.6rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
      box-shadow: 0 16px 50px rgba(0,0,0,0.4);
      overflow: hidden;
    }
    .works-panel.open {
      opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: all;
    }
    .works-panel::before {
      content: '';
      position: absolute; inset: 0; border-radius: inherit;
      background-image: url('texturas/papel-grano.png');
      background-size: cover; mix-blend-mode: multiply; opacity: 0.55;
      pointer-events: none;
    }

    .works-title {
      position: relative; z-index: 1;
      font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
      color: #6a6a72; font-weight: 600; margin-bottom: 1rem;
    }
    .works-list {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; gap: 0.5rem;
    }
    .works-item {
      display: flex; align-items: center; justify-content: space-between;
      background: transparent; border: 1px solid rgba(10,10,12,0.1);
      border-radius: 10px; padding: 0.7rem 0.9rem;
      cursor: pointer; font-family: inherit; font-size: 12px; color: #16161a;
      text-align: left; width: 100%;
      transition: border-color 0.2s, background 0.2s;
      -webkit-appearance: none; appearance: none; outline: none;
    }
    .works-item:hover  { border-color: rgba(10,10,12,0.25); background: rgba(10,10,12,0.03); }
    .works-item.active { border-color: #16161a; background: rgba(10,10,12,0.05); font-weight: 600; }
    .works-item-check { font-size: 10px; color: #6a6a72; opacity: 0; }
    .works-item.active .works-item-check { opacity: 1; }

    @media (max-width: 640px) {
      .works-wrap { left: 1rem; }
      .works-panel {
        /* mismo lado que en escritorio (al lado del pill, centrado
           verticalmente) pero con ancho que se ajusta al espacio real —
           así nunca se sale de la pantalla sin cambiar de dirección */
        width: min(280px, calc(100vw - 2rem));
        left: 0; right: auto;
        top: 50%; bottom: auto;
        transform: translateY(-50%) translateX(-12px);
      }
      .works-panel.open { transform: translateY(-50%) translateX(0); }
    }

    /* ── Barra de renders — mismo grosor y vidrio que club-trigger ── */
    .render-bar {
      position: fixed; top: 1.6rem; left: 1.6rem; right: 1.6rem; z-index: 190;
      height: 34px;
      display: flex; align-items: center; justify-content: center; gap: 3.4rem;
      background: rgba(247,246,243,0.92);
      border: 1px solid rgba(10,10,12,0.1);
      border-radius: 999px;
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 8px 28px rgba(0,0,0,0.3);
      overflow: hidden;
    }
    .render-bar::before {
      content: '';
      position: absolute; inset: 0; border-radius: inherit;
      background-image: url('texturas/papel-grano.png');
      background-size: cover; mix-blend-mode: multiply; opacity: 0.55;
      pointer-events: none;
    }

    .render-bar-label {
      position: absolute; left: 1.2rem; top: 50%;
      transform: translateY(-50%);
      max-width: 86px; overflow: hidden; text-overflow: ellipsis;
      font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
      color: #16161a; white-space: nowrap;
      pointer-events: none; z-index: 1;
    }

    .render-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(10,10,12,0.25); border: none; padding: 0;
      cursor: pointer; flex-shrink: 0; position: relative; z-index: 1;
      -webkit-appearance: none; appearance: none;
      outline: none; -webkit-tap-highlight-color: transparent;
      transition: background 0.25s, transform 0.25s;
    }
    .render-dot:hover { background: rgba(10,10,12,0.55); transform: scale(1.3); }

    /* ── Capa gooey — dos blobs que se fusionan/estiran como líquido ── */
    .goo-layer {
      position: absolute; inset: 0;
      pointer-events: none;
      filter: url(#goo-filter);
    }
    .goo-blob {
      position: absolute; top: 50%; left: 0;
      width: 18px; height: 18px; border-radius: 50%;
      background: #16161a;
      transform: translate(-50%, -50%);
      will-change: left, transform;
    }

    @media (max-width: 640px) {
      /* padding-left reserva el espacio de la etiqueta — los puntos se
         centran en lo que queda, así nunca quedan debajo del texto */
      .render-bar { left: 1rem; right: 1rem; gap: 1.6rem; padding-left: 7.2rem; }
      .render-bar-label { font-size: 7.5px; left: 0.9rem; max-width: 62px; }
    }

    @media (max-width: 400px) {
      .render-bar { gap: 1.1rem; padding-left: 5.6rem; }
      .render-bar-label { font-size: 6.5px; max-width: 46px; }
    }

    /* ── Toast — notificación flotante temporal ── */
    .toast {
      position: fixed; top: 1.6rem; left: 50%; z-index: 400;
      transform: translateX(-50%) translateY(-14px);
      background: rgba(10,10,12,0.88);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      padding: 0.7rem 1.4rem;
      color: #f0f0f0; font-size: 12px; letter-spacing: 0.01em;
      white-space: nowrap;
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 8px 28px rgba(0,0,0,0.4);
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .toast.show    { opacity: 1; transform: translateX(-50%) translateY(0); }
    .toast.success { border-color: rgba(52,211,153,0.4); }
    .toast.error   { border-color: rgba(248,113,113,0.4); }

    .ptabs {
      display: flex; gap: 1.6rem;
      margin-bottom: 1.6rem; padding-bottom: 1rem;
      border-bottom: 1px solid rgba(10,10,12,0.12);
    }
    .ptab {
      background: transparent; border: none; color: #6a6a72;
      font-family: inherit; font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase;
      cursor: pointer; padding: 0; transition: color 0.2s;
    }
    .ptab:hover, .ptab.active { color: #16161a; }

    .pform        { display: none; }
    .pform.active { display: block; }

    .pfield { margin-bottom: 1.1rem; }
    .pfield input {
      width: 100%; background: transparent; border: none;
      border-bottom: 1px solid rgba(10,10,12,0.18); color: #16161a;
      font-family: inherit; font-size: 13px; font-weight: 300;
      padding: 0.5rem 0; outline: none; transition: border-color 0.2s;
    }
    .pfield input::placeholder { color: #9a9aa3; }
    .pfield input:focus        { border-bottom-color: #16161a; }

    .btn-submit {
      width: 100%; background: #16161a; border: none;
      color: #f7f6f3; font-family: inherit; font-size: 10px;
      font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
      cursor: pointer; padding: 0.8rem; margin-top: 0.4rem;
      transition: opacity 0.2s;
    }
    .btn-submit:hover    { opacity: 0.87; }
    .btn-submit:disabled { opacity: 0.3; cursor: not-allowed; }

    .link-btn {
      display: inline-block; background: transparent; border: none;
      color: #6a6a72; font-family: inherit; font-size: 10px;
      letter-spacing: 0.06em; cursor: pointer; padding: 0;
      margin-top: 0.9rem; transition: color 0.2s;
    }
    .link-btn:hover { color: #16161a; }

    .pmsg { font-size: 11px; line-height: 1.5; margin-top: 0.8rem; display: none; }
    .pmsg.error   { color: #c81e1e; display: block; }
    .pmsg.success { color: #1c8a5e; display: block; }

    .pw-rules { display: flex; gap: 1rem; margin-top: 0.45rem; }
    .pw-rule  { font-size: 9px; letter-spacing: 0.06em; color: #9a9aa3; text-transform: uppercase; transition: color 0.2s; }
    .pw-rule.ok { color: #1c8a5e; }

    .form-desc { font-size: 11px; color: #6a6a72; line-height: 1.7; margin-bottom: 1.2rem; font-weight: 300; }

    .dash-user { padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgba(10,10,12,0.12); }
    .dash-nombre { font-size: 14px; font-weight: 400; margin-bottom: 4px; color: #16161a; }
    .dash-email  { font-size: 10px; color: #6a6a72; margin-bottom: 10px; }

    .rol-badge { display: inline-block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border: 1px solid rgba(10,10,12,0.15); color: #6a6a72; }
    .rol-badge.premium { border-color: rgba(124,58,237,.4); color: #7c3aed; }
    .rol-badge.admin   { border-color: rgba(37,71,214,.4); color: #2547d6; }

    .dash-plan-row { display: flex; justify-content: space-between; font-size: 10px; color: #6a6a72; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.1rem; }
    .dash-actions  { display: flex; flex-direction: column; gap: 0.4rem; }

    .dash-btn {
      background: transparent; border: 1px solid rgba(10,10,12,0.12);
      color: #6a6a72; font-family: inherit; font-size: 10px;
      letter-spacing: 0.12em; text-transform: uppercase;
      cursor: pointer; padding: 0.6rem 0.8rem; text-align: left;
      transition: border-color 0.2s, color 0.2s;
    }
    .dash-btn:hover        { border-color: rgba(10,10,12,0.35); color: #16161a; }
    .dash-btn.danger:hover { border-color: #c81e1e; color: #c81e1e; }

    /* ── Tarjeta de presentación — inferior izquierdo ── */
    .biz-card-wrap {
      position: fixed; bottom: 2.5rem; left: 2.5rem;
      z-index: 10; perspective: 900px; -webkit-perspective: 900px;
    }

    /* Capa de tilt (sigue el cursor) — envuelve la tarjeta que se voltea */
    .biz-card {
      position: relative;
      /* ancho fluido con tope — nunca se desborda sin importar el dispositivo */
      width: min(340px, calc(100vw - 2rem));
      aspect-ratio: 340 / 195;
      transform: rotateX(0deg) rotateY(0deg);
      transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
    }

    /* Capa de flip (gira 180° sobre sí misma) */
    .biz-card-inner {
      position: relative; width: 100%; height: 100%;
      transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
    }
    .biz-card-inner.flipped { transform: rotateY(180deg); }

    /* backface-visibility oculta visualmente la cara inactiva, pero en
       varios navegadores (sobre todo móviles) no le quita los clics —
       sin esto, el frente "invisible" sigue atrapando el toque que iba
       para el input de email del reverso */
    .biz-card-inner:not(.flipped) .biz-back  { pointer-events: none; }
    .biz-card-inner.flipped      .biz-front { pointer-events: none; }

    .biz-face {
      position: absolute; inset: 0;
      background: #f7f6f3;
      border-radius: 4px;
      overflow: hidden;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      box-shadow:
        0 1px 1px rgba(0,0,0,0.05),
        0 2px 6px rgba(0,0,0,0.25),
        0 16px 34px rgba(0,0,0,0.4);
    }
    .biz-card-wrap:hover .biz-face {
      box-shadow:
        0 1px 1px rgba(0,0,0,0.05),
        0 4px 10px rgba(0,0,0,0.28),
        0 26px 50px rgba(0,0,0,0.45);
    }

    /* Textura de papel opcional — si el archivo no existe, no se ve nada */
    .biz-face::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url('texturas/papel-grano.png');
      background-size: cover;
      mix-blend-mode: multiply;
      opacity: 0.55;
      pointer-events: none;
    }

    /* ── Frente — Taller Serrano centrado + marcador "Text me!" encima ── */
    .biz-front {
      padding: 1.7rem 1.9rem;
      cursor: pointer;
    }
    .biz-front .biz-wordmark {
      position: absolute; top: 50%; left: 50%; z-index: 1;
      transform: translate(-50%, calc(-50% - 22px));
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
      font-size: 2rem; color: #0c0c0e; line-height: 1;
      white-space: nowrap;
    }
    .biz-front .biz-marker {
      position: absolute; top: 50%; left: 50%; z-index: 2;
      transform: translate(-50%, -50%) rotate(-8deg);
      font-family: 'Permanent Marker', cursive;
      font-size: 4.8rem; line-height: 1;
      color: rgba(94, 17, 24, 0.8); /* rojo sangre de toro, translúcido */
      white-space: nowrap; pointer-events: none;
    }
    .biz-front .biz-subtitle {
      position: absolute; left: 0; right: 0; bottom: 1.5rem; z-index: 1;
      text-align: center;
      font-size: 9.5px; letter-spacing: 0.26em;
      text-transform: uppercase; color: #6a6a72; font-weight: 500;
    }

    /* ── Reverso — formulario de contacto ── */
    .biz-back {
      transform: rotateY(180deg);
      display: flex; flex-direction: column;
      padding: 1.5rem 1.7rem;
    }
    .biz-back-close {
      position: absolute; top: 0.6rem; right: 0.7rem; z-index: 2;
      background: transparent; border: none; color: #9a9aa3;
      font-size: 14px; line-height: 1; cursor: pointer; padding: 4px;
      transition: color 0.2s;
    }
    .biz-back-close:hover { color: #16161a; }

    .biz-back-title {
      position: relative; z-index: 1;
      font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em;
      color: #0c0c0e; margin-bottom: 0.9rem;
    }
    .biz-back-field {
      position: relative; z-index: 1; margin-bottom: 0.65rem;
    }
    .biz-back-field input,
    .biz-back-field textarea {
      width: 100%; background: transparent; border: none;
      border-bottom: 1px solid rgba(10,10,12,0.18);
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 11.5px; line-height: 1.3; color: #16161a;
      padding: 0.3rem 0; outline: none; resize: none;
      transition: border-color 0.2s;
    }
    .biz-back-field input::placeholder,
    .biz-back-field textarea::placeholder { color: #9a9aa3; }
    .biz-back-field input:focus,
    .biz-back-field textarea:focus { border-bottom-color: #16161a; }

    .biz-back-send {
      position: relative; z-index: 1; align-self: flex-end; margin-top: auto;
      background: #16161a; border: none; color: #f7f6f3;
      font-family: inherit; font-size: 9px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      padding: 0.5rem 1rem; cursor: pointer;
      transition: opacity 0.2s;
    }
    .biz-back-send:hover { opacity: 0.82; }

    @media (max-width: 640px) {
      .biz-card-wrap { bottom: 1.2rem; left: 1rem; }
      .biz-card { width: min(270px, calc(100vw - 2rem)); }
      .biz-front, .biz-back { padding: 1.2rem 1.3rem; }
      .biz-front .biz-wordmark { font-size: 1.4rem; }
      .biz-front .biz-marker   { font-size: 3.6rem; }
      .biz-back-title { font-size: 1.05rem; }
    }

    /* ── Contador — inferior derecho ── */
    .slide-counter {
      position: fixed; bottom: 2.5rem; right: 2.5rem;
      z-index: 10; text-align: right; pointer-events: none;
    }
    .counter-num {
      font-size: 10px; letter-spacing: 0.18em;
      color: rgba(240,240,240,0.28); font-weight: 300;
    }
    .counter-hint {
      display: block; font-size: 8px; letter-spacing: 0.2em;
      text-transform: uppercase; color: rgba(240,240,240,0.14); margin-top: 5px;
    }

    /* ═══════════════════════════════════════
       MODALES — Planes / Seguridad
    ═══════════════════════════════════════ */
    .modal-backdrop {
      position: fixed; inset: 0; z-index: 500;
      background: rgba(4,4,4,0.82);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      display: none; align-items: center; justify-content: center;
      padding: 2rem; overflow-y: auto;
    }
    .modal-backdrop.open { display: flex; }

    .modal-card {
      background: #0c0c0e; border: 1px solid #1e1e1e;
      width: 100%; max-width: 640px; max-height: 86vh;
      overflow-y: auto; padding: 2.4rem 2rem 2.2rem;
      position: relative; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    .modal-close {
      position: absolute; top: 1.2rem; right: 1.4rem;
      background: transparent; border: none; color: #9a9aa3;
      font-size: 18px; line-height: 1; cursor: pointer; padding: 4px;
      transition: color 0.2s;
    }
    .modal-close:hover { color: #f0f0f0; }

    .modal-header { text-align: center; margin-bottom: 2rem; }
    .modal-header h2 {
      font-size: 1.5rem; font-weight: 300; letter-spacing: -0.01em; color: #f0f0f0; margin-bottom: 0.4rem;
    }
    .modal-header p { font-size: 12px; color: #5a6480; }

    /* Planes */
    .planes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
    .plan-card { background: #141720; border: 1px solid #1e2330; border-radius: 12px; padding: 1.6rem; position: relative; }
    .plan-card.popular { border-color: #6c8fff; }
    .badge-popular {
      position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
      background: linear-gradient(135deg, #6c8fff, #a78bfa); color: #fff;
      font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
      letter-spacing: 0.05em; white-space: nowrap;
    }
    .plan-nombre { font-size: 11px; font-weight: 600; color: #5a6480; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.8rem; }
    .plan-precio { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #e2e6f3; margin-bottom: 0.2rem; }
    .plan-precio sup { font-size: 1rem; vertical-align: super; }
    .plan-periodo { color: #5a6480; font-size: 11px; margin-bottom: 1.2rem; }
    .plan-features { list-style: none; margin-bottom: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
    .plan-features li { font-size: 12px; color: #5a6480; display: flex; align-items: center; gap: 0.5rem; }
    .plan-features li::before { content: '✓'; color: #34d399; font-weight: 700; }
    .paypal-container { min-height: 45px; }

    .ya-premium { text-align: center; padding: 1.8rem; background: #141720; border: 1px solid rgba(251,191,36,0.3); border-radius: 12px; display: none; }
    .ya-premium h3 { font-size: 1.1rem; margin-bottom: 0.4rem; color: #e2e6f3; }
    .ya-premium p { color: #5a6480; font-size: 12px; }

    .modal-msg { text-align: center; padding: 0.7rem; border-radius: 8px; font-size: 12px; margin-top: 1rem; display: none; }
    .modal-msg.success { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.3); color: #34d399; display: block; }
    .modal-msg.error   { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3); color: #f87171; display: block; }
    .modal-msg.info    { background: rgba(108,143,255,0.08); border: 1px solid rgba(108,143,255,0.3); color: #6c8fff; display: block; }

    /* Seguridad / 2FA */
    .sec-card { background: #141720; border: 1px solid #1e2330; border-radius: 12px; padding: 1.4rem; }
    .sec-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
    .sec-title { font-weight: 500; font-size: 13px; color: #e2e6f3; }
    .sec-desc { color: #5a6480; font-size: 12px; line-height: 1.5; }

    .badge-on  { background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); color: #34d399; font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
    .badge-off { background: rgba(90,100,128,0.15); border: 1px solid #1e2330; color: #5a6480; font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }

    .btn-2fa-primary {
      background: linear-gradient(135deg, #6c8fff, #a78bfa); border: none; border-radius: 8px;
      color: #fff; cursor: pointer; font-size: 12px; font-weight: 600;
      font-family: inherit; padding: 0.6rem 1.1rem; margin-top: 1rem; transition: opacity 0.2s;
    }
    .btn-2fa-primary:hover { opacity: 0.88; }
    .btn-2fa-danger {
      background: transparent; border: 1px solid rgba(248,113,113,0.4); border-radius: 8px;
      color: #f87171; cursor: pointer; font-size: 12px; font-family: inherit;
      padding: 0.6rem 1.1rem; margin-top: 1rem; transition: all 0.2s;
    }
    .btn-2fa-danger:hover { background: rgba(248,113,113,0.08); }

    .sec-setup { display: none; margin-top: 1.1rem; }
    .sec-setup.visible { display: block; }
    .qr-img { display: block; margin: 1rem auto; border-radius: 8px; border: 2px solid #1e2330; }
    .secreto-box {
      background: #080a0f; border: 1px solid #1e2330; border-radius: 6px;
      font-family: monospace; font-size: 12px; padding: 0.55rem 0.85rem; margin: 0.5rem 0;
      color: #6c8fff; letter-spacing: 0.1em; text-align: center;
    }
    .sec-steps { color: #5a6480; font-size: 11px; line-height: 1.7; margin: 0.7rem 0; }
    .sec-steps li { margin-left: 1rem; }

    .sec-label { display: block; font-size: 10px; font-weight: 500; color: #5a6480; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; margin-top: 0.9rem; }
    .sec-input {
      width: 100%; background: #080a0f; border: 1px solid #1e2330; border-radius: 8px;
      color: #e2e6f3; font-size: 1rem; font-family: monospace; padding: 0.65rem;
      outline: none; text-align: center; letter-spacing: 0.3em; transition: border-color 0.2s;
    }
    .sec-input:focus { border-color: #6c8fff; }

    /* ── Utilidades — reemplazan los style="" inline (CSP estricta) ── */
    .oculto { display: none; }
    .input-codigo { letter-spacing: 0.3em; text-align: center; }
    .sec-steps-centrado { text-align: center; margin-top: 0.5rem; }
    .svg-oculto { position: absolute; width: 0; height: 0; }
    /* min-height:0 deja que se encoja por debajo de las 3 filas del
       textarea cuando la tarjeta es más baja que su tamaño de escritorio */
    .biz-back-field-grow { flex: 1; min-height: 0; }
    .biz-back-field-grow textarea { height: 100%; }

    /* ── Variante "paper" — coherente con la pestaña Works ── */
    .modal-card.paper {
      background: rgba(247,246,243,0.98);
      border: 1px solid rgba(10,10,12,0.1);
      border-radius: 18px;
      position: relative; overflow: hidden;
      box-shadow: 0 16px 50px rgba(0,0,0,0.4);
    }
    .modal-card.paper::before {
      content: '';
      position: absolute; inset: 0; border-radius: inherit;
      background-image: url('texturas/papel-grano.png');
      background-size: cover; mix-blend-mode: multiply; opacity: 0.55;
      pointer-events: none;
    }
    .modal-card.paper > * { position: relative; z-index: 1; }

    .modal-card.paper .modal-close { color: #6a6a72; }
    .modal-card.paper .modal-close:hover { color: #16161a; }

    .modal-card.paper .modal-header h2 { color: #16161a; font-weight: 600; }
    .modal-card.paper .modal-header p  { color: #6a6a72; }

    .modal-card.paper .sec-card {
      background: rgba(10,10,12,0.03);
      border: 1px solid rgba(10,10,12,0.1);
    }
    .modal-card.paper .sec-title { color: #16161a; }
    .modal-card.paper .sec-desc  { color: #6a6a72; }
    .modal-card.paper .sec-steps { color: #6a6a72; }

    .modal-card.paper .badge-on  { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.35); color: #1c8a5e; }
    .modal-card.paper .badge-off { background: rgba(10,10,12,0.06); border-color: rgba(10,10,12,0.12); color: #6a6a72; }

    .modal-card.paper .btn-2fa-primary {
      background: #16161a; color: #f7f6f3;
    }
    .modal-card.paper .btn-2fa-danger {
      border-color: rgba(220,38,38,0.4); color: #b91c1c;
    }
    .modal-card.paper .btn-2fa-danger:hover { background: rgba(220,38,38,0.07); }

    .modal-card.paper .qr-img { border-color: rgba(10,10,12,0.12); }
    .modal-card.paper .secreto-box {
      background: rgba(10,10,12,0.04); border-color: rgba(10,10,12,0.12); color: #16161a;
    }
    .modal-card.paper .sec-label { color: #6a6a72; }
    .modal-card.paper .sec-input {
      background: rgba(10,10,12,0.03); border-color: rgba(10,10,12,0.16); color: #16161a;
    }
    .modal-card.paper .sec-input::placeholder { color: #9a9aa3; }
    .modal-card.paper .sec-input:focus { border-color: #16161a; }

    .modal-card.paper .plan-card {
      background: rgba(10,10,12,0.03); border: 1px solid rgba(10,10,12,0.1);
    }
    .modal-card.paper .plan-card.popular { border-color: #2547d6; }
    .modal-card.paper .plan-nombre  { color: #6a6a72; }
    .modal-card.paper .plan-precio  { color: #16161a; }
    .modal-card.paper .plan-periodo { color: #6a6a72; }
    .modal-card.paper .plan-features li { color: #6a6a72; }
    .modal-card.paper .ya-premium {
      background: rgba(10,10,12,0.03); border: 1px solid rgba(217,119,6,0.4);
    }
    .modal-card.paper .ya-premium h3 { color: #16161a; }
    .modal-card.paper .ya-premium p  { color: #6a6a72; }

    @media (max-width: 560px) {
      .planes-grid { grid-template-columns: 1fr; }
    }

    /* ── Pantallas cortas (celular en horizontal) ──
       Los pills de Members Club/Works están centrados verticalmente;
       en una pantalla corta eso los acerca a la tarjeta de abajo o a la
       barra de renders de arriba. Se anclan arriba (en vez de centrarse)
       para garantizar que nunca toquen ni la barra ni la tarjeta. */
    @media (max-height: 480px) {
      .club-wrap, .works-wrap { top: 4.5rem; transform: none; }
      .club-trigger, .works-trigger { padding: 0.7rem 0.55rem; gap: 9px; }
      .biz-card-wrap { bottom: 0.8rem; }
      .biz-card { width: min(230px, calc(100vw - 2rem)); }
    }

    /* Pantallas extremadamente cortas (ej. celular gama baja en horizontal):
       la tarjeta es contenido decorativo, no navegación — se oculta para
       garantizar que la UI funcional (paneles, barra) nunca choque con nada */
    @media (max-height: 380px) {
      .biz-card-wrap { display: none; }
    }