/* ============================================================
   Multi-tenant theming — static CSS, no build.
   Lustreels: dark premium (default).
   SwerveClips: light, clean, playful.
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ---- Lustreels dark defaults ---- */
:root{
    --bg:#141414;--fg:#f2f2f2;--card:#1e1e1e;--secondary:#2a2a2a;
    --muted:#333;--muted-fg:#999;--border:#383838;--input:#222;
    --accent:#c87850;--radius:.5rem;
    --font:'Inter',system-ui,-apple-system,sans-serif;
    --header-h:56px;
    --header-total:calc(var(--header-h) + env(safe-area-inset-top,0px));
    /* Glass / translucent UI surfaces */
    --glass-bg:rgba(20,20,20,.85);
    --glass-border:rgba(56,56,56,.5);
    --overlay-bg:rgba(20,20,20,.95);
    /* Video overlays — always dark for text legibility over video in every theme */
    --video-gradient:rgba(20,20,20,.8);
    --video-gradient-card:rgba(20,20,20,.85);
    --video-ctrl-bg:rgba(20,20,20,.4);
    --video-ctrl-bg-hover:rgba(20,20,20,.6);
}

/* ---- SwerveClips light theme ---- */
.theme-swerveclips{
    --bg:#f7f5f1;--fg:#1a1a1a;--card:#ffffff;--secondary:#edeae5;
    --muted:#e0ddd8;--muted-fg:#6b6560;--border:#d0ccc7;--input:#f0ede8;
    --accent:#f26419;--radius:.625rem;
    /* Light glass surfaces */
    --glass-bg:rgba(247,245,241,.93);
    --glass-border:rgba(208,204,199,.8);
    --overlay-bg:rgba(247,245,241,.98);
    /* Video overlays stay dark over video content */
}

html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
img,video{max-width:100%;display:block}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-muted{color:var(--muted-fg);font-size:.875rem}

/* Buttons */
.btn-primary{display:block;width:100%;height:3rem;background:var(--fg);color:var(--bg);font-size:.875rem;font-weight:500;letter-spacing:.025em;border-radius:var(--radius);transition:opacity .2s}
.btn-primary:hover{opacity:.9}
.btn-ghost{display:block;width:100%;height:2.5rem;color:var(--muted-fg);font-size:.875rem;border-radius:var(--radius);transition:color .2s}
.btn-ghost:hover{color:var(--fg)}
.btn-icon{display:flex;align-items:center;justify-content:center;padding:.5rem;color:var(--muted-fg);transition:color .2s}
.btn-icon:hover{color:var(--fg)}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);padding-top:env(safe-area-inset-top,0px);transition:transform .3s ease}
.header-inner{max-width:32rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 1rem}
.logo-link{display:flex;align-items:baseline;gap:2px}
.logo-img{height:28px;width:auto}
.logo-name{font-size:1.125rem;font-weight:300;letter-spacing:.15em;color:var(--fg)}
.logo-suffix{font-size:.625rem;letter-spacing:.1em;color:var(--muted-fg)}

