/* UI-030 (ronda 2): capa premium OLIMPO carbón / dorado / lavanda. Solo aditiva; se carga después de gallery.css y gallery-funnel.css. */
:root{--ol-bg:#0b0c10;--ol-surface:#14161c;--ol-line:#2b2e3a;--ol-gold:#e8c27b;--ol-gold-soft:#f1d49d;--ol-lav:#b9a3e3;--ol-muted:#a9aebc;--ol-head:64px}
body{background:var(--ol-bg);-webkit-font-smoothing:antialiased;overflow-x:clip}

/* Navegación editorial compacta */
header{position:sticky;top:0;z-index:30;height:var(--ol-head);background:#0b0c10ea;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ol-line)}
.brand{font-size:22px;letter-spacing:3px;line-height:1}
.brand span{font-size:8px;letter-spacing:3.5px;margin-top:4px;color:var(--ol-lav)}
header nav{gap:12px;font-size:13px}
header nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--ol-line);border-radius:999px;color:var(--ol-gold-soft);text-decoration:none;transition:border-color .2s,background .2s}
header nav a:hover{border-color:var(--ol-gold);background:#e8c27b14}

/* Atajos: franja de enlaces reales bajo la cabecera. En flujo normal (sin position:fixed), por eso no puede tapar el contenido. */
.rail{position:sticky;top:var(--ol-head);z-index:25;display:flex;gap:8px;align-items:center;padding:8px 5vw;overflow-x:auto;scrollbar-width:none;background:#0b0c10d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #20232d}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid transparent;color:var(--ol-muted);font-size:13px;text-decoration:none;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.rail a:hover{color:var(--ol-gold-soft);border-color:#e8c27b55;background:#e8c27b12}
@media(min-width:1280px){.rail{padding-left:max(5vw,calc((100vw - 1400px)/2));padding-right:max(5vw,calc((100vw - 1400px)/2))}}

/* Hero cinematográfico: mismas fuentes/poster, menos alto */
.hero{min-height:clamp(520px,72svh,720px)}
.hero h1{letter-spacing:-3px}
.hero-cta{border-radius:999px;min-height:48px}
.hero-sound{min-height:44px;border-radius:999px}
.hero-dot{border-radius:10px;min-width:44px}
#cards{scroll-margin-top:calc(var(--ol-head) + 70px)}

/* Controles: apertura editorial, sin caja grande alrededor del buscador */
.controls{padding:26px 0 6px}
.categories{gap:8px;scrollbar-width:thin;scrollbar-color:#3a3d4b transparent;padding-bottom:12px}
.categories button{min-height:44px;padding:0 18px;border-radius:999px;background:var(--ol-surface);border-color:var(--ol-line);color:#e6e5ec;transition:border-color .2s,background .2s}
.categories button:hover{border-color:var(--ol-gold)}
.categories button[aria-pressed=true]{background:linear-gradient(115deg,var(--ol-gold-soft),#d7b16f);color:#1c140a;border-color:transparent;font-weight:650}
.search-row{padding:0;border:0;background:none;gap:12px}
input,select{min-height:48px;border-radius:12px;border-color:var(--ol-line);background:var(--ol-surface)}
input:focus-visible,select:focus-visible{outline:2px solid var(--ol-gold);outline-offset:2px;border-color:var(--ol-gold)}
#sync,#more{min-height:48px;border-radius:999px}
.results-heading{margin:18px 0 16px;padding-top:14px;border-top:1px solid #20232d}
.results-heading h2{font-size:24px;letter-spacing:-.4px}

/* Tarjetas: póster protagonista. 3 columnas por defecto, 4 en escritorio amplio, 2 en móvil. */
.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(min-width:1280px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.format-card{border-radius:18px;background:var(--ol-surface);border-color:var(--ol-line);display:flex;flex-direction:column}
.format-card:hover{border-color:var(--ol-gold);box-shadow:0 18px 50px #000a,0 0 0 1px #e8c27b22}
.art,.art-sample.art-portrait{aspect-ratio:4/5}
.art img{object-position:center 22%}
.art:after{background:linear-gradient(180deg,#0003,transparent 45%,#000b)}
.card-body{display:flex;flex-direction:column;flex:1;padding:16px}
.card-body h3{font-size:18px;line-height:1.25;letter-spacing:-.2px;margin:6px 0 8px}
.mode-chips{min-height:0}
.mode-chips span{border-radius:999px;background:#ffffff0d;border:1px solid #ffffff12;padding:4px 9px}
.availability{margin:10px 0;min-height:0;font-size:12px;line-height:1.4}
.open-format{min-height:44px;margin-top:auto;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#e8c27b1a;border-color:#e8c27b66;color:var(--ol-gold-soft)}
.open-format:hover{background:#e8c27b33}

/* Ficha */
dialog{border-color:var(--ol-line);border-radius:22px;background:var(--ol-surface);box-shadow:0 30px 90px #000c;overscroll-behavior:contain}
#close-detail{width:44px;height:44px;background:#0b0c10d9;border-color:#ffffff40}
.detail-layout{gap:32px;padding:12px 32px 32px;align-items:start}
.detail-media,.detail-copy{min-width:0}
.detail-media img,.detail-media video,.detail-media #model-preview{object-fit:contain;background:#07080b;border-radius:14px}
.detail-copy h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.5px}
.detail-copy p{font-size:14px;line-height:1.7;color:#c0c5d2}
.detail-copy .primary{border-radius:999px;min-height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(115deg,var(--ol-gold-soft),#d7b16f)}
.detail-copy button:not(.primary){min-height:44px;border-radius:999px}
.detail-copy .gf-clear,.detail-copy .gf-remove{min-height:44px}
.notice-box{border-radius:0 10px 10px 0;background:#241f2b;border-left-color:var(--ol-lav);color:#e3d6bb}
.share-toolbar button,.share-toolbar a{min-height:44px;border-radius:999px}
.sample-picker select{min-height:44px}

/* Entrega al propietario (clases futuras): acción principal clara; Guardar queda como secundaria. */
.gf-handoff-box{display:flex;flex-direction:column;gap:10px;margin:16px 0;padding:16px;border:1px solid #e8c27b55;border-radius:16px;background:linear-gradient(160deg,#e8c27b14,#b9a3e30f)}
.gf-handoff-box label{font-size:12px;color:#d9d2c3}
.gf-handoff-box select{min-height:48px;margin-top:6px}
.gf-handoff-box p,.gf-handoff-box small,.gf-handoff-box .gf-handoff-note{margin:0;font-size:12px;line-height:1.6;color:#c9c2b3}
.detail-copy .gf-handoff{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;padding:0 22px;border:0;border-radius:999px;background:linear-gradient(115deg,var(--ol-gold-soft),#d7b16f);color:#19120a;font-weight:750}
.detail-copy .gf-handoff:disabled{opacity:.5}
.detail-copy:has(.gf-handoff-box) .gf-generate{background:transparent;color:var(--ol-gold-soft);border:1px solid #e8c27b66;min-height:44px}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ol-gold);outline-offset:3px}
footer{background:var(--ol-bg);border-top-color:var(--ol-line)}
main,.cards,.format-card,.card-body,.detail-layout{min-width:0}
.format-card h3,.detail-copy h2,.model-name{overflow-wrap:anywhere}

@media(max-width:900px){
 .cards{gap:16px}
 .detail-layout{padding:8px 20px 28px;gap:20px}
}

/* Móvil: 2 columnas desde 360px, vídeos bajos, ficha sin doble scroll propio */
@media(max-width:600px){
 :root{--ol-head:60px}
 header{padding:0 4vw}
 header nav a{padding:0 12px;font-size:12px}
 .rail{padding:6px 4vw}
 .hero .hero-demo{aspect-ratio:16/10}
 .hero{padding-bottom:24px}
 .hero h1{font-size:clamp(32px,9.8vw,42px)}
 .results-heading h2{font-size:20px}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .art,.art-sample.art-portrait{aspect-ratio:3/4}
 .card-body{padding:12px}
 .card-body h3{font-size:15px;margin:4px 0 6px}
 .company{font-size:9px;letter-spacing:1px}
 .model-name{font-size:11px}
 .mode-chips span{font-size:9px;padding:3px 6px}
 .availability{font-size:11px;margin:8px 0}
 .open-format{font-size:13px;padding:0 8px}
 .kind{top:8px;left:8px;font-size:9px;padding:4px 8px}
 .art .orientation{left:8px;bottom:8px}
 dialog{border-radius:0}
 .detail-layout{padding:8px 14px 28px}
 .detail-media #model-preview,.detail-media .sample-fallback,.format-before video{object-fit:contain;max-height:40svh}
 .detail-media #model-preview.portrait{max-height:40svh}
 .detail-copy select,.detail-copy input,.detail-copy textarea{font-size:16px}
}
@media(max-width:359px){.cards{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
 .format-card:hover,.hero-cta:hover{transform:none}
}

/* El marcador solo se muestra mientras falta una portada decodificada. */
.art .fallback[hidden]{display:none}