:root {
  --page-bg: #0b0b0b;
  --btn-radius: 16px;
  --btn-scale: 1.02;
  --btn-press: 0.98;
  --shadow: 0 8px 24px rgba(0,0,0,.25);

  --frame-max-w: 430px;
  --frame-aspect: 9/19.5;

  --screen-top: 46%;
  --screen-left: 8%;
  --screen-w: 84%;
  --screen-h: 55%; /* Aumentado de 38% para 55% para caber os 6 botões */
 
  --gap: 16px;
  --pad: 0px;
}

@media (min-width: 768px) {
  :root {
    --frame-max-w: 980px;
    --frame-aspect: 16/9;
    --screen-top: 24%;
    --screen-left: 64%;
    --screen-w: 28%;
    --screen-h: 60%; /* Ajustado para a versão desktop */
    --gap: 18px;
    --pad: 0px;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--page-bg);
  color: #fff;
  font: 400 16px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  display: grid;
  place-items: center;
}

.page { width: 100%; padding: 20px; }
 .page { width: 100%; padding: 0; }

.mockup {
  margin-inline: auto;
  width: 100%;
}

.frame {
  position: relative;
  width: 100%;
  height: 100dvh;
  background-image: image-set(
    url("assets/site bio karapitanga.jpg") 1x
  );
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(var(--shadow));
}

@media (min-width: 768px) {
  .frame {
    background-image: image-set(
      url("assets/site bio karapitanga pc.tablet.jpg") 1x
    );
  }
}

.screen {
  position: absolute;
  top: var(--screen-top);
  left: var(--screen-left);
  width: var(--screen-w);
  height: var(--screen-h);
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: var(--gap);
}

.links { display: grid; gap: var(--gap); align-content: start; }

.btn {
  position: relative;
  display: block;
  padding: var(--pad);
  background: transparent;
  border: none;
  border-radius: var(--btn-radius);
  outline: none;
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--scale, 1));
  transition: transform .16s ease, filter .16s ease;
  will-change: transform, filter;
  overflow: hidden;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
}

.btn img { width: 100%; height: auto; display: block; pointer-events: none; }

.btn.pressed { --scale: var(--btn-press); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { --scale: var(--btn-scale); }
}

.btn:active { --scale: var(--btn-press); }
.btn:focus-visible { outline: none; box-shadow: none; }

.ripple-ink {
  position: absolute;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,.15) 40%, rgba(255,255,255,0) 70%);
  animation: ripple .6s ease-out forwards;
}

@keyframes ripple {
  from { width: 0; height: 0; opacity: .8; }
  to { width: 480px; height: 480px; opacity: 0; }
}

@media (min-width: 768px) {
  @keyframes ripple { to { width: 800px; height: 800px; opacity: 0; } }
}

@media (max-width: 380px) {
  :root { --gap: 10px; --pad: 10px; --btn-radius: 14px; }
}