/* CONFIGURAÇÕES GERAIS */

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Light.woff2') format('woff2'),
        url('../fonts/OpenSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans.woff2') format('woff2'),
        url('../fonts/OpenSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),
        url('../fonts/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


html {
    font-family: "OpenSans";
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin:0;
    padding:0;
}

:root {
  --laranja: rgb(235,102,8);
  --vermelho: rgb(192,22,49);
  --cinza-claro: rgb(230,230,230);
  --cinza-escuro: rgb(102,102,102);
}

*{
    box-sizing:border-box;
}

h1{
    font-size: 32px;
    color:var(--cinza-escuro);
}



/*---------- TOPO ----------- */
.header-pages {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid var(--laranja);      /* linha interna (grossa) */
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 5px var(--laranja);
    overflow: visible;
}

.logos {
    display: flex;
    gap: 25px;
    align-items: flex-end;
}

.logos .logo-dello {
    width: 150px;
    height: auto;
    transition: transform 0.3s ease;
}

.logos .logos-midias {
    width:50px;
    display: flex;    
    flex-wrap: wrap;
    gap: 5px;
    align-items: flex-end;
}

.logos .logos-midias .logo-midia {
    width: auto;
    height: 20px;
    transition: transform 0.3s ease;
}

.logos .logos-midias .logo-midia:hover {
    transform: translateY(-5px);
}

.logos .logos-midias .icon-busca{
    width: 30px;
    height: 30px;    
    fill: var(--cinza-escuro);
    stroke-width: 2px;
    transition: transform 0.3s ease;  
}

.logos .logos-midias .busca-wrapper:hover .icon-busca{
    transform: translateX(-5px);
}


.logos .logos-midias .busca-wrapper{
    position:relative; 
    cursor:pointer;
    z-index:10;
}


.logos .logos-midias .busca-wrapper::after{
    content:"BUSCA";
    position:absolute;
    top:0;
    left:30px;    
    font-size:18px;  
    font-weight: bold;
    z-index: 99;
    opacity: 1;
    transition: background-color 0.3s ease;
    background-color: #d68336;
    border-radius: 0 5px 5px 0;
    color:#fff;
    padding:3px;    
}


.logos .logos-midias .busca-wrapper:hover::after{
    opacity: 1;    
    cursor: pointer;
    background-color: #d66936;
}

/* --------busca --------*/
#busca-container{
    width:100%;
    max-height:0;
    display:flex;
    justify-content: center;
    overflow:hidden;
    transition:max-height .3s ease;    
}

#busca-container.ativo{
    max-height:160px;
}

#busca-container form {
    width: 500px;
    max-width: 90%;
    margin-top: 20px;
    display:flex;
    flex-wrap: nowrap;
}

#busca-container form input{
    height: 40px;
    padding:10px;
    font-size: 18px;
    border-radius:20px 0 0 20px;
    border:solid 1px var(--cinza-claro);
    flex-grow:1;
}

#busca-container form button {
    border-radius:0 20px 20px 0;
    height:40px;
    background-color: var(--laranja);
    border: none;
    color:#fff;
    padding:5px;
    cursor:pointer;
    font-weight: bold;
    flex-grow:0;
}


/* -------- MENU --------- */
.menu {
    display: flex;
    gap: 0px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    align-items: flex-end;
    align-items: stretch;
}

.menu ul {
    height: 100%;
}

/* ESCONDE MOBILE POR PADRÃO */
.menu-mobile{
    display: none;
}

/* ÍCONE MENU HAMBÚRGUER */
.menu-toggle{
    width: 30px;
    height: 22px;
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 10002;
    padding:5px;
}

.menu-toggle span{
    position: absolute;
    width: 100%;
    height: 3px;
    background: #000;
    left: 0;
    transition: .3s ease;
}

.menu-toggle span:nth-child(1){
    top: 0;
}

.menu-toggle span:nth-child(2){
    top: 9px;
}

.menu-toggle span:nth-child(3){
    bottom: 0;
}

/* ANIMAÇÃO ATIVA */
.menu-toggle.active span:nth-child(1){
    transform: rotate(45deg);
    top: 9px;
}

.menu-toggle.active span:nth-child(2){
    opacity: 0;
}

.menu-toggle.active span:nth-child(3){
    transform: rotate(-45deg);
    bottom: 10px;
}

/*----------- MENU ACORDEON SUBCATEGORIAS ----------*/

.linha-header a {
    text-decoration: none;
    color: var(--cinza-escuro);
}


/* ---------- LINK DO MENU ---------- */
.menu li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;    
    color: var(--cinza-escuro);
    text-decoration: none;
    overflow: hidden;
    background-color: #fff; /* fundo branco padrão */        
}

