/**
 * campaigns.css — Campaigns View (v59)
 * Sub-vista A: Products grid
 * Sub-vista B: Campaign detail (product + videos + scenes + wizard)
 * Mobile-first: 2 cols → 4 cols on desktop
 */

/* ─── SCROLL ─── */
#view-campaigns {
    overflow-y: auto !important;
    overflow-x: hidden;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100%;
}

#view-campaigns::-webkit-scrollbar {
    width: 4px;
}

#view-campaigns::-webkit-scrollbar-track {
    background: transparent;
}

#view-campaigns::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

/* ─── LAYOUT ─── */
.campaigns-layout {
    padding: 12px 2.5rem 160px;
    width: 100%;
    margin: 0;
}

/* ─── STICKY TOP: back + nav ─── */
.campaign-sticky-top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #0a0a0a;
    padding: 4px 0 6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ─── BACK ARROW ─── */
.campaigns-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    padding: 8px 6px 8px 0;
    margin-bottom: 0;
    transition: color 0.2s;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}

.campaigns-back:hover {
    color: #fff;
}

.campaigns-back svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ─── NAV MENU ─── */
.campaign-nav {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 4px;
}

.campaign-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 6px 12px;
    transition: color 0.2s;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}

.campaign-nav-item:hover {
    color: rgba(255, 255, 255, 0.85);
}

.campaign-nav-item.active {
    color: #fff;
    font-weight: 700;
}

.campaign-nav-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.campaign-nav-item.active svg {
    opacity: 1;
}

.campaign-nav-sep {
    color: rgba(255, 255, 255, 0.12);
    font-size: 12px;
    padding: 0 2px;
    user-select: none;
}

/* ─── SUB-VISTA A: PRODUCTS GRID ─── */
.campaigns-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .campaigns-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1200px) {
    .campaigns-products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.campaigns-product-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.campaigns-product-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.campaigns-product-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: rgba(255, 255, 255, 0.02);
}

.campaigns-product-info {
    padding: 12px 14px 14px;
}

