/******************** HEADER ********************/
header .logo-desktop, header .logo-mobile-menu { width: 200px; margin: 0; padding: 5px 0px;}

#scrollheader.bg-body { background-color: transparent!important; position: absolute; top: 0; left: 0; width: 100%; z-index: 1030; transition: background-color .3s ease-out; }
#scrollheader.headerFixed { background-color: var(--primary-color-dark)!important; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
header.headerFixed #topo-bootstrap { display: none!important; }

/* Barra de contato (topbar) — Figma: fundo TRANSPARENTE (a foto do hero aparece atrás de todo
   o header), fonte branca e linha branca embaixo na largura do container.
   O `bg-primary-color` que inc/topo.php aplica é anulado aqui pela especificidade do ID
   (100 vs 10), sem precisar de !important. */
#topo-bootstrap { background-color: transparent; font-size: .875rem; }
#topo-bootstrap .container { border-bottom: 1px solid rgba(255, 255, 255, .3); }
#topo-bootstrap a { color: #fff; text-decoration: none; }
#topo-bootstrap a:hover { color: var(--secondary-color-light); }

#header-nav .navbar-toggler-icon { filter: brightness(0) invert(1); }

/* Badge do carrinho: some enquanto o orçamento está vazio (o Figma não tem badge).
   Depende de js/ajax.js escrever '' em vez de '0' quando não há itens. */
.j_contCart:empty { display: none; }


@media (min-width: 992px) {
  #header-nav .nav-link { color: #fff; font-weight: 500; }
  #header-nav .nav-link:hover, #header-nav .nav-link:focus { color: var(--secondary-color-light); }

  #header-nav .widget__cart--btn { display: inline-flex; align-items: center; gap: .5rem; background-color: var(--secondary-color); color: #353D51; padding: .75rem 1.25rem; border-radius: .75rem; font-weight: 500; text-decoration: none; }
  #header-nav .widget__cart--btn::before { content: "Solicitar cotação"; }
  #header-nav .widget__cart--btn:hover { background-color: var(--secondary-color-light); }
}

/******************** TIPOGRAFIA ********************/
h1, h2, h3, h4, h5, h6 { font-family: var(--secondary-font); }

/******************** BREADCRUMB (HERO) ********************/
/* Figma "Header/Bread" (mesmo padrão em TODAS as páginas internas): foto de fundo com dois
   overlays, header transparente por cima, breadcrumb + h1 centralizados em branco.
   Sobrescreve .bread de style-base.css (intocável), que é uma barra cinza clara. */
