/*
Theme Name: Base Theme
Author: Spores
Author URI: https://spores.com/
Description: Tema base
Version: 1.0.0
Text Domain: base-theme
*/

/* =================================================================
   ADMIN
   ================================================================= */
#wpadminbar{ display:none; }


/* =================================================================
   TOKENS / FOUNDATIONS
   ================================================================= */
:root{
  /* Fonts */
  --font-primary:   "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-secondary: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --heading-weight: 600;
  --display-weight: 100;
  --menu-weight:    100;
  --body-weight:    300;

  /* Bootstrap vars (usa nossas fontes/cores) */
  --bs-font-sans-serif:  var(--font-secondary);
  --bs-body-font-family: var(--font-secondary);
  --bs-body-font-weight: var(--body-weight);
  --bs-body-color:       var(--gray-400);
  --bs-link-color-rgb:   var(--gray-800);

  /* Neutrals */
  --gray-50:  #EBEBEB;  /* heading on dark */
  --gray-100: #C0C0C0;  /* body on dark / placeholders */
  --gray-300: #777676;
  --gray-400: #5D5C5C;  /* body on light */
  --gray-500: #343333;  /* heading on light / footer */
  --gray-800: #1D1C1C;  /* CTA banner bg */

  /* Brand */
  --brand-primary:   #2EFFB8; /* general button */
  --brand-secondary: #682EFF; /* CTA button / accents */

  /* Surfaces */
  --surface-primary: #FBF8F4; /* light sections bg */
  --surface-banner:  #1D1C1C;
  --surface-footer:  #343333; /* footer */

  /* Borders / Radius */
  --border-primary:   #F3EFE9;
  --border-secondary: #5D5C5C;
  --bd: 2px;
  --radius-organic: 60px 20px 60px 20px / 60px 20px 60px 20px;

  /* Icons (caminhos relativos ao style.css) */
  --icon-arrow: url("_assets/img/icons/arrow.svg");
  --icon-star:  url("_assets/img/icons/star.svg");
}

/* =================================================================
   GLOBAL TYPE & BODY
   ================================================================= */
html {
  margin-top: 0!important;
}

.container {
 
}

body, html {
  overflow-x: hidden;
}

body{
  font-family: var(--font-secondary);
  font-weight: var(--body-weight);
  color: var(--gray-400);
}

p{ margin-bottom:0px; }
.entry-content { line-height:36px }

h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
  font-family: var(--font-primary);
  font-weight: var(--heading-weight);
  color: var(--gray-500);
  letter-spacing: 1px;
}
h2{ font-size: 2.2rem; }
h3{ font-size: 1.2rem; }

/* variantes claras */
h1.txt-light, h2.txt-light, h3.txt-light, h4.txt-light, h5.txt-light, h6.txt-light{ color: var(--gray-50) !important; }
p.txt-light, .display-l.txt-light{ color: var(--gray-100) !important; }

/* Display leve */
.display-l{
  font-family: var(--font-primary);
  font-weight: var(--display-weight);
  font-size: 1.2rem;
  line-height: normal;
  color: var(--gray-400);
}

/* =================================================================
   FORMS
   ================================================================= */
input::placeholder,
textarea::placeholder,
.form-control::placeholder{ color: var(--gray-100) !important; opacity: 1; }

.form-label{ font-weight: var(--heading-weight); margin-bottom: 1rem; }

/* campos */
.form-control,
.form-select{
  background: var(--surface-primary);
  color: var(--gray-500);
  border: var(--bd) solid var(--border-primary);
  min-height: 2.75rem;
}
.form-control:focus,
.form-select:focus{
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 .25rem rgba(104,46,255,.15);
}

/* auxiliares de borda */
.br{ border-right: var(--bd) solid var(--border-primary); }
.border-top{ border-top:1px solid var(--border-secondary)!important; }

/* =================================================================
   SURFACES
   ================================================================= */
.surface-primary{ background: var(--surface-primary); }

/* =================================================================
   ICON BADGE
   ================================================================= */
