/* ==========================================================================
   Caravana Rhema 2027
   ========================================================================== */

/* --------------------------------------------------------------------------
   Abertura
   -------------------------------------------------------------------------- */

.c-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--bg-navy);
  overflow: hidden;
}
.c-hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-top: var(--header-h);
  overflow: hidden;
}
.c-hero__media > [data-parallax] { height: 100%; }
.c-hero__media > [data-parallax] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 50%;
  transform: scale(1.14);
}
.c-hero__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  background:
    linear-gradient(to top, var(--bg-navy), transparent 40%),
    linear-gradient(90deg, rgba(11, 26, 51, .92) 0%, rgba(11, 26, 51, .6) 36%, rgba(11, 26, 51, 0) 64%);
}
/* Foto recortada do pastor sobre Jerusalém, presa ao pé da abertura */
.c-hero__person {
  position: absolute;
  z-index: 1;
  /* cortada na cintura: a foto passa da borda de baixo e o excesso fica escondido */
  right: 4%;
  bottom: -23%;
  height: 115%;
  aspect-ratio: 1080 / 1350;
  pointer-events: none;
}
.c-hero__person img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

.c-hero__inner { padding-block: var(--space-6) var(--space-8); }
.c-hero__title { margin: 0; }
.c-hero__logo { width: min(26rem, 88%); }
.c-hero__eyebrow { margin: var(--space-6) 0 var(--space-2); color: var(--sky); }
.c-hero__date {
  color: var(--fg-1);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: 1.2;
}
.c-hero__lead { margin-top: var(--space-5); max-width: 44ch; color: var(--fg-1); }
.c-hero__actions { margin-top: var(--space-6); }

@media (min-width: 64em) {
  .c-hero {
    display: flex;
    align-items: center;
    min-height: min(100svh, 56rem);
  }
  .c-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
    margin-top: 0;
  }
  .c-hero__media > [data-parallax] img { object-position: 100% 50%; transform: scale(1.08); }
  .c-hero__person { right: 10%; }
  .c-hero__media::after {
    inset: 0;
    height: auto;
    background:
      linear-gradient(90deg, rgba(11, 26, 51, .98) 0%, rgba(11, 26, 51, .94) 38%, rgba(11, 26, 51, .72) 54%, rgba(11, 26, 51, .3) 70%, rgba(11, 26, 51, 0) 84%),
      linear-gradient(to top, rgba(11, 26, 51, .7), transparent 30%);
  }
  .c-hero__inner { padding-top: calc(var(--header-h) + var(--space-8)); padding-bottom: var(--space-9); }
  .c-hero__inner > * { max-width: 36rem; }
}

/* Entrada */
.js .c-hero__logo { animation: c-logo 1100ms var(--ease-out) 150ms both; }
.js .c-hero__eyebrow { animation: c-rise 640ms var(--ease-out) 420ms both; --d: 12px; }
.js .c-hero__date { animation: c-rise 700ms var(--ease-out) 520ms both; --d: 18px; }
.js .c-hero__lead { animation: c-rise 760ms var(--ease-out) 640ms both; --d: 24px; }
.js .c-hero__actions { animation: c-rise 820ms var(--ease-out) 760ms both; --d: 30px; }
.js .c-hero__media img { animation: c-photo 1600ms var(--ease-out) both; }

