/* =========================================================
   UP Locações — Landing Page
   Mobile first: estilos base para 360–414px.
   Ajustes: tablet a partir de 768px, desktop (layout próprio) a partir de 1024px.
   Paleta: somente azul-marinho e branco (as cores vêm das fotos e vídeos).
   Direção: layout escuro e quieto; a mídia ocupa a tela e é a fonte de luz.
   Único ornamento: a seta circular do "U" nos botões que abrem o quiz.
   ========================================================= */

/* ---------- Variáveis da marca ---------- */
:root {
  /* Azul-marinho do logo oficial e tons derivados */
  --navy-950: #020427;      /* seções alternadas, mais escuro */
  --navy-900: #03063A;      /* cor principal */
  --navy-800: #0A1052;
  --navy-700: #16206E;
  --azul-brilho: #6EA8FF;   /* detalhes, bordas e glows */
  --azul-claro: #B9D3FF;    /* textos de apoio em destaque */
  --branco: #FFFFFF;
  --texto-suave: rgba(255, 255, 255, .78);
  --linha: rgba(255, 255, 255, .12);

  /* Seção clara */
  --gelo: #EEF3FF;
  --texto-escuro: #03063A;
  --texto-escuro-suave: #3B4566;

  /* Tipografia */
  --fonte-texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-cursiva: 'Great Vibes', 'Brush Script MT', cursive;   /* só no hero */

  /* Medidas */
  --gutter: 20px;
  --raio: 18px;
  --raio-pill: 999px;
  --toque: 52px;            /* altura mínima dos botões (>= 48px) */
  --altura-barra: 84px;     /* espaço reservado para a barra fixa */

  /* Layout (ajustados em cada breakpoint, no fim do arquivo) */
  --espaco-secao: 64px;     /* respiro vertical de cada seção */
  --largura-max: 1200px;    /* largura máxima do conteúdo */

  --glow: 0 0 24px rgba(110, 168, 255, .35);
  --brilho-neon:
    0 0 4px rgba(255, 255, 255, .9),
    0 0 12px rgba(110, 168, 255, .8),
    0 0 26px rgba(110, 168, 255, .5);
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy-900);
  color: var(--branco);
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* espaço no fim da página para a barra fixa não cobrir o rodapé */
  padding-bottom: calc(var(--altura-barra) + env(safe-area-inset-bottom));
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--azul-brilho); outline-offset: 3px; }

.container { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--gutter); }
.centro { text-align: center; }
.so-desktop { display: none; }

/* ---------- Ícones ---------- */
.icone { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* Balanço curto do ícone do WhatsApp (uma vez, quando a barra fixa entra) */
@keyframes balancar-whats {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-14deg) scale(1.15); }
  40% { transform: rotate(12deg) scale(1.15); }
  60% { transform: rotate(-8deg) scale(1.08); }
  80% { transform: rotate(4deg) scale(1.02); }
}

/* ---------- Tipografia ---------- */
.titulo {
  font-family: var(--fonte-texto);
  font-weight: 900;
  color: var(--branco);
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.titulo-secao { font-size: clamp(2rem, 9vw, 3.25rem); }

/* Destaque em azul claro (usado só na página de privacidade) */
.brilho { color: var(--azul-claro); text-shadow: 0 0 22px rgba(110, 168, 255, .55); }

/* Cursiva neon: usada SOMENTE no título do hero */
.neon {
  display: inline-block;
  font-family: var(--fonte-cursiva);
  font-weight: 400;
  font-size: 1.4em;
  line-height: .8;
  letter-spacing: 0;
  color: var(--branco);
  text-shadow: var(--brilho-neon);
  transform: rotate(-4deg);
  padding: 0 .06em;
}

/* Rótulo acima do título (só na página de privacidade) */
.sobretitulo {
  font-size: .875rem;
  font-weight: 700;
  color: var(--azul-brilho);
  margin-bottom: 8px;
}
.lead { color: var(--texto-suave); font-size: 1rem; font-weight: 500; margin-top: 12px; max-width: 36em; }


/* Placeholders de texto: tracejado azul para ficarem fáceis de achar */
.ph {
  background: rgba(110, 168, 255, .14);
  border: 1px dashed rgba(185, 211, 255, .8);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--azul-claro);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--toque);
  padding: 14px 20px;
  border: 0;
  border-radius: var(--raio-pill);
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active { transform: scale(.97); }
.btn .icone { width: 1.25em; height: 1.25em; }

/* Alto contraste: fundo branco, texto azul-marinho */
.btn-primario {
  background: var(--branco);
  color: var(--navy-900);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 8px 28px rgba(110, 168, 255, .4);
}
.btn-secundario {
  background: transparent;
  color: var(--branco);
  border: 1.5px solid rgba(255, 255, 255, .5);
}
.btn-escuro { background: var(--navy-900); color: var(--branco); box-shadow: 0 8px 24px rgba(3, 6, 58, .3); }

