/* ═══════════════════════════════════════════════════════════
   ESTRUTURA DE PAINÉIS — a descoberta central da Hyros:
   página branca + cada ideia num painel arredondado de 32px
   com fundo tingido próprio. O ritmo vem da alternância.
   ═══════════════════════════════════════════════════════════ */

body{background:#FFF}

.pnl{max-width:1180px;margin:0 auto 16px;border-radius:32px;
  padding:clamp(34px,3.6vw,54px) clamp(24px,3.4vw,52px)}
.pnl--largo{padding-left:clamp(28px,5vw,80px);padding-right:clamp(28px,5vw,80px)}
.pnl-in{max-width:1000px;margin:0 auto}

/* paleta dos painéis — versão quente da Funil */
.pnl--creme  {background:#FAF5EC}
.pnl--pessego{background:#FDF1E9}
.pnl--areia  {background:#F6F2E8}
.pnl--escuro {background:#14120F;color:#FFF}
.pnl--fogo   {background:linear-gradient(135deg,#FF8A2B,#FF5A3D 52%,#FF3D7F);color:#FFF}
.pnl--branco {background:#FFF;border:1px solid #EDEAE3}

/* dentro do escuro e do fogo, o texto inverte */
.pnl--escuro .seg-h2,.pnl--fogo .seg-h2{color:#FFF}
.pnl--escuro .seg-h2 em,.pnl--fogo .seg-h2 em{
  background:none;-webkit-text-fill-color:currentColor;color:#FFF;opacity:.72}
.pnl--escuro .seg-sub,.pnl--fogo .seg-sub{color:rgba(255,255,255,.76)}
.pnl--escuro .eyebrow,.pnl--fogo .eyebrow{color:rgba(255,255,255,.55)}

/* ── hero: só tipografia, centralizado ──
   O .seg-hero traz padding vertical do layout antigo (texto à esquerda +
   mockup à direita). Com o hero centralizado esse padding SOMA ao do
   .hero-c e o topo da página fica com ~216px de ar. Zerado aqui. */
.seg-hero{padding:0}
/* o topo é fixed (~79px no desktop, ~66px no mobile) e cobriria o kicker:
   a altura dele entra no padding-top do hero */
.hero-c{text-align:center;
  padding:calc(clamp(40px,5vw,72px) + clamp(66px,5vw,80px)) 24px clamp(30px,3.4vw,48px);
  max-width:900px;margin:0 auto}
.hero-c .eyebrow{margin-bottom:18px}
.hero-c h1{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);font-weight:400;
  margin:0;letter-spacing:-.035em;color:#12120F;
  /* .seg-hero h1 tem max-width:17ch do layout antigo — sem isto o h1 fica
     preso em ~684px e, como é bloco sem margin auto, encosta à esquerda */
  max-width:none}
.hero-l1{display:block;font-size:clamp(2.1rem,1.3rem + 2.8vw,3.4rem);line-height:1.06}
.hero-l2{display:block;font-size:clamp(2.9rem,1.6rem + 4.6vw,5.2rem);line-height:1.02;
  font-style:italic;margin-top:2px;
  background:linear-gradient(112deg,#FF9A2B,#FF5A3D 48%,#FF3D7F);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-gar{display:inline-block;margin:26px 0 0;
  font-family:var(--font-corpo);font-size:clamp(1rem,.9rem + .35vw,1.2rem);font-weight:600;
  color:#7A2C06;background:#FDF3E6;border:1px solid #F0D9BE;
  padding:13px 26px;border-radius:14px}
.hero-prova{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:28px;font-size:.9375rem;color:#6B675B;font-style:italic}
.hero-prova img{height:22px;width:auto;opacity:.75;filter:brightness(0)}
.hero-c .seg-acoes{justify-content:center;margin-top:30px}

/* ── painel do problema: texto à esquerda, ilustração à direita ── */
.pb-grade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);align-items:center}
.pb-kick{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:#D6336C;display:block;margin-bottom:14px}
.pb-h{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);font-weight:400;
  font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem);line-height:1.1;letter-spacing:-.025em;
  color:#12120F;margin:0 0 18px}
.pb-h em{font-style:italic;
  background:linear-gradient(112deg,#FF8A2B,#FF3D7F);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pb-txt{font-size:1.0625rem;line-height:1.6;color:#4A473E;margin:0 0 8px}
.pb-txt b{color:#E0562B;font-weight:600}
.pb-cx{display:block;margin-top:24px;background:#14120F;color:#FFF;border-radius:14px;
  padding:18px 22px;font-size:.9375rem;line-height:1.5;font-weight:500}
.pb-fig{display:flex;flex-direction:column;align-items:center;gap:14px}
.pb-fig svg{width:100%;max-width:280px;height:auto}
.pb-leg{font-family:var(--font-mao,cursive);font-size:1rem;color:#8A857A;text-align:center}

/* ── métricas grandes dentro de painel ── */
.mtr{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(20px,3vw,44px);
  margin-top:8px}
.mtr article{text-align:center}
.mtr b{display:block;font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:clamp(2.4rem,1.6rem + 2.4vw,3.6rem);line-height:1;letter-spacing:-.035em}
.mtr span{display:block;margin-top:12px;font-size:.9375rem;line-height:1.45}
.pnl--fogo .mtr b{color:#FFF}
.pnl--fogo .mtr span{color:rgba(255,255,255,.8)}
.pnl--escuro .mtr b{color:#FFF}
.pnl--escuro .mtr span{color:rgba(255,255,255,.62)}

@media (max-width:860px){
  .pnl{border-radius:24px;margin-bottom:14px}
  .pb-grade{grid-template-columns:1fr;gap:28px}
  .pb-fig{order:-1}
}