/* =============== capa animada3d  =============== */

/* Container que envolve todo o cartão */
.container-capaanimada3d {
    transform-style: preserve-3d; /* Permite que elementos filhos usem profundidade 3D */
    border-radius: 5px; /* Arredonda os cantos do container */
    padding: 0; /* Remove padding para evitar aumento indesejado no tamanho */
    margin-left: 0px; /* Remove margem para alinhar na grade Bootstrap */
    display: flex; /* Transforma o container em um contêiner flexível */
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Remove decoração de texto padrão */
    z-index: 0; /* Define a ordem de empilhamento como padrão */
    overflow: hidden; /* Oculta conteúdo que extrapolar os limites */
    font-family: 'Segoe UI', sans-serif; /* Define a fonte do texto */
    width: 400px; /* Define largura fixa para corresponder aos outros cartões */
    height: 400px; /* Define altura fixa para corresponder aos outros cartões */
    box-sizing: border-box; /* Inclui padding no cálculo do tamanho */
    perspective: 1200px; /* Define uma perspectiva mais profunda para o efeito 3D */
    perspective-origin: 50% 50%; /* Centraliza a origem da perspectiva no meio do cartão */
}

/* Elemento do cartão que será girado */
.card-capaanimada3d {
    display: block; /* Garante que o elemento seja exibido como bloco */
    position: relative; /* Referência para posicionar elementos internos absolutamente */
    width: 80%; /* Ocupa toda a largura do container */
    height: 80%; /* Ocupa toda a altura do container */
    max-width: none; /* Remove restrição de largura máxima */
    max-height: none; /* Remove restrição de altura máxima */
    padding: 0; /* Remove padding para evitar aumento indesejado no tamanho */
    margin: 0; /* Remove margem para evitar deslocamento */
    z-index: 0; /* Define a ordem de empilhamento como padrão */
    transform-style: preserve-3d; /* Mantém o efeito 3D nos elementos internos */
    transition: transform 1.5s ease; /* Animação suave ao rotacionar o cartão */
    background: transparent;
}

/* Gira o cartão ao passar o mouse sobre o container */
.container-capaanimada3d:hover .card-capaanimada3d {
    transform: rotateY(180deg) ; /* Rotação horizontal de 180 graus ao passar o mouse */
  
}

/* Estilo base das faces do cartão */
.face {
    width: 100%; /* Largura total do cartão */
    height: 100%; /* Altura total do cartão */
    position: absolute; /* Permite sobrepor as faces */
    backface-visibility: hidden; /* Esconde a face quando estiver "de costas" */
    border-radius: 5px; /* Arredonda os cantos das faces */
    overflow: hidden; /* Oculta conteúdo que extrapolar os limites */
}

/* Face frontal do cartão com imagem de fundo */
.front-face-1 {
    background-image: url('../../../../midia/imagem/img-capaanimada3d-1.jpg');  
    background-size: cover; /* Cobre toda a área da face */
    background-position: center; /* Centraliza a imagem */
}

.front-face-2 {
    background-image: url('../../../../midia/imagem/img-capaanimada3d-2.jpg');  
    background-size: cover; /* Cobre toda a área da face */
    background-position: center; /* Centraliza a imagem */
}

.front-face-3 {
    background-image: url('../../../../midia/imagem/img-capaanimada3d-3.jpg');  
    background-size: cover; /* Cobre toda a área da face */
    background-position: center; /* Centraliza a imagem */
}

.front-face-4 {
    background-image: url('../../../../midia/imagem/img-capaanimada3d-4.jpg');  
    background-size: cover; /* Cobre toda a área da face */
    background-position: center; /* Centraliza a imagem */
}

