/* =========================================================================
   MANU LA PORTA — kitesurf · wing · travel · lifestyle
   Art-direction benchmark: vita-travel.webflow.io
   Editorial: oversized tight display type, full-bleed photography,
   asymmetric grids, near-black sections, generous negative space, quiet motion.
   ========================================================================= */

:root {
  --bone:      #F5F2EA;
  --bone-2:    #ECE7DA;
  --bone-3:    #DFD8C6;
  --ink:       #0E1A22;
  --ink-2:     #16262F;
  --navy:      #0C3454;
  --sea:       #2E7C8B;
  --sun:       #E39B2E;
  --sun-2:     #F2C877;
  --sea-2:     #7FC6D2;

  --text:      #1B2831;
  --text-soft: #566169;
  --text-mute: #869199;
  --hair:      #D8D1C1;

  --f-display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:  clamp(2.7rem, 8.5vw, 8.5rem);
  --fs-h2:    clamp(2rem, 5.4vw, 4.4rem);
  --fs-h3:    clamp(1.35rem, 2.2vw, 2rem);
  --fs-lead:  1.02rem;          /* = tamanho da bio do bloco preto/dourado */
  --fs-body:  1rem;
  --fs-eye:   0.72rem;

  --section-y: clamp(3rem, 6.5vw, 6rem);
  --container: 1360px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --r: 3px;

  --ease: cubic-bezier(.19, 1, .22, 1);
  --dur: .8s;
}

.is-dark {
  --bone: var(--ink);
  --bone-2: var(--ink-2);
  --text: #EFEADC;
  --text-soft: #A9B4B8;
  --text-mute: #7E8C93;
  --hair: rgba(255,255,255,.14);
  background: var(--ink);
  color: var(--text);
}
/* preto + dourado */
.is-gold { --text-soft: #C7B48C; }
.is-gold .eyebrow, .is-gold .eyebrow::before { color: var(--sun); }
.is-gold .display { color: #F6EFDF; }

* { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0; overflow-x: clip;
  font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.6; font-weight: 400;
  color: var(--text); background: var(--bone);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--sun); color: var(--ink); }

/* --- ratio-locked media box: altura vem só do aspect-ratio (--ar);
       a imagem sai do fluxo para nunca esticar a caixa --- */
.trip__media, .cpn__media, .ebk__cover--photo {
  position: relative; aspect-ratio: var(--ar, 4 / 3); overflow: clip; margin: 0; display: block;
}
.trip__media > img, .cpn__media > img, .ebk__cover--photo > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
[style*="--focal-d"] { object-position: var(--focal-d, 50% 50%); }
@media (max-width: 760px) { [style*="--focal-m"] { object-position: var(--focal-m, 50% 50%); } }

/* ---------------------------------------------------------------- primitives */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }

.display {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -0.045em;
  line-height: 0.92; text-transform: uppercase; margin: 0;
}
h1.display { font-size: var(--fs-hero); }
h2.display { font-size: var(--fs-h2); }
.h3 {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.02; font-size: var(--fs-h3); text-transform: uppercase; margin: 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--f-body); font-size: var(--fs-eye); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-soft); margin: 0;
}
.eyebrow::before { content: "✳"; color: var(--sun); font-size: 1.1em; }
.eyebrow.plain::before, .eyebrow[hidden] { display: none; }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-soft); max-width: 48ch; font-weight: 400; }
.hint { margin-top: 1rem; font-size: .78rem; color: var(--text-mute); letter-spacing: .04em; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --bg: var(--sun); --fg: var(--ink); --bd: var(--sun);
  display: inline-flex; align-items: center; gap: .8em;
  padding: 1.1em 1.8em; font-family: var(--f-body);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: 999px;
  cursor: pointer;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-3px); }
.btn:hover svg { transform: translateX(4px); }
.btn:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
.btn--outline { --bg: transparent; --fg: currentColor; --bd: currentColor; }
.btn--outline:hover { --bg: currentColor; --fg: var(--bone); }
.is-dark .btn--outline:hover { --fg: var(--ink); }

.arrow-link {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: .35em; border-bottom: 1px solid currentColor; color: var(--text);
}
.arrow-link svg { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90; padding-block: 1.05rem; color: #fff;
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.brand { display: block; flex: none; line-height: 0; }
.brand img {
  height: 20px; width: auto;
  filter: drop-shadow(0 1px 10px rgba(0,0,0,.45));
  transition: filter .4s var(--ease);
}
.nav.is-stuck .brand img { filter: brightness(0) saturate(100%) opacity(.9); }  /* wordmark branco -> escuro no fundo claro */

.nav:not(.is-stuck) .nav__links a,
.nav:not(.is-stuck) .nav__cta,
.nav:not(.is-stuck) .lang { text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.nav.is-stuck { background: var(--bone); color: var(--text); box-shadow: 0 1px 0 var(--hair); padding-block: .65rem; }
.nav.is-stuck .nav__links a, .nav.is-stuck .nav__cta, .nav.is-stuck .lang { text-shadow: none; }

.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  position: relative; padding-block: .4rem;
}
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--sun); transition: width .3s var(--ease); }
.nav__links a:hover::after { width: 100%; }

