/*

Theme Name: PortaVoz Animal
Theme URI: https://portavozanimal.org
Description: Ong de cuidados Animais
Author: JW Design
Author URI: https://www.jwdesign.com.br
*/
/* ===================================
   GLOBAL: Reset & Base
   =================================== */
/* Reset & base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-white);
  color: var(--color-black);
  line-height: 1.6;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 30px;
  font-family: var(--font-heading), var(--nv-fallback-ff);
  color: var(--headingcolor, inherit);
}
.navbar-nav .nav-link.active {
  color: var(--color-primary);
}
a {
  color: inherit;
  text-decoration: none;
}

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

.container {
  max-width: var(--container-max);
}
.btn-secondary {
  background-color: var(--color-wine);
  border-color: var(--color-wine);
  border-radius: 1rem;
}

.btn-secondary:hover {
  color: var(--color-white);
  background-color: var(--color-black);
  border-color: var(--color-black);
}
.btn-light {
  background-color: #fff;
  border-color: #fff;
  border-radius: 1rem;
}
.btn-light:hover {
  color: var(--color-white);
  background-color: var(--color-black);
  border-color: var(--color-black);
}
/* ===================================
   GLOBAL: Header / Navigation
   =================================== */
/* Header */
.custom-header {
  padding: 0.8rem 1rem;
  transition: all 0.3s ease;
  z-index: 1030;
}

.custom-header.scrolled {
  background-color: var(--color-black);
  padding: 10px 0;
}

.custom-header .nav-link {
  color: var(--color-white);
  margin: 0 0.3rem;
  text-transform: uppercase;
  font-size: 14px;
  transition: color 0.3s ease;
}

.custom-header .nav-link:hover {
  color: var(--color-primary);
}

.btn-denuncie {
  border: 1px solid var(--color-primary);
  color: var(--color-primary) !important;
  border-radius: 20px;
  padding: 0.5rem 1.8rem;
  margin-left: 0.5rem;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-denuncie:hover {
  background-color: #d67c1e;
  color: var(--color-white) !important;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.imgLogo {
  max-height: 80px;
}

/* ===================================
   GLOBAL: Typography helpers
   =================================== */
/* Typography helpers */
.fw-regular {
  font-weight: 400;
}
.fw-semibold {
  font-weight: 600;
}
.fw-bold {
  font-weight: 700;
}
.fw-black {
  font-weight: 900;
}
.font-bebas {
  font-family: var(--font-heading);
  font-weight: 400;
}
.font-bebas-bold {
  font-family: var(--font-heading);
  font-weight: 700;
}

.title-xl {
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
  font-size: clamp(2.4rem, 8vw, 6rem);
}

.title-lg {
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  font-size: clamp(2rem, 6vw, 4rem);
}

.text-strong {
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  font-size: clamp(1.25rem, 3vw, 2.25rem);
}

.text-wine {
  color: var(--color-wine);
}

.space-hero {
  height: 148px;
}

/* ===================================
   HOME: Hero (carousel)
   =================================== */
/* Hero */
.banner-slide {
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.banner-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.carousel-caption {
  z-index: 2;
  text-align: center;
  padding: 2rem;
}

.banner-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 10vw, 200px);
  font-weight: 400;
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: 1rem;
  margin-top: clamp(-40px, -3.57vw, -50px);
}

.banner-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 200px);
  color: var(--color-primary);
  margin-top: clamp(-60px, -3.57vw, -50px);
  margin-bottom: 2rem;
}

.h2Banner {
  font-family: var(--font-heading);
  font-size: clamp(42px, 4vw, 200px);
  color: var(--color-primary);
  margin-right: 350px;
}

.btn-banner {
  background-color: var(--color-white);
  border: 2px solid var(--color-white);
  color: var(--color-black);
  padding: 0.6rem 5.8rem;
  border-radius: 30px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: -20px;
  text-transform: uppercase;
}

.btn-banner:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ===================================
   HOME: Quem Somos / Campanha
   =================================== */
/* Quem Somos */
.QuemSomos {
  width: 100%;
  background-color: var(--color-primary);
  padding: 100px 0;
  padding-top: 30px;
}

section.QuemSomos::before {
  width: 100%;
  background-color: var(--color-primary);
  border-radius: 60px 60px 0 0;
  padding: 40px 0;
  content: "";
  position: absolute;
  z-index: 100;
  bottom: 0;
}

.QuemSomos h1 {
  font-family: var(--font-heading);
  font-size: 90px;
  color: var(--color-white);
  text-align: left;
  padding-top: 40px;
  line-height: 0.9;
}

.QuemSomos span {
  font-size: 130px;
  color: var(--color-black);
  margin-top: -20px;
  display: inline-block;
}

.QuemSomos p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-black);
  text-align: left;
}

.QuemSomos strong {
  color: var(--color-black);
}

.QuemSomos h2 {
  color: var(--color-white);
  text-align: left;
  font-size: 40px;
  font-family: var(--font-body);
  font-weight: 700;
}

.camp {
  border-radius: 45px;
  background-color: var(--color-wine);
  padding: 50px;
}

.camp h1 {
  font-family: var(--font-heading);
  font-size: 100px;
  color: var(--color-primary);
  text-align: center;
}

.camp h2 {
  font-size: 32px;
  font-family: var(--font-body);
  padding-left: 24px;
  padding-right: 24px;
}

.camp p {
  font-size: 16px;
  color: var(--color-white);
  margin: 0;
}

.algcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===================================
   HOME: Denuncie CTA
   =================================== */
/* Denuncie */
.Denuncie {
  width: 100%;
  background-color: var(--color-wine);
  padding: 120px 0;
  background-image: url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/bg-denuncie.jpg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  position: relative;
}

.Denuncie h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 8vw, 6rem);
  text-align: left;
  color: var(--color-primary);
  line-height: 0.9;
  font-weight: 700;
}

.Denuncie a {
  background-color: var(--color-white);
  border: 2px solid var(--color-white);
  color: var(--color-black);
  padding: 0.6rem 5.8rem;
  border-radius: 30px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 10px;
  float: left;
}

.Denuncie a:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.Denuncie img {
  position: absolute;
  bottom: 0;
}

/* ===================================
   GENÉRICOS: Banner interna / páginas
   =================================== */
