/* ================================================================
   SONDAGEM ESTICA 2027 — CSS dedicado (Caderno Técnico v1.1, cap. 6.2/10/11)
   Isolado em arquivo próprio para não inflar styles.css e para poder ser
   removido/desativado sem tocar no restante do site (rollback simples).
   ================================================================ */

.survey2027 { padding: 4rem 0; }

/* HOTFIX (homologação) — o atributo HTML [hidden] estava sendo sobrescrito
   pela regra .btn { display: inline-flex } (styles.css), fazendo "Voltar" e
   "Enviar resposta" permanecerem visíveis/clicáveis em etapas incorretas.
   Escopo restrito a esta seção para não afetar nenhum outro botão do site. */
#sondagem-2027 [hidden] {
  display: none !important;
}

/* Melhoria (21/08): destaque de entrada contínuo no banner da sondagem —
   halo dourado pulsante ao redor do card, mesmo padrão visual já usado no
   hero (.hero__next-edition / heroNextEditionGlow), para reforçar a chamada
   sem competir com o CTA "Entrar no radar". Wrapper próprio (em vez de
   aplicar direto no .survey2027__hero) porque o hero tem overflow:hidden
   (recorte da imagem de fundo) — o glow ficaria cortado se ficasse no
   mesmo elemento. */
.survey2027__hero-glow {
  border-radius: var(--radius);
  animation: survey2027HeroGlow 2.6s ease-in-out infinite;
}
@keyframes survey2027HeroGlow {
  0%, 100% { box-shadow: 0 0 14px 0 rgba(212,172,78,0.10); }
  50%      { box-shadow: 0 0 26px 5px rgba(212,172,78,0.32); }
}
@media (prefers-reduced-motion: reduce) {
  .survey2027__hero-glow { animation: none; }
}

/* Banner 3:1 completo no desktop (imagem íntegra, nunca cortada). O texto
   ocupa apenas a metade esquerda — área deixada livre na composição
   aprovada — via largura máxima de ~52% da coluna, e um degradê azul-escuro
   localizado (não sobre o banner todo) garante contraste só onde há texto,
   preservando o mascote/balão totalmente visíveis à direita. */
.survey2027__hero {
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--branco);
  position: relative;
  background: #07152b url('/static/img/sondagem-2027/estica-sondagem-2027-banner.webp') center right / cover no-repeat;
  min-height: 320px;
  aspect-ratio: 3 / 1;
  /* HOTFIX (homologação, item 1 — overflow 768×1024): sem max-width, o
     aspect-ratio 3/1 combinado com min-height:320px força o navegador a
     alargar a caixa (ex.: 960px dentro de um container de 768px) em vez de
     comprimi-la, causando overflow horizontal na faixa 768–991px (acima do
     breakpoint mobile de 767px, onde o layout já muda de layout). Travar em
     100% do container resolve sem afetar desktop ≥992px, onde a caixa nunca
     chega a ultrapassar o container. */
  max-width: 100%;
}

/* Ajuste (21/08): destaque contínuo no banner da sondagem — mesmo padrão de
   "respiração" já usado em .hero__next-edition (glow + halo pulsante), para
   que o convite à sondagem chame atenção sem piscar/gritar. Roda em desktop
   e mobile igualmente; respeita prefers-reduced-motion abaixo. */
.survey2027__hero {
  animation: survey2027HeroGlow 2.6s ease-in-out infinite;
}
@keyframes survey2027HeroGlow {
  0%, 100% { box-shadow: 0 0 16px 0 rgba(212,172,78,0.10); }
  50%      { box-shadow: 0 0 28px 6px rgba(212,172,78,0.32); }
}

.survey2027__emblem {
  display: none; /* somente decorativo no desktop — banner já traz o emblema embutido */
}