.nav__end { display: flex; align-items: center; gap: 1.1rem; }
.lang { display: inline-flex; gap: .1rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; align-items: center; }
.lang button { background: none; border: 0; padding: .35rem .3rem; cursor: pointer; opacity: .5; transition: opacity .2s; }
.lang button.on { opacity: 1; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sun); }
.nav__cta {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: .7em 1.25em;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav__cta:hover { background: var(--sun); border-color: var(--sun); color: var(--ink); }

.burger { display: none; width: 42px; height: 42px; border: 0; background: none; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; margin: 5px auto; background: currentColor; transition: .3s var(--ease); }

@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }
  .nav.is-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__drawer {
    position: fixed; inset: 0 0 auto 0; z-index: 89; background: var(--ink); color: #fff;
    padding: 6.5rem var(--gutter) 3rem; display: flex; flex-direction: column; gap: .25rem;
    transform: translateY(-102%); transition: transform .5s var(--ease);
  }
  .nav.is-open .nav__drawer { transform: translateY(0); }
  .nav__drawer a {
    font-family: var(--f-display); text-transform: uppercase; font-weight: 600; letter-spacing: -0.02em;
    font-size: clamp(1.7rem, 7.5vw, 2.4rem); padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .nav__drawer .btn { margin-top: 1.5rem; justify-content: center; }
}
@media (min-width: 1081px) { .nav__drawer { display: none; } }

/* =========================================================================
   01 · HERO — título no espaço negativo · scrim colado à imagem
   ========================================================================= */
.hero { position: relative; min-height: 100svh; display: flex; overflow: clip; color: #fff; background: var(--ink); }
@supports not (height: 100svh) { .hero { min-height: 100vh; } }
.hero__slides { position: absolute; inset: 0; z-index: 0; overflow: clip; background: var(--ink); }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.15s var(--ease); }
.hero__slide.is-active { opacity: 1; }
/* imagem 100% da caixa + parallax por scale(1.12) no JS -> nunca sobra faixa;
   picture (quando existe crop específico de desktop via <source>) ocupa o
   mesmo espaço que a img sozinha ocuparia */
.hero__slide picture { position: absolute; inset: 0; display: block; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-d, 26% 44%); will-change: transform; }
.hero__scrim {
  position: absolute; inset: -1px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,26,34,0) 34%, rgba(14,26,34,.5) 66%, rgba(14,26,34,.9) 100%),
    linear-gradient(270deg, rgba(14,26,34,.58) 0%, rgba(14,26,34,.12) 42%, rgba(14,26,34,0) 64%),
    linear-gradient(180deg, rgba(14,26,34,.42) 0%, rgba(14,26,34,0) 16%);
}
.hero__inner {
  position: relative; z-index: 2; width: 100%; max-width: var(--container);
  margin-inline: auto; padding: 7rem var(--gutter) clamp(2.5rem, 6vw, 5rem);
  display: flex; align-items: center; justify-content: center;
  min-height: 100%;
}
.hero__text {
  max-width: min(40ch, 90%); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 4vw, 2.5rem);
}
.hero h1 {
  color: #fff; font-size: clamp(2.4rem, 6.5vw, 5.5rem); text-shadow: 0 4px 60px rgba(0,0,0,.3);
}

@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero__text > * { animation: heroIn .9s var(--ease) both; }
.hero__text > *:nth-child(2) { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) { .hero__text > * { animation: none; } }

.hero__cue {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5);
  color: #fff; animation: cueBounce 2.2s var(--ease) infinite;
}
.hero__cue svg { width: 1.2em; height: 1.2em; }
@keyframes cueBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .hero__cue { animation: none; } }

@media (max-width: 760px) {
  .hero__inner { padding-top: 6rem; }
  .hero__slide img { object-position: var(--focal-m, 44% 32%); }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(14,26,34,0) 30%, rgba(14,26,34,.5) 58%, rgba(14,26,34,.92) 100%),
      linear-gradient(180deg, rgba(14,26,34,.4) 0%, rgba(14,26,34,0) 22%);
  }
}

/* ticker (sem bordas — sem linha visível) */
.ticker { background: var(--sun); color: var(--ink); overflow: clip; }
.ticker__row { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker__row > span {
  display: inline-flex; align-items: center; gap: 3.25rem; padding: .95rem 1.625rem;
  font-family: var(--f-display); font-weight: 600; font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
}
.ticker__row > span::after { content: "•"; }
@keyframes ticker { to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .ticker__row { animation: none; } }

/* =========================================================================
   02 · MANIFESTO — enxuto pra caber numa tela só em desktop
   ========================================================================= */
.manifesto.section { padding-block: clamp(2.25rem, 5vw, 4rem); }
.manifesto__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,26rem); gap: clamp(2rem,5vw,4rem); align-items: start; }
.manifesto h2 { margin: 0; max-width: 20ch; font-size: clamp(1.9rem, 4.2vw, 3.6rem); }
.manifesto__subtitle {
  margin: .6rem 0 0; font-family: var(--f-display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--sun); text-transform: none;
}
.manifesto__text { padding-top: clamp(1rem, 2.5vw, 2rem); }
.manifesto__text p { color: var(--text-soft); margin: 0; font-size: var(--fs-lead); line-height: 1.6; }

/* colagem: 4 fotos numa fileira só, larguras variadas, altura contida */
.manifesto__media {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, .62fr);
  gap: .7rem; height: clamp(190px, 24vw, 340px); margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
}
.manifesto__cell { position: relative; overflow: clip; border-radius: var(--r); background: var(--ink-2); margin: 0; }
.manifesto__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.manifesto__cell--2, .manifesto__cell--4 { margin-top: 1.4rem; }
@media (max-width: 900px) { .manifesto__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .manifesto__media { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 34vw; height: auto; }
  .manifesto__cell--2, .manifesto__cell--4 { margin-top: 0; }
}

/* =========================================================================
   SECTION HEADER
   ========================================================================= */
.sec-head {
  display: grid; grid-template-columns: 12rem minmax(0,1fr);
  gap: 1.25rem clamp(1.5rem,4vw,3.5rem); align-items: start; margin-bottom: clamp(2.5rem,6vw,4.5rem);
}
.sec-head__body { max-width: 34ch; }
.sec-head h2 { margin: 0 0 .8rem; }
.sec-head .lead { margin: 0; }
@media (max-width: 820px) { .sec-head { grid-template-columns: 1fr; } }

