/* Reset e tokens básicos */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {

  margin: 0;

  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  color: var(--bh-text);

  background: var(--bh-bg);

}

:root{

  /* cores principais */

  --bh-primary: #2A7F4A;      /* botanical green */

  --bh-primary-dark: #165A3B; /* deep green */

  --bh-accent: #D9A34A;       /* premium amber */

  --bh-accent-light: #A7E3C2; /* mint */

  --bh-text: #0F1720;         /* charcoal */

  --bh-bg: #F7F7F7;           /* off-white */

  --bh-white: #FFFFFF;



  /* semantic */

  --bh-cta: var(--bh-primary);

  --bh-cta-hover: linear-gradient(90deg,var(--bh-primary),var(--bh-accent-light));

  --bh-surface: var(--bh-white);

  --bh-muted: #7f8b86; /* mid-tone for low emphasis text */

  --bh-focus: rgba(42,127,74,0.28);

  --bh-shadow: rgba(15,23,32,0.08);

  

  /* gradiente principal da marca */

  --bh-gradient-main: linear-gradient(45deg, #ff8a23 0%, #40c2b4 50%, #457dff 100%);

  --bh-gradient-hover: linear-gradient(45deg, #ff9a33 0%, #50d2c4 50%, #558dff 100%);



  /* compatibilidade com código existente */

  --brand: var(--bh-primary);

  --brand-ink: var(--bh-primary-dark);

  --ink: var(--bh-text);

  --muted: var(--bh-muted);

  --surface: var(--bh-surface);

  --radius-xl: 28px;

  --radius: 16px;

  --container: 1200px;

  --shadow-lg: 0 10px 30px var(--bh-shadow);

}



.container{

  width: 100%;

  max-width: var(--container);

  padding-inline: 20px;

  margin-inline: auto;

}



/* Header */

.site-header{

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(248,250,252,0.95);

  backdrop-filter: saturate(140%) blur(8px);

  border-bottom: 1px solid rgba(42,127,74,.1);

  box-shadow: 0 4px 20px rgba(42,127,74,.1);

  transition: all 0.3s ease;

}



/* Header quando rolado */

.site-header.scrolled{

  background: rgba(248,250,252,0.8);

  backdrop-filter: saturate(120%) blur(12px);

  box-shadow: 0 2px 10px rgba(42,127,74,.08);

}

.header-inner{

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 64px;

}

.logo{

  display: inline-flex;

  align-items: center;

  text-decoration: none;

}

.logo-img{

  height: 40px;

  width: auto;

}



.hamburger{

  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  border: 1px solid rgba(42,127,74,.2);

  background: var(--surface);

  cursor: pointer;

}

.hamburger span{

  display: block;

  width: 20px; height: 2px; background: var(--ink); position: relative;

}

.hamburger span::before,

.hamburger span::after{

  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);

  transition: transform .3s ease, top .3s ease, opacity .2s ease;

}

.hamburger span::before{ top: -6px; }

.hamburger span::after{ top: 6px; }

.hamburger.is-open span{ background: transparent; }

.hamburger.is-open span::before{ top: 0; transform: rotate(45deg); }

.hamburger.is-open span::after{ top: 0; transform: rotate(-45deg); }



/* Drawer (menu lateral) */

.drawer{

  position: fixed;

  inset: 0 0 0 auto; /* ancorado à direita */

  width: min(90vw, 420px);

  background: var(--bh-gradient-main);

  transform: translateX(100%);

  transition: transform .35s cubic-bezier(.22,.61,.36,1);

  box-shadow: 0 0 40px rgba(255,138,35,0.3);

  z-index: 60;

  overflow-y: auto;

}

.drawer.open{ transform: translateX(0); }



.drawer-content{

  padding: 40px 32px;

  height: 100%;

  display: flex;

  flex-direction: column;

  gap: 40px;

  position: relative;

}



.drawer-close{

  position: absolute;

  top: 20px;

  right: 20px;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: rgba(255,255,255,0.2);

  border: 1px solid rgba(255,255,255,0.3);

  color: var(--bh-white);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all .2s ease;

  z-index: 10;

}



.drawer-close:hover{

  background: rgba(255,255,255,0.3);

  border-color: rgba(255,255,255,0.5);

  transform: scale(1.05);

}



.drawer-nav{

  display: flex;

  flex-direction: column;

  gap: 32px;

}



.nav-section h3{

  color: var(--bh-white);

  font-size: 18px;

  font-weight: 700;

  margin: 0 0 16px 0;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.nav-section ul{

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.nav-section a{

  text-decoration: none;

  color: rgba(255,255,255,0.9);

  font-weight: 500;

  font-size: 16px;

  padding: 8px 0;

  transition: all .2s ease;

  border-bottom: 2px solid transparent;

}



.nav-section a:hover{

  color: var(--bh-white);

  border-bottom-color: rgba(255,255,255,0.5);

  transform: translateX(4px);

}



.drawer-promo{

  display: flex;

  flex-direction: column;

  gap: 24px;

  margin-top: auto;

}



.promo-block{

  background: rgba(255,255,255,0.1);

  border-radius: 16px;

  padding: 24px;

  border: 1px solid rgba(255,255,255,0.2);

  backdrop-filter: blur(10px);

}



.promo-block h3{

  color: var(--bh-white);

  font-size: 20px;

  font-weight: 700;

  margin: 0 0 12px 0;

}



.promo-block p{

  color: rgba(255,255,255,0.9);

  font-size: 14px;

  line-height: 1.5;

  margin: 0 0 16px 0;

}



.promo-images{

  display: flex;

  gap: 8px;

  align-items: center;

}



.promo-images img{

  width: 60px;

  height: 60px;

  border-radius: 12px;

  object-fit: cover;

  border: 2px solid rgba(255,255,255,0.3);

}



.instagram-preview{

  background: rgba(255,255,255,0.95);

  border-radius: 12px;

  padding: 16px;

  color: var(--bh-text);

}



.instagram-header{

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 12px;

}



.instagram-logo{

  width: 40px;

  height: 40px;

  border-radius: 50%;

  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(96%) contrast(97%);

}



.instagram-info{

  display: flex;

  flex-direction: column;

}



.username{

  font-weight: 600;

  font-size: 14px;

}



.stats{

  font-size: 12px;

  color: var(--bh-muted);

}



.instagram-bio{

  font-size: 12px;

  line-height: 1.4;

  margin: 0;

}



.backdrop{

  position: fixed;

  inset: 0;

  background: rgba(3, 18, 22, .45);

  backdrop-filter: blur(2px);

  z-index: 55;

}



/* Hero / Banner */

.hero{

  padding: 24px 0 48px;

}

.hero-inner{

  position: relative;

  background: var(--bh-gradient-main);

  color: #fff;

  border-radius: var(--radius-xl);

  padding: clamp(28px, 6vw, 64px);

  min-height: clamp(420px, 70vh, 680px);

  display: grid;

  box-shadow: 0 20px 40px rgba(255,138,35,0.25);

  grid-template-columns: 1.1fr .9fr;

  align-items: center;

  gap: min(6vw, 48px);

  box-shadow: var(--shadow-lg);

}



.hero-copy h1{

  margin: 0 0 12px 0;

  font-size: clamp(28px, 5vw, 56px);

  line-height: 1.05;

  letter-spacing: -0.5px;

}

.hero-copy p{

  margin: 0 0 22px 0;

  font-size: clamp(16px, 2.2vw, 20px);

  color: rgba(255,255,255,.9);

}

.hero-cta{ display: flex; gap: 12px; flex-wrap: wrap; }



.btn{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  height: 44px;

  padding: 0 18px;

  border-radius: 999px;

  text-decoration: none;

  font-weight: 700;

  transition: transform .06s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;

  will-change: transform;

}

.btn:active{ transform: translateY(1px); }

.btn-primary{ 

  background: var(--bh-gradient-main); 

  color: var(--bh-white); 

  box-shadow: 0 6px 18px rgba(255,138,35,0.3), 0 0 0 2px rgba(255,255,255,0.2); 

  transition: all .2s ease;

  border: 2px solid rgba(255,255,255,0.3);

  position: relative;

}

.btn-primary::before{

  content: '';

  position: absolute;

  inset: -2px;

  background: var(--bh-gradient-main);

  border-radius: inherit;

  z-index: -1;

  opacity: 0.8;

}

.btn-primary:hover{ 

  background: var(--bh-gradient-hover); 

  transform: translateY(-2px);

  box-shadow: 0 10px 28px rgba(255,138,35,0.4), 0 0 0 3px rgba(255,255,255,0.3);

  border-color: rgba(255,255,255,0.5);

}

.btn-primary:focus{

  outline: 3px solid rgba(255,255,255,0.5);

  outline-offset: 2px;

}

.btn-outline{ background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.9); }

.btn-outline:hover{ background: rgba(255,255,255,.1); }



/* Botão outline para processo */

#processo .btn-outline{ 

  background: transparent; 

  color: var(--brand-ink); 

  border: 2px solid rgba(27,138,90,.3); 

}

#processo .btn-outline:hover{ 

  background: rgba(27,138,90,.06); 

}