/* fonte proporcional: "Consultar disponibilidade" cabe em uma linha de 320px a 414px */
.btn-grande { min-height: 58px; font-size: clamp(.9375rem, 4.6vw, 1.05rem); padding: 16px 22px; }
.btn-pequeno { min-height: 44px; padding: 10px 20px; font-size: .9rem; }
.btn-bloco { width: 100%; }

/* Pílula da marca: link do Instagram no rodapé */
.pill-marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- Mídias e placeholders visuais ---------- */
/* Enquanto o arquivo real não existir, aparece o nome dele no bloco */
[data-midia] { position: relative; }
.midia {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  background:
    radial-gradient(circle at 30% 20%, rgba(110, 168, 255, .25), transparent 55%),
    linear-gradient(160deg, var(--navy-700), var(--navy-950));
  border: 1px solid var(--linha);
}
.midia::before,
.hero-midia::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
}
.midia img, .midia video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.midia-4x5 { aspect-ratio: 4 / 5; }
.midia-9x16 { aspect-ratio: 9 / 16; }
.midia-1x1 { aspect-ratio: 1 / 1; }
.sem-midia > img { visibility: hidden; }

/* ---------- Cabeçalho ---------- */
/* No mobile fica por cima do vídeo do hero e rola junto. A faixa toda deixa o toque
   passar (o botão de som do vídeo fica ali); só o logo e o botão recebem toque. */
.topo {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top);
  pointer-events: none;
}
.topo a, .topo button { pointer-events: auto; }
.topo-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 12px var(--gutter);
}
.logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo img { height: 26px; width: auto; }   /* logo oficial: "UP" em degradê + "LOCAÇÕES" */
.logo-texto { display: none; font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; }
.logo-texto em { font-style: normal; font-weight: 600; font-size: .6em; letter-spacing: .16em; text-transform: uppercase; margin-left: 4px; }
.logo.sem-midia img { display: none; }
.logo.sem-midia .logo-texto { display: inline; }
.topo-cta { display: none; }

/* ---------- 1. Hero ---------- */
/* Mobile: tela cheia (svh = altura com as barras do navegador visíveis,
   para o botão não ficar escondido no navegador do Instagram).
   O vídeo ocupa o topo e o texto vem logo abaixo das legendas do criativo. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(84px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom));
  background: var(--navy-950);
}
.hero-grid { display: flex; flex-direction: column; flex: 1 0 auto; }
.hero-texto, .hero-acao { position: relative; z-index: 1; }
/* Celular: sempre em 2 linhas. A fonte acompanha a largura útil da tela
   (a frase com a cursiva mede ~11,6x o tamanho da fonte por linha). */
.hero-titulo {
  font-size: min(2.75rem, calc((100vw - 2 * var(--gutter)) / 11.8));
  line-height: 1.05;
  /* sombra curta (contorno) + longa (halo) para destacar do vídeo */
  text-shadow: 0 1px 2px rgba(2, 4, 39, .9), 0 2px 24px rgba(2, 4, 39, .85);
}

/* O criativo tem legendas gravadas entre 58% e 85% da altura do quadro.
   A caixa do vídeo vai do topo da tela até o título; o vídeo passa dela só os 14%
   de baixo (--sob-texto, sem legenda), que ficam por trás do texto, escurecidos.
   Altura mínima: corta no máximo ~10% do topo do vídeo. Em telas baixas o hero
   passa da altura da tela e a barra fixa assume o botão. */
.hero-midia {
  --sob-texto: 25vw;   /* 14% da altura do vídeo em 9:16 na largura da tela */
  position: relative;
  z-index: 0;
  order: -1;
  flex: 1 0 auto;
  min-height: min(135vw, 75vh);
  min-height: min(135vw, 75svh);
  margin: calc(-84px - env(safe-area-inset-top)) calc(-1 * var(--gutter)) 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(110, 168, 255, .3), transparent 60%),
    var(--navy-800);
}
/* Degradê por cima do vídeo: escurece o topo (logo) e a parte que fica atrás do texto.
   pointer-events: none para o toque continuar chegando ao vídeo (ativa o som). */
.hero-midia::after {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--sob-texto));
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(2, 4, 39, .55) 0,
    rgba(2, 4, 39, 0) 96px,
    rgba(2, 4, 39, 0) calc(100% - var(--sob-texto) - 16px),
    rgba(2, 4, 39, .8) calc(100% - var(--sob-texto) + 24px),
    rgba(2, 4, 39, .94) calc(100% - var(--sob-texto) + 70px),
    var(--navy-950) 100%);
}
/* Preso pela base: o corte, quando houver, sai do topo e as legendas não descem */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + var(--sob-texto));
  object-fit: cover;
  object-position: 50% 100%;
}

/* Botão de som no canto de cima, na mesma altura do logo:
   pílula "Ouvir" enquanto mudo, ícone redondo depois */
