/* ============================================================
   UPay — componentes compartilhados
   header, footer, hero, botões, listas, grids, steps, cards
   ============================================================ */

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .52em 1.6em;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--solid {
  background: var(--blue);
  color: #fff;
}
.btn--solid:hover { background: var(--blue-bright); color: #fff; }
.btn--outline-light {
  border-color: #fff;
  color: #fff;
}
.btn--outline-light:hover { border-color: var(--blue-bright); color: var(--blue-bright); }
.btn--outline-blue {
  border-color: var(--blue);
  color: var(--blue);
}
.btn--outline-blue:hover { background: var(--blue); color: #fff; }
.btn--lg { font-size: clamp(.875rem, .833vw, 1rem); padding: .6em 1.9em; }

/* ---------- header ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding-block: clamp(1rem, 3vw, 3.6rem);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.6rem);
}
.site-header__logo img { width: clamp(150px, 14vw, 300px); height: auto; }
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.25vw, 1.5rem);
  font-size: var(--fs-small);
  font-weight: 300;
  color: #fff;
}
.site-nav a { color: #fff; white-space: nowrap; }
.site-nav a:hover { color: var(--blue-bright); }
.site-nav a.btn--solid, .site-nav a.btn--solid:hover { color: #fff; }
.site-header__cta { margin-left: clamp(.5rem, 1.4vw, 1.6rem); }
.site-header__login { margin-left: auto; }
/* desktop: usa o login da barra; o login do menu (overlay mobile) fica oculto */
.site-header__login--menu { display: none; }

/* dropdown Parcerias */
.nav-drop { position: relative; }
.nav-drop > a { display: inline-flex; align-items: center; }
.nav-drop__menu {
  position: absolute;
  top: calc(100% + .9rem);
  left: 50%;
  translate: -50% 0;
  min-width: 13.5rem;
  padding: .5rem 0;
  background: #0c0f13;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .5rem;
  display: none;
  flex-direction: column;
}
.nav-drop__menu a { padding: .55rem 1.25rem; }
.nav-drop.is-open .nav-drop__menu { display: flex; }
/* hover/foco só no desktop — no mobile o foco do toque travaria o acordeão aberto */
@media (min-width: 1181px) {
  .nav-drop:hover .nav-drop__menu,
  .nav-drop:focus-within .nav-drop__menu { display: flex; }
}
.nav-drop__menu::before {           /* ponte de hover */
  content: '';
  position: absolute;
  top: -1rem; left: 0; right: 0; height: 1rem;
}

/* hamburger (mobile) */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  position: relative;
  z-index: 30;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  display: block;
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: #fff;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { left: 0; right: 0; top: -8px; }
.nav-toggle span::after { left: 0; right: 0; top: 8px; }
.nav-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(-90deg) translateX(-8px); }
.nav-toggle[aria-expanded="true"] span::after { opacity: 0; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--bg-dark);
  background-image: var(--grad-dark);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* o texto do hero senta abaixo do centro geométrico no design */
.hero > .container {
  position: relative;
  z-index: 1;
  padding-top: var(--hero-shift, clamp(3rem, 6.6vw, 7.9rem));
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  max-width: 13em;
}
.hero__lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.4;
  margin-top: 1.5em;
  max-width: 24em;
}
.hero__actions {
  display: flex;
  gap: 1rem;
  margin-top: 2.2em;
  flex-wrap: wrap;
}
/* alturas proporcionais ao artboard (1920 de largura) */
.hero--865 { min-height: min(45.05vw, 865px); }
.hero--754 { min-height: min(39.27vw, 754px); }
.hero--703 { min-height: min(36.61vw, 703px); }
.hero--637 { min-height: min(33.18vw, 637px); }
.hero--467 { min-height: min(24.32vw, 467px); padding-top: clamp(4rem, 7vw, 8rem); }

/* ---------- check list ---------- */
.check-list { display: grid; gap: .9em; }
.check-list li {
  position: relative;
  padding-left: 2em;
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.4;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .18em;
  width: 1.25em;
  height: .95em;
  background: var(--blue);
  -webkit-mask: url('../img/icons/check.svg') no-repeat center / contain;
  mask: url('../img/icons/check.svg') no-repeat center / contain;
}
.check-list--strong li { font-weight: 400; }

/* ---------- grid de ícones ---------- */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3.5rem) clamp(1rem, 2.5vw, 3rem);
}
.icon-grid--2 { grid-template-columns: repeat(2, 1fr); }
.icon-grid--3 { grid-template-columns: repeat(3, 1fr); }
.icon-card__icon { height: clamp(34px, 2.7vw, 52px); width: auto; margin-bottom: .9rem; }
.icon-card__title {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: 1.3;
}
.icon-card__desc {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.45;
  margin-top: .35em;
  color: var(--ink-soft);
}
.section--dark .icon-card__desc { color: #c7c7c7; }

/* item com ícone à esquerda (lista IA, canais) */
.icon-row { display: flex; gap: 1.1rem; align-items: flex-start; }
.icon-row__icon { width: clamp(30px, 2.4vw, 46px); flex: none; }

/* ---------- steps horizontais (timeline numerada) ---------- */
.steps-h {
  --dot: clamp(1.5rem, 1.41vw, 1.7rem);
  display: flex;
  justify-content: space-between;
  position: relative;
  counter-reset: step;
}
.steps-h::before {
  content: '';
  position: absolute;
  top: calc(var(--dot, 2.25rem) / 2);
  left: 8%; right: 8%;
  height: 1px;
  background: #d9d9d9;
}
.steps-h__item {
  position: relative;
  flex: 1;
  text-align: center;
  padding-inline: .5rem;
}
.steps-h__num {
  counter-increment: step;
  width: var(--dot, 2.25rem);
  height: var(--dot, 2.25rem);
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 400;
  position: relative;
  z-index: 1;
}
.steps-h__num::before { content: counter(step); font-size: .78em; }
.steps-h__title { font-size: var(--fs-body-lg); font-weight: 400; line-height: 1.3; }
.steps-h__desc {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--ink-soft);
  margin-top: .4em;
}
.section--dark .steps-h__desc { color: #c7c7c7; }
.section--dark .steps-h::before { background: rgba(255, 255, 255, .25); }

/* ---------- steps verticais ("Como contratar") ---------- */
.steps-v { display: grid; gap: 1.5rem; counter-reset: step; position: relative; }
.steps-v::before {
  content: '';
  position: absolute;
  top: 1rem; bottom: 1rem;
  left: calc(var(--dot, 2.25rem) / 2);
  width: 1px;
  background: rgba(127, 127, 127, .4);
}
.steps-v__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: var(--fs-body-lg);
  font-weight: 300;
}
.steps-v__item::before {
  counter-increment: step;
  content: counter(step);
  flex: none;
  width: var(--dot, 2.25rem);
  height: var(--dot, 2.25rem);
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 400;
  position: relative;
  z-index: 1;
}

/* ---------- fluxo com setas (Como funciona o modelo) ---------- */
.flow-arrows {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.flow-arrows__item { flex: 1; text-align: center; max-width: 15rem; }
.flow-arrows__icon { height: clamp(40px, 3.2vw, 62px); width: auto; margin: 0 auto .9rem; }
.flow-arrows__sep {
  flex: none;
  align-self: center;
  width: clamp(1.4rem, 2.4vw, 2.9rem);
  height: clamp(1.4rem, 2.4vw, 2.9rem);
  margin-top: -1.5rem;
  background:
    linear-gradient(45deg, transparent 44%, #d9d9d9 44%, #d9d9d9 56%, transparent 56%) no-repeat 100% 0 / 50% 50%,
    linear-gradient(135deg, transparent 44%, #d9d9d9 44%, #d9d9d9 56%, transparent 56%) no-repeat 100% 100% / 50% 50%;
}
.flow-arrows__title { font-size: var(--fs-body-lg); font-weight: 400; }
.flow-arrows__desc {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--ink-soft);
  margin-top: .4em;
}

/* ---------- grid com réguas verticais (Quem pode ser / Monetização) ---------- */
.divided-grid { display: grid; }
.divided-grid > * { padding: 1rem clamp(1rem, 1.8vw, 2rem); }
.divided-grid--6 { grid-template-columns: repeat(6, 1fr); }
.divided-grid--3 { grid-template-columns: repeat(3, 1fr); }
.divided-grid--6 > :not(:first-child),
.divided-grid--3 > :not(:nth-child(3n + 1)) { border-left: 1px solid #d9d9d9; }
.divided-grid--3 > :nth-child(n + 4) { border-top: 1px solid #d9d9d9; }

/* ---------- cards de proposta de valor (borda azul) ---------- */
.value-card {
  background: rgba(255, 255, 255, .04);
  border-left: 4px solid var(--blue);
  padding: clamp(1.25rem, 2vw, 2rem);
}
.value-card h3 { font-size: var(--fs-body-lg); font-weight: 500; margin-bottom: .6em; }
.value-card p { font-size: var(--fs-small); font-weight: 300; line-height: 1.5; color: #c7c7c7; }

/* ---------- ui-card (mockup "Recebíveis disponíveis") ---------- */
.ui-card {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-ui);
  box-shadow: var(--shadow-card-dark);
  padding: clamp(1.25rem, 1.8vw, 2rem);
  max-width: 23rem;
}
.ui-card__label { font-size: var(--fs-small); font-weight: 400; }
.ui-card__hint { font-size: var(--fs-tiny); color: var(--ink-mute); }
.ui-card__value { font-size: clamp(1.4rem, 1.7vw, 2rem); font-weight: 500; }
.ui-card__value--blue { color: var(--blue); font-size: clamp(1.15rem, 1.35vw, 1.6rem); }
.ui-card__pill {
  display: inline-block;
  background: var(--success-bg);
  color: var(--success-ink);
  font-size: var(--fs-tiny);
  font-weight: 400;
  border-radius: .35rem;
  padding: .45em .9em;
  white-space: nowrap;
}
.ui-card .btn { width: 100%; margin-top: 1.1rem; }

/* toast flutuante "Antecipação realizada!" */
.ui-toast {
  position: absolute;
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-ui);
  box-shadow: var(--shadow-card-dark);
  padding: 1rem 1.3rem;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: var(--fs-tiny);
  max-width: 17rem;
}
.ui-toast strong { display: block; font-weight: 500; font-size: var(--fs-small); }
.ui-toast__check {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--success);
  position: relative;
}
.ui-toast__check::after {
  content: '';
  position: absolute;
  inset: 30% 28% 36%;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ---------- diagrama da maquininha (POS + callouts) ---------- */
.pos-diagram {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 30vw, 36rem);
}
.pos-diagram__circle {
  position: absolute;
  width: clamp(18rem, 26vw, 31rem);
  height: clamp(18rem, 26vw, 31rem);
  border: 1px dashed #c4c4c4;
  border-radius: 50%;
}
.pos-diagram__img {
  width: clamp(11rem, 16vw, 19rem);
  rotate: -2.85deg;
  position: relative;
  z-index: 1;
}
.pos-callout {
  position: absolute;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.35;
  text-align: center;
  max-width: 11rem;
}
.pos-callout::after {
  content: '';
  position: absolute;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--blue);
}
.pos-callout--tl { top: 4%; right: 78%; }
.pos-callout--tr { top: 4%; left: 78%; }
.pos-callout--ml { top: 42%; right: 88%; }
.pos-callout--mr { top: 42%; left: 88%; }
.pos-callout--bl { bottom: 4%; right: 78%; }
.pos-callout--br { bottom: 4%; left: 78%; }
.pos-callout--tl::after, .pos-callout--ml::after, .pos-callout--bl::after { right: -1.4rem; top: 50%; }
.pos-callout--tr::after, .pos-callout--mr::after, .pos-callout--br::after { left: -1.4rem; top: 50%; }

/* ---------- FAQ (details/summary) ---------- */
.faq-cat {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-h2);
  font-weight: 400;
  margin-bottom: 1.2em;
}
.faq-cat img { width: clamp(28px, 2.4vw, 46px); }
.faq-item {
  border-bottom: 1px solid rgba(127, 127, 127, .25);
  padding-block: .9rem;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-body-lg);
  font-weight: 400;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex: none;
  width: .55em; height: .55em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-item p {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.55;
  padding-top: .7rem;
  max-width: 70rem;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--bg-dark);
  background-image: var(--grad-dark);
  color: #fff;
  padding-block: clamp(2.5rem, 3.5vw, 4.2rem) clamp(1.2rem, 1.8vw, 2rem);
  position: relative;
  overflow: hidden;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr .72fr 1fr;
  gap: clamp(1.5rem, 3vw, 4rem);
  align-items: start;
}
.site-footer__logo { width: clamp(150px, 14vw, 300px); height: auto; }   /* = header (D16) */
.site-footer__contacts { margin-top: clamp(1.5rem, 2.4vw, 2.8rem); display: grid; gap: .9rem; }
.site-footer__contacts li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.45;
}
.site-footer__contacts img { width: 1.1rem; flex: none; margin-top: .15em; }
/* mail.svg tem viewBox justo ao glifo (sem padding/clip) → casa no MESMO 1.1rem do pin/whatsapp,
   sem override de largura (o envelope é largo+baixo, mas alinhado em tamanho aos demais ícones) */