.hero-art{

  min-height: 260px;

  border-radius: calc(var(--radius-xl) - 6px);

  background: radial-gradient(1200px 260px at 40% 60%, rgba(255,255,255,.45), rgba(255,255,255,.0) 60%),

              url('https://images.unsplash.com/photo-1544006659-f0b21884ce1d?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;

  filter: saturate(110%);

}



/* Responsividade */

@media (max-width: 980px){

  .hero-inner{ grid-template-columns: 1fr; }

  .hero-art{ order: -1; min-height: 220px; }

  .logo-img{ height: 32px; }

  

  .drawer{

    width: 100vw;

  }

  .drawer-content{

    padding: 32px 24px;

    gap: 32px;

  }

  .drawer-close{

    top: 16px;

    right: 16px;

    width: 44px;

    height: 44px;

  }

  .drawer-nav{

    gap: 24px;

  }

  .nav-section h3{

    font-size: 16px;

  }

  .nav-section a{

    font-size: 15px;

  }

  .promo-block{

    padding: 20px;

  }

  .promo-block h3{

    font-size: 18px;

  }

  .promo-images img{

    width: 50px;

    height: 50px;

  }

}



@media (min-width: 1280px){

  .hero{ padding-top: 36px; }

}



/* Section head */

.section-head{

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 20px;

  margin: 42px auto 14px;

}

.section-head h2{

  margin: 0 0 6px 0;

  font-size: clamp(22px, 3.5vw, 40px);

  letter-spacing: -0.3px;

}

.section-head p{ margin: 0; color: var(--muted); }

.badge{

  align-self: flex-start;

  background: rgba(27,138,90,.1);

  color: var(--brand-ink);

  padding: 6px 12px;

  border-radius: 999px;

  font-weight: 700;

  font-size: 12px;

}



/* Chips de patologias */

.pathologies{ padding: 6px 0 48px; }

.chips{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 14px;

}

.chip{

  background: linear-gradient(135deg, var(--bh-white) 0%, rgba(167,227,194,.05) 100%);

  border: 1.5px solid rgba(42,127,74,.15);

  color: var(--bh-text);

  height: 48px;

  border-radius: 999px;

  padding: 0 16px 0 40px;

  text-align: left;

  position: relative;

  cursor: pointer;

  font-weight: 600;

  transition: all .2s ease;

  box-shadow: 0 2px 8px rgba(42,127,74,.08);

}

.chip::before{

  content: '';

  position: absolute;

  left: 14px; top: 50%; transform: translateY(-50%);

  width: 16px; height: 16px; border-radius: 50%;

  border: 2px solid rgba(12,27,31,.35);

  background: #fff;

}

.chip:hover{

  border-color: var(--bh-primary);

  background: linear-gradient(135deg, rgba(42,127,74,.08) 0%, rgba(167,227,194,.1) 100%);

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(42,127,74,.15);

}

.chip.is-selected{

  background: var(--bh-gradient-main);

  border-color: rgba(255,255,255,.3);

  color: var(--bh-white);

  box-shadow: 0 4px 12px rgba(255,138,35,.3);

}

.chip.is-selected::before{

  background: radial-gradient(circle at 50% 50%, var(--bh-white) 60%, var(--bh-primary) 61%);

  border-color: var(--bh-white);

}



/* Modal */

.modal-backdrop{

  position: fixed; inset: 0; background: rgba(3,18,22,.55);

  display: none; z-index: 80; backdrop-filter: blur(1px);

}

.modal-backdrop.open{ display: block; }

.modal{

  position: fixed; inset: 0; display: grid; place-items: center; z-index: 90;

  padding: 24px;

}

.modal > .card{

  width: min(860px, 96vw);

  max-height: 86vh;

  background: var(--surface);

  border-radius: 16px;

  box-shadow: var(--shadow-lg);

  overflow: hidden;

  display: grid;

  grid-template-rows: auto auto 1fr auto;

}

.modal-hero{ position: relative; padding: 8px 8px 0; background: #e7f3eb; }

.browser-chrome{ display:flex; gap:6px; padding: 8px 10px; }

.browser-chrome span{ width:10px; height:10px; border-radius:50%; background:#b6d7c3; display:inline-block; }

.hero-illustration{ 

  height: 120px; 

  border-radius: 12px; 

  margin: 0 8px 8px; 

  background: url('https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat, linear-gradient(180deg, #d8efdf, #e7f3eb); 

  box-shadow: inset 0 0 0 1px rgba(12,27,31,.06);

  display: flex;

  align-items: center;

  justify-content: center;

}

.modal-logo{

  height: 50px;

  width: auto;

  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));

}

.modal-header{ padding: 16px 20px; border-bottom: 1px solid rgba(12,27,31,.08); display:flex; justify-content: space-between; align-items:center; }

.modal-header h3{ margin: 0; font-size: 20px; }

.modal-close{ width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(12,27,31,.12); background: #fff; cursor: pointer; }

.modal-body{ padding: 16px 20px; overflow: auto; }

.modal-sticky{

  position: sticky; top: 0; z-index: 1;

  background: linear-gradient(#ffffff, #ffffff 60%, rgba(255,255,255,0.92));

  padding-top: 8px; margin-top: -8px; /* cola no topo da área de scroll */

}

.modal-actions{ padding: 16px 20px; display:flex; gap: 12px; justify-content: space-between; }

.btn-secondary{ background: transparent; color: var(--brand-ink); border: 2px solid rgba(27,138,90,.3); }

.btn-secondary:hover{ background: rgba(27,138,90,.06); }



/* Campos */

.field{ display:block; margin-bottom: 12px; }

.field span{ display:block; font-weight: 600; margin-bottom: 6px; }

.field input{

  width: 100%; height: 44px; padding: 0 12px; border-radius: 10px;

  border: 1px solid rgba(12,27,31,.15);

  font-size: 16px;

}

.field input:focus{ outline: 2px solid rgba(27,138,90,.25); border-color: var(--brand); }



.tags-selected{ display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.tags-selected .tag{ background: rgba(27,138,90,.12); color: var(--brand-ink); padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }



/* CTA desabilitado */

#cta-talk[disabled]{ pointer-events: none; opacity: .5; }



/* Impact section */

.impact{ padding: 12px 0 56px; }

.impact-wrap{

  width: 100%;

  background: #eaf4ee;

}

.impact-text{

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  text-align: center;

  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  font-weight: 300;

  line-height: 1.2;

  color: #285e31;

  letter-spacing: -0.02em;

  font-size: clamp(28px, 6vw, 56px);

  padding: clamp(32px, 6vw, 80px) 20px;

}



/* Stories (carrossel) */

.stories{ padding: 8px 0 64px; }

.stories-head{ display:flex; align-items:flex-end; justify-content: space-between; gap: 16px; }

.stories-head h2{ margin:0; font-size: clamp(22px, 3.2vw, 36px); }

.stories-head p{ margin: 6px 0 0 0; color: var(--muted); }

.stories-cta{ white-space: nowrap; }



.stories-rail{ overflow: hidden; }

.stories-rail{ touch-action: pan-y; -webkit-overflow-scrolling: touch; }

.stories-track{ display: flex; gap: 8px; padding: 18px 0; cursor: grab; user-select: none; }

.stories-track:active{ cursor: grabbing; }

.story{ flex: 0 0 clamp(180px, 18vw, 260px); aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: #dfe7ea; box-shadow: var(--shadow-lg); }

.story img{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }



/* Formas de consumo */

#formas-consumo{ padding: 40px 0 60px; }

#formas-consumo .container{ max-width: 1136px; }



.section-header{

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 32px;

}

.section-header h2{

  margin: 0;

  font-size: clamp(24px, 3vw, 32px);

  font-weight: 300;

  color: #285e31;

  letter-spacing: -0.3px;

}

.header-info{

  display: flex;

  align-items: center;

  gap: 12px;

}

.badge{

  background: rgba(42,127,74,.1);

  color: var(--bh-primary);

  padding: 6px 12px;

  border-radius: 999px;

  font-weight: 600;

  font-size: 12px;

}



.badge-premium{

  background: linear-gradient(180deg, var(--bh-accent), #B7812F);

  color: var(--bh-text);

  font-weight: 700;

  font-size: 12px;

  padding: 6px 12px;

  border-radius: 999px;

  box-shadow: 0 6px 14px rgba(217,163,74,0.14);

}

.text-gray-600{ color: #6b7280; font-size: 14px; }



#consumo-accordion{ display: flex; flex-direction: column; gap: 16px; }



.consumo-item{

  border-radius: 24px;

  overflow: hidden;

  transition: all .3s ease;

}

.consumo-item.open{

  background: #eff6f3;

  box-shadow: 0 4px 12px rgba(27,138,90,.1);

}



.consumo-toggle{

  width: 100%;

  border: none;

  background: transparent;

  cursor: pointer;

  padding: 20px 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  transition: background .2s ease;

}

.consumo-toggle:hover{ background: rgba(27,138,90,.05); }



.item-header{

  display: flex;

  align-items: baseline;

  gap: 12px;

}

.item-number{

  color: #285e31;

  font-size: 18px;

  font-weight: 500;

}

.consumo-item h3{

  margin: 0;

  font-size: clamp(20px, 2.5vw, 28px);

  font-weight: 300;

  color: #285e31;

  letter-spacing: -0.2px;

}

.consumo-item:not(.open) h3{ color: #6b7280; }



.chev{

  color: #285e31;

  font-size: 20px;

  transition: transform .2s ease;

}

.consumo-item.open .chev{ transform: rotate(180deg); }



.consumo-panel{

  display: none;

  grid-template-columns: 1fr 420px;

  gap: 32px;

  padding: 0 24px 24px;

  align-items: center;

}

.consumo-item.open .consumo-panel{ display: grid; }



.consumo-panel p{

  margin: 0;

  color: #6b7280;

  font-size: 16px;

  line-height: 1.6;

}



.item-image{

  border-radius: 16px;

  overflow: hidden;

  height: 280px;

  background: rgba(255,255,255,.4);

}

.item-image img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



/* Responsividade */

@media (max-width: 980px){

  .section-header{ flex-direction: column; align-items: flex-start; gap: 12px; }

  .header-info{ flex-wrap: wrap; }

  .consumo-panel{ grid-template-columns: 1fr; gap: 20px; }

  .item-image{ height: 220px; }

}



/* Processo */

#processo{ padding: 40px 0 60px; }

#processo .container{ max-width: 1136px; }



.processo-card{

  background: #f8faf9;

  border-radius: 24px;

  padding: 48px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

  align-items: center;

  box-shadow: var(--shadow-lg);

}



.processo-content h2{

  margin: 0 0 16px 0;

  font-size: clamp(28px, 4vw, 40px);

  font-weight: 300;

  color: #285e31;

  line-height: 1.2;

  letter-spacing: -0.5px;

}



.processo-content p{

  margin: 0 0 32px 0;

  color: #6b7280;

  font-size: 18px;

  line-height: 1.6;

}



.processo-buttons{

  display: flex;

  gap: 16px;

  flex-wrap: wrap;

}



.processo-image{

  border-radius: 16px;

  overflow: hidden;

  height: 400px;

  background: rgba(255,255,255,.4);

}



.processo-image img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



/* Modal de vídeo */

.video-modal{

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,.8);

  display: none;

  place-items: center;

  z-index: 100;

  padding: 24px;

}



.video-modal.open{ display: grid; }



.video-modal-content{

  width: min(900px, 90vw);

  aspect-ratio: 16/9;

  background: #000;

  border-radius: 12px;

  overflow: hidden;

  position: relative;

}



.video-modal video{

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.video-modal-close{

  position: absolute;

  top: -40px;

  right: 0;

  background: rgba(255,255,255,.95);

  border: 2px solid rgba(0,0,0,.1);

  width: 36px;

  height: 36px;

  border-radius: 50%;

  cursor: pointer;

  font-size: 18px;

  color: #333;

  z-index: 101;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

}



/* Responsividade processo */

@media (max-width: 980px){

  .processo-card{

    grid-template-columns: 1fr;

    gap: 32px;

    padding: 32px;

  }

  .processo-image{ height: 300px; }

  .processo-buttons{ justify-content: center; }

}



/* Tratamento simplificado */

#tratamento{ padding: 40px 0 60px; }

#tratamento .container{ max-width: 1136px; }



.tratamento-header{

  margin-bottom: 48px;

}

.header-left{

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.header-left .badge{

  align-self: flex-start;

  background: rgba(27,138,90,.1);

  color: #285e31;

  padding: 6px 12px;

  border-radius: 999px;

  font-weight: 600;

  font-size: 12px;

}

.header-left h2{

  margin: 0;

  font-size: clamp(28px, 4vw, 40px);

  font-weight: 300;

  color: #285e31;

  line-height: 1.2;

  letter-spacing: -0.5px;

}

.header-left p{

  margin: 0;

  color: #6b7280;

  font-size: 18px;

  line-height: 1.6;

}



.tratamento-grid{

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



.tratamento-card{

  background: linear-gradient(135deg, var(--bh-white) 0%, rgba(167,227,194,.05) 100%);

  border-radius: 24px;

  padding: 24px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  transition: transform .2s ease, box-shadow .2s ease;

  border: 1px solid rgba(42,127,74,.08);

  position: relative;

  overflow: hidden;

}

.tratamento-card::before{

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: var(--bh-gradient-main);

}

.tratamento-card:hover{

  transform: translateY(-4px);

  box-shadow: 0 8px 24px rgba(42,127,74,.15);

  border-color: rgba(42,127,74,.15);

}



/* Efeito de flip sutil */

.tratamento-card.flipping{

  animation: cardFlip 0.6s ease-in-out;

}



@keyframes cardFlip {

  0% { transform: rotateY(0deg); }

  50% { transform: rotateY(90deg); }

  100% { transform: rotateY(0deg); }

}





.card-badge{

  background: linear-gradient(135deg, rgba(255,138,35,.15) 0%, rgba(64,194,180,.1) 100%);

  color: var(--bh-text);

  padding: 4px 12px;

  border-radius: 999px;

  font-weight: 600;

  font-size: 12px;

  margin-bottom: 16px;

  border: 1px solid rgba(255,138,35,.2);

}



.card-icon{

  width: 80px;

  height: 80px;

  background: rgba(255,255,255,.6);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

  font-size: 32px;

}



.card-content h3{

  margin: 0 0 12px 0;

  font-size: 20px;

  font-weight: 300;

  color: #285e31;

  line-height: 1.3;

}

.card-content h3 strong{

  font-weight: 600;

}



.card-content p{

  margin: 0 0 20px 0;

  color: #6b7280;

  font-size: 14px;

  line-height: 1.5;

}



.card-link{

  background: transparent;

  border: none;

  color: #285e31;

  font-weight: 600;

  font-size: 14px;

  cursor: pointer;

  padding: 8px 0;

  transition: color .2s ease;

}

.card-link:hover{

  color: #1b8a5a;

}



/* Responsividade tratamento */

@media (max-width: 1200px){

  .tratamento-grid{

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

  }

}



@media (max-width: 768px){

  .tratamento-grid{

    grid-template-columns: 1fr;

    gap: 16px;

  }

  .tratamento-card{

    padding: 20px;

  }

  .flip-card{

    height: 260px;

  }

  .flip-card-front, .flip-card-back{

    padding: 20px;

  }

}



/* Artigos em destaque */

#artigos{ padding: 40px 0 60px; }

#artigos .container{ max-width: 1136px; }



.artigos-header{

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 32px;

}

.artigos-header h2{

  margin: 0;

  font-size: clamp(28px, 4vw, 40px);

  font-weight: 300;

  color: #285e31;

  line-height: 1.2;

  letter-spacing: -0.5px;

}

.artigos-header .header-info{

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 8px;

}

.artigos-header .badge{

  align-self: flex-end;

  background: rgba(27,138,90,.1);

  color: #285e31;

  padding: 6px 12px;

  border-radius: 999px;

  font-weight: 600;

  font-size: 12px;

}

.artigos-header p{

  margin: 0;

  color: #6b7280;

  font-size: 16px;

  text-align: right;

}



.artigo-destaque{

  position: relative;

  border-radius: 24px;

  overflow: hidden;

  height: 400px;

  background: #000;

}



.artigo-image{

  position: absolute;

  inset: 0;

}

.artigo-image img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.artigo-overlay{

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background: linear-gradient(transparent, rgba(0,0,0,.8));

  padding: 40px;

  color: white;

}



.artigo-badge{

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(59, 130, 246, .9);

  color: white;

  padding: 6px 12px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 600;

  margin-bottom: 16px;

}

.badge-icon{ font-size: 14px; }



.artigo-overlay h3{

  margin: 0 0 16px 0;

  font-size: clamp(24px, 3vw, 32px);

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -0.3px;

}



.artigo-meta{

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 20px;

  font-size: 14px;

  opacity: .9;

}

.meta-item{

  display: flex;

  align-items: center;

  gap: 6px;

}

.meta-icon{ font-size: 16px; }

.meta-separator{ opacity: .6; }



.artigo-link{

  background: transparent;

  border: none;

  color: white;

  font-weight: 600;

  font-size: 16px;

  cursor: pointer;

  padding: 0;

  transition: opacity .2s ease;

}

.artigo-link:hover{

  opacity: .8;

}



/* Responsividade artigos */

@media (max-width: 980px){

  .artigos-header{

    flex-direction: column;

    align-items: flex-start;

    gap: 16px;

  }

  .artigos-header .header-info{

    align-items: flex-start;

  }

  .artigos-header p{

    text-align: left;

  }

  .artigo-overlay{

    padding: 24px;

  }

  .artigo-destaque{

    height: 350px;

  }

}



/* FAQ - Dúvidas frequentes */

#faq{ padding: 60px 0; }

#faq .container{ max-width: 800px; }



.faq-header{

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 40px;

}

.faq-header h2{

  margin: 0;

  font-size: clamp(28px, 4vw, 40px);

  font-weight: 300;

  color: #285e31;

  line-height: 1.2;

  letter-spacing: -0.5px;

}

.faq-header .header-info{

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 8px;

}

.faq-header .badge{

  align-self: flex-end;

  background: rgba(27,138,90,.1);

  color: #285e31;

  padding: 6px 12px;

  border-radius: 999px;

  font-weight: 600;

  font-size: 12px;

}

.faq-header p{

  margin: 0;

  color: #6b7280;

  font-size: 16px;

  text-align: right;

}



.faq-accordion{

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.faq-item{

  border: 1px solid #e5e7eb;

  border-radius: 12px;

  overflow: hidden;

  transition: all .2s ease;

}

.faq-item:hover{

  border-color: rgba(27,138,90,.3);

}



.faq-question{

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 20px 24px;

  background: #fff;

  cursor: pointer;

  transition: background .2s ease;

}

.faq-question:hover{

  background: #f9fafb;

}

.faq-question h3{

  margin: 0;

  font-size: 18px;

  font-weight: 600;

  color: #1f2937;

  line-height: 1.4;

}



.faq-toggle{

  width: 32px;

  height: 32px;

  border-radius: 50%;

  border: none;

  background: #285e31;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all .2s ease;

  flex-shrink: 0;

}

.faq-toggle:hover{

  background: #1b8a5a;

  transform: scale(1.05);

}

.faq-icon{

  font-size: 16px;

  font-weight: bold;

  line-height: 1;

}



.faq-answer{

  padding: 0 24px;

  max-height: 0;

  overflow: hidden;

  transition: all .3s ease;

  background: rgba(27,138,90,.05);

}

.faq-item.active .faq-answer{

  padding: 20px 24px;

  max-height: 500px;

}

.faq-answer p{

  margin: 0 0 12px 0;

  color: #374151;

  line-height: 1.6;

}

.faq-answer p:last-child{

  margin-bottom: 0;

}

.faq-answer ul{

  margin: 12px 0;

  padding-left: 20px;

}

.faq-answer li{

  margin-bottom: 8px;

  color: #374151;

  line-height: 1.6;

}

.faq-answer strong{

  color: #285e31;

  font-weight: 600;

}



/* Responsividade FAQ */

@media (max-width: 980px){

  .faq-header{

    flex-direction: column;

    align-items: flex-start;

    gap: 16px;

  }

  .faq-header .header-info{

    align-items: flex-start;

  }

  .faq-header p{

    text-align: left;

  }

  .faq-question{

    padding: 16px 20px;

  }

  .faq-question h3{

    font-size: 16px;

  }

  .faq-item.active .faq-answer{

    padding: 16px 20px;

  }

}



/* CTA - Inicie seu tratamento */

#cta{

  padding: 80px 0;

  background: linear-gradient(135deg, rgba(42,127,74,.08) 0%, rgba(22,90,59,.04) 100%);

  position: relative;

}

#cta::before{

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(167,227,194,.1) 0%, rgba(42,127,74,.05) 100%);

  pointer-events: none;

}



.cta-content{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

  max-width: 1200px;

  margin: 0 auto;

  position: relative;

  z-index: 1;

}



.cta-text h2{

  margin: 0 0 24px 0;

  font-size: clamp(32px, 5vw, 48px);

  font-weight: 700;

  color: #1f2937;

  line-height: 1.2;

  letter-spacing: -0.5px;

}

.cta-text .highlight{

  background: #3b82f6;

  color: white;

  padding: 4px 8px;

  border-radius: 6px;

  display: inline-block;

  margin-right: 8px;

}



.cta-price{

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 24px;

  font-size: 20px;

  font-weight: 600;

  color: #285e31;

}

.price-icon{

  font-size: 24px;

}



.cta-text p{

  margin: 0 0 32px 0;

  font-size: 18px;

  color: #6b7280;

  line-height: 1.6;

}



.cta-button{

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 16px 32px;

  font-size: 18px;

  font-weight: 600;

  background: var(--bh-gradient-main);

  color: var(--bh-white);

  border: 2px solid rgba(255,255,255,0.3);

  border-radius: 12px;

  cursor: pointer;

  transition: all .2s ease;

  box-shadow: 0 8px 25px rgba(255,138,35,.4), 0 0 0 2px rgba(255,255,255,0.2);

  position: relative;

}

.cta-button::before{

  content: '';

  position: absolute;

  inset: -2px;

  background: var(--bh-gradient-main);

  border-radius: inherit;

  z-index: -1;

  opacity: 0.8;

}

.cta-button:hover{

  background: var(--bh-gradient-hover);

  transform: translateY(-2px);

  box-shadow: 0 12px 35px rgba(255,138,35,.5), 0 0 0 3px rgba(255,255,255,0.3);

  border-color: rgba(255,255,255,0.5);

}

.btn-arrow{

  font-size: 16px;

  transition: transform .2s ease;

}

.cta-button:hover .btn-arrow{

  transform: translateX(4px);

}



.cta-image{

  position: relative;

  border-radius: 20px;

  overflow: hidden;

  height: 500px;

  background: #f3f4f6;

}

.cta-image img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.image-badge{

  position: absolute;

  top: 20px;

  right: 20px;

  background: rgba(27,138,90,.9);

  color: white;

  padding: 8px 12px;

  border-radius: 20px;

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 14px;

  font-weight: 600;

  backdrop-filter: blur(10px);

}

.badge-icon{

  font-size: 16px;

}



/* Responsividade CTA */

@media (max-width: 980px){

  .cta-content{

    grid-template-columns: 1fr;

    gap: 40px;

    text-align: center;

  }

  .cta-image{

    height: 400px;

    order: -1;

  }

  .cta-text h2{

    font-size: clamp(28px, 4vw, 36px);

  }

  .cta-text p{

    font-size: 16px;

  }

  .cta-button{

    padding: 14px 28px;

    font-size: 16px;

  }

}



/* Footer */

#footer{

  position: relative;

  background: #f8fafc;

}



.footer-main{

  background: var(--bh-gradient-main);

  border-radius: 20px 20px 0 0;

  padding: 60px 0 40px;

  position: relative;

  overflow: hidden;

  box-shadow: 0 -10px 30px rgba(255,138,35,0.25);

}

.footer-main::before{

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M30 30c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20zm0 0c0-11.046 8.954-20 20-20s20 8.954 20 20-8.954 20-20 20-20-8.954-20-20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  opacity: 0.1;

}



.footer-content{

  display: grid;

  grid-template-columns: 1fr 1fr auto auto;

  gap: 40px;

  align-items: start;

  position: relative;

  z-index: 1;

}



.footer-links h3,

.footer-contact h3{

  margin: 0 0 20px 0;

  color: white;

  font-size: 18px;

  font-weight: 600;

}



.footer-links ul,

.footer-contact ul{

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-links li,

.footer-contact li{

  margin-bottom: 12px;

}



.footer-links a,

.footer-contact a{

  color: rgba(255,255,255,.8);

  text-decoration: none;

  transition: color .2s ease;

  font-size: 14px;

}

.footer-links a:hover,

.footer-contact a:hover{

  color: white;

}



.footer-social{

  display: flex;

  gap: 12px;

  align-items: center;

}



.social-link{

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 2px solid rgba(255,255,255,.3);

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  text-decoration: none;

  transition: all .2s ease;

}

.social-link:hover{

  border-color: white;

  background: rgba(255,255,255,.1);

  transform: translateY(-2px);

}



.footer-legal{

  display: flex;

  gap: 20px;

  align-items: center;

}



.footer-legal a{

  color: rgba(255,255,255,.8);

  text-decoration: none;

  font-size: 14px;

  transition: color .2s ease;

}

.footer-legal a:hover{

  color: white;

}



.footer-bottom{

  padding: 30px 0;

  background: #f8fafc;

}



.footer-info{

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}



.company-info{

  display: flex;

  align-items: center;

}



.footer-logo{

  height: 32px;

  width: auto;

}



.company-details{

  display: flex;

  gap: 20px;

  color: var(--bh-muted);

  font-size: 14px;

}



.footer-badges{

  position: absolute;

  right: 20px;

  bottom: 20px;

}



.scroll-top{

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: var(--bh-gradient-main);

  border: 2px solid rgba(255,255,255,0.3);

  color: var(--bh-white);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all .2s ease;

  box-shadow: 0 4px 12px rgba(255,138,35,0.3), 0 0 0 2px rgba(255,255,255,0.2);

}

.scroll-top:hover{

  background: var(--bh-gradient-hover);

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(255,138,35,0.4), 0 0 0 3px rgba(255,255,255,0.3);

  border-color: rgba(255,255,255,0.5);

}



/* Responsividade Footer */

@media (max-width: 980px){

  .footer-content{

    grid-template-columns: 1fr 1fr;

    gap: 30px;

  }

  .footer-social,

  .footer-legal{

    grid-column: 1 / -1;

    justify-content: center;

  }

  .footer-info{

    flex-direction: column;

    text-align: center;

    gap: 16px;

  }

  .company-details{

    flex-direction: column;

    gap: 8px;

  }

  .footer-badges{

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 1000;

  }

  .footer-logo{

    height: 28px;

  }

}



/* ===== ESTILOS ESPECÍFICOS PARA PÁGINA SOBRE NÓS ===== */



/* Nossa História */

.about-history{

  padding: 60px 0;

  background: linear-gradient(135deg, rgba(42,127,74,.05) 0%, rgba(22,90,59,.02) 100%);

}



.history-content{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

}



.history-text h2{

  margin: 0 0 24px 0;

  font-size: clamp(28px, 4vw, 40px);

  font-weight: 300;

  color: #285e31;

  line-height: 1.2;

  letter-spacing: -0.5px;

}



.history-text p{

  margin: 0 0 20px 0;

  color: #6b7280;

  font-size: 18px;

  line-height: 1.6;

}



.history-text p:last-child{

  margin-bottom: 0;

}



.history-image{

  border-radius: 20px;

  overflow: hidden;

  height: 400px;

  background: #f3f4f6;

}



.history-image img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



/* Nossa Missão */

.about-mission{

  padding: 80px 0;

  background: var(--bh-white);

}



.mission-grid{

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px;

}



.mission-card{

  background: linear-gradient(135deg, var(--bh-white) 0%, rgba(167,227,194,.05) 100%);

  border-radius: 24px;

  padding: 40px 32px;

  text-align: center;

  border: 1px solid rgba(42,127,74,.08);

  transition: transform .2s ease, box-shadow .2s ease;

  position: relative;

  overflow: hidden;

}



.mission-card::before{

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: var(--bh-gradient-main);

}



.mission-card:hover{

  transform: translateY(-4px);

  box-shadow: 0 8px 24px rgba(42,127,74,.15);

  border-color: rgba(42,127,74,.15);

}



.mission-icon{

  width: 80px;

  height: 80px;

  background: rgba(255,255,255,.6);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 24px;

  font-size: 32px;

}



.mission-card h3{

  margin: 0 0 16px 0;

  font-size: 24px;

  font-weight: 600;

  color: #285e31;

  line-height: 1.3;

}



.mission-card p{

  margin: 0;

  color: #6b7280;

  font-size: 16px;

  line-height: 1.6;

}



/* Nossa Equipe */

.about-team{

  padding: 80px 0;

  background: linear-gradient(135deg, rgba(42,127,74,.05) 0%, rgba(22,90,59,.02) 100%);

}



.team-header{

  text-align: center;

  margin-bottom: 60px;

}



.team-header h2{

  margin: 0 0 16px 0;

  font-size: clamp(28px, 4vw, 40px);

  font-weight: 300;

  color: #285e31;

  line-height: 1.2;

  letter-spacing: -0.5px;

}



.team-header p{

  margin: 0;

  color: #6b7280;

  font-size: 18px;

  line-height: 1.6;

}



.team-grid{

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px;

}



.team-member{

  background: var(--bh-white);

  border-radius: 24px;

  padding: 32px;

  text-align: center;

  border: 1px solid rgba(42,127,74,.08);

  transition: transform .2s ease, box-shadow .2s ease;

}



.team-member:hover{

  transform: translateY(-4px);

  box-shadow: 0 8px 24px rgba(42,127,74,.15);

  border-color: rgba(42,127,74,.15);

}



.member-image{

  width: 120px;

  height: 120px;

  border-radius: 50%;

  overflow: hidden;

  margin: 0 auto 24px;

  background: #f3f4f6;

}



.member-image img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.member-info h3{

  margin: 0 0 8px 0;

  font-size: 20px;

  font-weight: 600;

  color: #285e31;

  line-height: 1.3;

}



.member-role{

  margin: 0 0 16px 0;

  color: #3b82f6;

  font-weight: 600;

  font-size: 14px;

}



.member-bio{

  margin: 0;

  color: #6b7280;

  font-size: 14px;

  line-height: 1.6;

}



/* Nossos Números */

.about-numbers{

  padding: 80px 0;

  background: var(--bh-white);

}



.numbers-header{

  text-align: center;

  margin-bottom: 60px;

}



.numbers-header h2{

  margin: 0 0 16px 0;

  font-size: clamp(28px, 4vw, 40px);

  font-weight: 300;

  color: #285e31;

  line-height: 1.2;

  letter-spacing: -0.5px;

}



.numbers-header p{

  margin: 0;

  color: #6b7280;

  font-size: 18px;

  line-height: 1.6;

}



.numbers-grid{

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 40px;

}



.number-item{

  text-align: center;

  padding: 32px 24px;

  background: linear-gradient(135deg, rgba(42,127,74,.08) 0%, rgba(167,227,194,.1) 100%);

  border-radius: 20px;

  border: 1px solid rgba(42,127,74,.1);

  transition: transform .2s ease, box-shadow .2s ease;

}



.number-item:hover{

  transform: translateY(-4px);

  box-shadow: 0 8px 24px rgba(42,127,74,.15);

  border-color: rgba(42,127,74,.15);

}



.number-value{

  font-size: clamp(32px, 4vw, 48px);

  font-weight: 700;

  color: #285e31;

  line-height: 1;

  margin-bottom: 8px;

}



.number-label{

  color: #6b7280;

  font-size: 16px;

  font-weight: 500;

}



/* Compromisso */

.about-commitment{

  padding: 80px 0;

  background: linear-gradient(135deg, rgba(42,127,74,.05) 0%, rgba(22,90,59,.02) 100%);

}



.commitment-content{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

}



.commitment-text h2{

  margin: 0 0 24px 0;

  font-size: clamp(28px, 4vw, 40px);

  font-weight: 300;

  color: #285e31;

  line-height: 1.2;

  letter-spacing: -0.5px;

}



.commitment-text p{

  margin: 0 0 40px 0;

  color: #6b7280;

  font-size: 18px;

  line-height: 1.6;

}



.commitment-list{

  display: flex;

  flex-direction: column;

  gap: 24px;

}



.commitment-item{

  display: flex;

  gap: 16px;

  align-items: flex-start;

}



.commitment-icon{

  width: 40px;

  height: 40px;

  background: rgba(42,127,74,.1);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  flex-shrink: 0;

}



.commitment-desc h4{

  margin: 0 0 8px 0;

  font-size: 18px;

  font-weight: 600;

  color: #285e31;

  line-height: 1.3;

}



.commitment-desc p{

  margin: 0;

  color: #6b7280;

  font-size: 14px;

  line-height: 1.6;

}



.commitment-image{

  border-radius: 20px;

  overflow: hidden;

  height: 400px;

  background: #f3f4f6;

}



.commitment-image img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



/* Responsividade Sobre Nós */

@media (max-width: 1200px){

  .mission-grid{

    grid-template-columns: 1fr;

    gap: 32px;

  }

  

  .team-grid{

    grid-template-columns: 1fr;

    gap: 32px;

  }

  

  .numbers-grid{

    grid-template-columns: repeat(2, 1fr);

    gap: 32px;

  }

}



@media (max-width: 980px){

  .about-history,

  .about-mission,

  .about-team,

  .about-numbers,

  .about-commitment{

    padding: 60px 0;

  }

  

  .history-content,

  .commitment-content{

    grid-template-columns: 1fr;

    gap: 40px;

  }

  

  .history-image,

  .commitment-image{

    height: 300px;

    order: -1;

  }

  

  .numbers-grid{

    grid-template-columns: 1fr;

    gap: 24px;

  }

  

  .mission-card,

  .team-member,

  .number-item{

    padding: 24px;

  }

  

  .commitment-list{

    gap: 20px;

  }

  

  .commitment-item{

    gap: 12px;

  }

  

  .commitment-icon{

    width: 36px;

    height: 36px;

    font-size: 18px;

  }

}



/* ===== ESTILOS FAQ ===== */



/* Hero Section FAQ */

.hero-section{

  background: var(--bh-gradient-main);

  padding: 120px 0 80px;

  text-align: center;

  color: white;

}



.hero-content{

  max-width: 800px;

  margin: 0 auto;

}



.hero-title{

  font-size: 3.5rem;

  font-weight: 700;

  margin-bottom: 24px;

  line-height: 1.1;

}



.hero-subtitle{

  font-size: 1.25rem;

  font-weight: 400;

  opacity: 0.9;

  line-height: 1.6;

}



/* FAQ Section */

.faq-section{

  padding: 80px 0;

  background: var(--bh-bg);

}



.faq-content{

  max-width: 800px;

  margin: 0 auto;

}



.faq-header{

  text-align: center;

  margin-bottom: 60px;

}



.faq-title{

  font-size: 2.5rem;

  font-weight: 700;

  color: var(--bh-text);

  margin-bottom: 16px;

}



.faq-description{

  font-size: 1.125rem;

  color: var(--bh-muted);

  line-height: 1.6;

}



/* FAQ List */

.faq-list{

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.faq-item{

  background: var(--bh-white);

  border-radius: var(--radius);

  box-shadow: 0 2px 8px var(--bh-shadow);

  overflow: hidden;

  transition: all 0.3s ease;

}



.faq-item:hover{

  box-shadow: 0 4px 16px var(--bh-shadow);

}



.faq-question{

  width: 100%;

  padding: 24px;

  background: none;

  border: none;

  text-align: left;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 16px;

  transition: all 0.3s ease;

}



.faq-question:hover{

  background: rgba(42, 127, 74, 0.05);

}



.faq-question-text{

  font-size: 1.125rem;

  font-weight: 600;

  color: var(--bh-text);

  line-height: 1.4;

}



.faq-icon{

  flex-shrink: 0;

  color: var(--bh-primary);

  transition: transform 0.3s ease;

}



.faq-question[aria-expanded="true"] .faq-icon{

  transform: rotate(180deg);

}



.faq-answer{

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease;

}



.faq-answer[style*="max-height: 500px"]{

  max-height: 500px;

}



.faq-answer-content{

  padding: 0 24px 24px;

}



.faq-answer-content p{

  font-size: 1rem;

  color: var(--bh-muted);

  line-height: 1.6;

  margin-bottom: 16px;

}



.faq-answer-content ul{

  margin: 16px 0;

  padding-left: 20px;

}



.faq-answer-content li{

  font-size: 1rem;

  color: var(--bh-muted);

  line-height: 1.6;

  margin-bottom: 8px;

}



.faq-answer-content strong{

  color: var(--bh-text);

  font-weight: 600;

}



/* FAQ Question Link - para a pergunta que leva para Como Funciona */

.faq-question-link {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  padding: 20px;

  background: none;

  border: none;

  cursor: pointer;

  transition: all 0.3s ease;

  text-decoration: none;

  color: inherit;

}



.faq-question-link:hover {

  background: rgba(42, 127, 74, 0.05);

  color: var(--bh-primary);

}



/* CTA Section FAQ */

.cta-section{

  padding: 80px 0;

  background: var(--bh-white);

  text-align: center;

}



.cta-content{

  max-width: 600px;

  margin: 0 auto;

}



.cta-title{

  font-size: 2.25rem;

  font-weight: 700;

  color: var(--bh-text);

  margin-bottom: 16px;

}



.cta-description{

  font-size: 1.125rem;

  color: var(--bh-muted);

  line-height: 1.6;

  margin-bottom: 32px;

}



/* Responsividade FAQ */

@media (max-width: 768px){

  .hero-section{

    padding: 100px 0 60px;

  }

  

  .hero-title{

    font-size: 2.5rem;

  }

  

  .hero-subtitle{

    font-size: 1.125rem;

  }

  

  .faq-section{

    padding: 60px 0;

  }

  

  .faq-title{

    font-size: 2rem;

  }

  

  .faq-question{

    padding: 20px;

  }

  

  .faq-question-text{

    font-size: 1rem;

  }

  

  .faq-answer-content{

    padding: 0 20px 20px;

  }

  

  .cta-section{

    padding: 60px 0;

  }

  

  .cta-title{

    font-size: 1.875rem;

  }

}



@media (max-width: 480px){

  .hero-title{

    font-size: 2rem;

  }

  

  .faq-question{

    padding: 16px;

  }

  

  .faq-answer-content{

    padding: 0 16px 16px;

  }

}

.btn-rounded {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    color: #333;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.btn-rounded:hover {
    background: #f7f7f7;
    border-color: #d6d6d6;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.btn-rounded:active {
    transform: scale(0.97);
}