/* =========================
   NAV PREMIUM — LIMPA (FINAL)
   - fundo preto full width
   - logo central
   - hover só troca cor (vermelho escuro)
   - dropdown elegante
   - hambúrguer base (responsivo depois)
========================= */

:root{
  --nav-bg: #000;
  --nav-text: rgba(255,255,255,.92);
  --nav-border: rgba(255,255,255,.10);
  --radius: 14px;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --nav-h: 84px;
  --container: 1200px;

  --hover-green: color: #28c700;
}
/* ==================================================
   FIX TOP GAP (HERO ATÉ O TOPO) + NAV PREMIUM
================================================== */

/* ===== RESET TOP GAP ===== */
html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

:root{
  --nav-h: 84px;     /* ajuste pro seu header real */
  --sec-gap: 34px;   /* respiro abaixo da nav */
}

/* base (SOBRE pra baixo) */
.section{
  padding-top: 15px;
  padding-bottom: 90px;
  scroll-margin-top: var(--nav-h);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--nav-bg);
}

/* container padrão (centraliza tudo) */
.section > .container{
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 20px;
}

/* headings padrão (somente headings de verdade) */
.sobre__heading,
.metodologia__heading,
.servicos__heading,
.portfolio__heading,
.faq__heading{
  margin: 0 0 28px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: .02em;
}

/* wrapper do título do FAQ (só espaçamento) */
.faq-heading{
  margin: 0 0 28px;
}

/* underline neon */
.sobre__heading-text,
.metodologia__heading-text,
.servicos__heading-text,
.portfolio__heading-text,
.faq__heading-text{
  font-size: 36px;
  display: inline-block;
  color: #ffffff;
  transition: color .18s ease;
  cursor: pointer;
  position: relative;
}

.sobre__heading-text::after,
.metodologia__heading-text::after,
.servicos__heading-text::after,
.portfolio__heading-text::after,
.faq__heading-text::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -10px;
  width: 46%;
  height: 3px;
  border-radius: 999px;
  background: rgba(40,199,0,.9);
  box-shadow: 0 0 18px rgba(40,199,0,.35);
  transform: scaleX(.6);
  transform-origin: left;
  opacity: .55;
  transition: transform .25s ease, opacity .25s ease;
}

.sobre__heading-text:hover,
.metodologia__heading-text:hover,
.servicos__heading-text:hover,
.portfolio__heading-text:hover,
.faq__heading-text:hover{
  color: #28c700;
}

.sobre__heading-text:hover::after,
.metodologia__heading-text:hover::after,
.servicos__heading-text:hover::after,
.portfolio__heading-text:hover::after,
.faq__heading-text:hover::after{
  transform: scaleX(1);
  opacity: 1;
}




/* =========================================================
   RESPONSIVO — BASE .section (SOBRE pra baixo)
   Objetivo:
   - evitar corte/overflow no mobile/tablet
   - manter desktop intacto
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  /* ✅ container da section não pode somar padding + width */
  .section > .container{
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    padding-left: 16px;  /* margem lateral menor no mobile */
    padding-right: 16px;
  }

  /* ✅ evita headings colarem nas bordas */
  .sobre__heading,
  .metodologia__heading,
  .servicos__heading,
  .portfolio__heading,
  .faq__heading{
    padding-inline: 6px;
  }

  .sobre__heading-text,
  .metodologia__heading-text,
  .servicos__heading-text,
  .portfolio__heading-text,
  .faq__heading-text{
    font-size: 28px;
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  .section > .container{
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .sobre__heading,
  .metodologia__heading,
  .servicos__heading,
  .portfolio__heading,
  .faq__heading{
    padding-inline: 8px;
  }

  .sobre__heading-text,
  .metodologia__heading-text,
  .servicos__heading-text,
  .portfolio__heading-text,
  .faq__heading-text{
    font-size: 32px;
  }
}









/* =========================
   MATRIX (padrão - todas as sections)
   - não empurra layout (absolute)
   - fica por trás (z-index)
========================= */
.section{
  position: relative;
  overflow: hidden;
}

/* qualquer canvas matrix */
.section canvas[class^="matrix-"]{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  pointer-events: none;
  z-index: 0;

  opacity: .18;            /* padrão */
  mix-blend-mode: screen;  /* premium: não escurece */
}

/* conteúdo sempre acima do matrix */
.section > .container{
  position: relative;
  z-index: 1;
}

/* =========================
   AJUSTE FINO (SOBRE)
   - se quiser mais/menos efeito só aqui
========================= */
#sobre .matrix-sobre{
  opacity: .22; /* ajuste aqui se quiser */
}




/* ================= HEADER =================
   ✅ FIXED pra ficar por cima do HERO (sem empurrar)
=========================================== */
.header{
  position: fixed;              /* ✅ antes: sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  background: rgba(2,2,2,.42);  /* igual seu #0202026c */
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(8px);
}

/* container */
.container{
  width: min(var(--container), 100% - 40px);
  margin: 0 auto;
}

/* NAV */
.nav{
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ================= MENU ================= */
.menu{ width: 100%; }

.menu__list{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin: 0;
  padding: 0;
}

.menu__item{
  position: relative;
  display: flex;
  align-items: center;
}

/* ================= LINKS (A + BUTTON) ================= */
.menu__link,
.menu__link--btn{
  color: var(--nav-text);
  text-decoration: none;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .06em;
  font-size: 13px;
  text-transform: uppercase;
  padding: 10px 12px;
  line-height: 1;
  transition: color .18s ease;
}

.menu__link--btn{
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  -webkit-appearance: none;
  appearance: none;
}

/* hover verde */
.menu__link:hover,
.menu__link--btn:hover{
  color: #28c700;
}

/* ================= LOGO ================= */
.menu__item--logo{ margin: 0 6px; }

.logo-link{
  position: relative;
  display: grid;
  place-items: center;
  transition: transform .18s ease, filter .18s ease;
  will-change: transform;
}

.logo-link:hover{
  transform: scale(1.06);
  filter: drop-shadow(0 0 14px rgba(255,255,255,.22));
}

/* tooltip */
.logo-link::after{
  content: "Voltar a Página Principal";
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
  background: rgba(0,0,0,.92);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.14);
  padding: 6px 10px;
  border-radius: 10px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  z-index: 99999;
}

.logo-link::before{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,.92);
  border-left: 1px solid rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
  rotate: 45deg;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 99999;
}