/* Face de trás do cartão */
.back-face-1 {
    /*background: linear-gradient(to right, rgba(233, 213, 213, 0.651), rgba(223, 82, 82, 0.705));  Gradiente transparente */
    background: linear-gradient(50deg, #8A97A8, #73839C);
    transform: rotateY(180deg); /* Rotaciona para alinhar com o verso ao girar */
}

.back-face-2 {
    /*background: linear-gradient(to right, rgba(233, 213, 213, 0.651), rgba(223, 82, 82, 0.705));  Gradiente transparente */
    background: linear-gradient(50deg, #ADAEA7, #737166);
    transform: rotateY(180deg); /* Rotaciona para alinhar com o verso ao girar */
}

.back-face-3 {
    /*background: linear-gradient(to right, rgba(233, 213, 213, 0.651), rgba(223, 82, 82, 0.705));  Gradiente transparente */
    background: linear-gradient(50deg, #716265, #BF5D39);
    transform: rotateY(180deg); /* Rotaciona para alinhar com o verso ao girar */
}

.back-face-4 {
    /*background: linear-gradient(to right, rgba(233, 213, 213, 0.651), rgba(223, 82, 82, 0.705));  Gradiente transparente */
    background: linear-gradient(50deg, #739CBF,#6B90BF );
    transform: rotateY(180deg); /* Rotaciona para alinhar com o verso ao girar */
}

/* Classe base para os textos flutuantes em 3D */
.floating-text {
    position: absolute; /* Posicionamento livre dentro do cartão */
    width: 100%; /* Ocupa toda a largura do cartão */
    text-align: center; /* Centraliza o texto horizontalmente */
    font-weight: normal; /* Deixa o texto em negrito */
    pointer-events: none; /* Impede que o mouse interaja com o texto */
    top: 50%; /* Centraliza verticalmente o texto */
    transform: translateY(-50%); /* Ajusta para centralizar com base no próprio tamanho */
}

/* Texto 3D flutuando na frente do cartão */
.floating-text.front {
    font-size: 1.4rem; /* Tamanho do texto principal */
    color: white; /* Cor branca */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8); /* Sombra para dar destaque */
    transform: translateY(-50%) translateZ(80px); /* Ajusta para 3D e centraliza */
    backface-visibility: hidden; /* Esconde o texto quando o cartão girar 180 graus */
}

.floating-text-resume {
    position: absolute; /* Posicionamento livre dentro do cartão */  
    width: 100%; /* Ocupa toda a largura do cartão */
    text-align: center; /* Centraliza o texto horizontalmente */
    font-weight: normal; /* Deixa o texto em negrito */
    pointer-events: none; /* Impede que o mouse interaja com o texto */
    top: 65%; /* Centraliza verticalmente o texto */
    transform: translateY(-50%); /* Ajusta para centralizar com base no próprio tamanho */
}

.floating-text-resume.front {
    font-size: 0.8rem; /* Tamanho do texto principal */
    color: white; /* Cor branca */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8); /* Sombra para dar destaque */
    transform: translateY(-50%) translateZ(80px); /* Ajusta para 3D e centraliza */
    backface-visibility: hidden; /* Esconde o texto quando o cartão girar 180 graus */
}

/* Texto 3D flutuando no verso do cartão - configuracao 1 */
.floating-text.back {
    font-size: 0.9rem; /* Tamanho de texto menor */
    color: white; /* Cor branca */
    transform: translateY(-50%) rotateY(180deg) translateZ(80px); /* Gira 180° e empurra para frente, centralizando */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Sombra leve para profundidade */
    padding: 30px;
}

/******************************** capa animada ********************************/

.card-title {
  color: #262626;
  font-size: 1.5em;
  line-height: normal;
  font-weight: 700;
  margin-bottom: 0.5em;
}

.small-desc {
  font-size: 1em;
  font-weight: 400;
  color: #452c2c;
}

.go-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 2em;
  height: 2em;
  overflow: hidden;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #8CD1A2, #2F4538);
  border-radius: 0 4px 0 32px;
}

.go-arrow {
  margin-top: -4px;
  margin-right: -4px;
  color: white;
}

.card {
  top: 50px;
  display: flex;
  position: relative;
  width: 500px; /* Mesmo valor padrão do video-pequeno */
  height: 500px; /* Mesmo valor padrão do video-pequeno */
  max-width: 100%; /* Mesmo valor padrão do video-pequeno */
  background-color: #f2f8f9;
  border: 1px solid silver;
  border-radius: 5px;
  padding: 2em 1.2em;
  margin: 40px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #8CD1A2, #76B088);
  font-family: 'Segoe UI', sans-serif;
  box-shadow: 20px 20px 50px silver; /* Sombra suave ao redor */

  justify-content: center;  /* Centraliza horizontalmente */
  align-items: center;      /* Centraliza verticalmente */
}

.card::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -16px;
  right: -16px;
  background: linear-gradient(135deg, #50755E, #2F4538);
  height: 32px;
  width: 34px;
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.35s ease-out;
}

.card:hover::before {
  transform: scale(35);
}

.card:hover .small-desc {
  transition: all 0.5s ease-out;
  color: rgba(255, 255, 255, 0.8);
}

.card:hover .card-title {
  transition: all 0.5s ease-out;
  color: #ffffff;
}

/* Media Query para Smartphones (até 576px) */
@media screen and (max-width: 576px) {
  .card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Garante que os elementos internos fiquem empilhados verticalmente */
    width: 80%;
    height: 300px;
    margin: 20px auto; /* Centraliza horizontalmente com auto */
    order: 1;
    padding: 1em; /* Reduz padding para melhor ajuste */
  }

  .card-title, .small-desc {
    text-align: center; /* Centraliza o texto dentro dos elementos */
  }

  .go-corner {
    top: 0;
    right: 0;
  }
}

