/* ===========================================
   OTIMIZE AGRO - TECNOLOGIA PARA O CAMPO
   ========================================== */

/* =============== FONTES (Bai Jamjuree) =============== */
/* Arquivos dentro de ./fontes/ */
@font-face {
    font-family: "Bai Jamjuree";
    src: url("./fontes/BaiJamjuree-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bai Jamjuree";
    src: url("./fontes/BaiJamjuree-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bai Jamjuree";
    src: url("./fontes/BaiJamjuree-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bai Jamjuree";
    src: url("./fontes/BaiJamjuree-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bai Jamjuree";
    src: url("./fontes/BaiJamjuree-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bai Jamjuree";
    src: url("./fontes/BaiJamjuree-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bai Jamjuree";
    src: url("./fontes/BaiJamjuree-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* =============== RESET E VARIÁVEIS =============== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* paleta */
    --lime-50: #f7fbe6;
    --lime-100: #eef8c6;
    --lime-200: #e6f39d;
    --lime-300: #d8ee6a;
    --forest-900: #063D35;
    --primary-color: #2D5A3C;
    --primary-light: #A7C130;
    --primary-dark: #083F32;
    --secondary-color: #DBD617;

    /* gradientes base */
    --site-bg: linear-gradient(to top, rgba(214, 231, 98, .95) 0%, rgba(234, 244, 168, .92) 35%, rgba(247, 251, 230, .95) 65%, rgba(8, 63, 50, .06) 100%);
    --gradient-coffee: linear-gradient(135deg, #2D5A3C 0%, #A7C130 50%, #DBD617 100%);
    --gradient-hero: linear-gradient(135deg, rgba(45, 90, 60, .05) 0%, #fff 60%);

    /* sombras */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .08);
    --shadow-md: 0 5px 20px rgba(0, 0, 0, .10);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .15);

    /* medidas */
    --container: 1200px;
    --header-height: 92px;
    --border-radius: 12px;

    /* marca d’água extra */
    --drone-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 100 100'%3E%3Cg fill='%23A7C130' fill-opacity='0.03'%3E%3Cpath d='M30 10l10 15h20l10-15-10-5h-20z'/%3E%3Cpath d='M15 30l15 10v20l-15 10-5-10v-20z'/%3E%3Cpath d='M85 30l5 10v20l-5 10-15-10v-20z'/%3E%3Cpath d='M30 90l10 5h20l10-5-10-15h-20z'/%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3Cpath d='M42 42l16 16m0-16l-16 16'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===========================
   FUNDO
   =========================== */
body {
    position: relative;
    z-index: 0;
    background: linear-gradient(45deg, rgba(219, 214, 23, .06) 0%, rgba(45, 90, 60, .05) 50%, rgba(219, 214, 23, .06) 100%);
}
main, section, header, footer, .container { position: relative; z-index: 1; }

/* =========================
   FUNDO — colunas à direita
   ========================= */
body::after { content: none !important; } /* garante que nada legado apareça */

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;               /* abaixo do conteúdo */
  pointer-events: none;

  /* 4 colunas, cada uma com um arquivo diferente */
  background-image:
    url("https://res.cloudinary.com/dji4klbif/image/upload/v1757865710/LOGO_5_qqxhma.png"),
    url("https://res.cloudinary.com/dji4klbif/image/upload/v1757865684/LOGO_2_jyzggo.png");

  /* repete só na vertical (colunas) */
  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y;

  /* tamanho dos símbolos (altura) */
  background-size: auto 150px, auto 150px, auto 150px, auto 150px;

  /* posições: todas alinhadas no topo,
     com mais espaço entre as colunas à direita */
  background-position:
    right 18px  top 0,
    right 168px top 0,
    right 318px top 0,
    right 468px top 0;

  /* bem sutil no fundo */
  opacity: .06;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
}

/* ====== Tablet ====== */
@media (max-width: 1024px){
  body::before{
    background-size: auto 130px, auto 130px, auto 130px, auto 130px;
    background-position:
      right 16px  top 0,
      right 150px top 0,
      right 284px top 0,
      right 418px top 0;
    opacity: .06;
  }
}

/* ====== Mobile ====== */
@media (max-width: 768px){
  body::before{
    background-size: auto 110px, auto 110px, auto 110px, auto 110px;
    background-position:
      right 12px  top 0,
      right 126px top 0,
      right 240px top 0,
      right 354px top 0;
    opacity: .05;
  }
}

/* ====== Mobile pequeno ====== */
@media (max-width: 420px){
  body::before{
    background-size: auto 92px, auto 92px, auto 92px, auto 92px;
    background-position:
      right 10px  top 0,
      right 112px top 0,
      right 214px top 0,
      right 316px top 0;
  }
}

/* =============== TIPOGRAFIA =============== */
html { scroll-behavior: smooth; }
body {
    font-family: "Bai Jamjuree", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.65;
    color: #1f2937;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Bai Jamjuree", sans-serif;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -.02em;
}
h1 { font-size: clamp(2.7rem, 6vw, 4rem); line-height: 1.18; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3rem); margin-bottom: 2rem; }
h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 1rem; }

/* =============== LAYOUT BASE =============== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 5rem 0; }
.section:nth-child(even),
.nossa-historia, .historias-sucesso, .nossa-tecnologia, .services,
.diferenciais, .compromisso-ambiental, .especialistas-cafe, .cta-section {
    background: transparent !important;
}
.section-header { text-align: center; margin: 2rem auto 4rem; }
.section h2 {
    font-size: clamp(2.5rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-dark);
}
.section-header p { color: #4b5563; font-size: 1.15rem; max-width: 640px; margin: 0 auto; }

/* =============== HEADER =============== */
header {
    position: fixed; top: 0; left: 0; right: 0; width: 100%;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    z-index: 10000; transition: .3s;
}
header.scrolled { box-shadow: 0 4px 30px rgba(0, 0, 0, .1); }
.header-inner { height: var(--header-height); display: flex; align-items: center; }

nav { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo-section { display: flex; align-items: center; gap: 1rem; }
.logo-img { height: 64px; width: auto; transition: .3s; }
.logo-img:hover { transform: scale(1.05); }
.logo-tagline {
    color: #4b5563; font-size: 1rem; font-weight: 500;
    border-left: 1px solid #e5e7eb; padding-left: 1rem;
}

/* NAV */
.nav-links { display: flex; list-style: none; gap: 2rem; align-items: center; }
.nav-links a {
    text-decoration: none; color: #1f2937; font-weight: 600; font-size: 1rem;
    padding: .6rem 1rem; border-radius: var(--border-radius); transition: .3s; position: relative;
}
.nav-links a::after{
    content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px; background: var(--gradient-coffee); transition: width .3s;
}
.nav-links a:hover { color: var(--primary-color); background: rgba(45, 90, 60, .05); }
.nav-links a:hover::after { width: 80%; }

/* === HEADER CTA “Solicite Orçamento” === */
.cta-button, .nav-links .cta-button{
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .55rem 1.05rem; font-size: .95rem; font-weight: 800; line-height: 1;
    white-space: nowrap; border-radius: 999px;
    background: #0F6B5B; color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 6px 18px rgba(15, 107, 91, .20);
    text-decoration: none; transition: transform .18s, background-color .18s, box-shadow .18s;
}
.nav-links .cta-button svg { width: 16px; height: 16px; color: currentColor; }
.nav-links .cta-button:hover { transform: translateY(-1px); background: #128271; box-shadow: 0 10px 24px rgba(18,130,113,.22); }
.nav-links .cta-button:active { transform: translateY(0); background: #0E6153; box-shadow: 0 4px 14px rgba(14,97,83,.22); }
.nav-links .cta-button:focus { outline: 2px solid rgba(214,231,98,.9); outline-offset: 2px; }

/* BOTÕES (gerais do site) */
.btn{
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .9rem 1.9rem; border-radius: 50px; text-decoration: none; font-weight: 700;
    font-size: 1rem; transition: .3s; position: relative; overflow: hidden;
}
/* Primário – fundo verde, texto branco (#ffff) */
.btn-primary{
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .95rem 1.6rem; border-radius: 999px;
    background: #174336; color: #ffff;
    border: 1px solid rgba(255,255,255,.18);
    letter-spacing: .01em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 5px 20px rgba(8,63,50,.28);
    transition: transform .18s, background-color .18s, border-color .18s, color .18s;
}
.btn-primary svg{ color: currentColor; fill: currentColor; stroke: currentColor; }
.btn-primary:hover{
    transform: translateY(-2px); background: #1f5a49; color: #ffff;
    border-color: rgba(255,255,255,.28); box-shadow: 0 8px 28px rgba(8,63,50,.36);
}
.btn-primary:active{ transform: translateY(0); background: #154a3b; color: #ffff; }
.btn-primary:focus{ outline: 2px solid rgba(214,231,98,.9); outline-offset: 3px; color: #ffff; }
/* Secundário */
.btn-secondary{
    background: rgba(255,255,255,.9); color: var(--primary-dark);
    border: 2px solid rgba(255,255,255,.3); backdrop-filter: blur(10px);
}
.btn-secondary:hover{ background: #fff; border-color: var(--primary-color); color: var(--primary-color); }

/* MENU MOBILE */
.mobile-menu{
    display: none; background: transparent; border: none; cursor: pointer; padding: .5rem;
    border-radius: var(--border-radius); transition: background .3s;
}
.mobile-menu:hover{ background: rgba(45, 90, 60, .1); }
.mobile-nav-overlay{
    position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
    z-index: 10000; opacity: 0; visibility: hidden; transition: .3s;
}
.mobile-nav-overlay.active{ opacity: 1; visibility: visible; }
.mobile-nav{
    position: fixed; top: 0; right: -100%;
    width: clamp(280px, 85vw, 380px); height: 100vh; background: #fff; z-index: 10001;
    transition: right .3s; padding: 2rem; box-shadow: -10px 0 40px rgba(0,0,0,.1);
}
.mobile-nav.active{ right: 0; }
.mobile-nav-close{
    background: transparent; border: none; font-size: 1.5rem; cursor: pointer; float: right;
    padding: .5rem; border-radius: var(--border-radius); transition: background .3s;
}
.mobile-nav-close:hover{ background: rgba(45, 90, 60, .1); }
.mobile-nav ul{ list-style: none; margin-top: 2rem; }
.mobile-nav li{ margin: .5rem 0; }
.mobile-nav a{
    display: block; padding: 1rem 0; color: #1f2937; text-decoration: none; font-weight: 600;
    border-bottom: 1px solid #e5e7eb; transition: color .3s;
}
.mobile-nav a:hover{ color: var(--primary-color); }
/* CTA no menu mobile */
.mobile-nav .cta-button{
    display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem;
    font-weight: 800; border-radius: 999px; background: #0F6B5B; color: #fff !important;
    border: 1px solid rgba(255,255,255,.22);
}

/* =============== HERO =============== */
.hero{
    min-height: 70vh; max-height: 750px; display: flex; align-items: center; position: relative;
    background: var(--gradient-hero); overflow: hidden;
    padding-top: calc(var(--header-height) + 56px); padding-bottom: 110px;
}
.hero-bg{ position: absolute; inset: 0; z-index: 0; }
.image-banner{
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)), url('https://res.cloudinary.com/dji4klbif/image/upload/v1757278413/Drone-Pulverizador-Agricola_fxkzjg.webp');
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero::before{
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, rgba(16,32,24,.35), rgba(0,0,0,.35));
}
.hero-content{
    max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 3;
}
.hero-badge{
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.15); color: #fff; padding: .55rem 1.5rem; border-radius: 50px;
    font-size: 1rem; font-weight: 700; margin-bottom: 2rem; margin-top: 32px !important;
    border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px);
}
.hero h1{
    font-size: clamp(2.7rem, 6vw, 4.2rem); font-weight: 900; color: #fff; margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.hero h1 span{
    background: var(--gradient-coffee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;
}
.hero p{
    font-size: clamp(1.15rem, 2.6vw, 1.35rem); color: rgba(255,255,255,.9);
    margin-bottom: 2.5rem; max-width: 640px; margin-inline: auto;
}
.hero-buttons{
    display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 3rem;
}
.hero-features{
    display: flex; justify-content: center; align-items: center; gap: 1.25rem 2rem; flex-wrap: nowrap; color: #fff;
}
.hero-feature{ display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; }
.hero-feature svg{ width: 20px; height: 20px; stroke: currentColor; }

/* =============== SESSÕES =============== */
.nossa-historia{ background: linear-gradient(135deg, #fff 0%, #f9fafb 100%); }
.historia-container{ display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.historia-content h2{ text-align: center; margin-bottom: 2rem; }
.historia-content p{ color: #4b5563; line-height: 1.8; margin-bottom: 1.5rem; font-size: 1.08rem; }

/* “Quem Somos” */


.historia-image{
    position: relative; height: clamp(280px, 42vw, 530px);
    border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(45,90,60,.2);
}
.historia-image img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.historia-image:hover img{ transform: scale(1.05); }

.historia-timeline{ display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.timeline-item{
    display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: #fff;
    border-radius: 15px; border-left: 4px solid var(--primary-color); box-shadow: var(--shadow-sm);
    transition: transform .3s;
}
.timeline-item:hover{ transform: translateX(5px); }
.timeline-year{
    font-size: 1.25rem; font-weight: 700; color: var(--primary-color);
    min-width: 60px; font-family: "Bai Jamjuree", sans-serif;
}
.timeline-text{ color: #1f2937; line-height: 1.6; }

.historias-sucesso{ background: linear-gradient(135deg, #f9fafb 0%, #fff 100%); }
.cases-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.case-card{
    background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md);
    transition: .4s; min-width: 0;
}

/* ================================
   FIX – Métricas 100% e mobile
   ================================ */

/* Mantém 2 colunas no desktop */
.case-metrics{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Se houver apenas UMA métrica, ocupa a largura toda */
.case-metrics:has(> .metric:only-child){
  grid-template-columns: 1fr;
}

/* Garante que cada métrica preencha a coluna */
.case-metrics > .metric{
  width: 100%;
}

/* Mobile: sempre 1 coluna para leitura melhor */
@media (max-width: 600px){
  .case-metrics{
    grid-template-columns: 1fr;
  }
}

/* Centraliza o enquadramento da imagem dos cases */
.case-image{
  background-position: center 30% !important; /* sobrepõe o 50% 20% anterior */
  background-size: cover;
}
.case-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.case-image{ height: 280px; background-size: cover; background-position: 50% 20%; position: relative; }
.case-overlay{
    position: absolute; top: 1rem; left: 1rem; background: var(--gradient-coffee); color: #fff;
    padding: .5rem 1rem; border-radius: 25px; font-size: .85rem; font-weight: 700;
    box-shadow: 0 4px 15px rgba(45,90,60,.3);
}
.case-content{ padding: 2rem; }
.case-content h3{ font-size: 1.35rem; margin-bottom: 1rem; font-weight: 700; }
.case-content p{ color: #4b5563; line-height: 1.6; margin-bottom: 1.5rem; }

.metric{ text-align: center; padding: 1rem; background: #f9fafb; border-radius: 10px; border: 1px solid #e5e7eb; }
.metric-value{
    font-size: 1.6rem; font-weight: 800; color: var(--primary-color); display: block;
    font-family: "Bai Jamjuree", sans-serif;
}
.metric-label{ font-size: .9rem; color: #6b7280; }
.case-quote{
    font-style: italic; color: #4b5563; border-left: 3px solid var(--primary-color);
    padding-left: 1rem; background: #f9fafb; padding: 1rem; border-radius: 0 10px 10px 0;
}

/* IMPACTO */
.impacto-numeros{
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--secondary-color) 100%);
    color: #fff; position: relative; overflow: hidden;
}
.impacto-numeros::before{ content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.15); z-index: 0; }
.impacto-numeros .container{ position: relative; z-index: 1; }
.impacto-numeros .section-header h2, .impacto-numeros .section-header p{ color: #1f2937; }

.stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.stat-card{
    text-align: center; padding: 2.6rem 2rem; border-radius: 20px; background: rgba(255,255,255,.95);
    backdrop-filter: blur(20px); transition: .4s; border: 1px solid rgba(45,90,60,.2); box-shadow: var(--shadow-md);
}
.stat-card:hover{ transform: translateY(-10px); background: #fff; box-shadow: var(--shadow-lg); border-color: var(--primary-color); }
.stat-icon{
    width: 70px; height: 70px; margin: 0 auto 1.5rem; background: var(--gradient-coffee);
    border-radius: 15px; display: flex; align-items: center; justify-content: center;
}
.stat-icon svg{ width: 30px; height: 30px; fill: #fff; }
.stat-number{
    font-size: 3rem; font-weight: 900; color: var(--primary-color); margin-bottom: .5rem;
    display: block; line-height: 1; font-family: "Bai Jamjuree", sans-serif;
}
.stat-label{ color: #1f2937; font-size: 1.15rem; font-weight: 700; }

/* NOSSA TECNOLOGIA */
.nossa-tecnologia{ background: transparent !important; }
.tech-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
.tech-category{
    position: relative; overflow: hidden; background: rgba(255,255,255,.96);
    border: 1px solid #e5e7eb; border-radius: 20px; padding: 2rem;
    box-shadow: var(--shadow-md); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tech-category::after{
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 85% -20%, rgba(167,193,48,.12), transparent 55%),
                radial-gradient(circle at -10% 120%, rgba(8,63,50,.08), transparent 45%);
    pointer-events: none;
}
.tech-category:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(45,90,60,.25); }
.tech-category h3{
    font-size: 1.55rem; margin: .25rem 0 .75rem; font-weight: 800; letter-spacing: -.01em;
    background: var(--gradient-coffee); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.tech-kicker{
    display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--primary-dark); background: rgba(214,231,98,.22); border: 1px solid rgba(167,193,48,.35);
    padding: .35rem .6rem; border-radius: 999px;
}
.tech-category p{ color: #4b5563; line-height: 1.7; margin: 0; }

/* ESPECIALISTAS EM CAFÉ */
.especialistas-cafe{
    padding: 5rem 0; background: linear-gradient(180deg, rgba(230,243,157,.30) 0%, rgba(247,251,230,0) 80%);
}
.cafe-container{ display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.cafe-content h2{ text-align: center; margin-bottom: 2rem; }
.cafe-content p{ color: #4b5563; line-height: 1.8; margin-bottom: 1.5rem; font-size: 1.08rem; }

.cafe-advantages{ display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.advantage-item{
    display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255,255,255,.9);
    border-radius: 10px; border: 1px solid #fed7aa; transition: .3s; backdrop-filter: blur(10px);
}
.advantage-item:hover{ transform: translateX(5px); box-shadow: 0 8px 25px rgba(234,88,12,.2); border-color: #ea580c; }
.advantage-icon{
    width: 40px; height: 40px; background: var(--gradient-coffee); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.advantage-icon svg{ width: 18px; height: 18px; fill: #fff; }
.advantage-item span{ color: #1f2937; font-weight: 600; }

.cafe-image{
    position: relative; height: 450px; border-radius: 20px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(146,64,14,.3);
}
.cafe-image img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s; display: block; }
.cafe-image:hover img{ transform: scale(1.05); }

/* COMPROMISSO AMBIENTAL */
.compromisso-ambiental{ background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 30%, #bbf7d0 70%, #86efac 100%); }
.ambiental-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.ambiental-card{
    background: rgba(255,255,255,.95); padding: 2rem; border-radius: 20px; text-align: center;
    box-shadow: var(--shadow-sm); transition: .4s; border-top: 4px solid var(--primary-color);
    position: relative; overflow: hidden; backdrop-filter: blur(10px);
}
.ambiental-card::before{
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(45,90,60,.03) 0%, transparent 100%); pointer-events: none;
}
.ambiental-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-lg); border-top-color: var(--primary-light); }
.ambiental-icon{
    width: 70px; height: 70px; margin: 0 auto 1.5rem; background: var(--gradient-coffee);
    border-radius: 15px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.ambiental-icon svg{ width: 30px; height: 30px; fill: #fff; }
.ambiental-card h3{ font-size: 1.35rem; margin-bottom: 1rem; font-weight: 800; }
.ambiental-card p{ color: #4b5563; line-height: 1.65; }

/* SERVIÇOS */
.services{ background: linear-gradient(135deg, #f9fafb 0%, #fff 50%, #f8fafc 100%); }
.services-grid{ display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.service-card{
    position: relative; aspect-ratio: 4/3; border-radius: 16px; background-size: cover; background-position: center top;
    overflow: hidden; box-shadow: var(--shadow-md); transition: .4s; display: flex; align-items: flex-end; min-width: 0;
}
.service-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.service-caption{
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem;
    background: linear-gradient(to top, rgba(31,41,55,.9) 0%, rgba(31,41,55,.7) 50%, transparent 100%);
    color: #fff; z-index: 2;
}
.service-caption h3{ font-size: 1.35rem; font-weight: 800; margin-bottom: .5rem; color: #fff; }
.service-caption p{ font-size: 1rem; opacity: .95; line-height: 1.5; color: rgba(255,255,255,.92); }

/* DIFERENCIAIS */
.diferenciais{ padding: 5rem 0; background: linear-gradient(180deg, #fff 0%, #f9fafb 100%); }
.dif-title{
    text-align: center; font-weight: 900; font-size: clamp(2.3rem, 5vw, 3.2rem);
    letter-spacing: -.02em; margin-bottom: 3rem;
}
.dif-title span{ background: var(--gradient-coffee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.dif-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.dif-card{
    text-align: center; padding: 2rem; background: #fff; border-radius: 20px; box-shadow: var(--shadow-md);
    transition: .4s; min-height: 200px; display: flex; flex-direction: column; justify-content: center;
}
.dif-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.dif-card h3{
    color: var(--primary-color); margin-bottom: 1rem; font-size: 1.35rem;
    display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 800;
}
.dif-card h3 .icon{ font-size: 1.5em; }
.dif-card p{ color: #4b5563; line-height: 1.6; }

/* CTA */
.cta-section{ background: var(--gradient-coffee); text-align: center; position: relative; overflow: hidden; color: #fff; }
.cta-section::before{
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,.1) 0%, transparent 70%),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,.05) 0%, transparent 70%);
}
.cta-content{ position: relative; z-index: 1; }
.cta-content h2{
    font-size: clamp(2.1rem, 4.2vw, 3rem); font-weight: 900; letter-spacing: -.02em;
    color: var(--primary-dark); text-align: center;
}
.cta-content p{
    font-size: 1.25rem; color: var(--primary-dark); margin-bottom: 2.5rem;
    max-width: 640px; margin-left: auto; margin-right: auto;
}
.cta-contacts{
    display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; margin-top: 2rem;
}
.cta-pill{
    display: inline-flex; align-items: center; gap: .75rem; padding: .95rem 1.7rem; border-radius: 999px;
    background: #083F32; border: 1px solid rgba(255,255,255,.25); color: #fff; text-decoration: none; font-weight: 800;
    backdrop-filter: blur(6px); transition: transform .18s, background-color .18s, border-color .18s;
}
.cta-pill:hover{ transform: translateY(-2px); background: rgba(8,63,50,.9); border-color: rgba(255,255,255,.35); }
.cta-pill:focus{ outline: 2px solid rgba(214,231,98,.8); outline-offset: 2px; }
.cta-pill .icon, .cta-pill .icon svg{ width: 18px; height: 18px; display: inline-flex; color: currentColor; fill: currentColor; }

.cta-logo{ margin-top: 3rem; margin-bottom: 1rem; display: flex; justify-content: center; }
.cta-logo img{ height: 120px; width: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.22)); }
.brand-pattern{ position: relative; }
.brand-pattern::after{
    content: ''; position: absolute; inset: 0; z-index: 0;
    background-image: var(--drone-pattern); background-size: 160px 160px; background-repeat: repeat;
    opacity: .08; pointer-events: none;
}
.cta-divider{
    margin: 24px auto 12px; width: min(720px, 92%); border: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.footer-bottom--in-cta{
    width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .25rem; padding: 12px 0 0;
}
.footer-bottom--in-cta p{ margin: 0; color: rgba(255,255,255,.82); }

/* FOOTER */
footer{
    background: transparent; color: #fff; text-align: center; padding: 4rem 0 2rem; position: relative;
}
footer::before{
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--secondary-color) 0%, var(--primary-light) 100%);
}
footer .container{ backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.footer-info h3{
    font-size: 1.9rem; margin-bottom: .5rem;
    background: linear-gradient(45deg, var(--secondary-color), #fff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.footer-contact{ display: flex; justify-content: center; margin-top: 2rem; }
.contact-item{
    display: flex; align-items: center; gap: 1.5rem; padding: 2rem; background: rgba(255,255,255,.1);
    border-radius: 20px; backdrop-filter: blur(10px); transition: .3s;
}
.contact-item:hover{ transform: translateY(-5px); background: rgba(255,255,255,.15); }
.contact-icon{
    font-size: 3rem; display: flex; align-items: center; justify-content: center; min-width: 80px; height: 80px;
}
.contact-info strong{ display: block; font-size: 1.35rem; font-weight: 800; margin-bottom: .5rem; }
.contact-info span{ font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.9); }
.footer-bottom{ margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom p{ color: var(--primary-dark); margin: .3rem 0; }

/* WHATSAPP */
.whatsapp-button{
    position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: #25d366; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 20px rgba(37,211,102,.4);
    cursor: pointer; z-index: 999; transition: .3s; text-decoration: none; animation: pulse 2s infinite;
}
.whatsapp-button:hover{ transform: scale(1.1); box-shadow: 0 8px 30px rgba(37,211,102,.6); }
.whatsapp-button svg{ width: 28px; height: 28px; fill: #fff; }
@keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.7); }
    70%{ box-shadow: 0 0 0 20px rgba(37,211,102,0); }
    100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ANIMAÇÕES */
.reveal{ opacity: 0; transform: translateY(30px); transition: .6s; }
.reveal.active{ opacity: 1; transform: translateY(0); }

/* =============== RESPONSIVO =============== */
@media (max-width:1024px){
    .hero{ min-height: 60vh; max-height: 600px; }
    .nav-links{ display: none; }
    .mobile-menu{ display: block; }
    .historia-container, .cafe-container{ grid-template-columns: 1fr; gap: 3rem; }
    .tech-grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
    .image-banner{ background-position: center top; }
}
@media (max-width:768px){
    .header-inner{ height: var(--header-height); padding: 0 12px; display: flex; align-items: center; gap: 10px; }
    .logo-img{ height: 44px; width: auto; }
    .logo-tagline{ display: none; }
    header{ padding-top: env(safe-area-inset-top); background: rgba(255,255,255,.98); backdrop-filter: blur(20px); }
    .hero{ padding-top: calc(var(--header-height) + 72px); }
    .hero-features{ flex-wrap: wrap; gap: .75rem 1rem; }
    .historia-image{ height: clamp(260px, 52vw, 480px); }
}
@media (max-width:520px){
    .container{ padding: 0 15px; }
    .section{ padding: 3rem 0; }
    .timeline-item{ flex-direction: column; text-align: center; }
    .dif-grid{ gap: 1.5rem; }
    .whatsapp-button{ bottom: 20px; right: 20px; width: 50px; height: 50px; }
    .whatsapp-button svg{ width: 24px; height: 24px; }
    .hero h1{ font-size: clamp(2.2rem, 8vw, 3rem); }
    .image-banner{ background-position: center; }
}

/* performance + acessibilidade */
img{ max-width: 100%; height: auto; loading: lazy; }

/* Contraste alto / motion reduce */
@media (prefers-contrast: high){
  :root{ --text-medium: #333; --text-light: #444; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}
a:focus, button:focus{ outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* === Badge “Especialistas em Café de Montanha” no mobile === */
@media (max-width:768px){
    .hero .hero-badge{ margin-top: clamp(56px, 12vh, 120px) !important; }
    .hero{ padding-top: calc(var(--header-height) + 88px); }
}

/* =========================
   HERO — AJUSTES MOBILE
   ========================= */
.image-banner{ background-size: cover; background-position: center 30%; }
@media (max-width:1024px){
    .hero{
        min-height: 68vh; max-height: none;
        padding-top: calc(var(--header-height) + 56px); padding-bottom: 72px;
    }
    .image-banner{ background-position: center 26%; }
}
@media (max-width:768px){
    .hero{
        min-height: 72svh; min-height: 72vh; max-height: none;
        padding-top: calc(var(--header-height) + 64px); padding-bottom: 56px;
    }
    .hero-badge{ margin-top: clamp(20px, 6vh, 48px); }
    .hero h1{ font-size: clamp(2rem, 8.5vw, 2.8rem); line-height: 1.15; }
    .hero p{ font-size: clamp(1rem, 4vw, 1.15rem); max-width: 90%; }
    .hero-buttons{ flex-direction: column; gap: 12px; }
    .hero-buttons .btn, .hero-buttons .btn-primary, .hero-buttons .btn-secondary{ width: min(520px, 92%); justify-content: center; }
    .image-banner{ background-position: center 18%; }
}
@media (max-width:420px){
    .hero{
        padding-top: calc(var(--header-height) + 52px); padding-bottom: 48px;
        min-height: 70svh; min-height: 70vh;
    }
    .hero-badge{ margin-top: 7vh; }
    .hero h1{ font-size: clamp(1.8rem, 10.5vw, 2.4rem); }
    .image-banner{ background-position: center 14%; }
}

/* === Espaçamento do bloco verde (Impacto em Números) === */
/* Gap EXTERNO: cria espaço antes do início do degradê */
.impacto-numeros{
  margin-top: clamp(32px, 5vw, 80px);   /* aumenta/diminui conforme desejar */
  padding-top: clamp(48px, 6vw, 96px);  /* respiro interno no topo do bloco */
  padding-bottom: clamp(48px, 6vw, 96px); /* respiro interno no rodapé do bloco */
  border-radius: 24px;                  /* opcional para suavizar a borda do bloco */
}

/* Caso sua “faixa verde” seja o bloco de chamada (CTA) no fim da página */
.cta-section{
  margin-top: clamp(32px, 5vw, 80px);
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
  border-radius: 24px;
}

/* Ajuste fino apenas no mobile, se quiser mais espaço */
@media (max-width: 768px){
  .impacto-numeros,
  .cta-section{
    margin-top: 48px;     /* aumenta o gap antes do verde no mobile */
    padding-top: 64px;    /* respiro extra dentro do bloco */
    padding-bottom: 64px;
  }
}

/* =========================
   CARDS DE SERVIÇO — recorte
   ========================= */
.service-card{ background-size: cover; background-position: center 35%; }