* { box-sizing: border-box; }
html { scroll-padding-block-start: 1.5rem; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
h1, h2, h3, p { margin-block: 0 1rem; }
h1, h2 { font-family: var(--font-title); font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 3vw, 2.5rem); }
h3 { font-size: 1.25rem; line-height: 1.3; }
a { color: var(--color-brand); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.15em; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
img { display: block; max-width: 100%; height: auto; }
.container { width: min(calc(100% - var(--page-gutter) * 2), var(--content-width)); margin-inline: auto; }
.skip-link {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 1.5rem;
  z-index: 2;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; padding-block: 1rem; border-bottom: 1px solid var(--color-border); }
.brand { font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.site-header a, .site-footer a, .back-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.site-header nav a { font-size: 1rem; }
[aria-current="page"] { font-weight: 700; }
.hero { display: grid; gap: 3rem; padding-block: 3rem 4rem; }
.hero-copy { align-self: start; }
.eyebrow { color: var(--color-brand); font-size: 1rem; font-weight: 650; margin-block-end: 2rem; }
.hero h1 { max-width: 13ch; margin-block-end: 1.5rem; }
.lead { max-width: 48ch; color: var(--color-muted); }
.hero .lead { margin-block-end: 2rem; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0.875rem 1.5rem; border-radius: var(--radius-control); background: var(--color-brand); color: var(--color-on-brand); font-size: 1rem; font-weight: 650; text-align: center; text-decoration: none; }
.hero .button { width: 100%; }
.small { color: var(--color-muted); font-size: 0.875rem; }
.hero .small { margin-block: 1rem 0; }
.app-preview { margin: 0; width: min(100%, 25rem); justify-self: center; }
.phone { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: 1.5rem; background: var(--color-soft); }
.phone-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-block-end: 1rem; }
.phone-title { font-family: var(--font-title); font-size: 2rem; margin: 0; }
.phone .small { margin-block: 0 1rem; }
.preview-card { padding: 1.25rem; background: var(--color-surface); border-radius: var(--radius-card); margin-block: 1rem; }
.preview-card h3 { font-size: 1rem; }
.preview-card p { font-size: 0.9375rem; }
.preview-card p:last-child { margin: 0; }
.preview-tabs { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1rem; padding-block: 0.75rem 0; font-size: 0.875rem; }
.preview-tabs strong { text-decoration: underline; text-underline-offset: 0.2em; }
figcaption { margin-block-start: 0.75rem; font-size: 0.875rem; color: var(--color-muted); }
.section { padding-block: 2rem 3rem; }
.section h2 { margin-block-end: 2rem; }
.card-grid, .steps { display: grid; gap: 1.5rem; }
.feature-card { padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius-card); }
.feature-card p, .steps p { color: var(--color-muted); margin: 0; }
.number { display: block; color: var(--color-brand); font-size: 0.875rem; font-weight: 600; margin-block-end: 1.5rem; }
.steps { padding: 0; list-style: none; counter-reset: steps; }
.steps li { counter-increment: steps; }
.steps h3::before { content: counter(steps) ". "; }
.mission { border-top: 1px solid var(--color-border); padding-block: 3rem; }
.mission p { max-width: 64ch; color: var(--color-muted); }
.faq { max-width: 56rem; }
details { border-bottom: 1px solid var(--color-border); padding-block: 0.5rem; }
summary { min-height: 44px; padding-block: 0.75rem; font-weight: 600; cursor: pointer; }
details p { color: var(--color-muted); padding-block: 0.5rem; }
.closing { padding-block: 1rem 4rem; }
.site-footer { padding-block: 2rem; background: var(--color-soft); }
.site-footer .brand { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-block: 1.5rem; }
.site-footer nav a { font-size: 1rem; }
.site-footer p:last-child { margin: 0; }
.institutional { max-width: var(--reading-width); padding-block: 2rem 4rem; }
.back-link { margin-block-end: 2rem; font-size: 1rem; }
.institutional h1 { margin-block-end: 1.5rem; }
.institutional section { margin-block-start: 2.5rem; }
.institutional h2 { font-size: 1.75rem; margin-block-end: 1rem; }
.institutional li { margin-block-end: 0.75rem; }
.notice { background: var(--color-soft); padding: 1.25rem; border-radius: var(--radius-card); }
.notice p:last-child { margin: 0; }
.institutional section a { display: inline-block; padding-block: 0.5rem; min-height: 44px; }
@media (min-width: 768px) {
  .site-header .container { justify-content: space-between; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding-block: 4rem 5rem; }
  .hero .button { width: auto; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card:last-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding-block: 2rem 4rem; }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 5rem; }
  .hero-copy { padding-block-start: 1rem; }
  .hero .lead { margin-block: 2.5rem; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-card:last-child { grid-column: auto; }
  .feature-card { padding: 2rem; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .button, .preview-card, .notice { border: 1px solid CanvasText; }
}

/* Assets originais locais; marca fixa, independente da cor litúrgica. */
.brand { display: inline-flex; align-items: center; gap: 0.65rem; }
.brand-icon { width: 36px; height: 36px; flex: 0 0 36px; }
.feature-icon { width: 64px; height: 64px; margin-block-end: 1.25rem; }
.phone-brand-icon { width: 32px; height: 32px; flex: 0 0 32px; align-self: center; }
@media (forced-colors: active) {
  /* Símbolos decorativos nunca substituem os rótulos textuais. */
  .brand-icon, .feature-icon, .phone-brand-icon { forced-color-adjust: none; }
}