:root { --tinta:#0B0F14; --papel:#F4F4EF; --nevoa:#BCC3CE; --lima:#C6F04D; }
* { box-sizing:border-box; margin:0; }
html { background:var(--tinta); }
body { background:var(--tinta); color:var(--papel); font-family:"Archivo","Helvetica Neue",Arial,sans-serif; }
.links { max-width:560px; margin:0 auto; padding:max(14px,env(safe-area-inset-top)) 12px max(20px,env(safe-area-inset-bottom)); display:grid; gap:12px; }
.marca { justify-self:center; display:block; padding:2px 8px 4px; }
.marca img { display:block; width:44px; height:44px; border-radius:12px; }

/* a foto é o conteúdo; o vidro só existe no botão, que flutua sobre ela */
.cartao { position:relative; isolation:isolate; display:block; aspect-ratio:16/11; border-radius:24px; overflow:hidden; color:var(--papel); text-decoration:none; background:#151B23; }
.cartao.principal { aspect-ratio:4/5; }
.cartao > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.cartao::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,15,20,0) 30%,rgba(11,15,20,.72) 58%,rgba(11,15,20,.94) 100%); }
.texto { position:absolute; z-index:1; left:18px; right:18px; bottom:78px; display:block; }
.rotulo { display:block; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--lima); margin-bottom:6px; text-shadow:0 1px 8px rgba(0,0,0,.6); }
h1,h2 { font-weight:800; letter-spacing:-.025em; line-height:1.02; text-shadow:0 2px 16px rgba(0,0,0,.55); }
h1 { font-size:clamp(31px,9vw,42px); }
h2 { font-size:clamp(23px,6.6vw,30px); }

.vidro { position:absolute; z-index:1; left:12px; right:12px; bottom:12px; height:54px; padding:0 8px 0 22px; display:flex; align-items:center; justify-content:space-between; border-radius:27px; overflow:hidden; font-weight:700; font-size:17px; color:#fff; background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08) 45%,rgba(255,255,255,.16)); -webkit-backdrop-filter:blur(14px) saturate(190%) brightness(1.08); backdrop-filter:blur(14px) saturate(190%) brightness(1.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 1px 0 0 rgba(255,255,255,.18),inset -1px 0 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.22),inset 0 -10px 18px rgba(255,255,255,.07),0 10px 26px rgba(0,0,0,.45); transition:transform .25s cubic-bezier(.2,.9,.3,1.3); }
/* o brilho curvo do alto, que dá a leitura de vidro grosso */
.vidro::before { content:""; position:absolute; left:10px; right:10px; top:2px; height:44%; border-radius:24px 24px 60% 60%/24px 24px 100% 100%; background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0)); pointer-events:none; }
.seta { position:relative; width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:50%; font-size:20px; line-height:1; color:var(--papel); background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
/* só a ação principal leva a cor da marca */
.principal .seta { color:var(--tinta); background:var(--lima); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 10px rgba(198,240,77,.4); }

.cartao:hover > img { transform:scale(1.04); }
.cartao:active .vidro { transform:scale(.97); }
.cartao:focus-visible { outline:3px solid var(--lima); outline-offset:2px; }
.rodape { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px; padding:8px 0 2px; font-size:14px; }
.rodape a { color:var(--nevoa); text-underline-offset:3px; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .vidro { background:rgba(30,36,44,.92); } }
@media (prefers-reduced-transparency:reduce) { .vidro { background:rgba(30,36,44,.96); -webkit-backdrop-filter:none; backdrop-filter:none; } }
@media (prefers-reduced-motion:reduce) { .cartao > img, .vidro { transition:none; } .cartao:hover > img, .cartao:active .vidro { transform:none; } }