@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo Black";src:url(fonts/archivo-black.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Instrument";src:url(fonts/instrument-italic.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--navy:#0a1428;--bk:#060a14;--paper:#f3efe6;--sand:#c9a96a;--mute:rgba(243,239,230,.76);--line:rgba(243,239,230,.2);--glass:rgba(8,14,28,.88);--ease:cubic-bezier(.22,1,.36,1);--pad:24px;--foto:34dvh;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bk)}
body{margin:0;color:var(--paper);font:400 16px/1.5 "Archivo",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
h1,p{margin:0}em{font-style:italic}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px;border-radius:4px}

/* A foto fica parada atrás de tudo; só o vidro rola por cima dela. */
.ph{position:fixed;inset:0;z-index:-1;width:100%;height:calc(var(--foto) + 90px);object-fit:cover;object-position:46% 34%;filter:brightness(.72) saturate(.85)}

/* Celular: uma folha de vidro única, que se dissolve na foto. */
.sh{position:relative;display:flex;flex-direction:column;margin-top:var(--foto);min-height:calc(100dvh - var(--foto));padding:0 var(--pad) max(20px,env(safe-area-inset-bottom))}
.gl{position:absolute;z-index:-1;inset:-56px 0 0;background:var(--glass);-webkit-backdrop-filter:blur(48px) saturate(1.5);backdrop-filter:blur(48px) saturate(1.5);-webkit-mask-image:linear-gradient(180deg,transparent,#000 56px);mask-image:linear-gradient(180deg,transparent,#000 56px)}
.gl.r{display:none}

.me{display:flex;align-items:center;gap:12px}
.me img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.me span{display:flex;flex-direction:column;line-height:1.2}
.me b{font-weight:700;font-size:17px}
.me em{font:italic 400 18px/1.15 "Instrument",Georgia,serif;color:var(--mute)}
h1{margin-top:16px;font:400 clamp(30px,9vw,38px)/1.06 "Archivo Black","Archivo",sans-serif;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
h1 em{font-style:normal;color:var(--sand)}
.sb{margin-top:10px;font-size:15px;line-height:1.45;color:var(--mute)}

.b{margin-top:18px;display:flex;flex-direction:column}
.ca{display:flex;align-items:center;justify-content:center;min-height:54px;padding:8px 20px;border-radius:99px;background:var(--sand);color:var(--navy);font-weight:700;font-size:16px;line-height:1.2;text-align:center;transition:transform .4s var(--ease),background .3s}
.ca:active{transform:scale(.98)}
.lk{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:8px 0;border-bottom:1px solid var(--line)}
.ca+.lk{margin-top:6px}
.lk span{display:flex;flex-direction:column;min-width:0}
.lk b{font-weight:700;font-size:16px;line-height:1.25}
.lk small{font-size:13px;line-height:1.35;color:var(--mute)}
.lk svg{width:20px;height:20px;flex:none;color:var(--sand);transition:transform .4s var(--ease)}
.cr{margin-top:14px;font-size:12px;color:var(--mute)}
@media (hover:hover){
  .ca:hover{background:var(--paper);transform:translateY(-2px)}
  .lk:hover svg{transform:translate(3px,-3px)}
}
.a,.b{animation:ln 1s var(--ease) both}.b{animation-delay:.12s}
@keyframes ln{from{opacity:0;transform:translateY(12px)}}

/* Computador: dois painéis de vidro, com a foto nítida entre eles. */
@media (min-width:900px){
  :root{--pad:clamp(32px,4vw,64px);--meio:clamp(240px,28vw,440px)}
  .ph{height:100%;object-position:50% 40%}
  .sh{display:grid;grid-template-columns:1fr var(--meio) 1fr;align-items:center;margin:0;min-height:100dvh;padding:40px 0}
  .gl{inset:0 auto 0 0;position:fixed;width:calc((100% - var(--meio))/2 + 40px);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .gl.r{display:block;inset:0 0 0 auto;-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent)}
  .a{grid-column:1;padding:0 16px 0 var(--pad)}
  .b{grid-column:3;margin:0;padding:0 var(--pad) 0 16px}
  h1{margin-top:22px;font-size:clamp(32px,3.5vw,58px)}
  .sb{margin-top:14px;font-size:17px}
}

@media (prefers-reduced-transparency:reduce){.gl{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){:root{--mute:rgba(243,239,230,.94);--line:rgba(243,239,230,.5);--glass:var(--bk)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}