.survey2027__copy {
  max-width: 52%;
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 5vw, 4rem);
  background: linear-gradient(90deg, rgba(7,21,43,0.9) 0%, rgba(7,21,43,0.8) 70%, rgba(7,21,43,0) 100%);
}
.survey2027__eyebrow {
  color: var(--dourado-claro);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
}
/* Sem serifa — sobrescreve a regra global h1..h4 { font-family: var(--font-serif) }
   propositalmente, para manter a tipografia sem serifa adotada pelo restante
   do site nesta seção. */
.survey2027__copy h2 {
  font-family: var(--font-sans);
  color: var(--branco);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  margin-bottom: 0.75rem;
}
.survey2027__copy p { color: var(--branco-70); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; }

.survey2027__meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.survey2027__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dourado-claro);
  font-weight: 600;
  font-size: 0.85rem;
}
.survey2027__meta-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--dourado-claro);
}

.survey2027__microtexto {
  display: block;
  margin-top: 0.85rem;
  color: var(--branco-70);
  font-size: 0.75rem;
  line-height: 1.5;
}

.survey2027__cta {
  min-height: 48px;
  min-width: 44px;
  /* Ajuste (21/08): pulso contínuo no botão de CTA da sondagem, mesmo
     espírito do halo de .hero__next-edition — chama atenção sem piscar. */
  position: relative;
  animation: survey2027CtaPulse 2.2s ease-in-out infinite;
}
@keyframes survey2027CtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,172,78,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(212,172,78,0); }
}

/* ── Painel do formulário ── */
.survey2027__panel {
  margin-top: 1.5rem;
  padding: clamp(1.25rem, 4vw, 2.75rem);
  border-radius: var(--radius);
  background: var(--preto-card);
  border: 1px solid var(--borda);
  box-shadow: 0 16px 45px rgba(0,0,0,0.35);
}
.survey2027__panel h3 { color: var(--dourado); margin-bottom: 0.25rem; }
.survey2027__panel h3:focus-visible { outline: none; } /* recebe foco programático, sem ring desnecessário */

.survey2027__progress {
  color: var(--branco-40);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
}

/* HOTFIX (homologação) — reset do fieldset nativo para os novos fieldsets
   por grupo de alternativas (item 4 do hotfix) não introduzirem borda/padding
   padrão do navegador; aplicado também ao wrapper de etapa para manter a
   aparência idêntica em todos os casos (nenhuma identidade visual alterada). */
.survey2027__step,
.survey2027__group {
  border: 0;
  margin: 0;
  padding: 0;
}
.survey2027__group + .survey2027__group {
  margin-top: 1.75rem;
}

.survey2027__step legend,
.survey2027__group legend {
  color: var(--branco);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.4;
  margin-bottom: 0.9rem;
  padding: 0;
  border: 0;
}

.survey2027__options { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.5rem; }
.survey2027__options--checkbox { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.survey2027__radio,
.survey2027__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  min-height: 44px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  color: var(--branco-70);
  font-size: 0.88rem;
  line-height: 1.45;
  cursor: pointer;
  transition: var(--transition);
}
.survey2027__radio:hover,
.survey2027__checkbox:hover { border-color: var(--dourado); background: var(--dourado-suave); }
.survey2027__radio input,
.survey2027__checkbox input {
  margin-top: 2px;
  width: 20px;
  height: 20px;
  accent-color: var(--dourado);
  flex-shrink: 0;
}
.survey2027__radio a { color: var(--dourado-claro); text-decoration: underline; }

.survey2027__scale { margin-bottom: 0.5rem; }
.survey2027__scale-label { display: block; color: var(--branco-40); font-size: 0.78rem; margin-bottom: 0.4rem; }
.survey2027__scale-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.survey2027__scale-item {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  color: var(--branco-70);
  cursor: pointer;
  transition: var(--transition);
}
.survey2027__scale-item:hover { border-color: var(--dourado); }
.survey2027__scale-item input { position: absolute; opacity: 0; width: 44px; height: 44px; cursor: pointer; margin: 0; }
.survey2027__scale-item:has(input:checked) { background: var(--dourado); border-color: var(--dourado); color: var(--preto); font-weight: 700; }

