/* ==========================================================================
   Dois Marcos Sementes — folha de estilo única
   Reconstrução fiel do layout original (WordPress + Astra + Elementor)
   Base: doismarcos-DS.md · todos os valores são os medidos no site original
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS  (DS §1.6 / §2.1 / §3)
   -------------------------------------------------------------------------- */
:root{
  /* marca */
  --brand-yellow:#FFDD11;
  --brand-green:#006644;
  --brand-red:#EE3333;

  /* verdes funcionais */
  --green-hover:#00A65A;
  --green-heading:#0B8F45;
  --green-institucional:#006647;
  --green-band-top:#1B5E20;
  --green-band-bottom:#0D3B0D;

  /* amarelo */
  --yellow-icon:#FDD835;

  /* neutros */
  --text-body:#7A7A7A;
  --text-strong:#333333;
  --text-footer-title:#383838;
  --text-heading-gray:#666666;
  --text-muted:#999999;
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:#CCCCCC;
  --surface:#FFFFFF;
  --surface-alt:#F5F5F5;
  --surface-submenu-hover:#F8F8F8;
  --border-mobile:#EEEEEE;
  --divider-color:#312E2E;
  --link:#046BD2;
  --link-dark:#045CB4;

  /* layout */
  --container:1140px;
  --container-nav:1200px;
  --header-h:70px;
  --gutter:10px;
  --widget-gap:20px;
  --section-pad-y:60px;

  /* tipografia */
  --font-primary:'Roboto', sans-serif;
  --font-secondary:'Roboto Slab', serif;
}

@media (max-width:1024px){ :root{ --container:1024px; } }
@media (max-width:767px) { :root{ --container:767px; } }

/* --------------------------------------------------------------------------
   2. RESET + BASE  (DS §2.3 / §4.2)
   -------------------------------------------------------------------------- */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-primary);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  color:var(--text-body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--font-primary); font-weight:600; line-height:1.3; margin:0; }
p{ margin:0 0 var(--widget-gap); }
p:last-child{ margin-bottom:0; }
img{ max-width:100%; height:auto; border:0; }

a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-dark); }

/* O original NÃO compensa o header fixo de 70px — o topo do hero fica coberto.
   Para corrigir, descomente a linha abaixo (DS §4.4 e §21.1). */
/* body{ padding-top:var(--header-h); } */

/* --------------------------------------------------------------------------
   3. ESCALA TIPOGRÁFICA  (DS §2.2)
   -------------------------------------------------------------------------- */
.h-hero    { font-size:57px; line-height:1.3; color:var(--text-on-dark); text-align:left; }
.h-section { font-size:38px; line-height:1.3; color:var(--text-heading-gray); text-align:center; }
.h-social  { font-size:31px; line-height:1.3; color:var(--text-heading-gray); text-align:center; }
.h-pillar  { font-size:30px; line-height:1.3; color:var(--green-institucional); text-align:center; }
.h-contact { font-size:30px; line-height:1.3; color:var(--green-heading); text-align:left; }
.h-card    { font-size:19px; line-height:1.3; color:var(--text-strong); text-align:left; }
.h-footer  { font-size:20px; line-height:1.3; color:var(--text-footer-title); text-align:left; }

/* --------------------------------------------------------------------------
   4. LAYOUT  (DS §3.3)
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-pad-y); }
.section--alt{ background:var(--surface-alt); }

/* --------------------------------------------------------------------------
   5. HEADER / MENU FIXO  (DS §4.2)
   -------------------------------------------------------------------------- */
.menu-container{
  background-color:#ffffff;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  position:fixed;
  z-index:1000;
  width:100%;
  top:0;
}
.menu-nav{
  max-width:var(--container-nav);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}
.menu-logo{ flex-shrink:0; padding:10px 0; }
.menu-logo img{ height:50px; width:auto; display:block; }

.menu-list{ display:flex; list-style:none; margin:0; padding:0; align-items:center; }
.menu-list > li{ position:relative; margin:0 15px; }
.menu-list a{
  display:block;
  padding:20px 10px;
  color:#333;
  text-decoration:none;
  font-weight:500;
  font-size:16px;
  transition:color .3s ease;
  position:relative;
}
.menu-list a:hover{ color:var(--green-hover); }
.menu-list .is-current > a{ color:var(--green-hover); }

.has-submenu > a::after{
  content:"\25BC";
  font-size:10px;
  margin-left:5px;
  display:inline-block;
  transition:transform .3s ease;
}
.submenu{
  position:absolute; top:100%; left:0;
  background:#fff; min-width:220px;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
  opacity:0; visibility:hidden;
  transform:translateY(-10px);
  transition:all .3s ease;
  list-style:none; padding:10px 0;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.has-submenu:hover > a::after,
.has-submenu:focus-within > a::after{ transform:rotate(180deg); }
.submenu a{
  padding:12px 25px;
  font-size:15px;
  font-weight:400;
  border-bottom:1px solid transparent;
}
.submenu a:hover{ background-color:var(--surface-submenu-hover); border-bottom-color:var(--green-hover); }

.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:10px; }
.menu-toggle span{ display:block; width:25px; height:3px; background:#333; margin:5px 0; transition:.3s; }

@media (max-width:768px){
  .menu-toggle{ display:block; }
  .menu-list{
    position:fixed; top:50px; left:-100%;
    width:100%; height:calc(100vh - 70px);
    background:#fff; flex-direction:column; align-items:flex-start;
    padding:20px; transition:left .3s ease; overflow-y:auto;
    box-shadow:0 0 20px rgba(0,0,0,0.1);
  }
  .menu-list.active{ left:0; }
  .menu-list > li{ width:100%; margin:0; border-bottom:1px solid var(--border-mobile); }
  .menu-list a{ padding:15px 0; }
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; background:var(--surface-submenu-hover); margin-top:0; display:none;
    width:100%; min-width:0;
  }
  .has-submenu.active .submenu{ display:block; }
  .submenu a{ padding-left:40px; }

  .menu-toggle.active span:nth-child(1){ transform:rotate(-45deg) translate(-5px,6px); }
  .menu-toggle.active span:nth-child(2){ opacity:0; }
  .menu-toggle.active span:nth-child(3){ transform:rotate(45deg) translate(-5px,-6px); }
}

/* --------------------------------------------------------------------------
   6. HERO SLIDER — HOME  (DS §5.3)
   -------------------------------------------------------------------------- */
.hero{ position:relative; height:558px; overflow:hidden; }
.hero-slide{
  position:absolute; inset:0;
  background:#833CA3 50% 50%/cover no-repeat;   /* cor-resíduo do Elementor */
  opacity:0;
  transition:opacity .5s ease;
  animation:kenburns-out 20s ease-out both;
  animation-play-state:paused;
}
.hero-slide.is-active{ opacity:1; animation-play-state:running; }
@keyframes kenburns-out{ from{ transform:scale(1.2); } to{ transform:scale(1); } }

.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer;
  color:#fff; font-size:40px; line-height:1; padding:10px;
  opacity:.85; transition:opacity .3s; z-index:2;
}
.hero-nav:hover{ opacity:1; }
.hero-prev{ left:10px; }
.hero-next{ right:10px; }

.hero-dots{
  position:absolute; bottom:12px; left:50%;
  transform:translateX(-50%);
  display:flex; gap:8px; z-index:2;
}
.hero-dots button{
  width:8px; height:8px; border-radius:50%; border:0; padding:0;
  background:rgba(255,255,255,.55); cursor:pointer;
}
.hero-dots button.is-active{ background:#fff; }

@media (max-width:767px){
  .hero{ height:202px; }
  .hero-nav{ font-size:28px; }
}

/* --------------------------------------------------------------------------
   7. HERO INTERNO — páginas internas  (DS §6)
   -------------------------------------------------------------------------- */
.page-hero{ position:relative; }
.page-hero-bg{
  position:absolute; inset:0;
  background:url("../img/hero-interno.jpg") 50% 50%/cover no-repeat;
}
.page-hero .container{ position:relative; padding-block:400px 25px; }
@media (max-width:767px){
  .page-hero .container{ padding-block:200px 25px; }
  .h-hero{ font-size:34px; }
}

/* --------------------------------------------------------------------------
   8. FAIXA DE REDES SOCIAIS  (DS §7)
   -------------------------------------------------------------------------- */
.social-sub{
  color:var(--text-muted);
  font-size:16px; line-height:1.65;
  text-align:center;
}
.social-icons{ display:flex; justify-content:center; gap:15px; margin-top:20px; }
.social-icon{
  width:50px; height:50px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--text-heading-gray);
  border-radius:10%;
  color:#fff; font-size:25px;
  transition:background-color .3s ease;
}
.social-icon:hover{ background:var(--green-hover); color:#fff; }
.social-icon svg{ width:25px; height:25px; fill:#fff; display:block; }
.social-icon i{ font-size:25px; line-height:1; }

/* --------------------------------------------------------------------------
   9. CARDS DE PRODUTO — HOME  (DS §8)
   -------------------------------------------------------------------------- */
.products{ padding:80px 20px; }
.products .container{ display:flex; padding-inline:0; }
.products .col{ width:50%; padding-inline:10px; }
/* imagens centralizadas dentro de cada coluna (no original ficam à esquerda) */
.products img{ display:block; height:auto; margin-inline:auto; margin-bottom:var(--widget-gap); }
.products .col:nth-child(1) img{ max-width:65%; }
.products .col:nth-child(2) img{ max-width:73%; }
.products h2{ margin-bottom:var(--widget-gap); }
@media (max-width:767px){
  .products{ padding:60px 10px; }
  .products .container{ flex-direction:column; gap:40px; }
  .products .col{ width:100%; }
  /* especificidade tem de empatar com as regras de 65%/73% acima */
  .products .col:nth-child(1) img,
  .products .col:nth-child(2) img{ max-width:100%; }
}

/* --------------------------------------------------------------------------
   10. FAIXA DE CONTADORES  (DS §9)
   -------------------------------------------------------------------------- */
.counters{
  background-image:linear-gradient(var(--green-band-top) 0%, var(--green-band-bottom) 100%);
  padding:0 10px;
}
.counters .container{ padding-block:10px; }
.counters-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  grid-auto-flow:column;
  text-align:center;
}
.counter{ padding:10px; }
.counter-icon{ margin-bottom:10px; line-height:1; }
.counter-icon svg{ width:40px; height:40px; fill:var(--yellow-icon); display:inline-block; }
.counter-icon i{ font-size:40px; line-height:1; color:var(--yellow-icon); }
.counter-num{
  font-family:var(--font-primary);
  font-weight:600;
  font-size:69px; line-height:1;
  color:var(--text-on-dark);
}
.counter-label{
  font-size:19px; font-weight:400; line-height:1.3;
  color:var(--text-on-dark-muted);
  margin-top:8px;
}
@media (max-width:1024px){ .counters-grid{ grid-auto-flow:row; grid-template-columns:repeat(3, 1fr); } }
@media (max-width:767px) { .counters-grid{ grid-template-columns:repeat(1, 1fr); } }

/* --------------------------------------------------------------------------
   11. DIVISOR  (DS §10)
   -------------------------------------------------------------------------- */
.divider{ padding:15px 0; }
.divider hr{
  border:0;
  border-top:1px dashed var(--divider-color);
  width:100%;
  margin:0;
}

/* --------------------------------------------------------------------------
   12. FOOTER  (DS §11)
   -------------------------------------------------------------------------- */
.site-footer{ padding:0 10px 20px; }
.footer-grid{ display:flex; gap:20px; padding-inline:0; }
.footer-col{ padding:10px; }
.footer-col:nth-child(1),
.footer-col:nth-child(2){ width:25%; }
.footer-col:nth-child(3){ width:33%; }
.footer-col h2{ margin-bottom:var(--widget-gap); }
.footer-col p{ color:var(--text-body); font-size:16px; line-height:1.65; }
.footer-col--contact p{ font-size:17px; line-height:1.65; }
.footer-col a{ color:var(--link); text-decoration:none; }
.footer-col a:hover{ color:var(--link-dark); }
@media (max-width:767px){
  .footer-grid{ flex-direction:column; }
  .footer-col:nth-child(1),
  .footer-col:nth-child(2),
  .footer-col:nth-child(3){ width:100%; }
}

/* --------------------------------------------------------------------------
   13. BOTÃO VOLTAR AO TOPO  (DS §12)
   -------------------------------------------------------------------------- */
.scroll-top{
  position:fixed; right:30px; bottom:30px;
  width:31.5px; height:31.5px;
  display:none; align-items:center; justify-content:center;
  background:var(--link); color:#fff;
  border:0; border-radius:2px; cursor:pointer;
  font-size:14px; line-height:1;
  z-index:99;
}
.scroll-top.is-visible{ display:flex; }

/* --------------------------------------------------------------------------
   14. PÁGINA A EMPRESA  (DS §14)
   -------------------------------------------------------------------------- */
.section-title{ margin-bottom:40px; }

.about-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  max-width:1100px;
  margin-inline:auto;
  padding-block:10px;
  align-items:start;
}
.about-grid img{ width:100%; height:auto; display:block; }

.pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  max-width:1100px;
  margin:40px auto 0;
}
.pillar{ padding-inline:10px; text-align:center; }
.pillar h2{ margin-bottom:var(--widget-gap); }
.pillar p{ color:var(--text-body); }

@media (max-width:767px){
  .about-grid{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; }
  .h-section{ font-size:28px; }
}

/* --------------------------------------------------------------------------
   15. PÁGINA NOSSAS SEMENTES  (DS §15)
   -------------------------------------------------------------------------- */
.seeds-grid{ display:flex; padding-block:10px; }
.seeds-grid .col-img { width:33%; padding-inline:10px; }
.seeds-grid .col-text{ width:60%; padding-inline:10px; }
.seeds-grid img{ width:100%; height:auto; display:block; }
@media (max-width:767px){
  .seeds-grid{ flex-direction:column; gap:30px; }
  .seeds-grid .col-img,
  .seeds-grid .col-text{ width:100%; }
}

/* --------------------------------------------------------------------------
   16. PÁGINA CONTATO  (DS §16)
   -------------------------------------------------------------------------- */
.contact-grid{ display:flex; }
.contact-card{
  width:44%;
  background:#fff;
  border-radius:15px;
  padding:28px;
  display:flex; flex-direction:column; gap:20px;
}
.contact-card p{ margin:0; color:var(--text-body); font-size:16px; line-height:1.65; }
.contact-card strong{ font-weight:700; color:var(--text-body); }
.contact-aside{ width:56%; padding-inline:10px; }
@media (max-width:767px){
  .contact-grid{ flex-direction:column; }
  .contact-card{ width:100%; }
  .contact-aside{ display:none; }
}