.logo-link:hover::after,
.logo-link:hover::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.logo-img{
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* ================= DROPDOWN (JS controlado) ================= */
.dropdown__icon{
  font-size: 12px;
  transition: transform .2s ease;
  opacity: .9;
}

/* mantém o container do dropdown como referência */
.menu__item.dropdown{
  position: relative;
}

/* menu (fechado por padrão) */
.dropdown__menu{
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  padding: 10px;
  list-style: none;
  margin: 0;
  background: rgba(10,10,10,.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 9999;
}

/* ✅ “ponte” invisível pra não fechar quando desce pro submenu */
.dropdown__menu::before{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

/* links do dropdown */
.dropdown__link{
  display: block;
  padding: 12px;
  border-radius: 12px;
  color: var(--nav-text);
  text-decoration: none;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}

.dropdown__link:hover{
  background: rgba(255,255,255,.07);
  transform: translateX(2px);
  color: rgba(255,255,255,.95);
}

/* ====== ABERTO (classe adicionada no JS) ====== */
.menu__item.dropdown.is-open .dropdown__menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ícone gira quando aberto */
.menu__item.dropdown.is-open .dropdown__icon{
  transform: rotate(180deg);
}

/* deixa o "SERVIÇOS" com estado ativo quando aberto */
.menu__item.dropdown.is-open .menu__link--btn{
  color: #28c700;
}

/* ================= HAMBURGUER (base) ================= */
.nav__toggle{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.nav__toggle-line{
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
}

.nav__overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 9998;
}




/* =========================================================
   RESPONSIVO — HEADER / NAV / MENU / DROPDOWN
   Regras:
   - NÃO altera desktop (>= 992px) ✅
   - Sem scroll horizontal ✅
   - Mais respiro nas bordas (padding/margem) ✅
   - Botões com área de toque no mobile ✅
   - Dropdown sem “vazar” pra fora da tela ✅
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  /* ✅ garante que nada estoure largura (evita scroll horizontal) */
  html, body{ overflow-x: hidden; }

  /* ✅ mais respiro lateral sem mexer no desktop */
  .container{
    width: min(var(--container), 100% - 28px); /* antes: 40px */
  }

  /* ✅ altura menor do header no mobile (não muda desktop) */
  .nav{
    height: 72px; /* mantém visual, só reduz o “peso” no mobile */
  }

  /* ✅ mostra hamburguer no mobile */
  .nav__toggle{
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  /* ✅ menu desktop some no mobile (evita quebrar/estourar) */
  .menu__list{
    display: none;
  }

  /* ✅ aumenta área de toque (quando menu mobile existir) */
  .menu__link,
  .menu__link--btn{
    padding: 12px 14px;
    font-size: 13px; /* mantém tipografia, só garante legibilidade/toque */
  }

  /* ✅ logo um pouco mais compacta pra caber com toggle */
  .logo-img{
    height: 38px;
  }

  /* ✅ tooltip pode “vazar” em telas pequenas — desativa no mobile */
  .logo-link::after,
  .logo-link::before{
    display: none;
  }

  /* ✅ dropdown não deve aparecer fora da tela no mobile
     (mesmo que o JS tente abrir) */
  .dropdown__menu{
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 0;
    width: min(92vw, 360px);
  }

  /* ✅ links do dropdown com toque confortável */
  .dropdown__link{
    padding: 14px 12px;
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  /* ✅ evita scroll horizontal por pequenos estouros */
  html, body{ overflow-x: hidden; }

  /* ✅ respiro lateral suave no tablet */
  .container{
    width: min(var(--container), 100% - 36px);
  }

  /* ✅ toggle aparece no tablet (layout desktop não cabe bem) */
  .nav__toggle{
    display: inline-flex;
  }

  /* ✅ esconde a lista horizontal pra não quebrar */
  .menu__list{
    display: none;
  }

  /* ✅ tooltip some (pode vazar e é irrelevante em touch) */
  .logo-link::after,
  .logo-link::before{
    display: none;
  }

  /* ✅ dropdown com largura adaptável */
  .dropdown__menu{
    min-width: 0;
    width: min(82vw, 420px);
  }

  /* ✅ toque confortável */
  .dropdown__link{
    padding: 14px 12px;
  }
}

/* =========================================================
   RESPONSIVO — LINKS DO MENU (a / button)
   Objetivo:
   - área de toque melhor no mobile/tablet
   - manter desktop intacto
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){
  .menu__link,
  .menu__link--btn{
    padding: 12px 14px; /* toque */
    font-size: 13px;    /* mantém o visual */
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){
  .menu__link,
  .menu__link--btn{
    padding: 11px 13px;
  }
}









/* ================= MENU MOBILE (drawer) ================= */
.nav__drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(86vw, 360px);

  background: rgba(10,10,10,.92);
  border-right: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  z-index: 9999;
  padding: 88px 16px 16px; /* espaço pro header */
  transform: translateX(-102%);
  transition: transform .22s ease;
  will-change: transform;
}

/* overlay: fica escondido até abrir */
.nav__overlay{
  display: none;
}

/* lista */
.nav__drawer-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.nav__drawer-link{
  display: flex;
  align-items: center;
  padding: 14px 12px;
  border-radius: 14px;

  color: rgba(255,255,255,.92);
  text-decoration: none;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  -webkit-tap-highlight-color: transparent;
}

.nav__drawer-link:hover{
  border-color: rgba(40,199,0,.35);
}

/* ================= ESTADO ABERTO ================= */
body.nav--open .nav__drawer{
  transform: translateX(0);
}

body.nav--open .nav__overlay{
  display: block; /* teu overlay base já tem position/fundo */
}

/* ================= RESPONSIVO (só ativa drawer em mobile/tablet) ================= */
@media (min-width: 992px){
  .nav__drawer,
  .nav__overlay{
    display: none !important;
  }
}

/* =========================================================
   SUBMENU (SERVIÇOS)
========================================================= */
.nav__drawer-item{ display: block; }

.nav__drawer-toggle{
  width: 100%;
  justify-content: space-between;
  cursor: pointer;
}

/* caret */
.nav__drawer-caret{
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255,255,255,.6);
  border-bottom: 2px solid rgba(255,255,255,.6);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

/* submenu */
.nav__drawer-submenu{
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  display: grid;
  gap: 6px;

  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}

/* links do submenu */
.nav__drawer-sublink{
  display: block;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration: none;

  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);

  -webkit-tap-highlight-color: transparent;
}

/* estado aberto */
.nav__drawer-item.is-open .nav__drawer-submenu{
  max-height: 500px;
}

.nav__drawer-item.is-open .nav__drawer-caret{
  transform: rotate(-135deg);
}

/* =========================================================
   HEADER DO DRAWER (logo esquerda + X direita)
========================================================= */
.nav__drawer-header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav__drawer-brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* logo */
.nav__drawer-logo{
  height: 34px;
  width: auto;

  /* transforma qualquer SVG preto em branco */
  filter: brightness(0) invert(1);
}

/* botão fechar */
.nav__drawer-close{
  margin-right: 32px;
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}

.nav__drawer-close:hover{
  border-color: rgba(40,199,0,.30);
}

.nav__drawer-close:active{
  transform: scale(.98);
}

/* linhas do X */
.nav__drawer-close span{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.9);
  border-radius: 999px;
}

.nav__drawer-close span:first-child{
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav__drawer-close span:last-child{
  transform: translate(-50%, -50%) rotate(-45deg);
}









/* =========================
   HERO HOME (full screen)
   ✅ fundo vai até o topo
   ✅ conteúdo desce pra não ficar atrás da nav
========================= */
.hero{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  position: relative;
  min-height: 100svh;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;

  /* ✅ compensa header fixed SEM criar faixa branca */
  padding-top: var(--nav-h);
  box-sizing: border-box;
}

/* imagem de fundo */
.hero__bg{
  position: absolute;
  inset: 0;
  background: url("../img/hero-principal.webp") center/cover no-repeat;
  transform: scale(1);
  animation: heroZoom 28s ease-in-out infinite alternate;
  z-index: -2;
}

/* overlay */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.80);
  z-index: -1;
}

/* conteúdo */
.hero__content{
  max-width: 980px;
  padding: 0 20px;
}

/* legibilidade premium */
.hero__kicker,
.hero__title,
.hero__subtitle{
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.93);
}

.hero__kicker{
  color: #28c700;
  letter-spacing: .25em;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 500;
}

.hero__title{
  color: #ffffff;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 10px;
}

.hero__subtitle{
  color: #28c700;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
}

@keyframes heroZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.12); }
}

/* =========================
   SCROLL INDICATOR
========================= */
.scroll-indicator{
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .85;
  transition: opacity .35s ease;
}

.scroll-indicator.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.scroll-indicator__mouse{
  width: 26px;
  height: 42px;
  border: 2px solid rgba(28, 139, 0, 0.9);
  border-radius: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}

.scroll-indicator__dot{
  width: 4px;
  height: 8px;
  background: #28c700;
  border-radius: 2px;
  animation: scrollDot 1.6s ease-in-out infinite;
}

@keyframes scrollDot{
  0%{ opacity:0; transform:translateY(0); }
  40%{ opacity:1; }
  80%{ transform:translateY(10px); opacity:0; }
  100%{ opacity:0; }
}




/* =========================
   SOBRE (layout referência)
========================= */
/* ===== GRID ===== */
.sobre__content{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 42px;
  align-items: start;
}

/* ===== TEXTO ===== */
.sobre__name{
  margin: 0 0 6px;
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 600;
  color: #ffffff;
}

.sobre__role{
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 500;
  color: #98999a;
}

.sobre__description p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.75;
  color: #ffffff;
}

/* ===== BOTÃO ===== */
.sobre__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: #ffffff;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}

.sobre__button:hover{
  transform: translateY(-1px);
  background: rgba(40,199,0,.10);
  border-color: rgba(40,199,0,.55);
}

/* ===== PREMIUM shine botão ===== */
.sobre__button::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.20) 50%,
    transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .65s ease;
  pointer-events:none;
}

.sobre__button:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
}

/* ===== IMAGEM + CANTOS ===== */
.sobre__image-wrapper{
  width: 420px;
  position: relative;
  border-radius: 18px;
  overflow: hidden;

  /* base */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 44px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06) inset;

  isolation: isolate;
}

/* brilho radial */
.sobre__image-wrapper::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 20%,
    rgba(40,199,0,.22),
    rgba(255,255,255,.06) 35%,
    transparent 60%);
  filter: blur(10px);
  opacity: .55;
  z-index: 0;
}

/* brilho em movimento */
.sobre__image-wrapper::after{
  content:"";
  position:absolute;
  inset:-80px;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.14) 50%,
    transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .35s ease, transform .65s ease;
  z-index: 1;
  pointer-events:none;
}

.sobre__image-wrapper:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
}

.sobre__image-wrapper img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  position: relative;
  z-index: 0;
  transition: transform .35s ease;
}

.sobre__image-wrapper:hover img{
  transform: scale(1.02);
}

/* cantos */
.sobre__corner{
  position: absolute;
  width: 70px;
  height: 70px;
  border: 3px solid #ffffff;
  pointer-events: none;
}

.sobre__corner--top-right{
  top: 14px;
  right: 14px;
  border-left: 0;
  border-bottom: 0;
}