.video-som {
  position: absolute;
  z-index: 2;
  top: calc(12px + env(safe-area-inset-top));
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
  border: 0;
  border-radius: var(--raio-pill);
  background: var(--branco);
  color: var(--navy-900);
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .55), 0 8px 24px rgba(0, 0, 0, .35);
  animation: pulso-som 2.2s ease-out infinite;
}
.video-som[hidden] { display: none; }
.video-som .icone { width: 20px; height: 20px; }
.video-som.com-som {
  width: 44px;
  padding: 0;
  justify-content: center;
  background: rgba(3, 6, 58, .6);
  color: var(--branco);
  animation: none;
}
.video-som.com-som span { display: none; }
@keyframes pulso-som {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55), 0 8px 24px rgba(0, 0, 0, .35); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0), 0 8px 24px rgba(0, 0, 0, .35); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 8px 24px rgba(0, 0, 0, .35); }
}

/* Tela final do vídeo. No mobile o texto fica na parte de cima e o botão
   dela some: o botão do hero, logo abaixo, já faz esse papel. */
.video-fim {
  position: absolute;
  z-index: 3;
  inset: 0 0 calc(-1 * var(--sob-texto));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: calc(110px + env(safe-area-inset-top)) 24px 24px;
  text-align: center;
  background: rgba(3, 6, 58, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.video-fim[hidden] { display: none; }
.video-fim .btn { display: none; max-width: 100%; padding-inline: 18px; font-size: .9rem; white-space: normal; }
.video-fim-texto { font-size: 1.25rem; font-weight: 800; line-height: 1.25; max-width: 15em; }
.video-rever {
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hero-acao { margin-top: 14px; }
.hero-sub { color: rgba(255, 255, 255, .9); font-size: 1rem; font-weight: 500; max-width: 30em; }
/* Sempre em uma linha: a fonte acompanha a largura da tela (a frase mede ~28,2x o
   tamanho da fonte em Montserrat) até o máximo de 14px */
.hero-micro {
  margin: 8px 0 18px;
  font-size: min(.875rem, calc((100vw - 2 * var(--gutter)) / 28.5));
  white-space: nowrap;
  color: var(--texto-suave);
}
.hero-cta { width: 100%; }

/* ---------- 2. Faixa de confiança ---------- */
/* Três fatos separados por fios finos (sem caixas).
   Celular: lista de três linhas iguais (destaque + texto ao lado), no mesmo padrão
   do "Sobe / Gira / Recebe". A partir de 768px: três colunas lado a lado. */
.confianca {
  background: var(--navy-950);
  border-bottom: 1px solid var(--linha);
  padding: 8px 0;
}
.confianca-lista { display: grid; grid-template-columns: 1fr; }
/* coluna do destaque com a largura de "Imperatriz": os três textos ficam alinhados */
.confianca-item {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
  padding: 12px 0;
  line-height: 1.3;
}
.confianca-item + .confianca-item { border-top: 1px solid var(--linha); }
.confianca-item strong {
  font-size: clamp(1.25rem, 5.6vw, 1.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(110, 168, 255, .6);
}
.confianca-item span { font-size: .9375rem; font-weight: 600; color: var(--texto-suave); }

/* ---------- Seções (base) ---------- */
.secao { padding: var(--espaco-secao) 0; position: relative; }
.secao-cabecalho { max-width: 640px; margin: 0 0 28px; }
.secao-escura { background: var(--navy-950); }
.secao-galeria { background: var(--navy-900); }

/* Seção clara em branco-gelo (só "Como reservar") */
.secao-clara { background: var(--gelo); color: var(--texto-escuro); }
.secao-clara .titulo { color: var(--navy-900); }

/* ---------- Carrossel horizontal (mobile) ---------- */
/* O próximo item aparece pela metade na borda: é o convite para arrastar */
.carrossel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--gutter));
  padding: 4px var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel > * { flex: 0 0 82%; scroll-snap-align: start; }
.carrossel-videos > * { flex-basis: 58%; }

/* Barrinha de progresso: quanto do carrossel já passou pela tela (main.js) */
.carrossel-progresso {
  height: 3px;
  margin-top: 16px;
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.carrossel-progresso span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--branco);
  transform-origin: left center;
  transform: scaleX(.35);
  transition: transform .12s linear;
}

/* ---------- 3. Plataforma 360 ---------- */
.secao-360 {
  background:
    radial-gradient(ellipse 80% 40% at 50% 48%, rgba(110, 168, 255, .16), transparent 70%),
    var(--navy-900);
}
.carrossel-videos .midia { border-radius: var(--raio); box-shadow: 0 18px 50px rgba(110, 168, 255, .18); }

/* Sobe → Gira → Recebe: palavra grande à esquerda, explicação à direita */
.passos-360 { margin-top: 36px; border-top: 1px solid var(--linha); }
.passos-360 li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
}
.passos-360 strong { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.passos-360 span { color: var(--texto-suave); }

.btn-secao { width: 100%; margin-top: 32px; }

/* ---------- 4. Cards de combo ---------- */
.card-combo {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy-900);
  border: 1px solid var(--linha);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-capa { position: relative; }
.card-capa .midia { aspect-ratio: 20 / 23; border: 0; border-radius: 0; }
/* degradê para o nome do equipamento ficar legível sobre a foto */
.card-capa::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 6, 58, 0), var(--navy-900));
}
.card-midia-galaxy img { object-position: 50% 30%; }
.card-nome { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 12px; }
.card-mais { display: block; font-size: .875rem; font-weight: 700; color: var(--azul-claro); }
.card-titulo { font-size: 1.6rem; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.card-corpo { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 6px 16px 16px; }
.card-corpo p { color: var(--texto-suave); font-size: .9375rem; }
.card-corpo .card-frase { color: var(--azul-claro); font-weight: 600; font-style: italic; }
.card-corpo .btn { margin-top: auto; font-size: .9375rem; }

/* ---------- 5. Como reservar (linha do tempo) ---------- */
.passos { position: relative; display: grid; gap: 28px; }
/* fio vertical ligando os números */
.passos::before {
  content: "";
  position: absolute;
  left: 23px; top: 24px; bottom: 24px;
  width: 2px;
  background: rgba(3, 6, 58, .16);
}
.passo { position: relative; min-height: 48px; padding-left: 68px; }
.passo-numero {
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--branco);
  background: var(--navy-900);
  box-shadow: 0 0 0 6px var(--gelo);   /* "corta" o fio atrás do número */
}
.passo h3 { padding-top: 11px; margin-bottom: 4px; font-size: 1.125rem; font-weight: 800; line-height: 1.3; color: var(--navy-900); }
.passo p { color: var(--texto-escuro-suave); font-size: .9375rem; }

