/* ============================================================
   MED ESTÚDIO — base compartilhada do redesign
   Tokens, topo, menu de setores, botões e rodapé. Toda página
   (home, catálogo de brindes, páginas de setor) carrega este arquivo.

   SETOR DA PÁGINA: <html data-setor="brindes"> faz a página inteira
   "morar" na área daquele setor — o botão do menu fica preenchido,
   e --setor / --setor-claro / --setor-texto passam a valer a cor dele.
   ============================================================ */
:root{
  --fundo:#FFFFFF;
  --fundo-2:#F5F5F7;
  --texto:#1D1D1F;
  --texto-2:#6E6E73;
  --texto-3:#86868B;
  --linha:#E3E3E6;
  --linha-forte:#D2D2D7;

  /* setores — paleta FLÚOR em teste (01/10/2026). Mesmo peso visual, nenhum "principal".
     Regra: texto SEMPRE preto sobre a cor do setor. --x-texto é a versão escura,
     só para texto pequeno sobre fundo branco (código de produto, links). */
  --camisetas:#3DA5FF;  --camisetas-claro:#E8F4FF;  --camisetas-texto:#0A66C9;
  --brindes:#FF5F1F;    --brindes-claro:#FFEDE5;    --brindes-texto:#C2410C;
  --grafica:#FF3EA5;    --grafica-claro:#FFE8F4;    --grafica-texto:#C2185B;
  --evento:#C8F04A;     --evento-claro:#F4FBDD;     --evento-texto:#4A6600;   /* o verde-limão da marca */

  /* cor do setor da página (neutra quando a página não é de setor) */
  --setor:var(--texto); --setor-claro:var(--fundo-2); --setor-texto:var(--texto); --setor-tinta:#fff; /* sobre cor de setor: sempre branco */

  --raio:20px;
  --raio-p:12px;
  --fonte:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-setor="camisetas"]{--setor:var(--camisetas);--setor-claro:var(--camisetas-claro);--setor-texto:var(--camisetas-texto)}
[data-setor="brindes"]  {--setor:var(--brindes);  --setor-claro:var(--brindes-claro);  --setor-texto:var(--brindes-texto)}
[data-setor="grafica"]  {--setor:var(--grafica);  --setor-claro:var(--grafica-claro);  --setor-texto:var(--grafica-texto)}
[data-setor="evento"]   {--setor:var(--evento);   --setor-claro:var(--evento-claro);   --setor-texto:var(--evento-texto)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fonte);color:var(--texto);background:var(--fundo);-webkit-font-smoothing:antialiased;line-height:1.45}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.cx{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--linha)}
.topo .cx{display:flex;align-items:center;justify-content:space-between;height:60px;gap:24px}
.topo .logo{display:flex;align-items:center}
.topo .logo img{height:34px;width:auto} /* logo horizontal (M + MED Estúdio) */
.menu{display:flex;gap:10px;font-size:14px}
/* botão de setor: contorno na cor, texto cinza; no hover preenche e o texto fica branco */
.menu a{--c:var(--texto);display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px;color:var(--texto-2);box-shadow:inset 0 0 0 1.5px var(--c);transition:background .2s,color .2s}
.menu a:hover,.menu a:focus-visible,.menu a[aria-current="page"]{background:var(--c);color:var(--texto);outline:none}
.menu .m-camisetas{--c:var(--camisetas)} .menu .m-brindes{--c:var(--brindes)}
.menu .m-grafica{--c:var(--grafica)}     .menu .m-evento{--c:var(--evento)}
.abrir-menu{display:none;background:none;border:0;font-size:14px;cursor:pointer}

/* logo branco só aparece no topo colorido */
.topo .logo .logo-branco{display:none}
[data-setor] .topo .logo .logo-preto{display:none}
[data-setor] .topo .logo .logo-branco{display:block}

/* ---------- topo na cor do setor ----------
   Em qualquer página de um grupo de produto (<html data-setor="...">) o topo inteiro
   vira a cor do setor: é a placa de "você está nesta área". */
