:root {
  --bg:#120c08;
  --panel:#21150d;
  --gold:#c99734;
  --gold-2:#f0cf7a;
  --cream:#fff7e8;
  --line:rgba(240,207,122,.34);
  --safe-bottom:max(14px, env(safe-area-inset-bottom));
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,#3a2312 0,#120c08 52%,#080604 100%);color:var(--cream);font-family:Arial,Helvetica,sans-serif}
body{padding-bottom:0}
button{font:inherit}
.topbar{
  position:sticky;top:0;z-index:20;height:68px;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(14,9,6,.93);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)
}
.brand{border:0;background:transparent;color:var(--cream);text-align:left;cursor:pointer;padding:0}
.brand-small{display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-2)}
.brand-large{display:block;font-family:Georgia,serif;font-size:24px;line-height:1}
.icon-btn{border:1px solid var(--line);background:#2a1a10;color:var(--gold-2);border-radius:12px;width:44px;height:44px;font-size:24px;cursor:pointer}
#app{max-width:760px;margin:0 auto}
.home-view{padding:14px 14px 34px}
.hero-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 16px 50px rgba(0,0,0,.45);background:#000}
.hero-card img{display:block;width:100%;height:auto}
.brand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.brand-card{
  min-height:92px;border:1px solid var(--line);border-radius:17px;padding:16px 12px;
  background:linear-gradient(145deg,#35210f,#1a1009);color:var(--cream);
  box-shadow:0 10px 24px rgba(0,0,0,.22);cursor:pointer;text-align:left
}
.brand-card strong{display:block;font-family:Georgia,serif;font-size:20px;color:var(--gold-2)}
.brand-card span{display:block;margin-top:6px;font-size:12px;opacity:.76}
.reader-view{padding:12px 12px 18px}
.reader-stage{display:flex;justify-content:center;align-items:flex-start;min-height:calc(100vh - 156px)}
.reader-stage img{
  display:block;width:100%;max-width:560px;height:auto;border-radius:14px;
  box-shadow:0 18px 55px rgba(0,0,0,.56);background:#efe7d5
}
.bottom-nav{
  position:relative;z-index:30;margin:0 auto;
  width:min(100%,760px);display:grid;grid-template-columns:repeat(4,1fr);
  padding:8px 8px var(--safe-bottom);background:rgba(13,8,5,.97);
  border-top:1px solid var(--line);backdrop-filter:blur(12px)
}
.bottom-nav button{border:0;background:transparent;color:var(--gold-2);font-size:25px;cursor:pointer;padding:3px}
.bottom-nav span{display:block;color:var(--cream);font-size:10px;margin-top:1px}
.drawer-backdrop{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.66)}
.drawer{
  position:fixed;z-index:41;right:0;top:0;bottom:0;width:min(88vw,390px);
  background:#160e08;border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .23s ease;
  padding-bottom:env(safe-area-inset-bottom);overflow:hidden
}
.drawer.open{transform:translateX(0)}
.drawer-head{height:72px;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.drawer-head strong{font-family:Georgia,serif;font-size:22px;color:var(--gold-2)}
.drawer-head small{display:block;margin-top:2px;opacity:.72}
.drawer-content{height:calc(100% - 72px);overflow:auto;padding:12px}
.drawer-group{margin-bottom:16px}
.drawer-group h3{font-family:Georgia,serif;color:var(--gold-2);margin:7px 5px 8px}
.drawer-item{width:100%;border:1px solid rgba(240,207,122,.2);background:#26170e;color:var(--cream);border-radius:12px;padding:13px 12px;margin:5px 0;text-align:left;cursor:pointer}
.drawer-item.active{border-color:var(--gold-2);background:#3a250f}
.loading{padding:40px;text-align:center}
@media(max-width:420px){
  .brand-grid{grid-template-columns:1fr}
  .brand-card{min-height:76px}
}

/* V2: capa do Canva como menu principal clicável */
.home-view{
  padding:8px 8px 18px;
  min-height:calc(100dvh - 68px);
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.cover-wrap{
  position:relative;
  width:min(100%, 540px);
  max-height:calc(100dvh - 84px);
  aspect-ratio:9/16;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 16px 50px rgba(0,0,0,.45);
  background:#000;
}
.cover-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.cover-hotspot{
  position:absolute;
  left:24.4%;
  width:56.2%;
  height:6.3%;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cover-hotspot:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
}
.cover-hotspot:active{
  background:rgba(255,255,255,.12);
}
.cover-hotspot.ouropretana{top:48.1%}
.cover-hotspot.baden{top:55.4%}
.cover-hotspot.verace{top:62.7%}
.cover-hotspot.backer{top:70.0%}
.cover-hotspot.krug{top:77.3%}
.cover-hotspot.marianense{top:84.6%}

.page-wrap{
  position:relative;
  width:100%;
  max-width:560px;
}
.page-wrap > img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  box-shadow:0 18px 55px rgba(0,0,0,.56);
  background:#efe7d5;
}
.page-home-hotspot{
  position:absolute;
  left:53%;
  width:35%;
  height:5%;
  bottom:1.5%;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.page-home-hotspot:active{background:rgba(201,151,52,.18)}
.page-home-hotspot.final{
  left:19%;
  width:62%;
  height:8%;
  bottom:43%;
}
.visual-hotspot{position:absolute;border:0;border-radius:999px;cursor:pointer;background:rgba(201,151,52,.9);color:#17100a;font-weight:700;overflow:hidden;-webkit-tap-highlight-color:transparent}
.visual-hotspot.is-invisible{background:transparent;color:transparent}
.visual-hotspot:focus-visible{outline:3px solid #fff;outline-offset:2px}
.visual-hotspot img{width:100%;height:100%;object-fit:contain;box-shadow:none;background:transparent}
.visual-hotspot.is-home-button{background-image:url("pages/pagina-12.webp");background-size:344.83% 2250%;background-position:83.1% 98%;background-repeat:no-repeat;box-shadow:none;color:transparent}
@media(max-width:420px){
  .home-view{padding:4px}
  .cover-wrap{border-radius:8px;max-height:calc(100dvh - 76px)}
}


/* CORREÇÃO V2.1: impede capa e rótulo de aparecerem juntos */
[hidden] {
  display: none !important;
}

/* Ao abrir um fabricante ou avançar, o rótulo começa no topo */
.reader-view:not([hidden]) {
  display: block;
}


/* V2.2 - garantia absoluta de que apenas uma tela apareça por vez */
#homeView[hidden],
#readerView[hidden],
#bottomNav[hidden] {
  display: none !important;
}


/* v3.0.6 — retorno condicional ao portfólio MisArte */
.misarte-return{
  position:fixed;
  z-index:1200;
  top:calc(76px + env(safe-area-inset-top));
  left:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(14,11,8,.88);
  color:#fff;
  font:600 13px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.misarte-return:hover{
  transform:translateY(-2px);
  background:rgba(23,17,11,.96);
  border-color:rgba(204,151,49,.45);
}
.misarte-return[hidden]{
  display:none!important;
}

@media(max-width:640px){
  body:has(#readerView:not([hidden])){height:100dvh;overflow:hidden}
  body:has(#readerView:not([hidden])) #app{height:calc(100dvh - 68px - 60px - var(--safe-bottom))}
  .reader-view:not([hidden]){height:100%;padding:6px 8px}
  .reader-stage{height:100%;min-height:0}
  .page-wrap{height:100%;width:auto;max-width:100%;aspect-ratio:1600/2844}
  .page-wrap > img{width:100%;height:100%;object-fit:contain}
  .bottom-nav{height:calc(60px + var(--safe-bottom));padding:6px 8px var(--safe-bottom)}
  .misarte-return{
    top:calc(70px + env(safe-area-inset-top));
    left:10px;
    min-height:40px;
    padding:9px 12px;
    font-size:12px;
  }
}