/* ============================================================================
   THOMAS ABELINI — CORE
   Tokens, reset, tipografia, layout e componentes.
   Para reajustar cor, tipo ou espaco: editar apenas o bloco :root abaixo.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* ==========================================================================
     PALETA DA MARCA
       #00145D   #284780   #5079A2   #78ABC4   #A0DDE6
     As cinco cores entram como espinha do sistema. Os tons marcados "derivado"
     existem por uma razao unica: contraste. Um sistema precisa de um terreno de
     leitura claro e de degraus que a rampa de cinco nao cobre. Todos os
     derivados saem da mesma familia de matiz.
     ========================================================================== */

  /* --- Papel (terreno claro, leitura) — tintas de #A0DDE6 --- */
  --paper:        #EDF4F7;   /* derivado */
  --paper-raised: #F8FBFC;   /* derivado */
  --paper-sunk:   #DCE9EF;   /* derivado */

  /* --- Campo (terreno escuro, full-bleed) --- */
  --field:        #00145D;   /* marca */
  --field-lift:   #001C72;   /* derivado: superficie elevada dentro do escuro */

  /* --- Tinta --- */
  --ink:       #00145D;      /* marca */
  --ink-soft:  #284780;      /* marca */
  /* Derivado. #5079A2 puro da 3.7:1 sobre --paper-sunk e reprova em texto
     pequeno. O texto discreto se diferencia por tamanho, peso e versalete,
     nao por clareza. */
  --ink-faint: #3C608F;

  /* --- Tinta sobre campo escuro --- */
  --on-field:      #EDF4F7;
  --on-field-soft: #78ABC4;  /* marca */

  /* --- Acao e acento --- */
  --sage:       #2F5C99;     /* derivado de #5079A2, escurecido para AA */
  --sage-hover: #284780;     /* marca — o botao solido CLAREIA no hover */
  --sage-lit:   #A0DDE6;     /* marca */

  /* --- Fios --- */
  --rule:      #C2DBE7;      /* derivado: fio decorativo, deliberadamente sutil */
  --rule-firm: #5079A2;      /* marca — borda de campo de formulario precisa de 3:1 */
  /* Numeral grande em repouso: claro o bastante para ler como "ainda nao",
     escuro o bastante para passar 3:1 (texto grande). O fio decorativo nao serve. */
  --numeral-idle: #5079A2;   /* marca */
  --rule-lit:  rgba(160, 221, 230, .26);   /* marca a 26% */

  /* --- Estado — o erro nao pode ser azul: precisa ler como erro --- */
  --error:    #9C3527;
  --error-on: #F2AFA3;
  --focus:    #00145D;       /* marca */

  /* --- Tipografia --- */
  --serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Archivo", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  /* O display e calibrado pela LARGURA DA COLUNA de texto, nao pela tela:
     a frase do hero precisa cair em 4 linhas em desktop e 5 em mobile. */
  --t-display: clamp(2.6rem, 1.55rem + 3.5vw, 4.25rem);
  --t-h2:      clamp(1.95rem, 1.35rem + 2.5vw, 3.35rem);
  --t-h3:      clamp(1.2rem, 1.08rem + .55vw, 1.55rem);
  --t-h4:      clamp(1.02rem, .98rem + .2vw, 1.15rem);
  --t-lead:    clamp(1.08rem, 1.02rem + .35vw, 1.3rem);
  --t-body:    clamp(1rem, .975rem + .13vw, 1.0625rem);
  --t-small:   .875rem;
  --t-micro:   .78rem;

  /* --- Espaco (escala de 4) --- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  /* Ritmo vertical das faixas, fluido */
  --band: clamp(4rem, 2.2rem + 7.5vw, 8.5rem);

  /* --- Layout --- */
  --shell: 1180px;
  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --measure: 68ch;

  /* --- Forma --- */
  --r-control: 4px;
  --r-card: 6px;

  /* --- Movimento --- */
  --fast: 160ms;
  --base: 260ms;
  --slow: 520ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --header-h: 66px;
}

@media (min-width: 900px) { :root { --header-h: 82px; } }