/* ---------- ÍCONE ---------- */
.icone-wrapper {
    position: relative;
    display: flex;   
    justify-content: center;
    align-items: center;
    width: 100%;        /* ocupa toda a largura do link */    
    padding-top:10px;    
}

/* Fundo laranja do ícone */
.icone-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--laranja);
    opacity: 0;              /* só aparece no hover */
    transition: opacity 0.3s ease-in-out;
    z-index: 0;    
}

/* SVG do ícone */
.icone-menu {
    display: block;
    width: 50px;
    height: 40px;
    position: relative;
    z-index: 1;               /* acima do fundo laranja */
    fill: var(--cinza-escuro);
    transition: fill 0.3s;
    margin: 8px 0 5px 0;
}

/* ---------- TEXTO ---------- */
.menu-text {
    position: relative;
    z-index: 1;               /* acima do fundo vermelho */
    width: 100%;
    text-align: center;
    padding: 0 15px 0 15px;
}

/* Fundo vermelho do texto */
.menu li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;                /* começa sem fundo */
    background-color: var(--vermelho);
    z-index: 0;               /* atrás do texto */
    transition: height 0.3s ease-out;    
}

/* ---------- HOVER ---------- */
.menu li a:hover .icone-wrapper::before {
    opacity: 1;               /* mostra fundo laranja */
}

.menu li a:hover .icone-menu,
.menu li a:hover .menu-text {
    fill: #fff;               /* ícone branco */
    color: #fff;              /* texto branco */
}

/* Faz o fundo vermelho do texto subir animado */
.menu li a:hover::after {
    height: calc(100% - 60px); /* cobre só a área do texto */
}

/*-------------- MENU NOVO ----------------*/
/* ===== CONTAINER ===== */

.menu-expansivel{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #f5f5f5;
    background: linear-gradient(180deg, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 100%);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.menu-expansivel.ativo{
    max-height: 2000px;
    padding: 20px;
}

/* ===== TOPO ===== */

.menu-topo{
    margin-bottom: 15px;
}

.menu-topo a{
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    color:var(--laranja);
}

/* ===== GRID ===== */

.linhas-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
    gap: 15px;
}

/* ===== LINHA ===== */

.linha{
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
}

/* HEADER */

.linha-header{
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 3px;
    color:var(--cinza-escuro);
    position: relative;
}

.linha-header::after{
    content: '';
    width: 0%;
    height: 1px;
    background-color: var(--vermelho);
    position:absolute;
    bottom: -1px;
    transition: width 0.3s ease;
}

.linha-item:hover .linha-header::after{
    width: 100%;
}


.linha-header:hover .toggle-menu {    
    color:#fff;
    transition: transform 0.3s ease;    
    border-radius: 10px;
}

.linha-item.ativo .toggle-menu {
  transform: rotate(180deg);  
}


.toggle-menu svg {
    width: 14px;
    height: 14px;
}

.toggle-menu svg polygon {
    fill:var(--cinza-escuro);
    opacity: 0.4;
}

/* Animação base */
@keyframes setaPisca {
    0%   { fill: #fff; opacity: 0.4; }
    20%  { fill: var(--vermelho); opacity: 1; }
    40%  { fill: #fff; opacity: 0.4; }
    100% { fill: #fff; opacity: 0.4; }
}

/* 🔽 agora começa de baixo pra cima */
.linha-item:hover .seta1 { /* topo */
    animation: setaPisca 1.2s infinite;
    animation-delay: 0.4s;
}

.linha-item:hover .seta2 { /* meio */
    animation: setaPisca 1.2s infinite;
    animation-delay: 0.2s;
}

.linha-item:hover .seta3 { /* baixo */
    animation: setaPisca 1.2s infinite;
    animation-delay: 0s;
}




/* TIPOS */


.tipos a{
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: var(--cinza-escuro);
    font-size: 15px;
}

.tipos a:hover{
    color: VAR(--vermelho);
}

.menu-expansivel{    
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.menu-expansivel .tipos {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.menu-expansivel .linha-item.ativo .tipos {
    max-height: 500px; /* ou 1000px se quiser garantir */
}

.ver-todos {
    font-weight: bold;    
}

/*------SEGUNDO NÍVEL MENU -----------*/
.linha-conteudo{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* 🔥 IMPORTANTE: garantir que nada "vaze" */
.linha-conteudo > * {
    overflow: hidden;
}

.linha.ativo .linha-conteudo{
    max-height: 500px; /* ou maior dependendo do conteúdo */
}  


/* ---- menu comprar ----- */
.form-comprar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.menu-topo, .menu-expansivel {
    width:100%;        
}


.menu-expansivel table {
    height: 100px;
    border-collapse: collapse;     
}

.menu-expansivel table th a img {
    transition: transform 0.3s ease;
}

.menu-expansivel table th a img:hover {
    transform: scale(0.9);
}

.menu-expansivel table th {
    width: 150px;
}

.menu-expansivel table th:last-child img {
    width: 120px;
}

.menu-expansivel table img {
    width: 80px;
}

.menu-expansivel tr {
    text-align: center;
}

.menu-expansivel table .cel-borda {
    border-left:1px solid var(--cinza-escuro);
}



/*---------- BANNER HOME -------------*/

.banner-home {
margin-top:10px;
padding-bottom:5px;
box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.hero{
width:100%;
position:relative;
}

.hero .swiper{
width:100%;
}

.hero .swiper-slide picture{
display:block;
width:100%;
height:auto;
}

.hero img{
width:100%;
height:100%;
display:block;
}

/* setas */

.hero-prev,
.hero-next{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:10;
font-size:42px;
color:#000;
cursor:pointer;
padding:10px 16px;
user-select:none;
opacity: 0.3;
}

.hero-prev:hover,
.hero-next:hover{
    opacity:1;
}


.hero-prev{ left:20px; }
.hero-next{ right:20px; }

/* dots */

.hero-pagination{
position:absolute;
bottom:25px;
left:50%;
transform:translateX(-50%);
z-index:10;
display:flex;
gap:10px;
}

.hero-pagination .swiper-pagination-bullet{
width:10px;
height:10px;
border:solid 1px #969696;
opacity:0.2;
}

.hero-pagination .swiper-pagination-bullet-active{
background:var(--laranja);
opacity:1;
}

.hero-pagination{
position:absolute;
bottom:20px;
left:0;
width:100%;
text-align:center;
z-index:20;
pointer-events:auto;
}

.hero-pagination .swiper-pagination-bullet{
width:10px;
height:10px;
background:#fff;
opacity:.7;
margin:0 4px;
}

.hero-pagination .swiper-pagination-bullet-active{
background:var(--laranja);
opacity:1;
}

.divisor-linha {
    width: 100%;
    height: 10px;
border:0;
padding:0;
margin:0;
background: linear-gradient(
    to bottom,
    #fff 0 3px,
    var(--laranja) 1px 7px,
    #fff 7px 9px,
    var(--laranja) 9px 10px
  );
}


/*------ COMPRAR ONLINE ------------- */

.comprar {
    background-color: var(--laranja);
    transition: background-color 0.3s ease;
}
.comprar, .comprar.ativo {
    margin: 40px 0 40px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    
    position: relative;
}

.comprar.ativo {
    background-color: #fff;
}

.toggle {
    appearance:none;
    background:none;
    border:0;    
    font-family: "OpenSans";
    font-weight: 300;
    font-style: normal;
    font-size:40px;
    cursor:pointer;   
    color: #fff;
    position: relative;    
}

.comprar.ativo .toggle {
    color: var(--cinza-escuro);
}

.toggle:hover {
    color: var(--cinza-claro);
}


.toggle {
    position: relative;    
    height: 30px;
}

.icone-seta {
    width: 20px;
    height: 20px;
    stroke: #fff;
    stroke-width: 2;
    fill: none;
    animation: apontar 5s ease-in-out infinite;
    position:absolute;
}

@keyframes apontar {
    0%   { transform: rotate(90deg) translateX(0px); }
    9%   { transform: rotate(90deg) translateX(0px); }
    11%  { transform: rotate(90deg) translateX(3px); }
    13%  { transform: rotate(90deg) translateX(0); }
    15%  { transform: rotate(90deg) translateX(3px); }
    17%  { transform: rotate(90deg) translateX(0); }
    40%  { transform: rotate(90deg) translateY(0); }
    100% { transform: rotate(90deg) translateY(0); }
}

.lojas{
  width:100%;
  max-height:0;
  margin-top: 50px;
  
  overflow:hidden;
  transition:max-height .4s ease; 
  display: flex;
  justify-content: center;  
}

.comprar.ativo .lojas{
    width: 100%;
    max-height:800px; 
}

.lojas table {
    height: 100px;
    border-collapse: collapse;    
}

.lojas table th a img {
    transition: transform 0.3s ease;
}

.lojas table th a img:hover {
    transform: scale(0.9);
}

.lojas table th {
    width: 150px;
}

.lojas table th:last-child img {
    width: 120px;
}

.lojas table img {
    width: 80px;
}

.lojas tr {
    text-align: center;
}

.lojas table .cel-borda {
    border-left:1px solid var(--cinza-escuro);
}



/*---------- TAXONOMY CATEGORIA PRODUTOS ----------------*/
.categoria-header {
    width:100%;
    text-align: center;
    text-transform: uppercase;
}


.categoria-produtos {
    width: 100%;
    padding: 60px 0;
    text-align: center;   
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.grid-produtos {
    width:90%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;  
}

.produto-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;   /* força formato quadrado */
    overflow: hidden;
    background: #f5f5f5;
}

.produto-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;     /* preenche sem distorcer */
    display: block;
}

.produto-item {
    text-align: center;
    transition: all 0.3s ease;
    border: solid 1px var(--cinza-claro);
    padding: 10px;
    border-radius: 20px;

}

.produto-item:hover {
    transform: translateY(-5px);
    border-radius: 0;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


.produto-item a {
    text-decoration:none;
    color:var(--cinza-escuro);
}

.produto-nome {
    font-size: 18px;
    margin: 15px 0 5px;  
    text-transform: uppercase;  
}

.produto-codigo {
    font-size: 14px;
    color: #777;
}


/*------ BANNERS CATEGORIAS ------------- */
.banner-cat {    
    height: auto;
    background-color: var(--cinza-claro);
    padding: 30px;
    margin-bottom: 20px;
}

.banner-cat:last-child {
    margin-bottom: 80px;
}

.banner-cat p {
    text-align:center;
    font-size: 25px;
    margin: 10px 0 20px 0;
}

.banner-cat img {
    width: 150px;
    height: 150px;
}

.banner-cat a {
    font-size: 15px;
    color: var(--cinza-escuro);
    text-transform: uppercase;
    text-decoration:none;
}


/*------------ FOOTER ---------------*/
footer {
    width:100%;
    background-color: var(--laranja);
    display:flex;
    flex-direction: column; 
    align-items: center;
    margin-top: 20px;
    padding-bottom: 20px;
}

.menu-footer {
    width: 100%;
    display: flex;
    margin:10px 0 10px 0;
    padding:0;
    justify-content: center;
    gap:15px;
    flex-wrap: wrap;    
    font-size: 18px;
    white-space: nowrap;        
}

.menu-footer ul {
    width:100%;
    display:flex;
}

.menu-footer li {
    list-style: none;
}

.menu-footer li:not(:last-child)::after {
    content: "|";
    position: relative;
    right: -10px;
    color: #fff;
}

.menu-footer li a{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
}

.menu-footer li a:hover {
    text-decoration: underline;     
}

.baixo-footer {
    width:100%;
    background-color:#fff;
    margin-top:5px;
    border-top: solid 2px #fff;
    display:flex;
    gap: 15px;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
}

.baixo-footer .logo-footer .reciclo {
    transition: all 0.3s ease;
}

.baixo-footer .logo-footer .reciclo:hover {
    transform: scale(1.5);
    transform-origin: left bottom;
}

.baixo-footer .logo-footer a .logo-dello{
    transition: transform 0.3s ease-in-out;
}

.baixo-footer .logo-footer a:hover .logo-dello {
    transform: translateY(-5px);
}

.baixo-footer .logo-footer {
    margin-right:auto;
    margin-left: 20px;    
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}

.baixo-footer .logo-footer .logo-dello{
    width: 200px;
    height: auto;
}

.baixo-footer .icones {    
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap:20px;
}

.baixo-footer .icones .icones-footer {
    border-right: solid 1px var(--cinza-escuro);
    padding: 0 10px 0 10px;
}

.baixo-footer .icones-footer {
    height: 160px;
}

.baixo-footer .icones-footer:not(:last-child) {
    border-right: solid 1px var(--cinza-escuro);
    padding-right: 20px;
    text-align: center;
}


.baixo-footer .icones-footer:last-child {
    margin-right: 20px;
}

.baixo-footer .icones-footer img {
    width: auto;
    height: 80px    
}

.baixo-footer .icones-footer a {
    color: var(--cinza-escuro);
    font-size: 15px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition: transform  0.3s ease;
}

.baixo-footer .icones-footer:hover a {
    transform: translateY(-5px);
}

.baixo-footer .icones-footer .logos-assinatura {    
    height:auto;
    display: flex;
    gap: 15px;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-end;
}

.baixo-footer .icones-footer .logos-assinatura img {
    width:auto;
    height: 30px;
    filter:grayscale(1);
    transition: filter 0.3s ease;
}

.baixo-footer .icones-footer .logos-assinatura img:hover {
       filter:grayscale(0);
}


.baixo-footer .icones-footer .logos-assinatura .limao {
    transform: scale(1.2);
    transform-origin: left bottom;    
}


.abfiae {
    filter:grayscale(1);
    transition: filter 0.3s ease;
}

.abfiae:hover {
    filter:grayscale(0);    
}

.baixo-footer .endereco {    
    font-size: 15px;    
    display: flex;    
    gap: 10px;
    border-right: solid 1px var(--cinza-escuro);
    padding-right: 10px;
}

.baixo-footer .endereco a {
    text-decoration: none;
    color:#000;    
}

.baixo-footer .endereco a:hover {
    text-decoration: underline;
}

.baixo-footer .endereco img {
    width: auto;
    height: 80px;
}


/* SUBMENU DE CATEGORIAS */
.menu > li {
    position: relative;
    display: block;
}

.mega-subcategorias {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 20px;
    display: none;
    width: max-content;        
    white-space: nowrap;
    min-width: 250px;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
    flex-direction: column;
    gap: 10px;
    text-align: center;
    z-index: 99999;
    top: 100%;
    bottom: auto;
    pointer-events: auto;
    transform: translateY(0);
}

.menu > li:hover .mega-subcategorias {
    display: flex;
}

.mega-subcategorias a {
    font-size:15px;
    display: block; /* importante para ocupar toda a área */
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    transition: background .2s ease, color .2s ease;    
}

    .mega-subcategorias a:hover {
        background: var(--cinza-claro)
    }

.header-pages {
    height: 100px;
    position: relative;
    z-index: 10;    
}


.hero {
    z-index: 1;
}



/*------------ GOOGLE MAPS ------------ */

.mapa-wrapper {
    position: relative;
    display: inline-block;
}

/* Ícone */
.icone-mapa {
    cursor: pointer;
    transition:all 0.3s ease;
}

.icone-mapa:hover {
    transform: translateY(-5px); 
}

/* Container do mapa */
#modal-mapa{
    display:none;
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);

    justify-content:center;
    align-items:center;
}

.modal-mapa-content{
    position:relative;
    background:#fff;
    padding:10px;
    border-radius:6px;
    max-width:90%;
}

.modal-mapa-content iframe{
    width:800px;
    max-width:100%;
}

.fechar-mapa{
    position:absolute;
    top:-10px;
    right:-10px;
    background:#000;
    color:#fff;
    width:30px;
    height:30px;
    text-align:center;
    line-height:30px;
    border-radius:50%;
    cursor:pointer;
    font-size:20px;
}


/* ------------- PAGE.PHP --------------*/
.site-main {
    width:100%;
    display: flex;
    justify-content: center;    
}

.page-content {
    width:80%;
}

.entry-title {
    margin:50px 0 50px 0;
}

.site-main img {
    width:100%;
    height:auto;
}

.site-main img:hover {
    opacity:0.9;
}

.site-main article {
    width: 70%;
    min-width: 700px;
    margin-bottom: 30px;
    text-align:justify;
}

.site-main .entry-title {
    text-align:center;
    color: var(--cinza-escuro);
    font-size: 32px;
    text-transform:uppercase;
}





/*---------- LIGHTBOX REPRESENTANTES -------------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    border-radius: 8px;
    position: relative;
    overflow-y: auto;
    font-size: 18px;
}

.modal-content .cidade {
    width:100%;
    background-color: var(--cinza-claro);
    font-size: 18px;
    color:var(--cinza-escuro);
    font-weight: bold;
    text-transform: uppercase;
    padding:10px;
    border-radius: 10px;
    text-align: center;
}

.modal-content .rep-item a {
    color:#000;
    text-decoration: none;
}

.rep-com-sub {
    background-color: #f7f7f7; /* cinza bem leve */
    padding: 10px;
    border-radius: 6px;
}

.grupo-cidade {
    background: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.grupo-cidade .cidade {
    font-weight: bold;
    margin-bottom: 10px;
}

.modal-content .titulo-rep {
    font-weight: bold;
    color:var(--cinza-escuro);
    text-transform: uppercase;
}

.modal-content .rep-item a:hover {
    text-decoration: underline;
}


.hr-normal{
border:none;
border-top:1px solid #ddd;
margin:15px 0;
}

.hr-grupo{
border:none;
border-top:3px dotted var(--vermelho);
margin:30px 0;
}


.fechar-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    cursor: pointer;
}

.categorias-representante {
    color: var(--vermelho);
    font-size: 13px;
    text-transform: uppercase;
    line-height: 0;
    transform: translateY(-8px);
}

/*------------ MAPA REPRESENTANTES -----------*/

.mapa-brasil-wrapper{
    width: 500px;
    max-width: 100%;
    padding:20px;
    border: solid 3px var(--cinza-claro);
    border-radius: 20px;
    margin-top: 30px;
    background-color: rgb(250,250,250);
    display: flex;    
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mapa-brasil-wrapper h1 {    
    font-size: 32px;
    color: var(--cinza-escuro);
    text-transform: uppercase;    
}

.mapa-brasil-wrapper p {
    text-align: center;
    font-size: 15px;
}

#mapa-brasil{
    width:100%;
    height:auto;
}

/* ESTADOS */
#mapa-brasil .estado path{
    fill:#e6e6e6;
    stroke:#c8c8c8;
    stroke-width:1;
    cursor:pointer;
    transition:fill .2s ease;
}

#mapa-brasil .estado:hover path{
    fill:var(--laranja);
}

#mapa-brasil .estado.ativo path{
    fill:var(--cinza-claro);
}

/* SIGLAS */
#mapa-brasil .texto-mapa{
    font-size: 9px;
    font-weight: bold;
    fill: var(--cinza-escuro);
    pointer-events: none;
    user-select: none;
    transition: fill .2s ease;
}

/*------ FALE CONOSCO ---------*/

.site-fale {
    width:100%;
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}


.site-fale .formulario h1 {
    margin-top: 30px;
    font-size: 32px;
    color: var(--cinza-escuro);
    text-transform: uppercase;
}

.site-fale .formulario input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    font-size: 15px;
    padding: 8px;
    width: 500px;
    margin:5px 0;
    border-radius: 20px;
    border:solid 1px var(--cinza-claro)
}

.site-fale .wpcf7-list-item-label {
    font-size: 12px;
}

.site-fale .privacidade {
    font-size: 12px;
}

.site-fale input[type="submit"] {
    width: 90px;
    padding: 10px;
    border-radius: 20px;
    background-color: var(--laranja);
    color: #fff;
    font-weight: bold;
    border: 0;
    cursor: pointer;    
}

.site-fale input[type="submit"]:hover {
    background-color: #d68336;
}


/*---------MISÃO, VISÃO, VALORES -----------*/

.mvv-dello {
    width:100%;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
    margin: 30px 0 30px 0;
}

.mvv-dello hr {
    width: 50%;
    border: dotted 1px var(--cinza-escuro);
    margin: 30px 0 30px 0;
}

.mvv-dello svg {
    width: 80%;
    max-width: 1000px;
}

/* CORRIGIDO - todos escopados */
.mvv-dello svg #missao,
.mvv-dello svg #visao,
.mvv-dello svg #valores {
    fill: var(--laranja);
    transition: all 0.3s ease;
}

/* CORRIGIDO - todos escopados */
.mvv-dello svg #missao:hover,
.mvv-dello svg #visao:hover,
.mvv-dello svg #valores:hover {
    transform: translateY(5px);
    fill: var(--cinza-escuro);
}

/* CORRIGIDO - todos escopados */
.mvv-dello svg #missao text,
.mvv-dello svg #visao text,
.mvv-dello svg #valores text {
    fill: #fff;
    font-weight: bold;
    font-size: 35px;
}

/* CORRIGIDO - todos escopados */
.mvv-dello svg #texto-missao [class^="clmvv"],
.mvv-dello svg #texto-visao [class^="clmvv"],
.mvv-dello svg #texto-valores [class^="clmvv"] {
    fill: var(--vermelho);
}

/* CORRIGIDO - todos escopados */
.mvv-dello svg #texto-missao tspan,
.mvv-dello svg #texto-visao tspan,
.mvv-dello svg #texto-valores tspan {
    fill: #000;
}

.mvv-dello svg line {
    stroke: #c01531;
    stroke-width: 4;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset .4s ease;
}

.mvv-dello svg #missao:hover ~ #texto-missao .linha-missao {
    stroke-dashoffset: 0;
}

.mvv-dello svg #visao:hover ~ #texto-visao .linha-visao {
    stroke-dashoffset: 0;
}

.mvv-dello svg #valores:hover ~ #texto-valores .linha-valores {
    stroke-dashoffset: 0;
}



/*------------- TIMELINE ---------------*/
.timeline-section {
    font-family: 'OpenSans';
    font-size: 16px;
}

.timeline-section svg #road,
.timeline-section svg [id^="pin-"] {
    opacity: 0;
    transform: translateY(20px);
}

.timeline-section svg [id^="text-"] {
    opacity: 0;
    transform: translateY(30px);
    transition: all .6s ease;
}

.timeline-section svg .show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Animação de balanço */
@keyframes swingOnce {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(8deg); }
    50% { transform: rotate(-6deg); }
    75% { transform: rotate(4deg); }
    100% { transform: rotate(0deg); }
}

.pin-hover {
    animation: swingOnce .6s ease;    
}

/*--*/
#timeline-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:0.3s;
    z-index:9999;
}

#timeline-modal.active{
    opacity:1;
    pointer-events:auto;
}

.timeline-card{
    background:white;
    padding:30px;
    max-width:500px;
    width:90%;
    border-radius:8px;
    position:relative;
}

.timeline-close{
    position:absolute;
    top:10px;
    right:15px;
    border:none;
    background:none;
    font-size:22px;
    cursor:pointer;
}

#timeline-year{
    margin-top:0;
}

.timeline-section .cls-27 {
    fill:var(--vermelho);    
}

.timeline-section .tit-linha {
    font-weight: bold;
    font-size: 22px;
}

.timeline-section .titutlo-linha {
    font-weight: bold;
    font-size: 45px;    
}

.timeline-section .cls-24,
.timeline-section .cls-30 {
    fill:#fff;
}

