/* ============================
   SEF Climatização e Elétrica
   Estilo 3D Moderno
============================ */

/* ===== ANIMAÇÕES DE ENTRADA ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
.reveal-up { animation: fadeUp 1s ease forwards; }
.reveal-left { animation: fadeLeft 1s ease forwards; }
.reveal-right { animation: fadeRight 1s ease forwards; }

/* === FADE IN DA DIREITA === */
.anim-fadeInRight {
  animation: fadeInRight 1.2s ease-out both;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Background Gradiente para Sections */
.bg-sections{
  background: radial-gradient(circle at top, #00111a, #000);
  color: #fff;
}

.bg-rodape{
  background: radial-gradient(circle at top, #00111a, #000);
  color: #fff;
}

/* Giro 3D */
@keyframes giro3dAnim {
  0% {
    transform: rotateY(0deg) rotateX(0deg) scale(1);
  }
  50% {
    transform: rotateY(15deg) rotateX(8deg) scale(1.05);
  }
  100% {
    transform: rotateY(-15deg) rotateX(-8deg) scale(1);
  }
}
.giro3d {
  animation: giro3dAnim 8s infinite alternate ease-in-out;
  transform-style: preserve-3d;
}

/* Efeito Lamina */
@keyframes shineMove{
    0%{
        left: -75%;
    }
    100%{
        left: 125%;
    }
}
.shine{
    position: relative;
    overflow: hidden;
}
.shine::before{
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skew(-25deg);

    /* Animação Automática */
    animation: shineMove 3s infinite linear;
}

/* Efeito Pulse */
@keyframes pulseAnim {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
  }
}
.pulse {
  animation: pulseAnim 1.8s infinite ease-in-out;
}

/* Seção - Nossos Serviços */
.row,
.container,
.col {
  overflow: visible !important;
}
.card-servico-clim {
  border-radius: 16px;
  padding: 30px 20px;
  background: linear-gradient(145deg, #021424, #0859aa);
  backdrop-filter: blur(6px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.47);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-style: preserve-3d;
  color: #fff;
  width: 90%;
  will-change: transform;
  overflow: visible;
}
.card-servico-clim:hover {
  transform: rotateX(2deg) rotateY(-2deg) scale(1.03);
  box-shadow: 0 25px 60px rgba(0, 110, 255, 0.315);
}
.card-servico-elet {
  border-radius: 16px;
  padding: 30px 20px;
  background: linear-gradient(145deg, #191803, #8e8c19);
  backdrop-filter: blur(6px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-style: preserve-3d;
  color: #fff;
  width: 90%;
  will-change: transform;
  overflow: visible;
}
.card-servico-elet:hover {
  transform: rotateX(2deg) rotateY(-2deg) scale(1.03);
  box-shadow: 0 25px 60px rgba(200, 255, 0, 0.404);
}
.card-servico-eletronica {
  border-radius: 16px;
  padding: 30px 20px;
  background: linear-gradient(145deg, #0e2102, #126d2b);
  backdrop-filter: blur(6px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-style: preserve-3d;
  color: #fff;
  width: 90%;
  will-change: transform;
  overflow: visible;
}
.card-servico-eletronica:hover {
  transform: rotateX(2deg) rotateY(-2deg) scale(1.03);
  box-shadow: 0 25px 60px rgba(21, 255, 0, 0.404);
}
.card-servico-refrigeracao {
  border-radius: 16px;
  padding: 30px 20px;
  background: linear-gradient(145deg, #021424, #08aa94);
  backdrop-filter: blur(6px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.47);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-style: preserve-3d;
  color: #fff;
  width: 90%;
  will-change: transform;
  overflow: visible;
}
.card-servico-refrigeracao:hover{
    transform: rotateX(2deg) rotateY(-2deg) scale(1.03);
  box-shadow: 0 25px 60px rgba(0, 225, 255, 0.596);
}
.btn-climatizacao {
  /* Climatização */
  background: linear-gradient(145deg, #0b5f9b, #021424);
  color: #fff;
  transition: all 0.5s ease;
}
.btn-climatizacao:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 12px rgba(0,0,0,0.5),
              -6px -6px 12px rgba(255,255,255,0.05);
}
.btn-climatizacao:active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3),
              inset -3px -3px 6px rgba(255,255,255,0.05);
}
.btn-eletrica {
  /* Elétrica */
  background: linear-gradient(145deg, #927810, #191803);
  color: #fff;
  transition: all 0.5s ease;
}
.btn-eletrica:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 12px rgba(0,0,0,0.5),
              -6px -6px 12px rgba(255,255,255,0.05);
}
.btn-eletrica:active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3),
              inset -3px -3px 6px rgba(255,255,255,0.05);
}
.btn-eletronica {
  /* Eletrônica */
  background: linear-gradient(145deg, #0d7c50, #0e2102);
  color: #fff;
  transition: all 0.5s ease;
}
.btn-eletronica:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 12px rgba(0,0,0,0.5),
              -6px -6px 12px rgba(255,255,255,0.05);
}
.btn-eletronica:active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3),
              inset -3px -3px 6px rgba(255,255,255,0.05);
}
.btn-refrigeracao {
  /* Climatização */
  background: linear-gradient(145deg, #08aa94 ,#021424);
  color: #fff;
  transition: all 0.5s ease;
}
.btn-refrigeracao:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 12px rgba(0,0,0,0.5),
              -6px -6px 12px rgba(255,255,255,0.05);
}
.btn-refrigeracao:active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3),
              inset -3px -3px 6px rgba(255,255,255,0.05);
}