/* ---------- 6. Eventos (foto em cima, nome embaixo) ---------- */
.grid-eventos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; }
.tile-evento {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  text-align: left;
}
.tile-foto {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--linha);
  background:
    radial-gradient(circle at 85% 15%, rgba(110, 168, 255, .3), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy-900));
  transition: transform .15s ease, border-color .2s ease;
}
.tile-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile-evento:active .tile-foto { transform: scale(.97); }
.tile-nome { font-size: 1.0625rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.tile-desc { font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--texto-suave); }

/* ---------- 7. Depoimentos (escondidos até chegarem os reais) e galeria ---------- */
.depoimento {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--linha);
}
.estrelas { display: flex; gap: 3px; color: var(--branco); }
.depoimento-autor { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.depoimento-autor strong { display: block; font-size: .95rem; }
.depoimento-autor small { color: var(--texto-suave); font-size: .875rem; }
.avatar { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--navy-700); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.carrossel-depoimentos { margin-bottom: 40px; }

/* Mobile: 2 colunas, a da direita descida 40px (5 fotos encaixam sem buraco) */
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.galeria .midia { border-radius: 14px; }
.galeria .midia:nth-child(even) { transform: translateY(40px); }

/* ---------- 8. FAQ (acordeão nativo com <details>) ---------- */
.faq { display: grid; gap: 10px; }
.faq-item {
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--linha);
  transition: border-color .2s ease;
}
.faq-item[open] { border-color: rgba(110, 168, 255, .5); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 14px 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icone { color: var(--azul-brilho); transition: transform .25s ease; }
.faq-item[open] summary .icone { transform: rotate(45deg); }
.faq-resposta { padding: 0 18px 18px; color: var(--texto-suave); }

/* ---------- 9. Chamada final ---------- */
.cta-final {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(110, 168, 255, .35), transparent 60%),
    var(--navy-900);
  padding: 72px 0 80px;
}
.cta-final .lead { margin-bottom: 28px; }
.cta-final .btn { width: 100%; max-width: 420px; }

/* ---------- 10. Rodapé ---------- */
.rodape { background: var(--navy-950); border-top: 1px solid var(--linha); padding: 40px 0 32px; }
.rodape-interno { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rodape-info { font-size: .875rem; color: var(--texto-suave); }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: .875rem; }
.rodape-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--texto-suave);
  text-underline-offset: 3px;
}
.rodape-copy { font-size: .8125rem; color: rgba(255, 255, 255, .55); }

/* ---------- Barra fixa inferior (mobile) ---------- */
.barra-fixa {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(2, 4, 39, 0), rgba(2, 4, 39, .94) 35%);
  transition: transform .3s ease, visibility 0s;
}
/* Com JS: começa escondida e entra quando o botão do hero sai da tela.
   visibility evita que o botão escondido receba foco pelo teclado. */
.js .barra-fixa:not(.barra-visivel) {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s .25s;
}
/* Na primeira entrada, o ícone do WhatsApp balança uma vez */
.barra-fixa.barra-girou .icone-whats { animation: balancar-whats .7s ease-out .2s both; }

/* Telas bem estreitas (320–359px, ex.: iPhone SE 1ª geração):
   menos respiro nos botões e cards mais largos para os rótulos caberem em uma linha */
@media (max-width: 359px) {
  .btn-grande { gap: 8px; padding-inline: 14px; }
  .carrossel-cards > * { flex-basis: 88%; }
}

/* =========================================================
   TABLET (>= 768px)
   ========================================================= */
