/**
 * Suhai Festival Interlagos — overrides da LP de captação.
 *
 * Carrega DEPOIS de main.css e cotacao-form-client.css. Tudo aqui é override
 * escopado em classes próprias (`hero--festival`, `navbar--logo-only`), para
 * que main.css continue sendo um snapshot intocado do tema.
 */

/* ── Cabeçalho ──────────────────────────────────────────────────────────────
 * A LP não tem navbar: o KV já carrega o logo da Suhai no canto superior
 * direito. O espaço de 32px entre o topo da página e a arte é o padding-top do
 * próprio .page-header (--container-padding), o mesmo que separava a pílula do
 * cabeçalho antes. Nada a declarar aqui.
 */

/* ── Contagem regressiva do fim da promoção. ────────────────────────────────
 * Referência de estrutura: o countdown da página do Suhai Festival Interlagos
 * (números à esquerda, bloco de destaque à direita). A paleta aqui é a da
 * marca: verde seguro no container em vez do preto genérico, verde essencial
 * no bloco da oferta.
 */
.countdown {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-lg);
  background-color: var(--color-brand-green-seguro);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.countdown__timer {
  /* Cresce para ocupar a área escura, para os números se distribuírem nela em
     vez de ficarem agrupados num canto (é a proporção da referência). */
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
}

.countdown__label {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-brand-green-essencial);
}

.countdown__units {
  display: flex;
  /* Agrupados à esquerda, sem esticar para preencher a caixa. */
  justify-content: flex-start;
  gap: var(--space-3xl);
}

/* Hora, minuto e segundo andam juntos, no formato de relógio com dois pontos.
   O dia fica de fora do grupo, porque é outra unidade de leitura. */
.countdown__clock {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.countdown__sep {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 2.75rem;
  line-height: 1.05;
  color: var(--color-neutral-600);
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.countdown__value {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 2.75rem;
  line-height: 1.05;
  color: var(--color-neutral-0);

  /* Dígitos de largura fixa: sem isso a faixa muda de tamanho a cada segundo,
     conforme os números trocam (o "1" é mais estreito que o "8"). */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width: 2ch;
}

.countdown__unit-label {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: .75rem;
  line-height: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
}

.countdown__offer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centralizado dentro do bloco, nos dois eixos. */
  align-items: center;
  text-align: center;
  /* Proporção da referência: cerca de um terço da faixa para a oferta. */
  flex: 0 0 380px;
  padding: var(--space-lg) var(--space-xl);
  background-color: var(--color-brand-green-essencial);
  color: var(--color-brand-green-seguro);
}

.countdown__offer-value {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 4.25rem;
  line-height: 1;
}

.countdown__offer-text {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.375rem;
}

/* Estado final: quando o prazo vence, os números saem de cena e entra a
   mensagem. Sem isso o padrão seria mostrar zeros ou números negativos. */
.countdown__ended {
  display: none;
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--color-neutral-0);
}

.countdown.is-encerrado .countdown__units { display: none; }
.countdown.is-encerrado .countdown__ended { display: block; }

/* O bloco verde também sai: anunciar "15% de desconto" ao lado de "a promoção
   foi encerrada" seria a faixa se contradizendo. */
.countdown.is-encerrado .countdown__offer { display: none; }
.countdown.is-encerrado .countdown__label { display: none; }

/* ── Diagramação da tarjeta no DESKTOP: colunas com divisórias. ─────────────
 * Variação D, aprovada no laboratório (_lab/variacoes-tarjeta.html).
 *
 * A área escura vira quatro células de largura igual separadas por linhas finas,
 * e os dois pontos saem porque as divisórias já cumprem esse papel. Isso resolve
 * o vazio de 437px que sobrava à direita na diagramação anterior.
 *
 * Está DENTRO de min-width: 769px de propósito. Na base, a borda entre células,
 * o `flex: 1` e o `display: none` dos dois pontos quebrariam a barra de pílulas
 * do mobile, que já foi aprovada e não muda.
 */
