/* base.css — sistema + hero (Novo lar) — Dra. Karina Uchôa */

:root {
  /* ===== sistema (02-conceito/sistema.md) ===== */
  --marinho: #13304a;
  --noite: #0d2238;
  --noite-2: #0a1b2d;
  --lilas: #8f8aa6;
  --morro: #4e5a45;
  --creme: #efe6da;
  --papel: #f6f1ea;
  --papel-2: #ece4d8;
  --areia: #b9a99a;
  --ceu: #c9cdd2;
  --nevoa: #eef0f3;
  --pessego: #f0c3a8;
  --pessego-escuro: #b8643f;
  --coral: #f08a76;
  --coral-escuro: #c4533d;
  --tx-escuro-2: rgb(239 230 218 / .78);
  --tx-claro-2: #4a5a6b;

  --sans: "Red Hat Display", system-ui, sans-serif;
  --serif: "Gelasio", Georgia, serif;

  --pad: clamp(20px, 5.4vw, 84px);
  --max: 1280px;
  --sec: clamp(88px, 12vw, 168px);
  --t-h2: clamp(2rem, 1.1rem + 3.2vw, 3.6rem);
  --t-h3: clamp(1.35rem, 1rem + 1.1vw, 1.75rem);
  --t-corpo: clamp(1.0625rem, 0.6vw + 0.8rem, 1.1875rem);
  --t-mini: .875rem;
  --ease: cubic-bezier(.2, .7, .15, 1);
  --raio: 18px;
  --wa: "https://wa.me/5521971212425";

  /* ===== aliases do hero ===== */
  --d-marinho: var(--marinho);
  --d-noite: var(--noite);
  --d-ceu: var(--ceu);
  --d-areia: var(--areia);
  --d-morro: var(--morro);
  --d-creme: var(--creme);
  --d-nevoa: var(--nevoa);
  --d-pessego: var(--pessego);
  --d-lilas: var(--lilas);
  --d-coral: var(--coral);
  --d-sans: var(--sans);
  --d-serif: var(--serif);
  --d-pad: var(--pad);
  --d-col: min(660px, max(45vw, 470px));
  --d-h1: clamp(2.25rem, min(4.55vw, 7.3vh), 4.35rem);
  --d-corpo: var(--t-corpo);
  --d-ease: var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--d-noite);
  color: var(--d-creme);
  font-family: var(--d-sans);
  font-size: var(--d-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; }

/* ---------- navegação ---------- */
.d-nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(14px, 2.4vh, 24px) var(--d-pad);
}
.d-marca {
  display: grid;
  gap: 2px;
  text-decoration: none;
  color: var(--d-creme);
  text-shadow: 0 1px 14px rgb(13 34 56 / .45);
}
.d-marca-nome { font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; line-height: 1.1; }
.d-marca-sub { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .82; }

.d-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 8px;
  border-radius: 999px;
  background: rgb(239 230 218 / .80);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px -14px rgb(13 34 56 / .5);
}
.d-links { display: flex; }
.d-links a {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--d-marinho);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .25s;
}
.d-links a:hover { background: rgb(19 48 74 / .08); }
.d-nav-btn {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--d-marinho);
  color: var(--d-creme);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .25s;
}
.d-nav-btn:hover { background: var(--d-noite); }
.d-links a:focus-visible, .d-nav-btn:focus-visible, .d-marca:focus-visible,
.d-btn:focus-visible, .d-sec:focus-visible { outline: 2px solid var(--d-pessego); outline-offset: 3px; }

/* ---------- hero ---------- */
.d-hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  max-height: 1100px;
  overflow: clip;
  isolation: isolate;
  background: var(--d-marinho);
}

.d-cena { position: absolute; inset: 0; z-index: 0; }

/* A foto: enquadrada para que ela vire figura (do peito para cima),
   com os morros do Rio acima da cabeça. Medidas em unidades da própria caixa. */