@media (min-width: 768px) {
  :root { --gutter: 32px; --espaco-secao: 88px; }

  /* Faixa de confiança: os três fatos lado a lado, separados por fios verticais */
  .confianca { padding: 20px 0 22px; }
  .confianca-lista { grid-template-columns: repeat(3, 1fr); }
  .confianca-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 8px; }
  .confianca-item:first-child { padding-left: 0; }
  .confianca-item + .confianca-item { border-top: 0; border-left: 1px solid var(--linha); padding-left: 16px; }
  .confianca-item span { font-size: .875rem; }

  .btn-grande { padding-inline: 30px; }
  .hero-texto, .hero-acao { max-width: 560px; }
  .hero-titulo { font-size: clamp(2.75rem, 6.5vw, 3.5rem); }
  .hero-cta { width: auto; }

  .carrossel > * { flex-basis: 44%; }
  .carrossel-videos > * { flex-basis: 30%; }

  .passos-360 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 0; }
  .passos-360 li { grid-template-columns: 1fr; gap: 6px; border-top: 1px solid var(--linha); border-bottom: 0; }
  .btn-secao { width: auto; }

  .grid-eventos { grid-template-columns: repeat(3, 1fr); }

  /* Mosaico: 1ª foto ocupa 2x2 à esquerda, as outras 4 em grade 2x2 à direita */
  .galeria { grid-template-columns: repeat(4, 1fr); }
  .galeria .midia:nth-child(even) { transform: none; }
  .galeria .midia:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* =========================================================
   DESKTOP (>= 1024px) — layout próprio, não é o mobile esticado
   O mesmo conteúdo reorganizado em colunas (texto e mídia lado a lado) e
   seções mais baixas, para caber em telas de notebook (~800px de altura).
   ========================================================= */
@media (min-width: 1024px) {
  :root { --espaco-secao: 104px; }
  body { padding-bottom: 0; }
  .barra-fixa { display: none; }   /* no desktop o CTA fica no cabeçalho */
  .so-mobile { display: none; }
  .so-desktop { display: block; }

  /* Cabeçalho fixo discreto que ganha fundo ao rolar (classe via main.js) */
  .topo { position: fixed; transition: background .3s ease, box-shadow .3s ease; }
  .topo.topo-solido {
    background: rgba(2, 4, 39, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--linha);
    pointer-events: auto;
  }
  .logo img { height: 30px; }
  /* Botão do cabeçalho: com JS, só aparece quando o botão do hero (ou o da chamada
     final) sai da tela; é o mesmo revezamento da barra fixa no mobile */
  .topo-cta { display: inline-flex; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
  .js .topo:not(.topo-com-cta) .topo-cta {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
  }

  /* Hero em 2 colunas: texto à esquerda, vídeo à direita */
  .hero {
    min-height: 100vh;
    justify-content: center;
    padding: 104px 0 64px;
    background:
      radial-gradient(circle at 75% 50%, rgba(110, 168, 255, .28), transparent 45%),
      linear-gradient(180deg, var(--navy-950), var(--navy-900));
  }
  .hero-grid {
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }
  .hero-texto { grid-column: 1; grid-row: 1; align-self: end; max-width: none; }
  .hero-acao { grid-column: 1; grid-row: 2; align-self: start; max-width: none; margin-top: 24px; }
  .hero-titulo { font-size: clamp(3.2rem, 4.8vw, 4.4rem); text-shadow: none; }
  .hero-sub { font-size: 1.125rem; max-width: 32em; color: var(--texto-suave); }
  .hero-micro { margin: 14px 0 28px; }

  /* O vídeo volta a ser um item da grade, com moldura. 9:16 exato: a altura
     manda e a largura acompanha, então o criativo aparece inteiro, sem corte. */
  .hero-midia {
    --sob-texto: 0px;
    order: 0;
    flex: none;
    min-height: 0;
    margin: 0;
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: end;
    height: min(76vh, 720px);
    width: auto;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 36px;
    border: 8px solid rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 30px 90px rgba(110, 168, 255, .4);
  }
  .hero-midia::after { display: none; }
  .hero-video { object-position: 50% 50%; }
  .video-som { top: 14px; right: 14px; }
  .video-fim { justify-content: center; gap: 14px; padding: 24px; }
  .video-fim .btn { display: inline-flex; }

  /* Faixa de confiança: cada fato centrado na sua coluna, sem quebrar linha */
  .confianca { padding: 28px 0; }
  .confianca-item { flex-direction: row; align-items: baseline; justify-content: center; gap: 12px; }
  .confianca-lista .confianca-item { padding: 0 24px; }
  .confianca-item span { white-space: nowrap; }

  /* Títulos de seção em uma linha; o texto de apoio continua com ~36em */
  .secao-cabecalho { max-width: 820px; margin-bottom: 48px; }

  /* 360: título e botão à esquerda, "Sobe / Gira / Recebe" à direita,
     vídeos embaixo na largura toda (a seção termina na mídia) */
  .secao-360 .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "cabecalho passos"
      "acao      passos"
      "videos    videos";
    column-gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .secao-360 .secao-cabecalho { grid-area: cabecalho; margin-bottom: 28px; }
  .secao-360 .btn-secao { grid-area: acao; justify-self: start; margin-top: 0; }
  .passos-360 { grid-area: passos; display: block; margin-top: 10px; border-top: 1px solid var(--linha); }
  .passos-360 li { grid-template-columns: 7rem 1fr; gap: 16px; padding: 18px 0; border-top: 0; border-bottom: 1px solid var(--linha); }
  /* cada frase em uma linha (textos curtos de propósito) */
  .passos-360 span { font-size: .95rem; white-space: nowrap; }
  .passos-360 strong { font-size: 1.75rem; }
  /* .secao-360 na frente: a regra ".carrossel { margin: 0 }" mais abaixo zeraria a margem */
  .secao-360 .carrossel-videos { grid-area: videos; margin-top: 56px; }

  /* Combos: foto quadrada para o card inteiro caber na tela */
  .card-capa .midia { aspect-ratio: 1 / 1; }

  /* Carrosséis viram grade */
  .carrossel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .carrossel-videos { grid-template-columns: repeat(4, 1fr); }
  .carrossel-progresso { display: none; }

  /* Como reservar: linha do tempo na horizontal */
  .passos { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  /* fio do centro do 1º número ao centro do 3º (largura de uma coluna = (100% - 2 gaps) / 3) */
  .passos::before { left: 24px; right: calc((100% - 80px) / 3 - 24px); top: 23px; bottom: auto; width: auto; height: 2px; }
  .passo { padding: 72px 0 0; }
  .passo h3 { padding-top: 0; font-size: 1.25rem; }

  .grid-eventos { gap: 32px 24px; }
  .tile-nome { font-size: 1.25rem; }

  .galeria { gap: 16px; }

  /* FAQ: título à esquerda, acordeão à direita */
  .grid-faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
  .grid-faq .secao-cabecalho { margin: 0; position: sticky; top: 110px; }

  .cta-final { padding: 120px 0; text-align: center; }
  .cta-final .lead { margin-inline: auto; }

  .rodape-interno { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; }
  .rodape-copy { width: 100%; text-align: center; }
}

/* ---------- Hover: só em dispositivos com mouse ---------- */
@media (hover: hover) and (min-width: 1024px) {
  .btn-primario:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #fff, 0 12px 36px rgba(110, 168, 255, .65); }
  .btn-secundario:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
  .btn-escuro:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(3, 6, 58, .4); }
  .card-combo:hover {
    transform: translateY(-6px);
    border-color: rgba(110, 168, 255, .6);
    box-shadow: 0 24px 60px rgba(110, 168, 255, .22);
  }
  .tile-evento:hover .tile-foto { border-color: rgba(110, 168, 255, .6); }
  .tile-evento:hover img { transform: scale(1.06); }
  .galeria .midia img { transition: transform .5s ease; }
  .galeria .midia:hover img { transform: scale(1.04); }
  .rodape-links a:hover { color: var(--branco); }
}

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .video-som, .barra-fixa.barra-girou .icone-whats { animation: none; }
}

