/* ==========================================================================
   ciis.css — customizacoes da marca CIIS

   Regra do projeto: o style.css do template so recebe troca de cor e fonte.
   Todo ajuste proprio da CIIS mora aqui, para sobreviver a uma futura
   atualizacao do template.
   ========================================================================== */

:root {
  --ciis-laranja: #FF5A00;
  --ciis-preto: #000000;
  --ciis-cinza-medio: #A6A6A6;
  --ciis-cinza-claro: #D9D9D9;
  --ciis-off-white: #F5F5F5;
}

/* --------------------------------------------------------------------------
   Efeitos proibidos pela marca — e a excecao do hero

   A marca proibe gradiente, sombra projetada, brilho, bisel, contorno em
   texto e efeito 3D. Vale para o site inteiro, com UMA excecao registrada.

   Historico, porque a decisao mudou de dono no meio do caminho:

   O template escurecia a foto do hero com um gradiente (preto -> laranja).
   Nao era enfeite: era o que deixava o texto branco legivel sobre a foto.
   Seguindo a regra da marca ao pe da letra, troquei por uma camada preta
   chapada. Funcionava, mas o dono viu e pediu o degrade de volta, no laranja
   da CIIS, com a foto mais escura por tras.

   Ficou o degrade. Regra escrita nao manda no gosto de quem assina a marca —
   a mesma licao dos objetos 3D. O trecho vai marcado com
   ciis:excecao:inicio / ciis:excecao:fim para o tools/check.py nao acusar.
   -------------------------------------------------------------------------- */

/* O cliente pediu de volta o degrade do template, no laranja da CIIS, com a
   foto mais escura. Substitui a camada preta chapada que estava aqui.

   Sao duas coisas separadas:
     - filter: brightness escurece a FOTO, sem mexer no texto por cima
     - o :before recebe o degrade preto -> laranja, como no template

   O preto fica onde o texto esta (esquerda) e o laranja entra a direita,
   atras da foto do modelo. Assim o titulo continua legivel e a cor da marca
   aparece sem tomar a tela. */

/* Tudo abaixo vai prefixado com .banner-section-h1. A classe .bg-image do
   template nao e exclusiva do hero: a secao "Fale com a gente" usa a mesma.
   Sem o prefixo, qualquer foto colocada la chega com 46% de brilho e um
   degrade laranja por cima — efeito que so faz sentido atras do titulo do
   hero. Descoberto quando uma foto entrou naquela secao.

   O .bg-image do template nao declara largura: ele herda a largura NATURAL
   da imagem de fundo. Com a foto da CIIS (1536px) sobrava faixa branca a
   direita em qualquer monitor acima disso. Agora ele ocupa a secao inteira e
   a foto se ajusta por object-fit. */
.banner-section-h1 .bg-image {
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  /* A altura TAMBEM precisa ser travada. Sem isto ela vem da proporcao do
     ARQUIVO: com um fundo de 1536x1024 dava 1280px e sobrava; com um de
     2560x1094 passou a dar 657px numa secao de 795, e os ultimos 138px
     ficavam sem fundo — o modelo aparecia com as pernas sobre o branco.
     Travando em 100% o fundo acompanha a secao, seja qual for a foto. */
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
}

.banner-section-h1 .bg-image img,
.banner-section-h1 .bg-image picture {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.46) saturate(1.05);
}

/* ciis:excecao:inicio — degrade do hero, pedido pelo dono */
.banner-section-h1 .bg-image:before {
  background-image: linear-gradient(
      100deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.86) 42%,
      rgba(0, 0, 0, 0.55) 66%,
      rgba(255, 90, 0, 0.72) 92%,
      rgba(255, 90, 0, 0.85) 100%
    ) !important;
  background-color: transparent !important;
}

/* Em tela estreita o degrade horizontal nao faz sentido: o texto ocupa toda a
   largura. Vira vertical, escuro em cima e laranja embaixo. */
@media (max-width: 991px) {
  .banner-section-h1 .bg-image:before {
    /* Afrouxado de 0.90/0.86 para 0.78/0.72: com o degrade anterior o
       escritorio sumia no celular e o hero virava um painel liso. O texto
       continua legivel — a foto ja chega com brightness(0.46), entao
       mesmo a 0.78 de preto o contraste do branco passa folgado. */
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.72) 62%,
        rgba(255, 90, 0, 0.58) 100%
      ) !important;
  }
}
/* ciis:excecao:fim */

.image:before {
  background-image: none !important;
}

/* Sombra em texto, brilho e contorno: nenhum uso legitimo aqui. */
* {
  text-shadow: none !important;
  -webkit-text-stroke-width: 0 !important;
}

/* --------------------------------------------------------------------------
   Preloader: tela de carregamento

   O template usa images/icons/preloader.png (o logo Webtec) numa caixa de
   190x41, proporcao 4,6:1. O logo da CIIS e 3:1, entao a caixa tambem muda —
   e background-size passa de cover para contain, senao a imagem seria cortada.
   O fundo do preloader e branco, por isso a versao para fundo claro.
   -------------------------------------------------------------------------- */

.preloader:after {
  background-image: url(../images/ciis/logo/logo-fundo-claro.png) !important;
  background-size: contain !important;
  width: 210px !important;
  height: 70px !important;
  left: calc(50% - 105px) !important;
}

/* O template escreve "Loading" embaixo do logo. Primeiro foi traduzido para
   "Carregando"; agora sai de vez, a pedido do dono. A marca sozinha ja diz
   que a pagina esta abrindo, e o logo pulsa — a palavra so repetia isso em
   texto. Como o :before do template so tem estilo de texto (sem fundo nem
   medida), display:none apaga sem deixar caixa vazia. */

.preloader:before {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Tipografia: Montserrat, familia unica

   Pesos permitidos pela marca: 300, 400, 600 e 700.
   Proibidos: Thin (100), ExtraLight (200), ExtraBold (800), Black (900)
   e qualquer italico.
   -------------------------------------------------------------------------- */

body,
h1, h2, h3, h4, h5, h6,
.btn, button, input, textarea, select,
.sec-title, .sec-title .sub-title {
  font-family: "Montserrat", sans-serif;
}

h1, h2, h3 { font-weight: 700; }
h4, h5, h6 { font-weight: 600; }
body { font-weight: 400; }

/* O template usa pesos que a marca nao permite; normaliza para os quatro. */
[class*="fw-light"], .light { font-weight: 300; }
[class*="fw-medium"] { font-weight: 600; }
strong, b { font-weight: 700; }

/* Nenhum italico. A excecao sao os <i> de icone, que nao carregam texto. */
em,
i:not([class*="fa-"]):not([class*="icon-"]):not([class*="lnr-"]) {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Fundos escuros: preto vivo no lugar do roxo do template

   O template nao pinta essas secoes com cor: ele usa uma IMAGEM roxa-escura
   (.jpg) aplicada no pseudo-elemento :before. Por isso trocar cor no CSS nao
   surtia efeito. Aqui a imagem e desligada e entra preto solido.
   -------------------------------------------------------------------------- */

.services-section-h1 .outer-box:before,
.team-section-h1 .outer-box:before {
  background-image: none !important;
  background-color: var(--ciis-preto) !important;
}

/* O :before do rodape NAO e o fundo da secao: e uma camada decorativa de
   816x511 px, posicionada por cima do conteudo com z-index 1. A imagem
   original tinha transparencia, entao o texto aparecia atraves dela. Trocar
   por preto solido a transformou numa tarja opaca que escondia os links.
   O fundo preto vem da propria .widgets-section, logo abaixo. */
.footer-style-one .widgets-section:before {
  background-image: none !important;
  background-color: transparent !important;
}

.footer-style-one .widgets-section {
  background-color: var(--ciis-preto) !important;
}

/* --------------------------------------------------------------------------
   Logo

   O logo do template era 190x41 (proporcao 4,6:1). O da CIIS e 2172x724
   (proporcao 3:1), mais alto por causa do descritor embaixo. Sem limite de
   altura ele renderiza no tamanho natural e arrebenta o cabecalho — por isso
   a altura e fixada aqui e a largura fica automatica.
   -------------------------------------------------------------------------- */

.main-header .logo img,
.main-header .logo-box .logo img,
.sticky-header .logo img,
.mobile-menu .nav-logo img {
  height: 52px;
  width: auto;
  max-width: none;
}

.footer-logo img {
  height: 64px;
  width: auto;
  max-width: none;
}

@media (max-width: 991px) {
  .main-header .logo img,
  .main-header .logo-box .logo img,
  .sticky-header .logo img,
  .mobile-menu .nav-logo img {
    height: 40px;
  }

  .footer-logo img {
    height: 48px;
  }
}

/* --------------------------------------------------------------------------
   Sombra projetada

   Proibida pela marca. O template a usava para descolar os cards do fundo.
   Sem nada no lugar os cards somem no branco, entao entra borda de 1px em
   cinza claro — que separa sem ser sombra.
   -------------------------------------------------------------------------- */

.service-block .inner-box,
.testimonial-block .inner-box,
.news-block .inner-box,
.feature-block .inner-box,
.card,
.btn,
.theme-btn {
  box-shadow: none !important;
}

.news-block .inner-box {
  border: 1px solid var(--ciis-cinza-claro);
}

/* O depoimento fica FORA dessa regra.

   Ali o card nao precisa se destacar de fundo nenhum: o bloco ja esta
   delimitado pela linha de cima do carrossel, pelas aspas vermelhas e pela
   foto grande ao lado. A borda so desenhava um retangulo solto no meio da
   secao — o dono apontou e tem razao. */

/* --------------------------------------------------------------------------
   Botao flutuante de WhatsApp

   Fica fixo no canto inferior direito no celular, que e de onde vem a maior
   parte do trafego pago. No desktop sai de cena, porque ali os CTAs do corpo
   da pagina ja estao sempre a vista.
   -------------------------------------------------------------------------- */

.ciis-wa-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ciis-laranja);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-decoration: none;
}

