/* Corre Card · Protótipo do App · página de acesso (desktop e celular)
   Tokens: Design System v0.6 (tokens.json). */

@font-face{font-family:"Figtree";src:url(../fonts/Figtree-var.woff2) format("woff2");font-weight:300 900;font-display:swap}

:root{
  --ff:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --asf:#16130F;--asf2:#1F1B17;--asf3:#2A241F;--linha-e:#3A332C;
  --claro:#F7F4EF;--apoio-e:#E3DCD3;--apoio-e2:#B3A99F;
  --amb:#E2A64B;--ouro:#ECC14E;--laranja:#CD6435;--brasa:#BB3A26;
  --acao:#B4501F;--acao-h:#9A3F17;--acao-e:#F08A4B;
  --fast:120ms;--base:200ms;--slow:320ms;--exit:160ms;--std:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--asf);color:#FFFFFF;font-family:var(--ff);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{overflow:hidden}
[hidden]{display:none!important}
a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--fast) var(--std)}
a:hover{color:var(--acao-e)}
:focus-visible{outline:2px solid var(--acao-e);outline-offset:2px}
.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.ic.in{display:inline-block;vertical-align:-4px}
.brilho{position:fixed;right:-14vw;top:-36vh;width:80vw;max-width:1100px;aspect-ratio:1;background:radial-gradient(circle,rgba(240,138,75,.30),rgba(187,58,38,.16) 38%,rgba(22,19,15,0) 68%);pointer-events:none;z-index:0}
.sa-sonda{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0}