/* =========================================================
   PÁGINA DE TEXTO (privacidade.html)
   ========================================================= */
body.pagina-texto { padding-bottom: 0; }   /* sem barra fixa nesta página */
.topo-texto { border-bottom: 1px solid var(--linha); background: var(--navy-950); }
.topo-texto-interno { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.pagina-texto .pill-marca { min-height: 44px; }

.texto-legal { max-width: 760px; padding-top: 40px; padding-bottom: 64px; }
.texto-legal .titulo-secao { margin-bottom: 8px; }
.texto-atualizacao { font-size: .85rem; color: var(--texto-suave); margin-bottom: 24px; }
.texto-resumo {
  padding: 18px 20px;
  margin-bottom: 8px;
  border-radius: var(--raio);
  border: 1px solid rgba(110, 168, 255, .45);
  background: rgba(110, 168, 255, .08);
  box-shadow: inset 0 0 24px rgba(110, 168, 255, .1);
}
.texto-legal section { padding-top: 28px; }
.texto-legal h2 { font-size: 1.2rem; font-weight: 900; letter-spacing: -.01em; margin-bottom: 10px; }
.texto-legal p { color: var(--texto-suave); margin-bottom: 12px; }
.texto-legal p strong, .texto-legal li strong { color: var(--branco); }
.texto-legal ul { display: grid; gap: 8px; margin: 0 0 12px; }
.texto-legal li { position: relative; padding-left: 20px; color: var(--texto-suave); }
.texto-legal li::before {
  content: "";
  position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--azul-brilho);
  box-shadow: 0 0 8px rgba(110, 168, 255, .8);
}
.texto-legal a:not(.btn) { color: var(--branco); text-underline-offset: 3px; }
.texto-acao { margin: 20px 0; }
.texto-acao .btn { width: 100%; max-width: 440px; }

@media (min-width: 1024px) {
  .texto-legal { padding-top: 64px; padding-bottom: 96px; }
}

