:root {
  --color-ink: #0a1b24;
  --color-navy: #0e3448;
  --color-teal: #17566c;
  --color-mist: #dce8f0;
  --color-cloud: #eef4f7;
  --color-white: #fff;
  --color-slate: #60727c;
  --color-border: #b9cbd5;
  --color-warm: #c88945;
  --color-focus: #a94f12;
  --color-accent-on-dark: #8fc7ea;
  --color-success: #286746;
  --color-error: #a12d2a;
  --font-sans: Figtree, "Avenir Next", "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-editorial: Newsreader, Georgia, "Times New Roman", serif;

  /* Escala tipografica. Tres niveis de titulo, salto de 1,6x entre niveis
     consecutivos em qualquer largura. Nenhum tamanho solto fora daqui. */
  --t-display: clamp(2.35rem, 1.2rem + 4.6vw, 4.5rem);
  /* O h1 da abertura vive numa coluna estreita ao lado da foto: e calibrado
     pela largura dessa coluna, nao pela largura da tela. */
  --t-hero:    clamp(2.2rem, 1.1rem + 3.4vw, 3.6rem);
  --t-h2:      clamp(1.65rem, 1.1rem + 2.2vw, 2.8rem);
  --t-h3:      clamp(1.1rem, .8rem + 1.05vw, 1.75rem);
  --t-quote:   clamp(1.4rem, 1rem + 1.55vw, 2.3rem);
  --t-numeral: clamp(3rem, 1.5rem + 6vw, 6.5rem);
  --t-code:    clamp(5rem, 15vw, 11rem);
  --t-lead:    clamp(1.05rem, 1rem + .25vw, 1.19rem);
  --t-body:    1rem;
  --t-small:   .875rem;
  --t-micro:   .75rem;

  /* Escala de espaco, base de 4px. */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;
  --shadow-light: 0 12px 32px rgba(10, 27, 36, .08);
  --shadow-raised: 0 18px 48px rgba(10, 27, 36, .14);
  --container: 80rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-space: clamp(4rem, 8vw, 8rem);
  --section-space-tight: clamp(3rem, 6vw, 5.5rem);
  --header-height: 4.75rem;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background: var(--color-cloud);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: .2em;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--color-warm);
  color: var(--color-ink);
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.035em;
}

h1 {
  font-size: var(--t-display);
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-size: var(--t-h3);
}

p {
  max-width: 68ch;
}

.container {
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  padding: var(--s3) var(--s4);
  border-radius: .5rem;
  background: var(--color-white);
  color: var(--color-ink);
  transform: translateY(-180%);
  transition: transform .16s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

.kicker {
  margin-bottom: var(--s4);
  color: var(--color-teal);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1.3;
  text-transform: uppercase;
}

.section--dark .kicker,
.section--navy .kicker,
.section--closing .kicker,
.campaign-hero .kicker {
  color: #b9d3df;
}

.button,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 3rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.button {
  padding: var(--s3) var(--s4);
}

.button:hover,
.text-link:hover {
  transform: translateY(-1px);
}

.button:active,
.text-link:active {
  transform: translateY(0);
}

.button--primary {
  background: var(--color-navy);
  color: var(--color-white);
}

.button--primary:hover {
  background: var(--color-teal);
  box-shadow: var(--shadow-light);
}

.button--secondary {
  border-color: rgba(14, 52, 72, .45);
  background: rgba(255, 255, 255, .5);
  color: var(--color-navy);
}

.button--secondary:hover {
  border-color: var(--color-navy);
  background: var(--color-white);
}

.button--light {
  background: var(--color-white);
  color: var(--color-ink);
}

.button--light:hover {
  background: var(--color-mist);
  box-shadow: var(--shadow-light);
}

.button--outline-light {
  border-color: rgba(255, 255, 255, .65);
  color: var(--color-white);
}

.button--outline-light:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, .1);
}

.button--warm {
  background: var(--color-warm);
  color: var(--color-ink);
}

.button--warm:hover {
  background: #dda45f;
}

.button--header {
  min-height: 2.55rem;
  padding: var(--s3) var(--s3);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--t-micro);
}

.text-link {
  min-height: 2.75rem;
  padding-inline: 0;
  color: var(--color-navy);
}

.text-link:hover {
  color: var(--color-teal);
  text-decoration: underline;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
  background: var(--color-ink);
  color: var(--color-white);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  gap: var(--s5);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 8.2rem;
  min-height: 2.75rem;
}

.brand img {
  width: 100%;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: clamp(1rem, 2vw, 2rem);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 1.4vw, 1.35rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav ul a {
  position: relative;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: #d6e2e8;
  font-size: var(--t-micro);
  font-weight: 650;
  text-decoration: none;
}

.site-nav ul a::after {
  position: absolute;
  right: 0;
  bottom: .2rem;
  left: 0;
  height: 1px;
  background: var(--color-warm);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .18s ease;
}

.site-nav ul a:hover,
.site-nav ul a[aria-current="page"] {
  color: var(--color-white);
}

.site-nav ul a:hover::after,
.site-nav ul a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.language-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: var(--s1);
  color: #c5d3da;
  font-size: var(--t-micro);
  text-decoration: none;
}

.language-link strong {
  color: var(--color-white);
}

.menu-toggle {
  display: none;
}

.quote-rotator {
  align-self: center;
  min-width: 0;
}

.quote-rotator__viewport {
  display: grid;
  min-height: 18rem;
  align-items: center;
}

.quote-rotator blockquote {
  grid-area: 1 / 1;
  margin-bottom: 0;
}

.quote-rotator blockquote[hidden] {
  display: none;
}

.quote-rotator blockquote.is-entering {
  animation: quote-in .42s cubic-bezier(.22, 1, .36, 1) both;
}

.quote-rotator blockquote p {
  max-width: 17ch;
  margin-bottom: var(--s5);
  color: var(--color-ink);
  font-family: var(--font-editorial);
  font-size: var(--t-quote);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.025em;
}

.quote-rotator cite {
  color: var(--color-teal);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@keyframes quote-in {
  from { opacity: 0; transform: translateY(.65rem); }
  to { opacity: 1; transform: translateY(0); }
}

.section {
  padding-block: var(--section-space);
}

.section--light {
  background: var(--color-white);
}

.section--cloud {
  background: var(--color-cloud);
}

.section--mist {
  background: var(--color-mist);
}

.section--dark,
.section--navy,
.section--closing {
  color: var(--color-white);
}

.section--dark,
.section--closing {
  background: var(--color-ink);
}

.section--navy {
  background: var(--color-navy);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.split--media-right .split__content {
  order: -1;
}

.split__content h2 {
  max-width: 13ch;
  margin-bottom: var(--s5);
}

.split__content p {
  color: #304651;
}

.media-frame {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 1rem;
  background: var(--color-mist);
  box-shadow: var(--shadow-light);
}

.media-frame::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame--portrait {
  aspect-ratio: 4 / 5;
}

.media-frame--landscape {
  aspect-ratio: 3 / 2;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr);
  align-items: end;
  gap: var(--s7);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.section-heading h2,
.section-heading p {
  margin-bottom: 0;
}

.section-heading--wide {
  align-items: center;
}

.campaign-logo {
  width: min(21rem, 80%);
}

.live-section {
  overflow: hidden;
}

.live-section .section-heading p {
  color: #c5d3da;
}

.live-section .section-heading .button {
  margin-top: var(--s4);
}

.live-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  align-items: end;
  gap: var(--s4);
}

.live-grid img {
  width: 100%;
  border-radius: .75rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

.live-grid__main {
  transform: translateY(-1.5rem);
}

.videos-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: var(--s5);
}

.video-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-white);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.video-card:nth-child(2),
.video-card:nth-child(3) {
  grid-column: 2;
}

.video-card:nth-child(2) {
  grid-row: 1;
}

.video-card:nth-child(3) {
  grid-row: 2;
}

.video-card--featured {
  grid-row: 1 / 3;
}

.video-card:hover,
.video-card:focus-within {
  border-color: var(--color-teal);
  box-shadow: var(--shadow-light);
  transform: translateY(-.25rem);
}

.video-card__link {
  display: grid;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.video-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-mist);
}

.video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
}

.video-card:hover .video-card__media img,
.video-card:focus-within .video-card__media img {
  transform: scale(1.025);
}

.video-card__play {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  place-items: center;
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: var(--shadow-light);
}

.video-card__content {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s5);
}