/*-------- CATÁLOGOS ----------*/
.catalogo-page .container {
    width:100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.catalogo-page h3 {
    color:var(--cinza-escuro);
}

.catalogo-page .container h1{
    text-align: center;
    text-transform: uppercase;
    margin-top: 50px;
    font-size: 32px;
    color:var(--cinza-escuro);
}

.catalogo-page .container .catalogo-item {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.catalogo-page .container .catalogo-item a {
    color: var(--cinza-escuro);
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;    
    text-align: right;    
}

.catalogo-page .container .catalogo-item a:hover {
    text-decoration: underline;
}

.catalogo-page iframe{
    width: 700px;
    max-width: 90vw;
    height: 900px;    
    border: none;
}

.catalogo-page .pdf-item {    
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid 2px var(--cinza-claro);
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.catalogo-page .pdf-item .nova-aba{
    width: 100%;
    display: flex;
    justify-content: space-between;    
}


/* ----------ERRO 404 -------------*/
.erro{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.erro .erro-404 {
    width: 80%;
    height: auto;
    max-width: 800px;
    margin: 100px 0 100px 0;
}


/* -------------PAGINAÇÃO --------------*/
/* container */
.paginacao{
    margin:40px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

/* botões */

.paginacao .page-numbers{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:36px;
    height:36px;
    padding:0 12px;

    font-size:14px;
    font-weight:500;

    text-decoration:none;

    color:#444;
    background:#f3f3f3;

    border-radius:6px;

    transition:all .2s ease;
}

/* hover */

.paginacao a.page-numbers:hover{
    background:#e5e5e5;
    color:#000;
}

/* página atual */

.paginacao .current{
    color:#fff;
}

/* anterior e próximo */

.paginacao .prev,
.paginacao .next{
    padding:0 14px;
    font-weight:500;
}
.paginacao .prev{
    font-size:0;
}

.paginacao .prev::before{
    content:"←";
    font-size:14px;
}

.paginacao .next{
    font-size:0;
}

.paginacao .next::before{
    content:"→";
    font-size:14px;
}


/*--------- archive-produtos --------------*/
.busca-produtos {
    width:100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.busca-header h1 {
    font-size: 20px;
}



/* ================= LIGHTBOX ================= */

.lightbox{
    display:flex;
    position:fixed;
    z-index:9999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);

    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;

    justify-content:center;
    align-items:center;
}

.lightbox.ativo{
    opacity:1;
    visibility:visible;
}

.lightbox-img{
    max-width:90%;
    max-height:90%;

    transform:scale(0.9);
    opacity:0;
    transition:all .3s ease;
}

.lightbox.ativo .lightbox-img{
    transform:scale(1);
    opacity:1;
}

.lightbox-fechar{
    position:absolute;
    top:20px;
    right:30px;
    color:#fff;
    font-size:40px;
    cursor:pointer;
}

/* ================= PAGE NEWS ==============*/
.news-dello{
    width: 100%; 
    display: flex;
    flex-direction: column;
    align-items: center;       
}

.news-dello .container {
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;    
}

.news-dello .container h1 {
    text-transform: uppercase;
    margin-top:50px;    
}

.news-dello .news-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.news-dello .news-item { 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:20px;
    text-align: justify;  
    margin-bottom: 40px;
    margin-top: 50px;
    position: relative;
}

.news-dello .news-item::before{
    content:'';
    width: 100%;
    max-width: 1200px;
    height:1px;
    background-color: var(--laranja);
    position: absolute; 
    bottom:20px;
    left:0;   
}

.news-dello .news-thumb:hover {
    filter: grayscale(0);
}

.news-dello .news-meta {
    font-size: 14px;    
    color: #000;    
    position: relative;
    text-align: right;    
}

.news-dello .news-thumb {
    width: 500px;          
    border-radius: 20px;
    border:solid 2px #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;    
    overflow: hidden;    
}

.news-dello .news-item img {
    width: 500px;
    height: auto;
    transform: scale(1);
    transition: transform 0.3s ease;
    display: block;
}

.news-dello .news-item img:hover {
    transform: scale(1.03); 
}


.news-dello .news-title{
    text-align: center;    
}

.news-dello .news-title a {
    text-decoration: none;
    color: var(--cinza-escuro);
    font-size: 40px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    transition: color 0.3s ease;
}

.news-dello .news-title a:hover {    
    color: var(--laranja);
}

.news-dello .read-more {
    text-decoration: none;
    color: var(--cinza-escuro);
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    text-align: right;       
}

.news-dello .read-more:hover {     
    color: var(--laranja);
}


/*=========== single.php ============*/
.single-news {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.single-news .container {
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px 0;    
}

.single-news .post-content{
    text-align: justify;
}

.single-news h1 {
    text-decoration: none;
    color: var(--cinza-escuro);
    font-size: 40px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    transition: color 0.3s ease;
}

.single-news img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    border:solid 2px #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 50px 0;
     
}

.single-news .post-meta {
    font-size: 14px;    
    color: #000;    
    position: relative;
    text-align: right;    
}


/* ============================= */
/* RESPONSIVO - abaixo de 1430px */
/* ============================= */
@media (max-width: 1430px) {

    html {
        font-size: 18px; /* diminui fonte base */
    }

    .header-pages {
        height: 80px;    

    }

    /* Logo principal */
    .logos .logo-dello {
        width: 120px;
    }

    /* Ícones redes sociais */
    .logos .logos-midias .logo-midia {
        height: 20px;
    }

    /* Ícones do menu */
    .icone-menu {
        width: 40px;
        height: 32px;
    }

 
    /* Ajuste da animação do fundo vermelho */
    .menu li a:hover::after {
        height: calc(100% - 50px);
    }

    /* Texto do menu */
    .menu-text {
        padding: 0 10px;
    }

    footer .menu-footer a {
        font-size:15px;
    }

    .grid-produtos {
        grid-template-columns: repeat(3, 1fr); 
    }

    .mvv-dello svg {
        width: 90%;    
    }

}


/* ============================= */
/* RESPONSIVO - abaixo de 1220px */
/* ============================= */
@media (max-width: 1220px) {
    .menu-text {
        font-size: 13px;
        padding:0 5px;
    }

}




/* ============================= */
/* RESPONSIVO - abaixo de 1024px */
/* ============================= */
@media (max-width: 992px) {

    html {
        font-size: 17px;
    }

    .header-pages {
        justify-content: center;
        padding: 20px;
    }

    .header-pages .logos img {
        width:200px;
        height:auto;
    }

    /* ESCONDE DESKTOP */
    .menu-principal{
        display:none;
        margin-left:auto;
    }

    .menu-toggle{
        position:absolute;
        top:20px;
        right:60px;
    }

    /* MOSTRA MOBILE */
    .menu-mobile{
        display:block;
    }

    .menu-mobile-panel{
        position:fixed;
        top:0;
        right:-100%;
        width:300px;
        height:100vh;
        background:#fff;
        padding:60px 20px 20px;
        transition:.3s ease;
        overflow-y:auto;
        z-index:10001;
        box-shadow:rgba(149,157,165,.2) 0px 8px 24px;
    }

    .menu-mobile.active .menu-mobile-panel{
        right:0;
    }

    .menu-close{
        position:absolute;
        top:20px;
        right:20px;
        background:none;
        border:none;
        font-size:30px;
        cursor:pointer;
        z-index:10;
        line-height:1;
    }

    /* ---------- SUBMENU MOBILE ---------- */

    .menu-mobile-list li{
        list-style:none;
    }

    .menu-mobile-list .mega-subcategorias{
        display:none;
        padding-left:20px;
        margin-top:8px;

    }

    .menu-mobile-list li.open > .mega-subcategorias{
        display:block;
        position:static;
        width:100%;
    }

    .menu-mobile-list .mega-subcategorias li{
        margin:6px 0;
    }

    /* ---------- LINKS MENU MOBILE ---------- */

    .menu-mobile li a{
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        text-decoration:none;
        color:var(--cinza-escuro);
        text-align:left;
    }

    .menu-mobile li a:hover{
        text-decoration:underline;
    }

    .menu-mobile li a .menu-text{
        text-align:left;
    }

    .menu-mobile li a .icone-wrapper{
        width:45px;
    }

    .menu-mobile li a:hover .icone-wrapper .icone-menu{
        transition:all .3s ease;
        fill:#d63638;
        transform:translateX(-2px);
    }

    /* ---------- FOOTER ---------- */

    .baixo-footer{
        flex-direction:column;
        flex-wrap:wrap;
    }

    .baixo-footer .logo-footer{
        margin-right:0;
        margin-left:0;
    }

    .baixo-footer .icones-footer:not(:last-child){
        border:none;
    }

    .baixo-footer .icones{
        height:auto;
        width:80%;
        padding:20px 0;
        border-top:solid 1px var(--cinza-escuro);
        border-bottom:solid 1px var(--cinza-escuro);
    }

    .baixo-footer .icones .icones-footer{
        border-right:none;
    }

    .baixo-footer .icones-footer{
        width:80%;
        height:auto;
        padding:20px;
    }

    .baixo-footer .endereco{
        width:80%;
        border:none;
        border-bottom:solid 1px var(--cinza-escuro);
        padding:20px 0;
        display:flex;
        justify-content:center;
    }

    .baixo-footer .icones-footer a{
        flex-direction:row;
        align-items:center;
        gap:10px;
    }

    .grid-produtos {
        grid-template-columns: repeat(2, 1fr); 
    }

    .mvv-dello svg {
        width: 95%;    
    }

    .site-main article {
    width: 90%;
    min-width: 90%;
    }
}