.ciis-wa-flutuante:hover,
.ciis-wa-flutuante:focus {
  background: var(--ciis-preto);
  color: #fff;
}

@media (min-width: 992px) {
  .ciis-wa-flutuante { display: none; }
}

/* --------------------------------------------------------------------------
   Menu: sete itens em vez de cinco

   O template reservava espaco para 5 itens com 59px de respiro entre eles.
   O menu da CIIS tem 7 (Home, Agencia, Grafica, Impressao 3D, Brindes, Sobre,
   Contato) e quebrava para uma segunda linha. O respiro foi reduzido para
   caber tudo numa linha so, sem encolher a fonte.
   -------------------------------------------------------------------------- */

.main-header .main-menu .navigation > li,
.sticky-header .main-menu .navigation > li {
  margin-right: 28px !important;
}

/* O ultimo item nao precisa de respiro a direita: era ele que estourava a
   largura por poucos pixels e jogava o menu para a segunda linha. */
.main-header .main-menu .navigation > li:last-child,
.sticky-header .main-menu .navigation > li:last-child {
  margin-right: 0 !important;
}

@media (max-width: 1400px) {
  .main-header .main-menu .navigation > li,
  .sticky-header .main-menu .navigation > li { margin-right: 18px !important; }
}

@media (max-width: 1200px) {
  .main-header .main-menu .navigation > li,
  .sticky-header .main-menu .navigation > li { margin-right: 12px !important; }
  .main-header .main-menu .navigation > li > a { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Escala tipografica fluida

   O template foi desenhado para textos curtos em ingles: o H1 do hero vinha
   com 110px e entrelinha de 120px. Em portugues as frases sao mais longas,
   entao o titulo ocupava tres linhas e 360px de altura, empurrando o resto da
   pagina para fora da tela.

   clamp(minimo, proporcional, maximo) resolve isso sem media query: o tamanho
   acompanha a largura da tela, mas nunca passa do teto no desktop nem fica
   pequeno demais no celular. E a base do comportamento responsivo do site.
   -------------------------------------------------------------------------- */

.banner-title,
h1 {
  font-size: clamp(2.1rem, 4.6vw, 4.25rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em;
}

h2,
.sec-title h2,
.sec-title .title {
  font-size: clamp(1.7rem, 3.1vw, 2.75rem) !important;
  line-height: 1.18 !important;
}

h3 { font-size: clamp(1.4rem, 2.2vw, 2rem) !important; line-height: 1.25 !important; }
h4 { font-size: clamp(1.15rem, 1.5vw, 1.4rem) !important; line-height: 1.3 !important; }
h5 { font-size: clamp(1rem, 1.2vw, 1.15rem) !important; }

/* Texto corrido: 16px no celular, ate 17px no desktop. Abaixo disso cansa. */
body,
p,
.text {
  font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
  line-height: 1.65;
}

/* Sobretitulo das secoes (OUR SERVICES, SOBRE A CIIS...) */
.sec-title .sub-title,
.sub-title {
  font-size: clamp(0.75rem, 0.9vw, 0.875rem) !important;
  letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   Responsivo: evitar estouro horizontal

   Regra de ouro do projeto: a pagina nunca rola para o lado. Palavras longas
   do ramo grafico (autocopiativa, receituario, personalizacao) sao as que mais
   estouram caixa no celular.
   -------------------------------------------------------------------------- */

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6, p, li, .text {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
}

/* O logo e a excecao: tem altura fixa e largura automatica. */
.main-header .logo img,
.sticky-header .logo img,
.mobile-menu .nav-logo img,
.footer-logo img {
  max-width: none;
}

/* --------------------------------------------------------------------------
   Telefone do cabecalho fixo

   O template reservava a largura de "+88 017 500 500 88". O numero brasileiro
   com DDD entre parenteses e mais estreito, mas quebrava em tres linhas porque
   a caixa era estreita demais. nowrap resolve.
   -------------------------------------------------------------------------- */

.sticky-header .support-box strong,
.sticky-header .support-box .title,
.header-top .support-box strong,
.main-header .support-box strong {
  white-space: nowrap;
}

/* ==========================================================================
   Landings de segmento (agencia, grafica, impressao 3D, brindes)

   Sao paginas de destino de trafego pago: o visitante cai frio, vindo do
   anuncio, sem ter passado pela home. Por isso cada uma repete quem e a CIIS,
   onde fica e como falar com a gente — e traz o CTA no minimo tres vezes.

   Montadas por tools/montar-paginas.py, que reaproveita o cabecalho e o
   rodape da home. Conteudo em tools/paginas.py.
   ========================================================================== */

/* -------------------------------------------------- faixa preta do topo */

.ciis-page-title {
  /* O .page-title do template traz gradiente e imagem de fundo. A marca
     proibe gradiente, entao aqui o fundo e preto chapado. */
  background: var(--ciis-preto) !important;
  background-image: none !important;
  padding: 150px 0 70px;
  position: relative;
  text-align: left;
}

.ciis-page-title::before,
.ciis-page-title::after {
  background-image: none !important;
  background-color: transparent !important;
  content: none !important;
}

.ciis-page-title .title-box,
.ciis-page-title .content-box {
  text-align: left;
}

.ciis-page-title h1 {
  color: #fff;
  margin-bottom: 14px;
}

.ciis-page-title p {
  color: var(--ciis-cinza-claro);
  max-width: 640px;
  margin: 0;
}

.ciis-page-title .bread-crumb {
  margin-top: 26px;
  text-align: left;
  padding: 0;
  list-style: none;
}

.ciis-page-title .bread-crumb li {
  display: inline-block;
  color: var(--ciis-cinza-medio);
  font-size: 14px;
}

.ciis-page-title .bread-crumb li:not(:last-child)::after {
  content: "/";
  margin: 0 10px;
  color: var(--ciis-cinza-medio);
}

.ciis-page-title .bread-crumb a { color: var(--ciis-laranja); }

/* -------------------------------------------------- chamada para o WhatsApp */

.ciis-cta {
  background: var(--ciis-off-white);
  padding: 56px 0;
}

.ciis-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.ciis-cta-texto h2 { margin: 0 0 6px; }
.ciis-cta-texto p { margin: 0; color: #555; }

/* -------------------------------------------------- especialidades */

.ciis-especialidades { padding: 90px 0 60px; }

.ciis-grupo-col { margin-bottom: 30px; }

.ciis-grupo {
  border: 1px solid var(--ciis-cinza-claro);
  padding: 30px 28px 26px;
  height: 100%;
  background: #fff;
}

.ciis-grupo h3 {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ciis-laranja);
  display: inline-block;
}

.ciis-grupo ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.ciis-grupo li {
  padding: 7px 0 7px 20px;
  position: relative;
  color: #444;
  border-bottom: 1px solid #f0f0f0;
}

.ciis-grupo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 7px;
  height: 7px;
  background: var(--ciis-laranja);
}

.ciis-grupo-link {
  color: var(--ciis-laranja);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.ciis-grupo-link:hover { color: var(--ciis-preto); }

/* -------------------------------------------------- por que a CIIS */

.ciis-porque {
  background: var(--ciis-preto);
  padding: 80px 0 50px;
}

.ciis-porque .sub-title { color: var(--ciis-laranja); }
.ciis-porque .title { color: #fff; }

.ciis-ponto {
  padding: 26px 0;
  margin-bottom: 20px;
  border-top: 2px solid var(--ciis-laranja);
}

.ciis-ponto h4 { color: #fff; margin: 0 0 10px; }
.ciis-ponto p { color: var(--ciis-cinza-medio); margin: 0; }

/* -------------------------------------------------- atendimento */

.ciis-atendimento { padding: 80px 0; }
.ciis-atendimento h3 { margin-bottom: 18px; }
.ciis-atendimento p { margin-bottom: 18px; color: #444; }
.ciis-atendimento a { color: var(--ciis-laranja); }

/* -------------------------------------------------- celular */

@media (max-width: 767px) {
  .ciis-page-title { padding: 120px 0 50px; }
  .ciis-cta { padding: 40px 0; }
  .ciis-cta-inner { flex-direction: column; align-items: flex-start; }
  .ciis-especialidades { padding: 60px 0 30px; }
  .ciis-porque { padding: 60px 0 30px; }
  .ciis-atendimento { padding: 55px 0; }
}

/* -------------------------------------------------- texto corrido (sobre, contato) */

.ciis-texto { padding: 80px 0 40px; }

.ciis-texto-bloco {
  max-width: 820px;
  margin: 0 auto 50px;
}

.ciis-texto-bloco h2 {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ciis-laranja);
  display: inline-block;
}

.ciis-texto-bloco p {
  color: #444;
  margin-bottom: 16px;
}

.ciis-texto-bloco a { color: var(--ciis-laranja); }
.ciis-texto-bloco strong { color: var(--ciis-preto); }

@media (max-width: 767px) {
  .ciis-texto { padding: 55px 0 25px; }
  .ciis-texto-bloco { margin-bottom: 36px; }
}

/* --------------------------------------------------------------------------
   Depoimentos: respeitar a fala do cliente

   O template aplica text-transform: capitalize no texto do depoimento, o que
   vira "A Agência Ciis Faz A Diferença Na Nossa Empresa". Depoimento e fala
   literal e nao se reescreve — nem a forma de escrever.
   -------------------------------------------------------------------------- */

.testimonial-block .text,
.testimonial-block-two .text,
.testimonial-section .text {
  text-transform: none !important;
}

/* --------------------------------------------------------------------------
   Objetos 3D dos cards de "Como funciona"

   O template posicionava o objeto em 218x218 comecando a 206px da esquerda
   do card. Como o card tem 445px e a pilula mais larga chega a ~300px, o
   objeto caia em cima do texto e escondia palavras.

   Aqui ele encolhe e vai para o canto inferior direito, atras do texto na
   ordem de empilhamento. O tamanho acompanha a largura do card com clamp,
   entao a folga se mantem em qualquer tela.
   -------------------------------------------------------------------------- */

/* Sem overflow: hidden aqui. O numero 01/02/03 fica de proposito para fora
   da borda de cima do card, e o recorte o cortava pela metade. O objeto 3D
   nao precisa de recorte: ja esta preso ao canto com medida fixa. */
.services-section-h1 .service-block .inner-block {
  position: relative;
}

.services-section-h1 .service-block .icon {
  position: absolute !important;
  inset: auto 12px 12px auto !important;
  width: clamp(88px, 30%, 132px) !important;
  height: auto !important;
  z-index: 0 !important;
  pointer-events: none;
}

.services-section-h1 .service-block .icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* O texto fica por cima na ordem de empilhamento, nunca atras do objeto. */
.services-section-h1 .service-block .number,
.services-section-h1 .service-block .title,
.services-section-h1 .service-block .list-style-two {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Selo circular "Criando ideias inovadoras de sucesso"

   Substitui why-choose-us-h1-1.png, que trazia o logo de outra empresa e o
   texto "Creative Agency Digital" embutido no pixel.

   Duas camadas empilhadas, e isso importa: o GSAP do template gira o elemento
   180 graus conforme a pagina rola. Com o selo inteiro numa camada so, o C e
   o texto terminavam de cabeca para baixo. Agora so o anel gira; a marca fica
   parada e em pe.

   Disco laranja com texto branco, no lugar do preto, que ficou pesado demais.
   -------------------------------------------------------------------------- */

.ciis-selo {
  position: relative;
}

.ciis-selo-anel svg {
  width: 100%;
  height: auto;
  display: block;
}

.ciis-selo-texto {
  font-family: "Montserrat", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 2.1px;
}

/* A marca fica centrada e nao acompanha a rotacao do anel.

   Desenhada como imagem de FUNDO, nao como <img>: o template tem regras de
   altura para .icon img que esmagavam a letra, deixando o C com cara de arco.
   Imagem de fundo com background-size: auto nao e alcancada por elas. */
.ciis-selo-marca {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url(../images/ciis/logo/c-branco.png);
  background-repeat: no-repeat;
  background-position: center center;
  /* 42% e nao 36%: o c-branco.png novo vem de uma prancheta quadrada de
     400x400 e o C desenhado ocupa 86% dela — o resto e respiro. O arquivo
     antigo era recorte justo (100%). Sem esta conta o C apareceria 14%
     menor dentro do selo, sem motivo visivel no codigo. */
  background-size: 42% auto;
}






/* ==========================================================================
   Atendente de chat da CIIS

   Widget proprio, sem servico de terceiro. Fica fixo no canto inferior
   direito em todas as paginas, tanto no desktop quanto no celular.
   Substitui o botao flutuante simples que existia antes.
   ========================================================================== */

.ciis-chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* -------------------------------------------------- botao */

.ciis-chat-botao {
  position: relative;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  background: var(--ciis-laranja);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ciis-chat-icone {
  font-size: 31px;
  color: #fff;
  position: relative;
  z-index: 2;
  animation: ciis-chat-balancar 3.4s ease-in-out infinite;
}

/* Anel que pulsa: chama o olho sem piscar nem berrar. */
.ciis-chat-pulso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ciis-laranja);
  opacity: 0.55;
  animation: ciis-chat-pulsar 2.4s ease-out infinite;
}

@keyframes ciis-chat-pulsar {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

@keyframes ciis-chat-balancar {
  0%, 70%, 100% { transform: rotate(0deg); }
  75%  { transform: rotate(-12deg); }
  80%  { transform: rotate(10deg); }
  85%  { transform: rotate(-8deg); }
  90%  { transform: rotate(6deg); }
}

.ciis-chat.aberto .ciis-chat-pulso,
.ciis-chat.aberto .ciis-chat-icone { animation: none; }

/* -------------------------------------------------- balao de chamada */

.ciis-chat-balao {
  max-width: 245px;
  background: #fff;
  color: var(--ciis-preto);
  /* borda laranja em vez de cinza: o balao precisa se destacar do fundo da
     pagina, e a marca nao permite sombra projetada */
  border: 2px solid var(--ciis-laranja);
  font-weight: 500;
  border-radius: 14px 14px 4px 14px;
  padding: 11px 15px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.ciis-chat-balao.visivel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* O xis que dispensa o balao.

   O balao e `pointer-events: none` para nao roubar clique da pagina por tras.
   Filho com `pointer-events: auto` recebe clique mesmo assim — mas so quando
   o balao esta visivel, senao sobra um alvo invisivel no canto da tela. */

.ciis-chat-balao {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ciis-chat-balao-texto {
  flex: 1 1 auto;
}

.ciis-chat-balao-fechar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ciis-cinza-medio);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  pointer-events: none;
  transition: color .2s ease;
}

.ciis-chat-balao.visivel .ciis-chat-balao-fechar {
  pointer-events: auto;
}

.ciis-chat-balao-fechar:hover,
.ciis-chat-balao-fechar:focus-visible {
  color: var(--ciis-preto);
}

/* -------------------------------------------------- painel */

.ciis-chat-painel {
  width: 340px;
  max-width: calc(100vw - 40px);
  height: 460px;
  max-height: calc(100vh - 140px);
  background: #fff;
  border: 1px solid var(--ciis-cinza-claro);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ciis-chat-topo {
  background: var(--ciis-preto);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.ciis-chat-ident { display: flex; flex-direction: column; line-height: 1.3; }
.ciis-chat-ident strong { font-size: 16px; letter-spacing: 0.5px; }

.ciis-chat-status {
  font-size: 11.5px;
  color: var(--ciis-cinza-medio);
}

.ciis-chat-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39d353;
  margin-right: 6px;
  vertical-align: middle;
}

.ciis-chat-fechar {
  background: none;
  border: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

/* -------------------------------------------------- corpo da conversa */

.ciis-chat-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--ciis-off-white);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ciis-chat-msg {
  max-width: 88%;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.5;
  animation: ciis-chat-entrar .28s ease;
}

.ciis-chat-msg-atendente {
  background: #fff;
  border: 1px solid var(--ciis-cinza-claro);
  border-radius: 14px 14px 14px 4px;
  align-self: flex-start;
}

.ciis-chat-msg-visitante {
  background: var(--ciis-laranja);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  align-self: flex-end;
}

@keyframes ciis-chat-entrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------- opcoes e formulario */

.ciis-chat-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 3px;
  animation: ciis-chat-entrar .28s ease;
}

.ciis-chat-opcao {
  background: #fff;
  border: 1px solid var(--ciis-laranja);
  color: var(--ciis-laranja);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.ciis-chat-opcao:hover {
  background: var(--ciis-laranja);
  color: #fff;
}

.ciis-chat-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.ciis-chat-campo {
  border: 1px solid var(--ciis-cinza-claro);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}

.ciis-chat-campo:focus {
  outline: 2px solid var(--ciis-laranja);
  outline-offset: 1px;
}

.ciis-chat-campo-erro { border-color: var(--ciis-laranja); }

.ciis-chat-enviar {
  background: var(--ciis-laranja);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.ciis-chat-enviar:hover { background: var(--ciis-preto); }

.ciis-chat-aviso {
  font-size: 12.5px;
  color: #666;
  text-align: center;
  margin-top: 4px;
}

.ciis-chat-link {
  display: block;
  text-align: center;
  background: var(--ciis-preto);
  color: #fff;
  border-radius: 10px;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ciis-chat-link:hover { background: var(--ciis-laranja); color: #fff; }

/* -------------------------------------------------- celular */

@media (max-width: 575px) {
  .ciis-chat { right: 14px; bottom: 14px; }
  .ciis-chat-painel {
    width: calc(100vw - 28px);
    height: calc(100vh - 130px);
  }
  .ciis-chat-balao { max-width: calc(100vw - 100px); }
}

/* Quem pede menos animacao no sistema recebe o botao parado. */
@media (prefers-reduced-motion: reduce) {
  .ciis-chat-pulso,
  .ciis-chat-icone { animation: none !important; }
}

/* O botao antigo de WhatsApp foi substituido por este widget. */
.ciis-wa-flutuante { display: none !important; }

/* ==========================================================================
   Chat da CIIS — segunda versao

   Ajustes depois do primeiro teste:
     - o titulo "CIIS" saia cinza-escuro sobre preto (o strong do template
       sobrescrevia a cor). Agora e branco, com forca.
     - avatar com o C da marca no cabecalho
     - indicador de "digitando" antes de cada fala
     - selo de mensagem nao lida no botao
     - animacoes mais presentes
   ========================================================================== */

/* -------------------------------------------------- cabecalho */

.ciis-chat-identbox {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ciis-chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ciis-laranja);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ciis-chat-avatar img {
  /* 22 e nao 19 pelo mesmo motivo do selo: o c-branco.png novo tem 14% de
     respiro dentro do arquivo. Ver a nota em .ciis-selo-marca. */
  width: 22px;
  height: auto;
  display: block;
}

/* O strong do template pintava de cinza-escuro; aqui volta a ser branco. */
.ciis-chat-topo .ciis-chat-nome,
.ciis-chat-topo strong {
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
}

.ciis-chat-status {
  color: #cfcfcf !important;
  font-size: 11.5px;
}

.ciis-chat-status::before {
  background: #39d353;
  box-shadow: 0 0 0 0 rgba(57, 211, 83, 0.7);
  animation: ciis-chat-online 2s ease-out infinite;
}

@keyframes ciis-chat-online {
  70%  { box-shadow: 0 0 0 7px rgba(57, 211, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(57, 211, 83, 0); }
}

/* -------------------------------------------------- "digitando" */

.ciis-chat-digitando {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--ciis-cinza-claro);
  border-radius: 14px 14px 14px 4px;
  padding: 13px 15px;
  display: flex;
  gap: 4px;
}

.ciis-chat-digitando span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ciis-cinza-medio);
  animation: ciis-chat-pontinho 1.2s ease-in-out infinite;
}

.ciis-chat-digitando span:nth-child(2) { animation-delay: .18s; }
.ciis-chat-digitando span:nth-child(3) { animation-delay: .36s; }

@keyframes ciis-chat-pontinho {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

/* -------------------------------------------------- selo de nao lida */

.ciis-chat-selo {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--ciis-preto);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
  z-index: 3;
  border: 2px solid #fff;
  animation: ciis-chat-selo-entrar .5s ease both;
  animation-delay: 5.6s;
}

.ciis-chat-lido .ciis-chat-selo { display: none; }

@keyframes ciis-chat-selo-entrar {
  from { transform: scale(0); }
  60%  { transform: scale(1.25); }
  to   { transform: scale(1); }
}

/* -------------------------------------------------- botao mais vivo */

/* Dois aneis defasados: leem melhor que um so, sem virar pisca-pisca. */
.ciis-chat-pulso-2 { animation-delay: 1.2s; }

.ciis-chat-botao {
  transition: transform .25s ease, background .25s ease;
}

.ciis-chat-botao:hover { transform: scale(1.08); }
.ciis-chat-botao:active { transform: scale(0.96); }

.ciis-chat.aberto .ciis-chat-botao { background: var(--ciis-preto); }

/* Balao com rabicho, para parecer fala e nao aviso. */
.ciis-chat-balao::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 2px solid var(--ciis-laranja);
  border-bottom: 2px solid var(--ciis-laranja);
  transform: rotate(45deg);
}

.ciis-chat-balao { position: relative; }

/* Sem movimento: o selo e o ponto verde continuam, so nao animam. */
@media (prefers-reduced-motion: reduce) {
  .ciis-chat-selo,
  .ciis-chat-digitando span,
  .ciis-chat-status::before { animation: none !important; }
  .ciis-chat-selo { transform: none; }
}

/* --------------------------------------------------------------------------
   Foto do hero

   O espaco do template era 654x859. A foto da CIIS e mais alta, entao ela
   transbordava a altura do hero e era cortada embaixo, ficando grande demais
   na tela.

   A altura passa a ser limitada pela propria janela: a foto nunca ultrapassa
   a secao, em monitor nenhum. A largura acompanha sozinha, sem distorcer.
   Ancorada embaixo, como se a pessoa estivesse apoiada na base do hero.
   -------------------------------------------------------------------------- */

.banner-section-h1 .hero-image,
.hero-image {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
}

.banner-section-h1 .hero-image img,
.hero-image picture,
.hero-image img {
  max-height: min(74vh, 660px);
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom right;
  display: block;
  margin-left: auto;
}

/* Telas largas comportam a foto um pouco maior sem apertar o titulo. */
@media (min-width: 1600px) {
  .banner-section-h1 .hero-image img,
  .hero-image img { max-height: min(78vh, 760px); }
}

/* Notebook de tela baixa: reduz mais, senao a foto domina a dobra. */
@media (max-height: 760px) and (min-width: 992px) {
  .banner-section-h1 .hero-image img,
  .hero-image img { max-height: 68vh; }
}

/* Em tela media os cartoes se aproximariam do texto: saem de cena. */
@media (max-width: 1199px) {
}

/* --------------------------------------------------------------------------
   Posicao e tamanho do selo

   O template ancorava o selo em calc(50% - 100px), medindo pela coluna
   inteira. Só que a coluna (645x660) e maior que o conjunto dos tres
   quadrados (593x630), entao o selo caia 76px a direita e 65px abaixo do
   centro real do conjunto.

   Aqui ele e ancorado no centro dos quadrados (46% x 47,5% da coluna) e
   centrado por transform, que independe do tamanho — assim continua no lugar
   se o diametro mudar.
   -------------------------------------------------------------------------- */

.why-choose-us-section-h1 .ciis-selo,
.ciis-selo {
  width: clamp(168px, 37%, 244px) !important;
  height: auto !important;
  left: 46% !important;
  top: 47.5% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   Calibragem da logo nova (so "CIIS", sem a assinatura)

   A logo antiga era 3:1 porque trazia "agência e gráfica digital" embaixo.
   Nela o "CIIS" ocupava 54% da altura da imagem — o resto era a assinatura.
   A logo nova e 3.21:1 e o "CIIS" ocupa 100%.

   Resultado pratico: na MESMA altura de imagem, a marca aparece quase o
   dobro do tamanho. No cabecalho ela passou a gritar por cima do menu.

   Medi e comparei no navegador em 40, 30 e 24px. 40 domina a barra, 24
   some ao lado do menu, 30 equilibra. As outras posicoes seguem o mesmo
   fator (30/52 = 0.58), conferidas uma a uma.

   A largura fica em auto de proposito: travar largura E altura espremeria
   a logo, que agora tem outra proporcao.
   -------------------------------------------------------------------------- */

.main-header .logo img {
  height: 30px !important;
  width: auto !important;
  max-height: 30px !important;
}

.main-header .nav-logo img {
  height: 26px !important;
  width: auto !important;
  max-height: 26px !important;
}

.sticky-header .logo img {
  height: 24px !important;
  width: auto !important;
  max-height: 24px !important;
}

.footer-logo img {
  height: 36px !important;
  width: auto !important;
  max-width: none !important;
}

/* --------------------------------------------------------------------------
   Secao "Fale com a gente" sem foto

   Essa secao usava uma foto como fundo da caixa inteira, e por causa disso 7
   das 12 colunas ficavam VAZIAS: existiam so para a foto aparecer. O dono
   decidiu nao usar foto da loja aqui.

   Em vez de deixar o buraco, a coluna virou conteudo: quem nao quer preencher
   formulario tem o WhatsApp direto ali do lado, que e o CTA unico do site.
   O fundo e preto chapado — cor de estrutura da marca, nao gradiente.
   -------------------------------------------------------------------------- */

.ciis-contato-fundo {
  position: absolute;
  inset: 0;
  background-color: var(--ciis-preto);
  border-radius: inherit;
  overflow: hidden;
}

.ciis-contato-lado {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px);
  color: #fff;
}

.ciis-contato-lado h3 {
  color: #fff;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.25;
  margin: 0 0 14px;
}

.ciis-contato-lado p {
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.65;
  max-width: 42ch;
  margin: 0 0 26px;
}

.ciis-contato-botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ciis-laranja);
  color: #fff;
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 18px);
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.ciis-contato-botao:hover,
.ciis-contato-botao:focus {
  background: #ff6f1f;
  color: #fff;
  transform: translateY(-2px);
}

.ciis-contato-botao i { font-size: 1.25em; }

.ciis-contato-horario {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.9;
}

/* Em tela estreita as duas colunas empilham: o bloco escuro em cima e o
   formulario embaixo, sem o padding gigante do desktop. */
@media (max-width: 1199px) {
  .ciis-contato-lado { padding: 32px 24px 8px; }
}

/* O template desenhou esta secao para ter FOTO atras: titulo, rotulos e
   bordas vinham em tom escuro, que funcionava sobre a imagem clara. Com o
   fundo preto chapado tudo virou escuro sobre escuro.

   Medido no navegador antes de corrigir:
     titulo         rgb(36,32,31)      quase preto
     sub-titulo     rgb(109,108,116)   cinza sem contraste
     texto digitado rgb(34,34,34)      INVISIVEL ao digitar
     borda do campo rgba(0,0,0,.09)    preto 9% sobre preto

   O terceiro e o grave: nao e feio, e quebrado. A pessoa digitaria o nome e
   nao veria o que escreveu. */

.contact-section-h1 .sec-title-h1 .title,
.contact-section-h1 .sec-title-h1 .title * {
  color: #fff !important;
}

.contact-section-h1 .sec-title-h1 .sub-title {
  color: var(--ciis-laranja) !important;
}

.contact-section-h1 .contact-form input,
.contact-section-h1 .contact-form textarea {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.22) !important;
}

.contact-section-h1 .contact-form input:focus,
.contact-section-h1 .contact-form textarea:focus {
  border-bottom-color: var(--ciis-laranja) !important;
}

.contact-section-h1 .contact-form input::placeholder,
.contact-section-h1 .contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  opacity: 1;
}

/* O objeto 3D e bonito, mas atras do formulario ele disputava com o texto.
   Recuado e mais apagado ele continua ali sem atrapalhar a leitura. */
.contact-section-h1 .anim-icons .image-1 {
  opacity: 0.38;
  z-index: 1;
}

.contact-section-h1 .form-column,
.contact-section-h1 .contact-form {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Botao "voltar ao topo" x botao do WhatsApp

   O template poe o "voltar ao topo" em right:50px / bottom:50px. O widget de
   chat que entrou depois ocupa right:20px / bottom:20px com 62px de diametro
   — ou seja, de right:20 a right:82. As duas areas se cruzam num quadrado de
   32x32, e como o chat tem z-index 9999 contra 99, o botao de voltar ao topo
   fica PARCIALMENTE ESCONDIDO atras dele. Aparece so uma meia-lua.

   Empilhar um sobre o outro nao resolve: o balao de mensagem sobe nesse
   mesmo espaco e o painel aberto do chat e alto. Qualquer altura escolhida
   colide em algum estado.

   Entao o canto direito fica inteiro para o WhatsApp, que e o CTA unico do
   site, e o voltar ao topo vai para a esquerda. Nunca mais se encontram.
   -------------------------------------------------------------------------- */

.back-to-top-wrapper {
  right: auto !important;
  left: 24px !important;
  bottom: 24px !important;
}

/* --------------------------------------------------------------------------
   Catalogo: o rotulo do card e o tamanho do card

   Dois defeitos que tinham a MESMA causa, e a causa nao era o seletor:
   era a especificidade.

   O template monta cada card com duas imagens irmas e as alterna no hover:
   a de baixo fica absoluta, deslocada e borrada; a de cima aparece. Quando
   envelopei as imagens em <picture> para servir WebP, elas deixaram de ser
   irmas e o seletor do template parou de distinguir uma da outra. Eu
   reescrevi as regras contando os <picture> — e achei resolvido.

   Nao estava. O template declara a imagem em

     .project-section-h1 .outer-box .project-block-h1 .inner-block .image img

   que vale 5 classes. A minha versao tinha 3 classes mais o :first-child,
   ou seja 4, e perdia. A imagem seguia relative. As duas ficavam EMPILHADAS
   uma embaixo da outra: cada card media 964px em vez de 482px e sobrava
   meio card de branco embaixo de cada um — o vazio enorme que o dono viu.

   Como a caixa de texto e absoluta com bottom:0 do bloco, ela ia parar nesse
   fundo falso: fora da foto, so aparecendo de relance ao passar o mouse.
   Arrumado o empilhamento, ela volta para dentro da imagem.

   Licao: quando uma regra "nao pega", conferir a especificidade ANTES de
   reescrever o seletor. Aqui o seletor estava certo desde a primeira vez.
   Por isso estas regras repetem o prefixo inteiro do template.
   -------------------------------------------------------------------------- */

/* display:contents nao serviria aqui: :first-child e :nth-child olham o DOM,
   nao o layout. Entao as regras precisam mesmo contar os <picture>. */

.project-section-h1 .outer-box .project-block-h1 .inner-block .image picture:first-child img {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  transform: translateX(50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
}

.project-section-h1 .outer-box .project-block-h1 .inner-block:hover .image picture:first-child img {
  transform: translateX(0) scaleX(1);
  opacity: 1;
  filter: blur(0);
}

.project-section-h1 .outer-box .project-block-h1 .inner-block:hover .image picture:nth-child(2) img {
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
}

/* --------------------------------------------------------------------------
   O nome do servico fica sempre a vista

   O template esconde o rotulo empurrando a caixa 173px para baixo e so a
   traz no :hover. Mesmo com o card no tamanho certo isso continua errado
   para ESTE site por tres motivos:

     1. no celular nao existe hover, e o trafego pago chega em maioria pelo
        celular — eram seis quadrados sem legenda nenhuma;
     2. quem passa o mouse rapido nao chega a ler, que foi exatamente a
        queixa do dono;
     3. o catalogo existe para dizer o que a CIIS faz. Esconder o nome do
        servico atras de uma interacao derruba o unico trabalho da secao.

   Entao o rotulo fica fixo no pe do card, com uma camada preta solida com
   transparencia por baixo para o texto ler sobre qualquer foto — cor solida,
   nao degrade, que e regra da marca. O hover continua existindo: a foto
   troca e a seta gira.
   -------------------------------------------------------------------------- */

.project-section-h1 .outer-box .project-block-h1 .inner-block .content-box,
.project-section-h1 .outer-box .project-block-h1 .inner-block:hover .content-box {
  transform: translateY(0);
  background-color: rgba(0, 0, 0, 0.66);
  padding: 22px 28px 18px;
}

.project-section-h1 .outer-box .project-block-h1 .inner-block:hover .content-box {
  background-color: rgba(0, 0, 0, 0.78);
}

.project-section-h1 .outer-box .project-block-h1 .inner-block .content-box .inner-box .content .sub-title {
  color: var(--ciis-laranja);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.project-section-h1 .outer-box .project-block-h1 .inner-block .content-box .inner-box .icon {
  margin-bottom: 4px;
}

/* A tarja tem a MESMA altura nos seis cards.

   Quatro titulos cabem numa linha e dois precisam de duas ("Papelaria,
   talao, receituario e adesivo" e "Medalha, trofeu e chaveiro com logo").
   Com a altura livre, a tarja desses dois ficava mais alta e a fileira
   perdia o alinhamento.

   O titulo passa a reservar sempre duas linhas e a assentar o texto no pe
   dessa caixa: os de uma linha ficam na mesma base dos de duas, e a tarja
   fecha na mesma altura em todos. A medida vai em em, com o line-height
   fixado logo acima, para continuar valendo quando a fonte muda de tamanho
   nas telas menores. */

.project-section-h1 .outer-box .project-block-h1 .inner-block .content-box .inner-box .content .title {
  line-height: 1.35;
  min-height: 2.7em;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .project-section-h1 .outer-box .project-block-h1 .inner-block .content-box {
    padding: 18px 20px 16px;
  }

  .project-section-h1 .outer-box .project-block-h1 .inner-block .content-box .inner-box .content .title,
  .project-section-h1 .outer-box .project-block-h1 .inner-block .content-box .inner-box .content .title a {
    font-size: clamp(16px, 4.4vw, 20px);
  }
}

/* --------------------------------------------------------------------------
   Enfeite nao pode roubar clique

   O .shape-8 e um enfeite de 860x860 posicionado por cima da secao do
   catalogo. Ele nao tem nada clicavel dentro, mas estava com pointer-events
   em auto — e o clique no botao "Ver o catalogo" caia NELE, nao no botao.
   O botao simplesmente nao funcionava, e nao havia nada na tela que
   explicasse por que. Mesma coisa no card de Brindes e na seta dele.

   O proprio template ja faz isso em .shape-6, .shape-7 e .anim-icons; so
   esqueceu dos outros. Aqui a regra fica para todos.

   Conferido antes de aplicar: nenhum desses blocos tem link, botao ou campo
   dentro. Desligar o clique neles nao tira nada de ninguem.
   -------------------------------------------------------------------------- */

.shape-1,
.shape-2,
.shape-3,
.shape-8,
.anim-icons,
.anim-icons * {
  pointer-events: none !important;
}

/* O widget de chat e caso diferente: ele TEM botoes dentro. O problema e o
   embrulho — ele e uma coluna com espaco vazio entre o balao e o botao, e
   esse vazio engolia o clique do que estivesse atras. O embrulho fica
   transparente ao clique; os filhos continuam clicaveis. */
.ciis-chat {
  pointer-events: none;
}

.ciis-chat-botao,
.ciis-chat-balao,
.ciis-chat-painel {
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   "+800 marcas impulsionadas desde 2014": o traco passava por cima

   O template desenha a linha com dois pseudo-elementos de 539px e abre o vao
   do meio com uma distancia FIXA: right:209px num, left:209px no outro,
   medidos a partir das bordas do proprio texto. Isso so funciona com o texto
   original, que era curto. O nosso tem 332px: 209px para dentro cai no meio
   das letras, e a linha atravessa "+800 MA" de um lado e o fim da frase do
   outro.

   Aqui a distancia deixa de ser fixa e passa a ser medida pela borda do
   texto — calc(100% + 24px) —, entao o vao acompanha a frase qualquer que
   seja o comprimento dela e em qualquer largura de tela. O traco continua
   existindo, que foi o que o dono pediu; so nao invade mais a escrita.
   -------------------------------------------------------------------------- */

.claint-section-h1 .sec-title .sub-title::before {
  right: calc(100% + 24px);
  left: auto;
}

.claint-section-h1 .sec-title .sub-title::after {
  left: calc(100% + 24px);
  right: auto;
}

/* --------------------------------------------------------------------------
   A foto das paginas internas

   As seis paginas nasceram so com texto. A home tem dezenove fotos; quem caia
   de um anuncio de "grafica rapida Piraju" na pagina da Grafica encontrava uma
   parede de listas e nao via nada do que a CIIS faz. Entra uma foto larga por
   pagina, logo depois da primeira chamada — antes da lista, enquanto a pessoa
   ainda esta decidindo se fica.

   A altura e fixa em proporcao (nao em pixel) para a faixa nao mudar de
   tamanho entre uma pagina e outra, e a imagem preenche por cover: o assunto
   e sempre centralizado no arquivo, entao o corte das bordas nao tira nada.
   -------------------------------------------------------------------------- */

.ciis-foto {
  padding: 0 0 70px;
}

.ciis-foto-quadro {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 12 / 5;
}

.ciis-foto-quadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .ciis-foto {
    padding: 0 0 45px;
  }

  /* no celular uma faixa de 12/5 vira um risco de 90px de altura e nao se
     enxerga o que esta na foto; aqui ela fica quase quadrada */
  .ciis-foto-quadro {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }
}

/* O arquivo e guardado em 3:2 (1200x800), nao no formato final. Assim a MESMA
   foto serve a faixa larga do desktop (12/5) e a quase quadrada do celular
   (4/3): as duas sao recortes de 3:2, nenhuma precisa esticar. Por isso o
   assunto tem de estar na area central da imagem gerada. */

/* --------------------------------------------------------------------------
   Blog: a pagina da materia

   O template traz uma pagina de post com barra lateral, comentarios e
   formulario de comentario. Nada disso entrou:

     - barra lateral com busca, categorias e "posts recentes" so faz sentido
       com dezenas de materias. Com quatro, ela ocupa um terco da tela para
       repetir o que ja esta na pagina ao lado;
     - comentario pede servidor e moderacao, e caixa de comentario vazia em
       site de empresa pequena anuncia que ninguem passou por ali.

   Sobra uma coluna unica de leitura. A largura e limitada em 72ch porque
   linha longa demais faz o olho perder a proxima: o texto e o produto aqui.
   -------------------------------------------------------------------------- */

.ciis-artigo {
  padding: 70px 0 20px;
}

.ciis-artigo-miolo {
  max-width: 72ch;
  margin: 0 auto;
}

.ciis-artigo-capa {
  position: relative;
  margin: 0 0 28px;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.ciis-artigo-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* a data em cima da foto, no mesmo desenho do card do blog */
.ciis-artigo-data {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background-color: var(--ciis-laranja);
  color: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  text-align: center;
  line-height: 1.1;
}

.ciis-artigo-data .dia {
  display: block;
  font-size: 22px;
  font-weight: 700;
}

.ciis-artigo-data .mes {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ciis-artigo-meta {
  list-style: none;
  display: flex;
  gap: 24px;
  padding: 0;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--text-color);
}

.ciis-artigo-meta i {
  color: var(--ciis-laranja);
  margin-right: 6px;
}

.ciis-artigo-miolo h2 {
  font-size: 26px;
  margin: 38px 0 14px;
}

.ciis-artigo-miolo p {
  margin-bottom: 18px;
  line-height: 1.75;
}

.ciis-artigo-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

.ciis-artigo-lista li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  line-height: 1.7;
}

/* quadrado laranja no lugar do bullet redondo, igual as listas das landings */
.ciis-artigo-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background-color: var(--ciis-laranja);
}

/* A frase que resume a materia. Barra lateral laranja e fundo claro, sem
   aspas decorativas: nao e citacao de ninguem, e o ponto do texto. */
.ciis-artigo-destaque {
  margin: 30px 0;
  padding: 20px 26px;
  border-left: 4px solid var(--ciis-laranja);
  background-color: var(--ciis-off-white);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--headings-color);
}

.ciis-artigo-navegacao {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--ciis-cinza-claro);
  font-weight: 600;
}

.ciis-artigo-navegacao .proximo {
  text-align: right;
}

.ciis-artigo-navegacao a {
  color: var(--headings-color);
}

.ciis-artigo-navegacao a:hover {
  color: var(--ciis-laranja);
}

/* A lista do blog reaproveita o card do carrossel da home. Ali ele e slide;
   aqui vira coluna da grade, e precisa da margem que o slide nao tem. */
.ciis-blog-lista {
  padding: 70px 0 40px;
}

.ciis-blog-lista .news-block {
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .ciis-artigo {
    padding: 45px 0 10px;
  }

  .ciis-artigo-miolo h2 {
    font-size: 22px;
  }

  .ciis-artigo-destaque {
    font-size: 17px;
    padding: 16px 20px;
  }

  /* no celular as duas setas lado a lado ficam com 4 palavras cada; em
     coluna cada titulo fica legivel */
  .ciis-artigo-navegacao {
    flex-direction: column;
    gap: 18px;
  }

  .ciis-artigo-navegacao .proximo {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   Card do blog: a categoria sumia embaixo da data

   A caixa da data e absoluta, com z-index 3, e cai justamente sobre a linha
   de "tempo de leitura + categoria". No template isso nunca aparecia porque
   a linha era curta em ingles ("2 Comment" / "UX/UI") e parava antes. Com
   "Comunicação visual" ela chega embaixo da data e some o fim da palavra —
   parecia corte de texto, mas era sobreposicao.

   Medido no navegador: a caixa da data tem 83px. A linha reserva 95px a
   direita e passa a quebrar, em vez de correr por baixo.
   -------------------------------------------------------------------------- */

.news-block .inner-box .content-box .content .post-meta {
  flex-wrap: wrap;
  row-gap: 4px;
  padding-right: 95px;
}

.news-block .post-meta li {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Pagina de Servicos

   Duas camadas, porque atende duas pessoas diferentes:

     1. os quatro cartoes, para quem ainda nao sabe em qual frente o pedido
        dele se encaixa — foto, resumo e os grupos principais;
     2. o indice completo, para quem ja sabe o nome do que quer e so precisa
        confirmar que a CIIS faz. Essa pessoa nao navega: ela usa Ctrl+F.

   As duas saem da MESMA fonte que gera as landings (tools/paginas.py), entao
   item novo na Grafica aparece aqui sozinho. Copiar a mao criaria duas
   verdades, e a segunda envelheceria calada.
   -------------------------------------------------------------------------- */

.ciis-servicos {
  padding: 80px 0 30px;
}

.ciis-servico-cartao {
  border: 1px solid var(--ciis-cinza-claro);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 30px;
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
  transition: 300ms;
}

.ciis-servico-cartao:hover {
  border-color: var(--ciis-laranja);
}

.ciis-servico-foto {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.ciis-servico-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: 500ms;
}

.ciis-servico-cartao:hover .ciis-servico-foto img {
  transform: scale(1.04);
}

.ciis-servico-corpo {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ciis-servico-titulo {
  font-size: 24px;
  margin-bottom: 8px;
}

.ciis-servico-titulo a {
  color: var(--headings-color);
}

.ciis-servico-titulo a:hover {
  color: var(--ciis-laranja);
}

.ciis-servico-resumo {
  margin-bottom: 16px;
}

.ciis-servico-itens {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.ciis-servico-itens li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
  font-weight: 600;
  color: var(--headings-color);
}

.ciis-servico-itens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 7px;
  height: 7px;
  background-color: var(--ciis-laranja);
}

/* o link fica colado no pe do cartao mesmo quando um cartao tem menos itens
   que o outro — e o que mantem a fileira alinhada */
.ciis-servico-link {
  margin-top: auto;
  font-weight: 600;
  color: var(--ciis-laranja);
}

.ciis-servico-link i {
  margin-left: 8px;
  transition: 300ms;
}

.ciis-servico-link:hover i {
  margin-left: 14px;
}

/* --- o indice --- */

.ciis-indice {
  padding: 50px 0 80px;
}

.ciis-indice-ajuda {
  max-width: 60ch;
  margin: 14px auto 0;
}

.ciis-indice-bloco {
  padding-top: 34px;
  margin-top: 34px;
  border-top: 1px solid var(--ciis-cinza-claro);
}

.ciis-indice-bloco:first-child {
  border-top: 0;
  margin-top: 0;
}

.ciis-indice-segmento {
  font-size: 22px;
  margin-bottom: 20px;
}

.ciis-indice-segmento a {
  color: var(--headings-color);
}

.ciis-indice-segmento a:hover {
  color: var(--ciis-laranja);
}

/* colunas automaticas: a Grafica tem quinze grupos e a Impressao 3D tem
   quatro. Grade fixa deixaria um buraco numa e apertaria a outra. */
.ciis-indice-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px 30px;
}

.ciis-indice-grupo h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--ciis-laranja);
}

.ciis-indice-grupo ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ciis-indice-grupo li {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 4px;
}

@media (max-width: 767px) {
  .ciis-servicos {
    padding: 50px 0 10px;
  }

  .ciis-indice {
    padding: 30px 0 50px;
  }

  .ciis-servico-corpo {
    padding: 22px 22px 24px;
  }
}

/* --------------------------------------------------------------------------
   Perguntas frequentes

   O template poe o accordion em duas colunas lado a lado. Aqui vai em coluna
   unica: sao 23 perguntas, e em duas colunas o olho pula de uma para a outra
   sem saber qual vem depois. Agrupadas por assunto — pedido, arquivo,
   impressao, agencia, visual — a pessoa acha a dela sem ler as 23.

   A largura para em 80ch pelo mesmo motivo do blog: resposta e texto, e
   linha larga demais faz perder a proxima.
   -------------------------------------------------------------------------- */

.ciis-faq {
  padding: 70px 0 40px;
}

.ciis-faq-miolo {
  max-width: 80ch;
  margin: 0 auto;
}

.ciis-faq-grupo + .ciis-faq-grupo {
  margin-top: 46px;
}

.ciis-faq-assunto {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ciis-laranja);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ciis-cinza-claro);
}

.ciis-faq .accordion-box .block {
  border: 1px solid var(--ciis-cinza-claro);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  background-color: #fff;
}

.ciis-faq .accordion-box .block.active-block {
  border-color: var(--ciis-laranja);
}

.ciis-faq .accordion-box .acc-btn {
  /* o template capitaliza cada palavra. Em ingles passa; em portugues vira
     "Qual O Prazo De Entrega?", com artigo e preposicao em maiuscula, que e
     erro de ortografia e nao estilo. */
  text-transform: none;
  position: relative;
  padding: 18px 60px 18px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: var(--headings-color);
  transition: 300ms;
}

.ciis-faq .accordion-box .acc-btn:hover,
.ciis-faq .accordion-box .acc-btn.active {
  color: var(--ciis-laranja);
}

.ciis-faq .accordion-box .acc-btn .icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  background-color: var(--ciis-preto);
  transition: 300ms;
}

/* o + vira - girando 45 graus: um icone so, sem troca de fonte */
.ciis-faq .accordion-box .acc-btn.active .icon {
  background-color: var(--ciis-laranja);
  transform: translateY(-50%) rotate(45deg);
}

.ciis-faq .accordion-box .acc-content {
  display: none;
  padding: 0 22px 20px;
}

.ciis-faq .accordion-box .acc-content.current {
  display: block;
}

.ciis-faq .accordion-box .acc-content .text {
  line-height: 1.75;
}

@media (max-width: 767px) {
  .ciis-faq {
    padding: 45px 0 25px;
  }

  .ciis-faq .accordion-box .acc-btn {
    font-size: 16px;
    padding: 16px 54px 16px 18px;
  }

  .ciis-faq .accordion-box .acc-content {
    padding: 0 18px 18px;
  }
}

/* --------------------------------------------------------------------------
   Pagina de Contato

   O formulario NAO envia e-mail: abre o WhatsApp com tudo preenchido. Site
   estatico nao tem servidor para receber POST, e formulario que finge enviar
   e pior que nao ter formulario nenhum — a pessoa acha que mandou e fica
   esperando resposta que nunca vem. O aviso logo acima dos campos diz isso
   em uma linha, antes de a pessoa digitar.
   -------------------------------------------------------------------------- */

.ciis-contato-pagina {
  padding: 70px 0;
}

.ciis-contato-pagina .outer-box {
  background-color: var(--ciis-preto);
  border-radius: 30px;
  padding: 60px 0;
  max-width: 1854px;
  margin: 0 auto;
}

.ciis-contato-pagina .sec-title-h1 .title,
.ciis-contato-pagina .sec-title-h1 .sub-title {
  color: #fff;
}

.ciis-contato-aviso {
  color: var(--text-color2);
  max-width: 46ch;
  margin-bottom: 26px;
}

/* campo escuro sobre fundo preto: borda define o limite, nao a cor de fundo

   O PREFIXO LONGO E O :not() SAO OBRIGATORIOS. O template declara:

     .contact-section-h2 .contact-form input:not([type=submit])

   que vale (0,3,1) — o `:not()` herda a especificidade do argumento, e um
   seletor de atributo conta como classe. A regra curta
   `.ciis-contato-pagina .contact-form input` vale (0,2,1) e PERDIA.

   Resultado, medido no ar: os tres campos de texto apareciam com fundo roxo
   #0D0A16 e o que a pessoa digitava saia em lilas #9C94B3, enquanto a caixa de
   mensagem (textarea, que o seletor do template nao alcanca) seguia esta
   regra e ficava branca sobre branco a 6%. Os campos do mesmo formulario com
   duas aparencias diferentes.

   Quarta vez que a especificidade do Webtec derruba um atalho neste arquivo.
   Quando uma regra "nao funciona", medir no navegador antes de reescrever. */
.contact-section-h2.ciis-contato-pagina .contact-form input:not([type=submit]),
.contact-section-h2.ciis-contato-pagina .contact-form textarea {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #fff;
  padding: 14px 18px;
  margin-bottom: 18px;
  transition: 300ms;
}

.contact-section-h2.ciis-contato-pagina .contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-section-h2.ciis-contato-pagina .contact-form input:not([type=submit])::placeholder,
.contact-section-h2.ciis-contato-pagina .contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.contact-section-h2.ciis-contato-pagina .contact-form input:not([type=submit]):focus,
.contact-section-h2.ciis-contato-pagina .contact-form textarea:focus {
  border-color: var(--ciis-laranja);
  outline: none;
}

.ciis-contato-pagina .image-column .image {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.ciis-contato-pagina .image-column .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ciis-contato-pagina .info-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  color: #fff;
}

.ciis-contato-pagina .info-box .icon {
  width: 54px;
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--ciis-laranja);
  flex-shrink: 0;
}

