/* ============================================================
   OFERTAS ATUALIZADAS — Identidade Visual (Vermelho Editorial)
   Fonte da verdade para TODA página (land page WordPress + HTML).
   Cole este bloco no <style> da página OU importe como arquivo.
   Referência conceitual: CORES-E-FONTES.md
   ============================================================ */

/* Fontes (colar no <head> da página):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
   (Allura só se for usar assinatura: &family=Allura)
*/

:root{
  /* ---- Cores ---- */
  --oa-vermelho:#9C1814;   /* base/dominante, destaque, urgência */
  --oa-ameixa:#4A0F0D;     /* títulos, botão forte, fundo escuro */
  --oa-creme:#FBF6F1;      /* FUNDO da página (o respiro) */
  --oa-card:#FFFFFF;       /* fundo de cartões (destaca sobre o creme) */
  --oa-grafite:#2A1512;    /* texto/corpo (nunca em título) */
  --oa-rosa:#C77E6A;       /* detalhe: bordas finas, tags */
  --oa-rosa-claro:#F3E1DB; /* fundo suave de badge/selo */
  --oa-tonal:#F4DDD7;      /* fundo do botão tonal */
  --oa-tonal-borda:#E9C8C0;
  --oa-verde:#25D366;      /* SÓ botão de WhatsApp */
  /* Cinza neutro quente pra cabeçalho de tabela / faixa de dado. É o "cinzinha"
     que a Dani pede, na temperatura da paleta (o cinza frio destoa do creme).
     #EDE7E1 dá ΔE 5,2 sobre o creme — não clarear, senão o cabeçalho some. */
  --oa-cinza-tabela:#EDE7E1;
  /* Superfície SELECIONADA em painel (linha de tabela, chip de filtro ativo).
     NÃO use o tonal rosa aqui: em painel existe badge pálida de sinal
     (#fee2e2 = prejuízo) e o tonal fica a ΔE 4,2 dela — a linha selecionada
     leria como "esta linha está ruim". A areia sai do eixo do rosa. */
  --oa-selecao-painel:#E8DED5;
  --oa-verde-escuro:#1DA851;
  /* Texto claro sobre SUPERFÍCIE ESCURA (faixa ameixa, fundo vermelho).
     Continua claro nos dois modos — a superfície escura nunca vira clara. */
  --oa-branco-quente:#FBF6F1;
  /* Texto DENTRO de botão preenchido. Separado do de cima porque no modo escuro
     o botão forte clareia e este texto precisa INVERTER pra escuro, enquanto o
     de cima continua claro. Um token só quebra um dos dois casos.
     NO MODO ESCURO: use o grafite --oa-grafite (#2A1512) — 5,45:1 sobre o botão
     claro. A inversão fica no bloco `prefers-color-scheme: dark` DA PÁGINA, nunca
     aqui: página sem tema escuro mantém o botão escuro, e inverter o texto aqui
     deixaria escuro-sobre-escuro. Ver GUIA-PAGINAS.md. */
  --oa-texto-botao:#FBF6F1;
  /* Texto secundário. #7A5F58 dá 5,42:1 sobre o creme — acima do mínimo AA (4,5).
     NÃO clarear: o antigo #8a6f66 dava 4,30 e reprovava, justo em texto de 12px. */
  --oa-muted:#7A5F58;
  --oa-linha:rgba(156,24,20,.14);

  /* ---- Fontes ---- */
  --oa-serif:'Merriweather', Georgia, serif;            /* títulos grandes (editorial) */
  --oa-sans:'Poppins','Inter', system-ui, sans-serif;   /* corpo, botão, títulos pequenos, preço */

  /* ---- Escala de tamanho (responsiva) ---- */
  --oa-h1:clamp(30px, 6vw, 54px);   /* hero de land page (o gancho) */
  --oa-h1-app:clamp(30px, 5vw, 43px);/* faixa de cabeçalho de ferramenta/painel (compacta) */
  --oa-sub-app:15px;                 /* frase do cabeçalho de ferramenta */
  --oa-h2:clamp(23px, 4vw, 33px);   /* título de seção */
  --oa-h3:20px;                     /* título de card */
  --oa-preco:clamp(28px, 5vw, 44px);/* preço em destaque */
  --oa-corpo:17px;                  /* texto */
  --oa-pequeno:14px;                /* legenda/apoio */
  --oa-eyebrow:13px;                /* rótulo/olho-de-boi */

  /* ---- Raios ---- */
  --oa-r-botao:16px;
  --oa-r-card:18px;
  --oa-r-badge:13px;
  /* Painel DENSO (tabela, KPI, modal): raio menor. 18px repetido em dezenas de
     caixinhas vira bolha. Raio grande é de página; painel usa 10px. */
  --oa-r-painel:10px;

  /* ---- Respiro lateral (gutter) ----
     UM valor só para a faixa de cabeçalho E para o container de conteúdo.
     É isso que faz o título do cabeçalho começar na MESMA coluna do conteúdo
     abaixo. Se cada um usar o seu, o layout fica 4px fora e incomoda. */
  --oa-gutter:28px;

  /* ---- Sombra ----
     Só CARTÃO tem sombra (bem suave, pra descolar do fundo claro).
     BOTÃO é sempre chapado — sombra em botão faz ele "gritar". */
  --oa-sombra-card:0 18px 45px rgba(74,15,13,.06);
}

