/* =========================================================
   LAYOUT ÚNICO — mesma largura, mesmas margens e mesma posição
   do cabeçalho em todas as telas; cada tela cabe na altura do aparelho.
   (Carregado depois de app.css: estas regras têm a palavra final.)
   ========================================================= */
:root{
  --gutter:clamp(16px,5vw,48px);          /* margem lateral única */
  --wrap:100%;                             /* largura útil do conteúdo */
  --form:100%;                             /* largura dos formulários dentro do contêiner */
  --top:max(12px,env(safe-area-inset-top));
  --bottom:max(14px,env(safe-area-inset-bottom));
  --head:52px;                             /* altura da barra de progresso */
  --dock-h:84px;
}
@media (min-width:720px){ :root{ --wrap:760px; --form:100%; --top:max(28px,env(safe-area-inset-top)) } }
@media (min-width:1024px){ :root{ --wrap:1040px; --form:640px; --top:36px } }
@media (min-width:1440px){ :root{ --wrap:1120px; --form:680px; --top:44px } }

/* entrada das telas vem de cima: assim a animação nunca cria rolagem, nem por um instante */
@keyframes scrIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes scrBack{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* sem barra de rolagem visível em lugar nenhum */
html,body,*{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none;width:0;height:0}

/* ---------- contêiner único ---------- */
.home-wrap,.flow,.flow.wide,.flow.grid-screen,.proto-wrap{
  max-width:calc(var(--wrap) + var(--gutter) * 2);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.fields,.brand-card,.mini-preview,.consent,.field,.row2,.swatches,#fEditar,#hugoGate .free{max-width:var(--form)}
.flow-top{height:var(--head);margin-bottom:clamp(10px,2.2svh,22px)}
.steps-bar{flex:1}

/* rótulo da seção: só o nome, sem a bolinha */
.eyebrow::before{display:none}
.eyebrow{gap:0}

/* títulos com o mesmo tamanho em todas as telas do fluxo */
.flow h2{font-size:clamp(24px,calc(4.2vw + 10px),46px);line-height:1.06;text-wrap:balance}
.flow .sub{margin-top:8px}

/* ---------- telas do fluxo ocupam exatamente a altura do aparelho ---------- */
.scr[data-step] .flow,#s-editar .flow{display:flex;flex-direction:column;min-height:100svh;
  padding-top:var(--top);padding-bottom:calc(var(--dock-h) + var(--bottom))}
#s-setor .flow,#s-dor .flow{padding-bottom:var(--bottom);height:100svh;min-height:0}
#s-setor .sector-grid,#s-dor .dor-list{flex:1 1 0}
.fields{margin-top:clamp(12px,2.4svh,22px)}
.field{margin-top:clamp(10px,1.9svh,18px)}
.inp{height:clamp(46px,6.4svh,58px)}
.inp-pre .inp{height:clamp(46px,6.4svh,58px)}
.hint{min-height:0}
.hint:empty{display:none}

/* barra do botão: alinhada com o conteúdo, não com a tela */
.dock{padding:12px var(--gutter) var(--bottom);background:linear-gradient(180deg,rgba(236,237,233,0),var(--bg) 34%)}
.dock .cta{max-width:min(var(--form),var(--wrap));margin:0 auto}
@media (min-width:1024px){
  .dock{padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2));padding-right:max(var(--gutter),calc((100vw - var(--wrap)) / 2))}
  .dock .cta{margin:0}
}
body.light .toast{bottom:calc(var(--dock-h) + var(--bottom) + 6px)}

/* ---------- setores: a grade estica para caber na tela ---------- */
#s-setor .sector-grid{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);align-content:stretch;margin-top:clamp(12px,2.4svh,24px);max-height:640px}
#s-setor .sec{min-height:0;overflow:hidden;container-type:size}
/* card baixo (celular pequeno): some o ícone e fica só o nome, sem cortar texto */
@container (max-height:96px){
  #s-setor .sec-ic,#s-setor .sec-go{display:none}
  #s-setor .sec b{margin-top:auto}
}
#s-setor .free{margin-top:clamp(10px,1.8svh,16px)}
#s-setor .free .inp{height:clamp(44px,6svh,54px)}
#s-setor .free-go{width:clamp(44px,6svh,54px);height:clamp(44px,6svh,54px)}
@media (max-width:719px){
  #s-setor .sector-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  #s-setor .sec{padding:10px;border-radius:18px;justify-content:space-between}
  #s-setor .sec-go{display:none}
  #s-setor .sec-ic{width:30px;height:30px}
  #s-setor .sec-ic svg{width:17px;height:17px}
  #s-setor .sec b{font-size:clamp(11px,3.1vw,12.5px);line-height:1.15;margin-top:6px}
}
@media (min-width:720px) and (max-width:1023px){
  #s-setor .sector-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:820px}
}
@media (min-width:1024px){
  #s-setor .sector-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  #s-setor .sec{min-height:0}
}

