/* Butler – self-hosted */
@font-face{
  font-family: 'Butler';
  src: url('../fonts/butler_ultra_light-webfont.woff2') format('woff2'),
       url('../fonts/butler_ultra_light-webfont.woff') format('woff');
  font-weight: 200; /* Ultra Light */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Butler';
  src: url('../fonts/butler_light-webfont.woff2') format('woff2'),
       url('../fonts/butler_light-webfont.woff') format('woff');
  font-weight: 300; /* Light */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Butler';
  src: url('../fonts/butler_regular-webfont.woff2') format('woff2'),
       url('../fonts/butler_regular-webfont.woff') format('woff');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Butler';
  src: url('../fonts/butler_medium-webfont.woff2') format('woff2'),
       url('../fonts/butler_medium-webfont.woff') format('woff');
  font-weight: 500; /* Medium */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Butler';
  src: url('../fonts/butler_bold-webfont.woff2') format('woff2'),
       url('../fonts/butler_bold-webfont.woff') format('woff');
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Butler';
  src: url('../fonts/butler_extrabold-webfont.woff2') format('woff2'),
       url('../fonts/butler_extrabold-webfont.woff') format('woff');
  font-weight: 800; /* ExtraBold */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Butler';
  src: url('../fonts/butler_black-webfont.woff2') format('woff2'),
       url('../fonts/butler_black-webfont.woff') format('woff');
  font-weight: 900; /* Black */
  font-style: normal;
  font-display: swap;
}

/* =================================================================
   TOKENS / FOUNDATIONS
   ================================================================= */
:root{
  /* Fonts */

  --font-primary: "Butler", serif;
  --font-secondary: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, "Noto Sans", sans-serif;                
  --heading-weight: 300;
  --display-weight: 100;
  --menu-weight:    100;
  --body-weight:    300;

  /* Bootstrap vars */
  --bs-font-sans-serif:  var(--font-secondary);
  --bs-body-font-family: var(--font-secondary);
  --bs-body-font-weight: var(--body-weight);


/* Icons */

  --icon-arrow: url("../img/icons/icon-arrow-long-right.svg");
  --icon-star:  url("../img/icons/star.svg");



/* Colors */
  

  /* Bootstrap vars */
  --bs-body-color:       var(--gray-300);
  --bs-link-color-rgb:   var(--blue-300);

  /* Colors */
  --light:#fff;
  --dark:#000;

  --gray-50: #A0A7AA;
  --gray-100: #EFF2F4;
  --gray-300: #767676;
  --gray-500: #787F81;
  
  --blue-20: #F7FBFD;
  --blue-50: #E6F1F8;
  --blue-200: #6DCEF5;
  --blue-300: #5AA1D0;
  --blue-700: #0973B9;
  --blue-900:#053F66;

  --gradient-blue: linear-gradient(91deg, #6DCEF5 2.77%, #0973B9 77.47%);


  --orange-600: #BA7109;

  --whatsapp: #25D366;

  /*Tokens Colors*/

	  /* Brand */
	  --brand-primary:var(--blue-900); 
	  --brand-secondary:var(--blue-200);
    --brand-tertiary:var(--blue-300);
    --hightlight: var(--orange-600);

	  /* Surfaces */
	  --surface-primary:var(--light);
	  --surface-banner:  #1D1C1C;
	  --surface-footer:var(--blue-700);
	  --surface-box-primary:var(--blue-20);
    --surface-box-secondary:var(--blue-50);

	  /* Border */
	  --border-primary:var(--blue-50);
	  --border-secondary: var(--gray-300);

	  /* Font */
	  --font-size-sm:1rem; /*16px*/
	  --font-size-m:1.2rem; 
	  --font-size-l:1.4rem;
	  --font-size-xl:2rem;
	  --font-size-xxl:2.4rem;
    --font-size-xxxl:4rem;

	  /* Padding */
  	--p-s:30px;
  	--p-m:60px;


/* Borders / Radius */

	--bd: 2px;
	--radius-md: 40px;
  --radius-s: 20px;
	--pill:999px;

/* btn */
  --btn-bg: transparent;
  --btn-icon: var(--icon-arrow);
  --btn-icon-size: 1rem;

}
/* =================================================================
   GLOBAL TYPE & BODY
   ================================================================= */
body{
  font-family: var(--font-secondary);
  font-weight: var(--body-weight)!important;
  color: var(--gray-50);
  font-size: var(--font-size-sm);
}

  
.entry-content { 
  line-height:30px
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-primary);
  font-weight:300 !important;
  color: var(--brand-primary)!important;
  
}