/* Age Gate */
.age-gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.age-gate-box{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:1.5rem;text-align:center;max-width:28rem}
.age-gate-logo{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.logo-name-lg{font-size:1.875rem;font-weight:300;letter-spacing:.3em;color:var(--fg)}
.logo-suffix-sm{font-size:.75rem;letter-spacing:.2em;color:var(--muted-fg)}
.age-gate-divider{width:4rem;height:1px;background:var(--border)}
.age-gate-text{display:flex;flex-direction:column;gap:1rem}
.age-gate-title{font-size:1.25rem;font-weight:300;color:var(--fg)}
.age-gate-body{font-size:.875rem;color:var(--muted-fg);line-height:1.6}
.age-gate-actions{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:20rem}
.age-gate-footer-text{font-size:.75rem;color:rgba(153,153,153,.6);max-width:20rem;line-height:1.6}

/* Page */
.page-main{min-height:100vh;min-height:100dvh;background:var(--bg)}

/* Search page: compensa header fixed (no hay hero como en Home). */
.page-main--search{padding-top:calc(var(--header-total) + 1rem);padding-left:1rem;padding-right:1rem}
.search-results-header{max-width:32rem;margin:0 auto 1rem;padding:0 .25rem}
.search-results-title{font-size:1.25rem;font-weight:600;margin:0;color:var(--fg)}
.search-results-msg{max-width:32rem;margin:1rem auto;padding:0 .25rem;color:var(--muted,#999)}

/* Hero */
.home-hero{min-height:60vh;min-height:60dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--header-h) + 1rem) 1.5rem 2rem}
.hero-content{display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:28rem;width:100%}
.hero-logo{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.hero-logo-name{font-size:2.25rem;font-weight:300;letter-spacing:.2em;color:var(--fg)}
.hero-logo-suffix{font-size:.875rem;letter-spacing:.15em;color:var(--muted-fg)}
.hero-logo-img-wrap{margin:0;line-height:0;padding:.75rem 0}
.hero-logo-img,.age-gate-logo-img{height:4.8rem;width:auto;max-width:100%;display:block}
.hero-tagline{color:var(--muted-fg);text-align:center;font-size:.875rem;letter-spacing:.05em}
.hero-search-btn{width:100%;max-width:24rem;display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--secondary);border:1px solid var(--glass-border);border-radius:9999px;color:var(--muted-fg);font-size:.875rem;transition:background .2s,border-color .2s}
.hero-search-btn:hover{background:var(--muted);border-color:var(--border)}
.hero-explore-btn{margin-top:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted-fg);transition:color .2s}
.hero-explore-btn:hover{color:var(--fg)}
.hero-explore-btn span{font-size:.75rem;letter-spacing:.1em}
.hero-explore-btn svg{animation:bounce 1s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* Search Overlay */
.search-overlay{position:fixed;inset:0;z-index:50;background:var(--overlay-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.search-overlay-inner{max-width:32rem;margin:0 auto;height:100%;display:flex;flex-direction:column}
.search-bar{display:flex;align-items:center;gap:.75rem;padding:1rem;border-bottom:1px solid var(--glass-border)}
.search-input-wrap{flex:1;position:relative}
.search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--muted-fg);pointer-events:none}
.search-input{width:100%;height:3rem;padding:0 2.75rem 0 2.75rem;background:var(--input);border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);font-size:.875rem;font-family:var(--font);outline:none}
.search-input::placeholder{color:var(--muted-fg)}
.search-input:focus{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}
.search-input-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;color:var(--muted-fg);background:transparent;border:0;border-radius:9999px;cursor:pointer;transition:color .2s,background .2s}
.search-input-clear:hover{color:var(--fg);background:var(--secondary)}
.search-input-clear[hidden]{display:none}
.search-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1.5rem}
.search-section-title{font-size:.75rem;font-weight:500;color:var(--muted-fg);letter-spacing:.1em;margin-bottom:.75rem}
.search-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.search-tag{padding:.5rem 1rem;font-size:.875rem;background:var(--secondary);color:var(--fg);border-radius:9999px;transition:background .2s,color .2s}
.search-tag:hover{background:var(--muted)}
.hero-pills{justify-content:center;margin-top:.75rem;max-width:32rem}
.hero-pills .search-tag{text-decoration:none}

/* ============================================================
   VIDEO FEED — Two modes:
   1) .video-feed--grid   = SSR grid (visible for SEO, before Vue)
   2) .video-feed--reels  = Full-screen snap reels (Vue active)
   ============================================================ */

/* Grid mode: visible by default on home for SEO */
.video-feed--grid{
    max-width:32rem;margin:0 auto;padding:0 1rem 2rem;
    display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
}
.video-feed--grid .video-feed-item{
    height:auto;width:100%;scroll-snap-align:unset;
    border-radius:var(--radius);overflow:hidden;
    position:relative;aspect-ratio:9/16;
}
.video-feed--grid .video-card-link{display:block;width:100%;height:100%;position:relative}
.video-feed--grid .video-card-poster{position:absolute;inset:0;background:var(--card)}
.video-feed--grid .video-card-poster img{width:100%;height:100%;object-fit:cover}
.video-feed--grid .video-card-info{position:absolute;bottom:0;left:0;right:0;padding:.5rem;z-index:2}
.video-feed--grid .video-card-title{font-size:.75rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-feed--grid .video-card-category{font-size:.625rem;color:rgba(255,255,255,.65)}
.video-feed--grid .video-card-link::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,var(--video-gradient-card),transparent);pointer-events:none}
.video-feed--grid .feed-sentinel{display:none}

