/*!
* Popai — public/css/popai.css
* Base + 10 skins do content-gate. Zero dependências, zero vazamento para o tema.
*
* REGRAS DE OURO ATENDIDAS AQUI:
*  R3  — o botão de recusa é sempre visível, legível e com contraste >= 4.5:1.
*  R9  — CLS = 0: tudo é `position: fixed`, nada altera o fluxo do documento.
*        Todas as animações usam apenas `transform` e `opacity` (compositor-only).
*
* CONVENÇÃO DE ESCOPO: toda regra deste arquivo começa em `.popai-` ou está
* aninhada dentro de `.popai-root`. Nunca usamos seletores globais (`*`, `body`,
* `html`) nem reset universal — resetamos explicitamente cada elemento do card,
* porque um `* { }` dentro do overlay ainda quebraria conteúdo injetado pelo tema.
* ---------------------------------------------------------------------------
*/

/*  1. TOKENS — custom properties da marca (SPEC §2)
 Qualquer variante pode sobrescrever via style inline no `.popai-root`:
 --popai-accent, --popai-r, --popai-blur, --popai-backdrop-o.
*/

.popai-root {
  /* superfícies */
  --popai-bg-900: #0b0e14;
  --popai-bg-800: #131824;
  --popai-bg-700: #1b2231;
  --popai-line: #232c3d;

  /* texto */
  --popai-text: #e8ecf4;
  --popai-muted: #93a0b8;

  /* marca */
  --popai-brand: #6d5cff;
  --popai-brand-2: #22d3ee;
  --popai-accent: #ffb020;
  --popai-ok: #22c55e;
  --popai-danger: #ef4444;
  --popai-grad: linear-gradient(135deg, var(--popai-brand) 0%, var(--popai-brand-2) 100%);

  /* forma */
  --popai-r: 16px;
  --popai-r-btn: 12px;
  --popai-r-pill: 999px;
  --popai-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.65);

  /* backdrop */
  --popai-blur: 8px;
  --popai-backdrop-o: 0.82;

  /* fade do gate — cor de fundo do SITE, não do card */
  --popai-fade-color: #fff;

  /* tipografia */
  --popai-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --popai-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* ritmo */
  --popai-gap: 14px;
  --popai-pad: 28px;
  --popai-dur: 320ms;
  --popai-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* usados por skins específicos */
  --popai-progress: 87%;
  --popai-max-w: 440px;
}

/*  2. ROOT / OVERLAY — camada fixa, não participa do layout do documento
*/

.popai-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font-family: var(--popai-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--popai-text);
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  /* fechado por padrão: o JS adiciona .popai-is-open */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--popai-dur) var(--popai-ease), visibility 0s linear var(--popai-dur);
}

.popai-root.popai-is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--popai-dur) var(--popai-ease), visibility 0s;
}

/* box-sizing só para os filhos do overlay (escopo seguro, sem `*`) */
.popai-root .popai-backdrop, .popai-root .popai-card, .popai-root .popai-badge,
.popai-root .popai-visual, .popai-root .popai-title, .popai-root .popai-body,
.popai-root .popai-cta, .popai-root .popai-decline, .popai-root .popai-foot,
.popai-root .popai-status, .popai-root .popai-cta__icon,
.popai-root .popai-cta__label { box-sizing: border-box; }

/*  3. BACKDROP — blur com fallback sólido
 O `background` cru vem primeiro: navegadores sem backdrop-filter ficam com a
 cor opaca, que já garante o contraste do card.
*/

.popai-root .popai-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(6, 8, 14, var(--popai-backdrop-o));
  opacity: 0;
  transition: opacity var(--popai-dur) var(--popai-ease);
}

@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  .popai-root .popai-backdrop {
    -webkit-backdrop-filter: blur(var(--popai-blur));
    backdrop-filter: blur(var(--popai-blur));
  }
}

.popai-root.popai-is-open .popai-backdrop { opacity: 1; }

/*  4. CARD — contêiner do conteúdo do gate
*/

.popai-root .popai-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--popai-gap);
  width: 100%;
  max-width: var(--popai-max-w);
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 0;
  padding: var(--popai-pad);
  background: var(--popai-bg-900);
  border: 1px solid var(--popai-line);
  border-radius: var(--popai-r);
  box-shadow: var(--popai-shadow);
  text-align: center;
  /* estado inicial da animação de entrada */
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.96);
  transition: opacity var(--popai-dur) var(--popai-ease), transform var(--popai-dur) var(--popai-ease);
  will-change: transform, opacity;
}

.popai-root.popai-is-open .popai-card { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

/*  5. ELEMENTOS DO CARD — reset explícito, elemento a elemento
*/

/* badge / pill superior */
.popai-root .popai-badge {
  align-self: center;
  margin: 0;
  padding: 6px 14px;
  background: rgba(109, 92, 255, 0.14);
  border: 1px solid rgba(109, 92, 255, 0.34);
  border-radius: var(--popai-r-pill);
  color: var(--popai-brand-2);
  font: 600 11px/1.2 var(--popai-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.popai-root .popai-badge:empty { display: none; }

/* área visual — cada skin redefine o que ela é (barra, cadeado, dígito...) */
.popai-root .popai-visual {
  position: relative;
  margin: 2px 0;
  padding: 0;
  min-height: 0;
}

/* título */
.popai-root .popai-title {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--popai-text);
  font-family: var(--popai-font);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-transform: none;
  text-align: inherit;
}

/* corpo */
.popai-root .popai-body {
  margin: 0;
  padding: 0;
  color: var(--popai-muted);
  font-family: var(--popai-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  text-align: inherit;
}

/* ---------- CTA principal ---------- */
.popai-root .popai-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px; /* alvo de toque >= 48px (WCAG 2.5.8 / page experience) */
  margin: 4px 0 0;
  padding: 14px 22px;
  background: var(--popai-grad);
  border: 0;
  border-radius: var(--popai-r-btn);
  color: #fff;
  font: 700 16px/1.2 var(--popai-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 8px 24px -8px rgba(109, 92, 255, 0.7);
  transition: transform 140ms var(--popai-ease), box-shadow 200ms var(--popai-ease), filter 200ms var(--popai-ease);
}

.popai-root .popai-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 32px -8px rgba(109, 92, 255, 0.85);
}

.popai-root .popai-cta:active {
  transform: translate3d(0, 1px, 0);
  box-shadow: 0 4px 14px -6px rgba(109, 92, 255, 0.7);
}

/* foco visível de verdade — nunca só cor: anel de 3px + offset */
.popai-root .popai-cta:focus-visible, .popai-root .popai-decline:focus-visible {
  outline: 3px solid var(--popai-brand-2);
  outline-offset: 3px;
}

/* ícone de "play" desenhado em CSS (triângulo) — sem imagem, sem request */
.popai-root .popai-cta__icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  border-right: 0;
  transition: transform 200ms var(--popai-ease);
}

.popai-root .popai-cta:hover .popai-cta__icon { transform: translate3d(2px, 0, 0); }

.popai-root .popai-cta__label { display: inline-block; }

/* ---------- Botão de recusa (R3) ----------
 Obrigatório e nunca um dark pattern: 15px, peso 600, cor #C7D0E2 sobre
 #0B0E14 (contraste ~12:1), sublinhado no hover e alvo de 44px de altura.
 Botão de recusa cinza-quase-invisível é exatamente o padrão que derruba MCA. */
.popai-root .popai-decline {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--popai-line);
  border-radius: var(--popai-r-btn);
  color: #c7d0e2;
  font: 600 15px/1.3 var(--popai-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 160ms var(--popai-ease), border-color 160ms var(--popai-ease), color 160ms var(--popai-ease);
}

.popai-root .popai-decline:hover:not(:disabled) {
  background: var(--popai-bg-700);
  border-color: #3a4560;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* desabilitado durante o declineDelay — o rótulo mostra o countdown */
.popai-root .popai-decline:disabled, .popai-root .popai-decline[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: none;
}

/* rodapé / disclosure — é aqui que dizemos que haverá um anúncio */
.popai-root .popai-foot {
  margin: 2px 0 0;
  padding: 0;
  color: var(--popai-muted);
  font: 400 12.5px/1.45 var(--popai-font);
  text-align: center;
}

.popai-root .popai-foot:empty { display: none; }

/* status aria-live — vazio ocupa zero espaço, então não gera shift */
.popai-root .popai-status {
  margin: 0;
  padding: 0;
  min-height: 0;
  color: var(--popai-brand-2);
  font: 500 13px/1.4 var(--popai-font);
  text-align: center;
}

.popai-root .popai-status:not(:empty) { margin-top: 4px; }

/* spinner do rewarded */
.popai-root .popai-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 2px solid rgba(232, 236, 244, 0.25);
  border-top-color: var(--popai-brand-2);
  border-radius: 50%;
  animation: popai-spin 700ms linear infinite;
}

/*  6. ESTADOS APLICADOS PELO JS
*/

/* carregando o rewarded: trava interação sem sumir com nada (sem CLS)
   O JS aplica `popai-is-loading` na ROOT; mantemos as duas formas para que
   qualquer uma funcione (a variante no card é usada pelos skins). */
.popai-root .popai-card.popai-loading .popai-cta,
.popai-root.popai-is-loading .popai-cta {
  pointer-events: none;
  filter: saturate(0.55) brightness(0.9);
}

.popai-root .popai-card.popai-loading .popai-cta__icon,
.popai-root.popai-is-loading .popai-cta__icon {
  border-left-color: rgba(255, 255, 255, 0.6);
}

/* R3 — destaque da SAÍDA. Aplicado quando o usuário tenta fechar por um
   caminho bloqueado (ESC/backdrop): em vez de deixá-lo perdido, chamamos a
   atenção para o botão de recusa. Nunca o escondemos. */
.popai-root .popai-decline.popai-decline--hint {
  color: #fff;
  border-color: var(--popai-accent);
  box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.28);
  animation: popai-hint 1.2s var(--popai-ease) 2;
}