.bread.bread--default,
.bread.bread--mpi {
  position: relative;
  margin-bottom: 0;
  padding: 10rem 0 3.5rem;
  background-color: var(--primary-color-dark);
  background-image: linear-gradient(rgba(45, 55, 82, .55), rgba(45, 55, 82, .55)), url(../imagens/breadcrumb.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bread.bread--default .bread__row,
.bread.bread--mpi .bread__row { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.bread.bread--default #breadcrumb,
.bread.bread--mpi #breadcrumb { justify-content: flex-start; }
.bread.bread--default #breadcrumb :is(li, a),
.bread.bread--mpi #breadcrumb :is(li, a) { color: #fafafa; font-size: .875rem; font-weight: 600; }
.bread.bread--default #breadcrumb a:hover,
.bread.bread--mpi #breadcrumb a:hover { color: var(--secondary-color-light); }
.bread.bread--default .bread__title,
.bread.bread--mpi .bread__title { margin: 0; font-size: 2.5rem; font-weight: 600; color: #fafafa; text-align: left; }

@media (min-width: 992px) and (max-width: 1399.98px) {
  .bread.bread--default .bread__title,
  .bread.bread--mpi .bread__title { font-size: 2rem; }
}

@media (max-width: 991.98px) {
  .bread.bread--default,
  .bread.bread--mpi { padding: 7rem 0 2.5rem; }
  .bread.bread--default .bread__title,
  .bread.bread--mpi .bread__title { font-size: 1.75rem; }
}

/******************** FOOTER ********************/
/* Layout do Figma (382020:3546): tudo centralizado e empilhado — logo, endereço, contatos,
   redes sociais, navegação horizontal e barra de copyright. */
footer{background-color:var(--primary-color-dark);margin-top:3rem}
footer .container{display:flex;flex-direction:column;align-items:center;gap:2.5rem}
footer .logo-desktop{max-width:220px;}

footer .address{display:flex;flex-direction:column;gap:.25rem;margin:0}
footer .address :is(span,a):not(.btn){color:#C0C8D7;font-size:1rem;font-weight:500;font-style:normal;line-height:1.5;transition:var(--transition)}
footer .address a:not(.btn):hover{color:#fff}
footer .footer__contacts{display:flex;flex-direction:column;gap:1rem}

footer .footer__social{gap:1rem}
footer .footer__social-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:.25rem;background-color:#304572;color:#fff;font-size:1.25rem;transition:var(--transition)}
footer .footer__social-icon:hover{background-color:var(--primary-color);color:#fff}

footer .footer__nav h3{margin:0 0 1.5rem;font-size:1.125rem;font-weight:700;color:#A2ADC3;font-family:var(--primary-font)}
footer .footer__nav ul{list-style:none}
footer .footer__nav li a:not(.btn){display:block;font-size:1rem;font-weight:500;color:#fafafa;transition:var(--transition)}
footer .footer__nav li a:hover{color:var(--secondary-color-light)}
footer .footer__nav li a i{font-size:.625rem}

.footer__copyright{background-color:var(--primary-color-dark);border-top:1px solid rgba(255,255,255,.08)}
.footer__copyright p{font-size:.875rem;font-weight:500;color:#A2ADC3}
.footer__seal{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:#A2ADC3;text-decoration:none;transition:var(--transition)}
.footer__seal:hover{color:#fff}
.footer__totop{display:inline-flex;align-items:center;gap:.75rem;font-size:.875rem;font-weight:600;color:#C3C3C3;text-decoration:none;transition:var(--transition)}
.footer__totop i{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.75rem;background-color:var(--primary-color);color:#fff;transition:var(--transition)}
.footer__totop:hover{color:#fff}
.footer__totop:hover i{background-color:var(--primary-color-light)}
.copyright-footer .btn.selos { min-height: unset; }

/******************** PERSONALIZADO ********************/
.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}

.title-subtitle{margin-bottom:0}
.title-subtitle span{display:block;font-size:.9rem;color:#000;line-height:1rem;letter-spacing:.25rem;text-transform:uppercase}


.section-badge { display: flex; flex-direction: column; gap: .25rem; }
.section-badge__bar { display: block; width: 24px; height: 3px; background-color: var(--secondary-color); }
.section-badge__label { font-size: 1rem; font-weight: 500; color: var(--primary-color); }
.section-badge--on-dark .section-badge__label { color: #C0C8D7; }


.text-soft { color: var(--grey); }
.produtos-section .card .btn.btn-primary{
   width: 100%;
}
.rounded-btn { border-radius: .75rem; }

/******************** HOME ********************/
/* QUEM SOMOS */
.quemsomos__img { height: 100%; min-height: 320px; max-height: 600px; }


.cta-default { background-image: linear-gradient(to right, var(--primary-color-dark), #030711); background-color: transparent; min-height: 0; padding: 4rem 0; }
.cta-default__text { color: #C3C3C3; }
.cta-default__btn { display: inline-flex; align-items: center; background-color: var(--secondary-color); border-color: var(--secondary-color); color: #353D51; }
.cta-default__btn:hover { background-color: var(--secondary-color-light); border-color: var(--secondary-color-light); color: #353D51; }
.cta-default__img { height: 378px; max-height: 100%; object-fit: cover; }
@media (max-width: 991.98px) {
  .cta-default__img { height: 260px; }
}


.mvv-section { background: linear-gradient(to right, var(--primary-color-dark), #030711); }
.mvv-section.mvv-sobre  .bg-body-secondary{ background-color: #FFF!important; }
.mvv-section .card.bg-body-tertiary { background-color: var(--primary-color-dark)!important; border: 0; color: #fff; }
.mvv-section.home-mvv .bg-body-secondary{background-color: transparent!important; border: 0; color:#fff}
.mvv-section .card i { color: var(--secondary-color-light); }
.mvv-section .card-title { color: #fff; font-size: 1.375rem; }
.mvv-section .card p { color: #fff; margin-bottom: 0; }

/* Card de produto — mesmo componente (Layout::RenderProductCard) na seção da Home
   (.produtos-section) e na listagem da página Produtos (#produtos), por isso o estilo é
   compartilhado nos dois seletores em vez de duplicado. */
.produtos-section .container > h2.text-center { display: none; }
.produtos-section .card,
#produtos .card { border-color: #E9E9E9; border-radius: .25rem; box-shadow: 0 1px 4px rgba(27, 27, 27, .08); }
.produtos-section .card-img-top,
#produtos .card-img-top { height: 280px; object-fit: contain; padding: 2rem 1.5rem; background-color: var(--bs-body-bg); }
.produtos-section .card-title,
#produtos .card-title { text-align: center; font-size: 1.375rem; }
.produtos-section .card-text,
#produtos .card-text { text-align: center; color: var(--grey); }
.produtos-section .card .btn.btn-primary,
#produtos .card .btn.btn-primary { width: 100%; background-color: transparent; border: 1.5px solid var(--primary-color); color: var(--primary-color); border-radius: .75rem; }
.produtos-section .card .btn.btn-primary:hover,
#produtos .card .btn.btn-primary:hover { background-color: var(--primary-color); color: #fff; }


main .splide-banner { height: auto; }
main .splide-banner .splide__slide { position: relative; background-image: var(--background); background-size: cover; background-position: center; background-attachment: scroll; height: 41.667vw; min-height: 480px; }
main .splide-banner .splide__slide::before { content: ""; position: absolute; inset: 0; background-color: rgba(45, 55, 82, .35); pointer-events: none; }
main .splide-banner .splide__content.container { position: absolute; top: auto; left: 0; right: 0; bottom: 4rem; height: auto; display: block; z-index: 1; margin-left: auto; margin-right: auto; }
main .splide-banner .splide__content h2,
main .splide-banner .splide__content p { max-width: 600px; }
main .splide-banner .btn.down { display: inline-flex; align-items: center; gap: .5rem; background-color: var(--secondary-color); border-color: var(--secondary-color); color: #353D51; }
main .splide-banner .btn.down:hover { background-color: var(--secondary-color-light); border-color: var(--secondary-color-light); color: #353D51; }
main .splide-banner .btn.down::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; }


@media (min-width: 992px) and (max-width: 1399.98px) {
  main .splide-banner .splide__content h2 { font-size: 2rem; }
  main .splide-banner .splide__content p { font-size: 1rem; }
}

@media (max-width: 991.98px) {
  main .splide-banner .splide__slide { height: auto; min-height: 0; padding: 6rem 24px 2.5rem; }
  main .splide-banner .splide__content.container { position: static; left: auto; right: auto; bottom: auto; max-width: 100%; }
}

/* ================= CLIENTES / PARCEIROS ================= */
.parceiros-section { position: relative; background-color: var(--bs-tertiary-bg); }
.parceiros-section .container > h2.text-center { display: none; }
.parceiros-section::before, .parceiros-section::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.parceiros-section::before { left: 0; background: linear-gradient(to right, var(--bs-tertiary-bg), rgba(246, 246, 246, 0)); }
.parceiros-section::after { right: 0; background: linear-gradient(to left, var(--bs-tertiary-bg), rgba(246, 246, 246, 0)); }
.clientes .clientes__item{display:grid;place-items:center;padding:.5rem}
.clientes .clientes__item img{width:100%;max-width:180px;aspect-ratio:1/1;object-fit:contain;margin:0 auto;opacity:.6;}

/* Página clientes-parceiros.php — grid estático de logos em cards brancos (Figma 380003:4679:
   caixas 342x132, 4 por linha, logo colorido centralizado). Diferente do carrossel da Home
   (.clientes), que é o mesmo dado mas em outro layout e com grayscale. */
/* flex (não grid): dentro de grid, o max-height:100% da imagem não constrange e o logo
   transborda o card; em flex ele resolve contra o content box corretamente. */
.clientes-grid__item { display: flex; align-items: center; justify-content: center; height: 132px; padding: 1.5rem; overflow: hidden; background-color: var(--bs-body-bg); border: 1px solid #E9E9E9; border-radius: .5rem; box-shadow: 0 1px 4px rgba(27, 27, 27, .08); transition: var(--transition); }
.clientes-grid__item:hover { box-shadow: 0 6px 16px rgba(27, 27, 27, .12); }
.clientes-grid__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ================= DEPOIMENTOS ================= */
.depoimentos-stat { flex: 0 0 auto; width: 100%; max-width: 400px; padding-right: 2rem; border-right: 1px solid var(--bs-border-color); }
.depoimentos-cards { min-width: 0; max-width: 650px; }
@media (max-width: 991.98px) {
  .depoimentos-stat { border-right: 0; border-bottom: 1px solid var(--bs-border-color); padding-right: 0; padding-bottom: 1.5rem; max-width: 100%; }
}

.depoimentos-splide { position: relative; }
.depoimentos-splide .splide__slide { padding: .5rem; }
.depoimentos-splide .splide__arrow { top: 40%; }
.depoimentos-splide .splide__arrow--prev { left: -3rem; }
.depoimentos-splide .splide__arrow--next { right: -3rem; }
.depoimentos-splide .splide__pagination { bottom: -1.5rem; }
@media (max-width: 575.98px) {
  .depoimentos-splide { padding: 0 0 2.5rem; }
  .depoimentos-splide .splide__arrow--prev { left: 0; }
  .depoimentos-splide .splide__arrow--next { right: 0; }
}
.testimonial-card { background-color: var(--bs-body-bg); border: 1px solid #E9E9E9; border-radius: .25rem; box-shadow: 0 1px 4px rgba(27, 27, 27, .08); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.testimonial-quote p { margin: 0; font-size: 1rem; color: var(--grey); }
.testimonial-quote p::before { content: "\201C"; }
.testimonial-quote p::after { content: "\201D"; }
.testimonial-name { font-style: normal; font-size: 1.125rem; font-weight: 500; color: var(--primary-color); }
.testimonial-company, .testimonial-date { font-size: .875rem; color: var(--grey); }
.testimonial-stars { color: #7D91C2; margin-top: .25rem; }

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

.depoimentos-splide .splide__arrow { background-color: var(--bs-body-bg); box-shadow: 0 1px 4px rgba(27, 27, 27, .16); }
.depoimentos-splide .splide__arrow svg { fill: var(--primary-color); }
.depoimentos-splide .splide__pagination__page.is-active { background-color: var(--primary-color); }

.cta-default .btn{ padding-top: 12px !important; padding-bottom: 12px; padding-left: 18px; padding-right: 18px; }