h2{
  font-size: var(--font-size-xxl);
}
h4{
  font-size: var(--font-size-l);
}

.badge-page {
  font-family: var(--font-secondary);
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 300;
  background: var(--surface-box-secondary);
  color: var(--brand-tertiary);
  display: inline;

}

a{
  
  color: var(--blue-300);
}

/* =================================================================
   BUTTONS
   ================================================================= */
.btn-theme{
  display:inline-flex;
  gap:var(--btn-gap);
  border-radius:var(--pill);
  background:var(--gradient-blue);
  color:var(--light); 
  text-decoration:none;
  border: var(--bd) solid var(--blue-200);
  align-items:center;
  padding:var(--btn-py) var(--btn-px);
}

.btn-theme--lg{ 
	--btn-py:0.6rem;
	--btn-px:1.75rem;
	--btn-icon-size:1.125rem;
	font-size:var(--font-size-sm); 
	min-width:250px;
  	justify-content: space-between;
}

.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;
}

.read-more-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family: var(--font-primary);
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 400;              /* ajuste se preferir */
}

.read-more-link::after{
  content:"";
  inline-size: var(--btn-icon-size);
  block-size: var(--btn-icon-size);
  background: var(--btn-icon) center/contain no-repeat;
  transition: transform .2s ease;
  margin: 4px 0 0 12px;
}


/* =================================================================
   HERO
   ================================================================= */

