/* Layout: colección híbrida. Portada dividida Películas | Fotos como sala de cine, cuadrícula justificada por sección, y un Estudio sobrio para armar cada entrega. */
:root{
  /* Estudio: sigue el tema del visor */
  --s-bg:#f3f2ef; --s-surface:#ffffff; --s-sunken:#ebe9e4; --s-fg:#1d1b18; --s-muted:#6b655c; --s-line:#e1ddd6;
  --s-accent:#8a6c42; --s-accent-fg:#ffffff; --s-accent-ink:#7a5d36; --s-danger:#a8402c; --s-ok:#3b7350;
  --s-shadow:0 1px 2px rgba(29,27,24,.05),0 10px 30px rgba(29,27,24,.07);
  /* Galería: valores base; cada colección los redefine con su tema */
  --bg:#f5f3ef; --surface:#ffffff; --fg:#1d1b18; --muted:#776f66; --line:#e4dfd7; --veil:rgba(245,243,239,.8);
  --accent:#8a6c42; --accent-fg:#ffffff; --accent-ink:#7a5d36; --accent-soft:#d6c7ad; --panel:#2a231c;
  --f-display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --d-weight:500; --d-tr:0em; --d-case:none; --d-scale:1;
  --f-note:'Cormorant Garamond',Georgia,serif; --note-style:italic; --note-weight:400; --note-scale:1;
  --f-ui:'Jost',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --night:#0f0e0d; --gut:16px; --band:var(--s-surface);
}
@media (min-width:900px){ :root{ --gut:28px } }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --s-bg:#131211; --s-surface:#1c1b19; --s-sunken:#25231f; --s-fg:#eeeae3; --s-muted:#a39c91; --s-line:#312e2a; --s-accent:#c4a576; --s-accent-fg:#1a1714; --s-accent-ink:#d3b98f; --s-danger:#e3876f; --s-ok:#86bb95; --s-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.3); color-scheme:dark }
}
:root[data-theme="dark"]{ --s-bg:#131211; --s-surface:#1c1b19; --s-sunken:#25231f; --s-fg:#eeeae3; --s-muted:#a39c91; --s-line:#312e2a; --s-accent:#c4a576; --s-accent-fg:#1a1714; --s-accent-ink:#d3b98f; --s-danger:#e3876f; --s-ok:#86bb95; --s-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.3); color-scheme:dark }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ background:var(--page-bg, var(--s-bg)); color:var(--s-fg); font:400 15px/1.5 var(--f-ui); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--band) }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; -webkit-tap-highlight-color:transparent }
button:disabled{ cursor:default; opacity:.35 }
img,video{ display:block; max-width:100% }
svg{ flex:none }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--s-accent); outline-offset:2px }
.sp{ flex:1 1 auto }
.amp{ font-style:italic; font-weight:400; padding:0 .04em }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important } }

/* ===================== GALERÍA ===================== */
.g{ container:g / inline-size; position:relative; min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; background:var(--bg); color:var(--fg); overflow-x:clip }
.g .muted, .mo.is-g .muted{ color:var(--muted); margin:0 }
.g :focus-visible, .mo.is-g :focus-visible, .lb :focus-visible{ outline-color:var(--accent) }

.draft{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; padding:9px var(--gut); background:var(--accent); color:var(--accent-fg); font:500 13px/1.3 var(--f-ui); text-align:center }
.draft button{ text-decoration:underline; text-underline-offset:3px }

/* Portada */
.cv{ position:relative; flex:none; height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); min-height:540px; overflow:hidden; background:var(--night); color:#fff; isolation:isolate }
.is-preview .cv{ height:100%; min-height:0 }
.cv :focus-visible{ outline-color:#fff }
.cv-top{ position:absolute; z-index:5; top:0; left:0; right:0; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"brand title acts"; align-items:start; gap:16px; padding-top:20px; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)); pointer-events:none }
.cv-top > *{ pointer-events:auto }
.cv-top > .brand{ grid-area:brand }
.cv-title{ grid-area:title; text-align:center; padding-top:4px }
.cv-acts{ grid-area:acts; justify-self:end; display:flex; gap:8px }
.cv-t{ margin:0; font-family:var(--f-display); font-weight:var(--d-weight); letter-spacing:var(--d-tr); text-transform:var(--d-case); line-height:1.02; font-size:calc(clamp(44px, 6.2cqi, 90px) * var(--d-scale)); text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,.28) }
.cv-sub{ margin:12px 0 0; font:400 12.5px/1.4 var(--f-ui); letter-spacing:.26em; text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,.35) }

.cv-split{ position:absolute; inset:0; display:flex }
.cv-half{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; display:block; color:#fff; text-align:center; transition:flex-grow .8s cubic-bezier(.2,.7,.2,1) }
.cv-half > img, .cv-half > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.7,.2,1) }
.cv-half::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(12,11,10,.58) 0%, rgba(12,11,10,.14) 30%, rgba(12,11,10,.1) 52%, rgba(12,11,10,.62) 100%) }
.cv-photos::after{ background:linear-gradient(180deg, rgba(12,11,10,.52) 0%, rgba(255,255,255,.07) 34%, rgba(255,255,255,.05) 54%, rgba(12,11,10,.58) 100%) }
.cv-photos::before{ content:""; position:absolute; z-index:3; left:0; top:0; bottom:0; width:1px; background:rgba(255,255,255,.5) }
.cv-label{ position:absolute; z-index:2; left:0; right:0; bottom:15%; display:grid; justify-items:center; gap:22px; padding:0 16px }
.cv-h{ font-family:var(--f-display); font-weight:var(--d-weight); letter-spacing:var(--d-tr); text-transform:var(--d-case); font-size:calc(clamp(38px, 4.4cqi, 64px) * var(--d-scale)); line-height:1; text-shadow:0 2px 24px rgba(0,0,0,.3) }
.ghost{ display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.78); padding:13px 26px; font:500 11.5px/1 var(--f-ui); letter-spacing:.22em; text-transform:uppercase; color:#fff; transition:background .35s, color .35s, border-color .35s }
.ghost svg{ width:13px; height:13px }
@media (hover:hover){
  .cv-split:hover .cv-half{ flex-grow:.86 }
  .cv-split .cv-half:hover{ flex-grow:1.14 }
  .cv-half:hover > img, .cv-half:hover > video{ transform:scale(1.035) }
  .cv-half:hover .ghost, .ghost:hover{ background:#fff; color:#161412; border-color:#fff }
}
.cv-full > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kb 16s ease-out both }
@keyframes kb{ from{ transform:scale(1.07) } to{ transform:scale(1) } }
.cv-shade{ position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at center, rgba(12,11,10,.22), rgba(12,11,10,.55)), linear-gradient(180deg, rgba(12,11,10,.4), transparent 28%, transparent 70%, rgba(12,11,10,.5)) }
.cv-center{ position:absolute; inset:0; z-index:2; display:grid; place-content:center; justify-items:center; text-align:center; gap:16px; padding:0 var(--gut) }
.cv-eyebrow{ margin:0; font:400 12px/1 var(--f-ui); letter-spacing:.42em; text-transform:uppercase }
.cv-date{ margin:0; font:400 12.5px/1.2 var(--f-ui); letter-spacing:.4em }
.cv-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:14px }
.cv-foot{ position:absolute; z-index:2; left:0; right:0; bottom:26px; display:grid; justify-items:center; gap:10px; font:400 10.5px/1 var(--f-ui); letter-spacing:.3em; text-transform:uppercase }
.cv-ed{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
.cv-panel{ position:relative; z-index:2; background:var(--panel); display:grid; grid-template-rows:auto 1fr auto; gap:16px; padding-block:20px 24px; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:var(--gut) }
.cv-panel-mid{ align-self:center; display:grid; gap:18px; justify-items:start; max-width:480px; padding-left:clamp(0px, 3cqi, 52px) }
.cv-panel-mid .cv-t{ text-shadow:none; font-size:calc(clamp(44px, 5.2cqi, 78px) * var(--d-scale)) }
.cv-panel-foot{ display:flex; gap:8px }
.cv-media{ position:relative; overflow:hidden }
.cv-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kb 16s ease-out both }
.btn-solid{ display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:var(--accent-fg); padding:14px 22px; font:500 11.5px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; transition:filter .2s }
.btn-solid:hover{ filter:brightness(1.08) }
.btn-solid svg{ width:13px; height:13px }

