/*
Theme Name: ConecteSer
Theme URI: https://www.conecteser.com.br
Author: ConecteSer
Description: Tema customizado da ConecteSer — Desenvolvimento Organizacional.
Version: 2026.07.26
Text Domain: conecteser
*/

html{ scroll-behavior:smooth; overflow-x:hidden; }
body{ font-family:'Nunito Sans',sans-serif; overflow-x:hidden; }
address, p, a, li, h1, h2, h3, h4{ overflow-wrap:break-word; word-break:break-word; }
footer *{ min-width:0; }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* symbol draw-in animation */
.ring-blue,.ring-green{ stroke-dasharray:100; stroke-dashoffset:100; animation:draw-ring 1.6s cubic-bezier(.4,0,.2,1) forwards; }
.ring-green{ animation-delay:.35s; }
@keyframes draw-ring{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .ring-blue,.ring-green{ animation:none; stroke-dashoffset:0; } }

/* flip cards */
.dim-card{ transition:transform .3s ease; }
.dim-card:hover{ transform:translateY(-4px); }
.flip-card{ perspective:1200px; height:280px; }
@media (max-width:400px){ .flip-card{ height:300px; } }
.flip-inner{ position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.16,.84,.44,1); transform-style:preserve-3d; }
.touch-lift{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.touch-lift.tap-active{ transform:translateY(-6px) scale(1.015); }
@media (hover: hover) and (pointer: fine){
  .hover-lift:hover{ transform:translateY(-6px); }
}

.flip-card.is-flipped .flip-inner{ transform:rotateY(180deg); }
/* NAO usar :hover para virar. O hover no desktop entrava em conflito com o clique
   (a classe .is-flipped ficava dessincronizada do estado visual). Agora e so clique. */
.flip-card{ cursor:pointer; }
.flip-card:focus-visible{ outline:2px solid #2E5F4A; outline-offset:4px; border-radius:12px; }
@media (hover: hover) and (pointer: fine){
  .flip-card:not(.is-flipped) .flip-inner{ transition:transform .6s cubic-bezier(.16,.84,.44,1), box-shadow .3s; }
}
@media (prefers-reduced-motion: reduce){ .flip-inner{ transition:none; } }
.flip-front,.flip-back{ position:absolute; inset:0; backface-visibility:hidden; border-radius:6px; }
.flip-back{ transform:rotateY(180deg); }

/* stacked cards */
.stack-behind{ position:absolute; border-radius:8px; border:1px solid rgba(255,255,255,0.12); }
.stack-wrap{ position:relative; transition:transform .3s; }
.stack-wrap:hover{ transform:translateY(-4px); }

/* tilt */
.tilt-el{ transition:transform .15s ease-out, box-shadow .3s; will-change:transform; }

/* carousel */
.carousel-track{ display:flex; transition:transform .5s cubic-bezier(.16,.84,.44,1); }

/* accordion */
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.accordion-item.open .accordion-body{ max-height:160px; }
.accordion-item.open .accordion-icon{ transform:rotate(45deg); }
.accordion-icon{ transition:transform .3s; }

/* modal */
.modal-overlay{ opacity:0; pointer-events:none; transition:opacity .3s; }
.modal-overlay.active{ opacity:1; pointer-events:auto; }
.modal-box{ display:none; transform:translateY(16px) scale(.98); opacity:0; transition:transform .3s cubic-bezier(.16,.84,.44,1), opacity .3s; max-height:88vh; overflow-y:auto; width:100%; }
/* flex + centralizacao: antes era display:block com width:100%, entao a area vazia
   ao lado do card ainda pertencia ao .modal-box e o clique "fora" nao fechava. */
.modal-box.active{ display:flex; align-items:flex-start; justify-content:center; }
.modal-panel{ width:100%; margin-inline:auto; }
.modal-overlay.active .modal-box.active{ transform:translateY(0) scale(1); opacity:1; }

/* ANIMATED WAVE DIVIDER — movimento real, não decoração estática */
.wave-wrap{ position:relative; height:70px; overflow:hidden; line-height:0; }
.symbol-pulse{ animation: symbol-breathe 3.2s ease-in-out infinite; }
@keyframes symbol-breathe{ 0%,100%{ opacity:0.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .symbol-pulse{ animation:none; } }

.wave-wrap svg{ position:absolute; width:100%; height:100%; }

/* progress line draw-in for "nossa abordagem" steps */
.progress-line{ stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
.progress-line.in-view{ stroke-dashoffset:0; }
.step-circle{ transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.step-item:hover .step-circle, .step-item.tap-active .step-circle{ transform:scale(1.15); }
/* flowing signal line — replaces flat static bar */
.flow-path{ stroke-dasharray:8 6; animation:flow-move 3s linear infinite; }
@keyframes flow-move{ to{ stroke-dashoffset:-56; } }
.flow-dot{ animation:flow-pulse 2.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes flow-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.8); opacity:0.35; } }
@media (prefers-reduced-motion: reduce){ .flow-path,.flow-dot{ animation:none; } }

.insights-scroll{ scrollbar-width:thin; scrollbar-color:#AEB6C0 transparent; }
.insights-scroll::-webkit-scrollbar{ width:6px; }
.insights-scroll::-webkit-scrollbar-thumb{ background:#AEB6C0; border-radius:10px; }

/* PROSE ARTICLE — estilo para conteúdo de páginas legais e posts (the_content) */
.prose-article h2{ font-size:20px; font-weight:800; color:#141A21; margin-top:32px; margin-bottom:12px; }
.prose-article h3{ font-size:17px; font-weight:700; color:#141A21; margin-top:24px; margin-bottom:10px; }
.prose-article p{ margin-bottom:16px; }
.prose-article ul, .prose-article ol{ margin:0 0 16px 20px; }
.prose-article ul{ list-style:disc; }
.prose-article ol{ list-style:decimal; }
.prose-article li{ margin-bottom:8px; }
.prose-article a{ color:#1E3A5F; font-weight:600; text-decoration:underline; }
.prose-article strong{ font-weight:700; color:#141A21; }

.nav-links ul li{ border-bottom:1px solid #DFE3E8; }
.nav-links ul li:last-child{ border-bottom:none; }

/* flutuação leve dos círculos — suave, sem exagero */
.float-gentle-a{ animation: float-gentle-a 7s ease-in-out infinite; }
.float-gentle-b{ animation: float-gentle-b 8.5s ease-in-out infinite; animation-delay: -3s; }
.float-gentle-c{ animation: float-gentle-c 7.8s ease-in-out infinite; animation-delay: -1.4s; }
@keyframes float-gentle-a{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,-8px); } }
@keyframes float-gentle-b{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(3px,6px); } }
@keyframes float-gentle-c{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-4px,-6px); } }
@media (prefers-reduced-motion: reduce){ .float-gentle-a,.float-gentle-b,.float-gentle-c{ animation:none; } }

.nav-link::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:1.5px; background:#2E5F4A; transition:width .3s ease; }
.nav-link:hover::after{ width:100%; }

/* button micro-lift */
a.bg-verde, a.bg-azul, button[type="submit"]{ transition:transform .25s cubic-bezier(.34,1.56,.64,1), background-color .3s, box-shadow .3s; }
a.bg-verde:hover, a.bg-azul:hover, button[type="submit"]:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(30,58,95,0.35); }

/* section watermark numerals for texture */
.sec-num{ position:absolute; top:0; right:0; font-size:180px; font-weight:800; line-height:1; color:#1E3A5F; opacity:0.045; pointer-events:none; user-select:none; z-index:0; }

/* faint grid texture on light sections */
.texture-lines{ background-image:linear-gradient(90deg, rgba(20,26,33,0.025) 1px, transparent 1px); background-size:64px 100%; }

/* subtle card hover for stat blocks */
.stat-block{ transition:transform .3s ease; }
.stat-block:hover{ transform:translateY(-3px); }
.nav-links{ transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .25s; }
.nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.hamburger span{ transition:transform .25s, opacity .25s; }
.hamburger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   UTILITÁRIOS COMPLEMENTARES
   Classes usadas no markup que ainda não estavam no build do Tailwind.
   Ficam aqui para o site não depender de recompilar o CSS a cada ajuste.
   Ao rodar o Tailwind CLI de novo, elas serão geradas e este bloco pode sair.
--------------------------------------------------------------------------- */
.gap-7{ gap:1.75rem; }
.pt-5{ padding-top:1.25rem; }
.pt-10{ padding-top:2.5rem; }
.pb-2{ padding-bottom:.5rem; }
button:disabled{ opacity:.6; cursor:not-allowed; }
/* vermelho de erro — cor funcional de estado, fora da paleta institucional,
   usada apenas em mensagens de falha do formulário */
.text-erro{ color:#B4302A; }
@media (min-width:640px){
  .sm\:gap-4{ gap:1rem; }
  .sm\:mb-4{ margin-bottom:1rem; }
  .sm\:mb-12{ margin-bottom:3rem; }
  .sm\:pt-6{ padding-top:1.5rem; }
  .sm\:pb-6{ padding-bottom:1.5rem; }
  .sm\:pb-8{ padding-bottom:2rem; }
}

/* utilitários adicionados na restauração do texto oficial (jul/2026) */
.border-l-2{ border-left-width:2px; }
.border-verde\/40{ border-color:rgba(46,95,74,.4); }
.border-white\/15{ border-color:rgba(255,255,255,.15); }
.border-azul\/30{ border-color:rgba(30,58,95,.3); }
.hover\:border-azul:hover{ border-color:#1E3A5F; }
.max-w-sm{ max-width:24rem; }
.max-w-xl{ max-width:36rem; }
.mt-5{ margin-top:1.25rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ margin-top:.375rem; }

/* ---------------------------------------------------------------------------
   BARRA LEGAL DO RODAPÉ
   Uma única linha com separadores. Quebra naturalmente em telas pequenas,
   e os separadores somem quando cada item passa a ocupar sua própria linha.
--------------------------------------------------------------------------- */
.legal-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.35rem .6rem; max-width:100%; }
.legal-bar .sep{ color:#C7D3E0; user-select:none; }
@media (max-width:640px){
  .legal-bar{ flex-direction:column; gap:.5rem; }
  .legal-bar .sep{ display:none; }
}

/* Resumo dos Insights: no máximo 2 linhas, como no layout de referência */
.insight-resumo{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; max-width:100%;
}

/* utilitários da tagline do cabeçalho e da barra legal */
.mt-1{ margin-top:.25rem; }
.tracking-wide{ letter-spacing:.025em; }
@media (min-width:640px){
  .sm\:pb-4{ padding-bottom:1rem; }
  .sm\:text-\[11px\]{ font-size:11px; }
}

/* Barra legal: 15% maior que o text-xs original (12px -> 13.8px) e
   links em negrito leve para se distinguirem do texto corrido. */
.legal-bar{ font-size:13.8px; }
.legal-bar a{ font-weight:600; }

/* utilitários do rodapé em 2 colunas e da lista de Insights */
.py-6{ padding-top:1.5rem; padding-bottom:1.5rem; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){ margin-top:.125rem; }
@media (min-width:640px){
  .sm\:items-end{ align-items:flex-end; }
  .sm\:justify-end{ justify-content:flex-end; }
  .sm\:text-right{ text-align:right; }
}