*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--tinta:#12161c;--suave:#6a7280;--linha:#e6e8ec;--fundo:#fff;
      --vivo:#e8442a;--acento:#e8442a;--acento2:#fdf1ed;--areia:#faf8f5}
html{-webkit-text-size-adjust:100%}
body{background:var(--fundo);color:var(--tinta);font:400 18px/1.72 var(--corpo);
     -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.env{width:100%;max-width:720px;margin:0 auto;padding:0 20px}

/* ── faixa de divulgação: tem que ser impossível de não ver ── */
.disc{background:#fff4d6;border-bottom:1px solid #e8d9a8;color:#5a4520;
      font:700 12px/1.5 var(--ui);letter-spacing:.04em;text-transform:uppercase;
      padding:10px 0}
.disc .env{display:flex;gap:10px;align-items:flex-start}
.disc b{background:#5a4520;color:#fff4d6;padding:1px 7px;border-radius:3px;
        white-space:nowrap;font-size:11px}

/* ── masthead ── */
/* ── masthead ── */
.tira{border-bottom:1px solid var(--linha);background:#fbfbfc}
.tira .env{display:flex;justify-content:space-between;gap:12px;
           padding-top:8px;padding-bottom:8px;
           font:600 11px/1.4 var(--ui);letter-spacing:.09em;text-transform:uppercase;
           color:#8a929c}
.top{border-bottom:3px solid var(--tinta);background:#fff}
.top .env{display:flex;align-items:center;justify-content:center;
          padding-top:22px;padding-bottom:18px}
.marca{display:inline-flex;align-items:center;text-decoration:none;color:var(--tinta)}
.logo{height:37px;width:auto;display:block}
.secoes{border-bottom:1px solid var(--linha);background:#fff}
.trilha{border-bottom:1px solid var(--linha);background:#fff}
.trilha .env{display:flex;gap:9px;align-items:center;padding-top:11px;padding-bottom:11px;
             font:600 12px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase}
.trilha a{text-decoration:none;color:var(--suave)}
.trilha a:hover{color:var(--acento)}
.trilha a:first-child{color:var(--acento)}
.trilha span{color:#c3c9d2}
.trilha span:last-child{color:var(--tinta);letter-spacing:.02em;text-transform:none;
                        font-weight:500;font-size:12.5px}
.secoes .env{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
             padding-top:11px;padding-bottom:11px;
             font:600 12px/1 var(--ui);letter-spacing:.07em;text-transform:uppercase}
.secoes a{text-decoration:none;color:#4a535e}
.secoes a:hover{color:var(--vivo)}
@media(max-width:600px){
  .tira .env span:last-child{display:none}
  .logo{height:27px}
  .secoes .env{gap:14px;font-size:11px}}

/* ── artigo ── */
article{padding:38px 0 10px}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--ui);
        letter-spacing:.02em;color:var(--suave);margin-bottom:16px}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acento)}
h1{font:400 44px/1.1 'Instrument Serif',Georgia,serif;letter-spacing:-.4px;
   margin-bottom:18px}
.olho{font:400 21px/1.6 var(--corpo);color:#404952;margin-bottom:22px}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 13px/1 var(--ui);
      color:var(--suave);border-top:1px solid var(--linha);
      border-bottom:1px solid var(--linha);padding:13px 0;margin-bottom:26px}
.meta span:not(:last-child)::after{content:"·";margin-left:8px;color:#c3c9d2}
figure{margin:0 0 12px}
figure.meio{margin:26px 0 24px}
figure.meio img{border-radius:5px}
figure img{border-radius:6px;background:#f4f6f8}
figcaption{font:400 13px/1.5 var(--ui);color:var(--suave);padding-top:9px}
h2{font:700 23px/1.34 var(--ui);letter-spacing:-.2px;margin:34px 0 12px}
p{margin-bottom:19px}
ul{margin:0 0 22px;padding:0;list-style:none}
ul li{position:relative;padding:0 0 0 20px;margin-bottom:9px}
ul li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;
              border-radius:50%;background:var(--acento)}
.nota{background:var(--areia);border-left:2px solid var(--acento);
      padding:16px 20px;margin:4px 0 24px;font:400 16px/1.65 var(--corpo);color:#3a424c}
blockquote{border-left:2px solid var(--acento);padding:4px 0 4px 20px;margin:0 0 22px;
           font:400 19px/1.6 var(--titulo);color:#2c343d}

/* ── ficha técnica ── */
.ficha{border-top:2px solid var(--tinta);margin:34px 0 6px}
.ficha h3{font:600 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
          color:var(--suave);padding:14px 0 12px}
.ficha dl{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.ficha div{padding:13px 0;border-top:1px solid var(--linha)}
.ficha div:nth-child(odd){padding-right:24px}
.ficha dt{font:600 11px/1.4 var(--ui);letter-spacing:.07em;text-transform:uppercase;
          color:var(--suave);margin-bottom:3px}
.ficha dd{font:600 16px/1.4 var(--ui)}
@media(max-width:520px){.ficha dl{grid-template-columns:1fr}
  .ficha div:nth-child(odd){border-right:0}}

/* ── botão ── */
/* Botão-pílula com badge de seta embutido. O detalhe é o que tira a cara de
   template: um retângulo arredondado com preenchimento sólido é o padrão de
   todo mundo; a pílula com o disco interno é uma decisão. */
/* Bloco de CTA emoldurado. Peso vem de moldura, respiro e tamanho — não de
   contagem regressiva nem de "últimas unidades", que reprovam. */
.oferta{border:1px solid #e7e2da;background:var(--areia);border-radius:14px;
        padding:30px 32px 26px;margin:38px 0 10px}
.oferta .olhinho{font:600 11px/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;
                 color:var(--suave);margin-bottom:12px}
.oferta .frase{font:400 25px/1.32 var(--titulo);color:var(--tinta);margin-bottom:22px}
.oferta .frase b{font-family:var(--ui);font-weight:700;font-size:.82em}
@media(max-width:560px){.oferta{padding:24px 20px 22px;border-radius:12px}
  .oferta .frase{font-size:21px}}
.acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0}
.bt{display:inline-flex;align-items:center;gap:16px;text-decoration:none;
    border-radius:999px;font:700 17px/1 var(--ui);letter-spacing:-.15px;
    padding:11px 11px 11px 30px;transition:transform .14s ease,box-shadow .14s ease}
.bt:hover{transform:translateY(-2px)}
.bt .disco{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
           flex:0 0 auto;transition:transform .14s ease}
.bt:hover .disco{transform:translateX(3px)}
.bt .disco svg{width:16px;height:16px;display:block}
@media(max-width:560px){
  .acoes{flex-direction:column;align-items:stretch}
  .bt{justify-content:space-between;font-size:16px;padding-left:24px}}
.bt-1{background:var(--acento);color:#fff;
      box-shadow:0 6px 20px -6px rgba(232,68,42,.55)}
.bt-1:hover{box-shadow:0 12px 26px -8px rgba(232,68,42,.6)}
.bt-1 .disco{background:#fff}
.bt-1 .disco svg{stroke:var(--acento)}
.bt-2{background:#fff;color:var(--tinta);border:1px solid #ddd8d0;padding-left:28px}
.bt-2 .disco{background:var(--areia);border:1px solid #e8e6e1}
.bt-2 .disco svg{stroke:var(--tinta)}
.oferta small{display:block;margin:18px 0 0;font:400 13px/1.55 var(--ui);
              color:var(--suave)}

/* ── bloco do anunciante ── */
.adv{background:#f7f8fa;border-top:1px solid var(--linha);margin-top:40px;padding:32px 0 36px}
.adv h3{font:700 12px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
        color:var(--suave);margin-bottom:14px}
.adv .nome{font:700 21px/1.3 var(--ui);margin-bottom:10px}
.adv p{font:400 15px/1.62 var(--ui);color:#404952;margin-bottom:10px}
.adv .cx{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:20px 0 4px}
@media(max-width:600px){.adv .cx{grid-template-columns:1fr}}
.adv h4{font:700 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
        color:var(--suave);margin-bottom:9px}
.adv ul{margin:0}
.adv ul li{padding-left:0;margin-bottom:7px;font:400 15px/1.55 var(--ui)}
.adv ul li::before{display:none}
.adv ul li b{font-weight:600;color:var(--suave);font-size:13px;display:block}
.adv a{color:var(--acento)}
.avisos{border-top:1px solid var(--linha);margin-top:22px;padding-top:18px}
.avisos p{font:400 13px/1.6 var(--ui);color:#5b6470;margin-bottom:9px}

/* ── rodapé ── */
footer{border-top:1px solid var(--linha);padding:26px 0 44px;
       font:400 13px/1.65 var(--ui);color:var(--suave)}
footer .logo{height:24px;margin-bottom:11px}
footer nav{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}

@media(max-width:620px){
  body{font-size:17px}
  h1{font-size:32px;letter-spacing:-.2px}
  h2{font-size:20px}
  .olho{font-size:18px}
  article{padding-top:26px}
}