.icon-badge{
  --size: 72px;
  --trail: url("_assets/img/bg-icon.svg");
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: var(--bd) solid var(--border-primary);
  isolation: isolate;
}
.icon-badge__icon{ width: 40%; height: auto; display: block; }
.icon-badge::before{
  content: "";
  position: absolute;
  left: calc(-0.9 * var(--size));
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--size) * 2.3);
  height: calc(var(--size) * 1);
  background: var(--trail) left center / contain no-repeat;
  pointer-events: none;
  z-index: -1;
}

/* =================================================================
   SPACING HELPERS
   ================================================================= */
.p-40{ padding: 40px; }
.py-8 { padding: 8rem 0 8rem 0 }
.mb-24{ margin-bottom: 24px; }
.mb-40{ margin-bottom: 40px; }
.mb-60{ margin-bottom: 60px; }
.mb-80{ margin-bottom: 80px; }
.mt-24{ margin-top: 24px; }
.mt-40{ margin-top: 40px; }
.h-100vh{ min-height:100vh; }

@media (max-width: 991.98px){
  .py-8 { padding: 2rem 0 2rem 0 }
}


/* =================================================================
   BUTTONS
   ================================================================= */
.btn-theme{
  --btn-bg: transparent;
  --btn-fg: var(--gray-500);
  --btn-border: var(--border-primary);
  --btn-radius: 999px;
  --btn-gap: .75rem;
  --btn-py: .5rem;
  --btn-px: 1.25rem;
  --btn-icon: var(--icon-arrow);
  --btn-icon-size: 1rem;

  display:inline-flex; align-items:center; gap:var(--btn-gap);
  padding:var(--btn-py) var(--btn-px);
  border-radius:var(--btn-radius);
  background:var(--btn-bg); color:var(--btn-fg); text-decoration:none;
  font-weight:700; font-size:1rem;
  border: var(--bd,2px) solid var(--btn-border);
  transition: filter .15s ease;
}
.btn-theme:hover{ filter:brightness(.96); }
.btn-theme:focus-visible{ outline:3px solid color-mix(in srgb, var(--btn-fg), transparent 75%); outline-offset:3px; }

.btn-theme--icon::after{
  content:""; inline-size:var(--btn-icon-size); block-size:var(--btn-icon-size);
  background: var(--btn-icon) center/contain no-repeat;
}
.btn-theme--brand  { --btn-bg: var(--brand-primary);   --btn-fg: var(--gray-500); --btn-border: transparent; justify-content: space-between; min-width:200px; }
.btn-theme--accent { --btn-bg: var(--brand-secondary); --btn-fg: #fff;            --btn-border: transparent; }
.btn-theme--solid  { border:none; }
.btn-theme--outline{ --btn-bg:transparent; --btn-border: var(--border-primary); }
.btn-theme--sm     { --btn-py:.375rem; --btn-px:.875rem; --btn-icon-size:.875rem; font-size:.9375rem; }
.btn-theme--lg     { --btn-py:.75rem;  --btn-px:1.75rem; --btn-icon-size:1.125rem; font-size:1.0625rem; min-width:200px; justify-content:space-between; }
.btn-theme--icon-only{ --btn-px:1.5rem; --btn-py:.75rem; justify-content:center; }

/* Readmore compacto: largura final = ícone + gap + "Read more" (9ch) */
.btn-theme--readmore{
  --rm-ch: 9ch;     /* largura exata do texto "Read more" */
  --rm-shift: 0px;  /* leve slide à esquerda no hover */

  position: relative;
  overflow: hidden;
  white-space: nowrap;

  /* não vamos aumentar padding para abrir espaço */
  transition:
    filter .15s ease,
    transform .28s ease;
}

/* como você usa icon-only, garantimos alinhamento à esquerda quando expandir */
.btn-theme--readmore.btn-theme--icon-only{
  justify-content: flex-start;
}

/* texto que aparece antes do ícone (::after vem do seu .btn-theme--icon) */
.btn-theme--readmore::before{
  content: "read more";
  opacity: 0;
  max-width: 0;               /* fechado = zero */
  margin-left: 0;             /* sem gap quando fechado */
  transform: translateX(6px); /* escondidinho atrás do ícone */
  overflow: hidden;
  display: inline-block;
  font-weight: 100;

  transition:
    max-width .88s ease,
    opacity .82s ease .06s,
    margin-left .88s ease,
    transform .88s ease;
}

/* hover: só revelamos o texto e damos um slide sutil à esquerda */
@media (hover: hover){
  .btn-theme--readmore:hover,
  .btn-theme--readmore:focus-visible{
    transform: translateX(calc(-1 * var(--rm-shift)));
  }

  .btn-theme--readmore:hover::before,
  .btn-theme--readmore:focus-visible::before{
    opacity: 1;
    max-width: var(--rm-ch);  /* abre exatamente 9ch */
    margin-left: var(--btn-gap); /* aplica o gap entre texto e ícone */
    transform: translateX(0);
  }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .btn-theme--readmore,
  .btn-theme--readmore::before{ transition: none; }
}


/* =================================================================
   CTA BANNER (texturas)
   ================================================================= */
.banner-cta{
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface-banner);
}