/* Media Query para Tablets (576px a 1024px) */
@media screen and (min-width: 577px) and (max-width: 1024px) {
  .card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Garante que os elementos internos fiquem empilhados verticalmente */
    width: 80%;
    height: 400px;
    margin: 30px auto; /* Centraliza horizontalmente com auto */
    order: 1;
    padding: 1em; /* Reduz padding para melhor ajuste */
  }

  .card-title, .small-desc {
    text-align: center; /* Centraliza o texto dentro dos elementos */
  }

  .go-corner {
    top: 0;
    right: 0;
  }
}



         /*
            <div class="card">
              <p class="card-title"> product name</p>
              <p class="small-desc">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id consequuntur cupiditate nemo omnis. Eum similique consectetur quidem explicabo officia ea possimus voluptatem praesentium sunt, commodi quod velit ipsa ex voluptatum!
              </p>
              <div class="go-corner">
              <di class="go-arrow">→</div>
            </div>
            
            <div class="card">
              <p class="card-title"> product name</p>
              <p class="small-desc">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id consequuntur cupiditate nemo omnis. Eum similique consectetur quidem explicabo officia ea possimus voluptatem praesentium sunt, commodi quod velit ipsa ex voluptatum!
              </p>
              <div class="go-corner">
              <di class="go-arrow">→</div>
            </div>
            
            <div class="card">
              <p class="card-title"> product name</p>
              <p class="small-desc">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id consequuntur cupiditate nemo omnis. Eum similique consectetur quidem explicabo officia ea possimus voluptatem praesentium sunt, commodi quod velit ipsa ex voluptatum!
              </p>
              <div class="go-corner">
              <di class="go-arrow">→</div>
            </div>

            <div class="card">
              <p class="card-title"> product name</p>
              <p class="small-desc">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id consequuntur cupiditate nemo omnis. Eum similique consectetur quidem explicabo officia ea possimus voluptatem praesentium sunt, commodi quod velit ipsa ex voluptatum!
              </p>
              <div class="go-corner">
              <di class="go-arrow">→</div>
            </div>
            */


/* =============== estilo video play =============== */

.video-pequeno {
    display: inline-block; /* Garantir que seja centralizável assim */
    width: 500px;
    height: auto; /* Mantém proporção */
    max-width: 100%;  /*Responsivo */
    object-fit: cover; /* Preenche o espaço cortando o excesso (sem distorcer muito) */
    border: 1px solid silver; /* Borda cinza clara */
    border-radius: 8px;      /* Bordas arredondadas (opcional) */
    box-shadow: 20px 20px 50px silver; /* Sombra suave ao redor */
}

/* Media Query para Smartphones (menor que 576px) */
@media screen and (max-width: 576px) {
    .video-pequeno {
        width: 70%;
    }
}

/* Media Query para Tablets (576px a 1024px) */
@media screen and (max-width: 1024px) and (min-width: 576px) {
    .video-pequeno {
        width: 90%;
    }
}

/* =============== estilo carousel =============== */

/* Classe base do carousel */
.carousel {
  margin-bottom: 3rem;

  height: auto;
  background: transparent


}

/* Já que usamos posicionamento de imagens, precisaremos fazer alguns ajustes na legenda */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;


}

/* Declaramos alturas, devido ao posicionamento do elemento img */
.carousel-item {
  height: 32rem;
  background-color: transparent;

}
.carousel-item > img {
  display: none;
}


/* CONTEÚDO DO MARKETING
-------------------------------------------------- */

/* Alinha, centralmente, o texto dentro das três colunas abaixo do carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featrurezinhas
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Espaça o elemento <hr> mais */
}

/* Afina os cabeçalhos de marketing */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* CSS RESPONSIVE
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Aumenta o tamanho do conteúdo do carousel */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}


/* =============== button contato =============== */

.submit-button-email {
  background-color: #007bff;
  color: white;
  border: none;
  padding: .5rem 1rem;
  line-height: 1.5;
  border-radius: 2rem;
  font-size: 1.2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  transition: all 0.6s ease;
  position: relative;
  overflow: hidden;
}

.submit-button-email.sending {
  background-color: #007bff;
  min-width: 300px;
  padding: 0;
  height: 10px;
  width: 180px;
  border-radius: 4px;
  color: transparent;
  font-size: 0;
  transition: all 0.8s ease;
  align-items: center;
  justify-content: center;
}

/* Barra de carregamento interna (invisível ao texto) */
.submit-button-email::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background-color: #0069d9;
  border-radius: 2rem;
  transition: width 2.2s ease;
  z-index: 0;
  opacity: 0.4;
}

.submit-button-email.sending::after {
  width: 100%;
  opacity: 1;
  animation: loadingBar 3s ease-in-out forwards;
}

@keyframes loadingBar {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.submit-button-email.success {
  background-color: #28a745;
  color: transparent;
  min-width: 180px;
  height: auto;
  padding: .5rem 1rem;
  font-size: 1.2rem;
  transition: all 0.6s ease;
}

.submit-button-email.success::before {
  content: "✔ Enviado com Sucesso";
  color: white;
  font-size: 1.2rem;
  animation: fadeIn 0.6s ease forwards;
}

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