/* ================= IDENTIDADE DO PROJETO =================
   Sobrescreve os tokens do template (css/style-base.css), que vem com o laranja
   padrão do site base. A cor da marca da DCJ é definida só aqui.
========================================================== */
:root{
  --primary-color:#00A85A;
  --primary-color-light:#14C26D;
  --primary-color-dark:#007E43;

  /* style-base.css define --bs-primary a partir de --primary-color, mas as
     versões RGB (usadas nas sombras de foco) são literais e precisam vir junto */
  --bs-primary-rgb:0,168,90;
  --bs-primary-hover-rgb:20,194,109;
  --bs-primary-active-rgb:0,126,67;

  /* HEADER SOBREPOSTO — trocar a arte de fundo é só nesta linha */
  --header-bg-image:url('../imagens/banner/banner-dcjuniformes.webp');
  --header-overlay:linear-gradient(rgba(10,20,14,.72),rgba(10,20,14,.72));
  --header-hairline:rgba(255,255,255,.28);
  --header-hover-bg:rgba(255,255,255,.14);

  /* Verde claro do título das páginas internas, sobre a faixa escura */
  --bread-title-color:#A7D9BF;

  /* Faixa de logos de clientes abaixo do hero */
  --clientes-strip-bg:#F7F8FA;

  /* Verde escuro da faixa de contato das páginas MPI */
  --cta-mpi-bg:#04441F;
  /* Fundo do card de orçamento da coluna lateral das MPIs */
  --mpi-aside-bg:#F4F5F6;

  /* Elevação padrão dos cards do site */
  --card-shadow:0 1px 3px rgba(20,28,36,.06),0 10px 24px -14px rgba(20,28,36,.18);
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ================= HEADER ================= */
header .logo-desktop,header .logo-mobile-menu{width:160px;margin:1rem 0}

header.header--overlay{
  background-color:var(--dark);
  background-image:var(--header-overlay),var(--header-bg-image);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
header.header--overlay .navbar-brand .logo-desktop{width:120px;margin:.75rem 0}

/* Páginas que já têm um fundo próprio atrás do header — o hero da home ou a faixa
   de breadcrumb das internas — recebem o header fora do fluxo e transparente.
   Páginas sem nenhum dos dois (carrinho, pesquisa, 404) mantêm o fundo do próprio
   header, para o texto branco nunca cair sobre conteúdo claro. */
body:has(:is(.hero,.bread--default)) header.header--overlay,
header.header--on-hero{position:absolute;top:0;right:0;left:0;z-index:3;background-color:transparent;background-image:none}

/* BARRA DE CONTATOS
   A linha divisória acompanha a largura do bloco de contatos, não do container:
   assim ela fica sobre os links do header e nunca alcança a logo. */
.header__topbar{padding-top:1.25rem}
.header__contacts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem 1.5rem;
  width:fit-content;
  margin:0 0 0 auto;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--header-hairline);
  font-style:normal;
}
.header__topbar .header__contact{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-size:.875rem;line-height:1.2;transition:color var(--transition)}
.header__topbar .header__contact:is(:hover,:focus-visible){color:var(--primary-color-light)}
.header__topbar .header__contact i{font-size:1rem;opacity:.9}

/* NAVEGAÇÃO PRINCIPAL */
#header-nav .nav-link{color:#fff;font-weight:500;font-size:.9375rem;padding:.5rem .9375rem;border-radius:999px;transition:color var(--transition),background-color var(--transition)}
/* Hover usa o mesmo verde sólido do estado ativo */
#header-nav .nav-link:is(:hover,:focus-visible){color:#fff;background-color:var(--primary-color)}
#header-nav .nav-link.active{color:#fff;background-color:var(--primary-color)}

/* AÇÕES: CARRINHO E CTA */
.header__actions{display:flex;align-items:center;gap:.75rem}