/* =================================================================
   CTA CARD
   ================================================================= */
/* CTA banner — 4 texturas, uma por lado/canto */
.banner-cta{
  background-color: var(--surface-banner, #1D1C1C);
  background-image:
    url("_assets/img/texture.png"),   /* topo-esquerda */
    url("_assets/img/texture.png");   /* baixo-direita */
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 560px auto, 560px auto, 560px auto, 560px auto;
  background-position:
    left  -140px top   -60px, /* ajuste fino conforme a arte */
    right -140px top   -40px,
    left  -160px bottom -40px,
    right -160px bottom -60px;
  overflow: hidden;
}

/* Responsivo: simplifica p/ 2 instâncias e reduz tamanho */
@media (max-width: 1199.98px){
  .banner-cta{
    background-size: 460px auto, 460px auto, 460px auto, 460px auto;
    background-position:
      left  -120px top   -40px,
      right -120px bottom -40px,
      left  -9999px top  0,    /* “esconde” as extras sem remover */
      right -9999px top  0;
  }
}

/* Mobile: uma textura central discreta (ou ajuste como preferir) */
@media (max-width: 767.98px) {
  .banner-cta {
    position: relative;
    overflow: hidden; /* só por segurança */
    background-image: none!important;
    background-repeat: none!important;
    padding: 0 80px;
  }

  .banner-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../_assets/img/texture.png');
    background-repeat: no-repeat;
    background-size: 520px auto;
    background-position: center;
    opacity: 0.3;          /* 👈 transparência só da textura */
    pointer-events: none;  /* não atrapalhar cliques no botão */
    z-index: 0;
  }

  .banner-cta > .container {
    position: relative;
    z-index: 1; /* conteúdo por cima da textura */
  }
}

/* =================================================================
   CTA CARD
   ================================================================= */
.cta-card{
  display:block;
  position:relative;
  padding: 30px 40px 20px;
  margin-top: 40px;
  background: var(--brand-primary);
  font-family: var(--font-primary);
  color: var(--gray-500);
  border: var(--bd) solid var(--border-primary);
  border-radius: var(--radius-organic);
  text-decoration:none;
}
.cta-card::after{
  content:"";
  position:absolute; top: 34px; right: 30px;
  width: 16px; height: 16px;
  background: var(--icon-arrow) center/contain no-repeat;
}
.cta-card p{ color: var(--gray-400); }


/* =================================================================
   SEÇÕES / BLOCOS
   ================================================================= */

/* Box padrão com radius orgânico */
.box-organic{ border-radius: var(--radius-organic); }



/* Footer */
footer{ background: var(--surface-footer); }
footer a, footer p, footer li{ color: var(--gray-300); text-decoration: none; margin: 20px 0}
footer h6{ color: var(--gray-100); }

/* Footer: lista de contato com ícones via mask */
.contact-list{
  list-style:none; margin:0; padding:0; color:#EBEBEB;
}
.contact-list li{
  display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;
}
.contact-list li::before{
  content:""; width:20px; height:20px; background-color:currentColor;
  -webkit-mask-image: var(--icon); mask-image: var(--icon);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}
.contact-list .is-phone::before   { --icon: url("_assets/img/icons/phone.svg"); }
.contact-list .is-location::before{ --icon: url("_assets/img/icons/map.svg"); }
.contact-list .is-mail::before    { --icon: url("_assets/img/icons/mail.svg"); }

