.elementor-312 .elementor-element.elementor-element-57647c7{--display:flex;--min-height:25vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-312 .elementor-element.elementor-element-314a218{padding:0px 0px 0px 0px;text-align:center;}.elementor-312 .elementor-element.elementor-element-314a218 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:1.4em;font-weight:600;text-transform:capitalize;line-height:1.2em;color:var( --e-global-color-3c531c8 );}@media(max-width:1366px){.elementor-312 .elementor-element.elementor-element-57647c7{--min-height:20vh;}}@media(max-width:1024px){.elementor-312 .elementor-element.elementor-element-314a218 .elementor-heading-title{font-size:1.2em;}}@media(max-width:767px){.elementor-312 .elementor-element.elementor-element-57647c7{--min-height:30vh;}}/* Start custom CSS for container, class: .elementor-element-57647c7 *//* 1. Configuração do container pai */
.box-produto {
    position: relative;
    overflow: hidden; /* Corta a imagem quando ela cresce */
    z-index: 1;
}

/* 2. Criando uma camada de fundo que podemos animar */
.box-produto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Herda a imagem de fundo definida no Elementor */
    background-image: inherit;
    background-size: cover;
    background-position: center;
    
    /* A mágica da transição */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: -1; /* Fica atrás do texto */
}

/* 3. Efeito de Hover */
.box-produto:hover::before {
    transform: scale(1.15); /* Zoom de 15% */
}

/* 4. Garantir que o conteúdo (h2) não suma */
.box-produto .elementor-widget-heading {
    position: relative;
    pointer-events: none; /* Opcional: faz o mouse ignorar o texto e focar no card */
}
/* O código abaixo só funcionará em telas maiores que 768px */
@media (min-width: 769px) {
    .box-produto h3 {
        opacity: 0; 
        background: rgba(0, 120, 191, 0.7); 
        padding: 10px 0; 
        transition: 0.5s;
    }

    .box-produto:hover h3 {
        opacity: 1; 
        background: rgba(0, 120, 191, 0.7); 
        transition: 0.5s;
    }
}
/* O código abaixo só funcionará em telas de até 768px (Mobile) */
@media (max-width: 768px) {
    .box-produto h3 {
        opacity: 1; 
        background: rgba(0, 120, 191, 0.7); 
        padding: 10px 0; 
        transition: 0.5s;
    }
}/* End custom CSS */