.site-footer__col h3 {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
/* especificidade acima do reset de <ul> acima */
.site-footer ul.site-footer__contacts { margin-top: clamp(1.8rem, 2.6vw, 3.1rem); }
.site-footer__col ul { display: grid; gap: .85rem; }
.site-footer__col a { font-size: var(--fs-small); font-weight: 300; color: #e8e8e8; }
.site-footer__col a:hover { color: var(--blue-bright); }
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: clamp(2rem, 3vw, 3.5rem);
  padding-top: clamp(1.2rem, 1.8vw, 2rem);
  position: relative;
}
.site-footer__legal {
  font-size: var(--fs-tiny);
  font-weight: 300;
  color: #b5b5b5;
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  line-height: 1.6;
}
.site-footer__legal + .site-footer__legal { margin-top: 1em; }
.site-footer__social {
  display: flex;
  gap: .9rem;
  margin-top: clamp(1.5rem, 2.4vw, 2.8rem);
}
.site-footer__social a { color: #fff; width: 1.2rem; }
/* ícones são <img> de fill branco → color não pinta; tint azul (≈--blue-bright #179aff) via filter.
   SEM transition: interpolar a cadeia de filter passava pelo verde (hue-rotate) → troca instantânea */
.site-footer__social a:hover img {
  filter: brightness(0) saturate(100%) invert(54%) sepia(83%) saturate(2210%) hue-rotate(190deg) brightness(101%) contrast(101%);
}

/* ---------- banner CTA escuro (rounded) ---------- */
.cta-banner {
  background: var(--bg-dark);
  background-image: var(--grad-dark);
  color: #fff;
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 2.6vw, 3rem) clamp(1.5rem, 3vw, 3.6rem);
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.8rem);
}
.cta-banner__icon { width: clamp(2.4rem, 3vw, 3.6rem); flex: none; }
.cta-banner p { font-size: var(--fs-body-lg); font-weight: 300; line-height: 1.45; }
.cta-banner .btn { margin-left: auto; flex: none; min-width: clamp(12rem, 18.2vw, 21.9rem); }