/* =================================================================
   HEADER / NAV
   ================================================================= */
.nav-theme{
  --glass-bg: 255,255,255;
  --glass-alpha: .50;
  --glass-blur: 14px;
  --glass-sat: 120%;
  --glass-stroke: rgba(255,255,255,.10);

  background-color: rgba(var(--glass-bg), var(--glass-alpha));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-stroke);
  box-shadow: 0 6px 20px rgba(0,0,0,.02);
}
#mainNav .nav-link:not(.btn-theme){
  color: var(--gray-800);
  font-weight: var(--menu-weight);
  font-size: .9rem;
}
#mainNav .nav-link.btn-theme.btn-theme--sm{
  --btn-py: 0rem;
  --btn-px: 0rem;
}
@media (min-width: 992px){
  .nav-theme{ --bs-navbar-nav-link-padding-x: 16px; }
}
@media (max-width: 767.98px){
  #mainNav .nav-link:not(.btn-theme){ 
    padding:20px 16px; 
    margin-top:12px;
    border-top:var(--bd) solid var(--border-primary); 
  }
  .nav-theme{ --glass-alpha: .80;}


}
/* Sub-linha fixa sob o item atual do menu */
:root{
  --nav-active: #2effb8;   /* verde */
  --nav-pill-w: 22px;       /* largura fixa */
  --nav-pill-h: 4px;        /* altura fixa */
  --nav-pill-radius: 9999px;
  --nav-pill-offset: -4px;  /* quanto “sobe” em relação à base do link */
}

.nav-theme .navbar-nav .nav-link{
  position: relative;
  padding-bottom: calc(var(--nav-pill-h) + .5rem); /* espaço para a barrinha */
}

/* Mostrar SOMENTE no item atual (sem animação) */
.nav-theme .navbar-nav li.current-menu-item > a.nav-link::after,
.nav-theme .navbar-nav li.current_page_item > a.nav-link::after,
.nav-theme .navbar-nav li.current-menu-ancestor > a.nav-link::after,
.nav-theme .navbar-nav li.current_page_ancestor > a.nav-link::after,
.nav-theme .navbar-nav .nav-link[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--nav-pill-offset);
  width: var(--nav-pill-w);
  height: var(--nav-pill-h);
  background: var(--nav-active);
  border-radius: var(--nav-pill-radius);
  transform: translateX(-50%); /* centraliza sob o texto */
}

/* Nenhuma animação/hover */
.nav-theme .navbar-nav .nav-link::after{
  content: none;
}

/* =================================================================
   Home Hero
   ================================================================= */
.hero{ overflow: hidden; position: relative; height:100vh }
.img-texture{ position: absolute; right: 0px; top: 0; z-index: -1; pointer-events: none; }
.img-hero   { position: absolute; right: 2%;  bottom: 0; }
.img-dot    { position: absolute; right: 50%; bottom: 10%; z-index: 2; pointer-events: none; }

