/**
 * Theme Name:        LTX_Tema_Personalizado
 * Theme URI:         https://truta.tech/
 * Description:       Custom theme description...
 * Version:           1.0.2
 * Author:            Henrich
 * Author URI:        https://truta.tech/
 * Tags:              block-patterns, full-site-editing
 * Text Domain:       Trutechnologies
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      8.1
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

/* Definição de variáveis globais */
:root {
   /* Cores */
   --primary-color: #000000;
   --secondary-color: #5ce1e6;
   --background-light: #f5f5f5;
   --white: #ffffff;
   --text-dark: #333;
   --text-muted: #555;
   --border-color: #ccc;
   --light-blue: #e8feff;
   --very-light: #f9f9f9;
   
   /* Fontes e transições */
   --font-family-base: Arial, Helvetica, sans-serif;
   --transition-speed: 0.3s;
   --transition-speed-long: 0.6s;
 
   /* Bordas e sombras */
   --border-radius-small: 5px;
   --border-radius-large: 25px;
   --box-shadow-light: 0 4px 10px rgba(0, 0, 0, 0.1);
 
   /* Imagens e gradientes */
   --hero-bg: url('/wp-content/uploads/2025/07/hero-bg.webp');
   --hero-bg-seguros: url('/wp-content/uploads/2025/07/hero-bg-1.webp');
   --hero-gradient: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0.4));
   --quem-somos-gradient: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
 }
 
 /* Reset de estilo */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: var(--font-family-base);
 }
 
 /* Estilos do corpo */
 body {
   background-color: var(--background-light);
   color: var(--text-dark);
   line-height: 1.6;
 }
 
 /* Cabeçalho */
 header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: var(--primary-color);
   padding: 15px 30px;
   box-shadow: var(--box-shadow-light);
 }
 
 header .logo img {
   max-width: 120px;
 }
 
 header nav ul {
   list-style: none;
   display: flex;
   gap: 20px;
 }
 
 header nav ul li a {
   color: var(--secondary-color);
   text-decoration: none;
   font-weight: bold;
   transition: color var(--transition-speed) ease;
 }
 
 header nav ul li a:hover {
   color: var(--white);
 }
 
 /* Seção principal (hero) */
 .principal {
   background: var(--hero-gradient), var(--hero-bg) no-repeat center center/cover;
   color: var(--white);
   text-align: center;
   padding: 100px 20px;
 }
 
 .principal h1, 
 .seguros h1, 
 .quem-somos h1 {
   font-size: 3em;
   font-weight: bold;
   margin-bottom: 0.5em;
 }
 .seguros h2 {
  font-size: 2.5rem;
  color: var(--primary-color);
 }
 .principal p {
   font-size: 1.3em;
   margin-bottom: 1.5em;
 }
 
 .principal button {
   padding: 12px 30px;
   font-size: 1.1em;
   background-color: var(--secondary-color);
   color: var(--primary-color);   
   border: solid 1px;
   border-radius: var(--border-radius-large);
   cursor: pointer;
   font-weight: bold;
   transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
 }
 
 .principal button:hover {
   background-color: var(--primary-color);
   color: var(--secondary-color);
 }
 
 /* Homepage - Seção Seguros - Flipcards e carrossel */
 
 /* Seção de Seguros - Flip Cards */
 .seguros {
   text-align: center;
   padding: 60px 20px;
   background-color: var(--background-light);
   color: var(--text-dark);
   opacity: 0;
   animation: fadeIn 1.5s ease-in forwards;
 }