.video-card__content time {
  color: var(--color-slate);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.video-card__content strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--t-h3);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.video-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--color-teal);
  font-size: var(--t-micro);
  font-weight: 700;
}

.campaign-split {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.campaign-split__media {
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
}

.campaign-split__media img {
  width: 100%;
}

.campaign-split__content h2 {
  margin-bottom: var(--s5);
}

.campaign-split__content p {
  color: #d5e1e7;
}

.campaign-split__content small,
.campaign-hero__content small,
.closing small {
  display: block;
  margin-top: var(--s4);
  color: #b8c9d1;
  font-size: var(--t-micro);
}

.family-section .container {
  position: relative;
}

.family-section__media {
  width: min(82%, 62rem);
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: var(--shadow-light);
}

.family-section__media img {
  width: 100%;
}

.family-section__content {
  position: absolute;
  right: 0;
  bottom: clamp(1rem, 4vw, 4rem);
  width: min(37rem, 48%);
  padding: clamp(1.5rem, 3vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-white);
  box-shadow: var(--shadow-raised);
}

.family-section__content h2 {
  margin-bottom: var(--s4);
}

.closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s7);
}

.closing h2 {
  max-width: 18ch;
  margin-bottom: var(--s4);
}

.closing p {
  margin-bottom: 0;
  color: #c8d6dd;
}

.internal-hero {
  overflow: hidden;
  background: var(--color-mist);
}

.internal-hero__grid {
  display: grid;
  min-height: 39rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}

.internal-hero h1 {
  max-width: 12ch;
  margin-bottom: var(--s5);
  font-size: var(--t-display);
}

.internal-hero p:not(.kicker) {
  max-width: 48ch;
  color: #304651;
  font-size: var(--t-lead);
}

.internal-hero__media {
  align-self: stretch;
  margin-bottom: 0;
  overflow: hidden;
}

.internal-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}

.editorial-grid h2 {
  max-width: 14ch;
}

.initiative-list {
  border-top: 1px solid var(--color-border);
}

.initiative-list article {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--color-border);
}

.initiative-list article > span {
  color: var(--color-teal);
  font-size: var(--t-micro);
  font-weight: 700;
}

.initiative-list h3,
.initiative-list p {
  margin-bottom: var(--s1);
}

.status-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s7);
}

.status-panel h2 {
  margin-bottom: var(--s4);
}

.campaign-hero {
  padding-block: var(--section-space-tight);
  background: var(--color-ink);
  color: var(--color-white);
}

.campaign-hero .container {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.campaign-hero__media {
  overflow: hidden;
  border-radius: 1rem;
}

.campaign-hero__content h1 {
  font-size: var(--t-display);
}

.campaign-hero__content p {
  color: #cad8df;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.facts-grid div {
  min-height: 9rem;
  padding: var(--s5);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.facts-grid dt {
  margin-bottom: var(--s4);
  color: var(--color-slate);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.facts-grid dd {
  margin: 0;
  color: var(--color-navy);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.2;
}

.two-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-border);
}

.two-notes article {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--color-white);
}

.faq-wrap {
  display: grid;
  grid-template-columns: minmax(15rem, .55fr) minmax(0, 1.45fr);
  gap: clamp(3rem, 8vw, 8rem);
}

.accordion {
  border-top: 1px solid var(--color-border);
}

.accordion details {
  border-bottom: 1px solid var(--color-border);
}

.accordion summary {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s4);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary .icon {
  transition: transform .18s ease;
}

.accordion details[open] summary .icon {
  transform: rotate(180deg);
}

.accordion details > div {
  padding: 0 var(--s7) var(--s5) 0;
  color: #304651;
}

.editorial {
  max-width: 48rem;
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 8rem);
}

.notice {
  padding: var(--s4) var(--s4);
  border-left: 4px solid var(--color-teal);
  background: rgba(255, 255, 255, .68);
  color: #243943;
  font-size: var(--t-small);
}

.notice--warning {
  border-left-color: var(--color-warm);
}

.contact-form {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-white);
  box-shadow: var(--shadow-light);
}

.contact-form fieldset {
  display: grid;
  gap: var(--s5);
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-form fieldset:disabled {
  opacity: .68;
}

.field {
  display: grid;
  gap: var(--s2);
}

.field label {
  font-size: var(--t-small);
  font-weight: 700;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--s3) var(--s3);
  border: 1px solid #91a8b4;
  border-radius: .5rem;
  background: var(--color-white);
  color: var(--color-ink);
}

.field textarea {
  resize: vertical;
}

.field small,
.form-state {
  color: var(--color-slate);
  font-size: var(--t-micro);
}

.check {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: var(--s3);
  align-items: start;
  font-size: var(--t-small);
}

.check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: var(--s1);
}

.simple-hero {
  padding-block: var(--section-space);
  background: var(--color-mist);
}

.simple-hero--compact {
  padding-block: var(--section-space-tight);
}

.simple-hero h1 {
  max-width: 14ch;
  margin-bottom: var(--s5);
}

.simple-hero p:not(.kicker) {
  font-size: var(--t-lead);
}

.channel-list {
  border-top: 1px solid var(--color-border);
}

.channel-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s6);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--color-border);
}

.channel-list h2 {
  margin-bottom: var(--s1);
  font-size: var(--t-h3);
}

.channel-list p {
  margin-bottom: 0;
  color: var(--color-slate);
}

.legal-copy {
  max-width: 48rem;
}

.legal-copy section + section {
  margin-top: var(--s7);
  padding-top: var(--s7);
  border-top: 1px solid var(--color-border);
}

.legal-copy h2 {
  font-size: var(--t-h2);
}

.not-found {
  display: grid;
  min-height: 70svh;
  place-items: center;
  padding-block: var(--s9);
  background: var(--color-mist);
  text-align: center;
}

.not-found .container {
  display: grid;
  justify-items: center;
}

.not-found__code {
  color: var(--color-teal);
  font-size: var(--t-code);
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .8;
}

.site-footer {
  padding-top: clamp(4rem, 7vw, 6rem);
  background: #06131a;
  color: var(--color-white);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: var(--s8);
  padding-bottom: var(--s8);
}

.site-footer__identity img {
  width: 10.5rem;
  margin-bottom: var(--s5);
}

/* A frase fecha a coluna pela base, na mesma linha do último link ao lado. */
.site-footer__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__identity p {
  margin-top: auto;
  margin-bottom: 0;
  color: #aebfc7;
}