/* =========================================================================
   03 · TRIPS
   ========================================================================= */
.trips__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 30rem);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory;
  padding-bottom: 1.4rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: none;
}
.trips__track::-webkit-scrollbar { display: none; }
.trip { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--bone-2); border-radius: var(--r); overflow: clip; }
.trip--featured { outline: 1px solid var(--sun); outline-offset: -1px; }
.trip__media > img { transition: transform .8s var(--ease); }
.trip:hover .trip__media > img { transform: scale(1.05); }
.trip__badge {
  position: absolute; left: 1rem; top: 1rem; background: #F5F2EA; color: #0E1A22;
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .5em .85em; border-radius: 999px;
}
.trip__star {
  position: absolute; right: 1rem; top: 1rem; background: var(--sun); color: var(--ink);
  font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: .5em .8em; border-radius: 999px;
}
.trip__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.trip__place { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin: 0; }
.trip__title { margin: 0 0 .4rem; }
.trip__facts { display: grid; gap: .35rem; margin: 0; font-size: .82rem; }
.trip__facts div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--hair); padding-bottom: .35rem; }
.trip__facts dt { color: var(--text-mute); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; padding-top: .15rem; }
.trip__facts dd { margin: 0; color: var(--text-soft); text-align: right; }
.trip__foot { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.trip__price { margin: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); }
.trip__price b { display: block; font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -0.02em; color: var(--text); text-transform: none; }

/* =========================================================================
   SPLIT — seção em 2 colunas coladas (texto | mídia), cabe em 1 tela
   ========================================================================= */