/* =========================================================
   QUIZ (Fase 2)
   Mobile: overlay em tela cheia. Tablet/desktop: janela centralizada
   com fundo desfocado.
   ========================================================= */

/* Página travada enquanto o quiz está aberto (técnica que funciona no iOS) */
html.quiz-aberto-pagina body { position: fixed; left: 0; right: 0; overflow: hidden; }
html.quiz-aberto-pagina .barra-fixa { display: none; }

.quiz { position: fixed; inset: 0; z-index: 100; display: flex; }
/* Honeypot anti-spam: fora da tela (não usar display:none, que alguns robôs detectam) */
.quiz-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.quiz[hidden] { display: none; }

.quiz-fundo {
  position: absolute; inset: 0;
  background: rgba(2, 4, 39, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .25s ease;
}

.quiz-janela {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(110, 168, 255, .22), transparent 55%),
    var(--navy-900);
  outline: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .25s ease, transform .25s ease;
}
.quiz.quiz-aberto .quiz-fundo,
.quiz.quiz-aberto .quiz-janela { opacity: 1; transform: none; }

/* Topo: voltar · progresso · fechar */
.quiz-topo { display: flex; align-items: center; gap: 12px; padding: 12px 14px 6px; }
.quiz-botao-icone {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: rgba(255, 255, 255, .06);
  transition: background .2s ease, border-color .2s ease;
}
.quiz-botao-icone svg { width: 22px; height: 22px; }
.quiz-invisivel { visibility: hidden; }
.quiz-progresso { flex: 1; }
.quiz-progresso-texto {
  display: block;
  margin-bottom: 7px;
  text-align: center;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.quiz-barra { height: 6px; border-radius: var(--raio-pill); background: rgba(255, 255, 255, .12); overflow: hidden; }
.quiz-barra-preenchida {
  width: 25%; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--azul-brilho), var(--branco));
  box-shadow: 0 0 12px rgba(110, 168, 255, .8);
  transition: width .35s ease;
}

/* Corpo com rolagem própria */
/* min-height: 0 deixa o corpo encolher dentro da janela (senão o botão fixo
   do resultado fica no meio da janela no desktop) */
.quiz-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 20px 28px;
}
.quiz-entra-frente { animation: quizEntraFrente .24s ease both; }
.quiz-entra-tras { animation: quizEntraTras .24s ease both; }
@keyframes quizEntraFrente { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes quizEntraTras { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.quiz-pergunta {
  margin: 14px 0 6px;
  font-size: clamp(1.55rem, 7vw, 2rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  outline: none;
}
.quiz-ajuda { color: var(--texto-suave); font-size: .92rem; }

/* Opções: botões grandes de um toque. No celular, lista (uma opção por linha,
   com a seta à direita); a partir de 768px, as perguntas curtas usam 2 colunas. */
.quiz-opcoes { display: grid; gap: 10px; margin-top: 22px; }
.quiz-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .2s ease;
}
.quiz-opcao .icone { opacity: .6; }
.quiz-opcao:active { transform: scale(.98); }
.quiz-opcao[aria-pressed="true"] {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--navy-900);
  box-shadow: 0 0 24px rgba(110, 168, 255, .55);
}
.quiz-opcao[aria-pressed="true"] .icone { opacity: 1; }
.quiz-opcao-larga { grid-column: 1 / -1; }

/* Imperatriz em destaque como primeira opção */
.quiz-opcao-destaque {
  grid-column: 1 / -1;
  min-height: 78px;
  font-size: 1.2rem;
  font-weight: 900;
  border-color: rgba(110, 168, 255, .7);
  background: linear-gradient(135deg, rgba(110, 168, 255, .24), rgba(255, 255, 255, .05));
  box-shadow: var(--glow);
}
.quiz-opcao-destaque small {
  display: block;
  margin-bottom: 2px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul-claro);
}
.quiz-opcao-destaque[aria-pressed="true"] small { color: var(--navy-700); }

/* Campo "Outra cidade da região" */
.quiz-outra {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  border: 1.5px solid rgba(110, 168, 255, .6);
  background: rgba(255, 255, 255, .05);
}
.quiz-outra label { font-weight: 800; }
.quiz-outra input {
  min-height: 54px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: var(--branco);
  font: 600 16px var(--fonte-texto);   /* 16px evita zoom automático no iOS */
}
.quiz-outra input::placeholder { color: rgba(255, 255, 255, .45); }
.quiz-outra input:focus { outline: none; border-color: var(--azul-brilho); box-shadow: var(--glow); }
.quiz-erro { font-size: .85rem; font-weight: 600; color: var(--azul-claro); }

/* Resultado: o nome dos produtos é o título; as fotos vêm grandes logo abaixo */
.quiz-resultado-titulo {
  margin: 14px 0 18px;
  font-size: clamp(1.6rem, 7.4vw, 2.1rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
  outline: none;
}
.quiz-resultado-titulo span {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--texto-suave);
}

