:root {
        color-scheme: dark;
        --bg: #070a24;
        --bg-2: #0c1132;
        --panel: #12173d;
        --panel-2: #1b2152;
        --line: #272e63;
        --ink: #ffffff;
        --ink-2: #aab1da;
        --ink-3: #7078a6;
        --accent: #8b7bff;
        --accent-ink: #ffffff;
        --accent-soft: rgba(139, 123, 255, 0.16);
        --grad: linear-gradient(120deg, #8b3dff 0%, #5f5cff 52%, #3d8bff 100%);
        --grad-text: linear-gradient(92deg, #38bdf8 0%, #818cf8 48%, #c084fc 100%);
        --ok: #3ddc84;
        --bad: #ff6b6b;
        --orange: #b18cff;
        --radius: 16px;
        --nav-bg: rgba(7, 10, 36, 0.88);
        --shadow-pop: 0 22px 48px rgba(0, 0, 0, 0.55);
        --shadow-frame: 0 26px 60px rgba(0, 0, 0, 0.55);
        --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.35);
        --err-ink: #ffb3b3;
        --ok-ink: #a9f0c8;
      }
      /* ---------- Tema claro: mismo diseño, fondos claros ---------- */
      [data-theme="light"] {
        color-scheme: light;
        --bg: #f5f6fd;
        --bg-2: #eceef9;
        --panel: #ffffff;
        --panel-2: #eef0fa;
        --line: #dde1f2;
        --ink: #151532;
        --ink-2: #4e5270;
        --ink-3: #7d82a1;
        --accent: #6d4aff;
        --accent-ink: #ffffff;
        --accent-soft: rgba(109, 74, 255, 0.12);
        --grad: linear-gradient(120deg, #a855f7 0%, #6366ff 52%, #38bdf8 100%);
        --grad-text: linear-gradient(92deg, #38bdf8 0%, #a855f7 55%, #ec4899 100%);
        --ok: #0d8a4c;
        --bad: #cf3535;
        --orange: #7c3aed;
        --nav-bg: rgba(250, 250, 255, 0.9);
        --shadow-pop: 0 18px 40px rgba(23, 28, 10, 0.2);
        --shadow-frame: 0 22px 48px rgba(23, 28, 10, 0.22);
        --shadow-card: 0 10px 26px rgba(23, 28, 10, 0.1);
        --err-ink: #a11d1d;
        --ok-ink: #0b6e3f;
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; scroll-padding-top: 84px; }
      html, body { margin: 0; padding: 0; }
      body {
        background: var(--bg);
        color: var(--ink);
        font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
        font-size: 16px;
        line-height: 1.45;
        -webkit-font-smoothing: antialiased;
      }
      h1, h2, h3, p { margin: 0; }
      button { font: inherit; }

      /* ---------- (1) Navbar ---------- */
      .nav {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--nav-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
      }
      .nav-inner {
        max-width: 1240px;
        margin: 0 auto;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .logo {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: 21px;
        font-weight: 800;
        color: var(--ink);
        text-decoration: none;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
      }
      .logo .dot { color: var(--accent); }
      .nav-links { display: flex; align-items: center; gap: 4px; }
      .drop { position: relative; }
      .drop-btn {
        background: none;
        border: none;
        color: var(--ink);
        font-weight: 700;
        font-size: 15px;
        padding: 9px 12px;
        border-radius: 999px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .drop-btn:hover { background: var(--panel-2); }
      .drop-btn .caret { font-size: 10px; color: var(--ink-3); }
      .drop-panel {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 240px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 8px;
        box-shadow: var(--shadow-pop);
      }
      .drop.open .drop-panel { display: block; }
      @media (hover: hover) { .drop:hover .drop-panel { display: block; } }
      .drop-panel button, .drop-panel a {
        display: flex;
        width: 100%;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        background: none;
        border: none;
        color: var(--ink);
        text-decoration: none;
        text-align: left;
        font-size: 15px;
        font-weight: 600;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
      }
      .drop-panel button:hover, .drop-panel a:hover { background: var(--panel-2); }
      .drop-panel .d-sub { font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
      .nav-link {
        color: var(--ink);
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
        padding: 9px 12px;
        border-radius: 999px;
      }
      .nav-link:hover { background: var(--panel-2); }
      .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
      .lang-select {
        background: var(--panel-2);
        color: var(--ink);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 8px 10px;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        max-width: 132px;
        cursor: pointer;
      }
      .balance-chip {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink-2);
        white-space: nowrap;
      }
      .balance-chip b { color: var(--accent); font-size: 15px; }
      .btn-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--accent);
        color: var(--accent-ink);
        border: none;
        border-radius: 999px;
        font-weight: 800;
        font-size: 15px;
        padding: 11px 22px;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        min-height: 44px;
      }
      .btn-pill:hover { filter: brightness(1.07); }
      .btn-ghost {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--panel-2);
        color: var(--ink);
        border: 1px solid var(--line);
        border-radius: 999px;
        font-weight: 700;
        font-size: 15px;
        padding: 11px 22px;
        cursor: pointer;
        text-decoration: none;
        min-height: 44px;
      }
      .btn-ghost:hover { border-color: var(--accent); }
      .burger {
        display: none;
        background: var(--panel-2);
        border: 1px solid var(--line);
        color: var(--ink);
        border-radius: 999px;
        width: 44px; height: 44px;
        font-size: 18px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
      }
      .mobile-panel { display: none; border-top: 1px solid var(--line); padding: 10px 16px 16px; }
      .nav.mobile-open .mobile-panel { display: block; }
      .mobile-panel .mp-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 12px 0 6px; }
      .mobile-panel button, .mobile-panel a.mp-item {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        color: var(--ink);
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        padding: 9px 4px;
        cursor: pointer;
      }
      @media (max-width: 900px) {
        .nav-links, .nav .lang-select { display: none; }
        .burger { display: inline-flex; }
        .balance-chip { display: none; }
      }

      .wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px 56px; }
      @media (min-width: 1024px) { .wrap { padding: 0 28px 72px; } }

      /* ---------- (2) Hero ---------- */
      .hero-sec { padding: 8px 0 2px; text-align: center; }
      .hero-sec h1 {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: clamp(21px, 4vw, 34px);
        font-weight: 800;
        line-height: 1.04;
        letter-spacing: -0.015em;
        max-width: 620px;
        margin: 0 auto 5px;
      }
      .hl {
        font-family: "Instrument Serif", Georgia, serif;
        font-style: italic;
        font-weight: 400;
        letter-spacing: 0;
      }
      .hero-sub { color: var(--ink-2); font-size: 12px; line-height: 1.4; max-width: 480px; margin: 0 auto 8px; }
      .hero-sec .btn-pill { font-size: 13px; padding: 7px 18px; min-height: 36px; }

      /* Mostrador por pestañas */
      .showcase-box { max-width: 430px; margin: 10px auto 0; text-align: left; }
      .show-tabs {
        display: inline-flex;
        gap: 4px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px;
        margin-bottom: 14px;
      }
      .show-tab {
        background: none;
        border: none;
        color: var(--ink-2);
        font-weight: 800;
        font-size: 12px;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        padding: 9px 18px;
        border-radius: 999px;
        cursor: pointer;
      }
      .show-tab.active { background: var(--accent); color: var(--accent-ink); }
      .show-frame {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--line);
        background: #000;
        box-shadow: var(--shadow-frame);
      }
      .show-frame video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
      .show-frame .show-panel { display: none; }
      .show-frame .show-panel.active { display: block; }
      .play-btn {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 74px; height: 74px;
        border-radius: 50%;
        border: none;
        background: var(--accent);
        color: var(--accent-ink);
        font-size: 26px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
        transition: opacity 0.2s ease;
      }
      .show-frame.playing .play-btn { opacity: 0; pointer-events: none; }
      .show-frame:hover .play-btn, .show-frame:focus-within .play-btn { opacity: 1; pointer-events: auto; }
      .show-caption {
        position: absolute;
        left: 14px; bottom: 14px;
        background: rgba(8, 8, 10, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        padding: 7px 14px;
        border-radius: 999px;
        pointer-events: none;
      }
      .show-caption b { color: var(--accent); }
      .platform-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 18px 0 4px;
      }
      .platform-lead { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
      .platform-chip {
        font-size: 13px; font-weight: 700; color: var(--ink);
        background: var(--panel-2); border: 1px solid var(--line);
        border-radius: 999px; padding: 5px 13px;
      }

      /* ---------- Secciones y filas ---------- */
      .sec { margin: 44px 0 0; }
      .sec-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
      }
      .sec-head h2 {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: clamp(22px, 3.4vw, 30px);
        font-weight: 800;
        letter-spacing: -0.01em;
        margin-bottom: 4px;
      }
      .sec-head h3 {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 3px;
      }
      .sec-head p { color: var(--ink-2); font-size: 14px; }
      /* Lista vertical de tarjetas estilo catálogo: una por fila, a todo el ancho */
      .cat-head { max-width: 880px; margin-left: auto; margin-right: auto; }
      .cat-list { display: grid; gap: 26px; max-width: 880px; margin: 0 auto; }
      .ccard {
        display: block;
        width: 100%;
        text-align: left;
        font: inherit;
        color: var(--ink);
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 20px;
        overflow: hidden;
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .ccard:hover { border-color: var(--accent); }
      .ccard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
      .ccard-media { position: relative; display: block; background: #000; }
      .ccard-media video, .ccard-media img.card-poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
      .ccard-play {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 64px; height: 64px;
        border-radius: 50%;
        background: rgba(10, 10, 14, 0.55);
        color: #fff;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 5px;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }
      .ccard.playing .ccard-play { opacity: 0; }
      .ccard-body { display: block; padding: 16px 18px 18px; }
      .ccard-body .c-name { display: block; font-size: 19px; font-weight: 800; line-height: 1.2; margin-bottom: 3px; }
      .ccard-body .c-sub { display: block; font-size: 15px; font-weight: 700; color: var(--orange); margin-bottom: 6px; }
      .ccard-body .c-desc { display: block; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 13px; }
      .c-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
      .c-pill {
        font-size: 12.5px; font-weight: 700; color: var(--ok);
        border: 1px solid rgba(61, 220, 132, 0.55);
        border-radius: 999px; padding: 4px 12px;
      }
      .mode-chip {
        width: 26px; height: 26px;
        border-radius: 7px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 800; color: #141603;
      }
      .mode-chip.p { background: #2fbf71; }
      .mode-chip.v { background: #f5b921; }
      .mode-chip.t { background: #ef5da8; }

      /* ---------- (6) Inspiraciones ---------- */
      .insp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
      .ipill {
        background: var(--panel);
        border: 1px solid var(--line);
        color: var(--ink);
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
      }
      .ipill:hover { border-color: var(--accent); color: var(--accent); }
      /* Familias de estilos: apiladas, una por fila */
      .family-grid { display: grid; gap: 12px; grid-template-columns: 1fr; max-width: 880px; margin: 14px auto 0; }
      .family-card {
        display: block;
        text-align: left;
        font: inherit;
        color: var(--ink);
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 16px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .family-card:hover { border-color: var(--accent); }
      .family-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
      .family-card .fam-name { display: block; font-size: 17px; font-weight: 800; margin-bottom: 2px; }
      .family-card .fam-count { display: block; font-size: 13px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
      .family-card .fam-desc { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
      .family-card .fam-cta { display: block; font-size: 13px; font-weight: 800; color: var(--accent); }

      /* ---------- (7) Cifras: una fila simple y discreta ---------- */
      .stats {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: center;
        gap: 10px 38px;
        max-width: 880px;
        margin: 48px auto 0;
        padding: 18px 4px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }
      .stat { display: flex; align-items: baseline; gap: 8px; }
      .stat .s-num {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: 21px;
        font-weight: 800;
        color: var(--accent);
        line-height: 1.1;
      }
      .stat .s-label { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }

      /* ---------- (8) Pricing: paquetes apilados a todo el ancho ---------- */
      .pricing-grid { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; }
      .pack {
        position: relative;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 22px 18px 18px;
        background: var(--panel);
        display: flex;
        flex-direction: column;
      }
      .pack.popular { border-color: var(--accent); }
      .pack .ribbon {
        position: absolute;
        top: -11px; left: 50%;
        transform: translateX(-50%);
        background: var(--accent);
        color: var(--accent-ink);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.07em;
        padding: 4px 12px;
        border-radius: 999px;
        white-space: nowrap;
      }
      .pack .p-credits { font-size: 26px; font-weight: 800; line-height: 1.1; }
      .pack .p-credits small { font-size: 13px; font-weight: 600; color: var(--ink-2); }
      .pack .p-price { font-size: 16px; color: var(--ink); font-weight: 700; margin-top: 2px; }
      .pack .p-per { font-size: 12px; color: var(--ink-3); }
      .pack .p-bonus { display: block; font-size: 12.5px; font-weight: 700; color: #7ea8ff; }
      .pack .p-videos {
        background: var(--panel-2);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 10px 12px;
        margin: 14px 0 12px;
        font-size: 13.5px;
        font-weight: 700;
      }
      .pack .p-videos span { display: block; color: var(--ink-2); font-size: 12px; font-weight: 600; }
      .pack ul.feat { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
      .pack ul.feat li { display: flex; gap: 8px; align-items: baseline; }
      .pack ul.feat .ck { color: var(--accent); font-weight: 800; flex: none; }
      .pack ul.feat .cx { color: var(--ink-3); font-weight: 800; flex: none; }
      .pack ul.feat li.no { color: var(--ink-3); }
      .pack button {
        margin-top: auto;
        min-height: 48px;
        border: none;
        border-radius: 999px;
        background: var(--accent);
        color: var(--accent-ink);
        font: inherit;
        font-weight: 800;
        font-size: 15px;
        cursor: pointer;
        width: 100%;
      }
      .pack button:active { transform: scale(0.98); }
      /* ---------- Flujo de crear (pasos) ---------- */
      .flow-wrap { max-width: 880px; margin: 0 auto; }
      section.step {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 18px;
        margin: 0 auto 16px;
        box-shadow: var(--shadow-card);
      }
      .step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
      .step-num {
        flex: none;
        width: 28px; height: 28px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent);
        font-weight: 800;
        font-size: 14px;
        display: flex; align-items: center; justify-content: center;
      }
      .step-head h2 { font-size: 18px; font-weight: 700; }
      .step.done .step-num { background: var(--accent); color: var(--accent-ink); }
      .step p.hint { color: var(--ink-2); font-size: 14px; margin: 4px 0 14px; }
      .lede { color: var(--ink-2); font-size: 15px; margin: 0 auto 20px; }
      .lede strong { color: var(--ink); }

      .dropzone {
        display: block;
        width: 100%;
        border: 2px dashed var(--line);
        border-radius: var(--radius);
        padding: 22px 16px;
        text-align: center;
        cursor: pointer;
        background: var(--bg-2);
        color: var(--ink);
        font: inherit;
        transition: border-color 0.15s ease;
      }
      .dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); }
      .dropzone .big { display: block; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
      .dropzone .small { display: block; font-size: 13px; color: var(--ink-3); }
      .preview { display: none; }
      .preview.show { display: block; }
      .preview video, .preview img {
        width: 100%;
        max-height: 340px;
        object-fit: contain;
        border-radius: var(--radius);
        background: #000;
        display: block;
      }
      .file-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
      .file-meta .fname { font-weight: 600; color: var(--ink); word-break: break-all; }
      .pill { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
      .pill.ok { background: rgba(61, 220, 132, 0.14); color: var(--ok); }
      .pill.bad { background: rgba(255, 107, 107, 0.14); color: var(--bad); }
      .change-btn {
        margin-left: auto;
        background: var(--panel-2);
        border: 1px solid var(--line);
        color: var(--ink);
        border-radius: 999px;
        padding: 8px 14px;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        min-height: 40px;
      }
      .change-btn:hover { border-color: var(--accent); }
      .msg { display: none; margin-top: 12px; font-size: 14px; border-radius: 10px; padding: 10px 12px; }
      .msg.show { display: block; }
      .msg.err { background: rgba(255, 107, 107, 0.12); color: var(--err-ink); }
      .msg.okm { background: rgba(61, 220, 132, 0.12); color: var(--ok-ink); }

      .options { display: grid; gap: 10px; }
      .options.two { grid-template-columns: 1fr 1fr; }
      .options.three { grid-template-columns: repeat(3, 1fr); }
      .opt {
        position: relative;
        border: 2px solid var(--line);
        border-radius: var(--radius);
        padding: 14px;
        cursor: pointer;
        background: var(--bg-2);
        transition: border-color 0.15s ease, background 0.15s ease;
      }
      .opt:hover { border-color: var(--ink-3); }
      .opt input { width: 20px; height: 20px; margin: 0 0 8px; accent-color: var(--accent); cursor: pointer; display: block; }
      .options.three .opt input { margin-left: auto; margin-right: auto; }
      .opt.selected { border-color: var(--accent); background: var(--accent-soft); }
      .opt.disabled { opacity: 0.42; cursor: not-allowed; }
      .opt.disabled:hover { border-color: var(--line); }
      .opt .opt-provider { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--orange); margin-bottom: 5px; }
      /* Interruptor de tema claro / oscuro */
      .theme-toggle {
        background: var(--panel-2);
        border: 1px solid var(--line);
        color: var(--ink);
        border-radius: 999px;
        width: 40px; height: 40px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        -webkit-tap-highlight-color: transparent;
      }
      .theme-toggle:hover { border-color: var(--accent); }
      .theme-toggle svg { width: 19px; height: 19px; display: block; }
      .theme-toggle .ic-moon { display: none; }
      [data-theme="light"] .theme-toggle .ic-sun { display: none; }
      [data-theme="light"] .theme-toggle .ic-moon { display: block; }
      .opt .opt-title { display: block; font-weight: 700; font-size: 16px; margin-bottom: 3px; }
      .opt .opt-desc { display: block; font-size: 13px; color: var(--ink-2); }
      .opt .opt-rate { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
      .options.three .opt { text-align: center; padding: 14px 8px; }
      .options.three .opt-title { font-size: 19px; }
      .group-label {
        font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
        color: var(--ink-3); margin: 0 0 8px;
      }
      .options.fmt { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
      .options.fmt .opt { text-align: center; padding: 14px 8px; }
      .options.fmt .opt input { margin-left: auto; margin-right: auto; }
      .options.fmt .opt-title { font-size: 15px; }
      .fmt-shape { display: block; margin: 2px auto 9px; border: 2px solid var(--ink-3); border-radius: 4px; }
      .opt.selected .fmt-shape { border-color: var(--accent); }
      .fmt-169 { width: 36px; height: 21px; }
      .fmt-916 { width: 15px; height: 26px; }
      .fmt-11 { width: 24px; height: 24px; }
      .options.fx { grid-template-columns: 1fr 1fr; }
      @media (max-width: 420px) {
        .options.two, .options.fx { grid-template-columns: 1fr; }
      }
      @media (min-width: 421px) { .options.fx .opt:last-child { grid-column: 1 / -1; } }

      .hidden-block { display: none !important; }
      #ai-image-block { margin-top: 16px; }
      #ai-image-generate { margin-top: 10px; }
      .idea-input {
        width: 100%;
        min-height: 96px;
        resize: vertical;
        background: var(--bg-2);
        border: 2px solid var(--line);
        border-radius: var(--radius);
        color: var(--ink);
        font: inherit;
        font-size: 15px;
        padding: 12px 14px;
      }
      .idea-input:focus { outline: none; border-color: var(--accent); }
      .script-panel { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
      .script-panel h3 { font-size: 16px; margin: 0 0 4px; }
      .script-panel .sp-hint { color: var(--ink-2); font-size: 13px; margin: 0 0 12px; }
      .anchor-note {
        font-size: 13px; color: var(--ink-2);
        background: var(--accent-soft);
        border-radius: 10px;
        padding: 10px 12px;
        margin: 12px 0;
      }
      .anchor-note strong { color: var(--accent); }
      .scene-list {
        list-style: none; margin: 0; padding: 0;
        max-height: 288px; overflow-y: auto;
        display: grid; gap: 8px;
        scrollbar-width: thin; scrollbar-color: var(--line) transparent;
      }
      .scene-item {
        background: var(--bg-2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 9px 12px;
        font-size: 13px;
        color: var(--ink-2);
      }
      .scene-item .sc-head {
        display: block; font-weight: 800; font-size: 12px;
        letter-spacing: 0.05em; text-transform: uppercase;
        color: var(--accent); margin-bottom: 2px;
      }
      .script-totals {
        margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink);
        background: var(--bg-2); border: 1px solid var(--line);
        border-radius: 10px; padding: 10px 12px;
      }
      .script-totals span { color: var(--accent); }

      .cost-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
      .cost-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); padding: 4px 0; }
      .cost-row span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
      .cost-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; }
      .cost-total .t-label { font-weight: 700; font-size: 15px; }
      .cost-total .t-credits { font-size: 26px; font-weight: 800; color: var(--accent); }
      .cost-total .t-usd { display: block; font-size: 13px; color: var(--ink-2); }

      .generate-btn {
        width: 100%;
        min-height: 58px;
        border: none;
        border-radius: 999px;
        background: var(--accent);
        color: var(--accent-ink);
        font: inherit;
        font-size: 18px;
        font-weight: 800;
        cursor: pointer;
        margin-top: 16px;
        transition: opacity 0.15s ease, transform 0.1s ease;
      }
      .generate-btn:active { transform: scale(0.99); }
      .generate-btn:disabled { opacity: 0.35; cursor: not-allowed; }
      .gen-note { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 10px; }

      .progress-area { display: none; margin-top: 18px; }
      .progress-area.show { display: block; }
      .progress-status { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
      .progress-status .pct { color: var(--accent); }
      .progress-track { height: 12px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
      .progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width 0.4s ease; }
      .progress-stages { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
      .progress-stages span.active { color: var(--accent); }

      .result-area { display: none; margin-top: 18px; }
      .result-area.show { display: block; }
      .result-tag {
        display: inline-block;
        background: rgba(61, 220, 132, 0.14);
        color: var(--ok);
        font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
        border-radius: 999px; padding: 4px 12px; margin-bottom: 10px;
      }
      .result-area video { width: 100%; max-height: 380px; object-fit: contain; background: #000; border-radius: var(--radius); display: block; }
      .result-note { font-size: 13px; color: var(--ink-2); margin: 10px 0 12px; }
      .download-btn {
        display: block; width: 100%; min-height: 52px; line-height: 52px; text-align: center;
        background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
        border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none;
      }
      .download-btn:hover { border-color: var(--accent); }
      /* fixesshare1: botón «Compartir» del resultado — misma familia
         visual que Descargar, justo debajo; y acción de compartir
         junto a la descarga en cada video terminado de la galería. */
      .share-btn { margin-top: 10px; cursor: pointer; }
      .share-btn:disabled { opacity: 0.55; cursor: default; }
      .gallery-share {
        background: none; border: none; padding: 0; margin-left: 10px;
        color: var(--accent); font-weight: 700; cursor: pointer;
      }
      .gallery-share:disabled { opacity: 0.55; cursor: default; }

      .gallery { display: grid; gap: 12px; }
      .empty-gallery {
        border: 2px dashed var(--line); border-radius: var(--radius);
        padding: 22px 16px; text-align: center; color: var(--ink-3); font-size: 14px;
      }
      .g-item {
        display: flex; gap: 12px;
        background: var(--bg-2); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 10px; align-items: center;
      }
      .g-item video { width: 96px; height: 68px; object-fit: cover; border-radius: 10px; background: #000; flex: none; }
      .g-item .g-info { min-width: 0; font-size: 13px; }
      .g-item .g-title { font-weight: 700; font-size: 15px; color: var(--ink); }
      .g-item .g-meta { color: var(--ink-2); }
      .g-item .g-cost { color: var(--accent); font-weight: 700; }

      /* ---------- Cierre y pie ---------- */
      .closing { text-align: center; padding: 64px 0 8px; }
      .closing h2 {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: clamp(28px, 5vw, 46px);
        font-weight: 800;
        line-height: 1.08;
        max-width: 720px;
        margin: 0 auto 22px;
      }
      footer {
        border-top: 1px solid var(--line);
        margin-top: 48px;
        padding: 22px 0 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        align-items: center;
        font-size: 13px;
        color: var(--ink-3);
      }
      footer .f-links { display: flex; gap: 18px; margin-left: auto; }
      footer a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
      footer a:hover { color: var(--accent); }
      footer .f-fine { width: 100%; font-size: 12px; }

      /* ============================================================
         NUEVA PANTALLA PRINCIPAL — diseño de app de las maquetas
         (oscuro = foto nocturna, claro = foto diurna)
         ============================================================ */
      html { scroll-padding-top: 14px; scroll-padding-bottom: 112px; }
      html[data-theme="dark"] body {
        background-color: #04061a;
        background-image: radial-gradient(1100px 720px at 50% -140px, #1a2260 0%, #04061a 62%);
        background-attachment: fixed;
      }
      html[data-theme="light"] body {
        background-color: #dfe4fb;
        background-image: linear-gradient(155deg, #a5b4fc 0%, #e9d5ff 38%, #fbcfe8 64%, #a5d8ff 100%);
        background-attachment: fixed;
      }
      .wrap {
        max-width: 430px;
        margin: 0 auto;
        padding: 0 18px 118px;
        background: var(--bg);
        min-height: 100vh;
        position: relative;
      }
      @media (min-width: 480px) {
        .wrap { box-shadow: 0 0 0 1px var(--line), 0 30px 90px rgba(2, 4, 20, 0.5); }
      }
      .btn-pill { background: var(--grad); color: #ffffff; }
      .generate-btn { background: var(--grad); color: #ffffff; }
      .pack button { background: var(--grad); color: #ffffff; }
      .grad-text {
        background-image: var(--grad-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }

      /* ---------- Barra superior de la app ---------- */
      .app-header {
        position: sticky;
        top: 0;
        z-index: 55;
        margin: 0 -18px;
        padding: 13px 18px 11px;
        background: var(--nav-bg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      /* Franja fina de referidos «Invite & Earn»: mismo degradado
         principal de la app (var(--grad), violeta -> azul, el del
         botón «Generar video», el logo y el botón «+»), letras
         blancas en negrita, ícono de regalo en contorno blanco
         junto al texto y botón «Invitar» PLANO con los colores
         medidos del Diseño 7 aprobado por el dueño (fixes37):
         relleno violeta vivo -> azul real y borde en degradado
         rosa -> violeta -> cian, solo con halo neón uniforme
         (sin relieve 3D). Ocupa muy poco alto y no desplaza el
         carrusel ni las secciones de estilos. */
      .invite-strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        margin: 10px 0 2px;
        padding: 8px 10px 8px 16px;
        border: 0;
        border-radius: 14px;
        background: var(--grad);
        color: #ffffff;
        font-family: inherit;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(99, 80, 255, 0.4);
      }
      .invite-strip-main {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        min-width: 0;
      }
      .gift-ico {
        width: 22px;
        height: 22px;
        flex: none;
      }
      .invite-strip-text {
        font-size: 14.5px;
        font-weight: 800;
        letter-spacing: 0.2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }
      .invite-strip-btn {
        flex: none;
        background:
          linear-gradient(100deg, #9e1ef5 0%, #7817fa 25%, #4a11fc 50%, #2743fc 75%, #1a74ff 100%) padding-box,
          linear-gradient(100deg, #ec7dff 0%, #a24df8 18%, #5c15ee 42%, #2743f4 68%, #1a6ef5 88%, #3fc9ff 100%) border-box;
        color: #ffffff;
        font-size: 14.5px;
        font-weight: 800;
        padding: 3.5px 16px;
        border: 2.5px solid transparent;
        border-radius: 999px;
        box-shadow:
          0 0 16px rgba(146, 62, 252, 0.38),
          0 0 34px rgba(120, 60, 250, 0.20);
      }
      .app-logo {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        text-decoration: none;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
      }
      .logo-mark {
        width: 35px; height: 35px;
        border-radius: 11px;
        background: var(--grad);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow: 0 6px 16px rgba(99, 80, 255, 0.45);
        flex: none;
      }
      .logo-mark svg { width: 17px; height: 17px; display: block; margin-left: 2px; }
      .logo-word {
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      .app-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
      /* Píldora de saldo en el encabezado de la principal (fixes32):
         reutiliza .balance-chip; el override de cabecera gana a la
         regla móvil vieja (@media 900px) que ocultaba .balance-chip.
         Oculta sin sesión (atributo hidden) y sin la palabra
         «créditos» en pantallas muy estrechas para no apretar el logo. */
      .app-header .balance-chip {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
      }
      .app-header .balance-chip[hidden] { display: none; }
      .app-header .balance-chip svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
      .app-header .balance-chip b { font-size: 13.5px; }
      @media (max-width: 400px) {
        .app-header .balance-chip .balance-pill-unit { display: none; }
      }
      .icon-btn {
        width: 39px; height: 39px;
        border: none;
        background: none;
        color: var(--ink);
        border-radius: 50%;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
      }
      .icon-btn svg { width: 22px; height: 22px; display: block; }
      .avatar-btn {
        width: 37px; height: 37px;
        border: none;
        border-radius: 50%;
        background: var(--grad);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(99, 80, 255, 0.4);
        -webkit-tap-highlight-color: transparent;
        flex: none;
      }
      .avatar-btn svg { width: 21px; height: 21px; display: block; }

      /* Panel de cuenta / ajustes (avatar y Configuración) */
      .acct-panel {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 14px;
        width: min(284px, calc(100vw - 28px));
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow-pop);
        padding: 14px;
        z-index: 70;
      }
      .acct-panel.open { display: block; }
      .acct-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-2);
      }
      .acct-row .balance-chip { display: inline-flex; }
      .acct-row .lang-select { max-width: 150px; }
      .acct-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--ink);
        text-decoration: none;
        font-size: 14.5px;
        font-weight: 700;
        padding: 10px 2px 2px;
        margin-top: 6px;
        border-top: 1px solid var(--line);
      }
      .acct-link span { color: var(--accent); }

      /* ---------- Saludo ---------- */
      .greet { padding: 12px 0 0; font-family: "Poppins", "Archivo", sans-serif; }
      .greet h1 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.24;
        letter-spacing: -0.01em;
      }
      .greet p { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; margin-top: 7px; max-width: 330px; }

      /* ---------- Tarjeta hero ---------- */
      .hero-card {
        position: relative;
        margin-top: 14px;
        border-radius: 22px;
        overflow: hidden;
        min-height: 224px;
        display: flex;
        align-items: stretch;
        box-shadow: var(--shadow-card);
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .hero-card { touch-action: pan-y; }
      .hero-carousel {
        position: absolute;
        inset: 0;
        overflow: hidden;
      }
      .hero-track {
        display: flex;
        height: 100%;
        transition: transform 0.65s cubic-bezier(0.22, 0.9, 0.3, 1);
        will-change: transform;
      }
      .hero-track.dragging { transition: none; }
      .hero-slide {
        flex: 0 0 100%;
        width: 100%; height: 100%;
        /* Todas las diapositivas muestran el video COMPLETO, sin
           recorte (caras y movimiento enteros); el hueco alrededor
           lo rellena el fondo oscuro de la tarjeta. */
        object-fit: contain;
        background: #05071c;
        pointer-events: none;
      }
      /* Diapositiva contenida: el video se ve COMPLETO (sin recorte)
         sobre el fondo oscuro sólido de la tarjeta. */
      .hero-slide--contain { object-fit: contain; }
      .hero-dots {
        position: absolute;
        right: 13px;
        bottom: 10px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .hero-dot {
        width: 7px; height: 7px;
        border-radius: 999px;
        border: none;
        padding: 0;
        background: rgba(255, 255, 255, 0.45);
        cursor: pointer;
        transition: width 0.3s ease, background 0.3s ease;
        -webkit-tap-highlight-color: transparent;
      }
      .hero-dot.active { width: 20px; background: #fff; }
      @media (prefers-reduced-motion: reduce) {
        .hero-track { transition: none; }
      }
      .hero-shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(5, 7, 28, 0.8) 0%, rgba(5, 7, 28, 0.52) 46%, rgba(5, 7, 28, 0.05) 78%),
                    linear-gradient(0deg, rgba(5, 7, 28, 0.35) 0%, rgba(5, 7, 28, 0) 40%);
      }
      .hero-content {
        position: relative;
        padding: 16px 16px 15px;
        max-width: 71%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .hero-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(9, 11, 34, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        padding: 5px 11px;
        border-radius: 999px;
      }
      .hero-chip .spark { color: #c4b5fd; font-size: 12px; }
      .hero-content h2 {
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.14;
        letter-spacing: -0.01em;
        margin-top: 13px;
        text-shadow: 0 2px 14px rgba(3, 5, 20, 0.45);
      }
      .hero-content p {
        color: rgba(255, 255, 255, 0.88);
        font-size: 12px;
        line-height: 1.45;
        margin-top: 8px;
        max-width: 215px;
      }
      .hero-btn {
        margin-top: auto;
        padding-top: 12px;
      }
      .hero-btn button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--grad);
        color: #fff;
        border: none;
        border-radius: 999px;
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 13.5px;
        font-weight: 600;
        padding: 11px 19px;
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(80, 70, 255, 0.45);
        -webkit-tap-highlight-color: transparent;
      }
      .hero-btn button svg { width: 13px; height: 13px; display: block; }
      .hero-note {
        position: absolute;
        right: 13px;
        bottom: 52px;
        transform: rotate(-5deg);
        font-family: "Caveat", cursive;
        font-size: 21px;
        font-weight: 600;
        line-height: 1.02;
        color: #fff;
        text-align: center;
        text-shadow: 0 2px 10px rgba(3, 5, 20, 0.6);
        pointer-events: none;
      }
      .hero-note svg { display: block; width: 104px; height: 12px; margin: 1px auto 0; }

      /* ---------- Tarjetas de acción (4 modos) ---------- */
      .act-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 9px;
        margin-top: 16px;
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .act-card {
        position: relative;
        text-align: left;
        font: inherit;
        border-radius: 16px;
        padding: 11px 10px 12px;
        min-height: 116px;
        cursor: pointer;
        color: var(--ink);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.07);
        -webkit-tap-highlight-color: transparent;
      }
      .act-card .act-ic { display: block; }
      .act-card .act-ic svg { width: 21px; height: 21px; display: block; }
      .act-card .act-title { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.18; margin-top: 9px; }
      .act-card .act-desc { display: block; font-size: 9.8px; font-weight: 500; line-height: 1.32; color: var(--ink-2); margin-top: 3px; }
      .act-card .act-arrow {
        position: absolute;
        right: 8px; bottom: 8px;
        width: 20px; height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .act-card .act-arrow svg { width: 11px; height: 11px; display: block; }
      .act-card.t1 { --ic: #a78bfa; --arw-bg: rgba(139, 123, 255, 0.22); --arw: #c4b5fd; }
      .act-card.t2 { --ic: #818cf8; --arw-bg: rgba(99, 102, 255, 0.22); --arw: #a5b4fc; }
      .act-card.t3 { --ic: #60a5fa; --arw-bg: rgba(59, 130, 246, 0.22); --arw: #93c5fd; }
      .act-card.t4 { --ic: #c084fc; --arw-bg: rgba(168, 85, 247, 0.22); --arw: #d8b4fe; }
      .act-card .act-ic { color: var(--ic); }
      .act-card .act-arrow { background: var(--arw-bg); color: var(--arw); }
      [data-theme="light"] .act-card.t1 { background: #f0eafd; border-color: #e3d7fb; --ic: #7c3aed; --arw-bg: #e2d4fd; --arw: #6d28d9; }
      [data-theme="light"] .act-card.t2 { background: #e4eeff; border-color: #d2e1fd; --ic: #2563eb; --arw-bg: #cfdefe; --arw: #1d4ed8; }
      [data-theme="light"] .act-card.t3 { background: #e1f7ec; border-color: #c9efdb; --ic: #0d9d6c; --arw-bg: #c6f0da; --arw: #047857; }
      [data-theme="light"] .act-card.t4 { background: #ffeaf4; border-color: #ffd9e9; --ic: #e05299; --arw-bg: #ffd3e6; --arw: #c22570; }

      /* ---------- Secciones de inicio: plantillas y estilos ---------- */
      .home-sec { margin-top: 20px; font-family: "Poppins", "Archivo", sans-serif; }
      .home-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 11px;
      }
      .home-head h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
      .ver-todas {
        background: none;
        border: none;
        color: var(--accent);
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        padding: 4px 0;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
      }
      .tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
      .tpl-card {
        position: relative;
        border: none;
        padding: 0;
        border-radius: 14px;
        overflow: hidden;
        aspect-ratio: 0.94;
        cursor: pointer;
        background: #0a0d29;
        font: inherit;
        -webkit-tap-highlight-color: transparent;
      }
      .tpl-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
      .tpl-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(4, 6, 20, 0) 42%, rgba(4, 6, 20, 0.85) 100%);
      }
      .tpl-dur {
        position: absolute;
        right: 6px; bottom: 31px;
        z-index: 2;
        background: rgba(3, 5, 16, 0.62);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 6px;
      }
      .tpl-meta { position: absolute; left: 7px; right: 7px; bottom: 6px; z-index: 2; text-align: left; }
      .tpl-meta .tpl-name { display: block; color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1.15; }
      .tpl-meta .tpl-cat { display: block; color: rgba(255, 255, 255, 0.75); font-size: 9px; font-weight: 500; margin-top: 1px; }

      /* «Plantillas populares» en Inicio (fixeshome1): carrusel
         horizontal deslizable con snap; las tarjetas son SOLO FOTOS
         (las plantillas son fotos — los videos viven en «Estilos de
         video»). Cada tarjeta ocupa el 43 % del ancho y la siguiente
         asoma, invitando a deslizar. */
      .tpl-row {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 2px 2px 10px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .tpl-row::-webkit-scrollbar { display: none; }
      .tpl-row .tpl-card { flex: 0 0 43%; scroll-snap-align: start; }
      .tpl-row .tpl-card .tpl-name {
        position: absolute;
        left: 9px; right: 9px; bottom: 8px;
        z-index: 2;
        color: #fff;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
        text-align: left;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
      }
      .tpl-row .tpl-card .tpl-topic {
        position: absolute;
        top: 8px; left: 8px;
        z-index: 2;
        background: rgba(3, 5, 16, 0.62);
        color: #dfe3ff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 999px;
      }
      .sty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
      .sty-card {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font: inherit;
        text-align: left;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
      }
      .sty-card img {
        width: 100%;
        aspect-ratio: 4 / 3.1;
        object-fit: cover;
        border-radius: 12px;
        display: block;
        background: #0a0d29;
      }
      .sty-card .sty-name { display: block; font-size: 11.5px; font-weight: 600; margin-top: 5px; }

      /* Inicio: las 6 carpetas de «Estilos de video» visibles de una vez
         en una sola cuadrícula (sin paginador): 3 columnas × 2 filas,
         con imágenes casi cuadradas, parecidas a las miniaturas de
         «Plantillas populares».
         Reglas acotadas al grid del inicio (.sty-grid--home dentro de
         .home-sec, para ganar a la regla compartida posterior de
         .sty-grid); las cuadrículas de la ventana de Estilos
         (#ss-family-list, #ss-style-list) no cambian. */
      .home-sec .sty-grid--home { grid-template-columns: repeat(3, 1fr); }
      .sty-grid--home .sty-card img { aspect-ratio: 0.94; }
      .sty-grid--home .sty-card[data-style="cinematico"] img { object-position: 50% 18%; }
      .sty-grid--home .sty-card[data-style="anime"] img { object-position: 50% 12%; }

      /* Carpetas del inicio con video en miniatura (fixeshome1): un
         <video> por tarjeta, sobre la portada elegida por el dueño
         (que queda como poster y capa base), con el nombre del estilo
         que esta sonando sobre el borde inferior del video.
         fixeshome2: DOS capas de video apiladas por tarjeta (la segunda
         la crea el JS) y la rotacion es un FUNDIDO CRUZADO: las capas
         nacen transparentes y la activa lleva la clase «on» (opacidad
         1); al rotar, la entrante — que ya precargo el siguiente video
         — sube a 1 mientras la saliente baja a 0 en 700 ms, sin pasar
         nunca por una tarjeta vacia u oscura. */
      .sty-grid--home .sty-card { position: relative; }
      .sty-grid--home .sty-card video.sty-vid {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        aspect-ratio: 0.94;
        object-fit: cover;
        border-radius: 12px;
        display: block;
        background: #0a0d29;
        opacity: 0;
        transition: opacity 0.7s ease;
        pointer-events: none;
      }
      .sty-grid--home .sty-card video.sty-vid.on { opacity: 1; z-index: 1; }
      .sty-grid--home .sty-card .sty-vname {
        position: absolute;
        left: 6px; right: 6px; bottom: 25px;
        z-index: 2;
        color: #cfd4ff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
        pointer-events: none;
        transition: opacity 0.35s ease;
      }
      .sty-grid--home .sty-card .sty-vname.lbl-dim { opacity: 0; }

      /* Paginador deslizable de «Estilos de video» en el inicio: las
         carpetas grandes van agrupadas en páginas de .sty-grid (2×2);
         deslizando a la izquierda se pasa a la página siguiente
         (scroll horizontal con snap; sin auto-avance). */
      .sty-pager {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .sty-pager::-webkit-scrollbar { display: none; }
      .sty-page {
        flex: 0 0 100%;
        scroll-snap-align: start;
      }

      /* Carrusel MANUAL de «Estilos de video» en el inicio: se ven
         exactamente 4 tarjetas y las demás se alcanzan deslizando
         el dedo (scroll horizontal con snap; sin auto-avance). */
      .sty-carousel {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .sty-carousel::-webkit-scrollbar { display: none; }
      .sty-carousel .sty-card {
        flex: 0 0 calc((100% - 24px) / 4);
        scroll-snap-align: start;
      }

      /* ---------- Biblioteca de plantillas (60) ---------- */
      .tpl-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
      .tf-chip {
        background: var(--panel);
        border: 1px solid var(--line);
        color: var(--ink-2);
        border-radius: 999px;
        padding: 7px 14px;
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        scroll-margin-bottom: 130px;
        -webkit-tap-highlight-color: transparent;
      }
      .tf-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
      .tplx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .tplx-card {
        position: relative;
        border: none;
        padding: 0;
        border-radius: 16px;
        overflow: hidden;
        aspect-ratio: 9 / 16;
        cursor: pointer;
        background: #0a0d29;
        font: inherit;
        -webkit-tap-highlight-color: transparent;
      }
      .tplx-card[hidden] { display: none; }
      .tplx-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
      .tplx-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(4, 6, 20, 0.88) 0%, rgba(4, 6, 20, 0) 46%);
      }
      .tplx-meta { position: absolute; left: 10px; right: 10px; top: 9px; z-index: 2; text-align: left; }
      .tplx-meta .tplx-name { display: block; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.2; }
      .tplx-meta .tplx-cat { display: block; color: rgba(255, 255, 255, 0.78); font-size: 10.5px; font-weight: 500; margin-top: 2px; }
      .tplx-card .play-badge {
        position: absolute; right: 8px; bottom: 8px; z-index: 2;
        width: 24px; height: 24px; border-radius: 999px;
        background: rgba(3, 5, 16, 0.55); color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 9px;
      }

      /* Visor de plantilla a pantalla completa */
      /* fixesplayer3: el escenario llena EXACTAMENTE el viewport visible
         (100dvh con respaldo 100vh), nunca se desplaza ni se arrastra
         (overflow hidden + touch-action none: los arrastres son gestos,
         no scroll) y el video/portada se ven COMPLETOS con contain —
         sin el zoom/recorte de cover; las bandas negras son correctas. */
      .tpl-viewer {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        touch-action: none;
        z-index: 90;
        background: #000;
        display: none;
      }
      .tpl-viewer.open { display: block; }
      .tpl-viewer > img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
      .tpl-viewer > video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
      .tpl-viewer > img[hidden], .tpl-viewer > video[hidden] { display: none; }
      .tpl-play {
        position: absolute;
        top: 6px; left: 6px;
        z-index: 2;
        width: 20px; height: 20px;
        border-radius: 50%;
        background: rgba(3, 5, 16, 0.62);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tpl-play svg { width: 10px; height: 10px; display: block; margin-left: 1px; }
      .tv-close {
        position: absolute;
        top: calc(12px + env(safe-area-inset-top));
        right: 14px;
        width: 42px; height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(5, 6, 18, 0.6);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        font-size: 19px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
      }
      .tv-back {
        position: absolute;
        top: calc(12px + env(safe-area-inset-top));
        left: 14px;
        width: 42px; height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(5, 6, 18, 0.6);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
      }
      .tv-back svg { width: 19px; height: 19px; display: block; }
      .tv-bar {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        padding: 52px 18px calc(18px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 55%);
        color: #fff;
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .tv-bar .tv-name { display: block; font-size: 21px; font-weight: 700; line-height: 1.2; }
      .tv-bar .tv-cat { display: block; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.8); margin-top: 3px; }
      .tv-create {
        margin-top: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--grad);
        color: #fff;
        border: none;
        border-radius: 999px;
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 15px;
        font-weight: 600;
        padding: 13px 24px;
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(80, 70, 255, 0.45);
        -webkit-tap-highlight-color: transparent;
      }

      /* ---------- Reproductor limpio de los visores (fixesplayer1) ---------- */
      /* Toda la interfaz del visor (volver, cerrar, transporte central,
         barra inferior y progreso) es UNA sola capa que se muestra al
         abrir/tocar y se oculta tras 1 s sin interacción para que el
         video se reproduzca completamente limpio. */
      .tpl-viewer .tv-back, .tpl-viewer .tv-close, .tpl-viewer .tv-bar,
      .tpl-viewer .vp-center, .tpl-viewer .vp-progress,
      .ex-viewer .tv-back, .ex-viewer .tv-close, .ex-viewer .ex-bar,
      .ex-viewer .vp-center, .ex-viewer .vp-progress {
        transition: opacity 0.25s ease, visibility 0.25s ease;
      }
      .tpl-viewer.vp-hidden .tv-back, .tpl-viewer.vp-hidden .tv-close,
      .tpl-viewer.vp-hidden .tv-bar, .tpl-viewer.vp-hidden .vp-center,
      .tpl-viewer.vp-hidden .vp-progress,
      .ex-viewer.vp-hidden .tv-back, .ex-viewer.vp-hidden .tv-close,
      .ex-viewer.vp-hidden .ex-bar, .ex-viewer.vp-hidden .vp-center,
      .ex-viewer.vp-hidden .vp-progress {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      /* Visor de plantillas en modo foto permanente (fixeshome1): el
         transporte de video (−10 s / pausa / +10 s) y la barra de
         progreso NUNCA se pintan, y el <video> queda fuera de la
         vista: el visor muestra la foto, su nota y «Crear». */
      .tpl-viewer.vp-photo .vp-center,
      .tpl-viewer.vp-photo .vp-progress { display: none !important; }
      .tpl-viewer.vp-photo > video { display: none !important; }
      .vp-center {
        position: absolute;
        left: 0; right: 0; top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 36px;
        pointer-events: none;
      }
      .ex-stage .vp-center { left: 0; right: 0; }
      .vp-btn {
        pointer-events: auto;
        width: 54px; height: 54px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(5, 6, 18, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
      }
      .vp-btn svg { width: 27px; height: 27px; display: block; }
      .vp-btn.vp-toggle { width: 68px; height: 68px; }
      .vp-btn.vp-toggle svg { width: 31px; height: 31px; }
      .vp-toggle .ic-pause { display: none; }
      .vp-toggle.is-paused .ic-pause { display: block; }
      .vp-toggle.is-paused .ic-play { display: none; }
      .vp-progress {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3.5px;
        background: rgba(255, 255, 255, 0.18);
        z-index: 4;
      }
      .vp-progress-fill {
        display: block;
        height: 100%;
        width: 0;
        background: var(--grad);
      }
      .ex-stage { position: relative; }
      /* Toque visual al llegar al principio/fin de la lista deslizando */
      @keyframes vpBumpNext { 0% { transform: translateY(0); } 35% { transform: translateY(16px); } 100% { transform: translateY(0); } }
      @keyframes vpBumpPrev { 0% { transform: translateY(0); } 35% { transform: translateY(-16px); } 100% { transform: translateY(0); } }
      .tpl-viewer.vp-bump-next > video, .tpl-viewer.vp-bump-next > img { animation: vpBumpNext 0.28s ease; }
      .tpl-viewer.vp-bump-prev > video, .tpl-viewer.vp-bump-prev > img { animation: vpBumpPrev 0.28s ease; }

      /* ---------- Reproductor de ejemplos del catálogo ---------- */
      /* El video se ve COMPLETO (contain, sin recorte) sobre negro; debajo,
         el nombre y el botón para crear con esa misma plantilla. */
      .ex-viewer {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        touch-action: none;
        z-index: 95;
        background: #000;
        display: none;
        flex-direction: column;
      }
      .ex-viewer.open { display: flex; }
      .ex-stage {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        touch-action: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .ex-stage video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        background: #000;
      }
      .ex-bar {
        padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
        background: #05060f;
        color: #fff;
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .ex-bar .ex-name { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; }
      .ex-bar .ex-sub { display: block; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.75); margin-top: 2px; }

      /* ---------- Pantalla de plantillas: carpetas por tema ---------- */
      .tpl-screen {
        position: fixed;
        inset: 0;
        z-index: 80;
        background: var(--bg);
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .tpl-screen.open { display: block; }
      .tpl-screen-inner {
        max-width: 430px;
        margin: 0 auto;
        padding: 0 18px 44px;
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .tpl-screen-head {
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0 -18px;
        padding: 13px 18px 12px;
        background: var(--nav-bg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .ts-nav-btn {
        width: 38px; height: 38px;
        flex: none;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: var(--panel);
        color: var(--ink);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
      }
      .ts-nav-btn svg { width: 18px; height: 18px; display: block; }
      .ts-head-text { min-width: 0; }
      .ts-title { display: block; font-size: 17px; font-weight: 700; line-height: 1.15; }
      .ts-sub { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); margin-top: 1px; }
      .ts-close { margin-left: auto; }
      .ts-hint { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; margin-top: 16px; }

      /* ---------- Pantalla de Herramientas (opciones y ajustes) ---------- */
      .tool-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
      .tool-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--panel);
        color: var(--ink);
        font: inherit;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
      }
      button.tool-row { cursor: pointer; }
      .tool-ic {
        width: 38px; height: 38px;
        flex: none;
        border-radius: 12px;
        background: var(--panel-2, rgba(139, 123, 255, 0.14));
        color: var(--accent);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .tool-ic svg { width: 20px; height: 20px; display: block; }
      .tool-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
      .tool-name { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
      .tool-desc { font-size: 12px; font-weight: 500; color: var(--ink-2); line-height: 1.3; }
      .tool-val { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); }
      .tool-val b { color: var(--ink); }
      .tool-arrow { flex: none; color: var(--ink-3, var(--ink-2)); display: inline-flex; }
      .tool-arrow svg { width: 18px; height: 18px; display: block; }
      .seg {
        flex: none;
        display: inline-flex;
        gap: 4px;
        padding: 4px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--bg);
      }
      .seg-btn {
        border: none;
        border-radius: 999px;
        padding: 7px 11px;
        background: transparent;
        color: var(--ink-2);
        font: inherit;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .seg-btn.active { background: var(--accent); color: #fff; }
      .seg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
      .tool-row:has(.seg), .tool-row:has(.lang-select) { flex-wrap: wrap; }
      .tool-row:has(.seg) .seg, .tool-row:has(.lang-select) .lang-select { margin-left: auto; }
      .tool-row .lang-select { flex: none; max-width: 150px; }
      .tool-row .theme-toggle { flex: none; }

      /* ---------- Pantalla de Perfil (avatar): tema, idioma y cuenta ---------- */
      .pf-card {
        margin-top: 16px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--panel);
        overflow: hidden;
      }
      .pf-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
      }
      .pf-row + .pf-row { border-top: 1px solid var(--line); }
      .pf-row .lang-select { flex: none; max-width: 150px; }
      #profile-screen .auth-box { margin: 14px 0 0; }

      /* ---------- Perfil con sesión: identidad e información (fixes27) ---------- */
      /* Con sesión, la cuenta manda: la caja de la cuenta sube sobre la
         tarjeta Tema/Idioma y pierde su marco (la identidad va sobre el
         fondo y la información es su propia tarjeta, como la ilustración
         aprobada). Sin sesión queda el orden y el marco de fixes26. */
      #profile-screen .tpl-screen-inner { display: flex; flex-direction: column; }
      #profile-screen .tpl-screen-head { order: 0; }
      #profile-screen .pf-card { order: 1; }
      #profile-screen .auth-box { order: 2; }
      #profile-screen.pf-in .auth-box { order: 1; background: transparent; border: none; padding: 0; }
      #profile-screen.pf-in .pf-card { order: 2; }
      #profile-screen.pf-in .auth-title { display: none; }
      .pf-identity {
        display: flex; flex-direction: column; align-items: center;
        text-align: center; padding: 8px 0 18px;
      }
      .pf-avatar {
        width: 84px; height: 84px; border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), #4f7cff);
        color: #fff; font-size: 36px; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 10px;
      }
      .pf-id-name { font-size: 22px; font-weight: 800; }
      .pf-id-email { color: var(--ink-2); font-size: 14.5px; margin-top: 2px; }
      .pf-info {
        border: 1px solid var(--line); border-radius: 18px;
        background: var(--panel); padding: 4px 16px 8px;
      }
      .pf-info-title { margin: 12px 0 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
      .pf-info-row {
        display: flex; align-items: center; gap: 10px; width: 100%;
        padding: 13px 0; background: none; border: none;
        border-top: 1px solid var(--line);
        color: var(--ink); font: inherit; text-align: left;
      }
      button.pf-info-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
      .pf-info-label { font-weight: 700; font-size: 15.5px; }
      .pf-info-value { margin-left: auto; color: var(--ink-2); font-size: 15px; text-align: right; overflow-wrap: anywhere; }
      .pf-chev { color: var(--ink-2); font-size: 20px; line-height: 1; }
      .pf-recharge {
        flex: none; margin-left: 10px;
        background: var(--accent); color: var(--accent-ink);
        border: none; border-radius: 999px; padding: 8px 16px;
        font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
      }
      .pf-edit { padding: 2px 0 14px; }
      .pf-edit input {
        width: 100%; padding: 11px 12px; margin: 0 0 8px;
        border-radius: 10px; border: 1px solid var(--line);
        background: var(--panel-2); color: var(--ink);
        font: inherit; font-size: 15px;
      }
      .pf-edit-actions { display: flex; gap: 8px; }
      .pf-edit-actions button {
        flex: 1; background: var(--accent); color: var(--accent-ink);
        border: none; border-radius: 999px; padding: 10px;
        font: inherit; font-weight: 800; cursor: pointer; min-height: 42px;
      }
      .pf-edit-actions .btn-ghost { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
      .pf-logout {
        width: 100%; margin-top: 14px; min-height: 48px;
        background: var(--panel); color: var(--ink);
        border: 1px solid var(--line); border-radius: 14px; padding: 13px;
        font: inherit; font-weight: 800; cursor: pointer;
      }
      .pf-delete-link {
        display: block; margin: 14px auto 0;
        background: none; border: none; color: var(--bad);
        font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
      }
      .pf-delete-box { margin-top: 12px; border: 1px solid var(--bad); border-radius: 14px; padding: 14px; }
      .pf-delete-warn { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
      .pf-delete-box input {
        width: 100%; padding: 11px 12px; margin: 0 0 8px;
        border-radius: 10px; border: 1px solid var(--line);
        background: var(--panel-2); color: var(--ink);
        font: inherit; font-size: 15px;
      }
      .pf-delete-confirm { background: var(--bad) !important; color: #fff !important; }
      .tl-balance-card {
        margin-top: 16px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--panel);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .tl-balance-card .tl-bal-label { font-size: 13px; font-weight: 600; color: var(--ink-2); display: block; }
      .tl-balance-card .balance-chip { display: inline-flex; font-size: 17px; }
      .tl-pack {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--panel);
      }
      .tl-pack .p-credits { font-size: 16px; font-weight: 800; }
      .tl-pack .p-credits small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
      .tl-pack .p-price { font-size: 13px; font-weight: 600; color: var(--ink-2); }
      .tl-pack button {
        margin-left: auto;
        flex: none;
        border: none;
        border-radius: 999px;
        padding: 10px 14px;
        background: var(--grad);
        color: #fff;
        font: inherit;
        font-size: 12.5px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .tl-info-body { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
      .tl-info-body p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
      .tl-info-body p b { color: var(--ink); }
      .tool-note { margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
      .folder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
      .folder-card {
        position: relative;
        border: none;
        padding: 0;
        border-radius: 16px;
        overflow: hidden;
        aspect-ratio: 1 / 1.05;
        cursor: pointer;
        background: #0a0d29;
        font: inherit;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
      }
      .folder-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
      .folder-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(4, 6, 20, 0.88) 0%, rgba(4, 6, 20, 0) 46%);
      }
      .folder-ic {
        position: absolute;
        top: 8px; left: 8px;
        z-index: 2;
        width: 30px; height: 30px;
        border-radius: 9px;
        background: rgba(3, 5, 16, 0.55);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .folder-ic svg { width: 16px; height: 16px; display: block; }
      .folder-meta { position: absolute; left: 10px; right: 10px; top: 9px; z-index: 2; }
      .folder-meta .f-name { display: block; color: #fff; font-size: 16.5px; font-weight: 700; line-height: 1.2; }
      .folder-meta .f-count { display: block; color: rgba(255, 255, 255, 0.8); font-size: 11px; font-weight: 500; margin-top: 2px; }
      #ts-folder-view .tplx-grid { margin-top: 16px; }

      /* ---------- Ventana «Estilos de video»: familias y lista de estilos ---------- */
      .styfam-list { display: grid; gap: 10px; margin-top: 14px; }
      .styfam-card {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        text-align: left;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 10px 14px 10px 10px;
        cursor: pointer;
        font: inherit;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
      }
      .styfam-card:hover { border-color: var(--accent); }
      .styfam-thumb {
        width: 72px; height: 72px;
        flex: none;
        border-radius: 12px;
        object-fit: cover;
        display: block;
        background: #0a0d29;
      }
      .styfam-grad {
        width: 72px; height: 72px;
        flex: none;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
      .styfam-grad svg { width: 30px; height: 30px; display: block; }
      .styfam-grad.arte { background: linear-gradient(140deg, #b45309 0%, #db2777 55%, #7c3aed 100%); }
      .styfam-text { min-width: 0; }
      .styfam-name { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
      .styfam-count { display: block; font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 2px; }
      .styfam-desc { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); line-height: 1.4; margin-top: 3px; }
      .styfam-arrow { margin-left: auto; flex: none; color: var(--ink-3); display: flex; }
      .styfam-arrow svg { width: 18px; height: 18px; display: block; }
      .sty-list { display: grid; gap: 8px; margin-top: 14px; }
      .sty-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        text-align: left;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 12px 14px;
        cursor: pointer;
        font: inherit;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
      }
      .sty-row:hover { border-color: var(--accent); }
      .sty-row .s-text { min-width: 0; }
      .sty-row .s-name { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
      .sty-row .s-desc { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
      .sty-row .s-sample {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 2px;
        background: var(--accent-soft);
        color: var(--accent);
        font-size: 11px;
        font-weight: 700;
        padding: 4px 9px;
        border-radius: 999px;
        white-space: nowrap;
      }
      .sty-row .s-sample svg { width: 9px; height: 9px; display: block; }

      /* Cuadrícula de tarjetas de la ventana «Estilos de video»:
         mismo lenguaje visual que las tarjetas de Plantillas
         (.folder-card / .tplx-card): imagen a todo el marco y el
         nombre DENTRO de la imagen, arriba, sobre una franja
         degradada oscura para que se lea en cualquier portada. */
      .sty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
      .sty-gcard {
        position: relative;
        border: none;
        padding: 0;
        border-radius: 16px;
        overflow: hidden;
        aspect-ratio: 9 / 16;
        cursor: pointer;
        background: #0a0d29;
        font: inherit;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
      }
      .sty-gcard--fam { aspect-ratio: 1 / 1.05; }
      .sty-gcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
      /* fixesfam1 (Parte B): capa de video viva sobre la portada de
         cada tarjeta de familia. La portada <img> queda como base
         instantánea (la tarjeta nunca se ve negra); el video, mudo,
         se funde a visible solo cuando está sonando de verdad
         (clase .playing, desde sus eventos reales). */
      .sty-gcard-vid {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; display: block;
        opacity: 0; transition: opacity 0.4s ease;
        pointer-events: none;
      }
      .sty-gcard-vid.playing { opacity: 1; }
      .sty-gcard::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(4, 6, 20, 0.88) 0%, rgba(4, 6, 20, 0) 46%);
      }
      .sty-gcard-meta { position: absolute; top: 9px; left: 10px; right: 10px; z-index: 2; }
      .sty-gcard-name { display: block; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.25; }
      .sty-gcard--fam .sty-gcard-name { font-size: 16.5px; }
      .sty-gcard-sub { display: block; color: rgba(255, 255, 255, 0.85); font-size: 10.5px; font-weight: 600; margin-top: 2px; }

      /* Visor de estilo: portada tipográfica cuando el estilo aún no tiene video */
      .sv-cover {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 96px 30px 190px;
      }
      .sv-cover[hidden] { display: none; }
      /* fixesfam1 (Parte A): pastilla «toca para activar el sonido»
         del visor de estilos — visible solo en reserva muda (el
         video suena en silencio porque iOS no dejó arrancarlo con
         sonido); el primer toque la oculta y devuelve el sonido. */
      .sv-sound-chip {
        position: absolute;
        top: calc(64px + env(safe-area-inset-top));
        left: 50%;
        transform: translateX(-50%);
        z-index: 6;
        border: none;
        border-radius: 999px;
        background: rgba(3, 5, 16, 0.72);
        color: #fff;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        padding: 9px 14px;
        cursor: pointer;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
      }
      .sv-sound-chip[hidden] { display: none; }
      .sv-cover .sv-big {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: clamp(27px, 7.4vw, 40px);
        font-weight: 800;
        line-height: 1.12;
        color: #fff;
        text-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
        max-width: 340px;
      }
      .sv-cover.fam-anime { background: linear-gradient(160deg, #2a1454 0%, #7c3aed 58%, #db2777 130%); }
      .sv-cover.fam-animacion { background: linear-gradient(160deg, #134e4a 0%, #0d9488 55%, #65a30d 130%); }
      .sv-cover.fam-cine { background: linear-gradient(160deg, #111827 0%, #6d28d9 60%, #b45309 135%); }
      .sv-cover.fam-arte { background: linear-gradient(160deg, #7c2d12 0%, #db2777 55%, #7c3aed 130%); }
      .sv-cover.fam-realista { background: linear-gradient(160deg, #0c2d4d 0%, #0284c7 55%, #0d9488 130%); }
      .sv-desc {
        display: block;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.88);
        margin-top: 7px;
        max-width: 520px;
      }
      /* Opciones de muestra de un estilo: 5 videos entre los que elegir */
      .sv-opts { margin-top: 13px; }
      .sv-opts[hidden] { display: none; }
      .sv-opts-label {
        display: block;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.72);
      }
      .sv-opts-row {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 8px;
      }
      .sv-opt {
        flex: none;
        font: inherit;
        font-size: 12.5px;
        font-weight: 700;
        color: #fff;
        background: rgba(255, 255, 255, 0.14);
        border: 1.5px solid rgba(255, 255, 255, 0.28);
        border-radius: 999px;
        padding: 7px 14px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .sv-opt.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
      }
      .sv-opt-title {
        display: block;
        font-size: 13.5px;
        font-weight: 600;
        color: #fff;
        margin-top: 8px;
      }

      /* ---------- Pantalla de creación de video ---------- */
      .create-screen {
        position: fixed;
        inset: 0;
        z-index: 100;
        background: var(--bg);
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .create-screen.open { display: block; }
      .create-screen-inner {
        max-width: 430px;
        margin: 0 auto;
        padding: 0 18px 44px;
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .create-screen-head {
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0 -18px;
        padding: 13px 18px 12px;
        background: var(--nav-bg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .create-screen .sec { margin-top: 18px; }

      /* ---------- Barra de navegación inferior ---------- */
      .tabbar {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: min(430px, 100%);
        z-index: 60;
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        background: var(--nav-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--line);
        padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .tab {
        background: none;
        border: none;
        color: var(--ink-3);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 10.5px;
        font-weight: 600;
        padding: 2px 4px;
        min-width: 58px;
        -webkit-tap-highlight-color: transparent;
      }
      .tab svg { width: 22px; height: 22px; display: block; }
      .tab.active { color: var(--accent); }
      .tab-plus {
        width: 54px; height: 54px;
        border: none;
        border-radius: 50%;
        background: var(--grad);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-20px);
        box-shadow: 0 12px 26px rgba(90, 75, 255, 0.5);
        flex: none;
        -webkit-tap-highlight-color: transparent;
      }
      .tab-plus svg { width: 25px; height: 25px; display: block; }


      /* ---------- Versión ligera: nota de los visores y portada del reproductor ---------- */
      .tv-note {
        display: block;
        margin-top: 12px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.45;
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 12px;
        padding: 10px 13px;
        max-width: 520px;
      }
      .tv-note[hidden] { display: none; }
      .ex-stage img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
      .ex-stage img[hidden], .ex-stage video[hidden] { display: none; }
      /* ---------- Escritorio: pasos con más aire ---------- */
      @media (min-width: 1024px) {
        section.step { padding: 26px; }
      }
    
/* ===== Integración producción (Video AI) ===== */
.demo-banner{background:#ffb020;color:#201600;font-weight:700;font-size:.85rem;text-align:center;padding:.55rem .75rem;position:sticky;top:0;z-index:60}
.auth-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin:0 0 14px}
.auth-box .auth-title{margin:0 0 6px;font-size:17px}
.auth-box input[type=email],.auth-box input[type=password]{width:100%;padding:11px 12px;margin:0 0 8px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px}
.auth-actions{display:flex;gap:8px}
.auth-actions button{flex:1;background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;padding:11px;font-weight:800;cursor:pointer;min-height:44px}
.auth-actions #register-btn{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
#prompt-wrap{margin-top:12px}
#prompt-wrap input[type=text]{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px;margin-top:6px}
#duration-manual{margin-top:10px}
#duration-manual input[type=number]{width:7rem;padding:9px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit}
.gallery-item{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.gallery-item video{width:100%;display:block;background:#000}
.gallery-item .meta{padding:10px 12px;font-size:13px;color:var(--ink-2)}
.gallery-item .badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;background:var(--panel-2);color:var(--ink);margin:0 4px 4px 0}
.gallery-item .badge.done{background:var(--ok);color:#04240f}
.gallery-item .badge.failed{background:var(--bad);color:#2b0505}
.gallery-item .badge.processing,.gallery-item .badge.queued{background:#ffb020;color:#201600}
.gallery-item a{color:var(--accent);font-weight:700}
.model-auto{display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.pack button[disabled]{opacity:.5;cursor:not-allowed}
.tl-pack button{background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;padding:10px 18px;font-weight:800;cursor:pointer;white-space:nowrap}
.msg.show{display:block}
/* ===== Conectar mi IA (BYOK) ===== */
.ai-providers{display:inline-flex;gap:6px;margin:0 0 12px}
.ai-field{display:block;margin:0 0 10px}
.ai-field>span{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin:0 0 5px}
.ai-field input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px}
.ai-status{margin:12px 0;padding:10px 12px;border-radius:10px;border:1px dashed var(--line);font-size:14px;color:var(--ink-2)}
.ai-status.on{border-style:solid;border-color:var(--ok);color:var(--ink);background:rgba(61,220,132,.08)}
#ai-disconnect{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
.ai-link{margin:10px 0 0;font-size:13.5px}
.ai-link a{color:var(--accent);font-weight:600;text-decoration:none}
.ai-link a:hover{text-decoration:underline}

/* ===== fixes33: estado activo de la barra de pestañas ===== */
.tab.active{color:var(--accent)}
.tab .tab-ic{display:inline-block}
.tab.active .tab-ic{transform:translateY(-1px)}

/* ===== fixes35: Premium Studio (Seedance 2.5) =====
   Entrada premium en el paso de efecto de Crear y pantalla propia
   sobre Crear (z 110 > create-screen 100). Los componentes base
   (.step, .dropzone, .preview, .options, .seg, .cost-box,
   .generate-btn) son los de la app; aquí solo va lo nuevo. */
#premium-screen { z-index: 110; }
#premium-screen .step { text-align: left; }

/* Entrada en Crear: tarjeta con borde degradado */
.ps-entry {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin-top: 12px; padding: 14px 16px;
  text-align: left; cursor: pointer; color: var(--ink);
  font: inherit; -webkit-tap-highlight-color: transparent;
  border: 2px solid transparent; border-radius: 16px;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
              var(--grad) border-box;
  box-shadow: 0 12px 28px rgba(95, 92, 255, 0.28);
}
.ps-entry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ps-entry-title { font-size: 17px; font-weight: 800; line-height: 1.2; }
.ps-entry-desc { font-size: 13px; color: var(--ink-2); }
.ps-entry-rate { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 3px; }
.ps-entry-arrow { font-size: 20px; font-weight: 800; color: var(--accent); flex: none; }
.premium-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--grad); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em;
  border-radius: 999px; padding: 4px 10px; margin-bottom: 7px;
}

/* Tarjeta del motor */
.ps-engine-wrap {
  background: var(--grad); border-radius: 22px; padding: 2px;
  margin: 16px auto; max-width: 560px;
  box-shadow: 0 18px 44px rgba(95, 92, 255, 0.35);
}
.ps-engine-card {
  background: var(--panel); border-radius: 20px; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
}
.ps-engine-main { flex: 1; min-width: 0; }
.ps-engine-name { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; }
.ps-engine-sub { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.ps-engine-rate { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
.ps-engine-check {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(95, 92, 255, 0.45);
}
.ps-engine-check svg { width: 14px; height: 14px; display: block; }

/* Foto de referencia: etiqueta sobre la imagen y botón de 2.ª foto */
#premium-screen .preview { position: relative; }
.ps-ref-tag {
  position: relative; top: -44px; left: 10px; margin-bottom: -34px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(7, 10, 36, 0.74); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 999px;
  padding: 5px 11px; font-size: 12px; font-weight: 700;
}
.ps-add-ref {
  display: block; width: 100%; margin-top: 12px; padding: 12px;
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: transparent; color: var(--ink-2); font: inherit;
  text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ps-add-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ps-add-sub { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.ps-plus { color: var(--accent); font-weight: 800; }

/* Chips de duración y cámara */
.ps-chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-chiprow.grow .dchip { flex: 1; }
.dchip {
  border: 2px solid var(--line); border-radius: 999px;
  background: var(--bg-2); color: var(--ink-2);
  font: inherit; font-size: 14.5px; font-weight: 700;
  padding: 9px 15px; text-align: center; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dchip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* Interruptor de audio nativo */
.ps-toggle-row { display: flex; align-items: center; gap: 12px; }
.ps-toggle-text { flex: 1; min-width: 0; }
.ps-toggle-title { display: block; font-size: 15.5px; font-weight: 700; }
.ps-toggle-sub { display: block; font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.ps-switch {
  flex: none; width: 52px; height: 30px; border-radius: 999px;
  border: none; background: var(--panel-2); position: relative;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ps-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: left 0.15s ease;
}
.ps-switch.on { background: var(--grad); box-shadow: 0 6px 16px rgba(95, 92, 255, 0.35); }
.ps-switch.on::after { left: 25px; }

/* Costo premium */
.ps-premium-word { color: var(--accent); font-weight: 800; }
#premium-screen .cost-total .t-usd { display: block; font-size: 13px; color: var(--ink-2); text-align: right; }
.ps-refund-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ps-ck { color: var(--ok); font-weight: 800; flex: none; }
.ps-generate { margin-top: 14px; background: var(--grad); box-shadow: 0 16px 34px rgba(95, 92, 255, 0.40); }
.ps-generate:disabled { opacity: 0.45; box-shadow: none; }

/* ===== fixes34: verificación de correo, ayuda y soporte =====
   Franja de confirmación de correo (sobre el contenido, bajo la
   franja demo), enlace «¿Olvidaste tu contraseña?» y la vista de
   Ayuda (contacto, preguntas frecuentes y reportar un problema).
   Solo componentes nuevos; las cajas de recuperar/restablecer
   reusan .pf-edit y los campos de reporte reusan .ai-field. */
.verify-banner{background:var(--accent-soft);color:var(--ink);border-bottom:1px solid var(--line);font-size:.88rem;text-align:center;padding:.55rem .75rem;position:sticky;top:0;z-index:59;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:center}
.verify-banner[hidden]{display:none}
.verify-resend{background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;padding:6px 14px;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}
.verify-resend:disabled{opacity:.5;cursor:default}
.verify-dismiss{background:transparent;border:none;color:var(--ink-2);font:inherit;font-size:.95rem;cursor:pointer;padding:4px 6px;line-height:1}
.verify-banner-msg{flex-basis:100%;font-size:.82rem;color:var(--ink-2)}
.verify-banner-msg:empty{display:none}
.link-btn{display:block;margin:10px auto 0;background:none;border:none;color:var(--accent);font:inherit;font-size:14px;font-weight:700;cursor:pointer;padding:6px}
.link-btn:hover{text-decoration:underline}
.help-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:0 0 14px}
.help-card .tool-name{display:block;font-size:16px;margin-bottom:2px}
.help-contact-btn{display:inline-block;margin-top:10px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:10px 18px;font-weight:800;text-decoration:none}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 10px}
.faq-item h4{margin:0 0 4px;font-size:15px}
.faq-item p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ai-field textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px;resize:vertical}
#report-form .auth-actions{margin-top:4px}
#tl-help-view .tool-row{width:100%;text-align:left}

/* ===== Reestructuración UI — Fase 1: menú lateral + Mis proyectos ===== */
.drawer-backdrop{position:fixed;inset:0;background:rgba(5,5,20,.55);z-index:1180}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);background:var(--panel,#14142b);z-index:1190;transform:translateX(-105%);transition:transform .28s ease;padding:18px 16px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;box-shadow:8px 0 32px rgba(0,0,0,.35)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.drawer-head .logo-word{font-size:20px;font-weight:800}
.drawer-user{margin:2px 2px 14px;color:var(--ink-2);font-size:13px;min-height:16px}
.drawer-nav{display:flex;flex-direction:column;gap:2px}
.drawer-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:15.5px;font-weight:600;text-align:left;cursor:pointer}
.drawer-item svg{width:22px;height:22px;flex:0 0 22px;color:var(--accent)}
.drawer-item:active{background:var(--accent-soft)}
.pj-tools{display:flex;gap:8px;align-items:stretch;margin:4px 0 12px}
.pj-search{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--panel-2)}
.pj-search svg{width:18px;height:18px;color:var(--ink-2);flex:0 0 18px}
.pj-search input{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;padding:11px 0;outline:none;min-width:0}
.pj-filter-btn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:var(--ink);font:inherit;font-size:14px;font-weight:600;padding:0 14px;cursor:pointer}
.pj-filter-btn svg{width:18px;height:18px}
.pj-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.pj-tabs::-webkit-scrollbar{display:none}
.pj-tab{flex:0 0 auto;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pj-tab.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pj-count{margin-left:5px;font-weight:800}
.pj-list{display:flex;flex-direction:column;gap:10px}
.pj-card{display:flex;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel-2);border-radius:16px;padding:10px;cursor:pointer;color:var(--ink);font:inherit}
.pj-thumb{position:relative;width:86px;height:86px;flex:0 0 86px;border-radius:12px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.pj-thumb img,.pj-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.pj-thumb .pj-dur{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:2px 6px}
.pj-thumb .pj-thumb-ic{width:30px;height:30px;color:#fff;opacity:.75}
.pj-card-main{flex:1;min-width:0}
.pj-card-title{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-card-meta{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.pj-chip{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2.5px 9px;margin-top:6px;background:var(--accent-soft);color:var(--accent)}
.pj-chip.done{background:rgba(46,204,113,.16);color:#2ecc71}
.pj-chip.failed{background:rgba(231,76,60,.16);color:#e74c3c}
.pj-chip.processing,.pj-chip.queued{background:rgba(241,196,15,.16);color:#d4a017}
.pj-prog{height:6px;border-radius:99px;background:var(--line);margin-top:8px;overflow:hidden}
.pj-prog i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s ease}
.pj-dots{align-self:flex-start;border:0;background:transparent;color:var(--ink-2);font-size:20px;line-height:1;padding:6px 4px;cursor:pointer}
.pj-empty{text-align:center;padding:44px 18px;color:var(--ink-2)}
.pj-empty h3{color:var(--ink);margin:0 0 6px;font-size:17px}
.pj-empty p{margin:0 0 16px;font-size:14px}
.pj-detail-media{border-radius:16px;overflow:hidden;background:#000;margin-bottom:14px}
.pj-detail-media video,.pj-detail-media img{width:100%;display:block;max-height:62vh;object-fit:contain;background:#000}
.pj-detail-media .pj-detail-ph{padding:56px 0;text-align:center;color:#fff;opacity:.8}
.pj-detail-title{font-size:19px;margin:0 0 12px}
.pj-steps{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.pj-step{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.pj-step .pj-step-ic{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent}
.pj-step.done{color:var(--ink)}
.pj-step.done .pj-step-ic{background:#2ecc71;border-color:#2ecc71;color:#fff}
.pj-step.now{color:var(--ink)}
.pj-step.now .pj-step-ic{border-color:var(--accent);color:var(--accent)}
.pj-step.now .pj-step-ic::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.pj-progress{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pj-progress .bar{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.pj-progress .bar i{display:block;height:100%;background:var(--accent)}
.pj-error{border:1px solid rgba(231,76,60,.45);background:rgba(231,76,60,.08);border-radius:14px;padding:14px;margin-bottom:14px}
.pj-error p{margin:6px 0;font-size:14px}
.pj-meta{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0 0 18px;font-size:14.5px}
.pj-meta dt{color:var(--ink-2)}
.pj-meta dd{margin:0;font-weight:600;text-align:right;word-break:break-word}
.pj-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.pj-actions .btn{width:100%}
.pj-sheet-backdrop{position:absolute;inset:0;background:rgba(5,5,20,.55);z-index:5}
.pj-sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--panel,#14142b);border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));max-height:82%;overflow-y:auto}
.pj-sheet-title{margin:0 0 12px;font-size:17px}
.pj-sheet-label{margin:14px 0 7px;font-size:13px;font-weight:700;color:var(--ink-2)}
.pj-seg{display:flex;flex-wrap:wrap;gap:6px}
.pj-sheet-btns{display:flex;gap:9px;margin-top:18px}
.pj-sheet-btns .btn{flex:1}
.pj-sheet-list{display:flex;flex-direction:column}
.pj-sheet-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px 6px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:15.5px;font-weight:600;text-align:left;cursor:pointer}
.pj-sheet-item:last-child{border-bottom:0}
.pj-sheet-item.danger{color:#e74c3c}
.pj-modal{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);z-index:6;background:var(--panel,#14142b);border-radius:18px;padding:20px 18px}
.pj-modal input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px}
.pj-modal p{font-size:14.5px;color:var(--ink-2);margin:0}
.btn-danger{background:#e74c3c;color:#fff;border-color:#e74c3c}
.pj-card-main{display:flex;flex-direction:column;align-items:flex-start}
.pj-card-title{display:block;max-width:100%}
.pj-prog{display:block;width:100%}

/* ===== Reestructuración UI — Fase 2: hub de creación + Texto a video ===== */
.hub-grid{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.hub-card{width:100%;text-align:left}
.t2v-body{display:flex;flex-direction:column;gap:4px}
.t2v-label{font-size:14px;font-weight:700;margin:14px 0 7px;color:var(--ink)}
.t2v-label:first-child{margin-top:2px}
.t2v-field textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px;resize:vertical;box-sizing:border-box}
.t2v-count{margin:4px 0 0;text-align:right;font-size:12px;color:var(--ink-2)}
.t2v-seg{display:flex;gap:6px}
.t2v-cost{display:flex;align-items:baseline;gap:10px;margin-top:20px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);font-size:14.5px}
.t2v-cost b{font-size:17px;margin-left:auto}
.t2v-balance{font-size:12.5px;color:var(--ink-2)}
.t2v-generate{width:100%;margin-top:14px;padding:14px;font-size:16px}

/* ===== Reestructuración UI — Fase 3: historial, canje y avisos ===== */
#bell-btn{position:relative}
.bell-badge{position:absolute;top:2px;inset-inline-end:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e5484d;color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;box-sizing:border-box}
.promo-box{margin-top:18px}
.promo-row{display:flex;gap:8px}
.promo-row input{flex:1;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px;text-transform:uppercase;box-sizing:border-box;min-width:0}
.promo-row .btn{white-space:nowrap}
.hist-list{display:flex;flex-direction:column}
.hist-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.hist-row:last-child{border-bottom:none}
.hist-main{flex:1;min-width:0}
.hist-kind{display:block;font-size:14.5px;font-weight:600}
.hist-date{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.hist-amt{font-size:15px;font-weight:800;white-space:nowrap}
.hist-amt.pos{color:#2f9e6e}
.hist-promo{display:block;font-size:11.5px;color:var(--ink-2);text-align:right}
.notif-list{display:flex;flex-direction:column}
.notif-row{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:13px 4px;border:none;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;cursor:pointer}
.notif-ic{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--panel-2)}
.notif-row.done .notif-ic{color:#2f9e6e}
.notif-row.failed .notif-ic{color:#e5484d}
.notif-main{flex:1;min-width:0}
.notif-kind{display:block;font-size:14.5px;font-weight:700}
.notif-title{display:block;font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-date{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.notif-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#e5484d;margin-top:6px}

/* ===== Reestructuración UI — Fase 4: conexión, buscadores, exportar ===== */
#net-banner{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;gap:12px;padding:10px 16px;background:#7a4b12;color:#ffe9bd;font-size:13.5px;font-weight:600}
#net-banner button{margin-left:auto;background:none;border:1px solid #ffe9bd;color:#ffe9bd;border-radius:999px;padding:5px 14px;font:inherit;font-size:13px;cursor:pointer}
.lib-search{margin:2px 0 12px}
.lib-search input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px;box-sizing:border-box}