/* marca-texto animada */
.mark-swipe{
  --mark-bg: var(--brand-primary, #2EFFB8);
  --mark-h: .40em; --mark-offset: -.10em;
  position: relative; display: inline-block; z-index: 0; padding-inline: .08em;
}
.mark-swipe::after{
  content:""; position:absolute; left:-.18em; right:-.18em;
  bottom: calc(var(--mark-offset) * -1); height: var(--mark-h);
  background: var(--mark-bg); border-radius: 999px; z-index: -1;
  transform: scaleX(0); transform-origin: left center;
  animation: mark-swipe-in .9s cubic-bezier(.2,.9,.3,1) .35s forwards;
  will-change: transform;
}
@keyframes mark-swipe-in{ to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .mark-swipe::after{ animation: none; transform: scaleX(1); }
}

/* HERO — WIDE */
@media (min-width: 1600px){
  .hero .hero-title{ font-size: clamp(3.5rem, 3vw + 1rem, 5rem); }
  .hero .img-hero{ width: clamp(560px, 38vw, 760px); right: 6%; bottom: 0; }
  .hero .img-texture{ width: clamp(640px, 45vw, 920px); }
  .hero .img-dot{ width: clamp(120px, 8vw, 200px); right: 50%; bottom: 12%; }
}
@media (min-width: 1900px){
  .hero .hero-title{ font-size: clamp(4rem, 3.6vw, 6rem); }
  .hero .img-hero{ width: clamp(640px, 60vw, 900px); right: 6%; bottom: 0; }
  .hero .img-texture{ width: clamp(740px, 48vw, 1100px); }
  .hero .img-dot{ width: clamp(140px, 10vw, 240px); }
}

/* HERO — MOBILE */
@media (max-width: 991.98px){
  .hero{ overflow-x: clip; padding-top:100px; height: auto}
  .hero .row{ position: relative; }
  .hero .h-100vh{ height: auto !important; min-height: 92vw; }
  .hero .hero-title{ font-size: 1.8em; line-height: 1.08; margin-bottom: 12px; }
  .hero .col-lg-7 > .mb-60, .hero .col-lg-7 p{ max-width: 52vw; margin-bottom: 30px; }
  .img-hero{ position: absolute !important; right: -12vw; bottom:0vw; width: 75vw; height:auto; max-width:none; }
  .img-texture{ position: absolute !important; right: -70vw; top: 25vw; width: 132vw; max-height: 56vh; object-fit: contain; z-index:-1; opacity:.95; pointer-events:none; }
  .img-dot{ position: absolute !important; right: 52vw; bottom: 3vw; width: 20vw; max-width: 140px; height: auto; z-index:2; pointer-events:none; }
  .hero .btn-theme.btn-theme--lg{ padding: .9rem 1.5rem; font-size: 1rem; }
}

/* =================================================================
   TESTIMONIALS / PARTNERS
   ================================================================= */
.ts-quote{ text-align: center; }
@media (min-width: 768px){ .ts-quote{ text-align: left; } }

.ts-decor-img{
  position: absolute; right: 59px; bottom: 24px;
  width: 148px; height: 59px;
}

@media (max-width: 767.98px){
  .ts-decor-img{
    right: -11px;
    bottom: 4px;
  }
}

/* Carousel */
#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next{
  background: transparent; width: auto; opacity: 1;
  top: 40%; bottom: auto; transform: translateY(-50%); padding: 0;
}
#testimonialCarousel .ts-control{ width: 48px; height: 48px; display:flex; align-items:center; justify-content:center; }
.carousel-control-prev{ left: 0; transform: rotate(180deg); }
#testimonialCarousel .carousel-control-next{ right: 0; }
#testimonialCarousel .ts-icon{ width: 48x; height: 48px; display:block; pointer-events:none; }
#testimonialCarousel .carousel-control-prev .ts-icon{ transform: scaleX(-1); }

@media (max-width: 767.98px){
  .ts-card{ text-align: center; }
  .ts-quote{ text-align: center; }
}

/* Partners */
.partners .partner-logos{ list-style:none; margin:0; padding:0; }
.partners .partner-logos__item{ list-style:none; margin:0; padding:0; }
.partners .partner-logos__item::marker{ content: none; }

/* Stars (rating) */
.stars{
  --star-size: 18px; --star-gap: .375rem; --star-color: #FFD36E; --star-off-opacity: .35;
  display:inline-flex; align-items:center; gap:var(--star-gap);
  list-style:none; margin:0; padding:0; color: var(--star-color);
}
.stars .star{ inline-size: var(--star-size); block-size: var(--star-size); position: relative; }
.stars .star::before{
  content:""; display:block; inline-size:100%; block-size:100%;
  background: currentColor;
  -webkit-mask-image: var(--icon-star); mask-image: var(--icon-star);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}
.stars .is-off{ opacity: var(--star-off-opacity); }



/* =================================================================
   Pricing
   ================================================================= */
.pricing-nav .nav-link{
  border: 2px solid var(--border-primary);
  margin-bottom: .5rem; border-radius: .5rem;
  text-align: left; font-weight: 500; padding: .6rem .8rem; background: #fff;
  border-radius: 100px;
  color:var(--gray-300) ;
  padding:20px 40px ;
}
.pricing-nav .nav-link.active{
  color:#fff; background: var(--surface-primary); color:var(--gray-500););
}
.plan-card{ border: 2px solid var(--border-primary); border-radius:var(--radius-organic); padding:40px!important }
.plan-card .plan-price{ font-weight: 700; }
.plan-price {color: var(--gray-300);}
@media (max-width: 991.98px){
  .pricing-nav{ flex-direction: row !important; overflow-x:auto; white-space:nowrap; gap:.5rem; }
  .pricing-nav .nav-link{ display:inline-block; margin-bottom:0; }
}

