* {
            box-sizing: border-box;
        }

        :root {
            color-scheme: dark;
        }

        body {
            margin: 0;
            min-height: 100vh;
            font-family:
                Inter,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            background:
                radial-gradient(
                    circle at 50% -20%,
                    #4a304f 0%,
                    transparent 42%
                ),
                linear-gradient(
                    180deg,
                    #171219 0%,
                    #0c0a0d 100%
                );

            color: #f8f5f8;
        }

        button,
        a {
            font: inherit;
        }

        .page {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        nav {
            width: min(1120px, calc(100% - 40px));
            margin: 0 auto;
            padding: 24px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: #f8f5f8;
            text-decoration: none;
        }

        .brand-mark {
            position: relative;
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            overflow: hidden;
            border-radius: 11px;

            background:
                radial-gradient(
                    circle at 35% 25%,
                    #68485e,
                    transparent 45%
                ),
                #241721;

            border: 1px solid rgba(240, 194, 211, .22);

            box-shadow:
                0 8px 28px rgba(0, 0, 0, .25),
                inset 0 0 20px rgba(255, 255, 255, .025);
        }

        .brand-mark-fallback {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            font-family: Georgia, serif;
            font-size: 25px;
            font-style: italic;
            color: #e7bbc8;
        }

        .brand-mark img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
        }

        .brand-name {
            font-size: 1rem;
            letter-spacing: .18em;
            font-weight: 650;
        }

        .logout-button {
            display: none;
            padding: 9px 14px;

            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.12);

            background: rgba(15,10,16,.26);
            color: #bdb3c1;

            font-size: .78rem;
            cursor: pointer;

            backdrop-filter: blur(12px);

            transition:
                color .18s ease,
                border-color .18s ease,
                background .18s ease;
        }

        .logout-button.show {
            display: inline-flex;
        }

        .logout-button:hover {
            color: #fff;
            border-color: rgba(255,255,255,.24);
            background: rgba(255,255,255,.07);
        }

        .hero {
            width: min(760px, calc(100% - 40px));
            margin: auto;
            padding: 68px 0 76px;
            text-align: center;
        }

        .eyebrow {
            color: #baadbe;
            text-transform: uppercase;
            letter-spacing: .18em;
            font-size: .75rem;
            margin-bottom: 24px;
        }

        h1 {
            font-size: clamp(3.2rem, 10vw, 6.8rem);
            font-weight: 300;
            letter-spacing: -.045em;
            line-height: .95;
            margin: 0;
        }

        .subtitle {
            width: min(570px, 100%);
            margin: 28px auto 0;
            color: #c9c1cc;
            font-size: clamp(1rem, 3vw, 1.2rem);
            line-height: 1.65;
        }

        /*
         * VERA_HERO_COLLAPSE_V1
         *
         * Cuando el selector está abierto retiramos
         * completamente el contenido editorial del hero.
         */
        .hero.channels-open .hero-collapsible {
            display: none;
        }

        .primary {
            margin-top: 38px;
            border: 0;
            padding: 16px 30px;
            min-width: 210px;
            border-radius: 999px;
            background: #f6f1f7;
            color: #171219;
            font-size: 1rem;
            font-weight: 650;
            cursor: pointer;
            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }

        /* VERA_CHANNEL_PICKER_POLISH_V1 */
        #startButton.channel-picker-open {
            display: none;
        }

        /* VERA_LANDING_ACTIVATION_V1 */
        .hero-trial-note {
            width: min(560px, 100%);
            margin: 14px auto 0;
            color: #c9c1cc;
            font-size: .88rem;
            line-height: 1.5;
            opacity: .94;
        }

        .primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 35px rgba(0, 0, 0, .22);
        }

        .primary-content {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .cta-mark {
            width: 26px;
            height: 26px;
            border-radius: 8px;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 26px;
            background: #241721;
            color: #e7bbc8;
            font-family: Georgia, serif;
            font-style: italic;
            font-size: 18px;
        }

        .cta-mark img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .login-card,
        .logged,
        .account-privacy {
            margin-top: 20px;
            padding-top: 18px;
            border-top: 1px solid rgba(255,255,255,.08);
        }

        .account-privacy-title {
            color: #d8cfd9;
            font-size: .84rem;
            font-weight: 650;
            margin-bottom: 5px;
        }

        .account-privacy-copy {
            color: #928895;
            font-size: .79rem;
            line-height: 1.5;
            margin-bottom: 11px;
        }

        .delete-account-link {
            border: 0;
            padding: 0;
            background: transparent;
            color: #c88e9a;
            cursor: pointer;
            font-size: .8rem;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .delete-account-link:hover {
            color: #efb5c0;
        }

        /* ==================================================
         * COOKIE CONSENT
         * ================================================== */

        .cookie-banner {
            position: fixed;
            left: 20px;
            right: 20px;
            bottom: 20px;
            z-index: 1100;

            display: none;

            width: min(760px, calc(100% - 40px));
            margin: 0 auto;

            padding: 20px;

            border-radius: 22px;
            border: 1px solid rgba(255,255,255,.14);

            background:
                rgba(24,18,24,.96);

            backdrop-filter: blur(18px);

            box-shadow:
                0 22px 70px rgba(0,0,0,.46);

            text-align: left;
        }

        .cookie-banner.show {
            display: block;
            animation: appear .22s ease;
        }

        .cookie-banner-title {
            margin: 0 0 7px;
            font-size: 1rem;
            font-weight: 650;
        }

        .cookie-banner-copy {
            margin: 0;
            color: #aaa1ad;
            font-size: .83rem;
            line-height: 1.55;
        }

        .cookie-actions {
            display: grid;
            grid-template-columns:
                repeat(3, minmax(0, 1fr));

            gap: 9px;
            margin-top: 17px;
        }

        .cookie-action {
            min-height: 42px;
            padding: 9px 14px;

            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.14);

            background:
                rgba(255,255,255,.055);

            color: #f4eff5;

            cursor: pointer;

            font-size: .8rem;
            font-weight: 600;

            transition:
                background .18s ease,
                border-color .18s ease,
                transform .18s ease;
        }

        .cookie-action:hover {
            background:
                rgba(255,255,255,.09);

            border-color:
                rgba(255,255,255,.24);

            transform: translateY(-1px);
        }

        .cookie-settings-modal {
            position: fixed;
            inset: 0;
            z-index: 1200;

            display: none;
            align-items: center;
            justify-content: center;

            padding: 22px;

            background:
                rgba(6,4,7,.80);

            backdrop-filter: blur(12px);
        }

        .cookie-settings-modal.show {
            display: flex;
        }

        .cookie-settings-dialog {
            width: min(500px, 100%);
            max-height: calc(100vh - 44px);
            overflow-y: auto;

            padding: 28px;

            border-radius: 26px;
            border: 1px solid rgba(255,255,255,.13);

            background:
                #191318;

            box-shadow:
                0 30px 90px rgba(0,0,0,.50);

            text-align: left;
        }

        .cookie-settings-dialog h2 {
            margin: 0 0 8px;

            font-size: 1.4rem;
            font-weight: 600;
        }

        .cookie-settings-intro {
            margin: 0 0 20px;

            color: #aaa1ad;
            font-size: .84rem;
            line-height: 1.55;
        }

        .cookie-category {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;

            padding: 17px 0;

            border-top:
                1px solid rgba(255,255,255,.08);
        }

        .cookie-category:first-of-type {
            border-top: 0;
        }

        .cookie-category-copy {
            min-width: 0;
        }

        .cookie-category-name {
            margin-bottom: 4px;

            color: #eee8ef;
            font-size: .88rem;
            font-weight: 650;
        }

        .cookie-category-description {
            color: #978d99;
            font-size: .77rem;
            line-height: 1.5;
        }

        .cookie-required {
            flex: 0 0 auto;

            margin-top: 2px;
            padding: 5px 9px;

            border-radius: 999px;

            background:
                rgba(255,255,255,.07);

            color: #bfb5c1;

            font-size: .68rem;
            font-weight: 650;
        }

        .cookie-switch {
            position: relative;

            flex: 0 0 44px;

            width: 44px;
            height: 25px;

            margin-top: 2px;
        }

        .cookie-switch input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .cookie-switch-track {
            position: absolute;
            inset: 0;

            border-radius: 999px;

            background:
                rgba(255,255,255,.13);

            cursor: pointer;

            transition:
                background .18s ease;
        }

        .cookie-switch-track::after {
            content: "";

            position: absolute;

            top: 3px;
            left: 3px;

            width: 19px;
            height: 19px;

            border-radius: 50%;

            background: #e9e2ea;

            transition:
                transform .18s ease;
        }

        .cookie-switch input:checked
        + .cookie-switch-track {
            background:
                rgba(196,115,137,.68);
        }

        .cookie-switch input:checked
        + .cookie-switch-track::after {
            transform:
                translateX(19px);
        }

        .cookie-settings-actions {
            display: flex;
            justify-content: flex-end;
            gap: 9px;

            margin-top: 20px;
        }

        .footer-legal {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;

            gap: 7px 13px;

            margin-top: 8px;
        }

        .footer-legal a {
            color: #8e858f;

            font-size: .74rem;
            text-decoration: none;
        }

        .footer-legal a:hover {
            color: #cfc5d0;
        }

        .footer-legal-separator {
            color: #554e57;
            font-size: .65rem;
        }

        .cookie-settings-footer-button {
            border: 0;
            background: transparent;
            color: #8e858f;

            cursor: pointer;

            font-size: .74rem;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .cookie-settings-footer-button:hover {
            color: #cfc5d0;
        }

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

            .cookie-banner {
                left: 12px;
                right: 12px;
                bottom: 12px;

                width: calc(100% - 24px);
            }
        }


        .delete-modal {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 22px;
            background: rgba(6,4,7,.80);
            backdrop-filter: blur(12px);
        }

        .delete-modal.show {
            display: flex;
        }

        .delete-dialog {
            width: min(470px, 100%);
            padding: 30px;
            border-radius: 26px;
            border: 1px solid rgba(255,255,255,.13);
            background: #191318;
            box-shadow: 0 30px 90px rgba(0,0,0,.5);
            text-align: left;
        }

        .delete-eyebrow {
            margin-bottom: 10px;
            color: #c48895;
            text-transform: uppercase;
            letter-spacing: .15em;
            font-size: .7rem;
            font-weight: 700;
        }

        .delete-dialog h2 {
            margin: 0 0 12px;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .delete-dialog p {
            margin: 0 0 14px;
            color: #b9afb9;
            font-size: .9rem;
            line-height: 1.6;
        }

        .delete-note {
            margin: 17px 0;
            padding: 13px 14px;
            border-radius: 15px;
            border: 1px solid rgba(212,145,159,.18);
            background: rgba(143,65,80,.09);
            color: #bcaeb6;
            font-size: .78rem;
            line-height: 1.55;
        }

        .delete-confirm-label {
            display: block;
            margin: 20px 0 8px;
            color: #d8ced8;
            font-size: .8rem;
        }

        .delete-confirm-input {
            width: 100%;
            padding: 13px 15px;
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,.13);
            outline: none;
            background: rgba(255,255,255,.045);
            color: #fff;
        }

        .delete-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .delete-cancel,
        .delete-confirm-button {
            padding: 10px 17px;
            min-height: 42px;
            border-radius: 999px;
            cursor: pointer;
            font-size: .84rem;
            font-weight: 650;
        }

        .delete-cancel {
            border: 1px solid rgba(255,255,255,.12);
            background: rgba(255,255,255,.045);
            color: #ccc2ce;
        }

        .delete-confirm-button {
            border: 0;
            background: #b95264;
            color: #fff;
        }

        .delete-confirm-button:disabled {
            opacity: .35;
            cursor: default;
        }

        .delete-status {
            min-height: 18px;
            margin-top: 13px;
            color: #c3b6c1;
            font-size: .8rem;
        }

        .delete-confirm-copy {
            margin: 18px 0 15px !important;
            color: #aaa0aa !important;
            font-size: .82rem !important;
            line-height: 1.55 !important;
        }

        .delete-slider {
            position: relative;
            width: 100%;
            height: 58px;

            overflow: hidden;

            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.13);

            background:
                rgba(255,255,255,.045);

            user-select: none;
            touch-action: none;
        }

        .delete-slider-fill {
            position: absolute;
            inset: 0 auto 0 0;

            width: 0;

            border-radius: inherit;

            background:
                rgba(185,82,100,.20);

            pointer-events: none;
        }

        .delete-slider-label {
            position: absolute;
            inset: 0;

            display: flex;
            align-items: center;
            justify-content: center;

            padding-left: 42px;

            color: #c3bac4;
            font-size: .82rem;
            font-weight: 600;

            pointer-events: none;

            transition:
                opacity .18s ease;
        }

        .delete-slider-handle {
            position: absolute;

            left: 4px;
            top: 4px;

            width: 48px;
            height: 48px;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 0;

            border: 0;
            border-radius: 50%;

            background: #f4eef4;
            color: #281d25;

            font-size: 1.15rem;
            font-weight: 800;

            cursor: grab;

            touch-action: none;
            user-select: none;

            box-shadow:
                0 5px 18px rgba(0,0,0,.28);

            transition:
                transform .22s ease,
                background .18s ease;
        }

        .delete-slider-handle.dragging {
            cursor: grabbing;
            transition: none;
        }

        .delete-slider.completed
        .delete-slider-handle {
            background: #b95264;
            color: #fff;
        }

        .delete-slider.completed
        .delete-slider-label {
            opacity: .55;
        }

        /*
         * Botones internos de compatibilidad.
         * El gesto deslizante es la confirmación visible.
         */
        #deleteConfirmButton,
        #deleteContinueButton {
            display: none !important;
        }

        .onboarding-card {
            display: none;
            width: min(420px, 100%);
            margin: 28px auto 0;
            padding: 28px;

            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, .10);

            background: rgba(255, 255, 255, .045);
            backdrop-filter: blur(16px);
        }

        .onboarding-card.show {
            display: block;
            animation: appear .25s ease;
        }

        .onboarding-card h3 {
            margin: 0 0 10px;
            font-size: 1.2rem;
            font-weight: 550;
        }

        .onboarding-card p {
            margin: 0;
            color: #aaa1ad;
            font-size: .92rem;
            line-height: 1.55;
        }

        .onboarding-actions {
            display: grid;
            gap: 10px;
            margin-top: 22px;
        }

        .onboarding-primary {
            width: 100%;
        }

        .onboarding-secondary {
            min-height: 42px;
            border: 0;
            background: transparent;
            color: #aaa1ad;
            cursor: pointer;
        }

        .onboarding-status {
            min-height: 20px;
            margin-top: 10px;
            color: #aaa1ad;
            font-size: .85rem;
        }


        .channel-picker {
            width: min(420px, 100%);
            margin-left: auto;
            margin-right: auto;
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .045);
            backdrop-filter: blur(16px);
        }

        .login-card {
            display: none;
            margin-top: 34px;
            padding: 28px;
            border-radius: 24px;
        }

        .login-card.show {
            display: block;
            animation: appear .25s ease;
        }

        .login-card h2 {
            margin: 0 0 8px;
            font-size: 1.25rem;
            font-weight: 550;
        }

        .login-card > p {
            margin: 0 0 22px;
            color: #aaa1ad;
            font-size: .9rem;
            line-height: 1.5;
        }

        .provider-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
