/* =========================================================
   Sistemas CORDON — site v2 (estilos sobre Tailwind CDN)
   ========================================================= */

/* breakpoint xs usado no nav */
@media (min-width:420px){ .xs\:inline{display:inline!important} .xs\:hidden{display:none!important} }

/* ---------- Nav ---------- */
[data-nav]{ background:transparent; }
[data-nav].is-scrolled{ background:rgba(255,255,255,.85); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(17,26,46,.06); }

/* ---------- WhatsApp ---------- */
.btn-wa{ background:#10b981; box-shadow:0 8px 20px -6px rgba(16,185,129,.5); transition:all .2s; }
.btn-wa:hover{ background:#059669; transform:translateY(-1px); }
.wa-ico{ height:1.15em; width:1.15em; }

/* ---------- Tipografia auxiliar ---------- */
.kicker{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#D97706; }
.text-grad{ background:linear-gradient(90deg,#F5A623,#D97706,#B45309); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-grad-light{ background:linear-gradient(90deg,#fff,#FDE68A); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Hero fundo ---------- */
.hero-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-bg::before,.hero-bg::after{ content:""; position:absolute; border-radius:9999px; filter:blur(70px); opacity:.45; }
.hero-bg::before{ width:30rem; height:30rem; top:-6rem; left:-6rem; background:#FDE68A; }
.hero-bg::after{ width:34rem; height:34rem; top:6rem; right:-8rem; background:rgba(16,185,129,.35); }

/* ---------- Mock navegador ---------- */
.browser-mock{ border-radius:1.25rem; background:linear-gradient(135deg,#1c2740,#0a1020); padding:0; box-shadow:0 30px 60px -20px rgba(10,16,32,.45); overflow:hidden; }
.browser-bar{ display:flex; align-items:center; gap:.4rem; padding:.7rem 1rem; background:rgba(255,255,255,.04); }
.browser-bar .dot{ height:.7rem; width:.7rem; border-radius:9999px; display:inline-block; }
.kpi{ border-radius:.75rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); padding:.7rem .8rem; color:#fff; }
.kpi-l{ font-size:.62rem; color:rgba(207,215,229,.8); }
.kpi-v{ font-size:1.15rem; font-weight:800; margin-top:.15rem; }
.kpi-up{ font-size:.62rem; color:#34d399; margin-top:.15rem; }
.bar{ flex:1; border-radius:.25rem .25rem 0 0; background:linear-gradient(to top,#46598a,#10b981); }
.float-badge{ position:absolute; bottom:-1.25rem; left:-1.25rem; background:#fff; padding:.9rem 1.1rem; border-radius:1rem; box-shadow:0 20px 40px -12px rgba(10,16,32,.3); border:1px solid #eaeef4; }
@media (max-width:768px){ .float-badge{ display:none; } }

/* imagens reais (screenshots) dentro dos frames */
.shot-img{ display:block; width:100%; height:auto; }
.phone-screen--img{ padding:0; min-height:0; overflow:hidden; }
.phone-screen--img img{ display:block; width:100%; height:auto; }

/* mock claro (abas) */
.kpi2{ border-radius:.75rem; background:#f5f7fa; border:1px solid #eaeef4; padding:.8rem .9rem; }
.kpi2 .kpi-l{ color:#6b82a6; }
.kpi2 .kpi-v{ color:#111a2e; }

/* ---------- Mock celular ---------- */
.phone-mock{ width:268px; border-radius:2.2rem; background:#0a1020; padding:.7rem; box-shadow:0 30px 60px -20px rgba(10,16,32,.5); }
.phone-screen{ background:#fff; border-radius:1.7rem; padding:1.1rem; min-height:460px; }

/* ---------- Abas "Veja por dentro" ---------- */
.tab-btn{ border-radius:9999px; padding:.55rem 1.1rem; font-size:.85rem; font-weight:600; color:#46598a; background:#eaeef4; transition:all .2s; }
.tab-btn:hover{ background:#cdd7e5; }
.tab-btn.is-active{ background:#111a2e; color:#fff; }

/* ---------- FAQ ---------- */
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-a{ max-height:240px; }
.faq-item.open .faq-chev{ transform:rotate(180deg); }

/* ---------- Form ---------- */
.lbl{ display:block; font-size:.82rem; font-weight:600; color:#293659; margin-bottom:.35rem; }
.inp{ width:100%; border-radius:.75rem; border:2px solid #eaeef4; padding:.7rem .9rem; font-size:.9rem; background:#fff; outline:none; transition:border-color .15s; }
.inp:focus{ border-color:#F5A623; }
.inp.is-invalid{ border-color:#ef4444; }

/* emoji icon nos cards de recurso */
.emoji-ico{ height:2.6rem; width:2.6rem; border-radius:.75rem; background:#FFFBEB; display:flex; align-items:center; justify-content:center; }

/* Emoji renderizado pelo Twemoji (imagem) — do tamanho do texto, em qualquer SO */
img.emoji{ height:1em; width:1em; display:inline-block; vertical-align:-0.12em; margin:0 .04em; }

/* Popup de Suporte (TeleSuporte) */
.modal-ov{ position:fixed; inset:0; z-index:60; background:rgba(10,16,32,.6); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-ov.open{ display:flex; }
.modal-card{ background:#fff; border-radius:18px; max-width:460px; width:100%; padding:26px; box-shadow:0 25px 60px rgba(0,0,0,.35); position:relative; }
.modal-x{ position:absolute; top:10px; right:14px; font-size:1.5rem; line-height:1; color:#9fb0c9; cursor:pointer; background:none; border:0; }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }