/******************** PERSONALIZADO ********************/

/* TIPOGRAFIA
   --primary-font = Open Sans (corpo, aplicada pelo * do style-base.css)
   --secondary-font = Oswald (titulos) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--secondary-font);
}

p,
.btn {
  font-family: var(--primary-font);
}

/******************** HEADER ********************/
header .logo-desktop,header .logo-mobile-menu{width:100%;margin:0.5rem 0; height:auto;}
header .navbar-brand { max-width: 70px; }
header #topo-bootstrap a.mx-2{font-size: 0.8rem; color: #6C6C6C;}
header #topo-bootstrap a.mx-2:hover{color: var(--bs-primary);}
header .nav-link{color: #1A1A1A;}

.header-mobile__logo{max-width:56px;}

.navbar-toggler-icon-custom{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;padding:4px}
.navbar-toggler-icon-custom span{display:block;height:3px;border-radius:16px;background-color:#4a4848}
.navbar-toggler-icon-custom span:nth-child(1){width:24px}
.navbar-toggler-icon-custom span:nth-child(2){width:18px}
.navbar-toggler-icon-custom span:nth-child(3){width:20px}

/* O blur fica no ::before porque backdrop-filter no proprio header cria um
   containing block e prende o offcanvas do menu (position:fixed) na altura
   do header, escondendo todos os itens no mobile. */
@media (max-width: 991.98px) {
  header.header-mobile-blur{
    background-color: transparent;
    box-shadow: 0 8px 15px 0 rgba(0,0,0,.04);
  }

  header.header-mobile-blur::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(250,250,250,.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}

/* BREADCRUMB */
.bread--default .bread__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bread--default .bread__row nav {
  order: 2;
}

.bread--default .bread__title {
  order: 1;
}

.bread--foto {
  position: relative;
  background-color: #1a1a1a;
  background-image: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)), var(--bread-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem 0;
}

/* REPRESENTANTES */
.representantes-titulo {
  color: #4a4848;
}

.representantes-texto {
  color: #6c6c6c;
}

.representantes-home .svg-map,
.representantes-home .mobile-map {
  width: 100%;
  height: auto;
  max-width: 500px;
}

/* Força a cor verde em todos os estados do mapa (normal, hover e ativo) */
.representantes-home svg path,
.representantes-home .svg-map path,
.representantes-home .mobile-map path,
.representantes-home svg g path {
  fill: var(--secondary-color) !important; /* Verde padrão */
  transition: fill 0.3s ease;
}

/* Quando passa o mouse por cima (hover) */
.representantes-home svg path:hover,
.representantes-home .svg-map path:hover,
.representantes-home .mobile-map path:hover,
.representantes-home svg g path:hover {
  fill: #00642b !important; /* Um tom de verde um pouco mais escuro para o hover, ou use #008037 se quiser a mesma cor */
}

.bread--foto #breadcrumb :is(li, a) {
  color: rgba(255, 255, 255, .85);
}

.bread--foto .bread__title {
  color: #fff;
}

.fw-600{
  font-weight: 600!important;
}

/* CATEGORIA (produtos/serviços/portfólio) */
.categoria-titulo {
  color: #4a4848;
}

/******************** QUEM SOMOS ********************/

.mvv-card {
  background-color: var(--bs-body-bg);
  border: 2px solid #eee;
  border-radius: 1rem;
  box-shadow: 0 12px 26px 0 rgba(25, 33, 61, .12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 3rem 2rem;
}

.mvv-card__icone {
  object-fit: contain;
}

.mvv-card__titulo {
  font-size: 2rem;
  color: #6c6c6c;
  text-align: center;
  margin: 0;
}

.mvv-card__texto {
  color: #6c6c6c;
  text-align: center;
}

.mvv-card__texto ul {
  text-align: start;
  padding-left: 1.25rem;
  margin: 0;
}

/******************** HOME ********************/

/* HERO */
.hero-home {
  position: relative;
  min-height: 800px;
  background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .35) 70%), linear-gradient(rgba(5, 5, 5, .5), rgba(5, 5, 5, .5)), url(../imagens/hero-caixas-embalagens.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
  .hero-home {
    min-height: auto;
    padding: 4rem 0;
  }
}

/* PRODUTOS */
.produto-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--bs-body-bg);
  border: 2px solid rgba(233, 233, 233, .4);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 4px 0 rgba(27, 27, 27, .08);
  gap: 1rem;
  justify-content: space-between;
}

.produtos-home h2{
  font-size: 1.7rem;
}