.split {
  display: grid; grid-template-columns: 0.82fr 1fr; gap: 0;
  min-height: 100svh; position: relative; overflow: clip;
}
@supports not (height: 100svh) { .split { min-height: 100vh; } }
.split__panel {
  background: var(--navy); color: #fff;
  padding: clamp(2rem, 5vw, 4.75rem);
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
}
.split__panel .eyebrow { color: var(--sun-2); }
.split__panel .eyebrow::before { color: var(--sun); }
.split__panel .display { color: #fff; margin: .3rem 0 .2rem; }
.split__panel .lead { color: rgba(255,255,255,.82); margin: 0; }
.split__media {
  position: relative; overflow: clip;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(165deg, #a9d2df 0%, #82b7ca 58%, #6aa0b6 100%);
}
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__panel { padding: var(--section-y) var(--gutter); }
  .split__media { display: block; background: none; }
}

/* --- mapa: fundo laranja pedido pela Manu (só nessa instância do .split) --- */
.map.split { min-height: 78svh; }
@supports not (height: 78svh) { .map.split { min-height: 78vh; } }
.map .split__panel { background: var(--sun); color: var(--ink); }
.map .split__panel .eyebrow { color: var(--ink); opacity: .72; }
.map .split__panel .eyebrow::before { color: var(--ink); }
.map .split__panel .display { color: var(--ink); }
.map .split__panel .lead { color: rgba(14,26,34,.8); }
.map .map__legend { color: rgba(14,26,34,.75); }
.map .map__legend .br i { background: var(--ink); }
.map .map__legend .in i { background: #fff; }

/* =========================================================================
   04 · MAPA — mapa real (Leaflet + OpenStreetMap), pins nas coordenadas reais
   ========================================================================= */
.map__real { position: absolute; inset: 0; background: var(--bone-2); }
/* tom mais discreto/editorial nos tiles do OpenStreetMap (mapa real, sem chave de API) */
.map__real .leaflet-tile-pane { filter: saturate(.55) brightness(1.08) contrast(.96); }
@media (max-width: 820px) { .map__real { position: relative; height: 62vh; min-height: 22rem; } }
.map__real .leaflet-control-attribution { font-size: 9px; }
/* aviso discreto quando os tiles do OpenStreetMap não carregam (preview
   bloqueado) — os pinos continuam visíveis por cima, nas posições reais */
.map__real--offline::before {
  content: "mapa real — se os tiles não aparecerem aqui, é bloqueio do ambiente de preview; no site publicado carrega normal";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 350;
  max-width: 78%; text-align: center; background: rgba(14,26,34,.85); color: #fff;
  font-size: .72rem; letter-spacing: .02em; line-height: 1.5; padding: 1rem 1.25rem; border-radius: var(--r);
  pointer-events: none;
}
.map__pin span {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  background: var(--sun); border: 2px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.map__pin--intl span { background: var(--sea); }
.leaflet-popup-content-wrapper { border-radius: var(--r); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.leaflet-popup-content { margin: .85rem 1rem; font-family: var(--f-body); }
.mpop b { display: block; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1rem; }
.mpop span { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); margin-top: .2rem; }
.mpop em { display: block; font-style: normal; font-size: .8rem; color: var(--text-soft); margin-top: .4rem; }
.mpop a { display: inline-block; margin-top: .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--sun); padding-bottom: 1px; }

/* =========================================================================
   05 · AULAS DE KITE E WING — 50/50 horizontal, compacto (imagem de fundo)
   ========================================================================= */
.aulas.section { padding-block: clamp(2.25rem, 5vw, 4rem); }
.aulas__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 720px) { .aulas__row { grid-template-columns: 1fr; } }
.aulas__card {
  position: relative; display: flex; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: clip; color: #fff;
  transition: transform .3s var(--ease);
}
.aulas__card:hover { transform: translateY(-3px); }
.aulas__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.aulas__card:hover .aulas__img { transform: scale(1.06); }
.aulas__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,34,0) 38%, rgba(14,26,34,.78) 82%, rgba(14,26,34,.92) 100%);
}
.aulas__body { position: relative; z-index: 1; margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: .4rem; padding: clamp(1.25rem, 3vw, 2rem); }
.aulas__k { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.aulas__t { margin: 0; color: #fff; }
.aulas__desc { margin: 0; font-size: .84rem; color: rgba(255,255,255,.85); max-width: 32ch; }
.aulas__cta {
  display: inline-flex; align-items: center; gap: .55em; align-self: start; margin-top: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--sun); border-radius: 999px; padding: .8em 1.3em;
}
.aulas__cta svg { width: 1.05em; height: 1.05em; }
@media (max-width: 480px) { .aulas__card { aspect-ratio: 3 / 4; } }

/* =========================================================================
   06 · E-BOOKS (compacto)
   ========================================================================= */
.ebooks-split .split__media { padding: clamp(2rem, 5vw, 4rem); }
.ebooks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(1.1rem, 2.5vw, 1.85rem); width: 100%; max-width: 30rem; }
@media (max-width: 560px) { .ebooks { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 22rem; } }
.ebk { display: flex; flex-direction: column; gap: .6rem; }
.ebk__coming {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  text-align: center; aspect-ratio: 3 / 4; border-radius: var(--r); border: 1px dashed rgba(255,255,255,.3);
  color: rgba(255,255,255,.55); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 1rem;
}
.ebk__coming svg { width: 1.6em; height: 1.6em; opacity: .5; }
.ebk__cover {
  aspect-ratio: 3 / 4; border-radius: var(--r); overflow: clip; position: relative;
  box-shadow: 0 18px 40px rgba(0,0,0,.28); transition: transform .35s var(--ease);
  display: flex; flex-direction: column; justify-content: space-between; padding: 1rem;
}
.ebk:hover .ebk__cover { transform: translateY(-5px) rotate(-1.2deg); }
.ebk__cover--type { background: var(--navy); color: #fff; }
.ebk__cover--type.tint-sea { background: var(--sea); }
.ebk__cover--type.tint-sun { background: linear-gradient(150deg, var(--sun) 0%, #C07E1B 100%); color: var(--ink); }
.ebk__cover--type::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sun); }
.ebk__cover--type.tint-sun::before { background: var(--ink); }
.ebk__ttl { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; font-size: 1.1rem; line-height: .98; }
.ebk__by { font-size: .5rem; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.ebk__name { font-size: .8rem; font-weight: 600; color: #fff; line-height: 1.25; }
.ebk__langs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .1rem; }
.ebk__lang {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  border: 1px solid rgba(242, 200, 119, .38); border-radius: calc(var(--r) / 2);
  padding: .4em .7em; line-height: 1.15;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.ebk__lang-name {
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sun-2);
}
.ebk__lang-price { font-size: .74rem; font-weight: 700; color: #fff; }
.ebk__lang:hover, .ebk__lang:focus-visible {
  background: rgba(242, 200, 119, .12); border-color: var(--sun); transform: translateY(-1px);
}

/* =========================================================================
   07 · CUPONS (layout lookbook — herdado dos antigos cards de curso)
   ========================================================================= */
.coupons { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.cpn { display: flex; flex-direction: column; }
.cpn:nth-child(even) { margin-top: clamp(1.5rem, 5vw, 4.5rem); }
.cpn__media { border-radius: var(--r); background: var(--bone-2); }
.cpn__media > img { transition: transform .9s var(--ease); }
.cpn:hover .cpn__media > img { transform: scale(1.04); }
.cpn__body { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.15rem; }
.cpn__brand { margin: .15rem 0 0; }
.cpn__code { margin: 0; font-size: .82rem; color: var(--text-soft); }
.cpn__code b { color: var(--text); }
.cpn__body .arrow-link { margin-top: .5rem; align-self: start; }
@media (max-width: 1080px) { .coupons { grid-template-columns: repeat(2, 1fr); } .cpn:nth-child(even) { margin-top: 0; } .cpn:nth-child(n+3) { margin-top: clamp(1.5rem,5vw,3.5rem); } }
@media (max-width: 560px) { .coupons { grid-template-columns: 1fr; gap: 2.5rem; max-width: 26rem; } .cpn:nth-child(n) { margin-top: 0; } }

/* =========================================================================
   08 · HISTÓRIA / JORNADA — split: texto (título com largura de sobra) | fotos
   ========================================================================= */
@media (min-width: 821px) { .story-split { grid-template-columns: 1.2fr 1fr; } }
.story-split .split__panel { background: var(--bone-2); color: var(--text); }
.story-split .split__panel .eyebrow { color: var(--text-mute); }
.story-split .split__panel .eyebrow::before { color: var(--sun); }
.story-split .split__panel .display { color: var(--text); }
.story-split .split__panel .lead { color: var(--text-soft); }
.story__text { white-space: pre-line; }
.story-split .split__media { display: grid; grid-template-columns: 1fr 1fr; }
.story__item { position: relative; margin: 0; height: 100%; min-height: 22rem; }
.story__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__cap {
  position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 1;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
@media (max-width: 820px) {
  .story-split .split__media { grid-template-columns: 1fr; }
  .story__item { min-height: 15rem; }
}
@media (max-width: 460px) { .story { gap: 1rem; } }

/* =========================================================================
   09 · PATROCINADORES
   ========================================================================= */
/* marquee horizontal contínuo, mesma técnica do .ticker (conteúdo duplicado 2x) */
.sponsors__viewport { overflow: clip; width: 100%; margin-top: clamp(1.5rem, 3vw, 2.25rem); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.sponsors__row { display: flex; align-items: center; gap: clamp(2.75rem, 6vw, 5rem); width: max-content; animation: sponsorsMarquee 34s linear infinite; }
.sponsors__row:hover { animation-play-state: paused; }
@keyframes sponsorsMarquee { to { transform: translateX(-50%); } }
.sponsor { flex: none; height: clamp(1.9rem, 4vw, 3rem); width: auto; max-width: 150px; object-fit: contain; opacity: .65; transition: opacity .3s var(--ease); }
.sponsor--text {
  height: auto; opacity: .6;
  font-family: var(--f-display); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--text);
}
.sponsor:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sponsors__row { animation: none; } }

/* =========================================================================
   10 · FINAL CTA — scrim colado à imagem
   ========================================================================= */
.final { position: relative; overflow: clip; color: #fff; text-align: center; background: var(--ink); }
.final__media { position: absolute; inset: 0; z-index: 0; overflow: clip; background: var(--ink); }
.final__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; will-change: transform; }
.final__media::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,26,34,.62) 0%, rgba(14,26,34,.5) 45%, rgba(14,26,34,.72) 100%);
}
.final__inner { position: relative; z-index: 2; padding-block: clamp(6rem, 16vw, 12rem); }
.final h2 { color: #fff; }
.final p { color: rgba(255,255,255,.85); margin: 1rem auto 0; }
.final__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2.4rem; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { background: var(--ink); color: #EFEADC; padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer__logo { height: 24px; width: auto; }
.footer__tag { margin-top: 1rem; max-width: 30ch; color: rgba(255,255,255,.6); font-size: .9rem; }
.footer__col h3 { margin: 0 0 1rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sun-2); font-weight: 700; font-family: var(--f-body); }
.footer__col a, .footer__col span { display: block; padding: .35rem 0; color: rgba(255,255,255,.8); font-size: .9rem; }
.footer__col a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; font-size: .74rem; color: rgba(255,255,255,.45); }
@media (max-width: 820px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__col:first-child { grid-column: 1 / -1; } }

/* --- "Seja um afiliado" — faixa de destaque no rodapé, entre os links e o
       copyright --- */
.footer__affiliate {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-block: 2.25rem; border-bottom: 1px solid rgba(255,255,255,.14); flex-wrap: wrap;
}
.footer__affiliate .eyebrow { color: var(--sun-2); }
.footer__affiliate h3 { margin: .35rem 0 .5rem; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.3rem; color: #fff; }
.footer__affiliate p { margin: 0; max-width: 46ch; color: rgba(255,255,255,.65); font-size: .92rem; }
.footer__affiliate .btn { flex: none; }

/* --- modal genérico (hoje só o formulário de afiliados) --- */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.modal__overlay { position: absolute; inset: 0; background: rgba(14,26,34,.72); }
.modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 30rem; max-height: 88vh; overflow-y: auto;
  background: var(--bone); border-radius: var(--r); padding: clamp(1.5rem, 4vw, 2.25rem);
}
.modal__panel h3 { margin: 0 0 1.25rem; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.2rem; }
.modal__close {
  position: absolute; top: .9rem; right: .9rem; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--bone-2); border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--text);
}
.field { display: block; margin-bottom: 1rem; font-size: .84rem; font-weight: 600; color: var(--text); }
.field span, .field legend { display: block; margin-bottom: .4rem; padding: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; border: 1px solid var(--hair); border-radius: calc(var(--r) / 2); padding: .7em .9em;
  font: inherit; font-weight: 400; background: #fff; color: var(--text);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--sun); outline-offset: 1px; }
.field textarea { resize: vertical; }
.field--check { border: 0; padding: 0; margin: 0 0 1.1rem; }
.field--check label { display: inline-flex; align-items: center; gap: .4em; font-weight: 400; margin: .3rem 1.1rem .3rem 0; }
.field--check input { width: auto; }
.modal__error { color: #B3261E; font-size: .82rem; margin: 0 0 .9rem; }
.modal__consent, .modal__note { font-size: .78rem; color: var(--text-mute); margin: 0 0 .6rem; }
.modal__actions { display: flex; gap: .75rem; margin-top: 1.25rem; }
.modal__success p { font-size: .95rem; color: var(--text); }
@media (max-width: 560px) { .footer__affiliate { flex-direction: column; align-items: flex-start; } .footer__affiliate .btn { width: 100%; text-align: center; } }

/* =========================================================================
   MOTION — reveal on scroll
   ========================================================================= */
[data-rise] { opacity: 0; transform: translateY(34px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-rise].in { opacity: 1; transform: none; }
.sec-head[data-rise] .lead { transition-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1 !important; transform: none !important; }
  .ticker__row, .tp-strip__track { animation: none; }
  .hero__slide img, .hero__slide picture, .final__media img, .manifesto__cell img, .tp-strip__item img { transform: none !important; }
}

/* =========================================================================
   TRIP PAGE — template único reutilizado por todas as viagens (trip.html)
   Ref. de estrutura: vita-travel.webflow.io (retreat detail page)
   ========================================================================= */

/* --- CTA final com foto de fundo (reaproveita .final/.final__media da home;
       ver trip.js) — scrim mais claro que o da home de propósito: aqui a
       intenção é a foto continuar visível atrás do texto, não um pano de
       fundo escuro como na home. --tp-cta-overlay deixa a intensidade
       configurável por trip (0–1); sem overlay definido, usa o padrão abaixo. */
.tp-cta.final { --tp-cta-overlay: .46; }
.tp-cta .final__media::after { background: rgba(14,26,34, var(--tp-cta-overlay)); }

/* --- placeholder de imagem (até a foto definitiva ser adicionada) --- */
.tp-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem; background: linear-gradient(150deg, var(--navy) 0%, var(--sea) 100%);
  color: rgba(255,255,255,.82); font-family: var(--f-body); font-weight: 600;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
}
.tp-ph::before { content: "◇"; display: block; font-size: 1.1rem; margin-bottom: .5rem; opacity: .8; }

/* --- hero (fundo escuro para o nav fixo/transparente continuar legível) --- */
.tp-hero { background: var(--ink); color: #fff; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.tp-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  padding-top: calc(5.75rem + 1vw); padding-bottom: clamp(1.5rem, 4vw, 3rem);
  font-size: .76rem; color: rgba(255,255,255,.5);
}
.tp-crumbs a { color: rgba(255,255,255,.78); }
.tp-crumbs a:hover { color: #fff; }
h1.tp-hero__title { color: #fff; font-size: var(--fs-h2); max-width: 22ch; margin: 0 0 .5rem; }
.tp-hero__sub { color: rgba(255,255,255,.8); max-width: 58ch; font-size: var(--fs-lead); margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); }
/* colagem/esteira de fotos do hero — várias visíveis ao mesmo tempo, sem seta.
   Altura da fileira fixa; largura de cada item livre (auto, pela proporção
   real do arquivo) — fotos horizontais, verticais e panorâmicas convivem
   sem crop, cada uma com sua largura própria (regra visual pedida pela
   Manu: fotografia inteira > container uniforme). */
.tp-strip { overflow: clip; }
.tp-strip__track { display: flex; align-items: center; gap: .85rem; width: max-content; padding-inline: var(--gutter); animation: tp-strip 42s linear infinite; }
.tp-strip__item { position: relative; flex: none; height: clamp(260px, 34vw, 420px); border-radius: var(--r); overflow: clip; background: var(--bone-2); }
.tp-strip__item img { display: block; height: 100%; width: auto; max-width: none; }
.tp-strip__item .tp-ph { position: relative; inset: auto; height: 100%; width: clamp(220px, 24vw, 340px); }
@keyframes tp-strip { to { transform: translateX(-33.3333%); } }
@media (max-width: 640px) {
  .tp-strip__item { height: 62vw; }
}

/* --- hero editorial (ex.: Ano Novo) — mesmo hero padrão (photoStrip), só
       com espaço extra pros "fatos rápidos" que entram logo abaixo. --- */
.tp-hero__cta { margin-top: clamp(1.25rem, 3vw, 1.75rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
.tp-hero-facts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 0; }
.tp-hero-facts__item {
  display: inline-flex; align-items: center; padding: .7em 1.1em; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}

/* --- colagem "bento" reutilizável (Clube, Porto Fino):
       1 foto principal + 1 larga + 2 quadradas (4 imgs), ou principal +
       demais empilhadas (2-3 imgs). No mobile vira rolagem horizontal. --- */
.tp-bento { display: flex; gap: 1rem; aspect-ratio: 16 / 9; }
.tp-bento__main { flex: 1.4; position: relative; border-radius: var(--r); overflow: clip; background: var(--bone-2); }
.tp-bento__side { flex: 1; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.tp-bento__side-top { flex: 1; position: relative; border-radius: var(--r); overflow: clip; background: var(--bone-2); }
.tp-bento__side-bottom { flex: 1; display: flex; gap: 1rem; }
.tp-bento__side-cell { flex: 1; position: relative; border-radius: var(--r); overflow: clip; background: var(--bone-2); min-width: 0; }
.tp-bento img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .tp-bento { aspect-ratio: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .tp-bento::-webkit-scrollbar { display: none; }
  .tp-bento__side, .tp-bento__side-bottom { display: contents; }
  .tp-bento__main, .tp-bento__side-top, .tp-bento__side-cell { flex: 0 0 78%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
}
/* respiro entre a galeria da Porto Fino e "Comodidades" (só onde um h3 vem
   logo depois de um bento — hoje só a hospedagem de Ano Novo) */
.tp-bento + h3 { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* --- datas fixas (ex.: Ano Novo) — sem escolha de mês, diferente do
       Monte Sua Trip --- */
.tp-dates__range { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0; }
.tp-dates__note { margin-top: .5rem !important; }

/* --- destaque de horas dentro de um card de perfil (ex.: "16 horas de
       aulas" no Pacote Iniciante) --- */
.tp-learn__highlight {
  margin-top: 1rem !important; padding: .9rem 1.1rem; border-radius: var(--r); background: var(--bone-2);
  display: flex; flex-direction: column; gap: .15rem;
}
.tp-learn__highlight strong { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; color: var(--text); }
.tp-learn__highlight span { font-size: .78rem; color: var(--text-mute); }

/* --- Réveillon opcional — cartões em rolagem horizontal (mesma técnica de
       scroll-snap do carrossel de trips da home) --- */
.tp-parties {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 22rem);
  gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-top: 1.5rem; padding-bottom: .25rem;
}
.tp-parties::-webkit-scrollbar { display: none; }
.tp-parties__card { scroll-snap-align: start; background: var(--bone-2); border-radius: var(--r); padding: 1.5rem; }
.tp-parties__num { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--sun); margin-bottom: .75rem; }
.tp-parties__card h3 { margin: .3rem 0 .5rem; }

/* --- frase de reposicionamento — respiro editorial, sem imagem --- */
.tp-reposition { background: var(--bone-2); border-radius: var(--r); padding: clamp(1.75rem, 4vw, 2.75rem); }
.tp-reposition p.lead { margin-top: .5rem; max-width: none; }

/* --- subnav de âncoras --- */
.tp-anchors { border-bottom: 1px solid var(--hair); background: var(--bone); }
.tp-anchors__row { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.25rem); padding-block: 1.1rem; overflow-x: auto; }
.tp-anchors__row a {
  white-space: nowrap; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute);
}
.tp-anchors__row a:hover { color: var(--text); }

/* --- layout principal: conteúdo + sidebar de reserva --- */
.tp-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-block: var(--section-y); }
.tp-main { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 4.5rem); min-width: 0; }
.tp-block h2 { margin: 0 0 .9rem; }
.tp-block p { color: var(--text-soft); margin: 0 0 .9rem; max-width: 62ch; }
.tp-block p:last-child { margin-bottom: 0; }