/* ------------------------------------------------------------------ 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s5));
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

/* Superficies do navegador — parte do design, nao default do browser */
::selection { background: var(--sage-lit); color: var(--field); }
:root { accent-color: var(--sage); caret-color: var(--sage); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-sunk); }
::-webkit-scrollbar-thumb { background: var(--rule-firm); border: 3px solid var(--paper-sunk); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
* { scrollbar-color: var(--rule-firm) var(--paper-sunk); scrollbar-width: thin; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Toda superficie escura, nao apenas .ground-field: o cabecalho invertido e o
   painel do menu tambem sao campo, e --focus sobre campo da 1.46:1. */
.ground-field :focus-visible,
.site-header.is-inverted :focus-visible,
.menu :focus-visible,
.site-footer :focus-visible { outline-color: var(--sage-lit); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------- 3. TIPOGRAFIA */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -.032em;
}
h2, .h2 { font-size: var(--t-h2); line-height: 1.08; }
h3, .h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.012em; }
h4, .h4 {
  font-family: var(--sans); font-size: var(--t-h4); font-weight: 600;
  line-height: 1.35; letter-spacing: -.005em;
}

/* O italico serifado e o acento tipografico do sistema. */
em, .em { font-style: italic; font-weight: 400; font-family: var(--serif); }
.display em, h2 em, h3 em { letter-spacing: -.018em; }

p { text-wrap: pretty; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-soft); max-width: 36ch; }
.prose { max-width: var(--measure); color: var(--ink-soft); }
.prose > * + * { margin-top: var(--s4); }
.prose strong { color: var(--ink); font-weight: 600; }
.ground-field .prose strong { color: var(--on-field); }

.serif-body {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem);
  line-height: 1.6;
}

/* Rotulo de dado. Usado em pares dado/valor e navegacao — nunca acima de um heading. */
.label {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ground-field .label { color: var(--on-field-soft); }

.muted { color: var(--ink-soft); }
.ground-field .muted { color: var(--on-field-soft); }
.fine { font-size: var(--t-small); line-height: 1.55; color: var(--ink-faint); }
.ground-field .fine { color: var(--on-field-soft); }
.tnum { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 200; background: var(--field); color: var(--on-field);
  padding: var(--s3) var(--s5); font-size: var(--t-small); font-weight: 600;
  border-radius: 0 0 var(--r-control) var(--r-control);
  transition: transform var(--fast) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ----------------------------------------------------------------- 4. LAYOUT */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 820px; }

.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: calc(var(--band) * .6); }

/* Terrenos. A pagina atravessa tres: papel, papel afundado, campo escuro. */
.ground-paper { background: var(--paper); color: var(--ink); }
.ground-sunk  { background: var(--paper-sunk); color: var(--ink); }
.ground-field { background: var(--field); color: var(--on-field); }
.ground-field h1, .ground-field h2, .ground-field h3, .ground-field h4 { color: var(--on-field); }
.ground-field .prose { color: var(--on-field-soft); }
.ground-field .lead { color: var(--on-field-soft); }

.rule { height: 1px; background: var(--rule); border: 0; }
.ground-field .rule { background: var(--rule-lit); }

/* Cabecalho de faixa: heading + apoio. Sem eyebrow. */
.head { display: grid; gap: var(--s5); }
.head__title { max-width: 17ch; }
.head__aside { max-width: 46ch; color: var(--ink-soft); }
.ground-field .head__aside { color: var(--on-field-soft); }

@media (min-width: 900px) {
  .head { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--s7); align-items: end; }
  .head__aside { padding-bottom: .35rem; }
}

.stack-3 > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }
.stack-5 > * + * { margin-top: var(--s5); }
.stack-6 > * + * { margin-top: var(--s6); }
.stack-7 > * + * { margin-top: var(--s7); }

/* ----------------------------------------------------------------- 5. BOTOES */
.btn {
  --btn-bg: var(--field);
  --btn-fg: var(--paper);
  --btn-bd: var(--field);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .8em 1.35em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-control);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.2;
  min-height: 46px;
  text-align: center;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { --btn-bg: var(--sage-hover); --btn-bd: var(--sage-hover); }
.btn:active { transform: translateY(1px); }
.btn .i { flex: none; }
.btn__arrow { transition: transform var(--base) var(--ease); }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-firm); }
.btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--sage-hover); --btn-bd: var(--sage-hover); }