header .widget__cart--btn{color:#fff;font-size:1.125rem}
header .widget__cart a:is(:hover,:focus-visible) .widget__cart--btn{color:var(--primary-color-light)}

.header__cta{--bs-btn-padding-x:1.25rem;border-radius:999px;font-weight:600;white-space:nowrap}

/* HAMBURGER DO MOBILE
   Barras de larguras diferentes, alinhadas à direita. Os três números abaixo
   são as proporções de cada linha — é só neles que se mexe para calibrar. */
.header__toggler{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  width:2.25rem;
  height:2.25rem;
  padding:0;
  border:0;
  background-color:transparent;
  box-shadow:none;
}
.header__toggler>span{display:block;height:3px;border-radius:999px;background-color:#fff}
.header__toggler>span:nth-child(1){width:100%}
.header__toggler>span:nth-child(2){width:65%}
.header__toggler>span:nth-child(3){width:82%}

/* No mobile o header é só logo à esquerda e hamburger à direita, como no layout.
   O carrinho fica fora dessa barra — no desktop ele continua ao lado do CTA. */
@media screen and (max-width:991.98px){
  /* Respiro lateral maior que os .75rem padrão do container, para a logo e o
     hamburger não encostarem na borda da tela */
  #header-nav>.container{padding-inline:1.5rem}
  #header-nav .navbar-brand{order:-1}
  #header-nav .navbar-toggler{order:1}
  #header-nav .header__actions{display:none}

  /* PAINEL DO MENU MOBILE
     Desce do topo — no markup é offcanvas-top, não offcanvas-end —, colado no
     topo, largura inteira e cantos arredondados só embaixo. A altura vem do
     conteúdo; o teto com rolagem evita o painel passar da tela em telas baixas
     ou se o menu crescer. */
  #offcanvasNavbar{
    /* A classe base .offcanvas fixa bottom:0 e a .offcanvas-top fixa top:0; com
       os dois presos o painel estica de ponta a ponta e o height:auto não vale.
       Soltar o bottom é o que faz a altura vir do conteúdo. */
    bottom:auto;
    height:auto;
    max-height:100svh;
    overflow-y:auto;
    border:0;
    border-radius:0 0 1rem 1rem;
  }
  /* O corpo do offcanvas cresce para preencher o painel; aqui ele deve apenas
     acompanhar os itens */
  #offcanvasNavbar .offcanvas-body{flex-grow:0}
  #offcanvasNavbar #dropdown-custom{flex-grow:0!important}
  #offcanvasNavbar .offcanvas-header{align-items:center;padding:1.25rem 1.25rem .5rem}
  #offcanvasNavbar .offcanvas-body{padding:.5rem 1.25rem 2rem}
  .offcanvas-logo{width:110px;height:auto}

  /* Itens em texto centralizado. O template pinta cada item como uma caixa
     cinza em style-base.css; aqui isso é desfeito. E a cor precisa ser
     sobrescrita porque no header os links são brancos, invisíveis neste fundo. */
  #offcanvasNavbar #dropdown-custom>.nav-item>.nav-link{
    margin-bottom:0;
    padding:.625rem;
    border-radius:.5rem;
    background-color:transparent;
    color:var(--bs-body-color);
    font-size:1.0625rem;
    text-align:center;
  }
  #offcanvasNavbar #dropdown-custom>.nav-item>.nav-link:is(:hover,:focus-visible),
  #offcanvasNavbar #dropdown-custom>.nav-item>.nav-link.active{
    color:var(--primary-color);
    background-color:transparent;
  }

  /* O item "Informações" tem submenu com as páginas MPI. Dentro deste cartão ele
     abriria uma lista rolável e quebraria a altura pelo conteúdo — a própria
     página /informacoes já dá acesso a todas elas. */
  #offcanvasNavbar #dropdown-custom>.nav-item>.dropdown-menu{display:none}
  #offcanvasNavbar [data-icon-menu]>.nav-link>i{display:none}
  #offcanvasNavbar [data-icon-menu]>.nav-link>span{display:inline}
}