.campaigns-product-name {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.campaigns-product-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.campaigns-product-stat {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 4px;
}

.campaigns-product-stat .stat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.stat-dot.dot-video {
    background: #34d399;
}

.stat-dot.dot-scene {
    background: #60a5fa;
}

.stat-dot.dot-progress {
    background: #fbbf24;
}

/* Expand button (fullscreen product) */
.campaigns-product-expand {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.2s;
}

.campaigns-product-card:hover .campaigns-product-expand {
    opacity: 1;
}

.campaigns-product-expand svg {
    width: 14px;
    height: 14px;
}

/* ─── SUB-VISTA B: CAMPAIGN DETAIL ─── */
.campaign-header {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}

.campaign-header-img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.campaign-header-info {
    min-width: 0;
}

.campaign-header-name {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-header-subcat {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

/* [DISABLED] New Scene button — kept for future re-enable */
.campaign-new-scene-btn {
    display: none;
}

/* ─── SECTION HEADERS ─── */
.campaign-section {
    margin-bottom: 28px;
}

.campaign-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.campaign-section-title svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* ─── CAMPAIGN CARDS GRID (Videos section) ─── */
/* Uses flex-wrap like Library for consistent card sizing */
.campaign-cards-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 16px;
    justify-content: flex-start;
}

/* ─── Videos grid: percentage-based (matches Videos view) ─── */
/* Direct .vcard children in videos section get fluid widths */
[data-section="videos"] .campaign-cards-grid {
    align-items: flex-start;
}

/* ─── D1/D3: Unified Width Rules (Videos & Scenes) ─── */
[data-section="videos"] .campaign-cards-grid>.vcard.card-P,
[data-section="scenes"] .preview-option:has(.card-P) {
    width: min(calc(25% - 12px), calc((100vh - 180px) * 9 / 16));
    max-width: calc(25% - 12px);
    flex: none;
}

[data-section="videos"] .campaign-cards-grid>.vcard.card-L,
[data-section="scenes"] .preview-option:has(.card-L) {
    width: min(calc(50% - 8px), calc((100vh - 180px) * 16 / 9));
    max-width: calc(50% - 8px);
    flex: none;
}

[data-section="videos"] .campaign-cards-grid>.vcard.card-S,
[data-section="scenes"] .preview-option:has(.card-S) {
    width: min(calc(25% - 12px), calc(100vh - 180px));
    max-width: calc(25% - 12px);
    flex: none;
}

/* D1/D3: Base thumb — shared border/radius, fluid width-driven */
[data-section="videos"] .campaign-cards-grid .vcard .thumb {
    width: 100%;
    height: auto;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* D3: 9:16 — 4/row, fits viewport height */
[data-section="videos"] .campaign-cards-grid .vcard.card-P .thumb {
    aspect-ratio: 9/16;
}

/* D1: 16:9 — 2/row, fits viewport height */
[data-section="videos"] .campaign-cards-grid .vcard.card-L .thumb {
    aspect-ratio: 16/9;
}

[data-section="videos"] .campaign-cards-grid .vcard.card-S .thumb {
    aspect-ratio: 1/1;
}

/* ─── CARD WRAPPER (video cards) ─── */
.campaign-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ─── SCENE CARD CONTAINER — flow layout (controls above/below image) ─── */
.preview-option.campaign-scene {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: hidden;
    cursor: pointer;
}

/* Force outer aspect ratios to perfectly match Video cards */
.preview-option.campaign-scene:has(.card-P) { aspect-ratio: 9/16; }
.preview-option.campaign-scene:has(.card-L) { aspect-ratio: 16/9; }
.preview-option.campaign-scene:has(.card-S) { aspect-ratio: 1/1; }

/* Select row: flow, centered */
[data-section="scenes"] .preview-option.campaign-scene>.preview-select-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    width: 100%;
}

[data-section="scenes"] .preview-option.campaign-scene .preview-check {
    background: #0a0a0a;
    border-color: rgba(255, 255, 255, 0.35);
}

/* Selected check: dark bg, white border, white check */
[data-section="scenes"] .preview-option.campaign-scene.selected .preview-check {
    background: #0a0a0a;
    border-color: #fff;
}

[data-section="scenes"] .preview-option.campaign-scene.selected .preview-check svg {
    color: #fff;
}

[data-section="scenes"] .preview-option.campaign-scene .preview-card-label {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.85);
}

/* Selected: bright card border */
[data-section="scenes"] .preview-option.campaign-scene.selected {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}

/* ─── SCENE EDITOR BUTTON (uniform across all formats) ─── */
.campaign-scene-btn {
    width: 80% !important;
    max-width: 280px !important;
    height: 44px !important;
    font-weight: 700 !important;
    margin: 10px auto !important;
}

.campaign-scene-btn::before {
    padding: 1.5px !important;
}



/* ─── EMPTY STATE ─── */
.campaigns-empty {
    text-align: center;
    padding: 80px 24px;
    color: rgba(255, 255, 255, 0.35);
    font-family: Inter, sans-serif;
    font-size: 14px;
}

/* ─── PRODUCT FULLSCREEN MODAL ─── */
.campaigns-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.campaigns-fullscreen.show {
    opacity: 1;
    pointer-events: auto;
}

.campaigns-fullscreen img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 12px;
}

.campaigns-fullscreen-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── VIDEO CARDS — 9:16 fits viewport on desktop (handled above) ─── */

/* ─── CAMPAIGN SCENES — vh-based sizing (fits viewport) ─── */
/* Scenes grid: matching 16px gap, stretch items */
[data-section="scenes"] .campaign-cards-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 24px;
    column-gap: 16px;
    justify-content: flex-start;
    align-items: stretch;
    padding-bottom: 80px; /* D5: clearance for FAB */
}

/* Scene wrapper sizing — column width on outer composite card (4 x 9:16, 2 x 16:9, fits viewport) */
[data-section="scenes"] .preview-option {
    flex: none;
}