.site-footer h2 {
  margin-bottom: var(--s4);
  color: #8299a4;
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-footer ul {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mesma altura de linha dos canais ao lado, que têm ícone. */
.site-footer nav a {
  display: flex;
  min-height: 1.15em;
  align-items: center;
}

.site-footer a {
  color: #d8e2e7;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.site-footer__channels {
  display: grid;
  align-content: start;
  gap: var(--s3);
}

.site-footer__channels a {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* O gap da coluna soma ao respiro do título; desconta para as duas colunas
   começarem na mesma linha. */
.site-footer__channels h2 {
  margin-bottom: calc(var(--s4) - var(--s3));
}

.site-footer__bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.site-footer__bottom p {
  margin-bottom: 0;
  color: #9db1bb;
  font-size: var(--t-small);
}

.language-link--footer {
  color: #d8e2e7;
}

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(1.125rem);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1160px) {
  .site-nav ul {
    gap: var(--s3);
  }
  .button--header {
    display: none;
  }}

@media (max-width: 960px) {
  :root {
    --header-height: 4rem;
  }

  .menu-toggle {
    z-index: 3;
    display: inline-flex;
    min-width: 3rem;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: .5rem;
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
  }

  .menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .menu-toggle__lines {
    display: grid;
    gap: var(--s2);
  }

  .menu-toggle__lines i {
    display: block;
    width: 1.25rem;
    height: 1px;
    background: currentColor;
    transition: transform .18s ease;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__lines i:first-child {
    transform: translateY(.23rem) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__lines i:last-child {
    transform: translateY(-.23rem) rotate(-45deg);
  }

  .site-nav {
    position: fixed;
    z-index: 2;
    inset: var(--header-height) 0 auto;
    display: none;
    max-height: calc(100svh - var(--header-height));
    overflow-y: auto;
    padding: 1.25rem var(--gutter) 2rem;
    background: var(--color-ink);
    box-shadow: var(--shadow-raised);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    display: grid;
  }

  .site-nav ul a {
    min-height: 3rem;
    font-size: var(--t-body);
  }

  .site-nav__actions {
    justify-content: space-between;
    margin-top: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid rgba(255, 255, 255, .18);
  }

  .button--header {
    display: inline-flex;
  }

  .live-showcase {
    grid-template-columns: repeat(2, 1fr);
  }

  .live-intro,
  .consulting-overview {
    grid-template-columns: 1fr;
  }

  .consulting-overview__media {
    min-height: 34rem;
  }

  .live-grid__main {
    transform: none;
  }

  .campaign-split,
  .campaign-hero .container,
  .form-layout {
    grid-template-columns: 1fr;
  }

  .campaign-split__media,
  .campaign-hero__media {
    order: 1;
  }

  .campaign-split__content,
  .campaign-hero__content {
    order: 0;
  }

  .internal-hero__grid {
    min-height: 33rem;
    gap: var(--s7);
  }

  .facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 719px) {
  :root {
    --gutter: 1.25rem;
    --section-space: clamp(4rem, 16vw, 5rem);
  }

  html {
    scroll-behavior: auto;
  }

  .brand {
    width: 7rem;
  }

  .button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .button-row .button {
    width: 100%;
  }

  .quote-rotator {
    margin-top: var(--s6);
    padding-top: var(--s5);
    border-top: 1px solid rgba(14, 52, 72, .23);
  }

  .quote-rotator__viewport {
    min-height: 10.5rem;
  }

  .quote-rotator blockquote p {
    max-width: 21ch;
  }

  .split,
  .section-heading,
  .editorial-grid,
  .faq-wrap {
    grid-template-columns: 1fr;
  }

  .split {
    gap: var(--s7);
  }

  .split--media-right .split__content {
    order: 0;
  }

  .split--media-right .split__media {
    order: 1;
  }

  .section-heading {
    align-items: start;
    gap: var(--s5);
  }

  .live-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
  }

  .videos-grid {
    grid-template-columns: 1fr;
  }

  .video-card,
  .video-card:nth-child(2),
  .video-card:nth-child(3),
  .video-card--featured {
    grid-column: 1;
    grid-row: auto;
  }
  .family-section__media {
    width: 100%;
  }

  .family-section__content {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 1.5rem);
    margin: -2rem auto 0;
  }

  .closing,
  .status-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .internal-hero__grid {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: var(--s7);
    padding-top: var(--s8);
  }

  .internal-hero__media {
    width: calc(100% + (2 * var(--gutter)));
    height: 28rem;
    margin-left: calc(-1 * var(--gutter));
  }

  .facts-grid {
    grid-template-columns: 1fr 1fr;
  }

  .facts-grid div {
    min-height: 7.5rem;
    padding: var(--s4);
  }
  .two-notes {
    grid-template-columns: 1fr;
  }

  .channel-list article {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }

  .channel-list .text-link {
    justify-self: start;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--s7);
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 380px) {
  .facts-grid {
    grid-template-columns: 1fr;
  }
}

/* Revisão visual de agosto de 2026 */
.site-header {
  transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}

.page--home .site-header.is-scrolled {
  background: rgba(6, 19, 26, .78);
  backdrop-filter: blur(14px) saturate(125%);
}

.page--caravan .site-header {
  background: #106fa0;
}

/* Sobre o azul da Caravana o cinza do menu fica em 4,18:1. Branco puro leva a
   5,3:1 e passa o AA. */
.page--caravan .site-nav ul a {
  color: var(--color-white);
}

.page--caravan .site-header.is-scrolled {
  background: rgba(16, 111, 160, .82);
  backdrop-filter: blur(14px) saturate(125%);
}

.site-nav ul {
  gap: clamp(.7rem, 1.15vw, 1.15rem);
}

.site-nav ul a {
  letter-spacing: .045em;
  text-transform: uppercase;
}

.site-nav ul a .icon {
  width: .82rem;
  height: .82rem;
  margin-left: var(--s1);
}

.language-switch {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.language-switch a,
.language-switch span {
  display: grid;
  width: 2.2rem;
  min-height: 2.2rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: .4rem;
}

.language-switch a:hover,
.language-switch a:focus-visible,
.language-switch span[aria-current="true"] {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
}

.flag-icon {
  width: 1.55rem;
  height: auto;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .24);
}

.quote-rotator {
  width: min(100%, 25rem);
  justify-self: end;
}

.quote-rotator__viewport {
  min-height: 13.5rem;
}
.quote-rotator blockquote p span {
  display: block;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(18rem, .75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.about-copy h2 {
  margin-bottom: var(--s5);
}

.about-gallery {
  display: grid;
  min-height: 42rem;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--s4);
}

.about-gallery figure {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: .8rem;
  box-shadow: var(--shadow-light);
}

.about-gallery__primary {
  grid-row: 1 / 3;
}

.about-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.about-gallery__family img {
  object-position: center 38%;
}

.about-gallery figure:hover img {
  transform: scale(1.025);
}

.live-intro {
  display: grid;
  grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.live-intro .campaign-logo {
  width: min(100%, 21rem);
}

.live-intro p:last-child {
  max-width: 61ch;
  color: #bdccd3;
}

.live-showcase {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.live-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  padding: var(--s3);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.live-card:hover,
.live-card:focus-within {
  transform: translateY(-.45rem);
}

.live-card figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: .75rem;
  background: #132d3a;
}

.live-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.live-card:hover img,
.live-card:focus-within img {
  transform: scale(1.025);
}

.live-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--s4) var(--s2) var(--s2);
  color: var(--color-ink);
}

.live-card__content h3 {
  margin-bottom: var(--s2);
  font-size: var(--t-h3);
}

.live-card__content p {
  margin-bottom: var(--s4);
  color: var(--color-slate);
  font-size: var(--t-small);
}

.live-card__content p strong,
.live-card__content p span {
  display: block;
}

.live-card__content p strong {
  margin-bottom: var(--s1);
  color: var(--color-ink);
}

.live-card__action {
  display: flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--color-ink);
  border-radius: .55rem;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--t-micro);
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.live-card__action:hover,
.live-card__action:focus-visible {
  border-color: var(--color-warm);
  background: var(--color-warm);
  color: var(--color-ink);
}

.live-card__action--scheduled {
  border-color: #d4dfe4;
  background: #edf3f6;
  color: var(--color-ink);
}

.section-heading--compact {
  grid-template-columns: 1fr;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-action {
  display: flex;
  justify-content: center;
  margin-top: var(--s6);
}

.section--contact {
  background: var(--color-ink);
  color: var(--color-white);
}

.contact-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s7);
}

.contact-band p {
  max-width: 54ch;
  color: #bdccd3;
}

.site-credit {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: #9db1bb;
  font-size: var(--t-small);
}

/* Alvo de toque de 24px, mínimo do WCAG 2.2 AA: sem o respiro o link fica em 23. */
.site-credit a {
  display: inline-block;
  padding-block: .15rem;
  color: #e4edf1;
  font-weight: 600;
}

.site-credit .icon {
  width: .9rem;
}

.caravan-image-hero picture,
.caravan-image-hero img {
  display: block;
  width: 100%;
}

.caravan-image-hero img {
  aspect-ratio: 1600 / 667;
  object-fit: cover;
}

.button--caravan {
  border-color: #106fa0;
  background: #106fa0;
  color: #fff;
}

.button--caravan:hover,
.button--caravan:focus-visible {
  border-color: #0b5b84;
  background: #0b5b84;
  color: #fff;
}

.caravan-journey .editorial {
  max-width: 58rem;
  margin-inline: auto;
  text-align: center;
}

.caravan-journey .editorial p {
  max-width: 76ch;
  margin-inline: auto;
}

.caravan-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(3rem, 7vw, 7rem);
}

.caravan-intro h1 {
  font-size: var(--t-display);
}

.caravan-intro small {
  display: block;
  margin-top: var(--s4);
  color: var(--color-slate);
}

.caravan-intro small span {
  display: block;
}

.facts-grid--compact {
  grid-template-columns: repeat(2, 1fr);
}

.facts-grid--compact div {
  min-height: 7.5rem;
}

.itinerary-list {
  position: relative;
  display: grid;
  gap: var(--s4);
}

.itinerary-list::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 3.15rem;
  width: 1px;
  background: var(--color-border);
  content: "";
}

.itinerary-card {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-white);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.itinerary-card:hover {
  border-color: var(--color-teal);
  box-shadow: var(--shadow-light);
  transform: translateX(.3rem);
}