/* Fotos grandes; nome e descrição logo abaixo, sem cobrir a imagem */
.quiz-equipamentos { display: grid; gap: 12px; }
.quiz-equipamentos-dois { grid-template-columns: 1fr 1fr; }
.quiz-equipamento { margin: 0; }
.quiz-equipamento .midia { aspect-ratio: 4 / 5; }
/* as fotos são verticais: o corte guarda a parte de cima (rosto) */
.quiz-equipamento img { object-position: 50% 20%; }
/* na foto da 360 a plataforma fica embaixo: o corte sai do topo (folhagem) */
.quiz-equipamento-p360 img { object-position: 50% 100%; }
.quiz-equipamento figcaption { display: grid; gap: 2px; margin-top: 10px; }
.quiz-equipamento strong { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.quiz-equipamento span { font-size: .8rem; line-height: 1.35; color: var(--texto-suave); }
.quiz-motivo { margin: 14px 0 18px; font-size: .95rem; line-height: 1.5; color: var(--texto-suave); }

/* O que vai na mensagem do WhatsApp */
.quiz-resumo {
  padding: 14px 16px 16px;
  border-radius: 16px;
  border: 1px solid var(--linha);
  background: rgba(255, 255, 255, .04);
}
.quiz-resumo-titulo { margin-bottom: 10px; font-size: .85rem; font-weight: 700; color: var(--texto-suave); }
.quiz-resumo dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.quiz-resumo dt { font-size: .75rem; font-weight: 600; color: var(--texto-suave); }
.quiz-resumo dd { margin: 2px 0 0; font-size: .95rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.quiz-resumo-codigo { letter-spacing: .06em; }

/* Aviso + botão do WhatsApp presos no rodapé da área rolável.
   bottom negativo = padding de baixo do .quiz-corpo: encosta na borda e nada
   aparece por baixo do botão */
.quiz-acao-final {
  position: sticky;
  bottom: -28px;
  z-index: 2;
  margin: 12px -20px 0;
  padding: 10px 20px 12px;
  background: var(--navy-900);
}
/* esmaece o conteúdo que rola por baixo, sem sobrepor texto */
.quiz-acao-final::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -24px;
  height: 24px;
  background: linear-gradient(180deg, rgba(3, 6, 58, 0), var(--navy-900));
  pointer-events: none;
}
.quiz-rotulo-longo { display: none; }
/* Nome opcional, logo acima do aviso e do botão */
.quiz-nome { display: grid; gap: 6px; margin-bottom: 10px; }
.quiz-nome label { font-size: .875rem; font-weight: 700; }
.quiz-nome label span { font-weight: 500; color: var(--texto-suave); }
.quiz-nome input {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: var(--branco);
  font: 600 16px var(--fonte-texto);   /* 16px evita zoom automático no iOS */
}
.quiz-nome input::placeholder { color: rgba(255, 255, 255, .45); }
.quiz-nome input:focus { outline: none; border-color: var(--azul-brilho); box-shadow: var(--glow); }
.quiz-privacidade {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--texto-suave);
}
.quiz-privacidade .icone { margin-top: 1px; color: var(--azul-brilho); }
.quiz-privacidade a { color: var(--branco); }
.quiz-consentimento input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--azul-brilho); }
.quiz-whatsapp:disabled { opacity: .55; cursor: not-allowed; }
.quiz-refazer {
  display: block;
  min-height: 44px;
  margin: 4px auto 0;
  padding: 8px 16px;
  border: 0;
  background: none;
  font-size: .85rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tablet e desktop: janela centralizada com fundo desfocado */
@media (min-width: 768px) {
  .quiz { align-items: center; justify-content: center; padding: 24px; }
  .quiz-janela {
    width: min(580px, 100%);
    height: auto;
    max-height: min(780px, calc(100vh - 48px));
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 40px 120px rgba(0, 0, 0, .55), 0 0 70px rgba(110, 168, 255, .2);
    transform: translateY(16px) scale(.98);
    padding: 0;
  }
  .quiz-topo { padding: 18px 20px 6px; }
  .quiz-corpo { padding: 10px 32px 32px; }
  .quiz-opcoes { gap: 12px; }
  .quiz-opcao { min-height: 64px; }
  .quiz-opcoes-2 { grid-template-columns: 1fr 1fr; }
  /* na grade, a seta fica só nas opções largas (Imperatriz e "Outra cidade") */
  .quiz-opcoes-2 .quiz-opcao:not(.quiz-opcao-destaque):not(.quiz-opcao-larga) .icone { display: none; }
  .quiz-acao-final { bottom: -32px; margin: 12px -32px 0; padding: 10px 32px 12px; }
  .quiz-rotulo-curto { display: none; }
  .quiz-rotulo-longo { display: inline; }
}

@media (hover: hover) and (min-width: 768px) {
  .quiz-opcao:hover { border-color: rgba(110, 168, 255, .75); background: rgba(110, 168, 255, .12); }
  .quiz-opcao[aria-pressed="true"]:hover { background: var(--branco); }
  .quiz-botao-icone:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
  .quiz-refazer:hover { color: var(--branco); }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-entra-frente, .quiz-entra-tras { animation: none; }
}