.tp-sidebar { position: sticky; top: 6rem; }
.tp-sidebar__card { background: var(--bone-2); border-radius: var(--r); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; }
.tp-sidebar__from { margin: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); }
.tp-sidebar__price { margin: -.6rem 0 0; font-family: var(--f-display); font-size: 2rem; letter-spacing: -0.02em; }
.tp-sidebar__facts { display: grid; gap: .6rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: .84rem; }
.tp-sidebar__facts div { display: flex; justify-content: space-between; gap: 1rem; }
.tp-sidebar__facts dt { color: var(--text-mute); text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; padding-top: .2rem; }
.tp-sidebar__facts dd { margin: 0; color: var(--text-soft); text-align: right; }
.tp-sidebar__card .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) {
  .tp-layout { grid-template-columns: 1fr; }
  .tp-sidebar { position: static; order: -1; }
}

/* --- guia (Team) --- */
.tp-guide__row { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
.tp-guide__media { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: clip; background: var(--bone-2); }
.tp-guide__media img, .tp-guide__media .tp-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-guide__name { margin: .2rem 0 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.3rem; }
.tp-guide__role { margin: .2rem 0 0; color: var(--text-mute); font-size: .84rem; }
.tp-guide__bio { margin-top: .8rem !important; }
@media (max-width: 640px) { .tp-guide__row { grid-template-columns: 1fr; } .tp-guide__media { max-width: 220px; } }

/* --- roteiro / itinerário --- */
/* "Programação dia a dia" precisa de mais respiro antes de começar, em vez
   de ficar colada ao check-in/check-out ou à nota acima (aumento pequeno,
   só o suficiente pra separar as duas partes do Roteiro). */
#tp-roteiro h3 { margin-top: clamp(1.75rem, 4vw, 2.25rem); }
.tp-checkinout { display: flex; gap: clamp(1.5rem, 4vw, 3rem); margin: 0 0 1rem; font-size: .84rem; }
.tp-checkinout b { display: block; font-family: var(--f-display); font-size: 1rem; }
.tp-itinerary { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.tp-itinerary li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--hair); }
.tp-itinerary li:first-child { border-top: 0; padding-top: 0; }
.tp-itinerary b { font-family: var(--f-display); font-weight: 700; }
.tp-itinerary span { color: var(--text-soft); }
@media (max-width: 560px) { .tp-itinerary li { grid-template-columns: 1fr; gap: .3rem; } }