@media screen and (min-width:992px){
  #header-nav #dropdown-custom{align-items:center;gap:.25rem}

  /* Item "Informações": no desktop vira só o ícone e abre o menu das páginas
     MPI. Mantém as medidas do antigo botão de catálogo — quadrado de cantos
     arredondados, não o pill dos demais links da barra. */
  #header-nav [data-icon-menu]>.nav-link{
    display:grid;
    place-items:center;
    width:2.75rem;
    height:2.5rem;
    padding:0;
    border-radius:.5rem;
    font-size:1.25rem;
    line-height:1;
  }
}

/* ================= HERO / FIRST VIEW =================
   Exibido por inc/banner-inc.php enquanto não houver slides cadastrados no SIG.
====================================================== */
.hero{
  --hero-overlay:linear-gradient(
    to bottom, 
    rgba(160, 160, 160, 0.62), 
    rgba(10, 20, 14, 0.62)
  );
  position:relative;
  display:grid;
  align-content:center;
  min-height:100svh;
  /* O padding acompanha a altura da tela: fixo em 11rem/8rem, a soma com o
     conteúdo passava de 100svh em janelas mais baixas e o hero crescia além da
     viewport, cortando a seta no rodapé. O mínimo do topo cobre a altura do
     header, que é absoluto e fica por cima. */
  padding-block:clamp(10rem,16vh,11rem) clamp(4rem,12vh,8rem);
  background-color:var(--dark);
  background-image:var(--hero-overlay),var(--header-bg-image);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero>.container{margin-block:0}
.hero__content{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;max-width:34rem}
.hero__title{margin:0;color:#fff;font-size:clamp(1.2rem,2.7vw,2.5rem);font-weight:700;line-height:1.15;text-wrap:balance}
.hero__text{margin:0;color:rgba(255,255,255,.85);font-size:0.855rem;line-height:1.65}
.hero__cta{border-radius:999px;font-weight:600;padding-inline:1.5rem}

.hero__scroll{position:absolute;bottom:2rem;left:50%;translate:-50% 0;display:grid;place-items:center;width:3rem;height:3rem;color:#fff;border:2px solid rgba(255,255,255,.65);border-radius:999px;transition:color var(--transition),border-color var(--transition),background-color var(--transition)}
.hero__scroll:is(:hover,:focus-visible){color:#fff;border-color:var(--primary-color);background-color:var(--primary-color)}

@media screen and (max-width:991.98px){
  .hero{padding-block:8rem 6rem}
}

/* ========= SEÇÃO SOBRE A EMPRESA (home e /sobre-nos) ========= */
.sobre{padding-block:5rem}
.sobre>.container{margin-block:0}
/* A arte já vem com os cantos arredondados embutidos, por isso a imagem mantém a
   proporção natural em vez de ser recortada com object-fit */
.sobre__figure{margin:0}
.sobre__figure img{display:block;width:100%;height:auto;border-radius:.75rem}
.section-title{margin:0 0 1.25rem;font-size:clamp(1.5rem,2.4vw,1.875rem);font-weight:700;line-height:1.25;text-wrap:balance}
.sobre__text{margin:0 0 1.5rem;color:var(--bs-secondary-color);font-size:.9375rem;line-height:1.7}
.sobre__cta{border-radius:999px;font-weight:600;padding-inline:1.25rem}

/* ================= GRADE DE LOGOS (clientes e fornecedores) ================= */
.logos-grid{padding-block:3rem}
.logos-grid>.container{margin-block:0}
.logos-grid .section-title{margin-top:.75rem}
.logos-grid__list{margin:0;padding:0;list-style:none}

.logos-grid__item{display:grid;place-items:center;height:100%;margin:0;padding:0;aspect-ratio:16/10}
.logos-grid__item img{width:100%;height:100%;object-fit:contain}

/* Traço curto acima do título, no lugar da barrinha vertical do .section-eyebrow */
.section-mark{display:block;width:1.5rem;height:3px;border-radius:2px;background-color:var(--primary-color)}

/* Rótulo com barrinha vertical, usado acima dos títulos de seção */
.section-eyebrow{display:flex;align-items:center;gap:.625rem;margin:0 0 .75rem;color:var(--primary-color);font-size:.875rem;font-weight:600;line-height:1.2}
.section-eyebrow::before{content:"";flex:0 0 auto;width:3px;height:1.125rem;border-radius:2px;background-color:var(--primary-color)}

/* ================= CARDS DE MISSÃO, VISÃO E VALORES ================= */
.mvv-grid{margin-top:3rem}
.mvv-card{display:block;box-sizing:border-box;height:100%;padding:1.5rem;background-color:var(--bs-body-bg);border-radius:.75rem;box-shadow:var(--card-shadow)}
.mvv-card__head{display:flex;align-items:center;gap:.875rem;margin-bottom:1rem}
/* Sem cor de fundo: o disco é definido só pelo raio e por uma sombra leve */
.mvv-card__icon{display:grid;place-items:center;flex:0 0 auto;width:2.75rem;height:2.75rem;border-radius:999px;box-shadow:0 1px 4px rgba(20,28,36,.1)}
.mvv-card__icon img{width:1.5rem;height:1.5rem;object-fit:contain}
.mvv-card__title{margin:0;font-size:.9375rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.mvv-card__content{color:var(--bs-secondary-color);font-size:.875rem;line-height:1.7}
.mvv-card__content :is(p,ul,ol){margin:0}
.mvv-card__content :is(ul,ol,.list){margin:0;padding-left:1.1rem}
.mvv-card__subtitle{margin:-.5rem 0 1rem;color:var(--primary-color);font-size:.8125rem;font-style:italic;font-weight:600;line-height:1.4}

/* Variante de /sobre-nos: colunas abertas, título centralizado com o ícone à
   direita, subtítulo verde em itálico e itens de Valores marcados com check */
.mvv-grid--destaque .mvv-card{padding:0;background:none;border-radius:0;box-shadow:none}
.mvv-grid--destaque .mvv-card__head{justify-content:center;gap:.625rem;margin-bottom:.5rem}
.mvv-grid--destaque .mvv-card__icon{order:1;width:auto;height:auto;border-radius:0;box-shadow:none}
.mvv-grid--destaque .mvv-card__icon img{width:2.25rem;height:2.25rem}
.mvv-grid--destaque .mvv-card__title{font-size:1.625rem;font-weight:800;letter-spacing:.12em}
.mvv-grid--destaque .mvv-card__subtitle{margin:0 0 1.25rem;text-align:center}
.mvv-grid--destaque .mvv-card__content{max-width:22rem;margin-inline:auto;font-size:.9375rem}
.mvv-grid--destaque .mvv-card__content :is(ul,ol,.list){padding:0;list-style:none}
.mvv-grid--destaque .mvv-card__content li{position:relative;margin:0;padding-left:1.5rem;list-style:none;font-size:inherit;line-height:inherit}
.mvv-grid--destaque .mvv-card__content :is(ul,ol,.list)+:is(ul,ol,.list),
.mvv-grid--destaque .mvv-card__content li+li{margin-top:.625rem}
.mvv-grid--destaque .mvv-card__content li::before{content:"";position:absolute;left:.125rem;top:.45em;width:.4rem;height:.75rem;border:solid var(--primary-color);border-width:0 2px 2px 0;rotate:45deg}

@media screen and (max-width:991.98px){
  .sobre{padding-block:3rem}
  .mvv-grid{margin-top:2rem}
}

/* ================= SEÇÃO E CARD DE PRODUTOS =================
   O card é o mesmo na home, nas listagens de categoria, nos relacionados e na
   busca por tag — todos passam por Layout::RenderProductCard.
============================================================= */
.secao-produtos{margin-block:5rem}

.prod-card{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--bs-body-bg);border-radius:.5rem;box-shadow:var(--card-shadow);overflow:hidden;transition:box-shadow var(--transition),transform var(--transition)}
.prod-card:hover,.prod-card:focus-within{transform:translateY(-2px);box-shadow:0 2px 6px rgba(20,28,36,.08),0 16px 32px -16px rgba(20,28,36,.26)}

/* O recorte do zoom precisa acontecer aqui, não no card: a imagem cresce por
   transform, que não ocupa espaço, e sem este contêiner ela invadiria o título */
.prod-card__media{overflow:hidden}
.prod-card__cover{display:block;width:100%;height:auto;aspect-ratio:7/6;object-fit:cover;transition:transform .5s ease}
.prod-card:is(:hover,:focus-within) .prod-card__cover{transform:scale(1.06)}
.prod-card__body{flex:1 1 auto;padding:1rem 1rem .75rem}
.prod-card__title{margin:0 0 .5rem;color:var(--bs-secondary-color);font-size:.9375rem;font-weight:700;line-height:1.3;transition:color var(--transition)}
.prod-card__text{margin:0;color:var(--bs-secondary-color);font-size:.8125rem;line-height:1.6}

/* Em repouso o "Saiba mais" é texto simples e o título fica em cinza. O pill
   verde e o título escuro são o estado de hover do card inteiro — o card é um
   stretched-link, então a interação é dele, não só do botão. */
.prod-card__footer{margin-top:auto;padding:0 1rem 1rem}
.prod-card__link{display:block;padding:.75rem 1rem;background-color:transparent;color:var(--dark);font-size:.9375rem;font-weight:600;text-align:center;border-radius:999px;transition:background-color var(--transition),color var(--transition)}

.prod-card:is(:hover,:focus-within) .prod-card__title{color:var(--dark)}
.prod-card:is(:hover,:focus-within) .prod-card__link{background-color:var(--primary-color);color:#fff}

.prod-card__badge{top:1rem;left:1rem}

/* Quem pediu menos movimento mantém a mudança de cor, mas sem zoom nem elevação */
@media (prefers-reduced-motion:reduce){
  .prod-card,.prod-card__cover{transition:color var(--transition),background-color var(--transition)}
  .prod-card:is(:hover,:focus-within){transform:none}
  .prod-card:is(:hover,:focus-within) .prod-card__cover{transform:none}
}

@media screen and (max-width:991.98px){
  .secao-produtos{margin-block:3rem}
}

/* No mobile as grades da home viram trilhas de rolagem horizontal, com o card
   seguinte espiando na borda para indicar que há mais. Sem loop e sem barra
   visível. Vale só para as vitrines da home — a listagem de /produtos continua
   empilhando, porque lá existe paginação abaixo. */
@media screen and (max-width:767.98px){
  /* O layout mobile usa 2rem de recuo lateral, não os .75rem do container */
  .secao-produtos,.secao-destaques{padding-inline:2rem}

  .secao-produtos>.row,
  .secao-destaques>.row{
    flex-wrap:nowrap;
    gap:1rem;
    /* Sangra até a borda da tela: sem isto o overflow recorta na borda interna
       do container e o card seguinte aparece cortado antes do fim do ecrã.
       O padding devolve o alinhamento do primeiro card com o texto da seção. */
    margin-inline:-2rem;
    padding-inline:2rem;
    padding-block:.75rem; /* espaço para a sombra do card não ser cortada */
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline-start:2rem;
    scrollbar-width:none;          /* Firefox */
    -ms-overflow-style:none;       /* Edge legado */
  }
  .secao-produtos>.row::-webkit-scrollbar,
  .secao-destaques>.row::-webkit-scrollbar{display:none} /* Chrome, Safari */

  .secao-produtos>.row>*,
  .secao-destaques>.row>*{
    width:auto;
    padding:0;
    scroll-snap-align:start;
  }

  .secao-produtos>.row>*{flex:0 0 85%;max-width:85%}
  .secao-destaques>.row>*{flex:0 0 45%;max-width:45%}
}

/* ================= PRODUTOS EM DESTAQUE =================
   Cards das páginas MPI. Classe própria em vez de reaproveitar .card--23, que
   ainda serve a informacoes.php e a inc/paginas-relacionadas.php.
========================================================= */
.secao-destaques{margin-block:5rem}

.destaque-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  aspect-ratio:16/9;
  padding:1rem 1.25rem;
  border-radius:.75rem;
  background-color:var(--grey);
  background-image:var(--destaque-bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  overflow:hidden;
}
/* Véu em pseudo-elemento para poder transicionar a cor no hover — não dá para
   animar um background-image trocando de gradiente */
.destaque-card::before{content:"";position:absolute;inset:0;background-color:rgba(18,26,22,.42);transition:background-color var(--transition)}
.destaque-card:is(:hover,:focus-within)::before{background-color:rgba(18,26,22,.68)}

.destaque-card__title{position:relative;margin:0;font-size:.9375rem;font-weight:600;line-height:1.35}
.destaque-card__link{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.destaque-card__link:is(:hover,:focus-visible){color:#fff}

@media screen and (max-width:767.98px){
  .secao-destaques{margin-block:3rem}
  /* Proporção mais quadrada só na trilha da home, onde os cards são estreitos e
     ficam lado a lado. Nas páginas relacionadas da MPI eles ocupam a largura
     inteira e continuam em 16/9, senão ficam altos demais. */
  .secao-destaques .destaque-card{aspect-ratio:7/6}
}

/* ========= "SAIBA MAIS SOBRE" — ABAIXO DA GRADE DE PRODUTOS ========= */
.categoria-sobre{padding-block:5rem}
.categoria-sobre>.container{margin-block:0}
.categoria-sobre__figure{margin:0}
.categoria-sobre__figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:.75rem}
/* O texto vem do editor do painel, então estilizo o HTML solto, não classes */
.categoria-sobre__content{color:var(--bs-secondary-color);font-size:.875rem;line-height:1.8}
.categoria-sobre__content :is(p,ul,ol):last-child{margin-bottom:0}
.categoria-sobre__cta{margin-top:1.5rem;border-radius:999px;font-weight:600;padding-inline:1.5rem}

@media screen and (max-width:991.98px){
  .categoria-sobre{padding-block:3rem}
}

/* ================= SEÇÃO DE CTA =================
   Base em style-base.css. Aqui só o que muda no projeto: conteúdo alinhado à
   esquerda em coluna estreita e véu escuro mais forte, para o texto branco ler
   sobre a foto. A imagem continua vindo de dr_cta pelo --bg-cta no markup.
================================================= */
.cta-default{
  --bg-cta-overlay:linear-gradient(rgba(8,12,10,.28),rgba(8,12,10,.28));
  display:flex;
  align-items:center;
  min-height:19.5rem;
  padding-block:3.5rem;
  background-color:var(--dark);
  background-image:var(--bg-cta-overlay),var(--bg-cta);
}
.cta-default>.container{margin-block:0}
.cta-default__content{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:32rem}
.cta-default__title{margin:0;color:#fff;font-size:clamp(1.5rem,2.2vw,1.875rem);font-weight:700;line-height:1.2;text-wrap:balance}
.cta-default__text{margin:0;max-width:26rem;color:rgba(255,255,255,.82);font-size:.875rem;line-height:1.6}
.cta-default__cta{--bs-btn-padding-y:.75rem;min-height:3.125rem;margin-top:.75rem;border-radius:999px;font-weight:600;padding-inline:1.75rem}

@media screen and (max-width:767.98px){
  .cta-default{min-height:550px;padding-block:4.5rem}
  /* Recuo lateral maior que o padrão do container: é ele que faz o título
     quebrar em três linhas, como no layout */
  .cta-default>.container{padding-inline:2rem}
  .cta-default__title{font-size:1.5rem}
  .cta-default__text{max-width:none}
}

/* ================= FAIXA DE LOGOS DE CLIENTES =================
   Logo abaixo do hero. Rolagem contínua via extensão AutoScroll do Splide.
   Só existe quando há clientes cadastrados em dr_clientes.
=============================================================== */
.clientes-strip{padding-block:1.5rem;background-color:var(--clientes-strip-bg);border-bottom:1px solid var(--bs-border-color);overflow:hidden}

/* Esmaece as pontas para os logos entrarem e saírem sem corte seco */
.clientes-strip .splide__track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.clientes-strip .splide__list{margin:0;padding:0;list-style:none}
.clientes-strip .splide__slide{display:flex;align-items:center;justify-content:center}

.clientes-strip__item{display:grid;place-items:center;width:100%;min-height:3.75rem}
.clientes-strip__item img{width:auto;max-width:100%;height:3.75rem;object-fit:contain;filter:grayscale(1);opacity:.45;transition:filter var(--transition),opacity var(--transition)}
a.clientes-strip__item:is(:hover,:focus-visible) img{filter:grayscale(0);opacity:1}

/* ================= FAIXA DE BREADCRUMB / TÍTULO DAS INTERNAS =================
   Mesma imagem do hero, em faixa curta, com o header transparente por cima. Vale
   para as quatro origens de breadcrumb do projeto (auto-breadcrumb, bread-default,
   bread-sig e bread-mpi), que todas renderizam .bread.bread--default.
============================================================================== */
.bread.bread--default{
  --bread-overlay:linear-gradient(
    to bottom, 
    rgba(160, 160, 160, 0.62), 
    rgba(10, 20, 14, 0.62)
  );
  display:flex;
  align-items:flex-end;
  min-height:19.5rem;
  padding:11rem 0 2.25rem;
  background-color:var(--dark);
  background-image:var(--bread-overlay),var(--header-bg-image);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.bread.bread--default>.container{margin-block:0}

.bread.bread--default #breadcrumb :is(li,a){color:rgba(255,255,255,.82);font-size:.875rem}
.bread.bread--default #breadcrumb a:is(:hover,:focus-visible){color:#fff}
.bread.bread--default #breadcrumb .bread__column.active{color:rgba(255,255,255,.62);font-weight:400}

/* O layout usa uma barra "/" como separador, sem o ícone de casa do template */
.bread.bread--default .bread__column:first-child a::before{content:none;margin:0}
.bread.bread--default .bread__column:not(:last-child)::after{content:"/";font-family:inherit;font-size:.875rem;margin-left:6px;opacity:.55}

.bread.bread--default .bread__title{margin:.375rem 0 0;color:var(--bread-title-color);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;line-height:1.2}

@media screen and (max-width:991.98px){
  .bread.bread--default{min-height:auto;padding:8rem 0 2rem}
}


/* FOOTER */
/* ================= RODAPÉ ================= */
.site-footer{margin-top:3rem;padding-top:4rem;background-color:var(--bs-body-bg);border-top:1px solid var(--bs-border-color)}
.site-footer>.container{margin-block:0}

.site-footer__brand{display:inline-block}
.site-footer__logo{width:100%;max-width:170px;height:auto}
.site-footer__about{max-width:22rem;margin:1.25rem 0 0;color:var(--bs-secondary-color);font-size:.875rem;line-height:1.7}
.site-footer__social-label{margin:1.5rem 0 .875rem;color:var(--bs-secondary-color);font-size:.875rem}

.site-footer__social-icon{display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;color:var(--primary-color);font-size:1.375rem;transition:color var(--transition)}
.site-footer__social-icon:is(:hover,:focus-visible){color:var(--primary-color-dark)}

.site-footer__title{margin:0 0 1.25rem;color:var(--primary-color);font-size:1rem;font-weight:600;line-height:1.3}
.site-footer__title--spaced{margin-top:2rem}

.site-footer__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.625rem}
.site-footer__list a{color:var(--bs-secondary-color);font-size:.875rem;transition:color var(--transition)}
.site-footer__list a:is(:hover,:focus-visible){color:var(--primary-color)}

.site-footer__contact{display:flex;flex-direction:column;gap:.625rem;margin:0;font-style:normal}
.site-footer__contact :is(a,span){color:var(--bs-secondary-color);font-size:.875rem;line-height:1.6;transition:color var(--transition)}
.site-footer__contact a:is(:hover,:focus-visible){color:var(--primary-color)}

/* FAIXA INFERIOR */
.site-footer__bottom{margin-top:4rem;border-top:1px solid var(--bs-border-color)}
.site-footer__bottom>.container{margin-block:0}
.site-footer__bottom-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.25rem}
.site-footer__copy{margin:0;color:var(--bs-secondary-color);font-size:.8125rem}

.site-footer__seals{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.site-footer__seal{display:inline-flex;align-items:center;gap:.375rem;color:var(--bs-body-color);font-size:.8125rem;transition:color var(--transition)}
.site-footer__seal:is(:hover,:focus-visible){color:var(--primary-color)}
.site-footer__seals-divider{width:1px;height:1rem;background-color:var(--bs-border-color)}

.site-footer__top{display:inline-flex;align-items:center;gap:.5rem;color:var(--primary-color);font-size:.8125rem;font-weight:600;transition:color var(--transition)}
.site-footer__top:is(:hover,:focus-visible){color:var(--primary-color-dark)}

/* No mobile o rodapé inteiro fica centralizado */
@media screen and (max-width:991.98px){
  .site-footer{padding-top:3rem;text-align:center}
  .site-footer__about{margin-inline:auto}
  .site-footer__list{align-items:center}
  .site-footer__contact{align-items:center}
  .site-footer .social{justify-content:center}
  .site-footer__bottom-row{flex-direction:column;justify-content:center;text-align:center}
  .site-footer__seals{justify-content:center}
}

.card.card--23{all:unset;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:space-between;flex-flow:column nowrap;gap:1rem;background-color:var(--dark);background-image:linear-gradient(-45deg,var(--dark),var(--grey)),var(--card-background);background-size:cover;background-repeat:no-repeat;background-position:center;background-blend-mode:multiply,normal;border-radius:1rem;padding:1rem;position:relative;height:100%}
.card.card--23:focus-within,.card.card--23:hover{box-shadow:0 0 0 2px var(--secondary-color)}
.card.card--23 .card__title{color:#fff;font-size:1.25rem;text-shadow:0 0 .25rem var(--dark);margin:0;min-height:calc(1.25rem * 2 * 1.3)}
.card.card--23 .card__link{z-index:1;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;flex-flow:row nowrap;padding:.5rem .75rem;font-size:.875rem;text-transform:uppercase;transition:var(--transition);color:var(--light);font-weight:600;border:2px solid currentColor;border-radius:99px}
.card.card--23 .card__link>span{width:0;max-width:fit-content;opacity:0;transition:var(--transition)}
.card.card--23 .card__link:focus>span,.card.card--23 .card__link:hover>span{width:100px;opacity:1;margin-right:.5rem}
.card.card--23 .card__link::before{content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1;backface-visibility:visible}
.card.card--23 .card__link:focus,.card.card--23 .card__link:hover{border-color:var(--primary-color);background-color:var(--primary-color)}

.shadow-19{box-shadow:rgba(50,50,93,.25) 0 2px 5px -1px,rgba(0,0,0,.3) 0 1px 3px -1px}


/* ================= CLIENTES ================= */
.clientes .clientes__item{display:grid;place-items:center;padding:1rem;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden}
.clientes .clientes__item img{width:100%;aspect-ratio:1/1;object-fit:contain;margin:0 auto;opacity:.75;border-radius:var(--bs-border-radius-sm);transition:opacity var(--transition)}
.clientes .clientes__item:hover img{opacity:1}

/* ================= DEPOIMENTOS ================= */
.testimonial .testimonial-author-image {
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 999px;
}