/* ============================================================
   SECTIONS.CSS  —  Version 2
   Regras das SEÇÕES NOVAS apenas. styles.css permanece intocado.

   Convenção de nomes: cada seção usa o prefixo do seu id.
     #faq           → .faq-*

   Cada bloco traz suas próprias media queries logo abaixo dele,
   e não no fim do arquivo — assim uma seção nova nunca precisa
   que outra seja editada.
   Breakpoints herdados do styles.css: 1024 · 768 · 480
   ============================================================ */

:root{
  --sx-tint:#F8F6FB;     /* fundo claro alternado das seções novas */
  --sx-line:#EAE4F2;     /* borda sutil */
  /* A cor de destaque da marca em texto pequeno (até 18px) não chega ao
     contraste mínimo de 4,5:1. Escurecida em 24%, passa com folga nos dois
     sites: OpenCON 5,1:1 no branco e 4,75:1 no pior fundo dos cards do hero
     (branco translúcido sobre o brilho roxo); OpenMEI 5,3:1. */
  --sx-acento-texto:color-mix(in srgb,var(--brand-btn) 76%,#000);
}

/* Container compartilhado — espelha .fc-in / .sum-in do styles.css */
.sx-in{max-width:1440px;width:100%;margin:0 auto;padding:0 120px}
@media (max-width:1024px){ .sx-in{padding-left:48px;padding-right:48px} }
@media (max-width:768px){  .sx-in{padding-left:24px;padding-right:24px} }
@media (max-width:480px){  .sx-in{padding-left:16px;padding-right:16px} }

/* Cabeçalho padrão das seções novas (reusa .sec-title/.sec-sub) */
.sx-head{text-align:center;max-width:720px;margin:0 auto 56px}
.sx-eyebrow{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sx-acento-texto);margin-bottom:16px}
@media (max-width:768px){ .sx-head{margin-bottom:36px} }
/* Distribui o texto entre as linhas para não sobrar uma palavra sozinha */
.sx-head .sec-title,.sx-head .sec-sub{text-wrap:balance}


/* ========================
   AJUSTE EM SEÇÃO EXISTENTE — CASOS  (#casos)
   ======================== */
/* Mesmo cinza da seção 2. A regra original (.social-proof) fica no
   styles.css intocada; o id vence pela especificidade. Os cards já
   são brancos, então se destacam sobre o fundo. */
#casos{background:var(--sx-tint)}


/* ========================
   SESSÃO — FAQ  (#faq)
   ======================== */
#faq{background:#fff;padding:var(--section-py) 0}
/* Lista em linhas: sem caixas, sem fundo — só um filete separando cada item. */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--sx-line)}
/* Entrada: o .reveal fica na lista, não em cada item, então a linha do
   topo aparece junto com as perguntas. Dentro dela as perguntas surgem
   em sequência só com opacidade — as linhas separadoras não deslizam. */
.faq-list.reveal{transform:translateY(12px)}
.faq-list.reveal.in{transform:none}
.faq-list.in .faq-item{animation:faqItemIn .6s ease both}
.faq-list.in .faq-item:nth-child(2){animation-delay:.06s}
.faq-list.in .faq-item:nth-child(3){animation-delay:.12s}
.faq-list.in .faq-item:nth-child(4){animation-delay:.18s}
.faq-list.in .faq-item:nth-child(5){animation-delay:.24s}
.faq-list.in .faq-item:nth-child(6){animation-delay:.30s}
.faq-list.in .faq-item:nth-child(7){animation-delay:.36s}
.faq-list.in .faq-item:nth-child(8){animation-delay:.42s}
@keyframes faqItemIn{from{opacity:0}to{opacity:1}}
.faq-item{border-bottom:1px solid var(--sx-line)}
.faq-q{list-style:none;cursor:pointer;padding:26px 2px;display:flex;align-items:flex-start;
  gap:16px;font-size:17px;font-weight:600;line-height:1.45;color:var(--t1)}
.faq-q::-webkit-details-marker{display:none}
.faq-q:focus-visible{outline:3px solid var(--brand-50);outline-offset:3px;border-radius:6px}
.faq-n{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;color:var(--sx-acento-texto);
  flex:0 0 auto;padding-top:4px}
.faq-ico{margin-left:auto;flex:0 0 auto;width:18px;height:18px;position:relative;
  transition:transform .25s cubic-bezier(.22,1,.36,1)}
