/* ==========================================================================
   Genthe — ritmo e trilho das páginas de serviço
   --------------------------------------------------------------------------
   As 8 páginas nasceram de 4 estruturas diferentes (servico-*, features-*,
   sp-*, svc-*), cada uma com sua largura: 1920px (na prática, borda a borda),
   1326px e 1200px. Este arquivo alinha todas ao mesmo trilho do componente de
   planos e dá um ritmo vertical fluido, no lugar dos 80px repetidos.

   Trilho:   conteúdo com no máximo 1200px, respiro lateral de 20 a 40px
   Ritmo:    hero (amplo) → contexto (compacto) → planos (amplo) → resultado
             (compacto) → CTA
   ========================================================================== */

:root {
  --svc-rail: 1200px;
  --svc-gutter: clamp(20px, 4vw, 40px);
  --svc-y-hero: clamp(112px, 12vw, 168px);
  --svc-y-lg: clamp(80px, 9vw, 120px);
  --svc-y-md: clamp(64px, 7vw, 96px);
  --svc-y-sm: clamp(52px, 6vw, 76px);
}

/* ---------- Trilho: respiro lateral na seção, largura no contêiner ---------- */
body .servico-hero,
body .servico-when-section,
body .servico-services-section,
body .servico-results-section,
body .features-section,
body .sp-hero,
body .sp-cards,
body .sp-services,
body .sp-results,
body .svc-hero,
body .svc-cards,
body .svc-services,
body .svc-results,
body .gplan-section {
  padding-inline: var(--svc-gutter);
}

.servico-hero > .main-section-wrapper,
.servico-when-section > .main-section-wrapper,
.servico-services-section > .main-section-wrapper,
.servico-results-section > .main-section-wrapper,
.features-section > .container,
.sp-hero > .sp-hero-bg,
.sp-hero-container,
.sp-results-container,
.sp-cards-container,
.svc-hero-container,
.svc-results-container,
.svc-cards-container,
.gplan-container {
  width: 100%;
  max-width: var(--svc-rail);
  margin-inline: auto;
  padding-inline: 0;
}

/* ---------- Ritmo vertical ----------
   O prefixo `body` existe porque cada página de serviço tem um <style> próprio,
   carregado depois deste arquivo: sem ele, os 80px fixos de lá continuariam
   vencendo. É a especificidade mínima para o ritmo valer nas 8 páginas. */
body .servico-hero,
body .features-section,
body .sp-hero,
body .svc-hero {
  padding-top: var(--svc-y-hero);
  padding-bottom: var(--svc-y-md);
}

body .servico-when-section,
body .sp-cards,
body .svc-cards {
  padding-block: var(--svc-y-md);
}

/* Os planos são o centro da página: recebem mais ar dos dois lados */
body .gplan-section {
  padding-block: var(--svc-y-lg);
}

/* O fecho de resultado é curto e vem logo antes do CTA: mais compacto */
body .servico-results-section,
body .sp-results,
body .svc-results {
  padding-block: var(--svc-y-sm);
}

@media (max-width: 767px) {
  :root { --svc-y-hero: clamp(96px, 22vw, 128px); }
}

/* ---------- Títulos: entrelinha ----------
   O Webflow define line-height fixo em px por tag (h2: 60px, h3: 52px), pensado
   para títulos grandes. Num título de card de 20px isso abre um vão de 32px
   entre as linhas, e a segunda linha parece solta. Aqui a entrelinha volta a
   ser proporcional ao tamanho da fonte. */
body :is(.servico-hero, .servico-when-section, .servico-services-section,
         .servico-results-section, .features-section, .sp-hero, .sp-cards,
         .sp-services, .sp-results, .svc-hero, .svc-cards, .svc-services,
         .svc-results) :is(h2, .servico-section-title) {
  line-height: 1.15;
  text-wrap: balance;
}

