/* Hover Effects - Inspirado no Canvas Template */

/* ============================================
   TRANSIÇÕES GLOBAIS
   ============================================ */

/* Transições suaves para elementos comuns */
a, button, input[type="submit"], .btn {
  transition: all 0.3s ease;
}

img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ============================================
   CARDS E BOXES - ELEVAÇÃO
   ============================================ */

/* Efeito de elevação em cards e boxes */
.item-serv,
.box-footer,
.boxSidebar,
.bloco-info,
.servico-card,
.feature-item,
.news-item,
.parceiro-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-serv:hover,
.servico-card:hover,
.feature-item:hover,
.news-item:hover,
.parceiro-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Elevação sutil para boxes do sidebar */
.boxSidebar:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ============================================
   LINKS - UNDERLINE ANIMADO
   ============================================ */

/* Links com underline animado */
.txtConteudo a:not(.btn),
.bloco-info a:not(.btn),
footer a:not(.btn) {
  position: relative;
  text-decoration: none;
  display: inline-block;
}

.txtConteudo a:not(.btn)::after,
.bloco-info a:not(.btn)::after,
footer a:not(.btn)::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.txtConteudo a:not(.btn):hover::after,
.bloco-info a:not(.btn):hover::after,
footer a:not(.btn):hover::after {
  width: 100%;
}

/* ============================================
   BOTÕES - ELEVAÇÃO E ESCALA
   ============================================ */

/* Efeito em botões */
.btn, 
input[type="submit"],
button[type="submit"],
.btn-enviar,
.btn-default {
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.btn-enviar:hover,
.btn-default:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn:active,
input[type="submit"]:active,
button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ============================================
   IMAGENS - ZOOM SUAVE
   ============================================ */

/* Zoom suave em imagens */
.parceiro-item img:hover,
.news-item img:hover,
article img:hover {
  transform: scale(1.05);
}

/* Container para prevenir overflow */
.image-hover-container {
  overflow: hidden;
}

/* ============================================
   MENU - HOVER EFFECTS
   ============================================ */

/* Links do menu com transição */
.navbar-nav > li > a {
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* ============================================
   ÍCONES - ROTAÇÃO E ESCALA
   ============================================ */

/* Efeito sutil em ícones sociais */
.line-socialIcons a {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.line-socialIcons a:hover {
  transform: translateY(-3px);
}

/* Ícones ET-Line com pulse no hover */
[class*="icon-et-"]:hover {
  animation: icon-pulse 0.6s ease;
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ============================================
   SERVIÇOS - HIGHLIGHT
   ============================================ */

/* Destaque em itens de serviços */
.item-serv {
  background-color: transparent;
  padding: 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.item-serv:hover {
  background-color: rgba(224, 70, 34, 0.05);
}

.item-serv h3 {
  transition: color 0.3s ease;
}

.item-serv:hover h3 {
  color: #E04622;
}

/* ============================================
   LISTAS - HOVER EM ITEMS
   ============================================ */

/* Efeito em itens de lista */
.item-serv ul li {
  transition: padding-left 0.3s ease, color 0.3s ease;
}

.item-serv ul li:hover {
  padding-left: 10px;
  color: #E04622;
}

/* ============================================
   FOOTER - LINKS E ÍCONES
   ============================================ */

/* Links do footer com efeito */
.tpl-footer a {
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.tpl-footer .box-footer.endereco ul li:hover,
.tpl-footer .footer-unidades li:hover {
  padding-left: 5px;
}

/* ============================================
   INPUTS - FOCUS E HOVER
   ============================================ */

/* Efeito em campos de formulário */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
.form-control {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
textarea:hover,
.form-control:hover {
  border-color: #E04622;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
.form-control:focus {
  border-color: #E04622;
  box-shadow: 0 0 0 0.2rem rgba(224, 70, 34, 0.15);
  outline: none;
}

/* ============================================
   PARCEIROS - OPACITY E ESCALA
   ============================================ */

/* Efeito em logos de parceiros */
.parceiro-item {
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.parceiro-item:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* ============================================
   NOTÍCIAS/BOLETIM - CARD EFFECT
   ============================================ */

/* Cards de notícias */
.news-item,
.boletim-item {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-item:hover,
.boletim-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* ============================================
   TELEFONES - HIGHLIGHT
   ============================================ */

/* Destaque nos telefones do header */
.phoneHeader ul li {
  transition: color 0.3s ease, transform 0.3s ease;
}

.phoneHeader ul li:hover {
  color: #E04622;
  transform: translateX(3px);
}

/* ============================================
   ENDEREÇO HEADER - HOVER
   ============================================ */

/* Efeito no endereço do header */
.addressHeader address,
.addressHeader .email-principal a {
  transition: color 0.3s ease;
}

.addressHeader address:hover,
.addressHeader .email-principal a:hover {
  color: #E04622;
}

/* ============================================
   BREADCRUMB / NAVEGAÇÃO
   ============================================ */

/* Efeito em breadcrumbs e paginação */
.breadcrumb a,
.pagination a {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   PERFORMANCE - WILL-CHANGE
   ============================================ */

/* Otimização de performance para elementos com hover */
.item-serv,
.btn,
.line-socialIcons a,
.news-item,
.parceiro-item {
  will-change: transform;
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   MOBILE - AJUSTES
   ============================================ */

/* Desabilitar alguns efeitos em mobile/touch */
@media (hover: none) and (pointer: coarse) {
  .item-serv:hover,
  .news-item:hover,
  .parceiro-item:hover {
    transform: none;
  }
  
  /* Manter apenas feedback de cor */
  .item-serv:active {
    background-color: rgba(224, 70, 34, 0.1);
  }
}