@media (max-width: 767.98px) {

  .hero-photo {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .hero-orbit {
    width: 100% !important;
    margin: 0 auto !important;
  }
}
/* =================================================================
   HERO
   ================================================================= */

.hero-1 { 
  font-size: var(--font-size-xl);
  color: var(--blue-200)!important;
}
.hero-2 { 
  font-size: var(--font-size-xxxl);
  color: var(--brand-primary)!important;
}

/* ===========================
   HERO FAMILY + ONDAS
   =========================== */

.hero-orbit {
  position: relative;
  width: min(520px, 80vw);  /* responsivo */
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .hero-orbit {
  width: 80%!important;} 
}

/* Foto central */
.hero-photo {
  position: relative;
  z-index: 2;
  width: 115%;
  height: 115%;
  object-fit: cover;
  display: block;
  margin-left: -10%;

}
.hero-photo-2 {
  position: relative;
  z-index: 2;
  width: 80%;
  height:auto;
  margin: 10%;
}

.hero-photo-3 {
  position: relative;
  z-index: 2;
  width: 100%;
  height:auto;
  margin: 0%;
}



/* Base das ondas */
.orbit {
  position: absolute;
  inset: -5%;               /* um pouco maior que a foto */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 1;
  pointer-events: none;
  transform-origin: center center;
  z-index: -1;
}

/* Camada 1 */
.orbit-1 {
  background-image: url('../img/orbit-1.svg');
}

/* Camada 2 */
.orbit-2 {
  background-image: url('../img/orbit-2.svg');
}

/* Camada 3 */
.orbit-3 {
  background-image: url('../img/orbit-3.svg');
}

@media (max-width: 992px) {
  .hero-1 {margin-top:150px ;}
  .mb-40 { margin-bottom:20px!important;}
  .py-8 { padding: 2rem 0 2rem 0 !important}
  .mb-120 {margin:0px!important }
}

/* =================================================================
   Box
   ================================================================= */

.box-primary{
	border: var(--bd) solid var(--border-primary);
	background: var(--surface-box-primary);
	border-radius: var(--radius-md);
	padding: var(--p-s) var(--p-s);
}

.box-secondary{
  border: var(--bd) solid var(--border-primary);
  background: var(--surface-box-primary);
  border-radius: var(--radius-s);
}


/* =================================================================
   Sections
   ================================================================= */

/* =================================================================
   Who we are
   ================================================================= */
/* =========================================================
   WHO WE ARE  (layout 2 | 1+foto+1 | 2)
   ========================================================= */

/* Palco geral: mantém espaço vertical para a foto absoluta */
.who-rows .who-stage{
  position: relative;
  padding-block: 96px;                 /* evita corte da foto no desktop */
}

/* espaçamento entre as linhas */
.who-rows .who-row{
  margin-bottom: 36px;
}

/* ------------------ FOTO CENTRAL ------------------ */
/* menor, sem sombra/background/aro; absoluta no desktop */
.who-rows .who-photo-wrap{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 0;                          /* fica atrás do conteúdo */
  inline-size: min(28vw, 420px);       /* ajuste fino do tamanho da "bolha" */
  aspect-ratio: 1 / 1;
  background: none !important;
  box-shadow: none !important;
}
.who-rows .who-photo{
  width: 100%;
  height:auto;
  display: block;
}

/* ------------------ ITENS (ÍCONE + TÍTULO + TEXTO) ------------------ */

/* Ícones limpos: sem bg/borda/sombra, só a imagem */
.who-rows .icon-badge{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  display: inline-block;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  margin-bottom: 10px;                 /* respiro antes do título */
}
.who-rows .icon-badge__icon{
  width: 56px;                         /* ajuste 48–64px conforme preferir */
  height: 56px;
  object-fit: contain;
  display: block;
}



/* leve curva das linhas 1 e 3 para “abraçar” a foto */
@media (min-width: 992px){
  .who-rows .who-row-1 .who-feature{ transform: translateY(14px); }
  .who-rows .who-row-3 .who-feature{ transform: translateY(-10px); }
}

/* ------------------ RESPONSIVO ------------------ */
/* No mobile a foto entra no fluxo e reduz; respiros menores */
@media (max-width: 991.98px){
  .who-rows .who-stage{ padding-block: 0; }

  .who-rows .who-photo-wrap{
    position: static;
    transform: none;
    inline-size: min(60vw, 360px);
    margin: 8px auto 24px;
  }

  .who-rows .who-row{ margin-bottom: 28px; }
  .who-rows .icon-badge__icon{ width: 48px; height: 48px; }
}


/* =================================================================
   Blog
   ================================================================= */


.img-blog{
  border-radius: var(--radius-s)  var(--radius-s) 0 0;
}

.date-badge {
  left: 20px; 
  bottom:-50px;
  color: var(--brand-tertiary);
  font-family: var(--font-primary);
  font-weight: 600;
  text-align: center;
  padding: 5px 8px;
}
.date-badge .day {
  font-size: var(--font-size-l);
}

.date-badge .month {
  font-size: var(--font-size-m);
}


/* =================================================================
   Method
   ================================================================= */
.number {
  background: var(--blue-300);
  color: var(--light);
  position: absolute;
  left: -30px;
  padding: 10px 12px;
  border-radius: var(--pill);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-m);
  border: 2px solid var(--light);
}

.steps{
  position: relative;
  min-height: 140px;            /* garanta altura mínima (ajuste) */
}

.steps::before{
  content: "";
  position: absolute;
  left: 3%;                     /* recuo das bordas (ajuste) */
  right: 3%;
  top: 60%;
  transform: translateY(-50%);
  height: 2px;                  /* espessura visual */
  border-radius: 2px;
  z-index: 0;

  /* pontilhado branco/azulado, translúcido */
  background-image: repeating-linear-gradient(
    to right,
    rgba(255,255,255,.9) 0 12px, /* traço */
    rgba(255,255,255,0) 12px 26px/* espaço */
  );
}

  /* animação simples e leve */
  .steps .method-step{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .45s ease;
    will-change: opacity, transform;
  }
  .steps .method-step.is-in{
    opacity: 1;
    transform: none;
  }

  /* acessibilidade: sem animação para quem prefere reduzir motion */
  @media (prefers-reduced-motion: reduce){
    .steps .method-step{ opacity:1; transform:none; transition:none; }
  }