.brand{ display:flex; align-items:center; gap:12px; min-width:0; color:#fff }
.mono{ width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; background:#fff; color:#1a1815; font:500 17px/1 var(--f-serif); letter-spacing:.04em; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.18) }
.mono img{ width:100%; height:100%; object-fit:cover }
.mono.sm{ width:30px; height:30px; font-size:12px; box-shadow:none }
.brand-t{ display:grid; gap:3px; min-width:0; text-align:left }
.brand-t b, .brand-name{ font:500 15px/1.2 var(--f-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; justify-self:start; max-width:100% }
.brand-home{ display:block; border-radius:50% }
.brand-more{ display:inline-flex; align-items:center; gap:4px; justify-self:start; font:500 10px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft) }
.brand-more svg{ width:12px; height:12px }
.pillb{ height:38px; min-width:38px; padding:0 10px; border-radius:19px; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font:500 13px/1 var(--f-ui); transition:background .2s }
.pillb:hover{ background:rgba(255,255,255,.28) }
.pillb svg{ width:18px; height:18px }
.pillb .pl-l{ font:500 12.5px/1 var(--f-ui); letter-spacing:.04em }

/* Encabezado de contenido */
.gh{ position:relative; overflow:hidden; background:var(--night); color:#fff; flex:none }
.gh-bg{ position:absolute; inset:-60px; background-size:cover; background-position:center 35%; filter:blur(30px) saturate(.9) brightness(.6); transform:scale(1.05) }
.gh-in{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; min-height:88px; padding-block:14px; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)) }
.gh :focus-visible{ outline-color:#fff }
.gh .acts{ justify-self:end; display:flex; gap:8px }
.seg{ display:flex; gap:4px }
.seg button{ padding:10px 18px; border-radius:7px; font:500 13px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.8); transition:background .2s, color .2s }
.seg button:hover{ color:#fff }
.seg button[aria-current="page"]{ background:rgba(255,255,255,.22); color:#fff }

.gsub{ position:sticky; top:env(safe-area-inset-top,0px); z-index:20; flex:none; background:color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line) }
.gsub-in{ display:flex; align-items:center; gap:14px; min-height:64px; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)) }
.back{ flex:none; width:48px; height:36px; border-radius:18px; border:1px solid var(--line); display:grid; place-items:center; color:var(--fg); transition:background .2s }
.back:hover{ background:color-mix(in srgb, var(--fg) 6%, transparent) }
.back svg{ width:18px; height:18px }
.gsub-title{ flex:none; font-family:var(--f-display); font-weight:var(--d-weight); letter-spacing:var(--d-tr); text-transform:var(--d-case); font-size:calc(25px * var(--d-scale)); line-height:1; padding-right:16px; border-right:1px solid var(--line); white-space:nowrap }
.gsub-label{ font:500 15px var(--f-ui) }
.tabs{ display:flex; gap:2px; min-width:0; flex:1 1 auto; overflow-x:auto; scrollbar-width:none }
.tabs::-webkit-scrollbar{ display:none }
.tabs button{ position:relative; flex:none; display:inline-flex; align-items:center; gap:6px; padding:11px 12px; font:400 15px/1 var(--f-ui); color:var(--muted); white-space:nowrap; border-radius:6px }
.tabs button:hover{ color:var(--fg) }
.tabs button[aria-current="true"]{ color:var(--fg); font-weight:500 }
.tabs button[aria-current="true"]::after{ content:""; position:absolute; left:12px; right:12px; bottom:3px; height:1.5px; background:var(--accent) }
.tabs svg{ width:15px; height:15px; color:var(--accent-ink) }
.count{ flex:none; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap }
.btn-acc{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:40px; padding:0 18px; background:var(--accent); color:var(--accent-fg); font:500 12px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; border-radius:2px; text-decoration:none; transition:filter .2s }
.btn-acc:hover{ filter:brightness(1.08) }
.btn-acc svg{ width:15px; height:15px }

.gwrap{ position:relative; z-index:1; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)); padding-block:4px 72px }
.gmain{ position:relative; flex:1 0 auto; isolation:isolate }
.gwash{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none }
.gwash::before{ content:""; position:absolute; inset:-80px; background-image:var(--wash); background-size:cover; background-position:center; filter:blur(50px) saturate(.9) }
.gwash::after{ content:""; position:absolute; inset:0; background:var(--veil) }

.fgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:22px; padding-block:30px 6px }
.fcard{ position:relative; display:block; width:100%; max-width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--night); color:#fff; text-align:left; box-shadow:0 12px 34px rgba(12,11,10,.2) }
.fcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1) }
.fcard::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 42%, rgba(12,11,10,.74)) }
.fc-t{ position:absolute; z-index:2; left:16px; right:76px; bottom:14px; display:grid; gap:7px }
.fc-t b{ font:500 19px/1.2 var(--f-ui) }
.fc-t small{ display:inline-flex; align-items:center; gap:6px; font:500 10.5px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft) }
.fc-t small svg{ width:11px; height:11px }
.fc-dur{ position:absolute; z-index:2; right:14px; bottom:14px; font:500 12px/1 var(--f-ui); font-variant-numeric:tabular-nums; padding:5px 8px; border-radius:4px; background:rgba(12,11,10,.55) }
.fc-hover{ position:absolute; z-index:2; left:50%; top:45%; width:64px; height:64px; margin:-32px 0 0 -32px; display:grid; place-items:center; background:rgba(255,255,255,.9); color:#141210; border-radius:4px; opacity:0; transform:scale(.9); transition:opacity .3s, transform .3s }
.fc-hover svg{ width:24px; height:24px }
.fcard:hover img{ transform:scale(1.04) }
.fcard:hover .fc-hover, .fcard:focus-visible .fc-hover{ opacity:1; transform:none }
.fcard.is-locked{ cursor:default }
.fcard.is-locked img{ filter:grayscale(.3) brightness(.6) }
.fcard.is-locked:hover img{ transform:none }
.fc-badge{ position:absolute; z-index:2; left:14px; top:14px; display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:rgba(12,11,10,.6); color:#fff; font:500 10.5px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase }
.fc-badge svg{ width:14px; height:14px }
.fc-noposter{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.35); background:linear-gradient(135deg, var(--panel), var(--night)) }
.fc-noposter svg{ width:40px; height:40px }
.note{ max-width:640px; margin:46px auto 0; text-align:center; color:var(--fg) }
.note p{ margin:0; font-family:var(--f-note); font-style:var(--note-style); font-weight:var(--note-weight); font-size:calc(23px * var(--note-scale)); line-height:1.5; text-wrap:balance }
.note small{ display:block; margin-top:16px; font:500 11px/1 var(--f-ui); letter-spacing:.32em; text-transform:uppercase; color:var(--muted) }

.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; padding-block:30px 18px }
.sec-head h2{ margin:0; font-family:var(--f-display); font-weight:var(--d-weight); letter-spacing:var(--d-tr); text-transform:var(--d-case); font-size:calc(clamp(30px, 3.4cqi, 44px) * var(--d-scale)); line-height:1.05; text-wrap:balance }
.sec-meta{ display:flex; align-items:center; gap:18px; color:var(--muted); font-size:13.5px; font-variant-numeric:tabular-nums }
.link-btn{ display:inline-flex; align-items:center; gap:7px; padding:6px 0; color:var(--accent-ink); font:500 13.5px/1 var(--f-ui); border-bottom:1px solid transparent }
.link-btn:hover{ border-bottom-color:currentColor }
.link-btn svg{ width:16px; height:16px }
.jg{ display:flex; flex-wrap:wrap; gap:4px; width:100% }
.ph{ position:relative; flex:none; margin:0; width:260px; height:260px; overflow:hidden; background:color-mix(in srgb, var(--fg) 7%, var(--bg)) }
.ph img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1) }
.ph-open{ position:absolute; inset:0; z-index:1; cursor:zoom-in }
.ph::after{ content:""; position:absolute; z-index:1; left:0; right:0; bottom:0; height:45%; background:linear-gradient(180deg, transparent, rgba(12,11,10,.48)); opacity:0; transition:opacity .3s; pointer-events:none }
.ph-acts{ position:absolute; z-index:2; right:6px; bottom:6px; display:flex; gap:2px; opacity:0; transition:opacity .25s }
.ib{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff }
.ib svg{ width:19px; height:19px }
.ib:hover{ background:rgba(255,255,255,.2) }
.ph-fav{ position:absolute; z-index:2; left:8px; top:8px; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.45)); pointer-events:none }
.ph-fav svg{ width:18px; height:18px }
@media (hover:hover){
  .ph:hover img{ transform:scale(1.025) }
  .ph:hover::after, .ph:focus-within::after{ opacity:1 }
  .ph:hover .ph-acts, .ph:focus-within .ph-acts{ opacity:1 }
}
@media (hover:none){ .ph-acts{ display:none } }
.next-sec{ display:flex; align-items:center; gap:10px; margin:40px auto 0; padding:15px 22px; border:1px solid var(--line); border-radius:2px; color:var(--fg); font:500 12px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; transition:border-color .2s }
.next-sec:hover{ border-color:var(--fg) }
.next-sec svg{ width:16px; height:16px }
.empty{ padding:90px 16px; text-align:center; color:var(--muted) }

.gf{ flex:none; border-top:1px solid var(--line); background:var(--bg); color:var(--muted) }
.gf-in{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding-block:22px 84px; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)); font-size:13px }
.gf .mono{ background:var(--fg); color:var(--bg) }
.gf b{ color:var(--fg); font-weight:500 }