/* Reels mode: full-screen vertical snap scroll (Vue) */
.video-feed--reels{
    height:calc(100vh - var(--header-total));height:calc(100dvh - var(--header-total));
    margin-top:var(--header-total);overflow-y:auto;
    scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    overflow-anchor:none;
}
.video-feed--reels::-webkit-scrollbar{display:none}
/* Vue mounts div.video-feed-inner inside the outer scroll container.
   No extra styles needed: items inherit height/snap from the outer selectors. */
.video-feed-inner{display:contents}
.video-feed--reels .video-feed-item{
    height:calc(100vh - var(--header-total));height:calc(100dvh - var(--header-total));
    width:100%;scroll-snap-align:start;position:relative;overflow:hidden;
}
/* Ad slot sin fill (served:false / enabled:false / HTTP!=200 / error): colapsar
   el item entero — sin fondo negro ni altura reservada, fuera del scroll-snap. */
.video-feed--reels .video-feed-item--ad-empty{display:none}

/* Video page: always reels mode from server.
   Use direct child (>) so the selector does NOT match the nested Vue-rendered div,
   which also has class .video-feed and would otherwise inherit margin-top via the
   high-specificity ID selector, defeating the nested override above. */
#video-page > .video-feed{
    height:calc(100vh - var(--header-total));height:calc(100dvh - var(--header-total));
    margin-top:var(--header-total);overflow-y:auto;
    scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
    overflow-anchor:none;
}
#video-page .video-feed-item{
    height:calc(100vh - var(--header-total));height:calc(100dvh - var(--header-total));
    width:100%;scroll-snap-align:start;position:relative;overflow:hidden;
}
/* Desktop: columna centrada estilo mobile (YouTube Shorts) */
@media(min-width:640px){
    .video-feed--reels,
    #video-page > .video-feed{display:flex;flex-direction:column;align-items:center}
    .video-feed--reels .video-feed-item{width:calc((100vh - var(--header-total)) * 9 / 16);width:calc((100dvh - var(--header-total)) * 9 / 16);flex-shrink:0;border-radius:.75rem}
    #video-page .video-feed-item{width:calc((100vh - var(--header-total)) * 9 / 16);width:calc((100dvh - var(--header-total)) * 9 / 16);flex-shrink:0;border-radius:.75rem}
    /* SwerveClips: fondo oscuro detrás de la columna en desktop, header sigue claro */
    .theme-swerveclips .video-feed--reels,
    .theme-swerveclips #video-page > .video-feed{background:#1a1a1a}
}
#video-page .video-card-link{display:block;width:100%;height:100%;position:relative}
#video-page .video-card-poster{position:absolute;inset:0;background:var(--bg)}
#video-page .video-card-poster img{width:100%;height:100%;object-fit:cover}
#video-page .video-card-info{position:absolute;bottom:4rem;left:0;right:0;padding:0 1rem;z-index:2}
#video-page .video-card-title{font-size:1rem;font-weight:500;color:#fff;margin-bottom:.25rem}
#video-page .video-card-category{font-size:.875rem;color:rgba(255,255,255,.65)}
#video-page .video-card-link::after{content:'';position:absolute;bottom:0;left:0;right:0;height:10rem;background:linear-gradient(to top,var(--video-gradient),transparent);pointer-events:none}