/* ---------- dores: os 3 cards dividem a altura disponível ---------- */
#s-dor .dor-list{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);margin-top:clamp(12px,2.4svh,22px);max-height:680px}
#s-dor .dor{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:clamp(12px,1.9svh,22px) clamp(14px,2vw,22px)}
#s-dor .dor h3{flex:1;font-size:clamp(15.5px,calc(1.1vw + 11px),21px);margin-top:clamp(6px,1.2svh,12px)}
#s-dor .dor-foot{margin-top:clamp(8px,1.4svh,16px);padding-top:clamp(8px,1.2svh,12px)}
@media (min-width:1024px){ #s-dor .dor-list{grid-template-columns:repeat(3,minmax(0,1fr));max-height:420px} }

/* ---------- marca: compacta no celular para caber sem rolar ---------- */
@media (max-width:719px){
  .brand-card{margin-top:14px;padding:12px;grid-template-columns:72px 1fr;gap:10px}
  .logo-box{width:72px;height:72px;border-radius:18px}
  .logo-actions .pill-btn{height:36px;font-size:13px;padding:0 12px}
  .logo-status{font-size:11.5px}
  .swatches{gap:8px}
  .sw{width:36px;height:36px}
  .swatches .sw[data-c]:nth-child(n+11){display:none}
  .mini-preview{margin-top:12px}
  .mini-preview .mp-body{display:none}
  .mp-bar{padding:11px 12px}
  .consent{margin-top:12px;padding:11px 12px;font-size:12px}
}

/* ---------- capa: tudo numa tela ---------- */
@media (max-width:959px){
  .home-wrap{display:flex;flex-direction:column;min-height:100svh;padding-top:var(--top);padding-bottom:var(--bottom)}
  .home-grid{flex:1;display:flex;flex-direction:column;min-height:0}
  .home-copy{flex:1;display:flex;flex-direction:column;min-height:0;padding-top:clamp(10px,2.4svh,26px)}
  h1{font-size:clamp(32px,calc(5.4vw + 18px),56px)}
  .lead{margin-top:clamp(8px,1.6svh,14px)}
  /* celular/tablet (toque): desenho sem caixa, sempre inteiro, centrado no espaço livre entre o texto e o botão */
  .home-copy{position:relative}
  .home-copy>h1,.home-copy>.lead,.home-side{position:relative;z-index:1}
  .hero-art{flex:1;height:auto;min-height:0;margin:0;border:0;border-radius:0;background:none;overflow:visible;z-index:0;pointer-events:none}
  .hero-art::before{content:"";position:absolute;inset:-30% -10%;background:radial-gradient(50% 50% at 62% 50%,rgba(205,244,90,.09),transparent 70%),radial-gradient(40% 45% at 30% 55%,rgba(44,207,255,.06),transparent 70%)}
  .hero-art svg{inset:0 auto;left:50%;width:min(100%,560px);height:100%;transform:translateX(-50%)}
  .hero-art .hw{stroke:rgba(255,255,255,.42)}
  /* celular baixo, sem espaço livre: vai para trás do título e do texto */
  .home-copy.hero-bg .hero-art{position:absolute;inset:0;flex:none;opacity:.34}
  .home-copy.hero-bg .hero-art::before{display:none}
}
/* janela reduzida no computador (mouse): o desenho vira o fundo da tela inteira, grande, inteiro e
   centrado na horizontal e na vertical. Janela em pé usa a versão vertical; deitada, a horizontal. */
@media (max-width:959px) and (hover:hover) and (pointer:fine){
  .home-wrap{position:relative}
  .home-copy{position:static}
  .home-top{position:relative;z-index:1}
  .hero-art,.home-copy.hero-bg .hero-art{position:absolute;inset:calc(var(--top) + 30px) 2px var(--bottom);flex:none;opacity:.45}
  .hero-art::before,.home-copy.hero-bg .hero-art::before{display:block;inset:0;background:radial-gradient(55% 42% at 50% 42%,rgba(205,244,90,.10),transparent 70%),radial-gradient(45% 35% at 40% 70%,rgba(44,207,255,.08),transparent 70%)}
  .hero-art svg{inset:auto;left:50%;top:50%;width:78%;height:78%;transform:translate(-50%,-50%)}
  .hero-art .hw{stroke:rgba(255,255,255,.3);stroke-width:1.1}
  .hero-art .art-wide{display:none}
  .hero-art .art-tall{display:block}
}
@media (max-width:959px) and (hover:hover) and (pointer:fine) and (orientation:landscape){
  .hero-art .art-wide{display:block}
  .hero-art .art-tall{display:none}
}
@media (max-width:959px){
  .home-side{margin-top:clamp(12px,2svh,18px)}
  .home-side .home-cta{margin-bottom:clamp(10px,1.8svh,16px)}
  .hcard{padding:clamp(12px,1.9svh,18px)}
  .hcard-actions{margin-top:clamp(10px,1.6svh,16px)}
  .tile{height:auto;min-height:clamp(74px,10svh,88px);padding:11px 12px}
}
@media (min-width:960px){
  .home-wrap{padding-top:var(--top);padding-bottom:var(--bottom)}
  /* uma linha só, centrada na tela; as duas colunas terminam na mesma linha (desenho e cartão do Hugo) */
  .home-grid{min-height:calc(100svh - var(--top) - var(--bottom) - 36px);align-content:center;align-items:end}
  .hero-art{margin-bottom:0}
}

/* ---------- marca no computador: duas colunas para caber na tela ---------- */
@media (min-width:1024px){
  #s-marca .flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-content:start}
  #s-marca .flow>.flow-top,#s-marca .flow>.eyebrow,#s-marca .flow>h2{grid-column:1 / -1}
  #s-marca .brand-card{grid-column:1;grid-row:4;max-width:none}
  #s-marca .flow>.field{grid-column:1;grid-row:5;max-width:none}
  #s-marca .mini-preview{grid-column:2;grid-row:4;max-width:none;margin-top:22px;align-self:start}
  #s-marca .consent{grid-column:2;grid-row:5;max-width:none;align-self:start}
  #s-marca .swatches{max-width:none}
}

/* ---------- protótipo: celular + ações cabem na altura ---------- */
.proto-wrap{padding-top:var(--top);padding-bottom:var(--bottom)}
@media (max-width:719px){
  .proto-top{height:48px}
  .device{--w:clamp(220px,min(86vw,380px,calc((100svh - var(--top) - var(--bottom) - 212px) / 2.07)),380px)}
  .proto-side{position:relative;margin-top:12px;min-height:118px}
  .ticker{position:absolute;left:0;right:0;top:0}
  .tap-hint,.callouts{display:none}
  .proto-actions{margin-top:0;gap:8px}
  .proto-actions .cta{height:54px}
  .row-btns .pill-btn{height:44px}
  .view-copy{font-size:13.5px;margin-bottom:10px}
}
@media (max-width:719px) and (max-height:720px){
  .device{--w:clamp(204px,min(86vw,380px,calc((100svh - var(--top) - var(--bottom) - 184px) / 2.07)),380px)}
  #s-view .view-copy{display:none}
  .proto-side{min-height:106px}
}
@media (min-width:720px){
  .proto-stage{min-height:calc(100svh - var(--top) - var(--bottom) - 60px)}
  .device{--w:clamp(240px,min(46vw,400px,calc((100svh - var(--top) - var(--bottom) - 90px) / 2.07)),400px)}
}

/* ---------- telas baixas (celulares pequenos, notebook com zoom) ---------- */
@media (max-height:720px){
  :root{--head:46px;--dock-h:76px}
  .cta{height:54px}
  .cta .cta-ic{width:40px;height:40px}
  .chip{height:36px;padding:0 13px;font-size:13.5px}
  .field>label{margin-bottom:6px;font-size:12.5px}
  #s-dor .sub{display:none}
}
@media (max-height:620px){
  .flow h2{font-size:clamp(21px,calc(3.6vw + 9px),36px)}
  .eyebrow{font-size:10.5px}
}

/* ---------- cartão do Hugo (wallet) no computador: maior e centrado como um bloco só ---------- */
@media (min-width:900px){
  /* o conjunto inteiro (X, cartão, botões e "Compartilhar") fica no centro da tela, com a mesma
     folga em cima e embaixo. Distância X → cartão = distância cartão → botões (--wg). */
  .wallet{--wg:48px;--wx:48px;place-items:safe center;overflow-y:auto}
  .wallet-body{width:clamp(380px,min(86vw,720px,calc((100svh - 400px) * 1.68)),720px);padding-top:calc(var(--wx) + var(--wg))}
  .wallet-x{top:0;width:var(--wx);height:var(--wx)}
  .bc-hint{margin-top:14px;height:20px;line-height:20px;font-size:13.5px}
  .wallet-actions{margin-top:calc(var(--wg) - 34px);gap:12px}
  .wallet-row{gap:12px}
  .wbtn{height:64px;font-size:17px;gap:11px}
  .wbtn svg{width:22px;height:22px}
  .wbtn.dl{min-width:56%}
  .wshare{margin-top:0;font-size:15px}
  .wshare svg{width:19px;height:19px}
}
}