/* bloco de CTA centralizado ao fim de uma seção (claro ou escuro) */
.section-cta { text-align: center; margin-top: clamp(2.4rem, 4vw, 4rem); }
.section-cta p { font-size: var(--fs-body-lg); font-weight: 300; margin-bottom: 1.4rem; }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  /* garante que o conteúdo do hero não fique sob o header absoluto
     e tenha respiro antes da próxima seção */
  .hero > .container {
    padding-top: max(var(--hero-shift, 0px), 6rem);
    padding-bottom: clamp(2.75rem, 9vw, 4rem);
  }
  /* em larguras menores o recorte (cover) da onda traz os tracejados para
     trás do texto — scrim diagonal protege a coluna de texto e some sobre a
     área direita/inferior, onde a onda deve continuar aparente */
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, rgba(1, 6, 10, .94) 0%, rgba(1, 6, 10, .66) 46%, rgba(1, 6, 10, 0) 74%);
    pointer-events: none;
  }
  .site-nav {
    position: fixed;
    inset: 0;
    background: rgba(1, 6, 10, .97);   /* preto translúcido (deixa a página vazar de leve) */
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    font-size: 1.1rem;
    display: none;
    z-index: 25;
  }
  .site-nav.is-open { display: flex; }
  /* onda discreta ao fundo do overlay — SEM mix-blend-mode (o screen clareava a página
     que vaza pelo fundo translúcido); só uma textura sutil. z-index:-1 fica atrás dos itens */
  .site-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/waves/wave-hero-03.svg) no-repeat right center / cover;
    opacity: .14;
    pointer-events: none;
    z-index: -1;
  }
  .nav-toggle { display: block; }
  /* zera as margens-laterais (do layout desktop) p/ os botões centralizarem no overlay */
  .site-header__cta, .site-header__login { margin-left: 0; }
  /* mobile: barra fica só com logo + hambúrguer; o login vai p/ dentro do menu */
  .site-header__login--bar { display: none; }
  .site-header__login--menu { display: inline-flex; }
  /* ao abrir, o .nav-drop alarga até o subitem mais largo — sem isto o
     link "Parcerias" (inline) cola na esquerda da caixa e sai do eixo */
  .nav-drop { text-align: center; }
  .nav-drop__menu {
    position: static;
    translate: none;
    background: none;
    border: 0;
    text-align: center;
    /* mesmo ritmo vertical dos itens do menu (gap 1.6rem do .site-nav) */
    padding: 1.6rem 0 0;
    gap: 1.6rem;
    min-width: 0;
  }
  /* caret indica que Parcerias expande (toque); gira quando aberto.
     margin-right negativo = largura do caret, p/ o texto seguir no eixo central */
  .nav-drop > a::after {
    content: '';
    width: .55em;
    height: .55em;
    margin-left: .5em;
    margin-right: -1.05em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-15%);
    transition: transform .2s;
  }
  .nav-drop.is-open > a::after { transform: rotate(225deg) translateY(-15%); }
  .nav-drop__menu a {
    font-size: .92em;
    opacity: .85;
    padding: 0;
  }
}

@media (max-width: 920px) {
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
  .divided-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .divided-grid--6 > * { border-left: 0 !important; }
  .steps-h { flex-direction: column; gap: 1.6rem; }
  .steps-h::before { left: calc(var(--dot, 2.25rem) / 2); right: auto; top: 1rem; bottom: 1rem; width: 1px; height: auto; }
  .steps-h__item { text-align: left; display: flex; gap: 1rem; align-items: flex-start; padding: 0; }
  .steps-h__num { margin: 0; flex: none; }
  .flow-arrows { flex-direction: column; align-items: center; gap: 1.4rem; }
  .flow-arrows__sep { transform: rotate(90deg); margin: 0; }
  .site-footer__grid { grid-template-columns: 1fr; }
  /* respiro maior após o logo e ritmo uniforme entre endereço/e-mail/telefone */
  .site-footer ul.site-footer__contacts { margin-top: 3rem; gap: 1.4rem; }
  .site-footer__contacts li { align-items: center; }
  .site-footer__contacts li:first-child { align-items: flex-start; }
  .cta-banner { flex-wrap: wrap; }
  .cta-banner .btn { margin-left: 0; }

  /* D9 revisitado: ondas das seções escuras VOLTAM no mobile, mas bem discretas
     (opacidade baixa) — pedido do Gustavo "nem que seja levemente" */
  .section--dark .wave { opacity: .25; }

  /* no mobile a onda cobre o hero inteiro — scrim mais vertical: texto no topo
     protegido, onda segue visível na base (eco do desktop, denso à direita/baixo) */
  .hero::after {
    background: linear-gradient(166deg, rgba(1, 6, 10, .94) 0%, rgba(1, 6, 10, .82) 52%, rgba(1, 6, 10, .12) 92%);
  }

  /* maquininha: o diagrama de callouts absolutos não cabe — vira foto + lista 2 col.
     !important: precisa vencer as coordenadas dos CSS de página (carregam depois). */
  .pos-diagram {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    place-items: stretch;
    gap: 1.1rem 1.6rem;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    max-width: 30rem;
    margin: 2rem auto 0;
  }
  .pos-diagram__circle,
  .pos-diagram__lines { display: none !important; }
  .pos-diagram__img {
    grid-column: 1 / -1;
    position: static !important;
    transform: none !important;
    rotate: -2.85deg;
    margin: 0 auto 1rem;
    width: clamp(10rem, 48vw, 13rem) !important;
  }
  .pos-callout {
    position: relative !important;
    inset: auto !important;
    translate: none !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
    padding-left: 1.05rem;
    font-size: var(--fs-small) !important;
  }
  .pos-callout::after {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: .42em !important;
    width: .45rem !important;
    height: .45rem !important;
  }
}