.banner-interna {
  height: 52vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.content-interna {
  width: 100%;
  background-color: var(--color-primary);
  border-radius: 60px 60px 0 0;
  padding: 100px 0 0 0;
  margin-top: -80px;
}

/* ===================================
   HOME: Progresso
   =================================== */
/* Progresso */
.progress {
  width: 100%;
  background-color: var(--color-primary);
  padding: 90px 0;
  height: auto;
}

.BlocProgress {
  background-color: var(--color-white);
  border-radius: 39px;
  padding: 40px;
}

.progresso {
  height: 40px;
  background-color: var(--color-black);
  border-radius: 20px;
}

.progressoFundo {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  background-color: var(--color-primary);
  margin-bottom: 10px;
}

.Notprogresso {
  height: 40px;
  background-color: var(--color-wine);
  border-radius: 20px;
}

.progress label {
  font-weight: 600;
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 16px;
}

.progress p {
  font-weight: 300;
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 16px;
  padding-top: 20px;
}

.progressChamada {
  background-color: var(--color-wine);
  border-radius: 39px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 662px;
}

.progressChamada h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 8vw, 6rem);
  text-align: left;
  color: var(--color-primary);
  line-height: 0.9;
}

.progressoGeral h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 8vw, 6rem);
  color: var(--color-black);
  margin: 0;
  text-transform: uppercase;
}

.progressoGeral a {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 0.8rem 8.8rem;
  border-radius: 30px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 16px;
}

.progressoGeral a:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

.InfoProgresso {
  width: 100%;
  border-radius: 24px;
  min-height: 215.19px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-muted);
}

.InfoProgresso h3 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 8vw, 6rem);
  text-align: center;
  color: var(--color-black);
  margin: 0;
}

.InfoProgresso p {
  padding-top: 0;
  text-align: center;
  width: 100%;
  margin: 0;
}

/* ===================================
   HOME: Marcas / Lista de empresas
   =================================== */
/* Marcas */
.BlocoMarcas {
  width: 100%;
  background-color: var(--color-wine);
  padding: 60px 0;
}

.BlocoMarcas h1 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  text-align: left;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 1;
}

.BlocoMarcas span {
  font-size: 100px;
  color: var(--color-white);
  display: block;
}

.BlocoMarcas p {
  font-family: var(--font-body);
  color: var(--color-white);
  font-size: 16px;
  margin-top: 30px;
}

.BlocoMarcas a {
  background-color: var(--color-white);
  border: 2px solid var(--color-white);
  color: var(--color-black);
  padding: 0.6rem 5.8rem;
  border-radius: 30px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
}

.BlocoMarcas a:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.BlocoMarcas ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

.BlocoMarcas ul li {
  background-color: var(--color-white);
  color: var(--color-black);
  padding: 20px 50px;
  border-radius: 100px;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
}

.BlocoMarcas li:hover {
  background-color: var(--color-primary);
  cursor: pointer;
}

.colorWhite {
  color: var(--color-white) !important;
  margin-bottom: 30px;
}

/* ===================================
   HOME: Blog / Notícias
   =================================== */
/* Blog */
.blog {
  width: 100%;
  background-color: var(--color-primary);
  padding: 120px 0;
}

.blog h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 8vw, 6rem);
  text-align: center;
  color: var(--color-black);
}

.blog p {
  text-align: center;
  font-weight: 600;
  margin-bottom: 80px;
}

.blog-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

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

.blog-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: var(--color-white);
  padding: 40px 30px;
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
}

.blog-overlay p {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  margin-bottom: 15px;
  text-align: left;
}

.blog-overlay .btn {
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-weight: 700;
  background: none;
  float: left;
  transition: all 0.3s ease;
}

.blog-overlay .btn:hover {
  color: var(--color-white);
}

/* ===================================
   SOCIAL (grid + CTA)
   =================================== */
/* Social grid */
.social {
  width: 100%;
}

.notpd {
  padding: 0;
}

.SigSocial {
  width: 100%;
  padding: 40px 0;
  background-color: var(--color-wine);
}

/* Legacy ticker desativado */
.shw-ticker,
.shw-ticker__inner,
.shw-ticker__segment,
.shw-ticker__item {
  display: none !important;
}

.SigSocial img {
  margin-right: 20px;
}

.SigSocial p {
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
}

.orange {
  transition: all 0.3s ease;
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: 10px;
  padding: 10px 20px;
  margin-right: 20px;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
}

.orange:hover {
  background-color: var(--color-black);
}

.black {
  transition: all 0.3s ease;
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: 10px;
  padding: 10px 20px;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
}

.black img {
  margin-right: 10px;
}

.black:hover {
  background-color: var(--color-primary);
}

/* ===================================
   CADASTRE-SE (home/shared)
   =================================== */
/* Cadastro */
.cadastrese {
  width: 100%;
  background-color: var(--color-primary);
  padding: 80px 0;
}

.BlocoCadastrese {
  background-color: var(--color-wine);
  border-radius: 39px;
  padding: 80px;
}

.BlocoCadastrese h3 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 8vw, 6rem);
  text-align: left;
  color: var(--color-primary);
  line-height: 0.9;
  margin-bottom: 20px;
}

.BlocoCadastrese span {
  color: var(--color-white);
}

.FormCadastro h3 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 8vw, 6rem);
  text-align: left;
  color: var(--color-white);
  line-height: 0.9;
  margin-bottom: 20px;
}

.FormCadastro p {
  text-align: left;
  font-weight: 600;
  margin-bottom: 20px;
}

.form-message {
  margin-top: 10px;
  font-weight: 700;
  color: var(--color-black);
  display: none;
}

.form-message.show {
  display: block;
}

.form-control {
  padding: 20px;
  border: 0;
  border-radius: 12px;
}

.btnn {
  background-color: var(--color-wine);
  text-transform: uppercase;
  border: 0;
  padding: 14px 60px;
  border-radius: 10px;
  color: var(--color-white);
  transition: all 0.3s ease;
}

.btnn:hover {
  background-color: var(--color-black) !important;
}

/* ===================================
   FOOTER (global)
   =================================== */
/* Footer */
.footer {
  width: 100%;
  border-radius: 60px 60px 0 0;
  padding: 80px 0;
  background-color: var(--color-wine);
  margin-top: -60px;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer ul li a {
  color: var(--color-white);
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
  text-decoration: none;
  margin-left: 10px;
  transition: all 0.3s ease;
}

.footer ul li a:hover {
  color: var(--color-primary);
}

.footer h4 {
  font-weight: 700;
  color: var(--color-white);
  font-size: 16px;
  margin-left: 10px;
}

.line {
  border-left: 1px solid #953a28;
  border-right: 1px solid #953a28;
}

.SociaFooter strong {
  font-weight: 700;
  color: var(--color-white);
}

.SociaFooter ul li {
  float: left;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.SociaFooter span {
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  display: block;
  width: 100%;
  float: left;
}

.link {
  border-radius: 100px;
  border: 1px solid var(--color-primary);
  padding: 8px 50px;
  color: var(--color-primary);
  transition: all 0.3s ease;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
}

.link:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ===================================
   UTILITIES / SPACING HELPERS
   =================================== */
/* Utilities */
.pd {
  width: 100%;
}

.mgtp {
  margin-top: 60px;
}

.ptp {
  padding-top: 60px;
}

.pdtop {
  padding-top: 50px;
}

.mgbMobile {
  margin-bottom: 40px;
}

.notpd img {
  border-radius: 0 !important;
}

.centerFlex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* button:hover {
  background: none !important;
} */

/* ===================================
   RESPONSIVE: Blog carousel (home)
   =================================== */
/* Blog carousel mobile behavior */
@media (max-width: 576px) {
  #blogCarousel .carousel-item .col-md-4 {
    display: none;
  }
  #blogCarousel .carousel-item .col-md-4:first-child {
    display: block;
  }
}

/* ===================================
   RESPONSIVE: Home / Global
   =================================== */
/* Responsive */
@media (max-width: 576px) {
  .banner-interna {
    height: auto;
  }

  .banner-interna img {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  .textmobile {
    margin-right: 0;
  }

  .textbannermg {
    margin-top: -20px;
  }

  .QuemSomos h1 {
    text-align: center;
  }

  .QuemSomos span {
    text-align: center;
    margin-left: 20px;
  }

  .QuemSomos p {
    text-align: center;
  }

  .camp h1 {
    font-size: 75px;
  }

  .camp p,
  .camp h2 {
    text-align: center;
  }

  .Denuncie h1 {
    font-size: 60px;
    padding-left: 30px;
  }

  .Denuncie a {
    margin-left: 30px;
  }

  .Denuncie img {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    margin-top: 50px;
  }

  .progress {
    padding: 40px 0;
  }

  .ChamadaprogressoMobile {
    min-height: auto;
    padding-top: 60px;
    padding-bottom: 40px;
  }

  .ChamadaprogressoMobile h2 {
    font-size: 60px;
    text-align: center;
  }

  .GeralprogressoMobile h2 {
    font-size: 50px;
    text-align: center;
    width: 100%;
    padding-left: 21px;
  }

  .GeralprogressoMobile a {
    margin-top: 0;
  }

  .BlocoMarcas {
    padding: 0;
  }

  .BlocoMarcas h1 {
    font-size: 40px;
    padding: 0 30px;
    text-align: center;
  }

  .BlocoMarcas span {
    font-size: 40px;
  }

  .BlocoMarcas p {
    text-align: center;
  }

  .BlocoMarcas a {
    margin-left: 50px;
    margin-bottom: 50px;
  }

  .centerMobile h2 {
    font-size: 30px;
    text-align: center;
  }

  .BlocoCadastrese {
    padding: 80px 50px;
  }

  .BlocoCadastrese h3 {
    font-size: 50px;
    text-align: center;
  }

  .FormCadastro h3 {
    font-size: 60px;
    text-align: center;
    margin-top: 40px;
  }

  .cadastrese {
    padding: 60px 0;
  }

  .footer {
    border-radius: 40px 40px 0 0;
    padding-top: 50px;
  }

  .footer .line {
    border: 0;
  }

  .CenterFooter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .CenterFooter ul {
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .noneDisplay {
    display: none;
  }
  .NotDesktop {
    display: none;
  }
}

@media (min-width: 1400px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: var(--container-max);
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .banner-interna {
    height: auto;
  }

  .banner-interna img {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  .NotTablet {
    display: none;
  }
}

/* ===================================
   PÁGINA: Denuncie
   =================================== */

.hero-denuncie {
  background: linear-gradient(327deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)),
    url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/denuncie-background-1.jpg) center / cover no-repeat;
  padding: 150px 0 0;
  color: var(--color-white);
  background-color: var(--color-black);
}
section.hero-denuncie::after {
  content: "";
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background-color: var(--color-primary);
  border-radius: 60px 60px 0 0;
  z-index: 1;
  display: block;
}

@media (max-width: 1200px) {
  section.hero-denuncie::after {
    height: 2rem;
  }
}

/* Denuncie: hero */
.hero-denuncie h1 {
  font-family: var(--font-heading);
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.1;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.hero-denuncie h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 6vw, 4rem);
  color: var(--color-primary);
  text-transform: uppercase;
}

/* Denuncie: formulário / destaque */
.denuncie-form-section {
  background-color: var(--color-primary);
  overflow: hidden;
}

.denuncie-form-card {
  background: var(--color-primary);
}

.denuncie-form-card h3 {
  margin-bottom: 10px;
  color: var(--color-white);
}

.denuncie-form-card h1 {
  font-family: var(--font-heading);
}

.denuncie-form-card p {
  margin-bottom: 20px;
  color: var(--color-black);
}

/* Denuncie: campos */
.denuncie-form {
  border-radius: 14px;
  padding: 16px 16px 12px;
  display: grid;
  gap: 10px;
}

.denuncie-form .form-control {
  background: #f7f7f7;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 14px;
}

.btn-denuncie-form {
  background: var(--color-wine);
  border: none;
  color: var(--color-white);
  border-radius: 8px;
  padding: 12px;
  font-weight: 700;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.btn-denuncie-form:hover {
  opacity: 0.9;
}

.denuncie-photo {
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}

.denuncie-photo img {
  border-radius: 30px;
}

.denuncie-form-card {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: auto;
  height: -webkit-fill-available;
}

/* Denuncie: faixa visual */
.shw-wall {
  position: relative;
  background-color: #151515;
  width: 100%;
}

.shw-wall img {
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  padding-bottom: 60px;
}

@media (max-width: 768px) {
  .shw-wall img {
    max-height: 320px;
  }
}

/* Denuncie: cards de evidência */
.denuncie-cards {
  background: #1c1c1c;
  padding: 40px 0 50px;
}

.denuncie-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #111;
  height: 230px;
}

.denuncie-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.denuncie-card .card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.9));
  display: flex;
  align-items: flex-end;
  padding: 14px;
}

.denuncie-card p {
  margin: 0;
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}

/* Denuncie: CTA social */
.cta-bar {
  background: #4a2617;
  color: var(--color-white);
  padding: 18px 24px;
}

.cta-bar .btn-light {
  color: #4a2617;
  font-weight: 700;
}

.cta-bar .btn-dark {
  background: var(--color-black);
  border: none;
}

/* Denuncie: voluntariado */
.volunteer-strip {
  background: var(--color-primary);
  padding: 40px 20px;
  border-radius: 24px 24px 0 0;
}

.volunteer-strip .card {
  border: none;
  background: transparent;
}

.volunteer-strip .card-body {
  padding: 0;
}

.volunteer-strip h3 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 42px);
  color: var(--color-black);
  margin-bottom: 12px;
}

.volunteer-strip p {
  margin-bottom: 16px;
}

.volunteer-strip .btn-success {
  font-weight: 700;
  border-radius: 12px;
}

/* Denuncie: responsivo */
@media (max-width: 992px) {
  .denuncie-photo img {
    max-height: none;
  }
}

@media (max-width: 768px) {
  .denuncie-card {
    height: 180px;
  }
}

/* ===================================
   PÁGINA: Humane Washing
   =================================== */

.hero-hw {
  background: linear-gradient(327deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)),
    url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/topo-hw.jpg) center / cover no-repeat;
  padding: 150px 0 0;
  color: var(--color-white);
  background-color: var(--color-black);
}
section.hero-hw::after {
  content: "";
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background-color: var(--color-primary);
  border-radius: 60px 60px 0 0;
  z-index: 1;
  display: block;
}

@media (max-width: 1200px) {
  section.hero-hw::after {
    height: 2rem;
  }
}

.hw-intro {
  background-color: var(--color-primary);
  overflow: hidden;
}

.hw-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  margin: 0;
}
.title-card {
  color: var(--color-primary);
  text-align: left;
  font-size: clamp(1.75rem, 4.5vw, 2rem);
  line-height: 1;
  font-weight: 900;
}

.hw-intro-card {
  background: #f7a53b;
  border-radius: 32px;
  padding: 32px 28px 40px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

.hw-kicker {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 50px);
  text-transform: uppercase;
  margin: 0;
}

.hw-divider {
  width: 40px;
  height: 3px;
  background: #000;
}

.hw-subtitle {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
}

.hw-square-img {
  background: #4a1f17;
  min-height: 260px;
}

.hw-pill-img {
  overflow: hidden;
  min-height: 120px;
}

.hw-pill-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hw-rect-img {
  background: #4a1f17;
  min-height: 320px;
}

.hw-photo-rect {
  background: #4a1f17;
  min-height: 110px;
}

.hw-where {
  background: var(--color-wine);
  padding: 80px 0;
}

.hw-card {
  background: rgba(90, 26, 13, 1);
  border-radius: 18px;
  padding: 24px 18px;
  color: #ffffff;
  height: 100%;
  display: grid;
}

.hw-icon {
  margin: auto;
  background: var(--color-wine);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 24px;
}

.hw-impact {
  background: var(--color-primary);
  padding: 80px 0;
}

.hw-impact-card {
  background: var(--color-wine);
  color: #ffffff;
  border-radius: 20px;
  height: 100%;
}

.hw-impact-card.alt {
  background: var(--color-wine);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.hw-impact-card h4 {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 30px);
  color: #ffffff;
}

.hw-impact-card p {
  font-size: 16px;
}

.hw-impact-strong {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 30px);
  color: #ffffff;
  line-height: 1.2;
}

.hw-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
}

.hw-badge-number {
  font-family: var(--font-heading);
  color: #ffffff;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
  font-size: clamp(2.4rem, 8vw, 6rem);
}

.hw-badge-text {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.1;
}

.hw-impact-card .text-accent {
  color: var(--color-primary);
}

.hw-impact-list {
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.hw-impact-list li {
  color: #ffffff;
  font-size: 15px;
}

.hw-esg {
  position: relative;
  background-color: #171717 !important;
  background: url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/bg-esg.png) center/cover no-repeat;
}

.hw-esg-overlay {
  padding: 140px 0;
  color: #fff;
  height: 100%;
}

.hw-esg .text-highlight {
  color: #f39325;
}

.hw-danger {
  background: var(--color-primary);
  padding: 80px 0;
}

.hw-danger-card {
  background: #602c1f;
  border-radius: 22px;
}

.hw-danger-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hw-danger-img {
  flex: 0 0 45%;
  min-height: 240px;
}

.hw-danger-body {
  padding: 28px;
  color: #f7e9e4;
  flex: 1;
}

.hw-danger-body h3 {
  color: #f7e9e4;
}

.hw-danger-top .hw-block-img {
  min-height: 260px;
}

.hw-block-img {
  background: #4a1f17;
  min-height: 260px;
}

.hw-contact {
  background: var(--color-primary);
  padding: 80px 0;
}

.hw-contact-card {
  background: #5a2219;
  border-radius: 18px;
  padding: 32px;
  text-align: center;
}
.btn-contact {
  background-color: var(--color-white);
  border: 2px solid var(--color-white);
  color: var(--color-black);
  padding: 0.6rem 5.8rem;
  border-radius: 30px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
}

.btn-contact:hover {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}
.hw-news-card {
  background: #f7a53b;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.hw-news-card .form-control {
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.hw-volunteer {
  background: #4a1f17;
  border-radius: 14px;
  padding: 20px 24px;
}

.hw-block-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hw-campaign {
  background-color: var(--color-wine);
  padding: 80px 0;
  color: #ffffff;
  position: relative;
  background-image: url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/bg-ipiranga.png);
  min-height: 770px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}
.hw-campaign h4 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
  color: var(--color-primary);
}

.hw-campaign ul li {
  margin-bottom: 8px;
}

.hw-campaign-copy p {
  color: #ffffff;
}

