/* ══════════════════════════════════════════════════════════════════════════
   VITRINE — selo, números, bento e amostra do relatório
   ══════════════════════════════════════════════════════════════════════════
   Elementos que as landings premium usam para dar peso: número grande, grade
   com blocos de tamanhos diferentes e uma tela mostrando o produto.

   Aqui o número é sempre verificável e a tela é o entregável real. Sem isso,
   o mesmo recurso vira encenação. */

/* ── Selo do topo do herói ──────────────────────────────────────────────── */
.hero360-selo{display:inline-flex;align-items:center;gap:9px;margin:0 0 var(--e4);
  font-size:12.5px;font-weight:600;color:var(--sec);
  background:var(--surf-alta);border:1px solid var(--linha);
  border-radius:999px;padding:8px 16px 8px 13px}
.selo-ponto{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(52,211,153,.16)}
.anima .selo-ponto{animation:selo-bate 2.6s ease-in-out infinite}
@keyframes selo-bate{0%,100%{opacity:1}50%{opacity:.42}}

/* ── Números ────────────────────────────────────────────────────────────── */
.numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3);
  margin-top:var(--e6)}
.numero{background:var(--surf);border:1px solid var(--linha);border-radius:var(--r-lg);
  padding:var(--e5) var(--e4);text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.numero b{display:block;font-family:Fraunces,Georgia,serif;
  font-size:clamp(30px,4.4vw,46px);font-weight:900;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(150deg,#EAF0FA 10%,var(--cyan) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.numero-rot{display:block;font-size:13.5px;font-weight:700;color:var(--text);margin-top:10px}
.numero-sub{display:block;font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.5}

/* ── Bento: blocos de tamanhos diferentes ───────────────────────────────
   Grade uniforme trata os quatro casos como iguais. Dando peso diferente, a
   leitura ganha ritmo e o olho sabe por onde começar. */
@media(min-width:900px){
  .sintomas{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(0,auto)}
  .sintoma:nth-child(1){grid-column:span 4}
  .sintoma:nth-child(2){grid-column:span 2}
  .sintoma:nth-child(3){grid-column:span 2}
  .sintoma:nth-child(4){grid-column:span 4}
  /* O primeiro card, maior, ganha título maior: hierarquia real, não só tamanho. */
  .sintoma:nth-child(1) h3,.sintoma:nth-child(4) h3{font-size:21px}
}

/* ── Amostra do relatório ───────────────────────────────────────────────── */
.mockup{margin:var(--e6) 0 0;padding:0}
.mockup-barra{display:flex;gap:7px;padding:12px 16px;
  background:#111A2C;border:1px solid var(--linha);border-bottom:none;
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.mockup-barra span{width:10px;height:10px;border-radius:50%;background:rgba(148,163,184,.3)}
.mockup-tela{background:linear-gradient(170deg,#0C1424,#080D18);
  border:1px solid var(--linha);border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:clamp(18px,3vw,30px);
  box-shadow:0 26px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)}
.mock-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e4);
  padding-bottom:var(--e4);border-bottom:1px solid var(--linha);margin-bottom:var(--e4)}
.mock-kick{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;
  font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#7A8AA6;margin:0}
.mock-cab h3{font-family:Fraunces,Georgia,serif;font-size:clamp(19px,2.6vw,24px);
  font-weight:800;margin:6px 0 0;color:#EAF0FA}
.mock-score{text-align:right;flex-shrink:0}
.mock-score b{display:block;font-family:Fraunces,Georgia,serif;font-size:clamp(32px,5vw,44px);
  font-weight:900;line-height:1;color:var(--amber,#FBBF24)}
.mock-score span{font-size:11px;color:var(--dim);letter-spacing:1px}
.mock-areas{display:flex;flex-direction:column;gap:11px;margin-bottom:var(--e5)}
.mock-area{display:grid;grid-template-columns:1fr 2fr auto;gap:var(--e3);align-items:center}
.mock-area-n{font-size:13.5px;color:#93A2BD}
.mock-barra{height:7px;border-radius:5px;background:rgba(148,163,184,.14);overflow:hidden;display:block}
/* A barra ocupa a largura toda e é ENCOLHIDA por escala. Assim a proporção
   final vem de --w e a animação roda sem recalcular layout. */
.mock-barra i{display:block;height:100%;border-radius:5px;width:100%;
  transform:scaleX(var(--w,0));transform-origin:left center;
  transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.anima .mock-barra i{transform:scaleX(0)}
.anima .mockup.on .mock-barra i{transform:scaleX(var(--w,0))}
.risco-alto{background:linear-gradient(90deg,#FB5F6D,#f87171)}
.risco-medio{background:linear-gradient(90deg,#FBBF24,#fcd34d)}
.risco-baixo{background:linear-gradient(90deg,#34D399,#6ee7b7)}
.mock-area-v{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;
  font-weight:700;color:#EAF0FA;min-width:26px;text-align:right}
.mock-riscos{padding-top:var(--e4);border-top:1px solid var(--linha)}
.mock-risco{display:flex;justify-content:space-between;align-items:center;gap:var(--e3);
  padding:9px 0;font-size:13.5px;color:#93A2BD}
.mock-risco + .mock-risco{border-top:1px solid rgba(96,132,200,.1)}
.mock-prio{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;flex-shrink:0}
.prio-alta{background:rgba(251,95,109,.14);color:#FB5F6D;border:1px solid rgba(251,95,109,.3)}
.prio-média{background:rgba(251,191,36,.14);color:#FBBF24;border:1px solid rgba(251,191,36,.3)}
.mockup figcaption{font-size:12px;color:var(--dim);margin-top:var(--e3);line-height:1.6}

@media(max-width:700px){
  .numeros{grid-template-columns:repeat(2,1fr)}
  .mock-cab{flex-direction:column;gap:var(--e3)}
  .mock-score{text-align:left}
  /* Três colunas em 360px espremem o nome da área até virar duas letras. */
  .mock-area{grid-template-columns:1fr auto;row-gap:6px}
  .mock-barra{grid-column:1 / -1;order:3}
}
@media(max-width:420px){.numeros{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .selo-ponto{animation:none !important}
  .mock-barra i{transition:none;transform:scaleX(var(--w,0))}
}