:root{
    --navy:#18233a;
    --navy-texto:#ffffff;
    --fb-azul:#385898;
    --fb-cinza:#90949c;
    --cta:#16a34a;
    --cta-hover:#128a3e;
    --destaque:#f59e0b;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:Roboto,Arial,sans-serif;background:#fff;color:#1c1e21}
  img{display:block;max-width:100%}

  /* ===== TOPO ===== */
  .topo{background:var(--navy);height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 16%;color:#fff}
  .topo .titulo{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:26px}
  .topo button{background:none;border:0;color:#fff;cursor:pointer}
  .topo svg{width:22px;height:22px}
  @media (max-width:700px){.topo{padding:0 18px;height:60px}.topo .titulo{font-size:20px}}

  /* ===== VÍDEO ===== */
  .area-video{padding:18px 16px 10px;text-align:center}
  .video{width:380px;max-width:100%;aspect-ratio:380/476;margin:0 auto;position:relative;background:#222;overflow:hidden;cursor:pointer}
  .video .capa{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,170,60,.55),rgba(220,60,60,.55)),linear-gradient(160deg,#6b7280,#1f2937)}
  .video .capa img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
  .video .chamada{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
  .video .chamada span{font-family:Impact,"Arial Black",sans-serif;color:#fff;font-size:30px;line-height:1.05;text-transform:uppercase;text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
  .video .play{width:110px;height:110px;border-radius:50%;background:#e02424;border:6px solid #111;display:flex;align-items:center;justify-content:center}
  .video .play::after{content:"";border-left:38px solid #111;border-top:24px solid transparent;border-bottom:24px solid transparent;margin-left:10px}
  .video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}

  .ao-vivo{margin-top:16px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px}
  .ao-vivo .ponto{width:12px;height:12px;border-radius:50%;background:#e02424;animation:piscar 1.2s infinite}
  .ao-vivo b{color:#e02424}
  @keyframes piscar{50%{opacity:.3}}

  .referencias{margin:18px auto 22px;text-align:center}
  .referencias h4{font-family:Poppins,sans-serif;color:var(--navy);font-size:17px;margin-bottom:12px}
  .referencias .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;max-width:520px;margin:0 auto}
  .referencias .logo{width:140px;height:56px;object-fit:contain;display:block;mix-blend-mode:multiply}

  /* ===== OFERTA COM DELAY ===== */
  #oferta{display:none;opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s;max-width:720px;margin:0 auto;padding:10px 16px 34px}
  #oferta.visivel{opacity:1;transform:none}
  #oferta h2{font-family:Poppins,sans-serif;text-align:center;color:var(--navy);font-size:24px}
  #oferta .sub{text-align:center;color:#555;font-size:14px;margin:4px 0 18px}
  .produtos{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
  .produtos button{border:2px solid #d5d9e0;background:#fff;border-radius:999px;padding:8px 18px;font:600 14px Roboto,sans-serif;cursor:pointer}
  .produtos button.ativo{border-color:var(--cta);background:#effaf2;color:var(--cta)}
  .kits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media (max-width:600px){.kits{grid-template-columns:1fr}}
  .kit{border:2px solid #d5d9e0;border-radius:12px;padding:20px 12px 16px;text-align:center;cursor:pointer;position:relative;background:#fff;transition:.2s}
  .kit:hover{transform:translateY(-2px)}
  .kit.ativo{border-color:var(--cta);box-shadow:0 0 0 4px rgba(22,163,74,.15)}
  .kit .selo{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--destaque);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
  .kit .foto{height:150px;margin:0 auto 8px;display:flex;align-items:flex-end;justify-content:center;gap:3px}
  .kit .foto img{height:100%;width:auto;max-width:100%;object-fit:contain}
  .kit .foto i{display:block;width:22px;height:58px;border-radius:5px 5px 3px 3px;background:linear-gradient(#cbd5e1,#94a3b8)}
  .kit .qtd{font-family:Poppins,sans-serif;font-size:22px;font-weight:700;color:var(--navy)}
  .kit .tratamento{display:inline-block;align-self:center;margin-top:6px;padding:3px 10px;border-radius:999px;background:#fff4e0;color:#9a5b00;font-size:12px;font-weight:700}
  .kit .preco{font-size:24px;font-weight:700;margin-top:6px}
  .kit .unit{font-size:12px;color:#777}
  .kit .total{font-size:13px;margin-top:4px}
  .cta{display:block;width:100%;margin-top:20px;padding:18px;border:0;border-radius:10px;background:var(--cta);color:#fff;font:800 20px Roboto,sans-serif;text-transform:uppercase;cursor:pointer;animation:pulsar 1.8s infinite}
  .cta:hover{background:var(--cta-hover)}
  .kit{display:flex;flex-direction:column}
  .kit .cta{margin-top:auto;padding:14px 10px;font-size:17px;animation:none}
  .kit .total{margin-bottom:14px}
  .kit.ativo .cta{animation:pulsar 1.8s infinite}
  @keyframes pulsar{50%{transform:scale(1.03)}}
  .resumo{text-align:center;font-size:13px;color:#666;margin-top:8px}

  /* ===== FAIXA DO AUTOR ===== */
  .autor{background:var(--navy);color:var(--navy-texto)}
  .autor .dentro{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:90px;padding:48px 20px}
  .autor .foto{width:350px;flex-shrink:0;aspect-ratio:350/330;border-radius:0 0 0 40px;overflow:hidden;background:#2c3a55;display:flex;align-items:center;justify-content:center}
  .autor .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  .autor .foto svg{width:120px;height:120px;opacity:.35}
  .autor h2{font-family:Poppins,sans-serif;font-size:46px;line-height:1.1;padding-bottom:14px;border-bottom:3px solid #fff;margin-bottom:14px}
  .autor p{font-size:15px;line-height:1.25}
  @media (max-width:800px){
    .autor .dentro{flex-direction:column;gap:20px;padding:32px 20px}
    .autor .foto{width:100%;max-width:350px}
    .autor h2{font-size:32px}
  }

  /* ===== COMENTÁRIOS ESTILO FACEBOOK ===== */
  .comentarios{max-width:1084px;margin:38px auto;padding:0 16px}
  .caixa{background:#fff;box-shadow:0 0 12px rgba(0,0,0,.55);padding:14px 16px 10px}
  .caixa .contagem{font:700 13px Helvetica,Arial,sans-serif;color:#4b4f56;padding:6px 0 14px;border-bottom:1px solid #e9ebee;margin-bottom:10px}
  .c{display:flex;gap:9px;margin-bottom:12px}
  .c .avatar{width:42px;height:42px;flex-shrink:0;background:#dfe3ea;overflow:hidden}
  .c .avatar img{width:100%;height:100%;object-fit:cover}
  .c .nome{font:700 13px Helvetica,Arial,sans-serif;color:var(--fb-azul);margin-bottom:3px}
  .c .texto{font:13.5px/1.35 Helvetica,Arial,sans-serif;color:#1c1e21}
  .c .texto .mencao{color:var(--fb-azul);font-weight:700}
  .c .acoes{font:12px Helvetica,Arial,sans-serif;color:var(--fb-cinza);margin-top:5px;display:flex;align-items:center;gap:4px}
  .c .acoes a{color:var(--fb-azul);text-decoration:none;cursor:pointer}
  .c .acoes .like{width:13px;height:13px;border-radius:50%;background:#1877f2;display:inline-flex;align-items:center;justify-content:center}
  .c .acoes .like svg{width:8px;height:8px;fill:#fff}
  .c .acoes .liked{color:#1877f2;font-weight:700}
  .respostas{margin-left:51px;border-left:1px solid #dddfe2;padding-left:9px}
  .respostas .c .avatar{width:32px;height:32px}
  .caixa .plugin{display:flex;align-items:center;gap:5px;font:12px Helvetica,Arial,sans-serif;color:var(--fb-azul);border-top:1px solid #e9ebee;padding-top:10px;margin-top:6px}
  .caixa .plugin i{width:14px;height:14px;background:#3b5998;border-radius:2px;color:#fff;font:700 11px Arial;display:inline-flex;align-items:flex-end;justify-content:center;font-style:normal}
  .caixa .fechado{text-align:center;font:500 14px Roboto,sans-serif;color:#333;padding:18px 0 6px}

  /* ===== RODAPÉ ===== */
  .rod-links{background:#222;color:#fff;text-align:center;padding:12px;font:700 13px Roboto,sans-serif}
  .rod-links a{color:#fff;text-decoration:none;margin:0 8px}
  .rod-texto{background:#d9d9d9;color:#555;text-align:center;padding:16px 16% 14px;font-size:10.5px;line-height:1.35}
  .rod-texto .copy{font-weight:700;font-size:12px;margin-bottom:16px}
  .rod-texto p+p{margin-top:12px}
  @media (max-width:700px){.rod-texto{padding:16px}}