/* 3D4VET UI — sistema de design das páginas públicas e de conta (início, cadastro, login, planos, conta).
   Um só vocabulário: cores da marca, tipografia, botões, campos e cartões. Tema clean desde 30/10/2026: fundo
   branco, petróleo do logo como destaque, sombras leves; o fundo "aurora" ficou desligado.
   Carregar depois de theme.css. As telas de trabalho (visualizador, 2D, marcha…) continuam com layout.css. */
:root{
  --ui-bg:#ffffff; --ui-bg2:#f4f6f8; --ui-card:#ffffff; --ui-card2:#f7f9fb; --ui-edge:#e5e9ee; --ui-edge2:#d5dce4;
  --ui-ink:#1f2a37; --ui-sub:#5d6b7b; --ui-faint:#8a96a5;
  --ui-teal:#0f8f87; --ui-mint:#0f8f87; --ui-blue:#1d6fa5; --ui-navy:#14304d; --ui-petrol:#0b726c;
  --ui-ok:#1a7f37; --ui-warn:#8a5a00; --ui-bad:#b42318;
  --ui-r-sm:8px; --ui-r:12px; --ui-r-lg:18px; --ui-r-xl:24px;
  --ui-shadow:0 12px 32px #1f2a3714; --ui-shadow-lg:0 24px 60px #1f2a371f;
  --ui-grad:linear-gradient(135deg,#0f8f87,#0f8f87);
  --ui-grad-text:linear-gradient(90deg,var(--ui-teal),var(--ui-blue));
  --ui-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.ui{background:var(--ui-bg);color:var(--ui-ink);font-family:var(--ui-font);line-height:1.55;-webkit-font-smoothing:antialiased}
.ui a{color:var(--ui-mint)}
.ui a:hover{color:var(--ui-petrol)}
/* fundo aurora: duas manchas de luz lentas, baratas (só CSS); param em prefers-reduced-motion */
.ui-aurora{position:relative;isolation:isolate;overflow:hidden}
.ui-aurora::before,.ui-aurora::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.ui-aurora::before{width:56vw;height:56vw;max-width:760px;max-height:760px;left:-14vw;top:-22vw;background:radial-gradient(circle,#1d6fa5 0,#163756 40%,transparent 70%);animation:uiDrift 22s ease-in-out infinite alternate}
.ui-aurora::after{width:50vw;height:50vw;max-width:680px;max-height:680px;right:-16vw;bottom:-20vw;background:radial-gradient(circle,#118a83 0,#00575a 45%,transparent 70%);animation:uiDrift 26s ease-in-out infinite alternate-reverse}
@keyframes uiDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,4vw) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.ui-aurora::before,.ui-aurora::after{animation:none}}
.ui-aurora::before,.ui-aurora::after{display:none}   /* clean: sem as manchas de luz */
/* tipografia */
.ui h1,.ui h2,.ui h3{letter-spacing:-.015em;line-height:1.12;margin:0}
.ui-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ui-teal);background:#0f8f870f;border:1px solid #0f8f8733;padding:5px 11px;border-radius:20px;font-weight:600}
.ui-grad{font-style:normal;font-weight:700;background:var(--titulo-grad,var(--ui-grad-text));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:var(--titulo-anim,none)}
/* títulos em peso médio, com a barrinha de cor nos de seção (escolha "A · gradiente em movimento" e peso 500/700,
   31/10/2026: o 800 ficou forte demais; theme.css) */
.ui h1{font-weight:500}
.ui .sec,.faq h2{font-weight:500}
.ui .sec::after,.faq h2::after{content:"";display:block;width:54px;height:4px;border-radius:4px;margin:10px 0 0;background:var(--titulo-grad,var(--ui-grad-text));background-size:300% 100%;animation:var(--titulo-anim,none)}
.ui .sec::after{margin:10px auto 0}
.ui-sub{color:var(--ui-sub)}
.ui-faint{color:var(--ui-faint)}
/* botões */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--ui-r);font-weight:700;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2;transition:transform .12s,box-shadow .12s,background .12s,border-color .12s;color:var(--ui-ink);background:transparent}
.ui-btn.primary{background:var(--ui-teal);color:#fff;box-shadow:0 6px 18px #0f8f8733;border-color:var(--ui-teal)}
.ui-btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px #0f8f8740;background:var(--ui-petrol);border-color:var(--ui-petrol);color:#fff}
.ui-btn.ghost{border-color:#0f8f8780;background:#fff;color:var(--ui-teal)}
.ui-btn.ghost:hover{background:#0f8f870a;border-color:var(--ui-teal);color:var(--ui-teal)}
.ui-btn.link{padding:8px 10px;color:var(--ui-teal);font-weight:600}
.ui-btn.link:hover{color:var(--ui-petrol)}
.ui-btn.small{padding:8px 14px;font-size:13.5px;border-radius:var(--ui-r-sm)}
.ui-btn.block{width:100%}
.ui-btn:disabled{opacity:.55;cursor:wait;transform:none}
.ui-btn:focus-visible,.ui-field input:focus-visible,.ui-field select:focus-visible{outline:2px solid var(--ui-mint);outline-offset:2px}
/* campos */
.ui-field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.ui-field label{font-size:12.5px;font-weight:600;color:var(--ui-sub);letter-spacing:.01em}
.ui-field input,.ui-field select{width:100%;min-width:0;box-sizing:border-box;background:#fff;color:var(--ui-ink);border:1px solid var(--ui-edge2);border-radius:10px;padding:12px 13px;font:inherit;font-size:15px;transition:border-color .12s,box-shadow .12s}
.ui-field input:focus{border-color:var(--ui-teal);box-shadow:0 0 0 3px #0f8f8726;outline:none}
.ui-field input::placeholder{color:#9aa5b1}
.ui-field .hint{font-size:12px;color:var(--ui-faint)}
.ui-field.pw{position:relative}
.ui-field.pw input{padding-right:46px}
.ui-eye{position:absolute;right:6px;bottom:6px;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--ui-faint);cursor:pointer;display:grid;place-items:center}
.ui-eye:hover{color:var(--ui-ink);background:#1f2a370a}
.ui-eye svg{width:18px;height:18px}
.ui-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
@media (max-width:480px){.ui-row{grid-template-columns:1fr}}
/* mensagens */
.ui-msg{display:none;margin-top:12px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5;border:1px solid transparent}
.ui-msg.err,.ui-msg.bad{background:#fef3f2;color:var(--ui-bad);border-color:#fecdca}
.ui-msg.info,.ui-msg.ok,.ui-msg.done{background:#ecfdf6;color:#0b5e57;border-color:#b4e5dc}
.ui-msg.show,.ui-msg[style*="display: block"]{display:block}
/* cartões */
.ui-card{background:var(--ui-card);border:1px solid var(--ui-edge);border-radius:var(--ui-r-lg);box-shadow:var(--ui-shadow)}
.ui-card.glass{background:#ffffffeb;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* barra do topo das páginas públicas */
.ui-nav{position:sticky;top:0;z-index:20;background:#ffffffeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ui-edge)}
.ui-nav .ui-wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.ui-nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ui-ink);font-weight:700}
.ui-nav .brand img{height:38px;width:auto;display:block;filter:drop-shadow(0 0 1px #0007) drop-shadow(0 0 .5px #0005)}
.ui-nav .menu{display:flex;gap:6px 20px;align-items:center;font-size:14px}
.ui-nav .menu a{text-decoration:none;color:var(--ui-sub);white-space:nowrap}
.ui-nav .menu a:hover{color:var(--ui-ink)}
/* botões do topo (.btnlink de planos, Especialista e conta) iguais aos do início: contorno petróleo e o principal
   cheio; a cor cinza dos links do menu vencia o branco e "Criar cadastro" sumia no botão verde */
.ui-nav .menu a.btnlink{color:var(--ui-teal);background:#fff;border-color:#0f8f8780}
.ui-nav .menu a.btnlink:hover{color:var(--ui-teal);background:#0f8f870a;border-color:var(--ui-teal)}
.ui-nav .menu a.btnlink.ok{color:#fff;background:var(--ui-teal);border-color:var(--ui-teal)}
.ui-nav .menu a.btnlink.ok:hover{color:#fff;background:var(--ui-petrol);border-color:var(--ui-petrol)}
/* no celular somem os links de texto, mas os botões ficam (Entrar, Criar cadastro, Minha conta: como no início;
   planos, Especialista e conta usam .btnlink e ficavam sem como entrar) */
@media (max-width:860px){.ui-nav .menu a:not(.ui-btn):not(.btnlink){display:none}}
@media (max-width:520px){
  .ui-nav .ui-wrap{gap:8px;padding:0 12px}
  .ui-nav .brand{font-size:0;gap:0}
  .ui-nav .brand img{height:32px}
  .ui-nav .menu{gap:6px}
  .ui-nav .menu .btnlink{padding:7px 10px;font-size:12.5px}
}
.ui-wrap{max-width:1140px;margin:0 auto;padding:0 22px}
/* layout das páginas de acesso: painel da marca + formulário */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:linear-gradient(100deg,#eef2f5 0%,#f6f8fa 38%,#ffffff 62%)}   /* um fundo só, em transição: sem divisão entre o painel e o formulário */
@supports (height:100dvh){.auth{min-height:100dvh}}
.auth-side{position:relative;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;background:transparent;overflow:hidden}
.auth-fx{display:none}   /* clean: sem as fibras animadas atrás do formulário */
.auth-side>*,.auth-main>*{position:relative;z-index:1}
.auth-side .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.auth-side .brand img{height:46px}
.auth-side .brand b{display:block;font-size:17px}.auth-side .brand span{display:block;color:var(--ui-sub);font-size:12.5px;margin-top:2px}
.auth-side h2{font-size:clamp(26px,2.6vw,36px);margin:34px 0 14px;max-width:520px}
.auth-side .lead{color:var(--ui-sub);font-size:15.5px;max-width:480px;margin:0 0 22px}
.auth-side ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px;max-width:480px}
.auth-side li{display:flex;gap:11px;align-items:flex-start;color:var(--ui-sub);font-size:14.5px}
.auth-side li b{color:var(--ui-ink)}
.auth-side li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--ui-grad);box-shadow:0 0 0 1px #2bb3a866;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat,linear-gradient(#000,#000);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat,linear-gradient(#000,#000);-webkit-mask-composite:destination-over;mask-composite:add}
.auth-shot{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--ui-edge);box-shadow:var(--ui-shadow-lg);aspect-ratio:16/9;background:#05090d;max-width:560px}
.auth-shot img{width:100%;height:100%;object-fit:cover;display:block}
.auth-shot .tag{position:absolute;background:#fff;border:1px solid var(--ui-edge);border-radius:10px;padding:7px 11px;font-size:12px;color:var(--ui-sub);box-shadow:0 10px 26px #1f2a3714}
.auth-shot .tag b{color:var(--ui-ink);font-size:14px;display:block}
.auth-side>.auth-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.auth-stage canvas{display:block;width:100%;height:100%}
.auth-rx{position:absolute;inset:13% 4% 6%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;visibility:hidden}
.auth-rx svg{width:100%;flex:1;min-height:0}
.auth-rx.tall svg{width:auto;max-width:100%;height:100%}
.auth-rx .filmbg{fill:#0b1218}   /* o filme escuro atrás do osso: no fundo claro o raio-X (osso claro em fundo transparente) sumia */
.auth-rx .film{opacity:.95;filter:contrast(1.15)}.auth-rx.tall .film{filter:none;opacity:1}
.auth-rx line,.auth-rx path,.auth-rx circle{vector-effect:non-scaling-stroke;fill:none}
.auth-rx .ax-l{stroke:#2bb3a8;stroke-width:3}.auth-rx .ax-s{stroke:#6cc6ff;stroke-width:3}
.auth-rx .pt{fill:#2bb3a8;stroke:#e9fffb;stroke-width:1.5}.auth-rx .pt.b{fill:#6cc6ff}
.auth-rx .tick{stroke:#f0c674;stroke-width:2}.auth-rx .ring{stroke:#2bb3a8;stroke-width:2;stroke-dasharray:6 5}
.auth-rx .arc{stroke:#f0c674;stroke-width:2.5}.auth-rx .dim{stroke:#e8f0f4aa;stroke-width:1.5}
.auth-rx .tagbox{fill:#0d1923e6;stroke:#2a3b48;stroke-width:1.5;vector-effect:non-scaling-stroke}
.auth-rx .lbl{fill:#e8f0f4;font-family:inherit;font-weight:700}.auth-rx .lbl.sm{fill:#a9bdc8;font-weight:600}
.auth-rx.wide .lbl.big{font-size:46px}.auth-rx.wide .lbl.sm{font-size:28px}
.auth-rx.tall .lbl.md{font-size:28px}.auth-rx.tall .lbl.sm{font-size:24px}
.auth-rx .rx-credit{font-size:10.5px;color:#7f93a3;opacity:.8}
.auth-side .foot{color:var(--ui-faint);font-size:12.5px;margin-top:26px}
.auth-main{display:grid;place-items:center;padding:32px 22px;min-width:0}
.auth-card{width:min(440px,100%);max-width:100%;box-sizing:border-box;padding:30px 30px 26px;border-radius:var(--ui-r-xl)}
.auth-card h1{font-size:24px;margin:0 0 6px}
.auth-card .intro{font-size:13.5px;color:var(--ui-sub);margin:0 0 6px}
.auth-card form{margin-top:4px}
.auth-card .ui-btn.block{margin-top:20px;padding:13px}
.auth-card .alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--ui-edge);font-size:13px;color:var(--ui-sub)}
.auth-card .alt a{font-weight:600}
.auth-card .back{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--ui-faint);text-decoration:none}
.auth-card .back:hover{color:var(--ui-ink)}
.auth-card .mini{display:flex;justify-content:flex-end;margin-top:8px;font-size:12.5px}
.auth-brand-mobile{display:none}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-brand-mobile{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:18px;text-decoration:none;color:inherit}
  .auth-brand-mobile img{height:40px}
  .auth-brand-mobile span{color:var(--ui-sub);font-size:12.5px}
  .auth-main{padding:22px 16px 40px;align-items:start}
}
/* lista de planos (planos.html): só o estilo; o planos.js monta os cartões */
.plans-hero{padding:40px 0 10px}
.plans-hero h1{font-size:clamp(30px,4vw,44px);margin:12px 0 10px}
.plans-hero .lead{color:var(--ui-sub);font-size:15.5px;line-height:1.6;max-width:720px;margin:0 0 22px}
.period{display:inline-flex;align-items:center;border:1px solid var(--ui-edge2);border-radius:99px;padding:4px;margin:0 0 26px;background:var(--ui-bg2);gap:2px}
.period button{border:0;border-radius:99px;padding:8px 18px;background:transparent;font-size:13.5px;color:var(--ui-sub);font-weight:600;cursor:pointer;font-family:inherit}
.period button[aria-pressed="true"]{background:var(--ui-teal);color:#fff;box-shadow:0 6px 18px #0f8f8733}
.period .save{font-size:11px;font-weight:700;color:#fff;background:var(--ui-teal);border-radius:99px;padding:2px 8px;margin-left:8px}
.grid.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.plan{display:flex;flex-direction:column;border-radius:var(--ui-r-lg);overflow:hidden;background:var(--ui-card);border:1px solid var(--ui-edge);box-shadow:var(--ui-shadow);transition:transform .15s,border-color .15s,box-shadow .15s}
.plan:hover{transform:translateY(-3px);border-color:#0f8f8766;box-shadow:0 20px 44px #1f2a371f}
.plan.mine{border-color:var(--ui-teal)}
.plan.soon{opacity:.72}
.cover{height:156px;background:#e9eef3 center/cover no-repeat;position:relative}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,#1f2a3726 100%)}
.cover.icon{display:flex;align-items:center;justify-content:center;color:var(--ui-teal);background:radial-gradient(circle at 50% 40%,#f2f7f8,#e3eaef)}
.cover.icon svg{width:62px;height:62px;opacity:.85}
.plan .body{display:flex;flex-direction:column;gap:9px;padding:14px 18px 18px;flex:1}
.plan h2{font-size:18px;margin:0}
.plan .body p{font-size:13px;color:var(--ui-sub);line-height:1.55;margin:0}
.plan .inc{font-size:11.5px;color:var(--ui-mint)}
.plan .price{margin-top:auto;padding-top:10px}
.plan .price b{font-size:28px;letter-spacing:-.02em}
.plan .price span{font-size:12px;color:var(--ui-sub)}
.plan .price .alt{display:block;font-size:11.5px;color:var(--ui-faint);margin-top:2px}
.plan button{width:100%;padding:11px;font-weight:700;margin-top:8px;border-radius:10px;font-size:14px}
.plan button.ok{background:var(--ui-teal);color:#fff;border-color:var(--ui-teal)}
.plan button.ok:hover{background:var(--ui-petrol);border-color:var(--ui-petrol)}
.plan .tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;background:#e6f4f2;color:#0b5e57;align-self:flex-start}
.extra{margin-top:22px;padding:18px 20px;border:1px solid var(--ui-edge);border-radius:14px;background:var(--ui-card);font-size:13.5px;line-height:1.6;color:var(--ui-sub)}
.extra b{color:var(--ui-ink)}
.msg{display:none;margin:0 0 16px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5}
.msg.err{display:block;background:#fef3f2;color:var(--ui-bad)}.msg.info{display:block;background:#ecfdf6;color:#0b5e57}
.faq{margin:56px 0 40px}
.faq h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 16px}
.faq details{border:1px solid var(--ui-edge);border-radius:12px;background:var(--ui-card);padding:0 18px;margin-bottom:10px}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ui-teal);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 14px;color:var(--ui-sub);font-size:14px;line-height:1.6}
.ui-footer{border-top:1px solid var(--ui-edge);padding:26px 0;color:var(--ui-faint);font-size:13px}
.ui-footer .ui-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}