.faq-ico::before,.faq-ico::after{content:'';position:absolute;background:#9AA1A6;
  border-radius:2px;left:50%;top:50%;transition:background .2s ease}
.faq-ico::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq-ico::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq-item[open] .faq-ico{transform:rotate(45deg)}
/* Ao fechar, o item continua [open] até a altura terminar de animar
   (faq.js); o ícone não espera por isso. */
.faq-item.is-closing .faq-ico{transform:none}
/* Feedback de hover só no ícone — o título não muda de cor */
.faq-q:hover .faq-ico::before,.faq-q:hover .faq-ico::after{background:var(--t2)}
/* Resposta ocupa a linha inteira, de ponta a ponta — sem recuo nem
   max-width. (Para alinhar com o texto da pergunta em vez de preencher,
   trocar o padding-left por 42px.) */
.faq-a{padding:0 2px 30px 2px;font-size:15px;line-height:1.75;color:var(--t3);
  transition:opacity .18s ease}
.faq-item.is-opening .faq-a{animation:faqAnswerIn .32s cubic-bezier(.22,1,.36,1) both}
.faq-item.is-closing .faq-a{opacity:0}
@keyframes faqAnswerIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:768px){
  #faq{padding:64px 0}
  .faq-q{padding:20px 0;font-size:15px;gap:12px}
  .faq-a{padding:0 0 22px 0;font-size:14.5px}
}


/* ========================
   COMPONENTE — BOTÃO CTA (WhatsApp)
   ======================== */
/* Sem transform nem filter no hover: o botão do hero recebe a animação de
   entrada do motion.css (fill:both), que sobrepõe essas duas propriedades.
   O hover mexe só em cor e sombra. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f);font-size:15px;font-weight:600;line-height:1;white-space:nowrap;
  padding:16px 26px;border-radius:999px;text-decoration:none;
  transition:background-color .2s ease,box-shadow .2s ease,color .2s ease}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(23,23,23,.12)}
.btn-primary:hover{background:color-mix(in srgb,var(--brand) 82%,#000);box-shadow:0 10px 24px rgba(23,23,23,.18)}
.btn-light{background:#fff;color:var(--brand);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn-light:hover{background:#F2EEF7;box-shadow:0 10px 24px rgba(0,0,0,.24)}
.btn-light:focus-visible{outline-color:#fff}

/* Ritmo do hero em três grupos — logo | título + descrição | botão.
   32px entre grupos, 16px dentro do grupo. O styles.css segue intocado;
   estas regras vêm depois e prevalecem. */
.hero-logo{margin-bottom:32px}
.hero-logo img{width:154px;height:auto}   /* 10% maior que os 140px originais */
.hero-h1{margin-bottom:16px}
.hero-sub{margin-bottom:32px}
.hero-cta{margin-bottom:0}

/* Selo "Solução 100% White Label" embaixo do telefone. Fica dentro de
   .hero-phone-wrap, então acompanha a altura do aparelho em todo
   breakpoint e entra junto com a animação dele, sem animação própria.
   No desktop é absoluto para não
   mexer na posição do telefone nem dos boxes. Centralizado sem
   transform, que a animação de entrada sobrescreveria. */
.hero-phone-wrap .hero-badge{position:absolute;top:calc(100% + 24px);left:0;right:0;
  margin:0 auto;white-space:nowrap;text-align:center}
@media (max-width:768px){
  /* No celular o selo entra no fluxo. Ele é mais largo que o telefone,
     então a imagem precisa se centralizar sozinha dentro do bloco; e a
     margem de baixo compensa o translateY(32px) do .hero-phone-wrap,
     que senão faria o selo encostar na seção seguinte. */
  .hero-phone-wrap .hero-phone-img{margin-left:auto;margin-right:auto}
  .hero-phone-wrap .hero-badge{position:static;margin:24px auto 24px}
}
.cta-final-btn{margin-bottom:12px}
/* Rodapé com a mesma largura máxima do conteúdo das seções: 1200px, que é
   o container de 1440px menos 120px de cada lado. Abaixo de 1440px de tela
   ele já coincidia; acima disso se esticava até as bordas. */
.cta-footer{max-width:1200px;margin-left:auto;margin-right:auto}
/* Botão centralizado no fim de uma seção */
.sec-cta{display:flex;justify-content:center;margin-top:56px}
@media (max-width:768px){ .sec-cta{margin-top:36px} }
@media (max-width:480px){
  .btn{width:100%;padding:16px 20px}
}