@keyframes c-logo { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes c-rise { from { opacity: 0; transform: translateY(var(--d)); } }
@keyframes c-photo { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   Resumo
   -------------------------------------------------------------------------- */

.facts {
  background-color: var(--bg-deep);
  border-block: 1px solid var(--border);
}
.facts__list {
  display: grid;
  margin: 0;
}
.facts__item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.facts__item:last-child { border-bottom: 0; }
.facts__item dt {
  color: var(--fg-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.facts__item dd { margin: var(--space-1) 0 0; color: var(--fg-1); font-weight: var(--fw-medium); line-height: 1.4; }

@media (min-width: 48em) {
  .facts__list { grid-template-columns: repeat(2, 1fr); }
  .facts__item { padding-inline: var(--space-5); border-bottom: 0; border-left: 1px solid var(--border); }
  .facts__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (min-width: 64em) {
  .facts__list { grid-template-columns: repeat(4, 1fr); }
  .facts__item { padding-block: var(--space-6); }
  .facts__item:nth-child(odd) { border-left: 1px solid var(--border); padding-left: var(--space-5); }
  .facts__item:first-child { border-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   A viagem
   -------------------------------------------------------------------------- */

.vision__grid { display: grid; gap: var(--space-8); align-items: center; }
.vision .prose { margin-top: var(--space-6); }
.vision h2 { margin-top: 0; }

/* Quatro fotos sobrepostas, em leque */
.stack {
  position: relative;
  aspect-ratio: 1 / 1.05;
  list-style: none;
}
.stack__item {
  position: absolute;
  width: 46%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  outline: 6px solid var(--bg);
  box-shadow: var(--shadow-float);
}
.stack__item > div, .stack__item img { width: 100%; height: 100%; }
.stack__item img { object-fit: cover; transform: scale(1.1); }
.stack__item--1 { top: 0; left: 2%; z-index: 1; }
.stack__item--2 { top: 8%; right: 0; z-index: 2; }
.stack__item--3 { bottom: 0; left: 12%; z-index: 3; }
.stack__item--4 { bottom: 6%; right: 8%; z-index: 4; width: 40%; }

@media (min-width: 64em) {
  .vision__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 1rem + 5vw, 7rem); }
}

/* --------------------------------------------------------------------------
   Roteiro com o mapa
   -------------------------------------------------------------------------- */

.route { padding-bottom: 0; }
.route__head { padding-bottom: var(--space-8); }
.route__head .lead { margin-top: var(--space-4); }

.route__stage { position: relative; }

.route__map {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 50svh;
  margin-inline: calc(var(--gutter) * -1);
  background-color: var(--bg-deep);
  border-block: 1px solid var(--border);
}

.map {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.map__svg {
  width: 100%;
  height: 100%;
}

.map__grid path { stroke: rgba(141, 176, 232, .07); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.map__sea { fill: rgba(42, 100, 194, .07); stroke: none; }
.map__coast { fill: none; stroke: rgba(244, 241, 234, .5); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map__lake { fill: rgba(141, 176, 232, .16); stroke: rgba(141, 176, 232, .7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map__river { fill: none; stroke: rgba(141, 176, 232, .55); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }

.map__flight {
  fill: none;
  stroke: var(--gold-300);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .8;
}
.map__route-base {
  fill: none;
  stroke: rgba(244, 241, 234, .12);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}
.map__route-glow {
  fill: none;
  stroke: var(--highlight);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .14;
}
.map__route {
  fill: none;
  stroke: var(--highlight);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.map__label {
  fill: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
  paint-order: stroke;
  stroke: var(--bg-deep);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.map__label--ctx { fill: var(--fg-3); font-weight: var(--fw-medium); font-size: 11px; }
.map__label--near { fill: var(--sky); font-weight: var(--fw-medium); font-size: 11.5px; }
.map__water {
  fill: rgba(141, 176, 232, .62);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.map__pin--ctx circle { fill: var(--fg-3); }
.map__region-label {
  fill: rgba(244, 241, 234, .22);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: .32em;
  text-transform: uppercase;
}
.map.is-zoomed .map__region { opacity: 0; }
.map__region { transition: opacity 500ms var(--ease-out); }

.map__head { opacity: 0; transition: opacity 400ms var(--ease-out); }
.map__head.is-on { opacity: 1; }
.map__head-dot { fill: var(--gold-300); }
.map__head-glow { fill: var(--highlight); opacity: .25; transform-box: fill-box; transform-origin: center; animation: halo 1.8s var(--ease-out) infinite; }

/* Painel do dia, dentro do mapa */
.map__hud {
  position: absolute;
  right: var(--space-4);
  top: var(--space-4);
  max-width: min(17rem, 60%);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(14, 18, 24, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: right;
}
.map__hud-day { display: flex; justify-content: flex-end; gap: var(--space-3); color: var(--fg-3); font-size: var(--fs-label); }
.map__hud-day span:first-child { color: var(--highlight); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; }
.map__hud-title { margin-top: 2px; color: var(--fg-1); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.3; }
.map__hud.is-swap > * { animation: hud-in 600ms var(--ease-out) both; }
.map__hud.is-swap > * + * { animation-delay: 80ms; }
@keyframes hud-in { from { opacity: 0; transform: translateY(6px); } }

.map__scale {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
}
.map__north {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--fg-1);
  font-weight: var(--fw-bold);
}
.map__bar {
  display: block;
  width: 60px;
  height: 6px;
  border: 1px solid var(--fg-3);
  border-top: 0;
  transition: width 400ms var(--ease-out);
}

.map:not(.is-live) .map__hud { display: none; }

@media (max-width: 63.99em) {
  .map__hud { right: var(--space-3); top: var(--space-3); padding: var(--space-1) var(--space-3); }
  .map__hud-title { display: none; }
  .map__scale { left: var(--space-3); bottom: var(--space-3); }
}

.map__star { fill: var(--bg-deep); stroke: var(--highlight); stroke-width: 1.5px; transition: fill 300ms var(--ease-out); }
.map__halo { fill: var(--highlight); opacity: 0; transform-box: fill-box; transform-origin: center; }
.map__stop.is-reached .map__star { fill: var(--highlight); }
.map__stop.is-current .map__halo { animation: halo 2.2s var(--ease-out) infinite; }

@keyframes halo {
  0% { opacity: .45; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.6); }
}

.map__near circle { fill: var(--bg-deep); stroke: var(--sky); stroke-width: 1.5px; }

.map__from {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  margin: 0;
  color: var(--gold-300);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}

/* Estados controlados pelo script */
.map.is-live .map__stop .map__label,
.map.is-live .map__near { opacity: 0; transition: opacity 360ms var(--ease-out); }
.map.is-live .map__stop.is-reached .map__label { opacity: 1; }
.map.is-live .map__stop.is-hidden-label .map__label { opacity: 0; }
/* Celular: o mapa é estreito e os nomes de dias passados se sobrepõem; ficam só os do dia */
@media (max-width: 47.99em) {
  .map.is-live .map__stop.is-reached:not(.is-today) .map__label { opacity: 0; }
}
.map.is-live .map__near.is-shown { opacity: 1; }
.map.is-live .map__stop { opacity: .35; transition: opacity 360ms var(--ease-out); }
.map.is-live .map__stop.is-reached { opacity: 1; }
.map.is-live .map__from.is-shown { opacity: 1; }
.map.is-live .map__pin--ctx, .map.is-live .map__water { transition: opacity 400ms var(--ease-out); }
.map.is-zoomed .map__pin--ctx, .map.is-zoomed .map__water { opacity: 0; }

/* Dias */
.route__days {
  position: relative;
  z-index: 1;
  padding-bottom: 30svh;
  list-style: none;
  counter-reset: none;
}
.day {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92svh;
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--border);
  transition: opacity 700ms var(--ease-out);
}
.day:last-child { border-bottom: 0; min-height: 120svh; }
.js .route.is-live .day:not(.is-active) { opacity: .38; }

.day__when {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  color: var(--fg-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.day__n {
  color: var(--highlight);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.day__title { font-size: var(--fs-h3); }
.day__text { max-width: 46ch; margin-top: var(--space-3); color: var(--fg-2); }
.day__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.day__tags li {
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--sky);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
}

.day__near {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid rgba(141, 176, 232, .3);
  border-radius: var(--radius-md);
  background: rgba(42, 100, 194, .08);
}
.day__near h4 { font-size: var(--fs-h4); }
.day__near ul { display: grid; gap: var(--space-1); margin-block: var(--space-3); }
.day__near li { display: flex; gap: var(--space-3); color: var(--fg-1); }
.day__near li::before { content: "/"; color: var(--sky); }
.day__near p { color: var(--fg-3); font-size: var(--fs-small); }

@media (min-width: 64em) {
  .route__stage {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 1rem + 3vw, 5rem);
    align-items: start;
  }
  .route__map {
    top: var(--header-h);
    height: calc(100svh - var(--header-h));
    margin-inline: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-block: 0 var(--space-8);
    top: calc(var(--header-h) + var(--space-4));
    height: calc(100svh - var(--header-h) - var(--space-4) * 2);
  }
  .day { min-height: 125svh; padding-block: var(--space-8); }
  .day:last-child { min-height: 150svh; }
}

/* --------------------------------------------------------------------------
   Pacote
   -------------------------------------------------------------------------- */

.package__title { max-width: 18ch; }
.package__grid { display: grid; gap: var(--space-7); margin-top: var(--space-8); }
.package__col h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--highlight);
  font-size: var(--fs-h3);
}
.package__col--out h3 { border-bottom-color: var(--border-strong); }
.package__list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--fg-1);
}
.package__list svg { width: 1.25rem; height: 1.25rem; margin-top: .2em; color: var(--highlight); }
.package__col--out .package__list li { color: var(--fg-2); }
.package__col--out .package__list svg { color: var(--fg-3); }

@media (min-width: 56em) {
  .package__grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 6rem); }
}

/* --------------------------------------------------------------------------
   Investimento
   -------------------------------------------------------------------------- */

.invest__grid { display: grid; gap: var(--space-8); }
.price {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
.price__label {
  color: var(--fg-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.price__value {
  color: var(--fg-1);
  font-size: clamp(3.5rem, 2rem + 6.5vw, 7.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: .95;
}
.price__cur { color: var(--highlight); font-size: .36em; font-weight: var(--fw-medium); letter-spacing: .04em; vertical-align: .9em; }
.price__note { color: var(--fg-2); font-size: var(--fs-lead); }

.conds { display: grid; margin: 0; border-top: 1px solid var(--border); }
.cond {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.cond dt { color: var(--sky); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; }
.cond dd { margin: 0; color: var(--fg-1); }

.kids { margin-top: var(--space-7); }
.kids h3 { font-size: var(--fs-h4); margin-bottom: var(--space-4); }
.kids table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.kids th, .kids td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.kids thead th { color: var(--fg-3); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.kids tbody th { color: var(--fg-1); white-space: nowrap; }
.kids td { color: var(--fg-2); }

@media (min-width: 64em) {
  .invest__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 1rem + 5vw, 7rem); }
  .cond { grid-template-columns: 11rem 1fr; gap: var(--space-5); }
}

/* --------------------------------------------------------------------------
   Anfitrião
   -------------------------------------------------------------------------- */

.host__grid { display: grid; gap: var(--space-8); align-items: center; }
.host__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); max-width: 30rem; }
.host__photo > div, .host__photo img { width: 100%; height: 100%; }
.host__photo img { object-fit: cover; transform: scale(1.1); }
.host .prose { margin-top: var(--space-6); }
.host__quote {
  margin: var(--space-7) 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--highlight);
  color: var(--gold-300);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-style: italic;
  line-height: 1.2;
}

@media (min-width: 64em) {
  .host__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 1rem + 5vw, 7rem); }
}

/* --------------------------------------------------------------------------
   Perguntas frequentes
   -------------------------------------------------------------------------- */

.faq__grid { display: grid; gap: var(--space-7); }
.faq__list { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 3.5rem;
  padding-block: var(--space-5);
  color: var(--fg-1);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-micro) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--highlight); }
.faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: transform 300ms var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.faq__icon svg { width: 1rem; height: 1rem; }
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--highlight); border-color: var(--highlight); color: var(--highlight-fg); }
.faq__answer { padding-bottom: var(--space-5); max-width: var(--measure); }
.faq__item[open] .faq__answer { animation: c-rise 420ms var(--ease-out) both; --d: 8px; }

@media (min-width: 64em) {
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 1rem + 5vw, 7rem); align-items: start; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* --------------------------------------------------------------------------
   Contato (o único WhatsApp do site)
   -------------------------------------------------------------------------- */

.contact__box {
  display: grid;
  gap: var(--space-7);
  align-items: end;
}
.contact__box .lead { margin-top: var(--space-5); max-width: 46ch; }
.contact__action { display: grid; gap: var(--space-3); justify-items: start; }
.contact__btn { min-height: 4rem; padding-inline: 2rem; font-size: 1.0625rem; }
.contact__num { color: var(--fg-3); font-size: var(--fs-small); letter-spacing: .04em; }

@media (min-width: 64em) {
  .contact__box { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .contact__action { justify-items: end; }
}