/* =================================================================
   Google Map
   ================================================================= */
.map-section{ position: relative; overflow: hidden; }
.bt-map-wrap{ position: relative; width:100%; min-height: clamp(360px, 40vh, 720px); }
.bt-map-canvas{ position: relative; width:100%; height: clamp(360px, 60vh, 720px); }
.bt-map-iframe{ display:block; width:100%; height: clamp(360px, 60vh, 720px); border:0; }
.bt-map-placeholder{ width:100%; height: clamp(320px, 50vh, 640px); background:#f4f2ef; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
@media (max-width: 575.98px){
  .bt-map-wrap, .bt-map-canvas, .bt-map-iframe, .bt-map-placeholder{ min-height:360px; height:360px; }
}
.bt-map-iframe--mono{
  filter: grayscale(100%) contrast(1.05) brightness(0.98);
  -webkit-filter: grayscale(100%) contrast(1.05) brightness(0.98);
}


/* =================================================================
   Cases
   ================================================================= */
.case-row .case-media img{ display:block; border-radius: 16px; }

/* “cartão” de texto do case */
.case-copy{ background:#fff; }

/* Métricas em linha */
.metrics-inline{
  display:flex;
  flex-wrap:wrap;         /* mantém numa linha (quebra se MUITO estreito) */
  gap:16px;
  align-items:baseline;
  overflow:hidden;
}
.metric{
  display: inline-flex;
    border: 2px solid var(--border-primary);
    margin:4px 4px 4px 0;
    width: fit-content;
    padding: 10px;
    border-radius: 60px;
    background: var(--surface-primary); }
}


/* Mobile: empilha imagem acima do texto (ordem padrão já faz isso) */
@media (max-width: 991.98px){
  .case-row{ margin-bottom: 2rem; }
}

    

/* ajustes genéricos do accordion padrão (se usados fora do faq-plain) */
.accordion-item{ border:0px; margin:20px 0; border-radius: 20px; }
.accordion-button{ border-radius: 20px; }

/* =================================================================
   Faq
   ================================================================= */
.faq-plain{
  --faq-pad-y: 26px; --faq-pad-x: 30px; --faq-gap: 16px;
  --faq-border: #F3EFE9; --faq-border-w: 2px;
  --faq-bg: #FBF8F4; --faq-bg-active: #FFF;
  --faq-q: var(--gray-400); --faq-a: var(--gray-400);
  --faq-pill: 9999px; --faq-ans-radius: 8px;
  --faq-icon-size: 12px;
  width: 60%; max-width: 960px; margin-inline: auto;
}
.faq-plain .accordion-item,
.faq-plain .accordion-header,
.faq-plain .accordion-button,
.faq-plain .accordion-collapse,
.faq-plain .accordion-body{ border:0; background:none; box-shadow:none; }
.faq-plain .accordion-item{ margin-bottom: var(--faq-gap); }
.faq-plain .accordion-header{ margin:0; }
.faq-plain .accordion-button{
  display:block; width:100%; position:relative; cursor:pointer;
  padding: var(--faq-pad-y) var(--faq-pad-x);
  border: var(--faq-border-w) solid var(--faq-border);
  border-radius: var(--faq-pill) !important;
  background: var(--faq-bg); color: var(--faq-q); line-height: 1.4; font-weight: 500;
}
.faq-plain .accordion-button:not(.collapsed){ background: var(--faq-bg-active); }
.faq-plain .accordion-button::after{
  content:""; position:absolute; right: var(--faq-pad-x); top:50%;
  width: var(--faq-icon-size); height: var(--faq-icon-size);
  transform: translateY(-50%) rotate(135deg);
  transition: transform .2s ease;
  background-image: var(--icon-arrow, url("_assets/img/icons/arrow.svg"));
  background-repeat:no-repeat; background-size:contain; background-position:center;
}
.faq-plain .accordion-button:not(.collapsed)::after{ transform: translateY(-50%) rotate(-45deg); }
.faq-plain .accordion-body{
  margin: 8px 24px;
  padding: var(--faq-pad-y) var(--faq-pad-x);
  color: var(--faq-a);
  background: var(--faq-bg-active);
  border: var(--faq-border-w) solid var(--faq-border);
  border-radius: var(--faq-ans-radius);
}
.faq-plain .accordion-button:focus-visible{ outline:2px solid rgba(0,0,0,.15); outline-offset:2px; }
@media (max-width: 992px){ .faq-plain{ width:100%; margin-inline:auto; } }
@media (prefers-reduced-motion: reduce){ .faq-plain .accordion-button::after{ transition:none; } }


/* =================================================================
   Who we Serve
   ================================================================= */
.who-card{
  background:#fff;
  border: var(--bd, 2px) solid var(--border-primary, #F3EFE9);
  border-radius:var(--radius-organic);
  color: inherit;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
  padding: 60px!important;
}
.who-card:hover{
  filter: brightness(.98);
}
.who-card h3{ color: var(--gray-500); font-size: 1.1rem; }
.who-card p{ color: var(--gray-400); }

/* Who We Serve wrapper */
.box-wws{ min-height: 644px; }
.box-wws .box-organic{ border: var(--bd) solid var(--border-secondary); }

/* =================================================================
   PAGE HEADER
   ================================================================= */
.page-header{ padding: 64px 0 0; }
.page-header__img{
  display:block; width:100%;
  height: clamp(220px, 40vh, 420px);
  object-fit: cover;
}

/* ===== Page Header com bg opcional ===== */
.page-header{ padding: 140px 0 60px 0; position: relative; }

/* Quando tiver imagem, usa como background do próprio header */
.page-header--bg{
  /* a URL vem inline via --ph-bg no style do section */
  background: var(--ph-bg) center/cover no-repeat;
  /* overlay para contraste do texto */
  position: relative;
  isolation: isolate;
}
.page-header--bg::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index: 0;
}
/* garante que o conteúdo fique acima do overlay */
.page-header--bg > .container{ position: relative; z-index: 1; }

/* ajuste responsivo do padding, opcional */
@media (max-width: 991.98px){
  .page-header{ padding: 80px 0 34px 0; }
}

/* Breadcrumb básico do header */
.bt-bc{ margin: 0 0 12px; font-size: .95rem; }
.bt-bc__list{ list-style:none; margin:0; padding:0; display:inline-flex; gap:.5rem; flex-wrap:wrap; }
.bt-bc__item{ color: var(--gray-400); }
.bt-bc__item a{ color: var(--gray-500); text-decoration:none; border-bottom:1px solid transparent; }
.bt-bc__item a:hover{ border-bottom-color: currentColor; }
.bt-bc__item.is-current{ color: var(--gray-500); font-weight:600; }

/* versão clara quando há bg imagem */
.bt-bc--light .bt-bc__item{ color: var(--gray-50); }
.bt-bc--light .bt-bc__item a{ color: var(--gray-50); }
.bt-bc--light .bt-bc__item.is-current{ color:#fff; }






/* ===== Card Dark (overlay do Pricing) ===== */
.position-relative > .card-dark{
  position: absolute;
  z-index: 2;
  left: 40%;
  bottom: 40%;
  width:400px;
  padding: 40px;

  background: var(--gray-800);                 
  border-radius: var(--radius-organic);                              
}

/* Tipografia clara dentro do card (mantém suas utilitárias txt-light) */
.card-dark h3{ color: var(--gray-50) !important; margin-bottom: 12px; }
.card-dark p { color: var(--gray-100) !important; }

/* espaçamento do bloco das estrelas já existentes */
.card-dark .stars{ margin: 0 0 6px 0; }

/* Responsivo: no mobile o card vira bloco abaixo da imagem */
@media (max-width: 991.98px){
  .position-relative > .card-dark{
    position: static;
    inset: auto;
    max-width: 100%;
    margin-top:40px;
    margin-bottom: 60px;
  }
}

.pb-0 { padding-bottom:0!important }