/* ---- Base ---- */
.oa, body.oa{background:var(--oa-creme);color:var(--oa-grafite);font-family:var(--oa-sans);font-size:var(--oa-corpo);line-height:1.55;-webkit-font-smoothing:antialiased}

/* ---- Rótulo / eyebrow ---- */
.oa-eyebrow{font-family:var(--oa-sans);font-size:var(--oa-eyebrow);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oa-vermelho)}

/* ---- Títulos (ameixa; grafite NUNCA em título) ---- */
.oa-h1{font-family:var(--oa-serif);font-weight:700;font-size:var(--oa-h1);line-height:1.12;color:var(--oa-ameixa);text-wrap:balance;margin:0}
.oa-h2{font-family:var(--oa-serif);font-weight:700;font-size:var(--oa-h2);line-height:1.18;color:var(--oa-ameixa);text-wrap:balance;margin:0}
.oa-h3{font-family:var(--oa-sans);font-weight:600;font-size:var(--oa-h3);color:var(--oa-grafite);margin:0}
.oa-destaque{color:var(--oa-vermelho)}   /* só a palavra-chave que salta dentro do título */
.oa-muted{font-size:var(--oa-pequeno);color:var(--oa-muted)}  /* legenda / texto de apoio */
/* Preço — SEMPRE no formato brasileiro: R$ 1.299,90 (ponto = milhar, vírgula = centavos).
   Nunca "R$ 1,299.90" nem "R$ 1299.9". Centavos sempre com 2 casas, mesmo em valor redondo (R$ 50,00). */
.oa-preco{font-family:var(--oa-sans);font-weight:700;font-size:var(--oa-preco);color:var(--oa-vermelho);font-variant-numeric:tabular-nums}
.oa-preco-de{font-family:var(--oa-sans);font-size:var(--oa-pequeno);color:var(--oa-muted);text-decoration:line-through} /* preço "de" riscado */

/* ---- Botões (chapados, SEM sombra, caixa normal) ---- */
.oa-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--oa-sans);font-weight:600;font-size:17px;line-height:1;border-radius:var(--oa-r-botao);padding:15px 24px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:filter .15s ease}
/* HOVER — regra de ouro: hover NUNCA enfraquece o botão. Ele só reforça.
   (Erro comum: puxar a borda do contorno pro rosa no hover — o botão fica
   mais fraco parado do que apontado, e a pessoa acha que desabilitou.) */