/* botões (12 Componentes) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;font:700 16px/1.2 var(--ff);border:0;cursor:pointer;text-decoration:none;transition:background var(--fast) var(--std),transform var(--fast) var(--std),box-shadow var(--fast) var(--std),color var(--fast) var(--std)}
.btn.sm{min-height:48px;padding:0 18px;font-size:15px}
.btn-p{background:var(--acao);color:#FFFFFF}
.btn-p:hover{background:var(--acao-h)}
.btn-p:active{transform:scale(.98)}
.btn-s{background:transparent;color:var(--claro);box-shadow:inset 0 0 0 1.5px var(--claro)}
.btn-s:hover{background:var(--asf3)}
.btn-t{background:transparent;color:#F6A673;text-decoration:underline;text-underline-offset:3px;padding:0 12px}
.btn-t:hover{color:#FFFFFF}

/* ================= DESKTOP ================= */
.desk{position:relative;z-index:1;height:100vh;height:100dvh;display:grid;grid-template-rows:auto 1fr auto auto}
.topo{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(20px,3.5vw,56px) 8px;flex-wrap:wrap}
.topo-marca{display:flex;align-items:center;gap:18px;min-width:0}
.topo-logo{height:26px;width:auto;display:block}
.topo-sep{width:1px;height:24px;background:var(--linha-e)}
.topo-t{margin:0;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amb)}
.topo-meta{margin:0;display:flex;gap:24px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--apoio-e)}
.topo-meta b{color:#FFFFFF}

.palco{min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 24px}
.aparelhos{display:flex;align-items:flex-end;justify-content:center;gap:var(--gap,56px)}
.aparelho{margin:0;display:grid;justify-items:center;gap:var(--leg-gap,14px)}
.ap-caixa{position:relative}
.ap-esc{position:absolute;left:0;top:0;transform-origin:0 0}
.ap-corpo{position:relative;background:#0B0908;box-shadow:0 0 0 1.5px #3A332C,0 30px 80px rgba(0,0,0,.55),0 0 120px rgba(205,100,53,.10)}
.ap-tela{position:absolute;overflow:hidden;background:#FFFFFF}
.ap-tela iframe{display:block;border:0;width:100%;height:100%;background:#FFFFFF}
/* iPhone 13: entalhe */
.ap-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:162px;height:33px;background:#0B0908;border-radius:0 0 20px 20px;pointer-events:none;z-index:2}
.ap-notch::before{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);width:52px;height:6px;border-radius:6px;background:#1E1A16}
.ap-notch::after{content:"";position:absolute;right:38px;top:7px;width:10px;height:10px;border-radius:50%;background:#14202B;box-shadow:inset 0 0 0 2px #0E151C}
/* Moto G86: câmera em furo */
.ap-furo{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:#050403;box-shadow:0 0 0 2px rgba(255,255,255,.05);pointer-events:none;z-index:2}
/* botões laterais */
.ap-lat{position:absolute;width:4px;border-radius:2px;background:#2A241F}
.ap-leg{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--apoio-e);white-space:nowrap}
.ap-leg b{color:#FFFFFF;font-weight:700}
.ap-leg .sep{width:4px;height:4px;border-radius:50%;background:var(--apoio-e2)}
.ap-rein{width:44px;height:44px;border-radius:50%;border:0;background:var(--asf3);color:var(--claro);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--fast) var(--std)}
.ap-rein:hover{background:#3A332C}

.rodape{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:10px clamp(20px,3.5vw,56px) 14px;font-size:14px;color:var(--apoio-e)}
.rodape b{color:#FFFFFF}
.rodape a{font-weight:700}
.rodape-dica{color:var(--apoio-e2)}
.faixa{height:6px;background:linear-gradient(90deg,#ECC14E,#E2A64B 30%,#CD6435 65%,#BB3A26)}
@media (max-width:1100px){.rodape-dica{display:none}}
@media (max-height:700px){.topo{padding-top:12px}.rodape{padding-top:6px;padding-bottom:8px}}

/* ================= CELULAR ================= */
.cel{position:relative;z-index:1;height:100vh;height:100dvh;height:var(--alt,100dvh)}
.cel-tela{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 20px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.cel-logo{height:26px;width:auto;align-self:flex-start}
.cel-meio{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 0 24px}
.cel-o{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amb)}
.cel-h{margin:0 0 12px;font-size:32px;line-height:38px;font-weight:800;letter-spacing:-.01em}
.cel-p{margin:0;font-size:16px;line-height:24px;color:var(--apoio-e)}
.cel-p b{color:#FFFFFF}
.cel-ops{display:grid;gap:12px;margin-top:28px}
.cel-op{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 16px;border-radius:20px;border:1.5px solid var(--linha-e);background:var(--asf2);color:#FFFFFF;font-family:var(--ff);text-align:left;cursor:pointer;transition:background var(--fast) var(--std),border-color var(--fast) var(--std)}
.cel-op:hover,.cel-op:active{background:var(--asf3);border-color:var(--acao-e)}
.cel-op-i{width:44px;height:44px;border-radius:14px;background:var(--asf3);color:var(--amb);display:flex;align-items:center;justify-content:center;flex:none}
.cel-op-t{flex:1;display:grid;gap:2px}
.cel-op-t b{font-size:17px}
.cel-op-t span{font-size:14px;color:var(--apoio-e2)}
.cel-op-r{display:none;font-size:14px;font-weight:700;color:var(--asf);background:linear-gradient(135deg,#ECC14E,#E2A64B);border-radius:999px;padding:4px 10px;white-space:nowrap}
.cel-op-r.on{display:inline-block}
.cel-ass{margin:0;font-size:14px;color:var(--apoio-e2)}
.cel-ass a{font-weight:700}

.cel-voltar{align-self:flex-start;width:48px;height:48px;margin:-8px 0 0 -8px;border-radius:50%;border:0;background:transparent;color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cel-voltar:hover{background:var(--asf3)}
.cel-bloco{margin-top:20px;padding:16px;border-radius:20px;background:var(--asf2);border:1px solid var(--linha-e)}
.cel-bt{margin:0 0 12px;font-size:16px;font-weight:700}
.cel-passos{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cel-passos li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:24px;color:var(--apoio-e)}
.cel-passos b{color:#FFFFFF}
.cel-n{width:28px;height:28px;border-radius:50%;background:var(--acao);color:#FFFFFF;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.cel-demo{background:#FFFFFF;border-radius:16px;overflow:hidden;margin:0 0 14px}
.cel-demo-topo{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #ECE6DF}
.cel-demo-topo img{height:15px;width:auto}
.cel-demo-r{display:flex;gap:8px}
.cel-demo-r i{width:28px;height:28px;border-radius:50%;background:#F7F4EF;display:block}
.cel-demo-r i.av{background:#FDF1E7;color:#7A3B1F;font:800 11px/28px var(--ff);font-style:normal;text-align:center;box-shadow:0 0 0 2px #FFFFFF,0 0 0 3.5px #855B21}
.cel-demo-dedo{position:absolute;left:38%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(180,80,31,.18);box-shadow:0 0 0 2px #B4501F}
.cel-demo-dedo span{position:absolute;inset:-6px;border-radius:50%;border:3px solid #B4501F;clip-path:inset(0 0 0 0);animation:segura 2s linear infinite;mask:conic-gradient(#000 var(--p,0%),transparent 0);-webkit-mask:conic-gradient(#000 var(--p,0%),transparent 0)}
@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes segura{0%{--p:0%}85%{--p:100%}100%{--p:100%}}
.cel-demo-corpo{padding:12px;display:grid;gap:8px}
.cel-demo-corpo i{display:block;height:10px;border-radius:5px;background:#ECE6DF;width:70%}
.cel-demo-corpo i.c{height:40px;width:100%;border-radius:12px;background:#16130F}
.cel-acoes{display:grid;gap:8px}
.cel-acoes .btn{width:100%}

/* altura medida em JS (--alt): no iPhone instalado o 100dvh pode ficar curto e deixar uma faixa sem a interface */
.cel-app{position:fixed;left:0;right:0;top:0;height:100vh;height:100dvh;height:var(--alt,100dvh);min-height:100%;z-index:20;background:var(--cor-app,#CD6435);transition:background var(--base) var(--std)}
html.app-aberto,html.app-aberto body{background:var(--cor-app,#CD6435)}
html.app-aberto .brilho{display:none}
.cel-app iframe{display:block;border:0;width:100%;height:100%}
.cel-fs{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);z-index:30;background:var(--asf);border:1px solid var(--linha-e);border-radius:20px;padding:16px;box-shadow:0 24px 64px rgba(0,0,0,.4)}
.cel-fs p{margin:0 0 12px;font-size:16px;font-weight:700}
.cel-fs div{display:flex;gap:8px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}
  .cel-demo-dedo span{--p:100%}
}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}