.produto-card__foto {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
}

.produto-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* SOBRE */
.sobre-home__titulo {
  color: #4a4848;
}

.sobre-home__gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 688 / 622.13;
}

.sobre-home__img {
  position: absolute;
  object-fit: cover;
}

.sobre-home__img--1 {
  top: 0;
  left: 0;
  width: 64.21%;
  aspect-ratio: 376.12 / 305.53;
  border-radius: 120px 12px 12px 12px;
  box-shadow: -15px -15px 0 0 var(--secondary-color);
}

.sobre-home__img--2 {
  top: 0;
  left: 67.01%;
  width: 32.98%;
  aspect-ratio: 193.26 / 305.53;
  border-radius: 12px 120px 12px 12px;
}

.sobre-home__img--3 {
  top: 60.71%;
  left: 0;
  width: 51.96%;
  aspect-ratio: 304.43 / 207.84;
  border-radius: 12px 12px 12px 120px;
  background-color: #eee;
}

.sobre-home__img--4 {
  top: 60.75%;
  left: 54.74%;
  width: 45.26%;
  aspect-ratio: 264.95 / 207.84;
  border-radius: 12px 12px 120px 12px;
  box-shadow: 15px 15px 0 0 var(--primary-color);
}

/* CTA */
.cta-home {
  border-radius: 2rem;
  padding: 4rem;
  background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), var(--bg-cta);
}

.cta-home__content {
  max-width: 508px;
}

@media (max-width: 767.98px) {
  .cta-home {
    padding: 2.5rem;
  }
}

/* FOOTER */
footer{background-color:#1a1a1a; margin-top: 3rem;}
footer .logo-desktop{max-width:200px;}
footer h3{margin-top:0;font-size:1.125rem;color:var(--light)}
footer .footer__nav li a:not(.btn){display:block;padding:5px 0;font-size:.875rem;color:var(--light);transition:.3s}
footer .footer__nav li a i{font-size:.625rem}
footer .footer__nav li a:hover{color:var(--primary-color-light)}
footer .address :is(span,a):not(.btn){color:var(--light);font-size:.875rem;line-height:25px;transition:.3s}
footer .address a:not(.btn):hover{color:var(--primary-color-light)}

.footer-home{border-radius:5rem 5rem 0 0;padding:7.5rem 0 2.5rem}

@media (max-width: 991.98px) {
  .footer-home{border-radius:2rem 2rem 0 0}
}

.footer__divider{border-color:rgba(255,255,255,.1);opacity:1;margin:2rem 0}

.footer__label{color:#6c6c6c;font-weight:700}

.footer__social-label{color:#6c6c6c;font-size:.875rem;font-weight:500}

.footer__social-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background-color:#242424;color:var(--light);border-radius:999px}

.footer__map{width:100%;height:205px;border:0;border-radius:.75rem}

.copyright-footer .btn.selos { min-height: unset; }
@media screen and (max-width: 992.05px) {
  footer .social { justify-content: center; }
}

.splide-destaques .splide__slide{margin: 10px 0;}
.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}

/* ================= 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 .card {
  border-width: 2px;
  border-color: #eee;
  border-radius: 1rem;
}

.testimonial .testimonial-quote-icon {
  font-size: 1.5rem;
}

.testimonial .testimonial-author-image {
  width: 56px;
  height: 56px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid rgba(195, 195, 195, .4);
  box-shadow: 0 1px 4px 0 rgba(27, 27, 27, .08);
}

.testimonial .testimonial-quote p {
  color: #6c6c6c;
}

/* header btn */

.btn--whatsaspp{
  border-radius: 20px;
  background-color: var(--secondary-color);
  color: white;
  margin: 10px 0;
  font-size: 14px;
}

.btn--whatsaspp:hover{
  color: var(--secondary-color-dark);
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.btn--whatsaspp i{
  color: white;
  font-size: 18px;
}

.btn--whatsaspp:hover i{
  color: var(--secondary-color-dark);
}

/* banner conteudo */

.splide__content.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.splide__content.container h2{
  width: 58%;
}

.splide__content.container p{
  font-size: 16px;
  width: 58%;
}

.splide__content.container a.btn{
  background-color: white;
  color: #242424;
  text-align: center;
  border-radius: 25px;
  padding: 12px 16px;
}

.splide__content.container a.btn:hover{
  background-color: var(--primary-color);
  color: white;
}

@media only screen and (max-width:568px){
.btn.btn--whatsaspp{
  display: none;
}
}