.ciis-contato-pagina .info-box .title {
  font-size: 13px;
  color: var(--text-color2);
}

.ciis-contato-pagina .info-box .phone a {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.ciis-contato-pagina .info-box .phone a:hover {
  color: var(--ciis-laranja);
}

/* rotulo so para leitor de tela: o placeholder some quando a pessoa digita,
   e campo sem rotulo deixa quem usa leitor sem saber o que preencheu */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- endereco, horario e canais --- */

.ciis-contato-dados {
  padding: 20px 0 60px;
}

.ciis-dado {
  margin-bottom: 26px;
}

.ciis-dado h4 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ciis-laranja);
  margin-bottom: 10px;
}

.ciis-dado p {
  line-height: 1.8;
  margin: 0;
}

/* --- mapa --- */

.ciis-mapa .map {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  /* o mapa do Google e a unica coisa colorida fora da marca na pagina;
     saturar menos faz ele encostar no resto sem precisar de filtro inventado */
  filter: saturate(0.85);
}

@media (max-width: 991px) {
  .ciis-contato-pagina .image-column {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .ciis-contato-pagina {
    padding: 45px 0;
  }

  .ciis-contato-pagina .outer-box {
    border-radius: 20px;
    padding: 40px 0;
  }

  .ciis-mapa .map {
    height: 300px;
  }
}

/* O template capitaliza cada palavra do submenu. Em ingles passa; aqui vira
   "Comunicação Visual", com a segunda palavra em maiuscula sem motivo. O
   nome do segmento e escrito como no resto do site. */

.main-menu .navigation > li.dropdown > ul > li > a,
.mobile-menu .navigation li > a {
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Cards do blog: altura igual e o traco fora do texto

   DOIS DEFEITOS, A MESMA ORIGEM — medida fixa feita para o texto em ingles.

   1. O TRACO SOBRE "Ler a matéria"

   O template desenha a linha com um pseudo-elemento absoluto e posicao em
   pixel cravado: left:92.25px. Essa conta foi feita para "Read More", que e
   curto. "Ler a matéria" mede 92,34px — a linha comeca antes de o texto
   acabar e passa por cima dele.

   Em vez de corrigir o numero (que quebraria de novo em outra palavra ou
   outro tamanho de fonte), a linha deixa de ser absoluta e vira item da
   propria flex: o texto fica em primeiro, a linha no meio esticando o que
   sobrar, a seta por ultimo. Assim nunca encosta, em largura nenhuma.

   2. CARDS DE ALTURAS DIFERENTES

   Medido: 450, 422, 422 e 460px. Dois motivos — titulo de duas ou tres
   linhas, e a categoria "Comunicação visual", que quebra em duas linhas.

   A correcao nao e fixar altura (texto maior seria cortado): e deixar a
   coluna esticar e o miolo crescer, com a faixa de "Ler a matéria" empurrada
   para o pe. Os cards terminam juntos e nenhum texto some.
   -------------------------------------------------------------------------- */

/* --- o traco --- */

.news-block .inner-box .content-box .btn-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.news-block .inner-box .content-box .btn-box .text {
  order: 1;
  flex: 0 0 auto;
}

.news-block .inner-box .content-box .btn-box::before {
  order: 2;
  position: static;
  flex: 1 1 auto;
  width: auto;
  min-width: 20px;
  margin: 0;
}

.news-block .inner-box .content-box .btn-box .readmore {
  order: 3;
  flex: 0 0 auto;
}

/* --- altura igual --- */

.ciis-blog-lista .news-block,
.news-section .news-swiper-two .swiper-slide {
  display: flex;
  height: auto;
}

.ciis-blog-lista .news-block > .inner-box,
.news-section .news-swiper-two .swiper-slide > .inner-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ciis-blog-lista .news-block .content-box,
.news-section .news-swiper-two .swiper-slide .content-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* o miolo cresce; a faixa do "Ler a matéria" fica colada no pe */
.ciis-blog-lista .news-block .content-box > .content,
.news-section .news-swiper-two .swiper-slide .content-box > .content {
  flex: 1 1 auto;
}

/* Esticar a coluna so iguala cards que dividem a MESMA fileira. O quarto card
   fica sozinho na segunda fileira e volta a ter a altura do proprio conteudo.
   Para a altura ser igual sempre, o que varia precisa de espaco reservado:

     titulo    — tres linhas, que e o maior que temos hoje
     categoria — sempre em duas linhas, porque "Comunicação visual" nao cabe
                 ao lado do tempo de leitura e, deixada livre, quebra so em
                 alguns cards

   As medidas vao em em, nao em pixel: assim continuam valendo quando a fonte
   muda de tamanho nas telas menores. */

.news-block .inner-box .content-box .content .title {
  min-height: 3.9em;   /* 3 linhas a 1,3 de entrelinha */
}

/* ATENCAO: o prefixo completo e proposital. O template declara este mesmo
   elemento em `.news-block .inner-box .content-box .content .post-meta`, que
   vale 5 classes — um seletor curto perde e a regra nao pega. Ja aconteceu
   aqui e no catalogo: quando uma regra "nao funciona", conferir a
   especificidade ANTES de reescrever o seletor. */

.news-block .inner-box .content-box .content .post-meta {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 2px;
}

/* ==========================================================================
   AS CORES DO TEMPLATE QUE AINDA PINTAVAM NA TELA

   O checkup de 17/10/2026 mediu a pagina no ar e achou a paleta roxa/lavanda
   do Webtec viva em oito regras do style.css:

     #37334B  roxo         -> os numeros 01/02/03 e um hover
     #E6E0FA  lavanda      -> quatro tracos e formas, inclusive o traco ao
                              lado de "Ler a materia"
     #B2C1C0  cinza-verde  -> os rotulos do contato no menu mobile
     rgba(255,67,46,.2)    -> a linha a esquerda das setas dos depoimentos
                              (vermelho do template, nao o laranja da CIIS)

   Elas passaram porque o check.py vigiava uma cor so. Agora vigia estas
   tambem — e a lista fica em CORES_TEMPLATE para ninguem reintroduzir.

   ATENCAO AO PREFIXO. Os seletores abaixo repetem o caminho inteiro de
   proposito: o do template tem ate seis classes de profundidade e um atalho
   PERDE em silencio. Isso ja aconteceu tres vezes neste arquivo — nos cards
   do catalogo, no traco do "+800 marcas" e no post-meta do blog. Quando uma
   regra "nao funciona", conferir a especificidade ANTES de reescrever.
   -------------------------------------------------------------------------- */

/* --- os numeros 01/02/03 do "Como funciona" ---

   A secao tem fundo escuro e o card e branco a 5%. O template punha um roxo
   escuro ali: um marcador de passo que quase nao se via. Em laranja ele
   cumpre o papel de marcar a ordem. Branco sobre #FF5A00 da 3,0 de contraste,
   que e o minimo para texto grande — e aqui a fonte tem 36px. */
.services-section-h1 .outer-box .upper-box .service-block .inner-block .number {
  background: var(--ciis-laranja);
}

/* --- o icone de passo da secao "Fale com a gente" ---
   Em repouso ja e laranja; o hover ia para o roxo. Vai para o preto. */
.cta-section-h3 .ks-step-icon:hover {
  background-color: var(--ciis-preto);
}

/* --- o traco acima dos depoimentos --- */
.testimonial-section .testi-swiper {
  border-top-color: var(--ciis-cinza-claro);
}

/* --- as setas do carrossel de depoimentos ---

   Duas correcoes numa. O fundo era lavanda, e a cor da seta vinha de
   `var(--theme-color3)`, que o template NUNCA declara — a seta caia no cinza
   do texto por heranca. E o mesmo defeito das fontes `--title-font` e
   `--text-font` ja registrado no STATUS. Aqui a cor vai escrita.

   O hover do template ja e laranja com seta branca, e continua. */
.testimonial-section .swiper-navs-box .nav-box .swiper-button-prev,
.testimonial-section .swiper-navs-box .nav-box .swiper-button-next {
  background-color: var(--ciis-off-white);
  color: var(--ciis-preto);
}

/* --- a linha comprida a esquerda das setas ---
   Era o vermelho #FF432E do template a 20%. Vai para o laranja da CIIS na
   mesma transparencia. */
.testimonial-section .swiper-navs-box .nav-box:before {
  background-color: rgba(255, 90, 0, 0.2);
}

/* --- a forma recortada do card do blog ---

   O .content-box nao tem fundo proprio: quem pinta o card e este :after com
   clip-path. Era lavanda sobre pagina branca. Off-white mantem o recorte
   visivel sem inventar uma segunda cor de marca. */
.news-block .inner-box .content-box:after {
  background-color: var(--ciis-off-white);
}

/* --- o traco sob a data do card do blog --- */
.news-block .inner-box .content-box .content .post-meta {
  border-bottom-color: var(--ciis-cinza-claro);
}

/* --- o traco ao lado de "Ler a materia" ---
   Em repouso, cinza. O template ja troca para laranja no hover do card e
   isso continua valendo. */
.news-block .inner-box .content-box .btn-box:before {
  background-color: var(--ciis-cinza-claro);
}

/* --- os rotulos do contato no menu mobile ---
   12px em caixa alta sobre fundo #333. O cinza-verde do template sai; entra o
   cinza medio da marca, que da 5,2 de contraste ali. */
.contact-list-one li .title {
  color: var(--ciis-cinza-medio);
}

/* --- os dois rotulos sobre o laranja a 10% ---

   "Designer no balcao" e "Arte-final na hora" ficam numa caixa com fundo
   laranja a 10% sobre branco. O texto vinha de `--theme-color-dark` (#333) e
   dava 4,04 de contraste — abaixo dos 4,5 exigidos para texto pequeno, e sao
   12px. Dos 59 blocos de texto medidos no site, foram os dois unicos
   reprovados. Escurecer o texto resolve sem mexer no fundo, que e o que da a
   cor de marca a caixa.

   A regra fica presa a essa caixa (`.list-info-box .inner-box`), e nao ao
   `.list-style-one` solto, que aparece em outros lugares com outro fundo. */
.about-section-h1 .outer-box .about-block-h1 .inner-block .list-info-box .inner-box .list-style-one li,
.about-section-h1 .outer-box .about-block-h1 .inner-block .list-info-box .inner-box .list-style-one li i {
  color: #222222;
}

/* --- o cinza do texto corrido ---

   `--text-color` vinha #6d6c74: um cinza com fundo arroxeado, herdado da
   paleta do Webtec. Passava no contraste (5,4 sobre branco) mas puxava para o
   roxo em todo paragrafo do site. #555 e neutro e sobe o contraste para 7,5.

   E uma variavel, logo vale para o site inteiro — foi conferida pagina por
   pagina no preview antes de subir, justamente porque alcanca tudo. */
:root {
  --text-color: #555555;
}