.hw-cta-list .hw-cta-btn {
  background: rgba(90, 26, 13, 1);
  color: #ffffff;
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hw-cta-btn .hw-cta-icon {
  font-size: 18px;
  color: var(--color-primary);
  margin-left: 8px;
}
.hw-list li {
  position: relative;
  padding-left: 14px;
}

.hw-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.hw-campaign ul li {
  margin-bottom: 8px;
}

.hw-list li {
  position: relative;
  padding-left: 14px;
}

.hw-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.hw-danger-card {
  border-radius: 39px;
  height: 100%;
  background-color: var(--color-wine);
  color: #ffffff;
  position: relative;
  background-image: url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/bg-perigo.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  margin: auto;
}
.text-accent {
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .hw-danger-card {
    border-radius: 39px;
    height: 100%;
    background-color: var(--color-wine);
    color: #ffffff;
    position: relative;
    background-image: url(../img/bg-perigo.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: cover;
    margin: auto;
    background-blend-mode: overlay;
  }

  .hw-where,
  .hw-impact,
  .hw-danger,
  .hw-campaign,
  .hw-esg-overlay {
    padding: 60px 0;
  }
}
/* ===================================
   PÁGINA: Ranking (aba/tabela)
   =================================== */

.hero-ranking {
  background: linear-gradient(327deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)),
    url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/topo-ranking.jpg) center / cover no-repeat;
  padding: 150px 0 0;
  color: var(--color-white);
  background-color: var(--color-black);
}
section.hero-ranking::after {
  content: "";
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background-color: var(--color-primary);
  border-radius: 60px 60px 0 0;
  z-index: 1;
  display: block;
}

@media (max-width: 1200px) {
  section.hero-ranking::after {
    height: 2rem;
  }
}

.ranking-panel {
  background: #f5f5f5;
  overflow: hidden;
  padding: 0;
  border-radius: 0 0 20px 20px;
}

.ranking-tabs {
  background: #652113;
  gap: 8px;
  border-bottom: 2rem solid #5a1a0d;
}
#progresso-tab:hover {
  background-color: #5a1a0d !important;
  color: var(--color-primary);
}
#empresas-tab:hover {
  color: var(--color-primary) !important;
}
.ranking-tabs .nav-link {
  color: var(--color-white);
  border: none;
  padding: 14px 18px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px 10px 0 0;
}

.ranking-tabs .nav-link.active {
  background-color: rgba(90, 26, 13, 1);
  color: #fff;
  border-radius: 10px 10px 0 0;
}
.ranking-card {
  background: var(--color-white);
  border-radius: 0 0 18px 18px;
  color: var(--color-black);
}

.ranking-chart {
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 18px;
  background: #fafafa;
  min-height: 320px;
}

.ranking-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.2vw, 30px);
  margin-bottom: 18px;
  color: var(--color-wine);
}

.ranking-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 18px 0 12px;
  color: var(--color-wine);
  text-align: center;
}

.ranking-table table {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.ranking-table tbody tr:nth-child(odd) {
  background: #fdf9f4;
}

.ranking-table tbody tr:nth-child(even) {
  background: #ffffff;
}

.ranking-table th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #f7f7f7;
}

.ranking-table td {
  font-size: 14px;
}

.ranking-chart img {
  border-radius: 14px;
  background: #fafafa;
  padding: 12px;
  border: 1px solid #eee;
}

.ranking-table .badge {
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 700;
}

.ranking-controls .form-select.ranking-select {
  width: auto;
}

.ranking-controls input.form-control {
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.ranking-controls input.form-control:focus,
.ranking-controls .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.15rem rgba(243, 147, 37, 0.25);
  outline: none;
}

.ranking-controls .ranking-search {
  margin-left: auto;
  justify-content: flex-end;
}

.ranking-pagination .btn {
  min-width: 70px;
  background: #4a1f17;
  color: #f7e9e4;
  border: 1px solid #4a1f17;
}

.ranking-pagination .btn.btn-warning,
.ranking-pagination .btn:hover {
  background: var(--color-primary);
  color: var(--color-black);
  border-color: var(--color-primary);
}

@media (max-width: 576px) {
  .ranking-tabs {
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .ranking-tabs .nav-item {
    flex: 1 1 48%;
  }
  .ranking-tabs .nav-link {
    width: 100%;
    text-align: center;
  }

  .ranking-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
  .ranking-pagination .btn {
    flex: 1 1 30%;
    min-width: auto;
  }
}

.ranking-table table th,
.ranking-table table td {
  border: 1px solid #e6e6e6;
}

.ranking-table table tbody tr:hover {
  background: #f1e4da !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

@media (max-width: 576px) {
  .pesquisa {
    padding: 2rem !important;
  }
  .pesquisa h1,
  .pesquisa h2,
  .pesquisa p {
    text-align: left;
  }
  .pesquisa h1,
  .pesquisa h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.1;
  }
  .pesquisa .btn {
    width: 100%;
  }
  .pesquisa img {
    position: static !important;
    transform: none !important;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0.5rem auto 0;
    display: block;
  }
  .pesquisa .w-100.w-md-75.w-xl-100.position-relative {
    min-height: auto !important;
    text-align: center;
    padding: 0;
  }
}
.ranking-table table tbody tr:hover td {
  background: #f1e4da !important;
}

.ranking-table th.sortable {
  position: relative;
  padding-right: 22px;
  cursor: pointer;
}

.ranking-table th.sortable::before,
.ranking-table th.sortable::after {
  content: "";
  position: absolute;
  right: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.ranking-table th.sortable::before {
  top: 46%;
  border-bottom: 6px solid #838383;
}

.ranking-table th.sortable::after {
  top: 58%;
  border-top: 6px solid #838383;
  margin-top: 1px;
}

.ranking-card .btn-warning,
.ranking-card .btn-outline-warning {
  border-radius: 10px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .ranking-panel {
    border-radius: 0 0 20px 20px;
  }

  .ranking-chart {
    min-height: 240px;
  }
}

/* ===================================
   PÁGINA: Canal para empresas (formulário)
   =================================== */
.empresa-compromisso {
  background-color: var(--color-primary);
  overflow: hidden;
}

.empresa-card {
  background: var(--color-wine);
  border-radius: 30px 30px 0 0;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
  color: #fff;
}

.empresa-card .form-control,
.empresa-card .form-select {
  background: #6b2a24;
  border: 1px solid #7a312b;
  color: #fff;
  border-radius: 10px;
}

.empresa-card .form-label-empresa {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.4px;
}

.empresa-card .form-control::placeholder,
.empresa-card .form-select {
  color: #fff;
}

.empresa-card textarea {
  resize: vertical;
  min-height: 70px;
}

.empresa-card .form-check-label,
.empresa-card label {
  color: #fff;
}

.empresa-card .form-check-input {
  border-color: #fff;
  background-color: rgba(90, 26, 13, 1);
}

.empresa-card .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.empresa-mini-btn {
  background-color: var(--color-primary);
  color: var(--color-black);
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 8px 14px;
}

.empresa-submit {
  background-color: var(--color-primary);
  color: var(--color-black);
  border: none;
  border-radius: 10px;
  padding: 14px;
}

.empresa-submit:hover {
  background-color: var(--color-black) !important;
}

.empresa-card .form-control.empresa-file {
  padding: 10px 14px;
  background: #6b2a24;
  color: #fff;
  border: 1px solid #7a312b;
}

.empresa-card .form-control.empresa-file::file-selector-button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  margin-right: 14px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.empresa-card .form-control.empresa-file:hover::file-selector-button {
  background-color: var(--color-black);
}

.empresa-card .form-control:focus,
.empresa-card .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.15rem rgba(243, 147, 37, 0.25);
}

/* ===================================
   PÁGINA: Contato

   =================================== */

.hero-contato {
  background: linear-gradient(327deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)),
    url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/topo-contato.jpg) center / cover no-repeat;
  padding: 150px 0 0;
  color: var(--color-white);
  background-color: var(--color-black);
}
section.hero-contato::after {
  content: "";
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background-color: var(--color-primary);
  border-radius: 60px 60px 0 0;
  z-index: 1;
  display: block;
}
@media (max-width: 1200px) {
  section.hero-contato::after {
    height: 2rem;
  }
}