.cv-gate{ display:grid; place-items:center }
.cv-gate > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(18px) brightness(.48); transform:scale(1.1) }
.gate-card{ position:relative; z-index:2; display:grid; justify-items:center; gap:12px; width:min(420px, 100%); padding:24px var(--gut); text-align:center }
.gate-card form{ display:grid; gap:12px; width:100%; margin-top:12px }
.gate-card label{ font-size:13.5px; letter-spacing:.04em }
.pin-in{ height:58px; width:100%; text-align:center; font:500 26px/1 var(--f-ui); letter-spacing:.5em; padding:0 0 0 .5em; border-radius:4px; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#fff }
.pin-in:focus{ outline:none; border-color:#fff; background:rgba(255,255,255,.18) }
.gate-card .btn-acc{ height:48px }
.pin-err{ margin:0; color:#ffd9cf; font-size:13.5px }
.shake{ animation:shake .4s }
@keyframes shake{ 20%,60%{ transform:translateX(-6px) } 40%,80%{ transform:translateX(6px) } }

@container g (max-width: 760px){
  .cv-top{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand acts" "title title"; row-gap:20px; padding-top:14px }
  .cv-top .brand-t{ display:none }
  .cv-sub{ font-size:11.5px; letter-spacing:.16em; text-wrap:balance }
  .cv-split{ flex-direction:column }
  .cv-photos::before{ right:0; bottom:auto; width:auto; height:1px }
  .cv-label{ bottom:11%; gap:14px }
  .ghost{ padding:12px 22px }
  .cv-ed{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto }
  .cv-media{ order:-1 }
  .cv-panel{ grid-template-rows:auto auto; padding-block:24px 22px }
  .cv-panel-top{ display:none }
  .cv-panel-mid{ padding-left:0; gap:14px }
  .gh-in{ grid-template-columns:auto 1fr auto; gap:10px; min-height:66px; padding-block:10px }
  .gh .brand-t{ display:none }
  .gh .mono{ width:38px; height:38px; font-size:14px }
  .seg{ justify-self:center }
  .seg button{ padding:9px 12px; font-size:12px; letter-spacing:.12em }
  .gh .pillb{ height:34px; min-width:34px; padding:0 8px }
  .pillb .pl-l{ display:none }
  .gsub-title, .count{ display:none }
  .gsub-in{ gap:10px; min-height:58px }
  .back{ width:40px; height:34px }
  .gsub .btn-acc{ width:40px; padding:0 }
  .gsub .btn-acc span{ display:none }
  .fgrid{ gap:16px; padding-top:20px }
}

/* ===================== VISOR, REPRODUCTOR, MODALES ===================== */
.lb{ position:fixed; inset:0; z-index:80; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:var(--bg); color:var(--fg); animation:fadein .25s ease }
@keyframes fadein{ from{ opacity:0 } }
.lb-top{ display:flex; align-items:center; gap:4px; padding-top:calc(10px + env(safe-area-inset-top,0px)); padding-bottom:8px; padding-left:max(18px, env(safe-area-inset-left,0px)); padding-right:max(10px, env(safe-area-inset-right,0px)) }
.lb-count{ font:500 13px/1 var(--f-ui); letter-spacing:.08em; font-variant-numeric:tabular-nums; white-space:nowrap }
.lb-sec{ min-width:0; margin-left:12px; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lb-b{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:50%; color:var(--fg) }
.lb-b:hover{ background:color-mix(in srgb, var(--fg) 8%, transparent) }
.lb-b.on{ color:var(--accent-ink) }
.lb-b svg{ width:21px; height:21px }
.lb-stage{ position:relative; display:grid; place-items:center; min-height:0; padding:0 78px 10px; touch-action:pan-y; user-select:none; -webkit-user-select:none }
.lb-stage img{ max-width:100%; max-height:calc(100svh - 120px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); width:auto; height:auto; object-fit:contain; box-shadow:0 22px 60px rgba(12,11,10,.2); transition:opacity .3s ease; -webkit-user-drag:none }
.lb-stage img.is-out{ opacity:0 }
.lb-nav{ position:absolute; top:50%; width:58px; height:58px; margin-top:-29px; display:grid; place-items:center; border-radius:50%; color:var(--fg) }
.lb-nav svg{ width:30px; height:30px; stroke-width:1.2 }
.lb-nav:hover{ background:color-mix(in srgb, var(--fg) 7%, transparent) }
.lb-nav.prev{ left:max(10px, env(safe-area-inset-left,0px)) }
.lb-nav.next{ right:max(10px, env(safe-area-inset-right,0px)) }
.lb-bar{ height:calc(4px + env(safe-area-inset-bottom,0px)) }
.lb-progress{ height:2px; width:0; background:var(--accent) }
.lb-progress.run{ animation:prog 4s linear forwards }
@keyframes prog{ to{ width:100% } }
@media (max-width:700px){ .lb-stage{ padding:0 0 8px } .lb-nav, .lb-sec{ display:none } .lb-b{ width:40px; height:40px } }

.pl{ position:fixed; inset:0; z-index:90; display:grid; grid-template-rows:auto minmax(0,1fr); background:#000; color:#fff; animation:fadein .25s ease }
.pl :focus-visible{ outline-color:#fff }
.pl-top{ display:flex; align-items:center; gap:12px; padding-top:calc(12px + env(safe-area-inset-top,0px)); padding-bottom:12px; padding-left:max(18px, env(safe-area-inset-left,0px)); padding-right:max(12px, env(safe-area-inset-right,0px)) }
.pl-t{ display:grid; gap:3px; min-width:0 }
.pl-t b{ font:500 17px/1.2 var(--f-ui) }
.pl-t span{ font-size:12.5px; color:rgba(255,255,255,.66); letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pl-q{ font-size:12.5px; color:rgba(255,255,255,.66); font-variant-numeric:tabular-nums; white-space:nowrap }
.pl-stage{ display:grid; place-items:center; min-height:0; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)) }
.pl-stage video{ width:100%; height:100%; max-height:calc(100svh - 84px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); object-fit:contain; background:#000 }
.pl-ext{ display:grid; justify-items:center; gap:16px; padding:24px; text-align:center; color:rgba(255,255,255,.8) }
.btn-line{ flex:none; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border:1px solid rgba(255,255,255,.38); border-radius:3px; color:#fff; font:500 12.5px/1 var(--f-ui); letter-spacing:.06em; white-space:nowrap }
.btn-line:hover{ background:rgba(255,255,255,.12) }
.btn-line svg{ width:16px; height:16px }
.ib-d{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:50%; color:#fff }
.ib-d:hover{ background:rgba(255,255,255,.14) }
@media (max-width:600px){ .btn-line span{ display:none } .btn-line{ width:38px; padding:0; justify-content:center } }

.mo{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:16px; background:rgba(12,11,10,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:fadein .2s ease }
.mo-card{ width:min(540px, 100%); max-height:calc(100svh - 32px); overflow:auto; border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.35); animation:rise .28s cubic-bezier(.2,.7,.2,1) }
@keyframes rise{ from{ transform:translateY(14px); opacity:0 } }
.mo.is-g .mo-card{ background:var(--surface); color:var(--fg) }
.mo.is-s .mo-card{ background:var(--s-surface); color:var(--s-fg) }
.mo-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 14px 4px 22px }
.mo-title{ margin:0; font-family:var(--f-display); font-weight:var(--d-weight); letter-spacing:var(--d-tr); text-transform:var(--d-case); font-size:calc(30px * var(--d-scale)); line-height:1.1 }
.mo.is-s .mo-title{ font-family:var(--f-serif); font-weight:500; letter-spacing:0; text-transform:none; font-size:30px }
.mo-x{ width:40px; height:40px; display:grid; place-items:center; border-radius:50% }
.mo-x:hover{ background:color-mix(in srgb, currentColor 8%, transparent) }
.mo-x svg{ width:20px; height:20px }
.mo-body{ display:grid; gap:20px; padding:10px 22px 20px }
.mo-foot{ position:sticky; bottom:0; display:flex; align-items:center; gap:12px; padding:14px 22px calc(16px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); background:var(--surface) }
.mo.is-s .mo-foot{ border-top-color:var(--s-line); background:var(--s-surface) }
.mo h3{ margin:0 0 10px; font:500 11px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
.mo.is-s .muted{ color:var(--s-muted); margin:0 }
.mo-foot .btn-acc{ height:46px }
.pin-field{ width:100%; height:56px; text-align:center; font:500 24px/1 var(--f-ui); letter-spacing:.45em; padding:0 0 0 .45em; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg) }
.pin-field:focus{ outline:2px solid var(--accent); outline-offset:1px }
.ul-err{ margin:0; color:var(--fg); font-weight:500; font-size:14px }
.hint-demo{ margin:0; color:var(--muted); font-size:13px }
@media (max-width:600px){ .mo{ place-items:end stretch; padding:0 } .mo-card{ width:100%; border-radius:16px 16px 0 0; max-height:92svh } }
.opt-list{ display:grid; gap:8px }
.ro{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; cursor:pointer; transition:border-color .2s, background .2s }
.ro:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent) }
.ro input{ width:18px; height:18px; margin:0; accent-color:var(--accent); flex:none }
.ro .rt{ flex:1; min-width:0 }
.ro small{ color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap }
.sub-list{ display:grid; gap:2px; padding:4px 4px 4px 44px }
.ck{ display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer }
.ck input{ width:17px; height:17px; margin:0; accent-color:var(--accent) }
.ck span{ flex:1 }
.ck small{ color:var(--muted); font-variant-numeric:tabular-nums }
.dl-size{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:12px; font-size:14px }
.gseg{ display:inline-flex; gap:2px; padding:3px; border-radius:8px; background:color-mix(in srgb, var(--fg) 7%, transparent) }
.gseg button{ padding:8px 13px; border-radius:6px; font:500 13.5px/1 var(--f-ui); color:var(--muted) }
.gseg button[aria-pressed="true"]{ background:var(--surface); color:var(--fg); box-shadow:0 1px 3px rgba(12,11,10,.12) }
.dl-sum{ flex:1; min-width:0; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums }
.dl-sum b{ color:var(--fg); font-weight:500 }
.progress{ height:4px; margin-top:8px; border-radius:2px; overflow:hidden; background:color-mix(in srgb, var(--fg) 10%, transparent) }
.progress i{ display:block; height:100%; width:calc(var(--p, 0) * 100%); background:var(--accent); transition:width .2s }
.copyrow{ display:flex; gap:8px }
.copyrow input{ flex:1; min-width:0; height:46px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:400 14.5px var(--f-ui) }
.btn-g{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 16px; border:1px solid var(--line); border-radius:8px; color:var(--fg); font:500 14px/1 var(--f-ui); text-decoration:none; white-space:nowrap; transition:border-color .2s }
.btn-g:hover{ border-color:var(--fg) }
.btn-g svg{ width:18px; height:18px }
.pin-note{ margin:0; font-size:14px }
.pin-note b{ letter-spacing:.2em; font-weight:500 }
.info-links{ display:grid; gap:8px }
.info-links a, .info-links span{ display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-size:14.5px }
.info-links svg{ width:18px; height:18px; color:var(--accent-ink) }
.info-head{ display:flex; align-items:center; gap:14px }
.info-head .mono{ background:var(--fg); color:var(--bg) }
.info-head b{ display:block; font:500 17px/1.2 var(--f-ui) }

.toast{ position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:120; transform:translateX(-50%); width:max-content; max-width:min(92vw, 460px); padding:12px 18px; border-radius:10px; background:#1e1c19; color:#f4efe7; font:500 14px/1.4 var(--f-ui); box-shadow:0 12px 32px rgba(0,0,0,.3); animation:rise .25s ease }

.proto{ position:fixed; z-index:70; left:calc(12px + env(safe-area-inset-left,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:2px; padding:4px; border-radius:999px; background:rgba(22,20,18,.88); color:#f1ece4; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 10px 30px rgba(0,0,0,.28); font:500 12.5px/1 var(--f-ui) }
.proto-l{ padding:0 8px 0 12px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.62 }
.proto button{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px }
.proto button svg{ width:15px; height:15px }
.proto button[aria-pressed="true"]{ background:#f1ece4; color:#191714 }
.proto :focus-visible{ outline-color:#f1ece4 }
@media (max-width:600px){ .proto-l, .proto button span{ display:none } .proto button{ padding:8px } }

/* ===================== ESTUDIO ===================== */
.st{ min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); background:var(--s-bg); color:var(--s-fg); overflow-x:clip }
.st .muted{ color:var(--s-muted); margin:0 }
.st-bar{ position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--s-surface); border-bottom:1px solid var(--s-line) }
.st-bar-in{ max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:18px; min-height:64px; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)) }
.st-logo{ display:flex; align-items:center; gap:10px; text-align:left }
.st-logo .mono, .st-mono{ width:36px; height:36px; font-size:13.5px; background:var(--s-fg); color:var(--s-bg); box-shadow:none }
.st-logo b{ display:block; font:500 15px/1.15 var(--f-ui) }
.st-logo small{ display:block; font:500 10.5px/1.3 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--s-muted) }
.st-nav{ display:flex; gap:2px; margin-left:10px }
.st-nav button{ padding:8px 12px; border-radius:7px; color:var(--s-muted); font:500 14px/1 var(--f-ui) }
.st-nav button:hover{ color:var(--s-fg) }
.st-nav button[aria-current="page"]{ color:var(--s-fg); background:var(--s-sunken) }
.saved{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--s-muted); opacity:0; transition:opacity .3s; white-space:nowrap }
.saved.on{ opacity:1 }
.saved svg{ width:15px; height:15px; color:var(--s-ok) }
.st-main{ max-width:1280px; margin:0 auto; padding-block:30px 110px; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)) }
.h1{ margin:0; font:500 40px/1.05 var(--f-serif); text-wrap:balance }
.h2{ margin:0; font:500 17px/1.3 var(--f-ui) }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 15px; border:1px solid var(--s-line); border-radius:8px; background:var(--s-surface); color:var(--s-fg); font:500 14px/1 var(--f-ui); white-space:nowrap; text-decoration:none; transition:border-color .2s, filter .2s }
.btn:hover{ border-color:color-mix(in srgb, var(--s-fg) 35%, var(--s-line)) }
.btn svg{ width:17px; height:17px }
.btn-p{ background:var(--s-accent); border-color:var(--s-accent); color:var(--s-accent-fg) }
.btn-p:hover{ border-color:var(--s-accent); filter:brightness(1.07) }
.btn-sm{ height:34px; padding:0 12px; font-size:13.5px; border-radius:7px }
.btn-danger{ background:var(--s-danger); border-color:var(--s-danger); color:#fff }
.btn-danger:hover{ border-color:var(--s-danger); filter:brightness(1.07) }
.btn-block{ width:100% }
.icon-s{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:7px; color:var(--s-muted) }
.icon-s:hover:not(:disabled){ background:var(--s-sunken); color:var(--s-fg) }
.icon-s.danger:hover:not(:disabled){ color:var(--s-danger) }
.icon-s svg{ width:18px; height:18px }
.st-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; margin-bottom:26px }
.st-head p{ margin-top:8px }
.st-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.segc{ display:inline-flex; gap:2px; padding:3px; border-radius:9px; background:var(--s-sunken) }
.segc button{ padding:7px 12px; border-radius:7px; color:var(--s-muted); font:500 13.5px/1.1 var(--f-ui); white-space:nowrap }
.segc button[aria-pressed="true"]{ background:var(--s-surface); color:var(--s-fg); box-shadow:0 1px 3px rgba(0,0,0,.1) }
.in{ width:100%; min-width:0; height:42px; padding:0 12px; border:1px solid var(--s-line); border-radius:8px; background:var(--s-bg); color:var(--s-fg); font:400 15px/1.3 var(--f-ui); transition:border-color .2s, box-shadow .2s }
.in:focus{ outline:none; border-color:var(--s-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--s-accent) 22%, transparent) }
textarea.in{ height:auto; padding:10px 12px; resize:vertical; line-height:1.5 }
.in-sm{ height:38px; width:230px; max-width:100% }

.cgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap:20px }
.ccard{ position:relative; display:flex; flex-direction:column; min-width:0; background:var(--s-surface); border:1px solid var(--s-line); border-radius:12px; overflow:hidden; transition:box-shadow .25s }
.ccard:hover{ box-shadow:var(--s-shadow) }
.thumb{ position:relative; display:flex; width:100%; aspect-ratio:3/2; overflow:hidden; background:#141210 }
.thumb img{ flex:1 1 0; min-width:0; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1) }
.thumb:hover img{ transform:scale(1.03) }
.thumb img + img{ border-left:1px solid rgba(255,255,255,.55) }
.thumb-empty{ flex:1; display:grid; place-items:center; color:rgba(255,255,255,.55); font-size:13px }
.cbody{ display:grid; gap:6px; padding:14px 16px }
.crow{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.ccard h3{ margin:0; min-width:0; font:500 26px/1.1 var(--f-serif); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pill{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font:500 12px/1 var(--f-ui) }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.pill.ok{ color:var(--s-ok); background:color-mix(in srgb, var(--s-ok) 13%, transparent) }
.pill.draft{ color:var(--s-muted); background:var(--s-sunken) }
.stats{ display:flex; flex-wrap:wrap; gap:4px 12px; margin:0; color:var(--s-muted); font-size:13.5px; font-variant-numeric:tabular-nums }
.stats .fv{ display:inline-flex; align-items:center; gap:4px; color:var(--s-accent-ink) }
.stats svg{ width:14px; height:14px }
.cacts{ display:flex; align-items:center; gap:6px; margin-top:8px; padding-top:12px; border-top:1px solid var(--s-line) }
.ccard-new{ display:grid; place-content:center; justify-items:center; gap:8px; min-height:280px; padding:24px; border:1px dashed var(--s-line); border-radius:12px; background:transparent; color:var(--s-muted); text-align:center; transition:border-color .2s, color .2s }
.ccard-new b{ color:var(--s-fg); font:500 16px var(--f-ui) }
.ccard-new svg{ width:26px; height:26px; color:var(--s-accent) }
.ccard-new:hover{ border-color:var(--s-accent); color:var(--s-fg) }
.confirm{ display:grid; gap:10px; padding:12px; margin-top:8px; border-radius:8px; background:color-mix(in srgb, var(--s-danger) 8%, var(--s-surface)); border:1px solid color-mix(in srgb, var(--s-danger) 32%, var(--s-line)); font-size:14px }
.confirm p{ margin:0 }
.confirm > div{ display:flex; justify-content:flex-end; gap:8px }
.confirm.inset{ margin:12px 14px 0 }
.st-foot{ display:flex; justify-content:center; margin-top:40px }
.st-foot .confirm{ max-width:460px }
.link-s{ color:var(--s-muted); font-size:13.5px; text-decoration:underline; text-underline-offset:3px }
.link-s:hover{ color:var(--s-fg) }

.ed-head{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; margin-bottom:24px }
.back-s{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid var(--s-line); background:var(--s-surface) }
.back-s:hover{ border-color:var(--s-muted) }
.back-s svg{ width:18px; height:18px }
.ed-title{ min-width:0 }
.ed-title .h1{ font-size:36px }
.ed-title p{ margin-top:4px; font-size:14px }
.ed{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:28px; align-items:start }
.ed-nav{ position:sticky; top:calc(84px + env(safe-area-inset-top,0px)); display:grid; gap:2px }
.ed-nav button{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--s-muted); font:500 14.5px/1.2 var(--f-ui); text-align:left }
.ed-nav button:hover{ color:var(--s-fg) }
.ed-nav button[aria-current="page"]{ background:var(--s-surface); color:var(--s-fg); box-shadow:var(--s-shadow) }
.ed-nav small{ margin-left:auto; font-size:12px; color:var(--s-muted); font-variant-numeric:tabular-nums }
.ed-nav svg{ width:18px; height:18px }
.stack{ display:grid; gap:18px; min-width:0; align-content:start }
.panel{ display:grid; gap:18px; min-width:0; padding:22px; background:var(--s-surface); border:1px solid var(--s-line); border-radius:12px }
.panel-head{ display:grid; gap:4px }
.grid2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px }
.span2{ grid-column:1 / -1 }
.fld{ display:grid; gap:7px; min-width:0; margin:0; padding:0; border:0 }
.fld > label, .lbl, .fld > legend{ padding:0; color:var(--s-muted); font:500 13px/1.2 var(--f-ui) }
.fld > legend{ margin-bottom:8px }
.hint{ margin:0; color:var(--s-muted); font-size:12.5px }
.fld > .segc{ justify-self:start }
.opts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px }
.opt{ display:grid; gap:8px; min-width:0; padding:8px; border:1px solid var(--s-line); border-radius:10px; background:var(--s-bg); text-align:left; transition:border-color .2s }
.opt:hover{ border-color:color-mix(in srgb, var(--s-fg) 30%, var(--s-line)) }
.opt[aria-pressed="true"]{ border-color:var(--s-accent); box-shadow:inset 0 0 0 1px var(--s-accent) }
.oname{ padding:0 2px 2px; font:500 13px/1.2 var(--f-ui) }
.sch{ position:relative; display:flex; aspect-ratio:16/10; border-radius:6px; overflow:hidden; background:#141210 }
.sch img{ flex:1 1 0; min-width:0; height:100%; object-fit:cover }
.sch img + img{ border-left:1px solid rgba(255,255,255,.6) }
.sch .pan{ flex:0 0 40%; background:var(--sch-panel, #2a231c) }
.sch-t{ position:absolute; left:0; right:0; top:16%; color:#fff; text-align:center; font:500 15px/1 var(--f-serif); text-shadow:0 1px 8px rgba(0,0,0,.4) }
.sch-t.left{ right:auto; left:8%; top:44% }
.tsample{ display:grid; place-items:center; aspect-ratio:16/10; overflow:hidden; border-radius:6px; background:var(--s-surface); border:1px solid var(--s-line); color:var(--s-fg); font-size:26px; line-height:1; white-space:nowrap }
.tsw{ display:flex; align-items:flex-end; gap:6px; aspect-ratio:16/10; padding:12px; border-radius:6px; border:1px solid var(--s-line) }
.tsw i{ flex:1; height:42%; border-radius:4px }
.tsw i:nth-child(2){ height:64% }
.tsw i:nth-child(3){ height:30% }
.accs{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.acc{ position:relative; width:34px; height:34px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14) }
.acc[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--s-surface), 0 0 0 4px var(--c) }
.acc-custom{ overflow:hidden; cursor:pointer; background:conic-gradient(#b98f62, #9aa86a, #6a8fa8, #9a6aa8, #b98f62) }
.acc-custom input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0 }
.pick{ display:grid; grid-template-columns:repeat(auto-fill, minmax(62px, 1fr)); grid-auto-rows:max-content; gap:8px; max-height:212px; overflow:auto; padding:3px }
.pick-sm{ grid-template-columns:repeat(auto-fill, minmax(50px, 1fr)); max-height:122px }
.pk{ aspect-ratio:1; border-radius:6px; overflow:hidden; overflow:clip; background:var(--s-sunken) }
.pk img{ width:100%; height:100%; object-fit:cover }
.pk[aria-pressed="true"]{ outline:2px solid var(--s-accent); outline-offset:2px }
.design{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:22px; align-items:start }
.pv-wrap{ position:sticky; top:calc(84px + env(safe-area-inset-top,0px)); display:grid; gap:10px; min-width:0 }
.pv-head{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.pv{ position:relative; width:100%; overflow:hidden; border-radius:10px; background:#0f0e0d; border:1px solid var(--s-line); box-shadow:var(--s-shadow) }
.pv.pv-mob{ width:min(300px, 100%); margin:0 auto; border:6px solid #1c1a17; border-radius:30px }
.pv-scale{ position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none }
.pv-scale > .g{ height:100%; min-height:0 }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip-b{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border:1px dashed var(--s-line); border-radius:999px; color:var(--s-fg); font:500 13.5px/1 var(--f-ui); transition:border-color .2s, color .2s }
.chip-b:hover{ border-color:var(--s-accent); color:var(--s-accent-ink) }
.chip-b svg{ width:15px; height:15px }
.chip{ position:relative; display:inline-flex }
.chip input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer }
.chip span{ display:inline-flex; align-items:center; height:36px; padding:0 14px; border:1px solid var(--s-line); border-radius:999px; color:var(--s-muted); font:500 13.5px/1 var(--f-ui); transition:all .15s }
.chip input:checked + span{ border-color:var(--s-accent); color:var(--s-fg); background:color-mix(in srgb, var(--s-accent) 13%, transparent) }
.chip input:focus-visible + span{ outline:2px solid var(--s-accent); outline-offset:2px }
.sc{ min-width:0; background:var(--s-surface); border:1px solid var(--s-line); border-radius:12px; transition:border-color .2s, box-shadow .2s }
.sc.is-over{ border-color:var(--s-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--s-accent) 20%, transparent) }
.sc-head{ display:flex; align-items:center; gap:4px; padding:10px 10px 10px 8px; border-bottom:1px solid var(--s-line) }
.sc-name{ flex:1 1 auto; min-width:0; height:38px; padding:0 10px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--s-fg); font:500 17px var(--f-ui) }
.sc-name:hover{ border-color:var(--s-line) }
.sc-name:focus{ outline:none; border-color:var(--s-accent); background:var(--s-bg) }
.sc-count{ margin-right:6px; color:var(--s-muted); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums }
.sc-body{ display:grid; gap:12px; padding:14px }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); grid-auto-rows:max-content; gap:8px }
.th{ position:relative; margin:0; aspect-ratio:1; border-radius:7px; overflow:hidden; overflow:clip; background:var(--s-sunken) }
.th img{ width:100%; height:100%; object-fit:cover }
.th-b{ position:absolute; top:5px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:rgba(12,11,10,.58); color:#fff; opacity:0; transition:opacity .2s }
.th-b svg{ width:15px; height:15px }
.th-star{ left:5px }
.th-x{ right:5px }
.th:hover .th-b, .th:focus-within .th-b{ opacity:1 }
@media (hover:none){ .th-b{ opacity:1 } }
.th.is-cover{ outline:2px solid var(--s-accent); outline-offset:-2px }
.th-tag{ position:absolute; left:5px; bottom:5px; padding:4px 7px; border-radius:4px; background:var(--s-accent); color:var(--s-accent-fg); font:500 10.5px/1 var(--f-ui); letter-spacing:.06em }
.drop{ display:grid; justify-items:center; gap:4px; padding:18px; border:1.5px dashed var(--s-line); border-radius:10px; color:var(--s-muted); text-align:center; cursor:pointer; transition:border-color .2s }
.drop:hover{ border-color:var(--s-accent) }
.drop b{ color:var(--s-fg); font-weight:500 }
.drop span{ font-size:12.5px }
.drop svg{ width:22px; height:22px; color:var(--s-accent) }
.prog{ display:grid; gap:6px; color:var(--s-muted); font-size:13px }
.prog i{ display:block; height:4px; border-radius:2px; background:linear-gradient(90deg, var(--s-accent) calc(var(--p, 0) * 100%), var(--s-sunken) 0) }
.fr{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:18px; padding:16px; background:var(--s-surface); border:1px solid var(--s-line); border-radius:12px }
.fr-media{ display:grid; gap:10px; align-content:start }
.fr-poster{ position:relative; display:grid; place-items:center; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#141210; color:rgba(255,255,255,.45) }
.fr-poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.fr-poster > svg{ width:30px; height:30px }
.fr-play{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(12,11,10,.12) }
.fr-play svg{ width:30px; height:30px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)) }
.fr-fields{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-content:start; min-width:0 }
.fr-meta{ display:flex; align-items:center; gap:4px; font-size:13px }
.add-film{ justify-self:start }
.setrow{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.setrow b{ font-weight:500 }
.setrow p{ margin:2px 0 0; font-size:13.5px }
.in-date{ width:auto; flex:none }
.sw{ position:relative; flex:none; width:44px; height:26px; border-radius:13px; background:var(--s-line); transition:background .2s }
.sw::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .2s }
.sw[aria-checked="true"]{ background:var(--s-accent) }
.sw[aria-checked="true"]::after{ transform:translateX(18px) }
.addr{ display:flex; align-items:center; overflow:hidden; border:1px solid var(--s-line); border-radius:8px; background:var(--s-bg) }
.addr span{ flex:none; max-width:60%; padding:0 2px 0 12px; overflow:hidden; color:var(--s-muted); font-size:14.5px; white-space:nowrap; text-overflow:ellipsis }
.addr .in{ flex:1 1 auto; width:auto; border:0; background:transparent; padding-left:0; box-shadow:none }
.addr:focus-within{ border-color:var(--s-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--s-accent) 22%, transparent) }
.row{ display:flex; flex-wrap:wrap; gap:8px }
.pinrow{ display:flex; align-items:center; gap:8px }
.pin-edit{ width:150px; font-weight:500; letter-spacing:.3em; font-variant-numeric:tabular-nums }
.msg{ margin:0; padding:14px 16px; border:1px solid var(--s-line); border-radius:8px; background:var(--s-bg); font:400 14px/1.6 var(--f-ui); white-space:pre-wrap; overflow-wrap:anywhere }
.brand-pv{ display:grid; gap:18px; padding:22px; border-radius:12px; background:var(--night); color:#fff }
.brand-pv .mono{ background:#fff; color:#1a1815 }
.logo-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.logo-row .mono{ background:var(--s-fg); color:var(--s-bg); box-shadow:none }

/* ===================== PERFIL / PORTAFOLIO ===================== */
.pf-hero{ position:relative; flex:none; height:calc(88svh - env(safe-area-inset-top,0px)); min-height:560px; overflow:hidden; background:var(--night); color:#fff; isolation:isolate }
.is-preview .pf-hero{ height:100%; min-height:0 }
.pf-hero :focus-visible{ outline-color:#fff }
.pf-hero > video, .pf-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.pf-hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(12,11,10,.55) 0%, rgba(12,11,10,.16) 30%, rgba(12,11,10,.26) 60%, rgba(12,11,10,.8) 100%) }
.pf-nav{ position:absolute; z-index:3; top:0; left:0; right:0; display:flex; align-items:center; gap:14px; padding-top:20px; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)) }
.pf-id{ display:flex; align-items:center; gap:12px; margin-right:auto; min-width:0; font:500 15px/1.2 var(--f-ui) }
.pf-links{ display:flex; gap:2px }
.pf-links button{ padding:10px 12px; border-radius:6px; color:rgba(255,255,255,.86); font:500 11.5px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase }
.pf-links button:hover{ color:#fff; background:rgba(255,255,255,.12) }
.ghost-sm{ padding:11px 18px }
.pf-in{ position:absolute; z-index:2; left:0; right:0; bottom:12%; display:grid; justify-items:center; gap:16px; padding:0 var(--gut); text-align:center }
.pf-name{ margin:0; font-family:var(--f-display); font-weight:var(--d-weight); letter-spacing:var(--d-tr); text-transform:var(--d-case); font-size:calc(clamp(58px, 9.4cqi, 136px) * var(--d-scale)); line-height:.95; text-shadow:0 2px 40px rgba(0,0,0,.3); text-wrap:balance }
.pf-lead{ margin:0; max-width:38ch; font:300 clamp(16px, 1.7cqi, 21px)/1.5 var(--f-ui); text-wrap:balance }
.pf-sec{ padding-block:clamp(56px, 8cqi, 104px) }
.pf-wrap{ max-width:1320px; margin:0 auto; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)) }
.pf-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; margin-bottom:28px }
.pf-h{ margin:0; font-family:var(--f-display); font-weight:var(--d-weight); letter-spacing:var(--d-tr); text-transform:var(--d-case); font-size:calc(clamp(38px, 4.6cqi, 62px) * var(--d-scale)); line-height:1; text-wrap:balance }
.pf-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap:18px }
.pf-card{ position:relative; display:block; width:100%; max-width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:4px; background:var(--night); color:#fff; text-align:center }
.pf-card.is-wide{ grid-column:1 / -1; aspect-ratio:21/9 }
.pf-media{ position:absolute; inset:0; display:flex }
.pf-media img{ flex:1 1 0; min-width:0; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1) }
.pf-media img + img{ border-left:1px solid rgba(255,255,255,.45) }
.pf-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,11,10,.06), rgba(12,11,10,.16) 45%, rgba(12,11,10,.64)) }
.pf-card:hover .pf-media img{ transform:scale(1.035) }
.pf-cap{ position:absolute; z-index:2; left:0; right:0; bottom:9%; display:grid; justify-items:center; gap:12px; padding:0 16px }
.pf-ct{ font-family:var(--f-display); font-weight:var(--d-weight); letter-spacing:var(--d-tr); text-transform:var(--d-case); font-size:calc(clamp(34px, 3.6cqi, 54px) * var(--d-scale)); line-height:1; text-shadow:0 2px 24px rgba(0,0,0,.35) }
.pf-card.is-wide .pf-ct{ font-size:calc(clamp(42px, 5.6cqi, 80px) * var(--d-scale)) }
.pf-cm{ font:500 11px/1.4 var(--f-ui); letter-spacing:.24em; text-transform:uppercase; text-wrap:balance }
.pf-empty{ margin:0; padding:40px 20px; border:1px dashed var(--line); border-radius:6px; text-align:center; color:var(--muted) }
.pf-about .pf-wrap{ max-width:820px; display:grid; justify-items:center; gap:18px; text-align:center }
.pf-about p{ margin:0; font-family:var(--f-note); font-style:var(--note-style); font-weight:var(--note-weight); font-size:calc(24px * var(--note-scale)); line-height:1.55; text-wrap:pretty; white-space:pre-line }
.pf-about .mono, .gf .mono{ background:var(--fg); color:var(--bg) }
.pf-contact{ border-top:1px solid var(--line); text-align:center }
.pf-contact .pf-wrap{ display:grid; justify-items:center; gap:16px }
.pf-contact p{ margin:0; max-width:46ch; color:var(--muted) }
.pf-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px }
.pf-btns .btn-acc{ height:46px; padding:0 20px }
@container g (max-width: 760px){
  .pf-links{ display:none }
  .pf-id-t{ display:none }
  .pf-card, .pf-card.is-wide{ aspect-ratio:4/5 }
}