.itinerary-card time {
  z-index: 1;
  display: grid;
  width: 3.3rem;
  height: 3.3rem;
  place-items: center;
  border-radius: 50%;
  background: #106fa0;
  color: #fff;
  font-size: var(--t-micro);
  font-weight: 800;
}

.itinerary-card h3 {
  margin-bottom: var(--s2);
  font-size: var(--t-h3);
}

.itinerary-card p {
  margin-bottom: 0;
}

.investment-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}

.investment-value strong {
  display: block;
  margin-bottom: var(--s2);
  color: #35a9e6;
  font-size: var(--t-numeral);
  letter-spacing: -.06em;
  line-height: .95;
}

.investment-value p,
.investment-section li {
  color: #d5e1e7;
}

.investment-section ul {
  margin-bottom: var(--s5);
}

.package-grid,
.travel-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

.package-card,
.travel-notes article {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-white);
}

.package-card h2,
.travel-notes h2 {
  margin-bottom: var(--s5);
  font-size: var(--t-h2);
}

.package-card li,
.travel-notes li,
.investment-section li {
  margin-bottom: var(--s2);
}

.package-card--included {
  border-top: 4px solid #2d8b5b;
}

.package-card--excluded {
  border-top: 4px solid #a84343;
}

.consulting-image-hero picture,
.consulting-image-hero img {
  display: block;
  width: 100%;
}

.consulting-image-hero img {
  aspect-ratio: 1600 / 667;
  object-fit: cover;
}

.consulting-overview {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(22rem, 1.18fr);
  align-items: stretch;
  gap: clamp(3rem, 7vw, 7rem);
}

.consulting-overview__copy {
  align-self: center;
}

.consulting-overview__copy h1 {
  max-width: 14ch;
  margin-bottom: var(--s4);
  font-size: var(--t-h2);
}

.consulting-overview__copy h2 {
  max-width: 20ch;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: var(--s4);
  font-size: var(--t-h2);
}

.consulting-overview__copy p {
  max-width: 65ch;
}

.consulting-overview__media {
  margin: 0;
  min-height: 42rem;
  overflow: hidden;
  border-radius: .9rem;
  box-shadow: var(--shadow-light);
}

.consulting-overview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

[id] {
  scroll-margin-top: var(--s9);
}

.js .reveal-list > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--item-index, 0) * 70ms);
}

.js .reveal-list.is-visible > * {
  opacity: 1;
  transform: none;
}

@media (max-width: 960px) {
  .page--home .site-header.is-scrolled {
    background: rgba(6, 19, 26, .9);
  }

  .site-nav__actions {
    justify-content: flex-start;
  }

  .about-layout,
  .caravan-intro__grid,
  .investment-grid,
  .live-intro,
  .consulting-overview {
    grid-template-columns: 1fr;
  }

  .live-showcase {
    grid-template-columns: repeat(2, 1fr);
  }

  .consulting-overview__media {
    min-height: 34rem;
  }
}