.oa-btn--verde:hover,.oa-btn--ameixa:hover{filter:brightness(1.08)}      /* cheio: acende */
.oa-btn--tonal:hover{background:#EFD0C8;border-color:var(--oa-rosa)}     /* tonal: adensa */
.oa-btn--contorno:hover{background:var(--oa-rosa-claro)}                 /* contorno: ganha fundo, borda continua vermelha */

/* SELECIONADO — estado de navegação (ferramenta/conta/filtro ativo).
   Sempre ameixa cheio: é o único jeito de não confundir com o tonal, que já é
   o estado normal. Use aria-pressed="true" (ou .is-selecionado). */
.oa-btn[aria-pressed="true"],.oa-btn.is-selecionado{background:var(--oa-ameixa);color:var(--oa-texto-botao);border-color:transparent}
.oa-btn--verde{background:var(--oa-verde);color:var(--oa-texto-botao)}                 /* AÇÃO — só WhatsApp */
.oa-btn--ameixa{background:var(--oa-ameixa);color:var(--oa-texto-botao)}               /* Principal / forte */
.oa-btn--tonal{background:var(--oa-tonal);color:var(--oa-vermelho);border-color:var(--oa-tonal-borda)} /* PADRÃO — destaca sem gritar */
.oa-btn--contorno{background:transparent;color:var(--oa-vermelho);border-color:var(--oa-vermelho)}     /* Secundária / leve */
/* Vermelho preenchido: NUNCA por conta própria — só quando a Dani pedir explicitamente.
   Ele grita; por padrão a ação forte é ameixa e a urgência é TEXTO vermelho. */
.oa-btn--vermelho{background:var(--oa-vermelho);color:var(--oa-texto-botao)}
.oa-btn--vermelho:hover{filter:brightness(1.08)}

/* ---- Card ----
   Sombra suave é permitida (e recomendada) no cartão: é o que faz ele
   "descolar" do fundo claro. É o contrário do botão, que é sempre chapado. */
.oa-card{background:var(--oa-card);border:1px solid var(--oa-linha);border-radius:var(--oa-r-card);padding:22px 24px;box-shadow:var(--oa-sombra-card)}
.oa-card--plano{box-shadow:none}  /* dentro de lista longa, se a sombra pesar */

/* ---- Pill de valor (contorno) ---- */
.oa-pill{display:inline-block;border:1.5px solid var(--oa-rosa);background:var(--oa-card);color:var(--oa-vermelho);border-radius:999px;padding:8px 16px;font-family:var(--oa-sans);font-weight:600;font-size:14px}

/* ---- Badge de ícone (ícone dentro de quadradinho rosa claro) ---- */
.oa-badge{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--oa-r-badge);background:var(--oa-rosa-claro);color:var(--oa-vermelho);flex:0 0 auto}

/* ---- Cabeçalho / bloco de marca (brilho + título + frase) ----
   O brilho fica "pendurado" à esquerda; título e frase alinham entre si.  */
/* A coluna do brilho começa no gutter (mesma coluna do conteúdo abaixo da faixa).
   Nunca dê recuo negativo nem padding menor pro cabeçalho: o brilho sairia da
   coluna e a régua da esquerda deixaria de bater com o conteúdo. */
.oa-header{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start}
/* o brilho centraliza na LINHA DO TÍTULO (não no bloco todo) */
.oa-header .oa-header__spark{width:44px;height:44px;grid-row:1;align-self:center}
.oa-header .oa-header__titulo{grid-column:2;margin:0}
.oa-header .oa-header__frase{grid-column:2;margin:6px 0 0;font-size:var(--oa-corpo);color:var(--oa-muted)}
/* Faixa de cabeçalho de FERRAMENTA/PAINEL — compacta (altura ~150-160px).
   O respiro lateral usa --oa-gutter: o MESMO do container de conteúdo, pra
   o título começar na mesma coluna do que vem abaixo. */
.oa-header--faixa{padding:22px var(--oa-gutter) 26px}
/* Container de conteúdo — usa o mesmo gutter da faixa */
.oa-container{padding-left:var(--oa-gutter);padding-right:var(--oa-gutter)}
.oa-header--faixa .oa-header__titulo{font-size:var(--oa-h1-app)}
.oa-header--faixa .oa-header__frase{font-size:var(--oa-sub-app)}
.oa-header--faixa .oa-header__spark{width:40px;height:40px}

/* Cabeçalho em fundo escuro (ameixa): tudo em branco quente */
.oa-header--escuro{background:var(--oa-ameixa);padding:22px 32px 26px}
.oa-header--escuro .oa-header__titulo{color:var(--oa-branco-quente)}
.oa-header--escuro .oa-header__frase{color:rgba(251,246,241,.78)}
.oa-header--escuro .oa-header__spark{color:var(--oa-branco-quente)}