/* Estudio: permisos y perfil */
.vis-b{ flex:none; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; margin-right:6px; border:1px solid var(--s-line); border-radius:999px; color:var(--s-muted); font:500 12.5px/1 var(--f-ui); white-space:nowrap }
.vis-b svg{ width:15px; height:15px }
.vis-b[aria-pressed="false"]{ color:var(--s-accent-ink); border-color:color-mix(in srgb, var(--s-accent) 45%, var(--s-line)); background:color-mix(in srgb, var(--s-accent) 9%, transparent) }
.stats .vis-t{ display:inline-flex; align-items:center; gap:5px; color:var(--s-fg) }
.vopts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px }
.vopt{ display:grid; gap:6px; align-content:start; padding:12px 14px; border:1px solid var(--s-line); border-radius:10px; background:var(--s-bg); text-align:left }
.vopt-t{ display:inline-flex; align-items:center; gap:8px; font:500 14.5px/1.2 var(--f-ui) }
.vopt-t svg{ width:16px; height:16px }
.vopt small{ color:var(--s-muted); font:400 12.5px/1.45 var(--f-ui) }
.vopt[aria-pressed="true"]{ border-color:var(--s-accent); box-shadow:inset 0 0 0 1px var(--s-accent) }
@media (max-width:760px){ .vopts{ grid-template-columns:1fr } }