.d-foto-caixa {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
}
.d-foto {
  --h: max(160cqh, 56.25cqw);
  position: absolute;
  top: 0;
  left: clamp(calc(100cqw - var(--h) * 1.7778), calc(69cqw - var(--h) * .9097), 0px);
  width: calc(var(--h) * 1.7778);
  height: var(--h);
  max-width: none;
  transform-origin: 64% 30%;
  filter: saturate(.94) contrast(1.03);
}

/* luz de fim de tarde sobre a foto (pêssego/lilás em soft-light) */
.d-luz {
  position: absolute;
  inset: -15%;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse 48% 42% at 78% 6% in oklch, rgb(240 195 168 / .95), rgb(240 195 168 / 0)),
    radial-gradient(ellipse 34% 40% at 64% 40% in oklch, rgb(240 195 168 / .55), rgb(240 195 168 / 0)),
    radial-gradient(ellipse 40% 55% at 104% 70% in oklch, rgb(143 138 166 / .85), rgb(143 138 166 / 0)),
    radial-gradient(ellipse 38% 40% at 40% 2% in oklch, rgb(143 138 166 / .6), rgb(143 138 166 / 0));
  animation: d-luz 32s ease-in-out infinite alternate;
}
.d-luz::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 40% 26% at 74% 5% in oklab, rgb(240 195 168 / .4), rgb(240 195 168 / 0)),
    radial-gradient(ellipse 26% 30% at 100% 46% in oklab, rgb(143 138 166 / .16), rgb(143 138 166 / 0));
}

/* véu marinho à esquerda, em malha */
.d-veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg in oklab, rgb(13 34 56 / .42) 0%, rgb(13 34 56 / 0) 17%),
    linear-gradient(0deg in oklab, rgb(13 34 56 / .5) 0%, rgb(13 34 56 / 0) 28%),
    linear-gradient(90deg in oklab, rgb(13 34 56 / .9) 0%, rgb(19 48 74 / .8) calc(var(--d-col) * .55), rgb(19 48 74 / .55) calc(var(--d-col) + var(--d-pad) * .6), rgb(19 48 74 / 0) calc(var(--d-col) + var(--d-pad) + 12vw));
}
.d-malha {
  position: absolute;
  inset: -20% 30% -20% -20%;
  background:
    radial-gradient(ellipse 40% 34% at 30% 26% in oklab, rgb(143 138 166 / .42), rgb(143 138 166 / 0)),
    radial-gradient(ellipse 44% 36% at 24% 84% in oklab, rgb(78 90 69 / .5), rgb(78 90 69 / 0)),
    radial-gradient(ellipse 30% 30% at 62% 58% in oklab, rgb(13 34 56 / .45), rgb(13 34 56 / 0)),
    radial-gradient(ellipse 26% 22% at 56% 18% in oklab, rgb(240 195 168 / .14), rgb(240 195 168 / 0));
  animation: d-malha 27s ease-in-out infinite alternate;
}

/* granulado fixo */
.d-grao {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ---------- conteúdo ---------- */
.d-conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  width: calc(var(--d-col) + var(--d-pad));
  padding: clamp(104px, 15vh, 150px) 0 clamp(26px, 4.4vh, 46px) var(--d-pad);
}

.d-quem {
  margin: 0 0 clamp(12px, 2vh, 20px);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--d-pessego);
}

