@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700;800&display=swap");

:root {
  color-scheme: light;
  --wine: #570b19;
  --wine-deep: #3b0b16;
  --red: #db1028;
  --red-hover: #b00920;
  --paper: #fffdf9;
  --cream: #fff8f1;
  --gold: #b58a49;
  --ink: #351c22;
  --muted: #79656a;
  --line: #eaded4;
}
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 16% 0%, #8c2033 0%, transparent 43%), radial-gradient(ellipse at 92% 90%, #370b19 0%, transparent 52%), #420c19;
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}
img, canvas { display: block; max-width: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .2em; }
p, h1, h2 { margin: 0; overflow-wrap: break-word; }
[hidden] { display: none !important; }
:focus-visible { outline: .1875rem solid var(--red); outline-offset: .25rem; }
.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.faith-card {
  position: relative;
  width: min(100%, 72rem);
  display: grid;
  grid-template-columns: minmax(0, .38fr) minmax(0, .62fr);
  background: var(--paper);
  border: .0625rem solid #e8d3c4;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem #1b050c38;
}
.identity-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  min-width: 0;
  padding: 2rem;
  border-right: .0625rem solid var(--line);
  background: linear-gradient(145deg, var(--paper), var(--cream));
}
.brand-header { display: flex; align-items: center; gap: 1.25rem; }
.brand-header > div { min-width: 0; }
.brand-logo { width: 6.25rem; height: 6.25rem; object-fit: contain; mix-blend-mode: multiply; flex: none; }
.brand-name { font-size: .875rem; font-weight: 800; letter-spacing: .08em; line-height: 1.5; color: var(--gold); }
.brand-name span { display: block; color: var(--red); letter-spacing: .2em; }
.hero-copy h1, .message h2 { font-family: "Playfair Display", Georgia, serif; color: var(--wine); font-weight: 700; }
.hero-copy h1 { margin-bottom: .875rem; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -.045em; }
.hero-copy h1 em { font-style: normal; color: var(--red); }
.intro { font-size: 1rem; line-height: 1.5; color: var(--muted); }
.message-panel { min-width: 0; padding: 1.75rem 2rem 1rem; }
.eyebrow { text-align: center; font-size: .6875rem; line-height: 1.4; font-weight: 800; letter-spacing: .15em; color: var(--gold); }
.message-slot { margin: 1rem 0 1.5rem; text-align: center; }
.message h2 { margin-bottom: .875rem; font-size: clamp(1.5rem, 2.25vw, 2rem); line-height: 1.2; letter-spacing: -.035em; }
.message p { font-size: 1rem; line-height: 1.6; color: var(--muted); }
.loading { color: var(--muted); }
#erro { margin-bottom: .75rem; color: var(--red-hover); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .625rem 1rem; border: .0625rem solid var(--wine); border-radius: .5rem; text-decoration: none; font-size: .875rem; font-weight: 700; }
.button-primary { background: var(--wine); color: white; }
.button-outline { background: white; color: var(--wine); }
.follow-area { border-top: .0625rem solid var(--line); padding-top: 1rem; }
.social-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.social { min-width: 0; display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 2.75rem; padding: .625rem; border-radius: .625rem; color: white; text-decoration: none; font-size: .875rem; font-weight: 700; }
.social-instagram { background: #842b40; }
.social-whatsapp { background: #26764d; }
.social-icon { flex: none; width: 1.25rem; height: 1.25rem; filter: brightness(0) invert(1); }
.social:hover, .review-button:hover { filter: brightness(.92); }
.review-mural { display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem; border-top: .0625rem solid var(--line); margin-top: 1rem; padding: 1rem 0 1.25rem; text-align: center; }
.review-copy p { font-size: .9375rem; color: var(--muted); }
.review-action { display: flex; flex-direction: column; align-items: center; justify-self: center; gap: .5rem; width: min(100%, 22rem); min-width: 0; }
.review-stars { color: #d6a044; letter-spacing: .15rem; font-size: 1.5rem; line-height: 1.2; }
.review-button { display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 2.75rem; border-radius: .625rem; padding: .625rem 1rem; width: 100%; border: .0625rem solid var(--wine); background: var(--wine); color: white; font-size: .875rem; font-weight: 700; text-decoration: none; }
.review-button img { flex: none; width: 1.25rem; height: 1.25rem; }
.review-pending { color: var(--muted); font-size: .75rem; }
.developer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding-top: .75rem; border-top: .0625rem solid var(--line); }
.developer-credit { font-size: .75rem; color: var(--muted); }
.developer-credit strong { color: var(--wine); }
.developer-credit strong span { color: var(--red); }
.developer-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .75rem; border: .0625rem solid var(--wine); border-radius: .5rem; color: var(--wine); font-size: .75rem; font-weight: 700; text-decoration: none; }
.developer-cta:hover { background: var(--cream); }

@media (min-width: 48.001rem) and (max-width: 60rem) {
  .identity-panel, .message-panel { padding: 1.5rem; }
  .brand-header { gap: .75rem; }
  .brand-logo { width: 5rem; height: 5rem; }
}
@media (max-width: 48rem) {
  .page { padding: .75rem; }
  .faith-card { display: block; max-width: 30rem; border-radius: 1rem; }
  .identity-panel { padding: 1rem 1.25rem 1.25rem; gap: .625rem; border-right: 0; border-bottom: .0625rem solid var(--line); background: var(--paper); }
  .brand-header { justify-content: center; gap: 1rem; }
  .brand-logo { width: 4.5rem; height: 4.5rem; }
  .brand-name { font-size: .8125rem; }
  .hero-copy h1 { text-align: center; font-size: clamp(2rem, 9vw, 2.5rem); margin: 0; line-height: 1.05; }
  .intro { display: none; }
  .message-panel { padding: 1rem 1.125rem .75rem; }
  .eyebrow { font-size: .625rem; letter-spacing: .12em; }
  .message-slot { margin: .625rem 0 1.125rem; }
  .message h2 { margin-bottom: .625rem; font-size: 1.5rem; }
  .message p { font-size: 1rem; line-height: 1.5; }
  .follow-area { padding-top: .875rem; }
  .social-buttons { gap: .5rem; }
  .social { font-size: .875rem; gap: .5rem; }
  .review-mural { margin-top: .875rem; padding: .875rem 0 1rem; gap: .375rem; }
  .review-copy p { font-size: .875rem; }
  .review-action { width: 100%; gap: .5rem; }
  .review-stars { font-size: 1.375rem; }
  .review-button { font-size: .875rem; }
  .developer { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: .5rem; text-align: left; }
  .developer-credit { white-space: nowrap; font-size: .625rem; }
  .developer-credit strong { font-size: .6875rem; }
  .developer-cta { min-width: 0; padding: .5rem .375rem; font-size: .625rem; gap: .375rem; }
}
@media (max-width: 22rem) {
  .page { padding: .5rem; }
  .identity-panel, .message-panel { padding-left: .875rem; padding-right: .875rem; }
  .social { font-size: .8125rem; gap: .375rem; }
}