.ground-field .btn { --btn-bg: var(--paper); --btn-fg: var(--field); --btn-bd: var(--paper); }
.ground-field .btn:hover { --btn-bg: var(--sage-lit); --btn-bd: var(--sage-lit); }
.ground-field .btn--ghost { --btn-bg: transparent; --btn-fg: var(--on-field); --btn-bd: var(--rule-lit); }
.ground-field .btn--ghost:hover { --btn-fg: var(--field); --btn-bg: var(--sage-lit); --btn-bd: var(--sage-lit); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Link com seta — a acao secundaria do sistema */
.link {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  color: var(--ink);
  padding-top: 7px; padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-firm);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.link:hover { color: var(--sage-hover); border-color: var(--sage-hover); }
.link .btn__arrow { transition: transform var(--base) var(--ease); }
.link:hover .btn__arrow { transform: translate(2px, -2px); }
.ground-field .link { color: var(--on-field); border-color: var(--rule-lit); }
.ground-field .link:hover { color: var(--sage-lit); border-color: var(--sage-lit); }

/* ----------------------------------------------------------------- 6. ICONES */
.i {
  width: 1.15em; height: 1.15em;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.i--solid { fill: currentColor; stroke: none; }
.i--lg { width: 1.45em; height: 1.45em; }

/* ------------------------------------------------------------ 7. ESPACO DE MIDIA
   Blocos reservados para as fotos oficiais (agencia Carmel).
   Ao receber o arquivo: preencher os atributos src e alt da imagem do slot.
   A nota reservada recua sozinha. */
.media {
  position: relative;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
}
.ground-field .media { background: var(--field-lift); border-color: var(--rule-lit); }
.media > img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; }
/* Enquanto o slot nao tem arquivo, a tag some e a nota reservada aparece.
   Basta preencher src (e alt) para a foto assumir o bloco inteiro. */
.media > img:not([src]), .media > img[src=""] { display: none; }

.media__note {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; align-content: center; gap: var(--s3);
  padding: var(--s5); text-align: center;
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.ground-field .media__note { color: var(--on-field-soft); }
.media__note .i { width: 26px; height: 26px; margin-inline: auto; opacity: .5; }

/* Sem proporcao fixa: a altura vem do arquivo. Para artes com texto ate as
   bordas, que nao podem sofrer recorte nenhum. */
.media--auto { aspect-ratio: auto; }
.media--auto > img { height: auto; }

.media--portrait { aspect-ratio: 4 / 5; }
.media--square   { aspect-ratio: 1 / 1; }
.media--wide     { aspect-ratio: 16 / 9; }
.media--pano     { aspect-ratio: 2 / 1; }

/* Ponto focal do recorte, por slot. As artes com texto (Caravana, lives) usam
   a proporcao nativa do arquivo, entao nao sofrem corte nenhum. */
.media > img[data-slot="hero-retrato"]  { object-position: center 22%; }
.media > img[data-slot="sobre-retrato"] { object-position: center 18%; }
.media > img[data-slot="igreja-foto"]   { object-position: center 25%; }

/* ------------------------------------------------------------- 8. FORMULARIO */
.form { max-width: 34rem; }
.form__grid { display: grid; gap: var(--s5); }

.field { display: grid; gap: var(--s2); }
.field__label {
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  color: var(--ink); letter-spacing: -.005em;
}
.ground-field .field__label { color: var(--on-field); }
.field__req { color: var(--sage); font-weight: 700; }
.ground-field .field__req { color: var(--sage-lit); }

.field__input {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--rule-firm);
  border-radius: var(--r-control);
  font-size: var(--t-body);
  line-height: 1.4;
  transition: border-color var(--fast) var(--ease);
}
.field__input::placeholder { color: var(--ink-faint); }
.field__input:hover { border-color: var(--ink-faint); }
.field__input:focus { border-color: var(--sage); outline-offset: 1px; }
.ground-field .field__input {
  background: var(--field-lift); color: var(--on-field); border-color: var(--rule-lit);
}
.ground-field .field__input::placeholder { color: var(--on-field-soft); }
.ground-field .field__input:focus { border-color: var(--sage-lit); }
textarea.field__input { min-height: 8rem; resize: vertical; }

.field__error {
  display: none;
  align-items: flex-start; gap: .45em;
  font-size: var(--t-small); line-height: 1.4; color: var(--error); font-weight: 500;
}
.field__error .i { width: 1.05em; height: 1.05em; margin-top: .2em; flex: none; }
.field.is-invalid .field__error { display: flex; }
.field.is-invalid .field__input { border-color: var(--error); border-width: 1.5px; }
.ground-field .field__error { color: var(--error-on); }
.ground-field .field.is-invalid .field__input { border-color: var(--error-on); }

.form__consent { font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); max-width: 44ch; }
.ground-field .form__consent { color: var(--on-field-soft); }
.form__consent a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.form__consent a:hover { color: var(--sage-hover); }
.ground-field .form__consent a:hover { color: var(--sage-lit); }

.form__status { display: none; }
.form__status[data-state="error"] {
  display: flex; align-items: flex-start; gap: .6em;
  padding: var(--s4);
  border: 1px solid var(--error);
  border-radius: var(--r-control);
  color: var(--error); font-size: var(--t-small); line-height: 1.5;
}
.ground-field .form__status[data-state="error"] { color: var(--error-on); border-color: var(--error-on); }
.form__status .i { flex: none; margin-top: .15em; }

/* Sucesso substitui o formulario. Sem modal. */
.form__done { display: none; }
.form.is-done .form__grid,
.form.is-done .form__consent,
.form.is-done .form__actions,
.form.is-done .form__status { display: none; }
.form.is-done .form__done {
  display: grid; gap: var(--s3); justify-items: start;
  padding: var(--s6);
  background: var(--paper-raised);
  border: 1px solid var(--sage);
  border-radius: var(--r-card);
}
.ground-field .form.is-done .form__done { background: var(--field-lift); border-color: var(--sage-lit); }
.form__done-mark {
  display: grid; place-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--sage); color: var(--paper);
}
.ground-field .form__done-mark { background: var(--sage-lit); color: var(--field); }