@media (max-width: 719px) {

  .quote-rotator {
    width: min(100%, 21rem);
    margin-top: var(--s6);
    margin-left: auto;
    padding-top: 0;
    border-top: 0;
  }

  .quote-rotator__viewport {
    min-height: 9.5rem;
  }

  .quote-rotator blockquote p {
    margin-bottom: var(--s3);
  }

  .about-gallery {
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .package-grid,
  .travel-notes {
    grid-template-columns: 1fr 1fr;
  }

  /* `contain: paint` e o que impede a fila de cards de esticar a largura do
     documento. So `overflow-x: auto` nao basta: o Chrome continuava somando a
     largura da grade em coluna no `scrollWidth` da pagina, e o site inteiro
     ganhava barra de rolagem horizontal abaixo de 960px. */
  .live-showcase {
    width: calc(100% + var(--gutter));
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 20rem);
    grid-template-columns: none;
    gap: var(--s4);
    padding: 0 var(--gutter) 1rem 0;
    contain: paint;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .live-card {
    scroll-snap-align: start;
  }

  .live-card__action {
    min-height: 2.75rem;
    padding-inline: var(--s2);
  }

  .contact-band {
    align-items: stretch;
    flex-direction: column;
  }

  .caravan-image-hero img {
    aspect-ratio: 9 / 16;
  }

  .consulting-image-hero img {
    aspect-ratio: 9 / 16;
  }

  .consulting-overview__media {
    min-height: 28rem;
  }

  .facts-grid--compact {
    grid-template-columns: 1fr 1fr;
  }

  .itinerary-list::before {
    left: 2.35rem;
  }

  .itinerary-card {
    grid-template-columns: 4.25rem 1fr;
    gap: var(--s3);
    padding: var(--s4);
  }

  .itinerary-card:hover {
    transform: none;
  }

  .itinerary-card time {
    width: 2.8rem;
    height: 2.8rem;
  }}

@media (max-width: 440px) {
  .package-grid,
  .travel-notes {
    grid-template-columns: 1fr;
  }
}

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

  .js .reveal,
  .js .reveal-list > * {
    opacity: 1;
    transform: none;
  }

  .video-card:hover,
  .video-card:focus-within,
  .live-card:hover,
  .live-card:focus-within,
  .itinerary-card:hover,
  .button:hover,
  .text-link:hover {
    transform: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .button,
  .menu-toggle {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section,
  .simple-hero,
  .internal-hero,
  .campaign-hero {
    padding-block: var(--s6);
    background: #fff !important;
    color: #000 !important;
  }
}

/* ==========================================================================
   VERSAO 3.1 - SECOES REFEITAS
   Sobre, Caravana na home, Igreja, Eu Tenho Um Chamado e Mensagens.
   Todo tamanho e todo espaco vem dos tokens do :root. Nenhum valor cru.
   ========================================================================== */

/* Texto que existe so para leitor de tela. O site usa logo como titulo em
   duas secoes, e o nome precisa continuar sendo lido. */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ SOBRE */
/* Dois retratos em cima, a foto larga da igreja fechando embaixo, no modelo
   do print em atualizacoes/secao-sobre-disposicao-fotos.png. */
.about-gallery {
  min-height: 0;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--s4);
}

/* 15% mais baixos que os 4/5 originais, por pedido de Zamp. */
.about-gallery figure {
  aspect-ratio: 17 / 18;
}

.about-gallery figure.about-gallery__wide {
  grid-column: 1 / 3;
  aspect-ratio: 12 / 5;
}

.milestones {
  display: grid;
  padding: 0;
  margin: var(--s7) 0 0;
  gap: var(--s4);
  list-style: none;
}

.milestone {
  padding-top: var(--s4);
  border-top: 1px solid var(--color-border);
}

.milestone__when {
  margin-bottom: var(--s1);
  color: var(--color-teal);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.milestone__what {
  max-width: 52ch;
  margin-bottom: 0;
  color: var(--color-slate);
  font-size: var(--t-small);
}

/* --------------------------------------------------------------- CARAVANA */
.caravan-band__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.caravan-band__logo {
  width: min(100%, 24rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.caravan-band__content h2 {
  margin-bottom: 0;
}

.caravan-band__dates {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s5);
  gap: var(--s1);
}

.caravan-band__range {
  color: var(--color-white);
  font-size: var(--t-numeral);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .9;
}

.caravan-band__month {
  color: var(--color-accent-on-dark);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.caravan-band__lead {
  max-width: 46ch;
  margin-bottom: var(--s6);
  color: #d5e1e7;
}

/* A grade de fatos padrao e desenhada para terreno claro. Aqui ela vira uma
   linha de tres colunas separada por um fio, sem caixa. */
.caravan-band .facts-grid {
  margin-bottom: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-left: 0;
}

.caravan-band .facts-grid div {
  min-height: 0;
  padding: var(--s4) var(--s4) 0 0;
  border-right: 0;
  border-bottom: 0;
}

.caravan-band .facts-grid dt {
  margin-bottom: var(--s2);
  color: #9db6c2;
}

.caravan-band .facts-grid dd {
  color: var(--color-white);
}

/* Na faixa da home os tres fatos ficam em uma linha so, como na referencia de
   `atualizacoes/secao-caravana-rhema.png`. A regra global de `--compact` e de
   duas colunas porque nasceu na coluna estreita da pagina da Caravana. */
.caravan-band .facts-grid--compact {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 719px) {
  .caravan-band .facts-grid--compact {
    grid-template-columns: 1fr 1fr;
  }
}

.caravan-band__poster {
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

.caravan-band__poster img {
  width: 100%;
}

.caravan-band__poster figcaption {
  padding: var(--s4);
  color: #b8c9d1;
  font-size: var(--t-micro);
  line-height: 1.5;
}

/* ----------------------------------------------------------------- IGREJA */
.church-layout .head__title {
  max-width: 12ch;
}

.church-copy__greeting {
  color: var(--color-teal);
  font-size: var(--t-lead);
  font-weight: 700;
}

.church-copy p {
  max-width: 68ch;
  color: #304651;
}

.church-copy .button {
  margin-top: var(--s5);
}

/* ---------------------------------------------------------------- CHAMADO */
.live-intro {
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
}

.live-intro__brand h2 {
  margin-bottom: var(--s5);
}

.live-intro .campaign-logo {
  width: min(100%, 26rem);
}

.live-intro__lead {
  max-width: 46ch;
  margin-bottom: 0;
  color: #bdccd3;
}

.live-schedule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: var(--s4);
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  gap: var(--s4);
}

.live-schedule dt {
  margin-bottom: var(--s2);
  color: #9db6c2;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.live-schedule dd {
  margin: 0;
  color: var(--color-white);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.1;
}

.live-card__summary {
  margin-bottom: var(--s4);
  color: var(--color-slate);
  font-size: var(--t-small);
}

.live-card__when {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s5);
  gap: var(--s1);
}

.live-card__date {
  color: var(--color-ink);
  font-size: var(--t-small);
  font-weight: 700;
}

.live-card__time {
  color: var(--color-slate);
  font-size: var(--t-micro);
}

.live-card__action--soon {
  border-color: #d4dfe4;
  background: #edf3f6;
  color: var(--color-slate);
}

.live-roster {
  padding-top: var(--s5);
  margin-top: var(--s7);
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.live-roster p:last-child {
  max-width: 70ch;
  margin-bottom: 0;
  color: #bdccd3;
}

/* -------------------------------------------------------------- MENSAGENS */
/* Tres colunas iguais, no modelo do print em
   atualizacoes/secao-videos-youtube.png. O feed dinamico entrega ate seis. */
.videos-section .videos-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

/* A grade da versao-3.0 era 1 destaque + 2 na coluna da direita, e deixava
   `grid-column: 2` e `grid-row` fixos no segundo e no terceiro card. Aqui as tres
   colunas sao iguais, entao o posicionamento herdado precisa ser anulado: sem
   isso o terceiro card caia embaixo do segundo e a terceira coluna ficava vazia. */
.videos-section .video-card,
.videos-section .video-card:nth-child(2),
.videos-section .video-card:nth-child(3),
.videos-section .video-card--featured {
  grid-column: auto;
  grid-row: auto;
}

.videos-section .video-card {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.videos-section .video-card:hover,
.videos-section .video-card:focus-within {
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-.25rem);
}

.videos-section .video-card__media {
  border-radius: .75rem;
}

/* Titulo de video vem com tamanho imprevisivel do feed. Duas linhas fixas deixam
   todos os cards com a mesma altura, e a fileira para de ficar irregular. */
.videos-section .video-card__content strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(2 * 1.35em);
}

.videos-section .video-card__play {
  top: var(--s4);
  right: auto;
  bottom: auto;
  left: var(--s4);
  width: 2.4rem;
  height: 2.4rem;
  background: var(--color-warm);
  color: var(--color-ink);
}

.videos-section .video-card__content {
  padding: var(--s4) 0 0;
  gap: var(--s2);
}

.videos-section .video-card__content strong {
  color: var(--color-white);
}

.video-card__meta {
  color: #9db6c2;
  font-size: var(--t-micro);
}

.videos-section .section-heading p {
  max-width: 56ch;
  margin-bottom: 0;
  color: #bdccd3;
}

.videos-section .section-action {
  justify-content: flex-start;
  margin-top: var(--s7);
}

/* --------------------------------------------------------- RESPONSIVIDADE */
@media (max-width: 1023px) {
  .caravan-band__grid,
  .church-layout {
    grid-template-columns: 1fr;
  }

  .caravan-band__poster {
    order: -1;
  }

  .videos-section .videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .about-gallery {
    grid-template-rows: auto auto;
  }

  .live-schedule {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s3);
  }

  .videos-section .videos-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   VERSAO 3.1 - PAGINA DA CARAVANA
   Disposicao e movimento no espelho de prthomasabelini.creativezamp.com,
   com a paleta e a letra desta versao. A arte de abertura e a que ja estava
   no site aprovado.
   ========================================================================== */

/* Cabeca de secao: titulo grande a esquerda, apoio a direita. */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}

.head__title {
  max-width: 14ch;
  margin-bottom: 0;
}

.head__title em {
  color: var(--color-teal);
  font-style: normal;
}

.section--navy .head__title em {
  color: var(--color-accent-on-dark);
}

.head__aside p {
  max-width: 62ch;
}

.head__aside p:last-of-type {
  margin-bottom: 0;
}

/* ---------------------------------------------------------- ABERTURA */
.caravan-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.caravan-lead h1 {
  margin-bottom: var(--s4);
}

.caravan-lead__dates {
  margin-bottom: var(--s4);
  color: var(--color-accent-on-dark);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.caravan-lead__sub {
  max-width: 44ch;
  margin-bottom: var(--s6);
  color: #d5e1e7;
  font-size: var(--t-lead);
}

.caravan-lead small {
  display: block;
  margin-top: var(--s4);
  color: #b8c9d1;
  font-size: var(--t-micro);
}

.caravan-lead .facts-grid {
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-left: 0;
}

.caravan-lead .facts-grid div {
  min-height: 0;
  padding: var(--s4) var(--s4) 0 0;
  border-right: 0;
  border-bottom: 0;
}

.caravan-lead .facts-grid dt {
  margin-bottom: var(--s2);
  color: #9db6c2;
}

.caravan-lead .facts-grid dd {
  color: var(--color-white);
}

/* ------------------------------------------------------------ ROTEIRO */
/* O fio se desenha na medida em que o roteiro e lido. Sem JavaScript, ou com
   movimento reduzido, o fio ja nasce inteiro e todos os dias marcados. */
.caravan-journey-section {
  padding-top: 0;
}

.journey {
  position: relative;
  margin-top: clamp(2rem, 5vw, 4rem);
  --progress: 1;
}

.journey__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.25rem;
  width: 2px;
  background: var(--color-border);
}

.journey__rail::after {
  position: absolute;
  inset: 0;
  background: var(--color-teal);
  content: "";
  transform: scaleY(var(--progress));
  transform-origin: top;
}

.journey__list {
  display: grid;
  padding: 0;
  margin: 0;
  gap: clamp(2rem, 4vw, 3.5rem);
  list-style: none;
}

/* A primeira coluna e larga o bastante para o numero nao encostar na bolinha
   do trilho, que fica em 1.25rem. */
.day {
  position: relative;
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  align-items: start;
  gap: var(--s5);
}

.day__mark {
  position: absolute;
  top: .55rem;
  left: 1.25rem;
  width: .7rem;
  height: .7rem;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  transform: translateX(-50%);
  transition: border-color var(--t-move, .3s) ease, background var(--t-move, .3s) ease;
}

.day.is-reached .day__mark {
  border-color: var(--color-teal);
  background: var(--color-teal);
}

.day__n {
  display: block;
  color: var(--color-border);
  font-size: var(--t-h3);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  transition: color .3s ease;
}

.day.is-reached .day__n {
  color: var(--color-teal);
}

.day__when {
  margin-bottom: var(--s2);
  color: var(--color-slate);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.day__title {
  margin-bottom: var(--s3);
}

.day__text {
  max-width: 66ch;
  margin-bottom: 0;
  color: #304651;
}

.day__text em {
  color: var(--color-teal);
  font-style: normal;
  font-weight: 650;
}

/* ------------------------------------------------------- INVESTIMENTO */
.investment-band__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.price h2 {
  margin-bottom: var(--s4);
}

.price__value {
  display: flex;
  align-items: baseline;
  margin-bottom: var(--s3);
  color: var(--color-white);
  font-size: var(--t-numeral);
  font-weight: 800;
  gap: var(--s3);
  letter-spacing: -.03em;
  line-height: .9;
}

.price__cur {
  color: var(--color-accent-on-dark);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: .12em;
}

.price__per {
  max-width: 30ch;
  margin-bottom: 0;
  color: #d5e1e7;
}

.terms {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.terms__row {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  padding-block: var(--s4);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  gap: var(--s5);
}

.terms__key {
  margin-bottom: 0;
  color: var(--color-white);
  font-size: var(--t-small);
  font-weight: 700;
}

.terms__val {
  margin-bottom: 0;
  color: #bdccd3;
  font-size: var(--t-small);
}

.fine {
  max-width: 72ch;
  margin-top: var(--s7);
  margin-bottom: 0;
  color: #9db6c2;
  font-size: var(--t-micro);
  line-height: 1.6;
}

/* ------------------------------------------------------- O QUE INCLUI */
.caravan-includes h2 {
  max-width: 16ch;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.caravan-includes h2 em {
  color: var(--color-teal);
  font-style: normal;
}

.duallist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}

.duallist__col h3 {
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--s5);
}

.ticks {
  display: grid;
  padding: 0;
  margin: 0;
  gap: var(--s4);
  list-style: none;
}

.ticks li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: var(--s3);
  color: #304651;
  font-size: var(--t-small);
}

.ticks .icon {
  margin-top: .15rem;
  width: 1.25rem;
  height: 1.25rem;
}

.ticks--in .icon {
  color: var(--color-success);
}

.ticks--out .icon {
  color: var(--color-slate);
}

/* ------------------------------------------------------------ CONTATO */
.caravan-contact .head__aside p {
  color: #d5e1e7;
}

.caravan-contact .head__aside small {
  display: block;
  max-width: 52ch;
  margin-top: var(--s4);
  color: #b8c9d1;
  font-size: var(--t-micro);
}

.caravan-contact .button {
  margin-top: var(--s5);
}

/* ------------------------------------------------------ RESPONSIVIDADE */
@media (max-width: 1023px) {
  .head,
  .caravan-lead__grid,
  .investment-band__grid,
  .duallist {
    grid-template-columns: 1fr;
  }

  .head__title {
    max-width: 20ch;
  }
}

@media (max-width: 719px) {
  .day {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--s4);
  }

  .journey__rail {
    left: 1rem;
  }

  .day__mark {
    left: 1rem;
  }

  .terms__row {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey {
    --progress: 1;
  }

  .day__mark,
  .day__n {
    transition: none;
  }
}

/* ===========================================================================
   AJUSTES DE 2026-09-09
   Abertura sem foto de fundo, painel de fotos da Caravana, seção da Igreja com
   foto, moldura dos cards do Chamado e o dourado da camisa do pastor como
   destaque. Este bloco vem depois de todas as media queries do arquivo, então
   cada regra daqui que precise variar por largura traz a própria consulta.
   ======================================================================== */

/* O dourado sai da camisa da foto de abertura. `--color-gold` é para traço,
   fio e marca gráfica; `--color-gold-ink` é a versão que passa AA como texto
   pequeno sobre terreno claro. */
:root {
  --color-gold: #c8964a;
  --color-gold-ink: #8a5a1e;
}

/* ------------------------------------------------------------- ABERTURA */
/* A altura da abertura e limitada de proposito. A arte de fundo tem 1920x870 e
   entra por `cover`: quanto mais alta a faixa, mais o navegador amplia a arte e
   mais o pastor invade as colunas de texto. Com o teto de 46rem a figura fica
   com largura previsivel em qualquer altura de tela. */
.hero {
  position: relative;
  display: flex;
  min-height: min(calc(100svh - var(--header-height)), 46rem);
  max-height: 46rem;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-cloud);
}

/* A arte de abertura ja vem pronta, com o pastor ao centro e as bordas claras:
   por isso entra sem veu de cor por cima, como Zamp pediu. */
.hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
}

