/* Raio-X do Carrossel · página de venda v6 (27/10/2026): a v5 aprovada + o melhor da página B + gatilhos de venda.
   Botão verde e só ele verde. Contagem regressiva real do lote. */
/* origem v5:
   Mesma copy da v4 (aprovada). Visual novo, celular primeiro: a letra forte da revista (Montserrat 800),
   grifo amarelo nas palavras que importam, cartões arredondados com sombra leve, capas reais grandes,
   um azul vivo para a ação e verde só nos checks. Sem serifa, sem bege, sem fio preto de jornal. */

/* Montserrat (licença livre OFL) guardada no próprio site: um arquivo variável, pesos 500 a 900, letras do português. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("../fontes/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --chao: #ffffff;
  --cinza: #f3f5f9;
  --tinta: #0d1321;
  --tinta-2: #4a5568;
  --linha: #e3e8f0;
  --marca: #1d4ed8;
  --marca-escura: #1e3a8a;
  --marca-clara: #eaf0ff;
  --grifo: #ffe45c;
  --vivo: #e11d48;
  --ok: #16a34a;
  --cta: #15803d;
  --cta-escuro: #166534;
  --noite: #0b1430;

  --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 18px;
  --raio-p: 12px;
  --sombra: 0 14px 34px -16px rgba(13, 19, 33, .28);
  --sombra-forte: 0 22px 50px -20px rgba(13, 19, 33, .45);

  --t-small: 0.9375rem;                                  /* 15px */
  --t-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17 a 19px */
  --t-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);/* 19 a 23px */
  --t-sub: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);    /* 22 a 30px */
  --t-head: clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem);    /* 30 a 52px */
  --t-display: clamp(2.25rem, 1.1rem + 4.6vw, 4.5rem);   /* 36 a 72px */

  --margem: clamp(20px, 4vw, 48px);
  --largura: 1160px;
  --gap-bloco: clamp(52px, 7vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--chao); color: var(--tinta); font: 500 var(--t-body)/1.6 var(--fonte); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--fonte); font-weight: 800; color: var(--tinta); letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: var(--t-head); line-height: 1.1; }
h3 { font-size: var(--t-sub); line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
b, strong { font-weight: 800; }
mark { background: linear-gradient(transparent 52%, var(--grifo) 52%, var(--grifo) 92%, transparent 92%); color: inherit; padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 6px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: #fff; padding: 10px 14px; z-index: 50; }
.pular:focus { left: 8px; }
.env { width: 100%; max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 18px 28px;
  background: var(--cta); color: #fff; border: 0; border-radius: 14px; box-shadow: 0 12px 26px -10px rgba(21, 128, 61, .7);
  font: 800 1.0625rem/1.2 var(--fonte); letter-spacing: .01em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.botao::after { content: ""; width: 18px; height: 18px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat; }
.botao:hover { background: var(--cta-escuro); transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(21, 128, 61, .75); }
.botao:active { transform: translateY(0); }
.botao[aria-disabled="true"] { background: #e5e8ee; color: var(--tinta-2); box-shadow: none; transform: none; cursor: default; }
.botao[aria-disabled="true"]::after { display: none; }
.cta { display: grid; gap: 10px; justify-items: stretch; }
.cta .botao { width: 100%; max-width: 480px; }
.cta__linha { font-size: var(--t-small); color: var(--tinta-2); max-width: 46ch; }
.cta__aviso { font-size: var(--t-small); font-weight: 700; color: var(--vivo); }
.cta--linha { margin-top: clamp(40px, 5vw, 56px); justify-items: center; text-align: center; }
.cta--linha .cta__linha { margin-inline: auto; }
@media (max-width: 430px) { .botao { font-size: .96875rem; padding-inline: 14px; letter-spacing: 0; } .caixa-preco { padding: 22px 18px; } .caixa-preco .botao { white-space: normal; text-wrap: balance; line-height: 1.25; } }

/* ---------- topo ---------- */
.topo { padding-block: 14px; border-bottom: 1px solid var(--linha); }
.topo__grade { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; }
.topo__marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--t-small); letter-spacing: -0.01em; }
.topo__vivo { display: inline-flex; align-items: center; gap: 6px; background: var(--vivo); color: #fff; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; white-space: nowrap; flex: none; }
.topo__vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pisca 1.4s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .25; } }
.topo__com { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-small); font-weight: 600; color: var(--tinta-2); }
.topo__com img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
@media (max-width: 559px) { .topo__com { font-size: .8125rem; } .topo__com span { line-height: 1.25; } .topo__marca { font-size: .875rem; } }

/* ---------- 1 · capa ---------- */
.capa { padding-block: clamp(28px, 5vw, 64px) clamp(48px, 6vw, 88px); background: linear-gradient(180deg, #fff 0%, var(--cinza) 100%); }
.capa__grade { display: grid; gap: 22px; }
.capa h1 { font-size: var(--t-display); line-height: 1.04; font-weight: 900; letter-spacing: -0.035em; }
.capa__texto { display: grid; gap: 18px; }
.capa__apoio { font-size: var(--t-lead); line-height: 1.45; font-weight: 600; color: var(--tinta); max-width: 36ch; }
.capa__quando { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: start; background: #fff; border-radius: var(--raio-p); padding: 14px 16px; box-shadow: var(--sombra); font-size: var(--t-small); line-height: 1.45; max-width: 480px; }
.capa__quando::before { display: none; content: ""; grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--marca-clara) center/24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.capa__quando b { font-size: var(--t-body); display: block; }
.capa__quando .ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--marca-clara); stroke: var(--marca); }
.capa__quando > span { display: block; }
.capa__compra { display: grid; gap: 14px; }
.capa__lote { font-weight: 800; font-size: var(--t-lead); }
.capa__bancada { margin: 6px 0 0; display: grid; gap: 14px; }
.capa__bancada figcaption { font-size: var(--t-small); color: var(--tinta-2); }
/* celular: as capas viram um carrossel para deslizar */
.leque { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--margem)); padding: 6px var(--margem) 18px; scrollbar-width: none; }
.leque::-webkit-scrollbar { display: none; }
.leque img { flex: 0 0 70%; max-width: 300px; border-radius: 14px; box-shadow: var(--sombra-forte); scroll-snap-align: start; }
.leque__frente { order: -1; }
@media (min-width: 1024px) {
  .capa__grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "titulo bancada" "texto bancada"; column-gap: 64px; row-gap: 24px; }
  .capa__titulo { grid-area: titulo; align-self: end; }
  .capa h1 { font-size: clamp(2.75rem, 0.9rem + 3vw, 3.5rem); }
  .capa__texto { grid-area: texto; }
  .capa__bancada { grid-area: bancada; align-self: center; justify-items: center; }
  .capa__bancada figcaption { text-align: center; max-width: 40ch; }
  .leque { position: relative; display: block; overflow: visible; margin: 0; padding: 0; width: min(100%, 580px); aspect-ratio: 100 / 70; }
  .leque img { position: absolute; width: 46%; max-width: none; top: 2%; left: 27%; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
  .leque__frente { z-index: 2; }
  .leque__tras--1 { transform: translateX(-60%) rotate(-6deg) scale(.92); }
  .leque__tras--2 { transform: translateX(60%) rotate(6deg) scale(.92); }
  html.js .leque:not(.aberto) .leque__tras--1, html.js .leque:not(.aberto) .leque__tras--2 { transform: none; }
}