.sobre__corner--bottom-left{
  left: 14px;
  bottom: 14px;
  border-right: 0;
  border-top: 0;
}




/* =========================================================
   RESPONSIVO — SOBRE
   Regras:
   - NÃO altera desktop (>= 992px) ✅
   - Sem scroll horizontal ✅
   - Textos com respiro lateral (nada colado) ✅
   - Botão com toque confortável no mobile ✅
   - Imagem sem distorção/corte ruim ✅
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  /* ✅ evita qualquer estouro lateral */
  html, body{ overflow-x: hidden; }

  /* ✅ empilha em 1 coluna */
  .sobre__content{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* ✅ respiro lateral nos textos (sem mexer em cores/typo) */
  .sobre__name,
  .sobre__role,
  .sobre__description{
    padding-inline: 6px;
  }

  /* ✅ mantém legibilidade/ritmo sem alterar tipografia base */
  .sobre__role{ margin-bottom: 14px; }
  .sobre__description p{ margin-bottom: 12px; }

  /* ✅ botão com área de toque e largura confortável */
  .sobre__button{
    width: 100%;
    max-width: 150px;
    padding: 14px 18px; /* mais toque */
  }

  /* ✅ imagem não pode forçar largura fixa (420px) */
  .sobre__image-wrapper{
    width: 100%;
    max-width: 520px;
    margin-inline: auto; /* centraliza no mobile */
    border-radius: 16px;
  }

  /* ✅ cantos proporcionais */
  .sobre__corner{
    width: 56px;
    height: 56px;
    border-width: 3px; /* mantém identidade */
  }

  .sobre__corner--top-right{
    top: 12px;
    right: 12px;
  }

  .sobre__corner--bottom-left{
    left: 12px;
    bottom: 12px;
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  html, body{ overflow-x: hidden; }

  /* ✅ mantém dois blocos, mas evita “aperto” e quebras */
  .sobre__content{
    grid-template-columns: 1fr; /* tablet costuma ficar melhor empilhado */
    gap: 28px;
  }

  /* ✅ respiro lateral suave */
  .sobre__name,
  .sobre__role,
  .sobre__description{
    padding-inline: 8px;
  }

  /* ✅ botão com toque confortável sem virar “gigante” */
  .sobre__button{
    padding: 13px 18px;
  }

  /* ✅ imagem fluida (não trava em 420px) */
  .sobre__image-wrapper{
    width: min(520px, 100%);
    margin-inline: auto;
  }

  /* ✅ cantos proporcionais */
  .sobre__corner{
    width: 62px;
    height: 62px;
  }

  .sobre__corner--top-right{
    top: 13px;
    right: 13px;
  }

  .sobre__corner--bottom-left{
    left: 13px;
    bottom: 13px;
  }
}









/* =========================
   METODOLOGIA (layout invertido)
========================= */
/* =========================
   GRID LAYOUT
========================= */
.metodologia__layout{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 64px;
  align-items: start;
}

/* =========================
   IMAGEM
========================= */
.metodologia__image-wrapper{
  width: 450px;
  position: relative;
  border-radius: 18px;
  overflow: hidden;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 44px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06) inset;

  isolation: isolate;
}

/* brilho radial */
.metodologia__image-wrapper::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 20%,
    rgba(40,199,0,.22),
    rgba(255,255,255,.06) 35%,
    transparent 60%);
  filter: blur(10px);
  opacity: .55;
  z-index: 0;
}

/* brilho hover */
.metodologia__image-wrapper::after{
  content:"";
  position:absolute;
  inset:-80px;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.14) 50%,
    transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .35s ease, transform .65s ease;
  z-index: 1;
}

.metodologia__image-wrapper:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
}

.metodologia__image-wrapper img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  position: relative;
  z-index: 0;
  transition: transform .35s ease;
}

.metodologia__image-wrapper:hover img{
  transform: scale(1.02);
}

/* cantos */
.metodologia__corner{
  position: absolute;
  width: 70px;
  height: 70px;
  border: 3px solid #ffffff;
}

.metodologia__corner--top-right{
  top: 14px;
  right: 14px;
  border-left: 0;
  border-bottom: 0;
}

.metodologia__corner--bottom-left{
  left: 14px;
  bottom: 14px;
  border-right: 0;
  border-top: 0;
}

/* =========================
   TEXTO
========================= */
.metodologia__steps{
  display: grid;
  gap: 2px;
}

.metodologia__step-title{
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}

.metodologia__step-text{
  font-size: 14px;
  line-height: 1.75;
  color: #d0d0d0;
  max-width: 640px;
}

/* =========================
   BOTÃO
========================= */
.metodologia__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.metodologia__button:hover{
  transform: translateY(-1px);
  background: rgba(40,199,0,.10);
  border-color: rgba(40,199,0,.55);
}

/* shine */
.metodologia__button::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.20) 50%,
    transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .65s ease;
}

.metodologia__button:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
}

/* ===== MATRIX METODOLOGIA ===== */
#metodologia{
  position: relative;
  overflow: hidden;
}

#metodologia .matrix-metodologia{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  pointer-events: none;
  z-index: 0;
  opacity: .18;
  mix-blend-mode: screen;
}

#metodologia .container{
  position: relative;
  z-index: 1;
}




/* =========================================================
   RESPONSIVO — METODOLOGIA
   Regras:
   - NÃO altera desktop (>= 992px) ✅
   - Sem scroll horizontal ✅
   - Textos com respiro lateral ✅
   - Botão com toque confortável ✅
   - Imagem fluida (sem distorção/corte ruim) ✅
   - Matrix continua presa no fundo ✅
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  html, body{ overflow-x: hidden; }

  /* ✅ evita “estouro” clássico do grid (min-width:auto) */
  .metodologia__layout > *{ min-width: 0; }

  /* ✅ empilha em 1 coluna */
  .metodologia__layout{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* ✅ imagem não pode ter largura fixa (450px) no mobile */
  .metodologia__image-wrapper{
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    border-radius: 16px;
  }

  /* ✅ cantos proporcionais */
  .metodologia__corner{
    width: 56px;
    height: 56px;
  }
  .metodologia__corner--top-right{ top: 12px; right: 12px; }
  .metodologia__corner--bottom-left{ left: 12px; bottom: 12px; }

  /* ✅ texto com respiro lateral (nada colado) */
  .metodologia__step-title,
  .metodologia__step-text{
    padding-inline: 6px;
  }

  /* ✅ texto nunca passa da largura */
  .metodologia__step-text{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ✅ botão com área de toque + largura confortável */
  .metodologia__button{
    width: 100%;
    max-width: 150px;
    padding: 14px 20px;
    margin-inline: auto;
  }

  /* ✅ garante que o canvas nunca gere largura extra */
  #metodologia .matrix-metodologia{
    max-width: 100%;
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  html, body{ overflow-x: hidden; }

  .metodologia__layout > *{ min-width: 0; }

  /* ✅ no tablet, empilhar costuma ficar mais limpo/sem quebra */
  .metodologia__layout{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .metodologia__image-wrapper{
    width: min(560px, 100%);
    margin-inline: auto;
  }

  .metodologia__corner{
    width: 62px;
    height: 62px;
  }
  .metodologia__corner--top-right{ top: 13px; right: 13px; }
  .metodologia__corner--bottom-left{ left: 13px; bottom: 13px; }

  .metodologia__step-title,
  .metodologia__step-text{
    padding-inline: 8px;
  }

  .metodologia__step-text{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .metodologia__button{
    padding: 13px 20px;
  }

  #metodologia .matrix-metodologia{
    max-width: 100%;
  }
}









/* =========================
   SERVIÇOS — TÍTULO (mesmo padrão da metodologia)
========================= */
.servicos__grid{
  display: grid;
  gap: 18px;
}

/* card retangular */
.servico-card{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  align-items: center;

  padding: 18px;
  border-radius: 16px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);

  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.servico-card:hover{
  transform: translateY(-2px);
  border-color: rgba(40,199,0,.35);
  background: rgba(255,255,255,.065);
}

/* imagem */
.servico-card__media{
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.25);
  aspect-ratio: 4 / 3;
}

.servico-card__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.servico-card:hover .servico-card__media img{
  transform: scale(1.06);
}

/* textos */
.servico-card__title{
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.15;
  color: #fff;
}

.servico-card__text{
  margin: 0;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
}




/* =========================================================
   RESPONSIVO — SERVIÇOS (cards)
   Regras:
   - NÃO altera desktop (>= 992px) ✅
   - Sem scroll horizontal ✅
   - Textos com respiro lateral ✅
   - Card adaptável em mobile/tablet ✅
   - Imagem sem distorção/corte ruim ✅
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  html, body{ overflow-x: hidden; }

  /* ✅ evita overflow por grid children (min-width:auto) */
  .servicos__grid > *,
  .servico-card > *{
    min-width: 0;
  }

  /* ✅ cards viram coluna */
  .servico-card{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  /* ✅ mídia ocupa largura toda e mantém proporção */
  .servico-card__media{
    width: 100%;
    aspect-ratio: 16 / 10; /* mais “banner” no mobile */
    border-radius: 14px;
  }

  /* ✅ texto com respiro (evita colar na borda) */
  .servico-card__title,
  .servico-card__text{
    padding-inline: 6px;
  }

  /* ✅ legibilidade: não muda fonte, só ajusta “quebra” */
  .servico-card__title,
  .servico-card__text{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  html, body{ overflow-x: hidden; }

  .servicos__grid > *,
  .servico-card > *{
    min-width: 0;
  }

  /* ✅ mantém 2 colunas, mas mais “flexível” no tablet */
  .servico-card{
    grid-template-columns: 200px 1fr;
    gap: 18px;
    padding: 18px;
  }

  /* ✅ mídia um pouco mais “wide” */
  .servico-card__media{
    aspect-ratio: 4 / 3; /* mantém identidade */
  }

  /* ✅ respiro lateral suave */
  .servico-card__title,
  .servico-card__text{
    padding-inline: 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}









/* =========================
   PORTFÓLIO — LEAD
========================= */
.portfolio__lead{
  margin: 0 0 18px;
  max-width: 850px;
  color: rgba(255,255,255,.82);
  line-height: 1.65;
}

/* =========================
   CARD
========================= */
.portfolio-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 28px 70px rgba(0,0,0,.45);
}

.portfolio-card__slider{
  position: relative;
  width: 100%;
  height: clamp(260px, 38vw, 520px);
}

.portfolio-card__slide{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .55s ease, transform .8s ease;
}

.portfolio-card__slide.is-active{
  opacity: 1;
  transform: scale(1);
}

.portfolio-card__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* overlay premium */
.portfolio-card__shine{
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 280px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  opacity: .9;
}

/* =========================
   OVERLAY BUTTON
========================= */
.portfolio-card__overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.portfolio-card__slider:hover .portfolio-card__overlay{
  opacity: 1;
}

/* =========================
   BUTTON PADRÃO (APLICADO)
========================= */
.portfolio-card__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: #ffffff;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
  pointer-events: auto; /* importante pra clicar */
}

.portfolio-card__button:hover{
  transform: translateY(-1px);
  background: rgba(40,199,0,.10);
  border-color: rgba(40,199,0,.55);
}

/* shine */
.portfolio-card__button::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.20) 50%,
    transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .65s ease;
  pointer-events:none;
}