@keyframes popai-hint {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.28); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 176, 32, 0.12); }
}

/* shake de 400ms quando o usuário tenta fechar por caminho bloqueado */
.popai-root .popai-card.popai-shake { animation: popai-shake 400ms var(--popai-ease); }

/*  7. GATE MASK — o fade aplicado ao conteúdo do artigo
 Não usa `display:none` (isso seria cloaking, R6): o HTML continua no DOM,
 só limitamos a altura visível.
*/

.popai-gate-mask { position: relative; max-height: 46vh; overflow: hidden; }

.popai-gate-mask::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    var(--popai-fade-color, #fff) 92%
  );
}

/* variação "teaser": deixa ver mais texto antes do fade */
.popai-gate-mask.popai-gate-mask--teaser { max-height: 62vh; }

/*  8. ANIMAÇÕES — apenas transform/opacity
*/

@keyframes popai-spin {
  to { transform: rotate(360deg); }
}

@keyframes popai-shake {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-8px, 0, 0); }
  40% { transform: translate3d(7px, 0, 0); }
  60% { transform: translate3d(-5px, 0, 0); }
  80% { transform: translate3d(3px, 0, 0); }
}

@keyframes popai-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes popai-fade-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Variantes de entrada — a classe vai no root conforme design.animation.
 Cada regra descreve o estado FECHADO; a abertura volta ao neutro. */
.popai-root.popai-anim-scale-in .popai-card { transform: translate3d(0, 0, 0) scale(0.9); }

.popai-root.popai-anim-slide-up .popai-card { transform: translate3d(0, 36px, 0) scale(1); }

.popai-root.popai-anim-fade .popai-card { transform: none; }

.popai-root.popai-anim-pop .popai-card {
  transform: translate3d(0, 0, 0) scale(0.7);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.popai-root.popai-is-open.popai-anim-scale-in .popai-card,
.popai-root.popai-is-open.popai-anim-slide-up .popai-card,
.popai-root.popai-is-open.popai-anim-fade .popai-card,
.popai-root.popai-is-open.popai-anim-pop .popai-card { transform: translate3d(0, 0, 0) scale(1); }

/*  9. POSIÇÃO (design.position)
*/

.popai-root.popai-pos-top { align-items: flex-start; }

.popai-root.popai-pos-bottom { align-items: flex-end; }

/*  10. OS 10 SKINS
*/

/* --- 10.1 NEON ------------------------------------------------------------
 Dark card com moldura em gradiente animado e glow no CTA. É a resposta ao
 popup do concorrente: mesmo peso visual, hierarquia mais limpa e — a
 diferença que importa — botão de recusa honesto e bem visível.            */

/* A moldura em gradiente usa dupla camada com background-clip (padding-box para
 o fundo, border-box para o gradiente). É mais barato que um pseudo-elemento
 posicionado e não cria um stacking context extra. */
.popai-root.popai--neon .popai-card {
  background:
    linear-gradient(180deg, #10141f 0%, var(--popai-bg-900) 100%) padding-box,
    linear-gradient(120deg, var(--popai-brand), var(--popai-brand-2), var(--popai-accent), var(--popai-brand)) border-box;
  background-size: auto, 300% 300%;
  background-position: 0 0, 0% 50%;
  border: 2px solid transparent;
  animation: popai-neon-border 9s linear infinite;
}

@keyframes popai-neon-border {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 300% 50%; }
}

.popai-root.popai--neon .popai-badge {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(34, 211, 238, 0.45);
  color: var(--popai-brand-2);
}

.popai-root.popai--neon .popai-title { font-size: 26px; }

.popai-root.popai--neon .popai-cta {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 10px 34px -8px var(--popai-brand);
}

.popai-root.popai--neon .popai-cta:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 14px 44px -8px var(--popai-brand-2);
}

/* --- 10.2 GLASS -----------------------------------------------------------
 Glassmorphism claro: superfície translúcida, borda de 1px de luz e sombra
 difusa. Baixo atrito visual — o formato para conteúdo premium.            */

.popai-root.popai--glass {
  --popai-backdrop-o: 0.55;
  --popai-text: #0d1220;
  --popai-muted: #4a566e;
  --popai-max-w: 420px;
}

.popai-root.popai--glass .popai-card {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 32px 80px -20px rgba(12, 18, 34, 0.45);
  color: var(--popai-text);
}

.popai-root.popai--glass .popai-badge {
  background: rgba(109, 92, 255, 0.1);
  border-color: rgba(109, 92, 255, 0.28);
  color: #4b3ddb;
}

.popai-root.popai--glass .popai-title { font-weight: 700; letter-spacing: -0.025em; }

.popai-root.popai--glass .popai-decline {
  border-color: rgba(13, 18, 32, 0.18);
  color: #33405c; /* ~9:1 sobre o card claro */
}

.popai-root.popai--glass .popai-decline:hover:not(:disabled) {
  background: rgba(13, 18, 32, 0.06);
  border-color: rgba(13, 18, 32, 0.34);
  color: #0d1220;
}

/* --- 10.3 PROGRESS --------------------------------------------------------
 Endowed progress: o .popai-visual vira a barra. A largura vem de
 --popai-progress e o rótulo percentual de --popai-progress-label.         */

.popai-root.popai--progress .popai-visual {
  display: block;
  width: 100%;
  height: 10px;
  margin: 0 0 4px;
  background: var(--popai-bg-700);
  border-radius: var(--popai-r-pill);
  overflow: hidden;
}

.popai-root.popai--progress .popai-visual::before {
  content: "";
  display: block;
  width: var(--popai-progress, 87%);
  height: 100%;
  background: var(--popai-grad);
  border-radius: inherit;
  transform-origin: left center;
  animation: popai-fill 900ms var(--popai-ease) both;
}

.popai-root.popai--progress .popai-badge {
  order: -1;
  background: rgba(255, 176, 32, 0.14);
  border-color: rgba(255, 176, 32, 0.4);
  color: var(--popai-accent);
}

.popai-root.popai--progress .popai-title { font-size: 23px; }

.popai-root.popai--progress .popai-title::after {
  content: " " var(--popai-progress-label, "");
  color: var(--popai-accent);
  font-family: var(--popai-mono);
  font-variant-numeric: tabular-nums;
}

/* --- 10.4 UNLOCK ----------------------------------------------------------
 Cofre: cadeado 100% CSS que abre (o arco gira) no hover do card / foco do
 CTA. Card estreito e vertical, ritmo mais apertado.                       */

.popai-root.popai--unlock { --popai-max-w: 356px; --popai-gap: 12px; }

.popai-root.popai--unlock .popai-visual {
  position: relative;
  width: 58px;
  height: 62px;
  margin: 6px auto 8px;
}

/* corpo do cadeado */
.popai-root.popai--unlock .popai-visual::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58px;
  height: 40px;
  background: var(--popai-grad);
  border-radius: 10px;
  box-shadow: 0 8px 24px -8px var(--popai-brand);
}

/* arco do cadeado */
.popai-root.popai--unlock .popai-visual::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 0;
  width: 32px;
  height: 30px;
  border: 5px solid var(--popai-accent);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  transform-origin: 5px 100%;
  transition: transform 380ms var(--popai-ease);
}

.popai-root.popai--unlock .popai-card:hover .popai-visual::before,
.popai-root.popai--unlock .popai-card:focus-within .popai-visual::before {
  transform: rotate(-26deg) translate3d(0, -2px, 0);
}

.popai-root.popai--unlock .popai-title { font-size: 22px; }

.popai-root.popai--unlock .popai-body { font-size: 14.5px; }

/* --- 10.5 COUNTER ---------------------------------------------------------
 Dígito enorme em monoespaçada. O CTA entra com fade quando o JS remove
 .popai-loading. CUIDADO DE POLÍTICA: o contador conta o tempo até o CTA
 habilitar — nunca sugere clicar no anúncio.                               */

.popai-root.popai--counter { --popai-max-w: 400px; }

.popai-root.popai--counter .popai-visual {
  margin: 4px 0 0;
  color: var(--popai-accent);
  font-family: var(--popai-mono);
  font-size: 76px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: 0 0 40px rgba(255, 176, 32, 0.35);
}

.popai-root.popai--counter .popai-title { font-size: 21px; font-weight: 700; }

.popai-root.popai--counter .popai-cta { animation: popai-fade-in 420ms var(--popai-ease) both; }

.popai-root.popai--counter .popai-card.popai-loading .popai-cta { opacity: 0.4; }

/* --- 10.6 SOCIAL ----------------------------------------------------------
 Avatares empilhados em CSS puro + linha de prova social ACIMA do título.
 O número vem do banco ({count}); nunca inventamos.                        */

.popai-root.popai--social .popai-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0 0 2px;
  order: 1;
}

.popai-root.popai--social .popai-visual::before,
.popai-root.popai--social .popai-visual::after {
  content: "";
  width: 38px;
  height: 38px;
  border: 2px solid var(--popai-bg-900);
  border-radius: 50%;
}