/* Note: Widths are unified with videos above using :has() selectors */

[data-section="scenes"] .preview-option .vcard {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Scene card thumb — inner image dynamically scales inside bounds */
[data-section="scenes"] .preview-option .vcard .thumb {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: none;
    border-radius: 0;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-section="scenes"] .preview-option .vcard.card-P .thumb {
    aspect-ratio: 9/16;
}

[data-section="scenes"] .preview-option .vcard.card-L .thumb {
    aspect-ratio: 16/9;
}

[data-section="scenes"] .preview-option .vcard.card-S .thumb {
    aspect-ratio: 1/1;
}

/* Generating scene card */
[data-section="scenes"] .preview-option.state-generating {
    align-self: flex-end;
}

[data-section="scenes"] .preview-option.state-generating>.preview-card-label {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 12px;
}

/* Square card global fallback */
.vcard.card-S .thumb {
    aspect-ratio: 1/1;
    width: min(45vh, 238px);
    height: auto;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* Selection dimming (from Preview) */
[data-section="scenes"].has-selection .preview-option:not(.selected) .vcard .thumb {
    opacity: 0.5;
}

[data-section="scenes"].has-selection .preview-option:not(.selected) .vcard .thumb img {
    opacity: 0.6;
}

[data-section="scenes"] .preview-option.selected .vcard .thumb {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

/* ─── MOBILE (SOLO MOBILE <= 768px — Desktop permanece 100% intacto) ─── */
@media (max-width: 768px) {
    /* En mobile, welcome.css cambia .view-section a position:relative.
       Forzamos width: 100% en #view-campaigns para evitar que .fm-main lo colapse al centro */
    #view-campaigns {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* M1: padding lateral fluido de 10px según design system ToGo */
    .campaigns-layout {
        padding: 8px 10px 140px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* M1: sticky top — sin offset lateral */
    .campaign-sticky-top {
        padding: 4px 0 6px;
        margin-left: 0;
        margin-right: 0;
    }

    .campaigns-back {
        padding: 8px 4px 8px 0;
    }

    /* Nav mobile */
    .campaign-nav {
        padding: 0;
    }

    .campaign-nav-item {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Grillas en mobile: ancho completo y spacing de 6px */
    .campaign-cards-grid {
        width: 100% !important;
        row-gap: 6px;
        column-gap: 6px;
        justify-content: flex-start;
    }
    [data-section="scenes"] .campaign-cards-grid {
        row-gap: 24px;
        column-gap: 6px;
        padding-bottom: 80px;
    }

    /* Videos mobile: 9:16 (2/fila), 16:9 (1/fila) */
    [data-section="videos"] .campaign-cards-grid {
        row-gap: 12px;
        column-gap: 6px;
    }
    [data-section="videos"] .campaign-cards-grid > .vcard.card-P {
        width: calc(50% - 3px) !important;
        max-width: 100% !important;
    }
    [data-section="videos"] .campaign-cards-grid > .vcard.card-L {
        width: 100% !important;
        max-width: 100% !important;
    }
    [data-section="videos"] .campaign-cards-grid > .vcard.card-S {
        width: calc(50% - 3px) !important;
        max-width: 100% !important;
    }

    /* Scene cards mobile: padding 0 para máximo ancho */
    .preview-option.campaign-scene {
        padding: 0;
    }
    
    [data-section="scenes"] .preview-option.campaign-scene > .preview-select-row {
        padding: 8px 6px;
    }

    [data-section="scenes"] .preview-option:has(.card-P) {
        width: calc(50% - 3px) !important;
        max-width: 100% !important;
    }
    [data-section="scenes"] .preview-option:has(.card-L) {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: auto !important;
        height: auto !important;
    }
    [data-section="scenes"] .preview-option:has(.card-L) .vcard.card-L .thumb {
        width: 100% !important;
        aspect-ratio: 16/9 !important;
        height: auto !important;
    }
    [data-section="scenes"] .preview-option:has(.card-S) {
        width: calc(50% - 3px) !important;
        max-width: 100% !important;
    }

    [data-section="scenes"] .preview-option:has(.card-L) .campaign-scene-btn {
        max-width: 60% !important;
    }

    [data-section="videos"] .vcard .thumb,
    [data-section="scenes"] .preview-option .vcard .thumb {
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }
}

/* ─── Scene Editor button loading spinner ─── */
.campaign-scene-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════
   Tutorial Modal — First-visit animation
   ═══════════════════════════════════════════════ */

.tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.tutorial-card {
    width: 100%;
    max-width: 420px;
    background: rgba(12, 12, 12, 0.95);
    border: 1px solid rgba(192, 192, 192, 0.25);
    border-radius: 1.5rem;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.92);
    animation: tutorialScaleIn 0.35s ease forwards;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.tutorial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 192, 192, 0.6), transparent);
}

@keyframes tutorialScaleIn {
    to { transform: scale(1); }
}

/* Animation viewport — contains the embedded animation */
.tutorial-anim-viewport {
    width: min(85vw, 360px);
    height: min(60vh, 500px);
    position: relative;
    overflow: hidden;
    border: 1px solid #262626;
    border-radius: 16px;
    background: #050505;
    flex-shrink: 0;
}

/* OK button — subtle action style */
.tutorial-btn-ok {
    width: 100%;
    max-width: 200px;
    padding: 10px 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tutorial-btn-ok:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tutorial-btn-ok:active {
    transform: scale(0.96);
}

/* ── Tutorial animation internal styles ── */

.tutorial-anim-viewport .tut-scroll-track {
    width: 100%;
    height: 200%;
    position: absolute;
    top: 0; left: 0;
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.tutorial-anim-viewport .tut-screen {
    width: 100%;
    height: 50%;
    padding: 18px 20px 75px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.tutorial-anim-viewport .tut-section-title {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    color: #888; margin-bottom: 12px; text-transform: uppercase;
    padding-bottom: 6px; border-bottom: 1px solid #1f1f1f; flex-shrink: 0;
}

.tutorial-anim-viewport .tut-card-wrapper {
    flex-grow: 1; display: flex; align-items: center;
    justify-content: center; width: 100%; min-height: 0;
}

.tutorial-anim-viewport .tut-img-container {
    --tut-card-h: clamp(200px, 38vh, 280px);
    width: calc(var(--tut-card-h) * 9 / 16);
    height: var(--tut-card-h);
    background: #111; border-radius: 8px;
    position: relative; overflow: hidden; flex-shrink: 0;
}

.tutorial-anim-viewport .tut-outer-card {
    display: flex; flex-direction: column; padding: 10px;
    border: 1px solid #222; border-radius: 12px;
    background: transparent; width: fit-content; margin: 0 auto; flex-shrink: 0;
}

.tutorial-anim-viewport .tut-outer-card-header {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px; height: 22px;
}

.tutorial-anim-viewport .tut-check-box {
    width: 18px; height: 18px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.5);
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tutorial-anim-viewport .tut-check-box svg {
    width: 10px; height: 10px; stroke: #000; stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
}

.tutorial-anim-viewport .tut-scene-number {
    background: #262626; color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 4px; height: 18px;
    display: flex; align-items: center; justify-content: center;
}

.tutorial-anim-viewport .tut-outer-card-footer {
    margin-top: 8px; opacity: 0; transition: opacity 0.4s ease;
}

.tutorial-anim-viewport .tut-btn-editar {
    width: 100%; color: #fff; border: 1px solid transparent; border-radius: 6px;
    padding: 6px 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background-image: linear-gradient(#000, #000), linear-gradient(135deg, #7caff7 0%, #fbcfe8 100%);
    background-origin: border-box; background-clip: padding-box, border-box;
}
.tutorial-anim-viewport .tut-btn-editar svg {
    width: 12px; height: 12px; stroke: #fff; stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}

.tutorial-anim-viewport .tut-card-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; transition: opacity 0.6s ease;
}

.tutorial-anim-viewport .tut-img-jeans {
    background-image: url('../img/tutorial-jeans.png');
    background-color: #f5f5f5; opacity: 1;
}
.tutorial-anim-viewport .tut-img-model {
    background-image: url('../img/tutorial-model.jpg');
    opacity: 0;
}

.tutorial-anim-viewport .tut-inner-badges {
    position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; z-index: 10;
}
.tutorial-anim-viewport .tut-inner-badge {
    background: rgba(0,0,0,0.65); padding: 3px 5px; border-radius: 4px;
    font-size: 8px; font-weight: 600; color: #fff;
}

.tutorial-anim-viewport .tut-expand-icon {
    position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.5);
    padding: 4px; border-radius: 4px; z-index: 10; opacity: 0; transition: opacity 0.4s; display: flex;
}
.tutorial-anim-viewport .tut-expand-icon svg {
    width: 12px; height: 12px; stroke: #fff; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
}

.tutorial-anim-viewport .tut-status-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 13px; font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,0.9);
    z-index: 10; transition: opacity 0.25s ease; animation: tut-pulse 1.4s infinite;
    white-space: nowrap; color: #fff;
}
@keyframes tut-pulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }

.tutorial-anim-viewport .tut-video-card { border: 1px solid #222; border-radius: 10px; }

.tutorial-anim-viewport .tut-play-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.6); opacity: 0; z-index: 10;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.7));
}

