/* ==========================================================================
   TGBR LOGÍSTICA — folha de estilo única
   Paleta extraída da marca: preto/verde-sinal do logo TGBRLOG
   ========================================================================== */

:root{
  --breu:#0C1210;
  --breu-2:#131B18;
  --breu-3:#1B2521;
  --verde:#8FD400;
  --verde-fundo:#6FA600;
  --areia:#F1F3EF;
  --areia-2:#E4E8E1;
  --grafite:#151A18;
  --fumaca:#6E7A73;
  --branco:#FFFFFF;
  --borda-clara:rgba(255,255,255,.12);
  --borda-escura:rgba(21,26,24,.14);
  --max:1180px;
  --corte:14px;
  --transicao:.35s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--areia);
  color:var(--grafite);
  font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-family:"Saira Condensed","Archivo",Helvetica,Arial,sans-serif;
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.005em;
  margin:0;
}

h1{font-size:clamp(2.6rem,6.2vw,4.5rem)}
h2{font-size:clamp(2rem,4.4vw,3.1rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.72rem);line-height:1.12}

p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:4px}

.env{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

.pular{position:absolute;left:-9999px;top:0;background:var(--verde);color:#0C1210;padding:12px 18px;z-index:200;font-weight:600}
.pular:focus{left:12px;top:12px}

/* ---------- blocos de seção ---------- */
.bloco{padding:clamp(64px,8vw,112px) 0;position:relative}
.bloco--escuro{background:var(--breu);color:#E7EDE9}
.bloco--escuro h1,.bloco--escuro h2,.bloco--escuro h3{color:#fff}
.bloco--claro{background:var(--areia)}
.bloco--claro-2{background:var(--areia-2)}

/* lâmina: motivo gráfico tirado do corte diagonal das letras do logo */
.lamina{
  display:inline-block;
  font-family:"Archivo",sans-serif;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--verde-fundo);
  padding:5px 14px 5px 12px;
  border-left:4px solid var(--verde);
  transform:skewX(-12deg);
  background:rgba(143,212,0,.1);
  margin-bottom:18px;
}
.lamina > span{display:block;transform:skewX(12deg)}
.bloco--escuro .lamina{color:var(--verde);background:rgba(143,212,0,.12)}

.cabeca{max-width:760px;margin-bottom:clamp(34px,4vw,52px)}
.cabeca p{color:var(--fumaca);font-size:1.06rem;margin-top:16px}
.bloco--escuro .cabeca p{color:#A9B5AE}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;
  font-family:"Archivo",sans-serif;
  font-weight:600;font-size:.99rem;
  border:0;cursor:pointer;
  border-radius:3px;
  transition:transform var(--transicao),background var(--transicao),color var(--transicao),box-shadow var(--transicao);
  line-height:1.25;
  text-align:left;
}
.btn svg{flex:0 0 auto}
.btn--verde{background:var(--verde);color:#0C1210;box-shadow:0 10px 26px -14px rgba(143,212,0,.9)}
.btn--verde:hover{background:#A2EC00;transform:translateY(-3px)}
.btn--linha{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--linha:hover{background:var(--verde);color:#0C1210;box-shadow:inset 0 0 0 1.5px var(--verde);transform:translateY(-3px)}
.btn--escuro{background:var(--grafite);color:#fff}
.btn--escuro:hover{background:#000;transform:translateY(-3px)}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:90;
  background:rgba(12,18,16,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borda-clara);
  transition:background var(--transicao);
}
.topo__env{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.marca{display:flex;align-items:center;gap:12px}
.marca img{width:56px;height:auto;border-radius:9px}
.marca__txt{display:flex;flex-direction:column;line-height:1}
.marca__nome{font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:1.35rem;color:#fff;letter-spacing:.02em}
.marca__sub{font-size:.66rem;letter-spacing:.24em;color:var(--verde);font-weight:600;margin-top:4px}

.menu{display:flex;align-items:center;gap:6px}
.menu a{
  color:#D6DED9;font-size:.93rem;font-weight:500;padding:9px 13px;border-radius:3px;
  transition:color var(--transicao),background var(--transicao);
}
.menu a:hover,.menu a.ativo{color:var(--verde);background:rgba(143,212,0,.09)}
.menu__rotulo{
  display:inline-block;color:#D6DED9;font-size:.93rem;font-weight:500;padding:9px 13px;
  cursor:default;transition:color var(--transicao);
}
.tem-filhos:hover .menu__rotulo,.tem-filhos:focus-within .menu__rotulo{color:var(--verde)}
.topo .btn{padding:12px 20px;font-size:.92rem}

.abridor{display:none;background:none;border:1px solid var(--borda-clara);border-radius:3px;padding:10px;cursor:pointer}
.abridor span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:transform var(--transicao),opacity var(--transicao)}
.abridor[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.abridor[aria-expanded="true"] span:nth-child(2){opacity:0}
.abridor[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* dropdown de serviços */
.tem-filhos{position:relative}
.gaveta{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);
  background:var(--breu-2);border:1px solid var(--borda-clara);border-radius:4px;
  padding:10px;min-width:290px;
  opacity:0;visibility:hidden;transition:opacity var(--transicao),transform var(--transicao),visibility var(--transicao);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
.tem-filhos:hover .gaveta,.tem-filhos:focus-within .gaveta{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.gaveta a{display:block;padding:10px 12px;font-size:.9rem}

/* ---------- hero ---------- */
.hero{
  background:var(--breu);
  color:#E7EDE9;
  position:relative;
  overflow:hidden;
  padding:clamp(56px,7vw,92px) 0 clamp(60px,7vw,96px);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:120px;
  background:linear-gradient(to bottom,transparent,rgba(143,212,0,.05));
  pointer-events:none;
}
.hero__grade{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero__titulo{color:#fff;text-transform:uppercase}
.hero__titulo em{font-style:normal;color:var(--verde);display:block}
.hero__linha{
  width:88px;height:5px;background:var(--verde);margin:26px 0;transform:skewX(-12deg);
}
.hero__texto{font-size:1.1rem;color:#B4C0B9;max-width:52ch}
.hero__acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__pes{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.selo{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.85rem;color:#C3CEC7;
  border:1px solid var(--borda-clara);border-radius:999px;padding:8px 16px;
}
.selo i{width:7px;height:7px;background:var(--verde);border-radius:50%;display:block}

/* mapa animado do hero */
.malha{position:relative}
.malha svg{width:100%;height:auto;display:block;overflow:visible}
.rota{stroke:var(--verde);stroke-width:2;fill:none;stroke-dasharray:7 9;opacity:.9}
.rota--fina{stroke:rgba(143,212,0,.4);stroke-width:1.4}
.polo{fill:#fff}
.polo--hub{fill:var(--verde)}
.rotulo{font-family:"Archivo",sans-serif;font-size:11.5px;fill:#9FAEA6;letter-spacing:.04em}
.rotulo--hub{fill:#fff;font-weight:600;font-size:14px}
.contorno{fill:rgba(143,212,0,.045);stroke:rgba(143,212,0,.28);stroke-width:1.2}
.pulso{fill:var(--verde);opacity:.45}

/* ---------- barra corrida ---------- */
.esteira{background:var(--verde);color:#0C1210;padding:13px 0;overflow:hidden;border-top:1px solid #0C1210}
.esteira__trilho{display:flex;gap:40px;width:max-content;animation:correr 34s linear infinite}
.esteira__trilho span{
  font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:40px;
}
.esteira__trilho span::after{content:"";width:8px;height:8px;background:#0C1210;transform:rotate(45deg)}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- cartões de serviço ---------- */
.servicos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cartao{
  background:var(--branco);
  border:1px solid var(--borda-escura);
  padding:30px 26px 26px;
  position:relative;
  display:flex;flex-direction:column;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  transition:transform var(--transicao),box-shadow var(--transicao),border-color var(--transicao);
}
.cartao:hover{transform:translateY(-6px);box-shadow:0 26px 50px -34px rgba(12,18,16,.6);border-color:rgba(143,212,0,.6)}
.cartao__icone{width:46px;height:46px;color:var(--verde-fundo);margin-bottom:20px}
.cartao__icone svg{width:100%;height:100%}
.cartao h3{margin-bottom:10px}
.cartao p{color:var(--fumaca);font-size:.97rem}
.cartao__link{
  margin-top:20px;color:var(--grafite);font-weight:600;font-size:.93rem;
  display:inline-flex;align-items:center;gap:8px;
}
.cartao__link i{width:18px;height:2px;background:var(--verde);display:block;transition:width var(--transicao)}
.cartao:hover .cartao__link i{width:30px}

/* ---------- etapas ---------- */
.etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--borda-clara)}
.etapa{padding:30px 26px 30px 0;border-right:1px solid var(--borda-clara);position:relative}
.etapa:last-child{border-right:0}
.etapa__n{
  font-family:"Saira Condensed",sans-serif;font-size:3rem;font-weight:700;color:var(--verde);
  line-height:1;display:block;margin-bottom:14px;transform:skewX(-12deg);
}
.etapa h3{font-size:1.2rem;margin-bottom:8px;color:#fff}
.etapa p{color:#A9B5AE;font-size:.95rem}

/* ---------- diferenciais ---------- */
.dupla{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,70px);align-items:center}
.lista-check{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.lista-check li{display:flex;gap:14px;align-items:flex-start;font-size:1rem}
.lista-check li::before{
  content:"";flex:0 0 auto;width:12px;height:12px;background:var(--verde);margin-top:7px;
  transform:skewX(-12deg);
}
.lista-check strong{display:block;font-weight:600}
.lista-check span{color:var(--fumaca);font-size:.95rem;display:block;margin-top:2px}
.bloco--escuro .lista-check span{color:#A9B5AE}

.moldura{position:relative}
.moldura img{width:100%;border-radius:6px}
.moldura::before{
  content:"";position:absolute;inset:16px -16px -16px 16px;border:1.5px solid var(--verde);z-index:-1;border-radius:6px;
}

/* ---------- cobertura ---------- */
.regioes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.regiao{
  border:1px solid var(--borda-clara);padding:20px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  transition:background var(--transicao);
}
.regiao:hover{background:rgba(143,212,0,.07)}
.regiao strong{display:block;font-family:"Saira Condensed",sans-serif;font-size:1.3rem;color:#fff}
.regiao span{font-size:.88rem;color:#9FAEA6}

/* ---------- faq ---------- */
.faq{max-width:840px}
.duvida{border-bottom:1px solid var(--borda-escura)}
.duvida__botao{
  width:100%;background:none;border:0;padding:22px 44px 22px 0;text-align:left;cursor:pointer;
  font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:1.22rem;color:var(--grafite);
  position:relative;line-height:1.2;
}
.duvida__botao::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:2.5px solid var(--verde-fundo);border-bottom:2.5px solid var(--verde-fundo);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--transicao);
}
.duvida.aberta .duvida__botao::after{transform:translateY(-30%) rotate(-135deg)}
.duvida__corpo{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.61,.36,1)}
.duvida__corpo > div{padding:0 40px 24px 0;color:var(--fumaca)}

/* ---------- contato ---------- */
.contato{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,64px);align-items:start}
.dados{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:22px}
.dados li{display:flex;gap:16px;align-items:flex-start}
.dados__ic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;background:rgba(143,212,0,.14);color:var(--verde);border-radius:4px}
.dados__ic svg{width:19px;height:19px}
.dados b{display:block;font-size:.78rem;letter-spacing:.1em;color:#8D9A93;font-weight:600;margin-bottom:3px}
.dados a,.dados p{color:#E7EDE9;font-size:1rem;display:block}
.dados a:hover{color:var(--verde)}

.form{background:var(--breu-2);border:1px solid var(--borda-clara);padding:clamp(24px,3vw,36px);border-radius:5px}
.campo{margin-bottom:18px}
.campo label{display:block;font-size:.82rem;letter-spacing:.06em;color:#A9B5AE;margin-bottom:8px;font-weight:600}
.campo input,.campo select,.campo textarea{
  width:100%;padding:14px 15px;background:var(--breu-3);border:1px solid var(--borda-clara);
  color:#fff;font-family:inherit;font-size:.98rem;border-radius:3px;transition:border-color var(--transicao);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--verde);outline:none}
.campo textarea{resize:vertical;min-height:110px}
.form .btn{width:100%;justify-content:center;text-align:center}

/* ---------- chamada final ---------- */
.chamada{text-align:center;max-width:780px;margin:0 auto}
.chamada h2{margin-bottom:18px}
.chamada p{color:#A9B5AE;font-size:1.08rem;margin-bottom:32px}
.chamada__acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- rodapé ---------- */
.rodape{background:#070B09;color:#8D9A93;padding:60px 0 26px;font-size:.93rem}
.rodape__grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--borda-clara)}
.rodape h4{color:#fff;font-size:1.05rem;margin-bottom:16px;letter-spacing:.03em}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rodape a:hover{color:var(--verde)}
.rodape__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.85rem}
.sociais{display:flex;gap:10px;margin-top:20px}
.sociais a{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--borda-clara);border-radius:4px;
  color:#C3CEC7;transition:background var(--transicao),color var(--transicao),transform var(--transicao);
}
.sociais a:hover{background:var(--verde);color:#0C1210;transform:translateY(-3px)}
.sociais svg{width:18px;height:18px}

/* ---------- botão flutuante ---------- */
.zap{
  position:fixed;right:18px;bottom:18px;z-index:95;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(37,211,102,.85);
  transition:transform var(--transicao);
}
.zap:hover{transform:scale(1.07)}
.zap svg{width:30px;height:30px}

/* ---------- páginas internas ---------- */
.capa{background:var(--breu);color:#E7EDE9;padding:clamp(52px,6vw,84px) 0;position:relative;overflow:hidden}
.capa__grade{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center}
.capa h1{font-size:clamp(2.2rem,4.8vw,3.6rem);text-transform:uppercase;color:#fff}
.capa p{color:#B4C0B9;font-size:1.08rem;margin-top:20px;max-width:56ch}
.capa .btn{margin-top:30px}
.migalhas{font-size:.85rem;color:#8D9A93;margin-bottom:20px}
.migalhas a:hover{color:var(--verde)}
.ficha{border:1px solid var(--borda-clara);background:var(--breu-2);border-radius:5px;padding:8px 26px}
.ficha__linha{display:flex;gap:18px;justify-content:space-between;align-items:baseline;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ficha__linha:last-child{border-bottom:0}
.ficha__rot{color:#8D9A93;font-size:.86rem;flex:0 0 auto}
.ficha__val{color:#fff;font-weight:600;font-size:.97rem;text-align:right;line-height:1.35}
@media (max-width:640px){
  .ficha{padding:6px 18px}
  .ficha__linha{flex-direction:column;gap:5px;align-items:flex-start;padding:14px 0}
  .ficha__val{text-align:left}
}

.texto{max-width:70ch}
.texto h3{margin:34px 0 12px}
.texto h3:first-child{margin-top:0}

.caixas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.caixa{background:var(--branco);border:1px solid var(--borda-escura);padding:24px;border-left:4px solid var(--verde)}
.caixa h4{font-family:"Saira Condensed",sans-serif;font-size:1.18rem;margin-bottom:8px}
.caixa p{font-size:.95rem;color:var(--fumaca)}

.faixa-cta{background:var(--verde);color:#0C1210;padding:clamp(44px,5vw,64px) 0}
.faixa-cta__env{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.faixa-cta h2{color:#0C1210;max-width:22ch}
.faixa-cta p{margin-top:10px;font-weight:500;max-width:46ch}

/* ---------- revelação ---------- */
.rev{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.rev.vis{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .servicos{grid-template-columns:repeat(2,1fr)}
  .etapas{grid-template-columns:repeat(2,1fr)}
  .etapa:nth-child(2){border-right:0}
  .etapa{border-bottom:1px solid var(--borda-clara)}
  .regioes{grid-template-columns:repeat(2,1fr)}
  .caixas{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .hero__grade,.dupla,.contato,.capa__grade{grid-template-columns:1fr}
  .malha{order:-1;max-width:520px}
  .moldura::before{display:none}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .rodape__grade > div:first-child{grid-column:1 / -1}

  .abridor{display:block}
  .menu{
    position:fixed;inset:78px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--breu);border-bottom:1px solid var(--borda-clara);
    padding:14px 24px 26px;
    max-height:calc(100vh - 78px);overflow-y:auto;
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:opacity var(--transicao),transform var(--transicao),visibility var(--transicao);
  }
  .menu.aberto{opacity:1;visibility:visible;transform:none}
  .menu a{padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.07);font-size:1rem}
  .menu > .btn{margin-top:16px;justify-content:center;text-align:center}
  .gaveta{
    position:static;transform:none;opacity:1;visibility:visible;background:transparent;border:0;
    box-shadow:none;padding:0 0 0 14px;min-width:0;
  }
  .tem-filhos:hover .gaveta,.tem-filhos:focus-within .gaveta{transform:none}
  .gaveta a{font-size:.92rem;color:#A9B5AE}
  .menu__rotulo{
    padding:14px 4px;color:#fff;font-weight:600;font-size:1rem;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
}

@media (max-width:640px){
  body{font-size:16px}
  .env{padding:0 18px}
  .servicos,.etapas,.regioes,.caixas{grid-template-columns:1fr}
  .etapa{border-right:0;padding:24px 0}
  .btn{width:100%;justify-content:center;text-align:center}
  .hero__acoes .btn,.chamada__acoes .btn,.faixa-cta .btn{width:100%}
  .topo .btn{display:none}
  .menu > .btn{display:inline-flex;width:100%}
  .rodape__grade{grid-template-columns:1fr}
  .marca img{width:48px}
  .faixa-cta__env{flex-direction:column;align-items:flex-start}
  .moldura{margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
}

/* ---------- animação das rotas ---------- */
@keyframes fluxo{to{stroke-dashoffset:-64}}
.rota{animation:fluxo 2.4s linear infinite}
.rota--fina{animation-duration:3.6s}
@keyframes bater{0%{r:10;opacity:.5}70%{r:30;opacity:0}100%{r:30;opacity:0}}
.pulso{animation:bater 2.8s ease-out infinite}
@keyframes entrar{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero__grade > *{animation:entrar .9s cubic-bezier(.22,.61,.36,1) both}
.hero__grade > *:nth-child(2){animation-delay:.18s}

/* ---------- venda de containers ---------- */
.produtos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.produto{
  background:var(--branco);border:1px solid var(--borda-escura);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform var(--transicao),box-shadow var(--transicao),border-color var(--transicao);
}
.produto:hover{transform:translateY(-5px);box-shadow:0 26px 50px -34px rgba(12,18,16,.55);border-color:rgba(143,212,0,.6)}
.produto__foto{position:relative;background:var(--breu)}
.produto__foto img{width:100%;aspect-ratio:16/11;object-fit:cover}
.produto__tag{
  position:absolute;top:0;left:0;background:var(--verde);color:#0C1210;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.06em;
  padding:7px 16px 7px 13px;
}
.produto__tag--usado{background:#fff;color:#151A18}
.produto__corpo{padding:26px;display:flex;flex-direction:column;flex:1}
.produto h3{margin-bottom:6px}
.produto__nota{color:var(--fumaca);font-size:.93rem;margin-bottom:18px}
.especs{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--borda-escura)}
.especs li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--borda-escura);font-size:.93rem}
.especs span{color:var(--fumaca)}
.especs b{font-weight:600;text-align:right}
.preco{display:flex;align-items:baseline;gap:8px;margin:auto 0 18px}
.preco small{font-size:1rem;color:var(--fumaca);font-weight:600}
.preco strong{font-family:"Saira Condensed",sans-serif;font-size:2.5rem;line-height:1;color:var(--grafite)}
.produto .btn{justify-content:center;text-align:center}
@media (max-width:760px){.produtos{grid-template-columns:1fr}}

/* card largo de destaque (venda de containers na home) */
.cartao--largo{
  grid-column:1 / -1;flex-direction:row;align-items:center;gap:30px;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
}
.cartao--largo .cartao__icone{margin-bottom:0;flex:0 0 auto}
.cartao--largo>div{flex:1}
.cartao--largo h3{margin-bottom:6px}
.cartao--largo .btn{flex:0 0 auto}
.preco small:last-child{margin-left:-6px}
@media (max-width:760px){
  .cartao--largo{flex-direction:column;align-items:flex-start;gap:18px}
  .cartao--largo .btn{width:100%}
}