/* ---- Masthead (logo no topo de land page) ----
   Base: logo centralizado, sem linha. A linha é VARIAÇÃO, não padrão. */
.oa-masthead{display:flex;justify-content:center;margin-bottom:18px}
.oa-masthead .oa-masthead__logo{display:block;width:100%;max-width:236px;height:auto}
/* Variação com fio: use quando o que vem embaixo é lista/menu (bio, central de
   links) — o fio separa a marca do conteúdo. Página que abre com título grande
   NÃO precisa: o próprio título já faz a separação, e o fio vira ruído. */
.oa-masthead--linha{padding-bottom:16px;border-bottom:1px solid var(--oa-linha)}

/* ---- Abas ---- */
.oa-abas{display:flex;gap:28px;align-items:flex-end;border-bottom:1px solid var(--oa-linha);overflow-x:auto}
.oa-aba{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font-family:var(--oa-sans);font-weight:600;font-size:16px;color:var(--oa-muted);
  padding:12px 2px;border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s ease}
.oa-aba:hover{color:var(--oa-ameixa)}
.oa-aba[aria-selected="true"],.oa-aba.is-ativa{color:var(--oa-vermelho);border-bottom-color:var(--oa-vermelho)}
/* contador ao lado do nome da aba */
.oa-aba__n{font-size:13px;font-weight:600;color:var(--oa-muted);font-variant-numeric:tabular-nums}
.oa-aba[aria-selected="true"] .oa-aba__n,.oa-aba.is-ativa .oa-aba__n{background:var(--oa-rosa-claro);color:var(--oa-vermelho);border-radius:999px;padding:2px 8px}
/* Abas sobre fundo escuro (ameixa) */
.oa-abas--escuro{border-bottom-color:rgba(251,246,241,.18)}
.oa-abas--escuro .oa-aba{color:rgba(251,246,241,.7)}
.oa-abas--escuro .oa-aba:hover{color:var(--oa-branco-quente)}
.oa-abas--escuro .oa-aba[aria-selected="true"],.oa-abas--escuro .oa-aba.is-ativa{color:var(--oa-branco-quente);border-bottom-color:var(--oa-branco-quente)}

/* ---- Ícones (kit em icones.svg) ---- */
.oa-icone{width:20px;height:20px;display:inline-block;vertical-align:-.22em;color:currentColor;flex:0 0 auto}
.oa-icone--g{width:24px;height:24px}   /* dentro de botão */
.oa-icone--p{width:16px;height:16px}   /* inline no texto */
/* Botão só de ícone (editar/copiar/ver numa lista) */
.oa-btn-icone{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:transparent;border:1px solid var(--oa-linha);color:var(--oa-vermelho);cursor:pointer;transition:background .15s ease}
.oa-btn-icone:hover{background:var(--oa-rosa-claro)}

/* ---- Carregando ----
   Toda ação que demora precisa dizer que está acontecendo. Sem isso a pessoa
   clica de novo, acha que travou, ou sai da página. */
.oa-spinner{display:inline-block;width:15px;height:15px;border-radius:50%;flex:0 0 auto;
  border:2px solid currentColor;border-top-color:transparent;animation:oa-girar .7s linear infinite}
@keyframes oa-girar{to{transform:rotate(360deg)}}
/* Botão ocupado: vira spinner + texto no gerúndio, e trava o clique repetido */
.oa-btn[aria-busy="true"]{opacity:.85;pointer-events:none}
/* Esqueleto (bloco cinza pulsando) pra área que ainda vai chegar */
.oa-esqueleto{background:var(--oa-cinza-tabela);border-radius:8px;animation:oa-pulsar 1.3s ease-in-out infinite}
@keyframes oa-pulsar{0%,100%{opacity:1}50%{opacity:.55}}
/* Faixa discreta de "atualizando" no topo de uma seção já preenchida */
.oa-carregando-faixa{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--oa-muted);padding:10px 0}
@media (prefers-reduced-motion:reduce){
  .oa-spinner,.oa-esqueleto{animation:none}
}

/* ---- Selo de confiança ---- */
.oa-selo{display:inline-flex;align-items:center;gap:12px;background:var(--oa-rosa-claro);border-radius:14px;padding:12px 18px}