/* Giu Sansevero | Home centralizadora */
:root{--navy:#0A2230;--deep:#04141F;--soft:#12303F;--gold:#BE9B5F;--gold2:#E2C48A;--cream:#F4F2ED;--mut:#A9B8C0;--line:rgba(190,155,95,.24);--fd:'Poppins',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif;--ease:cubic-bezier(.2,.75,.2,1);--px:0;--py:0}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--deep)}
body{font-family:var(--fb);background:var(--deep);color:var(--cream);min-height:100svh;overflow-x:hidden;line-height:1.5}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
.gold{color:var(--gold2)}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

html.pre [data-i],html.pre .tile{opacity:0;animation:failsafe 0s 2.5s forwards}
@keyframes failsafe{to{opacity:1}}

/* fundo */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(110% 80% at 22% 0%,#143649 0%,var(--navy) 42%,var(--deep) 100%)}
.bg i{position:absolute;border-radius:50%;filter:blur(70px);background:radial-gradient(circle,rgba(190,155,95,.42),rgba(190,155,95,0) 70%);transform:translate3d(calc(var(--px)*26px),calc(var(--py)*26px),0)}
.bg-a{width:520px;height:520px;top:-180px;left:4%;animation:breathe 9s ease-in-out infinite}
.bg-b{width:420px;height:420px;bottom:-170px;right:-90px;opacity:.6;animation:breathe 11s 2s ease-in-out infinite}
@keyframes breathe{50%{scale:1.22;opacity:.72}}
.grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.wipe{position:fixed;inset:0;z-index:90;background:var(--gold);clip-path:circle(0 at 50% 50%);pointer-events:none}

/* estrutura */
.hub{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-rows:1fr auto auto;column-gap:clamp(32px,4vw,64px);row-gap:18px;max-width:1320px;min-height:100svh;margin:0 auto;padding:clamp(24px,4svh,44px) clamp(24px,4vw,56px) 18px}
.id{grid-row:1;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.grid{grid-row:1;align-self:center;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(150px,min(calc((100svh - 180px)/3),210px));gap:14px}
.ticker,.foot{grid-column:1/-1}

/* identidade */
.logo{display:block;width:132px;height:42px;background:var(--logo-w) left center/contain no-repeat}
.dial{position:relative;width:clamp(150px,22svh,196px);aspect-ratio:1;transform:translate3d(calc(var(--px)*-7px),calc(var(--py)*-7px),0)}
.dial-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.d-ticks{fill:none;stroke:var(--gold);stroke-width:5;stroke-dasharray:1 7.1;opacity:.7;transform-origin:100px 100px;animation:spin 70s linear infinite}
.d-line{fill:none;stroke:var(--gold);opacity:.3;stroke-width:1}
.d-card text{fill:var(--gold2);font:700 9px var(--fd);text-anchor:middle;opacity:.85}
.d-needle{fill:var(--gold2);filter:drop-shadow(0 0 6px rgba(226,196,138,.75))}
.dial-pic{position:absolute;inset:19%;width:62%;height:62%;object-fit:cover;object-position:50% 50%;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 34px rgba(190,155,95,.4),0 14px 30px rgba(0,0,0,.5)}
@keyframes spin{to{transform:rotate(360deg)}}
.handle{font:600 12px/1 var(--fb);letter-spacing:.28em;text-transform:uppercase;color:var(--gold2)}
.h1{margin-top:12px;font:800 clamp(36px,3.5vw,50px)/1.03 var(--fd);letter-spacing:-.02em}
.h1 span{display:block}
.sub{margin-top:14px;max-width:34ch;color:var(--mut);font-size:15px}
.social{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.soc{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-width:46px;height:46px;border:1px solid var(--line);border-radius:14px;background:rgba(18,48,63,.55);color:var(--gold2);overflow:hidden;transition:transform .35s var(--ease),border-color .3s,background .3s}
.soc svg{width:21px;height:21px;flex:none}
.soc-wa{padding:0 16px;background:var(--gold);border-color:var(--gold);color:var(--deep);font:600 13px var(--fb)}
.soc:active{transform:scale(.9)}

/* cartoes */
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;width:100%;min-width:0;min-height:0;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--soft);text-align:left;overflow:hidden;isolation:isolate;transform-style:preserve-3d;box-shadow:0 14px 30px rgba(0,0,0,.28);transition:border-color .3s,box-shadow .35s;will-change:transform}
.t-wide{grid-column:span 2}
.t-diag{grid-column:span 1;background:linear-gradient(145deg,#D5B478,var(--gold) 60%,#A8844A);border-color:transparent;color:var(--deep)}
.t-ph{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.5;transform:scale(1.06);transition:transform .9s var(--ease),opacity .5s}
.tile:not(.t-diag)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,20,31,.2) 0%,rgba(4,20,31,.88) 82%)}
.t-fx{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,240,205,.32) 50%,transparent 65%);transform:translateX(-120%)}
.tile.sweep .t-fx{animation:sw 1.05s var(--ease)}
@keyframes sw{to{transform:translateX(120%)}}
.tile.sweep{border-color:rgba(226,196,138,.75)}
.tile>.ico,.tile>.t-tx,.tile>.t-a{position:relative;z-index:1}
.ico{position:absolute!important;top:16px;left:16px;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(226,196,138,.5);border-radius:12px;background:rgba(4,20,31,.55);color:var(--gold2);transition:transform .45s var(--ease),background .3s,color .3s}
.ico svg{width:20px;height:20px}
.t-diag .ico{background:rgba(4,20,31,.14);border-color:rgba(4,20,31,.4);color:var(--deep)}
.t-tx{display:block;padding-right:26px}
.t-tx b{display:block;font:700 clamp(15px,1.25vw,18px)/1.2 var(--fd);letter-spacing:-.005em}
.t-tx small{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:#D2DADE}
.t-diag .t-tx small{color:#20323b}
.t-a{position:absolute!important;right:16px;bottom:18px;width:20px;height:20px;color:var(--gold2);transition:transform .4s var(--ease)}
.t-diag .t-a{color:var(--deep)}
.tile:active{scale:.965}
.ink{position:absolute;z-index:0;border-radius:50%;background:rgba(226,196,138,.42);pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:ink .7s ease-out forwards}
.t-diag .ink{background:rgba(255,255,255,.45)}
@keyframes ink{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.t-letters{position:absolute;top:13px;right:14px;z-index:0;display:flex;gap:3px;font:800 15px/1 var(--fd);color:var(--gold)}
.t-letters i{font-style:normal;opacity:.3;animation:ltr 4.2s infinite}
.t-letters i:nth-child(2){animation-delay:.7s}.t-letters i:nth-child(3){animation-delay:1.4s}.t-letters i:nth-child(4){animation-delay:2.1s}.t-letters i:nth-child(5){animation-delay:2.8s}.t-letters i:nth-child(6){animation-delay:3.5s}
@keyframes ltr{0%,18%{opacity:1;color:var(--gold2)}34%,100%{opacity:.3}}
.t-sweep{position:absolute;z-index:-1;top:-45%;right:-22%;width:92%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,rgba(190,155,95,.5),rgba(190,155,95,0) 26%);border:1px solid var(--line);animation:spin 5s linear infinite}

@media (hover:hover) and (pointer:fine){
  .tile:hover{border-color:rgba(226,196,138,.8);box-shadow:0 22px 44px rgba(0,0,0,.42)}
  .tile:hover .t-ph{transform:scale(1.15);opacity:.68}
  .tile:hover .ico{transform:rotate(-8deg) scale(1.1);background:var(--gold);color:var(--deep)}
  .tile:hover .t-a{transform:translateX(5px)}
  .t-diag:hover .ico{background:var(--deep);color:var(--gold2)}
  .soc:hover{transform:translateY(-4px);border-color:var(--gold2)}
}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:9px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-in{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker span{white-space:pre;font:500 12px/1.2 var(--fb);letter-spacing:.06em;color:var(--mut)}
.ticker i{font-style:normal;color:var(--gold);margin:0 8px}
@keyframes tick{to{transform:translateX(-50%)}}
.foot{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#7C8E98}
.foot a{text-decoration:underline;text-underline-offset:3px}

/* painel */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(2,10,16,.68);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.scrim.on{opacity:1;visibility:visible}
.sheet{position:fixed;z-index:50;inset:0;margin:auto;height:fit-content;width:min(600px,calc(100vw - 40px));max-height:min(86svh,740px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;background:linear-gradient(170deg,#14384A,var(--navy) 55%,#072030);box-shadow:0 40px 90px rgba(0,0,0,.6);overflow:hidden}
.sheet[hidden]{display:none}
.sheet:focus{outline:none}
.grab{display:none}
.x{position:absolute;z-index:3;top:14px;right:14px;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:rgba(4,20,31,.7);color:var(--gold2);transition:transform .4s var(--ease)}
.x svg{width:19px;height:19px}
.x:active{transform:rotate(90deg) scale(.9)}
@media (hover:hover){.x:hover{transform:rotate(90deg)}}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:34px 34px 30px}
.p{display:none}
.p.on{display:block}
.eyebrow{font:600 11px/1 var(--fb);letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);padding-right:48px}
.p h2{margin-top:14px;padding-right:32px;font:800 clamp(26px,3vw,34px)/1.1 var(--fd);letter-spacing:-.015em}
.lead{margin-top:12px;color:#C4CFD4;font-size:15px}
.cards{display:grid;gap:10px;margin-top:20px}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(4,20,31,.42)}
.card b{font:700 15px/1.25 var(--fd)}
.card p{margin-top:4px;font-size:13.5px;line-height:1.42;color:#BFCBD1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips span{padding:4px 10px;border:1px solid var(--line);border-radius:99px;font-size:11.5px;color:var(--gold2)}
.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;margin-top:20px;padding:12px 22px;border-radius:99px;background:var(--gold);color:var(--deep);font:600 15px/1.2 var(--fb);position:relative;overflow:hidden;transition:transform .3s var(--ease),background .3s}
.btn svg{width:19px;height:19px;flex:none;transition:transform .35s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent;border:1px solid var(--gold);color:var(--gold2)}
@media (hover:hover){.btn:hover{background:var(--gold2)}.btn-ghost:hover{color:var(--deep)}.btn:hover svg{transform:translateX(5px)}}
.rows{display:grid;gap:8px;margin-top:20px}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:62px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(4,20,31,.42);text-align:left;transition:transform .3s var(--ease),border-color .3s}
.row-t small{display:block;font-size:11.5px;color:var(--gold2)}
.row-t b{display:block;margin-top:2px;font:600 14.5px/1.3 var(--fd)}
.row-a{flex:none;width:18px;height:18px;color:var(--gold2);transition:transform .35s var(--ease)}
.row:active{transform:scale(.98)}
@media (hover:hover){.row:hover{border-color:var(--gold2);transform:translateX(4px)}.row:hover .row-a{transform:translateX(4px)}}

/* LASTRO */
.lastro{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:22px}
.lastro button{aspect-ratio:1;min-height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(4,20,31,.42);font:800 clamp(18px,3vw,24px)/1 var(--fd);color:var(--gold2);transition:background .3s,color .3s,transform .4s var(--ease)}
.lastro button.on{background:var(--gold);color:var(--deep);transform:translateY(-5px)}
.lastro-d{margin-top:16px;min-height:132px;padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(4,20,31,.42)}
.lastro-d small{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.lastro-d h3{margin-top:6px;font:700 20px/1.2 var(--fd)}
.lastro-d p{margin-top:5px;font-size:14px;color:#C4CFD4}

/* diagnostico */
.diag{margin-top:20px}
.diag-bar{height:3px;border-radius:3px;background:rgba(190,155,95,.2);overflow:hidden;margin-bottom:18px}
.diag-bar i{display:block;height:100%;width:33%;background:var(--gold2);transition:width .5s var(--ease)}
.step{display:none;border:0}
.step.on{display:block}
.step label[for],.step legend{display:block;margin-bottom:12px;font:700 17px/1.25 var(--fd)}
.step input[type=text]{width:100%;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:rgba(4,20,31,.55);color:var(--cream);font:16px var(--fb)}
.step input[type=text]:focus{outline:2px solid var(--gold2);outline-offset:1px}
.step input[type=text]::placeholder{color:#7C8E98}
.opts{display:grid;gap:8px}
.opts label{position:relative;display:block;cursor:pointer}
.opts input{position:absolute;opacity:0}
.opts span{display:flex;align-items:center;min-height:50px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(4,20,31,.42);font-size:15px;transition:background .25s,color .25s,transform .3s var(--ease)}
.opts input:checked+span{background:var(--gold);color:var(--deep);font-weight:600;transform:scale(1.015)}
.opts input:focus-visible+span{outline:2px solid var(--gold2);outline-offset:2px}
.diag-err{min-height:20px;margin-top:8px;font-size:13px;color:#F0B7A0}
.diag-nav{display:flex;align-items:center;gap:12px}
.diag-nav .btn{flex:1;margin-top:0}
.back{display:none;min-height:48px;padding:0 12px;color:var(--mut);font-size:14px}
.back.on{display:block}

/* tablet e celular */
@media (max-width:1040px){
  .hub{display:flex;flex-direction:column;gap:18px;min-height:auto;padding:max(16px,env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom))}
  .id{align-self:stretch;display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:6px;align-items:center}
  .dial{grid-column:1;grid-row:1/3;width:100%;max-width:190px;justify-self:center}
  .logo{grid-column:2;grid-row:1;align-self:end;width:118px;height:36px}
  .id-tx{grid-column:2;grid-row:2;align-self:start;min-width:0}
  .handle{font-size:10.5px;letter-spacing:.2em}
  .h1{margin-top:7px;font-size:clamp(25px,7.6vw,42px)}
  .sub{display:none}
  .grid{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(142px,auto);gap:10px;max-height:none}
  .t-diag,.t-wide{grid-column:span 2;min-height:118px}
  .tile{padding:14px}
  .ico{top:12px;left:12px;width:36px;height:36px}
  .ico svg{width:18px;height:18px}
  .t-tx{padding-right:18px}
  .t-tx b{font-size:14.5px}
  .t-tx small{font-size:11.5px}
  .t-a{right:12px;bottom:14px;width:17px;height:17px}
  .t-letters{top:12px;right:11px;font-size:12px}
  .social{position:fixed;z-index:30;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));display:grid;grid-template-columns:48px 48px 48px minmax(0,1fr);gap:7px;padding:7px;border:1px solid var(--line);border-radius:20px;background:rgba(4,20,31,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.55)}
  .soc{min-width:0;height:48px}
  .soc-wa{padding:0 8px;white-space:nowrap}
  .foot{flex-wrap:wrap;justify-content:center}
  .sheet{inset:auto 0 0 0;margin:0;width:100%;max-height:92svh;border-radius:24px 24px 0 0;border-width:1px 0 0;touch-action:pan-y}
  .grab{display:block;flex:none;padding:10px 0 4px}
  .grab i{display:block;width:44px;height:4px;margin:0 auto;border-radius:4px;background:rgba(226,196,138,.55)}
  .sheet-body{padding:12px 18px calc(22px + env(safe-area-inset-bottom))}
  .x{top:12px;right:12px}
}
@media (min-width:640px) and (max-width:1040px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.t-diag{grid-column:span 1}}
@media (max-width:639px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:9px}
  .tile,.t-diag,.t-wide{grid-column:1/-1;min-height:128px;padding:13px 15px}
  .t-ph{background-position:right 28%;opacity:.72}
  .tile:not(.t-diag)::after{background:linear-gradient(90deg,rgba(4,20,31,.92) 0%,rgba(4,20,31,.62) 58%,rgba(4,20,31,.14) 100%),linear-gradient(0deg,rgba(4,20,31,.6),rgba(4,20,31,0) 60%)}
  .tile:active{scale:.975}
  .t-tx{padding-right:26px}
  .t-tx b{font-size:16.5px}
  .t-tx small{font-size:12.5px}
  .t-mini{grid-column:span 1;min-height:112px;padding:10px;justify-content:flex-end}
  .t-mini .ico{top:10px;left:10px;width:32px;height:32px}
  .t-mini .ico svg{width:16px;height:16px}
  .t-mini .t-tx{padding-right:0}
  .t-mini .t-tx b{font-size:12.5px;line-height:1.2}
  .t-mini .t-tx small,.t-mini .t-a{display:none}
  .t-mini .t-letters{display:none}
  .t-mini .t-sweep{top:-40%;right:-40%;width:110%}
}
@media (max-width:370px){.soc-wa span{font-size:12px}.cards-2{grid-template-columns:1fr}.t-mini .t-tx b{font-size:11.5px}}

/* so reduz movimento em computador: no Android esse sinal costuma vir da economia de bateria */
@media (prefers-reduced-motion:reduce) and (pointer:fine){
  .bg i,.d-ticks,.t-letters i,.t-sweep,.ticker-in{animation:none}
  .tile.sweep .t-fx{animation:none}
}