/* Video Player (Vue) */
.video-player{position:relative;width:100%;height:100%;background:#000;cursor:pointer;overflow:hidden;user-select:none;-webkit-user-select:none}
.video-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-player.is-horizontal video{object-fit:contain}
.video-player-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.spinner{width:2rem;height:2rem;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes video-indicator-in{0%{opacity:0;transform:scale(.5)}12%{opacity:1;transform:scale(1.15)}18%{opacity:1;transform:scale(1)}76%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.75)}}
.video-indicator{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:4}
.video-indicator-icon{width:5rem;height:5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;animation:video-indicator-in 1.8s ease forwards}
.video-gradient-bottom{position:absolute;bottom:0;left:0;right:0;height:10rem;background:linear-gradient(to top,var(--video-gradient),transparent);pointer-events:none}
.video-info{position:absolute;bottom:calc(4rem + env(safe-area-inset-bottom,0px));left:0;right:4rem;padding:0 1rem;pointer-events:none;z-index:2}
.video-info-title{font-size:1rem;font-weight:500;color:#fff;margin-bottom:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-info-category{font-size:.875rem;color:rgba(255,255,255,.65)}
.video-controls{position:absolute;bottom:calc(4rem + env(safe-area-inset-bottom,0px));right:1rem;display:flex;flex-direction:column;gap:1rem;z-index:5}
.video-control-btn{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--video-ctrl-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;transition:background .2s}
.video-control-btn:hover{background:var(--video-ctrl-bg-hover)}
.video-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.2);z-index:3;cursor:pointer;touch-action:none;transition:height .15s ease}
.video-progress.is-scrubbing{height:9px}
.video-progress::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5rem}
.video-progress-bar{height:100%;background:#fff;pointer-events:none}
.video-progress-preview{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.35);pointer-events:none}
.video-progress-thumb{position:absolute;top:0;width:12px;height:8px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%);transform:translate(-50%,-100%);opacity:0;pointer-events:none;transition:opacity .15s ease}
.video-progress-thumb::before{content:'';position:absolute;top:-3px;left:-3px;width:18px;height:14px;background:rgba(255,255,255,.4);clip-path:polygon(0 0,100% 0,50% 100%);opacity:0;transition:opacity .2s ease}
@media(hover:hover){.video-progress:hover{height:9px}.video-progress:hover .video-progress-thumb,.video-progress.is-scrubbing .video-progress-thumb{opacity:1}.video-progress:hover .video-progress-thumb::before,.video-progress.is-scrubbing .video-progress-thumb::before{opacity:1}}