.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

 .flip-card {
   color: var(--primary-color);
   background: transparent;
   width: 300px;
   height: 350px;
   perspective: 1000px;
 }
 
 .flip-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
   transition: transform var(--transition-speed-long);
 }
 
 .flip-card:hover .flip-card-inner {
   transform: rotateY(180deg);
 }
 
 .flip-card-front, 
 .flip-card-back {
  overflow: hidden;
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   border-radius: var(--border-radius-small);
   box-shadow: var(--box-shadow-light);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   /* border: solid 20px #5ce1e6; */
   padding: 20px;
   background-color: var(--background-light);
 }
 
 .flip-card-front {
   text-align: center;
   padding: 0 0 10px;
   justify-content: end;
 }
 
 .flip-card-front img {
   width: auto;
   height: 100%;
   border-radius: var(--border-radius-small);
 }
 
 .flip-card-back {
   transform: rotateY(180deg);
   background-color: var(--primary-color);
   color: var(--white);
 }
 
 /* Seção Outros Produtos - Carrossel */
 .outros-seguros {
   text-align: center;
   padding: 50px 20px;
   background-color: var(--primary-color);
   color: var(--secondary-color);
   opacity: 0;
   animation: fadeIn 1.5s ease-in forwards;
   animation-delay: 1s;
 }
 .outros-seguros h2 {
  color: var(--secondary-color);
 }
 
 .carousel {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
 }
 
 .carousel-container {
   display: flex;
   overflow-x: auto;
   scroll-behavior: smooth;
   width: 90%;
   padding: 10px;
   white-space: nowrap;
   overflow: hidden;
 }
 
 .carousel-item {
   display: inline-block;
   background: var(--white);
   color: var(--primary-color);
   padding: 15px;
   margin: 0 10px;
   border-radius: var(--border-radius-small);
   box-shadow: var(--box-shadow-light);
   transition: transform var(--transition-speed) ease;
 }
 
 .carousel-item:hover {
   transform: scale(1.1);
 }
 
 /* Seção de depoimentos */
 .depoimentos {
   background-color: var(--background-light);
   padding: 60px 20px;
   text-align: center;
   overflow: hidden;
 }
 
 .depoimentos h2 {
   font-size: 2.5em;
   margin-bottom: 1em;
   color: var(--text-dark);
 }
 
 .depoimentos ul {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: flex-start;
   gap: 30px;
   list-style: none;
 }
 
 .depoimentos li {
   background-color: var(--white);
   border-radius: var(--border-radius-small);
   padding: 20px;
   min-width: 300px;
   max-width: 450px;
   margin: 0 auto;
   box-shadow: var(--box-shadow-light);
   text-align: center;
 }
 
 .depoimentos li img {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   margin-bottom: 15px;
   object-fit: cover;
 }
 
 .depoimentos li p {
   font-size: 1.1em;
   color: var(--text-muted);
 }
 
 /* Carrossel de parceiros */
 .parceiros {
   text-align: center;
   background-color: var(--white);
   padding: 40px 20px;
   overflow: hidden;
 }
 
 .parceiros h2 {
   font-size: 3em;
   color: var(--text-dark);
   margin: 70px 0;
 }
 
 .carrossel-parceiros {
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
   position: relative;
   width: 100%;
   height: auto;
   justify-content: center;
 }
 
 .carrossel-parceiros .slide {
   flex: 0 0 auto;
   width: 150px;
   height: 150px;
   padding: 0 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--white);
   border-radius: var(--border-radius-small);
   overflow: hidden;
 }
 
 .carrossel-parceiros img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: contain;
 }
 
 .carrossel-parceiros img:hover {
   transform: scale(1.1);
 }
 
 /* Rodapé */
 footer {
   background-color: var(--primary-color);
   padding: 15px;
   text-align: center;
   color: var(--secondary-color);
 }
 footer h3 {
  font-size: 1.5em;
 }
 
 footer p {
   margin-bottom: 10px;
   font-size: 1.2em;
 }
 
 footer ul {
   list-style: none;
   display: flex;
   justify-content: center;
   gap: 15px;
 }
 
 footer ul li a {
   color: var(--white);
   font-size: 1.2em;
   transition: color var(--transition-speed) ease;
 }
 
 footer ul li a:hover {
   color: var(--secondary-color);
 }
 
 /* Responsividade */
 @media (max-width: 768px) {
   .servicos ul,
   .depoimentos ul {
     flex-direction: column;
     gap: 20px;
   }
 
   .principal h1 {
     font-size: 3.5em;
   }
 
   .principal p {
     font-size: 1.5em;
   }
 }
 
 /*Contact Form 7 Styles*/
 .has-blue-color {
   color: var(--secondary-color);
 }
 
 .contato {
   background-color: var(--primary-color);
 }
 
 .wpcf7 form {
   color: var(--primary-color);
   background: var(--very-light);
   padding: 20px;
   border-radius: var(--border-radius-small);
   box-shadow: var(--box-shadow-light);
   max-width: 800px;
   margin: 0 auto;
 }
 
 .wpcf7 input, 
 .wpcf7 textarea,
 .wpcf7 select {
   width: 100%;
   padding: 10px;
   margin-bottom: 15px;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-small);
 }
 
 .wpcf7-submit {
   background-color: var(--secondary-color);
   color: var(--primary-color);
   padding: 10px 20px;
   border: none;
   border-radius: var(--border-radius-small);
   cursor: pointer;
   transition: background-color var(--transition-speed);
   max-width: 300px;
   margin: 0 auto;
 }
 
 .wpcf7-submit:hover {
   background-color: var(--primary-color);
   color: var(--secondary-color);
 }
 
 /*Quem somos*/
 .quem-somos h1, 
 .fale-bg h1 {
   background: var(--quem-somos-gradient), var(--hero-bg) no-repeat center center/cover;
   color: var(--white);
   text-align: center;
   padding: 100px 20px;
   font-size: 3rem;
 }
 
 .quem-somos h2 {
   font-size: 3rem;
   color: var(--secondary-color);
 }
 
 section.nossos-valores {
   background-color: var(--white);
 }
 
 section.nossos-valores,
 section.nossa-equipe {
   padding: 50px 0;
 }
 
 .nossos-valores h2,
 .nossa-equipe h2 {
   font-size: 3rem;
   margin-top: 35px;
 }
 
 .about-section .wp-block-columns {
   gap: 2rem;
   margin: 35px 0;
 }
 
 .values-section .wp-block-columns {
   gap: 1.5rem;
   text-align: center;
 }
 
 .team-section {
   margin-top: 2rem;
   padding-bottom: 2rem;
 }
 
 .container {
   max-width: 1200px;
   margin: 0 auto;
 }
 
 /* Seguros */
 .seguros h1 {
   background: var(--quem-somos-gradient), var(--hero-bg-seguros) no-repeat center center/cover;
   color: var(--white);
   text-align: center;
   padding: 100px 20px;
   font-size: 3rem;
   margin-top: 0;
 }
 .contato h2.cota {
  color: var(--secondary-color);
 }

 
 /* Keyframes */
 @keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 
 /* Responsividade específica */
 @media (max-width: 768px) {
   .cards-container {
     flex-direction: column;
     align-items: center;
   }
   .carousel-container {
     width: 100%;
   }
 }
 
@media (max-width: 1512px) {
  .cards-container {
    max-width: 1000px;
  }
}