/* Sem JS as seções novas já aparecem (só usam .reveal, coberto pelo
   <noscript> do index.html) e o acordeão segue funcionando: é <details>
   nativo, e o faq.js só acrescenta a animação de altura. */
@media (prefers-reduced-motion:reduce){
  .faq-ico{transition:none}
}


/* ========================
   DESEMPENHO
   ======================== */
/* Aqui havia content-visibility:auto nas seções longas, para o navegador
   adiar o layout delas. Foi removido: o contain-intrinsic-size é um
   palpite de altura em pixels, e nenhum valor fixo serve para todas as
   larguras de tela — conforme as seções entravam, a altura real
   substituía o palpite, a página encolhia e a barra de rolagem saltava.
   Quem for reintroduzir precisa de uma altura por breakpoint, e ainda
   assim o primeiro giro de rolagem mexe na barra. */


/* ========================
   COMPONENTE — BOTÃO FLUTUANTE DO WHATSAPP
   ======================== */
/* Fixo no canto inferior direito, acompanha a rolagem. O verde é o da
   marca do WhatsApp; o ícone é desenhado em SVG no próprio HTML, sem
   arquivo extra para baixar. A oscilação vertical fica no motion.css. */
.wa-float{--wa-tam:70px;
  position:fixed;right:40px;bottom:40px;z-index:60;
  width:var(--wa-tam);height:var(--wa-tam);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:background-color .2s ease,box-shadow .2s ease}
.wa-float svg{width:38px;height:38px;fill:#fff}
.wa-float:hover{background:#1DAF52;box-shadow:0 10px 26px rgba(0,0,0,.28)}
/* Foco por teclado: o mesmo roxo do foco global, mas mantendo o círculo —
   a regra global (a:focus-visible) arredonda em 6px e venceria o 50%. */
.wa-float:focus-visible{outline:3px solid var(--brand-50);outline-offset:3px;border-radius:50%}

/* Balão "Fale conosco" acima do botão, no hover e também no foco por
   teclado. É aria-hidden: quem usa leitor de tela já ouve o aria-label
   do link, e o texto repetido só atrapalharia.
   Centralizado sobre o botão: ele é mais largo, e é por isso que o
   botão fica a 40px das bordas — a menos que isso, o balão passaria da
   borda da tela.
   Forma vinda do componente Tooltip do Figma (Open | Library, nó
   5207:10226): 8px/12px de respiro e sombra pequena
   0 2px 2px rgba(0,0,0,.25). O canto é o único desvio — 8px no lugar
   dos 4px do componente, um degrau acima na escala de 4 em 4. */
.wa-dica{position:absolute;bottom:calc(100% + 12px);left:50%;translate:-50% 6px;
  background:#fff;color:var(--t3);font-size:14px;font-weight:400;line-height:1;
  white-space:nowrap;padding:8px 12px;border-radius:8px;max-width:240px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,translate .2s ease}
/* Rabinho: um quadrado de 6px girado 45°, metade escondida atrás do
   balão, com a ponta de baixo levemente arredondada — é assim no Figma.
   A sombra é filter, e não box-shadow: o filtro enxerga balão e rabinho
   como uma peça só e contorna os dois, sem a emenda que o triângulo de
   bordas deixava à mostra. */
.wa-dica::after{content:'';position:absolute;top:100%;left:50%;
  width:6px;height:6px;background:#fff;
  translate:-50% -3px;rotate:-45deg;border-bottom-left-radius:1px}
.wa-float:hover .wa-dica,.wa-float:focus-visible .wa-dica{opacity:1;translate:-50% 0}
/* Em telas de toque não existe hover: o balão nunca apareceria sozinho
   e só ocuparia espaço. */
@media (hover:none){ .wa-dica{display:none} }

@media (max-width:768px){
  .wa-float{--wa-tam:62px;right:20px;bottom:20px}
  .wa-float svg{width:35px;height:35px}
}
/* Folga no fim da página: sem ela o botão flutuante cobriria a última
   linha do rodapé quando a rolagem chega ao fim. 104px + os 24px de
   padding da seção passam da altura do botão (70 + 40 da borda). */
.cta-footer{padding-bottom:104px}

/* Impressão: um botão de contato não faz sentido no papel. */
@media print{ .wa-float{display:none} }