.popai-root.popai--social .popai-visual::before {
  background: linear-gradient(135deg, #6d5cff, #22d3ee);
  margin-right: -12px;
}

.popai-root.popai--social .popai-visual::after {
  background: linear-gradient(135deg, #ffb020, #ef4444);
  margin-left: -12px;
  box-shadow: -26px 0 0 -2px var(--popai-bg-900), -26px 0 0 0 #22c55e;
}

/* a prova social é o badge, promovido a destaque e posto antes do título */
.popai-root.popai--social .popai-badge {
  order: 2;
  padding: 8px 16px;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.38);
  color: #4ade80;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.popai-root.popai--social .popai-title { order: 3; font-size: 22px; }
.popai-root.popai--social .popai-body { order: 4; }
.popai-root.popai--social .popai-cta { order: 5; }
.popai-root.popai--social .popai-decline { order: 6; }
.popai-root.popai--social .popai-foot { order: 7; }
.popai-root.popai--social .popai-status { order: 8; }

/* --- 10.7 VALUE -----------------------------------------------------------
 Troca justa: duas colunas no desktop (ícone à esquerda, texto à direita),
 paleta neutra e sóbria. É o formato de maior confiança percebida.         */

.popai-root.popai--value { --popai-max-w: 560px; --popai-brand: #4f6bed; }

.popai-root.popai--value .popai-card {
  background: #141824;
  border-color: #2a3245;
  text-align: left;
}

.popai-root.popai--value .popai-badge {
  align-self: flex-start;
  background: rgba(147, 160, 184, 0.12);
  border-color: rgba(147, 160, 184, 0.3);
  color: #b6c1d6;
}

.popai-root.popai--value .popai-title { font-size: 22px; font-weight: 700; }

.popai-root.popai--value .popai-foot { text-align: left; }

/* no mobile o ícone é peso morto: só aparece a partir de 620px */
.popai-root.popai--value .popai-visual { display: none; }

@media (min-width: 620px) {
  .popai-root.popai--value .popai-card {
    display: grid;
    grid-template-columns: 132px 1fr;
    grid-template-areas:
      "visual badge"
      "visual title"
      "visual body"
      "visual cta"
      "visual decline"
      "visual foot"
      "visual status";
    align-content: start;
    column-gap: 26px;
    row-gap: 12px;
    padding: 32px;
  }

  .popai-root.popai--value .popai-visual {
    display: block;
    grid-area: visual;
    align-self: center;
    position: relative;
    width: 116px;
    height: 116px;
    background: radial-gradient(circle at 32% 30%, rgba(79, 107, 237, 0.28), rgba(34, 211, 238, 0.06) 68%);
    border: 1px solid #2a3245;
    border-radius: 20px;
  }

  /* dois blocos que se tocam: metáfora de troca justa */
  .popai-root.popai--value .popai-visual::before,
  .popai-root.popai--value .popai-visual::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 14px;
    border-radius: 7px;
    transform: translateY(-50%);
  }

  .popai-root.popai--value .popai-visual::before { left: 12px; background: var(--popai-brand); }

  .popai-root.popai--value .popai-visual::after { right: 12px; background: var(--popai-brand-2); }

  .popai-root.popai--value .popai-badge { grid-area: badge; }
  .popai-root.popai--value .popai-title { grid-area: title; }
  .popai-root.popai--value .popai-body { grid-area: body; }
  .popai-root.popai--value .popai-cta {
    grid-area: cta;
    width: auto;
    justify-self: start;
    padding-left: 30px;
    padding-right: 30px;
  }
  .popai-root.popai--value .popai-decline {
    grid-area: decline;
    width: auto;
    justify-self: start;
    padding-left: 22px;
    padding-right: 22px;
  }
  .popai-root.popai--value .popai-foot { grid-area: foot; }
  .popai-root.popai--value .popai-status { grid-area: status; }
}

/* --- 10.8 TEASER ----------------------------------------------------------
 Editorial e largo: card baixo, ancorado logo abaixo do fade do conteúdo.
 Menos "modal", mais "continuação da página".                              */

.popai-root.popai--teaser {
  --popai-max-w: 680px;
  --popai-backdrop-o: 0.6;
  align-items: flex-end;
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

.popai-root.popai--teaser .popai-card {
  padding: 26px 30px;
  background: linear-gradient(180deg, #131824 0%, #0b0e14 100%);
  border-top: 3px solid var(--popai-brand);
  text-align: left;
}

.popai-root.popai--teaser .popai-badge { align-self: flex-start; }

.popai-root.popai--teaser .popai-title { font-size: 21px; }

.popai-root.popai--teaser .popai-body { font-size: 14.5px; }

.popai-root.popai--teaser .popai-foot { text-align: left; }

.popai-root.popai--teaser .popai-visual { display: none; }

@media (min-width: 720px) {
  .popai-root.popai--teaser .popai-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "badge badge"
      "title cta"
      "body decline"
      "foot status";
    align-items: center;
    column-gap: 28px;
    row-gap: 8px;
  }
  .popai-root.popai--teaser .popai-badge { grid-area: badge; }
  .popai-root.popai--teaser .popai-title { grid-area: title; }
  .popai-root.popai--teaser .popai-body { grid-area: body; }
  .popai-root.popai--teaser .popai-cta {
    grid-area: cta;
    width: auto;
    min-width: 230px;
    margin: 0;
  }
  .popai-root.popai--teaser .popai-decline { grid-area: decline; width: auto; min-width: 230px; }
  .popai-root.popai--teaser .popai-foot { grid-area: foot; }
  .popai-root.popai--teaser .popai-status { grid-area: status; text-align: right; }
}

/* --- 10.9 BOTTOM ----------------------------------------------------------
 Bottom sheet colado no rodapé. Backdrop leve (0.4) porque o artigo continua
 legível: menor atrito, menor conversão — o braço conservador do teste.    */

.popai-root.popai--bottom {
  --popai-backdrop-o: 0.4;
  --popai-blur: 3px;
  --popai-max-w: 640px;
  align-items: flex-end;
  padding: 0;
}

.popai-root.popai--bottom .popai-card {
  max-height: 86vh;
  padding: 22px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  border-bottom: 0;
  box-shadow: 0 -20px 60px -18px rgba(0, 0, 0, 0.7);
  transform: translate3d(0, 100%, 0);
}

.popai-root.popai--bottom.popai-is-open .popai-card { transform: translate3d(0, 0, 0); }

/* alça do sheet */
.popai-root.popai--bottom .popai-card::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 42px;
  height: 4px;
  margin-left: -21px;
  background: var(--popai-line);
  border-radius: var(--popai-r-pill);
}

.popai-root.popai--bottom .popai-visual { display: none; }

.popai-root.popai--bottom .popai-title { margin-top: 4px; font-size: 20px; }

.popai-root.popai--bottom .popai-body { font-size: 14.5px; }

@media (min-width: 700px) {
  .popai-root.popai--bottom .popai-card {
    display: grid;
    grid-template-columns: 1fr 220px;
    grid-template-areas:
      "badge cta"
      "title cta"
      "body decline"
      "foot status";
    align-items: center;
    column-gap: 24px;
    row-gap: 6px;
    text-align: left;
  }
  .popai-root.popai--bottom .popai-badge { grid-area: badge; justify-self: start; }
  .popai-root.popai--bottom .popai-title { grid-area: title; }
  .popai-root.popai--bottom .popai-body { grid-area: body; }
  .popai-root.popai--bottom .popai-cta { grid-area: cta; margin: 0; }
  .popai-root.popai--bottom .popai-decline { grid-area: decline; }
  .popai-root.popai--bottom .popai-foot { grid-area: foot; text-align: left; }
  .popai-root.popai--bottom .popai-status { grid-area: status; }
}

/* --- 10.10 EDITORIAL ------------------------------------------------------
 Nota do editor: título serifado, filete lateral de 3px na cor de acento e
 espaço para o avatar do autor. Tom humano, para nichos de autoridade.     */

.popai-root.popai--editorial { --popai-accent: #d9a441; --popai-max-w: 480px; }

.popai-root.popai--editorial .popai-card {
  padding-left: 30px;
  background: #12151d;
  border-left: 3px solid var(--popai-accent);
  border-radius: 4px var(--popai-r) var(--popai-r) 4px;
  text-align: left;
}

.popai-root.popai--editorial .popai-badge {
  align-self: flex-start;
  padding: 0 0 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(217, 164, 65, 0.4);
  border-radius: 0;
  color: var(--popai-accent);
  letter-spacing: 0.18em;
}

/* avatar do autor — o PHP pode preencher com background-image inline */
.popai-root.popai--editorial .popai-visual {
  width: 46px;
  height: 46px;
  margin: 2px 0 0;
  background: linear-gradient(135deg, #3a4152, #212734);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--popai-line);
  border-radius: 50%;
}

.popai-root.popai--editorial .popai-title {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.popai-root.popai--editorial .popai-body { color: #b3bed3; font-size: 15.5px; line-height: 1.62; }

.popai-root.popai--editorial .popai-cta {
  background: var(--popai-accent);
  color: #1a1206;
  box-shadow: 0 8px 24px -10px rgba(217, 164, 65, 0.9);
}

.popai-root.popai--editorial .popai-cta:hover {
  box-shadow: 0 12px 30px -10px rgba(217, 164, 65, 1);
}

.popai-root.popai--editorial .popai-foot { text-align: left; font-style: italic; }

/*  11. RESPONSIVO — mobile-first já é o default; aqui apertamos o mobile
 pequeno e as telas baixas em paisagem.
*/

@media (max-width: 480px) {
  .popai-root { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  .popai-root .popai-card {
    max-width: 100%;
    max-height: 92vh;
    padding: 22px 20px;
    border-radius: 18px;
  }

  .popai-root .popai-title { font-size: 21px; }

  .popai-root .popai-body { font-size: 14.5px; }

  .popai-root.popai--counter .popai-visual { font-size: 60px; }

  .popai-root.popai--teaser, .popai-root.popai--bottom { padding: 0; }

  .popai-root.popai--teaser .popai-card, .popai-root.popai--bottom .popai-card {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
  }
}

@media (max-height: 560px) {
  .popai-root .popai-card { --popai-gap: 10px; max-height: 96vh; padding: 18px 20px; }

  .popai-root .popai-title { font-size: 19px; }

  .popai-root.popai--counter .popai-visual { font-size: 46px; }
}

/*  12. TEMA DO SITE — o fade do gate precisa casar com o fundo do site
*/

@media (prefers-color-scheme: dark) {
  .popai-gate-mask { --popai-fade-color: #101317; }
}

/*  13. ALTO CONTRASTE / FORCED COLORS
 Nunca dependemos só de cor: no modo forçado, garantimos bordas visíveis.
*/

@media (forced-colors: active) {
  .popai-root .popai-card, .popai-root .popai-cta,
  .popai-root .popai-decline { border: 1px solid CanvasText; }

  .popai-root .popai-cta:focus-visible,
  .popai-root .popai-decline:focus-visible { outline: 3px solid Highlight; }
}

/*  14. PREFERS-REDUCED-MOTION — desliga TODO movimento (R9 + acessibilidade)
*/

@media (prefers-reduced-motion: reduce) {
  .popai-root, .popai-root .popai-backdrop, .popai-root .popai-card,
  .popai-root .popai-card::before, .popai-root .popai-cta, .popai-root .popai-cta__icon,
  .popai-root .popai-decline, .popai-root .popai-visual, .popai-root .popai-visual::before,
  .popai-root .popai-visual::after, .popai-root .popai-spinner {
    animation: none !important;
    transition: none !important;
  }

  .popai-root .popai-card, .popai-root.popai-anim-scale-in .popai-card,
  .popai-root.popai-anim-slide-up .popai-card, .popai-root.popai-anim-fade .popai-card,
  .popai-root.popai-anim-pop .popai-card,
  .popai-root.popai--bottom .popai-card { transform: none !important; }

  /* sem shake: sinalizamos o bloqueio com borda, não com movimento */
  .popai-root .popai-card.popai-shake {
    animation: none !important;
    border-color: var(--popai-danger) !important;
  }

  .popai-root .popai-spinner { border-top-color: var(--popai-brand-2); opacity: 0.8; }

  /* o destaque da saída vira estático: o sinal permanece, o movimento não */
  .popai-root .popai-decline.popai-decline--hint {
    animation: none !important;
    box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.35);
  }
}

/*  15. SKINS DE NICHO (SPEC-V2 §2.2) — 21 skins, 7 nichos
 Regra desta seção: cada skin precisa de UMA DIFERENÇA ESTRUTURAL real —
 posição do badge, tratamento da área visual, ordem dos blocos, ritmo
 tipográfico ou grade no desktop. Duas variantes que só trocam a cor de acento
 produzem teste A/B sem sinal, e teste sem sinal é dinheiro gasto sem resposta.

 O markup é o mesmo dos 10 genéricos (o `public/js/popai.js` NÃO muda nesta
 rodada): badge, visual, título, corpo, CTA, recusa, rodapé, status. Para skins
 desconhecidas o JS injeta `<span class="popai-icon">` dentro de `.popai-visual`
 — é esse span, mais os dois pseudo-elementos, que cada skin de nicho esculpe.

 A cor de acento vem de `design.accent` como `--popai-accent` inline; os valores
 declarados aqui são o fallback quando a variante não define nada.

 R3 continua valendo em todas: o botão de recusa nunca é escondido, nunca fica
 abaixo de 44px de alvo e nunca perde contraste.
*/

/* Base comum das 21: o `.popai-icon` deixa de ser um span inline vazio e vira
 uma caixa que cada skin usa como bem entender. */
.popai-root .popai-visual .popai-icon {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

/* --- 15.1 NAMORO ONLINE ---------------------------------------------------
 Paleta coral. As três skins não compartilham nenhuma decisão de layout:
 faixa sangrada, anéis + grade de botões, e balão de conversa.             */

/* 15.1.1 namoro-troca — ESTRUTURA: a área visual vira uma faixa que sangra
 para fora do padding do card, e o badge é sobreposto a ela. Texto à esquerda. */
.popai-root.popai--namoro-troca {
  --popai-accent: #ff4d6d;
  --popai-max-w: 460px;
  --popai-gap: 12px;
}

.popai-root.popai--namoro-troca .popai-card {
  padding-top: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #1a1017 0%, var(--popai-bg-900) 60%);
  border-color: #3a2029;
  text-align: left;
}

.popai-root.popai--namoro-troca .popai-visual {
  display: block;
  height: 86px;
  /* sangria: anula o padding lateral do card */
  margin: 0 calc(var(--popai-pad) * -1) 4px;
  background: linear-gradient(135deg, var(--popai-accent) 0%, #ff8a5b 100%);
}

/* dois círculos que se tocam, desenhados dentro da faixa */
.popai-root.popai--namoro-troca .popai-visual .popai-icon {
  position: relative;
}

.popai-root.popai--namoro-troca .popai-visual .popai-icon::before,
.popai-root.popai--namoro-troca .popai-visual .popai-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  transform: translateY(-50%);
}

.popai-root.popai--namoro-troca .popai-visual .popai-icon::before { left: calc(50% - 34px); }

.popai-root.popai--namoro-troca .popai-visual .popai-icon::after { left: calc(50% - 8px); }

/* o badge sobe para dentro da faixa */
.popai-root.popai--namoro-troca .popai-badge {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: -70px;
  background: rgba(12, 8, 12, 0.55);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.popai-root.popai--namoro-troca .popai-title { margin-top: 6px; font-size: 23px; }

.popai-root.popai--namoro-troca .popai-foot { text-align: left; }

/* 15.1.2 namoro-match — ESTRUTURA: anéis sobrepostos, badge em barra de
 largura total sob o visual, e CTA + recusa lado a lado no desktop. */
.popai-root.popai--namoro-match {
  --popai-accent: #ff4d6d;
  --popai-max-w: 470px;
}

.popai-root.popai--namoro-match .popai-card {
  background: radial-gradient(120% 80% at 50% 0%, #2a1220 0%, var(--popai-bg-900) 62%);
  border-color: #3d1f2c;
}

.popai-root.popai--namoro-match .popai-visual {
  display: block;
  height: 56px;
  margin: 2px 0 6px;
}

.popai-root.popai--namoro-match .popai-visual .popai-icon { position: relative; }

.popai-root.popai--namoro-match .popai-visual .popai-icon::before,
.popai-root.popai--namoro-match .popai-visual .popai-icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 54px;
  height: 54px;
  border: 4px solid var(--popai-accent);
  border-radius: 50%;
}

.popai-root.popai--namoro-match .popai-visual .popai-icon::before { left: calc(50% - 48px); }

.popai-root.popai--namoro-match .popai-visual .popai-icon::after {
  left: calc(50% - 6px);
  border-color: #ffa8b8;
  opacity: 0.85;
}

/* badge deixa de ser pílula e vira barra */
.popai-root.popai--namoro-match .popai-badge {
  align-self: stretch;
  padding: 10px 12px;
  background: rgba(255, 77, 109, 0.12);
  border-color: rgba(255, 77, 109, 0.4);
  border-radius: var(--popai-r-btn);
  color: #ffb3c0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.popai-root.popai--namoro-match .popai-title { font-size: 22px; }

@media (min-width: 520px) {
  .popai-root.popai--namoro-match .popai-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "visual visual"
      "badge badge"
      "title title"
      "body body"
      "cta decline"
      "foot foot"
      "status status";
    column-gap: 12px;
    row-gap: var(--popai-gap);
  }
  .popai-root.popai--namoro-match .popai-visual { grid-area: visual; }
  .popai-root.popai--namoro-match .popai-badge { grid-area: badge; }
  .popai-root.popai--namoro-match .popai-title { grid-area: title; }
  .popai-root.popai--namoro-match .popai-body { grid-area: body; }
  .popai-root.popai--namoro-match .popai-cta { grid-area: cta; margin: 0; }
  .popai-root.popai--namoro-match .popai-decline { grid-area: decline; min-height: 52px; }
  .popai-root.popai--namoro-match .popai-foot { grid-area: foot; }
  .popai-root.popai--namoro-match .popai-status { grid-area: status; }
}

/* 15.1.3 namoro-conversa — ESTRUTURA: o corpo do texto é um balão de fala com
 rabinho e cantos assimétricos; a recusa perde a caixa e vira link. */
.popai-root.popai--namoro-conversa {
  --popai-accent: #ff4d6d;
  --popai-max-w: 440px;
  --popai-gap: 10px;
}

.popai-root.popai--namoro-conversa .popai-card {
  background: #14101a;
  border-color: #2e2233;
  text-align: left;
}

.popai-root.popai--namoro-conversa .popai-visual { display: none; }

.popai-root.popai--namoro-conversa .popai-badge {
  align-self: flex-start;
  padding: 4px 10px;
  background: transparent;
  border-color: rgba(255, 77, 109, 0.45);
  color: #ff8fa3;
  font-size: 10px;
}

.popai-root.popai--namoro-conversa .popai-title { font-size: 22px; line-height: 1.3; }

.popai-root.popai--namoro-conversa .popai-body {
  position: relative;
  margin: 6px 0 8px;
  padding: 14px 16px;
  background: #211826;
  border-radius: 16px 16px 16px 4px;
  color: #d6cbdd;
}

/* rabinho do balão */
.popai-root.popai--namoro-conversa .popai-body::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 0;
  border-top: 9px solid #211826;
  border-right: 11px solid transparent;
}

.popai-root.popai--namoro-conversa .popai-decline {
  width: auto;
  align-self: flex-start;
  padding: 10px 2px;
  background: transparent;
  border: 0;
  color: #d8b6c0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.popai-root.popai--namoro-conversa .popai-decline:hover:not(:disabled) {
  background: transparent;
  border: 0;
  color: #fff;
}

.popai-root.popai--namoro-conversa .popai-foot { text-align: left; }

/* --- 15.2 EMPRÉSTIMO ------------------------------------------------------
 Verde-dinheiro, sobriedade obrigatória. YMYL: o card não pode ter nada que
 pareça oferta. As três skins são deliberadamente pouco decoradas.         */

/* 15.2.1 emprestimo-transparencia — ESTRUTURA: superfície CLARA, filete no
 topo e o rodapé promovido a caixa de aviso ANTES dos botões (order). */
.popai-root.popai--emprestimo-transparencia {
  --popai-accent: #16a34a;
  --popai-text: #0e1420;
  --popai-muted: #4b5769;
  --popai-max-w: 500px;
  --popai-gap: 12px;
}

.popai-root.popai--emprestimo-transparencia .popai-card {
  padding-top: 26px;
  background: #f6f8f7;
  border: 1px solid #d5e0da;
  border-top: 4px solid var(--popai-accent);
  border-radius: 0 0 var(--popai-r) var(--popai-r);
  box-shadow: 0 24px 60px -18px rgba(6, 20, 12, 0.5);
  text-align: left;
}

.popai-root.popai--emprestimo-transparencia .popai-visual { display: none; }

.popai-root.popai--emprestimo-transparencia .popai-badge {
  align-self: flex-start;
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.35);
  color: #12703a;
}

.popai-root.popai--emprestimo-transparencia .popai-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* a caixa de aviso vem ANTES dos botões: é o texto que ninguém pode pular */
.popai-root.popai--emprestimo-transparencia .popai-foot {
  order: 1;
  margin: 4px 0 2px;
  padding: 10px 12px;
  background: #eaf1ec;
  border-left: 3px solid rgba(22, 163, 74, 0.55);
  border-radius: 0 8px 8px 0;
  color: #3f4c5c;
  text-align: left;
}

.popai-root.popai--emprestimo-transparencia .popai-cta {
  order: 2;
  background: var(--popai-accent);
  box-shadow: 0 8px 22px -10px rgba(22, 163, 74, 0.9);
}

.popai-root.popai--emprestimo-transparencia .popai-decline {
  order: 3;
  border-color: rgba(14, 20, 32, 0.22);
  color: #2f3b4d;
}

.popai-root.popai--emprestimo-transparencia .popai-decline:hover:not(:disabled) {
  background: rgba(14, 20, 32, 0.05);
  border-color: rgba(14, 20, 32, 0.4);
  color: #0e1420;
}

.popai-root.popai--emprestimo-transparencia .popai-status { order: 4; color: #12703a; }

/* 15.2.2 emprestimo-leitores — ESTRUTURA: o badge deixa a pílula e vira uma
 faixa numérica sangrada, colada no topo do card. Nada mais compete com ela. */
.popai-root.popai--emprestimo-leitores {
  --popai-accent: #16a34a;
  --popai-max-w: 430px;
}

.popai-root.popai--emprestimo-leitores .popai-card {
  padding-top: 0;
  overflow: hidden;
  background: #0d1410;
  border-color: #1e3327;
}

.popai-root.popai--emprestimo-leitores .popai-visual { display: none; }

.popai-root.popai--emprestimo-leitores .popai-badge {
  align-self: stretch;
  margin: 0 calc(var(--popai-pad) * -1) 6px;
  padding: 14px 16px;
  background: rgba(22, 163, 74, 0.16);
  border: 0;
  border-bottom: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: 0;
  color: #6ee7a4;
  font-family: var(--popai-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.popai-root.popai--emprestimo-leitores .popai-title { font-size: 21px; font-weight: 700; }

.popai-root.popai--emprestimo-leitores .popai-cta {
  background: var(--popai-accent);
  box-shadow: 0 8px 22px -10px rgba(22, 163, 74, 0.85);
}

/* 15.2.3 emprestimo-simulacao — ESTRUTURA: a área visual desenha três linhas
 de tabela com a última esmaecida, e o desktop vira grade texto | ações. */
.popai-root.popai--emprestimo-simulacao {
  --popai-accent: #16a34a;
  --popai-max-w: 620px;
}

.popai-root.popai--emprestimo-simulacao .popai-card {
  background: #0c1310;
  border-color: #20342a;
  text-align: left;
}

.popai-root.popai--emprestimo-simulacao .popai-visual {
  display: block;
  height: 54px;
  margin: 2px 0 2px;
  border: 1px solid #23392e;
  border-radius: 8px;
  overflow: hidden;
}

/* três linhas: duas nítidas, a terceira apagando */
.popai-root.popai--emprestimo-simulacao .popai-visual .popai-icon {
  background:
    linear-gradient(90deg, rgba(110, 231, 164, 0.85) 0 38%, rgba(110, 231, 164, 0.25) 38% 100%) 0 6px / 100% 8px no-repeat,
    linear-gradient(90deg, rgba(110, 231, 164, 0.6) 0 52%, rgba(110, 231, 164, 0.18) 52% 100%) 0 24px / 100% 8px no-repeat,
    linear-gradient(90deg, rgba(110, 231, 164, 0.22) 0 44%, rgba(110, 231, 164, 0.07) 44% 100%) 0 42px / 100% 8px no-repeat;
  opacity: 0.9;
}

.popai-root.popai--emprestimo-simulacao .popai-badge {
  align-self: flex-start;
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.4);
  color: #6ee7a4;
}

.popai-root.popai--emprestimo-simulacao .popai-title { font-size: 21px; }

.popai-root.popai--emprestimo-simulacao .popai-foot { text-align: left; }

.popai-root.popai--emprestimo-simulacao .popai-cta { background: var(--popai-accent); }

@media (min-width: 640px) {
  .popai-root.popai--emprestimo-simulacao .popai-card {
    display: grid;
    grid-template-columns: 1fr 230px;
    grid-template-areas:
      "visual cta"
      "badge cta"
      "title decline"
      "body decline"
      "foot status";
    align-items: center;
    column-gap: 26px;
    row-gap: 10px;
    padding: 28px;
  }
  .popai-root.popai--emprestimo-simulacao .popai-visual { grid-area: visual; }
  .popai-root.popai--emprestimo-simulacao .popai-badge { grid-area: badge; }
  .popai-root.popai--emprestimo-simulacao .popai-title { grid-area: title; align-self: end; }
  .popai-root.popai--emprestimo-simulacao .popai-body { grid-area: body; align-self: start; }
  .popai-root.popai--emprestimo-simulacao .popai-cta { grid-area: cta; margin: 0; align-self: end; }
  .popai-root.popai--emprestimo-simulacao .popai-decline { grid-area: decline; align-self: start; }
  .popai-root.popai--emprestimo-simulacao .popai-foot { grid-area: foot; }
  .popai-root.popai--emprestimo-simulacao .popai-status { grid-area: status; text-align: right; }
}

/* --- 15.3 MARKETING DIGITAL -----------------------------------------------
 Roxo. Público técnico: menos ornamento, mais dado.                        */

/* 15.3.1 marketing-bastidor — ESTRUTURA: gramática de console. Badge e rodapé
 em monoespaçada, topo tracejado, recusa como link. */
.popai-root.popai--marketing-bastidor {
  --popai-accent: #7c3aed;
  --popai-max-w: 500px;
  --popai-gap: 12px;
}

.popai-root.popai--marketing-bastidor .popai-card {
  background: #0d0b16;
  border: 1px solid #26203a;
  border-top: 2px dashed rgba(124, 58, 237, 0.75);
  border-radius: 4px;
  text-align: left;
}

.popai-root.popai--marketing-bastidor .popai-visual { display: none; }

.popai-root.popai--marketing-bastidor .popai-badge {
  align-self: flex-start;
  padding: 4px 8px;
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.4);
  border-radius: 4px;
  color: #c4b0f7;
  font-family: var(--popai-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.popai-root.popai--marketing-bastidor .popai-title { font-size: 22px; line-height: 1.26; }

.popai-root.popai--marketing-bastidor .popai-cta {
  border-radius: 6px;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  box-shadow: 0 8px 24px -10px rgba(124, 58, 237, 0.9);
}

.popai-root.popai--marketing-bastidor .popai-decline {
  width: auto;
  align-self: flex-start;
  padding: 10px 2px;
  background: transparent;
  border: 0;
  color: #b9c2d6;
  font-family: var(--popai-mono);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.popai-root.popai--marketing-bastidor .popai-decline:hover:not(:disabled) {
  background: transparent;
  border: 0;
  color: #fff;
}

.popai-root.popai--marketing-bastidor .popai-foot {
  padding-top: 8px;
  border-top: 1px dashed #26203a;
  font-family: var(--popai-mono);
  font-size: 11.5px;
  text-align: left;
}

/* 15.3.2 marketing-benchmark — ESTRUTURA: três colunas de gráfico acima de um
 badge com corpo de número. CTA de largura automática, card compacto. */
.popai-root.popai--marketing-benchmark {
  --popai-accent: #7c3aed;
  --popai-max-w: 400px;
  --popai-gap: 12px;
}

.popai-root.popai--marketing-benchmark .popai-card {
  align-items: center;
  background: #0f0c1a;
  border-color: #2a2140;
}

.popai-root.popai--marketing-benchmark .popai-visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  margin: 2px 0 0;
}

.popai-root.popai--marketing-benchmark .popai-visual .popai-icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  width: 108px;
  background: none;
}

.popai-root.popai--marketing-benchmark .popai-visual .popai-icon::before,
.popai-root.popai--marketing-benchmark .popai-visual .popai-icon::after {
  content: "";
  width: 26px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
}

.popai-root.popai--marketing-benchmark .popai-visual .popai-icon::before { height: 28px; opacity: 0.5; }

.popai-root.popai--marketing-benchmark .popai-visual .popai-icon::after { height: 52px; }

.popai-root.popai--marketing-benchmark .popai-badge {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #d3c2fb;
  font-family: var(--popai-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.popai-root.popai--marketing-benchmark .popai-title { font-size: 21px; }

.popai-root.popai--marketing-benchmark .popai-cta {
  width: auto;
  min-width: 220px;
  padding-left: 28px;
  padding-right: 28px;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.popai-root.popai--marketing-benchmark .popai-decline { width: auto; min-width: 220px; }

/* 15.3.3 marketing-metrica — ESTRUTURA: mosaico 2x2 como visual e o corpo do
 texto em duas colunas a partir de 560px. */
.popai-root.popai--marketing-metrica {
  --popai-accent: #7c3aed;
  --popai-max-w: 540px;
}

.popai-root.popai--marketing-metrica .popai-card {
  background: #100d1b;
  border-color: #2b2242;
  text-align: left;
}

.popai-root.popai--marketing-metrica .popai-visual {
  display: block;
  width: 74px;
  height: 74px;
  margin: 2px 0 4px;
}

/* quatro blocos: dois "abertos", dois esmaecidos */
.popai-root.popai--marketing-metrica .popai-visual .popai-icon {
  background:
    linear-gradient(135deg, #a855f7, #7c3aed) 0 0 / 34px 34px no-repeat,
    linear-gradient(135deg, #a855f7, #7c3aed) 40px 0 / 34px 34px no-repeat,
    linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(124, 58, 237, 0.28)) 0 40px / 34px 34px no-repeat,
    linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(124, 58, 237, 0.12)) 40px 40px / 34px 34px no-repeat;
  border-radius: 2px;
}

.popai-root.popai--marketing-metrica .popai-badge {
  align-self: flex-start;
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.4);
  color: #c9b6fb;
  font-family: var(--popai-mono);
  font-variant-numeric: tabular-nums;
}

.popai-root.popai--marketing-metrica .popai-title { font-size: 22px; }

.popai-root.popai--marketing-metrica .popai-foot { text-align: left; }

@media (min-width: 560px) {
  .popai-root.popai--marketing-metrica .popai-body {
    column-count: 2;
    column-gap: 24px;
    column-rule: 1px solid #2b2242;
  }
}

/* --- 15.4 NOVELINHAS ------------------------------------------------------
 Borgonha. Tom de folhetim: o card pode ter personalidade, o CTA não pode
 mentir sobre o que acontece ao tocar nele.                                */

/* 15.4.1 novelinhas-clube — ESTRUTURA: faixa sangrada no topo com o número,
 título serifado grande e CTA em pílula completa. */
.popai-root.popai--novelinhas-clube {
  --popai-accent: #8e1f3f;
  --popai-max-w: 450px;
}

.popai-root.popai--novelinhas-clube .popai-card {
  padding-top: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #1b0d14 0%, #0d0709 100%);
  border-color: #3a1a26;
}

.popai-root.popai--novelinhas-clube .popai-visual { display: none; }

.popai-root.popai--novelinhas-clube .popai-badge {
  align-self: stretch;
  margin: 0 calc(var(--popai-pad) * -1) 8px;
  padding: 13px 16px;
  background: linear-gradient(90deg, #8e1f3f 0%, #c0325b 100%);
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.popai-root.popai--novelinhas-clube .popai-title {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
}

.popai-root.popai--novelinhas-clube .popai-body { color: #cfa9b6; }

.popai-root.popai--novelinhas-clube .popai-cta {
  border-radius: var(--popai-r-pill);
  background: linear-gradient(135deg, #c0325b 0%, #8e1f3f 100%);
  box-shadow: 0 10px 28px -10px rgba(192, 50, 91, 0.9);
}

.popai-root.popai--novelinhas-clube .popai-decline { border-radius: var(--popai-r-pill); }

/* 15.4.2 novelinhas-maratona — ESTRUTURA: trilha de 12 pontos como visual,
 badge monoespaçado à esquerda, card estreito e ritmo apertado. */
.popai-root.popai--novelinhas-maratona {
  --popai-accent: #8e1f3f;
  --popai-max-w: 380px;
  --popai-gap: 11px;
}

.popai-root.popai--novelinhas-maratona .popai-card {
  background: #140a10;
  border-color: #35202a;
  text-align: left;
}

.popai-root.popai--novelinhas-maratona .popai-visual {
  display: block;
  height: 12px;
  margin: 2px 0 2px;
}

/* 12 marcas: as 3 primeiras cheias (mesma proporção do badge padrão) */
.popai-root.popai--novelinhas-maratona .popai-visual .popai-icon {
  background:
    repeating-linear-gradient(90deg, #c0325b 0 18px, transparent 18px 26px) 0 0 / 78px 12px no-repeat,
    repeating-linear-gradient(90deg, #43242f 0 18px, transparent 18px 26px) 78px 0 / 100% 12px no-repeat;
  border-radius: 3px;
}

.popai-root.popai--novelinhas-maratona .popai-badge {
  align-self: flex-start;
  padding: 4px 9px;
  background: transparent;
  border-color: rgba(192, 50, 91, 0.5);
  border-radius: 4px;
  color: #e08aa3;
  font-family: var(--popai-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.popai-root.popai--novelinhas-maratona .popai-title { font-size: 20px; }

.popai-root.popai--novelinhas-maratona .popai-body { font-size: 14.5px; }

.popai-root.popai--novelinhas-maratona .popai-cta { background: linear-gradient(135deg, #c0325b 0%, #8e1f3f 100%); }

.popai-root.popai--novelinhas-maratona .popai-foot { text-align: left; }

/* 15.4.3 novelinhas-proximo-capitulo — ESTRUTURA: página de livro. Fundo
 quente, serifa, capitular no corpo e lombada desenhada na borda esquerda. */
.popai-root.popai--novelinhas-proximo-capitulo {
  --popai-accent: #8e1f3f;
  --popai-max-w: 470px;
  --popai-text: #f2e6dd;
  --popai-muted: #c3ab9d;
}

.popai-root.popai--novelinhas-proximo-capitulo .popai-card {
  padding-left: 34px;
  background: #1a1210;
  border: 1px solid #3a2a22;
  border-left: 6px double #8e1f3f;
  border-radius: 3px 14px 14px 3px;
  text-align: left;
}

.popai-root.popai--novelinhas-proximo-capitulo .popai-visual { display: none; }

.popai-root.popai--novelinhas-proximo-capitulo .popai-badge {
  align-self: flex-start;
  padding: 0 0 5px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(192, 50, 91, 0.45);
  border-radius: 0;
  color: #d98a9e;
  letter-spacing: 0.2em;
}

.popai-root.popai--novelinhas-proximo-capitulo .popai-title {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.popai-root.popai--novelinhas-proximo-capitulo .popai-body {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.66;
}

/* capitular — o detalhe que faz o card ser lido como página, não como janela */
.popai-root.popai--novelinhas-proximo-capitulo .popai-body::first-letter {
  float: left;
  margin: 4px 8px 0 0;
  color: #d98a9e;
  font-size: 40px;
  font-weight: 700;
  line-height: 0.82;
}

.popai-root.popai--novelinhas-proximo-capitulo .popai-cta {
  background: #8e1f3f;
  border-radius: 3px;
  box-shadow: 0 8px 22px -10px rgba(142, 31, 63, 0.95);
}

.popai-root.popai--novelinhas-proximo-capitulo .popai-decline {
  width: auto;
  align-self: flex-start;
  padding: 10px 2px;
  background: transparent;
  border: 0;
  color: #dcc3b6;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.popai-root.popai--novelinhas-proximo-capitulo .popai-decline:hover:not(:disabled) {
  background: transparent;
  border: 0;
  color: #fff;
}

.popai-root.popai--novelinhas-proximo-capitulo .popai-foot { text-align: left; font-style: italic; }

/* --- 15.5 EMPREGOS --------------------------------------------------------
 Petróleo. Nada de euforia: o leitor está ansioso e desconfiado.           */

/* 15.5.1 empregos-mural — ESTRUTURA: quadro de avisos. Borda tracejada em
 volta e badge como etiqueta torta, posicionada fora do fluxo. */
.popai-root.popai--empregos-mural {
  --popai-accent: #0e7490;
  --popai-max-w: 480px;
}

.popai-root.popai--empregos-mural .popai-card {
  padding-top: 34px;
  background: #0b1417;
  border: 2px dashed #245a68;
  border-radius: 6px;
  text-align: left;
}

.popai-root.popai--empregos-mural .popai-visual { display: none; }

/* a etiqueta sai do fluxo do flex e fica presa no canto */
.popai-root.popai--empregos-mural .popai-badge {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 5px 12px;
  background: var(--popai-accent);
  border: 0;
  border-radius: 3px;
  color: #f0fbff;
  letter-spacing: 0.14em;
  transform: rotate(-2deg);
  box-shadow: 0 6px 16px -6px rgba(14, 116, 144, 0.9);
}

.popai-root.popai--empregos-mural .popai-title { font-size: 22px; }

.popai-root.popai--empregos-mural .popai-cta {
  background: var(--popai-accent);
  box-shadow: 0 8px 22px -10px rgba(14, 116, 144, 0.9);
}

.popai-root.popai--empregos-mural .popai-foot { text-align: left; }

/* 15.5.2 empregos-checklist — ESTRUTURA: cinco caixas de checagem em linha e
 título/corpo recuados atrás de um marcador vertical. */
.popai-root.popai--empregos-checklist {
  --popai-accent: #0e7490;
  --popai-max-w: 460px;
}

.popai-root.popai--empregos-checklist .popai-card {
  background: #0a1216;
  border-color: #1d3540;
  text-align: left;
}

.popai-root.popai--empregos-checklist .popai-visual {
  display: block;
  height: 22px;
  margin: 2px 0 2px;
}

/* 5 caixas: as 2 primeiras preenchidas */
.popai-root.popai--empregos-checklist .popai-visual .popai-icon {
  background:
    repeating-linear-gradient(90deg, #0e7490 0 22px, transparent 22px 32px) 0 0 / 54px 22px no-repeat,
    repeating-linear-gradient(90deg, rgba(14, 116, 144, 0.2) 0 22px, transparent 22px 32px) 64px 0 / 100% 22px no-repeat;
  border-radius: 4px;
}

.popai-root.popai--empregos-checklist .popai-badge {
  align-self: flex-start;
  background: rgba(14, 116, 144, 0.14);
  border-color: rgba(14, 116, 144, 0.45);
  color: #67d3e8;
  font-variant-numeric: tabular-nums;
}

/* marcador vertical: título e corpo recuam atrás dele */
.popai-root.popai--empregos-checklist .popai-title,
.popai-root.popai--empregos-checklist .popai-body {
  padding-left: 14px;
  border-left: 2px solid rgba(14, 116, 144, 0.5);
}

.popai-root.popai--empregos-checklist .popai-title { font-size: 21px; }

.popai-root.popai--empregos-checklist .popai-cta { background: var(--popai-accent); }

.popai-root.popai--empregos-checklist .popai-foot { text-align: left; }

/* 15.5.3 empregos-vaga — ESTRUTURA: cartão de vaga com coluna de metadados à
 esquerda e o corpo do texto cortado por máscara de esmaecimento. */
.popai-root.popai--empregos-vaga {
  --popai-accent: #0e7490;
  --popai-max-w: 600px;
}

.popai-root.popai--empregos-vaga .popai-card {
  background: #0a1115;
  border-color: #1c313b;
  text-align: left;
}

.popai-root.popai--empregos-vaga .popai-visual {
  display: block;
  height: 40px;
  margin: 0 0 2px;
}

/* três linhas curtas: a metáfora dos metadados da vaga */
.popai-root.popai--empregos-vaga .popai-visual .popai-icon {
  background:
    linear-gradient(90deg, #2c94ad, #2c94ad) 0 4px / 84px 7px no-repeat,
    linear-gradient(90deg, rgba(44, 148, 173, 0.6), rgba(44, 148, 173, 0.6)) 0 19px / 62px 7px no-repeat,
    linear-gradient(90deg, rgba(44, 148, 173, 0.35), rgba(44, 148, 173, 0.35)) 0 34px / 40px 7px no-repeat;
  border-radius: 2px;
}

.popai-root.popai--empregos-vaga .popai-badge {
  align-self: flex-start;
  background: transparent;
  border-color: rgba(44, 148, 173, 0.5);
  color: #8ad4e6;
}

.popai-root.popai--empregos-vaga .popai-title { font-size: 21px; line-height: 1.28; }

/* o corpo apaga no fim: a descrição que acabou no meio */
.popai-root.popai--empregos-vaga .popai-body {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.25) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.25) 100%);
}

.popai-root.popai--empregos-vaga .popai-cta { background: var(--popai-accent); }

.popai-root.popai--empregos-vaga .popai-foot { text-align: left; }

@media (min-width: 620px) {
  .popai-root.popai--empregos-vaga .popai-card {
    display: grid;
    grid-template-columns: 128px 1fr;
    grid-template-areas:
      "visual badge"
      "visual title"
      "visual body"
      "visual cta"
      "visual decline"
      "foot foot"
      "status status";
    align-content: start;
    column-gap: 24px;
    row-gap: 10px;
    padding: 28px;
  }
  .popai-root.popai--empregos-vaga .popai-visual {
    grid-area: visual;
    align-self: start;
    height: 46px;
    padding-right: 18px;
    border-right: 1px solid #1c313b;
  }
  .popai-root.popai--empregos-vaga .popai-badge { grid-area: badge; }
  .popai-root.popai--empregos-vaga .popai-title { grid-area: title; }
  .popai-root.popai--empregos-vaga .popai-body { grid-area: body; }
  .popai-root.popai--empregos-vaga .popai-cta { grid-area: cta; margin: 0; }
  .popai-root.popai--empregos-vaga .popai-decline { grid-area: decline; }
  .popai-root.popai--empregos-vaga .popai-foot { grid-area: foot; }
  .popai-root.popai--empregos-vaga .popai-status { grid-area: status; }
}

/* --- 15.6 ROUPAS ----------------------------------------------------------
 Terracota. Conteúdo visual: o card compete com a foto e precisa ser curto. */

/* 15.6.1 roupas-vitrine — ESTRUTURA: faixa de vitrine sangrada no topo, badge
 sobreposto ao canto dela, entreletras aberta no título. */
.popai-root.popai--roupas-vitrine {
  --popai-accent: #c2410c;
  --popai-max-w: 440px;
}

.popai-root.popai--roupas-vitrine .popai-card {
  position: relative;
  padding-top: 0;
  overflow: hidden;
  background: #14100e;
  border-color: #33241c;
}

.popai-root.popai--roupas-vitrine .popai-visual {
  display: block;
  height: 78px;
  margin: 0 calc(var(--popai-pad) * -1) 10px;
}

/* três blocos de cor lado a lado: a arara vista de longe */
.popai-root.popai--roupas-vitrine .popai-visual .popai-icon {
  background:
    linear-gradient(180deg, #c2410c, #8a2c06) 0 0 / 33.34% 100% no-repeat,
    linear-gradient(180deg, #e07a3f, #b4551f) 33.33% 0 / 33.34% 100% no-repeat,
    linear-gradient(180deg, #f0b28a, #c98255) 66.67% 0 / 33.34% 100% no-repeat;
}

.popai-root.popai--roupas-vitrine .popai-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 12px;
  background: rgba(16, 10, 8, 0.62);
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
  letter-spacing: 0.2em;
}

.popai-root.popai--roupas-vitrine .popai-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.popai-root.popai--roupas-vitrine .popai-cta {
  background: var(--popai-accent);
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px -10px rgba(194, 65, 12, 0.95);
}

/* 15.6.2 roupas-lookbook — ESTRUTURA: três miniaturas quadradas empilhadas à
 esquerda e todo o texto à direita a partir de 620px. */
.popai-root.popai--roupas-lookbook {
  --popai-accent: #c2410c;
  --popai-max-w: 600px;
}

.popai-root.popai--roupas-lookbook .popai-card {
  background: #130f0d;
  border-color: #30231c;
  text-align: left;
}

.popai-root.popai--roupas-lookbook .popai-visual {
  display: block;
  height: 60px;
  margin: 0 0 4px;
}

.popai-root.popai--roupas-lookbook .popai-visual .popai-icon {
  background:
    linear-gradient(150deg, #e07a3f, #a13a0a) 0 0 / 58px 58px no-repeat,
    linear-gradient(150deg, #c98255, #7d3a14) 64px 0 / 58px 58px no-repeat,
    linear-gradient(150deg, #f0b28a, #b4551f) 128px 0 / 58px 58px no-repeat;
  border-radius: 3px;
}

.popai-root.popai--roupas-lookbook .popai-badge {
  align-self: flex-start;
  padding: 4px 10px;
  background: transparent;
  border-color: rgba(224, 122, 63, 0.5);
  color: #e9a97f;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
}

.popai-root.popai--roupas-lookbook .popai-title { font-size: 21px; }

.popai-root.popai--roupas-lookbook .popai-cta { background: var(--popai-accent); }

.popai-root.popai--roupas-lookbook .popai-foot { text-align: left; }

@media (min-width: 620px) {
  .popai-root.popai--roupas-lookbook .popai-card {
    display: grid;
    grid-template-columns: 128px 1fr;
    grid-template-areas:
      "visual badge"
      "visual title"
      "visual body"
      "visual cta"
      "visual decline"
      "visual foot"
      "visual status";
    align-content: start;
    column-gap: 24px;
    row-gap: 10px;
    padding: 26px;
  }
  /* as três miniaturas passam a empilhar na vertical */
  .popai-root.popai--roupas-lookbook .popai-visual {
    grid-area: visual;
    align-self: start;
    height: 190px;
  }
  .popai-root.popai--roupas-lookbook .popai-visual .popai-icon {
    background:
      linear-gradient(150deg, #e07a3f, #a13a0a) 0 0 / 118px 58px no-repeat,
      linear-gradient(150deg, #c98255, #7d3a14) 0 66px / 118px 58px no-repeat,
      linear-gradient(150deg, #f0b28a, #b4551f) 0 132px / 118px 58px no-repeat;
  }
  .popai-root.popai--roupas-lookbook .popai-badge { grid-area: badge; }
  .popai-root.popai--roupas-lookbook .popai-title { grid-area: title; }
  .popai-root.popai--roupas-lookbook .popai-body { grid-area: body; }
  .popai-root.popai--roupas-lookbook .popai-cta { grid-area: cta; margin: 0; }
  .popai-root.popai--roupas-lookbook .popai-decline { grid-area: decline; }
  .popai-root.popai--roupas-lookbook .popai-foot { grid-area: foot; }
  .popai-root.popai--roupas-lookbook .popai-status { grid-area: status; }
}

/* 15.6.3 roupas-provador — ESTRUTURA: arara (barra + gancho) desenhada no topo
 do card, quatro peças em fila com a última esmaecida, cantos superiores
 exagerados. Título à esquerda. */
.popai-root.popai--roupas-provador {
  --popai-accent: #c2410c;
  --popai-max-w: 470px;
}

.popai-root.popai--roupas-provador .popai-card {
  padding-top: 34px;
  background: #150f0c;
  border-color: #35251c;
  border-radius: 34px 34px var(--popai-r) var(--popai-r);
  text-align: left;
}

/* a barra da arara atravessa o card */
.popai-root.popai--roupas-provador .popai-card::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 26px;
  right: 26px;
  height: 3px;
  background: linear-gradient(90deg, rgba(224, 122, 63, 0.15), #e07a3f 22%, #e07a3f 78%, rgba(224, 122, 63, 0.15));
  border-radius: 2px;
}

.popai-root.popai--roupas-provador .popai-visual {
  display: block;
  height: 54px;
  margin: 4px 0 2px;
}

/* quatro peças; a quarta quase apagada — o que ainda não abriu */
.popai-root.popai--roupas-provador .popai-visual .popai-icon {
  background:
    linear-gradient(180deg, #e07a3f, #a13a0a) 0 0 / 46px 54px no-repeat,
    linear-gradient(180deg, #c98255, #7d3a14) 54px 0 / 46px 54px no-repeat,
    linear-gradient(180deg, #f0b28a, #b4551f) 108px 0 / 46px 54px no-repeat,
    linear-gradient(180deg, rgba(240, 178, 138, 0.22), rgba(180, 85, 31, 0.22)) 162px 0 / 46px 54px no-repeat;
  border-radius: 0 0 6px 6px;
}

.popai-root.popai--roupas-provador .popai-badge {
  align-self: flex-start;
  background: rgba(194, 65, 12, 0.16);
  border-color: rgba(224, 122, 63, 0.45);
  color: #f0b28a;
  font-variant-numeric: tabular-nums;
}

.popai-root.popai--roupas-provador .popai-title { font-size: 21px; }

.popai-root.popai--roupas-provador .popai-cta { background: var(--popai-accent); }

.popai-root.popai--roupas-provador .popai-foot { text-align: left; }

/* --- 15.7 FINANCIAMENTO ---------------------------------------------------
 Azul-confiança. YMYL de longo prazo: o card precisa parecer material de
 referência, não peça de campanha.                                         */

/* 15.7.1 financiamento-custo — ESTRUTURA: superfície clara com filete lateral
 de 4px e o rodapé dentro de uma caixa de isenção, DEPOIS dos botões. */
.popai-root.popai--financiamento-custo {
  --popai-accent: #1d4ed8;
  --popai-text: #0d1424;
  --popai-muted: #48566e;
  --popai-max-w: 520px;
  --popai-gap: 12px;
}

.popai-root.popai--financiamento-custo .popai-card {
  padding-left: 26px;
  background: #f5f7fb;
  border: 1px solid #d6dded;
  border-left: 4px solid var(--popai-accent);
  border-radius: 0 var(--popai-r) var(--popai-r) 0;
  box-shadow: 0 24px 60px -18px rgba(6, 12, 30, 0.5);
  text-align: left;
}

.popai-root.popai--financiamento-custo .popai-visual { display: none; }

.popai-root.popai--financiamento-custo .popai-badge {
  align-self: flex-start;
  padding: 3px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #1d4ed8;
  font-size: 10.5px;
  letter-spacing: 0.22em;
}

.popai-root.popai--financiamento-custo .popai-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.28;
}

.popai-root.popai--financiamento-custo .popai-cta {
  background: var(--popai-accent);
  box-shadow: 0 8px 22px -10px rgba(29, 78, 216, 0.9);
}

.popai-root.popai--financiamento-custo .popai-decline {
  border-color: rgba(13, 20, 36, 0.2);
  color: #2d3a52;
}

.popai-root.popai--financiamento-custo .popai-decline:hover:not(:disabled) {
  background: rgba(13, 20, 36, 0.05);
  border-color: rgba(13, 20, 36, 0.38);
  color: #0d1424;
}

/* caixa de isenção — depois dos botões, com fundo próprio */
.popai-root.popai--financiamento-custo .popai-foot {
  margin-top: 6px;
  padding: 10px 12px;
  background: #e9eefa;
  border: 1px solid #d1dbf2;
  border-radius: 8px;
  color: #3d4a63;
  text-align: left;
}

.popai-root.popai--financiamento-custo .popai-status { color: #1d4ed8; }

/* 15.7.2 financiamento-etapas — ESTRUTURA: stepper horizontal de nove marcas e
 o badge deslocado para DEPOIS do título. */
.popai-root.popai--financiamento-etapas {
  --popai-accent: #1d4ed8;
  --popai-max-w: 490px;
}

.popai-root.popai--financiamento-etapas .popai-card {
  background: #0a1020;
  border-color: #1e2b4a;
  text-align: left;
}

.popai-root.popai--financiamento-etapas .popai-visual {
  display: block;
  height: 14px;
  margin: 2px 0 4px;
}

/* nove marcas: quatro cheias, a atual em destaque, o resto vazio */
.popai-root.popai--financiamento-etapas .popai-visual .popai-icon {
  background:
    repeating-linear-gradient(90deg, #3b82f6 0 30px, transparent 30px 40px) 0 4px / 150px 6px no-repeat,
    repeating-linear-gradient(90deg, #1e2b4a 0 30px, transparent 30px 40px) 160px 4px / 100% 6px no-repeat;
}

/* o badge vai para depois do título: a hierarquia é a do guia */
.popai-root.popai--financiamento-etapas .popai-badge {
  order: 1;
  align-self: flex-start;
  background: rgba(29, 78, 216, 0.16);
  border-color: rgba(59, 130, 246, 0.45);
  color: #93b4fb;
  font-family: var(--popai-mono);
  font-variant-numeric: tabular-nums;
}

.popai-root.popai--financiamento-etapas .popai-title { order: 0; font-size: 22px; }

.popai-root.popai--financiamento-etapas .popai-body { order: 2; }

.popai-root.popai--financiamento-etapas .popai-cta {
  order: 3;
  background: var(--popai-accent);
  box-shadow: 0 8px 22px -10px rgba(29, 78, 216, 0.9);
}

.popai-root.popai--financiamento-etapas .popai-decline { order: 4; }

.popai-root.popai--financiamento-etapas .popai-foot { order: 5; text-align: left; }

.popai-root.popai--financiamento-etapas .popai-status { order: 6; }

/* 15.7.3 financiamento-parcela — ESTRUTURA: duas barras verticais de alturas
 diferentes (SAC x Price) e grade texto | ações no desktop. */
.popai-root.popai--financiamento-parcela {
  --popai-accent: #1d4ed8;
  --popai-max-w: 620px;
}

.popai-root.popai--financiamento-parcela .popai-card {
  background: #090e1c;
  border-color: #1d2946;
  text-align: left;
}

.popai-root.popai--financiamento-parcela .popai-visual {
  display: flex;
  align-items: flex-end;
  height: 62px;
  margin: 2px 0 2px;
  border-bottom: 1px solid #1d2946;
}

.popai-root.popai--financiamento-parcela .popai-visual .popai-icon {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  width: auto;
}

.popai-root.popai--financiamento-parcela .popai-visual .popai-icon::before,
.popai-root.popai--financiamento-parcela .popai-visual .popai-icon::after {
  content: "";
  width: 34px;
  border-radius: 4px 4px 0 0;
}

/* SAC: parcela alta que cai */
.popai-root.popai--financiamento-parcela .popai-visual .popai-icon::before {
  height: 58px;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
}

/* Price: parcela constante e menor */
.popai-root.popai--financiamento-parcela .popai-visual .popai-icon::after {
  height: 34px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.5) 0%, rgba(29, 78, 216, 0.5) 100%);
}

.popai-root.popai--financiamento-parcela .popai-badge {
  align-self: flex-start;
  background: rgba(29, 78, 216, 0.14);
  border-color: rgba(59, 130, 246, 0.4);
  color: #9dbcfc;
}

.popai-root.popai--financiamento-parcela .popai-title { font-size: 21px; }

.popai-root.popai--financiamento-parcela .popai-cta { background: var(--popai-accent); }

.popai-root.popai--financiamento-parcela .popai-foot { text-align: left; }

@media (min-width: 640px) {
  .popai-root.popai--financiamento-parcela .popai-card {
    display: grid;
    grid-template-columns: 1fr 240px;
    grid-template-areas:
      "visual cta"
      "badge cta"
      "title decline"
      "body decline"
      "foot status";
    align-items: center;
    column-gap: 28px;
    row-gap: 10px;
    padding: 28px;
  }
  .popai-root.popai--financiamento-parcela .popai-visual { grid-area: visual; }
  .popai-root.popai--financiamento-parcela .popai-badge { grid-area: badge; }
  .popai-root.popai--financiamento-parcela .popai-title { grid-area: title; align-self: end; }
  .popai-root.popai--financiamento-parcela .popai-body { grid-area: body; align-self: start; }
  .popai-root.popai--financiamento-parcela .popai-cta { grid-area: cta; margin: 0; align-self: end; }
  .popai-root.popai--financiamento-parcela .popai-decline { grid-area: decline; align-self: start; }
  .popai-root.popai--financiamento-parcela .popai-foot { grid-area: foot; }
  .popai-root.popai--financiamento-parcela .popai-status { grid-area: status; text-align: right; }
}

/*  16. RESPONSIVO DOS SKINS DE NICHO
 No mobile pequeno as sangrias precisam acompanhar o padding reduzido do card
 (§11 já baixa o padding para 20px), senão a faixa sangrada fica curta e
 aparece um degrau na borda.
*/

@media (max-width: 480px) {
  .popai-root.popai--namoro-troca .popai-visual,
  .popai-root.popai--emprestimo-leitores .popai-badge,
  .popai-root.popai--novelinhas-clube .popai-badge,
  .popai-root.popai--roupas-vitrine .popai-visual { margin-left: -20px; margin-right: -20px; }

  .popai-root.popai--emprestimo-transparencia .popai-card,
  .popai-root.popai--financiamento-custo .popai-card { padding-left: 20px; }

  .popai-root.popai--novelinhas-proximo-capitulo .popai-card { padding-left: 26px; }

  .popai-root.popai--empregos-mural .popai-card,
  .popai-root.popai--roupas-provador .popai-card { padding-top: 32px; }

  .popai-root.popai--novelinhas-clube .popai-title { font-size: 23px; }

  .popai-root.popai--marketing-benchmark .popai-cta,
  .popai-root.popai--marketing-benchmark .popai-decline { width: 100%; min-width: 0; }
}

/*  17. REDUCED MOTION / FORCED COLORS PARA OS SKINS DE NICHO
 Os skins de nicho não introduzem nenhuma animação nova (R9), mas dois deles
 usam transform estático no badge — no modo de contraste forçado isso pode
 atrapalhar a leitura, então neutralizamos.
*/

@media (prefers-reduced-motion: reduce) {
  .popai-root.popai--empregos-mural .popai-badge { transform: none; }
}

@media (forced-colors: active) {
  .popai-root.popai--empregos-mural .popai-badge { transform: none; border: 1px solid CanvasText; }

  .popai-root.popai--namoro-conversa .popai-decline,
  .popai-root.popai--marketing-bastidor .popai-decline,
  .popai-root.popai--novelinhas-proximo-capitulo .popai-decline { border: 1px solid CanvasText; }
}