@media (min-width: 769px) {
  .countdown__timer {
    /* Sem padding à direita: a última célula encosta no bloco verde. */
    padding: 20px 0 20px var(--space-xl);
    gap: 12px;
  }

  .countdown__label { padding-right: var(--space-xl); }

  .countdown__units {
    justify-content: stretch;
    gap: 0;
  }

  .countdown__unit {
    flex: 1;
    align-items: center;
    padding: 4px 0;
    border-left: var(--border-thin) solid color-mix(in srgb, var(--color-neutral-0) 14%, transparent);
  }

  /* A primeira célula não tem divisória à esquerda. */
  .countdown__units > .countdown__unit:first-child { border-left: 0; }

  /* O relógio agrupa três das quatro células, então pesa 3 contra 1 do dia. */
  .countdown__clock {
    flex: 3;
    gap: 0;
    align-items: stretch;
  }

  /* As divisórias substituem os dois pontos. */
  .countdown__sep { display: none; }
}

/* Estes três existem no HTML mas só aparecem no mobile. Ficam declarados aqui,
   ANTES da media query, para que ela vença na cascata (mesma especificidade). */
.countdown__offer-short { display: none; }
.countdown__sep--dias { display: none; }
.countdown__unit-label--curto { display: none; }
.ff__enviar-rotulo--curto { display: none; }
.mobile-cta { display: none; }
.countdown__label--mobile { display: none; }

/* ── Halo pulsante do botão flutuante (aplicado só no mobile). ──────────────
 * Um anel verde escuro nasce na borda do botão e se dissipa para fora, a cada
 * 2s. É o vocabulário de "toque aqui" que o público já reconhece de aplicativo.
 *
 * Duas razões para ter escolhido box-shadow em vez de mover o botão:
 *   1. O botão não sai do lugar, então nunca cobre nem descobre conteúdo.
 *   2. O anel acompanha sozinho o border-radius real do botão.
 *
 * A cor sai do token da marca via color-mix, em vez de um rgba cravado.
 */