/* --- hospedagem --- */
.tp-accommodation { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
.tp-accommodation__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: clip; background: var(--bone-2); }
.tp-accommodation__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .tp-accommodation { grid-template-columns: 1fr; } .tp-accommodation__media { order: -1; } }

/* --- "Datas 2027" (ex.: Los Roques) — cards por mês/semana --- */
.tp-season { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.25rem; }
.tp-season__monthname { margin: 0 0 .75rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.tp-season__weeks { display: flex; flex-wrap: wrap; gap: .75rem; }
.tp-season__week {
  display: inline-flex; align-items: center; padding: .85em 1.2em; border-radius: var(--r);
  background: var(--bone-2); font-size: .86rem; font-weight: 600; color: var(--text);
  border: 1px solid var(--hair);
}
.tp-block .btn { margin-top: 1.5rem; }

/* --- "Reserve sua vaga" (ex.: Los Roques) --- */
.tp-deposit { background: var(--bone-2); border-radius: var(--r); padding: clamp(1.5rem, 4vw, 2.5rem); }
.tp-deposit__hi { color: var(--sun); }

/* --- nota pequena abaixo de uma lista (ex.: observação do "incluso") --- */
.tp-note { font-size: .8rem; color: var(--text-mute); margin-top: .75rem !important; }

/* --- valor "a partir de" na sidebar, com a unidade (ex.: "por pessoa") --- */
.tp-sidebar__unit { margin: -.7rem 0 0; font-size: .76rem; color: var(--text-mute); }

/* --- CTA fixo discreto no rodapé, só mobile (ex.: Los Roques) --- */
.tp-sticky-cta {
  display: none; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 70;
  justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
@media (max-width: 760px) {
  .tp-sticky-cta { display: flex; }
  body:has(.tp-sticky-cta) { padding-bottom: 4.5rem; }
}

/* --- hospedagem com várias opções (ex.: Los Roques) — um card por opção,
       cada uma com sua própria foto/nome/valor, visualmente separadas --- */
/* grid de 2 colunas: com 4 opções (Los Roques) forma 2×2 equilibrado em vez
   de 3+1; com 2 opções (ex.: Porto Fino / Awara) forma 1 linha de 2 —
   mesma lógica "fácil de comparar" nos dois casos. */
.tp-acc-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-top: 1.5rem; }
/* Comodidades logo após o grid de opções (ex.: Los Roques) — mesma
   "sensação" de respiro do espaçamento entre seções (.tp-main gap), em vez
   de ficar colado ao último card. */
.tp-acc-options + h3 { margin-top: clamp(3rem, 6vw, 4.5rem); }
.tp-acc-option__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: clip; background: var(--bone-2); }
.tp-acc-option__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-acc-option__badge {
  position: absolute; left: .75rem; top: .75rem; z-index: 1; padding: .45em .9em; border-radius: 999px;
  background: rgba(14,26,34,.75); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tp-acc-option__namerow { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; }
.tp-acc-option__namerow .tp-acc-option__name { margin: 0; }
.tp-acc-option__tag {
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sun);
  border: 1px solid var(--sun); border-radius: 999px; padding: .3em .7em;
}
.tp-acc-option__name { margin: .9rem 0 0; font-size: 1rem; }
.tp-acc-option__note { margin: .3rem 0 0; color: var(--text-soft); font-size: .84rem; }
.tp-acc-option__price { margin: .5rem 0 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
@media (max-width: 900px) { .tp-acc-options { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tp-acc-options { grid-template-columns: 1fr; max-width: 26rem; } }

/* --- listas com check/x (incluso, não incluso, comodidades, ideal para) --- */
.tp-inout__list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .65rem; }
.tp-inout__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--text-soft); }
.tp-inout__list li svg { width: 1.05em; height: 1.05em; flex: none; margin-top: .15em; }
.tp-inout--yes svg { color: var(--sea); }
.tp-inout--no svg { color: var(--text-mute); }

