/* Telas Pupila · estilos do player. Canvas fixo de 1920×1080, escalado pelo player.js. */
/* Compatibilidade com smart TV: sem gap em flexbox, sem aspect-ratio, sem inset, sem :has(). */
@font-face{font-family:'Seriguela';src:url(assets/fonts/SeriguelaDisplay-Bold.otf) format('opentype');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Seriguela';src:url(assets/fonts/SeriguelaDisplay-Light.otf) format('opentype');font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Manrope';src:url(assets/fonts/Manrope-Regular.otf) format('opentype');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Manrope';src:url(assets/fonts/Manrope-Medium.otf) format('opentype');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Manrope';src:url(assets/fonts/Manrope-SemiBold.otf) format('opentype');font-weight:600;font-style:normal;font-display:block}
:root{--bg:#000;--fg:#fff;--mut:#a3a3a3;--mut2:#737373;--rule:#4a4a4a;--orange:#FF6A33;--yellow:#FFCD1D;--green:#78D200;--blue:#52A4FF;--pink:#FC79FD}
*{box-sizing:border-box}
body{margin:0;height:100%;background:#000;overflow:hidden;font-family:'Manrope','Helvetica Neue',Arial,sans-serif;color:var(--fg);cursor:none}
#stage{position:fixed;top:0;left:0;width:1920px;height:1080px;transform-origin:0 0;background:#000;overflow:hidden}
.slide{position:absolute;top:0;left:0;width:1920px;height:1080px;padding:64px 96px 56px;display:flex;flex-direction:column;opacity:0;transition:opacity .5s ease-in-out;background:#000;color:#fff}
.slide.show{opacity:1}
.slide.light{background:#fff;color:#000}
.slide.orange{background:var(--orange);color:#000}
.slide.pink{background:var(--pink);color:#000}
.hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px;flex:0 0 auto}
.hd-l{display:flex;align-items:center}
.logo{height:30px;display:block}.logo svg{height:30px;width:auto;display:block}
.area{margin-left:36px;font-size:22px;font-weight:600;letter-spacing:.15em}
.meta{font-size:22px;color:var(--mut);letter-spacing:.05em}
.demo{margin-left:20px;padding:6px 14px;border:1px solid var(--mut2);font-size:18px;color:var(--mut);letter-spacing:.05em}
.light .meta,.light .demo{color:#4a4a4a;border-color:#a3a3a3}
.orange .meta,.orange .demo,.pink .meta,.pink .demo{color:#000;border-color:#000}
.bd{flex:1 1 auto;position:relative;min-height:0;display:flex;flex-direction:column}
.ft{display:flex;align-items:center;margin-top:36px;flex:0 0 auto}
.segs{flex:1 1 auto;display:flex}
.seg{flex:1 1 0;height:4px;background:#262626;margin-right:8px;overflow:hidden}
.seg b{display:block;height:100%;width:0;background:#737373}
.seg.done b{width:100%}
.seg.cur b{background:var(--orange)}
.light .seg{background:#e5e5e5}.light .seg b{background:#a3a3a3}.light .seg.cur b{background:var(--orange)}
.orange .seg,.pink .seg{background:rgba(0,0,0,.15)}.orange .seg b,.pink .seg b{background:rgba(0,0,0,.4)}.orange .seg.cur b,.pink .seg.cur b{background:#000}
.cnt-l{font-size:22px;color:var(--mut);letter-spacing:.05em;margin-left:24px;min-width:90px;text-align:right}
.light .cnt-l{color:#4a4a4a}.orange .cnt-l,.pink .cnt-l{color:#000}
/* tipografia da marca */
.disp{font-family:'Seriguela','Manrope',sans-serif;font-weight:700;text-transform:uppercase;line-height:.86;letter-spacing:-.005em}
.thin{font-weight:300}
.eb{font-size:24px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.light .eb{color:#4a4a4a}.orange .eb,.pink .eb{color:#000}
.body{font-size:32px;line-height:1.35;font-weight:500}
.sm{font-size:22px;color:var(--mut);letter-spacing:.03em}
.light .sm{color:#4a4a4a}
.box{border:1px solid #fff;border-radius:20px}
.light .box{border-color:#000}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column-gap:32px}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-column-gap:64px}
/* entradas: só no início de cada tela */
.r{opacity:0;transform:translateY(24px);transition:opacity .7s ease-out,transform .7s ease-out}
.show .r{opacity:1;transform:none}
.bar{transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.show .bar{transform:scaleX(1)}
.spark{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.6s ease-out .6s}
.show .spark{stroke-dashoffset:0}
.tiles{display:grid;grid-template-columns:repeat(10,58px);grid-auto-rows:103px;grid-gap:10px}
.tile{background:#e5e5e5;border-radius:6px;transition:background-color .25s ease-out}
.tile.on{background:var(--orange)}
.media-tile{width:380px;height:676px;border-radius:20px;overflow:hidden;border:1px solid #fff;position:relative;margin-left:32px;flex:0 0 auto}
.media-tile img,.media-tile video{width:100%;height:100%;object-fit:cover;display:block}
.ph{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;color:var(--mut);font-size:22px;line-height:1.4}
.ph .sym{width:56px;height:56px;margin-bottom:20px;color:#4a4a4a}.ph .sym svg{width:56px;height:56px}
/* mídia sem texto */
.slide.bare{padding:0;background:#000}
.full{position:absolute;top:0;left:0;width:1920px;height:1080px;overflow:hidden;background:#000}
.full img,.full video{width:100%;height:100%;display:block}
.wall{position:absolute;top:0;left:0;width:1920px;height:1080px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));grid-gap:8px;background:#000}
.wt{position:relative;overflow:hidden;background:#141414;opacity:0;transform:scale(.97);transition:opacity .8s ease-out,transform .8s ease-out}
.show .wt{opacity:1;transform:none}
.wt img,.wt video{width:100%;height:100%;object-fit:cover;display:block}
.phm{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#4a4a4a;font-size:20px;letter-spacing:.15em;font-weight:600}
.phm .sym{width:64px;height:64px;margin-bottom:16px}.phm .sym svg{width:64px;height:64px}
#hint{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);padding:14px 28px;background:#000;border:1px solid #fff;color:#fff;font-size:20px;letter-spacing:.05em;transition:opacity .6s;z-index:5;white-space:nowrap}
#paused{position:fixed;right:40px;top:40px;padding:10px 20px;background:#fff;color:#000;font-size:20px;font-weight:600;letter-spacing:.1em;display:none;z-index:5}
@media (prefers-reduced-motion: reduce){.r,.bar,.spark,.slide,.tile{transition:none!important}.r{opacity:1;transform:none}.bar{transform:none}.spark{stroke-dashoffset:0}}
html{height:100%}
#hint{opacity:0}