@charset "utf-8";
/* CSS Document */

/* Importa a fonte Inter do Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');  /* Variáveis CSS para cores e fontes */ 
:root {   --color-primary: #55B6B4; /* Teal do logo */  
          --color-accent: #D6772A; /* Laranja do logo */  
          --color-text-dark: #1A202C; /* Quase preto, suave */  
          --color-text-gray: #4A5568; /* Cinza para texto secundário */  
          --color-background-light: #F7FAFC; /* Off-white */  
          --color-border: #E2E8F0; /* Cinza claro para bordas */  
          --color-white: #FFFFFF;  
          --font-family-base: 'Inter', sans-serif;  
          --header-height: 80px; }  /* Reset básico e estilos globais */ * {     margin: 0;  
          padding: 0;  
          box-sizing: border-box; }  body {     font-family: var(--font-family-base);  
          line-height: 1.6;  
          color: var(--color-text-dark);  
          background-color: var(--color-background-light);  
          -webkit-font-smoothing: antialiased;  
          -moz-osx-font-smoothing: grayscale; }  .container {     max-width: 1200px;  
          margin: 0 auto;  
          padding: 0 20px; }  a {     color: var(--color-primary);  
          text-decoration: none;  
          transition: color 0.3s ease; }  a:hover {  
          color: var(--color-accent); }  h1, h2, h3, h4, h5, h6 {     font-weight: 700;  
          line-height: 1.2;  
          margin-bottom: 1rem;  
          color: var(--color-text-dark); }  h1 { font-size: 2.8rem; }  
      h2 { font-size: 2.2rem; }  
      h3 { font-size: 1.8rem; }  
      h4 { font-size: 1.4rem; }  p {     margin-bottom: 1rem; }  ul {     list-style: none;  
          margin-bottom: 1rem; }  ul li {     margin-bottom: 0.5rem;  
          padding-left: 1.5rem;  
          position: relative; }  ul li::before {  
          content: '•'; /* Bullet point */  
          color: var(--color-primary);  
          position: absolute;  
          left: 0;  
          font-weight: bold; }  /* Botões */ .button {     display: inline-block;  
          padding: 12px 25px;  
          border-radius: 8px;  
          font-weight: 600;  
          text-align: center;  
          cursor: pointer;  
          transition: all 0.3s ease;  
          border: 2px solid transparent;  
          font-size: 1rem; }  .primary-button {     background-color: var(--color-accent);  
          color: var(--color-white);  
          border-color: var(--color-accent); }  .primary-button:hover {  
          background-color: #c06a24; /* Um pouco mais escuro */  
          border-color: #c06a24;  
          color: var(--color-white); }  .secondary-button {     background-color: transparent;  
          color: var(--color-primary);  
          border-color: var(--color-primary); }  .secondary-button:hover {  
          background-color: var(--color-primary);  
          color: var(--color-white); }  .large-button {     padding: 15px 30px;  
          font-size: 1.1rem; }  /* Header */ .sticky-header {     background-color: var(--color-white);  
          padding: 15px 0;  
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);  
          position: sticky;  
          top: 0;  
          width: 100%;  
          z-index: 1000; }  .header-content {     display: flex;  
          justify-content: space-between;  
          align-items: center; }  .logo-link {     display: flex;  
          align-items: center; }  .logo {     height: 90px; /* Ajuste conforme o tamanho do seu logo */  
          width: auto; }  nav ul {     display: flex;  
          align-items: center;  
          margin: 0; }  nav ul li {     margin-left: 25px;  
          padding-left: 0; }  nav ul li::before {  
          content: none; /* Remove bullet points do menu */ }  nav ul li a {     color: var(--color-text-dark);  
          font-weight: 500;  
          font-size: 1rem;  
          position: relative; }  nav ul li a:not(.button):hover {  
          color: var(--color-primary); }  nav ul li a.active {     color: var(--color-primary);  
          font-weight: 600; }  nav ul li a.active::after {  
          content: '';  
          position: absolute;  
          left: 0;  
          bottom: -5px;  
          width: 100%;  
          height: 2px;  
          background-color: var(--color-primary); }  /* Seções principais */ main {     padding-top: var(--header-height); /* Para compensar o header sticky */ }  section {     padding: 80px 0; }  .hero {     background: linear-gradient(135deg, var(--color-background-light) 0%, #e0e8ed 100%);  
          text-align: center;  
          padding: 100px 0; }  .hero-title {     font-size: 4rem;  
          color: var(--color-primary);  
          margin-bottom: 15px; }  .hero-subtitle {     font-size: 2.5rem;  
          color: var(--color-text-dark);  
          font-weight: 600;  
          margin-bottom: 25px; }  .hero-description {     font-size: 1.3rem;  
          color: var(--color-text-gray);  
          max-width: 800px;  
          margin: 0 auto 40px auto; }  .hero-buttons {     display: flex;  
          justify-content: center;  
          gap: 20px; }  .section-title {     text-align: center;  
          margin-bottom: 60px;  
          font-size: 2.5rem;  
          color: var(--color-text-dark); }  /* Cards de Frentes de Atuação */ .section-cards {     background-color: var(--color-white); }  .cards-grid {     display: grid;  
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
          gap: 30px; }  .card {     background-color: var(--color-background-light);  
          padding: 30px;  
          border-radius: 10px;  
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);  
          text-align: center;  
          transition: transform 0.3s ease, box-shadow 0.3s ease; }  .card:hover {  
          transform: translateY(-5px);  
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }  .card h3 {     color: var(--color-primary);  
          font-size: 1.5rem;  
          margin-bottom: 15px; }  .card p {     color: var(--color-text-gray);  
          font-size: 1.05rem; }  /* Como a SETIK trabalha */ .section-how-we-work {     background-color: var(--color-background-light); }  .steps-grid {     display: grid;  
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  
          gap: 40px;  
          text-align: center; }  .step-item {     background-color: var(--color-white);  
          padding: 30px;  
          border-radius: 10px;  
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);  
          position: relative;  
          overflow: hidden; }  .step-number {     display: inline-flex;  
          justify-content: center;  
          align-items: center;  
          width: 60px;  
          height: 60px;  
          background-color: var(--color-primary);  
          color: var(--color-white);  
          border-radius: 50%;  
          font-size: 2rem;  
          font-weight: 700;  
          margin-bottom: 20px;  
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }  .step-item h4 {     color: var(--color-text-dark);  
          font-size: 1.6rem;  
          margin-bottom: 10px; }  .step-item p {     color: var(--color-text-gray); }  /* CTA Banner */ .cta-banner {     background-color: var(--color-primary);  
          color: var(--color-white);  
          text-align: center;  
          padding: 80px 0; }  .cta-title {     color: var(--color-white);  
          font-size: 2.8rem;  
          margin-bottom: 20px; }  .cta-description {     font-size: 1.3rem;  
          max-width: 700px;  
          margin: 0 auto 40px auto;  
          color: rgba(255, 255, 255, 0.9); }  
		  /* Páginas internas (Franquias, E-commerce, Contato) */ 
		  .page-hero {     background: linear-gradient(135deg, var(--color-background-light) 0%, #e0e8ed 100%);  
          padding: 80px 0 40px;  
          text-align: center; }  .page-title {     font-size: 3rem;  
          color: var(--color-text-dark);  
          margin-bottom: 20px; }  .page-description {     font-size: 1.2rem;  
          color: var(--color-text-gray);  
          max-width: 800px;  
          margin: 0 auto; }  .content-section {     padding: 60px 0;  
          background-color: var(--color-white); }  .content-section h2 {     color: var(--color-primary);  
          margin-top: 2rem;  
          margin-bottom: 1.5rem;  
          font-size: 2rem; }  .content-section h2:first-child {  
          margin-top: 0; }  .content-section p {     font-size: 1.1rem;  
          color: var(--color-text-dark); }  .content-section ul {     margin-left: 20px; }  .content-section ul li {     font-size: 1.05rem;  
          color: var(--color-text-dark); }  .cta-section {     text-align: center;  
          margin-top: 60px;  
          padding-top: 40px;  
          border-top: 1px solid var(--color-border); }  /* E-commerce Page Specific */ .text-center {     text-align: center; }  .ecommerce-link-text {     margin-bottom: 30px; }  /* Contact Page Specific */ .contact-grid {     display: grid;  
          grid-template-columns: 1fr 1.5fr;  
          gap: 60px;  
          align-items: flex-start; }  .contact-info {     background-color: var(--color-background-light);  
          padding: 40px;  
          border-radius: 10px;  
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); }  .contact-info h2 {     color: var(--color-text-dark);  
          font-size: 2rem;  
          margin-bottom: 20px; }  .contact-info p {     font-size: 1.1rem;  
          margin-bottom: 10px;  
          color: var(--color-text-gray); }  .contact-link {     color: var(--color-primary);  
          font-weight: 500; }  .contact-buttons {     margin-top: 30px;  
          display: flex;  
          flex-wrap: wrap;  
          gap: 15px; }  .contact-form {     background-color: var(--color-white);  
          padding: 40px;  
          border-radius: 10px;  
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); }  .contact-form h2 {     color: var(--color-text-dark);  
          font-size: 2rem;  
          margin-bottom: 25px; }  .form-group {     margin-bottom: 20px; }  .form-group label {     display: block;  
          margin-bottom: 8px;
  
     
     font-weight: 500;  
          color: var(--color-text-dark); }  .form-group input[type="text"], .form-group input[type="email"], .form-group textarea {     width: 100%;  
          padding: 12px;  
          border: 1px solid var(--color-border);  
          border-radius: 8px;  
          font-family: var(--font-family-base);  
          font-size: 1rem;  
          color: var(--color-text-dark);  
          background-color: var(--color-background-light);  
          transition: border-color 0.3s ease, box-shadow 0.3s ease; }  .form-group input[type="text"]:focus,  
      .form-group input[type="email"]:focus,  
      .form-group textarea:focus {  
          border-color: var(--color-primary);  
          outline: none;  
          box-shadow: 0 0 0 3px rgba(85, 182, 180, 0.2); /* Sombra suave do teal */ }  .form-group textarea {     resize: vertical;  
          min-height: 120px; }  .form-note {     font-size: 0.9rem;  
          color: var(--color-text-gray);  
          margin-top: 20px;  
          text-align: center; }  /* Footer */ footer {     background-color: var(--color-text-dark);  
          color: var(--color-white);  
          text-align: center;  
          padding: 30px 0;  
          font-size: 0.9rem; }  /* Responsividade */ @media (max-width: 992px) {  
          h1 { font-size: 2.5rem; }  
          h2 { font-size: 2rem; }  
          h3 { font-size: 1.6rem; }  
          .hero-title { font-size: 3.5rem; }  
          .hero-subtitle { font-size: 2rem; }  
          .hero-description { font-size: 1.1rem; }  
          .section-title { font-size: 2rem; }  
          .cta-title { font-size: 2.2rem; }  
          .cta-description { font-size: 1.1rem; }  
          .page-title { font-size: 2.5rem; } }  @media (max-width: 768px) {     .header-content {         flex-direction: column;  
              gap: 15px;     }     nav ul {         flex-wrap: wrap;  
              justify-content: center;  
              gap: 10px;     }     nav ul li {         margin-left: 10px;  
              margin-right: 10px;     }     .hero {         padding: 80px 0;     }     .hero-title { font-size: 3rem; }  
          .hero-subtitle { font-size: 1.8rem; }     .hero-buttons {         flex-direction: column;  
              gap: 15px;     }     .button {         width: 100%;  
              max-width: 300px;     }     .cards-grid, .steps-grid {         grid-template-columns: 1fr;     }     .contact-grid {         grid-template-columns: 1fr;  
              gap: 40px;     }     .contact-buttons {         flex-direction: column;     }     .contact-buttons .button {         width: 100%;     } }  @media (max-width: 480px) {  
          h1 { font-size: 2rem; }  
          h2 { font-size: 1.8rem; }  
          .hero-title { font-size: 2.5rem; }  
          .hero-subtitle { font-size: 1.5rem; }  
          .hero-description { font-size: 1rem; }  
          .section-title { font-size: 1.8rem; }  
          .cta-title { font-size: 1.8rem; }  
          .cta-description { font-size: 1rem; }  
          .page-title { font-size: 2rem; }  
          .page-description { font-size: 1rem; }     .contact-info h2, .contact-form h2 {         font-size: 1.8rem;     } }