/* A faixa tem a proporção da arte, então `cover` não corta nada. A âncora na
   base vale para o caso em que o texto empurra o hero e sobra altura: o pastor
   fica encostado na faixa de fatos. */
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1;
  /* A coluna do meio e so respiro: e onde o pastor aparece na arte de fundo. */
  grid-template-columns: minmax(0, 1fr) minmax(13rem, .8fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 4vh, 3rem);
}

.hero__content {
  position: relative;
  z-index: 2;
  align-self: center;
}

.hero__content h1 {
  max-width: 11ch;
  margin-bottom: var(--s5);
  font-size: var(--t-hero);
}

.hero__intro {
  max-width: 34ch;
  margin-bottom: var(--s6);
  color: #253b47;
  font-size: var(--t-lead);
}

.hero__intro span {
  display: block;
}

/* Terceira coluna, explicita: sem o recorte do pastor no meio, o rodizio
   cairia na coluna do meio, que e onde a arte tem a figura. */
.quote-rotator {
  position: relative;
  z-index: 2;
  width: min(100%, 24rem);
  grid-column: 3;
  align-self: center;
  justify-self: end;
}

/* Em tres colunas abaixo de 1366px o pastor da arte encosta no texto: a faixa
   nao tem largura para as duas colunas mais a figura. Ai ela empilha. */
@media (max-width: 1365px) {
  .hero {
    min-height: 0;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--s6);
    padding-block: clamp(2.5rem, 6vh, 4rem) 0;
  }

  .hero__content {
    justify-self: stretch;
  }

  .hero__content h1 {
    max-width: 14ch;
  }

  .hero__stage {
    top: auto;
    width: min(26rem, 78vw);
    height: min(26rem, 58vw);
  }

  .quote-rotator {
    width: 100%;
    grid-column: auto;
    justify-self: stretch;
  }

  .hero__figure {
    order: 3;
    margin-bottom: -2.25rem;
  }

  .hero__figure img {
    height: clamp(17rem, 48vw, 24rem);
  }
}

/* ------------------------------------------- PAINEL DE FOTOS DA CARAVANA */
/* Sete peças encaixadas fora do eixo, no modelo de
   `atualizacoes/painel-de-fotos.png`. A unidade de linha é fina de propósito:
   é o que permite alturas diferentes sem um grid rígido. */
.photo-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(2.1rem, 3.4vw, 3.15rem);
  gap: clamp(.5rem, 1vw, .85rem);
  margin: 0;
}

.photo-wall figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: .85rem;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .26);
}

.photo-wall img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.photo-wall figure:hover img {
  transform: scale(1.055);
}

.photo-wall figure:nth-child(1) { grid-area: 1 / 3 / 6 / 7; }
.photo-wall figure:nth-child(2) { grid-area: 2 / 1 / 5 / 3; }
.photo-wall figure:nth-child(3) { grid-area: 6 / 3 / 10 / 5; }
.photo-wall figure:nth-child(4) { grid-area: 6 / 5 / 9 / 7; }
.photo-wall figure:nth-child(5) { grid-area: 5 / 1 / 8 / 3; }

/* Entrada em cascata, com distância e tempo diferentes por peça: irmãos que
   entram idênticos viram fila, não coreografia. */
.photo-wall.reveal-list figure {
  opacity: 0;
  transform: translate3d(0, var(--enter-y, 1.5rem), 0) scale(.97);
  transition:
    opacity .58s cubic-bezier(.22, 1, .36, 1) var(--enter-delay, 0s),
    transform .72s cubic-bezier(.22, 1, .36, 1) var(--enter-delay, 0s);
}

.photo-wall.reveal-list.is-visible figure {
  opacity: 1;
  transform: none;
}

.photo-wall figure:nth-child(1) { --enter-y: 2.4rem; --enter-delay: 0s; }
.photo-wall figure:nth-child(2) { --enter-y: 1.1rem; --enter-delay: .13s; }
.photo-wall figure:nth-child(3) { --enter-y: 2.9rem; --enter-delay: .07s; }
.photo-wall figure:nth-child(4) { --enter-y: 1.6rem; --enter-delay: .21s; }
.photo-wall figure:nth-child(5) { --enter-y: 2.1rem; --enter-delay: .17s; }

.photo-wall__caption {
  margin: var(--s4) 0 0;
  color: #9db6c2;
  font-size: var(--t-micro);
}

