/* ---------- fontes (Archivo e Hanken Grotesk, SIL Open Font License) ----------
   Hospedadas no próprio site (pasta fonts/), os mesmos arquivos que a Google Fonts entregava. Antes vinham de 2 servidores
   externos e a folha de estilo da Google bloqueava a 1ª pintura. unicode-range: o navegador só baixa a faixa que a página usa. */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   DIJERI Experience
   Mundo visual: lagoa profunda (fundo), areia da duna (texto),
   laranja do pôr do sol (único acento, sempre a ação).
   Formas: botões e chips em pílula; cartões 22px; campos 14px.
   ========================================================= */

:root {
  /* cor */
  --ground: #051f22;
  --ground-2: #072a2e;
  --lagoon-700: #0f5f66;
  --lagoon-600: #12747a;
  --turq: #4fd6cb;
  --sand: #f1e9d6;
  --sand-2: #c9d3c6;   /* texto secundário, tingido de lagoa */
  --sand-3: #93aaa3;   /* texto terciário */
  --line: rgba(241, 233, 214, .16);
  --line-strong: rgba(241, 233, 214, .34);
  --surface: rgba(241, 233, 214, .055);
  --surface-2: rgba(241, 233, 214, .10);
  --orange: #f0793a;
  --orange-hi: #ff9358;
  --orange-ink: #1b0d05;

  /* tipo */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* forma */
  --r-card: 22px;
  --r-input: 14px;

  /* movimento */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);

  /* layout */
  --maxw: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 68px;

  /* escala de camadas */
  --z-fab: 40;
  --z-menu: 60;
  --z-skip: 100;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); color-scheme: dark; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--sand-2);
  font: 400 1.0625rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

::selection { background: var(--orange); color: var(--orange-ink); }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: #2f6f73 var(--ground); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: #2f6f73; border-radius: 10px; border: 2px solid var(--ground); }

.skip { position: fixed; left: 1rem; top: -4rem; z-index: var(--z-skip); background: var(--sand); color: var(--ground); padding: .7rem 1.1rem; border-radius: 999px; font-weight: 600; transition: top 200ms var(--ease-out); }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- tipografia ---------- */
.display, .h2, .brand__mark {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 760;
  color: var(--sand);
  text-wrap: balance;
}
.display { font-size: clamp(2.5rem, 5.8vw, 5.4rem); line-height: .98; letter-spacing: -.028em; }
.display em, .h2 em { font-style: italic; font-weight: 500; font-stretch: 100%; color: var(--orange-hi); padding-right: .04em; }
.display--center { text-align: center; }
.h2 { font-size: clamp(2.1rem, 4.6vw, 4.1rem); line-height: 1; letter-spacing: -.024em; padding-bottom: .06em; }
.h2--xl { font-size: clamp(2.3rem, 5.2vw, 4.6rem); }
/* nomes dos 3 passeios (Leste, Extremo, Oeste): mesmo tamanho e sempre numa linha só, de 360px ao desktop */
.h2--tour { font-size: clamp(2.35rem, 10.6vw, 4.9rem); line-height: .98; letter-spacing: -.03em; white-space: nowrap; }
h3 { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; color: var(--sand); line-height: 1.15; letter-spacing: -.01em; }
.lead__text { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--sand); max-width: 58ch; text-wrap: pretty; }
p { text-wrap: pretty; max-width: 68ch; }

.sec { position: relative; padding-bottom: clamp(5rem, 10vw, 9rem); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.5rem; border-radius: 999px;
  font: 650 1rem/1 var(--font-body); letter-spacing: .005em; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn i { font-size: 1.25em; transition: transform 240ms var(--ease-out); }
.btn--primary { background: var(--orange); color: var(--orange-ink); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--sand); background: rgba(5, 31, 34, .32); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--sm { padding: .72rem 1.15rem; font-size: .94rem; }
.btn--lg { padding: 1.1rem 1.75rem; font-size: 1.0625rem; }
.btn--xl { padding: 1.35rem 2.4rem; font-size: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--orange-hi); }
  .btn--ghost:hover { background: var(--sand); color: var(--ground); border-color: var(--sand); }
  .btn:hover .ph-arrow-down { transform: translateY(3px); }
}
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; line-height: 1.2; } }

.link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; color: var(--sand); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color 200ms, color 200ms; }
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--orange-hi); border-color: var(--orange-hi); } }

.round { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 1.2rem; color: var(--sand); transition: transform 160ms var(--ease-out), background-color 200ms, color 200ms; }
.round:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .round:hover { background: var(--sand); color: var(--ground); } }

/* ---------- navegação ---------- */
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 40px; pointer-events: none; }
.nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: calc(var(--z-menu) + 1); transition: background-color 300ms ease, border-color 300ms ease; border-bottom: 1px solid transparent; }
.nav::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 31, 34, .78), transparent); opacity: 1; transition: opacity 300ms; pointer-events: none; }
.nav.is-solid { background: rgba(5, 31, 34, .82); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-color: var(--line); }
.nav.is-solid::before { opacity: 0; }
.nav__inner { position: relative; height: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: baseline; gap: .5rem; line-height: 1; }
.brand__mark { font-stretch: 125%; font-weight: 800; letter-spacing: .06em; font-size: 1.2rem; }
.brand__sub { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: .9rem; color: var(--sand-2); letter-spacing: .01em; }
.brand--lg .brand__mark { font-size: 1.7rem; }
.brand--lg .brand__sub { font-size: 1.05rem; }
.nav__links { display: none; align-items: center; gap: clamp(.9rem, 1.6vw, 1.7rem); }
.nav__links a { position: relative; font-size: .94rem; font-weight: 550; color: var(--sand); opacity: .82; padding: .4rem 0; white-space: nowrap; transition: opacity 200ms; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.nav__links a.is-current { opacity: 1; }
.nav__links a.is-current::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { opacity: 1; } }
.nav__actions { display: flex; align-items: center; gap: .6rem; }
@media (min-width: 1420px) { .nav__links { display: flex; } .burger { display: none !important; } }
@media (min-width: 1420px) and (max-width: 1599px) { .nav__inner { gap: 1rem; } .nav__links { gap: 1rem; } .nav__links a { font-size: .9rem; } }
@media (max-width: 420px) { .nav__book { display: none; } }

/* idiomas: bandeiras clicáveis no header; a atual acesa e sublinhada como o link ativo do menu */
.flag-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.flags { display: flex; align-items: center; }
.flag { position: relative; display: grid; place-items: center; width: 30px; height: 44px; border-radius: 6px; }
.flag svg { display: block; width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(241, 233, 214, .22), 0 2px 6px -2px rgba(0, 10, 12, .6); opacity: .55; filter: saturate(.65); transition: opacity 200ms, filter 200ms, transform 300ms var(--ease-out); }
.flag::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transition: transform 300ms var(--ease-out); }
.flag[aria-current="true"] svg { opacity: 1; filter: none; }
.flag[aria-current="true"]::after { transform: scaleX(1); }
.flag:active svg { transform: scale(.92); }
.flag:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .flag:hover svg { opacity: 1; filter: none; transform: translateY(-1px); } }
.nav__actions .flags { margin-right: .2rem; }
/* celular: bandeiras menores e header mais justo para caberem entre a marca e o menu */
@media (max-width: 520px) {
  .nav__inner { gap: .5rem; }
  .nav__actions { gap: .35rem; }
  .nav__actions .flags { margin-right: 0; }
  .flag { width: 25px; }
  .flag svg { width: 22px; height: 15px; border-radius: 2.5px; }
  .flag::after { width: 14px; margin-left: -7px; bottom: 7px; }
  .brand__mark { font-size: 1.05rem; }
  .brand__sub { font-size: .8rem; }
}
@media (max-width: 374px) {
  .flag { width: 22px; }
  .flag svg { width: 19px; height: 13px; }
}
@media (max-width: 359px) { .brand__sub { display: none; } }

.burger { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-content: center; gap: 6px; }
.burger span { display: block; width: 18px; height: 1.8px; background: var(--sand); border-radius: 2px; transition: transform 300ms var(--ease-out); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.9px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.9px) rotate(-45deg); }

/* menu móvel: 6 destinos/serviços em lista principal, 2 links secundários, reserva fixa no rodapé; rola em telas baixas */
.menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--ground); padding: calc(var(--nav-h) + .75rem) var(--gutter) max(1.25rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 500ms var(--ease-io), opacity 200ms ease, visibility 0s linear 500ms; }
.menu.is-open { opacity: 1; visibility: visible; clip-path: inset(0); transition-delay: 0s; }
.menu__nav { display: grid; gap: 1.1rem; }
.menu__links { display: grid; border-top: 1px solid var(--line); }
.menu__links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding-block: .5rem; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-stretch: 105%; font-weight: 700; font-size: clamp(1.2rem, 5.4vw, 1.5rem); line-height: 1.15; letter-spacing: -.015em; color: var(--sand); }
.menu__links a i { flex: none; font-size: 1.1rem; color: var(--sand-3); transition: transform 300ms var(--ease-out), color 200ms; }
.menu__links a.is-current { color: var(--orange-hi); }
.menu__links a.is-current i { color: var(--orange-hi); }
.menu__links a:active i { transform: translateX(4px); }
.menu__more { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.menu__more a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 550; color: var(--sand-2); }
.menu__more a.is-current { color: var(--orange-hi); }
.menu__foot { margin-top: auto; display: flex; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.menu__foot .btn { flex: 1; min-width: 0; }
.menu__foot .round { flex: none; width: 52px; height: 52px; }
/* entrada: as linhas sobem em sequência quando o menu abre */
.menu__links a, .menu__more, .menu__foot { opacity: 0; transform: translateY(10px); transition: opacity 260ms ease, transform 420ms var(--ease-out); }
.menu.is-open .menu__links a, .menu.is-open .menu__more, .menu.is-open .menu__foot { opacity: 1; transform: none; transition-delay: calc(140ms + var(--i, 0) * 35ms); }
@media (prefers-reduced-motion: reduce) { .menu__links a, .menu__more, .menu__foot { transform: none; transition: opacity 200ms ease; } }
@media (hover: hover) and (pointer: fine) { .menu__links a:hover i { transform: translateX(4px); color: var(--sand); } .menu__more a:hover { color: var(--sand); } }
body.is-locked { overflow: hidden; }

.langrow { display: flex; gap: .4rem; flex-wrap: wrap; }
.langrow button { padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; font-weight: 650; letter-spacing: .06em; color: var(--sand-2); transition: background-color 200ms, color 200ms, border-color 200ms; }
.langrow button[aria-current="true"] { background: var(--sand); color: var(--ground); border-color: var(--sand); }
@media (hover: hover) and (pointer: fine) { .langrow button:not([aria-current="true"]):hover { border-color: var(--sand); color: var(--sand); } }

/* ---------- 1. hero ---------- */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
@media (max-width: 700px) { .hero__media img { object-position: 78% 58%; } }
.hero__grade { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(to top, var(--ground) 0%, rgba(5, 31, 34, .8) 14%, rgba(5, 31, 34, .32) 40%, rgba(5, 31, 34, 0) 64%),
    linear-gradient(100deg, rgba(5, 31, 34, .58) 0%, rgba(5, 31, 34, 0) 50%),
    linear-gradient(to top right, rgba(240, 121, 58, .26), rgba(240, 121, 58, 0) 50%); }
.hero__content { padding-block: calc(var(--nav-h) + 3rem) clamp(2.5rem, 7vh, 5rem); display: grid; gap: clamp(1rem, 2.2vh, 1.6rem); justify-items: start; }
.hero .display { max-width: 17ch; }
.hero__sub { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--sand); max-width: 40ch; line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
.seal { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem .5rem .8rem; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(5, 31, 34, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--sand); font-size: .9rem; font-weight: 600; letter-spacing: .02em; }
.seal i { color: var(--orange-hi); font-size: 1.15rem; }
/* celular: selo compacto, uma linha, para não tomar a foto nem empurrar o título */
@media (max-width: 560px) {
  .seal { gap: .4rem; padding: .32rem .8rem .32rem .6rem; font-size: clamp(.7rem, 3.2vw, .8rem); letter-spacing: 0; background: rgba(5, 31, 34, .34); }
  .seal i { font-size: .95rem; }
}
@media (min-width: 360px) and (max-width: 560px) { .seal { white-space: nowrap; } }

@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: hero-settle 2800ms var(--ease-out) both; }
  .js .hero__in { animation: rise 1000ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
}
@keyframes hero-settle { from { transform: scale(1.14); } to { transform: scale(1.02); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- recorte limpo das faixas de foto ----------
   Causa do "último pixel" visível: o contêiner com overflow:hidden fica em posição fracionária
   (alturas em vh/dvh, textos com line-height fracionário) e a foto animada (paralaxe) é pintada numa
   camada própria, cujo recorte arredonda para fora. Uma linha da foto escapa por baixo do degradê.
   Recortar 2px por dentro (clip-path é antialiased, sem arredondamento) esconde essa linha; nas bordas
   a foto já termina em cor de fundo, então os 2px extras não aparecem. */
.hero { clip-path: inset(0 0 2px 0); }
.band, .stage, .rota, .finale { clip-path: inset(2px 0); }

/* ---------- faixas de imagem (leste, transfers) ---------- */
.band { position: relative; height: clamp(420px, 72vh, 700px); overflow: hidden; isolation: isolate; }
.band--short { height: clamp(380px, 62vh, 600px); }
.band img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; z-index: -2; }
.band__fade { position: absolute; inset: -1px 0; z-index: -1; background: linear-gradient(to top, var(--ground) 3%, rgba(5, 31, 34, .55) 32%, rgba(5, 31, 34, .05) 70%), linear-gradient(to bottom, var(--ground) 0%, rgba(5, 31, 34, .4) 14%, transparent 30%); }
.band__text { position: absolute; inset: auto 0 0 0; padding-bottom: clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1rem; justify-items: start; margin-inline: auto; }
.transfers .band__text { justify-items: end; text-align: right; }
.transfers .band__text .h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); max-width: 18ch; }
.transfers .band__text .lead__text { max-width: 40ch; }
.tr__intro { color: var(--orange-hi); font-weight: 500; }
/* Só celular: o carro ocupa ~35% da largura da foto, então a foto não pode ser ampliada como no
   desktop (116% da faixa). Fica em 107%, sempre cobrindo a faixa de ponta a ponta (sem vão no
   rodapé), e o paralaxe usa um curso menor (±1,5%) para nunca abrir espaço. Tablet e desktop não mudam. */
