:root {
  --ivory: #f6f1e8;
  --paper: #fffdf9;
  --ink: #171615;
  --brown: #8e4e21;
  --brown-dark: #4d2e1b;
  --line: #decbb8;
  --muted: #806f61;
  --whatsapp: #246b4d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Cairo", system-ui, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image: radial-gradient(rgba(142, 78, 33, .18) .7px, transparent .7px);
  background-size: 16px 16px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.page-shell {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 48px 18px;
}
.wood-mark {
  position: absolute;
  width: 180px;
  height: 22px;
  border-radius: 5px;
  background: var(--brown);
  opacity: .85;
  transform: rotate(-13deg);
  box-shadow: 0 12px 24px rgba(77, 46, 27, .12);
}
.wood-mark::after {
  content: "";
  position: absolute;
  inset: 6px 12px;
  border-top: 1px solid rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(0,0,0,.16);
}
.wood-mark--top { top: 9%; left: -28px; }
.wood-mark--bottom { right: -24px; bottom: 8%; transform: rotate(17deg); }
.link-card {
  position: relative;
  z-index: 1;
  width: min(100%, 600px);
  padding: clamp(22px, 5vw, 48px);
  border: 1px solid rgba(142, 78, 33, .18);
  border-radius: 28px;
  background: rgba(255, 253, 249, .92);
  box-shadow: 0 28px 80px rgba(77, 46, 27, .16), 0 4px 12px rgba(77, 46, 27, .05);
  backdrop-filter: blur(10px);
}
.brand-header { text-align: center; }
.logo-frame {
  width: 120px;
  height: 120px;
  margin: 0 auto 18px;
  overflow: hidden;
  border: 5px solid var(--paper);
  border-radius: 30px;
  background: var(--paper);
  box-shadow: 0 10px 24px rgba(77, 46, 27, .18);
}
.brand-logo { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.eyebrow {
  margin: 0 0 4px;
  color: var(--brown);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
}
h1 { margin: 0; font-size: clamp(1.55rem, 5vw, 2.3rem); line-height: 1.35; letter-spacing: -.03em; }
.intro { margin: 8px auto 0; max-width: 390px; color: var(--muted); font-size: .95rem; line-height: 1.9; }
.qr-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0 22px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f5eadf;
}
.qr-copy { padding-right: 6px; }
.qr-kicker { color: var(--brown); font-size: .78rem; font-weight: 800; }
.qr-copy h2 { margin: 2px 0 4px; font-size: 1.15rem; }
.qr-copy p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.7; }
.qr-wrap { flex: 0 0 108px; padding: 7px; border-radius: 13px; background: white; box-shadow: 0 4px 12px rgba(77,46,27,.12); }
.qr-image { display: block; width: 94px; height: 94px; border-radius: 7px; }
.links-grid { display: grid; gap: 11px; }
.link-button {
  display: flex;
  align-items: center;
  min-height: 68px;
  gap: 13px;
  padding: 10px 13px;
  border: 1px solid #e3d7cb;
  border-radius: 16px;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.link-button:hover, .link-button:focus-visible { transform: translateY(-2px); border-color: var(--brown); box-shadow: 0 8px 18px rgba(77,46,27,.11); outline: none; }
.link-button--featured { color: white; border-color: var(--ink); background: var(--ink); }
.link-button--featured:hover, .link-button--featured:focus-visible { background: #2a2826; border-color: #2a2826; }
.link-button--whatsapp .link-icon { color: var(--whatsapp); border-color: rgba(36,107,77,.25); background: rgba(36,107,77,.08); }
.link-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(142,78,33,.22); border-radius: 12px; color: var(--brown); font-family: Georgia, serif; font-size: 1.35rem; font-weight: 800; }
.link-icon--facebook { font-family: Arial, sans-serif; font-size: 1.4rem; }
.link-text { display: grid; flex: 1; gap: 1px; text-align: right; }
.link-text strong { font-size: .92rem; }
.link-text small { color: var(--muted); font-size: .7rem; }
.link-button--featured .link-text small { color: #d9d0c7; }
.arrow { color: var(--brown); font-size: 1.1rem; transition: transform .2s ease; }
.link-button--featured .arrow { color: #d9a875; }
.link-button:hover .arrow, .link-button:focus-visible .arrow { transform: translateX(-3px); }
.card-footer { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; color: var(--muted); font-size: .68rem; }
.footer-line { width: 30px; height: 1px; background: var(--brown); opacity: .65; }
@media (max-width: 460px) {
  .page-shell { padding: 22px 12px; }
  .link-card { padding: 22px 16px; border-radius: 22px; }
  .logo-frame { width: 100px; height: 100px; border-radius: 25px; }
  .qr-panel { gap: 10px; }
  .qr-wrap { flex-basis: 94px; padding: 6px; }
  .qr-image { width: 82px; height: 82px; }
}