@keyframes cta-halo {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand-green-seguro) 32%, transparent);
  }
  70% {
    box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-brand-green-seguro) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand-green-seguro) 0%, transparent);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * MOBILE (até 768px). Tudo daqui para baixo é exclusivo do mobile: nenhuma
 * regra desta media query afeta o desktop.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Countdown vira barra fixa no topo, no desenho de pílulas. ─────────────
   * Variação aprovada no laboratório (_variacoes-countdown.html, opção 01):
   * cada número numa pastilha clara com rótulo miúdo, separados por dois
   * pontos, e a oferta numa pílula verde encostada à direita.
   */
  :root { --barra-countdown: 52px; }

  /* O invólucro sai do layout para não deixar um vão de 24px no lugar da faixa
     (o page-header é flex com gap). O countdown continua filho dele no DOM. */
  .hero-shell--countdown { display: contents; }

  .countdown {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    flex-direction: row;
    /* Pastilhas centradas na faixa, não esticadas de topo a base. */
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    min-height: var(--barra-countdown);
    /* Mesmo recuo lateral do hero e do conteúdo (--space-lg), para as pastilhas
       e a pílula da oferta nascerem e terminarem na largura da imagem. */
    padding: 0 var(--space-lg);
    border-radius: 0;
  }

  /* O header encosta direto no hero, sem margem extra, para eliminar a faixa cinza. */
  .page-header {
    padding-top: var(--barra-countdown) !important;
    padding-bottom: 0 !important;
    background-color: transparent !important;
  }

  /* A proporção do hero no mobile fica declarada junto com a do desktop, mais
     abaixo neste arquivo, para as duas serem lidas em conjunto. */

  .countdown__timer {
    flex-direction: row;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    gap: 0;
    padding: 0;
  }

  /* A chamada "o desconto acaba em" não entra na faixa. O equivalente para
     leitor de tela continua no HTML. */
  .countdown__label { display: none; }

  .countdown__label--mobile {
    display: block;
    color: var(--color-neutral-100);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    margin-right: 38px;
    text-transform: uppercase;
  }

  .countdown__units { align-items: center; gap: 4px; }
  .countdown__clock { align-items: center; gap: 4px; }

  /* Cada unidade vira pastilha clara. */
  .countdown__unit {
    align-items: center;
    min-width: 38px;
    padding: 4px 5px 3px;
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-md);
  }

  .countdown__value {
    font-size: 1.125rem;
    line-height: 1.15;
    /* Pastilha clara pede número escuro. */
    color: var(--color-brand-green-seguro);
  }

  /* Os rótulos voltam a aparecer, miúdos, dentro da pastilha. */
  .countdown__unit-label {
    display: block;
    font-size: .5rem;
    line-height: 1.1;
    letter-spacing: .02em;
    color: var(--color-neutral-600);
  }

  /* "Minutos" e "Segundos" por extenso alargavam as duas últimas pastilhas
     (53px contra 38px das outras). Aqui entram as versões curtas, e as quatro
     ficam do mesmo tamanho. Declarado depois da regra acima, de propósito. */
  .countdown__unit-label--longo { display: none; }
  .countdown__unit-label--curto { display: block; }

  .countdown__sep {
    font-size: .875rem;
    line-height: 1;
    color: var(--color-neutral-500);
  }

  .countdown__sep--dias { display: inline; }

  /* A oferta vira pílula verde, em vez do bloco de altura cheia do desktop. */
  .countdown__offer {
    display: none;
  }

  .countdown__offer-value { font-size: 1rem; line-height: 1.15; }
  .countdown__offer-text { display: none; }

  .countdown__offer-short {
    display: inline;
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: .625rem;
    line-height: 1.1;
  }

  /* No estado encerrado a barra vira uma linha só de aviso. */
  .countdown.is-encerrado .countdown__ended {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  /* ── Ordem das colunas: texto primeiro, formulário depois. ─────────────────
   * O tema inverte com `order:-1` para subir o formulário. Aqui o conteúdo da
   * promoção vem antes, e o botão flutuante leva até o formulário.
   */
  .grid-2 > .content-section__molecule:has(.content-section__slot--form) {
    order: 0;
  }

  /* ── Botão flutuante fixo no rodapé. ──────────────────────────────────────*/
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    /* Lateral reduzida para var(--space-sm) a pedido, para o botão ficar mais
       largo e acomodar o texto novo sem quebrar linha. Vertical segue --space-md. */
    padding: var(--space-md) var(--space-sm);
    background-color: var(--color-bg-subtle);
    box-shadow: 0 -2px 12px var(--overlay-dark-15);
  }

  .mobile-cta .btn {
    /* O tema limita o .btn com `max-width: fit-content`, e por isso o botão
       ficava com a largura do texto, encostado à esquerda da faixa. Liberando o
       limite ele ocupa a faixa inteira e o rótulo fica centralizado. */
    display: flex;
    width: 100%;
    max-width: none;
    justify-content: center;

    /* Halo pulsante a cada 2s (keyframes acima). Chama atenção sem deslocar o
       botão nem competir com o rótulo. */
    animation: cta-halo 2s ease-out infinite;
  }

  /* Botão do formulário: rótulo curto no mobile, para caber sem apertar.
     O botão flutuante mantém o texto longo, porque ele é o que vende. */
  .ff__enviar-rotulo--longo { display: none; }
  .ff__enviar-rotulo--curto { display: inline; }

  /* O rótulo inteiro num único filho. Sem isso, cada pedaço de texto e o span
     do 15% viravam itens de flex separados (itens de flex são blockificados) e
     a frase quebrava em quatro linhas. */
  .mobile-cta__rotulo {
    display: inline;
    white-space: nowrap;
  }

  /* O número é o que precisa saltar aos olhos no rótulo. */
  .mobile-cta__destaque {
    font-weight: var(--font-weight-bold);
    font-size: 1.125em;
  }

  /* O rodapé ganha respiro para o botão não cobrir o último conteúdo. */
  .page-footer {
    padding-bottom: calc(var(--space-md) * 2 + 48px + var(--space-lg));
  }
}

