/* =====================================================================
   CSS do bloco "Visão geral / Mostrar mais"

   Substitua as regras equivalentes que já existem no <style> da página
   (linhas ~1611-1620 e ~1293-1302). O resto da folha não muda.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Wrapper: duas colunas de verdade

   No HTML antigo o .cdw-right estava DENTRO do .cdw-left, então o
   wrapper tinha um filho só e o layout de duas colunas nunca existiu.
   Com o aninhamento corrigido ele passa a valer.

   O bloco expandido ocupa a linha inteira abaixo das duas colunas --
   por isso flex-wrap e o flex-basis:100% nele.
   --------------------------------------------------------------------- */
.cdw-moreinfo{margin-top:24px;margin-bottom:40px;color:#222}

.cdw-wrapper{
  display:flex;flex-wrap:wrap;gap:32px;
  align-items:flex-start;margin-bottom:40px;
}
.cdw-left{flex:1 1 100%;box-sizing:border-box;min-width:0}
.cdw-right{flex:1 1 100%;box-sizing:border-box;min-width:0}

.cdw-h2{font-weight:700;color:#000;font-size:30px;margin:0 0 16px;line-height:1.2}
.cdw-h3{font-weight:700;color:#111;font-size:18px;margin:0 0 8px;line-height:1.3}
.cdw-muted{color:#777;font-size:14px}


/* ---------------------------------------------------------------------
   O gatilho

   Agora é <button>, então precisa reset: navegador dá fundo cinza,
   borda e fonte própria a button.

   Alvo de 44px de altura -- é o mínimo confortável para toque, e este
   controle costuma ser usado no celular.
   --------------------------------------------------------------------- */
.cdw-toggle-more{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;margin-top:15px;padding:10px 4px;
  border:0;background:transparent;
  font:700 15px/1 inherit;color:#c1272d;
  cursor:pointer;
  transition:color .15s;
}
.cdw-toggle-more:hover{color:#8f1d21}
.cdw-toggle-more:focus-visible{
  outline:3px solid rgba(193,39,45,.25);outline-offset:3px;border-radius:4px;
}

/* O ícone é um + que vira - ao abrir. Como é ::before girando, não
   precisa de troca de texto no JS para o estado ficar visível. */
.cdw-toggle-icone{
  position:relative;width:16px;height:16px;flex:none;
}
.cdw-toggle-icone::before,
.cdw-toggle-icone::after{
  content:"";position:absolute;left:50%;top:50%;
  width:14px;height:2px;margin:-1px 0 0 -7px;
  background:currentColor;border-radius:2px;
  transition:transform .2s ease;
}
.cdw-toggle-icone::after{transform:rotate(90deg)}
.cdw-toggle-more[aria-expanded="true"] .cdw-toggle-icone::after{transform:rotate(0)}


/* ---------------------------------------------------------------------
   Área expandida
   --------------------------------------------------------------------- */
.cdw-expanded{
  flex-basis:100%;width:100%;box-sizing:border-box;
  margin-top:24px;padding-top:24px;
  border-top:1px solid #eee;
}

/* Cada seção é uma faixa: texto à esquerda, imagem à direita quando
   houver. Sem imagem, o texto ocupa a largura toda em vez de deixar
   uma coluna vazia -- que era o efeito do rodízio de imagens antigo. */
.cdw-section{
  display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap;
  padding:0 0 28px;margin:0 0 28px;
  border-bottom:1px solid #f0f0f0;
}
.cdw-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

.cdw-col-text{flex:1 1 100%;min-width:0}
.cdw-section--com-img .cdw-col-text{flex:1 1 60%}
.cdw-col-image{
  flex:0 0 34%;max-width:34%;
  display:flex;align-items:flex-start;justify-content:center;
}
.cdw-col-image img{max-width:100%;height:auto;border-radius:6px}

.cdw-text-body{color:#444;line-height:1.55;font-size:14px}
.cdw-text-body p{margin:0 0 14px}
.cdw-text-body ul,.cdw-text-body ol{margin:0 0 14px;padding-left:20px}
.cdw-text-body img{max-width:100%;height:auto}

/* Conteúdo vindo do editor da admin traz <font> e style inline.
   Estilo inline só perde para !important -- nenhum seletor ganha de um
   atributo style. Só aparência é neutralizada; estrutura fica. */
.cdw-text-body [style]{
  font-family:inherit!important;
  font-size:inherit!important;
  color:inherit!important;
  background:transparent!important;
}
.cdw-text-body font{font-family:inherit;font-size:inherit;color:inherit}
.cdw-text-body [width]{width:auto!important;max-width:100%}


@media (max-width:860px){
  .cdw-h2{font-size:23px}
  .cdw-h3{font-size:16px}
  .cdw-section{gap:18px;padding-bottom:22px;margin-bottom:22px}
  .cdw-section--com-img .cdw-col-text{flex:1 1 100%}
  .cdw-col-image{flex:1 1 100%;max-width:100%;justify-content:flex-start}
  .cdw-expanded{margin-top:18px;padding-top:18px}
}

@media (prefers-reduced-motion:reduce){
  .cdw-toggle-icone::before,
  .cdw-toggle-icone::after{transition:none}
}