/* A HANNAH TE LIGA AGORA — o card do site (D-2026-11-12-HSITE1/2/3, desenho aprovado em D-2026-11-13-HSITE5). Tudo dentro de #hannah-te-liga: não vaza para a página. */
@keyframes htl-pulso{70%{box-shadow:0 0 0 10px rgba(53,208,127,0)}100%{box-shadow:0 0 0 0 rgba(53,208,127,0)}}
@keyframes htl-chama{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#hannah-te-liga{--navy:#040E2B;--navy2:#0A1A45;--ciano:#4CB0EA;--ciano-cl:#9BD6F6;--cta:#C8450F;--cta2:#D9521A;--verde:#35D07F;--branco:#fff;--erro:#FFB4A8;
 --display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;--texto:'Inter',system-ui,sans-serif;
 max-width:1040px;margin:0 auto;padding:28px 16px;font-family:var(--texto);font-size:16px;line-height:1.5;box-sizing:border-box;
 *{box-sizing:border-box}
 [hidden]{display:none!important}
 .card{position:relative;display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);background:linear-gradient(135deg,var(--navy),var(--navy2) 60%,#0B2A7A);color:var(--branco);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(3,10,35,.35);text-align:left}
 .rosto{position:relative;min-height:320px;background:#DDE6F5;cursor:pointer}
 .rosto video,.rosto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 20%}
 .rosto video{opacity:0;transition:opacity .25s}
 .rosto.fala video{opacity:1}
 .vivo{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;background:rgba(4,14,43,.78);color:#fff;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.02em}
 .vivo i{width:9px;height:9px;border-radius:50%;background:var(--verde);animation:htl-pulso 1.8s infinite}
 .balao{position:absolute;left:14px;right:14px;bottom:14px;background:#fff;color:#0B1733;border-radius:16px 16px 16px 4px;padding:10px 14px;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25;box-shadow:0 10px 30px rgba(3,10,35,.3);animation:htl-chama 3.2s ease-in-out infinite}
 .corpo{padding:26px 28px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
 .olho{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ciano-cl);margin:0}
 h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.6vw,34px);line-height:1.1;margin:0;color:#fff;text-wrap:balance}
 p{margin:0;color:#D5E0FA}
 .passos{display:flex;gap:8px;align-items:center;font-size:13px;color:#B7C6EA;flex-wrap:wrap}
 .passos span{display:inline-flex;align-items:center;gap:6px}
 .passos b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #5670B8;font-size:12px;font-weight:600}
 .passos .agora{color:#fff}
 .passos .agora b{background:var(--ciano);border-color:var(--ciano);color:#041033}
 .passos .feito b{background:var(--verde);border-color:var(--verde);color:#04260F}
 form{display:flex;flex-direction:column;gap:12px;margin:0}
 .linha{display:grid;grid-template-columns:1fr 1fr;gap:12px}
 label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500;color:#D5E0FA;min-width:0}
 input[type=text],input[type=tel]{height:50px;border-radius:12px;border:1.5px solid #3A4F8F;background:rgba(255,255,255,.08);color:#fff;padding:0 14px;font:500 16px var(--texto);min-width:0;width:100%}
 input::placeholder{color:#8FA3D6}
 input:focus-visible,button:focus-visible,.rosto:focus-visible{outline:3px solid var(--ciano);outline-offset:2px}
 .aceite{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:13.5px;line-height:1.4}
 .aceite input{width:20px;height:20px;margin-top:1px;accent-color:var(--ciano);flex:none}
 .btn{min-height:54px;border:0;border-radius:14px;padding:0 24px;font:700 17px var(--display);color:#fff;background:linear-gradient(180deg,var(--cta2),var(--cta));box-shadow:0 10px 28px rgba(200,69,15,.4),inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer;transition:transform .2s}
 .btn:hover{transform:translateY(-2px)}
 .btn[disabled]{opacity:.6;cursor:default;transform:none}
 .btn.calmo{background:rgba(255,255,255,.12);box-shadow:none;font-weight:600;font-size:15px;min-height:46px}
 .erro{color:var(--erro);font-size:14px;min-height:20px}
 .miudo{font-size:12.5px;color:#9FB1DD}
 .codigo{letter-spacing:.5em;text-align:center;font:700 26px var(--display)!important;font-variant-numeric:tabular-nums}
 .ligando{display:flex;align-items:center;gap:18px}
 .anel{flex:none;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font:800 30px var(--display);font-variant-numeric:tabular-nums;color:#fff;background:conic-gradient(var(--verde) var(--p,0%),rgba(255,255,255,.14) 0)}
 .anel span{width:74px;height:74px;border-radius:50%;background:var(--navy2);display:grid;place-items:center}
 .forte{font:700 20px var(--display);color:#fff}
 .wpp{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:12px;background:#1DAA61;color:#fff;font-weight:600;text-decoration:none;align-self:flex-start}
 @media (max-width:640px){.card{grid-template-columns:1fr}.rosto{min-height:330px}.rosto video,.rosto img{object-position:50% 0}.corpo{padding:20px 18px}.linha{grid-template-columns:1fr}}
 @media (prefers-reduced-motion:reduce){.balao,.vivo i{animation:none}}
}