/* =================================================================
   Service
   ================================================================= */
/* Cards de serviço */

.service-thumb{ display:block; margin-bottom: 30px; }

.service-mini-ico{ 
    flex: 0 0 auto;
    margin-left: -40px;
    background: #fff;
    padding: 12px;
    margin-top: -65px;
    border-radius: 30px;
  }
.service-mini-ico__img{ width: 38px; height: 38px; object-fit: contain; display:block; }



/* =================================================================
   Advantages
   ================================================================= */

.big-numbers {
  color: var(--hightlight);
  font-size: var(--font-size-xl);
  font-family: var(--font-primary);
  font-weight: 900;
  font-variant-numeric: tabular-nums; 
}


/* =================================================================
   Faq
   ================================================================= */


/* ===== FAQ accordion - estilo base ===== */
.faq-pill .accordion-button.faq-btn{
  /* estado fechado (colapsado) */
  background: transparent;
  color: var(--text-primary, #0b2a3a);
  border: var(--bd,1px) solid var(--border-primary, #dbe6f2);
  border-radius: var(--radius-md, 16px);
  padding: var(--p-s, 0.9rem) var(--p-s, 1.1rem);
  box-shadow: none;
}

/* remove qualquer override anterior que escondia a seta */
.faq-pill .accordion-button.faq-btn::after{
  display: block;           /* volta a seta padrão do Bootstrap */
}

/* não precisamos de um ícone extra; esconda o span auxiliar, se existir */
.faq-pill .faq-toggle-ico{ display:none; }

/* foco/hover - mantém o visual contido */
.faq-pill .accordion-button.faq-btn:focus{
  box-shadow: none;
  border-color: var(--border-primary, #dbe6f2);
}

/* ===== Estado ATIVO (aberto) – aplica o visual .box-primary ===== */
.faq-pill .accordion-button.faq-btn:not(.collapsed),
.faq-pill .accordion-button.faq-btn[aria-expanded="true"]{
  border: var(--bd,1px) solid var(--border-primary, #dbe6f2);
  background: var(--surface-box-primary, #eaf3ff);
  border-radius: var(--radius-md, 16px);
  color: var(--text-primary, #0b2a3a);
}

/* corpo da resposta combinando com o box, sem cantos pill */
.faq-pill .accordion-body{
  border-radius: var(--radius-md, 16px);
  padding: var(--p-s, 0.9rem) var(--p-s, 1.1rem);
}

/* zera o estilo default azulado do Bootstrap quando fechado/hover */
.faq-pill .accordion-button.faq-btn.collapsed{
  background: transparent;
}

/* (opcional) borda superior do painel aberto, para “fundir” com o cabeçalho */
.faq-pill .accordion-collapse.show .accordion-body{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


/* =================================================================
   footer
   ================================================================= */
footer.site-footer{ background: var(--surface-footer); }
footer.site-footer a,
footer.site-footer p,
footer.site-footer li{
  color: var(--light);
  text-decoration: none;
  font-size: 12px;
  margin-bottom:20px;
}
footer.site-footer h6{
  color: var(--blue-200)!important;
  font-size: 14px;
  margin: 0 0 .75rem 0;
}

/* Menus do footer */
.footer-menu li + li{ margin-top: .35rem; }

/* Area Coverage: duas colunas */
.footer-two-cols{
  column-count: 2;
  column-gap: 2rem;
}
.footer-two-cols > li{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Lista de contato com ícones via mask */
.contact-list{
  list-style:none; margin:0; padding:0; color:#EBEBEB;
}


/* Redes sociais (ícones via mask com URL inline) */
.footer-social .soc{
  inline-size: 28px;
  block-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
.footer-social .soc:hover{ opacity: 1; transform: translateY(-1px); }
.footer-social .soc::before{
  content: "";
  inline-size: 100%;
  block-size: 100%;
  background-color: currentColor;
  -webkit-mask-image: var(--icon); mask-image: var(--icon); /* vem inline no HTML */
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  display: block;
}

@media (max-width: 767.98px) {
  .footer-two-cols {
    column-count: 1;
  }
  footer.site-footer li {
    word-break: break-word;
  }
  .footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* =================================================================
   Header
   ================================================================= */

/* =========================
   TOPBAR + NAV (fixos)
   ========================= */

/* Alturas (ajuste se quiser) */
:root{
  --topbar-h: 42px;     /* altura da top bar */
  --navbar-h: 72px;     /* altura aproximada da navbar */
}

/* Top bar fixa no topo */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1041; /* acima da navbar */
  background: var(--surface-primary, #f5f7f9);
  border-bottom: 1px solid var(--border-primary, rgba(10,16,29,.08));
  font-size: .875rem;
  line-height: 1;
  padding:4px 0;
  font-family: var(--font-primary);
  color: var(--brand-secondary);
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: var(--topbar-h);
  padding-top: 0;
  padding-bottom: 0;
}
.topbar .call-text{
  color: var(--blue-700, #1c4570);
  font-weight: 500;
  font-family: var(--font-primary, inherit);
}

/* Ícones sociais (círculo com máscara) */
.topbar .soc{
  inline-size: 28px;
  block-size: 28px;
  display:inline-block;
  border-radius:50%;
  background: var(--blue-50);
  position:relative;
  isolation:isolate;
}
.topbar .soc + .soc{ margin-left: .5rem; }
.topbar .soc::before{
  content:"";
  position:absolute; inset:0; margin:auto;
  inline-size:16px; block-size:16px;
  background: var(--blue-600, #1e5e91);
  -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;
}
/* fontes dos SVGs */
.topbar .soc--fb::before  { --icon: url("_assets/img/icons/icon-facebook.svg"); }
.topbar .soc--ig::before  { --icon: url("_assets/img/icons/icon-instagram.svg"); }

/* Empurra a navbar fixa para baixo da topbar (sem “vão”) */
.navbar.fixed-top{
  top:50px;
  z-index: 1040;
}




/* ============ NAV / LOGO / FONT ============ */
.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);
}

/* Logo menor */
.navbar-logo{ height:54px; width:auto; display:block; margin-top:0px }
@media (max-width: 991.98px){
  .navbar-logo{ height:60px; }
  .navbar-toggler {color: var(--blue-300)!important;}
}

/* Menu com font primary */
#mainNav .nav-link:not(.btn-theme){
  color: var(--gray-500);
  font-weight: var(--menu-weight, 500);
  font-size: 1.1rem;
  font-family: var(--font-primary, inherit);
}

/* Espaçamento inter-item em desktop */
@media (min-width: 992px){
  .nav-theme{ --bs-navbar-nav-link-padding-x: 16px; }
}

/* Mobile – itens empilhados com divisória suave */
@media (max-width: 767.98px){
  #mainNav .nav-link:not(.btn-theme){
    padding:16px 16px 0 16px;
    margin-top:16px;
    border-top:var(--bd,1px) solid var(--border-primary, rgba(10,16,29,.08));
  }
  .nav-theme{ --glass-alpha: .80; }
}


@media (min-width: 992px) { 
  


 }


/* ============ Team ============ */


/* Team avatars centralizados */
.team-avatar{
  display:block;             /* deixa de ser inline */
  margin-inline:auto;        /* centraliza horizontalmente */
  width:160px;
  height:160px;
  object-fit:cover;
  object-position:center;    /* garante o foco no centro */
  border-radius:50%;
  box-shadow:none;
}


/* ====== CONTACT FORM – BASE ====== */
.contact-form .wpcf7 {
  --gap: var(--p-m, 16px);
}

.contact-form .form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 768px){
  .contact-form .form-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
.contact-form .span-2{ grid-column: 1 / -1; } /* textarea, botão etc. */

/* Inputs / Select / Textarea (exceto submit) */
.contact-form .wpcf7-form-control:not([type="submit"]){
  display:block;
  width:100%;
  padding: 20px;
  border: var(--bd,1px) solid var(--border-primary, rgba(10,16,29,.12));
  border-radius: var(--radius-md, 14px);
  background: var(--surface-field, #fff);
  color: var(--gray-900, #1a2433);
  line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.contact-form .wpcf7-form-control::placeholder{
  color: var(--gray-500, #94a3b8);
  opacity: .9;
}

.contact-form .wpcf7-form-control:focus{
  outline: none;
  border-color: var(--blue-300, #66a3d2);
  box-shadow: 0 0 0 3px rgba(30,94,145,.15);
}

/* Textarea */
.contact-form textarea.wpcf7-form-control{
  height: 160px;
  resize: vertical;
  width: 100%;
}

/* Select */
.contact-form select.wpcf7-form-control{
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #7c8aa5 50%),
                    linear-gradient(135deg, #7c8aa5 50%, transparent 50%),
                    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 18px) calc(1em + 2px),
                       calc(100% - 13px) calc(1em + 2px),
                       calc(100% - 2.5rem) 0.5rem;
  background-size: 5px 5px, 5px 5px, 1px 2.2rem;
  background-repeat: no-repeat;
}

/* Checkboxes / Radios (linha simples) */
.contact-form .wpcf7-list-item{
  display:flex; align-items:center; gap:.5rem;
}
.contact-form .wpcf7-list-item input{
  inline-size:1.1rem; block-size:1.1rem;
}

/* Mensagens de erro do CF7 */
.contact-form .wpcf7-not-valid{
  border-color: var(--danger-400, #f87171) !important;
  background-color: rgba(248,113,113,.04);
}
.contact-form .wpcf7-not-valid-tip{
  color: var(--danger-600, #dc2626);
  font-size: .825rem;
  margin-top: .35rem;
}

/* Mensagens de status */
.contact-form .wpcf7-response-output{
  margin-top: 1rem;
  border-radius: var(--radius-md, 14px);
  padding: .75rem 1rem;
  border: var(--bd,1px) solid var(--border-primary, rgba(10,16,29,.12));
}
.contact-form .wpcf7-mail-sent-ok{
  border-color: #22c55e; color:#14532d; background: #ecfdf5;
}
.contact-form .wpcf7-validation-errors,
.contact-form .wpcf7-acceptance-missing{
  border-color:#f59e0b; color:#7c2d12; background:#fffbeb;
}

/* ====== BOTÃO ENVIAR ======
   Opção A (recomendada): adicione classes do seu botão no shortcode do CF7 (ver abaixo).
   Opção B (fallback): estilizar .wpcf7-submit para parecer com .btn-theme.
*/
.contact-form .wpcf7-submit{
  display:inline-flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--btn-gap, .75rem);
  min-width: 250px;
  padding: var(--btn-py, .6rem) var(--btn-px, 1.75rem);
  border-radius: var(--pill, 999px);
  border: var(--bd,1px) solid var(--blue-200, #a3c4e3);
  background: var(--gradient-blue, linear-gradient(90deg,#9bd4f4,#2867a6));
  color: var(--light, #fff);
  cursor: pointer;
  font-size: var(--font-size-sm, 1rem);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.contact-form .wpcf7-submit::after{
  content:"";
  inline-size: var(--btn-icon-size, 1.125rem);
  block-size: var(--btn-icon-size, 1.125rem);
  background: var(--btn-icon, url("/_assets/img/icons/arrow-right.svg")) center/contain no-repeat;
}
.contact-form .wpcf7-submit:hover{ filter: brightness(1.02); }
.contact-form .wpcf7-submit:active{ transform: translateY(1px); }


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

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


/* 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; }

.case-pill {
  color: var(--brand-primary);
        font-size: var(--font-size-sm);
        font-weight: 300;
        background: var(--surface-box-secondary);
        color: var(--brand-tertiary);
        display: inline;
  position: absolute;
  bottom: 10px;
  left: 30px;
  border-radius: 30px;
  padding: 4px 20px;
}

/* =================================================================
   Cases – Before / After (carousel)
   ================================================================= */

/* container da imagem */
.case-thumb{
  position: relative;
  width: 100%;
  height: 320px;                         /* altura fixa desktop */
  border-radius: 16px;                   /* ou var(--radius-s) */
  overflow: hidden;
  background: var(--surface-box-primary, #f2f6fb);
}

/* imagem preenchendo todo o container */
.case-thumb__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* mobile: um pouco menor pra não ficar gigante */
@media (max-width: 767.98px){
  .case-thumb{
    height: 220px;
  }
}

/* selo Before / After por cima da imagem */
.case-pill {
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 300;
  background: var(--surface-box-secondary);
  color: var(--brand-tertiary);
  display: inline;
  position: absolute;
  bottom: 10px;
  left: 30px;
  border-radius: 30px;
  padding: 4px 20px;
  z-index: 2;                           /* garante que fica acima da imagem */
}





/* ===========================
   BACKGROUND BUBBLES (GERAL)
   =========================== */

.bg-bubble {
  position: absolute;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  /* sem animation aqui, o JS cuida do transform */
}

@media (max-width: 767.98px){
  .bg-bubble {display: none!important}
}

.relatives{ position:relative!important; overflow: hidden;}

/* imagens */
.bg-bubble-1 { background-image: url('../img/bolha1.png'); height: auto; width:191px }
.bg-bubble-2 { background-image: url('../img/bolha2.png'); height: auto; width:269px}
.bg-bubble-3 { background-image: url('../img/bolha3.png'); height: auto; width:448px}



.hero .bg-bubble-1{ top: 5%; left: 30%; }
.hero .bg-bubble-2{ top: 20%; left: 0%; }
.hero .bg-bubble-3{ top: 40%; left:20%; }

.services-bubble-1{ top: 15%; left: 5%; }
.services-bubble-2{ top: 20%; right: 0%; }
.services-bubble-3{ top: 60%; left:0%; }

.who-bubble-1{ top: 25%; left: 15%; }
.who-bubble-2{ top: 60%; right: 30%; }
.who-bubble-3{ top: 20%; right:-20%; }

.blog-bubble-1{ top: 65%; left: 0%; }
.blog-bubble-2{ top: 60%; right: 0%; z-index:-1 }
.blog-bubble-3{ top: 0%; left:10%; z-index:-1 }


/* ===========================
   WHATSAPP FLOAT BUTTON
   =========================== */

.whatsapp-float{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1050;
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-secondary, system-ui);
}

.whatsapp-float__label{
  display: block;
  padding: 12px 32px;
  background: var(--whatsapp, #25D366);
  color: #fff;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 400;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  white-space: nowrap;
}

.whatsapp-float__icon{
  position: absolute;
  right: -10px;
  top: -74px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--whatsapp, #25D366);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.whatsapp-float__icon img{
  width: 32px;
  height: 32px;
  display: block;
}

/* Hover */
.whatsapp-float:hover .whatsapp-float__label{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
  transition: all .2s ease;
}
.whatsapp-float:hover .whatsapp-float__icon{
  transform: translateY(-1px);
  transition: transform .2s ease;
}

/* Mobile: um pouco menor e mais perto da borda */
@media (max-width: 767.98px){
  .whatsapp-float{
    left: 16px;
    bottom: 16px;
  }

  .whatsapp-float__label{
    padding: 10px 20px;
    font-size: .9rem;
  }

  .whatsapp-float__icon{
    width: 52px;
    height: 52px;
    top: -58px;
    right: -6px;
  }

  .whatsapp-float__icon img{
    width: 26px;
    height: 26px;
  }
}

/* ===========================
   THUMB WWS (Area Covered)
   =========================== */

.thumb-wws{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-s, 16px);
  height: 260px;     
  margin-bottom:20px         /* altura fixa – ajusta se quiser */
}

/* mobile: um pouco menor */
@media (max-width: 767.98px){
  .thumb-wws{
    height: 200px;
  }
}

.thumb-wws img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* corta bonitinho mantendo proporção */
  object-position: center;
  display: block;
}

/* placeholder quando não tem thumb */
.thumb-wws--placeholder{
  width: 100%;
  height: 100%;
  background: var(--surface-box-primary, #f2f6fb);
}