/* --- par de listas dentro da hospedagem (comodidades / ideal para) --- */
.tp-acc-lists { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); margin-top: 1.25rem; }
.tp-acc-lists h3 { margin: 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); }
@media (max-width: 480px) { .tp-acc-lists { grid-template-columns: 1fr; } }

/* --- diferença por perfil (ex.: Iniciante × Velejador em São Miguel do
       Gostoso) — dois cards lado a lado, cada um com seus itens extras --- */
.tp-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: 1.5rem; }
.tp-profile__summary { font-weight: 600; color: var(--text); }
@media (max-width: 640px) { .tp-profiles { grid-template-columns: 1fr; } }

/* --- tabela de preços (ex.: São Miguel do Gostoso "Monte sua trip") —
       tabela no desktop, cards no mobile; mesmo dado, sem scroll horizontal --- */
.tp-pricing { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: 1.5rem; }
.tp-pricing__group h3 { margin: 0 0 .9rem; }
.tp-pricing__table { width: 100%; border-collapse: collapse; }
.tp-pricing__table th, .tp-pricing__table td { text-align: left; padding: .75em 1em; border-bottom: 1px solid var(--hair); font-size: .92rem; }
.tp-pricing__table th { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.tp-pricing__table td:not(:first-child), .tp-pricing__table th:not(:first-child) { text-align: right; font-family: var(--f-display); }
.tp-pricing__cards { display: none; }
@media (max-width: 640px) {
  .tp-pricing__table { display: none; }
  .tp-pricing__cards { display: grid; gap: 1rem; }
  .tp-pricing__card { background: var(--bone-2); border-radius: var(--r); padding: 1.25rem; }
  .tp-pricing__card-name { margin: 0 0 .6rem; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1rem; }
  .tp-pricing__card-row { display: flex; justify-content: space-between; padding-block: .4rem; border-top: 1px dotted var(--hair); font-size: .88rem; }
  .tp-pricing__card-row:first-of-type { border-top: 0; }
  .tp-pricing__card-row b { font-family: var(--f-display); }
}

/* --- "Viajando acompanhado?" --- */
.tp-companion { background: var(--bone-2); border-radius: var(--r); padding: clamp(1.5rem, 4vw, 2.5rem); }
.tp-companion .btn { margin-top: 1.25rem; }

/* --- Parrachos do Fogo — foto protagonista + estatísticas + citação --- */
.tp-parrachos__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: clip; background: var(--bone-2); }
.tp-parrachos__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-parrachos__stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.tp-parrachos__stat {
  display: inline-flex; align-items: center; padding: .7em 1.1em; border-radius: 999px;
  background: var(--bone-2); font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--text);
}
.tp-parrachos__quote {
  margin: 1.5rem 0 0; padding-left: 1rem; border-left: 3px solid var(--sun);
  font-family: var(--f-display); font-size: 1.15rem; font-style: normal; color: var(--text);
}
.tp-parrachos__quote cite { display: block; margin-top: .4rem; font-family: var(--f-body); font-size: .74rem; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }

/* --- "Monte sua trip" — passos numerados + CTA final --- */
.tp-builder__steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; }
.tp-builder__steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--hair); }
.tp-builder__steps li:first-child { border-top: 0; padding-top: 0; }
.tp-builder__num { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; color: var(--sun); }
.tp-builder__q { display: block; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }
.tp-builder__a { display: block; margin-top: .25rem; color: var(--text-soft); }
.tp-builder__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.tp-builder__chip {
  display: inline-flex; align-items: center; padding: .55em 1em; border-radius: 999px;
  background: var(--bone-2); font-size: .78rem; font-weight: 600; color: var(--text);
}
.tp-builder .btn { margin-top: 1.75rem; }

/* --- Clube (ex.: Dr. Wind) — mesma linguagem visual dos Parrachos:
       foto grande + pouco texto + destaques em pills --- */
.tp-club__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: clip; background: var(--bone-2); }
.tp-club__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-club__features { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.tp-club__feature {
  display: inline-flex; align-items: center; padding: .7em 1.1em; border-radius: 999px;
  background: var(--bone-2); font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--text);
}

/* --- FAQ (accordion) --- */
.tp-faq { border-top: 1px solid var(--hair); }
.tp-faq__item { border-bottom: 1px solid var(--hair); }
.tp-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; padding: 1.1rem 0; text-align: left; cursor: pointer;
  font-family: var(--f-display); font-weight: 600; font-size: .98rem; color: var(--text);
}
.tp-faq__q svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .3s var(--ease); color: var(--text-mute); }
.tp-faq__item.is-open .tp-faq__q svg { transform: rotate(45deg); }
.tp-faq__a { display: none; margin: 0 0 1.2rem; color: var(--text-soft); max-width: 62ch; white-space: pre-line; }
.tp-faq__item.is-open .tp-faq__a { display: block; }

/* --- outras trips + CTA final --- */
.tp-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .tp-related__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tp-related__grid { grid-template-columns: 1fr; max-width: 26rem; } }

/* --- não encontrada --- */
.tp-notfound { min-height: 60vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.25rem; padding-block: 8rem clamp(3rem,6vw,5rem); }