@media (max-width: 640px) {
  .transfers .band img { top: -5%; bottom: auto; height: 107%; object-position: 3.5% 50%; animation-name: drift-m; }
}
/* 320 px: a foto já está no limite esquerdo; amplia para 109% para o carro poder centrar */
@media (max-width: 359px) {
  .transfers .band img { height: 109%; object-position: 0% 50%; }
}
@keyframes drift-m { from { transform: translateY(-1.5%); } to { transform: translateY(1.5%); } }

.lead { display: grid; gap: 1.6rem; padding-top: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .lead { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 4rem; } }
.facts { display: grid; gap: .7rem; }
.facts li { display: flex; align-items: center; gap: .8rem; color: var(--sand); font-weight: 550; }
.facts i { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--turq); font-size: 1.2rem; }

/* ---------- paradas (cartões) ---------- */
.stop {
  --mx: 50%; --my: 0%;
  position: relative; display: flex; flex-direction: column; gap: .7rem;
  padding: clamp(1.25rem, 2vw, 1.75rem); min-height: 232px; border-radius: var(--r-card);
  background-color: #0b2a2e; background-image: linear-gradient(rgba(241, 233, 214, .045), rgba(241, 233, 214, .045)); border: 1px solid var(--line); overflow: hidden; isolation: isolate;
  transition: transform 360ms var(--ease-out), border-color 240ms ease, background-color 240ms ease;
}
.stop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(241, 233, 214, .12), transparent 60%); opacity: 0; transition: opacity 300ms; }
@media (hover: hover) and (pointer: fine) { .stop:hover { transform: translateY(-4px); border-color: var(--line-strong); } .stop:hover::before { opacity: 1; } }
.stop__icon { font-size: 1.9rem; color: var(--turq); margin-bottom: auto; }
.stop h3 { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
.stop p { font-size: 1rem; color: var(--sand-2); line-height: 1.55; }

.tone-sand { background-image: linear-gradient(160deg, rgba(241, 233, 214, .16), rgba(241, 233, 214, .06)); }
.tone-lagoon { background-image: linear-gradient(155deg, #12747a 0%, #0b4a50 70%); border-color: rgba(79, 214, 203, .28); }
.tone-lagoon .stop__icon { color: #a8f2eb; }
.tone-lagoon p { color: #d3ece6; }
.tone-sun { background-image: linear-gradient(150deg, #f58a4b 0%, #e2622b 100%); border-color: transparent; }
.tone-sun h3 { color: var(--orange-ink); }
.tone-sun p { color: #2a1308; }
.tone-sun .stop__icon { color: var(--orange-ink); }
.tone-sun::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .22), transparent 60%); }
.tone-dusk { background-image: linear-gradient(105deg, #0b4045 0%, #1d4d4c 38%, #8c3d1e 100%); border-color: rgba(240, 121, 58, .3); }
.tone-dusk .stop__icon { color: #ffb78d; }

/* cartão com foto: imagem de fundo + degradê escuro embaixo para o texto ficar legível */
.stop__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.stop--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 22, 25, .2) 0%, rgba(6, 22, 25, 0) 20%), linear-gradient(to top, rgba(6, 22, 25, .5) 0%, rgba(6, 22, 25, .22) 22%, rgba(6, 22, 25, 0) 40%); }
.stop--photo.stop--rail { min-height: 380px; }
.stop--photo .stop__icon { margin-bottom: auto; }
.stop--photo h3, .stop--photo.tone-sun h3 { color: #fffaf0; text-shadow: 0 1px 3px rgba(5, 31, 34, .5), 0 2px 14px rgba(5, 31, 34, .55); }
.stop--photo p, .stop--photo.tone-lagoon p, .stop--photo.tone-sun p { color: #e9e2cf; }
.stop--photo .stop__icon, .stop--photo.tone-lagoon .stop__icon, .stop--photo.tone-sun .stop__icon { color: var(--sand); }
@media (hover: hover) and (pointer: fine) {
  .stop--photo:hover .stop__img { transform: scale(1.04); }
  }
@media (prefers-reduced-motion: reduce) { .stop__img { transition: none; } .stop--photo:hover .stop__img { transform: none; } }

@media (max-width: 639px) { .stop { min-height: 0; } .stop__icon { margin-bottom: .5rem; } }

.bookrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1.2rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- 3. oeste ---------- */
.stage { position: relative; min-height: clamp(520px, 84vh, 760px); overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.stage img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 60%; z-index: -2; }
.stage__grade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 31, 34, .88) 0%, rgba(5, 31, 34, .55) 42%, rgba(5, 31, 34, .05) 80%), linear-gradient(to top, var(--ground) 0%, transparent 38%), linear-gradient(to bottom, var(--ground) 0%, rgba(5, 31, 34, .4) 12%, transparent 28%); }
.stage__text { display: grid; gap: 1.2rem; padding-block: calc(var(--nav-h) + 2rem) 12rem; }
.stage__text .h2 { max-width: 10ch; }
/* Oeste: título e texto ancorados embaixo, logo acima dos cards (que sobem 8,5rem sobre a foto),
   na mesma posição dos títulos de Leste e Extremo */
.oeste .stage { align-items: flex-end; }
.oeste .stage__text { padding-bottom: calc(8.5rem + clamp(1.5rem, 4vw, 3rem)); }
.stage__text .h2--tour { max-width: none; }
.stage__text .lead__text { max-width: 36ch; }
.railwrap { position: relative; margin-top: -8.5rem; }
.rail { --pad: max(var(--gutter), calc((100% - var(--maxw)) / 2)); display: flex; gap: clamp(.75rem, 1.4vw, 1.25rem); overflow-x: auto; padding: .5rem var(--pad) 1rem; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { scroll-snap-type: none; }
.rail.is-dragging { cursor: grabbing; }
.rail.is-dragging * { pointer-events: none; user-select: none; }
.stop--rail { flex: 0 0 min(82vw, 330px); min-height: 380px; scroll-snap-align: start; }
.stop--rail p { margin-bottom: .4rem; }
/* aviso de arraste (substitui as setas): mão + texto à esquerda, barra de progresso à direita.
   O aviso aparece junto com a "espiada" dos cartões e some uns segundos depois (classe is-cue, via JS). */
.rail__hint { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-top: .9rem; }
.rail__cue { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 550; color: var(--sand-2); }
.rail__cue i { font-size: 1.35rem; color: var(--turq); }
.js .rail__cue { opacity: 0; transform: translateX(6px); transition: opacity 600ms ease, transform 600ms var(--ease-out); }
.js .rail__hint.is-cue .rail__cue { opacity: 1; transform: none; transition-duration: 300ms; }
.rail__hint.is-cue .rail__cue i { animation: swipe-cue 1.5s var(--ease-io) 250ms 2 both; }
.rail__meter { position: relative; flex: none; width: clamp(96px, 22vw, 160px); height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rail__meter[hidden] { display: none; }
.rail__thumb { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: inherit; background: var(--orange); will-change: transform; }
/* gesto de arrastar, no mesmo ritmo da espiada dos cartões */
@keyframes swipe-cue {
  0%, 100% { transform: translateX(0) rotate(0); }
  40% { transform: translateX(-9px) rotate(-8deg); }
  70% { transform: translateX(2px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) { .rail__hint.is-cue .rail__cue i { animation: none; } }
/* Litoral Leste: mesmo trilho do Oeste, sem sobrepor foto (o Oeste sobe sobre a imagem) */
.railwrap--flat { margin-top: 0; }

/* ---------- 4. paradise ---------- */
.paradise { background: var(--ground); }
/* foto de abertura: mesma faixa das outras seções; enquadra o peixe e a lagoa */
.paradise .band img { object-position: 42% 66%; }
/* foto vertical numa faixa larga: enquadra o sol no horizonte e as dunas */
.extremo .band img { object-position: 50% 64%; }
.paradise__sub { font-family: var(--font-display); font-stretch: 100%; font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--orange-hi); }
/* palco com vídeo de fundo: o vídeo cobre tudo atrás; o véu garante leitura e funde com o resto da página */
/* sem sobra embaixo: o palco já termina esmaecendo na cor de fundo, e a faixa dos Transfers começa do mesmo tom */
.paradise.sec { padding-bottom: 0; }
.paradise__stage { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.paradise__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.paradise__veil { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(to bottom, var(--ground) 0%, rgba(5, 31, 34, .78) 10%, rgba(5, 31, 34, .6) 30%, rgba(5, 31, 34, .56) 62%, rgba(5, 31, 34, .8) 86%, var(--ground) 100%),
    radial-gradient(90% 60% at 0% 0%, rgba(18, 116, 122, .26), transparent 70%),
    radial-gradient(80% 55% at 100% 100%, rgba(240, 121, 58, .2), transparent 70%); }/* cartões de texto longo: mais largos que o padrão e com o conteúdo alinhado ao topo */
.stop--story { flex-basis: min(86vw, 400px); min-height: 320px; }
/* celular: cartão mais estreito quebra mais o texto; 340px faz os textos curtos caberem inteiros (em todos os idiomas) */
@media (max-width: 520px) { .stop--story { min-height: 360px; } }
.stop--story .stop__icon { margin-bottom: .5rem; }
.stop--story p { margin-bottom: 0; }
/* todos os cartões com a mesma altura (a dos cartões curtos, mín. 320px); o texto que não couber rola
   dentro do cartão. height: 0 + flex-grow faz o texto não empurrar a altura do cartão. */
.stop__scroll { flex: 1 1 auto; height: 0; min-height: 0; display: grid; gap: .7rem; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(241 233 214 / .35) transparent; margin-right: -.6rem; padding-right: .6rem; border-radius: 4px; }
.stop__scroll:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: 4px; }
.stop__scroll::-webkit-scrollbar { width: 4px; }
.stop__scroll::-webkit-scrollbar-thumb { background: rgb(241 233 214 / .35); border-radius: 4px; }
/* quando há mais texto: a borda de baixo esmaece e aparece "Role para ler mais"; somem ao chegar no fim */
.stop--story.has-more .stop__scroll { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent); }
.stop__more { display: none; align-items: center; gap: .4rem; margin-top: .1rem; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--sand); opacity: .85; transition: opacity 300ms ease; }
.stop__more i { font-size: .95rem; animation: more-cue 1.8s var(--ease-io) infinite; }
.stop--story.has-more .stop__more { display: inline-flex; }
.stop--story.has-more.is-end .stop__scroll { -webkit-mask-image: none; mask-image: none; }
.stop--story.has-more.is-end .stop__more { opacity: 0; }
@keyframes more-cue { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .stop__more i { animation: none; } }

/* ---- cartões de vidro sobre o vídeo (aproximação de glassmorphism: blur + camadas + brilho de borda) ----
   Cada cartão ganha um tom da paleta do site (teal, turquesa, laranja) e o resto vem destes controles:
   --g-base   quanto fundo escuro por baixo (leitura)      --g-tint  intensidade do tom do cartão
   --g-blur   desfoque do vídeo atrás                      --g-glow  halo atrás e brilho da borda
   --g-warm   toque de laranja no canto, nos cartões frios  --g-border  nitidez da borda
   Troque o preset com data-glass="a|b|c" no .paradise__stage. Padrão = b. */
/* mais translúcido (vídeo aparece através, pouco desfoque) e com brilho (glow) na cor de cada cartão */
.paradise__stage { --g-base: 0; --g-tint: .1; --g-blur: 5px; --g-glow: .8; --g-warm: .04; --g-border: .45; }
@media (max-width: 767px) { .paradise__stage { --g-base: .03; --g-blur: 4px; } }
.paradise__stage[data-glass="a"] { --g-base: .38; --g-tint: .18; --g-blur: 12px; --g-glow: .18; --g-warm: 0; --g-border: .20; }
.paradise__stage[data-glass="c"] { --g-base: .56; --g-tint: .34; --g-blur: 22px; --g-glow: .44; --g-warm: .26; --g-border: .32; }

.stop--story.tone-lagoon { --tint: 18 116 122; --tint2: 79 214 203; }
.stop--story.tone-sand { --tint: 79 214 203; --tint2: 18 116 122; }
.stop--story.tone-sun { --tint: 240 121 58; --tint2: 255 147 88; }
.stop--story.tone-dusk { --tint: 240 121 58; --tint2: 18 116 122; }

.paradise__stage .stop--story {
  background:
    radial-gradient(120% 85% at 0% 0%, rgb(var(--tint) / var(--g-tint)), transparent 62%),
    radial-gradient(95% 70% at 100% 100%, rgb(var(--tint2) / calc(var(--g-tint) * .55)), transparent 66%),
    radial-gradient(80% 55% at 100% 100%, rgb(240 121 58 / var(--g-warm)), transparent 70%),
    rgb(5 31 34 / var(--g-base));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(140%);
  backdrop-filter: blur(var(--g-blur)) saturate(140%);
  border: 1px solid rgb(241 233 214 / calc(var(--g-border) * .45));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .22),
    inset 0 0 30px -8px rgb(var(--tint2) / .22),
    0 22px 48px -24px rgb(var(--tint) / calc(var(--g-glow) * .6)),
    0 0 48px -14px rgb(var(--tint) / calc(var(--g-glow) * .45));
  transition: transform 360ms var(--ease-out), border-color 240ms ease, box-shadow 360ms var(--ease-out);
}
/* borda luminosa: um degradê de luz que contorna o cartão (mais forte no canto de cima, como reflexo) */
.paradise__stage .stop--story::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(145deg, rgb(255 255 255 / .42), rgb(var(--tint2) / .28) 30%, rgb(255 255 255 / .05) 60%, rgb(var(--tint) / .32));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* sombra suave no texto: mantém a leitura quando o vídeo atrás fica claro */
/* cartão quase transparente: sombra mais densa nas letras segura a leitura sobre o vídeo */
.paradise__stage .stop--story h3 { color: #fffaf0; text-shadow: 0 1px 2px rgb(5 31 34 / .8), 0 2px 10px rgb(5 31 34 / .75), 0 0 24px rgb(5 31 34 / .6); }
.paradise__stage .stop--story p { color: #fffbf2; text-shadow: 0 1px 2px rgb(5 31 34 / .85), 0 1px 8px rgb(5 31 34 / .75), 0 0 20px rgb(5 31 34 / .55); }
.paradise__stage .stop--story .stop__icon {
  width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.35rem; color: #fbf6ea;
  background: rgb(var(--tint) / .30); box-shadow: inset 0 0 0 1px rgb(var(--tint2) / .38), 0 0 18px -4px rgb(var(--tint) / .55);
}
/* o halo precisa de espaço fora dos cartões: o trilho recorta o que passa do padding */
.paradise .rail { padding-block: 2.75rem 3rem; margin-block: -2.25rem -2rem; align-items: stretch; }
@media (hover: hover) and (pointer: fine) {
  .paradise__stage .stop--story:hover { border-color: rgb(241 233 214 / .3); box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), inset 0 0 30px -8px rgb(var(--tint2) / .28), 0 24px 52px -24px rgb(var(--tint) / calc(var(--g-glow) * .75)), 0 0 52px -14px rgb(var(--tint) / calc(var(--g-glow) * .6)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .paradise__stage { --g-base: .84; } .paradise__stage .pass__body { background: rgb(7 42 46 / .88); } }
@media (prefers-reduced-transparency: reduce) {
  .paradise__stage .stop--story, .paradise__stage .pass__body { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(7 42 46 / .94); }
}
.paradise__close { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.4rem; border-top: 1px solid var(--line); max-width: 36ch; font-family: var(--font-display); font-stretch: 105%; font-weight: 650; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.3; letter-spacing: -.01em; color: var(--sand); text-wrap: balance; }
.paradise .lead { grid-template-columns: 1fr; padding-bottom: clamp(1.25rem, 3vw, 2.25rem); }
/* seção mais compacta depois que os cartões ficaram do mesmo tamanho */
.paradise .paradise__close { margin-top: clamp(1rem, 2vw, 1.5rem); }
/* passe do dia mais para cima: menos espaço antes dele e mais folga até a emenda com os Transfers */
.paradise .ticketwrap { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.paradise__stage { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

.ticketwrap { margin-top: clamp(3rem, 6vw, 5rem); }
/* passe do dia: um único cartão de vidro. À esquerda (ou em cima, no celular) o céu do dia, com o sol que atravessa
   de 8h30 a 18h00 pelos momentos do roteiro; à direita (ou embaixo) as fotos do momento, numa moldura arredondada
   com o mesmo respiro em volta. Sem picote nem máscara de recorte (a máscara pesava na rolagem das fotos). */
.pass { --stub: 25rem; --stubh: 10.5rem; --frame: .6rem; position: relative; border-radius: var(--r-card);
  box-shadow: 0 22px 44px -26px rgb(0 12 14 / .7), 0 0 36px -18px rgb(79 214 203 / .14); }
.pass__body { display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); border-radius: inherit; border: 1px solid rgb(241 233 214 / .26); overflow: hidden;
  background: radial-gradient(90% 120% at 30% 100%, rgb(240 121 58 / .14), transparent 60%), radial-gradient(120% 140% at 0% 0%, rgb(79 214 203 / .13), transparent 60%), rgb(5 31 34 / var(--g-base, .2));
  -webkit-backdrop-filter: blur(var(--g-blur, 20px)) saturate(140%); backdrop-filter: blur(var(--g-blur, 20px)) saturate(140%); }
.pass__day { padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.2rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 1.4rem); }
.pass__stub { display: grid; align-content: center; gap: 1.1rem; padding: var(--frame); }

.pass__ends { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.pass__end { display: flex; align-items: center; gap: .65rem; margin: 0; }
.pass__end--ret { flex-direction: row-reverse; text-align: right; }
.pass__end i { font-size: 1.7rem; color: #ffd27a; filter: drop-shadow(0 0 10px rgb(255 210 122 / .45)); }
.pass__end--ret i { color: #f6c9a7; filter: drop-shadow(0 0 10px rgb(240 121 58 / .45)); }
.pass__k { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: rgb(246 240 226 / .8); text-shadow: 0 1px 8px rgb(5 31 34 / .6); }
.pass__end strong { display: block; font-family: var(--font-display); font-stretch: 105%; font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -.015em; color: #fffaf0; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgb(5 31 34 / .5), 0 2px 16px rgb(5 31 34 / .55); }

.pass__arc { display: block; width: 100%; height: auto; margin-top: -.4rem; overflow: visible; }
.pass__horizon { stroke: rgb(241 233 214 / .3); stroke-width: 1; }
.pass__path { fill: none; stroke: rgb(241 233 214 / .38); stroke-width: 1.5; stroke-dasharray: 1.5 6; stroke-linecap: round; }
.pass__trail { fill: none; stroke: #ffb27a; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pass__mark { fill: #0b3a40; stroke: rgb(241 233 214 / .7); stroke-width: 1.5; r: 5.5px; transition: fill 300ms ease, stroke 300ms ease; }
.pass__sun { opacity: 0; }
.pass__sun-glow { fill: rgb(255 210 122 / .28); transition: fill 600ms ease; }
.pass__sun-core { fill: #ffd27a; transition: fill 600ms ease; }
.pass.is-run .pass__sun { opacity: 1; }
.pass.is-set .pass__sun-core { fill: var(--orange); }
.pass.is-set .pass__sun-glow { fill: rgb(240 121 58 / .4); }

/* nomes em cima do próprio arco, junto de cada ponto, alternando acima e abaixo (Manhã acima, Degustação abaixo...).
   --x/--y = posição do ponto em % do desenho (viewBox 400 x 112), então acompanham o arco em qualquer largura */
.pass__sky { position: relative; margin-top: -.4rem; padding-bottom: .9rem; }
.pass__sky .pass__arc { margin-top: 0; }
.pass__moments { position: absolute; inset: 0 0 auto 0; aspect-ratio: 400 / 112; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.pass__lbl { position: absolute; left: var(--x); top: var(--y); white-space: nowrap; font-size: .8rem; font-weight: 600; line-height: 1.2; color: rgb(246 240 226 / .55); text-shadow: 0 1px 3px rgb(5 31 34 / .8), 0 1px 10px rgb(5 31 34 / .7); transition: color 400ms ease; pointer-events: auto; }
/* afastados do ponto o suficiente para não encostar no anel do momento escolhido */
.pass__lbl--up { transform: translate(-50%, calc(-100% - .7rem)); }
.pass__lbl--down { transform: translate(-50%, .7rem); }
/* sem sobra embaixo do arco: a dica encosta na linha do horizonte (o "Pôr do sol" pode passar dela, à direita) */
.pass__sky { padding-bottom: 0; }
/* arco estreito (celular, tablet e desktop pequeno): Manhã e Degustação ficam perto demais; Degustação puxa para a direita */
@media (max-width: 1199px) { .pass__lbl:nth-child(2) { transform: translate(-16%, .7rem); } }
/* desktop pequeno: arco um pouco mais baixo para as pílulas de cima não encostarem nos horários */
@media (min-width: 960px) and (max-width: 1199px) { .pass__sky { margin-top: 1.4rem; } }
/* celular: Manhã e Degustação ficam perto demais; Degustação puxa um pouco para a direita do seu ponto */
@media (max-width: 640px) {
  /* arco mais baixo: os nomes de cima não encostam em Saída/Retorno */
  .pass__sky { margin-top: 2.2rem; }
  /* último nome (o mais longo em francês) puxa para dentro do cartão */
  .pass__lbl:nth-child(6) { transform: translate(-72%, .7rem); }
}

/* ---- linha do tempo clicável: cada momento (ponto ou nome) abre suas fotos no canhoto ---- */
.pass__hit { fill: transparent; cursor: pointer; pointer-events: all; -webkit-tap-highlight-color: transparent; }
.pass__ring { fill: none; stroke: var(--orange-hi); stroke-width: 2; opacity: 0; pointer-events: none; transition: cx 520ms var(--ease-out), cy 520ms var(--ease-out), opacity 400ms ease; }
.pass.is-set.has-pick .pass__ring { opacity: 1; }
/* até a primeira escolha, os pontos "respiram" para mostrar que são clicáveis */
/* pulso limitado (4 vezes) e pausado enquanto a pessoa mexe nas fotos: nada redesenha o arco durante o arraste */
.pass.is-set:not(.is-picked) .pass__mark { animation: mark-ping 2.6s ease-in-out 4; }
.pass.is-touching .pass__mark, .pass.is-touching .pass__tip i { animation-play-state: paused !important; }
.pass.is-set:not(.is-picked) .pass__mark:nth-of-type(2) { animation-delay: .25s; }
.pass.is-set:not(.is-picked) .pass__mark:nth-of-type(3) { animation-delay: .5s; }
.pass.is-set:not(.is-picked) .pass__mark:nth-of-type(4) { animation-delay: .75s; }
.pass.is-set:not(.is-picked) .pass__mark:nth-of-type(5) { animation-delay: 1s; }
.pass.is-set:not(.is-picked) .pass__mark:nth-of-type(6) { animation-delay: 1.25s; }
@keyframes mark-ping { 0%, 60%, 100% { stroke-width: 1.5; stroke-opacity: 1; } 30% { stroke-width: 7; stroke-opacity: .35; } }

/* cada momento é uma pílula com cara de botão (borda + fundo); o escolhido fica laranja preenchido */
.pass__pt { position: relative; padding: .32rem .62rem; border: 1px solid rgb(241 233 214 / .3); border-radius: 999px; background: rgb(5 31 34 / .62); font: inherit; font-weight: 650; color: #fffaf0; text-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px -2px rgb(0 10 12 / .5); transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 160ms var(--ease-out); }
.pass__pt:active { transform: scale(.94); }
.pass__pt.is-on { background: var(--orange); border-color: var(--orange-hi); color: var(--orange-ink); box-shadow: 0 4px 14px -4px rgb(240 121 58 / .7); }
.pass__pt:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pass__pt:hover { border-color: var(--orange-hi); background: rgb(240 121 58 / .22); } .pass__pt.is-on:hover { background: var(--orange-hi); } }
/* as pílulas acendem quando o sol passa por cada ponto (mesmos atrasos dos pontos) */
.pass .pass__lbl { color: #fffaf0; opacity: .45; transition: opacity 400ms ease; }
.pass.is-run .pass__lbl { opacity: 1; }
.pass .pass__ring { r: 10px; }

/* dedo "fantasma": vai até o próximo momento, toca (onda) e o momento abre de verdade */
.pass__demo { position: absolute; inset: 0 0 auto 0; aspect-ratio: 400 / 112; pointer-events: none; z-index: 3; }
.pass__finger { position: absolute; left: 8.33%; top: 73.66%; font-size: 2.1rem; line-height: 1; color: #fffaf0; opacity: 0;
  text-shadow: 0 2px 4px rgb(0 10 12 / .55), 0 6px 18px rgb(0 10 12 / .5);
  transform: translate(-38%, -6%); transition: left 760ms var(--ease-io), top 760ms var(--ease-io), opacity 320ms ease; }
.pass__finger.is-on { opacity: 1; }
.pass__finger i { display: block; transform-origin: 38% 6%; transition: transform 140ms var(--ease-out); filter: drop-shadow(0 2px 3px rgb(0 10 12 / .55)) drop-shadow(0 5px 10px rgb(0 10 12 / .4)); }
.pass__finger.is-press i { transform: scale(.84); }
/* onda do toque, saindo da ponta do dedo */
.pass__finger::before { content: ""; position: absolute; left: 38%; top: 6%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--orange-hi); opacity: 0; transform: scale(.3); }
.pass__finger.is-press::before { animation: finger-ripple 620ms var(--ease-out); }
@keyframes finger-ripple { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .pass__demo { display: none; } }

/* rente à linha do horizonte e alinhada à esquerda, longe do "Pôr do sol" que fica embaixo do arco, à direita */
/* centralizada no espaço entre a linha do horizonte e as fotos. O "- 3%" desconta a sobra do desenho abaixo do
   horizonte (12 de 400 unidades da largura do arco), para a distância contar a partir da linha */
/* selo-convite: pílula com contorno laranja, letra grande, mão tocando e um halo que pulsa em volta */
.pass__tip { position: relative; display: flex; width: fit-content; max-width: 100%; align-items: center; justify-content: center; gap: .6rem;
  margin: calc(var(--tip-gap, 1.2rem) - 3%) auto 0; padding: .55rem 1.15rem .55rem .8rem; border-radius: 999px;
  border: 1.5px solid var(--orange-hi); background: linear-gradient(135deg, rgb(240 121 58 / .3), rgb(240 121 58 / .12));
  box-shadow: 0 8px 24px -10px rgb(240 121 58 / .75), inset 0 1px 0 rgb(255 255 255 / .2);
  font-size: .98rem; font-weight: 700; line-height: 1.25; letter-spacing: .005em; text-align: left; color: #fffaf0; text-shadow: 0 1px 6px rgb(5 31 34 / .55);
  transition: opacity 400ms ease; }
.pass__tip::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; border: 2px solid var(--orange-hi); opacity: 0; pointer-events: none;
  animation: tip-halo 2.2s var(--ease-out) infinite; will-change: transform, opacity; }
@keyframes tip-halo { 0% { opacity: .85; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.08, 1.4); } }
.pass__tip i { flex: none; font-size: 2.05rem; color: #fffaf0; filter: drop-shadow(0 2px 5px rgb(5 31 34 / .5)); transform-origin: 50% 80%; animation: tap-cue 2.2s var(--ease-io) infinite; will-change: transform; }
/* depois que a pessoa escolhe um momento, o selo acalma (fica, mas sem pulsar) */
.pass.is-picked .pass__tip { opacity: .72; }
.pass.is-picked .pass__tip i, .pass.is-picked .pass__tip::before { animation: none; }
.pass.is-touching .pass__tip::before { animation-play-state: paused; }
@keyframes tap-cue { 0%, 55%, 100% { transform: translateY(0) scale(1); } 22% { transform: translateY(2px) scale(.86); } }

/* ---- canhoto: galeria do momento escolhido ---- */
.pass__stub--media { position: relative; display: block; }
/* moldura da foto: mesmo respiro (--frame) nos quatro lados e cantos que acompanham o cartão */
/* camada própria (translateZ): a rolagem das fotos não obriga o vidro do cartão a ser redesenhado */
.pgal { position: absolute; inset: var(--frame); border-radius: calc(var(--r-card) - var(--frame)); overflow: hidden; isolation: isolate; background: rgb(5 31 34 / .5); transform: translateZ(0); will-change: transform;
  box-shadow: inset 0 0 0 1px rgb(241 233 214 / .14); }
/* carrossel próprio: .pgal__track é a janela fixa (recebe o gesto); .pgal__rail é o trilho que anda por transform.
   touch-action: pan-y = o navegador cuida só da rolagem vertical da página; o arraste lateral é do carrossel */
.pgal__track { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: opacity 220ms ease, transform 420ms var(--ease-out); }
.pgal__track:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: -4px; }
.pgal__track.is-dragging { cursor: grabbing; }
.pgal__rail { display: flex; height: 100%; transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; }
/* encaixe ao soltar: desacelera forte no fim (sem quique), retoma de onde parou se tocar de novo */
.pgal__rail.is-anim { transition: transform 460ms cubic-bezier(.22, 1, .36, 1); }
.pgal__slide { flex: 0 0 100%; height: 100%; margin: 0; }
.pgal__slide img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* troca de momento: as fotos antigas somem com um leve desfoque e as novas entram */
.pgal.is-swapping .pgal__track { opacity: 0; transform: scale(1.02); transition-duration: 160ms; }
/* véu em cima e embaixo para o nome, o contador e as bolinhas lerem sobre qualquer foto */
/* véu leve e curto em cima (não esconde rostos no alto da foto) e um pouco mais firme embaixo, para as bolinhas */
.pgal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(5 31 34 / .42), transparent 16%, transparent 76%, rgb(5 31 34 / .6)); }
.pgal__top { position: absolute; z-index: 2; inset: .85rem .9rem auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; pointer-events: none; }
.pgal__name { font-family: var(--font-display); font-stretch: 105%; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: #fffaf0; text-shadow: 0 1px 3px rgb(5 31 34 / .6), 0 2px 14px rgb(5 31 34 / .55); }
/* fundo sólido translúcido, sem desfoque: um desfoque aqui seria refeito a cada quadro com as fotos passando por baixo */
.pgal__count { padding: .2rem .55rem; border-radius: 999px; background: rgb(5 31 34 / .66); font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; color: #fffaf0; }
.pgal__count:empty { display: none; }
.pgal__dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: .9rem; display: flex; justify-content: center; gap: .45rem; }
.pgal__dots button { position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 250 240 / .5); cursor: pointer; transition: width 300ms var(--ease-out), background-color 200ms ease; }
.pgal__dots button::after { content: ""; position: absolute; inset: -9px -5px; }
.pgal__dots button[aria-current="true"] { width: 20px; background: var(--orange-hi); }
/* aviso "Arraste": aparece ao abrir um momento com mais de uma foto e some ao arrastar (ou em ~3,5s) */
/* sem fundo: só texto e mão, com sombra suave para ler sobre qualquer foto */
.pgal__swipe { position: absolute; z-index: 2; left: 50%; top: auto; bottom: 2.4rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; letter-spacing: .01em; color: #fffaf0; pointer-events: none;
  text-shadow: 0 1px 2px rgb(0 10 12 / .75), 0 2px 14px rgb(0 10 12 / .6);
  opacity: 0; transform: translate(-50%, 6px) scale(.94); transition: opacity 350ms ease, transform 350ms var(--ease-out); }
.pgal__swipe i { position: relative; font-size: 1.4rem; color: #fffaf0; filter: drop-shadow(0 1px 2px rgb(0 10 12 / .7)) drop-shadow(0 2px 6px rgb(0 10 12 / .45)); }
/* rastro: um traço de luz que nasce atrás da mão quando ela desliza para a esquerda (preso ao aviso, não ao ícone,
   porque o ícone é uma máscara SVG e recortaria o traço) */
.pgal__swipe::after { content: ""; position: absolute; left: 1rem; top: 52%; width: 26px; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(to right, rgb(255 250 240 / .85), rgb(255 250 240 / 0)); transform-origin: left center; transform: scaleX(0); opacity: 0; }
.pgal.is-cue .pgal__swipe { opacity: 1; transform: translate(-50%, 0); }
.pgal.is-cue .pgal__swipe i { animation: swipe-cue 1.5s var(--ease-io) 200ms 2 both; }
.pgal.is-cue .pgal__swipe::after { animation: swipe-trail 1.5s var(--ease-io) 200ms 2 both; }
@keyframes swipe-trail { 0%, 12% { transform: scaleX(0); opacity: 0; } 40% { transform: scaleX(1); opacity: 1; } 70%, 100% { transform: scaleX(.2); opacity: 0; } }
.pgal.is-single .pgal__swipe { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pass .pass__mark, .pass__tip i, .pass__tip::before, .pgal.is-cue .pgal__swipe i, .pgal.is-cue .pgal__swipe::after { animation: none !important; }
  .pgal.is-swapping .pgal__track { transform: none; }
}

/* espaço das fotos com formato de retrato: no desktop o passe ganha altura; no celular o canhoto fica alto */
@media (min-width: 960px) {
  .pass__body { min-height: 29rem; }
  .pass__day { display: flex; flex-direction: column; justify-content: center; }
}
/* reserva fora do passe, logo abaixo; no desktop alinhada à direita, embaixo do canhoto */
.pass__after { display: flex; justify-content: flex-end; margin-top: clamp(1rem, 2vw, 1.4rem); }
.pass__cta { justify-content: center; padding-inline: 1.6rem; box-shadow: 0 14px 30px -14px rgb(240 121 58 / .8), inset 0 1px 0 rgb(255 255 255 / .28); }

/* o sol percorre o arco uma vez quando o passe aparece; a trilha se acende atrás dele e cada momento acende quando ele passa */
.pass.is-run .pass__trail { stroke-dashoffset: 0; transition: stroke-dashoffset 2.8s cubic-bezier(.45, 0, .25, 1); }
.pass.is-run .pass__mark { fill: var(--orange-hi); stroke: #fff4d6; }
.pass.is-run .pass__moments li { color: #fffaf0; }
/* 6 momentos: cada ponto acende quando o sol passa por ele (tempos seguem a curva de aceleração do sol) */
.pass.is-run .pass__mark:nth-of-type(1), .pass.is-run .pass__moments li:nth-child(1) { transition-delay: .44s; }
.pass.is-run .pass__mark:nth-of-type(2), .pass.is-run .pass__moments li:nth-child(2) { transition-delay: .89s; }
.pass.is-run .pass__mark:nth-of-type(3), .pass.is-run .pass__moments li:nth-child(3) { transition-delay: 1.26s; }
.pass.is-run .pass__mark:nth-of-type(4), .pass.is-run .pass__moments li:nth-child(4) { transition-delay: 1.58s; }
.pass.is-run .pass__mark:nth-of-type(5), .pass.is-run .pass__moments li:nth-child(5) { transition-delay: 1.92s; }
.pass.is-run .pass__mark:nth-of-type(6), .pass.is-run .pass__moments li:nth-child(6) { transition-delay: 2.42s; }

/* celular e tablet: as fotos vão para baixo da linha do tempo, dentro do mesmo cartão (sem divisória) */
@media (max-width: 959px) {
  .pass__body { grid-template-columns: 1fr; }
  .pass__stub { height: var(--stubh); padding-top: 0; }
}
/* celular: espaço das imagens com boa altura; botão ocupa a largura toda */
/* fotos maiores com o espaço que a dica liberou */
@media (max-width: 959px) { .pass { --stubh: clamp(22rem, 124vw, 34rem); } }
/* celular: a dica fica no meio do vão entre a linha e as fotos. Embaixo dela sobram o respiro do painel (1rem)
   e a moldura das fotos (.6rem); o mesmo vão vai em cima. */
@media (max-width: 959px) { .pass__day { padding-bottom: 1rem; } .pass { --tip-gap: 1.75rem; } }
@media (max-width: 420px) { .pass__tip { font-size: .88rem; padding: .5rem 1rem .5rem .7rem; gap: .5rem; } .pass__tip i { font-size: 1.8rem; } }
/* celular: o cartão do passe troca o vidro desfocado por um fundo de cor (mesmo tom), porque rolar as fotos
   dentro de um elemento com desfoque de fundo obriga o celular a refazer o desfoque o tempo todo */
@media (max-width: 959px) {
  .paradise__stage .pass__body { -webkit-backdrop-filter: none; backdrop-filter: none;
    background: radial-gradient(90% 120% at 30% 100%, rgb(240 121 58 / .14), transparent 60%), radial-gradient(120% 140% at 0% 0%, rgb(79 214 203 / .13), transparent 60%), rgb(6 36 40 / .9); }
}
@media (max-width: 559px) { .pass__after { display: block; } .pass__cta { width: 100%; padding-inline: 1rem; } }
@media (max-width: 420px) {
  .pass__lbl { font-size: .68rem; }
  .pass__pt { padding: .26rem .5rem; }
  .pass__finger { font-size: 1.8rem; }
}
/* celulares estreitos: pílulas um pouco menores para os nomes longos (es/it) não se encostarem */
@media (max-width: 374px) {
  .pass__lbl { font-size: .64rem; }
  .pass__pt { padding: .24rem .42rem; }
  .pass__lbl:nth-child(2) { transform: translate(-24%, .7rem); }
  .pass__end i { font-size: 1.4rem; }
  .pass__end { gap: .5rem; }
}

/* ---------- 5. transfers ---------- */
.tr__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); padding-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 1000px) { .tr__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.tr__info { display: grid; gap: 1.6rem; }
@media (min-width: 1000px) { .tr__info { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }
.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.tabs__ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--sand); transition: transform 320ms var(--ease-out); }
.tabs[data-active="for"] .tabs__ind { transform: translateX(100%); }
.tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem .7rem; border-radius: 999px; font-weight: 650; font-size: .95rem; color: var(--sand); transition: color 240ms ease; text-align: center; line-height: 1.15; }
.tab[aria-selected="true"] { color: var(--ground); }
.tab i { font-size: 1.2rem; flex: none; }
@media (max-width: 480px) { .tab i { display: none; } .tab { font-size: .88rem; } }
.tabpanel { display: grid; gap: .8rem; min-height: 9.5rem; }
.tabpanel:not([hidden]) { animation: panel-in 380ms var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tabpanel h3 { font-size: 1.5rem; }
.why { padding-top: 1.4rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.why h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.why li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; padding: .45rem 0; align-items: start; color: var(--sand); }
.why li i { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--turq); font-size: 1.25rem; }
.why li span { padding-top: .38rem; line-height: 1.45; }

.tform { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; padding: clamp(1.25rem, 3vw, 2.2rem); border-radius: var(--r-card); background: linear-gradient(170deg, rgba(241, 233, 214, .09), rgba(241, 233, 214, .03)); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0, 10, 12, .8); }
.tform__title { grid-column: 1 / -1; font-size: 1.6rem; font-stretch: 108%; }
.field { display: grid; gap: .45rem; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 560px) { .tform { grid-template-columns: 1fr; } .field { grid-column: 1 / -1; } }
.label { font-size: .9rem; font-weight: 650; color: var(--sand); }
.tform input[type="text"], .tform input[type="tel"], .tform input[type="date"], .tform input[type="time"], .tform textarea {
  width: 100%; min-height: 3.1rem; padding: .8rem 1rem; border-radius: var(--r-input);
  background: rgba(5, 31, 34, .72); border: 1px solid var(--line-strong); color: var(--sand);
  font: 500 1rem/1.3 var(--font-body); transition: border-color 200ms, box-shadow 200ms, background-color 200ms; }
.tform textarea { resize: vertical; min-height: 5.5rem; }
/* data e horário do voo: no iPhone (Safari) esses campos têm largura mínima própria e vazavam do cartão no celular;
   aqui eles passam a respeitar a largura da coluna, com o texto alinhado à esquerda como os outros campos */
.tform input[type="date"], .tform input[type="time"] { display: block; min-width: 0; max-width: 100%; }
@supports (-webkit-touch-callout: none) {
  .tform input[type="date"], .tform input[type="time"] { -webkit-appearance: none; appearance: none; }
}
.tform input[type="date"]::-webkit-date-and-time-value, .tform input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.3em; }
.tform input:focus-visible, .tform textarea:focus-visible { outline: none; border-color: var(--sand); box-shadow: 0 0 0 3px rgba(241, 233, 214, .22); }
.tform input[aria-invalid="true"] { border-color: #ff9d86; }
.error { color: #ffb4a0; font-size: .88rem; font-weight: 550; }
.hint { color: var(--sand-3); font-size: .9rem; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; padding: .65rem 1.05rem; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .93rem; font-weight: 600; color: var(--sand); transition: background-color 200ms, color 200ms, border-color 200ms, transform 160ms var(--ease-out); }
.choice:active span { transform: scale(.97); }
.choice input:checked + span { background: var(--sand); color: var(--ground); border-color: var(--sand); }
.choice input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .choice input:not(:checked):hover + span { border-color: var(--sand); } }
.stepper { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; border-radius: var(--r-input); border: 1px solid var(--line-strong); background: rgba(5, 31, 34, .72); overflow: hidden; }
.stepper button { height: 3.1rem; display: grid; place-items: center; font-size: 1.1rem; color: var(--sand); transition: background-color 160ms; }
.stepper button:active { background: var(--surface-2); }
.stepper input { width: 100%; text-align: center; border: 0; background: transparent; color: var(--sand); font: 650 1.05rem var(--font-body); -moz-appearance: textfield; appearance: textfield; min-width: 0; padding: 0; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper:focus-within { border-color: var(--sand); box-shadow: 0 0 0 3px rgba(241, 233, 214, .22); }
.stepper input:focus-visible { outline: none; }
.tform__submit { display: grid; gap: .8rem; justify-items: start; margin-top: .4rem; }
.status { color: var(--turq); font-weight: 600; }


/* ---------- 6. rota ---------- */
.rota { padding-top: clamp(5rem, 10vw, 9rem); overflow: hidden; isolation: isolate; }
.rota__bg { position: absolute; inset: 0; z-index: -1; }
.rota__bg img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; opacity: .72; }
.rota__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--ground) 0%, rgba(5, 31, 34, .55) 16%, rgba(5, 31, 34, .48) 45%, rgba(5, 31, 34, .5) 75%, rgba(5, 31, 34, .72) 92%, var(--ground) 100%); }
.rota__head { display: grid; gap: 1.2rem; max-width: 62rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.rota__award { display: flex; align-items: flex-start; gap: .7rem; color: var(--sand); font-weight: 550; max-width: 52ch; }
.rota__award i { font-size: 1.5rem; color: var(--orange-hi); flex: none; margin-top: .1rem; }

.rota__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 1000px) { .rota__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.map { position: relative; aspect-ratio: 900 / 520; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: #0a343a; box-shadow: 0 40px 80px -40px rgba(0, 10, 12, .85); }

.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__stage, .map__info { position: absolute; inset: 0; }
.map__info { pointer-events: none; }
/* zoom e arrasto: o viewBox do SVG muda (vetor sempre nítido) e os pontos são reposicionados por JS; --z compensa a espessura dos traços e --inv o tamanho das setas */
.map__stage { overflow: hidden; touch-action: pan-y; }
.map__stage.is-zoomed { touch-action: none; cursor: grab; }
.map__stage.is-dragging { cursor: grabbing; }
.map__world { position: absolute; inset: 0; --z: 1; --inv: calc(1 / var(--z)); }
.map__land { stroke-width: calc(2.4 / var(--z, 1)); }
.map__trace { stroke-width: calc(2 / var(--z, 1)); stroke-dasharray: calc(2 / var(--z, 1)) calc(9 / var(--z, 1)); }
.map__route { stroke-width: calc(4 / var(--z, 1)); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3200ms var(--ease-io) 300ms; }
.map__route--glow { stroke-width: calc(11 / var(--z, 1)); }
.map.is-in .map__route, html:not(.js) .map__route { stroke-dashoffset: 0; }
.map__chev { fill: none; stroke: #fff4d6; stroke-width: calc(2.2 / var(--z, 1)); stroke-linecap: round; stroke-linejoin: round; transform: scale(var(--inv, 1)); opacity: 0; }
.map.is-in .map__chev { opacity: .9; animation: spot-in 500ms var(--ease-out) var(--d, 0ms) backwards; }

/* paradas do mapa: cada lugar vira um ícone concreto (dunas e lagoas, guarás, pôr do sol) num selo escuro que se destaca da areia */
.pin { position: absolute; z-index: 3; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .45rem; padding: .6rem; cursor: pointer; }
.pin__icon { position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(5, 31, 34, .92); border: 2px solid var(--sand); box-shadow: 0 8px 20px -6px rgba(0, 10, 12, .6), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform 300ms var(--ease-out), border-color 200ms, box-shadow 200ms; }
.pin__icon svg { width: 38px; height: 38px; overflow: visible; }
.pin__icon::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--orange-hi); opacity: 0; pointer-events: none; }
/* só o selo e o nome recebem o toque: a folga ao redor do pin não pode engolir os pontos vizinhos do percurso */
.pin { pointer-events: none; }
.pin__icon, .pin__label { pointer-events: auto; }
.pin__tag { position: absolute; bottom: calc(100% - .6rem + 6px); white-space: nowrap; padding: .12rem .55rem; border-radius: 999px; background: var(--orange); color: var(--orange-ink); font-size: .64rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 12px -4px rgba(0, 10, 12, .6); pointer-events: none; }
.pin__label { position: absolute; top: calc(100% - .4rem); white-space: nowrap; padding: .22rem .65rem; border-radius: 999px; background: rgba(5, 31, 34, .88); border: 1px solid rgba(241, 233, 214, .34); font-size: .82rem; font-weight: 650; line-height: 1.2; color: var(--sand); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color 200ms, color 200ms, border-color 200ms; }
.pin[aria-pressed="true"] .pin__icon { border-color: var(--orange); box-shadow: 0 0 0 5px rgba(240, 121, 58, .28), 0 0 26px rgba(240, 121, 58, .45), 0 8px 20px -6px rgba(0, 10, 12, .6); transform: scale(1.1); }
.pin[aria-pressed="true"] .pin__label { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .pin__icon { outline: 2px solid var(--orange-hi); outline-offset: 4px; }
.pin:active .pin__icon { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .pin:hover .pin__icon { transform: scale(1.12); border-color: var(--orange-hi); } .pin[aria-pressed="true"]:hover .pin__icon { transform: scale(1.16); } }

/* pontos secundários do percurso: discretos, mas com área de toque generosa; o nome aparece ao tocar, passar o mouse ou aproximar */
.spot { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; padding: 0; border-radius: 50%; background: var(--sand); border: 1.5px solid rgba(5, 31, 34, .92); box-shadow: 0 0 0 1px rgba(241, 233, 214, .4), 0 2px 6px rgba(0, 10, 12, .45); cursor: pointer; opacity: 0; transition: scale 220ms var(--ease-out), background-color 200ms, box-shadow 200ms; }
.spot::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.map.is-in .spot { opacity: 1; animation: spot-in 500ms var(--ease-out) var(--d, 0ms) backwards; }
.spot__tip { position: absolute; bottom: calc(100% + 9px); left: 50%; translate: -50% 0; padding: .22rem .6rem; border-radius: 999px; background: rgba(5, 31, 34, .94); border: 1px solid rgba(241, 233, 214, .34); color: var(--sand); font-size: .75rem; font-weight: 650; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 160ms ease; box-shadow: 0 6px 16px -6px rgba(0, 10, 12, .7); }
.spot[aria-pressed="true"] { z-index: 5; scale: 1.25; background: var(--orange-hi); box-shadow: 0 0 0 4px rgba(240, 121, 58, .32), 0 0 16px rgba(240, 121, 58, .5); }
.spot[aria-pressed="true"] .spot__tip { opacity: 1; scale: .8; transform-origin: 50% 100%; background: var(--orange); color: var(--orange-ink); border-color: var(--orange); font-size: .8rem; }
.spot:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: 3px; }
.spot--hub .spot__tip { opacity: 1; background: transparent; border-color: transparent; box-shadow: none; padding: .1rem .3rem; text-shadow: 0 1px 3px rgba(5, 31, 34, .9), 0 0 10px rgba(5, 31, 34, .8); }
.spot--hub[aria-pressed="true"] .spot__tip { padding: .22rem .6rem; text-shadow: none; }
/* com o mapa aproximado cada nome tem seu lugar: o JS calcula o deslocamento (--tx, --ty) para que nomes, pontos e selos não se choquem */
.map__world.is-close .spot__tip { opacity: 1; font-size: .7rem; padding: .16rem .5rem; bottom: auto; top: 50%; left: 50%; transform-origin: 50% 50%; translate: calc(-50% + var(--tx, 0px)) calc(-50% + var(--ty, -18px)); }
.map__world.is-close .spot--hub .spot__tip { background: rgba(5, 31, 34, .94); border-color: rgba(241, 233, 214, .34); box-shadow: 0 6px 16px -6px rgba(0, 10, 12, .7); text-shadow: none; }
.map__world.is-close .spot[aria-pressed="true"] { scale: 1; }
.map__world.is-close .spot[aria-pressed="true"] .spot__tip { scale: 1.08; font-size: .7rem; padding: .16rem .5rem; }
.spot__tip[data-stem]::after { content: ""; position: absolute; left: var(--sx, 50%); width: 1px; height: var(--sh, 8px); background: rgba(241, 233, 214, .55); }
.spot__tip[data-stem="down"]::after { top: 100%; }
.spot__tip[data-stem="up"]::after { bottom: 100%; }
@media (hover: hover) and (pointer: fine) {
  .spot:hover { z-index: 5; background: var(--orange-hi); box-shadow: 0 0 0 4px rgba(240, 121, 58, .28); }
  .spot:hover .spot__tip { opacity: 1; background: rgba(5, 31, 34, .97); }
}
@keyframes spot-in { from { opacity: 0; scale: .3; } }

.map__zoom { position: absolute; z-index: 6; right: .8rem; top: 2.9rem; display: grid; grid-auto-flow: column; gap: 1px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(241, 233, 214, .3); background: rgba(241, 233, 214, .22); box-shadow: 0 10px 24px -10px rgba(0, 10, 12, .7); }
.map__zoom button { display: grid; place-items: center; width: 42px; height: 42px; background: rgba(5, 31, 34, .9); color: var(--sand); font-size: 1.15rem; cursor: pointer; transition: background-color 160ms, color 160ms; }
.map__zoom button:disabled { opacity: .35; cursor: default; }
.map__zoom button:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .map__zoom button:not(:disabled):hover { background: var(--orange); color: var(--orange-ink); } }

/* movimento com motivo: linhas de duna e lagoa que correm, guarás que flutuam, sol que pulsa, anel que chama o clique */
@media (prefers-reduced-motion: no-preference) {
  .pin:not([aria-pressed="true"]) .pin__icon::after { animation: pin-ping 2.8s var(--ease-out) infinite; }
  .pin[data-stop="1"]:not([aria-pressed="true"]) .pin__icon::after { animation-delay: .9s; }
  .pin[data-stop="2"]:not([aria-pressed="true"]) .pin__icon::after { animation-delay: 1.8s; }
  .flow { stroke-dasharray: 7 5; animation: dune-flow 3.2s linear infinite; }
  .flow--2 { animation-duration: 4.4s; }
  .flow--3 { animation-duration: 2.6s; }
  .bird { animation: bird-bob 2.6s ease-in-out infinite; }
  .bird--2 { animation-delay: -.9s; }
  .bird--3 { animation-delay: -1.7s; }
  .sun-glow { transform-origin: 24px 29px; animation: sun-pulse 3.4s ease-in-out infinite; }
  .sun-rays { animation: ray-pulse 3.4s ease-in-out infinite; }
}
@keyframes pin-ping { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(1.75); opacity: 0; } }
@keyframes dune-flow { to { stroke-dashoffset: -48; } }
@keyframes bird-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1px, -2.5px); } }
@keyframes sun-pulse { 0%, 100% { opacity: .18; transform: scale(.95); } 50% { opacity: .42; transform: scale(1.08); } }
@keyframes ray-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.map__badge { position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border-radius: 999px; background: rgba(5, 31, 34, .7); border: 1px solid var(--line); font-size: .85rem; font-weight: 650; color: var(--sand); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: calc(100% - 2rem); }
.map__badge i { color: var(--orange-hi); font-size: 1.1rem; flex: none; }
/* aviso de que o mapa é clicável: aparece sempre, com mão que se mexe; troca "clique" por "toque" em telas de toque */
/* card de instrução: dentro do mapa, canto superior esquerdo, compacto; não captura toque, então zoom, arrasto e pontos seguem livres */
.map__hint { position: absolute; z-index: 6; left: 1rem; top: 1rem; display: flex; align-items: center; gap: .75rem; width: max-content; max-width: min(23rem, calc(100% - 2rem)); margin: 0; color: var(--sand); pointer-events: none; }
/* sem cartão: a mão e o texto flutuam direto sobre o mapa; a sombra do texto garante a leitura sobre mar ou areia */
.hint__hand { position: relative; flex: none; display: grid; place-items: center; width: 1em; height: 1em; font-size: 2.5rem; }
.hint__hand i { display: block; color: var(--orange-hi); font-size: 1em; line-height: 1; filter: drop-shadow(0 2px 5px rgba(5, 31, 34, .55)); transform-origin: 46% 14%; }
.hint__hand::before, .hint__hand::after { content: ""; position: absolute; left: 46%; top: 14%; width: .5em; height: .5em; margin: -.25em 0 0 -.25em; border: 2px solid var(--orange-hi); border-radius: 50%; opacity: 0; pointer-events: none; }
.hint__text { display: grid; gap: .22rem; text-wrap: balance; text-shadow: 0 1px 2px rgba(5, 31, 34, .85), 0 0 14px rgba(5, 31, 34, .75); }
.hint__main { font-size: .86rem; font-weight: 650; line-height: 1.3; }
.hint__sub { font-size: .72rem; font-weight: 500; line-height: 1.3; color: var(--sand); opacity: .88; }
/* animação do convite: a mão se ergue, toca o mapa e duas ondas saem da ponta do dedo, como um toque num ponto; depois descansa */
@media (prefers-reduced-motion: no-preference) {
  .hint__hand i { animation: hint-press 2.8s infinite; }
  .hint__hand::before { animation: hint-ripple 2.8s infinite; }
  .hint__hand::after { animation: hint-ripple 2.8s .2s infinite; }
}
@keyframes hint-press {
  0% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  16% { transform: translateY(-4px) scale(1.05); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  27% { transform: translateY(3px) scale(.88); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  44%, 100% { transform: translateY(0) scale(1); }
}
@keyframes hint-ripple {
  0%, 26% { opacity: 0; transform: scale(.35); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  29% { opacity: .9; transform: scale(.45); }
  64%, 100% { opacity: 0; transform: scale(2.2); }
}
.hint--click { display: none; }
@media (hover: hover) and (pointer: fine) { .hint--click { display: inline; } .hint--tap { display: none; } }
.map__note { position: absolute; right: 1rem; top: 1.1rem; font-size: .78rem; color: var(--sand-2); opacity: .8; }
@media (max-width: 640px) {
  .pin { padding: .9rem; }
  .pin__icon { width: 46px; height: 46px; }
  .pin__icon svg { width: 31px; height: 31px; }
  .pin__label { top: calc(100% - .6rem); font-size: .64rem; padding: .14rem .42rem; }
  .pin__tag { bottom: calc(100% - .9rem + 5px); font-size: .58rem; padding: .1rem .45rem; }
  .pin[data-stop="2"] .pin__label { transform: translateX(-26%); }
  .pin[data-stop="0"] .pin__label { transform: translateX(2%); }
  .map__zoom { top: .55rem; right: .55rem; border-radius: 12px; }
  .map__zoom button { width: 36px; height: 36px; font-size: 1.05rem; }
  .spot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-width: 1px; }
  .spot::before { inset: -4px; }
  .map__stage.is-zoomed .spot::before { inset: -10px; }
  .map { aspect-ratio: auto; display: grid; }
  .map__stage { position: relative; inset: auto; aspect-ratio: 900 / 520; }
  .map__info { position: static; pointer-events: auto; display: flex; flex-wrap: wrap; gap: .45rem .6rem; padding: .7rem .75rem .8rem; background: rgba(5, 31, 34, .94); border-top: 1px solid rgba(241, 233, 214, .16); }
  .map__badge { position: static; transform: none; max-width: none; white-space: normal; font-size: .74rem; padding: .35rem .75rem; background: rgba(241, 233, 214, .07); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .map__hint { left: .6rem; top: .6rem; gap: .45rem; max-width: calc(100% - 8.4rem); }
  .hint__hand { font-size: 1.9rem; }
  .hint__text { gap: .12rem; }
  .hint__main { font-size: .67rem; line-height: 1.22; }
  .hint__sub { font-size: .6rem; line-height: 1.22; }
  .map__note { display: none; }
}

.detail { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: var(--r-card); background: #0a343a; border: 1px solid var(--line); min-height: 230px; }
/* foto de fundo de cada parada: troca junto com o texto; o véu garante a leitura sobre fotos claras */
.detail__bgs { position: absolute; inset: 0; z-index: -1; }
.detail__bgs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 31, 34, .6) 0%, rgba(5, 31, 34, .26) 55%, rgba(5, 31, 34, .03) 100%); }
.detail__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 520ms ease, transform 1100ms var(--ease-out); }
.detail__bg.is-active { opacity: 1; transform: none; }
.detail h3, .detail__state { text-shadow: 0 1px 3px rgba(5, 31, 34, .6), 0 2px 16px rgba(5, 31, 34, .7); }
@media (prefers-reduced-motion: reduce) { .detail__bg { transition: opacity 200ms ease; transform: none; } }.detail__item { grid-area: 1 / 1; display: grid; gap: .7rem; align-content: start; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 260ms ease, transform 360ms var(--ease-out), visibility 0s linear 260ms; }
.detail__item.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.detail__state { align-self: start; justify-self: start; padding: .25rem .75rem; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .82rem; font-weight: 650; color: var(--sand); }
.detail h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-stretch: 108%; }
.detail p { color: #fbf6ea; text-shadow: 0 1px 3px rgba(5, 31, 34, .6), 0 2px 14px rgba(5, 31, 34, .7); }

.rota__about { display: grid; gap: .8rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--r-card); background: rgba(5, 31, 34, .66); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rota__about h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.4rem; }
.rota__about h3 i { font-size: 1.7rem; color: var(--orange-hi); flex: none; }
.rota__about p { max-width: 82ch; color: var(--sand); line-height: 1.65; }
.rota__about + .rota__days { margin-top: clamp(1rem, 2vw, 1.5rem); }
.rota__days { display: grid; gap: 1.4rem 2.5rem; align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--r-card); background: rgba(5, 31, 34, .66); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (min-width: 1000px) { .rota__days { grid-template-columns: 1.1fr auto auto; } }
.rota__days h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .7rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 650; font-size: .95rem; color: var(--sand); transition: background-color 200ms, color 200ms, border-color 200ms, transform 160ms var(--ease-out); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--sand); color: var(--ground); border-color: var(--sand); }
@media (hover: hover) and (pointer: fine) { .chip[aria-pressed="false"]:hover { border-color: var(--sand); } }

/* ---------- 7. por que ---------- */
.why5 { padding-top: clamp(4rem, 8vw, 7rem); isolation: isolate; overflow: hidden; }
/* fundo: as fitas coloridas de Jeri; o véu escurece para os cartões lerem e funde com as seções vizinhas */
.why5__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.why5__veil { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(to bottom, var(--ground) 0%, rgba(5, 31, 34, .72) 16%, rgba(5, 31, 34, .5) 42%, rgba(5, 31, 34, .58) 70%, rgba(5, 31, 34, .88) 90%, var(--ground) 100%); }
.why5 .h2 { text-shadow: 0 2px 18px rgba(5, 31, 34, .6); }
.whygrid { display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.wcard { position: relative; display: grid; gap: .8rem; align-content: start; padding: clamp(1.4rem, 2.4vw, 2.1rem); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: transform 360ms var(--ease-out), border-color 240ms; }
@media (hover: hover) and (pointer: fine) { .wcard:hover { transform: translateY(-4px); border-color: var(--line-strong); } }
.wcard h3 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); }
.wcard__icon { font-size: 1.9rem; color: var(--turq); }
.wcard .link { justify-self: start; margin-top: .4rem; }
.wcard--exp { background: linear-gradient(150deg, #f58a4b 0%, #d9582a 100%); border-color: transparent; }
.wcard--exp h3 { color: var(--orange-ink); }
.wcard--exp p { color: #2a1308; }
.wcard__big { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-display); color: var(--orange-ink) !important; line-height: .9; }
.wcard__big span { font-stretch: 118%; font-weight: 800; font-size: clamp(4rem, 8vw, 7rem); letter-spacing: -.04em; }
.wcard__big em { font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.wcard--att { background: linear-gradient(155deg, #12747a 0%, #0b4a50 75%); border-color: rgba(79, 214, 203, .28); }
.wcard--att p { color: #d3ece6; font-size: 1.1rem; max-width: 44ch; }
.wcard--att .wcard__icon { color: #a8f2eb; }
.wcard--rev .link { color: var(--sand); }
@media (min-width: 900px) {
  .whygrid { grid-template-columns: repeat(12, 1fr); }
  .wcard--exp { grid-column: span 5; min-height: 340px; }
  .wcard--att { grid-column: span 7; min-height: 340px; align-content: end; }
  .wcard--sec { grid-column: span 7; }
  .wcard--rev { grid-column: span 5; }
  .wcard--exp { align-content: space-between; }
}
@media (min-width: 640px) and (max-width: 899px) { .whygrid { grid-template-columns: 1fr 1fr; } .wcard--exp, .wcard--att { grid-column: 1 / -1; } }

/* cards com foto de fundo: o texto fica embaixo, sobre um véu que garante a leitura (o de "Experiência" mantém o tom laranja da marca) */
.wcard.wcard--photo { isolation: isolate; align-content: end; min-height: 320px; border-color: var(--line); background: #0b3a40; }
.wcard.wcard--exp.wcard--photo { background: linear-gradient(150deg, #b8431a 0%, #7a2d10 100%); }
.wcard__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.wcard--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(5, 31, 34, .92) 0%, rgba(5, 31, 34, .66) 36%, rgba(5, 31, 34, .14) 72%, rgba(5, 31, 34, 0) 100%); }
.wcard--exp.wcard--photo::after { background: linear-gradient(to top, rgba(140, 46, 14, .94) 0%, rgba(168, 58, 20, .7) 38%, rgba(217, 88, 42, .14) 74%, rgba(217, 88, 42, 0) 100%); }
.wcard--photo h3, .wcard--exp.wcard--photo h3 { color: #fffaf0; text-shadow: 0 1px 3px rgba(5, 31, 34, .5), 0 2px 14px rgba(5, 31, 34, .55); }
.wcard--photo p, .wcard--exp.wcard--photo p, .wcard--att.wcard--photo p { color: #f1eadb; text-shadow: 0 1px 3px rgba(5, 31, 34, .55), 0 2px 12px rgba(5, 31, 34, .5); }
.wcard--photo .wcard__big, .wcard--exp.wcard--photo .wcard__big { color: #fffaf0 !important; text-shadow: 0 2px 18px rgba(5, 31, 34, .45); }
.wcard--photo .wcard__icon, .wcard--att.wcard--photo .wcard__icon { color: var(--sand); }
.wcard--photo .link { color: var(--sand); }
@media (hover: hover) and (pointer: fine) { .wcard--photo:hover .wcard__img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .wcard__img { transition: none; } .wcard--photo:hover .wcard__img { transform: none; } }

/* ---------- 8. faq ---------- */
.faq { padding-top: clamp(2rem, 4vw, 3rem); }
.faq__grid { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
.faq__side { display: grid; gap: 2rem; align-content: start; }
.faq__photo { display: none; }
@media (min-width: 1000px) {
  .faq__grid { grid-template-columns: 4fr 8fr; }
  .faq__side { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; }
  /* só onde a coluna esquerda fica vazia: telas largas */
  .faq__photo { display: block; width: min(100%, 320px); aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--ground-2); }
  .faq__photo img { width: 100%; height: 100%; object-fit: cover; }
}
.acc__item { border-top: 1px solid var(--line); }
.acc__item:last-child { border-bottom: 1px solid var(--line); }
.acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; text-align: left; font-family: var(--font-display); font-stretch: 100%; font-weight: 650; font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--sand); letter-spacing: -.01em; line-height: 1.25; }
.acc__q i { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 1.1rem; transition: transform 300ms var(--ease-out), background-color 200ms, color 200ms; }
.acc__q[aria-expanded="true"] i { transform: rotate(135deg); background: var(--orange); color: var(--orange-ink); border-color: var(--orange); }
@media (hover: hover) and (pointer: fine) { .acc__q:hover i { border-color: var(--sand); } }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease-out); }
.acc__a > div { overflow: hidden; }
.acc__q[aria-expanded="true"] + .acc__a, .acc__item h3 + .acc__a { }
.acc__a.is-open { grid-template-rows: 1fr; }
.acc__a p { padding: 0 3.5rem 1.6rem 0; color: var(--sand-2); max-width: 62ch; opacity: 0; transform: translateY(-6px); transition: opacity 300ms ease, transform 380ms var(--ease-out); }
.acc__a.is-open p { opacity: 1; transform: none; transition-delay: 80ms; }

/* ---------- 9. cta final ---------- */
.finale { position: relative; min-height: 92dvh; display: grid; place-items: center; overflow: hidden; isolation: isolate; text-align: center; }
.finale__media { position: absolute; inset: 0; z-index: -2; }
.finale__media picture { display: contents; }
.finale__media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 62% 50%; }
.finale__grade { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(to bottom, var(--ground) 0%, rgba(5, 31, 34, .22) 26%, rgba(5, 31, 34, .08) 55%, rgba(5, 31, 34, .5) 100%),
    linear-gradient(to top, rgba(240, 121, 58, .5), rgba(240, 121, 58, 0) 62%),
    radial-gradient(60% 50% at 50% 42%, rgba(5, 31, 34, .4), transparent 80%); }
.finale__content { display: grid; justify-items: center; gap: clamp(1.2rem, 3vh, 2rem); padding-block: clamp(5rem, 12vh, 9rem); }
.finale .display { max-width: 14ch; text-shadow: 0 2px 40px rgba(5, 31, 34, .5); }
.finale__sub { color: var(--sand); font-size: clamp(1.1rem, 1.6vw, 1.35rem); text-shadow: 0 1px 20px rgba(5, 31, 34, .6); }

/* ---------- rodapé ---------- */
.foot { background: var(--ground); border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 5rem); }
.foot__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 5fr 3fr 4fr; gap: 4rem; } }
.foot__brand { display: grid; gap: 1.1rem; align-content: start; }
.foot__brand p { color: var(--sand-2); max-width: 40ch; }
.foot__col { display: grid; gap: .65rem; align-content: start; }
.foot__col h3 { font-size: 1rem; color: var(--sand); margin-bottom: .4rem; }
.foot__col a, .foot__place { display: inline-flex; align-items: center; gap: .6rem; color: var(--sand-2); transition: color 200ms; width: fit-content; }
.foot__col i { font-size: 1.2rem; color: var(--turq); }
@media (hover: hover) and (pointer: fine) { .foot__col a:hover { color: var(--orange-hi); } }
.foot__col .langrow { margin-top: .8rem; }
.foot__id { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.foot__stack { display: grid; gap: 2rem; align-content: start; }
.foot__reg { display: grid; gap: 1.1rem; }
.foot__reg .foot__id { color: var(--sand-2); font-size: .95rem; }
.foot__id span { color: var(--sand); font-weight: 650; margin-right: .35rem; }
/* selos (sem link): Cadastur, recortado do certificado sobre o azul dele com bordas suavizadas, e ARCE, logo oficial em branco */
.seals { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem; }
.regseal { display: block; flex: none; height: 40px; }
.regseal img { display: block; height: 100%; width: auto; }
.regseal--cadastur { aspect-ratio: 750 / 190; border-radius: 9px; overflow: hidden; background: linear-gradient(#4a9dd0, #62b4e0); }
.regseal--arce { height: 32px; aspect-ratio: 1280 / 318; }
.regseal--arce img { width: 100%; }
@media (max-width: 400px) { .regseal { height: 34px; } .regseal--arce { height: 28px; } }
.regseal--cadastur img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }

.foot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-top: 1px solid var(--line); padding-block: 1.4rem; color: var(--sand-3); font-size: .9rem; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
@media (max-width: 899px) { .foot__legal { padding-bottom: calc(5.4rem + env(safe-area-inset-bottom)); } }
/* só no celular: as bandeiras sobem para cima do copyright */
@media (max-width: 639px) { .foot__pay { order: -1; } }
.foot__pay { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; }
/* crédito do criador, logo abaixo dos direitos reservados */
.foot__rights { display: grid; gap: .3rem; }
.foot__credit { font-size: .8rem; color: var(--sand-3); }
.foot__credit a { display: inline-block; padding-block: .3rem; color: var(--sand-2); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(241 233 214 / .3); text-underline-offset: 3px; transition: color 200ms ease, text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .foot__credit a:hover { color: var(--orange-hi); text-decoration-color: currentColor; } }
.foot__credit a:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: 2px; border-radius: 3px; }
.foot__pay-label { font-size: .82rem; color: var(--sand-3); }
.pays { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.pays svg { display: block; width: 46px; height: 29px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(241, 233, 214, .16); }

/* ---------- botão flutuante ---------- */
/* botão flutuante do WhatsApp. A sombra é em camadas e curta (desce no máximo ~18px), para caber inteira entre o
   botão e a borda da tela (20px) — a sombra antiga descia ~40px e era cortada pela borda de baixo */
.fab { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + .5rem)); z-index: var(--z-fab); display: inline-flex; align-items: center; height: 58px; padding: 0 17px; border-radius: 999px; background: var(--orange); color: var(--orange-ink);
  box-shadow: 0 1px 2px rgba(0, 10, 12, .35), 0 4px 10px -2px rgba(0, 10, 12, .4), 0 8px 18px -8px rgba(240, 121, 58, .55), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform 160ms var(--ease-out), background-color 200ms, padding 320ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.fab i { font-size: 1.7rem; }
.fab__label { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: .96rem; opacity: 0; transition: max-width 360ms var(--ease-out), opacity 200ms, margin 360ms var(--ease-out); }
.fab:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .fab:hover { background: var(--orange-hi); padding-right: 22px; box-shadow: 0 1px 2px rgba(0, 10, 12, .35), 0 5px 12px -2px rgba(0, 10, 12, .42), 0 10px 20px -8px rgba(255, 147, 88, .65), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1); } .fab:hover .fab__label { max-width: 14rem; opacity: 1; margin-left: .6rem; } }
.js .fab { animation: fab-in 700ms var(--ease-out) 1.6s both; }
@keyframes fab-in { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
body.is-menu .fab { display: none; }

/* ---------- revelar ao rolar ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .stop[data-reveal].is-in { transition: opacity 800ms var(--ease-out) calc(var(--i, 0) * 90ms), transform 360ms var(--ease-out), border-color 240ms; }
.js [data-reveal-img] { clip-path: inset(10% 6% 10% 6% round var(--r-card)); opacity: .0; transition: clip-path 1200ms var(--ease-out), opacity 700ms ease; }
.js [data-reveal-img].is-in { clip-path: inset(0 round var(--r-card)); opacity: 1; }

/* paralaxe de imagem guiada pelo scroll, sem JS */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallax > img, .parallax > picture > img { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .finale__media img { animation-name: drift; }
  }
}
@keyframes drift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-reveal-img] { opacity: 1; transform: none; clip-path: none; }
  .map__route { stroke-dashoffset: 0; }
}

/* ---------- desempenho ---------- */
/* animações em laço pausadas enquanto a área está fora da tela (JS: initOffscreenPause) */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
/* celular/tablet: o header fixo fica sobre a página o tempo todo; desfoque de fundo nele é refeito a cada quadro da
   rolagem e pesa em aparelhos simples. Sem desfoque e com fundo um pouco mais denso, o visual é praticamente o mesmo. */
@media (max-width: 959px) {
  .nav.is-solid { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 31, 34, .95); }
}

/* ---------- ícones (Phosphor 2.1.1, MIT) ----------
   Antes vinham do unpkg: 2 folhas de estilo (160 KB) + 2 fontes (273 KB) com ~3.000 ícones, bloqueando a 1ª pintura.
   Agora só os 40 usados, embutidos como máscara SVG: mesma marcação (<i class="ph ph-nome">), mesma caixa de 1em
   e a cor vem do texto (currentColor). Para adicionar um ícone: copiar o SVG de
   https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/NOME.svg (ou fill/NOME-fill.svg) numa regra igual às de baixo. */
/* o desenho vai no ::before (como o glifo da fonte fazia): o próprio <i> mantém fundo, borda e tamanho
   (ex.: as bolinhas dos fatos e os círculos dos cards de roteiro) */
.ph, .ph-fill { font-style: normal; line-height: 1; }
.ph::before, .ph-fill::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: top;
  background-color: currentColor; -webkit-mask: var(--ph) center / contain no-repeat; mask: var(--ph) center / contain no-repeat; }.ph.ph-airplane-landing { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M256,216a8,8,0,0,1-8,8H104a8,8,0,0,1,0-16H248A8,8,0,0,1,256,216Zm-26.16-24.3L53.21,142.24A40.12,40.12,0,0,1,24,103.72V48A16,16,0,0,1,45.06,32.82l5.47,1.82a8,8,0,0,1,5,4.87L66.13,68.88,96,77.39V48a16,16,0,0,1,21.06-15.18l5.47,1.82a8,8,0,0,1,4.85,4.5l22.5,53.63,60.84,17A40.13,40.13,0,0,1,240,148.32V184a8,8,0,0,1-10.16,7.7ZM224,148.32a24.09,24.09,0,0,0-17.58-23.13l-64.57-18a8,8,0,0,1-5.23-4.61L114,48.67,112,48V88a8,8,0,0,1-10.19,7.7l-44-12.54a8,8,0,0,1-5.33-5L41.79,48.59,40,48v55.72a24.09,24.09,0,0,0,17.53,23.12L224,173.45Z'/%3E%3C/svg%3E"); }
.ph.ph-airplane-tilt { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M185.33,114.21l29.14-27.42.17-.17a32,32,0,0,0-45.26-45.26c0,.06-.11.11-.17.17L141.79,70.67l-83-30.2a8,8,0,0,0-8.39,1.86l-24,24a8,8,0,0,0,1.22,12.31l63.89,42.59L76.69,136H56a8,8,0,0,0-5.65,2.34l-24,24A8,8,0,0,0,29,175.42l36.82,14.73,14.7,36.75.06.16a8,8,0,0,0,13.18,2.47l23.87-23.88A8,8,0,0,0,120,200V179.31l14.76-14.76,42.59,63.89a8,8,0,0,0,12.31,1.22l24-24a8,8,0,0,0,1.86-8.39Zm-.07,97.23-42.59-63.88A8,8,0,0,0,136.8,144c-.27,0-.53,0-.79,0a8,8,0,0,0-5.66,2.35l-24,24A8,8,0,0,0,104,176v20.69L90.93,209.76,79.43,181A8,8,0,0,0,75,176.57l-28.74-11.5L59.32,152H80a8,8,0,0,0,5.66-2.34l24-24a8,8,0,0,0-1.22-12.32L44.56,70.74l13.5-13.49,83.22,30.26a8,8,0,0,0,8.56-2L180.78,52.6A16,16,0,0,1,203.4,75.23l-32.87,30.93a8,8,0,0,0-2,8.56l30.26,83.22Z'/%3E%3C/svg%3E"); }
.ph.ph-arrow-down { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M205.66,149.66l-72,72a8,8,0,0,1-11.32,0l-72-72a8,8,0,0,1,11.32-11.32L120,196.69V40a8,8,0,0,1,16,0V196.69l58.34-58.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); }
.ph.ph-arrow-right { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E"); }
.ph.ph-arrows-left-right { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M213.66,181.66l-32,32a8,8,0,0,1-11.32-11.32L188.69,184H48a8,8,0,0,1,0-16H188.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,213.66,181.66Zm-139.32-64a8,8,0,0,0,11.32-11.32L67.31,88H208a8,8,0,0,0,0-16H67.31L85.66,53.66A8,8,0,0,0,74.34,42.34l-32,32a8,8,0,0,0,0,11.32Z'/%3E%3C/svg%3E"); }
.ph.ph-arrow-up-right { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E"); }
.ph.ph-boat { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M221.06,110.59,208,106.23V56a16,16,0,0,0-16-16H136V24a8,8,0,0,0-16,0V40H64A16,16,0,0,0,48,56v50.23l-13.06,4.36A16,16,0,0,0,24,125.77V152c0,61.54,97.89,86.72,102.06,87.76a8,8,0,0,0,3.88,0C134.11,238.72,232,213.54,232,152V125.77A16,16,0,0,0,221.06,110.59ZM64,56H192v44.9L130.53,80.41a8,8,0,0,0-5.06,0L64,100.9Zm152,96c0,24.91-23.68,43-43.55,53.83A228.13,228.13,0,0,1,128,223.72,226.85,226.85,0,0,1,83.81,206C47.6,186.35,40,165.79,40,152V125.77L120,99.1V168a8,8,0,0,0,16,0V99.1l80,26.67Z'/%3E%3C/svg%3E"); }
.ph.ph-caret-down { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); }
.ph.ph-chat-circle-text { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M168,112a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,112Zm-8,24H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm72-8A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-16,0A88,88,0,1,0,51.81,172.06a8,8,0,0,1,.66,6.54L40,216,77.4,203.53a7.85,7.85,0,0,1,2.53-.42,8,8,0,0,1,4,1.08A88,88,0,0,0,216,128Z'/%3E%3C/svg%3E"); }
.ph.ph-clock { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/%3E%3C/svg%3E"); }
.ph.ph-corners-in { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z'/%3E%3C/svg%3E"); }
.ph.ph-drop { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75ZM128,216a72.08,72.08,0,0,1-72-72c0-57.23,55.47-105,72-118,16.53,13,72,60.75,72,118A72.08,72.08,0,0,1,128,216Zm55.89-62.66a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z'/%3E%3C/svg%3E"); }
.ph.ph-envelope-simple { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z'/%3E%3C/svg%3E"); }
.ph.ph-fire { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M183.89,153.34a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68ZM216,144a88,88,0,0,1-176,0c0-27.92,11-56.47,32.66-84.85a8,8,0,0,1,11.93-.89l24.12,23.41,22-60.41a8,8,0,0,1,12.63-3.41C165.21,36,216,84.55,216,144Zm-16,0c0-46.09-35.79-85.92-58.21-106.33L119.52,98.74a8,8,0,0,1-13.09,3L80.06,76.16C64.09,99.21,56,122,56,144a72,72,0,0,0,144,0Z'/%3E%3C/svg%3E"); }
.ph.ph-fish { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M168,76a12,12,0,1,1-12-12A12,12,0,0,1,168,76Zm48.72,67.64c-19.37,34.9-55.44,53.76-107.24,56.1l-22,51.41A8,8,0,0,1,80.1,256l-.51,0a8,8,0,0,1-7.19-5.78L57.6,198.39,5.8,183.56a8,8,0,0,1-1-15.05l51.41-22c2.35-51.78,21.21-87.84,56.09-107.22,24.75-13.74,52.74-15.84,71.88-15.18,18.64.64,36,4.27,38.86,6a8,8,0,0,1,2.83,2.83c1.69,2.85,5.33,20.21,6,38.85C232.55,90.89,230.46,118.89,216.72,143.64Zm-55.18,29a52.11,52.11,0,0,1-33.4-44.78A52.09,52.09,0,0,1,83.37,94.47q-10.45,23.79-11.3,57.59a8,8,0,0,1-4.85,7.17L31.83,174.37l34.45,9.86a8,8,0,0,1,5.49,5.5l9.84,34.44,15.16-35.4a8,8,0,0,1,7.17-4.84Q137.71,183.12,161.54,172.64ZM212.42,43.57c-14.15-3-64.1-11-100.3,14.75a81.21,81.21,0,0,0-16,15.07,36,36,0,0,0,39.35,38.44,8,8,0,0,1,8.73,8.73,36,36,0,0,0,38.47,39.34,80.81,80.81,0,0,0,15-16C223.42,107.73,215.42,57.74,212.42,43.57Z'/%3E%3C/svg%3E"); }
.ph.ph-fork-knife { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M72,88V40a8,8,0,0,1,16,0V88a8,8,0,0,1-16,0ZM216,40V224a8,8,0,0,1-16,0V176H152a8,8,0,0,1-8-8,268.75,268.75,0,0,1,7.22-56.88c9.78-40.49,28.32-67.63,53.63-78.47A8,8,0,0,1,216,40ZM200,53.9c-32.17,24.57-38.47,84.42-39.7,106.1H200ZM119.89,38.69a8,8,0,1,0-15.78,2.63L112,88.63a32,32,0,0,1-64,0l7.88-47.31a8,8,0,1,0-15.78-2.63l-8,48A8.17,8.17,0,0,0,32,88a48.07,48.07,0,0,0,40,47.32V224a8,8,0,0,0,16,0V135.32A48.07,48.07,0,0,0,128,88a8.17,8.17,0,0,0-.11-1.31Z'/%3E%3C/svg%3E"); }
.ph.ph-hand-pointing { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M196,88a27.86,27.86,0,0,0-13.35,3.39A28,28,0,0,0,144,74.7V44a28,28,0,0,0-56,0v80l-3.82-6.13A28,28,0,0,0,35.73,146l4.67,8.23C74.81,214.89,89.05,240,136,240a88.1,88.1,0,0,0,88-88V116A28,28,0,0,0,196,88Zm12,64a72.08,72.08,0,0,1-72,72c-37.63,0-47.84-18-81.68-77.68l-4.69-8.27,0-.05A12,12,0,0,1,54,121.61a11.88,11.88,0,0,1,6-1.6,12,12,0,0,1,10.41,6,1.76,1.76,0,0,0,.14.23l18.67,30A8,8,0,0,0,104,152V44a12,12,0,0,1,24,0v68a8,8,0,0,0,16,0V100a12,12,0,0,1,24,0v20a8,8,0,0,0,16,0v-4a12,12,0,0,1,24,0Z'/%3E%3C/svg%3E"); }
.ph.ph-hand-swipe-left { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M216,140v36c0,25.59-8.49,42.85-8.85,43.58A8,8,0,0,1,200,224a7.9,7.9,0,0,1-3.57-.85,8,8,0,0,1-3.58-10.73c.06-.12,7.16-14.81,7.16-36.42V140a12,12,0,0,0-24,0v4a8,8,0,0,1-16,0V124a12,12,0,0,0-24,0v12a8,8,0,0,1-16,0V68a12,12,0,0,0-24,0V176a8,8,0,0,1-14.79,4.23l-18.68-30-.14-.23A12,12,0,1,0,41.6,162L70.89,212A8,8,0,1,1,57.08,220l-29.32-50a28,28,0,0,1,48.41-28.17L80,148V68a28,28,0,0,1,56,0V98.7a28,28,0,0,1,38.65,16.69A28,28,0,0,1,216,140Zm32-92H195.31l18.34-18.34a8,8,0,0,0-11.31-11.32l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.31-11.32L195.31,64H248a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E"); }
.ph.ph-hand-tap { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M56,76a60,60,0,0,1,120,0,8,8,0,0,1-16,0,44,44,0,0,0-88,0,8,8,0,1,1-16,0Zm140,44a27.9,27.9,0,0,0-13.36,3.39A28,28,0,0,0,144,106.7V76a28,28,0,0,0-56,0v80l-3.82-6.13a28,28,0,0,0-48.41,28.17l29.32,50A8,8,0,1,0,78.89,220L49.6,170a12,12,0,1,1,20.78-12l.14.23,18.68,30A8,8,0,0,0,104,184V76a12,12,0,0,1,24,0v68a8,8,0,1,0,16,0V132a12,12,0,0,1,24,0v20a8,8,0,0,0,16,0v-4a12,12,0,0,1,24,0v36c0,21.61-7.1,36.3-7.16,36.42a8,8,0,0,0,3.58,10.73A7.9,7.9,0,0,0,208,232a8,8,0,0,0,7.16-4.42c.37-.73,8.85-18,8.85-43.58V148A28,28,0,0,0,196,120Z'/%3E%3C/svg%3E"); }
.ph.ph-instagram-logo { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z'/%3E%3C/svg%3E"); }
.ph.ph-jeep { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M240,88h-9.53l-9.29-43.35A16.08,16.08,0,0,0,205.53,32H50.47A16.08,16.08,0,0,0,34.82,44.65L25.53,88H16a8,8,0,0,0,0,16h8v96a16,16,0,0,0,16,16H64a16,16,0,0,0,16-16V176h96v24a16,16,0,0,0,16,16h24a16,16,0,0,0,16-16V104h8a8,8,0,0,0,0-16ZM50.47,48H205.53l8.57,40H41.9ZM64,200H40V176H64Zm128,0V176h24v24Zm24-40H152V128a8,8,0,0,0-16,0v32H120V128a8,8,0,0,0-16,0v32H40V104H216ZM56,132a12,12,0,1,1,12,12A12,12,0,0,1,56,132Zm120,0a12,12,0,1,1,12,12A12,12,0,0,1,176,132Z'/%3E%3C/svg%3E"); }
.ph.ph-map-pin { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z'/%3E%3C/svg%3E"); }
.ph.ph-martini { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M237.66,45.66A8,8,0,0,0,232,32H24a8,8,0,0,0-5.66,13.66L120,147.31V208H88a8,8,0,0,0,0,16h80a8,8,0,0,0,0-16H136V147.31ZM43.31,48H212.69l-16,16H59.31ZM128,132.69,75.31,80H180.69Z'/%3E%3C/svg%3E"); }
.ph.ph-medal { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M216,96A88,88,0,1,0,72,163.83V240a8,8,0,0,0,11.58,7.16L128,225l44.43,22.21A8.07,8.07,0,0,0,176,248a8,8,0,0,0,8-8V163.83A87.85,87.85,0,0,0,216,96ZM56,96a72,72,0,1,1,72,72A72.08,72.08,0,0,1,56,96ZM168,227.06l-36.43-18.21a8,8,0,0,0-7.16,0L88,227.06V174.37a87.89,87.89,0,0,0,80,0ZM128,152A56,56,0,1,0,72,96,56.06,56.06,0,0,0,128,152Zm0-96A40,40,0,1,1,88,96,40,40,0,0,1,128,56Z'/%3E%3C/svg%3E"); }
.ph.ph-minus { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E"); }
.ph.ph-moon-stars { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M240,96a8,8,0,0,1-8,8H216v16a8,8,0,0,1-16,0V104H184a8,8,0,0,1,0-16h16V72a8,8,0,0,1,16,0V88h16A8,8,0,0,1,240,96ZM144,56h8v8a8,8,0,0,0,16,0V56h8a8,8,0,0,0,0-16h-8V32a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16Zm72.77,97a8,8,0,0,1,1.43,8A96,96,0,1,1,95.07,37.8a8,8,0,0,1,10.6,9.06A88.07,88.07,0,0,0,209.14,150.33,8,8,0,0,1,216.77,153Zm-19.39,14.88c-1.79.09-3.59.14-5.38.14A104.11,104.11,0,0,1,88,64c0-1.79,0-3.59.14-5.38A80,80,0,1,0,197.38,167.86Z'/%3E%3C/svg%3E"); }
.ph.ph-mountains { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M164,80a28,28,0,1,0-28-28A28,28,0,0,0,164,80Zm0-40a12,12,0,1,1-12,12A12,12,0,0,1,164,40Zm90.88,155.92-54.56-92.08A15.87,15.87,0,0,0,186.55,96h0a15.85,15.85,0,0,0-13.76,7.84L146.63,148l-44.84-76.1a16,16,0,0,0-27.58,0L1.11,195.94A8,8,0,0,0,8,208H248a8,8,0,0,0,6.88-12.08ZM88,80l23.57,40H64.43ZM22,192l33-56h66l18.74,31.8,0,0L154,192Zm150.57,0-16.66-28.28L186.55,112,234,192Z'/%3E%3C/svg%3E"); }
.ph.ph-plant { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M247.63,47.89a8,8,0,0,0-7.52-7.52c-51.76-3-93.32,12.74-111.18,42.22-11.8,19.49-11.78,43.16-.16,65.74a71.34,71.34,0,0,0-14.17,27L98.33,159c7.82-16.33,7.52-33.35-1-47.49-13.2-21.79-43.67-33.47-81.5-31.25a8,8,0,0,0-7.52,7.52c-2.23,37.83,9.46,68.3,31.25,81.5A45.82,45.82,0,0,0,63.44,176,54.58,54.58,0,0,0,87,170.33l25,25V224a8,8,0,0,0,16,0V194.51a55.61,55.61,0,0,1,12.27-35,73.91,73.91,0,0,0,33.31,8.4,60.9,60.9,0,0,0,31.83-8.86C234.89,141.21,250.67,99.65,247.63,47.89ZM47.81,155.6C32.47,146.31,23.79,124.32,24,96c28.32-.24,50.31,8.47,59.6,23.81,4.85,8,5.64,17.33,2.46,26.94L61.65,122.34a8,8,0,0,0-11.31,11.31l24.41,24.41C65.14,161.24,55.82,160.45,47.81,155.6Zm149.31-10.22c-13.4,8.11-29.15,8.73-45.15,2l53.69-53.7a8,8,0,0,0-11.31-11.31L140.65,136c-6.76-16-6.15-31.76,2-45.15,13.94-23,47-35.82,89.33-34.83C232.94,98.34,220.14,131.44,197.12,145.38Z'/%3E%3C/svg%3E"); }
.ph.ph-plus { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E"); }
.ph.ph-seal-check { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-11.55,39.29c-4.79,5-9.75,10.17-12.38,16.52-2.52,6.1-2.63,13.07-2.73,19.82-.1,7-.21,14.33-3.32,17.43s-10.39,3.22-17.43,3.32c-6.75.1-13.72.21-19.82,2.73-6.35,2.63-11.52,7.59-16.52,12.38S132,224,128,224s-9.15-4.92-14.11-9.69-10.17-9.75-16.52-12.38c-6.1-2.52-13.07-2.63-19.82-2.73-7-.1-14.33-.21-17.43-3.32s-3.22-10.39-3.32-17.43c-.1-6.75-.21-13.72-2.73-19.82-2.63-6.35-7.59-11.52-12.38-16.52S32,132,32,128s4.92-9.15,9.69-14.11,9.75-10.17,12.38-16.52c2.52-6.1,2.63-13.07,2.73-19.82.1-7,.21-14.33,3.32-17.43S70.51,56.9,77.55,56.8c6.75-.1,13.72-.21,19.82-2.73,6.35-2.63,11.52-7.59,16.52-12.38S124,32,128,32s9.15,4.92,14.11,9.69,10.17,9.75,16.52,12.38c6.1,2.52,13.07,2.63,19.82,2.73,7,.1,14.33.21,17.43,3.32s3.22,10.39,3.32,17.43c.1,6.75.21,13.72,2.73,19.82,2.63,6.35,7.59,11.52,12.38,16.52S224,124,224,128,219.08,137.15,214.31,142.11ZM173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34Z'/%3E%3C/svg%3E"); }
.ph.ph-shield-check { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0ZM82.34,141.66a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32l-56,56a8,8,0,0,1-11.32,0Z'/%3E%3C/svg%3E"); }
.ph.ph-star { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'/%3E%3C/svg%3E"); }
.ph.ph-sun-horizon { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M240,152H199.55a73.54,73.54,0,0,0,.45-8,72,72,0,0,0-144,0,73.54,73.54,0,0,0,.45,8H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM72,144a56,56,0,1,1,111.41,8H72.59A56.13,56.13,0,0,1,72,144Zm144,56a8,8,0,0,1-8,8H48a8,8,0,0,1,0-16H208A8,8,0,0,1,216,200ZM72.84,43.58a8,8,0,0,1,14.32-7.16l8,16a8,8,0,0,1-14.32,7.16Zm-56,48.84a8,8,0,0,1,10.74-3.57l16,8a8,8,0,0,1-7.16,14.31l-16-8A8,8,0,0,1,16.84,92.42Zm192,15.16a8,8,0,0,1,3.58-10.73l16-8a8,8,0,1,1,7.16,14.31l-16,8a8,8,0,0,1-10.74-3.58Zm-48-55.16,8-16a8,8,0,0,1,14.32,7.16l-8,16a8,8,0,1,1-14.32-7.16Z'/%3E%3C/svg%3E"); }
.ph.ph-tree { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M198.1,62.59a76,76,0,0,0-140.2,0A71.71,71.71,0,0,0,16,127.8C15.9,166,48,199,86.14,200A72.09,72.09,0,0,0,120,192.47V232a8,8,0,0,0,16,0V192.47A72.17,72.17,0,0,0,168,200l1.82,0C208,199,240.11,166,240,127.8A71.71,71.71,0,0,0,198.1,62.59ZM169.45,184a56.08,56.08,0,0,1-33.45-10v-41l43.58-21.78a8,8,0,1,0-7.16-14.32L136,115.06V88a8,8,0,0,0-16,0v51.06L83.58,120.84a8,8,0,1,0-7.16,14.32L120,156.94v17a56,56,0,0,1-33.45,10C56.9,183.23,31.92,157.52,32,127.84A55.77,55.77,0,0,1,67.11,76a8,8,0,0,0,4.53-4.67,60,60,0,0,1,112.72,0A8,8,0,0,0,188.89,76,55.79,55.79,0,0,1,224,127.84C224.08,157.52,199.1,183.23,169.45,184Z'/%3E%3C/svg%3E"); }
.ph.ph-umbrella-simple { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M240,126.63A112.44,112.44,0,0,0,51.75,53.75a111.56,111.56,0,0,0-35.7,72.88A16,16,0,0,0,32,144h88v56a32,32,0,0,0,64,0,8,8,0,0,0-16,0,16,16,0,0,1-32,0V144h88a16,16,0,0,0,16-17.37ZM32,128l0,0A96.43,96.43,0,0,1,193.4,65.52,95.32,95.32,0,0,1,224,128Z'/%3E%3C/svg%3E"); }
.ph.ph-van { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M254.07,106.79,208.53,53.73A16,16,0,0,0,196.26,48H32A16,16,0,0,0,16,64V176a16,16,0,0,0,16,16H49a32,32,0,0,0,62,0h50a32,32,0,0,0,62,0h17a16,16,0,0,0,16-16V112A8,8,0,0,0,254.07,106.79ZM230.59,104H176V64h20.26ZM104,104V64h56v40ZM88,64v40H32V64ZM80,200a16,16,0,1,1,16-16A16,16,0,0,1,80,200Zm112,0a16,16,0,1,1,16-16A16,16,0,0,1,192,200Zm31-24a32,32,0,0,0-62,0H111a32,32,0,0,0-62,0H32V120H240v56Z'/%3E%3C/svg%3E"); }
.ph.ph-waves { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M222.16,177.25a8,8,0,0,1-1,11.25c-17.36,14.39-32.86,19.5-47,19.5-18.58,0-34.82-8.82-49.93-17-25.35-13.76-47.24-25.64-79.07.74a8,8,0,1,1-10.22-12.31c40.17-33.28,70.32-16.92,96.93-2.48,25.35,13.75,47.24,25.63,79.07-.74A8,8,0,0,1,222.16,177.25Zm-11.27-57c-31.83,26.38-53.72,14.5-79.07.74-26.61-14.43-56.76-30.79-96.93,2.49a8,8,0,0,0,10.22,12.31c31.83-26.38,53.72-14.5,79.07-.74,15.11,8.19,31.35,17,49.93,17,14.14,0,29.64-5.11,47-19.5a8,8,0,1,0-10.22-12.31ZM45.11,79.8c31.83-26.37,53.72-14.49,79.07-.74,15.11,8.2,31.35,17,49.93,17,14.14,0,29.64-5.12,47-19.5a8,8,0,1,0-10.22-12.31c-31.83,26.38-53.72,14.5-79.07.74C105.21,50.58,75.06,34.22,34.89,67.5A8,8,0,1,0,45.11,79.8Z'/%3E%3C/svg%3E"); }
.ph.ph-wind { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M184,184a32,32,0,0,1-32,32c-13.7,0-26.95-8.93-31.5-21.22a8,8,0,0,1,15-5.56C137.74,195.27,145,200,152,200a16,16,0,0,0,0-32H40a8,8,0,0,1,0-16H152A32,32,0,0,1,184,184Zm-64-80a32,32,0,0,0,0-64c-13.7,0-26.95,8.93-31.5,21.22a8,8,0,0,0,15,5.56C105.74,60.73,113,56,120,56a16,16,0,0,1,0,32H24a8,8,0,0,0,0,16Zm88-32c-13.7,0-26.95,8.93-31.5,21.22a8,8,0,0,0,15,5.56C193.74,92.73,201,88,208,88a16,16,0,0,1,0,32H32a8,8,0,0,0,0,16H208a32,32,0,0,0,0-64Z'/%3E%3C/svg%3E"); }
.ph-fill.ph-hand-pointing { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M224,104v50.93c0,46.2-36.85,84.55-83,85.06A83.71,83.71,0,0,1,80.6,215.4C58.79,192.33,34.15,136,34.15,136a16,16,0,0,1,6.53-22.23c7.66-4,17.1-.84,21.4,6.62l21,36.44a6.09,6.09,0,0,0,6,3.09l.12,0A8.19,8.19,0,0,0,96,151.74V32a16,16,0,0,1,16.77-16c8.61.4,15.23,7.82,15.23,16.43V104a8,8,0,0,0,8.53,8,8.17,8.17,0,0,0,7.47-8.25V88a16,16,0,0,1,16.77-16c8.61.4,15.23,7.82,15.23,16.43V112a8,8,0,0,0,8.53,8,8.17,8.17,0,0,0,7.47-8.25v-7.28c0-8.61,6.62-16,15.23-16.43A16,16,0,0,1,224,104Z'/%3E%3C/svg%3E"); }
.ph-fill.ph-whatsapp-logo { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cpath d='M152.58,145.23l23,11.48A24,24,0,0,1,152,176a72.08,72.08,0,0,1-72-72A24,24,0,0,1,99.29,80.46l11.48,23L101,118a8,8,0,0,0-.73,7.51,56.47,56.47,0,0,0,30.15,30.15A8,8,0,0,0,138,155ZM232,128A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-40,24a8,8,0,0,0-4.42-7.16l-32-16a8,8,0,0,0-8,.5l-14.69,9.8a40.55,40.55,0,0,1-16-16l9.8-14.69a8,8,0,0,0,.5-8l-16-32A8,8,0,0,0,104,64a40,40,0,0,0-40,40,88.1,88.1,0,0,0,88,88A40,40,0,0,0,192,152Z'/%3E%3C/svg%3E"); }