@media (max-width: 600px) {
  :root { --gutter: 24px; }

  /* grids de ícones: 2 colunas centradas (1 coluna esticada fica "num canto") */
  .icon-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .icon-grid > * { text-align: center; }
  .icon-card__icon { margin-inline: auto; height: 42px; }

  .divided-grid--6, .divided-grid--3 { grid-template-columns: 1fr; }
  .divided-grid > * { border: 0 !important; padding-inline: 0; }
  .hero__actions .btn { width: 100%; }
  /* quebras fixas do artboard (1920) geram linhas órfãs em 360–600 */
  .hero__lead br,
  .cta-banner p br { display: none; }
}

/* ---------- onda azul sutil no rodapé ---------- */
/* eco do efeito das ondas dos banners (mix-blend-mode: screen), bem discreto */
.site-footer > .container { position: relative; z-index: 1; }
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  /* wave-footer.svg tem viewBox recortado SÓ na faixa de arcos lisos e bem espaçados da arte
     (700 150 1220 320) — de fora ficam os DOIS focos concêntricos densos (canto sup.-esq. e
     inf.-dir.) onde as linhas se empilham sub-pixel e o anti-aliasing as quebrava ("pixels
     quebrados"). Com `cover` o recorte é ampliado ~1.5×, então as linhas ficam grossas o
     suficiente p/ renderizar contínuas. */
  background: url(../img/waves/wave-footer.svg) no-repeat right center / cover;
  /* SEM mix-blend-mode: o screen do ::before sobre o fundo do footer somava nos cruzamentos da
     malha → pontos cyan "de cor diferente". O SVG já tem o blend interno (igual ao hero). */
  /* onda SUTIL: opacity baixa + fade na base p/ não encostar na faixa jurídica */
  opacity: .4;
  pointer-events: none;
  z-index: 0;
  -webkit-mask: linear-gradient(to bottom, #000 0, #000 32%, transparent 88%);
          mask: linear-gradient(to bottom, #000 0, #000 32%, transparent 88%);
}
/* mobile: as colunas ocupam a largura toda → onda ainda mais discreta p/ não atrapalhar a leitura */
@media (max-width: 920px) {
  .site-footer::before { opacity: .24; }
}

/* ---------- botão flutuante de WhatsApp (global) ---------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2.2vw, 2rem);
  bottom: clamp(1rem, 2.2vw, 2rem);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .72em 1.25em;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(1, 6, 10, .35);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover {
  background: var(--blue-bright);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(1, 6, 10, .42);
}
.wa-float__icon {
  width: 1.45em;
  height: 1.45em;
  flex: none;
  /* whatsapp.svg é azul → deixa branco sobre o botão azul */
  filter: brightness(0) invert(1);
}
/* telas estreitas: recolhe para botão circular só com o ícone */
@media (max-width: 600px) {
  .wa-float { padding: .9em; gap: 0; }
  .wa-float__label { display: none; }
  .wa-float__icon { width: 1.6em; height: 1.6em; }
}