.portfolio-card__button:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
}

/* =========================
   BOTÕES (NOVO PADRÃO)
========================= */
/* =========================
   BUTTON BASE — PADRÃO GLOBAL
========================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 18px;
  border-radius: 999px;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;

  text-decoration: none;
  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  background: transparent;

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}

/* hover padrão */
.btn:hover{
  transform: translateY(-1px);
  background: rgba(40,199,0,.10);
  border-color: rgba(40,199,0,.55);
}

/* shine padrão */
.btn::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.20) 50%,
    transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .65s ease;
  pointer-events:none;
}

.btn:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
}

/* =========================
   VARIAÇÕES (mantidas)
========================= */

/* PRIMARY → apenas destaque leve opcional */
.btn--primary{
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}

/* GHOST → mais discreto */
.btn--ghost{
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}

.btn--ghost:hover{
  color: #fff;
}

/* ícone */
.btn__icon{
  font-size: 14px;
  opacity: .85;
}

/* botão overlay continua clicável */
.portfolio-card__view{
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

/* =========================
   CTA LAYOUT (2 BOTÕES)
========================= */
.portfolio__cta{
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* =========================
   DOTS
========================= */
.portfolio-card__dots{
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.portfolio-card__dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.20);
  transition: transform .2s ease, background .2s ease;
}

.portfolio-card__dot.is-active{
  background: rgba(255,255,255,.9);
  transform: scale(1.15);
}

/* =========================
   SETAS
========================= */
.portfolio-card__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;

  display: grid;
  place-items: center;

  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  opacity: .9;
}

.portfolio-card__arrow:hover{
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-50%) scale(1.05);
}

.portfolio-card__arrow--prev{ left: 14px; }
.portfolio-card__arrow--next{ right: 14px; }