/* ===================================
   PÁGINA: Relatorios
   SECTION: Marcas / Lista de empresas
   =================================== */

/* Quem Somos */

/* seu card continua igual */
.hw-quem-somos-card {
  border-radius: 39px;
  height: 100%;
  background-color: var(--color-wine);
  color: #ffffff;
  position: relative;
  background-image: url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/topo-entenda-hw.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
  margin: auto;
}

.text-accent {
  color: var(--color-primary);
}

/* MOBILE: só aqui reduz as imagens */
@media (max-width: 575.98px) {
  .hw-img-badge {
    max-width: 64px;
  }
  .hw-img-arrow {
    max-width: 28px;
  }
}

/* opcional: mantém o overlay que você já tinha no mobile */
@media (max-width: 768px) {
  .hw-quem-somos-card {
    background-blend-mode: overlay;
  }
}

.Pesquisa {
  width: 100%;
  background-color: var(--color-primary);

  position: relative;
  overflow: hidden;
}
.hero-relatorios {
  background: linear-gradient(327deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)),
    url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/topo-canal-para-empresas.jpg) center / cover no-repeat;
  padding: 150px 0 0;
  color: var(--color-white);
  background-color: var(--color-black);
}
section.hero-relatorios::after {
  content: "";
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background-color: var(--color-primary);
  border-radius: 60px 60px 0 0;
  z-index: 1;
  display: block;
}

@media (max-width: 1200px) {
  section.hero-relatorios::after {
    height: 2rem;
  }
}
.Pesquisa > .container {
  position: relative;
  z-index: 2;
}
.translate-25 {
  transform: translate(-50%, -40%);
}

/* @media (max-width: 768px) {
  .hero-relatorios {
    padding: 130px 0 90px;
  }
} */
.Pesquisa h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 8vw, 6rem);
  color: var(--color-primary);
  text-align: left;
  padding-top: 40px;
  line-height: 0.9;
}

.Pesquisa span {
  font-size: clamp(2.4rem, 8vw, 6rem);
  color: var(--color-black);
  display: inline-block;
}

.Pesquisa p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-black);
  text-align: left;
}

.Pesquisa strong {
  color: var(--color-black);
}

/* Marcas */
.BlocoRelatorios {
  width: 100%;
  background-color: var(--color-wine);
  padding: 80px 0;
  background-image: url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/bgshw-selo-branca.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  position: relative;
}
.pesquisa {
  border-radius: 39px;
  background-color: var(--color-wine);
  padding: 50px;
}

.BlocoRelatorios h1 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: clamp(2.4rem, 8vw, 6rem);
  line-height: 1;
}

.BlocoRelatorios span {
  font-size: clamp(2.4rem, 8vw, 6rem);
  color: var(--color-white);
  display: block;
}

.BlocoRelatorios p {
  font-family: var(--font-body);
  color: var(--color-white);
  font-size: 16px;
}
.pesquisa p {
  font-size: 16px;
  color: var(--color-white);
  margin: 0;
}
section.QuemSomos
  > div
  > div
  > div
  > div
  > div.col-12.col-sm-4.col-xl-7.d-flex.flex-column
  > a {
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  border: 2px solid var(--color-white);
  padding: 0.6rem 5.8rem;
  border-radius: 30px;
  transition: 0.3s;
  text-decoration: none;
  text-align: center;
  width: inherit;
}
section.QuemSomos
  > div
  > div
  > div
  > div
  > div.col-12.col-sm-4.col-xl-7.d-flex.flex-column
  > a:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.borders {
  display: grid;
  position: relative;
}
.borders::before {
  content: "";
  left: 4px;
  width: 50%;
  background-color: var(--color-primary);
  border-radius: 10px 0px 0 10px;
  padding: 40px 0;
  position: absolute;
  z-index: 1;
  /* bottom: 0%; */
  height: -webkit-fill-available;
  display: flex;
  margin: 25% 0;
}

.borders::after {
  content: "";
  right: 4px;
  width: 50%;
  background-color: var(--color-primary);
  border-radius: 0 10px 10px 0;
  padding: 40px 0;
  position: absolute;
  z-index: 1;
  /* bottom: 0%; */
  height: -webkit-fill-available;
  display: flex;
  margin: 25% 0;
}
section.BlocoRelatorios > div > div > div > div > img {
  z-index: 2;
}
.BlocoRelatorios ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

.BlocoRelatorios ul li {
  background-color: var(--color-white);
  color: var(--color-black);
  padding: 20px 50px;
  border-radius: 100px;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
}

.BlocoRelatorios li:hover {
  background-color: var(--color-primary);
  cursor: pointer;
}

.colorWhite {
  color: var(--color-white) !important;
  margin-bottom: 30px;
}

.Title2Colors {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 8vw, 6rem);
  text-align: left;
  color: var(--color-primary);
  line-height: 106%;
  margin-bottom: 20px;
}

.Title2Colors span {
  color: var(--color-white);
}