.provider-button {
            width: 300px;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            min-height: 44px;
            padding: 10px 16px;

            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, .15);

            background: rgba(255, 255, 255, .055);
            color: #f7f3f8;

            cursor: pointer;
            transition:
                background .18s ease,
                border-color .18s ease,
                transform .18s ease;
        }

        .provider-button:hover {
            background: rgba(255, 255, 255, .085);
            border-color: rgba(255, 255, 255, .24);
            transform: translateY(-1px);
        }

        .provider-auth-icon {
            width: 20px;
            height: 20px;
            object-fit: contain;
            flex: 0 0 20px;
        }

        .provider-mark {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;
            background: rgba(255, 255, 255, .10);

            font-weight: 700;
            font-size: .75rem;
        }

        /*
         * Todos los proveedores activos se muestran directamente.
         * Con pocos métodos disponibles, esconderlos añade fricción.
         */
        .more-button {
            display: none !important;
        }

        .more-providers {
            display: flex;
            margin-top: 10px;
        }

        .email-panel {
            display: none;
            margin-top: 14px;
            padding: 16px;

            border-radius: 18px;
            border: 1px solid rgba(255,255,255,.10);
            background: rgba(255,255,255,.035);
        }

        .email-panel.show {
            display: block;
            animation: appear .2s ease;
        }

        .email-panel p {
            margin: 0 0 12px;
            color: #aaa1ad;
            font-size: .84rem;
            line-height: 1.45;
        }

        .email-input {
            width: 100%;
            height: 46px;
            padding: 0 16px;

            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.14);

            background: rgba(10,7,11,.38);
            color: #f8f5f8;

            outline: none;
            font-size: .92rem;
        }

        .email-input:focus {
            border-color: rgba(232,187,204,.45);
        }

        .email-submit {
            width: 100%;
            min-height: 44px;
            margin-top: 10px;

            border: 0;
            border-radius: 999px;

            background: #f5eff6;
            color: #171219;

            font-weight: 700;
            cursor: pointer;
        }

        .email-submit:disabled {
            opacity: .55;
            cursor: default;
        }

        .email-sent {
            display: none;
            margin-top: 14px;
            color: #d7ccd8;
            font-size: .86rem;
            line-height: 1.5;
        }

        .email-sent.show {
            display: block;
        }

        #status {
            min-height: 20px;
            margin-top: 16px;
            color: #bdb3c1;
            font-size: .86rem;
        }

        .logged {
            display: none !important;
        }

        .logged.show {
            display: block !important;
            animation: appear .25s ease;
        }

        .logged strong {
            display: block;
            font-size: 1.15rem;
            margin-bottom: 5px;
        }

        .logged span {
            color: #aaa1ad;
            font-size: .9rem;
        }

        .channel-picker {
            display: none;
            width: min(520px, 100%);
            margin: 34px auto 0;
            padding: 28px;

            border-radius: 26px;
            text-align: left;

            border: 1px solid rgba(255,255,255,.14);
            background: rgba(18,13,19,.58);
            backdrop-filter: blur(18px);

            box-shadow:
                0 18px 60px rgba(0,0,0,.22);
        }

        .channel-picker.show {
            display: block;
            animation: appear .25s ease;
        }

        .channel-picker h3 {
            margin: 0 0 7px;
            font-size: 1.28rem;
            font-weight: 650;
        }

        .channel-picker > p {
            margin: 0 0 18px;
            color: #aaa1ad;
            font-size: .88rem;
        }

        .channel-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 18px;
            padding: 15px 0;
            border-top: 1px solid rgba(255, 255, 255, .08);
        }

        .channel-main {
            display: flex;
            align-items: center;
            gap: 13px;
            min-width: 0;
        }

        .channel-icon {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: rgba(255,255,255,.06);
        }

        .channel-icon img {
            width: 23px;
            height: 23px;
            object-fit: contain;
        }

        .channel-icon-fallback {
            font-weight: 700;
            font-size: .82rem;
            color: #d7ced9;
        }

        .channel-name {
            font-weight: 600;
        }

        .channel-meta {
            margin-top: 4px;
            color: #908793;
            font-size: .78rem;
        }

        .channel-action {
            border: 1px solid rgba(255, 255, 255, .18);
            background: transparent;
            color: #f4eff5;
            padding: 9px 14px;
            border-radius: 999px;
            cursor: pointer;
            white-space: nowrap;
        }

        .channel-action:disabled {
            opacity: .45;
            cursor: default;
        }

        .socials {
            display: none;
            margin-top: 48px;
        }

        .socials.show {
            display: block;
            animation: appear .25s ease;
        }

        .social-title {
            margin-bottom: 14px;
            color: #8e8591;
            font-size: .74rem;
            text-transform: uppercase;
            letter-spacing: .13em;
        }

        .social-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
        }

        .social-link {
            padding: 8px 13px;
            border-radius: 999px;

            border: 1px solid rgba(255, 255, 255, .09);

            color: #aaa1ad;
            text-decoration: none;
            font-size: .82rem;

            transition:
                color .18s ease,
                border-color .18s ease,
                background .18s ease;
        }

        .social-link:hover {
            color: #f8f5f8;
            border-color: rgba(255, 255, 255, .18);
            background: rgba(255, 255, 255, .04);
        }

        .social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
        }

        .social-link.featured {
            padding: 10px 16px;
            color: #f5edf5;
            border-color: rgba(232, 187, 204, .26);
            background: rgba(232, 187, 204, .07);
        }

        .social-link.featured:hover {
            border-color: rgba(232, 187, 204, .44);
            background: rgba(232, 187, 204, .12);
        }

        .social-icon {
            width: 18px;
            height: 18px;
            object-fit: contain;
        }

        .social-mark {
            width: 19px;
            height: 19px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            background: rgba(255,255,255,.09);
            font-size: .68rem;
            font-weight: 750;
            color: #efe7f0;
        }

        footer {
            padding: 24px;
            text-align: center;
            font-size: .75rem;
            color: #716a74;
        }


        /* ====================================================
           VERA BACKGROUND
           Sofá -> Parque -> Lluvia -> ...
           Ciclo completo: 27s
           ==================================================== */

        .vera-background {
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
            background: #0c0a0d;
        }

        .vera-bg-slide {
            position: absolute;
            inset: -2%;

            background-size: cover;
            background-repeat: no-repeat;

            opacity: 0;

            will-change:
                opacity,
                transform;

            animation:
                veraFade 27s infinite ease-in-out,
                veraDrift 27s infinite ease-in-out;
        }

        .vera-bg-sofa {
            background-image:
                url("/assets/backgrounds/vera-bg-01-sofa.webp");

            background-position:
                center 29%;

            animation-delay:
                0s,
                0s;
        }

        .vera-bg-park {
            background-image:
                url("/assets/backgrounds/vera-bg-02-park.webp");

            background-position:
                44% 48%;

            animation-delay:
                -18s,
                -18s;
        }

        .vera-bg-rain {
            background-image:
                url("/assets/backgrounds/vera-bg-03-rain.webp");

            background-position:
                center 35%;

            animation-delay:
                -9s,
                -9s;
        }

        /*
         * Capa oscura común.
         * Mantiene las fotos visibles sin competir
         * con "Más cerca. Más personal."
         */
        .vera-background::after {
            content: "";
            position: absolute;
            inset: 0;

            background:
                radial-gradient(
                    circle at 50% 32%,
                    rgba(73, 45, 76, .16) 0%,
                    rgba(16, 11, 17, .40) 48%,
                    rgba(7, 5, 8, .70) 100%
                ),
                linear-gradient(
                    180deg,
                    rgba(10, 7, 11, .60) 0%,
                    rgba(10, 8, 12, .73) 55%,
                    rgba(7, 5, 8, .88) 100%
                );

            z-index: 5;
        }

        /*
         * Cada foto domina aproximadamente 9 segundos.
         * La salida y entrada duran cerca de 3 segundos.
         */
        @keyframes veraFade {

            0%,
            25% {
                opacity: 1;
            }

            36%,
            89% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        /*
         * Movimiento minúsculo tipo cámara.
         * Tiene que sentirse, no notarse.
         */
        @keyframes veraDrift {

            0% {
                transform:
                    scale(1.035)
                    translate3d(0, 0, 0);
            }

            50% {
                transform:
                    scale(1.07)
                    translate3d(-0.35%, -0.25%, 0);
            }

            100% {
                transform:
                    scale(1.035)
                    translate3d(0, 0, 0);
            }
        }

        /*
         * Todo el contenido de Vera Club
         * queda por encima del fondo.
         */
        .page {
            position: relative;
            z-index: 2;
        }

        @keyframes appear {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 480px) {
            nav {
                width: min(100% - 28px, 1120px);
                padding-top: 18px;
            }

            .brand-mark {
                width: 34px;
                height: 34px;
                flex-basis: 34px;
            }

            .brand-name {
                font-size: .88rem;
            }

            .hero {
                width: calc(100% - 28px);
                padding-top: 48px;
            }

            .login-card,
            .logged,
            .channel-picker {
                padding: 22px 18px;
            }
        }

        /*
         * En móvil recolocamos individualmente.
         */
        @media (max-width: 700px) {

            .vera-bg-slide {
                inset: -1%;
            }

            .vera-bg-sofa {
                background-position:
                    52% 45%;
            }

            .vera-bg-park {
                background-position:
                    50% 48%;
            }

            .vera-bg-rain {
                background-position:
                    64% 34%;
            }

            .vera-background::after {
                background:
                    radial-gradient(
                        circle at 50% 30%,
                        rgba(73, 45, 76, .12),
                        rgba(12, 9, 13, .54) 55%,
                        rgba(7, 5, 8, .78)
                    ),
                    linear-gradient(
                        180deg,
                        rgba(10, 7, 11, .66),
                        rgba(7, 5, 8, .88)
                    );
            }
        }


        /*
         * Accesibilidad:
         * quien desactive animaciones ve solo el sofá.
         */
        @media (prefers-reduced-motion: reduce) {

            .vera-bg-slide {
                display: none;
                animation: none;
            }

            .vera-bg-sofa {
                display: block;
                opacity: 1;
                transform: none;
            }
        }

    
        /* VERA PRIVATE SPACE V1 */

        .private-space-trigger {
            width: 100%;
            margin-top: 10px;
            padding: 13px 18px;

            border: 1px solid rgba(231,187,200,.28);
            border-radius: 14px;

            background:
                rgba(75,43,62,.26);

            color: #f1dce3;

            font: inherit;
            font-size: .96rem;
            font-weight: 700;

            cursor: pointer;

            transition:
                transform .16s ease,
                border-color .16s ease,
                background .16s ease;
        }

        .private-space-trigger:hover {
            transform: translateY(-1px);

            border-color:
                rgba(231,187,200,.48);

            background:
                rgba(92,50,72,.36);
        }

        .private-space-modal {
            position: fixed;
            inset: 0;
            z-index: 10050;

            display: none;
            align-items: center;
            justify-content: center;

            padding: 18px;

            background:
                rgba(7,5,8,.78);

            backdrop-filter: blur(8px);
        }

        .private-space-modal.show {
            display: flex;
        }

        .private-space-card {
            width: min(420px, 100%);
            padding: 26px;

            border:
                1px solid rgba(255,255,255,.10);

            border-radius: 22px;

            background:
                rgba(27,20,27,.98);

            box-shadow:
                0 24px 70px rgba(0,0,0,.42);
        }

        .private-space-kicker {
            margin-bottom: 10px;

            color: #d7a8b8;

            font-size: .78rem;
            font-weight: 750;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .private-space-card h2 {
            margin:
                0 0 12px;

            color: #f6eef3;

            font-size: 1.4rem;
            line-height: 1.2;
        }

        .private-space-card p {
            margin:
                0 0 20px;

            color: #aaa1ad;

            font-size: .92rem;
            line-height: 1.55;
        }

        .private-space-actions {
            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                minmax(0, 1.35fr);

            gap: 10px;
        }

        .private-space-actions button,
        .private-destination {
            min-height: 46px;

            border-radius: 13px;

            font: inherit;
            font-weight: 700;

            cursor: pointer;
        }

        .private-space-cancel {
            border:
                1px solid rgba(255,255,255,.10);

            background:
                rgba(255,255,255,.035);

            color: #c5bdc7;
        }

        .private-space-confirm {
            border:
                1px solid rgba(231,187,200,.34);

            background:
                linear-gradient(
                    135deg,
                    #78475e,
                    #553446
                );

            color: #fff4f7;
        }

        .private-destination-list {
            display: grid;
            gap: 10px;

            margin-top: 16px;
        }

        .private-destination {
            width: 100%;
            padding: 12px 16px;

            border:
                1px solid rgba(231,187,200,.25);

            background:
                rgba(92,50,72,.28);

            color: #f1dce3;
        }

        @media (max-width: 480px) {
            .private-space-actions {
                grid-template-columns: 1fr;
            }
        }

    
        /* ==================================================
         * VERA_LANDING_PROFILE_V1
         * ================================================== */

        .landing-profile {
            position: relative;
            display: none;
            margin-left: auto;
        }

        .landing-profile.show {
            display: block;
        }

        .landing-profile-trigger {
            min-height: 38px;
            max-width: 220px;

            display: inline-flex;
            align-items: center;
            gap: 8px;

            padding: 4px 11px 4px 5px;

            border:
                1px solid rgba(255,255,255,.12);
            border-radius: 999px;

            background:
                rgba(15,10,16,.26);

            color: #eee8ef;
            font: inherit;
            cursor: pointer;

            backdrop-filter: blur(12px);

            transition:
                border-color .18s ease,
                background .18s ease;
        }

        .landing-profile-trigger:hover,
        .landing-profile-trigger[
            aria-expanded="true"
        ] {
            border-color:
                rgba(255,255,255,.25);

            background:
                rgba(255,255,255,.07);
        }

        .landing-profile-avatar {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            background:
                linear-gradient(
                    145deg,
                    #d695ab,
                    #8c79be
                );

            color: #fff;
            font-size: 13px;
            font-weight: 800;
        }

        .landing-profile-name {
            max-width: 125px;
            overflow: hidden;

            font-size: .79rem;
            font-weight: 650;

            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .landing-profile-chevron {
            opacity: .65;
            font-size: 13px;
        }

        .landing-profile-menu {
            position: absolute;
            top: calc(100% + 9px);
            right: 0;
            z-index: 15000;

            width: 250px;

            padding: 7px;

            border:
                1px solid rgba(255,255,255,.12);
            border-radius: 18px;

            background:
                rgba(20,14,21,.97);

            box-shadow:
                0 22px 65px rgba(0,0,0,.48);

            backdrop-filter: blur(20px);
        }

        .landing-profile-menu[hidden] {
            display: none;
        }

        .landing-profile-head {
            padding: 10px 11px 12px;
        }

        .landing-profile-head strong {
            display: block;

            overflow: hidden;

            color: #fff;
            font-size: .88rem;

            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .landing-profile-head span {
            display: block;

            margin-top: 4px;

            color: #9f94a3;
            font-size: .72rem;
        }

        .landing-profile-item,
        .landing-profile-menu .logout-button {
            width: 100%;

            align-items: center;
            gap: 10px;

            padding: 10px 11px;

            border: 0;
            border-radius: 11px;

            background: transparent;

            color: #ded6e0;
            font: inherit;
            font-size: .78rem;
            text-align: left;

            cursor: pointer;

            backdrop-filter: none;
        }

        .landing-profile-item {
            display: flex;
        }

        .landing-profile-menu
        .logout-button {
            margin: 0;
        }

        .landing-profile-menu
        .logout-button.show {
            display: flex;
        }

        .landing-profile-item:hover,
        .landing-profile-menu
        .logout-button:hover {
            background:
                rgba(255,255,255,.07);

            color: #fff;
        }

        .landing-profile-separator {
            height: 1px;

            margin: 6px 8px;

            background:
                rgba(255,255,255,.09);
        }

        .landing-profile-menu
        .logout-button {
            color: #e5b4c2;
        }


        /* ==================================================
         * ACCOUNT PANEL
         * ================================================== */

        .landing-account-overlay {
            position: fixed;
            inset: 0;
            z-index: 16000;

            display: none;
            align-items: center;
            justify-content: center;

            padding: 20px;

            background:
                rgba(5,4,7,.76);

            backdrop-filter: blur(10px);
        }

        .landing-account-overlay.show {
            display: flex;
        }

        .landing-account-panel {
            width:
                min(680px, calc(100vw - 30px));

            max-height:
                min(780px, calc(100vh - 30px));

            overflow-y: auto;

            border:
                1px solid rgba(255,255,255,.12);
            border-radius: 24px;

            background:
                rgba(23,16,24,.985);

            box-shadow:
                0 30px 100px rgba(0,0,0,.55);
        }

        .landing-account-top {
            position: sticky;
            top: 0;
            z-index: 2;

            display: flex;
            align-items: center;
            gap: 12px;

            padding: 18px;

            border-bottom:
                1px solid rgba(255,255,255,.09);

            background:
                rgba(23,16,24,.94);

            backdrop-filter: blur(18px);
        }

        .landing-account-avatar {
            width: 46px;
            height: 46px;
            flex: 0 0 46px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            background:
                linear-gradient(
                    145deg,
                    #d695ab,
                    #8c79be
                );

            color: #fff;
            font-size: 19px;
            font-weight: 800;
        }

        .landing-account-heading {
            min-width: 0;
            flex: 1;
        }

        .landing-account-heading h2 {
            margin: 0;

            color: #fff;
            font-size: 1.1rem;
        }

        .landing-account-heading p {
            margin: 4px 0 0;

            color: #9f94a3;
            font-size: .72rem;
        }

        .landing-account-close {
            width: 36px;
            height: 36px;

            border:
                1px solid rgba(255,255,255,.11);
            border-radius: 50%;

            background:
                rgba(255,255,255,.035);

            color: #fff;
            font-size: 19px;
            cursor: pointer;
        }

        .landing-account-body {
            display: grid;
            gap: 14px;

            padding: 16px;
        }

        .landing-account-section {
            scroll-margin-top: 88px;

            padding: 16px;

            border:
                1px solid rgba(255,255,255,.09);
            border-radius: 18px;

            background:
                rgba(255,255,255,.025);
        }

        .landing-account-section h3 {
            margin: 0 0 13px;

            color: #fff;
            font-size: .88rem;
        }

        .landing-account-grid {
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0,1fr));
            gap: 10px;
        }

        .landing-account-stat {
            padding: 12px;

            border:
                1px solid rgba(255,255,255,.07);
            border-radius: 13px;

            background:
                rgba(255,255,255,.025);
        }

        .landing-account-label {
            display: block;

            margin-bottom: 5px;

            color: #938798;
            font-size: .69rem;
        }

        .landing-account-value {
            display: block;

            color: #f0e9f2;
            font-size: .79rem;
            font-weight: 650;

            overflow-wrap: anywhere;
        }

        .landing-account-founder,
        .landing-account-trial {
            display: none;

            margin-top: 12px;
            padding: 11px 12px;

            border-radius: 13px;

            font-size: .75rem;
            line-height: 1.5;
        }

        .landing-account-founder.show {
            display: block;

            border:
                1px solid rgba(218,151,174,.28);

            background:
                rgba(218,151,174,.08);

            color: #edd3dc;
        }

        .landing-account-trial.show {
            display: block;

            border:
                1px solid rgba(255,255,255,.09);

            background:
                rgba(255,255,255,.035);

            color: #cfc5d2;
        }

        .landing-capabilities {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        .landing-capability {
            padding: 7px 9px;

            border:
                1px solid rgba(255,255,255,.09);
            border-radius: 999px;

            background:
                rgba(255,255,255,.035);

            color: #d8cedb;
            font-size: .7rem;
        }

        .landing-avatar-picker {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
        }

        .landing-avatar-option {
            width: 45px;
            height: 45px;

            display: flex;
            align-items: center;
            justify-content: center;

            border:
                1px solid rgba(255,255,255,.11);
            border-radius: 50%;

            background:
                rgba(255,255,255,.025);

            color: #fff;
            font-size: 20px;

            cursor: pointer;
        }

        .landing-avatar-option:hover,
        .landing-avatar-option.active {
            border-color:
                rgba(218,151,174,.7);

            background:
                rgba(218,151,174,.12);
        }

        .landing-account-note {
            margin: 10px 0 0;

            color: #8f8493;
            font-size: .68rem;
            line-height: 1.5;
        }


        @media (max-width: 640px) {

            .landing-profile-name,
            .landing-profile-chevron {
                display: none;
            }

            .landing-profile-trigger {
                padding-right: 5px;
            }

            .landing-profile-menu {
                position: fixed;
                top: 68px;
                right: 10px;

                width:
                    min(260px, calc(100vw - 20px));
            }

            .landing-account-overlay {
                align-items: flex-end;
                padding: 0;
            }

            .landing-account-panel {
                width: 100%;
                max-height: 92vh;

                border-radius:
                    24px 24px 0 0;
            }

            .landing-account-grid {
                grid-template-columns: 1fr;
            }
        }

    
        /* ==================================================
         * VERA_LANDING_PROFILE_V2
         *
         * - Sin desplegable.
         * - Avatar + nombre abre directamente Mi cuenta.
         * - Logout vive dentro del panel.
         * ================================================== */

        .landing-profile-menu {
            display: none !important;
        }

        .landing-profile-chevron {
            display: none !important;
        }

        .landing-profile-trigger {
            padding-right: 12px;
        }

        .landing-account-footer {
            padding: 0 16px 18px;
        }

        .landing-account-footer
        .logout-button {
            width: 100%;
            min-height: 44px;

            display: none;
            align-items: center;
            justify-content: center;
            gap: 9px;

            padding: 11px 14px;

            border:
                1px solid rgba(218,151,174,.20);
            border-radius: 14px;

            background:
                rgba(218,151,174,.055);

            color: #dcaabb;

            font: inherit;
            font-size: .78rem;
            font-weight: 600;

            cursor: pointer;

            transition:
                background .18s ease,
                border-color .18s ease,
                color .18s ease;
        }

        .landing-account-footer
        .logout-button.show {
            display: flex;
        }

        .landing-account-footer
        .logout-button:hover {
            border-color:
                rgba(218,151,174,.38);

            background:
                rgba(218,151,174,.11);

            color: #f2d5df;
        }

        @media (max-width: 640px) {
        }

    
        /* ==================================================
         * VERA_PROFILE_V22B
         * ================================================== */

        .landing-name-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .landing-name-edit {
            width: 28px;
            height: 28px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            border:
                1px solid rgba(255,255,255,.10);
            border-radius: 9px;

            background:
                rgba(255,255,255,.04);

            color: #bcb3bf;

            font: inherit;
            cursor: pointer;
        }

        .landing-name-edit:hover {
            color: #f1d2dc;

            border-color:
                rgba(218,151,174,.30);

            background:
                rgba(218,151,174,.08);
        }

        .landing-name-editor {
            margin-top: 10px;
        }

        .landing-name-editor[hidden] {
            display: none !important;
        }

        .landing-name-input {
            width: 100%;
            box-sizing: border-box;

            padding: 10px 11px;

            border:
                1px solid rgba(255,255,255,.11);
            border-radius: 11px;

            outline: none;

            background:
                rgba(0,0,0,.20);

            color: #f4eef5;
            font: inherit;
        }

        .landing-name-actions {
            display: flex;
            gap: 8px;

            margin-top: 8px;
        }

        .landing-name-action {
            padding: 8px 11px;

            border:
                1px solid rgba(255,255,255,.10);
            border-radius: 10px;

            background:
                rgba(255,255,255,.04);

            color: #d6cfd8;

            font: inherit;
            font-size: .73rem;
            cursor: pointer;
        }

        .landing-name-action.primary {
            border-color:
                rgba(218,151,174,.30);

            background:
                rgba(218,151,174,.11);

            color: #efcdd8;
        }

        .landing-name-error {
            min-height: 15px;

            margin-top: 6px;

            color: #df9aa8;
            font-size: .68rem;
        }

        .landing-account-source {
            margin-top: 8px;

            color: #827a87;
            font-size: .66rem;
        }

        .landing-access-benefit {
            display: none;

            margin-top: 12px;
            padding: 10px 12px;

            border:
                1px solid rgba(218,151,174,.16);
            border-radius: 12px;

            background:
                rgba(218,151,174,.055);

            color: #beaeb7;

            font-size: .72rem;
            line-height: 1.45;
        }

        .landing-access-benefit.show {
            display: block;
        }

        .landing-capability-v22 {
            display: inline-flex;
            align-items: center;

            margin: 4px 5px 4px 0;
            padding: 6px 9px;

            border:
                1px solid rgba(255,255,255,.08);
            border-radius: 999px;

            background:
                rgba(255,255,255,.035);

            color: #bbb2be;

            font-size: .68rem;
        }

    
        /* ==================================================
         * VERA_PROFILE_V24
         * ================================================== */

        .landing-access-detail {
            display: none;

            margin-top: 7px;

            color: #a79daa;
            font-size: .68rem;
            line-height: 1.35;
        }

        .landing-access-detail.show {
            display: block;
        }

    
        /* ==================================================
         * VERA_AVATAR_COLLECTION_V1
         * ================================================== */

        .landing-avatar-collection-label {
            margin: 14px 0 8px;
            color: #9d94a1;
            font-size: .68rem;
            font-weight: 600;
            letter-spacing: .02em;
        }

        .landing-profile-avatar.has-image,
        .landing-account-avatar.has-image {
            padding: 0;
            overflow: hidden;
            background: transparent;
        }

        .landing-profile-avatar.has-image img,
        .landing-account-avatar.has-image img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: 50%;
        }

        .landing-avatar-option {
            overflow: hidden;
        }

        .landing-avatar-option-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: 50%;
        }

    
        /* ==================================================
         * VERA_PROFILE_NAME_BUTTONS_V1
         * ================================================== */

        .landing-name-actions {
            display: grid !important;
            grid-template-columns:
                minmax(0, 1fr)
                minmax(0, 1fr);

            gap: 9px;

            width: 100%;
            margin-top: 9px;
        }

        .landing-name-action {
            width: 100% !important;
            min-width: 0 !important;
            height: 40px;
            min-height: 40px;

            display: flex !important;
            align-items: center;
            justify-content: center;

            box-sizing: border-box;

            margin: 0 !important;
            padding: 0 12px !important;

            white-space: nowrap;

            border-radius: 11px;
        }

        .landing-name-action.primary {
            font-weight: 600;
        }

        .landing-name-action:disabled {
            opacity: .55;
            cursor: wait;
        }


/* VERA_CSP_STATIC_STYLE_CLASSES_V1 */

.vera-voice-title-spacing {
    margin-bottom: 10px;
}

.vera-voice-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    margin-bottom: 10px;
}

.vera-voice-fill {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #ff4f9a,
        #b05cff
    );
    transition: width .25s ease;
}

.vera-channel-status {
    margin-top: 14px;
    color: #aaa1ad;
    font-size: .9rem;
}


/* VERA_CSP_HIDDEN_STATE_V1 */

.private-space-card [hidden] {
    display: none !important;
}


/* VERA_CSP_DELETE_HIDDEN_STATE_V1 */

.delete-dialog [hidden] {
    display: none !important;
}