/* Black Brands Antecipada: componentes compartilhados entre captura e obrigado.
   Cor e fonte vêm de tokens.css; escala de texto e espaço vem de base-fluida.css. */

/* grão quase invisível só nos campos escuros grandes; cartões e áreas de leitura ficam lisos */
:root {
  --bb-checks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.5 4 8.5 10 1.5M6.5 8.5 12.5 1.5'/%3E%3C/svg%3E");
  --bb-star-coral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23FD5430' d='M100 0 L113.52 53.94 L154.06 15.87 L136.28 68.57 L190.96 58.46 L147.51 93.17 L198.98 114.23 L143.66 119.94 L175.57 165.49 L125.95 140.38 L128.17 195.95 L100 148 L71.83 195.95 L74.05 140.38 L24.43 165.49 L56.34 119.94 L1.02 114.23 L52.49 93.17 L9.04 58.46 L63.72 68.57 L45.94 15.87 L86.48 53.94 Z'/%3E%3C/svg%3E");
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bb-ink); }
  body { background: var(--bb-ink); }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { color: var(--bb-cream); font-family: var(--bb-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  h1, h2, h3, p { margin: 0; }
  a { color: inherit; }
  button, input { font: inherit; }
  :focus-visible { outline: 3px solid var(--bb-coral); outline-offset: 3px; }
}

@layer blocos {
  .wrap { width: min(100% - 2 * var(--gutter), 75rem); margin-inline: auto; }
  :root { --gutter: clamp(16px, 4vw, 48px); }

  /* display: Fixture Condensed 900 reto, caixa alta, entrelinha .8 (maiúscula da Fixture = .71em; acento pode encostar, o Rodrigo prefere bloco compacto) */
  .display { font-family: var(--bb-display); font-weight: 900; text-transform: uppercase; line-height: .8; letter-spacing: -.01em; }
  .coral { color: var(--bb-coral); }
  .label { font: 700 var(--bb-label)/1 var(--bb-display); letter-spacing: .08em; text-transform: uppercase; }

  /* faixa de serviço: data | hora e canal, com picote. Fonte do corpo (a mesma da subheadline): informação crítica tem que ser a mais legível */
  .service { display: inline-flex; flex-wrap: wrap; font: 700 clamp(14px, .5vw + 12px, 17px)/1.1 var(--bb-body); border-radius: var(--bb-radius); overflow: hidden; box-shadow: inset 0 0 0 2px var(--bb-coral); }
  .service > * { padding: 12px 16px; }
  .service b { background: var(--bb-coral); color: var(--bb-black); }
  .service span { border-left: 2px dashed var(--bb-coral); }

  /* botão padrão de captura: um bloco só, coral, rótulo + seta centralizados, na fonte do corpo.
     Verde fica só para o que é WhatsApp (botão do grupo no obrigado).
     Hover: o botão se preenche de creme da esquerda para a direita e a seta sai e volta. */
  .bb-btn { --btn-fill: var(--bb-cream); --btn-ink: var(--bb-black); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; overflow: hidden; padding: 20px 28px; background: var(--bb-coral) linear-gradient(var(--btn-fill), var(--btn-fill)) no-repeat 0 0 / 0% 100%; color: var(--bb-black); font: 800 clamp(16px, .4vw + 14px, 19px)/1 var(--bb-body); letter-spacing: .02em; text-transform: uppercase; border: 0; border-radius: var(--bb-radius); cursor: pointer; text-decoration: none; transition: transform .16s cubic-bezier(.23, 1, .32, 1), background-size .32s cubic-bezier(.23, 1, .32, 1), color .2s ease; }
  .bb-btn > span { white-space: nowrap; }
  .bb-btn:active { transform: scale(.98); }
  .bb-btn[disabled] { opacity: .6; cursor: progress; }
  @media (hover: hover) and (pointer: fine) {
    .bb-btn:hover { background-size: 100% 100%; color: var(--btn-ink); }
  }
  .bb-btn:focus-visible { background-size: 100% 100%; color: var(--btn-ink); }
  @media (prefers-reduced-motion: reduce) { .bb-btn { transition: none; } }
  /* inscrição enviada: o botão enche de creme e a seta vira check; o bf.js redireciona em seguida */
  .bb-btn.ok { background-size: 100% 100%; opacity: 1; cursor: default; }
  .bb-btn.ok > span { display: flex; align-items: center; gap: 12px; }
  .bb-btn.ok > span::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--bb-coral); clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 40% 72%); animation: bb-check .4s cubic-bezier(.34, 1.56, .64, 1) .12s backwards; }
  @keyframes bb-check { from { scale: 0; } }
  .form.enviado > :not(.bb-btn) { opacity: .45; pointer-events: none; transition: opacity .3s ease; }
  @media (prefers-reduced-motion: reduce) { .bb-btn.ok > span::before { animation: none; } }
  .bb-btn.block { width: 100%; }
  .bb-btn.ghost { background-color: transparent; color: var(--bb-cream); box-shadow: inset 0 0 0 2px var(--bb-cream); }
  /* grupo de WhatsApp: verde da marca com texto escuro (branco no #25D366 não passa contraste);
     no hover o rótulo enche com o verde-petróleo do app e o texto vira creme */
  .bb-btn.wa { --btn-fill: #075E54; --btn-ink: var(--bb-cream); background-color: #25D366; color: var(--bb-black); }
  .bb-btn.wa > span { display: inline-flex; align-items: center; gap: 10px; }
  .bb-btn.wa svg { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
  @media (hover: hover) and (pointer: fine) { .bb-btn.wa:hover > span { color: var(--bb-cream); } }
  .bb-btn.wa:focus-visible > span { color: var(--bb-cream); }

  /* formulário */
  .form { display: grid; gap: 12px; }
  .field { width: 100%; min-height: 54px; background: var(--bb-cream); color: var(--bb-black); border: 2px solid transparent; border-radius: var(--bb-radius); padding: 15px 16px; font: 500 16px/1.2 var(--bb-body); transition: border-color .15s; }
  .field::placeholder { color: rgba(22, 21, 19, .68); } /* 5,3:1 no creme */
  .field:focus { outline: none; border-color: var(--bb-coral); }
  .field[aria-invalid="true"] { border-color: var(--bb-coral); background: #FFE9E2; }
  .tel { display: grid; grid-template-columns: auto 1fr; align-items: stretch; background: var(--bb-cream); border-radius: var(--bb-radius); }
  .tel .ddi { display: flex; align-items: center; padding: 0 12px 0 16px; color: var(--bb-black); font: 600 16px/1 var(--bb-body); border-right: 2px dashed rgba(22, 21, 19, .25); }
  .tel .field { background: transparent; }
  .err { min-height: 0; font-size: 14px; color: var(--bb-coral); }
  .err:empty { display: none; }
  /* topo da caixa = topo da tinta da 1ª linha (ascendentes b, d, h da Plus Jakarta), medido em print 3x:
     4,6px abaixo do topo da linha de 20px */
  .consent { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 13px; line-height: 20px; color: var(--bb-cream-muted); cursor: pointer; }
  .consent input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 18px; height: 18px; margin: 4.6px 0 0; background: transparent; border: 2px solid rgba(254, 246, 231, .45); border-radius: var(--bb-radius); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
  .consent input::before { content: ""; width: 10px; height: 10px; background: var(--bb-black); clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 40% 72%); scale: 0; transition: scale .15s cubic-bezier(.23, 1, .32, 1); }
  .consent input:checked { background: var(--bb-coral); border-color: var(--bb-coral); }
  .consent input:checked::before { scale: 1; }
  @media (hover: hover) and (pointer: fine) { .consent:hover input:not(:checked) { border-color: var(--bb-cream); } }
  .fine { font-size: 14px; line-height: 1.45; color: var(--bb-cream-muted); }

  /* reveal discreto: só desloca 12px; sem JS tudo aparece */
  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { transform: none; transition: opacity .3s ease; } }

  .foot { padding: 32px 0 40px; border-top: 1px solid var(--bb-line); font-size: 13px; color: var(--bb-cream-muted); }
  .foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; text-align: center; }
  .foot a { display: inline-block; padding-block: 12px; margin-block: -12px; text-decoration: underline; text-underline-offset: 3px; } /* alvo de toque de 44px sem mexer no rodapé */

  .bb-tag, .bb-compact { display: block; width: 100%; height: auto; overflow: visible; }
  /* o SVG entra por JS: reservar a proporção evita que o hero pule quando ele chega */
  [data-bb="compact"] { aspect-ratio: 560 / 330; }
  [data-bb="tag"] { aspect-ratio: 1100 / 400; }
}

/* em "ajuste" porque o shorthand background da página zeraria a imagem */
@layer ajuste {
}