:root {
  --bg: #FFF5EB;
  --orange: #F26522;
  --orange-light: #FF8A1A;
  --orange-dark: #E84A1C;
  --white: #FFFFFF;
  --text-dark: #242424;
  --shadow: rgba(242, 101, 34, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { 
  background: var(--bg); 
  font-family: Arial, Helvetica, sans-serif; 
  color: var(--text-dark); 
  -webkit-font-smoothing: antialiased; 
  -webkit-tap-highlight-color: transparent; 
}
img { max-width: 100%; display: block; }

.page { 
  width: 100%; 
  max-width: 720px; 
  min-height: 100vh; 
  margin: 0 auto; 
  position: relative; 
  overflow-x: hidden; 
  background: var(--bg); 
}

/* Hero */
.hero { position: relative; height: clamp(280px, 45vw, 360px); width: 100%; overflow: hidden; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Nome sobre a imagem */
.name-block { position: absolute; left: 8%; top: 20%; z-index: 3; }
.name-top {
  color: var(--white); font-size: clamp(34px, 8vw, 62px); font-weight: 900; font-style: italic;
  line-height: 0.9; text-transform: uppercase; text-shadow: 0 3px 6px rgba(0,0,0,0.4); margin-bottom: 8px;
}
.name-pill {
  display: inline-block; padding: 8px 24px; border-radius: 999px; background: var(--orange); color: var(--white);
  font-size: clamp(28px, 7vw, 52px); font-weight: 900; font-style: italic; line-height: 1;
  text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Avatar Sobreposto */
.avatar-wrapper { position: relative; z-index: 5; margin-top: -70px; display: flex; justify-content: center; }
.profile-photo {
  width: clamp(140px, 30vw, 190px); aspect-ratio: 1; border-radius: 50%; border: 7px solid var(--orange);
  object-fit: cover; box-shadow: 0 8px 24px rgba(0,0,0,0.15); background: var(--white);
}

/* Área de Links */
.links-area { padding: 30px 5% 40px; position: relative; z-index: 2; }

/* Featured Wrapper */
.featured-wrapper { position: relative; margin-bottom: 30px; padding-top: 20px; }
.featured-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--white);
  color: var(--orange-dark); padding: 8px 22px; border-radius: 999px; font-size: 13px; font-weight: 900;
  text-transform: uppercase; box-shadow: 0 3px 12px rgba(0,0,0,0.12); z-index: 3; letter-spacing: 0.5px;
}

/* Cards Base */
.link-card {
  width: 100%; display: flex; align-items: center; gap: 18px; padding: 20px 24px; margin-bottom: 22px;
  border-radius: 72px; background: linear-gradient(105deg, var(--orange-light) 0%, var(--orange) 50%, var(--orange-dark) 100%);
  color: var(--white); border: none; cursor: pointer; box-shadow: 0 8px 20px var(--shadow), 0 0 25px rgba(255,154,72,0.20);
  transition: transform 180ms ease, filter 180ms ease; font-family: inherit;
}
.link-card:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.2); }
.link-card:not(:disabled):hover { transform: translateY(-3px); filter: brightness(1.05); }
.link-card:not(:disabled):active { transform: scale(0.985); }

.featured-card { min-height: 120px; padding: 24px 26px; }

/* Card Icon (Ajustado para Imagens) */
.card-icon {
  flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; background: var(--white);
  display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,0.1); overflow: hidden;
}
.card-icon img {
  width: 65%; height: 65%; object-fit: contain;
}

/* Card Content */
.card-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.card-price { font-size: clamp(18px, 4.5vw, 24px); font-weight: 900; line-height: 1.1; text-align: center; text-transform: uppercase; }
.card-coupon { font-size: clamp(13px, 3.5vw, 16px); font-weight: 700; opacity: 0.95; text-align: center; letter-spacing: 0.5px; }
.card-label { flex: 1; font-size: clamp(17px, 4.2vw, 22px); font-weight: 800; text-align: center; line-height: 1.2; }

/* Footer */
.footer { text-align: center; padding: 20px 20px 40px; color: #999; font-size: 13px; position: relative; z-index: 5; }

/* Decorações */
.decorations { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.decoration { position: absolute; opacity: 0.12; color: #E9B87E; }
.crown { width: 120px; height: 120px; }
.heart { width: 100px; height: 100px; }

@media (max-width: 380px) {
  .links-area { padding-inline: 4%; }
  .link-card { min-height: 100px; padding-inline: 18px; gap: 14px; }
  .card-icon { flex-basis: 50px; width: 50px; height: 50px; }
  .card-label { font-size: 16px; }
  .profile-photo { border-width: 5px; }
}