/* -------------------------------------- */
/* 1. Reset e Variáveis CSS (Root) */
/* -------------------------------------- */

:root {
    /* Cores */
    --color-primary: #1e592e; 
    --color-secondary: #f0d7a1; 
    --color-text-dark: #a75c26;
    --color-text-light: #f4f4f4;
    --color-background-light: #f8f9fa;
    --color-white: #ffffff;
    --color-dourada:#f0d7a1;

    /* Tipografia */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;
    --font-size-base: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    line-height: 1.6;
    background-color: var(--color-white);
}

/* Container de Largura Fixa */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* -------------------------------------- */
/* 2. Tipografia Base */
/* -------------------------------------- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    line-height: 1.2;
    margin: 0 0 1rem;/* ===========================================================
   style.css — Otimizado para CBR Agrícola
   Mantive todas as classes originais. Comentários para facilitar.
   =========================================================== */

/* 1. Reset e Variáveis */
:root{
  --color-primary:#1e592e;
  --color-secondary:#f0d7a1;
  --color-text-dark:#a75c26;
  --color-text-light:#f4f4f4;
  --color-background-light:#f8f9fa;
  --color-white:#ffffff;

  --shadow-soft: 0 3px 10px rgba(0,0,0,.08);
  --radius: 8px;

  --fs-h1: clamp(2.4rem,4vw,3.6rem);
  --fs-h2: clamp(2rem,3vw,3rem);
  --fs-h3: clamp(1.4rem,2.2vw,2rem);
  --gap: 1.25rem;
  --container-max: 1200px;
}


/* Container */
.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 15px;
}

/* Typography */
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif;color:var(--color-primary);line-height:1.2;margin:0 0 var(--gap)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin-bottom:1rem}

/* Section base */
.section{padding:80px 0}
.bg-light{background:var(--color-background-light)}


/* HERO */
.hero-section{
  position:relative;
  padding:120px 20px;
  text-align:center;
  overflow:hidden;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-primary);
}

/* Use pseudo element para garantir render em iOS/Safari e permitir efeito 'parallax' */
.hero-section::before{
  content:"";
  position:fixed; /* melhora render em mobile e mantém efeito */
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.60), rgba(255,255,255,.60)),
    url("/img/Background.png") center/cover no-repeat;
  will-change:transform;
  transform:translateY(calc(var(--parallax,0) * 0.05)) scale(1.05);
}

/* overlay (se quiser controlar via opacity) */
.hero-section::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

/* Hero content above overlay */
.hero-section 
.container{position:relative;z-index:2;max-width:1000px}
.hero-title{font-size:clamp(1.6rem,4vw,2.6rem);margin-bottom:1rem;color:var(--color-primary);line-height:1.15}
.hero-subtitle{font-size:1.05rem;color:var(--color-text-dark);margin-bottom:1.6rem}

/* Grid fluido */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 1.5rem;
}

/* Card */
.pillar {
    background: var(--color-white);
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    text-align: center;
}


/* Small improvements */
img{max-width:100%;height:auto;display:block}

    color: var(--color-primary);
}

h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
h2 { font-size: clamp(2rem, 3vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }

p { margin-bottom: 1rem; }


.section-title {
    text-align:center;
    margin-bottom: 3rem;
    color: var(--color-primary);
    font-size: 2.5rem;
    max-width: 850px;
    margin-left: 10rem;

}

.section-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
}

/* -------------------------------------- */
/* 3. Botões (CTAs) */
/* -------------------------------------- */

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
}

.primary-cta {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.1rem;
}

.primary-cta:hover {
    background-color: #1e7e34; /* Verde mais escuro */
    transform: translateY(-2px);
}

.secondary-cta {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.secondary-cta:hover {
    background-color: #f0d7a1;
}

.btn {
    display: flex;
    justify-content: center;
}


/* -------------------------------------- */
/* 4. Header e Navegação */
/* -------------------------------------- */

#header {
    background-color: var(--color-dourada);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

#header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #f0d7a1;
}

.logo img {
   height: 4rem;
   width: auto;
   text-decoration: none;
}

.nav-menu a {
    text-decoration: none;
    color: var(--color-primary);
    margin-left: 25px;
    font-weight: 700;
    transition: color 0.2s;
}

.nav-menu a:hover {
    color: var(--color-primary);
}

.menu-toggle {
    display: none; /* Esconder em desktop */
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--color-primary);
}

/* -------------------------------------- */
/* 5. Seções (Layout Geral) */
/* -------------------------------------- */

.section {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--color-background-light);
}

.hero-section {
    position: relative;
    padding: 120px 20px;
    text-align: center;
    background-image: url("./img/Background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* fallback */
}

@media (min-width: 992px) {
    .hero-section {
        background-attachment: fixed; /* desktop mantém parallax */
    }
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 254, 254, 0.60);
    z-index: 1;
}


.hero-section .container {
    position: relative;
    z-index: 2;
}



.hero-title {
    font-size: 3.5rem;
    color: var(--color-primary);
    max-width: 990px;
    margin: 0 auto 1.5rem;
}

.hero-subtitle {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-dark);
    max-width: 750px;
    margin: 0 auto 2.5rem;
}


/* II. Pilares (Diferenciais) */
/* Grid fluido */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 1.5rem;
}

/* Card */
.pillar {
    background: var(--color-white);
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

/* Container da imagem com aro */
.pillar-img {
    width: 220px;
    height: 220px;
    margin: 0 auto 20px;
    border-radius: 50%;
    padding: 8px; /* espessura do aro */
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Imagem interna */
.pillar-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

/* Cores do aro */
.pillar-img.green {
    background: linear-gradient(135deg, #f0d7a1, #a75c26);
}



/* Hover elegante */
.pillar-img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Título */
.pillar-title {
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

/* Responsividade */
@media (max-width: 768px) {
    .pillar-img {
        width: 180px;
        height: 180px;
    }
}


/* III. Serviços */
.services-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 3rem;
}

.service-item {
    padding: 30px;
    border-left: 5px solid var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.service-title {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

/* Seção de grãos */
.grains-section {
    margin: 4rem 0 3rem;
}

/* Grid das imagens */
.grains-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Card da imagem */
.grain-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    height: 260px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Imagem */
.grain {
   color: #f0d7a1;
}

.grain-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Overlay com texto */
.grain-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.1)
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: #fff;
}

/* Hover */
.grain-card:hover img {
    transform: scale(1.08);
}

.grain-overlay h4 {
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.grain-overlay p {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Responsivo */
@media (max-width: 900px) {
    .grains-grid {
        grid-template-columns: 1fr;
    }

    .grain-card {
        height: 220px;
    }
}


/* IV. Autoridade (Fundador) */
.authority-section {
    background-color: var(--color-white);
}

/* NOVO: Layout para Foto + Detalhes */
.founder-content-grid {
    display: grid;
    grid-template-columns: 300px 1fr; /* Foto 300px, Texto restante */
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.founder-photo-wrapper {
    text-align: center;
}

.founder-photo {
    width: 100%;
    max-width: 250px;
    height: 250px; /* Definido para foto redonda */
    border-radius: 50%; /* Foto redonda */
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.founder-text-wrapper .section-description {
    text-align: left;
    margin: 0 0 2rem 0;
}

.founder-details {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 3rem;
}

.detail-box {
    flex: 1;
    padding: 20px;
    border: 1px solid var(--color-background-light);
    border-radius: 5px;
}

.detail-title {
    color: var(--color-primary);
    margin-top: 0;
}

.quote {
    font-size: 1.3rem;
    font-style: italic;
    text-align: center;
    color: var(--color-text-dark);
    border-left: 5px solid var(--color-primary);
    padding: 20px;
    background-color: var(--color-background-light);
    margin: 2rem auto;
    max-width: 800px;
}

/* V. Depoimentos */
#depoimentos {
    background-image: url("/img/back_dois.png"); /* imagem de fundo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* camada escura para melhorar leitura */
#depoimentos::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
}

/* garante que o conteúdo fique acima do overlay */
#depoimentos .container {
    position: relative;
    z-index: 1;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: center;
}

.testimonial-card {
    background-color: var(--color-white);
    padding: 30px;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.6px);
    -webkit-backdrop-filter: blur(5.6px);
    border: 1px solid rgba(255, 255, 255, 0.57);
}


.parceiro-logo {
   height: 12rem;
   border-radius: 12px;
}

.section-title2 {
    text-align:center;
    margin-bottom: 3rem;
    color: var(--color-secondary);
    font-size: 2.5rem;
    max-width: 850px;
    margin-left: 10rem;
}



/* VI. Contato e CTA Final */
.location {
    font-size:1.8rem;
    margin-bottom: 1rem;
    color: var(--color-primary); 
    font-weight: 800;
}

.contact-section {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: 60px 0;
    text-align: center;
}

.contact-title {
    color: var(--color-primary);
    margin-bottom: 2rem;
    text-align: center;
}


.contact-form-wrapper {
    background-color: var(--color-white); 
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-form {
    max-width: 600px;
    margin: 0 auto 2rem;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--font-body);
    color: var(--color-text-dark);
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

/* NOVO: Estilo para informações de contato responsivas */
.contact-info-responsive {
    font-size: 1rem;
    margin-top: 1.5rem;
    padding-top: 15px;
    border-top: 1px solid var(--color-background-light);
    text-align: left;
}

.contact-info-responsive p {
    margin-bottom: 0.5rem;
    color: var(--color-text-dark); 
    font-weight: 700;
}

.contact-info-responsive a {
    color: var(--color-primary); 
    text-decoration: none;
    font-weight: 700;
}


.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas de tamanho igual */
    gap: 40px;
    align-items: center; /* Alinha o conteúdo verticalmente */
}


.map-wrapper {
    /* Container para o iframe do mapa */
    border-radius: 8px;
    overflow: hidden; /* Garante que o iframe siga o border-radius */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.map-wrapper iframe {
    display: block; /* Remove margens indesejadas */
    width: 100%; /* Garante que o iframe seja responsivo na largura */
    border-radius: 8px; /* Aplica o border-radius no iframe */
}


/* -------------------------------------- */
/* 6. Footer */
/* -------------------------------------- */

footer {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
    padding: 25px 0;
    text-align: center;
    font-size: 0.9rem;
}

footer a {
    color: var(--color-primary);
    text-decoration: none;
    margin: 0 5px;
}


/* -------------------------------------- */
/* 7. Responsividade (Media Queries) */
/* -------------------------------------- */

@media (max-width: 992px) {
    /* Diminuição de Fontes em Tablets */
    .hero-title { font-size: 3rem; }
    .section-title { font-size: 2rem; }

    /* Layout de Colunas para Pilares/Serviços */
    .pillars-grid, .services-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .founder-details {
        flex-direction: column;
        gap: 20px;
    }

    /* Contato */
    .contact-grid {
        grid-template-columns: 1fr; /* Empilha as colunas */
    }
    
    .map-wrapper {
        order: 2; /* Coloca o mapa depois do formulário no tablet/mobile */
        height: 350px; 
    }
}

@media (max-width: 768px) {
    /* Header Responsivo (Mobile Menu) */
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px; 
        left: 0;
        background-color: var(--color-white);
        box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        border-top: 1px solid var(--color-background-light);
    }

    .nav-menu a {
        margin: 10px 0;
        padding: 10px 20px;
        text-align: center;
        width: 100%;
    }

    .nav-menu.active {
        display: flex;
    }

    .menu-toggle {
        display: block; /* Mostrar em mobile */
    }

    /* Redução de Fontes */
    .hero-title { font-size: 1.9rem; 
    text-align: left;
    }
    .hero-subtitle { font-size: 1.2rem;
        font-weight: 900;
     }
    .section { padding: 60px 0; }

    .section-title {
        font-size: 1.6rem; 
        text-align: center;
        margin-left: 1rem;
        font-weight: bolder;
    }

    .section-title2 {
        font-size: 1.6rem; 
        font-weight:bolder;
        text-align: center;
        margin-left: 1rem;
        
    }

    /* Layout de Colunas para Pilares/Serviços em Mobile */
    .pillars-grid, .services-list {
        grid-template-columns: 1fr;
    }

    .hero-section {
        padding: 60px 0;
    }

    /* Autoridade Mobile */
    .founder-content-grid {
        grid-template-columns: 1fr; /* Stack columns */
        text-align: center;
    }

    .founder-photo {
        max-width: 150px;
        height: 150px;
    }

    .founder-text-wrapper .section-description {
        text-align: center;
    }

    .founder-details {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
}


/* -------------------------------------- */
/* 8. Animações de Entrada (Interatividade) */
/* -------------------------------------- */

/* Classe base para todos os elementos que devem aparecer com transição */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px); /* Começa 30px abaixo da posição final */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Otimização de performance */
}

/* Classe aplicada via JavaScript quando o elemento está visível */
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}



/* -------------------------------------- */
/* 9. Botão Flutuante (WhatsApp) */
/* -------------------------------------- */

.whatsapp-float {
      position: fixed;
      bottom: 22px;
      right: 22px;
      width: 65px;
      height: 65px;
      z-index: 9999;
      cursor: pointer;
      transition: transform 0.2s ease;
  }

  .whatsapp-float img {
      width: 100%;
      height: auto;
      border-radius: 50%;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
      animation: pulse 1.25s infinite ease-in-out;
  }

  /* animação para atrair clicks */
  @keyframes pulse {
      0% { transform: scale(0.95); }
      70% { transform: scale(1); }
      100% { transform: scale(0.95); }
  }

  /* efeito ao passar o mouse */
  .whatsapp-float:hover {
      transform: scale(1.07);
  }