#pills-tab > li {
  gap: 2rem;
  display: flex;
}
div#pills-tabContent {
  background-color: var(--color-white);
  border-radius: 39px;
}
.btn-pills {
  background-color: var(--color-black);
  border: 2px solid var(--color-black);
  color: var(--color-white);
  border-radius: 30px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
}
#pills-home-tab.active {
  background: #fff;
  border-color: #fff;
}
#pills-home-tab.active,
#pills-profile-tab.active {
  background: #fff;
  border-color: #fff;
}
.btn-pills:hover {
  background-color: var(--color-white) !important;
  border-color: var(--color-white);
  color: var(--color-black);
}

.quem-somos-bg {
  position: relative;
  height: 250px; /* limite da faixa */
  overflow: hidden;
  background: #060606;
}

/* o "fundo" real fica numa camada separada */
.quem-somos-bg .bg-parallax {
  position: absolute;
  inset: 0;
  background: url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/close-up-de-uma-galinha.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 100%; /* foco direto nos olhos */
  will-change: background-position, transform;
  transform-origin: 50% 100%;
  -webkit-transform-origin-x: left;
  filter: saturate(1.05) contrast(1.02);
}

.hero-quem-somos {
  background: linear-gradient(327deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)),
    url(https://portavozanimal.jwdesign.com.br/novo-site/wp-content/uploads/2026/02/topo-quem-somos.jpg) center / cover no-repeat;
  padding: 150px 0 0;
  color: var(--color-white);
  background-color: var(--color-black);
}
.hero-quem-somos h1 {
  font-family: var(--font-heading);
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.1;
  margin-bottom: 10px;
  text-transform: uppercase;
}
section.hero-quem-somos::after {
  content: "";
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background-color: var(--color-primary);
  border-radius: 60px 60px 0 0;
  z-index: 1;
  display: block;
}

@media (max-width: 1200px) {
  section.hero-quem-somos::after {
    height: 2rem;
  }
}

/* conteúdo acima */
.quem-somos-bg .content {
  position: relative;
  z-index: 1;
}

/* seção inteira (fundo laranja com corredor) */
.pva-impact {
  background: var(--color-primary);
}

.pva-impact__wrap {
  max-width: 1434px;
  margin: 0 auto;
  position: relative;
}

/* painéis */
.pva-impact__panel {
  background: var(--pva-brown);
  color: var(--pva-white);
  min-height: var(--panelMinH);
  position: relative;
}

/* arredonda só “por fora”, igual o print */
.pva-impact__panel--left {
  border-top-left-radius: var(--panelRadius);
  border-bottom-left-radius: var(--panelRadius);
  padding-right: calc(var(--corridor) / 2); /* abre corredor */
}
.pva-impact__panel--right {
  border-top-right-radius: var(--panelRadius);
  border-bottom-right-radius: var(--panelRadius);
  padding-left: calc(var(--corridor) / 2); /* abre corredor */
}

/* tipografia semelhante ao print */
h2.pva-impact__title-stack {
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
  letter-spacing: 1px;
  font-weight: 900;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 7vw, 6rem);
}
.pva-impact__title-accent {
  color: var(--pva-orange);
  font-size: clamp(2.6rem, 2.4vw, 4.1rem);
}
.pva-impact__title-white {
  color: var(--pva-white);
  font-size: clamp(2.6rem, 2.4vw, 4.1rem);
  line-height: 90%;
  font-family: var(--font-heading);
  font-weight: 400;
}

.pva-impact__body {
  font-size: 0.95rem;
  line-height: 1.7;
}

.pva-impact__note {
  font-size: 0.85rem;
  line-height: 1.65;
}

.pva-impact__claim {
  line-height: 1.15;
  font-size: clamp(2.6rem, 2.2vw, 4.1rem);
  line-height: 90%;
  font-family: var(--font-heading);
  font-weight: 400;
}

.pva-impact__quote {
  color: var(--pva-orange);
  font-weight: 800;
  line-height: 1.4;
  font-size: clamp(1.05rem, 1.2vw, 1.5rem);
}

/* =========================
     MAPA CENTRAL (visível)
     ========================= */
.pva-map {
  width: var(--mapW);
  position: relative;
  pointer-events: none;
}

.pva-map__svg {
  width: 100%;
  height: auto;
  display: block;

  position: relative;
  z-index: 2;
}

.pva-map__text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  font-weight: 900;
  color: #ff6040;
  font-size: clamp(2.6rem, 4vw, 5.6rem);
  letter-spacing: 1px;
}