.survey2027__conditional { margin-top: 1rem; padding: 1rem; background: rgba(255,255,255,0.03); border-radius: var(--radius-sm); }
.survey2027__conditional label { display: block; font-size: 0.82rem; color: var(--cinza); margin-bottom: 0.4rem; }
.survey2027__conditional-field { margin-bottom: 1rem; }
.survey2027__conditional input,
.survey2027__step input[type="text"],
.survey2027__step input[type="tel"],
.survey2027__step input[type="email"],
.survey2027__step textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background: var(--preto);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  color: var(--branco);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}
.survey2027__step textarea { resize: vertical; min-height: 90px; }

.survey2027__hint { color: var(--branco-40); font-size: 0.78rem; margin: 0.4rem 0 0.75rem; }
.survey2027__optional { color: var(--cinza); font-weight: 400; }
.survey2027__counter { display: block; text-align: right; color: var(--cinza); font-size: 0.72rem; margin-top: 0.25rem; }

.survey2027__field-error {
  color: #ff8080;
  font-size: 0.8rem;
  margin: 0.4rem 0 0.75rem;
}

.survey2027__errors {
  background: rgba(220,53,69,0.12);
  border: 1px solid rgba(220,53,69,0.35);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  color: #ff9d9d;
  font-size: 0.88rem;
}
.survey2027__errors ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }

.survey2027__nav {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.survey2027__nav .btn { min-height: 48px; min-width: 44px; }

.survey2027__success {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--teal-suave);
  border-radius: var(--radius);
  border: 1px solid var(--borda-teal);
}
.survey2027__success p { color: var(--branco-70); margin-top: 0.6rem; line-height: 1.5; }

.survey2027__status { min-height: 1.2rem; text-align: center; margin-top: 0.75rem; color: var(--branco-40); font-size: 0.82rem; }

/* ── Foco visível — WCAG AA (cap. 10) ── */
.survey2027 :is(input, select, textarea, button, a):focus-visible {
  outline: 3px solid var(--teal-claro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Mobile ≤767px (cap. 3.3 / B.2): NÃO comprimir o banner 3:1 — usar o
   emblema quadrado aprovado. Layout muda para coluna, fundo sólido, emblema
   visível centralizado acima do título. ── */
@media (max-width: 767px) {
  .survey2027 { padding: 2.5rem 0; }
  .survey2027__hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    min-height: auto;
    aspect-ratio: auto;
    padding: 1.75rem 1.25rem;
    background: linear-gradient(160deg, #07152b 0%, #0d0d14 100%);
  }
  /* Emblema quadrado no topo — NUNCA o banner horizontal comprimido/recortado
     (cap. 3.3 / B.2). Fica antes de tudo, pois é o primeiro elemento no DOM. */
  .survey2027__emblem {
    display: block;
    align-self: center;
    width: min(38vw, 150px);
    margin-bottom: 1.25rem;
  }
  .survey2027__copy {
    max-width: none;
    height: auto;
    padding: 0;
    background: none;
    text-align: center;
  }
  .survey2027__meta { align-items: center; }
  .survey2027__cta {
    width: 100%;
    justify-content: center;
    margin-top: 0.25rem;
  }
  .survey2027__microtexto { text-align: center; }
  .survey2027__panel { padding: 1.25rem 1rem; border-radius: 12px; }
  .survey2027__options--checkbox { grid-template-columns: 1fr; }
  .survey2027__nav { justify-content: stretch; }
  .survey2027__nav .btn { flex: 1; justify-content: center; }
}

@media (max-width: 360px) {
  .survey2027__hero { padding: 1.25rem 1rem; }
  .survey2027__copy h2 { font-size: 1.2rem; }
}

/* ── Movimento reduzido (cap. 3.3 / 10) ── */
@media (prefers-reduced-motion: reduce) {
  .survey2027 * { transition: none !important; scroll-behavior: auto !important; }
  .survey2027__hero,
  .survey2027__cta {
    animation: none !important;
  }
}