.tutorial-anim-viewport .tut-main-btn-container {
    position: absolute; bottom: 16px; left: 20px; right: 20px; z-index: 50;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.tutorial-anim-viewport .tut-btn-generar {
    width: 100%; padding: 13px; border-radius: 10px; border: none;
    background: #222; color: #666; font-size: 11px; font-weight: 700;
    letter-spacing: 0.8px; display: flex; justify-content: center;
    align-items: center; gap: 6px; transition: all 0.35s ease;
}
.tutorial-anim-viewport .tut-btn-generar.active {
    background: linear-gradient(135deg, #c3dafe 0%, #fbcfe8 100%);
    color: #000; box-shadow: 0 8px 20px rgba(251, 207, 232, 0.2);
}

.tutorial-anim-viewport .tut-mock-cursor {
    position: absolute; width: 22px; height: 22px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white" stroke="%23000" stroke-width="1.5"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/></svg>');
    background-size: contain; background-repeat: no-repeat;
    top: 90%; left: 120%; opacity: 0; z-index: 100;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); pointer-events: none;
}

/* Animation states */
.tutorial-anim-viewport.st-hide-gen .tut-status-scene { animation: none !important; opacity: 0 !important; }
.tutorial-anim-viewport.st-show-scene .tut-img-jeans { opacity: 0; }
.tutorial-anim-viewport.st-show-scene .tut-img-model { opacity: 1; }
.tutorial-anim-viewport.st-show-scene .tut-check-box { opacity: 1; transform: scale(1); }
.tutorial-anim-viewport.st-show-scene .tut-outer-card-footer { opacity: 1; }
.tutorial-anim-viewport.st-show-scene .tut-expand-icon { opacity: 1; }
.tutorial-anim-viewport.st-hover-btn .tut-mock-cursor { opacity: 1; top: calc(100% - 35px); left: 50%; }
.tutorial-anim-viewport.st-click-btn .tut-btn-generar { transform: scale(0.96); }
.tutorial-anim-viewport.st-scroll .tut-scroll-track { transform: translateY(0%); }
.tutorial-anim-viewport.st-scroll .tut-main-btn-container { opacity: 0; transform: translateY(15px); pointer-events: none; }
.tutorial-anim-viewport.st-scroll .tut-mock-cursor { opacity: 0; top: 120%; }
.tutorial-anim-viewport.st-hide-vid-gen .tut-status-video { animation: none !important; opacity: 0 !important; }
.tutorial-anim-viewport.st-show-play .tut-play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }