/* ==========================================================================
   BORA PRA NEVE — sistema visual "Alpenglow"
   Protótipo visual. Dados fictícios.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — tema claro (azul-gelo suave) definido no :root puro
   -------------------------------------------------------------------------- */
:root {
  /* superfícies */
  --ground:        #DBE8F5;
  --ground-2:      #E6F0FA;
  --ground-sunk:   #C9DBEE;

  /* tinta */
  --ink:           #0C1B2E;
  --ink-soft:      #364A63;
  --ink-mute:      #4E617C;
  --ink-faint:     #94A6BC;

  /* vidro */
  --glass:         rgba(230, 240, 250, 0.58);
  --glass-strong:  rgba(230, 240, 250, 0.82);
  --glass-brd:     rgba(12, 27, 46, 0.10);
  --glass-brd-hi:  rgba(255, 255, 255, 0.85);
  --glass-shadow:  0 28px 64px -28px rgba(14, 42, 86, 0.38);
  --glass-shadow-hi: 0 44px 88px -30px rgba(14, 42, 86, 0.50);
  --hair:          rgba(12, 27, 46, 0.11);

  /* véu sobre a fotografia de fundo */
  --veil-top:      rgba(219, 232, 245, 0.58);
  --veil-mid:      rgba(219, 232, 245, 0.88);
  --veil-bot:      rgba(219, 232, 245, 0.95);
  --bloom-a:       rgba(42, 147, 240, 0.16);
  --bloom-b:       rgba(226, 178, 78, 0.10);
  --bloom-blend:   multiply;
  --sky-sat:       1.02;
  --sky-bright:    1.02;

  /* acento alpenglow */
  --ember:         #2A93F0;
  --flare:         #5CC6FF;
  --copper:        #E2B24E;   /* dourado suave: estrelas, selos, detalhes */
  --accent-ink:    #0B5FBF;   /* legível sobre o branco azulado */
  --accent-soft:   rgba(42, 147, 240, 0.12);
  --accent-brd:    rgba(42, 147, 240, 0.30);
  --on-accent:     #04182E;

  /* semântica */
  --verified:      #1E8F63;
  --verified-soft: rgba(30, 143, 99, 0.12);

  /* neve */
  --flake:         255, 255, 255;
  --flake-alpha:   0.85;
  --flake-shade:   140, 120, 160;

  /* gradientes fixos nos dois temas */
  --grad-alpenglow: linear-gradient(104deg, #0F5FD0 0%, #1F82E8 52%, #38A6F2 100%);
  --grad-hair:      linear-gradient(90deg, transparent, var(--accent-brd) 22%, var(--accent-brd) 78%, transparent);

  /* medidas */
  --gutter:        clamp(20px, 5vw, 72px);
  --maxw:          1320px;
  --radius:        22px;
  --radius-sm:     13px;
  --radius-lg:     30px;

  /* tipo */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Azeret Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* movimento */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. TOKENS — tema escuro (grafite-índigo)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #061024;
    --ground-2:      #0C1B38;
    --ground-sunk:   #040A18;

    --ink:           #EAF3FF;
    --ink-soft:      #B6C9E2;
    --ink-mute:      #7F95B3;
    --ink-faint:     #566B8C;

    --glass:         rgba(10, 26, 58, 0.44);
    --glass-strong:  rgba(7, 18, 42, 0.72);
    --glass-brd:     rgba(255, 255, 255, 0.13);
    --glass-brd-hi:  rgba(255, 255, 255, 0.24);
    --glass-shadow:  0 30px 70px -30px rgba(0, 0, 0, 0.85);
    --glass-shadow-hi: 0 48px 96px -32px rgba(0, 0, 0, 0.92);
    --hair:          rgba(255, 255, 255, 0.11);

    --veil-top:      rgba(6, 16, 36, 0.28);
    --veil-mid:      rgba(6, 16, 36, 0.80);
    --veil-bot:      rgba(6, 16, 36, 0.93);
    --bloom-a:       rgba(42, 147, 240, 0.30);
    --bloom-b:       rgba(226, 178, 78, 0.14);
    --bloom-blend:   screen;
    --sky-sat:       1.12;
    --sky-bright:    0.92;

    --accent-ink:    #7CCBFF;
    --accent-soft:   rgba(92, 198, 255, 0.14);
    --accent-brd:    rgba(92, 198, 255, 0.34);
    --on-accent:     #031326;

    --verified:      #42D6A0;
    --verified-soft: rgba(66, 214, 160, 0.14);

    --flake:         240, 248, 255;
    --flake-alpha:   0.92;
    --flake-shade:   180, 200, 255;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground:        #061024;
  --ground-2:      #0C1B38;
  --ground-sunk:   #040A18;

  --ink:           #EAF3FF;
  --ink-soft:      #B6C9E2;
  --ink-mute:      #7F95B3;
  --ink-faint:     #566B8C;

  --glass:         rgba(10, 26, 58, 0.44);
  --glass-strong:  rgba(7, 18, 42, 0.72);
  --glass-brd:     rgba(255, 255, 255, 0.13);
  --glass-brd-hi:  rgba(255, 255, 255, 0.24);
  --glass-shadow:  0 30px 70px -30px rgba(0, 0, 0, 0.85);
  --glass-shadow-hi: 0 48px 96px -32px rgba(0, 0, 0, 0.92);
  --hair:          rgba(255, 255, 255, 0.11);

  --veil-top:      rgba(6, 16, 36, 0.28);
  --veil-mid:      rgba(6, 16, 36, 0.80);
  --veil-bot:      rgba(6, 16, 36, 0.93);
  --bloom-a:       rgba(42, 147, 240, 0.30);
  --bloom-b:       rgba(226, 178, 78, 0.14);
  --bloom-blend:   screen;
  --sky-sat:       1.12;
  --sky-bright:    0.92;

  --accent-ink:    #7CCBFF;
  --accent-soft:   rgba(92, 198, 255, 0.14);
  --accent-brd:    rgba(92, 198, 255, 0.34);
  --on-accent:     #031326;

  --verified:      #42D6A0;
  --verified-soft: rgba(66, 214, 160, 0.14);

  --flake:         240, 248, 255;
  --flake-alpha:   0.92;
  --flake-shade:   180, 200, 255;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 520ms var(--ease-soft), color 520ms var(--ease-soft);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--ember); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   4. CÉU — fotografia fixa, véu e brilho alpenglow
   -------------------------------------------------------------------------- */
.sky {
  position: fixed;
  inset: -2% -2% -2% -2%;
  z-index: -3;
  pointer-events: none;
}

.sky__shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  filter: saturate(var(--sky-sat)) brightness(var(--sky-bright));
  transition: opacity 2400ms var(--ease-soft), filter 700ms var(--ease-soft);
  will-change: opacity, transform;
}

.sky__shot.is-on,
.sky__shot.is-out {
  animation: skyDrift 26s var(--ease-soft) forwards;
}

.sky__shot.is-on { opacity: 1; }

@keyframes skyDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.2%, -1.6%, 0); }
}

.sky__veil {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      var(--veil-top) 0%,
      var(--veil-mid) 52%,
      var(--veil-bot) 100%
    );
  transition: background 520ms var(--ease-soft);
}

.sky__bloom {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: var(--bloom-blend);
  background:
    radial-gradient(60vw 48vh at 18% 8%,  var(--bloom-a), transparent 70%),
    radial-gradient(52vw 42vh at 88% 22%, var(--bloom-b), transparent 72%);
  transition: background 520ms var(--ease-soft);
}

/* neve */
.snow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. TIPOGRAFIA
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.9rem, 8.4vw, 7.4rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "wdth" 100, "opsz" 96;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0;
}

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--grad-alpenglow);
  flex: none;
}

.eyebrow--plain::before { display: none; }

/* palavra em degradê alpenglow */
.flame {
  background: var(--grad-alpenglow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --------------------------------------------------------------------------
   6. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 9vw, 130px); position: relative; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
  margin-bottom: clamp(30px, 4vw, 54px);
  flex-wrap: wrap;
}

/* em ch seria medido na fonte do corpo, não na display — daí o valor em px */
.section-head__text { display: grid; gap: 14px; flex: 1 1 440px; max-width: min(100%, 660px); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--grad-hair);
  opacity: 0.55;
}

/* trilho vertical à esquerda */
.rail {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
}

.rail::after {
  content: "";
  writing-mode: horizontal-tb;
  width: 1px;
  height: 84px;
  background: linear-gradient(180deg, var(--accent-brd), transparent);
}

/* altímetro à direita */
.altimeter {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: grid;
  justify-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  pointer-events: none;
}

.altimeter__track {
  width: 1px;
  height: 150px;
  background: var(--hair);
  position: relative;
  border-radius: 2px;
}

.altimeter__dot {
  position: absolute;
  left: 50%;
  top: 100%;   /* começa embaixo (0 m) e sobe com a rolagem */
  width: 7px;
  height: 7px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--grad-alpenglow);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 16px 2px var(--ember);
  transition: top 160ms linear;
}

.altimeter__val { color: var(--accent-ink); font-weight: 600; }

/* extremos da régua: pico no topo, 0 embaixo */
.altimeter__max, .altimeter__min { display: grid; justify-items: center; gap: 3px; white-space: nowrap; }
.altimeter__max small { font-size: 0.5rem; letter-spacing: 0.2em; color: var(--ink-mute); }

/* valor atual, ao lado do ponto */
.altimeter__tag {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.6rem;
  color: var(--ink-faint);
}

@media (max-width: 1180px) {
  .rail, .altimeter { display: none; }
}

/* --------------------------------------------------------------------------
   7. BARRA SUPERIOR
   -------------------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom: 14px;
  transition: background-color 420ms var(--ease-soft), backdrop-filter 420ms var(--ease-soft),
              border-color 420ms var(--ease-soft), padding 420ms var(--ease-soft);
  border-bottom: 1px solid transparent;
}

.topbar.is-stuck {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: var(--glass-brd);
  padding-top: calc(9px + env(safe-area-inset-top, 0px));
  padding-bottom: 9px;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.035em;
  line-height: 1.05;
  flex: none;
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--grad-alpenglow);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px -6px rgba(42, 147, 240, 0.75);
}

.brand__mark svg { width: 19px; height: 19px; display: block; }

.brand__text small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-top: 2px;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  font-size: 0.875rem;
  font-weight: 500;
}

.navlinks a {
  color: var(--ink-soft);
  position: relative;
  padding-block: 4px;
  transition: color 240ms var(--ease-soft);
  white-space: nowrap;
}

.navlinks a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--grad-alpenglow);
  transition: right 380ms var(--ease);
}

.navlinks a:hover { color: var(--ink); }
.navlinks a:hover::after,
.navlinks a.is-active::after { right: 0; }
.navlinks a.is-active { color: var(--ink); }

.topbar__actions { display: flex; align-items: center; gap: 10px; flex: none; }

@media (max-width: 940px) { .navlinks { display: none; } }

@media (max-width: 600px) {
  .topbar__actions .btn--ghost { display: none; }
  .brand { font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   8. BOTÕES E CONTROLES
   -------------------------------------------------------------------------- */
.btn {
  --btn-pad: 13px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: var(--btn-pad);
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease),
              background-color 280ms var(--ease-soft), border-color 280ms var(--ease-soft),
              color 280ms var(--ease-soft);
}

.btn svg { width: 15px; height: 15px; flex: none; }

.btn--primary {
  background: var(--grad-alpenglow);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(42, 147, 240, 0.85);
}

/* brilho que atravessa no hover */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.42) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 720ms var(--ease);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -14px rgba(42, 147, 240, 0.95);
}

.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-color: var(--glass-brd);
  color: var(--ink);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--accent-brd);
  color: var(--accent-ink);
}

.btn--sm { --btn-pad: 9px 18px; font-size: 0.82rem; }
.btn--lg { --btn-pad: 16px 32px; font-size: 0.96rem; }

/* alternador de tema */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex: none;
  transition: border-color 280ms var(--ease-soft), transform 280ms var(--ease);
}

.theme-toggle:hover { border-color: var(--accent-brd); transform: rotate(-16deg); }

.theme-toggle svg {
  width: 17px;
  height: 17px;
  position: absolute;
  transition: opacity 420ms var(--ease-soft), transform 520ms var(--ease);
  color: var(--accent-ink);
}

.theme-toggle .ico-sun  { opacity: 1; transform: none; }
.theme-toggle .ico-moon { opacity: 0; transform: translateY(16px) rotate(40deg); }

:root[data-theme="dark"] .theme-toggle .ico-sun,
.theme-dark .theme-toggle .ico-sun { opacity: 0; transform: translateY(-16px) rotate(-40deg); }

:root[data-theme="dark"] .theme-toggle .ico-moon,
.theme-dark .theme-toggle .ico-moon { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   9. VIDRO
   -------------------------------------------------------------------------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}

/* fio de luz no topo do vidro */
.glass--lit { position: relative; }
.glass--lit::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-brd-hi), transparent);
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.chip--accent {
  border-color: var(--accent-brd);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.chip--verified {
  border-color: transparent;
  background: var(--verified-soft);
  color: var(--verified);
}

.chip svg { width: 11px; height: 11px; }

/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(93vh, 880px);
  display: flex;
  align-items: flex-end;
  padding-top: clamp(130px, 18vh, 190px);
  padding-bottom: clamp(38px, 6vh, 70px);
}

.hero__grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(28px, 4vw, 60px);
}

.hero__copy { display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: start; min-width: 0; }
.hero__copy .lead { max-width: 46ch; }

.display--hero { font-size: clamp(3.2rem, 11.5vw, 9.5rem); letter-spacing: -0.052em; }

/* cada linha do título sobe por trás de uma máscara */
.line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.line > span { display: block; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* faixa de números do hero */
.hero__stats {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(20px, 3vw, 46px);
  padding: 20px 26px;
  border-radius: var(--radius);
}

.stat { display: grid; gap: 3px; }

.stat__val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.stat__lbl {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.hero__cue {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: clamp(26px, 4vh, 44px);
}

.hero__cue i {
  display: block;
  width: 30px;
  height: 1px;
  background: var(--grad-alpenglow);
  transform-origin: left;
  animation: cueSlide 2.6s var(--ease-soft) infinite;
}

@keyframes cueSlide {
  0%, 100% { transform: scaleX(0.35); opacity: 0.5; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* legenda da foto de fundo — o texto e o tamanho vêm do componente de crédito
   (.cred, seção 52); aqui só a posição fixa e o fade entre uma foto e outra */
.sky__caption {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 30;
  pointer-events: none;
  display: flex;
  align-items: center;
  transition: opacity 600ms var(--ease-soft);
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 100%; }
  .hero__stats { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* --------------------------------------------------------------------------
   11. CARDS DE VIAGEM
   -------------------------------------------------------------------------- */
.trips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

.trip {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  transition: transform 520ms var(--ease), box-shadow 520ms var(--ease),
              border-color 520ms var(--ease-soft);
  will-change: transform;
}

.trip:hover {
  transform: translateY(-9px);
  box-shadow: var(--glass-shadow-hi);
  border-color: var(--accent-brd);
}

.trip__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  max-width: 100%;
  flex: none;
}

.trip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease), filter 700ms var(--ease-soft);
}

.trip:hover .trip__media img { transform: scale(1.07); }

.trip__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 36, 0) 40%, rgba(6, 16, 36, 0.72) 100%);
}

.trip__tags {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.trip__tags .chip {
  background: rgba(6, 16, 36, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.2);
  color: #F2F8FF;
}

/* selos das viagens ("Últimas vagas", "Primeira vez"): o dourado da paleta */
.trip__tags .chip--accent {
  background: linear-gradient(104deg, #D9A93F 0%, #F0CD78 100%);
  border-color: transparent;
  color: #2B1E04;
}

.trip__place {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 2;
  color: #fff;
  display: grid;
  gap: 2px;
}

.trip__place strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.032em;
  line-height: 1.05;
}

.trip__place span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.trip__body {
  padding: 17px 18px 18px;
  display: grid;
  gap: 13px;
  align-content: start;
  flex: 1;
}

.trip__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.22;
  letter-spacing: -0.024em;
  margin: 0;
}

.trip__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.trip__facts span { display: inline-flex; align-items: center; gap: 5px; }
.trip__facts svg { width: 11px; height: 11px; color: var(--accent-ink); }

.trip__host {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.trip__host:hover b { text-decoration: underline; }

.trip__host img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--glass-brd-hi);
  flex: none;
}

.trip__host b { font-weight: 600; color: var(--ink); }

.trip__host .badge-v { margin-left: -3px; }

.trip__rating {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--ink-soft);
  flex: none;
}

.trip__rating svg { width: 10px; height: 10px; color: var(--copper); }

.trip__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  margin-top: auto;
}

.price { display: grid; gap: 1px; }

.price small {
  font-family: var(--font-mono);
  font-size: 0.53rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.price strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.038em;
  line-height: 1;
  color: var(--ink);
}

.price strong i {
  font-style: normal;
  font-size: 0.74em;
  color: var(--ink-mute);
  margin-right: 2px;
}

.seats {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  text-align: right;
}

.seats i { font-style: normal; display: block; color: var(--ink-mute); }

/* barra de vagas */
.gauge {
  height: 3px;
  border-radius: 2px;
  background: var(--hair);
  overflow: hidden;
  margin-top: 5px;
  width: 64px;
  margin-left: auto;
}

.gauge i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--grad-alpenglow);
}

/* --------------------------------------------------------------------------
   12. CREWS — faixa da comunidade
   -------------------------------------------------------------------------- */
.crews {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 46px);
  border-radius: var(--radius-lg);
}

.crews__copy { display: grid; gap: 18px; justify-items: start; }

.facepile { display: flex; align-items: center; }

.facepile img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ground-2);
  margin-left: -13px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  transition: transform 420ms var(--ease);
}

.facepile img:first-child { margin-left: 0; }
.facepile:hover img { transform: translateY(-4px); }
.facepile img:hover { transform: translateY(-9px) scale(1.08); }

.facepile__more {
  margin-left: 14px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.crewlist { display: grid; gap: 10px; }

.crewrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  transition: transform 380ms var(--ease), border-color 380ms var(--ease-soft),
              background-color 380ms var(--ease-soft);
}

.crewrow:hover { transform: translateX(6px); border-color: var(--accent-brd); }

.crewrow img {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  object-fit: cover;
  flex: none;
}

.crewrow__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }

.crewrow__txt b {
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.crewrow__txt span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crewrow__go {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  flex: none;
}

.badge-v {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--verified);
}

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

/* --------------------------------------------------------------------------
   13. NOTÍCIAS
   -------------------------------------------------------------------------- */
.news {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 26px);
}

.post {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  box-shadow: var(--glass-shadow);
  transition: transform 520ms var(--ease), box-shadow 520ms var(--ease),
              border-color 520ms var(--ease-soft);
}

.post:hover {
  transform: translateY(-7px);
  box-shadow: var(--glass-shadow-hi);
  border-color: var(--accent-brd);
}

/* matéria principal */
.post--lead { display: grid; grid-template-rows: 1fr auto; min-height: 380px; }

.post--lead .post__media { position: absolute; inset: 0; }

.post--lead .post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }

.post--lead:hover .post__media img { transform: scale(1.06); }

.post--lead .post__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 36, 0.12) 20%, rgba(6, 16, 36, 0.86) 88%);
}

.post--lead .post__body {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: clamp(20px, 2.6vw, 34px);
  display: grid;
  gap: 12px;
  justify-items: start;
  color: #fff;
}

.post--lead .post__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 2.15rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.post--lead .post__dek { color: rgba(255, 255, 255, 0.78); font-size: 0.93rem; margin: 0; max-width: 48ch; }

.post--lead .chip {
  background: rgba(6, 16, 36, 0.46);
  border-color: rgba(255, 255, 255, 0.22);
  color: #F2F8FF;
}

/* lista lateral */
.post-list { display: grid; gap: clamp(14px, 1.6vw, 20px); align-content: start; }

.post--row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: stretch; }

.post--row .post__media { overflow: hidden; }

.post--row .post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }

.post--row:hover .post__media img { transform: scale(1.08); }

.post--row .post__body { padding: 14px 16px; display: grid; gap: 7px; align-content: center; }

.post--row .post__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.97rem;
  line-height: 1.22;
  letter-spacing: -0.024em;
  margin: 0;
}

.post__meta {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 8px;
}

.post__meta em { font-style: normal; color: var(--accent-ink); }

@media (max-width: 900px) {
  .news { grid-template-columns: 1fr; }
  .post--lead { min-height: 320px; }
}

@media (max-width: 420px) {
  .post--row { grid-template-columns: 82px minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   14. FAIXA DE CHAMADA + RODAPÉ
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 72px);
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 130% at 50% 0%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}

.cta-band > * { position: relative; z-index: 1; }
.cta-band .lead { text-align: center; margin-inline: auto; }

.footer {
  border-top: 1px solid var(--hair);
  margin-top: clamp(60px, 8vw, 110px);
  padding-block: clamp(38px, 5vw, 62px) calc(34px + env(safe-area-inset-bottom, 0px));
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 0.87rem; }
.footer ul a { color: var(--ink-soft); transition: color 240ms var(--ease-soft); }
.footer ul a:hover { color: var(--accent-ink); }

.footer__note {
  margin-top: clamp(28px, 4vw, 46px);
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 760px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   15. REVELAÇÃO AO ROLAR — só quando há JS
   -------------------------------------------------------------------------- */
.js .r {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease) var(--d, 0ms),
              transform 900ms var(--ease) var(--d, 0ms),
              clip-path 900ms var(--ease) var(--d, 0ms);
  clip-path: inset(0 0 14% 0);
}

.js .r.is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   16. ABERTURA — "varredura alpenglow"
   -------------------------------------------------------------------------- */
.js .hero .line > span,
.js .hero__intro {
  transform: translateY(105%);
  opacity: 0;
}

.js .hero__intro { transform: translateY(20px); }

.js body.is-lit .hero .line > span {
  animation: riseIn 1000ms var(--ease) forwards;
}

.js body.is-lit .hero .line:nth-child(1) > span { animation-delay: 120ms; }
.js body.is-lit .hero .line:nth-child(2) > span { animation-delay: 220ms; }
.js body.is-lit .hero .line:nth-child(3) > span { animation-delay: 320ms; }

.js body.is-lit .hero__intro {
  animation: fadeUp 900ms var(--ease) forwards;
}

.js body.is-lit .hero__intro:nth-of-type(1) { animation-delay: 420ms; }

.hero__intro--a { animation-delay: 430ms !important; }
.hero__intro--b { animation-delay: 540ms !important; }
.hero__intro--c { animation-delay: 650ms !important; }
.hero__intro--d { animation-delay: 760ms !important; }

@keyframes riseIn {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* a luz que varre o pico */
.dawn {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
}

.js body.is-lit .dawn { animation: dawnSweep 1500ms var(--ease-soft) forwards; }

@keyframes dawnSweep {
  0%   { opacity: 0;    background: linear-gradient(112deg, transparent 0%, rgba(92, 198, 255, 0) 0%, transparent 0%); }
  22%  { opacity: 0.95; }
  100% { opacity: 0;
         background: linear-gradient(112deg,
           transparent 40%,
           rgba(92, 198, 255, 0.30) 62%,
           rgba(42, 147, 240, 0.16) 74%,
           transparent 96%); }
}

/* troca de tema: transição suave em toda a página */
:root.theming *,
:root.theming *::before,
:root.theming *::after {
  transition: background-color 560ms var(--ease-soft),
              border-color 560ms var(--ease-soft),
              color 560ms var(--ease-soft),
              box-shadow 560ms var(--ease-soft),
              fill 560ms var(--ease-soft) !important;
}

/* cortina inicial — só existe quando há JS para removê-la */
html:not(.js) .curtain { display: none; }

.curtain {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ground);
  pointer-events: none;
  transition: opacity 760ms var(--ease-soft), visibility 0s linear 760ms;
}

body.is-lit .curtain { opacity: 0; visibility: hidden; }

/* --------------------------------------------------------------------------
   17. TRANSIÇÃO ENTRE ROTAS
   -------------------------------------------------------------------------- */
.view {
  animation: viewIn 620ms var(--ease) both;
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

body.is-routing .view { opacity: 0; transform: translateY(-10px); transition: opacity 260ms var(--ease-soft), transform 260ms var(--ease-soft); }

/* --------------------------------------------------------------------------
   18. CADASTRO — tela dividida, sem rolagem
   -------------------------------------------------------------------------- */
body[data-page="cadastro"] .topbar,
body[data-page="cadastro"] .footer,
body[data-page="cadastro"] .rail,
body[data-page="cadastro"] .altimeter,
body[data-page="cadastro"] .sky__caption { display: none; }

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
}

/* ---- pôster fotográfico ---- */
.auth__poster {
  position: relative;
  overflow: hidden;
  display: flex;
  isolation: isolate;
}

.auth__pose {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1100ms var(--ease-soft), transform 4000ms var(--ease-soft);
}

.auth__pose.is-on { opacity: 1; transform: scale(1.1); }

.auth__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 16, 36, 0.66) 0%, rgba(6, 16, 36, 0.30) 42%, rgba(6, 16, 36, 0.90) 100%),
    linear-gradient(72deg, rgba(42, 147, 240, 0.30), transparent 62%);
}

.auth__posterinner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 26px;
  padding: clamp(26px, 3.4vw, 54px);
  color: #F2F8FF;
}

.auth__posterinner .brand { color: #fff; }
.auth__posterinner .brand__text small { color: rgba(255, 255, 255, 0.58); }

.auth__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

.auth__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}

/* a trilha de etapas vive sobre a foto: precisa de tons próprios */
.auth__poster .step::before { background: rgba(255, 255, 255, 0.22); }

.auth__poster .step__dot {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.70);
}

.auth__poster .step__txt b { color: rgba(255, 255, 255, 0.60); }
.auth__poster .step__txt span { color: rgba(255, 255, 255, 0.40); }
.auth__poster .step.is-on .step__txt b { color: #fff; }

.hint {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: none;
}

.auth__pitch { align-self: center; display: grid; gap: 20px; max-width: min(100%, 440px); }

.auth__pitch .display {
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  color: #fff;
}

.auth__pitch p {
  margin: 0;
  max-width: 38ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
}

/* depoimento */
.quotecard {
  display: grid;
  gap: 13px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: rgba(6, 16, 36, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 46ch;
}

.quotecard p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.5;
  color: #fff;
}

.quotecard p::before { content: "“"; color: var(--flare); font-size: 1.3em; line-height: 0; }

.quotecard footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.quotecard img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.quotecard footer [data-slot="who"] { white-space: nowrap; color: rgba(255, 255, 255, 0.86); }
.quotecard .badge-v { color: var(--flare); }

/* ---- etapas (trilha vertical) ---- */
.steps { display: grid; gap: 0; }

.step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding-bottom: 20px;
  position: relative;
}

.step:last-child { padding-bottom: 0; }

.step::before {
  content: "";
  position: absolute;
  left: 12.5px;
  top: 26px;
  bottom: 4px;
  width: 1px;
  background: var(--hair);
}

.step:last-child::before { display: none; }

.step__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--hair);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-faint);
  position: relative;
  z-index: 1;
  transition: all 420ms var(--ease);
}

.step__txt { display: grid; gap: 2px; padding-top: 3px; }

.step__txt b {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-mute);
  transition: color 420ms var(--ease-soft);
}

.step__txt span {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.step.is-on .step__dot {
  background: var(--grad-alpenglow);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.step.is-on .step__txt b { color: var(--ink); }

/* ---- painel do formulário ---- */
.auth__form {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(70px, 8vh, 82px) clamp(20px, 3.4vw, 56px) clamp(26px, 4.5vh, 46px);
  position: relative;
}

.auth__back {
  position: absolute;
  top: clamp(18px, 2.4vw, 32px);
  right: clamp(20px, 3.4vw, 56px);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* o cartão respira em vh: precisa caber numa tela só, de 700 px a 1100 px */
.authcard { width: 100%; max-width: 468px; display: grid; gap: clamp(14px, 2vh, 21px); }

.authcard__head { display: grid; gap: 10px; }

.authcard__head .h2 { font-size: clamp(1.7rem, 2.7vw, 2.3rem); }

/* ---- controle segmentado ---- */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.seg__pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--grad-alpenglow);
  box-shadow: 0 8px 20px -8px rgba(42, 147, 240, 0.8);
  transition: transform 520ms var(--ease);
}

.seg[data-on="agencia"] .seg__pill { transform: translateX(100%); }

.seg button {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  padding: 11px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color 380ms var(--ease-soft);
}

.seg button svg { width: 15px; height: 15px; }
.seg button[aria-pressed="true"] { color: #fff; }

/* ---- campos ---- */
.fields { display: grid; gap: clamp(11px, 1.6vh, 15px); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.field { display: grid; gap: 6px; min-width: 0; }

.field > label {
  font-family: var(--font-mono);
  font-size: 0.57rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.input {
  width: 100%;
  padding: clamp(10px, 1.4vh, 13px) 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.94rem;
  transition: border-color 280ms var(--ease-soft), box-shadow 280ms var(--ease-soft),
              background-color 280ms var(--ease-soft);
}

.input::placeholder { color: var(--ink-faint); }

.input:focus {
  outline: none;
  border-color: var(--accent-brd);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

select.input { appearance: none; cursor: pointer; }

.pwdwrap { position: relative; }

.pwdwrap .input { padding-right: 46px; }

.peek {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  border-radius: 9px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink-mute);
}

.peek:hover { color: var(--accent-ink); }
.peek svg { width: 16px; height: 16px; }

/* força da senha, medida como dificuldade de pista */
.strength { display: flex; align-items: center; gap: 10px; margin-top: 2px; }

.strength__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; }

.strength__bars i {
  height: 3px;
  border-radius: 2px;
  background: var(--hair);
  transition: background-color 420ms var(--ease-soft);
}

.strength__lbl {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  transition: color 420ms var(--ease-soft);
}

.strength[data-level="1"] .strength__bars i:nth-child(-n+1),
.strength[data-level="2"] .strength__bars i:nth-child(-n+2),
.strength[data-level="3"] .strength__bars i:nth-child(-n+3),
.strength[data-level="4"] .strength__bars i:nth-child(-n+4) { background: var(--piste); }

.strength[data-level="1"] { --piste: #3FA96B; }
.strength[data-level="2"] { --piste: #3D8BD8; }
.strength[data-level="3"] { --piste: #E0483F; }
.strength[data-level="4"] { --piste: #8A5BD6; }
.strength[data-level] .strength__lbl { color: var(--piste, var(--ink-mute)); }

/* ---- chips selecionáveis ---- */
.pick { display: flex; flex-wrap: wrap; gap: 8px; }

.pick button {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  color: var(--ink-soft);
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 320ms var(--ease);
}

.pick button:hover { border-color: var(--accent-brd); transform: translateY(-2px); }

.pick button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--grad-alpenglow);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(42, 147, 240, 0.9);
}

/* ---- caixa de seleção ---- */
.check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 0.83rem;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.45;
}

.check input { position: absolute; opacity: 0; width: 0; height: 0; }

.check__box {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  display: grid;
  place-items: center;
  margin-top: 1px;
  transition: all 300ms var(--ease);
}

.check__box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(0.4); transition: all 300ms var(--ease); }

.check input:checked + .check__box { background: var(--grad-alpenglow); border-color: transparent; }
.check input:checked + .check__box svg { opacity: 1; transform: none; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 4px var(--accent-soft); }
.check a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---- divisor e sociais ---- */
.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.divider::before, .divider::after { content: ""; height: 1px; background: var(--hair); }

.oauth { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.oauth .btn { width: 100%; }

.authfoot {
  font-size: 0.85rem;
  color: var(--ink-mute);
  text-align: center;
}

.authfoot a { color: var(--accent-ink); font-weight: 600; }

/* entrada escalonada dos campos ao trocar de perfil */
.fields.is-swap .field,
.fields.is-swap .row2,
.fields.is-swap .pick {
  animation: fieldIn 560ms var(--ease) both;
}

.fields.is-swap > :nth-child(1) { animation-delay: 0ms; }
.fields.is-swap > :nth-child(2) { animation-delay: 60ms; }
.fields.is-swap > :nth-child(3) { animation-delay: 120ms; }
.fields.is-swap > :nth-child(4) { animation-delay: 180ms; }
.fields.is-swap > :nth-child(5) { animation-delay: 240ms; }

@keyframes fieldIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 940px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth__poster { min-height: 52svh; }
  .auth__foot { grid-template-columns: 1fr; gap: 20px; }
  .auth__posterinner { gap: 32px; }
  .quotecard { max-width: 100%; }

  /* empilhada, a trilha cai no meio da foto: ganha a mesma laje do depoimento */
  .auth__poster .steps {
    padding: 18px 20px;
    border-radius: var(--radius);
    background: rgba(6, 16, 36, 0.44);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }
  .auth__pitch { max-width: 100%; }
  .auth__form { padding-top: clamp(40px, 8vw, 64px); }
  .auth__back { position: static; justify-content: space-between; width: 100%; max-width: 468px; margin-bottom: 22px; }
  .authcard { justify-self: center; }
}

@media (max-width: 480px) {
  .row2 { grid-template-columns: 1fr; }
  .oauth { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   19. PERFIL — dossiê de rider
   -------------------------------------------------------------------------- */
.dossie { padding-top: 78px; }

/* o dossiê tem masthead fixo, não barra transparente */
body[data-page="perfil"] .topbar {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: var(--glass-brd);
}

/* ---- capa fotográfica de ponta a ponta ---- */
.cover {
  position: relative;
  height: clamp(230px, 38vh, 420px);
  overflow: hidden;
  isolation: isolate;
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  animation: coverIn 1400ms var(--ease) both;
}

@keyframes coverIn {
  from { transform: scale(1.09); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 16, 36, 0.52) 0%, rgba(6, 16, 36, 0.12) 40%, var(--ground) 100%),
    linear-gradient(88deg, rgba(42, 147, 240, 0.26), transparent 58%);
}

/* a legenda mora no topo: é onde a foto continua escura nos dois temas */
.cover__mark {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.cover__mark b { color: #fff; font-weight: 500; }

/* ---- laje de identidade, sobreposta à capa ---- */
.idslab {
  position: relative;
  z-index: 3;
  margin-top: -58px;
  padding: clamp(20px, 2.6vw, 32px);
  /* flex com quebra, e não grade de 2 colunas: o bloco do nome tem um espaço
     mínimo garantido e, se os botões não couberem ao lado, descem para uma
     linha própria — em vez de espremer o nome por baixo deles. Vale para
     qualquer quantidade de botões (conta comum, prestador, admin). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 22px) clamp(22px, 3vw, 46px);
}

.idslab__who { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); min-width: 0; flex: 1 1 380px; }

.idslab__face {
  position: relative;
  width: clamp(76px, 8vw, 108px);
  height: clamp(76px, 8vw, 108px);
  flex: none;
}

.idslab__face img {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  object-fit: cover;
  border: 2px solid var(--glass-brd-hi);
  box-shadow: var(--glass-shadow);
}

.idslab__face .badge-v {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--ground-2);
  padding: 2px;
  box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.5);
}

.idslab__id { display: grid; gap: 7px; min-width: 0; }

.idslab__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.042em;
  margin: 0;
}

.idslab__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 14px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.idslab__meta em { font-style: normal; color: var(--ink-faint); }

.rating { display: inline-flex; align-items: center; gap: 5px; color: var(--copper); }
.rating svg { width: 12px; height: 12px; }
.rating b { color: var(--ink); font-family: var(--font-display); font-size: 0.82rem; letter-spacing: -0.02em; }

.idslab__acts { display: flex; gap: 9px; flex-wrap: wrap; flex: 0 1 auto; max-width: 100%; }

/* ---- instrumentos ---- */
.readouts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(18px, 2vw, 26px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--hair);
  border: 1px solid var(--glass-brd);
}

.readout {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  padding: clamp(16px, 2vw, 24px);
  display: grid;
  gap: 5px;
  transition: background-color 420ms var(--ease-soft);
}

.readout:hover { background: var(--accent-soft); }

.readout__val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.readout__val i { font-style: normal; font-size: 0.46em; color: var(--ink-mute); margin-left: 3px; letter-spacing: 0; }

.readout__lbl {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---- corpo do dossiê ---- */
.dossie__grid {
  display: grid;
  grid-template-columns: 324px minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(26px, 3vw, 42px);
  padding-bottom: clamp(40px, 6vw, 80px);
  align-items: start;
}

.dossie__side {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  position: sticky;
  top: 92px;
}

.dossie__main { display: grid; gap: clamp(20px, 2.4vw, 32px); min-width: 0; }

.dossie__block { display: grid; gap: 14px; min-width: 0; }

.panel {
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  display: grid;
  gap: 16px;
  align-content: start;
}

/* sem isto, o carrossel de carimbos empurra o painel para fora da coluna */
.panel > * { min-width: 0; }

.panel__title {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.panel__title span { color: var(--accent-ink); }

/* ---- medidor: perfil da montanha ---- */
.slope { display: grid; gap: 13px; }

.slope svg { width: 100%; height: auto; display: block; overflow: visible; }

.slope__ridge { fill: none; stroke: var(--hair); stroke-width: 2; stroke-linejoin: round; }
.slope__done  { fill: none; stroke: url(#gradSlope); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.slope__area  { fill: url(#gradArea); }

.slope__node { fill: var(--ground-2); stroke: var(--hair); stroke-width: 1.6; }
.slope__node.is-on { fill: var(--ember); stroke: none; }

.slope__you {
  fill: var(--ember);
  stroke: var(--ground-2);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(42, 147, 240, 0.9));
}

.slope__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.slope__lvl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.035em;
  line-height: 1;
}

.slope__scale {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}

.slope__scale b { color: var(--accent-ink); }

/* ---- lista de especificações ---- */
.spec { display: grid; gap: 0; margin: 0; }

.spec > div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}

.spec > div:last-child { border-bottom: 0; padding-bottom: 0; }
.spec > div:first-child { padding-top: 0; }

.spec dt {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.spec dd { margin: 0; font-size: 0.88rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- carimbos de passaporte ---- */
.stamps__wrap { position: relative; min-width: 0; margin-inline: clamp(-26px, -2.2vw, -18px); }

.stamps__wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 12px;
  right: 0;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ground));
  opacity: 0.85;
}

.stamps {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 10px clamp(18px, 2.2vw, 26px) 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.stamps::-webkit-scrollbar { display: none; }

.stamp {
  flex: none;
  width: 132px;
  scroll-snap-align: start;
  padding: 14px 13px 12px;
  border-radius: 12px;
  border: 1.5px dashed var(--accent-brd);
  background: var(--accent-soft);
  display: grid;
  gap: 4px;
  text-align: center;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease),
              background-color 420ms var(--ease-soft);
}

.stamp:nth-child(odd)  { transform: rotate(-1.6deg); }
.stamp:nth-child(even) { transform: rotate(1.4deg); }
.stamp:nth-child(3n)   { transform: rotate(0.6deg); }

.stamp:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 18px 34px -18px rgba(42, 147, 240, 0.7);
}

.stamp__yr {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--accent-ink);
}

.stamp__place {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.stamp__country {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.stamp__days {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px dashed var(--accent-brd);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---- avaliações ---- */
.reviews { display: grid; gap: 13px; }

.review {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair);
  background: var(--glass);
  transition: border-color 380ms var(--ease-soft), transform 380ms var(--ease);
}

.review:hover { border-color: var(--accent-brd); transform: translateY(-3px); }

.review img { width: 42px; height: 42px; border-radius: 13px; object-fit: cover; }

.review__body { display: grid; gap: 7px; min-width: 0; }

.review__top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }

.review__top b { font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

.review__when {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.review p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }

.review__trip {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.review__trip em { font-style: normal; color: var(--accent-ink); }

.stars { display: inline-flex; gap: 2px; color: var(--copper); }
.stars svg { width: 11px; height: 11px; }

@media (max-width: 1020px) {
  .dossie__grid { grid-template-columns: 1fr; }
  .dossie__side { position: static; }
  .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .idslab { align-items: flex-start; }
  .idslab__acts { width: 100%; }
  .idslab__acts .btn { flex: 1 1 auto; }
}

@media (max-width: 520px) {
  .idslab__who { flex-direction: column; align-items: flex-start; }
  .spec > div { grid-template-columns: 1fr; gap: 2px; }
}

/* --------------------------------------------------------------------------
   20. AVISO — o que existe e o que não existe neste protótipo
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 22px);
  z-index: 95;
  max-width: min(92vw, 460px);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow-hi);
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 11px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease), transform 440ms var(--ease);
}

.toast::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--grad-alpenglow);
  box-shadow: 0 0 10px 1px var(--ember);
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   21. LISTAGEM — bancada de trabalho
   -------------------------------------------------------------------------- */
.bench { padding-top: clamp(96px, 13vh, 132px); padding-bottom: clamp(50px, 7vw, 96px); }

/* bancada é superfície de trabalho: mais chão, menos fotografia */
body[data-page="viagens"] .sky__veil {
  background: linear-gradient(180deg, var(--veil-mid) 0%, var(--veil-bot) 55%, var(--veil-bot) 100%);
}

.bench__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.bench__head .display {
  font-size: clamp(2.2rem, 5.2vw, 4.1rem);
  max-width: 16ch;
}

.bench__live {
  display: grid;
  gap: 2px;
  text-align: right;
  flex: none;
}

.bench__live b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.bench__live span {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---- seletor de temporada: escolher QUANDO antes de ONDE ---- */
.season {
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 24px) clamp(13px, 1.6vw, 17px);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  display: grid;
  gap: 13px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

.season__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.season__legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.season__legend i {
  display: inline-block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

.season__legend i.sul   { background: var(--copper); }
.season__legend i.norte { background: #5BA8E8; }

.season__track {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.season__track::-webkit-scrollbar { display: none; }

.month {
  position: relative;
  display: grid;
  align-content: end;
  gap: 7px;
  padding: 7px 4px 9px;
  min-width: 52px;
  border: 0;
  border-radius: 11px;
  background: none;
  cursor: pointer;
  text-align: center;
  transition: background-color 300ms var(--ease-soft);
}

.month:hover:not(:disabled) { background: var(--accent-soft); }

.month:disabled { cursor: default; opacity: 0.42; }

.month__bar {
  height: 42px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.month__bar i {
  display: block;
  width: 100%;
  max-width: 26px;
  border-radius: 4px 4px 2px 2px;
  background: var(--hair);
  transition: background 340ms var(--ease-soft), transform 340ms var(--ease);
  transform-origin: bottom;
}

/* a barra é o dado principal da página. Laranja com alfa baixo sobre fundo
   escuro vira marrom, então a distinção é de preenchimento, não de opacidade:
   contorno = mês com viagens, sólido = mês escolhido. */
.month:not(:disabled) .month__bar i {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-brd);
}

.month.is-on { background: var(--accent-soft); }

.month.is-on .month__bar i {
  background: var(--grad-alpenglow);
  box-shadow: 0 5px 16px -5px rgba(42, 147, 240, 0.85);
}

.month:hover:not(:disabled) .month__bar i { transform: scaleY(1.08); }

.month.is-on .month__bar i { background: var(--grad-alpenglow); }

.month__lbl {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 300ms var(--ease-soft);
}

.month__lbl em { font-style: normal; display: block; font-size: 0.86em; color: var(--ink-faint); }

.month[data-season="sul"]   .month__lbl { border-bottom-color: rgba(226, 178, 78, 0.75); }
.month[data-season="norte"] .month__lbl { border-bottom-color: rgba(91, 168, 232, 0.55); }

.month.is-on .month__lbl { color: var(--ink); font-weight: 600; }

/* ---- corpo: trilho de filtros + resultados ---- */
.bench__grid {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: start;
}

.rail-f {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 18px;
  padding: clamp(17px, 2vw, 22px);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
}

.rail-f__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--hair);
}

.rail-f__top b {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.clearbtn {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.clearbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

.fgroup { display: grid; gap: 10px; }

.fgroup > b {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.fgroup > b span { color: var(--accent-ink); }

.fchips { display: flex; flex-wrap: wrap; gap: 7px; }

.fchip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.79rem;
  cursor: pointer;
  transition: all 280ms var(--ease);
}

.fchip:hover { border-color: var(--accent-brd); color: var(--accent-ink); }

.fchip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--grad-alpenglow);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(42, 147, 240, 0.9);
}

/* controle de preço */
.range { -webkit-appearance: none; appearance: none; width: 100%; background: none; cursor: pointer; }

.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ember) 0%, var(--copper) var(--fill, 100%), var(--hair) var(--fill, 100%));
}

.range::-moz-range-track { height: 4px; border-radius: 3px; background: var(--hair); }
.range::-moz-range-progress { height: 4px; border-radius: 3px; background: var(--copper); }

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--ground-2);
  border: 2.5px solid var(--ember);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--ground-2);
  border: 2.5px solid var(--ember);
}

/* interruptor */
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-size: 0.83rem;
  color: var(--ink-soft);
}

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch__ui {
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: var(--hair);
  border: 1px solid var(--glass-brd);
  position: relative;
  flex: none;
  transition: background 340ms var(--ease-soft);
}

.switch__ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: transform 340ms var(--ease), background 340ms var(--ease-soft);
}

.switch input:checked + .switch__ui { background: var(--grad-alpenglow); border-color: transparent; }
.switch input:checked + .switch__ui::after { transform: translateX(17px); background: #fff; }
.switch input:focus-visible + .switch__ui { box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---- barra de resultados ---- */
.results { display: grid; gap: clamp(16px, 2vw, 22px); min-width: 0; }

.results__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}

.results__tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }

.tagpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-brd);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.tagpill button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.7;
}

.tagpill button:hover { opacity: 1; }

.results__ctrl { display: flex; align-items: center; gap: 10px; flex: none; }

.sortsel {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  appearance: none;
}

.sortsel:focus { outline: none; border-color: var(--accent-brd); box-shadow: 0 0 0 4px var(--accent-soft); }

.viewtoggle {
  display: flex;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
}

.viewtoggle button {
  width: 32px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  transition: all 280ms var(--ease);
}

.viewtoggle button svg { width: 15px; height: 15px; }

.viewtoggle button[aria-pressed="true"] { background: var(--grad-alpenglow); color: #fff; }

/* ---- modo lista ---- */
.triplist { display: grid; gap: 11px; }

.triprow {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  gap: clamp(14px, 1.8vw, 22px);
  align-items: center;
  padding: 11px 16px 11px 11px;
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  transition: transform 420ms var(--ease), border-color 420ms var(--ease-soft),
              box-shadow 420ms var(--ease);
}

.triprow:hover {
  transform: translateX(6px);
  border-color: var(--accent-brd);
  box-shadow: var(--glass-shadow-hi);
}

.triprow__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 13px;
  overflow: hidden;
  flex: none;
}

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

.triprow__body { display: grid; gap: 6px; min-width: 0; }

.triprow__place {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.triprow__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.16;
  letter-spacing: -0.028em;
  margin: 0;
}

.triprow__side { display: grid; gap: 6px; justify-items: end; text-align: right; flex: none; }

@media (max-width: 1100px) {
  .bench__grid { grid-template-columns: 1fr; }
  .rail-f { position: static; }
  .rail-f__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
}

@media (max-width: 820px) {
  .season__track { grid-template-columns: repeat(12, 58px); }
  .bench__live { text-align: left; display: flex; align-items: baseline; gap: 11px; }
  .bench__live b { font-size: 2.1rem; }
  .triprow { grid-template-columns: 110px minmax(0, 1fr); }
  .triprow__side { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .triprow__side .gauge { margin-left: 0; }
}

/* ---- nada encontrado ---- */
.empty {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding: clamp(40px, 7vw, 76px) 24px;
  border-radius: var(--radius);
  border: 1px dashed var(--glass-brd);
  background: var(--glass);
}

.empty p { margin: 0; color: var(--ink-mute); max-width: 42ch; }

/* --------------------------------------------------------------------------
   22. AGÊNCIAS — quadro de reputação
   -------------------------------------------------------------------------- */
.board { padding-top: clamp(96px, 13vh, 132px); padding-bottom: clamp(120px, 14vw, 180px); }

body[data-page="agencias"] .sky__veil {
  background: linear-gradient(180deg, var(--veil-mid) 0%, var(--veil-bot) 55%, var(--veil-bot) 100%);
}

.board__head { display: grid; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); max-width: 62ch; }
.board__head .display { font-size: clamp(2.2rem, 5.2vw, 4.1rem); }

/* ---- o que o selo exige ---- */
.criteria {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}

.criterion {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  padding: clamp(14px, 1.8vw, 20px);
  display: grid;
  gap: 7px;
  align-content: start;
}

.criterion svg { width: 17px; height: 17px; color: var(--verified); }

.criterion b { font-size: 0.87rem; font-weight: 600; letter-spacing: -0.015em; }

.criterion span {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---- agência em destaque ---- */
.spotlight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--radius-lg);
  margin-bottom: clamp(22px, 3vw, 34px);
  position: relative;
  overflow: hidden;
}

.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 160% at 8% 0%, var(--accent-soft), transparent 68%);
  pointer-events: none;
}

.spotlight > * { position: relative; z-index: 1; }

.spotlight__face { position: relative; flex: none; display: block; }

.spotlight__face img {
  width: clamp(72px, 7vw, 96px);
  height: clamp(72px, 7vw, 96px);
  border-radius: 24px;
  object-fit: cover;
  border: 2px solid var(--glass-brd-hi);
}

.spotlight__face .badge-v {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--ground-2);
  padding: 2px;
}

.spotlight__body { display: grid; gap: 9px; min-width: 0; }

.spotlight__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.042em;
  margin: 0;
}
.spotlight__name a { color: inherit; text-decoration: none; }
.spotlight__name a:hover { text-decoration: underline; }

.spotlight__body p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); max-width: 56ch; }

.spotlight__nums {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(16px, 2.4vw, 34px);
  flex: none;
}

.spotlight__nums div { display: grid; gap: 3px; }

.spotlight__nums b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.spotlight__nums span {
  font-family: var(--font-mono);
  font-size: 0.53rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---- o quadro ---- */
.boardwrap {
  border-radius: var(--radius);
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  box-shadow: var(--glass-shadow);
  overflow-x: auto;
}

.board__grid { min-width: 940px; }

.brow {
  display: grid;
  grid-template-columns: 38px minmax(190px, 1.5fr) minmax(150px, 1.2fr) 92px 86px 74px 96px 84px 46px;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hair);
  transition: background-color 320ms var(--ease-soft);
}

.brow:last-child { border-bottom: 0; }
.brow:not(.brow--head):hover { background: var(--accent-soft); }
.brow.is-pinned { background: var(--accent-soft); }

.brow--head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding-block: 11px;
}

.brow--head span, .brow--head button {
  font-family: var(--font-mono);
  font-size: 0.53rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}

.brow--head button { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.brow--head button:hover { color: var(--accent-ink); }
.brow--head button[data-on="1"] { color: var(--accent-ink); }
.brow--head button i { font-style: normal; opacity: 0; transition: opacity 240ms; }
.brow--head button[data-on="1"] i { opacity: 1; }

.brank {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.brow.is-top .brank { color: var(--accent-ink); font-weight: 600; }

.bname { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; text-decoration: none; }
.bname:hover .bname__txt b { text-decoration: underline; }

.bname img { width: 34px; height: 34px; border-radius: 11px; object-fit: cover; flex: none; }

.bname__txt { display: grid; gap: 1px; min-width: 0; }

.bname__txt b {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bname__txt span {
  font-family: var(--font-mono);
  font-size: 0.53rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.bspec { display: flex; flex-wrap: wrap; gap: 5px; }

.bspec .chip { font-size: 0.53rem; padding: 3px 8px; }

.bnum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.bnum em { font-style: normal; font-size: 0.62em; color: var(--ink-mute); margin-left: 2px; }

.bgrade { display: flex; align-items: center; gap: 6px; }
.bgrade svg { width: 12px; height: 12px; color: var(--copper); flex: none; }

.bmono {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* faixa de preço */
.pricelvl { display: flex; gap: 3px; align-items: center; }

.pricelvl i {
  width: 6px;
  height: 14px;
  border-radius: 2px;
  background: var(--hair);
}

.pricelvl i.on { background: var(--grad-alpenglow); }

/* botão de comparar */
.pinbtn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--glass-brd);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 280ms var(--ease);
}

.pinbtn svg { width: 14px; height: 14px; }
.pinbtn:hover { border-color: var(--accent-brd); color: var(--accent-ink); }

.pinbtn[aria-pressed="true"] {
  background: var(--grad-alpenglow);
  border-color: transparent;
  color: #fff;
}

/* ---- bandeja de comparação ---- */
.tray {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 130%);
  z-index: 70;
  width: min(94vw, 760px);
  padding: 13px 16px;
  border-radius: var(--radius);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow-hi);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  transition: transform 520ms var(--ease);
}

.tray.is-up { transform: translate(-50%, 0); }

.tray__slots { display: flex; gap: 9px; flex: 1; min-width: 0; flex-wrap: wrap; }

.slot {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  border: 1.5px dashed var(--glass-brd);
  display: grid;
  place-items: center;
  position: relative;
  flex: none;
}

.slot img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }

.slot button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 0;
  background: var(--ember);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.tray__hint {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* painel de comparação */
.compare {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  z-index: 69;
  width: min(94vw, 760px);
  max-height: min(64vh, 520px);
  overflow-y: auto;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius);
  /* a mesma cor duas vezes: dobra a opacidade e separa o painel da tabela
     que fica atrás, sem abrir mão do vidro */
  background:
    linear-gradient(var(--glass-strong), var(--glass-strong)),
    linear-gradient(var(--glass-strong), var(--glass-strong));
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow-hi);
  opacity: 0;
  pointer-events: none;
  transition: opacity 340ms var(--ease), transform 440ms var(--ease);
}

.compare.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.cmp { display: grid; gap: 0; }

.cmp__row {
  display: grid;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
  align-items: center;
}

.cmp__row:last-child { border-bottom: 0; }

.cmp__row > b:first-child {
  font-family: var(--font-mono);
  font-size: 0.53rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.cmp__row > span { font-size: 0.87rem; font-variant-numeric: tabular-nums; }

.cmp__row--head > span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmp__best { color: var(--accent-ink); font-weight: 600; }

@media (max-width: 900px) {
  .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spotlight { grid-template-columns: auto minmax(0, 1fr); }
  .spotlight__nums { grid-column: 1 / -1; grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 560px) {
  .criteria { grid-template-columns: 1fr; }
  .tray { width: calc(100vw - 24px); }
  .compare { width: calc(100vw - 24px); }
}

/* --------------------------------------------------------------------------
   23. NOTÍCIAS — editoria
   -------------------------------------------------------------------------- */
.paper { padding-top: clamp(92px, 12vh, 124px); padding-bottom: clamp(50px, 7vw, 96px); }

body[data-page="noticias"] .sky__veil {
  background: linear-gradient(180deg, var(--veil-mid) 0%, var(--veil-bot) 50%, var(--veil-bot) 100%);
}

/* ---- cabeçalho de jornal ---- */
.masthead { display: grid; gap: 13px; margin-bottom: clamp(18px, 2.4vw, 26px); }

.masthead__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.masthead h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  letter-spacing: -0.046em;
  line-height: 0.96;
  margin: 0;
}

.masthead__meta {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.masthead__meta em { font-style: normal; color: var(--accent-ink); }

.masthead__rules { display: grid; gap: 3px; }
.masthead__rules i { display: block; height: 1px; background: var(--grad-alpenglow); opacity: 0.8; }
.masthead__rules i:last-child { opacity: 0.3; }

/* ---- grade da edição ---- */
.paper__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
}

/* a folha: as matérias não são cards, são colunas separadas por fios */
.sheet {
  padding: clamp(20px, 2.8vw, 36px);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  min-width: 0;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.byline {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* chamada principal */
.lead {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: center;
  padding-bottom: clamp(22px, 2.6vw, 30px);
}

.lead__body { display: grid; gap: 13px; min-width: 0; }

.lead__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  line-height: 1.02;
  letter-spacing: -0.042em;
  margin: 0;
  text-wrap: balance;
}

.lead__dek {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 48ch;
}

.lead__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  max-width: 100%;
}

.lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease);
}

.lead:hover .lead__media img { transform: scale(1.05); }

/* colunas de matérias */
.stories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.6vw, 34px);
  border-top: 1.5px solid var(--hair);
}

.story {
  display: grid;
  gap: 9px;
  padding: clamp(18px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--hair);
  align-content: start;
  min-width: 0;
  transition: opacity 320ms var(--ease-soft);
}

.stories .story:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }

.story:hover { opacity: 0.72; }

.story__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  margin-bottom: 3px;
}

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

.story__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

.story__dek { margin: 0; font-size: 0.89rem; line-height: 1.5; color: var(--ink-soft); }

/* matéria só de texto ganha um fio de acento à esquerda */
.story--txt { padding-left: 15px; border-left: 2px solid var(--accent-brd); }

/* ---- trilho: boletim de neve ---- */
.rail-n { display: grid; gap: clamp(14px, 1.8vw, 20px); position: sticky; top: 92px; }

.snowrep {
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--radius);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  display: grid;
  gap: 14px;
}

.snowrep__top { display: grid; gap: 4px; }

.snowrep__top b {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.snowrep__top b em { font-style: normal; color: var(--accent-ink); }

.snowrep__top span {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.snowrows { display: grid; gap: 11px; }

.snowrow { display: grid; gap: 5px; }

.snowrow__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.snowrow__name {
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snowrow__name i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-left: 6px;
}

.snowrow__cm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.snowrow__cm em { font-style: normal; font-size: 0.6em; color: var(--ink-mute); margin-left: 1px; }

.snowrow__bar { height: 4px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.snowrow__bar i { display: block; height: 100%; border-radius: 3px; background: var(--grad-alpenglow); }

.snowrow__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.delta { font-weight: 600; }
.delta.up   { color: var(--verified); }
.delta.down { color: var(--ink-faint); }

/* mais lidas */
.mostread {
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid var(--glass-brd);
  display: grid;
  gap: 13px;
}

.mostread > b {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.mrrow {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--hair);
  align-items: start;
  transition: color 280ms var(--ease-soft);
}

.mrrow:hover { color: var(--accent-ink); }

.mrrow span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.mrrow p { margin: 0; font-size: 0.85rem; line-height: 1.35; font-weight: 500; }

@media (max-width: 1040px) {
  .paper__grid { grid-template-columns: 1fr; }
  .rail-n { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 720px) {
  .lead { grid-template-columns: 1fr; }
  .lead__media { order: -1; aspect-ratio: 16 / 10; }
  .stories { grid-template-columns: 1fr; }
  .stories .story:nth-last-child(-n+2) { border-bottom: 1px solid var(--hair); padding-bottom: clamp(18px, 2vw, 24px); }
  .stories .story:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   24. MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .r { opacity: 1; transform: none; clip-path: none; }
  .js .hero .line > span, .js .hero__intro { transform: none; opacity: 1; }
  .sky__shot.is-on, .sky__shot.is-out { animation: none; transform: scale(1.06); }
  .snow { display: none; }
}

/* --------------------------------------------------------------------------
   20. FORMULÁRIOS REAIS — erro, aviso, botão ocupado, conta logada
   -------------------------------------------------------------------------- */

/* o form novo vira o "filho" do cartão: repete o ritmo do .authcard */
.authcard > form { display: grid; gap: clamp(14px, 2vh, 21px); }

/* prestador tem mais campos: a coluna do formulário rola sozinha se precisar */
.auth__form { overflow-y: auto; }

.erro {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #E5484D;
}

[data-theme="dark"] .erro { color: #FF8A8E; }

.field.is-erro .input { border-color: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.14); }
.check .erro { grid-column: 2; }

.aviso {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  line-height: 1.4;
  color: #B4232A;
  background: rgba(229, 72, 77, 0.10);
  border: 1px solid rgba(229, 72, 77, 0.32);
}

[data-theme="dark"] .aviso { color: #FFB4B7; background: rgba(229, 72, 77, 0.16); }

.btn.is-ocupado { opacity: 0.7; cursor: progress; pointer-events: none; }
.btn:disabled { cursor: not-allowed; }

/* ---- botão da conta na barra superior ---- */
.topbar__actions #authActions { display: flex; align-items: center; gap: 10px; }

.acct {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  color: var(--ink);
  text-decoration: none;
  max-width: 220px;
  transition: border-color 260ms var(--ease-soft), background 260ms var(--ease-soft);
}

.acct:hover, .acct.is-active { border-color: var(--accent-brd); background: var(--glass-strong); }

.acct__ini {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-alpenglow);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.acct__txt { display: grid; min-width: 0; line-height: 1.15; }
.acct__txt b { font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__txt small { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }

@media (max-width: 720px) {
  .acct__txt { display: none; }
  .acct { padding: 4px; }
}

/* ---- tela Minha conta ---- */
.idslab__face--ini {
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: var(--grad-alpenglow);
  box-shadow: var(--glass-shadow);
  border: 2px solid var(--glass-brd-hi);
}

.idslab__face--ini span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: #fff;
  letter-spacing: 0.02em;
}

.conta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(16px, 2vw, 26px);
  align-items: start;
}

.conta__grid .panel .btn { margin-top: 18px; justify-self: start; }

.panel__nota {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--ink-mute);
  line-height: 1.45;
}

.panel__nota--forte { margin: 0 0 16px; font-size: 0.9rem; color: var(--ink-soft); }

.chip--selo[data-selo="pendente"]   { color: #9A5B00; background: rgba(217, 144, 47, 0.16); border-color: rgba(217, 144, 47, 0.4); }
.chip--selo[data-selo="verificado"] { color: var(--verified); background: var(--verified-soft); border-color: rgba(30, 143, 99, 0.4); }
.chip--selo[data-selo="recusado"]   { color: #B4232A; background: rgba(229, 72, 77, 0.12); border-color: rgba(229, 72, 77, 0.4); }
[data-theme="dark"] .chip--selo[data-selo="pendente"] { color: #F2C46E; }
[data-theme="dark"] .chip--selo[data-selo="recusado"] { color: #FFB4B7; }

.conta__grid .steps { margin-top: 4px; }

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

/* ---- home em modo logado: sem apresentação, abre direto nas viagens ---- */
body.is-logado [data-visitante] { display: none; }
body.is-logado #view-home { padding-top: clamp(84px, 11vh, 110px); }

/* --------------------------------------------------------------------------
   22. DROPDOWN — componente único de escolha (assets/js/dropdown.js)
   Padrão obrigatório: nenhum <select> nativo no site. Fundo sólido, cantos
   generosos, destaque em laranja nos itens, sombra e transição suave.
   -------------------------------------------------------------------------- */
.dd { position: relative; }

/* o botão é um .input: mesma caixa dos outros campos */
.dd__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.dd__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__val.is-vazio { color: var(--ink-faint); }

.dd__chev {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ink-mute);
  transition: transform 360ms var(--ease), color 240ms var(--ease-soft);
}

.dd.is-aberto .dd__chev { transform: rotate(180deg); color: var(--accent-ink); }

.dd.is-aberto .dd__btn,
.dd.is-aberto .dd__campo {
  border-color: var(--accent-brd);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* campo de busca (cidade): espaço à direita para o indicador de carregamento */
.dd__campo { padding-right: 42px; }

.dd__spin {
  position: absolute;
  right: 15px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid var(--hair);
  border-top-color: var(--ember);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-soft);
}

.dd.is-carregando .dd__spin { opacity: 1; animation: ddGira 700ms linear infinite; }

@keyframes ddGira { to { transform: rotate(360deg); } }

/* a lista: sólida (não vaza a foto de fundo), rola por dentro */
.dd__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
  background: var(--ground-2);
  border: 1px solid var(--glass-brd);
  border-radius: calc(var(--radius-sm) + 4px);
  box-shadow: var(--glass-shadow-hi);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.985);
  transition: opacity 220ms var(--ease-soft), transform 360ms var(--ease), visibility 0s linear 220ms;
}

.dd--acima .dd__list {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom center;
  transform: translateY(6px) scale(0.985);
}

.dd.is-aberto .dd__list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 160ms var(--ease-soft), color 160ms var(--ease-soft);
}

.dd__opt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dd__opt small {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.dd__tick { width: 14px; height: 14px; flex: none; opacity: 0; transform: scale(0.5); transition: all 260ms var(--ease); }

.dd__opt.is-ativa { background: var(--accent-soft); color: var(--accent-ink); }
.dd__opt.is-ativa small { color: var(--accent-ink); }

/* a escolhida usa o mesmo degradê dos chips e do controle segmentado */
.dd__opt[aria-selected="true"] {
  background: var(--grad-alpenglow);
  color: #fff;
  font-weight: 600;
}

.dd__opt[aria-selected="true"] small { color: rgba(255, 255, 255, 0.85); }
.dd__opt[aria-selected="true"] .dd__tick { opacity: 1; transform: none; }

.dd__aviso {
  padding: 12px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-mute);
}

.dd__aviso.is-erro { color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .dd__list, .dd__chev, .dd__tick { transition: none; }
  .dd.is-carregando .dd__spin { animation: none; }
}

/* --------------------------------------------------------------------------
   23. AJUDA DE CAMPO E BOTÕES SOCIAIS
   -------------------------------------------------------------------------- */
.ajuda {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-mute);
}

.ajuda b { color: var(--ink); font-weight: 600; }
.ajuda a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

.ajuda--social {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-brd);
  color: var(--ink-soft);
}

.input[readonly] { color: var(--ink-soft); cursor: default; }

/* "Continuar com …" cabe nas duas colunas; o ícone mantém tamanho fixo */
.oauth .btn { --btn-pad: 13px 12px; white-space: nowrap; }
.oauth .btn svg { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   24. ENTRAR — mesma tela dividida do cadastro (sem barra, rodapé e trilhos)
   -------------------------------------------------------------------------- */
body[data-page="entrar"] .topbar,
body[data-page="entrar"] .footer,
body[data-page="entrar"] .rail,
body[data-page="entrar"] .altimeter,
body[data-page="entrar"] .sky__caption { display: none; }

/* campos que entram animados viram camadas próprias e pintariam por cima da
   lista aberta: enquanto há dropdown aberto, o campo (e a linha) sobem */
.dd-aberto { position: relative; z-index: 50; }

/* --------------------------------------------------------------------------
   25. ETAPAS DO CADASTRO — trilha com estados, bandeiras no dropdown
   -------------------------------------------------------------------------- */
body[data-page="etapas"] .topbar,
body[data-page="etapas"] .footer,
body[data-page="etapas"] .rail,
body[data-page="etapas"] .altimeter,
body[data-page="etapas"] .sky__caption { display: none; }

.auth__foot--solo { grid-template-columns: 1fr; }

/* concluída: check no lugar do número */
.step.is-done .step__dot {
  background: var(--accent-soft);
  border-color: var(--accent-brd);
  color: var(--accent-ink);
}
.step.is-done .step__dot svg { width: 13px; height: 13px; }

/* bloqueada: apagada, sem clique */
.step.is-lock { opacity: 0.5; cursor: not-allowed; }

/* concluída e editável: parece clicável */
.step.is-link { cursor: pointer; }
.step.is-link:hover .step__txt b,
.step.is-link:focus-visible .step__txt b { color: var(--ink); }
.step.is-link:focus-visible { outline: 2px solid var(--accent-brd); outline-offset: 4px; border-radius: 8px; }

.auth__poster .step.is-done .step__dot {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.auth__poster .step.is-link:hover .step__txt b,
.auth__poster .step.is-link:focus-visible .step__txt b { color: #fff; }

/* botões da etapa: "Continuar depois" e o principal lado a lado */
.etapa__acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.etapa__acoes .btn { flex: 1 1 160px; justify-content: center; }
.etapa__acoes .btn--primary { flex: 2 1 200px; }

/* bandeiras nas listas (países, idiomas) */
.dd__flag {
  width: 20px;
  height: 15px;
  flex: none;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.dd__flag + span { margin-right: auto; }
.dd__opt--destaque { margin-bottom: 6px; position: relative; }
.dd__opt--destaque::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -4px;
  height: 1px;
  background: var(--hair);
}

/* seleção múltipla: os escolhidos aparecem lado a lado no botão */
.dd__val { display: flex; align-items: center; gap: 0; }
.dd__sel { display: inline-flex; align-items: center; gap: 7px; }
.dd__sep { font-style: normal; margin-right: 8px; color: var(--ink-mute); }
.dd__btn .dd__flag { box-shadow: 0 0 0 1px var(--hair); }

/* lista fechada some da vista mas ainda estaria clicável durante o fade-out */
.dd__list { pointer-events: none; }
.dd.is-aberto .dd__list { pointer-events: auto; }

/* --------------------------------------------------------------------------
   26. ETAPAS 3 E 4 — endereço, telefone, upload de documentos, selo, admin
   -------------------------------------------------------------------------- */
.row2--tel { align-items: start; }

/* caixa de confirmação (endereço, telefone): reaproveita o tom do .ajuda--social */
.endcard, .telbox { display: grid; gap: 10px; }
.endcard b, .telbox b { color: var(--ink); }
.endcard small, .telbox small { color: var(--ink-mute); }
.endcard[data-endereco]:not([hidden]) { grid-template-columns: auto 1fr; align-items: start; }
.endcard__ok {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-alpenglow); color: #fff;
}
.endcard__ok svg { width: 12px; height: 12px; }
.endcard__acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.telbox__linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.telbox__linha .input { width: 9ch; min-width: 0; letter-spacing: 0.3em; text-align: center; padding-inline: 12px; }
/* o endereço confirmado usa duas colunas (ícone + texto); pedido de confirmação, uma */
.endcard:not(:has(.endcard__ok)) { grid-template-columns: 1fr; }

/* envio das fotos */
.ups { display: grid; gap: 12px; }
.up {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--hair);
  background: var(--glass);
  transition: border-color 240ms var(--ease-soft), background-color 240ms var(--ease-soft);
}
.up.is-ok { border-style: solid; border-color: var(--accent-brd); background: var(--accent-soft); }
.up.is-enviando { opacity: 0.6; pointer-events: none; }
.up__prev {
  width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--ground-2); color: var(--ink-mute);
}
.up__prev svg { width: 26px; height: 26px; }
.up__prev img { width: 100%; height: 100%; object-fit: cover; }
.up__txt { display: grid; gap: 3px; min-width: 0; }
.up__txt b { font-size: 0.9rem; color: var(--ink); }
.up__txt span { font-size: 0.76rem; line-height: 1.35; color: var(--ink-mute); }

@media (max-width: 480px) {
  .up { grid-template-columns: 52px minmax(0, 1fr); }
  .up .btn { grid-column: 1 / -1; justify-content: center; }
  .up__prev { width: 52px; height: 52px; }
}

/* selo de verificado ao lado do nome */
.selo { display: inline-flex; vertical-align: -2px; margin-left: 6px; }
.selo .badge-v { width: 16px; height: 16px; }
.acct__txt b .selo { margin-left: 4px; }
.acct__txt b .selo .badge-v { width: 13px; height: 13px; vertical-align: middle; }

/* painel do admin */
.adm { display: grid; gap: 18px; }
.adm__item { display: grid; gap: 14px; }
.adm__quem { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.adm__quem b { font-size: 1.05rem; }
.adm__fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.adm__fotos figure { margin: 0; display: grid; gap: 6px; }
.adm__fotos img {
  width: 100%; max-height: 300px; object-fit: contain;
  border-radius: var(--radius-sm); background: var(--ground-2); border: 1px solid var(--hair);
}
.adm__fotos figcaption { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.adm__acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.adm__acoes .input { flex: 1 1 220px; }

/* passos clicáveis renderizados como link na página da conta */
a.step { color: inherit; text-decoration: none; }

/* destaque em degradê: no escuro e sobre as fotos dos pôsteres, um azul-gelo mais claro (contraste) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flame {
    background-image: linear-gradient(104deg, #3FA9FF 0%, #7CD2FF 55%, #B5E6FF 100%);
  }
}
:root[data-theme="dark"] .flame {
  background-image: linear-gradient(104deg, #3FA9FF 0%, #7CD2FF 55%, #B5E6FF 100%);
}
.auth__pitch .flame {
  background-image: linear-gradient(104deg, #4DB1FF 0%, #86D6FF 55%, #C2EBFF 100%);
}

/* --------------------------------------------------------------------------
   27. FOTO DE PERFIL — círculo com upload no hover, janela de envio, moderação
   -------------------------------------------------------------------------- */
.avatar {
  position: relative;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
}
span.avatar, div.avatar { cursor: default; }

.avatar .avatar__img, .fotomodal__prev .avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; box-shadow: none; border-radius: inherit; }

.avatar__ini {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: 0.02em;
  color: #fff;
}

/* sobreposição escura sutil com câmera e texto, só no hover / foco */
.avatar__ov {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 8px;
  text-align: center;
  color: #fff;
  background: rgba(6, 16, 36, 0.58);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 260ms var(--ease-soft);
}

.avatar__ov svg { width: 24px; height: 24px; transform: translateY(6px); transition: transform 360ms var(--ease); }
.avatar__ov b { font-size: 0.7rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; transform: translateY(6px); transition: transform 360ms var(--ease); }

.avatar:hover .avatar__ov,
.avatar:focus-visible .avatar__ov { opacity: 1; }
.avatar:hover .avatar__ov svg, .avatar:hover .avatar__ov b,
.avatar:focus-visible .avatar__ov svg, .avatar:focus-visible .avatar__ov b { transform: none; }
.avatar:focus-visible { outline: 3px solid var(--accent-brd); outline-offset: 3px; }

/* ícone de câmera sempre visível onde não existe hover (celular) */
.avatar__cam { display: none; }
@media (hover: none) {
  .avatar__ov { display: none; }
  .avatar__cam {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--grad-alpenglow);
    color: #fff;
    box-shadow: 0 4px 12px -3px rgba(6, 16, 36, 0.6);
  }
  .avatar__cam svg { width: 14px; height: 14px; }
}

/* na barra superior o círculo é pequeno e só mostra a foto */
img.acct__foto { object-fit: cover; padding: 0; background: var(--ground-2); }

/* a foto dentro da tela "Minha conta" */
.idslab__face.avatar { overflow: hidden; }
.idslab__face--ini .avatar__cam { font-size: 0; }   /* o span herdava o tamanho das iniciais */

/* janela (modal) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease-soft), visibility 0s linear 260ms;
}
.modal.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal__back { position: absolute; inset: 0; background: rgba(4, 10, 24, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal__card {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--ground-2);
  transform: translateY(14px) scale(0.98);
  transition: transform 420ms var(--ease);
}
.modal.is-on .modal__card { transform: none; }
.modal__acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.modal__esp { flex: 1; }
body.has-modal { overflow: hidden; }

.fotomodal__incentivo { margin: 0; font-size: 0.95rem; }
.fotomodal__corpo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; }
.fotomodal__prev {
  width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--grad-alpenglow);
  border: 2px solid var(--glass-brd-hi);
  box-shadow: var(--glass-shadow);
}
.fotomodal__lado { display: grid; gap: 10px; justify-items: start; }
.fotomodal__lado .btn svg { width: 16px; height: 16px; }
.fotomodal__aviso { font-size: 0.8rem; }
.fotomodal__dica { font-size: 0.72rem; color: var(--ink-mute); }

@media (max-width: 480px) {
  .fotomodal__corpo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .fotomodal__lado { justify-items: center; }
}

/* moderação no admin */
.adm__foto { grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
.adm__fotoimg img { width: 120px; height: 120px; object-fit: cover; border-radius: 18px; border: 1px solid var(--hair); }
.adm__fotocorpo { display: grid; gap: 12px; min-width: 0; }
.adm__motivos { margin: 0; padding-left: 18px; font-size: 0.86rem; color: var(--ink-soft); display: grid; gap: 4px; }
@media (max-width: 560px) { .adm__foto { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .avatar__ov, .avatar__ov svg, .avatar__ov b, .modal, .modal__card { transition: none; }
}
/* ==========================================================================
   28. PERFIL PÚBLICO, NOME DE EXIBIÇÃO E BANDEIRA AO LADO DO NOME
   ========================================================================== */

/* bandeira pequena depois do nome: nunca maior que o texto ao lado */
.flag {
  display: inline-block;
  height: 0.52em;
  width: auto;
  margin-left: 0.4em;
  vertical-align: baseline;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--hair);
}
.acct__txt b .flag { margin-left: 5px; }

/* aviso "assim os outros veem você" */
.pubaviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  border-radius: var(--radius);
}
.pubaviso > div { display: grid; gap: 3px; min-width: 0; flex: 1 1 280px; }
.pubaviso b { font-size: 0.92rem; }
.pubaviso span { font-size: 0.8rem; color: var(--ink-mute); line-height: 1.45; }

.rating--vazio { color: var(--ink-mute); }
.pub__estrelas { margin: 0 0 4px; }
.stars--vazias { opacity: 0.35; }
.stars--vazias svg { width: 20px; height: 20px; }

/* escolha do nome de exibição, na conta */
.nomebox { margin-top: clamp(16px, 2vw, 26px); max-width: 560px; }
.nomebox .field { margin-top: 14px; }
.nomebox .btn { margin-top: 18px; justify-self: start; }
.nomebox__real { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.nomebox__real b { color: var(--ink); }
.nomebox__prev { margin: 14px 0 0; font-size: 0.85rem; color: var(--ink-mute); }
.nomebox__prev strong { color: var(--ink); font-size: 1rem; }

/* o aviso ocupa o lugar da capa: a laje de identidade não sobe por cima dele */
.pubaviso + .idslab { margin-top: 0; }

/* ==========================================================================
   29. POR PERTO (cartões de match), CONVERSAS E AVATAR DE OUTRA PESSOA
   ========================================================================== */

/* avatar pequeno de outra pessoa: foto ou iniciais */
.pav {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--grad-alpenglow);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 0 0 2px var(--glass-brd-hi);
}
.pav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pav--lg { width: 52px; height: 52px; }
.pav--xl { width: 96px; height: 96px; font-size: 1.6rem; box-shadow: 0 0 0 4px var(--ground-2); }

/* ---- página ---- */
.perto, .chat { display: grid; gap: clamp(14px, 1.8vw, 22px); }

.perto__hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding: clamp(24px, 3vw, 40px);
}
.perto__hero-txt { display: grid; gap: 12px; max-width: 62ch; flex: 1 1 380px; min-width: 0; }

.perto__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--grad-alpenglow);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), 0 0 0 2px var(--ground), 0 0 9px 1px rgba(42, 147, 240, 0.45);
}
.perto__badge[hidden] { display: none; }
.perto__badge.is-novo, .notif__badge.is-novo { animation: bpnBadgePop 420ms var(--ease-soft); }
@keyframes bpnBadgePop {
  0%   { transform: scale(0.4); }
  55%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* o destaque: aqui é companhia de esqui */
.perto__foco {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-brd);
  background: var(--accent-soft);
}
.perto__foco p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.perto__foco b { color: var(--ink); }
.perto__foco-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--grad-alpenglow);
  color: #fff;
}
.perto__foco-ico svg { width: 22px; height: 22px; }

.perto__bar { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 14px 28px; align-items: end; }
.perto__bar .field { margin: 0; }
.perto__sw { align-self: center; gap: 16px; padding-top: 20px; font-size: 0.9rem; }
.perto__bar .aviso { grid-column: 1 / -1; margin: 0; }
@media (max-width: 700px) {
  .perto__bar { grid-template-columns: 1fr; }
  .perto__sw { padding-top: 0; }
}

.perto__palco { display: grid; justify-items: center; gap: 22px; padding: 8px 0 4px; min-width: 0; }

.perto__priv {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 640px;
  margin: 4px auto 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-mute);
}
.perto__priv svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-ink); }

/* ---- pilha de cartões ---- */
.pstack {
  position: relative;
  width: min(400px, 100%);
  aspect-ratio: 3 / 4.3;
  margin: 0 auto;
}

.pcard {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ground-2);
  border: 1px solid var(--glass-brd-hi);
  box-shadow: var(--glass-shadow-hi);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  transform-origin: 50% 90%;
  transition: transform 480ms var(--ease), opacity 320ms var(--ease-soft);
}
.pcard[data-pos="0"] { z-index: 3; }
.pcard[data-pos="1"] { z-index: 2; transform: translateY(18px) scale(0.95); opacity: 0.92; pointer-events: none; }
.pcard[data-pos="2"] { z-index: 1; transform: translateY(36px) scale(0.9); opacity: 0.75; pointer-events: none; animation: pcard-entra 480ms var(--ease) both; }
.pcard.is-arrastando { transition: none; cursor: grabbing; }
.pcard.is-saindo { transition: transform 320ms var(--ease-soft), opacity 300ms var(--ease-soft); pointer-events: none; }
@keyframes pcard-entra { from { opacity: 0; } }

.pcard__foto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--grad-alpenglow);
}
.pcard__foto img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pcard__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 36, 0) 40%, rgba(6, 16, 36, 0.88) 100%);
}
.pcard__ini { font-family: var(--font-display); font-weight: 800; font-size: 6rem; color: #fff; opacity: 0.85; }

.pcard__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 10px;
  padding: 22px;
  color: #fff;
}
.pcard__dist {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pcard__dist svg { width: 13px; height: 13px; }
.pcard__nome {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.pcard__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pcard__chips .chip { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
.pcard__chips .chip--accent { background: color-mix(in srgb, var(--flare) 42%, transparent); border-color: var(--flare); }
.pcard__idiomas { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; opacity: 0.92; }
.pcard__idi { display: inline-flex; align-items: center; }
.pcard__idi .flag { margin: 0 0.45em 0 0; height: 0.75em; }

.pcard__sel {
  position: absolute;
  top: 26px;
  z-index: 3;
  padding: 6px 14px;
  border: 3px solid;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(6, 16, 36, 0.55);
  pointer-events: none;
}
.pcard__sel--bora { left: 22px; color: var(--flare); border-color: var(--flare); transform: rotate(-12deg); opacity: var(--sel-bora, 0); }
.pcard__sel--passar { right: 22px; color: #fff; border-color: #fff; transform: rotate(12deg); opacity: var(--sel-passar, 0); }

/* ---- botões de voto ---- */
.perto__acoes { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.pbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.pbtn svg { width: 20px; height: 20px; }
.pbtn:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow); }
.pbtn:active { transform: scale(0.97); }
.pbtn--bora { background: var(--grad-alpenglow); color: #fff; border-color: transparent; }
.perto__dica { margin: 0; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }

/* ---- quem ainda não é verificado: cartões borrados + chamada ---- */
.perto__bloqueio { position: relative; width: 100%; display: grid; place-items: center; min-height: 540px; padding: 10px 0 40px; }
.pstack--blur { filter: blur(14px) saturate(0.9); pointer-events: none; }
.pstack--blur .pcard { transition: none; animation: none; }
.perto__cta {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(470px, calc(100% - 16px));
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: clamp(22px, 3vw, 34px);
}
.perto__cta p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.perto__cta-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad-alpenglow); color: #fff; }
.perto__cta-ico svg { width: 26px; height: 26px; }
.perto__cta-t { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.05; }
.perto__cta-n b { color: var(--accent-ink); }
.perto__cta .btn { margin-top: 6px; }

/* ---- estados vazios ---- */
.perto__vazio {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 46px);
}
.perto__vazio-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); border: 1px solid var(--accent-brd); color: var(--accent-ink); }
.perto__vazio-ico svg { width: 32px; height: 32px; }
.perto__vazio-t { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.03em; }
.perto__vazio-txt { margin: 0; color: var(--ink-soft); line-height: 1.55; font-size: 0.95rem; }
.perto__vazio-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* ---- Deu match! ---- */
.match { display: grid; gap: 14px; justify-items: center; text-align: center; }
.match__fotos { display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.match__eu { margin-right: -16px; animation: match-esq 800ms var(--ease) both; }
.match__ela { margin-left: -16px; animation: match-dir 800ms var(--ease) both; }
.match__elo {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad-alpenglow);
  color: #fff;
  box-shadow: 0 0 0 4px var(--ground-2), 0 0 0 10px var(--accent-soft);
  animation: match-pulso 1.9s var(--ease-soft) 700ms infinite;
}
.match__elo svg { width: 26px; height: 26px; }
@keyframes match-esq { from { transform: translateX(-80px) rotate(-10deg); opacity: 0; } }
@keyframes match-dir { from { transform: translateX(80px) rotate(10deg); opacity: 0; } }
@keyframes match-pulso { 50% { transform: scale(1.12); } }
.match__titulo { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 8vw, 3.6rem); letter-spacing: -0.045em; line-height: 1; }
.match__txt { margin: 0; max-width: 42ch; color: var(--ink-soft); line-height: 1.55; font-size: 0.95rem; }
.match__txt b { color: var(--ink); }
.match__acoes { justify-content: center; margin-top: 4px; }

/* ---- conversas ---- */
.conv__lista { display: grid; gap: 10px; }
.conv {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
  transition: transform 300ms var(--ease), border-color 300ms var(--ease);
}
.conv:hover { transform: translateY(-2px); border-color: var(--accent-brd); }
.conv__corpo { display: grid; gap: 3px; flex: 1; min-width: 0; }
.conv__corpo b { font-size: 1rem; }
.conv__ult { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-mute); font-size: 0.86rem; }
.conv.is-nova .conv__ult { color: var(--ink); font-weight: 600; }
.conv__meta { display: grid; justify-items: end; gap: 6px; flex: none; }
.conv__meta small { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-mute); }
.conv__meta .perto__badge { margin: 0; }

.thread {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  height: clamp(480px, 76vh, 720px);
  padding: 0;
  overflow: hidden;
}
.thread__topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.thread__quem { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.thread__quem b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.02em; }
.thread__voltar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair); color: var(--ink); }
.thread__voltar svg { width: 18px; height: 18px; }
.thread__aviso { margin: 0; padding: 10px 18px; font-size: 0.76rem; line-height: 1.45; color: var(--ink-mute); background: var(--accent-soft); }
.thread__msgs { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 18px; }
.thread__vazio { margin: auto; max-width: 36ch; text-align: center; color: var(--ink-soft); line-height: 1.5; }
.thread__vazio b { color: var(--accent-ink); }
.msg {
  align-self: flex-start;
  max-width: min(78%, 460px);
  padding: 10px 14px;
  border-radius: 18px 18px 18px 6px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd);
}
.msg p { margin: 0; font-size: 0.93rem; line-height: 1.45; overflow-wrap: anywhere; }
.msg small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-mute); }
.msg--minha { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--grad-alpenglow); border-color: transparent; color: #fff; }
.msg--minha small { color: rgba(255, 255, 255, 0.78); }
.thread__form { display: flex; gap: 10px; align-items: flex-end; padding: 14px 18px; border-top: 1px solid var(--hair); }
.thread__form textarea { flex: 1; min-height: 44px; max-height: 130px; resize: none; }
.thread .aviso { margin: 0 18px 14px; }

/* Por perto em duas colunas: texto e controles à esquerda, cartões sempre à vista à direita */
.perto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(20px, 3vw, 44px); align-items: start; }
.perto__lado { display: grid; gap: clamp(14px, 1.8vw, 20px); min-width: 0; }
.perto__grid > .perto__palco { position: sticky; top: 92px; }
.perto__titulo { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.03; letter-spacing: -0.04em; }
.perto__lead { margin: 0; max-width: 62ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.perto__hero { padding: clamp(22px, 2.6vw, 34px); }
@media (max-width: 940px) {
  .perto__grid { grid-template-columns: minmax(0, 1fr); }
  .perto__lado { display: contents; }
  .perto__hero { order: 1; }
  .perto__foco { order: 2; }
  .perto__grid > .perto__palco { position: static; order: 3; }
  #pControles { order: 4; }
  .perto__priv { order: 5; }
  .perto__grid { gap: 14px; }
}

/* ==========================================================================
   30. SEGURANÇA ENTRE PESSOAS — janela, botões, conversa encerrada, admin
   ========================================================================== */
.seg__txt { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.seg__txt b { color: var(--ink); }
.seg__nota { margin: 0; font-size: 0.78rem; color: var(--ink-mute); }
.seg__sw { margin-top: 4px; }

.segopts { display: grid; gap: 10px; }
.segopt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-brd);
  background: var(--glass-strong);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.segopt:hover { transform: translateY(-2px); border-color: var(--accent-brd); box-shadow: var(--glass-shadow); }
.segopt__ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-ink); }
.segopt__ico svg { width: 22px; height: 22px; }
.segopt__txt { display: grid; gap: 2px; min-width: 0; }
.segopt__txt b { font-size: 0.98rem; }
.segopt__txt span { font-size: 0.82rem; color: var(--ink-mute); line-height: 1.4; }

/* botão de segurança no cartão e na conversa */
.pcard__seg {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background 240ms var(--ease-soft), transform 240ms var(--ease);
}
.pcard__seg:hover { background: rgba(255, 255, 255, 0.36); transform: scale(1.06); }
.pcard__seg svg { width: 20px; height: 20px; }
.pcard__sel { top: 68px; }

.thread__seg svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.thread__encerrada { margin: 0; padding: 14px 18px; border-top: 1px solid var(--hair); text-align: center; font-size: 0.88rem; color: var(--ink-soft); background: var(--accent-soft); }
.thread__encerrada[hidden] { display: none; }
.conv.is-encerrada .conv__ult { font-style: italic; }
.conv__meta .chip { font-size: 0.55rem; padding: 3px 8px; }

/* pessoas bloqueadas (em Conversas) */
.bloqueados[hidden] { display: none; }
.bloqueados__lista, .bloqueados { display: grid; gap: 10px; }
.bloq { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.bloq:first-child { border-top: 0; }
.bloq b { flex: 1; min-width: 0; }
.bloq span:not(.pav) { font-size: 0.8rem; color: var(--ink-mute); }

/* admin: contexto da conversa denunciada */
.adm__det { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.adm__sem { margin: 0; font-size: 0.85rem; color: var(--ink-mute); }
.adm__ctx { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--hair); background: var(--accent-soft); }
.adm__msg { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 0.88rem; line-height: 1.4; overflow-wrap: anywhere; background: var(--glass-strong); }
.adm__msg small { display: block; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; }
.adm__msg--denunciado { border-left: 3px solid var(--accent-ink); }

[data-seg] { display: grid; gap: 16px; }
.thread__form[hidden] { display: none; }

/* ==========================================================================
   31. ÁREA ADMINISTRATIVA — login próprio, abas, fichas, auditoria
   ========================================================================== */
.admin { display: grid; gap: clamp(14px, 1.8vw, 22px); }

/* login separado */
.admlogin {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  width: min(460px, 100%);
  margin: clamp(10px, 4vw, 48px) auto;
  padding: clamp(26px, 4vw, 44px);
}
.admlogin form { display: grid; gap: 14px; width: 100%; text-align: left; }
.admlogin .fields { display: grid; gap: 12px; }
.admlogin__ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--grad-alpenglow); color: #fff; }
.admlogin__ico svg { width: 30px; height: 30px; }
.admlogin__t { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -0.04em; line-height: 1; }
.admlogin__txt { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.admlogin__voltar { font-size: 0.85rem; color: var(--ink-mute); text-decoration: none; }
.admlogin__voltar:hover { color: var(--accent-ink); }

/* cabeçalho e abas */
.admhead { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: clamp(20px, 2.6vw, 30px); }
.admhead__txt { display: grid; gap: 6px; min-width: 0; }
.admhead__t { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.035em; line-height: 1.05; overflow-wrap: anywhere; }
.admhead__sub { margin: 0; font-size: 0.85rem; color: var(--ink-mute); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.admtabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.admtab {
  flex: none;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 240ms var(--ease-soft), color 240ms var(--ease-soft), border-color 240ms var(--ease-soft);
}
.admtab:hover { border-color: var(--accent-brd); color: var(--ink); }
.admtab.is-on { background: var(--grad-alpenglow); border-color: transparent; color: #fff; }

.admconteudo { display: grid; gap: 14px; min-width: 0; align-content: start; }

/* visão geral */
.admtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.admtile {
  display: grid;
  gap: 4px;
  padding: 18px;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--glass-brd);
  background: var(--glass-strong);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform 260ms var(--ease), border-color 260ms var(--ease);
}
.admtile:hover { transform: translateY(-3px); border-color: var(--accent-brd); }
.admtile b { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; letter-spacing: -0.04em; line-height: 1; }
.admtile span { font-size: 0.82rem; color: var(--ink-mute); }

/* listas e filtros */
.admfiltro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; }
.admfiltro .field { margin: 0; }
@media (max-width: 720px) { .admfiltro { grid-template-columns: 1fr; } }
.admcont { margin: 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.admrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-top: 10px; }
.admrow__quem { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.admrow__quem b { overflow-wrap: anywhere; }
.admrow__quem span { font-size: 0.82rem; color: var(--ink-mute); overflow-wrap: anywhere; }
.admrow__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.admpag { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 14px; font-size: 0.85rem; color: var(--ink-mute); }
.admpag .btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ficha */
.admfichaT { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.admfichaT .h2 { margin: 0; }
.admgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; }
.admform { display: grid; gap: 12px; }
.admform .row2 { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; }
.adm__perigo { color: var(--danger, #B4232A); border-color: rgba(229, 72, 77, 0.4); }
[data-theme="dark"] .adm__perigo { color: #FFB4B7; }
.adm__ctx--alta { max-height: min(50vh, 420px); }
.admvazio { max-width: 620px; }
.admadm b small { font-weight: 400; color: var(--ink-mute); }

/* auditoria */
.audlista { display: grid; gap: 10px; }
.aud { display: grid; gap: 6px; padding: 14px 18px; }
.aud--forte { border-color: rgba(229, 72, 77, 0.5); }
.aud__topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.aud__topo small { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-mute); }
.aud__meta { margin: 0; display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-soft); }
.aud__motivo, .aud__det { margin: 0; font-size: 0.85rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.aud__det { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-mute); }

/* botão desabilitado (ex.: motivo obrigatório ainda incompleto) deve parecer desabilitado */
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Por perto: texto do painel de visibilidade (localização do aparelho) */
.perto__loc { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }


/* ==========================================================================
   32. NEVE CAINDO — botão liga/desliga (mesmo visual do alternador de tema)
   ========================================================================== */
.snow-toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex: none;
  padding: 0;
  transition: border-color 280ms var(--ease-soft), transform 280ms var(--ease);
}
.snow-toggle:hover { border-color: var(--accent-brd); transform: rotate(-16deg); }
.snow-toggle svg {
  width: 17px;
  height: 17px;
  color: var(--accent-ink);
  transition: opacity 320ms var(--ease-soft);
}
.snow-toggle .snow-slash { opacity: 0; transition: opacity 320ms var(--ease-soft); }
:root[data-snow="off"] .snow-toggle svg path:first-child { opacity: 0.45; }
:root[data-snow="off"] .snow-toggle .snow-slash { opacity: 1; }
:root[data-snow="off"] #snow { display: none; }
.uitoggles { display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
   33. POR PERTO PARA VISITANTES — passos explicativos e ajustes de rota
   ========================================================================== */
.perto__passos { display: grid; gap: 12px; }
.perto__passo { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: start; padding: 16px 20px; }
.perto__passo-n { grid-row: 1 / 3; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--accent-ink); padding-top: 3px; }
.perto__passo-t { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
.perto__passo p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.perto__cta .perto__cta-n { text-decoration: none; }
.perto__cta a.perto__cta-n:hover { text-decoration: underline; }

/* Agências, Notícias e Comunidade só aparecem para quem está logado e com o cadastro completo */
body:not(.is-completo) .navlinks [data-restrito] { display: none; }
/* celular: título, chamada e só depois os três passos */
@media (max-width: 940px) { .perto__passos { order: 4; } }

/* --------------------------------------------------------------------------
   34. HERO — faixa de números não invade os botões em larguras médias
   Entre 861 e 1180 px as duas colunas não cabiam e a faixa cobria os botões;
   nessa faixa a faixa passa para baixo do texto (como já faz no celular).
   -------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1180px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__stats { justify-self: start; max-width: 100%; }
}

/* --------------------------------------------------------------------------
   35. HERO — botões e faixa de números cabem na primeira tela
   O título e o respiro do topo agora também respeitam a ALTURA da janela,
   para os botões e a faixa subirem e não ficarem cortados na dobra.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .hero { padding-top: clamp(92px, 12vh, 150px); padding-bottom: clamp(30px, 5vh, 56px); }
  .hero .display--hero { font-size: clamp(3.2rem, min(11.5vw, 14.5vh), 9.5rem); }
}

/* --------------------------------------------------------------------------
   36. TÁ NEVANDO? — previsão e câmeras ao vivo das estações (#/neve)
   Reaproveita .glass, .chip, .btn, .input e os tokens; nada de cor fixa.
   -------------------------------------------------------------------------- */
.neve__hero {
  padding: clamp(26px, 4vw, 48px);
  border-radius: var(--radius-lg, 22px);
  display: grid;
  gap: 16px;
}

.neve__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
}

.neve__lead {
  color: var(--ink-soft);
  max-width: 62ch;
  line-height: 1.55;
  margin: 0;
}

.nehead { display: grid; gap: 16px; }
.nehead__frase { color: var(--ink-mute); max-width: 62ch; margin: 0; line-height: 1.5; }

.nehead__nums { display: flex; flex-wrap: wrap; gap: clamp(14px, 3vw, 34px); }
.nehead__nums span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.nehead__nums b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.nefiltro { display: grid; gap: 12px; }

.nebusca { position: relative; display: block; max-width: 420px; }
.nebusca__ic {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--ink-faint);
  pointer-events: none;
}
.nebusca__ic svg { width: 100%; height: 100%; }
.nebusca .input { padding-left: 38px; }
.nebusca .input::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.5); }

.nechips { display: flex; flex-wrap: wrap; gap: 8px; }
.nechip__f { cursor: pointer; border: 0; font: inherit; }
.nechip__f.is-on {
  background: var(--grad-alpenglow);
  color: #fff;
  border-color: transparent;
}

.nehead__conta {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.nesec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: clamp(26px, 4vw, 44px) 0 16px;
}
.nesec span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.nesec i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.negrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.necard {
  padding: 18px;
  border-radius: var(--radius);
  display: grid;
  gap: 14px;
  align-content: start;
}

.necard__topo { display: grid; gap: 8px; }
.necard__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.necard__nome .flag { width: 18px; height: auto; border-radius: 3px; }

.nechip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.nechip svg { width: 11px; height: 11px; }
.nechip--on {
  border-color: transparent;
  background: var(--grad-alpenglow);
  color: #fff;
}

.neprev { display: grid; gap: 12px; }

.neprev--vazio {
  min-height: 108px;
  align-content: center;
  justify-items: start;
  gap: 10px;
}
.neprev--vazio p {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.86rem;
  line-height: 1.45;
}

.neskel {
  display: block;
  width: 62%;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  animation: neskel 1.5s var(--ease-soft) infinite;
}
@keyframes neskel { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }

.neprev__agora { display: flex; align-items: center; gap: 9px; }
.neprev__ic { width: 20px; height: 20px; color: var(--accent-ink); flex: none; }
.neprev__ic svg { width: 100%; height: 100%; }
.neprev__temp {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.neprev__txt { color: var(--ink-mute); font-size: 0.84rem; }

.neprev__neve {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
}
.neprev__neve b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.neprev__neve b i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.neprev__neve span {
  font-family: var(--font-mono);
  font-size: 0.53rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}

.nedias { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.nedia { display: grid; justify-items: center; gap: 4px; }
.nedia__cm {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  min-height: 11px;
}
.nedia__barra {
  width: 100%;
  height: 34px;
  border-radius: 6px;
  background: var(--line);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.nedia__barra i { display: block; width: 100%; background: var(--ink-faint); border-radius: 6px; }
.nedia.is-neve .nedia__barra i { background: var(--grad-alpenglow); }
.nedia__dia,
.nedia__t {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.nedia__t { color: var(--ink-mute); }

.necam {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  text-decoration: none;
}
.necam__ic { width: 18px; height: 18px; flex: none; color: var(--ink-mute); }
.necam__ic svg { width: 100%; height: 100%; }
.necam__txt { display: grid; gap: 1px; min-width: 0; }
.necam__txt b {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.necam__txt i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.necam__seta { margin-left: auto; width: 16px; height: 16px; color: var(--accent-ink); flex: none; }
.necam__seta svg { width: 100%; height: 100%; }

.necam--on { transition: border-color 220ms var(--ease-soft), transform 220ms var(--ease-soft); }
.necam--on .necam__ic { color: var(--accent-ink); }
.necam--on:hover { border-color: var(--accent-ink); transform: translateY(-1px); }
.necam--off { opacity: 0.72; }

.nevazio {
  color: var(--ink-mute);
  padding: clamp(28px, 5vw, 56px) 0;
  text-align: center;
  line-height: 1.55;
}

.nefim { display: grid; justify-items: center; gap: 18px; margin-top: clamp(26px, 4vw, 44px); }
.nenota {
  color: var(--ink-faint);
  font-size: 0.78rem;
  line-height: 1.6;
  max-width: 66ch;
  text-align: center;
  margin: 0;
}
.nenota a { color: var(--ink-mute); }
.nenota b { color: var(--ink-mute); font-weight: 600; }

@media (max-width: 560px) {
  .negrid { grid-template-columns: 1fr; }
  .nebusca { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   37. RESOLVE O RESTO — o roteiro da viagem em 7 etapas (#/resolver)
   Reescrita de 2026-09-30. Reaproveita .glass, .btn, .aviso e a seção 36
   (.neve__hero). Peças novas: navegação rápida (.rot__nav), card de etapa
   (.rot__card), "Já resolvi" (.rot__resolvi), indicador de progresso
   (.rot__prog), destaque das milhas (.milhas) e a moldura do widget de
   parceiro (.wgt, também usada na pré-visualização do admin).
   -------------------------------------------------------------------------- */

/* ---- indicador de progresso, dentro do hero ---- */
.rot__prog { display: grid; gap: 10px; max-width: 420px; }
.rot__prog-txt { margin: 0; color: var(--ink-mute); font-size: 0.9rem; }
.rot__prog-txt b { color: var(--ink); font-weight: 700; }
.rot__prog-txt a { color: var(--accent-ink); }

.rot__barra {
  height: 8px;
  border-radius: 999px;
  background: var(--hair);
  overflow: hidden;
}
.rot__barra span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--grad-alpenglow);
  transition: width 600ms var(--ease);
}
.rot__prog.is-completo .rot__barra span { background: var(--verified); }

/* ---- navegação rápida entre as etapas ---- */
.rot__nav {
  position: sticky;
  top: 76px;
  z-index: 30;
  background: color-mix(in srgb, var(--ground-2) 94%, transparent);
  margin-bottom: clamp(18px, 2.4vw, 28px);
  padding: 6px;
  border-radius: 999px;
}
.rot__nav-in {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rot__nav-in::-webkit-scrollbar { display: none; }

.rot__nav-i {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 240ms var(--ease-soft), border-color 240ms var(--ease-soft), color 240ms var(--ease-soft);
}
.rot__nav-i:hover { color: var(--accent-ink); }
.rot__nav-i:focus-visible { outline: 2px solid var(--accent-brd); outline-offset: 1px; }
.rot__nav-i.is-atual { background: var(--accent-soft); border-color: var(--accent-brd); color: var(--accent-ink); }

.rot__nav-n { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--ink-faint); }
.rot__nav-i.is-atual .rot__nav-n { color: inherit; }
.rot__nav-ok { display: none; width: 15px; height: 15px; color: var(--verified); }
.rot__nav-ok svg { width: 100%; height: 100%; display: block; }
.rot__nav-i.is-feita .rot__nav-ok { display: inline-block; }
.rot__nav-i.is-feita .rot__nav-n { display: none; }

/* ---- a lista de etapas: um fio liga os cards, como um roteiro ---- */
.rot__lista {
  --rot-gap: clamp(18px, 2.4vw, 28px);
  display: grid;
  gap: var(--rot-gap);
}

/* o fio que liga um card ao próximo (só no vão entre eles, nunca por trás do vidro) */
.rot__card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(clamp(20px, 2.8vw, 32px) + 22px);
  width: 2px;
  height: var(--rot-gap);
  background: var(--accent-brd);
  pointer-events: none;
}

.rot__card {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 2.8vw, 32px);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 18px;
  scroll-margin-top: 150px;
  transition: border-color 400ms var(--ease-soft);
}
.rot__card.is-feita { border-color: color-mix(in srgb, var(--verified) 45%, transparent); }

.rot__topo { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }

.rot__ic {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--accent-brd);
  color: var(--accent-ink);
  transition: color 400ms var(--ease-soft), border-color 400ms var(--ease-soft);
}
.rot__ic svg { width: 22px; height: 22px; }
.rot__card.is-feita .rot__ic { color: var(--verified); border-color: color-mix(in srgb, var(--verified) 50%, transparent); }

.rot__tit { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.rot__passo {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rot__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.rot__frase { margin: 2px 0 0; color: var(--ink-mute); line-height: 1.5; max-width: 56ch; }

/* ---- "Já resolvi" ---- */
.rot__resolvi {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.83rem;
  cursor: pointer;
  transition: background-color 280ms var(--ease-soft), border-color 280ms var(--ease-soft), color 280ms var(--ease-soft);
}
.rot__resolvi:hover { border-color: var(--accent-brd); color: var(--accent-ink); }
.rot__resolvi:focus-visible { outline: 2px solid var(--accent-brd); outline-offset: 2px; }
.rot__resolvi-ic {
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--hair);
  color: transparent;
  transition: background-color 280ms var(--ease-soft), border-color 280ms var(--ease-soft), color 280ms var(--ease-soft);
}
.rot__resolvi-ic svg { width: 13px; height: 13px; }
.rot__resolvi[aria-pressed="true"] {
  background: var(--verified-soft);
  border-color: color-mix(in srgb, var(--verified) 55%, transparent);
  color: var(--verified);
}
.rot__resolvi[aria-pressed="true"] .rot__resolvi-ic { background: var(--verified); border-color: var(--verified); color: #fff; }

.rot__dica {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  color: var(--ink-mute);
  font-size: 0.84rem;
  line-height: 1.6;
  max-width: 72ch;
}
.rot__dica b { color: var(--ink-soft); font-weight: 600; }

.rot__sep {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rot__sep::before, .rot__sep::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

.rot__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 0.53rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* ---- destaque: vendedores de milhas verificados ---- */
.milhas {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--copper) 50%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--copper) 13%, transparent), transparent 62%),
    var(--glass);
}
.milhas__topo { display: flex; align-items: flex-start; gap: 14px; }
.milhas__ic {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--copper) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--copper) 55%, transparent);
  color: var(--ink);
}
.milhas__ic svg { width: 21px; height: 21px; }
.milhas__eyebrow {
  margin: 0 0 3px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.milhas__t {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.milhas__lead { margin: 0; color: var(--ink-soft); line-height: 1.6; max-width: 70ch; }
.milhas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.milhas__lista li {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair);
  background: var(--glass);
  color: var(--ink-mute);
  font-size: 0.84rem;
  line-height: 1.55;
}
.milhas__lista b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 0.9rem; font-weight: 600; }
.milhas__aviso { margin: 0; color: var(--ink-faint); font-size: 0.78rem; line-height: 1.55; max-width: 72ch; }

/* ---- moldura do widget de parceiro ---- */
.wgt {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  overflow: hidden;
}
.wgt__frame { display: block; width: 100%; border: 0; background: transparent; }
.wgt.is-pronto { padding: 6px; }
.wgt--carregando { min-height: 190px; }

.wgt__esq { position: absolute; inset: 0; padding: 22px; display: grid; align-content: center; gap: 12px; }
.wgt__esq span {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--hair) 25%, var(--accent-soft) 50%, var(--hair) 75%);
  background-size: 200% 100%;
  animation: wgtBrilho 1.6s linear infinite;
}
.wgt__esq span:nth-child(2) { width: 72%; }
.wgt__esq span:nth-child(3) { width: 46%; }
@keyframes wgtBrilho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wgt__esq span { animation: none; } }

.wgt__rodape { display: flex; justify-content: flex-end; padding: 2px 8px 8px; }

.wgt--botao { border-style: dashed; border-color: var(--accent-brd); }
.wgt__vazio {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(22px, 3.4vw, 34px) 18px;
  text-align: center;
}
.wgt__vazio-t { margin: 0; color: var(--ink-mute); max-width: 46ch; line-height: 1.5; }
.wgt__ext { width: 14px !important; height: 14px !important; margin-left: 2px; opacity: 0.8; }

/* ---- rodapé de transparência ---- */
.rot__rodape-sec { padding-top: 0; }
.rot__transp {
  margin: 0;
  max-width: 78ch;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  color: var(--ink-faint);
  font-size: 0.78rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .rot__nav { top: 68px; }
  .rot__resolvi { width: 100%; justify-content: center; }
  .milhas__topo { flex-direction: column; gap: 10px; }
}

/* --------------------------------------------------------------------------
   38. HERO DE PÁGINA + CORPO — par de classes compartilhado
   Uma tela com card de abertura seguido de conteúdo empilha DUAS <section
   class="section">, e cada uma traz até 130 px de padding vertical: o vão
   entre o card e o conteúdo somava ~260 px (300 px em "Tá nevando?", que
   ainda tinha 44 px de margem no 1º título).

   Use o par em qualquer tela nova com essa estrutura:
     <section class="section wrap pghero"> … card de abertura … </section>
     <section class="section wrap pgcorpo"> … conteúdo … </section>
   Hoje usado por: #/neve e #/resolver.
   -------------------------------------------------------------------------- */
.pghero  { padding-bottom: 0; }
.pgcorpo { padding-top: clamp(20px, 2.6vw, 36px); }
.pgcorpo .nesec:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   39. TROCA DE E-MAIL — edição no painel da conta e tela de confirmação
   Reaproveita .panel, .field, .input, .btn, .erro e os tokens.
   -------------------------------------------------------------------------- */
.emailbox {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
}

.emailbox__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.emailbox__rot {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 3px;
}

.emailbox__val { color: var(--ink); font-weight: 600; margin: 0; word-break: break-all; }

.emailbox__ajuda {
  color: var(--ink-mute);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0;
}
.emailbox__ajuda b { color: var(--ink); font-weight: 600; }

.emailbox__form { display: grid; gap: 14px; }
.emailbox__acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* display: grid/flex vence o atributo hidden — como em .thread__form e
   .perto__badge, o esconde precisa ser dito na mão */
.emailbox__form[hidden],
.emailbox__espera[hidden],
.emailbox__linha [data-email-abrir][hidden] { display: none; }

.emailbox__espera {
  display: grid;
  gap: 9px;
  justify-items: start;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
}
.emailbox__espera p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.emailbox__espera b { color: var(--ink); }
.emailbox__espera a { color: var(--accent-ink); }

/* tela que o link do e-mail abre */
.confmail {
  padding: clamp(26px, 4vw, 48px);
  border-radius: var(--radius-lg, 22px);
  display: grid;
  gap: 16px;
  justify-items: start;
  max-width: 62ch;
  margin-inline: auto;
}

.confmail__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
}

.confmail__p { color: var(--ink-soft); line-height: 1.6; margin: 0; }
.confmail__p b { color: var(--ink); font-weight: 600; word-break: break-all; }
.confmail__acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   40. OFERTAS DE VIAGEM — calendário, destino em cascata, formulário,
       cartão com o preço em destaque e a página de detalhe

   Tudo aqui é peça nova que o projeto ainda não tinha: o calendário do site
   (nenhum campo de data pode abrir o calendário do sistema), o seletor de
   destino em cascata e a tela de criação/detalhe de oferta. O cartão da
   listagem reaproveita .trip; só a faixa da foto e o bloco de preço mudam.
   ========================================================================== */

/* --------------------------------------------------------------------------
   40.1 CALENDÁRIO (BPN.cal)
   -------------------------------------------------------------------------- */
.cal { position: relative; }

.cal__campo { padding-right: 46px; }

.cal__abrir {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  border-radius: 9px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  transition: color 220ms var(--ease-soft), background-color 220ms var(--ease-soft);
}
.cal__abrir svg { width: 19px; height: 19px; }
.cal__abrir:hover { color: var(--accent-ink); background: var(--accent-soft); }
.cal.is-aberto .cal__abrir { color: var(--accent-ink); background: var(--accent-soft); }

.cal__pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  width: min(320px, calc(100vw - 40px));
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-brd);
  /* fundo SÓLIDO: o calendário fica sobre fotografia, e vidro aqui deixa o
     número do dia ilegível */
  background: var(--ground-2);
  box-shadow: var(--glass-shadow-hi);
  display: grid;
  gap: 10px;
  animation: calAbre 220ms var(--ease) both;
}
/* `display: grid` ganha do [hidden] do navegador — sem esta linha o calendário
   nasce aberto e nunca fecha. (Já mordeu o projeto antes, em emailbox.) */
.cal__pop[hidden] { display: none; }

.cal--acima .cal__pop { top: auto; bottom: calc(100% + 8px); }

@keyframes calAbre {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.cal__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.cal__mes {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: capitalize;
}

.cal__nav {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--hair);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 200ms var(--ease-soft), color 200ms var(--ease-soft);
}
.cal__nav svg { width: 16px; height: 16px; }
.cal__nav:hover { background: var(--accent-soft); color: var(--accent-ink); }

.cal__sem, .cal__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.cal__sem span {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 2px;
}

.cal__vazio { height: 36px; }

.cal__dia {
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 180ms var(--ease-soft), color 180ms var(--ease-soft),
              transform 180ms var(--ease);
}
.cal__dia:hover:not([disabled]) { background: var(--accent-soft); color: var(--accent-ink); }
.cal__dia[disabled] { color: var(--ink-faint); opacity: 0.45; cursor: not-allowed; }

.cal__dia.is-hoje { box-shadow: inset 0 0 0 1px var(--accent-brd); }

.cal__dia.is-escolhido {
  background: var(--grad-alpenglow);
  color: #fff;
  font-weight: 600;
  transform: scale(1.04);
}

.cal__dia.is-foco:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }

.cal__nota {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--hair);
  font-size: 0.74rem;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   40.2 DESTINO EM CASCATA (BPN.destino)
   -------------------------------------------------------------------------- */
.destino { display: grid; gap: clamp(11px, 1.6vh, 15px); }
.destino.is-erro .dd__campo { border-color: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.14); }

.destino__filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.destino__filtros[hidden] { display: none; }

.destino__ajuda { margin: 0; font-size: 0.78rem; color: var(--ink-mute); line-height: 1.45; }

/* Etiquetas das estações escolhidas (2026-09-25) — mesmo desenho do
   .tagpill dos filtros, com bandeira: a ORDEM da lista é a ordem de
   escolha, não alfabética, e é ela que decide a foto do cartão (a[0]). */
.destino__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.destino__chips[hidden] { display: none; }
.destino__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 10px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-brd);
  font-size: 0.8rem; color: var(--accent-ink);
}
.destino__chip .dd__flag { width: 16px; height: 12px; border-radius: 2px; }
.destino__chip button {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: inherit; font-size: 1rem; line-height: 1; opacity: 0.65;
}
.destino__chip button:hover { opacity: 1; }

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

/* --------------------------------------------------------------------------
   40.3 FORMULÁRIO DA OFERTA
   -------------------------------------------------------------------------- */
.ofarea { display: grid; gap: 18px; }

.ofcarregando { margin: 0; color: var(--ink-mute); font-size: 0.9rem; }

.ofform {
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--radius-lg);
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  max-width: 880px;
}

.ofform__ramo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.ofform__ramo svg { width: 17px; height: 17px; color: var(--verified); flex: none; }
.ofform__ramo b { color: var(--ink); }

.ofsec { display: grid; gap: 14px; }

.ofsec__head { display: grid; gap: 5px; }

.ofsec__t {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.ofsec__s { margin: 0; font-size: 0.86rem; color: var(--ink-mute); line-height: 1.5; }
.ofsec__s b { color: var(--ink-soft); }

.ofform__linha { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: start; }
.ofform__linha--preco { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }
.ofform__linha .field { min-width: 0; }

@media (max-width: 780px) {
  .ofform__linha, .ofform__linha--preco { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .ofform__linha, .ofform__linha--preco { grid-template-columns: 1fr; }
}

.input--area { resize: vertical; min-height: 110px; line-height: 1.55; font-family: var(--font-body); }

/* conversão ao vivo embaixo do preço */
.ofconv {
  margin: 0;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-brd);
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.ofconv[hidden] { display: none; }
.ofconv b { color: var(--ink); font-size: 1.05rem; }
.ofconv__brl { color: var(--accent-ink); font-weight: 600; }
.ofconv__fonte {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  flex-basis: 100%;
}
.ofconv__sem { color: var(--ink-mute); font-size: 0.82rem; }

.ofform__erro[hidden] { display: none; }

.ofform__acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.ofaviso {
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 64ch;
}
.ofaviso p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.ofaviso__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* --------------------------------------------------------------------------
   40.4 PREÇO NO CARTÃO — é critério de decisão, então aparece de cara
   -------------------------------------------------------------------------- */
.ofpreco { display: grid; gap: 2px; min-width: 0; }

.ofpreco__val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.038em;
  line-height: 1;
  color: var(--ink);
}

.ofpreco__tipo {
  font-family: var(--font-mono);
  font-size: 0.53rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.ofpreco__conv { display: grid; gap: 1px; margin-top: 3px; }

.ofpreco__brl {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-ink);
  line-height: 1.1;
}

.ofpreco__fonte,
.ofpreco__sem {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ofpreco--grande .ofpreco__val { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.ofpreco--grande .ofpreco__brl { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   40.5 CARTÃO DA OFERTA na listagem
   -------------------------------------------------------------------------- */
.offaixa {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.offaixa span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-brd);
}
.offaixa--demo { color: var(--ink-faint); margin-top: 30px; }

.trips--reais { margin-bottom: 4px; }

/* Busca das ofertas reais, por destino ou por qualquer estação da viagem
   (2026-09-25) — fica ao lado da contagem, não embaixo dela. */
.offaixa--comBusca { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.offaixa--comBusca .offaixa { margin: 0; }
.offbusca { max-width: 280px; flex: 1 1 220px; }

/* uma oferta não tem fotografia própria — e foto de banco de imagem venderia
   uma montanha que não é aquela. A faixa vira um desenho da casa. */
.trip__media--sem {
  display: grid;
  place-items: center;
  background: var(--grad-alpenglow);
  color: rgba(255, 255, 255, 0.5);
}
.trip__media--sem .trip__mont svg { width: clamp(88px, 34%, 136px); height: auto; }
.trip__media--sem::after { opacity: 0.55; }

/* a bandeirinha do país cai dentro de .trip__media, onde `img` é a FOTO do
   cartão (width/height 100%). Sem esta linha ela ocupa a faixa inteira. */
.trip__media .flag { width: auto; height: 0.95em; }   /* a linha ali é mono e miúda */

.trip__title a { color: inherit; text-decoration: none; }
.trip__title a:hover { color: var(--accent-ink); }

/* iniciais no lugar do avatar (empresa não tem foto obrigatória) */
.trip__ini {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  background: var(--grad-alpenglow);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   40.6 DETALHE DA OFERTA
   -------------------------------------------------------------------------- */
.ofdet { display: grid; gap: 18px; }

.ofdet__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.85fr);
  gap: clamp(16px, 2.2vw, 26px);
  align-items: start;
}

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

.ofdet__corpo {
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 18px;
}

.ofdet__t {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.2vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ofdet__fatos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.ofdet__fatos span { display: inline-flex; align-items: center; gap: 7px; }
.ofdet__fatos svg { width: 16px; height: 16px; color: var(--accent-ink); flex: none; }
.ofdet__fatos .flag { width: 16px; height: 12px; }

.ofdet__lado { display: grid; gap: 14px; position: sticky; top: 92px; }
@media (max-width: 900px) { .ofdet__lado { position: static; } }

.ofblocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }

.ofbloco { display: grid; gap: 9px; align-content: start; }

.ofbloco__t {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.oflista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.oflista li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.oflista svg { width: 15px; height: 15px; color: var(--verified); flex: none; margin-top: 2px; }

.ofespec { display: grid; gap: 9px; padding-top: 6px; }
.ofespec__txt { margin: 0; color: var(--ink-soft); line-height: 1.65; overflow-wrap: anywhere; }

.ofcaixa {
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius);
  display: grid;
  gap: 14px;
}

.ofcaixa__quem {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.ofcaixa__quem b { color: var(--ink); }
.ofcaixa__quem:hover b { text-decoration: underline; }

.ofcaixa__nota { margin: 0; font-size: 0.8rem; color: var(--ink-mute); line-height: 1.5; }

.btn--bloco { width: 100%; justify-content: center; }

.ofpedir { display: grid; gap: 12px; }
.ofpedir .erro[hidden] { display: none; }

.ofcont {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-brd);
  color: var(--accent-ink);
}

.ofped {
  display: grid;
  gap: 8px;
  padding: 13px 0;
  border-top: 1px solid var(--hair);
}

.ofped__quem { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; }
.ofped__quem b { color: var(--ink); }
.ofped__quem small { color: var(--ink-mute); font-size: 0.76rem; }

.ofped__recado {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
  padding-left: 10px;
  border-left: 2px solid var(--accent-brd);
  overflow-wrap: anywhere;
}

.ofped__acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.ofped__sit {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ofped__sit--aceito { color: var(--verified); }

/* --------------------------------------------------------------------------
   40.7 AVISO QUE ANDA JUNTO DE UM CAMPO

   Hoje serve ao nível dos alunos: ele DIZ para quem a aula foi pensada e não
   tranca ninguém. O aviso aparece nos dois lugares em que o campo aparece —
   no formulário de quem publica e no detalhe de quem lê.
   -------------------------------------------------------------------------- */
.ofcampo { display: grid; gap: 6px; min-width: 0; }

.ofnota {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-mute);
}
.ofnota svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent-ink); }
.ofbloco .ofnota { padding-top: 2px; }

/* --------------------------------------------------------------------------
   40.8 VIAGEM DE RIDER — a versão enxuta, sem fins lucrativos

   O lugar do preço no cartão é ocupado pelos CIFRÕES da faixa de orçamento.
   São coisas diferentes e não podem parecer a mesma: o preço é tipografia de
   display, forte; os cifrões são mono, mais discretos, e vêm com a linha
   "não é preço" colada embaixo. Os dois nunca aparecem juntos.
   -------------------------------------------------------------------------- */
.oforc { display: grid; gap: 2px; min-width: 0; }

.oforc__cifroes {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--accent-ink);
}
/* os cifrões que a pessoa NÃO marcou ficam de fantasma, como uma nota */
.oforc__cifroes i { font-style: normal; color: var(--ink-faint); opacity: 0.45; }

.oforc__txt { font-size: 0.86rem; color: var(--ink); line-height: 1.2; }

.oforc__nota {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.oforc--grande .oforc__cifroes { font-size: clamp(1.7rem, 3.6vw, 2.2rem); }
.oforc--grande .oforc__txt { font-size: 1.02rem; }

/* Selo do cartão. O dourado (.chip--accent) é dos anúncios de prestador, e
   só deles; "Companhia" é outra natureza de publicação, então usa um selo
   claro e neutro. Precisa da mesma especificidade de `.trip__tags .chip`,
   que pinta o selo padrão de vidro escuro. */
.trip__tags .chip--rider {
  background: rgba(242, 248, 255, 0.92);
  border-color: transparent;
  color: #0C1B2E;
}

.trip--rider .trip__media--sem {
  background: linear-gradient(104deg, #1F5FA8 0%, #3E86C8 58%, #6FB0E0 100%);
}

/* aviso em destaque no fim do formulário do rider */
.ofnota--forte {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--copper);
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.ofnota--forte b { color: var(--ink); }
.ofnota--forte svg { color: var(--copper); }

.ofform__ramo--rider svg { color: var(--accent-ink); }

/* botão de segurança na caixa lateral do detalhe da viagem */
.ofseg { justify-self: start; }
.ofseg svg { width: 16px; height: 16px; }

/* ==========================================================================
   41. BOTÃO "PREENCHER COM DADOS DE TESTE" — FERRAMENTA DE DESENVOLVIMENTO

   Não faz parte do site. Só aparece fora de produção (quem decide é o
   servidor: GET /api/ambiente). O visual é de propósito diferente de tudo:
   tracejado e em fonte mono, para ninguém confundir com um botão de verdade.

   Some junto com assets/js/teste.js — apagar os dois e a linha do index.html
   remove a funcionalidade inteira.
   ========================================================================== */
.testebtn {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 120;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 28px);
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px dashed var(--accent-brd);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--glass-shadow);

  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 220ms var(--ease-soft), border-color 220ms var(--ease-soft),
              color 220ms var(--ease-soft), transform 220ms var(--ease);
}

.testebtn[hidden] { display: none; }

.testebtn svg { width: 15px; height: 15px; flex: none; }

.testebtn:hover {
  opacity: 1;
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  transform: translateY(-1px);
}

.testebtn:focus-visible { opacity: 1; outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.testebtn.is-ocupado { opacity: 1; cursor: progress; border-style: solid; }

.testebtn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* no celular o rótulo é longo: encurta em vez de empurrar a tela */
@media (max-width: 560px) {
  .testebtn { font-size: 0.56rem; padding: 8px 12px; max-width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .testebtn { transition: none; }
  .testebtn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   40.9 "APENAS PARA MULHERES" — filtro real, e por isso destacado

   A "preferência de companhia" é uma etiqueta; isto é uma REGRA de quem pode
   entrar. Por isso ganha cor própria (o dourado da paleta, reservado a
   detalhe premium, aqui usado como marcação forte) e aparece no cartão da
   listagem, não só no detalhe.
   -------------------------------------------------------------------------- */
.trip__tags .chip--mulheres {
  background: linear-gradient(104deg, #B0246B 0%, #D2559A 100%);
  border-color: transparent;
  color: #FFF1F7;
  gap: 5px;
}
.trip__tags .chip--mulheres svg { width: 12px; height: 12px; }

.ofmulher {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: rgba(176, 36, 107, 0.10);
  border: 1px solid rgba(176, 36, 107, 0.30);
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}
.ofmulher b { color: var(--ink); }
.ofmulher svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: #B0246B; }

[data-theme="dark"] .ofmulher { background: rgba(210, 85, 154, 0.14); border-color: rgba(210, 85, 154, 0.38); }
[data-theme="dark"] .ofmulher svg { color: #F09CC6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ofmulher { background: rgba(210, 85, 154, 0.14); border-color: rgba(210, 85, 154, 0.38); }
  :root:not([data-theme="light"]) .ofmulher svg { color: #F09CC6; }
}

.ofmulher--bloqueio { margin-bottom: 4px; }

/* o interruptor no formulário de criação */
.ofmulheres { display: grid; gap: 10px; }

.switch--bloco {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair);
  background: var(--glass);
  cursor: pointer;
}
.switch--bloco .switch__txt { display: grid; gap: 4px; flex: 1; min-width: 0; }
.switch--bloco .switch__txt b { color: var(--ink); font-size: 0.96rem; }
.switch--bloco .switch__txt span { color: var(--ink-mute); font-size: 0.82rem; line-height: 1.45; }
.switch--bloco .switch__txt span b { font-size: inherit; color: var(--ink-soft); }
.switch--bloco .switch__ui { margin-top: 3px; flex: none; }

.switch--bloco:has(input:checked) {
  border-color: rgba(176, 36, 107, 0.42);
  background: rgba(176, 36, 107, 0.08);
}

.switch--bloco.is-travado { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   42. MEUS PLANOS DE VIAGEM — a lista do dono e a edição in-line
   (#/meus-planos, view-meus-planos.js)

   Nada de componente novo: o cartão é o `.trip` aprovado e o formulário é o
   `.ofform` da criação. O que entra aqui é só a barra de quem é dono, que
   fica embaixo do cartão, e o estado "editando", em que o item ocupa a
   largura inteira para o formulário caber com folga.
   -------------------------------------------------------------------------- */
.planos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(20px, 2.6vw, 30px);
  align-items: start;
}

.plano { display: grid; gap: 10px; min-width: 0; }

/* Editando, o item toma a linha inteira: o formulário tem três campos lado a
   lado e não cabe numa coluna de cartão. */
.plano.is-editando { grid-column: 1 / -1; }

.plano__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 15px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--glass);
}

.plano__estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }

.plano__sit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.plano__sit--aberta { color: var(--verified); border-color: color-mix(in srgb, var(--verified) 42%, transparent); }
.plano__sit--fechada { opacity: 0.85; }
.plano__sit--venceu { color: var(--copper); border-color: color-mix(in srgb, var(--copper) 42%, transparent); }

.plano__ped {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.plano__ped:hover { color: var(--accent-ink); }
.plano__ped b { color: var(--accent-ink); font-weight: 600; }
.plano__ped--vazio { color: var(--ink-mute); }

.plano__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.plano__acoes svg { width: 15px; height: 15px; }

.plano__erro { flex-basis: 100%; margin: 0; }
/* o irmão de sempre: sem isto, um display de caixa vence o atributo hidden */
.plano__erro[hidden] { display: none; }

/* --- o formulário no lugar do cartão ------------------------------------- */
.plano__edit { display: grid; gap: 14px; }

.plano__editT {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.plano__editT b { color: var(--ink); font-weight: 600; }
.plano__editT svg { width: 17px; height: 17px; flex: none; color: var(--accent-ink); }

/* a faixa do topo do formulário, no modo edição */
.ofform__ramo--edicao { color: var(--accent-ink); }

@media (max-width: 560px) {
  .planos { grid-template-columns: 1fr; }
  .plano__acoes { margin-left: 0; width: 100%; }
  .plano__acoes .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   43. FOTO DO DESTINO NO CARTÃO
   (server/fotos_destino.js + BPN.tpl.oferta, em view-viagem.js)

   A faixa do cartão já sabia mostrar imagem: `.trip__media img` vem da
   listagem aprovada e não muda. O que entra aqui é só o crédito e o estado
   "tem foto", que troca o fundo em degradê da ilustração pelo preto que
   sustenta a foto enquanto ela carrega.
   -------------------------------------------------------------------------- */
.trip__media--foto { background: #0A1A33; }

/* O crédito da foto do cartão é o componente único `.cred` (seção 52): canto
   inferior, proporcional à largura da foto. Como o nome do destino também mora
   embaixo, ele sobe um pouco quando há crédito, para as duas linhas não se
   tocarem. */
.trip__media--foto .trip__place { bottom: 20px; }

/* ==========================================================================
   44. EDIÇÃO IN-LINE DO PERFIL DE PRESTADOR (2026-09-24)
   Reaproveita .panel, .spec, .emailbox*, .field, .ups, .up e .chip--selo —
   só o espaçamento entre o resumo e o botão "Editar" é novo.
   -------------------------------------------------------------------------- */
.empresaBox { display: grid; gap: 14px; }

/* ==========================================================================
   45. PAINEL ADMIN — FOTOS DAS ESTAÇÕES (2026-09-25)
   Reaproveita .panel, .chip--selo, .switch e .btn; só a grade de itens e o
   quadro da miniatura são novos.
   -------------------------------------------------------------------------- */
.admfotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.admfotoitem { display: grid; gap: 10px; padding: 14px; }
.admfotoitem.is-enviando { opacity: 0.6; pointer-events: none; }
.admfotoitem--generica { border-color: rgba(217, 144, 47, 0.4); }
.admfotoitem__img {
  aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--ground-2); display: grid; place-items: center;
}
.admfotoitem__img img { width: 100%; height: 100%; object-fit: cover; }
.admfotoitem__sem { font-size: 0.74rem; color: var(--ink-mute); text-align: center; padding: 0 10px; }
.admfotoitem__txt { display: grid; gap: 4px; }
.admfotoitem__txt b { font-size: 0.92rem; }
.admfotoitem__txt span { font-size: 0.78rem; color: var(--ink-mute); }
.admfotoitem__cred { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.03em; }
.admfotoitem__cred--sem { font-style: italic; opacity: 0.7; }
.adm__docs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.adm__semdoc { font-size: 0.82rem; color: var(--ink-mute); font-style: italic; }

/* ==========================================================================
   46. CENTRAL DE MENSAGENS POR VIAGEM (2026-09-26)
   #/conversas passou a agrupar as conversas por viagem/oferta (era só uma
   lista solta). Reaproveita .conv/.conv__lista/.perto__badge/.perto__vazio
   (a mesma lista de sempre) e .fchip/.fchips (os filtros de "Bora pra…") —
   só o selo de situação do pedido, a foto do grupo e o cabeçalho de contexto
   dentro da conversa são novos. -------------------------------------------- */
.msgctrl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.msgctrl__busca { flex: 1 1 220px; min-width: 0; }

/* foto do GRUPO (a mesma do cartão da viagem) no lugar do avatar de pessoa */
.conv__foto { flex: none; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; background: var(--ground-2); display: grid; place-items: center; }
.conv__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conv__foto--perto { color: var(--accent-ink); background: var(--accent-soft); }
.conv__foto--perto svg { width: 24px; height: 24px; }

#msgVoltar[hidden] { display: none; }
#msgVoltar { margin-bottom: 4px; }

/* selo de situação do pedido (pendente/aceito/recusado), igual em espírito
   ao .chip--selo do prestador — mesmas cores, outro dado. */
.chip--situacao[data-situacao="pendente"] { color: #9A5B00; background: rgba(217, 144, 47, 0.16); border-color: rgba(217, 144, 47, 0.4); }
.chip--situacao[data-situacao="aceito"]   { color: var(--verified); background: var(--verified-soft); border-color: rgba(30, 143, 99, 0.4); }
.chip--situacao[data-situacao="recusado"] { color: #B4232A; background: rgba(229, 72, 77, 0.12); border-color: rgba(229, 72, 77, 0.4); }
[data-theme="dark"] .chip--situacao[data-situacao="pendente"] { color: #F2C46E; }
[data-theme="dark"] .chip--situacao[data-situacao="recusado"] { color: #FFB4B7; }

/* lembrete da viagem, no topo da conversa em si */
.thread__ctx { padding: 10px 18px; border-bottom: 1px solid var(--hair); display: grid; gap: 8px; }
.thread__ctx[hidden] { display: none; }
.thread__ctxlink { font-size: 0.82rem; color: var(--accent-ink); text-decoration: none; }
.thread__ctxlink:hover { text-decoration: underline; }
.thread__pedido { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.thread__pedido-acoes { display: flex; gap: 8px; }

/* ==========================================================================
   47. MENU DO PERFIL na barra superior (2026-09-26)
   O círculo/nome da conta, que só linkava para #/conta, virou um menu (igual
   em espírito ao .dd__list — mesmo painel de vidro, mesma sombra). Reaproveita
   .acct/.acct__ini/.acct__txt para o botão; só o painel e os itens são novos. */
.menuperfil { position: relative; }
.menuperfil__btn { cursor: pointer; font: inherit; }
.menuperfil__chev { width: 14px; height: 14px; margin-left: 2px; color: var(--ink-mute); flex: none; transition: transform 220ms var(--ease-soft); }
.menuperfil__btn[aria-expanded="true"] .menuperfil__chev { transform: rotate(180deg); }
.menuperfil__painel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 70;
  min-width: 232px;
  margin: 0;
  padding: 8px;
  border-radius: calc(var(--radius-sm) + 4px);
  background: var(--ground-2);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow-hi);
}
.menuperfil__painel[hidden] { display: none; }
.menuperfil__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease-soft), color 160ms var(--ease-soft);
}
.menuperfil__item:hover { background: var(--accent-soft); color: var(--accent-ink); }
.menuperfil__item--sair { color: var(--ink-mute); }
.menuperfil__item .perto__badge { margin: 0; }
.menuperfil__sep { border: 0; border-top: 1px solid var(--hair); margin: 6px 4px; }

/* ==========================================================================
   48. SINO DE NOTIFICAÇÕES (2026-09-26)
   Painel no mesmo espírito do menu do perfil (vidro, sombra) logo ao lado —
   "ao lado do nome/foto", como pedido. Reaproveita .acct-like sizing só na
   medida do botão circular; o resto é novo (é um componente que não existia). */
.notif { position: relative; }
.notif__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 260ms var(--ease-soft), background 260ms var(--ease-soft);
}
.notif__btn:hover, .notif__btn[aria-expanded="true"] { border-color: var(--accent-brd); background: var(--glass-strong); }
.notif__btn svg { width: 19px; height: 19px; }

.notif__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--grad-alpenglow);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24), 0 0 0 2px var(--ground), 0 0 9px 1px rgba(42, 147, 240, 0.45);
}
.notif__badge[hidden] { display: none; }

.notif__painel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 70;
  width: min(360px, 88vw);
  border-radius: calc(var(--radius-sm) + 4px);
  background: var(--ground-2);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow-hi);
  overflow: hidden;
}
.notif__painel[hidden] { display: none; }

.notif__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.notif__cab b { font-size: 0.92rem; }
.notif__marcar { border: 0; background: none; color: var(--accent-ink); font-size: 0.76rem; cursor: pointer; padding: 0; font: inherit; }
.notif__marcar:hover { text-decoration: underline; }

.notif__lista { max-height: 400px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
.notif__vazio { margin: 0; padding: 26px 16px; text-align: center; color: var(--ink-mute); font-size: 0.86rem; }

.notif__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  transition: background-color 160ms var(--ease-soft);
}
.notif__item:last-child { border-bottom: 0; }
.notif__item:hover { background: var(--accent-soft); }
.notif__item.is-nova { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }

.notif__ico {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.notif__ico svg { width: 16px; height: 16px; }

.notif__corpo { display: grid; gap: 2px; flex: 1; min-width: 0; }
.notif__corpo b { font-size: 0.86rem; font-weight: 600; }
.notif__corpo span { font-size: 0.8rem; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif__corpo small { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-mute); }

.notif__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-alpenglow); margin-top: 6px; }

@media (max-width: 480px) {
  .notif__painel { position: fixed; left: 16px; right: 16px; width: auto; top: 68px; }
}

/* ==========================================================================
   49. TIQUES DE ENVIO/ENTREGA/LEITURA (2026-09-25)
   Ao lado do horário de cada mensagem MINHA, dentro de #/conversa. Reaproveita
   .msg/.msg--minha (já existiam); só o tique em si é novo. Sobre o fundo em
   gradiente de .msg--minha, "cinza" vira branco semitransparente e "lida"
   usa --copper (o dourado premium do site) em vez de azul do WhatsApp. */
.msg__tique { display: inline-flex; margin-left: 5px; vertical-align: -1px; }
.msg__tique svg { display: block; width: 14px; height: 10px; }
.msg--minha .msg__tique { color: rgba(255, 255, 255, 0.55); }
.msg--minha .msg__tique[data-status="entregue"] { color: rgba(255, 255, 255, 0.92); }
.msg--minha .msg__tique[data-status="lida"] { color: var(--copper); }

/* ==========================================================================
   50. PERFIL PÚBLICO DA AGÊNCIA — #/agencia (2026-09-25)
   Reaproveita .panel/.glass/.conta__grid/.chip/.pick/.trips/.trip__cred já
   existentes; o que é genuinamente novo é a capa, a barra de identidade que
   fica por cima dela, a fita de números e os cartões de destino. Também
   serve o upload de capa em #/conta (.capabox).
   ========================================================================== */
.agcapa {
  position: relative;
  height: clamp(140px, 24vw, 260px);
  border-radius: var(--radius);
  background: var(--grad-alpenglow);
  background-size: cover;
  background-position: center;
  box-shadow: var(--glass-shadow);
}
.agcapa--sem { background: linear-gradient(135deg, var(--accent-soft), var(--glass)); }
/* a barra de identidade (.agid) sobe 40px sobre a capa: o crédito fica acima dela */
.agcapa .cred { bottom: 46px; }

.agid {
  position: relative;
  z-index: 2;
  margin-top: -40px;
  padding: clamp(16px, 2.2vw, 26px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 22px);
}

.agid__face {
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
  flex: none;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--grad-alpenglow);
  border: 2px solid var(--glass-brd-hi);
  box-shadow: var(--glass-shadow);
}
.agid__face img { width: 100%; height: 100%; object-fit: cover; }
.agid__face .agid__ini { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: #fff; }

.agid__info { min-width: 0; flex: 1 1 220px; }
.agid__name {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.agid__meta { margin-top: 4px; font-size: 0.82rem; color: var(--ink-mute); }
.agid__acts { display: flex; gap: 8px; flex-wrap: wrap; }

.agstats {
  margin-top: clamp(14px, 2vw, 20px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
}
.agstats__item {
  background: var(--glass);
  padding: clamp(12px, 1.6vw, 18px) clamp(10px, 1.4vw, 16px);
  display: grid;
  gap: 3px;
  text-align: center;
}
.agstats__item b { font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--ink); }
.agstats__item span { font-size: 0.68rem; color: var(--ink-mute); letter-spacing: 0.02em; }

.agsec--full { grid-column: 1 / -1; }
.agsec__idiomas { margin-top: 10px; }

.agdest { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.agdest__item { display: grid; gap: 6px; }
.agdest__foto {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--ground-sunk);
  border: 1px solid var(--glass-brd);
}
.agdest__foto--sem { background-image: none !important; }
.agdest__nome { font-size: 0.78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.agdest__nome img.flag { width: 14px; }

/* upload de capa, dentro de #/conta (mesmo padrão in-line das outras caixas) */
.capabox__prev {
  margin-top: 8px;
  height: 120px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--ground-sunk);
  border: 1px solid var(--glass-brd);
  display: grid;
  place-items: center;
}
.capabox__prev--vazia { padding: 10px; }
.capabox__prev--vazia span { font-size: 0.76rem; color: var(--ink-mute); text-align: center; max-width: 38ch; }
.capabox__acoes { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .agid { margin-top: -28px; }
  .agstats { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   51. PERFIL DE COMUNIDADE — #/perfil e #/pessoa (2026-09-26)
   O dossiê (seção 19) continua sendo a moldura: .cover, .idslab, .readouts,
   .dossie__grid, .panel, .spec, .stamp, .avatar, .switch--bloco, .field, .row2.
   Novo aqui: o "Editar/Adicionar" sobre a capa, o crédito e a denúncia da capa,
   os estados vazios (convite ao dono), as linhas de carimbo da edição e o
   modal de capa. Só tokens; claro/escuro e 390 px sem rolagem horizontal.
   ========================================================================== */
body[data-page="pessoa"] .topbar {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: var(--glass-brd);
}

.cover--sem { background: linear-gradient(135deg, var(--accent-soft), var(--glass)); }

/* crédito da foto de estação (a licença pede o autor visível) */
.cover__foot {
  position: absolute;
  inset: auto 0 74px 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

/* dono: passar o mouse mostra "Editar/Adicionar capa" (no toque, um botão sempre visível) */
.cover__edit {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0 0 40px;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: #fff;
  background: rgba(6, 16, 36, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 260ms var(--ease-soft);
}
.cover__edit span { display: grid; justify-items: center; gap: 6px; }
.cover__edit svg { width: 26px; height: 26px; }
.cover__edit b { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; }
.cover__edit:hover, .cover__edit:focus-visible { opacity: 1; }
.cover__edit:focus-visible { outline: 3px solid var(--accent-brd); outline-offset: -6px; }

@media (hover: none) {
  .cover__edit {
    inset: 12px 14px auto auto;
    padding: 8px 14px;
    border-radius: 999px;
    opacity: 1;
    background: var(--grad-alpenglow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 6px 16px -6px rgba(6, 16, 36, 0.6);
  }
  .cover__edit span { display: flex; align-items: center; gap: 7px; }
  .cover__edit svg { width: 16px; height: 16px; }
  .cover__edit b { font-size: 0.72rem; }
}

/* visitante: denunciar a capa de outra pessoa */
.cover__denuncia {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(6, 16, 36, 0.46);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 200ms var(--ease-soft);
}
.cover__denuncia:hover { background: rgba(6, 16, 36, 0.72); }

/* fita de números: só as colunas que a pessoa preencheu */
.readouts--auto { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }

.comestilo { margin-top: 14px; }

/* convite ao dono quando a seção está vazia (nunca aparece para os outros) */
.comvazio { border-style: dashed; background: transparent; }
.comvazio .panel__nota { margin: 0 0 12px; }
.comvazio .btn { justify-self: start; }

/* edição: o lado esquerdo deixa de grudar no topo (os campos passam da altura da tela) */
.dossie__grid--edit .dossie__side { position: static; }

.comcars { display: grid; }
.comcar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}
.comcar:first-child { border-top: 0; padding-top: 0; }
.comacoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 640px) {
  .comcar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .comcar > .field:first-child { grid-column: 1 / -1; }
  .comcar__del { grid-column: 1 / -1; justify-self: start; }
  .comacoes .btn { flex: 1 1 auto; }
}

/* o interruptor de bloco nasceu rosa ("apenas para mulheres"); aqui ligado = cor de destaque do site */
.switch--bloco.switch--neutro:has(input:checked) {
  border-color: var(--accent-brd);
  background: var(--accent-soft);
}

/* modal da capa: prévia em faixa larga */
.fotomodal__corpo--capa { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.fotomodal__prev--capa {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  border-radius: 18px;
  background: var(--accent-soft);
}
.fotomodal__prev--capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   52. CRÉDITO DE IMAGEM — componente único (assets/js/credito.js, 2026-09-26)
   Vale para TODA foto do site que mostra autor/licença: cartões de viagem,
   capas (Comunidade e agência), miniaturas de destino e o fundo de tela.
   Foto nova = a classe .cred-host no elemento da foto + BPN.credito.html().

   · TAMANHO: a letra acompanha a LARGURA DA FOTO (container query no
     .cred-host): ~8 px num cartão, chegando a ~11,5 px numa capa larga.
     Sem container (o fundo de tela), a unidade cqw cai para a largura da janela.
   · MUITO PEQUENA: abaixo de 190 px de largura, só o "©".
   · ESTILO: canto inferior, uma linha, reticências, branco translúcido com
     sombra sutil — nada de pílula ou caixa competindo com a foto.
   · O crédito COMPLETO abre em uma dica (mouse, teclado ou toque).
   -------------------------------------------------------------------------- */
.cred-host { position: relative; container-type: inline-size; container-name: foto; }

.cred {
  position: absolute;
  right: clamp(6px, 2.2cqw, 14px);
  bottom: clamp(4px, 1.6cqw, 10px);
  z-index: 3;
  box-sizing: border-box;
  max-width: calc(100% - clamp(12px, 4.4cqw, 28px));
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 0.4rem + 0.4cqw, 0.72rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.74);
  text-shadow: 0 1px 2px rgba(6, 16, 36, 0.6), 0 0 1px rgba(6, 16, 36, 0.35);
  pointer-events: auto;
  cursor: help;
  outline: none;
  transition: color 200ms var(--ease-soft);
}
.cred:hover, .cred:focus-visible, .cred.is-aberto { color: rgba(255, 255, 255, 0.96); }
.cred:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* fora do posicionamento absoluto: quem usa posiciona (capa com faixa própria, fundo de tela) */
.cred--solto { position: relative; right: auto; bottom: auto; }

.cred__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cred__ico {
  display: none;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.95em;
  line-height: 1;
}

/* foto muito pequena: o texto não cabe de forma legível e discreta — só o ícone */
@container foto (max-width: 190px) {
  .cred__txt { display: none; }
  .cred__ico { display: inline-grid; }
}

/* foto GENÉRICA ("Foto ilustrativa"): itálico e mais apagado de propósito — é aviso de
   "isto não é o lugar", não crédito de autor, e não pode ser lido como um */
.cred--generico { font-style: italic; color: rgba(255, 255, 255, 0.62); }

/* o crédito completo */
.cred__full {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: min(280px, calc(100cqw - 16px));
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(6, 16, 36, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-shadow: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 160ms var(--ease-soft), transform 160ms var(--ease-soft), visibility 0s linear 160ms;
}
.cred:hover .cred__full,
.cred:focus-visible .cred__full,
.cred.is-aberto .cred__full { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* legenda do fundo de tela: fixa no canto, com largura de linha própria */
.sky__caption .cred { max-width: min(48vw, 620px); font-size: clamp(0.5rem, 0.4rem + 0.3vw, 0.68rem); }
.sky__caption .cred__full { max-width: min(320px, 86vw); }

/* janela estreita: o fundo de tela também vira só o "©" (antes a legenda sumia de vez) */
@media (max-width: 1180px) {
  .sky__caption { right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .sky__caption .cred { font-size: 0.62rem; }
  .sky__caption .cred__txt { display: none; }
  .sky__caption .cred__ico { display: inline-grid; }
}

/* a capa da Comunidade: o crédito fica na faixa própria, acima da laje de identidade */
.cover__foot .cred { pointer-events: auto; }

/* --------------------------------------------------------------------------
   53. VERIFICAÇÃO E SELOS DO GUIA / INSTRUTOR (2026-09-26)
   assets/js/selos-prestador.js (selos) e assets/js/verificacao-prestador.js
   (identidade e documentos). Reaproveita .up/.ups (envio de arquivo), .chip,
   .destino__chip (etiquetas do portfólio), .adm__fotos e .adm__acoes; aqui só
   entra o que não existia: o selo em si e o cartão de cada documento.
   -------------------------------------------------------------------------- */
.selosp { display: flex; flex-wrap: wrap; gap: 8px; }
.idslab__selos:empty { display: none; }
.agid__info .selosp { margin-top: 10px; }
.ofcaixa .selosp { margin: -2px 0 2px; }

.chip.selop { border-color: var(--accent-brd); background: var(--accent-soft); color: var(--accent-ink); }
.chip.selop svg { width: 13px; height: 13px; }
.chip.selop[data-selop="identidade"],
.selop--mini[data-selop="identidade"] { border-color: transparent; background: var(--verified-soft); color: var(--verified); }

/* tamanho pequeno (cartões e listagens): só o ícone, o nome vai na dica */
.selosp--mini { display: inline-flex; flex-wrap: nowrap; gap: 4px; margin-left: 2px; }
.selop--mini {
  display: inline-grid; place-items: center; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--accent-brd); background: var(--accent-soft); color: var(--accent-ink);
}
.selop--mini svg { width: 11px; height: 11px; }

/* selo no painel do próprio prestador: o mesmo bloco de envio, com o ícone do selo */
.up__prev--selo { background: var(--accent-soft); color: var(--accent-ink); }
.up__prev--selo.is-on { background: var(--verified-soft); color: var(--verified); }

/* cartão de um documento (certificação, primeiros socorros, seguro, portfólio; e o da fila do admin) */
.vsub { margin: 24px 0 4px; font-size: 1rem; font-weight: 700; color: var(--ink); }
#docsBox { display: grid; gap: 14px; }
.vdoc {
  display: grid; gap: 12px; padding: 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--hair); background: var(--glass);
  scroll-margin-top: 96px; min-width: 0;
  transition: border-color 240ms var(--ease-soft), box-shadow 240ms var(--ease-soft);
}
.vdoc__topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.vdoc__topo b { font-size: 0.98rem; color: var(--ink); }
.vdoc__add { display: flex; gap: 8px; }
.vdoc__add .input { flex: 1 1 auto; min-width: 0; }
.vdoc .panel__nota, .vdoc .ajuda, .vdoc .aviso { margin: 0; }
.vdoc.is-destaque { border-color: var(--accent-brd); box-shadow: 0 0 0 4px var(--accent-soft); }
.adm__item .vdoc { margin-top: 2px; }

@media (max-width: 480px) {
  .vdoc { padding: 14px 12px; }
  .vdoc__add { flex-direction: column; }
  .vdoc__add .btn { justify-content: center; }
  .vdoc .row2 { grid-template-columns: 1fr; }
}
/* espaço entre a faixa de status e os blocos de envio da identidade */
.vcaixa { display: grid; gap: 12px; }
.vcaixa .aviso[hidden] { display: none; }

/* --------------------------------------------------------------------------
   54. ÍCONE POR OPÇÃO NO DROPDOWN
   Estende o dropdown único do site (dropdown.js): `o.icone` desenha um ícone à
   esquerda da sugestão. (Nasceu na antiga busca de "Resolve o resto"; a
   seção 37 foi reescrita em 2026-09-30 e o resto desta seção saiu com ela.)
   -------------------------------------------------------------------------- */
.dd__opt-ico { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: var(--ink-mute); }
.dd__opt-ico svg { width: 16px; height: 16px; }
.dd__opt-ico + span { margin-right: auto; }
.dd__opt.is-ativa .dd__opt-ico { color: inherit; }

/* ==========================================================================
   55. MINHAS VIAGENS — pedidos que EU fiz (#/minhas-viagens, 2026-09-28)

   O cartão é o `.trip` aprovado (BPN.tpl.oferta, sem nenhuma mudança nele);
   só a barra de status/organizador/ações embaixo é nova — mesmo espírito da
   barra de "Meus planos" (.plano__barra, seção 42), mas do lado de quem
   PEDIU vaga, não de quem publicou. `.chip--situacao` já existia (seção 46,
   central de mensagens); ganhou aqui só a variante "realizada". `.pav` (29)
   e `.fchip` (21) também são reaproveitados, sem alteração.
   -------------------------------------------------------------------------- */
.participacoes {
  display: grid;
  gap: clamp(28px, 3.4vw, 40px);
}

.participacoes__grupo { display: grid; gap: 16px; }

.participacoes__titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}
.participacoes__titulo span {
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-mute);
  background: var(--ground-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 2px 9px;
}

.participacoes__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(20px, 2.6vw, 30px);
  align-items: start;
}

.participacao { display: grid; gap: 10px; min-width: 0; }

.participacao__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 15px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--glass);
}

/* variante de .chip--situacao (seção 46) para o pedido aceito e já ocorrido */
.chip--situacao[data-situacao="realizada"] { color: var(--copper); background: color-mix(in srgb, var(--copper) 14%, transparent); border-color: color-mix(in srgb, var(--copper) 42%, transparent); }

.participacao__quem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.82rem;
}
.participacao__quem:hover { color: var(--accent-ink); }
.participacao__quem .pav { width: 26px; height: 26px; font-size: 0.66rem; }
.participacao__quem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.participacao__quem .flag { margin-left: 3px; }
.participacao__quem .selo { margin-left: 3px; }

.participacao__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.participacao__acoes .btn svg { width: 15px; height: 15px; }

/* estrelas, tanto no botão "Avaliar" quanto na nota já dada */
.participacao__avaliado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-mute);
}
.starline { display: inline-flex; gap: 1px; }
.starline svg { width: 15px; height: 15px; color: var(--hair); }
.starline .is-on svg { color: var(--copper); }

.participacoes__recusadas { display: grid; gap: 14px; justify-items: start; }
#grupoRecusadas { width: 100%; }
#grupoRecusadas[hidden] { display: none; }
#grupoRecusadas .participacoes__lista { margin-top: 4px; }
.participacoes__vazio { color: var(--ink-mute); font-size: 0.86rem; }

/* ---- janela de avaliação (BPN.modal) ---- */
.starpick { display: flex; gap: 6px; margin: 4px 0 2px; }
.starpick__btn {
  width: 34px;
  height: 34px;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--hair);
  cursor: pointer;
  transition: color 140ms var(--ease-soft), transform 140ms var(--ease-soft);
}
.starpick__btn svg { width: 100%; height: 100%; display: block; }
.starpick__btn:hover { color: var(--copper); transform: scale(1.08); }
.starpick__btn.is-on { color: var(--copper); }

@media (max-width: 560px) {
  .participacoes__lista { grid-template-columns: 1fr; }
  .participacao__acoes { margin-left: 0; width: 100%; }
  .participacao__acoes .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   56. CARIMBOS SEM LIMITE — perfil de Comunidade (2026-09-29)

   `.stamps`/`.stamp` (seção 19) e `.stamp__country` (já existia, sem uso até
   agora) continuam a moldura aprovada, sem nenhuma alteração. Único elemento
   novo: a variante "ver todas", que troca a rolagem lateral por uma grade
   normal quando a lista de carimbos é longa demais para caber na tira.
   -------------------------------------------------------------------------- */
.stamps--todas {
  flex-wrap: wrap;
  overflow: visible;
  scroll-snap-type: none;
}
.stamps--todas .stamp { width: 140px; }
.stamps__wrap:has(.stamps--todas)::after { display: none; }

/* ==========================================================================
   57. ADMIN — WIDGETS DOS PARCEIROS (2026-09-30)
   Só o que faltava: passos numerados, linha de dois campos, caixa do código e
   espaço da prévia. O resto é .panel/.adm__item/.field/.switch já existentes.
   ========================================================================== */
.admwgt__passos { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }
.admwgt__linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; }
.admwgt__linha .field { margin: 0; }
.admwgt__codigo { font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.5; min-height: 110px; resize: vertical; }
.admwgt__previa { display: grid; gap: 8px; }
.admwgt__previa:empty { display: none; }

/* ==========================================================================
   58. CORREÇÕES DA AUDITORIA (2026-09-30)
   Tudo aqui usa só os tokens da paleta e vale nos temas claro e escuro.
   ========================================================================== */

/* ---- 58.1 menu do celular/tablet (C4) -----------------------------------
   Botão redondo no mesmo desenho do de tema; painel no mesmo vidro do menu do
   perfil. Até 600 px os botões de tema/neve saem da barra (a barra não cabia
   em 390 px e o avatar ficava cortado) e passam a morar dentro do painel. */
.navcel__btn {
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 260ms var(--ease-soft), background 260ms var(--ease-soft);
}
.navcel__btn:hover,
.navcel__btn[aria-expanded="true"] { border-color: var(--accent-brd); background: var(--glass-strong); }
.navcel__btn svg { width: 18px; height: 18px; overflow: visible; }
.navcel__btn path { transition: transform 260ms var(--ease-soft), opacity 200ms var(--ease-soft); transform-origin: 12px 12px; }
.navcel__btn[aria-expanded="true"] .navcel__l1 { transform: translateY(5px) rotate(45deg); }
.navcel__btn[aria-expanded="true"] .navcel__l2 { opacity: 0; }
.navcel__btn[aria-expanded="true"] .navcel__l3 { transform: translateY(-5px) rotate(-45deg); }

.navcel {
  position: fixed;
  left: 16px;
  right: 16px;
  top: calc(68px + env(safe-area-inset-top, 0px));
  z-index: 70;
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border-radius: calc(var(--radius-sm) + 6px);
  background: var(--ground-2);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow-hi);
}
.navcel[hidden] { display: none; }
.navcel__links { display: grid; gap: 2px; }
.navcel__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 160ms var(--ease-soft), color 160ms var(--ease-soft);
}
.navcel__links a::after {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.35;
}
.navcel__links a:hover,
.navcel__links a.is-active { background: var(--accent-soft); color: var(--accent-ink); }
body:not(.is-completo) .navcel__links [data-restrito] { display: none; }

.navcel__prefs {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}
.navcel__pref {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 10px;
  border-radius: 12px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.navcel__pref svg { width: 16px; height: 16px; flex: none; }
.navcel__pref[aria-pressed="false"] { opacity: 0.6; }
.navcel__conta { margin-top: 10px; }
body.is-logado .navcel__conta { display: none; }

@media (max-width: 940px) { .navcel__btn { display: grid; } }
@media (min-width: 941px) { .navcel { display: none !important; } }
@media (max-width: 600px) {
  .topbar__actions .theme-toggle,
  .topbar__actions .snow-toggle { display: none; }
  .navcel__prefs { display: grid; }
  .topbar__actions { gap: 8px; }
}

/* ---- 58.2 prestador não vê itens que são só de rider (M15) ---- */
body.is-prestador .navlinks [data-route="perto"],
body.is-prestador .navlinks [data-route="perfil"],
body.is-prestador .navcel__links [data-route="perto"],
body.is-prestador .navcel__links [data-route="perfil"] { display: none; }

/* ---- 58.3 dropdown desabilitado (dados presos à identidade, C1) ---- */
.dd__btn:disabled { opacity: 0.62; cursor: not-allowed; }

/* ---- 58.4 avaliações recebidas (A6) — sobre .review/.stars do dossiê ---- */
.aval__resumo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px; }
.aval__resumo b { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.aval__resumo span:last-child { font-size: 0.84rem; color: var(--ink-mute); }
.stars--media svg { width: 18px; height: 18px; }
.stars .stars__off { display: inline-flex; opacity: 0.28; }
.review__ini {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--grad-alpenglow);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
}
.review__top b a { color: inherit; text-decoration: none; }
.review__top b a:hover { color: var(--accent-ink); }

/* ---- 58.5 seleção múltipla não estoura a largura (A7) ----
   O campo crescia com as opções escolhidas (chegou a 819 px numa tela de
   390 px) porque item de grid/flex tem largura mínima = conteúdo. Agora o
   campo fica na largura dele e o resumo corta com reticências. */
.field, .dd { min-width: 0; max-width: 100%; }
.dd__btn { width: 100%; min-width: 0; }
.dd__val { flex: 1 1 auto; display: block; }
.dd__val .dd__sel { display: inline; }
.dd__val .dd__sel .dd__flag { display: inline-block; vertical-align: -2px; margin-right: 5px; }

/* ---- 58.6 conversa não estoura a largura no celular (M6) ----
   A coluna da grade era "auto" e crescia até o maior trecho sem quebra (nome
   ou texto longo), cortando o aviso e os balões pela direita em 390 px. */
.thread { grid-template-columns: minmax(0, 1fr); }
.thread__quem b,
.thread__ctx { overflow-wrap: anywhere; min-width: 0; }

/* ---- 58.7 altímetro sem invadir o conteúdo (M6) ----
   Entre 1181 e 1439 px a etiqueta do altímetro ("3.842 m") caía por cima dos
   painéis (ex.: o contador "4 / 4" de Minha conta, em 1366 px). Só a partir
   de 1440 px sobra margem para ele e para o trilho do lado esquerdo. */
@media (max-width: 1439px) {
  .rail, .altimeter { display: none; }
}

/* ---- 58.8 legenda da foto de fundo atrás do conteúdo (B12) ----
   Ela ficava por cima de painéis e botões no canto inferior direito. Agora
   fica entre a foto e o conteúdo: aparece onde a foto está à mostra (quase
   sempre, é o canto dela) e nunca cobre o que a pessoa está usando. */
main { position: relative; z-index: 1; }
.sky__caption { z-index: 0; }

/* ---- 58.9 "Bora pra…": ordenação com o componente único e "Carregar mais" ----
   O <select> nativo de ordenação virou o BPN.dd (regra do site), no mesmo
   formato de pílula que ele tinha. "Carregar mais" (A3) segue as ofertas. */
.sortdd .field { margin: 0; gap: 0; }
.sortdd label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.sortdd .dd__btn {
  min-height: 0;
  padding: 8px 12px 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  gap: 6px;
}
.sortdd .dd__chev { width: 14px; height: 14px; }
.sortdd .dd__list { left: auto; right: 0; min-width: 190px; }
.offmais { display: flex; justify-content: center; margin: 18px 0 28px; }
/* nome longo no topo da conversa: no máximo duas linhas */
.thread__quem b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* no celular o topo quebra em duas linhas: voltar + pessoa, e embaixo os botões
   (antes os quatro disputavam 390 px e o nome virava uma coluna de letras) */
@media (max-width: 600px) {
  .thread__topo { flex-wrap: wrap; row-gap: 10px; }
  .thread__quem { flex: 1 1 calc(100% - 60px); }
  .thread__topo > .btn { flex: 1 1 0; justify-content: center; }
}

/* ---- 58.10 Minha conta no celular: o bloco da identidade não sobe sob a barra (M6) ----
   .idslab tem margin-top: -58px para montar sobre a capa (perfil de
   Comunidade). Em Minha conta não há capa acima dele e, com o espaço menor
   do celular, ele subia para baixo da barra fixa. */
@media (max-width: 900px) {
  .section > .idslab:first-child { margin-top: 16px; }
}

/* ---- 58.11 conversa: coluna flexível no lugar da grade de 5 linhas (M6) ----
   A grade tinha 5 linhas fixas; com o bloco da viagem (Aceitar/Recusar) a
   conversa passa a ter 6 itens, a linha elástica caía no aviso e os balões
   passavam por cima dele. Em coluna, só a lista de mensagens estica. */
.thread { display: flex; flex-direction: column; }
.thread > * { flex: none; }
.thread > .thread__msgs { flex: 1 1 auto; min-height: 0; }

/* ==========================================================================
   59. PERFIL DE COMUNIDADE SEM CAPA — #/perfil e #/perfil?id=N (2026-09-30)
   Pedido do dono: o perfil do usuário perdeu a foto de capa (CAPA_ATIVA em
   view-perfil.js; .cover e seção 51 continuam para reativar). A laje de
   identidade vira o topo da página: sem sobrepor nada, sem vão no lugar da
   capa, e IGUAL nas duas visões (dono e visitante) — muda só o que vai nos
   botões. Estrelas numa linha própria. O perfil da agência (.agcapa) não usa
   nada daqui. Só tokens; claro/escuro; 390 px sem rolagem horizontal.
   ========================================================================== */
.comtopo { padding-top: clamp(18px, 2.4vw, 34px); }
.comtopo > .idslab--com { margin-top: 0; }

.idslab--com {
  padding: clamp(22px, 2.8vw, 38px) clamp(22px, 3.2vw, 44px);
  gap: 22px clamp(24px, 3vw, 48px);
}
.idslab--com .idslab__who { gap: clamp(18px, 2.4vw, 32px); }
.idslab--com .idslab__face { width: clamp(92px, 8.6vw, 124px); height: clamp(92px, 8.6vw, 124px); }
.idslab--com .idslab__face,
.idslab--com .idslab__face img { border-radius: 30px; }
.idslab--com .idslab__id { gap: 10px; }
.idslab--com .idslab__name {
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
}
/* bandeira e selo seguem a altura do nome, alinhados ao meio das letras */
.idslab--com .idslab__name .flag { height: 0.44em; vertical-align: 0.14em; margin-left: 0.32em; }
.idslab--com .idslab__name .selo { margin-left: 0.2em; vertical-align: 0.02em; color: var(--flare); }
.idslab--com .idslab__name .selo svg { width: 0.62em; height: 0.62em; }

/* avaliação: 5 estrelas + nota + total */
.comnota { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 0.86rem; color: var(--ink-mute); }
.comnota__estrelas { display: inline-flex; gap: 2px; }
.comnota__estrelas i { display: inline-flex; color: var(--ink-faint); opacity: 0.55; }
.comnota__estrelas i.is-on { color: var(--copper); opacity: 1; }
.comnota__estrelas i.is-meio { position: relative; }
.comnota__estrelas i.is-meio span { position: absolute; inset: 0 50% 0 0; overflow: hidden; display: flex; color: var(--copper); }
.comnota__estrelas i.is-meio span svg { flex: none; }
.comnota__estrelas i.is-meio { opacity: 1; }
.comnota__estrelas i.is-meio > svg { opacity: 0.4; }
.comnota__estrelas svg { width: 15px; height: 15px; }
.comnota b { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -0.02em; color: var(--ink); }
.comnota--vazia span:last-child { font-size: 0.8rem; }

.idslab--com .idslab__meta { gap: 6px 12px; }
/* botões empilhados (principal em cima, secundários embaixo): o bloco do nome
   tem o mesmo espaço nas duas visões — com 3 botões lado a lado, o nome do
   visitante quebrava em duas linhas e o cartão ficava mais alto que o do dono */
.idslab--com .idslab__acts { align-self: center; display: grid; grid-template-columns: repeat(2, auto); gap: 9px; }
.idslab--com .idslab__acts .btn { justify-content: center; }
.idslab--com .idslab__acts .btn--primary:first-child { grid-column: 1 / -1; }
.idslab--com .idslab__acts .btn--primary:first-child:only-child { grid-column: auto; }
.idslab--com .idslab__acts .btn--primary:first-child + .btn:last-child { grid-column: 1 / -1; }

/* a fita de números acompanha a largura: 5 colunas espremidas no celular
   quebravam as palavras ("TEMPORADAS" por cima de "DIAS") */
@media (max-width: 1020px) {
  .readouts--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readouts--auto > .readout:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* celular: identidade centrada, foto em destaque, botões em largura total */
@media (max-width: 600px) {
  .comtopo { padding-top: 14px; }
  .idslab--com { padding: 26px 20px 22px; justify-content: center; }
  .idslab--com .idslab__who { flex-direction: column; align-items: center; text-align: center; flex-basis: 100%; }
  .idslab--com .idslab__face { width: 104px; height: 104px; }
  .idslab--com .idslab__id { justify-items: center; }
  .idslab--com .eyebrow::before { display: none; }
  .idslab--com .idslab__name { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .idslab--com .comnota,
  .idslab--com .idslab__meta { justify-content: center; }
  .idslab--com .idslab__acts { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idslab--com .idslab__acts .btn--primary:first-child:only-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   60. ALTERAR TELEFONE — Minha conta, rider e prestador (2026-10-01)
   Caixa de "Alterar telefone" com país + DDI e "Reenviar código" com espera.
   Só correções de exibição sobre os componentes que já existiam (.emailbox,
   .telbox, .btn): `hidden` perdia para o display do .btn e do .telbox (a
   faixa vazia e o "Enviar código" que não sumia), e o campo do código
   cortava o "000000".
   ========================================================================== */
#telefoneBox [hidden] { display: none !important; }
#telefoneBox .telbox [data-codigo] { width: 9.5em; min-width: 9.5em; letter-spacing: 0.18em; text-align: center; }
#telefoneBox [data-tel-reenviar]:disabled { opacity: 0.62; cursor: default; }

/* ==========================================================================
   61. PRÉ-LANÇAMENTO (2026-10-01)
   Conteúdo de demonstração: o servidor marca <html class="sem-demo"> em
   produção (/api/ambiente.js) e tudo o que é fictício — viagens de exemplo
   com seus filtros, notícias, crews da home, ranking de agências — leva
   [data-demo] e some. Sem os filtros, a vitrine e o bloco de crews ficam
   numa coluna só.
   ========================================================================== */
html.sem-demo [data-demo] { display: none !important; }
html.sem-demo .bench__grid { grid-template-columns: minmax(0, 1fr); }
html.sem-demo .crews { grid-template-columns: minmax(0, 1fr); }

/* "Excluir conta" em Minha conta: mesmo encaixe do painel de nome de exibição,
   discreto, sem cor de alerta no botão (a janela é que explica o peso) */
#excluirBox { margin-top: clamp(16px, 2vw, 26px); max-width: 560px; display: grid; gap: 10px; }
#excluirBox .btn { justify-self: start; }

/* Verificação em duas etapas no login do painel admin (server/totp.js).
   O QR fica SEMPRE em fundo branco (os apps leem mal QR em fundo escuro). */
.adm2fa__qr { width: min(220px, 70vw); padding: 10px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-1, 0 2px 10px rgba(0, 0, 0, 0.12)); }
.adm2fa__qr svg { display: block; width: 100%; height: auto; }
.adm2fa__chave { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; letter-spacing: 0.06em; color: var(--ink); word-break: break-all; }
.adm2fa__rec { margin: 0; padding: 14px 18px 14px 38px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; width: 100%;
  border-radius: 14px; background: var(--glass); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: 0.05em; color: var(--ink); text-align: left; }
@media (max-width: 420px) { .adm2fa__rec { grid-template-columns: minmax(0, 1fr); } }

/* o contrário de [data-demo]: só aparece quando o conteúdo de demonstração está desligado */
html:not(.sem-demo) [data-so-sem-demo] { display: none !important; }
html.sem-demo .crews__copy { max-width: 62ch; }

/* lista do que acontece ao excluir a conta (janela de excluir-conta.js) */
.exclui__lista { padding-left: 1.2em; display: grid; gap: 6px; margin: 4px 0 6px; }

/* ==========================================================================
   62. TERMOS DE USO E POLÍTICA DE PRIVACIDADE — #/termos e #/privacidade
   (2026-10-03)
   As duas páginas (view-legal.js) existiam sem estilo próprio: o texto do
   cabeçalho encostava na borda do vidro. Aqui só espaçamento, medida de
   leitura e o destaque dos marcadores [PREENCHER], que precisam saltar aos
   olhos até serem trocados pelos dados reais.
   ========================================================================== */
.legal { display: grid; gap: clamp(14px, 2vw, 22px); }
.legal > * { min-width: 0; }
.legal__cab { padding: clamp(22px, 3.4vw, 44px); display: grid; gap: 12px; }
.legal__cab .eyebrow, .legal__cab .lead { margin: 0; }
.legal__cab .display { font-size: clamp(2.3rem, 7vw, 5.6rem); overflow-wrap: break-word; }
.legal__cab .lead { max-width: 58ch; }
.legal__versao { margin: 6px 0 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-mute); }
.legal__outros a { color: var(--accent-ink); font-weight: 600; }
.legal__corpo { display: grid; gap: clamp(24px, 3vw, 36px); padding: clamp(20px, 3.4vw, 44px); }
.legal__sec { max-width: 80ch; }
.legal__sec h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -0.01em; color: var(--ink); }
.legal__sec h3 { margin: 16px 0 6px; font-size: 1rem; color: var(--ink); }
.legal__sec p { margin: 0 0 10px; line-height: 1.62; color: var(--ink-soft); }
.legal__sec ul { margin: 6px 0 10px; padding-left: 1.2em; display: grid; gap: 7px; }
.legal__sec li { line-height: 1.6; color: var(--ink-soft); }
.legal__sec b { color: var(--ink); }
.legal__sec a { color: var(--accent-ink); overflow-wrap: anywhere; }
.legal__preencher { padding: 0 5px; border-radius: 5px; background: color-mix(in srgb, var(--copper) 34%, transparent); color: var(--ink); font-weight: 600; }

/* ==========================================================================
   63. "VOCÊ É UMA PESSOA?" — Cloudflare Turnstile no cadastro (2026-10-04)
   Modo "só quando precisar" (assets/js/turnstile.js): na maioria das vezes o
   quadro da Cloudflare nem aparece e fica só a linha de status abaixo, nas
   cores do site. Quando a Cloudflare pede um clique, o campo ganha
   .is-interativo e o quadro surge dentro de uma moldura de vidro com os
   mesmos valores do .input. O interior do quadro é um iframe da Cloudflare
   (só o tema claro/escuro é escolhido por nós).
   ========================================================================== */
.turnstile { gap: 8px; }
.turnstile__status {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; line-height: 1.4;
  color: var(--ink-mute);
}
.turnstile__ico { flex: none; width: 16px; height: 16px; color: var(--accent-ink); display: inline-flex; }
.turnstile__ico svg { width: 100%; height: 100%; }
.turnstile__check { opacity: 0; transition: opacity 280ms var(--ease-soft); }
.turnstile__marca { margin-left: auto; padding-left: 10px; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; }
.turnstile[data-estado="carregando"] .turnstile__ico,
.turnstile[data-estado="renovando"] .turnstile__ico { animation: turnstilePulso 1.6s var(--ease-soft) infinite; }
.turnstile[data-estado="ok"] .turnstile__ico { color: var(--verified); }
.turnstile[data-estado="ok"] .turnstile__check { opacity: 1; }
.turnstile[data-estado="ok"] .turnstile__status { color: var(--ink-soft); }
.turnstile[data-estado="erro"] .turnstile__ico { color: var(--ink-faint); }
@keyframes turnstilePulso { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .turnstile__ico { animation: none !important; } }

/* moldura: recolhida (sem nada visível) até a Cloudflare pedir interação */
.turnstile__moldura { width: 100%; }
.turnstile.is-interativo .turnstile__moldura {
  padding: 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-brd); background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: turnstileEntra 360ms var(--ease) both;
}
.turnstile.is-interativo .turnstile__quadro { min-height: 65px; border-radius: 8px; overflow: hidden; }
.turnstile__quadro { width: 100%; max-width: 100%; }
.turnstile__quadro iframe { display: block; max-width: 100%; }
@keyframes turnstileEntra { from { opacity: 0; transform: translateY(-4px); } }

/* ==========================================================================
   64. LEADS (2026-10-04) — server/leads.js
   Aceite de compartilhar contato no "Pedir vaga" (o .check de sempre), o
   cartão de contato do cliente na conversa (só o prestador vê), o período
   escolhido na aba "Leads" do admin e a posição no ranking.
   ========================================================================== */
.ofconsent { font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); }
.ofconsent b { color: var(--ink); font-weight: 600; }

.thread__contato {
  display: grid; gap: 4px; padding: 10px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--accent-brd); background: var(--accent-soft);
  font-size: 0.84rem; color: var(--ink);
}
.thread__contato-t { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.thread__contato-l { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.thread__contato-l a { color: var(--accent-ink); overflow-wrap: anywhere; }
.thread__contato-n { font-size: 0.74rem; color: var(--ink-mute); }
.thread__contato--meu { margin: 0; border-color: var(--glass-brd); background: transparent; font-size: 0.76rem; color: var(--ink-mute); }

.admtile.is-on { border-color: var(--accent-brd); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-brd); }
.admleads__sec .admrow { margin-top: 8px; }
.admleads__pos {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-ink); background: var(--accent-soft);
}
.admleads__row .admrow__quem a { color: inherit; text-decoration: none; }
.admleads__row .admrow__quem a:hover { color: var(--accent-ink); text-decoration: underline; }

/* ==========================================================================
   65. AVISOS POR E-MAIL E "CONTINUAR NO WHATSAPP" (2026-10-04)
   O interruptor dos avisos em Minha conta (o .switch de sempre), o
   formulário do WhatsApp do prestador e o botão na conversa do rider.
   ========================================================================== */
.avisosbox { margin-top: clamp(14px, 1.6vw, 20px); }
.wabox { display: grid; gap: 14px; }
.wabox .aviso[hidden] { display: none; }

.thread__wa { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.thread__wa .btn svg { width: 16px; height: 16px; }
.thread__wa-n { flex: 1 1 200px; font-size: 0.74rem; color: var(--ink-mute); line-height: 1.4; }

/* ==========================================================================
   66. CORREÇÕES DO CHECKUP (2026-10-04)
   Painel admin (#/admin): a barra do topo não oferece mais "Entrar / Criar
   conta" (BA10) — o painel tem login próprio, separado do login do site, e
   os botões confundiam quem estava dentro dele.
   ========================================================================== */
body[data-page="admin"] #authActions { display: none; }

/* ==========================================================================
   67. AJUSTES VISUAIS APROVADOS NO CHECK-UP (2026-10-05, pedido do dono)
   ========================================================================== */

/* ME4 — o selo de verificado ao lado do nome (BPN.selo) não tinha tamanho fora
   do perfil da Comunidade: o ícone existia com largura zero na conversa, em
   Minha conta, na barra do topo e na lista de pedidos. Mesmo verde do selo
   dos cartões (.badge-v). */
.selo { color: var(--verified); }
.selo > svg { width: 0.95em; height: 0.95em; flex: none; }
.acct__txt b .selo > svg { width: 13px; height: 13px; }

/* BA4 — a bandeira de quem avaliou pegava o tamanho da foto (.review img, 42 px) */
.review img.flag { width: auto; height: 0.52em; border-radius: 2px; object-fit: initial; }

/* BA8 — contraste. Tema escuro: os rótulos pequenos do topo e da home ficam
   sobre a parte clara da foto do céu e quase sumiam. Tema claro: a legenda da
   foto de fundo era branca sobre céu claro. */
:root[data-theme="dark"] .topbar .brand__text small,
:root[data-theme="dark"] .hero .eyebrow,
:root[data-theme="dark"] .hero__cue { color: var(--ink-soft); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar .brand__text small,
  :root:not([data-theme="light"]) .hero .eyebrow,
  :root:not([data-theme="light"]) .hero__cue { color: var(--ink-soft); }
}
:root[data-theme="light"] .sky__caption .cred {
  color: rgba(12, 27, 46, 0.72);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 0 1px rgba(255, 255, 255, 0.9);
}
:root[data-theme="light"] .sky__caption .cred:hover { color: rgba(12, 27, 46, 0.95); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sky__caption .cred {
    color: rgba(12, 27, 46, 0.72);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 0 1px rgba(255, 255, 255, 0.9);
  }
  :root:not([data-theme="dark"]) .sky__caption .cred:hover { color: rgba(12, 27, 46, 0.95); }
}

/* BA9 — no cadastro de prestador, a trilha de etapas (com textos longos)
   espremia o depoimento em telas de ~1366 px: a trilha fica com no máximo
   46% da largura e o depoimento com o resto. Abaixo de 940 px nada muda. */
@media (min-width: 941px) {
  .auth__foot { grid-template-columns: fit-content(46%) minmax(0, 1fr); }
}

/* BA10 — abas do painel admin: em telas médias as últimas (Widgets,
   Administradores, Auditoria…) ficavam escondidas à direita. Agora quebram
   de linha; no celular continua a faixa que rola de lado. */
@media (min-width: 601px) {
  .admtabs { flex-wrap: wrap; overflow-x: visible; }
}

/* BA7 — "agências verificadas" some da home enquanto for zero */
.hero__stats .stat[hidden] { display: none; }

/* ME6 — "Agências" lista os prestadores aprovados com a linha .crewrow da home;
   sem foto, as iniciais ocupam o mesmo quadrado de 40 px. */
.agreais { display: grid; gap: 14px; margin-top: clamp(22px, 3vw, 36px); }
.agreais .h3 { margin: 0; }
.crewrow__ini {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: var(--glass-strong); border: 1px solid var(--glass-brd);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--accent-ink);
}
.crewrow__txt b .flag { margin-left: 0.3em; }

/* ME5 — a vitrine filtra as viagens reais: o grupo de preço some quando não há
   oferta com preço (só viagens de rider) */
.fgroup[hidden] { display: none; }

/* BA15 — aviso de Termos/Política novos (assets/js/termos-aviso.js), dentro do .modal de sempre */
.termosaviso .h3 { margin: 0; }
.termosaviso__lista { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
.termosaviso .panel__nota a { color: var(--accent-ink); }

/* BA9 — campo de formulário escondido de propósito (ex.: "Responsável", "Nome
   fantasia" e "CPF do responsável" para instrutor/guia, documento-prestador.js):
   o `display: grid` do .field passava por cima do atributo hidden */
.field[hidden] { display: none; }