@media (max-width: 719px) {
  .photo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .photo-wall figure {
    grid-area: auto !important;
    aspect-ratio: 4 / 3;
  }

  .photo-wall figure:nth-child(1) {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-wall.reveal-list figure {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .photo-wall img,
  .church-media img {
    transition: none;
  }
}

/* ---------------------------------------------------------------- IGREJA */
.church-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.church-copy h2 {
  margin-bottom: var(--s5);
}

.church-media {
  margin: 0;
  overflow: hidden;
  border-radius: 1.15rem;
  box-shadow: var(--shadow-light);
}

.church-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.church-media:hover img {
  transform: scale(1.03);
}

@media (max-width: 959px) {
  .church-layout {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------- O DOURADO NOS POUCOS LUGARES CERTOS */
.milestone__when {
  color: var(--color-gold-ink);
}

.caravan-band__month {
  color: var(--color-gold);
}

.caravan-band__range i {
  padding: 0 .1em;
  color: var(--color-gold);
  font-style: normal;
  font-weight: 400;
}

.video-card__play {
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-ink);
}

/* ===========================================================================
   AJUSTES DE 2026-09-09, SEGUNDA RODADA
   ======================================================================== */

/* --------------------------------------------- ABERTURA, TELAS ESTREITAS */
/* Empilhada, a arte deixa de ser fundo e vira bloco embaixo do texto: sem
   veu de cor, texto por cima da foto nao teria contraste. */
@media (max-width: 1365px) {
  .hero {
    max-height: none;
  }

  .hero__grid {
    order: 1;
  }

  .hero__media {
    position: static;
    order: 2;
    width: calc(100% + (2 * var(--gutter)));
    height: clamp(13rem, 42vw, 20rem);
    margin-inline: calc(-1 * var(--gutter));
  }

  .hero__media img {
    object-position: 50% 30%;
  }
}

/* ------------------------------------------------ PAINEL DA IGREJA */
/* Mesmo desenho do trio do Sobre, de cabeca para baixo: a foto larga da
   igreja em cima e os dois retratos do pastor embaixo. */
.church-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

.church-gallery figure {
  overflow: hidden;
  margin: 0;
  aspect-ratio: 17 / 18;
  border-radius: 1.15rem;
  box-shadow: var(--shadow-light);
}

.church-gallery figure.church-gallery__wide {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
}

.church-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.church-gallery__wide img {
  object-position: 50% 42%;
}

.church-gallery figure:hover img {
  transform: scale(1.03);
}

/* ------------------------------------------------- ABERTURA DO CHAMADO */
/* O texto de apoio subiu para cima do fio dos horarios, e as duas colunas
   terminam na mesma linha: a base do bloco da direita encosta na base da
   logo. */
.live-intro__brand h2 {
  margin-bottom: 0;
}

.live-intro__aside {
  display: grid;
  gap: var(--s5);
}

.live-intro__aside .live-intro__lead {
  max-width: 46ch;
  margin-bottom: 0;
}

.live-intro__aside .live-schedule {
  margin-top: 0;
}

@media (max-width: 959px) {
  .live-intro__aside {
    gap: var(--s4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .church-gallery img {
    transition: none;
  }
}

/* ===========================================================================
   AJUSTES DE 2026-09-09, QUARTA RODADA
   Abertura mais alta e com arte própria de mobile, frase do Chamado em uma
   linha, e a consultoria com formulário no lugar da foto.
   ======================================================================== */

/* ------------------------------------------------------------- ABERTURA */
/* A faixa passa a valer a proporção da própria arte, 1920x800: assim a imagem
   entra inteira, sem ampliação e sem corte. O `min-height: auto` deixa o hero
   crescer se o texto pedir mais altura do que a proporção oferece. */
.hero {
  /* A proporção da própria arte, 1920x800, vira piso de altura, com teto nos 800px
     de altura nativa dela: acima de 1920 de largura a proporção sozinha fazia a
     faixa crescer sem parar e o `cover` ampliava o pastor até ele ocupar a tela.
     É `min-height` e não `aspect-ratio` porque abaixo de 1600px o texto pede mais
     altura do que a proporção dá, e com proporção fixa a faixa de fatos ficava
     cortada. */
  min-height: min(calc(100vw / 2.4), 800px);
  max-height: none;
}

.hero__media,
.hero__media img {
  display: block;
}

/* A citação perdeu a barra de tempo: a frase é sorteada uma vez e fica parada,
   então não há nada para pausar. */
.quote-rotator blockquote p {
  margin-bottom: var(--s4);
}

@media (max-width: 1365px) {
  /* Empilhada, a arte de mobile é retrato e traz o pastor na metade de baixo:
     entra como bloco, enquadrada nele. A proporção da arte de desktop não vale
     aqui: quem manda na altura é o conteúdo empilhado. */
  .hero {
    min-height: 0;
  }

  /* A proporcao fica na imagem, nao no <picture>: com `height: 100%` no filho a
     porcentagem nao resolve e o navegador volta para a proporcao original do
     arquivo, ignorando o `aspect-ratio` do pai. */
  .hero__media {
    height: auto;
  }

  .hero__media img {
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 80%;
  }
}

@media (max-width: 719px) {
  .hero__media img {
    aspect-ratio: 3 / 4;
  }
}

/* ------------------------------------------------- ABERTURA DO CHAMADO */
/* A frase de apoio cabe em uma linha e o bloco da direita fica centrado na
   altura da logo, não mais alinhado pela base. */
.live-intro {
  align-items: center;
}

.live-intro__lead--uma-linha {
  max-width: none;
  text-wrap: nowrap;
}

@media (max-width: 1199px) {
  .live-intro__lead--uma-linha {
    text-wrap: balance;
  }
}

/* -------------------------------------------------------- CONSULTORIA */
.consulting-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: stretch;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.consulting-copy h2 {
  margin-bottom: var(--s5);
}

.consulting-copy p:last-of-type {
  margin-bottom: 0;
}

/* Linha de abertura do bloco: serifada, um degrau acima do corpo. */
.consulting-lead {
  margin-bottom: var(--s5);
  color: var(--color-navy);
  font-family: var(--font-editorial);
  font-size: var(--t-lead);
  line-height: 1.4;
}

/* A pergunta puxa o olho para o formulário ao lado. */
.consulting-question {
  margin-top: var(--s6);
  margin-bottom: var(--s2);
  padding-top: var(--s5);
  border-top: 2px solid var(--color-gold);
  color: var(--color-navy);
  font-family: var(--font-editorial);
  font-size: var(--t-lead);
  line-height: 1.4;
}

/* Herda a cor do corpo: em ardósia sobre névoa o contraste ficava em 4,01:1. */
.consulting-closing {
  color: inherit;
}

.contact-form {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-border);
  border-radius: 1.15rem;
  background: var(--color-white);
  box-shadow: var(--shadow-light);
}

/* Obrigatoriedade escrita no rotulo, nao so no atributo required. */
.form-field__required {
  color: var(--color-slate);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.contact-form__title {
  margin-bottom: var(--s2);
  font-size: var(--t-h3);
}

.contact-form__intro {
  max-width: 46ch;
  margin-bottom: var(--s5);
  color: var(--color-slate);
  font-size: var(--t-small);
}

.form-grid {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.form-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--s2);
}

.form-field--wide {
  grid-column: 1 / -1;
}

.form-field--grow {
  flex: 1;
}

.form-field label {
  color: var(--color-navy);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--color-border);
  border-radius: .55rem;
  background: var(--color-cloud);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--t-small);
  transition: border-color .16s ease, background .16s ease;
}

.form-field textarea {
  min-height: 7rem;
  height: 100%;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #7d909a;
}

.form-field input:hover,
.form-field textarea:hover {
  border-color: var(--color-teal);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--color-navy);
  background: var(--color-white);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.contact-form .button {
  align-self: flex-start;
}

.contact-form__note {
  margin: var(--s4) 0 0;
  color: var(--color-slate);
  font-size: var(--t-micro);
}

.contact-form__note a {
  color: var(--color-teal);
}

@media (max-width: 1023px) {
  .consulting-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 559px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   AJUSTES DE 2026-09-12
   Abertura ocupando a primeira dobra inteira e os tres fatos em cards que
   cavalgam a emenda entre a abertura e o Sobre.
   ======================================================================== */

/* ------------------------------------------------------------- ABERTURA */
/* A faixa passa a valer a altura da tela menos o cabecalho, mais a metade do
   card que cavalga a emenda: assim o topo dos cards cai exatamente no fim da
   primeira dobra e eles so aparecem ao rolar, como Zamp pediu. A proporcao da
   arte (1920x800) continua como piso, para tela baixa nao espremer a
   abertura. O teto de 1400px e a altura da arte esticada: ate ali o `cover` nao
   amplia nada em 1920, entao a figura do pastor nunca cresce sobre as colunas
   de texto. */
:root {
  --marks-overlap: 4.5rem;
}

.hero {
  min-height: clamp(
    min(calc(100vw / 2.4), 800px),
    calc(100svh - var(--header-height) + var(--marks-overlap)),
    1400px
  );
}

/* ---------------------------------------------- CARDS DA EMENDA */
/* A faixa branca de largura total virou tres cards soltos. As margens
   negativas iguais a metade da altura do card fazem a soma dele no fluxo dar
   zero: a emenda entre a abertura e o Sobre cai no meio do card, metade sobre
   a arte e metade sobre o branco da secao seguinte. */
.marks-band {
  position: relative;
  z-index: 5;
  margin-block: calc(-1 * var(--marks-overlap));
}

.marks-band__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 0;
  padding: 0;
  gap: clamp(.75rem, 1.6vw, 1.5rem);
  list-style: none;
}

.mark-card {
  display: flex;
  min-height: calc(var(--marks-overlap) * 2);
  flex-direction: column;
  justify-content: center;
  padding: var(--s4) clamp(1rem, 1.8vw, 1.75rem);
  border-radius: 16px;
  background: var(--color-navy);
  /* Marinho, e nao branco: a metade de baixo do card cai sobre o branco do
     Sobre, e card branco sobre branco sumiria justamente na metade que devia
     mostrar que ele cavalga a emenda. */
  box-shadow: 0 18px 38px -26px rgba(10, 27, 36, .6);
}

.mark-card__label {
  margin-bottom: var(--s1);
  color: var(--color-gold);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* O fio dourado que abria a antiga faixa de fatos, agora um por card. */
.mark-card__label::before {
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-bottom: var(--s3);
  background: var(--color-gold);
  content: "";
}

.mark-card__value {
  margin-bottom: 0;
  color: var(--color-white);
  font-size: var(--t-small);
  font-weight: 600;
}

/* A entrada dos tres nao pode ser a mesma: cada card sobe de uma distancia e
   em um tempo proprio, senao vira fila. */
.js .marks-band__grid > * {
  transform: translateY(1rem);
  transition-duration: .46s;
}

.js .marks-band__grid > :nth-child(2) {
  transform: translateY(1.6rem);
  transition-duration: .56s;
}

.js .marks-band__grid > :nth-child(3) {
  transform: translateY(2.2rem);
  transition-duration: .66s;
}

.js .marks-band__grid.is-visible > * {
  transform: none;
}

/* Empilhada, a abertura tem a altura do proprio conteudo: o piso de tela
   cheia nao vale. O cavalgamento diminui junto. */
@media (max-width: 1365px) {
  .hero {
    min-height: 0;
  }
}

/* O Sobre desconta o meio card que entra no terreno dele, senao o titulo
   sobe para debaixo do card. */
.about-section {
  padding-top: calc(var(--section-space) + var(--marks-overlap));
}

@media (max-width: 899px) {
  :root {
    --marks-overlap: 3rem;
  }
}

@media (max-width: 719px) {
  :root {
    --marks-overlap: 2.25rem;
  }

  .marks-band__grid {
    grid-template-columns: 1fr;
  }

  .mark-card {
    min-height: 0;
  }
}

/* ===========================================================================
   ADAPTACAO PARA CELULAR, 2026-09-12
   O que muda no telefone nao e escala: e quebra de linha, alvo de toque,
   area segura e o que o dedo nao consegue fazer (passar o mouse).
   ======================================================================== */

/* ------------------------------------------ QUEBRA DE LINHA DO DESKTOP */
/* As frases da abertura sao quebradas a mao, para a coluna casar com a arte de
   fundo. Empilhada, cada uma dessas linhas quebra de novo e o texto vira
   serrote: abaixo de 1366px elas voltam a ser uma frase so, que quebra
   sozinha na largura que houver. O espaco entre as frases e um espaco de
   verdade no HTML: entre blocos ele nao aparece, entre linhas ele separa as
   palavras, e o leitor de tela le certo nos dois casos. */
@media (max-width: 1365px) {
  .hero__intro span,
  .quote-rotator blockquote p span {
    display: inline;
  }

  /* A altura reservada existia para a frase quebrada em seis linhas fixas.
     Quebrando sozinha, ela sobra como buraco. */
  .quote-rotator__viewport {
    min-height: 0;
  }
}

/* ------------------------------------------------------- AREA SEGURA */
/* Com `viewport-fit=cover` o conteudo passa por baixo do canto arredondado e
   do notch. O respiro lateral do site passa a ser o maior entre o de sempre e
   o que o aparelho reserva, que so e diferente de zero em paisagem. */
@media (max-width: 719px) {
  :root {
    --gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }

  .site-footer__bottom {
    padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
  }
}

/* -------------------------------------------------- ALVO DE TOQUE */
/* No rodape os links ficavam com 26px de altura. O minimo do WCAG e 24px, mas
   no polegar isso e um alvo ruim: no telefone eles passam a 44px, que e a
   medida de toque confortavel. O respiro sai do `gap` e entra na altura do
   proprio alvo, entao a coluna nao cresce. */
@media (max-width: 719px) {
  .site-footer ul {
    gap: 0;
  }

  .site-footer nav a,
  .site-footer__channels a,
  .site-footer__bottom a {
    min-height: 2.75rem;
    align-items: center;
  }

  .site-footer__bottom a {
    display: inline-flex;
  }

  .mark-card {
    padding: var(--s3) var(--s4);
  }

  .marks-band__grid {
    gap: var(--s2);
  }
}

/* --------------------------------------------- SEM MOUSE, SEM HOVER */
/* Em tela de toque o `:hover` gruda depois do toque e o card fica levantado
   sem motivo. Onde nao ha ponteiro que passe por cima, o estado nao existe. */
@media (hover: none) {
  .video-card:hover,
  .live-card:hover,
  .itinerary-card:hover,
  .button:hover,
  .text-link:hover {
    transform: none;
  }
}

/* ===========================================================================
   ABERTURA NO TELEFONE, 2026-09-14
   A arte de mobile e retrato, com o pastor na metade de baixo e o ceu claro
   na de cima: ela foi desenhada para ser fundo, nao bloco. Ate aqui ela
   entrava empilhada abaixo do texto, e a abertura ficava em dois pedacos
   soltos. No telefone em pe ela volta a ser fundo e o texto fica por cima, no
   ceu, como no desktop. Deitado o telefone segue empilhado: a arte e retrato
   e numa faixa larga e baixa nao sobra ceu para texto nenhum.
   ======================================================================== */
@media (max-width: 719px) and (orientation: portrait) {
  /* Duas alturas, e vale a maior. A primeira e a primeira dobra inteira mais a
     metade do card que cavalga a emenda, igual ao desktop. A segunda existe
     para a tela baixa: com `cover` em largura cheia o pastor sempre ocupa
     86,1% da largura em altura (930 das 1080 colunas da arte), entao o ceu
     util e a altura menos isso. As 29rem sao o bloco de texto mais respiro, e
     e por isso que num aparelho de 667px de altura a abertura passa da dobra
     em vez de jogar o texto em cima do rosto. */
  .hero {
    min-height: max(
      calc(100svh - var(--header-height) + var(--marks-overlap)),
      calc(86.1vw + 29rem)
    );
    justify-content: flex-start;
  }

  /* De volta ao fundo: fora do fluxo, cobrindo a faixa toda. A ancora na base
     mantem o pastor encostado no fim da abertura, entao a altura que sobra
     vira ceu, que e onde o texto mora. A arte usada aqui e a de 1080x2880,
     que e a mesma com o proprio ceu continuado para cima: sem ela, a faixa
     mais alta que a arte passaria a escalar pela altura e o pastor cresceria
     junto, comendo o ceu de novo. */
  .hero__media {
    position: absolute;
    order: 0;
    width: 100%;
    height: 100%;
    margin-inline: 0;
    inset: 0;
  }

  .hero__media img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 100%;
  }

  /* O texto encosta no topo: a metade de baixo da arte e o pastor. */
  .hero__grid {
    order: 0;
    align-content: start;
    gap: var(--s5);
    padding-block: var(--s6) var(--s7);
  }

  .hero__content h1 {
    max-width: 16ch;
  }

  .hero__intro {
    margin-bottom: var(--s5);
  }

  /* A citacao sai no telefone, por decisao de Zamp: o ceu tem altura para o
     titulo, o texto e o botao, e a frase seguinte cairia sobre o rosto. Ela
     continua de 720px para cima. */
  .hero .quote-rotator {
    display: none;
  }
}