body :is(.servico-hero, .servico-when-section, .servico-services-section,
         .servico-results-section, .features-section, .sp-hero, .sp-cards,
         .sp-services, .sp-results, .svc-hero, .svc-cards, .svc-services,
         .svc-results) :is(h3, h4) {
  line-height: 1.3;
  text-wrap: balance;
}

/* ---------- Seção genérica depois dos planos ----------
   Seleciona e Integra fecham com uma `.section` comum do Webflow, que usa o
   contêiner de 1326px e 120px de respiro. O seletor de irmão alcança só as
   seções que vêm DEPOIS de um bloco de planos — ou seja, as páginas de serviço
   e a de soluções —, sem tocar na home nem nas institucionais. */
body .gplan-section ~ .section:not(.cta) {
  padding-block: var(--svc-y-sm);
  padding-inline: var(--svc-gutter);
}

body .gplan-section ~ .section:not(.cta) > .container {
  width: 100%;
  max-width: var(--svc-rail);
  margin-inline: auto;
  padding-inline: 0;
}

/* ==========================================================================
   Página de Conteúdo (blogs.html)
   Ela usava o contêiner padrão de 1326px, que a 1440px deixa só 50px de
   margem — o conteúdo quase encosta na borda. Entra no mesmo trilho das
   páginas de serviço para a largura não mudar ao navegar entre elas.
   ========================================================================== */
body .blogs-hero,
body .blogs-hero ~ .section:not(.cta) {
  padding-inline: var(--svc-gutter);
}

body .blogs-hero > .container,
body .blogs-hero ~ .section > .container {
  width: 100%;
  max-width: var(--svc-rail);
  margin-inline: auto;
  padding-inline: 0;
}

body .blogs-hero {
  padding-top: var(--svc-y-hero);
  padding-bottom: var(--svc-y-md);
}

/* A lista de publicações é o conteúdo principal da página */
body .blogs-hero ~ .section.blogs {
  padding-block: var(--svc-y-lg);
}

/* O convite da newsletter fecha a página, logo antes do CTA */
body .blogs-hero ~ .section:not(.blogs):not(.cta) {
  padding-block: var(--svc-y-sm);
}

/* ==========================================================================
   Home
   O hero já usava 1200px, mas as seções seguintes usavam o contêiner padrão
   de 1326px — a página mudava de largura no meio da rolagem. E o ritmo
   vertical oscilava entre 80, 100 e 120px sem critério.
   ========================================================================== */
:root { --home-y: clamp(72px, 8vw, 112px); }

body .hero-2 ~ section > .container,
body .hero-2 ~ section > .w-layout-blockcontainer {
  width: 100%;
  max-width: var(--svc-rail);
  margin-inline: auto;
}

body .section.features,
body .section.genthe-quem-ajudamos,
body .section.genthe-como-trabalhamos,
body .section.pricing-scetion,
body .hero-2 ~ .section.blogs,
body .section.faq {
  padding-block: var(--home-y);
}

/* A seção de depoimentos encosta na de publicações: só respiro em cima */
body .section.testimonials {
  padding-top: var(--home-y);
  padding-bottom: 0;
}

/* Depoimentos e Publicações ficam dentro de .testimonial-blog-section,
   então não são irmãos do hero e escapavam da regra acima. */
body .testimonial-blog-section .section > .container,
body .testimonial-blog-section .section > .w-layout-blockcontainer {
  width: 100%;
  max-width: var(--svc-rail);
  margin-inline: auto;
}

body .testimonial-blog-section .section.blogs {
  padding-block: var(--home-y);
}

body .testimonial-blog-section .section.testimonials {
  padding-top: var(--home-y);
  padding-bottom: 0;
}

/* ==========================================================================
   Alvos de toque no celular
   Links de texto ficavam com 23 a 26px de altura; a recomendação de acesso
   por toque é 44px. A altura mínima entra só no mobile, sem mudar o desktop.
   ========================================================================== */
@media (max-width: 991px) {
  body .gh-hero-link,
  body .footer-link,
  body .gft-contact-link,
  body .footer-up-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}