/* ============================================================
   COMO FUNCIONA (2 cards 3D) — Proteção Brasil (v3)
   ============================================================ */

/* ---------- Base compartilhada ---------- */
:root{
  --azul:#1e3a8a;--azul-2:#2a4fb8;--azul-esc:#0e1c47;--azul-noite:#08122e;
  --ouro:#e6c25a;--ouro-claro:#f6dd8e;--ouro-esc:#c9a227;
  --zap:#25d366;--ok:#22c55e;--ok-2:#16a34a;
  --ink:#eef3ff;--ink-dim:#a8b8e0;--card:rgba(255,255,255,.06);--linha:rgba(255,255,255,.14);
  --ft:'Sora',system-ui,sans-serif;--fc:'Inter',system-ui,sans-serif;--raio:18px;--ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--fc);background:var(--azul-noite);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{width:min(1180px,90%);margin:0 auto}
h2,h3{font-family:var(--ft);font-weight:800;letter-spacing:-.02em;line-height:1.12}

/* Reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.rv.on{opacity:1;transform:none}

/* Cabeçalhos de seção */
section{padding:64px 0;position:relative}
.eyebrow{display:block;text-align:center;color:var(--ouro);font-family:var(--ft);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
h2.tt{text-align:center;font-size:clamp(1.7rem,6.4vw,2.5rem);margin-bottom:10px}
h2.tt em{font-style:normal;color:var(--ouro)}
.sub{text-align:center;color:var(--ink-dim);max-width:540px;margin:0 auto 36px;font-size:.95rem}

/* ---------- COMO FUNCIONA — cards 3D em camadas, montados no scroll ---------- */
.como{background:#ffffff;overflow:hidden}
.como .eyebrow{color:var(--ouro-esc)}
.como h2.tt{color:var(--azul)}
.como h2.tt em{color:var(--ouro-esc)}
.como .sub{color:#4a5a7d}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;perspective:1100px}

/* o card gira conforme o scroll (--rx) e as camadas sobem no eixo Z (--d) */
.como3d{
  position:relative;min-height:250px;border-radius:24px;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) scale(calc(.9 + var(--d,1) * .1));
  background:linear-gradient(150deg,var(--azul-2) 0%,var(--azul) 55%,var(--azul-esc) 100%);
  box-shadow:0 26px 50px rgba(14,28,71,.28);
  will-change:transform}
.como3d--a{transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--d,1) * 7deg)) scale(calc(.9 + var(--d,1) * .1))}
.como3d--b{transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--d,1) * -7deg)) scale(calc(.9 + var(--d,1) * .1))}
.como3d--b{background:linear-gradient(150deg,#3358c8 0%,#1e3a8a 52%,#0e1c47 100%)}

/* painel de vidro claro (base das camadas) */
.como3d__glass{position:absolute;inset:7px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.74));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(14,28,71,.12);
  transform:translateZ(calc(var(--d,1) * 34px))}

/* número dourado flutuante (camada mais à frente) */
.como3d__num{position:absolute;top:16px;right:16px;z-index:3;
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  font-family:var(--ft);font-weight:800;font-size:1.55rem;color:var(--azul-esc);
  background:linear-gradient(135deg,var(--ouro-claro),var(--ouro-esc));
  box-shadow:0 14px 26px rgba(201,162,39,.45);
  transform:translateZ(calc(var(--d,1) * 120px)) scale(calc(1 + var(--d,1) * .12))}

/* conteúdo (camada intermediária) */
.como3d__content{position:relative;z-index:2;padding:74px 18px 22px;
  transform:translateZ(calc(var(--d,1) * 74px))}
.como3d__tag{display:inline-block;font-family:var(--ft);font-weight:800;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azul-2);
  background:rgba(30,58,138,.12);padding:4px 11px;border-radius:999px;margin-bottom:12px}
.como3d__content h3{font-size:1rem;line-height:1.25;margin:0 0 8px;color:var(--azul-esc)}
.como3d__content p{font-size:.84rem;line-height:1.45;margin:0;color:#4a5a7d}

/* ---------- Desktop ---------- */
@media (min-width:768px){
  section{padding:88px 0}
  .duo{gap:26px;perspective:1300px}
  .como3d{min-height:300px;border-radius:28px}
  .como3d__num{width:62px;height:62px;border-radius:18px;font-size:1.9rem;top:22px;right:22px}
  .como3d__content{padding:94px 28px 30px}
  .como3d__content h3{font-size:1.26rem;margin-bottom:10px}
  .como3d__content p{font-size:.96rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}