/* ── Alinhamento das duas colunas do miolo. ─────────────────────────────────
 * O tema centraliza o conteúdo da coluna verticalmente, o que fazia o texto
 * começar 115px abaixo do card do formulário. Alinhando ao topo e somando o
 * mesmo recuo que o slot do formulário já tem, os dois blocos arrancam juntos.
 */
@media (min-width: 769px) {
  /* O seletor do tema que centraliza é
     `.grid-2>.content-section__molecule:not(:has(.content-section__slot--image))`,
     com especificidade de três classes. Precisamos empatar e vir depois na
     cascata, senão a centralização continua vencendo. */
  .grid-2 > .content-section__molecule.content-section__molecule--top {
    justify-content: flex-start;
    padding-top: calc(var(--space-xl) + var(--space-2xl));
  }
}

/* ── Linha de condições da promoção. ────────────────────────────────────────
 * O tema tem .text-footnote para o tamanho, mas não tem utilitário de cor
 * secundária, então a cor vem daqui.
 */
.promo-conditions {
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Hero com o key visual do festival. ─────────────────────────────────────
 * O KV já carrega logo, lockup e headline embutidos, então o hero abandona a
 * altura fixa de 470px do tema e assume a proporção exata da arte: nada de
 * object-fit cortando o lockup ou a headline.
 */
.hero--festival {
  height: auto;
  min-height: 0;

  /* A largura vem do .hero-shell abaixo, que alinha todo filho dele com a caixa
     do conteúdo: título à esquerda e card do formulário à direita. */
}

/* A proporção acompanha a arte de cada largura: horizontal (1920x1080) no
 * desktop, vertical (1157x1653) no mobile. As duas ficam declaradas aqui, cada
 * uma dentro do seu breakpoint, para o resultado não depender da ordem das
 * regras no arquivo. */
@media (min-width: 769px) {
  .hero--festival { aspect-ratio: 1920 / 1080; }
}

@media (max-width: 768px) {
  /* Anulando os 420px de altura mínima do main.css e forçando a altura 
     exata para que a imagem 4:3 encolha a LP e não sofra cortes nas laterais */
  .hero--festival { 
    height: 75vw !important; 
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .hero--festival .hero__bg-image {
    object-position: center !important;
    object-fit: cover !important;
  }
}

/* Todo filho direto do invólucro nasce na mesma caixa do conteúdo. Vale para o
   hero e para a faixa de contagem regressiva. */
.hero-shell > * {
  width: 100%;
  max-width: calc(var(--container-max-width) - var(--space-lg) * 2);
  margin-inline: auto;
}

/* ── Realinhamento do hero com o conteúdo. ──────────────────────────────────
 * O hero mora dentro do .page-header, que usa --space-5xl (64px) de padding
 * horizontal, enquanto o conteúdo do main para na caixa interna do .container
 * (--container-max-width menos --space-lg de cada lado). Sem compensar, o hero
 * vaza para fora nas telas largas e fica estreito nas médias.
 *
 * O invólucro cancela o padding do header e reproduz a caixa do .container, aí
 * o max-width + margin auto do hero acima caem no lugar certo em toda largura.
 */
@media (min-width: 769px) {
  .hero-shell {
    margin-inline: calc(-1 * var(--space-5xl));
    padding-inline: var(--space-lg);
  }
  .hero-shell .hero__bg {
    border-radius: 16px;
    overflow: hidden;
  }
}

/* Em até 768px o .page-header usa --space-lg de padding. Para a hero ocupar
   a largura total (full-width) sem bordas laterais, quebramos esse padding. */
@media (max-width: 768px) {
  .hero-shell {
    margin-inline: calc(-1 * var(--space-lg)) !important;
    width: calc(100% + var(--space-lg) * 2) !important;
  }
  .hero-shell > * {
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  .hero-shell .hero__bg {
    border-radius: 0 !important;
  }
  .hero--with-background {
    border-radius: 0 !important;
  }
}

.hero--festival .hero__bg-image {
  /* O tema desloca para 76% para abrir espaço ao texto sobreposto. Aqui a arte
     ocupa o quadro inteiro, então volta ao centro. */
  object-position: center;
}

/* ── Rotação dos key visuals, estilo banner de e-commerce. ──────────────────
 * Os slides ficam empilhados no mesmo lugar e trocam por crossfade. O primeiro
 * já nasce visível pelo CSS, então se o JS não rodar a página não fica em
 * branco: ela só para de girar.
 */
.hero__carousel .hero__slide {
  opacity: 0;
  transition: opacity 700ms ease-in-out;
}

.hero__carousel .hero__slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* Sem animação: o primeiro slide fica fixo, sem transição. */
  .hero__carousel .hero__slide {
    transition: none;
  }

  /* O botão flutuante para de se mover. Declarado depois do bloco mobile, de
     propósito: mesma especificidade, então quem vem depois vence. */
  .mobile-cta .btn {
    animation: none;
  }
}

/* O canto arredondado grande é assinatura da marca, mas no bottom-right ele
   comeria a headline "A EXPERIÊNCIA MÁXIMA TÁ NO NOME". Movido para o
   bottom-left, onde só há asfalto. */
.hero--festival[data-radius-corner="bottom-left"] {
  --_r: calc(var(--self-height, 0px) / 3);
}

@media (max-width: 768px) {
  /* Mobile ainda usa o mesmo KV horizontal. A versão vertical entra depois. */
  .hero--festival[data-radius-corner="bottom-left"] {
    --_r: var(--radius-md);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * FORMULÁRIO REDUZIDO (nome, e-mail, telefone)
 * Substitui o formulário de 2 passos do tema. O CSS do antigo
 * (cotacao-form-client.css) saiu da página junto.
 * ════════════════════════════════════════════════════════════════════════════ */
.ff__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.ff__titulo {
  margin: 0;
  color: var(--color-brand-green-seguro);
}

.ff__apoio {
  margin: calc(-1 * var(--space-md)) 0 0;
  color: var(--color-text-secondary);
}

.ff__campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ff__input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-md);
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ff__input::placeholder { color: var(--color-text-disabled); }

.ff__input:focus-visible {
  outline: none;
  border-color: var(--color-brand-green-seguro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-green-essencial) 60%, transparent);
}

.ff__input--invalido {
  border-color: var(--color-error);
}

/* Vazio por padrão: só ocupa espaço quando há mensagem, para o formulário não
   nascer com buracos entre os campos. */
.ff__erro {
  margin: 0;
  font-family: var(--font-family);
  font-size: .875rem;
  line-height: 1.25rem;
  color: var(--color-error);
}
.ff__erro:empty { display: none; }

.ff__optin {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.ff__optin input { margin-top: 3px; flex-shrink: 0; }

.ff__optin label {
  font-family: var(--font-family);
  font-size: .875rem;
  line-height: 1.35;
  color: var(--color-text-secondary);
}

.ff__optin a { color: var(--color-brand-green-seguro); }

/* A restrição de estado fica junto do botão, que é onde a pessoa decide.
   Verde escuro com texto branco: o mesmo par que a tarjeta do cronômetro usa,
   então a peça não inventa cor nova na página. */
.ff__sp {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: .875rem;
  line-height: 1.25rem;
  text-align: center;
  color: var(--color-neutral-0);
  background-color: var(--color-brand-green-seguro);
  border-radius: var(--radius-sm);
}

.ff__enviar {
  display: flex;
  width: 100%;
  max-width: none;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
}

/* Seta como sinal de ação. Reaproveita a convenção que já existe no tema em
   `.content-section__cta-list .btn::after`: o SVG entra como MÁSCARA CSS e a cor
   vem de `currentColor`, então a seta acompanha sozinha a cor do texto do botão,
   sem precisar de uma segunda versão do arquivo. */
.ff__enviar::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url(../images/icon-arrow.svg) no-repeat center / contain;
  mask: url(../images/icon-arrow.svg) no-repeat center / contain;
}

.ff__legal-text {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-family);
  font-size: .625rem;
  line-height: 1.4;
  color: var(--color-neutral-600);
  text-align: justify;
}

.ff__status {
  margin: 0;
  font-family: var(--font-family);
  font-size: .9375rem;
  line-height: 1.4;
}
.ff__status:empty { display: none; }
.ff__status--ok { color: var(--color-success-dark); }
.ff__status--erro { color: var(--color-error); }

/* Honeypot: fora da tela, mas não display:none, senão robô descarta. */
.ff__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
 * SEÇÃO "COMO CONTRATAR"
 * Desktop: três cards em grid, conteúdo sempre visível.
 * Mobile: accordion estilo "caixinhas" (igual Londres Gym).
 * ════════════════════════════════════════════════════════════════════════════ */
.como-contratar {
  padding: var(--space-5xl) 0;
  background-color: var(--color-bg-subtle);
  /* O .page-body do tema usa gap: var(--space-section-padding) entre os filhos,
     e o .page-footer tem margin-top: var(--space-section-padding). Ambos criam
     faixas brancas. Esta seção está FORA do main, então só o margin do footer
     importava — mas o margin-top aqui garante que não haja gap acima também. */
  margin-top: 0;
  margin-bottom: 0;
}

.como-contratar__header {
  margin-bottom: var(--space-3xl);
}

.como-contratar__title {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-primary);
}