@media (max-width:1180px){ .design{ grid-template-columns:1fr } .pv-wrap{ position:static; order:-1 } }
@media (max-width:860px){
  .ed{ grid-template-columns:1fr; gap:16px }
  .ed-nav{ position:static; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none }
  .ed-nav button{ flex:none }
  .ed-nav small{ margin-left:2px }
  .grid2{ grid-template-columns:1fr }
  .st-logo-t{ display:none }
  .st-nav{ margin-left:0 }
}
@media (max-width:760px){ .fr{ grid-template-columns:1fr } .fr-fields{ grid-template-columns:1fr } }
@media (max-width:560px){
  .st-bar-in{ gap:8px }
  .st-bar .btn-p span{ display:none }
  .st-bar .btn-p{ width:40px; padding:0 }
  .saved{ display:none }
  .h1{ font-size:32px }
  .ed-title .h1{ font-size:30px }
  .opts{ gap:6px }
  .panel{ padding:16px }
  .ed-head .segc, .ed-head .btn{ flex:1 1 auto }
  .ed-head .segc button{ flex:1 }
  .setrow{ flex-wrap:wrap }
}

/* ===================== PRODUCCIÓN ===================== */
.boot{ min-height:100svh; display:grid; place-items:center; background:var(--s-bg); color:var(--s-muted); font:400 14px var(--f-ui) }
.login{ min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); display:grid; place-items:center; padding:24px max(16px, env(safe-area-inset-right,0px)) 24px max(16px, env(safe-area-inset-left,0px)); background:var(--s-bg); color:var(--s-fg) }
.login form{ width:min(380px, 100%); display:grid; gap:14px; padding:28px; background:var(--s-surface); border:1px solid var(--s-line); border-radius:14px; box-shadow:var(--s-shadow) }
.login .mono{ background:var(--s-fg); color:var(--s-bg); box-shadow:none }
.login h1{ margin:4px 0 0; font:500 32px/1.1 var(--f-serif) }
.login .err{ margin:0; color:var(--s-danger); font-size:14px }
.status-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font:500 12px/1.2 var(--f-ui); background:var(--s-sunken); color:var(--s-muted) }
.status-chip.ok{ color:var(--s-ok); background:color-mix(in srgb, var(--s-ok) 13%, transparent) }
.status-chip.warn{ color:var(--s-accent-ink); background:color-mix(in srgb, var(--s-accent) 13%, transparent) }
.status-chip svg{ width:14px; height:14px }
.up-bar{ display:grid; gap:6px; padding:12px 14px; border-radius:10px; background:var(--s-bg); border:1px solid var(--s-line); font-size:13px; color:var(--s-muted) }
.up-bar b{ color:var(--s-fg); font-weight:500 }
.up-bar i{ display:block; height:4px; border-radius:2px; background:linear-gradient(90deg, var(--s-accent) calc(var(--p, 0) * 100%), var(--s-sunken) 0) }
.up-bar .row{ align-items:center; justify-content:space-between }
.note-box{ margin:0; padding:12px 14px; border-radius:10px; background:color-mix(in srgb, var(--s-accent) 9%, var(--s-surface)); border:1px solid color-mix(in srgb, var(--s-accent) 30%, var(--s-line)); font-size:13.5px }
.pl-stage iframe{ width:100%; height:100%; max-height:calc(100svh - 84px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); border:0; aspect-ratio:16/9; background:#000 }
.dl-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:8px }
.dl-row .rt{ flex:1; min-width:0 }
.dl-row small{ display:block; color:var(--muted); font-size:12.5px }
.dl-row .btn-acc{ height:38px; padding:0 14px }
.gone{ min-height:100svh; display:grid; place-items:center; text-align:center; padding:24px; background:var(--night); color:#fff }
.gone .mono{ margin:0 auto 14px }
.gone h1{ margin:0 0 10px; font:500 40px/1.1 var(--f-serif) }
.gone p{ margin:0 auto; max-width:40ch; color:rgba(255,255,255,.75) }