[data-setor] .topo{background:var(--setor);border-bottom-color:transparent;color:var(--setor-tinta);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-setor] .menu a{color:var(--setor-tinta);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--setor-tinta) 45%,transparent)}
[data-setor] .menu a:hover,[data-setor] .menu a:focus-visible{background:color-mix(in srgb,var(--setor-tinta) 16%,transparent);color:var(--setor-tinta)}
[data-setor] .menu a[aria-current="page"]{background:var(--setor-tinta);color:var(--setor);box-shadow:none}
[data-setor] .idiomas{background:color-mix(in srgb,var(--setor-tinta) 18%,transparent)}
[data-setor] .idiomas a{color:color-mix(in srgb,var(--setor-tinta) 75%,transparent)}
[data-setor] .idiomas a:hover{color:var(--setor-tinta)}
[data-setor] .idiomas a[aria-current="true"]{background:var(--setor-tinta);color:var(--setor)}
[data-setor] .menu.aberto{background:var(--setor)}
[data-setor] .topo .btn{background:#fff;color:var(--setor-texto)}
[data-setor] .abrir-menu{color:#fff}

/* ---------- idiomas (ao lado do Pedir orçamento) ----------
   Códigos de idioma e não bandeira: bandeira é país, não língua (espanhol de onde?),
   e no Windows emoji de bandeira aparece como "BR"/"US". */
.topo-acoes{display:flex;align-items:center;gap:12px}
.idiomas{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--fundo-2);font-size:12px;font-weight:600;letter-spacing:.04em}
.idiomas a{padding:5px 9px;border-radius:999px;color:var(--texto-3);transition:color .2s,background .2s}
.idiomas a:hover{color:var(--texto)}
.idiomas a[aria-current="true"]{background:var(--fundo);color:var(--texto);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;padding:10px 18px;border:0;border-radius:999px;background:var(--texto);color:#fff;cursor:pointer;transition:opacity .2s}
.btn:hover{opacity:.85}
.btn-linha{background:transparent;color:var(--texto);box-shadow:inset 0 0 0 1.5px var(--texto)}
.btn-setor{background:var(--setor);color:var(--setor-tinta)}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha);padding:28px 0 40px;font-size:13px;color:var(--texto-2)}
.rodape .cx{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rodape a:hover{color:var(--texto)}


/* topo com logo horizontal: nada quebra linha; em telas médias o menu encolhe e os botões de visualização saem */
.menu a,.topo .btn,.idiomas a{white-space:nowrap}
@media (max-width:1180px) and (min-width:901px){
  .topo .cx{gap:14px}
  .menu{gap:6px}
  .menu a{padding:6px 11px;font-size:13px}
  .topo .logo img{height:30px}
  .visualizar{display:none}
}

@media (max-width:900px){
  .menu{display:none}
  .menu.aberto{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:60px;left:0;right:0;background:#fff;padding:20px 24px;gap:12px;border-bottom:1px solid var(--linha)}
  .abrir-menu{display:block}
  .topo .btn{display:none}
}
@media (max-width:480px){ .cx{padding:0 16px} .topo .logo img{height:29px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} }
/* idioma ainda sem versão traduzida: aparece, mas não navega */
.idiomas a[aria-disabled="true"]{cursor:default;opacity:.55}
.idiomas a[aria-disabled="true"]:hover{color:inherit}

/* limão flúor some no branco: só o contorno (fora do topo colorido) ganha um tom mais fechado */
.menu .m-evento{box-shadow:inset 0 0 0 1.5px #A6CC2E}
[data-setor] .menu .m-evento{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--setor-tinta) 45%,transparent)}
[data-setor] .menu .m-evento[aria-current="page"]{box-shadow:none}

/* ---------- visualizar como (TEMPORÁRIO, fase de desenvolvimento) ----------
   Botões desktop / tablet / celular ao lado dos idiomas. Abrem a própria página
   num quadro com a largura do aparelho. Para esconder: remover o
   <script src=".../visualizar.js"> das páginas (o botão é criado por ele). */
.visualizar{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--fundo-2)}
.visualizar button{display:flex;align-items:center;justify-content:center;width:28px;height:24px;border:0;border-radius:999px;background:none;color:var(--texto-3);cursor:pointer}
.visualizar button:hover{color:var(--texto)}
.visualizar button[aria-pressed="true"]{background:var(--fundo);color:var(--texto);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.visualizar svg{width:15px;height:15px}
[data-setor] .visualizar{background:color-mix(in srgb,var(--setor-tinta) 18%,transparent)}
[data-setor] .visualizar button{color:color-mix(in srgb,var(--setor-tinta) 75%,transparent)}
[data-setor] .visualizar button[aria-pressed="true"]{background:var(--setor-tinta);color:var(--setor)}
.vis-palco{position:fixed;inset:0;z-index:200;background:#2A2A2C;display:flex;flex-direction:column;align-items:center;padding:16px}
.vis-barra{display:flex;align-items:center;gap:12px;color:#fff;font-size:13px;margin-bottom:12px}
.vis-barra button{background:#fff;color:#1D1D1F;border:0;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;cursor:pointer}
.vis-palco iframe{flex:1;border:0;border-radius:24px;background:#fff;box-shadow:0 0 0 10px #111,0 20px 60px rgba(0,0,0,.5);max-height:100%}
@media (max-width:900px){ .visualizar{display:none} }

/* ============================================================
   CARRINHO ÚNICO DE ORÇAMENTO (assets/js/orcamento.js)
   ============================================================ */
.orc-topo{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:999px;background:var(--fundo-2);color:var(--texto);cursor:pointer}
.orc-topo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.orc-topo-n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--texto);color:#fff;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center}
.orc-topo.tem .orc-topo-n{display:inline-flex}
[data-setor] .orc-topo{background:color-mix(in srgb,var(--setor-tinta) 18%,transparent);color:var(--setor-tinta)}
[data-setor] .orc-topo-n{background:#fff;color:var(--setor-texto)}

/* barra fixa: sinal forte para fechar o orçamento */
.orc-barra{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;gap:18px;padding:10px 10px 10px 22px;border-radius:999px;background:var(--texto);color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.28);font-size:15px;max-width:calc(100% - 32px)}
.orc-barra[hidden]{display:none}
.orc-barra-btn{border:0;border-radius:999px;padding:11px 20px;background:var(--limao);color:var(--texto);font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}
.orc-barra-btn:hover{filter:brightness(1.05)}
body.com-orcamento{padding-bottom:84px}
.orc-flutuante{display:none!important} /* o catálogo usa a barra única agora */

/* aviso rápido "adicionado" */
.orc-aviso{position:fixed;left:50%;top:84px;transform:translate(-50%,-12px);z-index:95;background:var(--texto);color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:calc(100% - 32px);text-align:center}
.orc-aviso.visivel{opacity:1;transform:translate(-50%,0)}

/* painel lateral */
.orc-g-painel{position:fixed;inset:0;z-index:100;display:flex;justify-content:flex-end;background:rgba(29,29,31,.38);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.orc-g-painel[hidden]{display:none}
.orc-g-caixa{width:min(480px,100%);height:100%;background:var(--fundo);display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.14)}
.orc-g-cab{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--linha)}
.orc-g-cab h2{font-size:22px;letter-spacing:-.03em}
.orc-g-fechar{width:36px;height:36px;border:0;border-radius:999px;background:var(--fundo-2);cursor:pointer;font-size:14px}
.orc-g-corpo{flex:1;overflow-y:auto;padding:16px 24px}
.orc-g-lista{list-style:none;display:flex;flex-direction:column;gap:10px}
.orc-g-item{display:flex;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--linha);border-radius:var(--raio-p);border-left:4px solid var(--linha-forte)}
.orc-g-item.s-brindes{border-left-color:var(--brindes)} .orc-g-item.s-camisetas{border-left-color:var(--camisetas)}
.orc-g-item.s-grafica{border-left-color:var(--grafica)} .orc-g-item.s-evento{border-left-color:var(--evento)}
.orc-g-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.orc-g-setor{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3)}
.orc-g-info b{font-size:15px;letter-spacing:-.01em;overflow-wrap:anywhere}
.orc-g-info small{font-size:13px;color:var(--texto-2)}
.orc-g-skus{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.orc-g-skus span{font-size:12px;color:var(--texto-2);background:var(--fundo-2);border-radius:6px;padding:2px 7px}
.orc-g-skus code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11.5px;color:var(--texto)}
.orc-g-acoes{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.orc-g-acoes input{width:64px;padding:6px;text-align:center;border:1px solid var(--linha-forte);border-radius:8px}
.orc-g-pecas{font-size:13px;font-weight:600;white-space:nowrap}
.orc-g-remover{background:none;border:0;color:var(--texto-3);font-size:12px;text-decoration:underline;cursor:pointer}
.orc-g-vazio{padding:40px 0;text-align:center;color:var(--texto-3)}
.orc-g-alerta{margin-top:12px;padding:10px 14px;border-radius:var(--raio-p);background:#FFF4E5;color:#8A4B00;font-size:13.5px}
.orc-g-form{display:flex;flex-direction:column;gap:6px;margin-top:20px;padding-top:18px;border-top:1px solid var(--linha)}
.orc-g-form[hidden]{display:none}
.orc-g-form label{font-size:12.5px;color:var(--texto-2);margin-top:6px}
.orc-g-form input,.orc-g-form textarea{padding:10px 12px;border:1px solid var(--linha-forte);border-radius:var(--raio-p);font-size:15px;background:var(--fundo)}
.orc-g-form input:focus,.orc-g-form textarea:focus{outline:none;border-color:var(--texto)}
.orc-g-form textarea{min-height:64px;resize:vertical}
.orc-g-status{font-size:14px;margin-top:12px;min-height:1em}
.orc-g-status.ok{color:#1B7A3A;font-weight:600}
.orc-g-status.erro{color:#C23B3B}
.orc-g-rodape{display:flex;gap:10px;padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linha)}
.orc-g-rodape[hidden]{display:none}
.orc-g-rodape .btn{flex:1}
@media (max-width:480px){
  .orc-barra{gap:10px;padding-left:16px;font-size:14px}
  .orc-barra-btn{padding:10px 14px;font-size:14px}
  .orc-topo{width:36px;height:36px}
}