/* Laboratório Marlex: vitrine 3D */
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/montserrat-latin-500-normal.woff2) format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/montserrat-latin-700-normal.woff2) format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap; src:url(../fonts/montserrat-latin-800-normal.woff2) format('woff2'); }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:300; font-display:swap; src:url(../fonts/roboto-latin-300-normal.woff2) format('woff2'); }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/roboto-latin-400-normal.woff2) format('woff2'); }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/roboto-latin-500-normal.woff2) format('woff2'); }

:root{
  --marinho:#1A234A; --noite:#0E1530; --bronze:#DDA16C; --bronze-escuro:#C4814A; --ouro:#C9A968;
  --gelo:#F4F7FB; --suave:rgba(244,247,251,.8); --apagado:rgba(244,247,251,.6); --fio:rgba(255,255,255,.16);
  --veu:12,19,44; --selo:#F2C230;
  --bg:#121A3A;
  --titulo:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --texto:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0E1530; } }
:root[data-theme="dark"]{ --bg:#0E1530; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth; scroll-snap-type:y proximity; }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--bg); color:var(--gelo); font-family:var(--texto); font-weight:400; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

/* palco 3D */
#palco{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; touch-action:pan-y; cursor:grab;
  background:
    radial-gradient(55% 42% at 86% 100%, rgba(196,129,74,.2) 0%, rgba(196,129,74,0) 70%),
    radial-gradient(120% 85% at 60% 22%, #283873 0%, #1A234A 46%, var(--bg) 100%); }
#palco.arrastando{ cursor:grabbing; }
#palco.sobre{ cursor:pointer; }

/* topo */
.topo{ position:fixed; top:0; left:0; right:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:calc(14px + env(safe-area-inset-top,0px)) clamp(18px,3vw,40px) 14px; pointer-events:none; transition:background .3s; }
.topo.fixa{ background:rgba(var(--veu),.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.topo > *{ pointer-events:auto; }
.marca{ display:block; line-height:0; text-decoration:none; border-radius:4px; }
.marca img{ display:block; height:clamp(34px, 2.6vw, 46px); width:auto; }
nav{ display:flex; gap:clamp(14px,1.8vw,26px); align-items:center; }
nav a{ color:#fff; text-decoration:none; font-size:15px; }
nav a:hover{ color:var(--bronze); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:500 15px/1 var(--texto); padding:13px 20px; border-radius:999px;
  text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .2s,color .2s,border-color .2s; pointer-events:auto; }
.btn-bronze{ background:var(--bronze); color:#18130E; box-shadow:0 8px 26px rgba(221,161,108,.26); }
.btn-bronze:hover{ background:var(--bronze-escuro); }
.btn-linha{ border-color:rgba(255,255,255,.42); color:#fff; background:transparent; }
.btn-linha:hover{ border-color:#fff; }
.btn svg{ width:18px; height:18px; flex:none; }
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }

/* etapas da página */
main{ position:relative; z-index:1; pointer-events:none; }
.etapa{ min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:clamp(96px,13vh,150px) 5vw clamp(48px,8vh,90px); scroll-snap-align:start; }
.etapa[data-lado="dir"]{ justify-content:flex-end; }
.copy{ width:min(41vw, 540px); opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.copy.vista{ opacity:1; transform:none; }
h1{ font:800 clamp(34px, 1.9vw + 24px, 64px)/1.04 var(--titulo); letter-spacing:-.025em; margin:0 0 22px; color:#fff; text-wrap:balance; text-shadow:0 6px 40px rgba(10,16,38,.65); }
h2{ font:700 clamp(28px, 1.2vw + 20px, 46px)/1.06 var(--titulo); letter-spacing:-.02em; margin:0 0 14px; color:#fff; text-wrap:balance; text-shadow:0 4px 30px rgba(10,16,38,.6); }
p{ font-size:clamp(16px, .35vw + 13px, 19px); margin:0 0 12px; color:var(--suave); max-width:46ch; text-shadow:0 2px 14px rgba(10,16,38,.5); }
.destaque{ color:#fff; font-size:clamp(17px, .45vw + 13px, 21px); line-height:1.5; }
.intro{ margin-bottom:18px; }
.acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; pointer-events:auto; }
.dica{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--apagado); margin-top:26px; }
.dica svg{ width:22px; height:22px; flex:none; opacity:.8; }

/* linhas (filtros) */
.linhas{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; pointer-events:auto; }
.opcao{ font:500 15px/1 var(--texto); padding:11px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.34); background:rgba(var(--veu),.38); color:#fff; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.opcao:hover{ border-color:#fff; }
.opcao[aria-pressed="true"]{ background:var(--bronze); border-color:var(--bronze); color:#18130E; }

/* vitrine: o produto em destaque */
.vitrine{ pointer-events:auto; position:relative; padding:20px 22px 18px; border-radius:20px; background:rgba(var(--veu),.58); border:1px solid var(--fio);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); touch-action:pan-y; }
.vitrine::before{ content:''; position:absolute; left:22px; right:22px; top:0; height:2px; border-radius:2px; background:var(--cor, var(--bronze)); opacity:.9; transition:background .5s; }
.v-linha{ font-size:14px; color:var(--ouro); margin:0 0 4px; text-shadow:none; }
.v-nome{ font:700 clamp(24px, .8vw + 19px, 34px)/1.1 var(--titulo); letter-spacing:-.01em; margin:0 0 12px; color:#fff; min-height:1.1em; }
.v-desc{ font-size:15px; color:var(--suave); margin:0 0 14px; text-shadow:none; }
.v-selos{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:0 0 16px; }
.v-selos li{ font:600 13px/1.15 var(--texto); padding:7px 10px; border-radius:7px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#fff; }
.v-selos li.forte{ background:var(--selo); border-color:var(--selo); color:#13204C; }
.v-comp{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px; margin:0 0 16px; }
.v-comp div{ padding:8px 10px; border-radius:8px; border:1px solid rgba(201,169,104,.5); }
.v-comp b{ display:block; font:700 13px/1.2 var(--titulo); color:#fff; }
.v-comp span{ font-size:12.5px; color:var(--suave); }
.v-ctrl{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.seta{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.34); background:transparent; color:#fff; display:inline-grid; place-items:center; cursor:pointer; transition:border-color .2s, background .2s; padding:0; }
.seta:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.seta svg{ width:18px; height:18px; }
.v-conta{ font-variant-numeric:tabular-nums; color:var(--apagado); min-width:54px; text-align:center; font-size:14px; }
.v-ctrl .btn{ margin-left:auto; }
.troca{ animation:troca .45s cubic-bezier(.2,.7,.2,1); }
@keyframes troca{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* indicador lateral */
.etapas{ position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:4; display:flex; flex-direction:column; gap:14px; margin:0; padding:0; list-style:none; }
.ponto{ width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.55); background:transparent; padding:0; cursor:pointer; transition:background .25s,border-color .25s,transform .25s; }
.ponto.ativo{ background:var(--bronze); border-color:var(--bronze); transform:scale(1.35); }

footer{ position:relative; z-index:1; padding:20px 5vw calc(30px + env(safe-area-inset-bottom,0px)); pointer-events:auto; }
footer p{ font-size:13px; color:rgba(244,247,251,.55); max-width:70ch; text-shadow:none; }

/* leitor de embalagem */
.leitor{ position:fixed; inset:0; z-index:20; display:grid; grid-template-columns:minmax(0,1fr) min(420px, 38vw); background:#080D20; color:var(--gelo); }
.leitor[hidden]{ display:none; }
.leitor-palco{ position:relative; overflow:hidden; touch-action:none; cursor:zoom-in;
  background:radial-gradient(60% 60% at 50% 45%, rgba(var(--cor-rgb, 221,161,108), .16), rgba(8,13,32,0) 70%); }
.leitor-palco.ampliado{ cursor:grab; }
.leitor-palco.movendo{ cursor:grabbing; }
.leitor-img{ position:absolute; left:0; top:0; transform-origin:0 0; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; will-change:transform; filter:drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.leitor-zoom{ position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); display:flex; gap:8px; align-items:center;
  padding:6px; border-radius:999px; background:rgba(var(--veu),.82); border:1px solid var(--fio); }
.zbtn{ min-width:44px; height:44px; border-radius:999px; border:0; background:transparent; color:#fff; cursor:pointer; font:500 15px/1 var(--texto); padding:0 14px; }
.zbtn:hover{ background:rgba(255,255,255,.08); }
.zbtn svg{ width:18px; height:18px; display:block; margin:auto; }
.leitor-dica{ position:absolute; left:0; right:0; top:calc(18px + env(safe-area-inset-top,0px)); text-align:center; margin:0 auto; padding:0 70px; font-size:13.5px; color:var(--apagado); max-width:none; text-shadow:none; pointer-events:none; }
.leitor-info{ overflow:auto; padding:calc(30px + env(safe-area-inset-top,0px)) clamp(22px,2.4vw,34px) 28px; border-left:1px solid var(--fio); background:rgba(var(--veu),.55); }
.lt-grupo{ font-size:14px; color:var(--ouro); margin:0 0 6px; text-shadow:none; }
.leitor-info h2{ font-size:clamp(26px, 1vw + 18px, 36px); margin:0 0 6px; text-shadow:none; padding-right:44px; }
.lt-tipo{ margin:0 0 18px; color:var(--suave); text-shadow:none; font-size:16px; }
.leitor-info h3{ font:600 15px/1.2 var(--titulo); color:#fff; margin:22px 0 10px; }
.lt-selos{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.lt-selos li{ position:relative; padding:9px 12px 9px 34px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); font-size:15px; }
.lt-selos li::before{ content:''; position:absolute; left:13px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:var(--cor, var(--bronze)); }
.lt-comp{ display:grid; gap:6px; }
.lt-comp div{ display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:9px; border:1px solid rgba(201,169,104,.45); }
.lt-comp b{ font:700 15px/1.2 var(--titulo); }
.lt-comp span{ color:var(--suave); font-variant-numeric:tabular-nums; text-align:right; }
.lt-desc{ margin:18px 0 6px; font-size:15px; color:var(--suave); text-shadow:none; }
.lt-nota{ font-size:13px; color:var(--apagado); text-shadow:none; }
.lt-nav{ display:flex; align-items:center; gap:10px; margin-top:22px; }
.leitor-fechar{ position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:14px; z-index:2; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(var(--veu),.8); color:#fff; display:grid; place-items:center; cursor:pointer; }
.leitor-fechar svg{ width:20px; height:20px; }

/* celular e telas em pé: produto em cima, texto embaixo */
@media (max-width:720px), (max-aspect-ratio:4/5){
  nav .some{ display:none; }
  .etapa, .etapa[data-lado="dir"]{ align-items:flex-end; justify-content:flex-start; padding:88px 18px 40px; }
  .copy{ width:100%; padding-top:120px;
    background:linear-gradient(to top, rgba(var(--veu),.86) 0%, rgba(var(--veu),.7) 52%, rgba(var(--veu),.3) 80%, rgba(var(--veu),0) 100%); }
  h1{ font-size:clamp(30px, 8.4vw, 44px); }
  h2{ font-size:clamp(25px, 7vw, 34px); }
  .intro, .v-desc{ display:none; }
  .vitrine{ padding:16px 16px 14px; }
  .v-nome{ font-size:clamp(22px, 6.4vw, 28px); margin-bottom:10px; }
  .v-selos{ margin-bottom:12px; }
  .v-selos li:nth-child(n+4){ display:none; }
  .v-comp{ display:none; }
  .etapas{ right:8px; gap:12px; }
  .ponto{ width:7px; height:7px; }
  .leitor{ grid-template-columns:1fr; grid-template-rows:minmax(0,58fr) minmax(0,42fr); }
  .leitor-info{ border-left:0; border-top:1px solid var(--fio); padding-top:20px; }
  .leitor-info h2{ padding-right:0; }
}
/* telas muito grandes (monitores 2K e 4K): texto e vitrine acompanham o tamanho */
@media (min-width:2200px) and (min-height:1000px){
  .copy{ width:min(33vw, 720px); }
  h1{ font-size:clamp(64px, 2.6vw + 20px, 86px); }
  h2{ font-size:clamp(46px, 1.6vw + 20px, 62px); }
  p{ font-size:21px; }
  .destaque{ font-size:24px; }
  .v-linha{ font-size:16px; }
  .v-nome{ font-size:42px; }
  .v-desc{ font-size:18px; }
  .v-selos li{ font-size:15.5px; padding:9px 13px; }
  .v-comp b{ font-size:15px; } .v-comp span{ font-size:14.5px; }
  .opcao{ font-size:17px; padding:13px 20px; }
  .btn{ font-size:17px; padding:15px 24px; }
  .seta{ width:52px; height:52px; }
  nav a{ font-size:17px; }
  .vitrine{ padding:28px 30px 24px; border-radius:24px; }
  .dica{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .copy{ transition:none; opacity:1; transform:none; }
  .troca{ animation:none; }
  .btn,.opcao,.ponto,.topo,.seta{ transition:none; }
}