/* Seção - Loja SEF */
.icone-loja-sef {
  /* Icone Gradiente Loja SEF */
  background: linear-gradient(90deg, #00d4ff, #c9d428, #00d4ff);
  background-size: 200%;
  animation: gradient-loja-sef 3s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes gradient-loja-sef{
  0%{
    background-position: 0%;
  }
  100% {
    background-position: 200%;
  }
}
#btnLojaSEF {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
#btnLojaSEF:hover {
  transform: scale(1.05);
}
#btnLojaSEF::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: laminaLoop 2.5s infinite;
}
@keyframes laminaLoop {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}
.btn-3d {
  display: inline-block;
  font-size: 1rem;
  padding: 10px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 4px 4px 8px rgba(0,0,0,0.4),
              -4px -4px 8px rgba(255,255,255,0.05);
  user-select: none;
  line-height: 1.5;
  text-align: center;
}
.carrossel-3d {
  position: relative;
  overflow: hidden;
}
.carrossel-3d .slide {
  display: none;
  animation: fadeSlide 1s ease-in-out;
}
.carrossel-3d .slide.ativo {
  display: block;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Seção Quem Somos */
#sb i{
  font-size: 25px;
}
#b_face{
  color: #1877f2;
  transition: transform 0.5s ease;
}
#b_ins{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, 
              #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.4s ease;
}
#b_was{
  /* Deixa o hover suave */
  transition: transform 0.5s ease;
  color: #46df38;
}
#b_face:hover{
  text-shadow: 0 0 10px rgba(24, 119, 242, 0.7);
  transform: scale(1.2);
}
#b_ins:hover{
  text-shadow: 0 0 10px rgba(214, 36, 159, 0.6);
  transform: scale(1.2);
}
#b_was:hover{
  text-shadow:0 0 10px #46df38;
  transform: scale(1.2);
}

.card-3d-Qm {
    background: radial-gradient(circle at top, #00111a, #000);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.767);
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
    color: #fff;
}
.card-3d-Qm:hover {
    transform: rotateX(2deg) rotateY(-2deg) scale(1.02);
    box-shadow: 0 25px 60px rgb(0, 0, 0);
}
.card-3d-Qm img {
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.card-3d-Qm img:hover {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

/* Seção - Garantia e Qualidade */
#qualidade .card-selo{
  border-left: 10px solid #46df38;
}
.icon-qualidade {
  color: #46df38;
}
.card-selo {
  border-radius: 15px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.705);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-style: preserve-3d;
  backdrop-filter: blur(6px);
  max-width: 100%;
  margin: 0 auto;
  color: #fff;
  overflow: hidden;
}
.card-selo:hover {
  transform: scale(1.05) rotateX(3deg) rotateY(-3deg);
}
.card-selo i {
  transition: transform 0.3s ease;
}
.card-selo:hover i {
  transform: scale(1.2);
}

/* Seção Dicas Rápidas */
#dicas h2 i{
  color: #ffe81e;
}
#dicas button, .accordion-body{
  color: #fff !important;
}
.accordion-item {
  margin-bottom: 15px;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.808);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.accordion-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgb(251, 255, 32);
}
.accordion-button {
  background: radial-gradient(circle at top, #00111a, #000);
  border: none;
  border-radius: 15px;
  padding: 15px 20px;
  transition: all 0.3s ease;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.3);
}
.accordion-button:not(.collpased)::after, .accordion-button:not(.collapsed)::after {
  filter: invert(1) brightness(100);
}
.accordion-button:focus {
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.8);
  outline: none;
}
.accordion-body {
  background: radial-gradient(circle at top, #00111a, #000);
  padding: 20px;
  font-size: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 15px 15px;
}

/* Seção - O que dizem sobre nós */
.sb-nos {
  color: #ec7424;
}
.tilt-sobre-nos .tilt-item {
    border-left: 10px solid #ec7424;
    border-radius: 20px;
}
#depoimentos .tilt-sobre-nos {
  max-width: 95%;
}
.depoimento-card {
    padding: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.747);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
    background: radial-gradient(circle at top, #00111a, #000);
}
.depoimento-card:hover {
    transform: scale(1.03) rotateX(3deg) rotateY(-3deg);
}
.avatar-wrapper {
    width: 100px;
    height: 100px;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d4ff, #00ffff, #ffee00);
    background-size: 400% 400%;
    animation: gradientBorder 6s ease infinite;
}
.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #111;
    object-fit: cover;
}
@keyframes gradientBorder {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}
.reveal.ativo {
    opacity: 1;
    transform: translateY(0);
}

/* Seção - Qualidade e Garantia - Tilt3D */
.tilt-q-g {
  perspective: 900px;
  display: inline-block;
}
.tilt-item-qualidade {
  /* Elemento interno que realmente gira */
  transform-style: preserve-3d; /* mantém o efeito 3D */
  transition: transform 0.15s ease-out; /* suaviza o movimento */
  will-change: transform; /* otimiza performance */
}
.tilt-q-g:hover .tilt-item-qualidade {
  box-shadow: 0 12px 25px rgba(92, 252, 29, 0.404);
}
.tilt-q-g .card-body {
  color: #fff;
}

/* Seção - O que dizem Sobre Nós - Tilt3D */
.tilt-sobre-nos {
  perspective: 900px;
  display: inline-block;
}
.tilt-item {
  /* Elemento interno que realmente gira */
  transform-style: preserve-3d; /* mantém o efeito 3D */
  transition: transform 0.15s ease-out; /* suaviza o movimento */
  will-change: transform; /* otimiza performance */
}
.tilt-sobre-nos:hover .tilt-item {
  /* Efeito opcional de sombra e destaque ao passar o mouse */
  box-shadow: 0 12px 25px rgba(255, 123, 0, 0.582) !important;
}
.tilt-sobre-nos .card-body {
  color: #fff;
}

/* Base 3D */
.btn-3d-tilt {
  background: linear-gradient(135deg, #166d70, #1391ad);
  border: 12px #000;
  color: #fff;
  padding: 12px 16px;
  border-radius: 50%;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  perspective: 1000px;
}
.btn-3d-tilt i {
  font-size: 1.7rem;
  pointer-events: none;
}
/* Hover */
.btn-3d-tilt:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 25px rgba(0, 212, 255, 0.6);
}
/* Clique */
.btn-3d-tilt:active {
  transform: scale(0.95);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Seção Roda-pé */
.footer-link {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-link:hover {
  color: #00d4ff;
}
/* Estilo base para todos os ícones */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.social-icons .social-icon {
  font-size: 1.7rem;              /* tamanho dos ícones */
  color: #ccc;                  /* cor neutra inicial */
  transition: all 0.4s ease;    /* suavidade nas transições */
}

/* Facebook */
.social-icons .social-icon-face:hover {
  color: #1877f2; /* azul oficial */
  text-shadow: 0 0 10px rgba(24, 119, 242, 0.7);
  transform: scale(1.2);
}

/* Instagram (gradiente realista) */
.social-icons .social-icon-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, 
              #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(214, 36, 159, 0.6);
  transform: scale(1.2);
}

/* Google */
.social-icons .social-icon-google:hover {
  color: #db4437; /* vermelho oficial */
  text-shadow: 0 0 10px rgba(219, 68, 55, 0.7);
  transform: scale(1.2);
}
.text-gradient {
  background: linear-gradient(90deg, #00d4ff, #007bff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.titulo-redes{
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 15px;
}