/* =========================================================
   RESPONSIVO — PORTFÓLIO (card/slider/cta/dots/setas/botões)
   Regras:
   - NÃO altera desktop (>= 992px) ✅
   - Sem scroll horizontal ✅
   - Textos com respiro lateral ✅
   - Botões com área de toque no mobile ✅
   - Imagens sem distorção ✅
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  html, body{ overflow-x: hidden; }

  /* ✅ evita overflow por filhos com min-width:auto */
  .portfolio-card,
  .portfolio-card *{
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ✅ respiro no texto lead */
  .portfolio__lead{
    padding-inline: 6px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ✅ slider: altura mais “contida” no mobile */
  .portfolio-card__slider{
    height: clamp(220px, 62vw, 360px);
  }

  /* ✅ overlay sempre acessível no touch (sem depender de hover) */
  .portfolio-card__overlay{
    opacity: 1;
    pointer-events: none; /* mantém como no desktop */
  }

  /* ✅ botão overlay com toque melhor (continua clicável) */
  .portfolio-card__button{
    padding: 14px 18px;
  }

  /* ✅ CTA: empilha e estica botões */
  .portfolio__cta{
    max-width: 200px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .portfolio__cta .btn{
    width: 100%;
    justify-content: center;
    padding: 14px 18px; /* área de toque */
  }

  /* ✅ setas maiores e mais internas (não cortam) */
  .portfolio-card__arrow{
    width: 46px;
    height: 46px;
  }
  .portfolio-card__arrow--prev{ left: 10px; }
  .portfolio-card__arrow--next{ right: 10px; }

  /* ✅ dots um pouco menores e com respiro */
  .portfolio-card__dots{
    left: 12px;
    bottom: 12px;
    gap: 7px;
  }
  .portfolio-card__dot{
    width: 8px;
    height: 8px;
  }
}

/* =========================================================
   RESPONSIVO — PORTFÓLIO (mobile)
   Alternativa 2: botão vira “badge” no canto inferior direito
   sem alterar desktop.
========================================================= */
@media (max-width: 575.98px){
  .portfolio-card__overlay{
    opacity: 1;
    pointer-events: none;
    place-items: end;
    padding: 12px;
  }

  .portfolio-card__button{
    pointer-events: auto;
    padding: 10px 12px;
    font-size: 13px;
    letter-spacing: .06em;

    /* tira o “cara de botão gigante” */
    border-radius: 14px;
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  html, body{ overflow-x: hidden; }

  .portfolio-card,
  .portfolio-card *{
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .portfolio__lead{
    padding-inline: 8px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ✅ slider ajustado pro tablet */
  .portfolio-card__slider{
    height: clamp(260px, 42vw, 460px);
  }

  /* ✅ CTA: mantém lado a lado quando couber, mas evita aperto */
  .portfolio__cta{
    justify-content: flex-start;
    gap: 12px 14px;
  }

  .portfolio__cta .btn{
    padding: 13px 18px;
  }

  /* ✅ setas um pouco mais internas */
  .portfolio-card__arrow--prev{ left: 12px; }
  .portfolio-card__arrow--next{ right: 12px; }
}










/* =========================
   FAQ — PREMIUM PACK
   - glass real
   - borda + glow suave
   - hover microinterações
   - estado ativo (aberto)
   - animação perfeita (JS controla height)
========================= */
.faq-subtitle{
  font-size: 18px;
  color: rgba(255,255,255,.75);
  line-height: 1.65;
  margin: 0;
}

/* =========================
   LISTA (1 coluna, premium)
========================= */
.faq-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 1100px;
}

/* =========================
   CARD PREMIUM
========================= */
.faq-item{
  border-radius: 18px;
  overflow: hidden;
  position: relative;

  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

/* linha neon bem sutil no topo (só aparece no hover/aberto) */
.faq-item::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(40,199,0,.0);
  box-shadow: 0 0 18px rgba(40,199,0,0);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease;
}

/* hover premium */
.faq-item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.055);
  box-shadow:
    0 22px 70px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.faq-item:hover::before{
  opacity: .45;
  transform: translateY(0);
  background: rgba(40,199,0,.75);
  box-shadow: 0 0 22px rgba(40,199,0,.22);
}

/* =========================
   PERGUNTA
========================= */
.faq-question{
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  text-align: left;

  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
}

.faq-question span:first-child{
  max-width: 90%;
}

/* =========================
   ÍCONE PREMIUM (+ vira X)
========================= */
.faq-icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-size: 20px;
  line-height: 1;

  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.faq-item:hover .faq-icon{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

/* =========================
   RESPOSTA (altura controlada via JS)
========================= */
.faq-answer{
  height: 0;               /* JS controla */
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    height .28s ease,
    opacity .18s ease,
    transform .22s ease;
  will-change: height;
}

.faq-answer p{
  margin: 0;
  padding: 0 18px 18px;
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.7;
}

/* =========================
   ESTADO ABERTO (premium)
========================= */
.faq-item.is-open{
  border-color: rgba(40,199,0,.28);
  box-shadow:
    0 26px 80px rgba(0,0,0,.46),
    0 0 0 1px rgba(40,199,0,.12),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.faq-item.is-open::before{
  opacity: .75;
  transform: translateY(0);
  background: rgba(40,199,0,.90);
  box-shadow: 0 0 26px rgba(40,199,0,.28);
}

/* ícone vira X (rota 45deg) */
.faq-item.is-open .faq-icon{
  transform: rotate(45deg);
  border-color: rgba(40,199,0,.35);
  box-shadow: 0 0 22px rgba(40,199,0,.18);
}

/* resposta aparece */
.faq-item.is-open .faq-answer{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   CTA CARD PREMIUM
========================= */
.faq-cta{
  margin-top: 22px;
  max-width: 1100px;
}

.faq-cta-card{
  border-radius: 18px;
  position: relative;
  overflow: hidden;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  padding: 22px;
}

/* brilho diagonal sutil */
.faq-cta-card::after{
  content:"";
  position:absolute;
  inset: -40%;
  background: linear-gradient(120deg,
    rgba(40,199,0,0) 35%,
    rgba(40,199,0,.10) 50%,
    rgba(40,199,0,0) 65%
  );
  transform: rotate(12deg);
  opacity: .35;
  pointer-events: none;
}

.faq-cta-card h3{
  margin: 0 0 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.faq-cta-card p{
  margin: 0 0 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

/* =========================
   BTN PRIMARY — PADRÃO GLOBAL
========================= */
.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;

  font-weight: 600;
  letter-spacing: .08em;
  color: #ffffff;

  background: rgba(40,199,0,.10);
  border: 1px solid rgba(255,255,255,.18);

  position: relative;
  overflow: hidden;

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

/* hover padrão */
.btn-primary:hover{
  transform: translateY(-1px);
  background: rgba(40,199,0,.18);
  border-color: rgba(40,199,0,.55);
}

/* shine */
.btn-primary::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.20) 50%,
    transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .65s ease;
  pointer-events:none;
}

.btn-primary:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
} 




/* =========================================================
   RESPONSIVO — FAQ (grid/itens/cta/botões)
   Regras:
   - NÃO altera desktop (>= 992px) ✅
   - Sem scroll horizontal ✅
   - Textos com respiro lateral ✅
   - Botões com área de toque no mobile ✅
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  html, body{ overflow-x: hidden; }

  /* ✅ evita overflow por min-width:auto em grids/flex */
  .faq-grid > *,
  .faq-item *{
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* ✅ respiro lateral (nada colado) */
  .faq-subtitle{
    padding-inline: 6px;
  }

  /* ✅ lista ocupa 100% */
  .faq-grid{
    max-width: 100%;
  }

  /* ✅ pergunta: mais área de toque + quebra segura */
  .faq-question{
    padding: 16px 16px;
    gap: 12px;
  }

  .faq-question span:first-child{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ✅ ícone um pouco menor pra caber bem */
  .faq-icon{
    width: 36px;
    height: 36px;
    font-size: 19px;
    flex: 0 0 auto;
  }

  /* ✅ padding da resposta acompanha o novo padding */
  .faq-answer p{
    padding: 0 16px 16px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ✅ CTA: ocupa 100% e com respiro */
  .faq-cta{
    max-width: 100%;
  }

  .faq-cta-card{
    justify-content: left;
    max-width: 100%;
    padding: 18px;
  }

  .faq-cta-card h3,
  .faq-cta-card p{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ✅ botão CTA com toque confortável e 100% */
  .btn-primary{
    width: 100%;
    justify-content: center;
    padding: 10px 2px;
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  html, body{ overflow-x: hidden; }

  .faq-grid > *,
  .faq-item *{
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
  }

  .faq-subtitle{
    padding-inline: 8px;
  }

  .faq-grid{
    max-width: 100%;
  }

  /* ✅ ajustes leves de espaçamento */
  .faq-question{
    padding: 18px 18px;
  }

  .faq-question span:first-child{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .faq-answer p{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ✅ CTA adaptável */
  .faq-cta{
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* ou center se quiser centralizar */
  }

  /* card continua full */
  .faq-cta-card{
    padding: 20px;
  }

  /* botão passa a ter largura controlada */
  .faq-cta .btn-primary{
    width: auto;          /* não força 100% */
    max-width: 150px;     /* limite visual elegante */
    padding: 10px 16px;   /* reduz leve */
    font-size: 13px;
  }
}









/* =========================
   CONTATO — PREMIUM
========================= */

.contato{
  /* herda .section */
}

/* ===== heading/subtitle ===== */
.contato__heading{
  margin: 0 0 10px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: .02em;
}

.contato__heading-text{
  font-size: 36px;
  display: inline-block;
  color: #fff;
  transition: color .18s ease;
  cursor: pointer;
  position: relative;
}

.contato__heading-text::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -10px;
  width: 46%;
  height: 3px;
  border-radius: 999px;
  background: rgba(40,199,0,.9);
  box-shadow: 0 0 18px rgba(40,199,0,.35);
  transform: scaleX(.6);
  transform-origin: left;
  opacity: .55;
  transition: transform .25s ease, opacity .25s ease;
}

.contato__heading-text:hover{
  color:#28c700;
}

.contato__heading-text:hover::after{
  transform:scaleX(1);
  opacity:1;
}

.contato__subtitle{
  margin: 0 0 34px;
  color: rgba(255,255,255,.78);
  font-size: 18px;
  line-height: 1.6;
  max-width: 70ch;
}

/* ===== grid ===== */
.contato__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: start;
}

/* ===== cards base ===== */
.contato__form,
.contato__info{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    0 0 0 1px rgba(40,199,0,.06);
  backdrop-filter: blur(10px);
  min-width: 0;
}

/* ===== form ===== */
.contato__form{
  padding: 22px;
  overflow: hidden;
}

.contato__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.contato__field{
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  min-width: 0;
}

.contato__field label{
  color: rgba(255,255,255,.85);
  font-size: 14px;
  letter-spacing: .02em;
}

.contato__field label span{
  color: #28c700;
  font-weight: 700;
}

.contato__field input,
.contato__field select,
.contato__field textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  background: rgba(0,0,0,.35);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.contato__field textarea{
  resize: vertical;
  min-height: 140px;
  max-width: 100%;
}

.contato__field select{
  cursor: pointer;
}

.contato__field input::placeholder,
.contato__field textarea::placeholder{
  color: rgba(255,255,255,.45);
}

.contato__field input:focus,
.contato__field select:focus,
.contato__field textarea:focus{
  border-color: rgba(40,199,0,.55);
  box-shadow: 0 0 0 4px rgba(40,199,0,.15);
}

.contato__field input:hover,
.contato__field select:hover,
.contato__field textarea:hover{
  border-color: rgba(255,255,255,.22);
}

/* ===== botão ===== */
.contato__submit{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  margin-top: 6px;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 10px;

  font-weight: 600;
  letter-spacing: .08em;
  text-transform: none;

  color: #ffffff;
  background: rgba(40,199,0,.10);

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}

.contato__submit:hover{
  transform: translateY(-1px);
  background: rgba(40,199,0,.18);
  border-color: rgba(40,199,0,.55);
}

.contato__submit:active{
  transform: translateY(0);
}

.contato__submit::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.20) 50%,
    transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .65s ease;
  pointer-events:none;
}

.contato__submit:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
}

/* ===== infos ===== */
.contato__info{
  padding: 22px;
  overflow: hidden;
}

.contato__infos{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.contato__info-item{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;

  padding: 0;
  background: transparent;
  border: 0;
  min-width: 0;
}

.contato__info-icon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;

  border-radius: 10px;
  background: rgba(40,199,0,.08);
  border: 1px solid rgba(40,199,0,.16);

  color: rgba(255,255,255,.92);
}

.contato__info-icon img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.contato__info-text{
  min-width: 0;
}

.contato__info-text strong{
  display: block;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  letter-spacing: .02em;
  margin-bottom: 2px;
}

.contato__info-text span,
.contato__link{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contato__info-text span{
  display: block;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.45;
}

.contato__link{
  color: rgba(255,255,255,.78);
  text-decoration: none;
  border-bottom: 1px dashed rgba(40,199,0,.35);
  transition: color .18s ease, border-color .18s ease;
}

.contato__link:hover{
  color: #28c700;
  border-color: rgba(40,199,0,.75);
}

/* ===== redes sociais — premium ===== */
.contato__social{
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.contato__social-link{
  width: 44px;
  height: 44px;
  border-radius: 13px;

  display: grid;
  place-items: center;

  font-size: 20px;
  color: rgba(255,255,255,.86);
  text-decoration: none;

  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.18);

  backdrop-filter: blur(10px);

  position: relative;
  overflow: hidden;

  transition:
    transform .22s ease,
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.contato__social-link:hover{
  transform: translateY(-3px);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}

.contato__social-link.facebook:hover{
  background: rgba(24,119,242,.15);
  box-shadow:
    0 14px 30px rgba(24,119,242,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.contato__social-link.instagram:hover{
  background: rgba(225,48,108,.15);
  box-shadow:
    0 14px 30px rgba(225,48,108,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.contato__social-link.linkedin:hover{
  background: rgba(10,102,194,.15);
  box-shadow:
    0 14px 30px rgba(10,102,194,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.contato__social-link.github:hover{
  background: rgba(255,255,255,.12);
  box-shadow:
    0 14px 30px rgba(255,255,255,.14),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.contato__social-link::after{
  content:"";
  position:absolute;
  inset:-70px;
  background: linear-gradient(
    120deg,
    transparent 38%,
    rgba(255,255,255,.20) 50%,
    transparent 62%
  );
  transform: translateX(-42%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .65s ease;
  pointer-events: none;
}

.contato__social-link:hover::after{
  opacity: 1;
  transform: translateX(42%) rotate(10deg);
}

/* caso ainda existam imagens dentro dos links antigos */
.contato__social-link img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

/* ===== toast ===== */
.toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  padding: 12px 14px;
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 999999;
  max-width: min(520px, calc(100vw - 24px));
  font-size: 14px;
  line-height: 1.4;
}

.toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== loading button ===== */
.contato__submit.is-loading{
  opacity: .85;
  pointer-events: none;
  filter: saturate(.95);
}

.contato__submit.is-loading::after{
  content:"";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
  border-top-color: rgba(0,0,0,.85);
  display: inline-block;
  margin-left: 10px;
  vertical-align: -3px;
  animation: spin .7s linear infinite;
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

/* ===== campos inválidos ===== */
.is-invalid{
  border-color: rgba(255,80,80,.7) !important;
  box-shadow: 0 0 0 4px rgba(255,80,80,.15) !important;
}




/* =========================================================
   RESPONSIVO — CONTATO
   Regras:
   - NÃO altera desktop (>= 992px) ✅
   - Sem scroll horizontal ✅
   - Grid adaptável sem quebrar layout ✅
   - Inputs e textos sem overflow ✅
   - Botões com área de toque adequada ✅
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  html, body{ overflow-x: hidden; }

  /* ✅ evita overflow por min-width:auto em grids */
  .contato__grid > *,
  .contato__form *,
  .contato__info *{
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* ===== heading ===== */
  .contato__heading{
    font-size: clamp(32px, 8vw, 42px);
  }

  .contato__heading-text{
    font-size: 28px;
  }

  .contato__subtitle{
    padding-inline: 6px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ===== grid vira coluna ===== */
  .contato__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* ===== cards ===== */
  .contato__form,
  .contato__info{
    padding: 18px;
    border-radius: 16px;
  }

  /* ===== linha com 2 campos vira 1 coluna ===== */
  .contato__row{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* ===== inputs com área de toque ===== */
  .contato__field input,
  .contato__field select,
  .contato__field textarea{
    padding: 14px 14px;
    font-size: 16px; /* evita zoom iOS */
  }

  /* ===== botão ===== */
  .contato__submit{
    padding: 14px 18px;
  }

  /* ===== infos ===== */
  .contato__info-text span,
  .contato__link{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ===== sociais centralizadas ===== */
  .contato__social{
    justify-content: flex-start;
    gap: 14px;
  }

  /* ===== toast não encosta nas bordas ===== */
  .toast{
    bottom: 16px;
    max-width: calc(100vw - 32px);
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  html, body{ overflow-x: hidden; }

  .contato__grid > *,
  .contato__form *,
  .contato__info *{
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* ===== heading ajustes leves ===== */
  .contato__heading{
    font-size: clamp(36px, 6vw, 52px);
  }

  .contato__heading-text{
    font-size: 32px;
  }

  .contato__subtitle{
    padding-inline: 8px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ===== grid ainda em coluna (melhor UX no tablet) ===== */
  .contato__grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contato__row{
    grid-template-columns: 1fr 1fr;
  }

  /* ===== inputs ===== */
  .contato__field input,
  .contato__field select,
  .contato__field textarea{
    padding: 13px 14px;
  }

  .contato__submit{
    padding: 13px 18px;
  }

  .toast{
    max-width: min(520px, calc(100vw - 32px));
  }
}









/* ==================================================
   FOOTER — PREMIUM (Agência)
   - Dark premium + borda neon sutil
   - Grid responsivo
   - Hover elegante nos links
================================================== */

.footer{
  position: relative;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #000000;
  color: rgba(255,255,255,.86);
  border-top: 1px solid rgba(0, 0, 0, 0.6);
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}

/* brilho sutil em baixo */
.footer::after{
  content:"";
  position:absolute;
  left: -20%;
  right: -20%;
  bottom: -120px;
  height: 240px;
  background: radial-gradient(closest-side, rgba(0,255,194,.10), transparent 70%);
  filter: blur(10px);
  pointer-events:none;
}

.footer__container{
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 60px 20px 28px;
}

.footer__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ===== BRAND ===== */
.footer__brand{
  display: grid;
  gap: 14px;
  align-content: start;
}

.footer__logo-link{
  display: inline-flex;
  width: fit-content;
  text-decoration: none;
  border-radius: 16px;
  padding: 6px 8px;
  transition: transform .25s ease, filter .25s ease, background .25s ease;
}

.footer__logo-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.35));
}

.footer__logo{
  filter: brightness(0) invert(1);
  height: 64px;
  width: auto;
  display:block;
}

.footer__tagline{
  margin: 0;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

/* ===== COLS ===== */
.footer__col{
  display: grid;
  gap: 14px;
  align-content: start;
}

.footer__title{
  margin: 0;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  position: relative;
  padding-bottom: 10px;
}

/* underline premium */
.footer__title::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 99px;
  background: #28c700;
  box-shadow: 0 10px 22px rgba(62, 210, 176, 0.16);
}

.footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.footer__link{
  color: rgba(255,255,255,.74);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  width: fit-content;
  position: relative;
  padding: 2px 0;
  transition: color .2s ease, transform .2s ease;
}

/* micro underline que cresce */
.footer__link::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  border-radius: 99px;
  background: #28c700;
  transition: width .22s ease;
  opacity: .9;
}

.footer__link:hover{
  color: rgba(255,255,255,.95);
  transform: translateX(2px);
}

.footer__link:hover::after{
  width: 100%;
}

.footer__item{
  font-size: 15px;
  color: rgba(255,255,255,.74);
}

/* ===== BOTTOM ===== */
.footer__bottom{
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  place-items: center;
}

.footer__copy{
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,.60);
  text-align: center;
}




/* =========================================================
   RESPONSIVO — FOOTER (premium)
   Regras:
   - NÃO altera desktop (>= 992px) ✅
   - Sem scroll horizontal ✅
   - Grid adaptável (tablet/mobile) ✅
   - Textos com respiro lateral ✅
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  html, body{ overflow-x: hidden; }

  /* ✅ garante que nada estoure a largura */
  .footer__container,
  .footer__grid,
  .footer__grid *{
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ✅ mais respiro lateral (nada colado) */
  .footer__container{
    padding: 44px 16px 22px;
  }

  /* ✅ grid vira coluna */
  .footer__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* ✅ logo mais compacta no mobile */
  .footer__logo{
    height: 64px;
  }

  /* ✅ títulos/links sem “vazar” */
  .footer__tagline,
  .footer__link,
  .footer__item,
  .footer__copy{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ✅ bottom com espaçamento menor */
  .footer__bottom{
    margin-top: 26px;
    padding-top: 18px;
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  html, body{ overflow-x: hidden; }

  .footer__container,
  .footer__grid,
  .footer__grid *{
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ✅ respiro lateral suave */
  .footer__container{
    padding: 56px 18px 26px;
  }

  /* ✅ 2 colunas no tablet (mais equilibrado) */
  .footer__grid{
    grid-template-columns: 1.2fr 1fr;
    gap: 34px 28px;
  }

  /* ✅ logo levemente menor */
  .footer__logo{
    height: 72px;
  }

  .footer__tagline,
  .footer__link,
  .footer__item,
  .footer__copy{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}









/* =========================================
   FAB — Voltar ao Topo (LEFT) + Shine + Bubble
========================================= */
.fabtop{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9999;

  width: 54px;
  height: 54px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(10,10,10,.72);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  cursor: pointer;

  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background .22s ease;

  overflow: hidden; /* necessário pro shine */
  -webkit-tap-highlight-color: transparent;
}

.fabtop--left{ left: 18px; right: auto; }

.fabtop.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.fabtop:hover{
  border-color: rgba(40,199,0,.55);
  background: rgba(10,10,10,.82);
}

.fabtop:active{
  transform: translateY(0) scale(.98);
}

.fabtop:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(40,199,0,.25), 0 14px 34px rgba(0,0,0,.35);
}

/* ===== Ícone ===== */
.fabtop__icon{
  position: relative;
  z-index: 2;
  fill: rgba(255,255,255,.92);
  transition: transform .22s ease, fill .22s ease;
}

.fabtop:hover .fabtop__icon{
  fill: #fff;
  transform: translateY(-1px);
}

/* ===== Shine (mesma vibe do teu botão) ===== */
.fabtop__shine{
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.0) 30%,
    rgba(255,255,255,.22) 45%,
    rgba(255,255,255,.0) 60%,
    transparent 100%
  );
  transform: translateX(-60%) rotate(10deg);
  opacity: .0;
  z-index: 1;
  pointer-events: none;
}

.fabtop:hover .fabtop__shine{
  opacity: 1;
  animation: fabtop-shine 900ms ease forwards;
}

@keyframes fabtop-shine{
  from{ transform: translateX(-60%) rotate(10deg); }
  to{ transform: translateX(60%) rotate(10deg); }
}

/* ===== Bubble (balão) ===== */
.fabtop__bubble{
  position: absolute;
  left: calc(100% + 12px);
  bottom: 50%;
  transform: translateY(50%);

  padding: 10px 12px;
  border-radius: 12px;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;

  color: rgba(255,255,255,.92);
  background: rgba(10,10,10,.74);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);

  opacity: 0;
  transform: translateY(50%) translateX(-6px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 3;
}

/* setinha apontando pro botão */
.fabtop__bubble::before{
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(10,10,10,.74);
  border-left: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

/* quando liberado pelo JS (3s após aparecer) */
.fabtop.is-bubble{
  overflow: visible; /* pra bubble não cortar */
}

.fabtop.is-bubble .fabtop__bubble{
  opacity: 1;
  transform: translateY(50%) translateX(0);
}

/* se o usuário passar o mouse, mantém visível e mais “presente” */
.fabtop:hover .fabtop__bubble{
  opacity: 1;
  transform: translateY(50%) translateX(0);
}

/* Acessibilidade: reduz animações */
@media (prefers-reduced-motion: reduce){
  .fabtop{ transition: none; }
  .fabtop__icon{ transition: none; }
  .fabtop__bubble{ transition: none; }
  .fabtop__shine{ animation: none !important; }
}




/* =========================================================
   RESPONSIVO — FABTOP (Voltar ao Topo)
   Regras:
   - NÃO altera desktop (>= 992px) ✅
   - Sem scroll horizontal ✅
   - Área de toque boa no mobile ✅
   - Bubble não pode “vazar” pra fora da tela ✅
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  /* ✅ botão um pouco maior pro toque */
  .fabtop{
    width: 58px;
    height: 58px;
    left: 14px;
    bottom: 14px;
  }

  .fabtop--left{ left: 14px; }

  /* ✅ no mobile o bubble na lateral geralmente corta/estoura:
     joga pra CIMA do botão e centraliza */
  .fabtop__bubble{
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);

    max-width: calc(100vw - 28px);
    white-space: normal;        /* permite quebrar linha */
    text-align: center;

    /* ajusta animação base */
    transform: translateX(-50%) translateY(6px);
  }

  .fabtop__bubble::before{
    left: 50%;
    top: auto;
    bottom: -6px;
    transform: translateX(-50%) rotate(45deg);

    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid rgba(255,255,255,.14);
    border-top: 1px solid rgba(255,255,255,.14);
  }

  .fabtop.is-bubble .fabtop__bubble,
  .fabtop:hover .fabtop__bubble{
    transform: translateX(-50%) translateY(0);
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  /* ✅ leve ajuste de posição/área de toque */
  .fabtop{
    left: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
  }

  .fabtop--left{ left: 16px; }

  /* ✅ evita bubble ultrapassar viewport em tablets menores */
  .fabtop__bubble{
    max-width: calc(100vw - 40px);
    white-space: normal;
  }
}









/* ==================================================
   FAB - WHATSAPP
================================================== */
:root{
  --fab-size: 60px;
}

/* ===== FAB BASE ===== */
.fabwa{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  height: var(--fab-size);
  width: var(--fab-size);
  padding: 0;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(10,10,10,.72);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;

  transition: width 700ms cubic-bezier(.16,1,.3,1),
              padding 700ms cubic-bezier(.16,1,.3,1);
}

/* ===== ÍCONE CENTRALIZADO ===== */
.fabwa__icon{
  position: absolute;
  inset: 0;
  margin: auto;

  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: opacity .25s ease;
}

.fabwa__icon img{
  width: 30px;
  height: 30px;
  display: block;
}

/* ===== LABEL ===== */
.fabwa__label{
  display: flex;
  align-items: center;
  gap: 10px;

  white-space: nowrap;

  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;

  transition: opacity .3s ease, transform .6s cubic-bezier(.16,1,.3,1);
}

.fabwa__label-icon{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fabwa__label-icon img{
  width: 30px;
  height: 30px;
}

.fabwa__text{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.92);
}

/* ===== ESTADO ABERTO ===== */
.fabwa.is-open{
  width: auto;                /* 🔥 largura automática (sem espaço vazio) */
  padding: 0 18px;
  justify-content: flex-start;
}

.fabwa.is-open .fabwa__icon{
  opacity: 0;
}

.fabwa.is-open .fabwa__label{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}




/* ==================================================
   COOKIE BAR — LGPD (padrão visual do site)
================================================== */

.cookiebar{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 99999;

  display: none;
}

.cookiebar.is-show{
  display: block;
}

.cookiebar__inner{
  width: min(980px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;

  padding: 16px 16px;
  border-radius: 18px;

  background: rgba(10,10,10,.95);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

/* ===== TEXTO ===== */

.cookiebar__title{
  display: inline-block;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,.95);
  margin-bottom: 6px;
}

.cookiebar__p{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  font-size: 14px;
}

.cookiebar__link{
  display: inline-flex;
  margin-top: 8px;
  font-size: 13px;
  color: rgba(40,199,0,.95);
  text-decoration: none;
}

.cookiebar__link:hover{
  text-decoration: underline;
}

/* ===== AÇÕES ===== */

.cookiebar__actions{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ==================================================
   BOTÕES — PADRÃO DO SITE (baseado em .sobre__button)
================================================== */

.cookiebar__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 18px;
  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #ffffff;

  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;

  cursor: pointer;
  position: relative;
  overflow: hidden;

  transition: transform .18s ease,
              background .18s ease,
              border-color .18s ease;
}

.cookiebar__btn:hover{
  transform: translateY(-1px);
  background: rgba(40,199,0,.10);
  border-color: rgba(40,199,0,.55);
}

/* ===== Shine premium ===== */

.cookiebar__btn::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.20) 50%,
    transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .65s ease;
  pointer-events:none;
}

.cookiebar__btn:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
}

/* ===== BOTÃO ACEITAR (variação verde) ===== */

.cookiebar__btn--ok{
  border-color: rgba(40,199,0,.55);
  background: rgba(40,199,0,.15);
  color: #eaffea;
}

.cookiebar__btn--ok:hover{
  background: rgba(40,199,0,.22);
  border-color: rgba(40,199,0,.8);
}

/* ===== ANIMAÇÃO SUAVE DE ENTRADA ===== */
.cookiebar{
  /* estado inicial (invisível) */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .28s ease, transform .42s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}

.cookiebar.is-show{
  opacity: 1;
  transform: translateY(0);
}




/* ==================================================
   RESPONSIVO — COOKIE BAR MOBILE
   Corrige largura, respiro e conflito com WhatsApp
================================================== */

@media (max-width: 575.98px){

  .cookiebar,
  .cookiebar *{
    box-sizing: border-box;
  }

  .cookiebar{
    left: 10px;
    right: 10px;

    /* sobe o aviso para não brigar com o botão do WhatsApp */
    bottom: calc(105px + env(safe-area-inset-bottom));
  }

  .cookiebar__inner{
    width: 100%;
    max-width: 100%;

    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;

    padding: 14px 14px 16px;
    border-radius: 16px;
    background: rgba(10, 10, 10, .95);

    max-height: calc(100vh - 120px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cookiebar__title{
    font-size: 13px;
    margin-bottom: 5px;
  }

  .cookiebar__p{
    font-size: 12px;
    line-height: 1.45;
  }

  .cookiebar__link{
    margin-top: 6px;
    font-size: 12px;
  }

  .cookiebar__actions{
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .cookiebar__btn{
    width: 100%;
    min-width: 0;

    padding: 12px 10px;
    font-size: 10px;
    letter-spacing: .06em;

    white-space: nowrap;
  }
}





/* ==================================================
   EXIT POPUP — PREMIUM CONVERSÃO
================================================== */

.exitpop{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.exitpop.is-show{
  display: block;
}

/* overlay */
.exitpop__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(40,199,0,.12), transparent 38%),
    rgba(0,0,0,.68);
  backdrop-filter: blur(7px);
}

/* card */
.exitpop__card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -44%) scale(.94);

  width: min(460px, calc(100% - 32px));
  padding: 34px 28px 26px;
  border-radius: 24px;

  background:
    linear-gradient(180deg, rgba(22,22,22,.94), rgba(8,8,8,.96));
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(18px);

  box-shadow:
    0 34px 90px rgba(0,0,0,.70),
    0 0 0 1px rgba(40,199,0,.08),
    0 0 45px rgba(40,199,0,.10);

  text-align: center;
  overflow: hidden;

  opacity: 0;
  transition:
    opacity .28s ease,
    transform .38s cubic-bezier(.22,1,.36,1);
}

.exitpop.is-show .exitpop__card{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* brilho interno */
.exitpop__card::before{
  content:"";
  position:absolute;
  left: 50%;
  top: -90px;
  width: 260px;
  height: 160px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(40,199,0,.22), transparent 65%);
  pointer-events: none;
}

.exitpop__card::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.10),
    transparent 32%,
    transparent 70%,
    rgba(40,199,0,.08)
  );
}

/* close */
.exitpop__close{
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;

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

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.68);

  font-size: 17px;
  cursor: pointer;

  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.exitpop__close:hover{
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* badge */
.exitpop__badge{
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;

  background: rgba(40,199,0,.10);
  border: 1px solid rgba(40,199,0,.28);
  color: #7CFF63;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* text */
.exitpop__title{
  position: relative;
  z-index: 1;

  max-width: 360px;
  margin: 0 auto 12px;

  color: #fff;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.04em;
}

.exitpop__text{
  position: relative;
  z-index: 1;

  max-width: 360px;
  margin: 0 auto 22px;

  color: rgba(255,255,255,.76);
  font-size: 15.5px;
  line-height: 1.65;
}

/* botão */
.exitpop__cta{
  position: relative;
  z-index: 1;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;

  background: #28c700;
  border: 1px solid rgba(124,255,99,.55);

  color: #071007;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;

  box-shadow:
    0 14px 34px rgba(40,199,0,.25),
    inset 0 1px 0 rgba(255,255,255,.32);

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

.exitpop__cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 18px 44px rgba(40,199,0,.34),
    inset 0 1px 0 rgba(255,255,255,.38);
}

/* shine */
.exitpop__cta::after{
  content:"";
  position:absolute;
  top: -80%;
  bottom: -80%;
  width: 42px;
  left: -60px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.55),
    transparent
  );

  transform: rotate(22deg);
  transition: left .75s ease;
}

.exitpop__cta:hover::after{
  left: calc(100% + 70px);
}

.exitpop__note{
  position: relative;
  z-index: 1;

  display: block;
  margin-top: 13px;

  color: rgba(255,255,255,.48);
  font-size: 12px;
}




/* =========================================================
   RESPONSIVO — EXIT POPUP
   Corrige vazamento no mobile
========================================================= */

/* ================= MOBILE (max-width: 575.98px) ================= */
@media (max-width: 575.98px){

  html, body{
    overflow-x: hidden;
  }

  .exitpop,
  .exitpop *{
    box-sizing: border-box;
  }

  .exitpop__card{
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin-left: auto;
    margin-right: auto;

    padding: 22px 18px 18px;
    border-radius: 20px;

    max-height: calc(100vh - 28px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .exitpop__title{
    font-size: 20px;
    line-height: 1.18;
    margin-bottom: 8px;

    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .exitpop__text{
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 16px;

    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .exitpop__cta{
    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 14px 16px;
    text-align: center;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .exitpop__close{
    top: 8px;
    right: 8px;

    width: 42px;
    height: 42px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    line-height: 1;
  }
}

/* ================= TABLET (min-width: 576px) and (max-width: 991.98px) ================= */
@media (min-width: 576px) and (max-width: 991.98px){

  html, body{ overflow-x: hidden; }

  .exitpop__card{
    width: min(520px, calc(100% - 40px));
    max-height: calc(100vh - 60px);
    overflow: auto;
  }

  .exitpop__title,
  .exitpop__text{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .exitpop__cta{
    padding: 13px 20px;
  }

  .exitpop__close{
    padding: 8px;
  }
}








/* =========================================================
   RESPONSIVO — DESKTOP (min-width: 992px) and (max-width: 1199.98px)
   Objetivo:
   - “notebook / desktop pequeno”
   - mantém visual/identidade e layout do desktop
   - só ajusta respiro e larguras máximas pra não apertar
========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px){

  /* ================= BASE (.section / container) ================= */
  .section > .container{
    box-sizing: border-box;
    width: min(1100px, 100%);
    padding-left: 20px;
    padding-right: 20px;
  }

  /* headings padrão (leve ajuste só se necessário) */
  .sobre__heading,
  .metodologia__heading,
  .servicos__heading,
  .portfolio__heading,
  .faq__heading{
    margin-bottom: 26px;
  }

  /* ================= SOBRE ================= */
  .sobre__content{
    gap: 36px; /* um pouco menos que 42, sem mudar layout */
  }

  .sobre__image-wrapper{
    width: 400px; /* reduz leve pra caber melhor em 992~1100 */
  }

  /* ================= METODOLOGIA ================= */
  .metodologia__layout{
    grid-template-columns: 400px 1fr; /* reduz leve */
    gap: 52px; /* reduz leve */
  }

  .metodologia__image-wrapper{
    width: 420px; /* reduz leve (era 450) */
  }

  .metodologia__step-text{
    max-width: 600px; /* evita linhas longas demais */
  }

  /* ================= SERVIÇOS ================= */
  .servico-card{
    grid-template-columns: 220px 1fr; /* reduz leve */
    gap: 20px;
  }

  /* ================= PORTFÓLIO ================= */
  .portfolio__lead{
    max-width: 820px;
  }

  .portfolio-card__slider{
    height: clamp(280px, 34vw, 500px);
  }

  .portfolio__cta{
    gap: 14px;
  }

  /* setas um pouco mais “safe” */
  .portfolio-card__arrow--prev{ left: 12px; }
  .portfolio-card__arrow--next{ right: 12px; }

  /* ================= FAQ ================= */
  .faq-grid{
    max-width: 1100px; /* mantém */
  }

  /* CTA card: mantém confortável */
  .faq-cta{
    max-width: 1100px;
  }

  /* ================= CONTATO ================= */
  .contato__grid{
    grid-template-columns: 1.05fr .95fr; /* micro ajuste (era 1.1/.9) */
    gap: 22px;
  }

  /* ================= FOOTER ================= */
  .footer__container{
    width: min(1200px, 100%);
    padding: 58px 20px 28px;
  }

  .footer__grid{
    gap: 34px; /* era 40 */
  }

  .footer__logo{
    height: 82px; /* era 86 */
  }

  /* ================= FABTOP (mantém) ================= */
  .fabtop{
    left: 18px;
    bottom: 18px;
  }

  /* ================= EXIT POPUP (mantém) ================= */
  .exitpop__card{
    width: min(440px, calc(100% - 40px));
  }
}




/* =========================================================
   AJUSTE FINO — PORTFÓLIO (992px–1199.98px)
   - aumenta altura do card/slider
   - botão overlay sempre visível no canto inferior direito
========================================================= */
@media (min-width: 992px) and (max-width: 1199.98px){

  /* ✅ 1) mais altura no slider (sem distorcer imagem) */
  .portfolio-card__slider{
    height: clamp(340px, 40vw, 560px);
  }

  /* ✅ 2) overlay vira “badge” no canto inferior direito */
  .portfolio-card__overlay{
    opacity: 1;
    pointer-events: none;
    place-items: end;
    padding: 14px;
  }

  .portfolio-card__button{
    pointer-events: auto;
    padding: 10px 14px;
    font-size: 13px;
    letter-spacing: .06em;
    border-radius: 14px;
  }

  /* garante que não brigue com dots */
  .portfolio-card__dots{
    left: 14px;
    bottom: 14px;
  }
}




/* mostra hamburguer no mobile/tablet */
@media (max-width: 991.98px){
  .nav__toggle{
    display: flex;
    z-index: 9999;
  }

  .nav__overlay{
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  .nav__overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }

  .menu{
    position: fixed;
    top: 0;
    right: 0;
    width: 82%;
    max-width: 320px;
    height: 100vh;
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 9999;
  }

  .menu.is-open{
    transform: translateX(0);
  }

  .no-scroll{
    overflow: hidden;
  }
}