.como-contratar__subtitle {
  margin: 0;
  color: var(--color-text-secondary);
}

.como-contratar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.como-contratar__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-2xl);
  background-color: var(--color-bg-primary);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.como-contratar__number {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-brand-green-essencial);
  opacity: .35;
}

.como-contratar__card-title {
  margin: 0;
  color: var(--color-text-primary);
}

.como-contratar__card-desc {
  margin: 0;
  color: var(--color-text-secondary);
}

/* Desktop: header inline, body sempre visível, seta oculta. */
.como-contratar__card-header {
  display: contents;
}

.como-contratar__card-header-text {
  display: contents;
}

.como-contratar__arrow {
  display: none;
}

.como-contratar__card-body {
  display: contents;
}

.como-contratar__card-body-inner {
  display: contents;
}

/* ── Mobile: accordion "caixinhas" ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .como-contratar {
    padding: 32px 0;
    margin-top: 24px;
  }

  .como-contratar__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .como-contratar__card {
    padding: 0;
    gap: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-left: 4px solid #a3c23c;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    overflow: hidden;
    cursor: pointer;
    transition: background .2s, border-color .2s;
  }

  .como-contratar__card.active {
    border-color: #d0d0d0;
    border-left-color: #a3c23c;
  }

  /* Header: linha com numero + titulo + seta */
  .como-contratar__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
  }

  .como-contratar__card-header-text {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .como-contratar__number {
    font-size: 1rem;
    opacity: 1;
  }

  .como-contratar__arrow {
    display: block;
    width: 18px;
    height: 18px;
    stroke: #999;
    flex-shrink: 0;
    transition: transform .3s, stroke .3s;
  }

  .como-contratar__card.active .como-contratar__arrow {
    stroke: #a3c23c;
    transform: rotate(90deg);
  }

  /* Body: expand/collapse */
  .como-contratar__card-body {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }

  .como-contratar__card-body-inner {
    display: block;
    padding: 0 18px 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * RODAPÉ ENXUTO
 * O rodapé do site inteiro saiu: era herança da página de cotação e só oferecia
 * saída para quem devia preencher o formulário. Ficou o mínimo legal.
 * ════════════════════════════════════════════════════════════════════════════ */
.rodape-festival {
  padding-block: var(--space-xl);
  background-color: var(--color-bg-subtle);
}

@media (max-width: 768px) {
  .rodape-festival {
    padding-bottom: calc(var(--space-xl) + 100px); /* Espaço extra para o botão flutuante */
  }
}

.rodape-festival__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  font-family: var(--font-family);
  font-size: .8125rem;
  line-height: 1.25rem;
  color: var(--color-text-secondary);
}

.rodape-festival__base a { color: var(--color-brand-green-seguro); }