/* Fullscreen-only overlay — mobile landscape feed */
.feed-fullscreen-overlay{display:none;position:fixed;inset:0;z-index:45;background:#000;align-items:center;justify-content:center;color:#fff;text-align:center}
.feed-landscape-active .feed-fullscreen-overlay{display:flex}
.feed-landscape-active .site-header{transform:translateY(-100%);pointer-events:none}
.feed-landscape-active .video-feed--reels,
.feed-landscape-active #video-page > .video-feed{pointer-events:none}
.feed-fullscreen-overlay-inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:2rem}
.feed-fullscreen-overlay-text{font-size:1rem;font-weight:400;color:rgba(255,255,255,.65);letter-spacing:.04em}
.feed-fullscreen-overlay-btn{padding:.875rem 2.5rem;font-size:1rem;font-weight:600;background:#fff;color:#000;border:none;border-radius:2rem;cursor:pointer;transition:opacity .2s}
.feed-fullscreen-overlay-btn:hover{opacity:.85}

/* Ad Slot
   Shared base for two use-cases:
   - Sponsored ad card (ad-slot component): media fills the slot, overlays for badge/CTA/mute.
   - "Video unavailable" fallback inside video-player: centered .ad-slot-content block.
   Background is #000 to match the video aesthetic; flex-centering only matters for the
   fallback because the ad creative children are absolutely positioned. */
.ad-slot{position:relative;width:100%;height:100%;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ad-slot-content{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;padding:1.5rem}
.ad-slot-icon{width:3rem;height:3rem;border-radius:.5rem;background:var(--muted);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:500;color:var(--muted-fg)}
.ad-slot-text{font-size:.875rem;color:var(--muted-fg)}
.ad-slot-subtext{font-size:.75rem;color:rgba(255,255,255,.6)}
.ad-slot-border{position:absolute;inset:0;border:1px solid var(--glass-border);pointer-events:none}
.ad-slot-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1}
/* Ad video: ver completo sin crop. Solo el video del Ad (.ad-slot-media--contain);
   el fondo negro del contenedor provee barras (horizontal: arriba/abajo). */
.ad-slot-media--contain{object-fit:contain}
.ad-slot-gradient-bottom{position:absolute;left:0;right:0;bottom:0;height:10rem;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);pointer-events:none;z-index:2}
.ad-slot-badge{position:absolute;top:.75rem;left:.75rem;z-index:4;padding:.25rem .5rem;border-radius:.25rem;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.ad-slot-badge--small{font-size:.625rem;padding:.1875rem .4375rem;letter-spacing:.05em}
.ad-slot-controls{position:absolute;top:.75rem;right:.75rem;z-index:5;display:flex;flex-direction:column;gap:.5rem}
.ad-slot-control-btn{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--video-ctrl-bg,rgba(0,0,0,.45));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;border:0;padding:0;cursor:pointer;transition:background .2s}
.ad-slot-control-btn:hover{background:var(--video-ctrl-bg-hover,rgba(0,0,0,.65))}
.ad-slot-control-btn svg{width:1.25rem;height:1.25rem;display:block}
.ad-slot-cta{position:absolute;left:50%;bottom:calc(4rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;padding:.625rem 1.25rem;border-radius:2rem;background:#fff;color:#000;border:0;font-size:.875rem;font-weight:600;letter-spacing:.01em;cursor:pointer;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.4);transition:opacity .2s,transform .15s}
.ad-slot-cta:hover{opacity:.92}
.ad-slot-cta:active{transform:translateX(-50%) scale(.97)}
/* Stripchat "live" CTA variant: dark translucent pill, green accent + pulsing
   LED, play glyph + "Watch Live". Reuses .ad-slot-cta positioning. Cosmetic
   only — same @click.stop="onCtaClick" (no tracking/click_url change). */
.ad-slot-cta--live{display:inline-flex;align-items:center;gap:.5rem;padding:.4375rem .75rem;background:rgba(0,0,0,.62);color:#fff;border:1px solid rgba(34,197,94,.9);box-shadow:0 2px 14px rgba(0,0,0,.45),0 0 12px rgba(34,197,94,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ad-slot-cta--live:hover{opacity:1;box-shadow:0 2px 14px rgba(0,0,0,.5),0 0 18px rgba(34,197,94,.55)}
.ad-slot-live{display:inline-flex;align-items:center;gap:.375rem;font-size:.625rem;font-weight:700;letter-spacing:.08em;color:#22c55e;text-transform:uppercase}
.ad-slot-live-dot{width:.5rem;height:.5rem;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:adLivePulse 1.6s ease-out infinite}
.ad-slot-cta-main{display:inline-flex;align-items:center;gap:.375rem;padding-left:.5rem;border-left:1px solid rgba(255,255,255,.2);font-size:.875rem;font-weight:600}
.ad-slot-cta-play{display:inline-flex;align-items:center}
.ad-slot-cta-play svg{width:1.05rem;height:1.05rem;display:block}
@keyframes adLivePulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 .5rem rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (prefers-reduced-motion:reduce){.ad-slot-live-dot{animation:none}}
.ad-slot-provider{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:#0a0a0a;text-align:center}
.ad-slot--empty{background:#000}
/* Loading placeholder — cubre el slot mientras el creative no pintó frame */
.ad-slot-loading{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.875rem;background:#000;padding:1.5rem;text-align:center}
.ad-slot-loading-spinner{width:2rem;height:2rem;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.ad-slot-loading-text{font-size:.875rem;color:rgba(255,255,255,.7);letter-spacing:.01em}

/* Legal */
.legal-page{max-width:32rem;margin:0 auto;padding:3rem 1.5rem}
.back-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--muted-fg);margin-bottom:2rem;transition:color .2s}
.back-link:hover{color:var(--fg)}
.legal-title{font-size:1.5rem;font-weight:300;letter-spacing:.025em;color:var(--fg);margin-bottom:2rem}
.legal-content{font-size:.875rem;line-height:1.7;color:var(--muted-fg)}
.legal-content h2{font-size:1.125rem;font-weight:500;color:var(--fg);margin-top:2rem;margin-bottom:1rem}
.legal-content p{margin-bottom:1rem}
.legal-content ul{list-style:disc;padding-left:1.25rem;margin:1rem 0}
.legal-content ol{list-style:decimal;padding-left:1.5rem;margin:1rem 0}
.legal-content ul li,.legal-content ol li{margin-bottom:.5rem}
.legal-content a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.legal-content a:hover{opacity:.8}

/* Footer */
.site-footer{padding:2rem 1rem;border-top:1px solid var(--glass-border);background:var(--bg)}
.footer-inner{max-width:32rem;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1rem}
.footer-links{display:flex;align-items:center;gap:1.5rem}
.footer-links a{font-size:.75rem;color:var(--muted-fg);transition:color .2s}
.footer-links a:hover{color:var(--fg)}
.footer-copy{font-size:.75rem;color:var(--muted-fg);opacity:.6}

.feed-sentinel{height:1px}

/* iOS: evita que el body scrollee en la página de video */
body.page-video{overflow:hidden}

@media(min-width:640px){
    .hero-logo-name{font-size:2.75rem}
    .hero-logo-img,.age-gate-logo-img{height:6rem}
}

/* ============================================================
   SwerveClips — identity overrides
   Aplica solo cuando <html> tiene class="theme-swerveclips".
   No afecta a Lustreels ni a otros tenants.
   ============================================================ */

/* Header: borde más suave, sombra fina */
.theme-swerveclips .site-header{
    box-shadow:0 1px 8px rgba(0,0,0,.06);
}

/* Logo: bold + tight tracking (energético, no luxury) */
.theme-swerveclips .logo-name{
    font-weight:800;letter-spacing:-.02em;font-size:1.2rem;
}
.theme-swerveclips .logo-suffix{
    font-size:.7rem;letter-spacing:.04em;color:var(--accent);font-weight:600;
}

/* Hero: search-first, más respirable */
.theme-swerveclips .home-hero{
    min-height:55vh;min-height:55dvh;
    gap:0;
    padding-top:calc(var(--header-h) + 2.5rem);
    padding-bottom:3rem;
}
.theme-swerveclips .hero-content{gap:1.5rem}
.theme-swerveclips .hero-logo{gap:.125rem;margin-bottom:.25rem}
.theme-swerveclips .hero-logo-name{
    font-weight:800;letter-spacing:-.03em;font-size:2.75rem;color:var(--fg);
}
.theme-swerveclips .hero-logo-suffix{
    font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--accent);
}
.theme-swerveclips .hero-tagline{
    font-size:.9rem;letter-spacing:.03em;font-weight:400;
    color:var(--muted-fg);
}
/* Search bar: blanca, sombra, se siente como CTA principal */
.theme-swerveclips .hero-search-btn{
    background:var(--card);
    border:1.5px solid var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
    color:var(--muted-fg);
    padding:1rem 1.25rem;
    font-size:.9rem;
    transition:border-color .15s,box-shadow .15s;
}
.theme-swerveclips .hero-search-btn:hover{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(242,100,25,.1),0 2px 8px rgba(0,0,0,.07);
    background:var(--card);
    color:var(--fg);
}
/* Explore btn: más tenue, accent color en hover */
.theme-swerveclips .hero-explore-btn:hover{color:var(--accent)}

/* Search overlay: fondo claro, inputs with shadow */
.theme-swerveclips .search-input{
    background:var(--card);
    border:1.5px solid var(--border);
    box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.theme-swerveclips .search-input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(242,100,25,.1);
}
.theme-swerveclips .search-tag{
    border:1px solid var(--border);
    background:var(--card);
}
.theme-swerveclips .search-tag:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(242,100,25,.05);
}

/* Grid cards: sombra suave, sin peso visual oscuro */
.theme-swerveclips .video-feed--grid .video-feed-item{
    box-shadow:0 2px 8px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
}
.theme-swerveclips .video-feed--grid .video-card-poster{
    background:var(--secondary);
}

/* btn-primary con accent naranja */
.theme-swerveclips .btn-primary{
    background:var(--accent);color:#fff;
}
.theme-swerveclips .btn-primary:hover{opacity:.88}

/* Accent focus ring */
.theme-swerveclips .btn-icon:hover{color:var(--accent)}

@media(min-width:640px){
    .theme-swerveclips .hero-logo-name{font-size:3.5rem}
}

/* ============================================================
   Fase 4 — Actions menu, Report modal, DMCA modal
   ============================================================ */

/* Actions menu (bottom sheet) */
.actions-menu-overlay{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;padding:1rem;overscroll-behavior:contain}
.actions-menu{width:100%;max-width:32rem;background:var(--card,#1a1a1a);color:var(--fg,#fff);border-radius:var(--radius,12px);overflow:hidden;box-shadow:0 -4px 24px rgba(0,0,0,.4)}
.actions-menu-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:1rem 1.25rem;background:transparent;border:0;border-bottom:1px solid var(--glass-border,rgba(255,255,255,.08));color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.actions-menu-item:last-child{border-bottom:0}
.actions-menu-item:hover{background:var(--muted,rgba(255,255,255,.06))}
.actions-menu-icon{display:inline-flex;width:1.25rem;height:1.25rem;flex:none;align-items:center;justify-content:center;color:var(--muted-fg,#9aa)}
.actions-menu-label{flex:1;font-size:.95rem}
.actions-menu-cancel{justify-content:center;font-weight:500;color:var(--muted-fg,#9aa)}

/* Modal overlay + card (shared by report + dmca) */
.modal-overlay{position:fixed;inset:0;z-index:1200;background:var(--overlay-bg,rgba(0,0,0,.7));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem;overscroll-behavior:contain}
.modal-card{position:relative;width:100%;max-width:32rem;max-height:calc(100vh - 2rem);overflow-y:auto;background:var(--card,#1a1a1a);color:var(--fg,#fff);border-radius:var(--radius,12px);padding:1.5rem;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.modal-close-btn{position:absolute;top:.75rem;right:.75rem;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;color:var(--muted-fg,#9aa);cursor:pointer;transition:background .15s,color .15s}
.modal-close-btn:hover{background:var(--muted,rgba(255,255,255,.08));color:var(--fg,#fff)}
.modal-title{margin:0 2rem .5rem 0;font-size:1.125rem;font-weight:600}
.modal-subtitle{margin:0 0 1rem;font-size:.85rem;color:var(--muted-fg,#9aa)}
.modal-text{margin:.5rem 0;font-size:.9rem;line-height:1.4}
.modal-list{margin:.5rem 0 1rem;padding-left:1.25rem;font-size:.85rem;line-height:1.5;color:var(--fg,#fff)}
.modal-list li{margin-bottom:.25rem}
.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.modal-btn{padding:.5rem 1rem;border-radius:var(--radius,8px);border:0;font:inherit;font-weight:500;cursor:pointer;transition:opacity .15s,background .15s}
.modal-btn:disabled{opacity:.5;cursor:not-allowed}
.modal-btn-secondary{background:transparent;color:var(--muted-fg,#9aa);border:1px solid var(--glass-border,rgba(255,255,255,.15))}
.modal-btn-secondary:hover:not(:disabled){background:var(--muted,rgba(255,255,255,.06));color:var(--fg,#fff)}
.modal-btn-primary{background:var(--accent,#e11);color:#fff}
.modal-btn-primary:hover:not(:disabled){opacity:.88}

/* Report form */
.report-radio-list{display:flex;flex-direction:column;gap:.25rem;margin:.5rem 0 1rem;max-height:40vh;overflow-y:auto}
.report-radio{display:flex;align-items:center;gap:.625rem;padding:.5rem .25rem;font-size:.9rem;cursor:pointer;border-radius:var(--radius,6px);transition:background .15s}
.report-radio:hover{background:var(--muted,rgba(255,255,255,.04))}
.report-radio input[type=radio]{flex:none;accent-color:var(--accent,#e11)}
.report-textarea{width:100%;padding:.625rem .75rem;background:var(--input,rgba(255,255,255,.05));border:1px solid var(--border,rgba(255,255,255,.15));border-radius:var(--radius,8px);color:var(--fg,#fff);font:inherit;font-size:.9rem;resize:vertical;min-height:4.5rem;outline:none;box-sizing:border-box}
.report-textarea:focus{border-color:var(--accent,#e11);box-shadow:0 0 0 2px var(--accent,#e11)}
.report-textarea::placeholder{color:var(--muted-fg,#9aa)}

/* DMCA link */
.dmca-link{color:var(--accent,#e11);text-decoration:underline;word-break:break-all}
.dmca-link:hover{opacity:.85}

/* Turnstile slot + inline verification error (Fase 5) */
.turnstile-slot{margin:.75rem 0 .25rem;display:flex;justify-content:center;min-height:65px}
.report-inline-error{margin:.5rem 0 0;font-size:.85rem;line-height:1.35;color:#ef4444;text-align:center}

/* Global toast (Fase 4): default 3s visible, slide-up + fade in (ease-out),
   slide-down + fade out (ease-in). Lives above modals (z-index 99999). */
.app-toast{
    position:fixed;left:50%;
    bottom:calc(24px + env(safe-area-inset-bottom,0px));
    transform:translate(-50%,28px);
    background:rgba(0,0,0,.88);color:#fff;
    padding:12px 20px;border-radius:10px;
    font-size:14px;line-height:1.35;
    font-family:var(--font,system-ui,-apple-system,sans-serif);
    max-width:calc(100vw - 32px);text-align:center;
    z-index:99999;pointer-events:none;
    opacity:0;
    transition:opacity .22s ease-in,transform .22s cubic-bezier(.4,0,1,1);
    will-change:opacity,transform;
}
.app-toast--visible{
    opacity:1;
    transform:translate(-50%,0);
    transition:opacity .3s ease-out,transform .32s cubic-bezier(.16,1,.3,1);
}
.app-toast--exit{
    opacity:0;
    transform:translate(-50%,28px);
    transition:opacity .22s ease-in,transform .24s cubic-bezier(.4,0,1,1);
}

/* ============================================================
   Home: refresh por categoría — botón flotante sobre cada card.
   El article ya tiene position:relative + overflow:hidden via
   .video-feed--grid .video-feed-item (linea ~129). El botón es
   sibling del <a class="video-card-link">, no descendiente, para
   mantener HTML válido.
   ============================================================ */
.category-refresh-btn{
    position:absolute;top:.5rem;right:.5rem;z-index:3;
    width:2rem;height:2rem;border:0;border-radius:50%;
    background:rgba(0,0,0,.55);color:#fff;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .15s ease,transform .15s ease,opacity .15s ease;
}
.category-refresh-btn:hover,
.category-refresh-btn:focus-visible{background:rgba(0,0,0,.8)}
.category-refresh-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.category-refresh-btn:active{transform:scale(.92)}
.category-refresh-btn[disabled]{cursor:progress;opacity:.85}
.category-refresh-btn svg{display:block;width:1rem;height:1rem}

/* Spinner del icono mientras carga. Usamos animación sobre el SVG, no sobre
   el botón, para no interferir con :active scale. */
.category-card.is-refreshing .category-refresh-btn svg{
    animation:cat-refresh-spin .8s linear infinite;
}
@keyframes cat-refresh-spin{to{transform:rotate(360deg)}}

/* Fade del poster mientras se hace el swap. El <a> wrap no se toca para no
   afectar accesibilidad. .is-swapping vive ~150ms, lo justo para el fade-out
   antes de cambiar src y volver a opacity 1. */
.category-card .video-card-poster img{transition:opacity .15s ease}
.category-card.is-swapping .video-card-poster img{opacity:.25}

/* Mobile: target táctil más amplio y mejor visibilidad sobre pósters claros. */
@media(max-width:640px){
    .category-refresh-btn{width:2.25rem;height:2.25rem;top:.4rem;right:.4rem}
    .category-refresh-btn svg{width:1.125rem;height:1.125rem}
}

/* Reduced motion: cancelar spinner y fade. */
@media(prefers-reduced-motion:reduce){
    .category-refresh-btn,
    .category-card .video-card-poster img{transition:none}
    .category-card.is-refreshing .category-refresh-btn svg{animation:none}
}

/* ============================================================
   Tenant main-logo (assets/img/<tenant>/main-logo.png)
   Modificador opcional aplicado por home-hero.php / age-gate.php
   cuando el tenant aporta su PNG de marca (con tagline embebido).
   La regla base .hero-logo-img / .age-gate-logo-img sigue siendo
   el fallback para logo.svg / logo_url.
   ============================================================ */
.hero-logo--main .hero-logo-img,
.age-gate-logo--main .age-gate-logo-img{
    height:auto;
    width:auto;
    max-width:min(420px,80vw);
    max-height:11rem;
}
@media(min-width:640px){
    .hero-logo--main .hero-logo-img,
    .age-gate-logo--main .age-gate-logo-img{
        max-width:min(520px,60vw);
        max-height:14rem;
    }
}