/* preenchimento animado só dentro do mapa */
/* seu svg agora é <svg>, não <img> */
.pva-map__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* contorno por cima */
.pva-map__outline {
  fill: none;
  stroke: var(--pva-orange);
  stroke-width: 10; /* ajuste fino */
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* o retângulo que sobe e “preenche” só por dentro do Brasil */
.pva-map__fill-rect {
  fill: var(--pva-orange);
  transform-box: fill-box;
  transform-origin: 100% 100%;
  transform: translateY(100%);
}

.pva-map__fill-rect.is-animating {
  animation: pvaFillUp 3.4s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

/* 81% preenchido => sobra 19% em cima */
@keyframes pvaFillUp {
  to {
    transform: translateY(0%);
  }
}

/* mapa central posicionado no corredor */
@media (min-width: 992px) {
  .pva-map--center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
  }
}

/* =========================
     SHAPE-OUTSIDE (funcional)
     =========================
     Para o texto “abraçar” e não invadir o centro,
     usamos floats invisíveis (uma em cada painel).
     Isso garante wrap ao redor do “miolo do mapa”.
*/
@media (min-width: 992px) {
  .pva-shape {
    width: calc(var(--mapW) / 2);
    height: calc(var(--panelMinH) * 0.86);
    shape-margin: 16px;
    opacity: 0; /* invisível */
    pointer-events: none;
  }

  /* lado esquerdo: float à direita */
  .pva-shape--left {
    float: right;
    shape-outside: polygon(
      63.8% 2.26%,
      24.48% 9.55%,
      28% 19.81%,
      5.33% 35.55%,
      10.43% 47.59%,
      78.3% 77.5%,
      84.86% 93.32%,
      100% 100%,
      98.35% 0.86%
    );
  }

  /* lado direito: float à esquerda */
  .pva-shape--right {
    float: left;
    shape-outside: ellipse(50% 50% at 50% 50%);
    shape-outside: polygon(
      52.26% 12.29%,
      28.36% 4.25%,
      0% 0.86%,
      0% 100%,
      15.21% 100%,
      95% 63.58%,
      95% 23.73%
    );
  }
}

.bg-orange {
  background-color: var(--pva-orange);
}
.bg-wine {
  background-color: rgb(101 33 19);
}

/* =========================
     Mobile: empilha + mapa vira bloco
     ========================= */
@media (max-width: 991.98px) {
  .pva-impact__panel {
    min-height: auto;
    border-radius: 26px;
  }
  .pva-impact__panel--left,
  .pva-impact__panel--right {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pva-impact__panel--left::before,
  .pva-impact__panel--left::after,
  .pva-impact__panel--right::before,
  .pva-impact__panel--right::after {
    display: none;
  }

  .pva-map--center {
    position: static;
    transform: none;
    margin: 1.25rem auto;
  }
  .bg-orange {
    background-color: var(--color-wine);
  }
  .py-map {
    padding: 60px 0;
  }
}

@media (max-width: 768px) {
  .py-map {
    padding: 60px 0;
  }
}
p:empty {
    display: none;
    margin: 0;
}

.BlogPage {
    margin-top: 40px;
}
.BlogPage ul {
    list-style: none;
    float: left;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.BlogPage ul li {
    margin: 0px;
    padding: 0px;
    text-transform: uppercase;
    float: left;
}
.BlogPage ul li a {
    background-color: #652113;
    float: left;
    padding: 10px 30px;
    color: #fff;
    margin-left: 5px;
    margin-right: 5px;
    text-decoration: none;
    border-radius: 40px;
    transition: all 0.3s ease;
}
.BlogPage ul li a:hover {
    background-color: #49160b;
}
.blog-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
a.noticiasbloglink {
    background-color: #652113;
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 999;
    padding: 10px 30px;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 40px;
    transition: all 0.3s ease;
}
.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    padding: 40px 30px;
    text-align: center;
}
.blog-overlay p {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    margin-bottom: 15px;
    text-align: left;
}
.blog-overlay .btn {
    border: none;
    padding: 0px;
    color: #F39325;
    font-weight: 700;
    background: none;
    float: left;
    transition: all 0.3s ease;
}
.mgtop {
    margin-top: 40px;
    margin-bottom: 130px;
}
.linkInterna a {
    background-color: #652113;
    float: left;
    padding: 10px 30px;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 40px;
    transition: all 0.3s ease;
}
a.btnVoltar {
    background-color: #171717;
    float: right;
    padding: 10px 20px;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 40px;
    transition: all 0.3s ease;
}
.contentSingle {
    padding-top: 40px;
	padding-bottom:60px;
	background-color:#ffffff;
	padding-left:30px;
	padding-right:30px;
    font-size: 16px;
	margin-top:40px;
	margin-bottom:80px;
	border-radius:30px;
}
.has-submenu {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #181818;
  min-width: 220px;
  padding: 10px 0;
  list-style: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  z-index: 999;
  border-radius:10px;
}

.submenu li a {
  display: block;
  padding: 8px 20px;
  color: #f39325;
  text-decoration: none;
}

.submenu li a:hover {
  background: #505050;
}

.has-submenu:hover .submenu {
  display: block;
}
.camp {
    margin-top: 70px;
}
div.st-last{display: inline-block !important;}
span.st-label{display:none !important;}
#st-1.st-has-labels .st-btn {
    min-width: auto !important;
}
.pbanner{
	margin-top: -30px;
    margin-bottom: 60px;
    font-size: 20px;
}
/* ===== Accordion Humane Washing (responsivo, sem JS) ===== */

.hw-accordion{
  width: min(980px, 100%);
  margin: clamp(24px, 4vw, 56px) auto;
  padding: 0 clamp(14px, 3vw, 24px);
}

.hw-accordion__header{
  margin-bottom: clamp(14px, 2.2vw, 20px);
}

.hw-accordion__title{
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.1;
  margin: 0 0 8px 0;
}

.hw-accordion__subtitle{
  margin: 0;
  font-size: clamp(14px, 1.5vw, 16px);
  opacity: .85;
}

.hw-accordion__list{
  display: grid;
  gap: 12px;
}

/* Card */
.hw-item{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}

/* remove marker padrão do summary */
.hw-item > summary{
  list-style: none;
}
.hw-item > summary::-webkit-details-marker{
  display: none;
}

/* linha do título */
.hw-item__summary{
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 2vw, 18px);
  user-select: none;
}

.hw-item__number{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  flex: none;
}

.hw-item__label{
  font-size: clamp(14px, 1.7vw, 18px);
  font-weight: 600;
  line-height: 1.25;
}

.hw-item__icon{
  width: 18px;
  height: 18px;
  position: relative;
  opacity: .9;
}

/* ícone + (vira x/– quando abre) */
.hw-item__icon::before,
.hw-item__icon::after{
  content:"";
  position:absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: currentColor;
  border-radius: 999px;
}
.hw-item__icon::after{
  width: 2px;
  height: 18px;
}

.hw-item[open] .hw-item__icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0; /* vira “–” */
}

/* conteúdo */
.hw-item__content{
  padding: 0 clamp(14px, 2vw, 18px) clamp(14px, 2vw, 18px);
  border-top: 1px solid rgba(255,255,255,.10);
}

.hw-item__content p{
  margin: 12px 0 0 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.6;
  opacity: .92;
}

/* hover/focus */
.hw-item__summary:hover{
  background: rgba(255,255,255,.04);
}

.hw-item__summary:focus-visible{
  outline: 3px solid rgba(255,255,255,.22);
  outline-offset: -3px;
}

/* desktop: melhora espaçamento */
@media (min-width: 900px){
  .hw-accordion__list{ gap: 14px; }
  .hw-item__number{ width: 38px; height: 38px; }
}
.mr{
	margin-right: 20px;
	margin-bottom:20px;
}
.compromisso{
	padding:14px 20px;
	background-color:white;
	border-radius:30px;
	color:#171717 !important;
	font-weight:bold;
}
.statuscompromisso{
	color:#652113 !important;
	font-weight:normal !important;
}
.titlecompromisso{
	margin:0px;
	padding:0px;
	color:#f39325;
	font-weight:bold;
}
.listcompromisso{
	color:white;
}
.denunciarcompromisso{
	list-style: none;
    margin: 0px;
    padding: 0px;
	color:#f39325;
}
.denunciarcompromisso li a{
	float:left;
	padding:10px;
	background-color:white;
	margin:10px;
	color:#f39325;
	border-radius:10px;
}
.denunciarcompromisso li a:hover{
	background-color:#f39325;
	color:white;
}