:root{--bg:#0b0c0e;--ink:#eceef1;--muted:#8f959c;--line:#2a2d32;--silver:linear-gradient(180deg,#fff,#d4d7db 55%,#f1f2f4);font-family:Inter,"Helvetica Neue",Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:auto}
html,body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}
.muted{color:var(--muted);font-size:14px;margin:0}
.kicker{margin:0 0 8px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}

.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px clamp(14px,4vw,40px);background:#0b0c0ee6;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topo__marca img{width:58px;display:block}
.topo__secoes{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.topo__secoes::-webkit-scrollbar{display:none}
.topo__secoes a{flex:none;padding:7px 13px;border-radius:999px;border:1px solid var(--line);font-size:13px;text-decoration:none;color:var(--muted)}
.topo__secoes a.on{background:#e8eaed;color:#0b0c0e;border-color:#e8eaed}
.topo__contato{flex:none;display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;background:var(--silver);color:#0b0c0e;font-size:13px;font-weight:600;text-decoration:none}

.abertura{min-height:62svh;display:grid;place-content:center;justify-items:center;text-align:center;padding:40px 20px}
.abertura h1{margin:0 0 12px;font-size:clamp(40px,9vw,92px);font-weight:600;letter-spacing:-.05em;line-height:.9;text-transform:uppercase}
.abertura__seta{margin-top:28px;font-size:22px;color:var(--muted);animation:desce 1.6s ease-in-out infinite}
@keyframes desce{50%{transform:translateY(8px)}}
.carregando{text-align:center;color:var(--muted);padding:60px 20px}

.arara__scroll{position:relative}
.arara__sticky{position:sticky;top:58px;height:calc(100svh - 58px);display:flex;flex-direction:column;justify-content:center;gap:10px;width:min(100%,920px);margin:0 auto;padding:10px clamp(12px,3vw,24px) 14px}
.arara__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.arara__head h2{margin:0;font-size:clamp(26px,4.4vw,44px);font-weight:600;letter-spacing:-.04em;text-transform:uppercase;line-height:.95}
.arara__palco{position:relative;flex:1;min-height:280px;max-height:560px;border-radius:16px;overflow:hidden;background:#0b0c0e;cursor:grab;touch-action:pan-y;outline:none}
.arara__palco:focus-visible{box-shadow:0 0 0 2px #9aa0a7}
.arara__palco canvas{display:block;width:100%;height:100%}
.seta{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:999px;border:1px solid #44484e;background:#0b0c0ecc;color:var(--ink);display:grid;place-items:center;font-size:18px;cursor:pointer}
.seta--esq{left:10px}.seta--dir{right:10px}
.perto{position:absolute;right:12px;bottom:12px;z-index:2;height:36px;padding:0 14px;border-radius:999px;border:1px solid #44484e;background:#0b0c0ecc;color:var(--ink);font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer}
.pontos{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;gap:5px}
.pontos i{width:16px;height:3px;border-radius:2px;background:#3a3d42;transition:background .3s,width .3s}
.pontos i.on{background:#e8eaed;width:28px}

.arara__info{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:end;min-height:112px}
.nome{margin:0;font-size:20px;font-weight:600}
.preco{margin:4px 0 0;font-size:24px;font-weight:600}
.preco.consulta{font-size:16px;font-weight:500;color:var(--muted)}
.tamanhos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tamanhos button{min-width:40px;height:34px;padding:0 10px;border-radius:8px;border:1px solid #44484e;background:transparent;color:var(--ink);font-size:13px;cursor:pointer}
.tamanhos button.sel{background:#e8eaed;color:#0b0c0e;border-color:#e8eaed}
.tamanhos button.off{color:#5c6066;text-decoration:line-through;border-style:dashed}
.quero{height:46px;padding:0 20px;border-radius:999px;background:var(--silver);color:#0b0c0e;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.nota{grid-column:1/-1;margin:0;min-height:18px;font-size:13px;color:var(--muted)}

.vazio{max-width:520px;margin:0 auto;padding:80px 20px;text-align:center;color:var(--muted)}
.rodape{display:grid;justify-items:center;gap:8px;padding:60px 20px 80px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center}
.rodape img{width:80px}
.rodape p{margin:0}

@media(max-width:600px){
  .topo__contato span{display:none}
  .topo__contato{width:38px;padding:0;justify-content:center}
  .arara__info{grid-template-columns:1fr}
  .quero{justify-content:center}
  .seta{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){.abertura__seta{animation:none}}