.d-titulo {
  margin: 0;
  font-size: var(--d-h1);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.d-linha { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.d-linha > span { display: block; }
.d-l1 { font-weight: 500; }
.d-l2 { font-weight: 700; }
.d-lugar {
  font-family: var(--d-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.04em;
  letter-spacing: -.01em;
}

.d-apoio {
  margin: clamp(14px, 2.4vh, 24px) 0 0;
  max-width: 34em;
  color: rgb(239 230 218 / .9);
  text-wrap: pretty;
}
.d-apoio strong { font-weight: 600; color: var(--d-creme); }

.d-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin-top: clamp(18px, 3.2vh, 32px);
}
.d-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px 0 22px;
  border-radius: 999px;
  background: var(--d-creme);
  color: var(--d-marinho);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  box-shadow: 0 14px 34px -16px rgb(240 195 168 / .9);
  transition: background-color .3s, transform .3s var(--d-ease);
}
.d-btn svg { width: 21px; height: 21px; fill: currentColor; }
.d-btn:hover { background: var(--d-pessego); transform: translateY(-2px); }
.d-sec {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(240 195 168 / .6);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
.d-sec:hover { text-decoration-color: var(--d-pessego); }

.d-registro span { white-space: nowrap; }
.d-reg-nome { color: var(--d-creme); font-weight: 500; }
.d-registro {
  margin: clamp(12px, 2vh, 18px) 0 0;
  font-size: .8125rem;
  letter-spacing: .02em;
  color: rgb(239 230 218 / .78);
}

/* base: percurso + prova */
.d-base {
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: auto;
  padding-top: clamp(14px, 2.6vh, 28px);
}
.d-rota { margin: 0; flex: none; }
.d-rota-leg {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(239 230 218 / .7);
  margin-bottom: 4px;
}
.d-mapa { position: relative; width: clamp(240px, min(23vw, 36vh), 330px); padding-bottom: 34px; }
.d-rota-svg { display: block; width: 100%; height: auto; overflow: visible; }

.d-trilha { fill: none; stroke: rgb(239 230 218 / .3); stroke-width: 1.2; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.d-traco { fill: none; stroke: var(--d-pessego); stroke-width: 2; stroke-linecap: round; }
.d-nucleo { fill: var(--d-creme); }
.d-destino { fill: var(--d-coral); }
.d-onda { fill: none; stroke: var(--d-coral); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.d-viajante { fill: #fff; opacity: 0; filter: drop-shadow(0 0 5px var(--d-pessego)); }

.d-rotulo { position: absolute; margin: 0; display: grid; gap: 1px; line-height: 1.15; white-space: nowrap; }
.d-cidade { font-family: var(--d-serif); font-style: italic; font-weight: 500; font-size: 1.1875rem; color: var(--d-creme); }
.d-nota { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(239 230 218 / .74); }
.d-r1 { right: 7.6%; bottom: calc(100% - 74 / 230 * (100% - 34px) + 12px); text-align: right; }
.d-r2 { left: 0; top: calc(202 / 230 * (100% - 34px) + 9px); }
.d-r3 { left: calc(166 / 340 * 100%); top: calc(184 / 230 * (100% - 34px)); transform: translateY(-.72em); }
.d-chegou .d-onda { animation: d-onda 3.4s ease-out infinite; }
.d-chegou .d-onda-2 { animation-delay: 1.7s; }

.d-prova {
  margin: 0 0 6px;
  max-width: 270px;
  padding-left: 20px;
  border-left: 1px solid rgb(240 195 168 / .45);
}
.d-estrelas { margin: 0 0 8px; font-size: .875rem; color: rgb(239 230 218 / .85); }
.d-estrelas span { color: var(--d-pessego); letter-spacing: .12em; margin-right: 4px; }
.d-estrelas strong { color: var(--d-creme); }
.d-citacao {
  margin: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.38;
  color: var(--d-creme);
  text-wrap: balance;
}
.d-autor { margin-top: 8px; font-size: .8125rem; color: rgb(239 230 218 / .72); }

/* ---------- entrada (só com JS) ---------- */
.js .d-rev { opacity: 0; transform: translateY(18px); }
.js .d-linha > .d-rev { opacity: 1; transform: translateY(108%); }
.js .d-on .d-rev {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--d-ease), transform 1s var(--d-ease);
  transition-delay: calc(var(--d) * 110ms + 80ms);
}
.js .d-foto { opacity: 0; transform: scale(1.07); }
.js .d-on .d-foto { opacity: 1; transform: none; transition: opacity 1.1s ease-out .1s, transform 2.8s var(--d-ease) .1s; }
.js .d-traco { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .d-ponto { opacity: 0; transition: opacity .5s ease-out; }
.js .d-ponto.d-vis { opacity: 1; }

.d-pausa .d-luz, .d-pausa .d-malha, .d-pausa .d-onda { animation-play-state: paused; }

@keyframes d-luz {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-4%, 3%, 0) scale(1.08); }
}
@keyframes d-malha {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(5%, -4%, 0); }
  100% { transform: translate3d(-3%, 5%, 0); }
}
@keyframes d-onda {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(4.2); }
}

/* telas de notebook baixas: compacta o topo para o percurso caber */
@media (min-width: 901px) and (max-height: 800px) {
  .d-conteudo { padding-top: clamp(84px, 12.5vh, 104px); }
  .d-quem { margin-bottom: 10px; }
  .d-rota-leg { display: none; }
  .d-mapa { width: clamp(236px, min(22vw, 31vh), 300px); }
  .d-base { padding-top: 12px; }
}

/* ---------- celular e tablet em pé ---------- */
@media (max-width: 900px) {
  :root {
    --d-h1: clamp(2.1rem, 9.4vw, 3.4rem);
    --d-foto-alt: clamp(430px, 122vw, 700px);
  }
  .d-hero { height: auto; min-height: 100svh; max-height: none; }
  .d-marca-sub { display: none; }
  .d-links { display: none; }
  .d-menu { padding: 4px; }
  .d-nav-btn { padding: 9px 18px; }

  .d-foto-caixa {
    inset: 0 0 auto 0;
    height: var(--d-foto-alt);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  /* ela grande: rosto no centro, do topo dos morros ao colar */
  .d-foto {
    --h: min(232cqw, 192.5cqh);
    top: calc(var(--h) * -.0778);
    left: clamp(calc(100cqw - var(--h) * 1.7778), calc(50cqw - var(--h) * .9097), 0px);
  }
  .d-luz { inset: -10%; }
  .d-veu {
    background:
      linear-gradient(180deg in oklab, rgb(13 34 56 / .55) 0px, rgb(13 34 56 / 0) 110px),
      linear-gradient(180deg in oklab, rgb(19 48 74 / 0) calc(var(--d-foto-alt) * .6), rgb(19 48 74 / .82) calc(var(--d-foto-alt) * .9), rgb(19 48 74 / .9) var(--d-foto-alt));
  }
  .d-malha {
    inset: calc(var(--d-foto-alt) * .55) -30% -10% -30%;
    background:
      radial-gradient(ellipse 50% 30% at 22% 20% in oklab, rgb(143 138 166 / .4), rgb(143 138 166 / 0)),
      radial-gradient(ellipse 55% 32% at 80% 66% in oklab, rgb(78 90 69 / .45), rgb(78 90 69 / 0)),
      radial-gradient(ellipse 50% 26% at 70% 8% in oklab, rgb(240 195 168 / .16), rgb(240 195 168 / 0));
  }
  .d-conteudo {
    width: auto;
    height: auto;
    padding: calc(var(--d-foto-alt) - 52px) var(--d-pad) 40px;
  }
  .d-quem { font-size: .75rem; }
  .d-titulo { letter-spacing: -.02em; }
  .d-base {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    width: 100%;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgb(239 230 218 / .16);
  }
  .d-mapa { width: min(100%, 340px); }
  .d-reg-nome { display: block; margin-bottom: 2px; }
  .d-reg-sep1 { display: none; }
  .d-prova { max-width: 34em; }
}

@media (min-width: 600px) and (max-width: 900px) {
  .d-base { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .d-prova { max-width: 300px; }
}

@media (max-width: 380px) {
  .d-btn { padding: 0 20px 0 18px; font-size: 1rem; }
  .d-marca-nome { font-size: 1rem; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .d-rev, .js .d-linha > .d-rev, .js .d-foto { opacity: 1 !important; transform: none !important; }
  .js .d-traco { stroke-dashoffset: 0 !important; }
  .js .d-ponto { opacity: 1 !important; }
  .d-viajante { opacity: 0 !important; }
}


/* =================================================================
   COMPONENTES COMPARTILHADOS (todas as seções)
   ================================================================= */
html { scroll-padding-top: 20px; }
body { overflow-x: clip; }
::selection { background: var(--pessego); color: var(--noite); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.secao { position: relative; padding: var(--sec) var(--pad); overflow: clip; isolation: isolate; }
.secao--escura { background: var(--marinho); color: var(--creme); }
.secao--noite { background: var(--noite); color: var(--creme); }
.secao--clara { background: var(--papel); color: var(--marinho); }
.miolo { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }

.rotulo { margin: 0 0 18px; font-size: .8125rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pessego); }
.secao--clara .rotulo { color: var(--pessego-escuro); }
.h2 { margin: 0; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.025em; font-weight: 500; text-wrap: balance; }
.h2 b, .h2 strong { font-weight: 700; }
.lugar, .voz { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.lugar { font-size: 1.04em; }
.h3 { margin: 0; font-size: var(--t-h3); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.texto { font-size: var(--t-corpo); line-height: 1.55; text-wrap: pretty; }
.secao--escura .texto, .secao--noite .texto { color: var(--tx-escuro-2); }
.secao--clara .texto { color: var(--tx-claro-2); }

.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px 0 22px; border-radius: 999px; font-weight: 700; font-size: 1.0625rem; text-decoration: none; transition: background-color .3s, transform .3s var(--ease); background: var(--creme); color: var(--marinho); box-shadow: 0 14px 34px -16px rgb(240 195 168 / .9); }
.btn:hover { background: var(--pessego); transform: translateY(-2px); }
.secao--clara .btn { background: var(--marinho); color: var(--creme); box-shadow: 0 14px 34px -16px rgb(13 34 56 / .6); }
.secao--clara .btn:hover { background: var(--noite); }
.btn svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
.btn-sec { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(240 195 168 / .6); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.secao--clara .btn-sec { text-decoration-color: rgb(184 100 63 / .6); }
.btn:focus-visible, .btn-sec:focus-visible, .secao a:focus-visible, .secao button:focus-visible { outline: 2px solid var(--pessego); outline-offset: 3px; }
.secao--clara a:focus-visible, .secao--clara button:focus-visible { outline-color: var(--pessego-escuro); }

.grao { position: absolute; inset: 0; pointer-events: none; opacity: .055; mix-blend-mode: overlay; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 180px; }

/* revelação por rolagem */
.js [data-rev] { opacity: 0; transform: translateY(18px); }
.js [data-rev].on { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }

/* o percurso (motivo central) */
.rota-trilha { fill: none; stroke: rgb(239 230 218 / .3); stroke-width: 1.2; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rota-traco { fill: none; stroke: var(--pessego); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rota-nucleo { fill: var(--creme); }
.rota-destino { fill: var(--coral); }
.rota-onda { fill: none; stroke: var(--coral); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rota-viajante { fill: #fff; opacity: 0; filter: drop-shadow(0 0 5px var(--pessego)); }
.rota--claro .rota-trilha { stroke: rgb(19 48 74 / .28); }
.rota--claro .rota-traco { stroke: var(--pessego-escuro); }
.rota--claro .rota-nucleo { fill: var(--marinho); }
.rota--claro .rota-destino { fill: var(--coral-escuro); }
.rota--claro .rota-onda { stroke: var(--coral-escuro); }
.rota--claro .rota-viajante { fill: var(--coral-escuro); filter: drop-shadow(0 0 4px rgb(240 138 118 / .8)); }
.js .rota-traco { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js [data-em] { opacity: 0; transition: opacity .5s ease-out, transform .6s var(--ease); }
.js [data-em].vis { opacity: 1; }
.rota-chegou .rota-onda { animation: d-onda 3.4s ease-out infinite; }
.rota-chegou .rota-onda + .rota-onda { animation-delay: 1.7s; }

/* WhatsApp flutuante (celular) */
.wa-flutua { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; display: none; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--creme); color: var(--marinho); font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: 0 12px 30px -10px rgb(10 27 45 / .7); transform: translateY(140%); transition: transform .5s var(--ease); }
.wa-flutua svg { width: 22px; height: 22px; fill: currentColor; }
.wa-flutua.vis { transform: none; }
@media (max-width: 900px) { .wa-flutua { display: inline-flex; } }