/* Loja de carimbos — estilo único para loja e painel. Sem fontes pagas: pilha do sistema. */
:root {
  /* XT Carimbos: vinho, laranja e creme da marca */
  --papel: #f8f2e6;
  --papel-2: #f0e5cf;
  --mesa: #e8dabd;
  --tinta: #6e1719;       /* vinho da marca */
  --tinta-2: #8e2a22;
  --borracha: #d9660f;    /* laranja da marca (tom mais escuro p/ contraste com texto branco) */
  --laranja: #f0821e;
  --creme: #ecd9a2;
  --texto: #2a1813;
  --texto-2: #6a574b;
  --linha: #e2d4b8;
  --branco: #fffcf6;
  --ok: #1e7a3a;
  --erro: #c0262d;
  --aviso: #8a5a00;
  --azul: #1f6feb;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(40, 30, 10, .06), 0 4px 16px rgba(40, 30, 10, .06);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Liberation Sans", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: 16px; line-height: 1.5; color: var(--texto); background: var(--papel); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; outline: none; }
a { color: var(--tinta-2); }
a:hover { color: var(--borracha); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
h1 small, h2 small { font-size: .55em; font-weight: 500; color: var(--texto-2); letter-spacing: 0; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
code { font-family: var(--mono); font-size: .9em; background: var(--papel-2); padding: 0 .3em; border-radius: 4px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.pular { position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff; padding: .5em 1em; z-index: 99; }
.pular:focus { left: 0; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* topo */
.topo { background: var(--tinta); color: #fff; position: sticky; top: 0; z-index: 30; }
.topo-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; }
.marca:hover { color: #fff; }
.marca-selo { width: 26px; height: 26px; border-radius: 50%; border: 3px double #f3d9c9; box-shadow: inset 0 0 0 3px var(--borracha); }
.marca-logo { height: 42px; width: auto; display: block; }
.marca-txt { display: grid; line-height: 1.05; }
.marca-txt b { font-size: 1.15rem; letter-spacing: .03em; }
.marca-txt small { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--creme); opacity: .9; }
.menu { display: flex; gap: .2rem; align-items: center; flex-wrap: wrap; }
.menu a, .menu .btn-txt { white-space: nowrap; color: #e8efe9; text-decoration: none; padding: .4rem .7rem; border-radius: 8px; font-size: .95rem; background: none; border: 0; cursor: pointer; font: inherit; }
.menu a:hover, .menu a.ativo { background: rgba(255,255,255,.12); color: #fff; }
.badge { display: inline-block; min-width: 1.4em; text-align: center; background: var(--borracha); color: #fff; border-radius: 99px; font-size: .78rem; padding: 0 .35em; font-weight: 700; }
.rodape { border-top: 1px solid var(--linha); color: var(--texto-2); font-size: .85rem; margin-top: 3rem; }
.rodape-in { max-width: 1240px; margin: 0 auto; padding: 1.2rem 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
body.com-barra .rodape { padding-bottom: 96px; }
@media (min-width: 901px) { body.com-barra .rodape { padding-bottom: 0; } }

/* blocos */
.pagina { max-width: 1240px; margin: 0 auto; padding: 1.2rem 1rem 2rem; }
.pagina.estreita { max-width: 640px; }
.pagina.larga { max-width: 1400px; }
.bloco { max-width: 1240px; margin: 0 auto; padding: 1.4rem 1rem; }
.lead { font-size: 1.1rem; color: var(--texto-2); max-width: 60ch; }
.sub { color: var(--texto-2); margin: .1rem 0 .4rem; font-size: .92rem; }
.dica { color: var(--texto-2); font-size: .88rem; }
.vazio { color: var(--texto-2); padding: 1rem 0; }
.carregando { padding: 3rem 1rem; text-align: center; color: var(--texto-2); }
.trilha { font-size: .88rem; color: var(--texto-2); margin-bottom: .6rem; display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.trilha a { color: var(--texto-2); }
.trilha .trocar { margin-left: auto; }
.tag { display: inline-block; font-size: .75rem; background: var(--papel-2); border: 1px solid var(--linha); border-radius: 99px; padding: 0 .55em; color: var(--texto-2); }
.preco { font-weight: 700; color: var(--tinta); }
.preco.grande { font-size: 1.8rem; margin: .2rem 0 .6rem; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; font: inherit; font-weight: 600; padding: .55em 1em; border-radius: 8px; border: 1.5px solid var(--tinta-2); background: var(--branco); color: var(--tinta); cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { background: var(--papel-2); color: var(--tinta); }
.btn-pri { background: var(--borracha); border-color: var(--borracha); color: #fff; }
.btn-pri:hover { background: #9e3624; border-color: #9e3624; color: #fff; }
.btn-sec { border-color: var(--linha); }
.btn-sm { font-size: .85rem; padding: .35em .7em; }
.btn-grande { font-size: 1.05rem; padding: .75em 1.3em; }
.btn-txt { border: 0; background: none; color: var(--texto-2); text-decoration: underline; cursor: pointer; font: inherit; padding: .3em .5em; }
.btn:disabled, .btn.btn-off { opacity: .55; }
.btn:disabled { cursor: not-allowed; }
.ico { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--linha); border-radius: 7px; background: var(--branco); cursor: pointer; padding: 0; color: var(--texto); font-size: 1rem; }
.ico svg { width: 15px; height: 15px; fill: currentColor; }
.ico:hover { background: var(--papel-2); }
.ico:disabled { opacity: .35; cursor: default; }

/* formulários */
.form { display: grid; gap: .8rem; max-width: 640px; }
label { display: grid; gap: .25rem; font-size: .9rem; font-weight: 600; color: var(--texto); }
input, select, textarea { font: inherit; font-weight: 400; padding: .55em .65em; border: 1.5px solid var(--linha); border-radius: 8px; background: #fff; color: var(--texto); width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--tinta-2); outline: none; box-shadow: 0 0 0 3px rgba(45, 81, 73, .18); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--borracha); }
input[type=range] { padding: 0; border: 0; accent-color: var(--tinta-2); }
input.upper, textarea.upper { text-transform: uppercase; }
input.upper::placeholder, textarea.upper::placeholder { text-transform: none; }
.chk { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.chks { display: flex; flex-wrap: wrap; gap: .3rem 1rem; border: 0; padding: 0; margin: 0; }
fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem 1rem 1rem; margin: 0; display: grid; gap: .7rem; background: var(--branco); }
legend { font-weight: 700; padding: 0 .4rem; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.linha3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.form-erro { color: var(--erro); font-weight: 600; min-height: 1.2em; margin: 0; }
.aviso-ok { background: #e6f3ea; border: 1px solid #b7dcc2; color: #1a5a2c; padding: .7rem 1rem; border-radius: var(--raio); margin: .6rem 0; }
.aviso-erro { background: #fbe9e7; border: 1px solid #efbdb5; color: #8c1d14; padding: .7rem 1rem; border-radius: var(--raio); margin: .6rem 0; }
.aviso { background: #fdf5e1; border: 1px solid #ecd59a; color: #5f4300; padding: .7rem 1rem; border-radius: var(--raio); margin: .6rem 0; }
.aviso ul, .aviso-erro ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* home */
.hero { max-width: 1240px; margin: 0 auto; padding: 2.4rem 1rem 1.2rem; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); color: var(--tinta); }
.hero-acoes { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.hero-arte { display: grid; place-items: center; }
.hero-carimbo { width: min(320px, 80vw); aspect-ratio: 58/22; border: 6px solid var(--borracha); border-radius: 6px; color: var(--borracha); display: grid; place-content: center; text-align: center; transform: rotate(-6deg); opacity: .88; box-shadow: inset 0 0 0 3px var(--papel), inset 0 0 0 5px var(--borracha); filter: url(#none); background: repeating-linear-gradient(115deg, transparent 0 7px, rgba(247,244,238,.25) 7px 9px); }
.hero-carimbo span { font-weight: 900; font-size: clamp(1.6rem, 5vw, 2.6rem); letter-spacing: .12em; }
.hero-carimbo small { font-weight: 700; letter-spacing: .2em; font-size: .7rem; }
.grade-uso { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.card-uso { display: grid; gap: .2rem; padding: 1rem; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); text-decoration: none; color: var(--texto); box-shadow: var(--sombra); }
.card-uso b { color: var(--tinta); font-size: 1.05rem; }
.card-uso span { font-size: .88rem; color: var(--texto-2); }
.card-uso:hover { border-color: var(--tinta-2); color: var(--texto); }
.card-uso.livre { background: var(--tinta); border-color: var(--tinta); }
.card-uso.livre b, .card-uso.livre span { color: #fff; }
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; padding: 0; list-style: none; counter-reset: p; }
.passos li { counter-increment: p; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; display: grid; gap: .3rem; }
.passos li::before { content: counter(p); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--borracha); color: var(--borracha); font-weight: 800; }
.passos span { color: var(--texto-2); font-size: .92rem; }

/* aparelhos */
.grade-aparelhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.card-aparelho { display: grid; grid-template-rows: 150px auto; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; text-decoration: none; color: var(--texto); box-shadow: var(--sombra); }
.card-aparelho:hover { border-color: var(--tinta-2); color: var(--texto); }
.card-aparelho.sem { opacity: .7; }
.ca-img { display: grid; place-items: center; background: var(--papel-2); padding: .8rem; }
.ca-img img { max-height: 130px; object-fit: contain; }
.ca-img .placa-svg { width: 85%; max-height: 120px; }
.ca-txt { padding: .8rem 1rem 1rem; display: grid; gap: .15rem; }
.ca-txt b { font-size: 1.02rem; }
.ca-placa { font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ca-cap, .dica-linhas, .ca-n { font-size: .85rem; color: var(--texto-2); }
.placa-svg { width: 100%; height: auto; overflow: visible; }
.placa-svg .placa { fill: #fff; stroke: var(--tinta-2); stroke-width: .35; }
.placa-svg .cota { fill: var(--texto-2); stroke: var(--texto-2); stroke-width: .15; }
.placa-svg .cota text { stroke: none; font-family: var(--fonte); }
.produto { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; align-items: start; }
.produto-vis { display: grid; gap: 1rem; position: sticky; top: 72px; }
.produto-foto { border-radius: var(--raio); background: var(--branco); }
.produto-placa { margin: 0; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.5rem; }
.produto-placa figcaption { text-align: center; color: var(--texto-2); font-size: .88rem; margin-top: .5rem; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.specs dt { color: var(--texto-2); }
.specs dd { margin: 0; font-weight: 600; }
.bolinha { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); vertical-align: -2px; margin-right: 2px; }
.pergunta { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px dashed var(--linha); }
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
.escolha-btn { display: grid; gap: .3rem; text-align: left; padding: 1.1rem; border-radius: var(--raio); border: 2px solid var(--tinta-2); background: var(--branco); color: var(--texto); text-decoration: none; font: inherit; cursor: pointer; }
.escolha-btn b { font-size: 1.15rem; color: var(--tinta); }
.escolha-btn span { color: var(--texto-2); font-size: .9rem; }
.escolha-btn:hover { background: var(--papel-2); color: var(--texto); }
.escolha-btn:disabled { opacity: .5; cursor: not-allowed; }
.grade-padroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
.card-padrao { display: grid; padding: .8rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); text-decoration: none; color: var(--texto); }
.card-padrao b { color: var(--tinta); }
.card-padrao span { font-size: .83rem; color: var(--texto-2); }
.card-padrao.off { opacity: .5; }
.card-padrao:not(.off):hover { border-color: var(--tinta-2); }
.grade-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card-modelo { display: grid; gap: .4rem; padding: .8rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; color: var(--texto); font: inherit; cursor: pointer; text-align: left; }
.card-modelo:hover { border-color: var(--tinta-2); color: var(--texto); }
.card-modelo .thumb { display: grid; place-items: center; background: var(--papel-2); border-radius: 6px; padding: .8rem; min-height: 120px; }
.card-modelo .thumb img { width: 100%; height: auto; max-height: 160px; object-fit: contain; }
details.outros, details.regra { margin-top: 1.5rem; }
details summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); }
details.regra { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem 1rem; margin-bottom: 1rem; }

/* ---------------------------------------------------------------- editor */
.pagina-editor { max-width: 1400px; }
.h-editor { font-size: 1.35rem; margin-bottom: .6rem; }
.ed { display: grid; gap: 1rem; align-items: start; }
.ed--padrao { grid-template-columns: minmax(0, 1fr) 360px; }
.ed--livre, .ed--modelo { grid-template-columns: 250px minmax(0, 1fr) 290px; grid-template-areas: "add stage props" "layers stage props"; grid-template-rows: auto 1fr; }
@media (min-width: 1101px) {
  .ed--livre .ed-side, .ed--modelo .ed-side { display: contents; }
  .ed--livre .ed-add, .ed--modelo .ed-add { grid-area: add; position: static; }
  .ed--livre .ed-add-lista, .ed--modelo .ed-add-lista { grid-template-columns: 1fr 1fr; }
  .ed--livre .ed-addbtn, .ed--modelo .ed-addbtn { flex-direction: column; text-align: center; font-size: .78rem; gap: .2rem; padding: .45rem .2rem; }
  .ed--livre .ed-stage-wrap, .ed--modelo .ed-stage-wrap { grid-area: stage; }
  .ed--livre .ed-props, .ed--modelo .ed-props { grid-area: props; align-self: start; }
  .ed--livre .ed-layers, .ed--modelo .ed-layers { grid-area: layers; align-self: start; }
  .ed--livre .layers .ico, .ed--modelo .layers .ico { width: 24px; height: 24px; }
  /* botões da camada aparecem na linha selecionada ou sob o mouse: o nome ganha espaço */
  .ed--livre .layers li:not(.on):not(:hover):not(:focus-within) .ico:not(.ico-trava), .ed--modelo .layers li:not(.on):not(:hover):not(:focus-within) .ico:not(.ico-trava) { display: none; }
  .ed--livre .ly-txt b, .ed--modelo .ly-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .ed--livre .ly-nome, .ed--modelo .ly-nome { padding: .25rem .2rem; gap: .35rem; }
}
.ed--admin { grid-template-columns: 150px minmax(0, 1fr) 280px; }
.ed h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-2); margin: 0 0 .5rem; display: flex; justify-content: space-between; }
.ed-add { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .7rem; position: sticky; top: 72px; }
.ed-add-lista { display: grid; gap: .3rem; }
.ed-addbtn { display: flex; align-items: center; gap: .5rem; font: inherit; font-size: .87rem; text-align: left; padding: .45rem .5rem; border: 1px solid transparent; border-radius: 7px; background: none; cursor: pointer; color: var(--texto); }
.ed-addbtn svg { width: 20px; height: 20px; fill: currentColor; flex: none; color: var(--tinta-2); }
.ed-addbtn:hover { background: var(--papel-2); border-color: var(--linha); }
.ed-stage-wrap { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; min-width: 0; }
.ed-toolbar { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border-bottom: 1px solid var(--linha); flex-wrap: wrap; background: #fbf9f5; }
.ed-ink { display: flex; align-items: center; gap: .35rem; font-size: .85rem; }
.ed-ink select { width: auto; padding: .3em .5em; }
.ed-chk { display: flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 500; }
.ed-zoom { margin-left: auto; display: flex; align-items: center; gap: .3rem; font-size: .82rem; font-variant-numeric: tabular-nums; }
.ed-mesa { background: var(--mesa); background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px); background-size: 14px 14px; overflow: auto; display: flex; min-height: 160px; }
.ed-stage { margin: auto; padding: 4px; touch-action: none; }
.ed-svg { display: block; user-select: none; -webkit-user-select: none; }
.ed-svg .regua rect { fill: #f3f0e9; }
.ed-svg .regua line { stroke: #8d877c; stroke-width: 1; }
.ed-svg .regua text { font: 9px var(--fonte); fill: #6b665d; }
.ed-svg .regua .un { font-weight: 700; }
.ed-svg .placa-fundo { fill: #fff; stroke: #a9a395; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.ed-svg .hit { fill: transparent; cursor: pointer; }
.ed-svg .hit.movel { cursor: move; }
.ed-svg .selbox { fill: none; stroke: var(--azul); pointer-events: none; }
.ed-svg .handle { fill: #fff; stroke: var(--azul); cursor: nwse-resize; }
.ed-svg .guia { fill: none; stroke: #3aa0d8; pointer-events: none; }
.ed-msg { min-height: 2.1rem; padding: .45rem .7rem; font-size: .88rem; border-top: 1px solid var(--linha); color: var(--texto-2); }
.ed-msg.erro { color: var(--erro); font-weight: 600; background: #fdf0ee; }
.ed-msg.aviso { color: var(--aviso); }
.ed-side { display: grid; gap: 1rem; min-width: 0; }
.ed-props, .ed-layers { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem; }
.ed-props:empty { display: none; }
.ed-tabs { display: none; }
.props + .props, .campos + .props { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.props.vazio p { color: var(--texto-2); font-size: .9rem; margin: 0; }
.grid-props { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; }
.grid-props label { font-size: .78rem; font-weight: 600; color: var(--texto-2); }
.grid-props input, .grid-props select, .grid-props textarea { padding: .4em .5em; font-size: .92rem; }
.grid-props .full { grid-column: 1 / -1; }
.estilo { display: flex; gap: .3rem; }
.tog { width: 38px; height: 34px; border: 1.5px solid var(--linha); border-radius: 7px; background: #fff; cursor: pointer; font: inherit; font-size: .95rem; }
.tog.on { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.campos { display: grid; gap: .7rem; }
.campo { display: grid; gap: .2rem; }
.campo > label { font-size: .9rem; display: block; }
.campo .obr { color: var(--borracha); }
.campo input, .campo textarea { font-size: 1.05rem; }
.campo.erro input, .campo.erro textarea { border-color: var(--erro); background: #fff8f7; }
.campo-rodape { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; min-height: 1.1em; }
.campo-erro { color: var(--erro); font-weight: 600; }
.cont { color: var(--texto-2); font-variant-numeric: tabular-nums; margin-left: auto; }
.campo.erro .cont { color: var(--erro); }
.mini { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 500; color: var(--texto-2); }
.mini input[type=number] { width: 5.5em; padding: .25em .4em; }
.ajuste { display: grid; gap: .6rem; margin-top: .5rem; }
.aj { display: grid; gap: .3rem; padding: .5rem; border: 1px dashed var(--linha); border-radius: 8px; }
.setas { display: flex; gap: .3rem; }
.layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 360px; overflow: auto; }
.ly-dica { margin: -.2rem 0 .4rem; font-size: .75rem; color: var(--texto-2); }
.layers li { display: flex; align-items: center; gap: .2rem; border-radius: 7px; padding: 2px; border: 1px solid transparent; }
.layers li:hover { background: var(--papel); }
.layers li.on { background: #e8f0fd; border-color: #b9cff5; }
.layers li.err .ly-nome b { color: var(--erro); }
.layers li.oculto .ly-txt { opacity: .45; text-decoration: line-through; }
.layers .ico { width: 26px; height: 26px; flex: none; }
.ly-nome { flex: 1; display: flex; gap: .5rem; align-items: center; text-align: left; border: 0; background: none; padding: .3rem .35rem; cursor: pointer; font: inherit; font-size: .86rem; min-width: 0; color: var(--texto); }
.ly-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; background: var(--papel-2); border-radius: 6px; }
.ly-ic svg { width: 16px; height: 16px; fill: var(--tinta-2); }
.ly-txt { display: grid; min-width: 0; }
.ly-txt b { font-weight: 600; display: flex; gap: .3rem; align-items: center; }
.ly-txt small { color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ly-txt .cad svg { width: 11px; height: 11px; fill: var(--texto-2); }

/* barra de compra */
.compra { position: sticky; bottom: 0; z-index: 20; margin-top: 1rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 -4px 18px rgba(40,30,10,.08); display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; flex-wrap: wrap; }
.barra-compra { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.bc-opcoes { display: flex; gap: .7rem; flex-wrap: wrap; }
.bc-opcoes label { display: flex; align-items: center; gap: .4rem; font-size: .88rem; }
.bc-opcoes select { width: auto; }
.bc-opcoes input { width: 5em; }
.bc-total { display: grid; text-align: right; }
.bc-total span { font-size: 1.3rem; font-weight: 800; color: var(--tinta); }
.bc-total small { color: var(--texto-2); font-size: .82rem; }

/* papel */
.papel { background: #d9d3c6; padding: 1.2rem; border-radius: var(--raio); }
.papel-folha { background: #fffefb; background-image: linear-gradient(rgba(60,120,200,.09) 1px, transparent 1px); background-size: 100% 26px; padding: 2rem 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.carimbada { max-width: 560px; margin: 0 auto; }
.carimbada svg { width: 100%; height: 100%; display: block; opacity: .9; mix-blend-mode: multiply; transform: rotate(-1.2deg); }
.papel-real { text-align: center; font-size: .85rem; color: var(--texto-2); margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.papel-real .real { display: inline-block; }
.papel-real .real svg { width: 100%; height: 100%; display: block; mix-blend-mode: multiply; }

/* carrinho */
.lista-itens { display: grid; gap: .8rem; }
.card-item { display: grid; grid-template-columns: minmax(140px, 260px) 1fr auto; gap: 1.2rem; align-items: start; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; box-shadow: var(--sombra); }
.ci-thumb { background: #fff; border-radius: 6px; padding: .4rem; display: grid; place-items: center; outline: 1px solid var(--linha); max-height: 260px; }
.ci-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ci-info h3 { margin: 0; }
.ci-grava { margin: .4rem 0 .2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); font-weight: 700; }
.textos { margin: 0 0 .4rem; display: grid; gap: .15rem; }
.textos div { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: .6rem; }
.textos dt { color: var(--texto-2); font-size: .88rem; }
.textos dd { margin: 0; font-weight: 700; font-family: var(--mono); font-size: .95rem; word-break: break-word; }
.ci-lado { display: grid; gap: .5rem; justify-items: end; text-align: right; }
.ci-lado .qtd { display: flex; align-items: center; gap: .4rem; }
.ci-lado .qtd input { width: 4.5em; }
.ci-acoes { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.lista-itens.compacta .card-item { grid-template-columns: 120px 1fr auto; padding: .7rem; gap: .8rem; box-shadow: none; }
.resumo { margin-top: 1.2rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; }
.resumo b { font-size: 1.4rem; color: var(--tinta); }
.resumo .dica, .resumo-acoes { grid-column: 1 / -1; }
.resumo-acoes { display: flex; gap: .7rem; justify-content: flex-end; flex-wrap: wrap; }

/* checkout */
.checkout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.ck-col { display: grid; gap: 1rem; }
.op-frete { display: grid; gap: .3rem; align-self: end; font-size: .9rem; }
.op-frete .op { display: flex; gap: .4rem; align-items: center; font-weight: 500; }
.totais { display: grid; gap: .3rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem 1rem; }
.totais div { display: flex; justify-content: space-between; }
.totais .total { font-size: 1.25rem; border-top: 1px solid var(--linha); padding-top: .4rem; }
.aceite { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; background: #fdf5e1; border: 1px solid #ecd59a; border-radius: var(--raio); padding: .8rem; }
.aceite input { margin-top: .25rem; }

/* pedido */
.codigo { font-family: var(--mono); background: var(--papel-2); padding: 0 .3em; border-radius: 6px; }
.linha-tempo { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; counter-reset: lt; }
.linha-tempo li { position: relative; padding: .6rem .6rem .6rem 2.2rem; background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; display: grid; font-size: .9rem; color: var(--texto-2); }
.linha-tempo li::before { content: ""; position: absolute; left: .7rem; top: .85rem; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linha); background: #fff; }
.linha-tempo li.feito { color: var(--texto); }
.linha-tempo li.feito::before { background: var(--ok); border-color: var(--ok); }
.linha-tempo li.atual { border-color: var(--borracha); color: var(--texto); }
.linha-tempo li.atual::before { border-color: var(--borracha); background: #fbe0d8; }
.pix { background: var(--branco); border: 2px solid var(--tinta-2); border-radius: var(--raio); padding: 1rem 1.2rem; margin-bottom: 1.5rem; display: grid; gap: .6rem; max-width: 560px; }
.pix .valor { font-size: 1.8rem; font-weight: 800; color: var(--tinta); margin: 0; }
.pix-qr { width: 220px; background: #fff; }
.pix-qr svg { width: 100%; height: auto; display: block; }
.pix textarea { font-family: var(--mono); font-size: .8rem; }
.lista-pedidos { list-style: none; padding: 0; display: grid; gap: .4rem; }
.lista-pedidos a { display: flex; gap: 1rem; justify-content: space-between; background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; padding: .6rem .8rem; text-decoration: none; color: var(--texto); }

/* diálogos e avisos */
.dlg { border: 0; border-radius: 14px; padding: 1.3rem; max-width: min(560px, 94vw); width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.25); background: var(--papel); color: var(--texto); }
.dlg.dlg-largo { max-width: min(860px, 96vw); }
.dlg::backdrop { background: rgba(20, 25, 22, .5); }
.dlg-x { position: absolute; right: .6rem; top: .5rem; border: 0; background: none; font-size: 1.6rem; cursor: pointer; color: var(--texto-2); line-height: 1; }
.dlg-acoes { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .6rem; flex-wrap: wrap; }
.dlg .grade-modelos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); max-height: 60vh; overflow: auto; }
#toasts { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); display: grid; gap: .4rem; z-index: 100; width: min(460px, 92vw); pointer-events: none; }
.toast { background: #2b2925; color: #fff; padding: .7rem 1rem; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: opacity .4s, transform .4s; font-size: .93rem; }
.toast.ok { background: var(--tinta); }
.toast.erro { background: var(--erro); }
.toast.sai { opacity: 0; transform: translateY(8px); }
body.com-barra #toasts { bottom: 6.5rem; }

/* ---------------------------------------------------------------- painel */
.painel .topo { background: #3d0f10; }
.tabela { width: 100%; border-collapse: collapse; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; margin: 1rem 0; font-size: .92rem; }
.tabela th, .tabela td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela th { background: var(--papel-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); }
.tabela tr[data-href] { cursor: pointer; }
.tabela tr[data-href]:hover td { background: #faf7f1; }
.tabela.compacta input { padding: .3em .45em; }
.inp-curto { width: 6em; }
.inp-cep { width: 8.5em; }
.mini-placa img { width: 54px; height: 40px; object-fit: contain; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { padding: .3rem .8rem; border-radius: 99px; border: 1px solid var(--linha); background: var(--branco); text-decoration: none; color: var(--texto); font-size: .88rem; }
.chip.on { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.st { display: inline-block; padding: .05rem .55rem; border-radius: 99px; font-size: .8rem; font-weight: 700; }
.st-amarelo { background: #fbefc8; color: #6d5000; }
.st-azul { background: #dde8fb; color: #163f86; }
.st-roxo { background: #ece0f6; color: #4f2875; }
.st-verde { background: #dcf0e2; color: #1a5a2c; }
.st-cinza { background: #e7e4de; color: #57534b; }
.caixa { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem 1rem; }
.caixa p { margin: .2rem 0; }
.pedido-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.bloco-item { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; margin-bottom: 1rem; }
.bloco-item header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: start; }
.st-item { display: flex; align-items: center; gap: .4rem; }
.st-item select { width: auto; }
.bi-corpo { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 1rem; align-items: start; margin-top: .6rem; }
.bi-fig { margin: 0; }
.bi-thumb { aspect-ratio: var(--ar); background: #fff; outline: 1px solid var(--linha); border-radius: 6px; padding: .4rem; display: grid; place-items: center; }
.bi-thumb img { width: 100%; height: 100%; object-fit: contain; }
.bi-fig.laser .bi-thumb { background: repeating-linear-gradient(45deg, #fff 0 8px, #f6f3ee 8px 16px); }
.bi-fig figcaption { font-size: .8rem; color: var(--texto-2); margin-top: .3rem; }
.bi-fig.laser figcaption b { color: var(--borracha); text-transform: uppercase; letter-spacing: .05em; }
.hist { font-size: .9rem; color: var(--texto-2); }
.grade-adm-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.adm-modelo { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem; display: grid; gap: .3rem; align-content: start; }
.adm-modelo .thumb { background: var(--papel-2); border-radius: 6px; padding: .5rem; display: grid; place-items: center; height: 170px; aspect-ratio: auto !important; }
.adm-modelo .thumb img { width: 100%; height: 100%; object-fit: contain; }
.adm-modelo small { color: var(--texto-2); }
.adm-modelo .acoes { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.linha-form { grid-template-columns: 1fr 1.4fr 6em auto; align-items: end; max-width: none; margin-top: 1.5rem; }
.linha-form h2 { grid-column: 1 / -1; margin: 0; }
.conf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
.conf-form { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; padding-right: .3rem; }
.cf { gap: .5rem; }
.cf.on { border-color: var(--azul); box-shadow: 0 0 0 2px rgba(31,111,235,.2); }
.cf legend { display: flex; gap: .6rem; align-items: center; }
.cf .ordem { display: inline-flex; gap: .2rem; }
.cf .ordem .ico { width: 24px; height: 24px; }
.cf small.sug { font-weight: 400; color: var(--texto-2); font-size: .75rem; }
.conferencia .ed--admin { grid-template-columns: 140px minmax(0, 1fr); }
.conferencia .ed--admin .ed-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 1100px) {
  .ed--livre, .ed--modelo { grid-template-columns: 130px minmax(0, 1fr); grid-template-areas: none; }
  .ed--livre .ed-side, .ed--modelo .ed-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .conf-grid { grid-template-columns: 1fr; }
  .conf-form { position: static; max-height: none; }
}
@media (max-width: 900px) {
  .hero, .produto, .checkout, .duas { grid-template-columns: 1fr; }
  .hero-arte { display: none; }
  .produto-vis { position: static; }
  .ed, .ed--padrao, .ed--livre, .ed--admin, .conferencia .ed--admin { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  /* padrão no celular: placa em cima, fixa, e o formulário embaixo */
  .topo { position: static; }
  .ed--padrao .ed-stage-wrap { position: sticky; top: 0; z-index: 10; box-shadow: 0 6px 16px rgba(40,30,10,.12); }
  .ed--padrao .ed-toolbar { padding: .3rem .5rem; }
  .ed--padrao .ed-toolbar .ed-chk, .ed--padrao .ed-zoom { display: none; }
  .ed--padrao .ed-layers { display: none; }
  .ed-msg { min-height: 0; }
  .ed-add { position: static; padding: .5rem; }
  .ed-add h3 { display: none; }
  .ed-add-lista { display: flex; overflow-x: auto; gap: .3rem; padding-bottom: .2rem; }
  .ed-addbtn { flex: none; flex-direction: column; font-size: .72rem; padding: .35rem .5rem; text-align: center; border-color: var(--linha); }
  .ed-add .dica { display: none; }
  .ed--livre .ed-side, .ed--modelo .ed-side, .conferencia .ed--admin .ed-side { grid-template-columns: 1fr; }
  .ed--livre .ed-tabs, .ed--modelo .ed-tabs { display: flex; gap: .3rem; }
  .ed--livre .ed-side[data-aba=props] .ed-layers, .ed--livre .ed-side[data-aba=layers] .ed-props, .ed--modelo .ed-side[data-aba=props] .ed-layers, .ed--modelo .ed-side[data-aba=layers] .ed-props { display: none; }
  .ed-tabs button { flex: 1; font: inherit; font-weight: 600; padding: .5rem; border: 1px solid var(--linha); border-radius: 8px; background: var(--branco); cursor: pointer; }
  .ed-tabs button.on { background: var(--tinta); color: #fff; border-color: var(--tinta); }
  .compra { position: static; box-shadow: none; }
  .barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--branco); border-top: 1px solid var(--linha); box-shadow: 0 -4px 18px rgba(40,30,10,.12); border-radius: 14px 14px 0 0; margin: 0; padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom)); gap: .6rem; justify-content: space-between; }
  .barra-compra .btn-grande { font-size: .98rem; padding: .7em 1em; }
  .bc-total { text-align: left; }
  .bc-total span { font-size: 1.1rem; }
  .bc-total small { font-size: .75rem; line-height: 1.2; }
  .ed--padrao .campo { scroll-margin-top: calc(var(--stage-h, 260px) + 70px); scroll-margin-bottom: 90px; }
  .ed--padrao .ed-toolbar [data-act=undo], .ed--padrao .ed-toolbar [data-act=redo] { display: none; }
  .card-item, .lista-itens.compacta .card-item { grid-template-columns: 1fr; }
  .ci-lado { justify-items: start; text-align: left; grid-template-columns: auto auto; align-items: center; justify-content: space-between; }
  .ci-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .linha-tempo { grid-template-columns: 1fr 1fr; }
  .bi-corpo { grid-template-columns: 1fr 1fr; }
  .bi-txt { grid-column: 1 / -1; }
  .linha-form { grid-template-columns: 1fr; }
  .tabela { display: block; overflow-x: auto; }
}
@media (max-width: 560px) {
  .topo-in { flex-wrap: nowrap; }
  .marca-nome { display: none; }
  .menu { flex-wrap: nowrap; overflow-x: auto; }
  .pagina-editor .trilha { font-size: .8rem; }
  .h-editor { font-size: 1.1rem; }
  .escolha { grid-template-columns: 1fr; }
  .linha3 { grid-template-columns: 1fr 1fr; }
  .menu a { padding: .35rem .5rem; font-size: .88rem; }
  .topo-in { padding: .45rem .7rem; }
  .grade-aparelhos { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .card-aparelho { grid-template-rows: 100px auto; }
  .ca-txt { padding: .6rem; font-size: .9rem; }
  .grade-modelos { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .card-modelo .thumb { min-height: 80px; padding: .4rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.caixa.form > .btn { justify-self: start; }

.campo-cfg { border: 1px dashed var(--linha); border-radius: 8px; padding: .5rem .6rem; margin-bottom: .7rem; background: var(--papel); }
.campo-cfg.on { border: 1.5px solid var(--borracha); background: #fdf4f1; }
.campo-cfg .chk.forte { font-weight: 700; color: var(--borracha); }
.campo-cfg .grid-props { margin-top: .5rem; }
.criar-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.criar-topo { display: flex; gap: .8rem; flex-wrap: wrap; align-items: end; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .7rem 1rem; }
.criar-topo label { min-width: 200px; }
.criar-topo .acoes { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.form-cliente { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem 1rem; }
.form-cliente ol { margin: .3rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.form-cliente li { display: flex; gap: .5rem; align-items: center; }
.form-cliente li small { color: var(--texto-2); }
.form-cliente .ico { width: 24px; height: 24px; }
.criar-grid .form-erro:empty { display: none; }

.layers .ico-trava { border-color: transparent; background: none; color: var(--texto-2); }
.layers .ico-trava.on { color: var(--borracha); background: #fbe9e4; border-color: #efc7bc; }
.layers li.travado .ly-nome { opacity: .55; cursor: not-allowed; }
.ly-topo { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .4rem; }
.ly-topo .btn { font-size: .75rem; padding: .25em .5em; }
.ed-svg .handle.ponta { fill: #fff; stroke: var(--azul); cursor: move; }
.ed-svg .handle.no { fill: #fff; stroke: var(--azul); cursor: move; }
.ed-svg .handle.no.on { fill: var(--azul); }
.ed-svg .handle.no.canto { rx: 0; }
.ed-svg .handle.alca { fill: var(--azul); stroke: #fff; cursor: crosshair; }
.ed-svg .alca-linha { stroke: var(--azul); pointer-events: none; opacity: .7; }
.ed-svg .h-n, .ed-svg .h-s { cursor: ns-resize; } .ed-svg .h-e, .ed-svg .h-w { cursor: ew-resize; }
.ed-svg .h-nw, .ed-svg .h-se { cursor: nwse-resize; } .ed-svg .h-ne, .ed-svg .h-sw { cursor: nesw-resize; }
.acoes-obj { display: flex; gap: .3rem; flex-wrap: wrap; margin: .3rem 0; }
.acoes-obj .btn.on { background: var(--tinta); color: #fff; }
.nos-box { border: 1px dashed var(--linha); border-radius: 8px; padding: .5rem; }
.nos-box p { margin: 0 0 .4rem; }

.btn-drc.bom { border-color: #9cd3ad; color: var(--ok); }
.btn-drc.ruim { border-color: var(--erro); background: #fdecea; color: var(--erro); }
.ed-svg .drc-img { pointer-events: none; image-rendering: pixelated; }
.ed-svg .drc-anel { fill: none; pointer-events: none; }
.ed-svg .drc-anel.esp { stroke: #e6143c; }
.ed-svg .drc-anel.tra { stroke: #ff8c00; }
.tag-cli { font-size: .68rem; font-weight: 700; color: var(--borracha); background: #fbe9e4; border-radius: 99px; padding: 0 .4em; white-space: nowrap; }
.ca-marca { font-size: .82rem; font-weight: 700; color: var(--borracha); text-transform: uppercase; letter-spacing: .04em; }
.filtro-marca { margin: .2rem 0 1rem; }

/* catálogo */
.preco s.de { color: var(--texto-2); font-weight: 500; font-size: .85em; margin-right: .2em; }
.ca-img { position: relative; }
.selo-esgotado, .selo-oferta { position: absolute; top: .5rem; left: .5rem; font-size: .72rem; font-weight: 800; padding: .1rem .5rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .05em; }
.selo-esgotado { background: #2b2925; color: #fff; }
.selo-oferta { background: var(--borracha); color: #fff; }
.card-aparelho.esgotado .ca-img img { filter: grayscale(.8); opacity: .7; }
.grade-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; }
.card-cat { display: grid; gap: .2rem; justify-items: center; text-align: center; padding: .8rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; color: var(--texto); box-shadow: var(--sombra); }
.card-cat img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; border-radius: 8px; }
.card-cat .cat-sem-img { width: 100%; aspect-ratio: 4/3; background: var(--papel-2) radial-gradient(circle at 50% 50%, #fff 0 18%, transparent 19%); border-radius: 8px; }
.card-cat b { color: var(--tinta); }
.card-cat small { color: var(--texto-2); }
.card-cat:hover { border-color: var(--tinta-2); color: var(--texto); }
.cat-bloco { margin: 1.2rem 0; }
.cat-bloco h2 a { color: var(--tinta); text-decoration: none; }
.busca { display: flex; gap: .5rem; max-width: 560px; margin: .5rem 0 1rem; }
.galeria { display: grid; gap: .5rem; }
.galeria .produto-foto { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--linha); }
.miniaturas { display: flex; gap: .4rem; flex-wrap: wrap; }
.mini-foto { width: 62px; height: 62px; padding: 2px; border: 1px solid var(--linha); border-radius: 6px; background: #fff; cursor: pointer; }
.mini-foto img { width: 100%; height: 100%; object-fit: contain; }
.variacoes { background: none; border: 0; padding: 0; margin: 0 0 1rem; }
.variacoes legend { padding: 0; margin-bottom: .4rem; }
.var-lista { display: flex; flex-wrap: wrap; gap: .4rem; }
.var-op { display: grid; justify-items: center; gap: .1rem; width: 78px; padding: .3rem; border: 1.5px solid var(--linha); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; font-size: .72rem; line-height: 1.15; color: var(--texto); }
.var-op img { width: 56px; height: 56px; object-fit: contain; }
.var-op .bolinha { width: 34px; height: 34px; margin: 11px; }
.var-op.on { border-color: var(--borracha); box-shadow: 0 0 0 2px rgba(184,67,47,.25); }
.var-op:disabled { opacity: .45; cursor: not-allowed; }
.var-op small { color: var(--erro); font-weight: 700; }
.estoque-msg { color: var(--aviso); font-weight: 600; font-size: .9rem; min-height: 1em; }
.estoque-msg .esg { color: var(--erro); }
.compra-simples { display: flex; gap: .8rem; align-items: end; margin: 1rem 0; flex-wrap: wrap; }
.compra-simples input { width: 6em; }
.descricao { margin-top: 1.2rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem 1rem; }
.desc-html { font-size: .95rem; }
.ci-foto { aspect-ratio: 1; max-width: 160px; }

.barra-filtro { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin: .8rem 0; }
.barra-filtro input { max-width: 320px; }
.barra-filtro select { width: auto; }
.chip { cursor: pointer; font: inherit; font-size: .88rem; }
.est-esgotado td { background: #fdecea; }
.est-baixo td { background: #fdf5e1; }
tr.inativo td { opacity: .55; }
.est-ctl { display: inline-flex; gap: .2rem; align-items: center; }
.est-ctl .ico { width: 28px; height: 28px; }
.tab-var input { padding: .3em .4em; }
.var-thumb { width: 36px; height: 36px; object-fit: contain; display: block; }
.tab-var .var-img { font-size: .7rem; max-width: 120px; padding: 0; border: 0; }
.cats-lista { max-height: 220px; overflow: auto; display: grid; gap: .1rem; }
.cat-n1 { padding-left: 1.2rem; } .cat-n2 { padding-left: 2.4rem; } .cat-n3 { padding-left: 3.6rem; }
.fotos-prod { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.fotos-prod img { width: 70px; height: 70px; object-fit: contain; background: #fff; border: 1px solid var(--linha); border-radius: 6px; }
.imp-caixa progress { width: 100%; }
.imp-log { max-height: 260px; overflow: auto; font-size: .78rem; background: var(--papel-2); padding: .5rem; white-space: pre-wrap; }
.bi-acess { display: flex; gap: 1rem; align-items: center; }
.bi-acess img { width: 90px; height: 90px; object-fit: contain; background: #fff; border: 1px solid var(--linha); border-radius: 6px; }
.topo-pag { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* centralizar / guias inteligentes */
.alinhar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0 0 .7rem; padding: .45rem .5rem; background: var(--papel-2); border-radius: 8px; }
.alinhar .rot { font-size: .85rem; font-weight: 600; color: var(--texto-2); }
.alinhar select { flex: 1 1 8rem; min-width: 0; padding: .3rem .4rem; font-size: .85rem; }
.alinhar .bts { display: inline-flex; gap: .25rem; }
.alinhar .ico svg { width: 18px; height: 18px; fill: currentColor; }
.guia-snap { stroke: #d6249f; fill: none; pointer-events: none; }
.guia-snap.borda, .guia-snap.obj { stroke-dasharray: 1 1; }
.guia-snap.entre { stroke: #0a84c6; }
/* figuras */
.dlg-largo { max-width: min(860px, 96vw); width: 100%; }
.fig-lista { max-height: 70vh; overflow: auto; }
.fig-lista h3 { margin: .8rem 0 .4rem; font-size: .95rem; color: var(--texto-2); }
.fig-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; }
.fig-op { display: grid; justify-items: center; gap: .25rem; padding: .5rem .3rem; background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; font: inherit; color: var(--texto); }
.fig-op svg { width: 52px; height: 52px; }
.fig-op span { font-size: .75rem; line-height: 1.15; text-align: center; }
.fig-op:hover { border-color: var(--tinta-2); background: var(--papel); }
.pr-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.pr-grade > div { display: grid; gap: .2rem; align-content: start; }
.pr-tams { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .2rem .8rem; max-height: 34vh; overflow: auto; }
.pr-tams small, .pr-grade small { color: var(--texto-2); }
#fPr fieldset { border: 1px solid var(--linha); border-radius: 10px; padding: .6rem .8rem; margin: 0 0 .8rem; }
#fPr legend { font-weight: 700; padding: 0 .3rem; }
.barra-filtro select { max-width: 16rem; }
/* busca no topo */
.busca-topo { flex: 1 1 260px; max-width: 460px; display: flex; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; }
.busca-topo input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; padding: .45rem .9rem; font: inherit; font-size: .95rem; outline: none; }
.busca-topo input::placeholder { color: rgba(255,255,255,.65); }
.busca-topo button { background: transparent; border: 0; color: #fff; padding: 0 .8rem; cursor: pointer; display: grid; place-items: center; }
.busca-topo:focus-within { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
@media (max-width: 900px) { .busca-topo { order: 3; flex-basis: 100%; max-width: none; } .topo-in { flex-wrap: wrap !important; } }
/* ---------- guia de padrões ---------- */
.grade-padroes-guia { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.card-padrao-guia { display: grid; gap: .3rem; padding: .7rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); text-decoration: none; color: var(--texto); }
.card-padrao-guia:hover { border-color: var(--tinta-2); transform: translateY(-1px); }
.cpg-thumb { display: grid; place-items: center; aspect-ratio: 16/9; background: #fff; border-radius: 8px; border: 1px solid var(--linha); padding: .4rem; overflow: hidden; }
.cpg-thumb img, .cpg-thumb svg { max-width: 100%; max-height: 100%; }
.cpg-livre { font-size: 2.4rem; color: var(--tinta-2); }
.card-padrao-guia b { color: var(--tinta); }
.card-padrao-guia small { color: var(--texto-2); }
.guia-tam { margin: 1.6rem 0; padding: 1rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); scroll-margin-top: 90px; }
.guia-tam h2 small { font-weight: 400; color: var(--texto-2); font-size: .9rem; }
.guia-tam h3 { margin: 1rem 0 .5rem; font-size: 1rem; }
.guia-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.guia-modelo { display: grid; gap: .3rem; padding: .5rem; background: var(--papel); border: 2px solid transparent; border-radius: 10px; cursor: pointer; font: inherit; color: var(--texto); text-align: center; font-size: .85rem; }
.guia-modelo .thumb { display: grid; place-items: center; background: #fff; border-radius: 6px; max-height: 120px; overflow: hidden; }
.guia-modelo .thumb img, .guia-modelo .thumb svg { width: 100%; height: 100%; object-fit: contain; }
.guia-modelo.on { border-color: var(--borracha); background: #fff; }
.guia-onde { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; }
.guia-ap { display: flex; gap: .6rem; align-items: center; padding: .5rem; border: 1px solid var(--linha); border-radius: 10px; text-decoration: none; color: var(--texto); background: #fff; }
.guia-ap:hover { border-color: var(--tinta-2); }
.guia-ap img, .guia-ap .sem-foto, .guia-ap .cabo-madeira { width: 56px; height: 56px; object-fit: contain; flex: none; border-radius: 6px; background: var(--papel); }
.guia-ap b { display: block; font-size: .88rem; line-height: 1.2; }
.guia-ap small { color: var(--texto-2); }
.guia-ap.esg { opacity: .6; }
.guia-ap.madeira { background: #fbf6ee; border-color: #d9c09a; }
.cabo-madeira, .mont-ic.madeira { background: linear-gradient(#9a6b3f, #7a4f2a) center 6px / 40% 60% no-repeat, linear-gradient(#5a3a20, #5a3a20) center 38px / 76% 10px no-repeat, #f3e7d4 !important; }
/* montagem */
.montagem { border: 0; padding: 0; margin: .6rem 0 1rem; }
.montagem legend { font-weight: 700; margin-bottom: .4rem; }
.mont-ops { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mont-op { display: flex; gap: .6rem; align-items: center; text-align: left; padding: .6rem .7rem; border: 2px solid var(--linha); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: var(--texto); }
.mont-op b { display: block; }
.mont-op small { color: var(--texto-2); font-size: .8rem; }
.mont-op.on { border-color: var(--tinta); background: #f1f6f2; }
.mont-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--papel); font-size: 1.4rem; color: var(--tinta); }
.mont-ic.madeira { background-size: 40% 60%, 76% 8px; background-position: center 4px, center 28px; }
@media (max-width: 560px) { .mont-ops { grid-template-columns: 1fr; } }
/* ---------- categorias ---------- */
.atalhos-cat { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 0 0 1.4rem; }
.atalho { display: grid; gap: .2rem; padding: 1rem 1.2rem; border-radius: var(--raio); text-decoration: none; background: var(--tinta); color: #fff; }
.atalho:nth-child(2) { background: var(--borracha); }
.atalho b { font-size: 1.15rem; } .atalho span { opacity: .85; font-size: .9rem; }
.atalho:hover { color: #fff; filter: brightness(1.08); }
.grade-cat-grande { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.cat-card { display: grid; grid-template-rows: auto 1fr; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; }
.cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.cat-card-img { display: grid; place-items: center; aspect-ratio: 4/3; background: #fff; border-bottom: 1px solid var(--linha); padding: .8rem; }
.cat-card-img img { width: 100%; height: 100%; object-fit: contain; }
.cat-card-txt { padding: .8rem 1rem 1rem; display: grid; gap: .3rem; align-content: start; }
.cat-card-txt h2 { margin: 0; font-size: 1.15rem; } .cat-card-txt h2 a { color: var(--tinta); text-decoration: none; }
.cat-card-txt > small { color: var(--texto-2); }
.cat-subs { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.cat-subs li a { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: var(--papel); text-decoration: none; color: var(--texto); font-size: .82rem; }
.cat-subs li a:hover { background: var(--papel-2); }
.cat-subs small { display: none; }
.cat-ver { margin-top: .4rem; font-weight: 600; text-decoration: none; color: var(--borracha); font-size: .9rem; }
@media (max-width: 640px) { .atalhos-cat { grid-template-columns: 1fr; } }
/* ---------- conta ---------- */
.conta { max-width: 860px; }
.conta-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.lista-pedidos-conta { display: grid; gap: .5rem; margin-bottom: 1.4rem; }
.ped-card { display: grid; grid-template-columns: 90px 1fr auto auto; gap: .8rem; align-items: center; padding: .6rem .8rem; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; text-decoration: none; color: var(--texto); }
.ped-card:hover { border-color: var(--tinta-2); }
.ped-thumb { height: 46px; display: grid; place-items: center; background: #fff; border-radius: 6px; overflow: hidden; }
.ped-thumb img, .ped-thumb svg { max-width: 100%; max-height: 100%; }
.ped-info b { display: block; font-family: monospace; font-size: 1.05rem; } .ped-info small { color: var(--texto-2); }
.st-azul { background: #e3eefb; color: #1f4f8a; }
.cartao-codigo { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; margin-top: 1rem; }
.linha-codigo { display: flex; gap: .5rem; } .linha-codigo input { flex: 1; }
.vincular { margin: .6rem 0 1rem; background: #f1f6f2; border: 1px solid #cfe0d4; border-radius: 12px; padding: .6rem .9rem; }
.vincular summary { cursor: pointer; font-weight: 600; color: var(--tinta); }
@media (max-width: 640px) { .ped-card { grid-template-columns: 64px 1fr; } .ped-card .st, .ped-card .ped-total { grid-column: 2; } }
.adapt-sec { margin: 1rem 0 2rem; padding: 1rem; background: #f1f6f2; border: 1px solid #cfe0d4; border-radius: var(--raio); }
.adapt-sec h2 small { font-size: .85rem; font-weight: 400; color: var(--texto-2); }
.adm-modelo.off { opacity: .55; }
.adm-modelo .acoes select { max-width: 9rem; }
.adapt-sec .adm-modelo .thumb { height: 150px; overflow: hidden; display: block; box-sizing: border-box; }
.adapt-sec .adm-modelo .thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.grade-adm-modelos.compacta { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .7rem; }
.grade-adm-modelos.compacta .adm-modelo { padding: .6rem; gap: .2rem; font-size: .9rem; }
.grade-adm-modelos.compacta .adm-modelo .thumb { height: 120px; }
.grade-adm-modelos.compacta .adm-modelo .acoes .btn-sm { padding: .2rem .45rem; font-size: .78rem; }
.pad-tag { justify-self: start; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--tinta-2); background: var(--papel); border-radius: 999px; padding: .1rem .5rem; }
.adapt-sec .grade-adm-modelos.compacta .adm-modelo .thumb { height: 120px; }
.grade-adm-modelos.compacta .acoes select { padding: .15rem .3rem; font-size: .8rem; height: auto; min-height: 0; }

/* ---------- marca XT Carimbos ---------- */
.hero-logo { position: relative; display: grid; place-items: center; background: var(--tinta); border-radius: 22px; padding: 1.6rem 1.4rem 2.6rem; box-shadow: 0 10px 30px rgba(110, 23, 25, .25); max-width: 330px; justify-self: center; width: 100%; }
.hero-logo img { width: min(220px, 60vw); height: auto; display: block; }
.desde { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg); background: var(--laranja); color: #3a0c0d; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: .8rem; padding: .35rem .9rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.hero h1 .xt { color: var(--borracha); }
.selo-desde { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); background: var(--papel-2); border: 1px solid var(--linha); border-radius: 999px; padding: .2rem .7rem; }
.rodape { background: var(--tinta); color: var(--creme); border-top: 0; }
.rodape a { color: #fff; }
.rodape-marca { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: #fff; }
.rodape-marca img { height: 34px; width: auto; }
.btn-pri:hover { filter: brightness(1.06); }
@media (max-width: 900px) { .marca-txt small { display: none; } .marca-txt, .marca-nome { display: grid !important; } }
/* automático x madeira */
.abas-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; max-width: 560px; margin: 0 0 1rem; }
.abas-tipo a { display: grid; padding: .6rem .9rem; border: 2px solid var(--linha); border-radius: 12px; background: var(--branco); text-decoration: none; color: var(--texto); }
.abas-tipo a small { color: var(--texto-2); }
.abas-tipo a.on { border-color: var(--tinta); background: #fbeeea; }
.aviso-madeira { display: flex; gap: .7rem; align-items: flex-start; background: #fbf3e6; border: 1px solid #e6cfa8; border-radius: 12px; padding: .7rem .9rem; font-size: .92rem; }
.aviso-madeira .mont-ic { width: 40px; height: 40px; flex: none; border-radius: 8px; }
/* guia por padrão: tamanhos com poucos itens dividem a linha; os grandes ocupam a linha inteira */
.guia-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 1rem; grid-auto-flow: row dense; margin-top: 1rem; }
.guia-grade .guia-tam { margin: 0; }
.guia-grade .guia-tam.larga { grid-column: 1 / -1; }
.guia-grade .guia-tam:not(.larga) .guia-onde { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.guia-grade .guia-tam:not(.larga) .guia-modelos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.chips-tam { gap: .3rem; } .chips-tam .chip { padding: .2rem .55rem; font-size: .82rem; }
.cat-foto { display: grid; place-items: center; width: 52px; height: 40px; border: 1px dashed var(--linha); border-radius: 6px; cursor: pointer; overflow: hidden; background: #fff; font-size: .7rem; color: var(--texto-2); }
.cat-foto img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------- conta do cliente e segurança (v1.0) */
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.1rem 1.2rem; }
.cartao > h2:first-child { margin-top: 0; }
.form-larga { max-width: 760px; }
.form fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: .9rem 1.1rem 1.1rem; background: var(--branco); display: grid; gap: .8rem; min-width: 0; }
.conta-quem { display: flex; align-items: center; gap: .9rem; }
.conta-quem h1 { margin: 0; }
.conta-quem .dica { margin: .1rem 0 0; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; flex: none; }
.abas-conta { display: flex; gap: .3rem; border-bottom: 2px solid var(--linha); margin: 1.2rem 0 1.1rem; overflow-x: auto; }
.abas-conta a { padding: .6rem 1rem; text-decoration: none; color: var(--texto-2); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.abas-conta a:hover { color: var(--tinta); }
.abas-conta a.on { color: var(--tinta); border-bottom-color: var(--borracha); }
.abas-conta .badge { font-size: .75rem; }
.vazio-conta { text-align: center; padding: 2rem 1rem; background: var(--branco); border: 1px dashed var(--linha); border-radius: var(--raio); }
.campo-senha .senha-in { display: flex; align-items: stretch; gap: 0; }
.campo-senha .senha-in input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.campo-senha .olho { border: 1px solid var(--linha); border-left: 0; background: var(--papel-2); color: var(--texto-2); font: inherit; font-size: .8rem; padding: 0 .7rem; border-radius: 0 8px 8px 0; cursor: pointer; }
.campo-senha .olho:hover { color: var(--tinta); }
.forca { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; align-items: center; margin-top: .35rem; }
.forca i { height: 5px; border-radius: 3px; background: var(--linha); }
.forca small { min-width: 9.5em; text-align: right; color: var(--texto-2); font-size: .78rem; }
.forca[data-nota="1"] i:nth-child(-n+1) { background: #c0392b; }
.forca[data-nota="2"] i:nth-child(-n+2) { background: #d9870f; }
.forca[data-nota="3"] i:nth-child(-n+3) { background: #7aa32a; }
.forca[data-nota="4"] i { background: #2e8b4a; }
.lista-sessoes { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .5rem; }
.lista-sessoes li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .55rem .7rem; border: 1px solid var(--linha); border-radius: 10px; }
.lista-sessoes small { display: block; color: var(--texto-2); font-size: .8rem; }
.seg-conta { align-items: start; }
.zona-perigo { margin-top: 1.5rem; border: 1px solid #efbdb5; border-radius: var(--raio); padding: .7rem 1rem; background: #fdf4f2; }
.zona-perigo summary { cursor: pointer; color: #8c1d14; font-weight: 600; }
.zona-perigo form { margin-top: .8rem; }
.btn-perigo { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn-perigo:hover { background: #8c1d14; border-color: #8c1d14; color: #fff; }
.seg-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; align-items: start; }
.seg-estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; margin: 0 0 1.2rem; }
.seg-estado div { background: var(--branco); border: 1px solid var(--linha); border-left: 5px solid #2e8b4a; border-radius: 10px; padding: .6rem .8rem; }
.seg-estado div.atencao { border-left-color: #d9870f; }
.seg-estado b { display: block; }
.seg-estado small { color: var(--texto-2); }
.qr-2fa { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; align-items: center; }
.qr-2fa svg { width: 180px; height: 180px; background: #fff; border: 1px solid var(--linha); border-radius: 8px; }
.segredo { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--papel-2); padding: .3rem .5rem; border-radius: 6px; word-break: break-all; display: inline-block; }
.codigos-reserva { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; list-style: none; padding: 0; }
.codigos-reserva li { background: var(--papel-2); padding: .35rem .6rem; border-radius: 6px; text-align: center; }
.link-copia { display: flex; gap: .4rem; }
.link-copia input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.tabela td small { color: var(--texto-2); display: block; }
.ok-txt { color: #1a5a2c; } .erro-txt { color: #8c1d14; }
@media (max-width: 640px) { .qr-2fa { grid-template-columns: 1fr; justify-items: center; } .seg-conta.duas, .conta .duas { grid-template-columns: 1fr; } .conta-topo { flex-wrap: wrap; } }
.aviso-topo { max-width: 1200px; margin: .8rem auto 0; }
.dlg-larga { max-width: min(760px, 94vw); }
details.dica summary { cursor: pointer; }
.form.cartao { align-content: start; }
.conta .duas { align-items: start; }
.form-larga .linha2 { align-items: start; }

/* ---------------------------------------------------------------- cadastro PF/PJ, pagamento e pedido "quase concluído" */
.tipo-cad { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.op-tipo { display: flex; gap: .6rem; align-items: flex-start; border: 2px solid var(--linha); border-radius: 12px; padding: .7rem .8rem; cursor: pointer; background: var(--branco); font-weight: 400; }
.op-tipo:has(input:checked) { border-color: var(--borracha); background: #fff6ee; }
.op-tipo.off { opacity: .6; cursor: not-allowed; }
.op-tipo input { margin-top: .25rem; accent-color: var(--borracha); }
.op-tipo span { display: grid; gap: .1rem; }
.op-tipo small { color: var(--texto-2); }
.pagto { display: grid; gap: .5rem; margin: .8rem 0; }
.resumo-cad { margin: 0; line-height: 1.5; }
.lista-ok { list-style: none; padding: 0; margin: .6rem 0 1rem; display: grid; gap: .3rem; }
.lista-ok li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.form select { width: 100%; }
[hidden] { display: none !important; }
.quase { background: linear-gradient(135deg, var(--tinta), #8f2a1c); color: #fff; border-radius: 16px; padding: 1.4rem 1.6rem; margin-bottom: 1rem; }
.quase h1 { color: #fff; margin: .4rem 0 .3rem; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.quase p { margin: 0; max-width: 60ch; opacity: .95; }
.quase-selo { display: inline-block; background: var(--borracha); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .7rem; border-radius: 99px; }
.quase-cod { margin-top: .7rem !important; font-size: .95rem; }
.quase .codigo { background: rgba(255,255,255,.16); color: #fff; }
.linha-tempo li small { color: var(--texto-2); }
.pix.pix-grande { max-width: none; grid-template-columns: 250px 1fr; gap: 1.4rem; align-items: start; border-color: var(--borracha); box-shadow: 0 6px 22px rgba(110, 23, 25, .1); padding: 1.3rem 1.5rem; }
.pix-grande .pix-lado { display: grid; gap: .4rem; justify-items: center; text-align: center; }
.pix-grande .pix-lado:empty { display: none; }
.pix-grande .pix-qr { width: 250px; border: 1px solid var(--linha); border-radius: 10px; padding: 6px; }
.pix-grande .pix-info { display: grid; gap: .6rem; }
.pix-grande h2 { margin: 0; }
.pix-grande .valor { font-size: 2.3rem; }
.pix-grande .comprovante { border-top: 1px dashed var(--linha); padding-top: .7rem; }
.pix-grande .comprovante p { margin: 0 0 .5rem; }
@media (max-width: 700px) { .tipo-cad { grid-template-columns: 1fr; } .pix.pix-grande { grid-template-columns: 1fr; } .pix-grande .pix-qr { width: min(250px, 70vw); } .linha-tempo { grid-template-columns: 1fr 1fr; } }
.tag-alerta { background: #fbe9e7; color: #8c1d14; border-color: #efbdb5; } .tag-ok { background: #e6f3ea; color: #1a5a2c; border-color: #b7dcc2; }